.cms table.grid-field__table tbody td.col-Title {
    max-width: 8rem;
}

/**
 * @desc Remove the hover background color from the grid-field items, as they're distracting.
 */
.cms tbody tr:hover,
.cms .table tbody tr.even:hover,
.cms .table tbody tr:hover {
    background-color: transparent;
}

/**
 * @desc Add a border, and box-shadow to the inputs in an error state.
 */
.cms .seo-editor-error input,
.cms .seo-editor-error input:hover,
.cms .seo-editor-error input:focus,
.cms .seo-editor-error textarea,
.cms .seo-editor-error textarea:hover,
.cms .seo-editor-error textarea:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.3em rgba(220, 53, 69, .5);
}

.seo-editor-errors {
    font-size: smaller;
    margin-top: 1em;
    color: #dc3545;
}

/* Hide the messages until the parent has the appropriate class */
.seo-editor-message {
    display: none;
}

.seo-editor-error-too-short .seo-editor-message-too-short {
    display: block;
}

.seo-editor-error-too-long .seo-editor-message-too-long {
    display: block;
}

.seo-editor-error-duplicate .seo-editor-message-duplicate {
    display: block;
}