app {
  display: block;
  height: 100%;
  background-color: rgb(248, 250, 252);
}

.main-content.xaf-flex-auto {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.main-content {
  overflow-x: hidden !important;
}

/* Fix first column of pivot grid */
.dx-pivotgrid .dx-pivotgrid-area td,
.dx-pivotgrid .dx-word-wrap .dx-pivotgrid-expanded > span,
.dx-pivotgrid .dx-word-wrap .dx-pivotgrid-collapsed > span {
  white-space: nowrap !important;
}

#blazor-error-ui, #reconnect-modal {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}

#blazor-error-ui {
  bottom: 0;
  right: 0;
  z-index: 100001;
}

#reconnect-modal {
  z-index: 100050 !important;
  opacity: 0.9 !important;
  background-color: #f8fafc;
  top: 0;
  left: 0;
}

#user-chat {
  border-width: 0;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06);
}
#user-chat .dx-avatar {
  background-color: #fff !important;
}
#user-chat .dx-chat-messagegroup-author-name {
  color: #475569;
}
#user-chat .dx-chat-messagebox {
  border-top-color: #e2e8f0;
}
#user-chat ul, #user-chat ol {
  display: block;
  margin-block-start: 0em;
  margin-block-end: -2em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 40px;
}
#user-chat ul {
  list-style-type: disc;
}
#user-chat ol {
  list-style-type: decimal;
}
#user-chat p {
  padding: 0;
}
#user-chat li {
  display: list-item;
  margin-block-start: -1em;
}

.d-none {
  display: none !important;
}

.d-flex, .d-sm-flex {
  display: flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.h-100 {
  height: 100% !important;
}

.grid-cell-object-link {
  text-decoration: underline !important;
}

.xaf-object-caption {
  margin-left: 1rem;
}

.xaf-loading > div {
  background-color: white !important;
}

.PeriodicReportCount {
  color: gray !important;
  margin-left: 1rem;
  font-size: 13px;
}

/* REPORT */
.PeriodicReport {
  margin-bottom: 0px;
}
.PeriodicReport .report {
  border: none !important;
  margin: 20px 0;
  height: calc(100vh - 210px) !important;
}
.PeriodicReport .dxbl-btn-toolbar {
  background-color: white !important;
  margin-top: -20px;
}
.PeriodicReport .report {
  border: none !important;
  margin-top: 20px;
  border: 1px solid rgb(229, 231, 235) !important;
  box-shadow: none !important;
}
.PeriodicReport .report .dxbrv-tab-icon * {
  background-color: black !important;
}
.PeriodicReport .report .dxbrv-gridlayout-side-bar {
  position: relative;
  display: none !important;
}

.btn-primary {
  background-color: white !important;
  border: 1px solid #ccc !important;
  font-size: 16px;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.dxbl-group-header {
  background-color: white !important;
  color: #000 !important;
  font-weight: bold !important;
  font-size: 14px !important;
}

input[type=text], .dxbl-text-edit-template {
  background-color: white !important;
}

button, .dxbl-text-edit-input, dxbl-input-editor, dxbl-spinedit, dxbl-combo-box, dxbl-date-edit {
  border-radius: 5px !important;
}

.dxbl-btn {
  background-color: white !important;
  font-size: 14px !important;
}

tr.dxbs-data-row {
  transition: background-color 100ms;
  background-color: inherit;
  color: inherit;
}
tr.dxbs-data-row:hover {
  background-color: #b6ffff;
  color: var(--bs-dark);
}

.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-checked .dxbl-checkbox-check-element,
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-indeterminate .dxbl-checkbox-check-element {
  background-color: white !important;
}

*[role=tabpanel], *[role=tablist] {
  background-color: white !important;
}

*[role=tablist] * {
  font-family: var(--phoenix-body-font-family) !important;
  font-weight: bold;
  font-size: 14px !important;
}

*[role=tablist] *[role=tab] {
  background-color: white;
  margin: 4px 10px;
  padding: 2px 5px 5px 2px !important;
  border: none !important;
}

*[role=tablist] *[role=tab].dxbl-active,
*[role=tablist] *[role=tab]:hover {
  border-bottom: 3px solid #4ED59B !important;
}

.dxbl-grid table {
  background-color: white !important;
}
.dxbl-grid table tr.dxbl-grid-selected-row {
  background-color: #E2E8F0 !important;
}
.dxbl-grid table tr {
  height: 3rem !important;
}
.dxbl-grid table tr:nth-child(odd) {
  background-color: rgb(248, 250, 252);
}
.dxbl-grid table * {
  font-family: var(--phoenix-body-font-family) !important;
}
.dxbl-grid .dxbl-checkbox-check-element input {
  color: #475569;
}
.dxbl-grid table tfoot * {
  background-color: white !important;
}
.dxbl-grid table th {
  background-color: white !important;
  height: 3rem !important;
  font-weight: bold !important;
}
.dxbl-grid table tr, .dxbl-grid table tbody {
  border-left: none !important;
  border-right: none !important;
}
.dxbl-grid .dxbl-align-right {
  text-align: left !important;
}

.dxbl-image {
  filter: invert(48%) sepia(64%) saturate(250%) hue-rotate(75deg) brightness(70%) contrast(92%) !important;
}

.dxbl-modal-content {
  background-color: white !important;
}

dxbl-group-control {
  border: none !important;
}

.dxbl-group-body-content, .dxbl-tabs, .dxbl-group-header {
  background-color: white !important;
  border: 1px solid rgb(229, 231, 235) !important;
}

.dxbl-group-header {
  border-bottom: none !important;
}

dxbl-dropdown-dialog, .dxbl-dropdown-header, .dxbl-dropdown-footer, dxbl-window-dialog {
  background-color: white !important;
}

dxbl-form-layout-group dxbl-date-edit.dxbl-disabled button, dxbl-form-layout-group dxbl-spinedit.dxbl-disabled button, dxbl-form-layout-group dxbl-combo-box.dxbl-disabled button {
  display: none !important;
}

.xaf-caption-icon-container {
  display: none !important;
}

.xaf-caption-container span {
  font-size: 16px;
}

.xaf-caption-container {
  max-width: 100% !important;
}

.xaf-object-caption {
  margin-left: 0 !important;
}

.xaf-view-caption-lg {
  padding-top: 2px !important;
  padding-bottom: 0 !important;
}

.xaf-auto-close-alert {
  border: 1px solid #60a5fa; /* Tailwind's blue-400 */
  background-color: #dbeafe; /* Tailwind's blue-100 */
  color: #1d4ed8; /* Tailwind's blue-700 */
}