/* UI overrides: save/cancel buttons and editable vs readonly fields. */

.btn[data-action="save"],
.btn[data-name="save"],
a.btn[data-action="save"],
a.btn[data-name="save"] {
    background-color: var(--btn-success-bg);
    border-color: var(--btn-success-border);
    color: var(--btn-success-color);
}

.btn[data-action="save"]:hover,
.btn[data-action="save"]:focus,
.btn[data-action="save"]:active,
.btn[data-action="save"].active,
.btn[data-name="save"]:hover,
.btn[data-name="save"]:focus,
.btn[data-name="save"]:active,
.btn[data-name="save"].active,
a.btn[data-action="save"]:hover,
a.btn[data-action="save"]:focus,
a.btn[data-action="save"]:active,
a.btn[data-action="save"].active,
a.btn[data-name="save"]:hover,
a.btn[data-name="save"]:focus,
a.btn[data-name="save"]:active,
a.btn[data-name="save"].active {
    background-color: var(--btn-success-hover-bg);
    border-color: var(--btn-success-hover-border);
    color: var(--btn-success-color);
}

.btn[data-action="cancel"],
.btn[data-action="cancelEdit"],
.btn[data-name="cancel"],
.btn[data-name="cancelEdit"],
a.btn[data-action="cancel"],
a.btn[data-action="cancelEdit"],
a.btn[data-name="cancel"],
a.btn[data-name="cancelEdit"] {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-border);
    color: var(--btn-danger-color);
}

.btn[data-action="cancel"]:hover,
.btn[data-action="cancel"]:focus,
.btn[data-action="cancel"]:active,
.btn[data-action="cancel"].active,
.btn[data-action="cancelEdit"]:hover,
.btn[data-action="cancelEdit"]:focus,
.btn[data-action="cancelEdit"]:active,
.btn[data-action="cancelEdit"].active,
.btn[data-name="cancel"]:hover,
.btn[data-name="cancel"]:focus,
.btn[data-name="cancel"]:active,
.btn[data-name="cancel"].active,
.btn[data-name="cancelEdit"]:hover,
.btn[data-name="cancelEdit"]:focus,
.btn[data-name="cancelEdit"]:active,
.btn[data-name="cancelEdit"].active,
a.btn[data-action="cancel"]:hover,
a.btn[data-action="cancel"]:focus,
a.btn[data-action="cancel"]:active,
a.btn[data-action="cancel"].active,
a.btn[data-action="cancelEdit"]:hover,
a.btn[data-action="cancelEdit"]:focus,
a.btn[data-action="cancelEdit"]:active,
a.btn[data-action="cancelEdit"].active,
a.btn[data-name="cancel"]:hover,
a.btn[data-name="cancel"]:focus,
a.btn[data-name="cancel"]:active,
a.btn[data-name="cancel"].active,
a.btn[data-name="cancelEdit"]:hover,
a.btn[data-name="cancelEdit"]:focus,
a.btn[data-name="cancelEdit"]:active,
a.btn[data-name="cancelEdit"].active {
    background-color: var(--btn-danger-hover-bg);
    border-color: var(--btn-danger-hover-border);
    color: var(--btn-danger-color);
}

.form-control:not([readonly]):not([disabled]),
select.form-control:not([disabled]),
textarea.form-control:not([readonly]):not([disabled]),
.selectize-input:not(.disabled) {
    background-color: #ffffff;
}

.form-control[readonly],
.form-control[disabled],
fieldset[disabled] .form-control,
.selectize-input.disabled {
    background-color: #eeeeee;
}

.detail .field[data-name="assignedUser"] .avatar,
.detail .field[data-name="assignedUser"] .avatar-link {
    display: none;
}

.field[data-name="assignedUser"] img.avatar-in-input,
.field[data-name="assignedUser"] img.avatar,
.field[data-name="assignedUser"] .avatar-link {
    display: none;
}