// GENERAL
:root {
  --ucan-alert-color: firebrick;
  --ucan-alert-pressed-color: firebrick;
  --ucan-error-color: firebrick;
  --ucan-base-color: steelblue;
  --ucan-accent-color: lightskyblue;
  --ucan-second-color: yellowgreen;
  --ucan-white-color: white;
  --ucan-black-color: black;
  --ucan-gray-color: #989898;
  --ucan-gray-b-color: #484848;
  --ucan-gray-w-color: #e0e0e0;
  --ucan-gray-ww-color: #f5f5f5;
  --none: rgba(0, 0, 0, 0);
}

// region ucan-entity-detail-view

.ucan-entity-basic-header-line {
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: var(--ucan-gray-w-color);
  margin: 0;
}

.ucan-entity-basic-header-container {
  background-color: var(--ucan-gray-ww-color);
  height: 45px;
}

.ucan-entity-basic-header-container .x-displayfield .x-body-el {
  background-color: var(--ucan-gray-ww-color);
}

.ucan-entity-basic-header-container .x-input-el {
  background-color: var(--ucan-gray-ww-color);
}

.ucan-entity-basic-header-container .x-field .x-input-el {
  padding: 0;
  font-size: large;
}

.ucan-entity-detail-view-button-action {
  color: var(--ucan-base-color);
}

// endregion

// region ucan-entity-detail-section-panel-view

.ucan-entity-detail-section-panel-view .x-text-el {
  color: var(--ucan-gray-color);
}

.ucan-entity-detail-section-panel-view .x-panelheader {
  background-color: var(--ucan-white-color);
}

.ucan-entity-detail-section-panel-view > .x-body-wrap-el {
  padding: 5px;
  margin: 5px;
  border: 1px solid var(--ucan-gray-w-color);
  width: auto;
  height: auto;
  flex: none;
}

.ucan-entity-detail-section-panel-view .ucan-entity-detail-association-view-add-button .x-icon-el {
  color: var(--ucan-second-color);
}

.ucan-entity-detail-section-panel-view .ucan-entity-detail-association-view-add-button .x-text-el {
  color: var(--ucan-second-color);
}

// endregion

// region ucan-entity-detail-list-view

.ucan-entity-detail-list-view-filter-button div.x-badge-el {
  top: 0;
}

.ucan-entity-detail-list-view-search-field {
  width: 300px;
  border: 1px solid var(--ucan-gray-w-color);
  background-color: var(--ucan-white-color);
}

.ucan-entity-detail-list-view-search-field input.x-input-el {
  background-color: var(--ucan-white-color);
}

.ucan-entity-detail-list-view-add-button .x-icon-el {
  color: var(--ucan-second-color) !important;
}

.ucan-entity-detail-list-view-add-button .x-text-el {
  color: var(--ucan-second-color);
}

.ucan-entity-detail-list-view-remove-button .x-icon-el {
  color: var(--ucan-alert-color) !important;
}

.ucan-entity-detail-list-view-remove-button .x-text-el {
  color: var(--ucan-alert-color);
}

.ucan-entity-detail-list-view-remove-button.x-disabled .x-text-el {
  color: var(--ucan-gray-color);
}

.ucan-entity-detail-list-view-remove-button.x-disabled .x-icon-el {
  color: var(--ucan-gray-color) !important;
}

// endregion

// region ucan-entity-detail-list-sub-view

.ucan-entity-detail-list-sub-view-filter-button div.x-badge-el {
  top: 0;
}

.ucan-entity-detail-list-sub-view-search-field {
  width: 300px;
  background-color: var(--ucan-white-color);
}

.ucan-entity-detail-list-sub-view-search-field input.x-input-el {
  background-color: var(--ucan-white-color);
}

.ucan-entity-detail-list-sub-view-add-button .x-icon-el {
  color: var(--ucan-second-color) !important;
}

.ucan-entity-detail-list-sub-view-add-button .x-text-el {
  color: var(--ucan-second-color);
}

.ucan-entity-detail-list-sub-view-remove-button .x-icon-el {
  color: var(--ucan-alert-color) !important;
}

.ucan-entity-detail-list-sub-view-remove-button .x-text-el {
  color: var(--ucan-alert-color);
}

.ucan-entity-detail-list-sub-view-remove-button.x-disabled .x-text-el {
  color: var(--ucan-gray-color);
}

.ucan-entity-detail-list-sub-view-remove-button.x-disabled .x-icon-el {
  color: var(--ucan-gray-color) !important;
}

.ucan-entity-detail-list-sub-view-grid {
  .x-header-el {
    border: 0 !important;
  }

  .x-pagingtoolbar-body-el {
    border: 0;
    background-color: var(--ucan-white-color);
  }
}

// endregion

// region ucan-entity-sub-header

.ucan-entity-sub-header-line {
  border-width: 0 0 0 0;
  margin: 0;
}

.ucan-entity-sub-header-container {
  height: 45px;
}

.ucan-entity-sub-header-container .x-field .x-input-el {
  padding: 0;
  font-size: large;
}

// endregion

// region ucan-entity-list-view
.ucan-entity-list-view {

  --ucan-entity-list-view-bg-color: var(--ucan-gray-w-color);
  --ucan-entity-list-view-add-color: var(--ucan-second-color);
  --ucan-entity-list-view-rm-color: var(--ucan-alert-color);
  --ucan-entity-list-view-disable-color: var(--ucan-gray-color);

  .x-grid {
    border-color: var(--ucan-entity-list-view-bg-color);
  }

  .ucan-entity-list-view-grid-container {
    padding: 10px;
    background-color: var(--ucan-entity-list-view-bg-color);
  }

  .ucan-entity-list-view-grid-container .x-pagingtoolbar {
    background-color: var(--ucan-entity-list-view-bg-color);
  }

  .ucan-entity-list-view-grid-container .x-body-wrap-el {
    background-color: var(--ucan-entity-list-view-bg-color);
  }

  .ucan-entity-list-view-grid-container  .x-slider .x-track-el {
    background-color: var(--ucan-entity-list-view-disable-color);
  }

  .ucan-entity-list-view-filter-button .x-sliderfield .x-field{
    background-color: var(--ucan-entity-list-view-disable-color);
  }

  .ucan-entity-list-view-filter-button div.x-badge-el {
    top: 0;
  }

  .ucan-entity-list-view-search-field {
    width: 300px;
    border: 1px solid var(--ucan-gray-w-color);
    background-color: var(--ucan-white-color);
  }

  .ucan-entity-list-view-search-field input.x-input-el {
    background-color: var(--ucan-white-color);
  }

  .ucan-entity-list-view-add-button .x-icon-el {
    color: var(--ucan-entity-list-view-add-color);
  }

  .ucan-entity-list-view-add-button .x-text-el {
    color: var(--ucan-entity-list-view-add-color);
  }

  .ucan-entity-list-view-remove-button .x-icon-el {
    color: var(--ucan-entity-list-view-rm-color);
  }

  .ucan-entity-list-view-remove-button .x-text-el {
    color: var(--ucan-entity-list-view-rm-color);
  }

  .ucan-entity-list-view-remove-button.x-disabled .x-text-el {
    color: var(--ucan-entity-list-view-disable-color);
  }

}
// endregion

// region ucan-pinned-grid
.ucan-pinned-grid {

  --ucan-pinned-grid-view-bg-color: var(--ucan-gray-w-color);

  padding: 10px;
  background-color: var(--ucan-pinned-grid-view-bg-color);

  div.x-header-el{
    height: 45px;
  }

  div.x-gridcell-body-el {
    height: 45px;
  }

}



// region EntityDetailAssociation View

.entity-detail-association-info-text {
  color: var(--ucan-base-color);
  font-size: 16px;
}

// endregion

// region About Dialog

.ucan-about-dialog-view-about-dialog {
  .x-dialog-body-el {
    padding-left: 32px;
    padding-right: 32px;
  }

  .x-toolbar-body-el {
    padding: 8px;
  }
}

.ucan-about-dialog-view-about-header {
  font-size: 11px;
  color: var(--ucan-black-color);
}

.ucan-about-dialog-view-about-text {
  font-size: 14px;
  color: var(--ucan-black-color);
}

// endregion

// region ErrorDialog

.ucan-error-label {
  color: var(--ucan-black-color);
  font-weight: bold;
}

//endregion

// region SimpleErrorDialog

.ucan-simple-error-dialog-view .x-dialogtitle {
  text-indent: 10px;
  color: var(--ucan-alert-color);
  font-size: 20px;
}

.ucan-simple-error-dialog-view-text {
  color: var(--ucan-gray-color);
}

// endregion

// region EntityToDoView

.ucan-todo-view-todo-panel {
  min-width: 250px;

  .x-panelheader > .x-body-el {
    background-color: var(--ucan-white-color);
  }

  .x-paneltitle .x-text-el {
    color: var(--ucan-black-color);
  }
}

.ucan-todo-view-todo-panel-task-label {
  align-self: center;
  cursor: pointer;
}

.ucan-todo-view-todo-panel-task-label-active {
  align-self: center;
  cursor: pointer;
  background: var(--ucan-gray-w-color);
}

// endregion EntityToDoView

// region required label

.ucan-required-label:after {
  content: "*";
  font-size: 14px;
  color: var(--ucan-alert-color);
}

// endregion

// region Pinned Grid

.ucan-fix-grid .x-vertical {
  visibility: visible;
  width: 1px !important;
}

// endregion

// region ToggleField

.ucan-togglefield-off-gray {
  .x-thumb {
    background-color: var(--ucan-gray-color);
  }
}

// endregion