/* THIS FILE IS FOR HYBRID CSS ONLY */
/* Use this file if you need to override a third party class with a OneFace class in a css rule */


/* SfUploader Button override */
.ofUploader .e-btn,
.ofUploader .e-css.e-btn {
  background-color: var(--of-primary500);
  border-color: var(--of-primary500);
  color: var(--of-white500);
  box-shadow: 0px 8px 8px rgb(0 0 0 / 20%);
}

  .ofUploader .e-btn:hover,
  .ofUploader .e-css.e-btn:hover {
    background-color: var(--of-primary300);
    border-color: var(--of-primary300);
    color: var(--of-white500);
  }

  .ofUploader .e-btn:focus,
  .ofUploader .e-css.e-btn:focus {
    background-color: var(--of-primary300);
    border-color: var(--of-primary300);
    color: var(--of-white500);
    box-shadow: none;
    animation: ofButtonClick 0.15s linear;
  }

  .ofUploader .e-btn:active,
  .ofUploader .e-css.e-btn:active {
    background: var(--of-primary400);
    border-color: var(--of-primary400);
    color: var(--of-white500);
    background-repeat: no-repeat;
    box-shadow: inset 1px 3px 6px 0px var(--of-primary500);
  }

  .ofUploader .e-btn.e-active,
  .ofUploader .e-css.e-btn.e-active {
    background: var(--of-primary400);
    border-color: var(--of-primary400);
    color: var(--of-white500);
    background-repeat: no-repeat;
    box-shadow: inset 1px 3px 6px 0px var(--of-primary500);
  }

  .ofUploader .e-btn:disabled,
  .ofUploader .e-css.e-btn:disabled {
    background: var(--of-grey200);
    border-color: var(--of-grey200);
    color: var(--of-grey400);
    box-shadow: none;
  }

  .ofUploader .e-btn:focus-visible:not(.e-outline):not(:active), .ofUploader .e-btn:hover:focus-visible:not(.e-outline):not(:active) {
    outline: var(--of-grey900) 2px solid;
    outline-offset: -1px;
  }

  /* SfUploader Button End*/

  /* SfGrid - EverPresentGridRow */

  .e-headercelldiv div.error {
    display: none;
    margin-left: auto;
    justify-content: center;
    align-items: center;
  }

  .e-headercelldiv div.error > svg {
    width: 16px;
    height: 16px;
    fill: var(--of-red400);
  }

  .e-grid .ofEPGRCommandsDiv .ofImageButton {
    width: 32px;
    height: 32px;
  }

  .e-grid .ofEPGRCommandsDiv {
    display: flex;
    flex-flow: row nowrap;
  }

  .e-grid .e-filterdiv .ofEPGRCommandsDiv {
    padding-left: 12px;
    padding-right: 12px;
    align-items: center;
  }

  /* SfGrid - EverPresentGridRow */

  /* SfGrid - Row Height */

  .e-grid.ofSmallRow .e-rowcell {
    font-size: 12px !important;
  }

  .e-grid.ofSmallRow .e-rowcell:not(.ofGridImageCell):not(.e-gridchkbox) > div:not(.ofImageButton):not(.ofIcon):not(.e-checkbox) {
    margin-top: 2.6px !important;
  }

  .e-grid.ofSmallRow .e-rowcell .ofImageButton {
    width: 18px;
  }

  .e-grid.ofSmallRow .e-rowcell .ofIcon.ofGridColumnIcon,
  .e-grid.ofSmallRow .e-rowcell img {
    width: 12px !important;
    height: 12px !important;
    transform: translate(0%, 0%) !important;
    padding: 2px;
  }

  .e-grid.ofLargeRow .e-rowcell {
    font-size: 18px !important;
  }

  .e-grid.ofLargeRow .e-rowcell .ofImageButton {
    width: 40px;
  }

  .e-grid.ofLargeRow .e-rowcell .ofIcon.ofGridColumnIcon,
  .e-grid.ofLargeRow .e-rowcell img {
    width: 32px !important;
    height: 32px !important;
    transform: translate(0%, 0%) !important;
  }

  .e-grid.ofSmallRow .e-gridcontent .e-checkbox-wrapper,
  .e-grid.ofSmallRow .e-gridcontent .e-css.e-checkbox-wrapper,
  .e-grid.ofSmallRow .e-gridcontent .e-checkbox-wrapper .e-frame,
  .e-grid.ofSmallRow .e-gridcontent .e-css.e-checkbox-wrapper .e-frame,
  .e-grid.ofSmallRow .e-gridcontent .e-checkbox-wrapper .e-check::before,
  .e-grid.ofSmallRow .e-gridcontent .e-css.e-checkbox-wrapper .e-check::before {
    height: 16px;
    width: 16px;
    line-height: 16px;
    font-size: 12px;
  }
  
  .e-grid.ofLargeRow .e-gridcontent .e-checkbox-wrapper,
  .e-grid.ofLargeRow .e-gridcontent .e-css.e-checkbox-wrapper,
  .e-grid.ofLargeRow .e-gridcontent .e-checkbox-wrapper .e-frame,
  .e-grid.ofLargeRow .e-gridcontent .e-css.e-checkbox-wrapper .e-frame,
  .e-grid.ofLargeRow .e-gridcontent .e-checkbox-wrapper .e-check::before,
  .e-grid.ofLargeRow .e-gridcontent .e-css.e-checkbox-wrapper .e-check::before {
    height: 26px;
    width: 26px;
    line-height: 26px;
    font-size: 18px;
  }

  /* SfGrid - Row Height */

  /* SfGrid - Border */

  .ofSection .ofContent > .e-grid {
    border-width: 0px;
  }

  /* SfGrid - Border */

  /* SfTab - Border */

  .e-tab .ofSection {
    border-top-width: 0px;
  }

  .e-tab .ofRow.ofSectionRow .ofSection {
    border-top-width: 1px;
  }

  .e-tab .ofRow.ofSectionRow:has(.ofSection) {
    padding-top: 15px;
  }

  /* SfTab - Border */

  /*--- Start Section Dashboard ---*/

  .e-dashboardlayout .ofHidden {
    display: none;
  }

    /*--- Start Section List Widget ---*/

    .ofPanelContent .e-listview .e-list-item.e-hover {
      background-color: var(--of-grey200);
    }
  
    .ofPanelContent .e-control.e-listview.e-lib.e-touch {
      width: auto;
      height: calc(100% - 20px);
    }
  
    .ofPanelContent .e-listview .e-list-item {
      border-bottom: 6px solid var(--of-grey200);
      transition: border-bottom 400ms;
    }
  
    .ofPanelContent .e-listview .e-list-item.ofExpanded {
      border-bottom: 1px solid var(--of-grey200);
    }
  
    .ofPanelContent .e-listview .e-list-item .ofHidden {
      display: none;
    }
  
    .ofPanelContent .e-listview .e-list-item.e-active {
      background-color: unset;
      color: unset;
    }
  
    .ofPanelContent .e-listview .e-list-item.e-active:hover {
      background-color: var(--of-grey200);
    }
  
    .ofPanelContent .e-listview.e-list-template .e-list-item.e-active .e-list-item-header {
      color: unset;
    }
  
    .ofPanelContent .e-listview .e-list-item .e-list-avatar .ofIcon {
      position: absolute;
      top: 8px;
      left: 15px;
    }
  
    .ofPanelContent .e-listview .e-list-item .e-list-badge .e-badge {
      background-color: transparent;
      font-size: 16px;
    }
  
    .ofPanelContent .e-listview .e-list-item:not(.ofExpandable) {
      cursor: default;
      pointer-events: none;
    }

    /*--- End Section List Widget ---*/

    /*--- Begin Link List Widget ---*/

    .ofLinkListWidget.e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
      text-decoration: underline;
      font-size: 16px;
      line-height: 32px;
      color: var(--of-secondary400);
      font-weight: 300;
    }

    .ofLinkListWidget.e-listview,
    .ofPanelContent .ofLinkListWidget.e-listview .e-list-item {
      border: none;
    }

    .ofLinkListWidget.e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
    .ofLinkListWidget.e-listview.e-list-template .e-list-wrapper.e-list-multi-line {
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .ofPanelContent .ofLinkListWidget.e-listview .e-list-item .e-list-avatar .ofIcon {
      top: 0px;
    }

    /*--- End Link List Widget ---*/

  /*--- End Section Dashboard ---*/