html,
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

body {
  background-color: #fafafa;
}

body.admin-shell {
  overflow: hidden;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid var(--dxds-color-border-success-default-rest);
}

.invalid {
  outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
  color: var(--dxds-color-content-danger-default-rest);
}

.roles-edit-popup {
  height: 90vh;
  max-height: 90vh;
}

/* Responsive popup sizes:
   - On large viewports use a fixed target width but constrained to viewport using vw
   - On small viewports use almost-full width with side margins
*/
.pw-800 {
  width: min(800px, 90vw) !important;
  max-width: 90vw !important;
}

.pw-1200 {
  width: min(1200px, 95vw) !important;
  max-width: 95vw !important;
}

@media (max-width: 899.98px) {
  .pw-800,
  .pw-1200 {
    width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
    margin: 0 1rem !important;
  }
}

.card:not(.toolbar) {
  padding: 1.5rem;
}

.form-group-highlight .dxbl-group {
  border: 2px solid var(--dxbl-group-border-color) !important;
}