header.navbar {
    background-color: #203e6f;
}

form progress {
    width: 5em;
}

table.all-templates-table form,
table.all-users-table form {
    display: inline;
}

span.custom-colors-select ul {
    flex-wrap: wrap;
    padding-left: 0;
    list-style: none;
}

span.custom-colors-select {
    width: 13em;
    display: inline-block;
}

span.custom-colors-select select {
    width: 13em;
}

span.custom-colors-select .btn-close {
    vertical-align: middle;
    width: 0.5em;
    height: 0.5em;
}

span.custom-colors-select ul li {
    flex: 0 0 auto;
    width: auto;
    padding-right: .5em;
    border-bottom: 1px solid lightgrey;

}

.logo-add,
.logo-remove {
    cursor: pointer;
}

.logo-fields {
    display: flex;
    flex-direction:  row;
}


.logo-fields input {
    display: block;
}

div.logo-fields select {
    display: block;
    width: 100%;
    max-width: 13em;
}

/*
CSS for not showing the first logo remove button.
On reflection, I don't think it is needed, but I don't want to figure it out again in case it becomes needed.

td.logos div.logo-fields:first-of-type .logo-remove {
    visibility: hidden;
}
*/

.ui-sortable-placeholder.ui-state-highlight td {
    background-color: yellow;
}

.ui-sortable-helper {
    width: 800px;
}

table.product-table tbody {
    counter-reset: rowNumber;
}

table.product-table thead tr::before {
    display: table-cell;
    content: " ";
    padding-right: 0.3em;
    text-align: right;
}

table.product-table tbody tr::before {
    display: table-cell;
    counter-increment: rowNumber;
    content: counter(rowNumber) ".";
    padding: 0.5em 0.5em;
    text-align: right;
}

.template-properties div.prop-grid {
    display: grid;
    max-width: 50%;
}

.template-properties div.prop-grid span:first {
    grid-column: 1;
}

.template-properties div.prop-grid span:nth-child(2) {
    grid-column: 2;
    text-align: right;
}


table.product-table div.upcharge-grid {
    display: grid;
}

table.product-table div.upcharge-grid span:first {
    grid-column: 1;
}

table.product-table div.upcharge-grid span:nth-child(2) {
    grid-column: 2;
    text-align: right;
}

form table label {
    font-weight: bold;
}

form table select {
    width: 100%;
    max-width: 13em;
}

table div.form-group {
    display: block;
}

tr.invalid-product-id {
    background-color: red;
}

.table-striped>tbody>tr.approved-product:nth-child(odd)>td,
.table-striped>tbody>tr.approved-product:nth-child(odd)>th {
    background-color: green;
    color: white;
}


.table-striped>tbody>tr.approved-product:nth-child(even)>td,
.table-striped>tbody>tr.approved-product:nth-child(even)>th {
    background-color: lawngreen;
}

table.mass-logos-new-logos div.logo-fields {
    display: inline-block;
    padding: 0.5em;
}

div.product-selection {
    width: 100%;
    max-width: 100%;

    div.select-all-container a {
        border-bottom: 1px solid black;
        margin-bottom: 0.5em;
        text-decoration: none;
    }

}

label.required::after {
    content: " *";
    color: red;
}


.program-created-checkbox {
    accent-color: green;
    pointer-events: none;
}

th.enable-price-editing,
th.upcharge_header,
th.broc_header,
th.bill_header,
th.uncheck-all-approved {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}

img.logo-preview {
    max-width: 100px;
    padding-left: 0.3em;
}

img.logo-preview[src$="/.gif"] {
    display: none;
}