/* You can add global styles to this file, and also import other style files */
@import '~handsontable/styles/handsontable.min.css';
@import '~handsontable/styles/handsontable.min.css';
@import '~handsontable/styles/ht-theme-classic-no-icons.min.css';
@import './_hot-icons.scss';

@import '~@clr/icons/clr-icons.min.css';

@import '@cds/core/global.min.css';
@import '@cds/core/styles/theme.dark.min.css';
@import '@clr/ui/clr-ui.min.css';

@import './colors.scss';

/* CSP: replace Clarity's base64 Metropolis @font-face srcs with same-origin files. */
@font-face {
  font-family: 'Metropolis';
  src: url('./assets/fonts/Metropolis-200.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('./assets/fonts/Metropolis-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('./assets/fonts/Metropolis-500.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('./assets/fonts/Metropolis-600.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: text-security-disc;
  src: url('./assets/fonts/text-security-disc.woff') format('woff');
}

// TODO: IMPORTANT CSP WOKRAROUND
// To workaround the issue with the CSP issues while streaming DC on SAS
// we disabled angular component encapsulation and put all styles globally

// EDITOR.COMPONENT

app-editor {
  .card {
    margin-top: 0;
    border: 0;
  }

  .buttonBar {
    padding: 2px 10px 2px 10px;
    align-items: center;
  }

  .testRed {
    color: white;
    background: rgba(255,0,0, 0.8) !important;
  }

  hot-table {
    .firstColumnHeaderStyle button.changeType {
      display: none;
    }

    .handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
      &.primaryKeyHeaderStyle {
        background-color: #306b00b0 !important;
      }
    }

    .primaryKeyHeaderStyle {
      background-color: #306b006e !important;
    }

    th.readonlyCell {
      div {
        opacity: 0.4;
      }
    }

    td.readonlyCell {
      opacity: 0.5
    }
  }

  .submit-reason {
    min-height: 120px;
    max-height: 120px;
    height: 120px;
  }

  .infoBar {
    margin-top:14px;
    background: #495967;
    color: white;
    text-align:center;
    padding: 3px;
    font-size: 16px;

    height: 30px;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    span {
      width: 80%;
    }

    &:hover {
      height: unset;
      white-space: normal;

      span {
        width: unset;
      }
    }
  }

  .pkHeader {
    background: #687682;
    color: #fff;
    margin: -1px -1px -1px -1px;
  }

  .headerBar {
    //  padding: 13px 0px 14px 0px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--clr-vertical-nav-bg-color);
  }

  .error-icon {
    width: 30px;
    height: 30px;
    color: red;
  }

  .btnCtrl {
    display:flex;
    justify-content:flex-end;
  }

  .card-header {
    border-bottom: 1px solid transparent;
  }

  .hidden {
    visibility: hidden;
  }

  .my-drop-zone {
    border: solid 1px lightgray;
    border-radius: 10px;
    background: whitesmoke;
    box-shadow: inset 0px 0px 4px 2px #a7a5a52b;
    height: 50vh;
  }
  .nv-file-over {
    border: solid 2px green;
  } /* Default class applied to drop zones on over */

  .file-drop-text{
    text-align: center;
  }

  .nv-file-over {
    border: solid 2px green;
  } /* Default class applied to drop zones on over */

  .file-drop-text{
    text-align: center;
  }

  @media screen and (max-width: 768px) {

    .progresStatic {
      margin-top:9px!important;
    }

    .progress, .progress-static {
      width: calc(100% - 14px);
    }
  }

  .hotEditor {
    position: relative;
  }

  .excel-parsing {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;

    .details {
      margin: 0;
      position: absolute;
      top: -45px;
    }
  }

  .edit-record-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    z-index: 500;
  }

  @media screen and (max-width: 480px) {

     .progresStatic {
        margin-top:32px!important;
      }

     .card-block, .card-footer {
      padding: 10px 0px 0px 0px;
    }
  }

  .content-area {
    padding: 0 0.8rem 0.8rem 0.8rem !important;
    padding-top: 0;

    // .card {
    //   min-height: calc(100vh - 160px);
    // }
  }

  .drop-area {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    margin: 1px;

    border: 2px dashed #fff;

    z-index: -1;

    span {
      font-size: 20px;
      margin-top: 20px;
      padding: 10px;
      background: #dbdbdb;
      border-radius: 5px;
      color: black;
    }
  }

  #submitBtn, #cancelSubmitBtn {
    width: 150px;
  }

  .view-table {
    font-size: inherit !important;
    color: #1a57bb !important;
  }

  // When width is smaller remove the text from the buttons
  // keep only the icons
  @media (max-width: 992px) {
    .icon-collapse {
      .text {
        display: none;
      }
    }
  }

  // FIXME
  // Let's leave it here for a reference if there
  // is an issue with viewboxes/filter modal overlaying
  // we will remove it if no issues found
  // .filter-modal {
  //   z-index: 1210;
  // }

}
// EDITOR.COMPONENT END

// APP.COMPONENT
my-app {
  app-requests-modal {
    z-index: 10000;
  }

  header.app-header {
    background: $headerBackground !important;
    color: #fff;
  }

  .logo img.without-text {
    width: 30px;
  }

  .logo img.with-text {
    width: 210px;
  }

  .header-hamburger-trigger {
    display: block;
    background: transparent;
    border: 0;
    margin-left: 10px;
  }

  .demo-expired-notice {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh !important;
    width: 100vw !important;
    z-index: 105;
    background: rgba(33, 33, 33, .5);

    .expired-details {
      flex-direction: column;
      align-items: center;
      padding: 30px;
      z-index: 110;
      background: $headerBackground;

      .expired-notice {
        color: #e0e0e0;
        font-size: 16px;

        .mailto {
          color: #8dc53e;
        }
      }
    }
  }

  .main-container .update-key {
    display: flex;
    align-items: center;
    color: white;
    padding: 0px 10px;
    background: #00000026;
  }

  .alert-icon-wrapper {
    margin-top: 0 !important;
  }

  .nav-text {
    margin-right: 20px;
  }

  .sidebar-toggle {
    display: flex;
    height: 100%;
    align-items: center;
    padding-left: 10px;

    clr-icon {
      cursor: pointer;
      width: 30px;
      height: 30px;
    }
  }

  header {
    .header-actions {
      .dropdown {
        position: unset; //without it, when opening user dropdown scrollbar was displaying without reason
      }
    }

    .nav-link:hover {
        color: #fafafa;
    }

    .nav-link.active {
      background: #1d2f3d;
    }
  }

  .notf {
    background: #16a57a;
    color: #fffcfc;
    font-size: 12px;
  }


  .toggle-switch input[type=checkbox]:checked+label:before {
    border-color: #61717D;
    background-color: #61717D;
    transition: .15s ease-in;
    transition-property: border-color,background-color;
  }

  .main-container {
    min-height: 100vh !important;
  }

  .content-container {
    z-index: 0!important;
  }

  .navBarResp {
    display: flex;
    justify-content: center;
    background: #495A67;
    color: #fff;
  }

  .app-loading {
    .loading-logo {
      max-width: 400px;
      width: 100%;
    }
  }

  @media screen and (max-width: 768px) {
    .navBarResp {
      display: flex;
      justify-content: flex-start;
      background: #495A67;
      color: #fff;
    }

    .main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
        padding: 0 .5rem 0 1rem;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: .125rem 0 0 .125rem;
        color: #95c84b;
    }



    .card-block, .card-footer {
      padding: 10px 0px 0px 0px;
    }

    .main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
      padding: 0rem 0rem 0rem 0rem;
    }

  }
}
// ::ng-deep {
.htInvalid {
  background: black!important;
}

@media screen and (max-width:480px) {
  h2 {
    font-size: .7rem!important;
  }
  h3 {
    font-size: .7rem;
  }
}

.nav-link {
  padding: 0rem 1rem 0rem 1rem;
}

body[cds-theme="light"] {
  .btn-primary .btn, .btn.btn-primary {
    border-color: $headerBackground;
    background-color: $headerBackground;
    color: #fff;
  }
}

body[cds-theme="dark"] {
  .btn-primary .btn, .btn.btn-primary {
    border-color: #5e7382;
    background-color: #5e7382;
    color: #fff;

    clr-icon, cds-icon {
      color: #fff
    }
  }
}

.btn-primary .btn, .btn.btn-primary {
  &:disabled {
    opacity: 0.65;
  }
}

.btn {
  cursor: pointer;
  display: inline-block;
  -webkit-appearance: none!important;
  border-radius: .125rem;
  border: 1px solid;
  min-width: 3rem;
  max-width: 15rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.5rem;
  letter-spacing: .12em;
  font-size: .5rem;
  font-weight: 500;
  height: 1.5rem;
  padding: 0 .5rem;
}

.btn.btn-outline:hover {
  border-color: $headerBackground;
  background-color: #495A67;
  color: #fff;
}

.modal-title-wrapper:focus,
.modal-title-wrapper:focus-visible {
  outline: none;
}


body[cds-theme="dark"] {
  .btn.btn-icon.btn-dimmed {
    color: #7295ae;
  }
}

body[cds-theme="light"] {
  .btn.btn-icon.btn-dimmed {
    color: $headerBackground;
  }

  .btn.btn-outline {
    border-color: $headerBackground;
    background-color: transparent;
    color: $headerBackground;
  }
}

.htMobileEditorContainer .inputs textarea {
  font-size: 13pt;
  border: 2px solid #485967;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  position: absolute;
  left: 14px;
  right: 0px;
  top: 0;
  bottom: 0;
  padding: 7pt;
  width: 290px;
}

.htMobileEditorContainer .positionControls {
  width: 333px;
  position: absolute;
  right: 5pt;
  top: 50px;
  bottom: 0;
  display: flex;
  justify-content: center;
}

.htMobileEditorContainer.active {
  display: block;
  height: 120px;
  width: 350px;
}


/* Left and right */

/* Column headers */

body[cds-theme="light"] {
  .wtBorder {
    background-color: #495A67!important;
  }

  .ht_master tr:nth-of-type(odd) > td {
    filter: brightness(0.97);
  }

  .ht_master .htDimmed {
    color: #373737 !important;
    filter: brightness(1) !important;
  }
}

$darkBorderColor: #697c85;

body[cds-theme="dark"] {
  .ht_master tr:nth-of-type(odd) > td {
    filter: brightness(1.2);
  }

  .ht_master:not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
    background-color: #2d4048;
    border-color: $darkBorderColor;
  }

  .handsontable td {
    // border-right: 1px solid #697c85;
    // border-bottom: 1px solid #697c85;
    border-color: $darkBorderColor;
  }

  .handsontable .htDimmed {
    color: #eee !important;
    background-color: #3c5662 !important;
  }

  // Handsontable v17 themes (scrollbars, autocomplete listbox,
  // dropdown/context menus, date-picker calendar, cell editor) solely through
  // its --ht-* CSS variables, which the ht-theme-classic class resolves to
  // light values via light-dark(). The hand-rolled .htDark/.darkTH marker
  // classes can't reach those, so override the variables directly (the
  // official theme-customization path). Scoped to [class*='ht-theme-classic']
  // so it also covers the menu/listbox/calendar portals HT appends to <body>.
  [class*='ht-theme-classic'] {
    color-scheme: dark;

    // Root vars — most derives from these
    --ht-foreground-color: #eee;
    --ht-background-color: #3c5662;            // cells, menus, listbox, calendar bg
    --ht-background-secondary-color: #2d4048;  // scrollbar track, icon buttons
    --ht-border-color: #{$darkBorderColor};
    --ht-read-only-color: #eee;                // read-only/dimmed text

    --ht-header-background-color: #487d96;
    --ht-header-row-background-color: #487d96;
    --ht-header-highlighted-background-color: #3b6b81;
    --ht-header-row-highlighted-background-color: #3b6b81;

    // Scrollbar thumb + cell editor input
    --ht-scrollbar-thumb-color: #{$darkBorderColor};
    --ht-input-background-color: #708b98;
    --ht-input-foreground-color: #fff;
    --ht-cell-editor-background-color: #708b98;
    --ht-cell-editor-foreground-color: #fff;
  }

  .handsontable tr:first-child th, .handsontable tr:first-child td {
    border-color: $darkBorderColor;
  }

  .handsontable .handsontable.ht_clone_top .wtHider {
    border-color: $darkBorderColor;
  }

  .handsontable .changeType {
    background-color: #3c5662;
    border-color: $darkBorderColor;
  }

  .handsontableInput {
    background-color: #708b98;
  }
}

.handsontable .handsontable.ht_clone_top .wtHider {
  padding: 0 0 0px 0!important;
  margin: 0px;
  border-bottom: 3px solid #d6d3d3;
}

body[cds-theme="light"] {
  .content-container {
    // background: red;
    background: #F5F6FF;
  }
}

.datagrid-compact, .datagrid-history{
  .datagrid {
    border-collapse: separate;
    border: 1px solid transparent;
    border-radius: .125rem;
    margin: 0;
    margin-top: 1rem;
    max-width: 100%;
    width: 100%;
    padding: 15px 15px 50px 15px;
  }
  .datagrid-foot {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    height: 1.5rem;
    padding: 0 .5rem;
    line-height: calc(1.5rem - 3px);
    font-size: .45833rem;
    background-color: #fff;
    border-top: 1px solid #ccc;
    border-radius: 0px;
    // border-radius: 0 0 .125rem .125rem;
  }
  .datagrid-footer {
    position: absolute;
    right: 30px;
    top: 1px;
  }
  .datagrid .datagrid-head {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: .083333rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: .5rem 0;
  border: 1px solid #ccc;
  box-shadow: 0 1px 0.125rem hsla(0,0%,45%,.25);
  min-width: 5rem;
  max-width: 15rem;
  border-radius: .125rem;
  visibility: hidden;
  z-index: 1000;
}

.table {
  border-collapse: separate;
  border: 1px solid transparent;
  border-radius: 0px;
  margin: 0;
  margin-top: 1rem;
  max-width: 100%;
  width: 100%;
}

.table th {
  font-size: .45833rem;
  font-weight: 600;
  letter-spacing: .03em;
  vertical-align: bottom;
  border-bottom: 1px solid #ccc;
  text-transform: uppercase;
}

.main-container .content-container {
  min-height: 0px;
  position: relative;
}

// } eng of ng deep
// APP.COMPONENT END

// HOME.COMPONENT
home-component {
  clr-tree-node button {
    white-space: nowrap;
  }

  .card-block {
    height: 100%;
    padding: 0;
  }

  .no-table-selected {
    position: relative;
    height: 100%;
  }

  .spinner-wrapper-fullpage {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
  }
}

// ::ng-deep {
  // .badge.badge-info {
  //     background: #6a9235!important;
  //     color: #fff;
  // }
  clr-icon.is-blue, clr-icon.is-info {
    fill: #6a9235;
  }
// }
// HOME.COMPONENT END

// SIDEBAR.COMPONENT
app-sidebar {
  $sidebarWidth: 272px;

  .clr-vertical-nav .nav-link.active {
      background-color: transparent;
  }

  clr-vertical-nav {
      width: $sidebarWidth;
      min-width: $sidebarWidth;
      height: 100%;
      max-width: 375px;
      position: relative;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);

      .sun-dropdown {
          min-height: 36px
      }

      .nav-tree {
          height: 100%;
          overflow-y: auto;
      }

      &.closed {
          margin-left: -$sidebarWidth;
      }

      .resize-handle {
          position: absolute;
          top: 0;
          bottom: 0;
          right: -3px;
          border-right: 4px solid #80b441;
          cursor: col-resize;
          opacity: 0;
          transition: all 0.1s ease-in-out;

          &:hover {
              opacity: .5;
          }

          &.resizing {
              opacity: 1;
          }
      }

      &.resizing {
          transition: none !important;
      }
  }

  .nav-divider {
      border: 0;
      border-top: 1px solid #d3d3d3;
      margin-bottom: 0;
  }

  .page-title {
      margin: 0;
      font-size: 18px;
      text-align: center;
  }
  .zero-margin{
      margin: 0px !important;
  }
  .user-nav-btn{
      padding: 0px;
      padding-left: 2px;
      padding-right: 2px;
  }

  #sidebarNav {
      z-index: 200;
  }

  @media (max-width: 767px) { //768
      #sidebarNav {
          position: absolute;
          bottom: 0;
          top: 0;
      }
  }
}
// SIDEBAR.COMPONENT END

// XLMAP.COMPONENT
app-xlmap {
  .card {
    margin-top: 0;

    flex: 1;
    display: flex;
    flex-direction: column;
  }

  clr-tree-node button {
    white-space: nowrap;
  }

  .no-table-selected {
    position: relative;
  }

  .header-row {
    .title-col {
      display: flex;
      align-items: center;
    }
    .options-col {
      display: flex;
      justify-content: flex-end;
    }
  }

  .sw {
    margin: 1rem 0rem 0.5rem 1rem;
  }

  .viewerTitle {
    text-align: center;
  }

  .cardFlex {
    display: flex;
    justify-content: center;
  }

  .content-area {
    display: flex;
    flex-direction: column;
  }

  hot-table {
    .primaryKeyHeaderStyle {
      background: #306b006e;
    }
  }

  .drop-area {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    display: flex;
    justify-content: center;

    margin: 1px;

    border: 2px dashed #fff;

    z-index: -1;

    span {
      font-size: 20px;
      margin-top: 20px;
      color: #fff;
    }
  }
}
// XLMAP.COMPONENT END

// MULTI-DATASET.COMPONENT
app-multi-dataset {
  .no-table-selected {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: absolute;
    background: var(--clr-vertical-nav-bg-color);
    z-index: 10;
    width: 100%;
    height: 100%;
    top: 0;
  }

  .header-row {
    padding: 15px 0;
    border-bottom: 1px solid #d3d3d3;
  }

  .dataset-input-wrapper {
    max-width: 500px;
    width: 100%;
  }

  .submit-reason {
    min-height: 70px;
    max-height: 70px;
    height: 70px;
  }

  .log-wrapper {
    margin: 0 10px;
    height: auto;
  }

  .dataset-selection-actions {
    border-top: 1px solid #d3d3d3;
  }

  .licence-limit-notice {
    color: var(--cds-alias-status-warning-dark);
  }

  .submission-results {
    border-bottom: 1px solid #d3d3d3;
  }
}

td.not-matched {
  background-color: #ff000054;
}
// MULTI-DATASET.COMPONENT END

// SUBMITTER.COMPONENT
app-submitted {
  .noBorder {
    border-bottom: 1px solid transparent!important;
  }

  .tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
    background: $headerBackground !important;
  }
  .tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
    border-right: .25rem solid $headerBackground;
    border-bottom: .20833rem solid $headerBackground;
  }

  .no-submitted-tables {
    height: calc(100vh - 200px);
  }
}
// SUBMITTER.COMPONENT END

// APPROVE.COMPONENT
app-approve {
  .column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .datagrid .datagrid-column .datagrid-column-title{
    outline: none!important;
  }

  .links {
    font-weight: 700;cursor: pointer;
  }

  .tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
      background: $headerBackground !important;
  }
  .tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
      border-right: .25rem solid $headerBackground;
      border-bottom: .20833rem solid $headerBackground;
  }

  .noBorder {
    border-bottom: 1px solid transparent!important;
  }

  .approvals-list-wrapper {
    height: 70vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .noapprovals-info-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: calc(100vh - 200px);
  }
}
// APPROVE.COMPONENT END

// HISTORY.COMPONENT
app-history {
  .rejected {
    color: #92201a;
    font-weight: bold
  }

  .accepted {
    color: #105c26;
    font-weight: bold
  }

  .hsCell {
    display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      padding: 7px;
  }
  .btCell {
    display: flex !important;
    justify-content: center !important;
  }

  .verCenter {
      display: flex;
      align-items: center;
      word-break: break-all;
  }

  .load-more {
    input {
      width: 90px;
    }
  }

  #noDataContainer {
    height: calc(100vh - 200px);
  }

  .table-link {
    text-decoration: underline;
    font-weight: bold;
  }
}
// HISTORY.COMPONENT END

// VIEWER.COMPONENT
app-viewer {
  .card {
    margin-top: 0;

    flex: 1;
    display: flex;
    flex-direction: column;
  }

  clr-tree-node button {
    white-space: nowrap;
  }

  .toggle-switch input[type=checkbox]:checked+label:before {
      border-color: $headerBackground;
      background-color: $headerBackground !important;
      transition: .15s ease-in;
      transition-property: border-color,background-color;
  }

  .header-row {
    .title-col {
      display: flex;
      align-items: center;
    }
    .options-col {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

  .sw {
    margin: 1rem 0rem 0.5rem 1rem;
  }

  .infoBar {
    margin-top:10px;
    background: #495967;
    color: white;
    text-align:center;
    padding: 3px;
    font-size: 16px;
  }

  .filterSide {
    margin-top: 26px;
    margin-bottom: 19px;
  }

  .options-dropdown {
    clr-icon {
      margin-right: 5px;
    }
  }

  .dropdown-menu {
    width: 180px;
    margin-top: -18px;
    padding: 0;
  }

  .dropdown-menu .btn {
    width: 100%;
    text-transform: none;
  }

  .cardFlex {
    display:flex;
    justify-content: center
  }

  .noData {
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items: center;
    flex: 1;
  }


  .filterBtn {
    display: flex;
    justify-content: flex-end;
  }

  .editBtn {
    display: flex;
    justify-content: flex-start;
  }

  .btnView{
    margin: 0px!important;
  }

  .content-area {
    padding: 0.5rem !important;

    display: flex;
    flex-direction: column;
  }

  .download-select {
    .clr-select-wrapper {
      max-height: unset !important;
    }
  }

  .refresh-table {
    cursor: pointer;
    margin-left: 5px;
  }

  .libinfo {
    padding: 10px 20px;
    overflow: auto;
  }

  hot-table {
    height: calc(100vh - 200px);

    .handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
      &.primaryKeyHeaderStyle {
        background-color: #306b00b0 !important;
      }
    }

    .primaryKeyHeaderStyle {
      background-color: #306b006e !important;
    }
  }

  .no-table-selected-info {
    background: none;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .web-query {
    max-height: 35vh;

    .web-query-text {
      min-height: 100px;
      max-height: 100px;
      width: 100% !important;
    }

    .web-query-wrapper {
      .clr-control-container {
        width: 100%;
      }

      clr-textarea-container {
        margin: 0 !important;
      }

      .clr-textarea-wrapper {
        margin: 0 !important;
      }
    }
  }

  .table-search-wrapper {
    margin-left: 0;

    form {
      padding-left: 0;
    }

    clr-icon {
      margin-top: 4px;
    }

    clr-input-container {
      margin-top: 0;
    }

    .clr-control-container {
      margin-left: 0;
    }
  }

  // FIXME
  // Let's leave it here for a reference if there
  // is an issue with viewboxes/filter modal overlaying
  // we will remove it if no issues found
  // .filter-modal {
  //   z-index: 1210;
  // }

  @media screen and (max-width: 768px) {
    .filterBtn {
      display: flex;
      justify-content: center;
    }

    .editBtn {
      display: flex;
      justify-content: center;
    }
  }

  @media (min-width: 576px) {
    .row {
        margin-right: 0rem;
        margin-left: 0rem;
    }
  }
}
// VIEWER.COMPONENT END

// GROUP.COMPONENT
app-group {
  .sidebar-height{
      height: 100%;
  }
  .group-info-text{
      display: inline;
      font-size: 20px;
  }
  .group-info{
      border: 1px solid;
      border-radius: 3px;
  }
  .group-info td{
      text-align: center;
  }

  .group-data{
    border: 1px solid;
    border-radius: 3px;
  }

  .group-data{
    min-height: auto;
    h3, h5{
        text-align: center;
  }

  .member-table{
    width: 100%;
  }

  .member-table tbody{
    tr:hover{
        cursor: pointer;
    }
  }
  }
  .table-container{
    overflow: auto;
  }

  @media screen and (max-width: 768px){
    .group-data{
      min-height: unset !important;
    }
  }
}

body[cds-theme="dark"] {
  app-group {
    .group-info {
        background-color: $headerBackground;
        border-color: $headerBackground;
    }

    .group-data {
        background-color: $headerBackground;
        border-color: $headerBackground;
    }

    .member-table tbody{
      tr:hover{
          background-color: #29404b;
      }
    }
  }
}

body[cds-theme="light"] {
  app-group {
    .group-info{
        background-color: #f9f9f9;
        border-color: #a7a7a7;
        box-shadow: 0px 2px 5px #dad7d7;
    }

    .group-data {
        background-color: #f9f9f9;
        border-color: #a7a7a7;
        box-shadow: 0px 2px 5px #dad7d7;
    }

    .member-table tbody{
      tr:hover{
            background-color: #e6e6e6;
        }
    }
  }
}
// GROUP.COMPONENT END

// USER.COMPONENT
app-user {
  .sidebar-height{
    height: 100%;
  }
  .user-info-text{
      display: inline;
      font-size: 20px;
  }

  .user-info{
      border: 1px solid;
      border-radius: 3px;
  }
  .user-info td{
      text-align: center;
  }
  .user-data{
      border: 1px solid;
      border-radius: 3px;
  }
  .user-data{
      min-height: auto;
      h3, h5{
          text-align: center;
      }
  }

  .user-table{
      width: 100%;
  }
  .user-table thead{
      background-color: #dadada;
  }
  .user-table tbody{
      tr:hover{
          cursor: pointer;
      }
  }
  .width-50{
      width: 50%;
  }
  .width-33{
      width: 33%;
  }
  .table-container{
      overflow-y: scroll;
      max-height: 500px;
  }
  @media screen and (max-width: 768px){
      .user-data{
        min-height: unset !important;
      }
  }
}

body[cds-theme="dark"] {
  app-user {
    .user-info {
        background-color: $headerBackground;
        border-color: $headerBackground;
    }

    .user-data {
        background-color: $headerBackground;
        border-color: $headerBackground;
    }

    .user-table tbody{
        tr:hover{
            background-color: #29404b;
        }
    }
  }
}

body[cds-theme="light"] {
  app-user {
    .user-info {
        background-color: #f9f9f9;
        border-color: #a7a7a7;
        box-shadow: 0px 2px 5px #dad7d7;
    }

    .user-data {
        background-color: #f9f9f9;
        border-color: #a7a7a7;
        box-shadow: 0px 2px 5px #dad7d7;
    }

    .user-table tbody{
        tr:hover{
            background-color: #e6e6e6;
        }
    }
  }
}
// USER.COMPONENT END

// REQUESTS-MODAL.COMPONENT
app-requests-modal {
  --line-height: 16px;
  --line-top: 0px;

  .log-wrapper.saslog {
    position: relative;
    white-space: pre;
    font-family: monospace;

    .highlighted-line {
      background-color: rgba(255, 255, 0, 0.2);
    }
  }

  .line-highlight-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    animation: fadeOut 3s forwards;
    z-index: 10;
  }

  .temp-height-setter {
    height: var(--line-height);
  }

  .line-position-setter {
    top: var(--line-top);
  }

  .temp-line-height-calc {
    position: absolute;
    visibility: hidden;
    height: auto;
  }

  .error-highlight {
    background-color: rgba(255, 0, 0, 0.2);
  }

  .warning-highlight {
    background-color: rgba(255, 255, 0, 0.2);
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  /* Add styles for highlighted lines */
  .highlighted-line {
    background-color: #61a2202b;
  }

  .error-line {
    color: #e12200;
  }

  .warning-line {
    color: #f2af00;
  }

  .modal-header--accessible {
    border-bottom: 1px solid #e4e4e4;
    padding: 0 0 .5rem 0;
    margin-bottom: 5px;
  }

  .dropdown-item {
      &.selected {
          background: #d8e3e9;
      }
  }

  .no-reqs {
      border-top: 1px solid #0000001a;
      padding-top: 5px;
      text-align: center;
  }
}

.requests-modal .modal-header--accessible--accessible .close clr-icon {
  display: block !important;
}

.requests-modal .modal-content {
  padding: 20px 10px 5px 10px;
}

.work-tables-dropdown button {
  color: var(--clr-nav-link-color, #8c8c8c) !important;
}

.stack-view {
  height: auto !important;

  //Following lines will fix clarity (requests modal white) issue.
  //Clarity version that has issue is: v12
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.content {
  clr-icon {
      margin-bottom: 5px;
  }

  pre {
      word-break: break-all;
      white-space: pre-wrap;
      max-height: initial;
      overflow: visible;
      border: 0;
  }

  .stack-block-label {
      // Clarity before V3 -----
      // display: none;

      // Clarity V3 -----
      width: 100%;
      padding-left: .6rem !important;

      .stack-view-key {
          display: none !important;
      }
  }
}

.err-links {
  .clr-treenode-children {
      max-height: 55px;
      overflow: auto;
  }
}
// REQUESTS-MODAL.COMPONENT END

// SYSTEM.COMPONENT
app-system {
  .content-box {
    max-width: 1289px;
  }

  .sys-info {
      >div {
          // width: 238px;
          flex: 1;
      }
      div:nth-child(2) {
          margin: 0 30px;
      }
  }

  .admin-action, .user-action {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      border-radius: 6px;
      border: 1px solid #dedede;
      margin-bottom: 5px;

      button {
          min-width: 102px;
      }
  }

  .dark {
      font-weight: bold;
      margin-left: 5px;
  }

  @media (max-width: 993px) {
      .sys-info div:nth-child(2) {
          margin: 0;
      }

      .sys-info div {
          margin: 20px 0;
      }
  }
}
// SYSTEM.COMPONENT END

// QUERY.COMPONENT
app-query {
  .content {
      display: flex;

      .clauses-container {
          display: flex;
          flex-direction: column;

          .clause-logic {
              display: flex;
              justify-content: center;
              flex-direction: column;

              padding: 15px;
          }

          .clause-query {
              padding: 30px 0px 20px 20px;
              display: flex;
              justify-content: center;
              flex-direction: column;
              position: relative;

              & > .clr-row {
                  justify-content: space-between;

                  &:not(:last-child) {
                      padding-bottom: 15px;
                      margin-bottom: 15px;
                      border-bottom: 1px solid rgba(0, 0, 0, 0.16)
                  }
              }

              .remove-group-clause-button {
                  position: absolute;
                  top: 0px;
                  right: 10px;
                  color: gray;
              }

              .variable-col {
                  display: flex;
                  align-items: flex-start;
                  padding-bottom: 1px;

                  .datalist-wrapper {
                      width: 100%;

                      input {
                          width: 100%;
                      }
                  }
              }

              .operator-col {
                  display: flex;
                  align-items: flex-start;

                  clr-select-container {
                      height: 45px;
                      margin-top: 0;
                      width: 100%;
                  }
              }

              .value-col {
                  display: flex;
                  align-items: flex-start;
                  padding-bottom: 1px;

                  .checkbox-vals {
                      width: 100%;
                      padding: 0px 5px;
                      border-bottom: 1px solid rgba(0, 0, 0, 0.3);

                      clr-checkbox-container {
                          margin-top: 0;
                      }

                      section {
                          max-height: 120px;
                          overflow-y: scroll;
                      }
                  }

                  .single-field-vals {
                      width: 100%;

                      .clr-control-container {
                          width: 100%;

                          .clr-input-wrapper {
                              max-width: none;

                              .clr-input-group {
                                  width: 100%;
                              }
                          }
                      }

                      & > input {
                          width: 100%;
                      }

                      input[type=time] {
                          width: 100%;
                          padding-right: 17px;
                      }
                  }

                  .range-vals {
                      width: 100%;

                      .clr-control-container {
                        width: 100%;

                        .clr-input-wrapper {
                            max-width: none;

                            .clr-input-group {
                                width: 100%;
                            }
                        }
                      }

                      .from {
                          margin-bottom: 10px;

                          & > input {
                              width: 100%;
                          }

                          input[type=time] {
                              width: 100%;
                              padding-right: 17px;
                          }
                      }

                      .from, .to {
                          min-width: 100px;

                          & > input {
                              width: 100%;
                          }

                          input[type=time] {
                              width: 100%;
                              padding-right: 17px;
                          }
                      }
                  }

                  .contains-vals {
                      width: 100%;

                      .clr-control-container {
                        width: 100%;

                        .clr-input-wrapper {
                            max-width: none;

                            .clr-input-group {
                                width: 100%;
                            }
                        }
                      }

                      & > input {
                          width: 100%;
                      }

                      input[type=time] {
                          width: 100%;
                          padding-right: 17px;
                      }
                  }
              }

              .clause-buttons {
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  flex-direction: row;
                  align-items: center;

                  button {
                      min-width: auto;
                  }
              }
          }
      }
  }

  .invalid-clause {
      border-left: 2px solid #d94b31;
  }

  .clause-row {
      clr-icon {
          margin: 0;
      }
  }


  pre[class*="language-"] {
      padding: 8px;
      margin: 0;
      border-radius: 1px;

      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 66px;

      position: relative;

      span.spinner {
          position: absolute;
          left: 10px;
          top: 10px;
      }

      code {
          white-space: pre-wrap;
          word-break: break-word;
      }
  }

  .input-val {
      border: 0px;
      background: #fbf8f8;
      border-bottom: 1px solid #999999;
  }

  clr-date-container {
      margin-top: 2px !important;
  }

  input[type="time"] {
      border: 0;
      background: transparent;
      border-bottom: 1px solid #b3b3b3;

      &:focus {
          outline: none;
      }
  }

  .in-values-modal {
      .modal-footer {
          border-top: 1px solid #d8d8d8;
          margin-top: 10px;
      }
  }

  .progress, .progress-static {
      background-color: transparent;
      width: 100%;
      height: 4px;
      top: 3px;
  }
}

body[cds-theme="light"] {
  app-query {
    .clause-logic {
        background: #e9e9e9;
    }

    .clause-query {
        background: #fbf8f8;
    }
  }
}

body[cds-theme="dark"] {
  app-query {
    .line-numbers {
        border-color: #989797 !important;
    }

    .clause-logic {
      background: #192a30;
    }

    .clause-query {
        background: #263e48;
    }
  }
}
// QUERY.COMPONENT END

// LOGIN.COMPONENT
app-login {
  .sideBarProps {
    background: $headerBackground !important;
    color: #e0e0e0;
  }

  .sideBarProps h2, .sideBarProps h3, .sideBarProps h4, .sideBarProps h5, .sideBarProps input {
    color: #e0e0e0;
  }

  .sideBarProps button {
    border-color: wheat!important;
  }

  .sideBarProps a {
    color: #e0e0e0;
  }

  .login-sidebar-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;

    >* {
      pointer-events: auto;
    }

    .login-sidebar {
      width: 400px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      background: #fff;
      border-right: 1px solid #ddd;
      padding: 40px;

      form.login {
        z-index: 101;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

        .title {
          font-size: 32px;
          letter-spacing: normal;
          line-height: 36px;
          .welcome {
            margin-top: 36px;
          }
        }

        .login-group {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          padding: 48px 0 0 0;

          >* {
            margin: 6px 0 18px 0;
          }
        }
      }

      -webkit-transform: translateX(-400px);
      transform: translateX(-400px);

      transition: -webkit-transform .3s ease;
      transition: transform .3s ease;
      transition: transform .3s ease, -webkit-transform .3s ease;
    }

    &.active {
      .login-sidebar {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        z-index: 101;
      }
      .overlay {
        display: block;
      }
    }

    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;

      background: rgba(33, 33, 33, .5);
      z-index: 100;
    }
  }

  .login-logo {
    max-width: 200px
  }
}

.login-sidebar-wrapper .login-group {
  .clr-control-container, .clr-input-group, .username, .password {
    width: 100%;
  }

  .clr-input-wrapper {
    max-width: none;
  }

  button {
    max-width: none;
  }
}
// LOGIN.COMPONENT END

// TERMS.COMPONENT
app-terms {
  :host {
    height: 100%;
    background: #f5f6ff;
  }

  .clr-checkbox-wrapper {
    &.disabled {
      opacity: 0.5;
    }
  }


  .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 0;

    .card-block {
      flex: 1;
      overflow: auto;
    }
  }

  .accept-checkbox {
    padding: 10px 15px
  }
}
// TERMS.COMPONENT END

// DEPLPOY.COMPONENT
app-deploy {
  .card {
    margin-top: 0;
  }

  .btn {
      margin-top: 10px;
  }

  .log-wrapper {
      width: 100%;
      background: #f0f0f0;
      border: 1px solid #c9c9c9;
      padding: 10px;
      overflow: auto;
      white-space: pre-wrap;
  }

  #contexts-btn {
      padding: 0;
      min-width: 30px;
      margin-left: 10px;
      height: 30px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding-top: 3px;
  }

  .validation-bar {
      display: flex;
      margin-top: 20px;
      align-items: center;

      clr-icon {
          margin-right: 5px;
      }
  }

  .autodeploy-section {
      padding: 0px 15px;

      .clr-checkbox-wrapper {
          margin: 20px 0 20px 0;
      }

      .btn-autodeploy {
          display: block;
          margin: 15px 0 15px 0;
      }
  }
}
// DEPLOY.COMPONENT END

// ALERTS.COMPONENT
app-alerts {
  clr-alerts {
    display: block;
  }
}
// ALERTS.COMPONENT END

// MANUAL-DEPLOY.COMPONENT
app-manual-deploy {
  .clear-memory-button {
    right: 10px;
    top: 2px;
  }
}
// MANUAL-DEPLOY.COMPONENT END

// LINEAGE.COMPONENT
app-lineage {
  .toggle-switch input[type=checkbox]:checked+label:before {
    border-color: $headerBackground;
    background-color: $headerBackground !important;
    transition: .15s ease-in;
    transition-property: border-color,background-color;
  }

  #graph{
      height: calc(100vh - 195px);
      overflow: hidden;
      text-align: center;
      display: block;
      width: 100%;
      border: 1px solid #e4e4e4;
      margin-top: 10px;
  }

  .selection-wrapper {
      width: 100%;
      max-width: 670px;
  }

  .column-active {
      background: #d8e3e9;
      color: black;
  }

  .content-area {
      padding: 0.5rem !important;

      .card {
          min-height: calc(100vh - 120px);

          .card-block {
              padding: 0.5rem 0.35rem !important;
          }
      }
  }

  clr-tree-node button {
      white-space: nowrap;
  }

  .btn-group.direction {
      margin-left: var(--cds-global-space-6);
  }

  .graph-render-spinner {
      position: absolute;
      top: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 10px;
  }

  .biglineage-row {
      display: flex;
      justify-content: space-between;
      align-items: center;

      margin-bottom: 20px;
  }

  .modal-footer {
      p {
          margin: 0;
      }
  }

  .lineage-title-wrapper {
      left: 12px;
  }

  .max-depth-input {
      width: 100%;
  }

  @media (max-width: 768px) {
      .toggle-switch-container {
          margin-bottom: 20px;
      }
  }
}
// LINEAGE.COMPONENT END

// DC-TREE.COMPONENT
dc-tree {
  clr-tree-node button {
    white-space: nowrap;
  }

  clr-tree {
    .clr-tree-node-content-container {
      &:focus {
        .clr-treenode-link {
          background: #e8e8e8;
          background: var(--clr-tree-link-hover-color, #e8e8e8);
          text-decoration: none;
        }
      }
    }
  }
}
// DC-TREE.COMPONENT END

// METADATA.COMPONENT
app-metadata {
  .objects-col{
    height: 75vh;
    overflow: scroll;
    border: 1px solid #cccccc;
    border-radius: 4px;
  }

  .cols-head {
    border: 1px solid #cccccc;
    padding: 10px;
    display: flex;
  }
  .object-text {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: 10px;
    flex: 1;
  }
  .repo-dropdown{
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 10px;
  }
  .clr-accordion-title{
    width: 100%;
  }
  .float-right{
    margin: 0px;
    float: right;
  }
  .full-width{
    width: 100%;
  }
  .object-uri{
    margin: 0px;
    margin-top: 5px;
  }
  .object-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 3px;
    padding-right: 3px;
  }
  .object-header:hover{
    border-radius: 3px;
  }
  .datagrid-host{
    display: unset !important;
  }

  .card {
    margin-top: 0;

    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .content-area {
    padding: 0.5rem !important;

    display: flex;
    flex-direction: column;
  }
}

body[cds-theme="dark"] {
  app-metadata {
    .object-header:hover {
      background-color: #405560;
    }
  }
}

body[cds-theme="light"] {
  app-metadata {
    .objects-col {
      background: white;
    }

    .object-header:hover {
      background-color: #d8e3e9;
    }
  }
}
// METADATA.COMPONENT END

// LICENSING.COMPONENT
app-licensing {
  height: calc(100% - 96px);
  padding: 20px 20px;

  .card {
    margin-top: 0;
  }

  .key-error {
    font-size: 16px;
  }

  .misskey {
    color: #E74C3C;
  }

  .license-key-form, .activation-key-form {
    padding: 0;

    .clr-control-container {
      width: 100%;

      textarea {
        width: 100%;
        height: 170px;
        max-height: 170px;
        min-height: 170px;
        resize: none;
      }
    }
  }

  .apply-keys {
    height: 40px;
  }

  .drop-area {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border: 2px dashed #b2b2b2;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 0;
  }

  clr-tabs button {
    box-shadow: none !important
  }
}
// LICENSING.COMPONENT END

// VIEWBOXES.COMPONENT
app-viewboxes {
  .licence-notice {
    font-size: 14px;
    display: block;
    opacity: 0.6;}

  clr-modal.root-modal {
    .modal-body-wrapper {
      height: calc(100% - 60px);
    }

    .modal-content {
      height: 80vh;
    }

    .modal-body {
      max-height: 100%;
      height: 100%;
    }

    z-index: 1300;
  }

  dc-tree {
    overflow: auto;
    flex: 1;
  }

  .tooltip-long {
    word-break: break-word;
  }

  .add-new {
    width: 50%;
    padding-right: 5px;

    > p {
      margin-bottom: 1px;
    }
  }

  .viewbox-limit-notice {
    opacity: .7;
    color: #E74C3C
  }

  .currently-open {
    width: 50%;

    .open-viewbox {
      cursor: pointer;
      padding: 3px 5px;

      &.selected {
        background: #3c85002e;
      }
    }
  }

  .viewboxes-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 999; // make it 1020 if there are issues
  }

  .viewbox {
    min-width: 200px;
    min-height: 200px;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: all;

    display: flex;
    flex-direction: column;

    border-top-left-radius: 3px;
    border-top-right-radius: 3px;

    box-shadow: 0px 0px 10px -3px black;

    &.focused {
      z-index: 1100;
      outline: none;
    }

    .content {
      border: 1px solid #0000004d;
      background: white;
      height: 100%;
      width: 100%;
      flex: 1;
      overflow-x: auto;
    }

    .drag-handle {
      width: 100%;
      min-height: 20px;
      background-color: #3c8500;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;

      color: #fff;
      padding: 0 5px;

      pointer-events: all;

      .table-title {
        white-space: pre-wrap;
        word-break: break-all;
      }

      .actions {
        display: flex;
        min-width: 35px;

        clr-icon {
          cursor: pointer;
          margin-left: 5px;

          &:hover {
            transform: scale(1.3);
          }
        }
      }
    }

    .click-icon {
      cursor: pointer;

      &:hover {
        transform: scale(1.3);
      }
    }

    .dragHandle {
      position: absolute;
      // bottom: -8px;
      // right: -8px;
      // background-color: black;
    }

    .dragHandle.corner {
      width: 15px;
      height: 15px;
      cursor: nwse-resize;
    }

    .dragHandle.right {
      width: 2px;
      height: 100%;
      cursor: ew-resize;
    }

    .dragHandle.bottom {
      height: 2px;
      width: 100%;
      cursor: ns-resize;
    }

  }

  .cols-search {
    width: 100%;
    margin-top: 5px;

    border: 1px solid #00000047;
    border-radius: 3px;
  }

  .cols-list {
    border: solid 1px #ccc;
    min-height: 60px;
    border-radius: 4px;
    overflow: hidden;
    display: block;
    width: 400px;
    max-width: 100%;
    margin-top: 5px;
  }

  .col-box {
    padding: 2px 10px;
    border-bottom: solid 1px #ccc;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: move;
    font-size: 14px;

    &.search:focus {
      background: #0000001a;
    }

    &.primaryKeyHeaderStyle {
      background: #306b0024;
    }
  }

  .cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
    z-index: 1300 !important;
  }

  .cdk-drag-placeholder {
    opacity: 0;
  }

  .cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }

  .col-box:last-child {
    border: none;
  }

  .cols-list.cdk-drop-list-dragging .col-box:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }

  // FIXME
  // Let's leave it here for a reference if there
  // is an issue with viewboxes/filter modal overlaying
  // we will remove it if no issues found
  // clr-modal.filter-modal {
  //   ::ng-deep {
  //     .modal {
  //       z-index: 1210 !important;
  //     }
  //   }
  // }

  .disabled {
    opacity: 0.5;
    transform: none !important;
    pointer-events: none;
  }

  .filter-active {
    color: #0072a3;
  }

  hot-table {
    .firstColumnHeaderStyle button.changeType {
      display: none;
    }

    .handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
      &.primaryKeyHeaderStyle {
        background: #306b00b0;
      }
    }

    .primaryKeyHeaderStyle {
      background: #306b006e;
    }

    th.readonlyCell {
      div {
        opacity: 0.4;
      }
    }

    td.readonlyCell {
      opacity: 0.5
    }
  }
}

body[cds-theme="dark"] {
  app-viewboxes {
    .currently-open .open-viewbox:hover {
      background: #314b57;
    }

    .cols-list {
      background: #314b57;
      color: #fff;
      border-color: #858585;
    }

    .col-box {
      background: #314b57;
      border-color: #858585;
      color: inherit;
    }
  }
}

body[cds-theme="light"] {
  app-viewboxes {
    .currently-open .open-viewbox:hover {
      background: #e8e8e8;
    }

    .cols-list {
      background: #fff;
    }

    .col-box {
      background: #fff;
    }
  }
}
// VIEWBOXES.COMPONENT END

// AUTOMATIC-DEPLOY.COMPONENT
app-automatic-deploy {
  .dc-loc-input-wrapper {
    input {
      width: 500px;
    }
  }

  .auto-deploy {
    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);

    z-index: 100;
  }

  .spinner-box {
      width: 400px;
      padding: 20px;
      border-radius: 3px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      box-shadow: 1px 1px 8px 0px #00000082;

      .buttons {
          display: flex;
          justify-content: space-between;
          width: 100%;
      }
  }

  .deploy-status-row {
      display: flex;
      align-items: center;
      align-self: flex-start;

      p {
          margin: 0 0 0 10px;
      }
  }

  .deploy-success {
      color: #6ECF44;
  }

  .deploy-error {
      color: #E74C3C;
      // width: 20px;
      // height: 20px;
  }

  .deploy-undeterminated {
      color: #cacaca;
  }

  hr {
      border: 0;
      border-bottom: 1px solid #00000045;
  }
}
// AUTOMATIC-DEPLOY.COMPONENT END

// INFO-MODAL.COMPONENT
app-info-modal {
  .clr-abort-modal {
    .modal {
        z-index: 2050;
    }

    .modal-title-wrapper {
        width: 100%;
    }

    .modal {
        z-index: 2050;
    }
  }

  .modal-title {
      position: relative;
  }

  .sasService {
      position: absolute;
      top: 0px;
      right: 10px;
      margin: 0;
  }

  .modal-footer {
      position: relative;
  }

  .systext {
      overflow: auto;
      margin-top: 20px;
      padding: 10px 0;
      border-top: 1px solid #dcdcdc;

      p {
          margin-top: 0;
          word-wrap: break-word;
      }
  }
}
// INFO-MODAL.COMPONENT END

// EDIT-RECORD.COMPONENT
app-edit-record {
  .record-edit-modal {
    .column-entry {
      display: flex;
      justify-content: space-between;

      .name-input-row {
        width: 100%;
        max-width: 260px;

        .cell-desc {
          margin-right: 30px;
          margin-top: 10px;
        }
      }

      .inputs-wrapper {
        flex: 1;
        display: flex;
        align-items: center;

        >*:not(.date-field):not(clr-select-container) {
          flex: 1;
        }
      }

      p {
        margin-top: 0px;
      }

      .clr-textarea-wrapper {
        margin-top: 0 !important;
      }

      .clr-form-control {
        margin-top: 0px !important;
      }

      app-soft-select {
        display: block;
        width: 224px;
        border: 1px solid #999;
        color: #000;
        padding: calc(.25rem + 2px) .5rem;
        border-radius: .125rem;
        font-size: .541667rem;
        margin-right: 6px;

        input {
          width: 100%;
          border: 0;

          &:focus {
            background: none;
            border: 0 !important;
          }

          &::-webkit-outer-spin-button,
          &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }
        }
      }

      &:first-child p:first-child {
        margin-top: 0;
      }
    }

    .date-field {
      display: flex;
      align-items: center;
    }

    // Match clr styling
    .date-input {
      width: 100%;
      margin: 0;
      padding: calc(.25rem + 2px) .5rem;
      font-size: 0.65rem;
      line-height: 1rem;
      background: var(--clr-forms-textarea-background-color, #fafafa);
      color: var(--clr-forms-text-color, #21333b);
      border: 1px solid var(--clr-forms-border-color, #999);
      border-radius: .125rem;
      // color-scheme themes the native parts
      color-scheme: light;

      &:focus {
        outline: none;
        border-color: var(--clr-forms-focused-color, #0072a3);
      }

      &.invalid-data {
        border-color: var(--clr-forms-invalid-color, #e12200);
        color: var(--clr-forms-invalid-color, #e12200);
      }
    }

    .modal-body {
      padding-bottom: 10px;
    }

    clr-select-container {
      border: 1px solid #999;
      color: #000;
      border-radius: .125rem;
      margin-right: 5px;

      .clr-select-wrapper {
        max-height: unset;

        &::after {
          top: 15px;
        }
      }

      select {
        height: auto;
        padding: 10px;
        padding-right: 20px;
        border: 0 !important;

        &:focus {
          background: 0 0 !important;
        }
        &:hover {
          background: transparent;
        }
      }
    }

    clr-input-container {
      width: 224px;
      border: 1px solid #999;
      color: #000;
      padding: calc(.25rem + 2px) .5rem;
      border-radius: .125rem;
      font-size: .541667rem;
      margin-right: 6px;

      .clr-input-group {
        width: 100%;
        border: 0;
      }

      input {
        width: 100%;
        border: 0;

        &:focus {
          background: none;
          border: 0 !important;
        }

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
      }

      &.invalid-data {
        border-color: red;
      }
    }

    .modal-dialog {
      width: 80vw;
    }

    .clr-control-container {
      width: 100%;

      textarea {
        width: 100%;
        resize: none;
        border-color: #999;

        &.invalid-data {
          border-color: red;
          outline: 0;
        }

        &.not-char {
          font-family: "Lucida Console", Monaco, monospace;
        }
      }
    }

    .generate-record-url {
      right: 40px;
      top: 40px;
      font-size: 12px;
    }

    .generate-record-url-button {
      right: 25px;
      top: 5px;
    }

    .modal-header--accessible {
      padding: 0.5rem 0.75rem 1rem;
    }

    .modal-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      // height: 65px;

      .alert {
        margin: 0;
      }
    }
  }

  .prev-next {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    p {
      margin: 0;
    }

    button {
      margin: 0;
    }
  }

  .focusable {
    &:focus {
      box-shadow: 0 0 3px 0px #5aa220;
    }
  }

  .entry-input-left-offset {
    left: -30px;
  }

  .validation-info-alert {
    width: 310px
  }
}
// EDIT-RECORD.COMPONENT END

// AUTOCOMPLETE.COMPONENT
app-autocomplete {
  .input-val {
    border: 0px;
    background: transparent;
    border-bottom: 1px solid #999999;
  }

  input {
    width: 100%;
    outline: none;

    &::-webkit-calendar-picker-indicator {
        margin-top: -5px;
    }
  }

  .autocomplete-wrapper {
    .overlay {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1500;
    }

    .datalist {
        position: fixed;
        box-shadow: 0px 3px 10px -1px #0000002b;
        overflow: auto;
        z-index: 2000;

        option {
            padding: 5px 10px;
            cursor: pointer;

            &:hover {
                background: #0000000f;
            }

            &.focused {
              background: #0000000f;
            }
        }
    }

    .load-more {
      text-align: center;
      border-top: 1px solid #e6e6e6;
    }
  }
}

body[cds-theme="dark"] {
  app-autocomplete {
    .datalist {
      background: #21333b;
      border: 1px solid #575757;
    }

    input {
      color: #fff;
    }

    .datalist option {
      color: #fff
    }
  }
}

body[cds-theme="light"] {
  app-autocomplete {
    .datalist {
      background: #fff;
    }
  }
}
// AUTOCOMPLETE.COMPONENT END

// CONTACT-LINK.COMPONENT
app-contact-link {
  .unset {
    color: unset;
  }
}
// CONTACT-LINK.COMPONENT END

// DATASET-INFO.COMPONENT
app-dataset-info {
  .modal-body {
    clr-tabs {
      max-height: 70vh;
    }

    .tab-content {
      width: 100%;
      overflow: auto;

      .datagrid-outer-wrapper {
        width: 100%;
      }
    }
  }

  clr-modal {
    .modal-dialog {
      height: 100%;
    }
  }

  .clickable-row {
    cursor: pointer;
  }

  .datagrid-table .datagrid-cell:focus {
    outline: none;
    outline-offset: 0;
  }
}
// DATASET-INFO.COMPONENT END

// UPLOAD-STARTER.COMPONENT
app-upload-stater {
  display: block;

  p {
      margin: 0;
      text-align: center;
  }
}
// UPLOAD-STARTER.COMPONENT END

// APPROVE-DETAILS.COMPONENT
app-approve-details {
  .loader {
    display:flex;
    justify-content: center;
    height:75vh;
    align-items:center;
    flex-direction:column
  }
  .modalLarge {
      width: 50rem!important;
  }

  .addedRow {
    border: 1px solid rgba(9, 77, 117, 0.2);
    border-radius: 5px;
  }

  .deletedRow {
    border: 1px solid rgba(70, 71, 70, 0.2);
    border-radius: 5px;
  }

  .updatedRow {
    border: 1px solid rgba(9, 117, 9, 0.2);
    border-radius: 5px;
  }

  .table {
    border: 0px solid;
  }

  .ch {
    background: rgba(0,0,0,.1);
    border: 1px solid rgba(104, 100, 0, 0.4);
    border-radius: 5px;
  }

  .ch:hover {
  background: rgba(252, 135, 120, 0.4);
  }

  .tooltip .tooltip-content.tooltip-top-right, .tooltip.tooltip-top-right>.tooltip-content, .tooltip>.tooltip-content {
      font-size: .54167rem;
      font-weight: 400;
      letter-spacing: normal;
      background: $headerBackground;
      border-radius: .125rem;
      color: #f0f1ec;;
      line-height: .75rem;
      margin: 0;
      padding: .375rem .5rem;
      width: 235px;
      position: absolute;
      top: auto;
      bottom: 100%;
      left: 12px;
      right: auto;
      border-bottom-left-radius: 0;
      margin-bottom: .66667rem;
  }

  .tooltip .tooltip-content.tooltip-top-right:before, .tooltip.tooltip-top-right>.tooltip-content:before, .tooltip>.tooltip-content:before {
      position: absolute;
      bottom: -.375rem;
      left: 0;
      top: auto;
      right: auto;
      content: "";
      border-left: .25rem solid $headerBackground;
      border-top: .20833rem solid $headerBackground;
      border-right: .25rem solid transparent;
      border-bottom: .20833rem solid transparent;
  }

  .table {
  border: 0px solid;
  }

  .toggle-switch input[type=checkbox]:checked+label:before {
      border-color: $headerBackground;
      background-color: $headerBackground !important;
      transition: .15s ease-in;
      transition-property: border-color,background-color;
  }

  .tableCont {
    overflow:auto;
    margin: 15px 10px 10px 10px;

    td {
      word-break: break-word;
    }
  }

  .approvalInfo {
    display: flex;
    justify-content: flex-end
  }

  .approvalBack {
    display: flex;
    justify-content: flex-start;
  }

  @media screen and (max-width:768px) {
    .approvalInfo {
      display: flex;
      justify-content: center;
      margin-top: 15px;

    }

    .approvalBack {
      display: flex;
      justify-content: center;
      margin-bottom: 15px;
    }

    .card {
      margin-top:0rem!important;
      min-height: calc(100vh - 0px)!important;
    }

    .table td.left, .table th.left {
      text-align: left;
      width: 150px!important;
      flex: 0
    }
  }

  .table td.left, .table th.left {
    text-align: left;
    flex: 1;
    width: 300px!important;
  }


  .tooll {
      position: absolute;
      background: #e6b3b3;
      color: $headerBackground;
      top: 0px;
      height: 36px;
      width: 100%;
      left: 0px;
      justify-content: center;
      align-items: center;
      display: flex;
  }

  #acceptBtn, #rejectBtn {
    width: 175px
  }

  #rejectBtn {
    background-color: #a62f16 !important;
  }

  .formatted-values-toggle {
    min-width: 75px
  }

  clr-modal {
    .modal-body-wrapper {
      overflow: auto;
    }
  }

  .rows-notice {
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: #6a6a6a;
    font-size: 15px;

    clr-icon {
      margin: 0;
    }
  }
}

body[cds-theme="dark"] {
  app-approve-details {
    table {
      .updatedRow {
        background: #93971e;
      }

      .addedRow {
        background:  rgb(86 153 95);
      }

      .deletedRow {
        background: rgb(138 90 90);
      }
    }
  }
}

body[cds-theme="light"] {
  app-approve-details {
    table {
      .updatedRow {
        background: #fafda8;
      }

      .addedRow {
        background:  rgb(146, 208, 154);
      }

      .deletedRow {
        background: rgb(230, 179, 179);
      }
    }
  }
}
// APPROVE-DETAILS.COMPONENT END

// VIYA-API-EXPLORER.COMPONENT
app-viya-api-explorer {
  .api-collection-dropdown {
      margin-left: 15px;
      margin-right: 15px;
      margin-bottom: 10px;
  }

  .json-area {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      overflow: auto;

      a {
          text-decoration: none;
      }

      > ngx-json-viewer {
          height: 100%;

          > .ngx-json-viewer {
              overflow: auto;
          }
      }
  }

  .json-toggle {
      position: absolute;
      left: 10px;
      margin: 0;
  }

  .endpoint-breadcrums {
      margin: 0;
      margin-left: 10px;
  }

  .query-params {
      input {
          width: 70px;
      }
  }
}
// VIYA-API-EXPLORER.COMPONENT END

// LOADING-INDICATOR.COMPONENT
// there are no clear instructions how to use Clarity ui variables
$clr-header-height: 2.5rem;
$clr-dark-gray: #565656;
$clr-red: #c92100;
$clr-yellow: rgb(233, 191, 4);
$clr-green: #60b515;

app-loading-indicator {
  .loading-indicator {
    line-height: $clr-header-height;
    height: $clr-header-height;
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: 10px;

    .spinner {
      vertical-align: middle;
    }

    clr-signpost-content {
      line-height: 24px;
      color: $clr-dark-gray;
      cursor: auto;

      p {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        &:first-child {
          margin-top: 0;
        }
        &:last-child {
          margin-bottom: 0;
        }

        span {
          margin-left: 10px;

          &.running {
            color: $clr-yellow;
          }
          &.success {
            color: $clr-green;
          }
          &.fail {
            color: $clr-red;
          }
        }
      }
    }
  }
}
// LOADING-INDICATOR.COMPONENT END

// EXCEL-PASSWORD-MODAL.COMPONENT
app-excel-password-modal {
  .excel-password-root {
    .modal {
      z-index: 1060;
    }
  }

  .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .buttons {
      display: flex;
      gap: 5px;
    }
  }
}
// EXCEL-PASSWORD-MODAL.COMPONENT END

// STAGE.COMPONENT
app-stage {
  .rejected {
    color: #92201a;
    font-weight: bold
  }

  .accepted {
    color: #105c26;
    font-weight: bold
  }

  .baseTableLink {
    cursor:pointer;
    margin-top:10px;
    color: #007cbb;
  }

  // Accessibility fixes for handsontable focus catchers
  .htFocusCatcher {
    // Hide from screen readers but maintain functionality
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    margin: -1px !important;
    padding: 0 !important;

    // Ensure it's not focusable by screen readers
    &:focus {
      outline: none !important;
    }
  }
}

body[cds-theme="dark"] {
  app-stage {
    .baseTableLink {
      color: #4ec0ff;
    }
  }
}
// STAGE.COMPONENT END

// SOFT-SELECT.COMPONENT
app-soft-select {
  .input-val {
      border: 0px;
      background: transparent;
      border-bottom: 1px solid #999999;
  }

  input {
      width: 100%;
      outline: none;

      &::-webkit-calendar-picker-indicator {
          margin-top: -5px;
      }
  }

  clr-date-container {
      position: relative;
      margin-top: 2px !important;

      .clr-input-group-icon-action {
          position: absolute;
          right: -5px;
      }

      input::-webkit-calendar-picker-indicator {
          margin-right: 20px;
          margin-top: -5px;
      }
  }

  label.secondLabelActive span {
      &:not(.value-type-selected) {
          text-decoration: line-through;
          cursor: pointer;
          opacity: 0.6;
      }
  }
}
// SOFT-SELECT.COMPONENT END

// SASJS-CONFIGURATOR.COMPONENT
app-sasjs-configurator {
  .clr-control-container {
    width: 50vw;
  }

  .clr-input-wrapper {
    width: 100%;

    input {
      width: 100%;
    }
  }

  .thinProgress {
    left: 0px;
    right: 0;
    width: unset;
    height: 1px;
    margin-top: 0 !important;

    &::after {
      top: 0;
    }
  }
}
// SASJS-CONFIGURATOR.COMPONENT END

// HEADER-ACTIONS.COMPONENT
$clr-header-height: 3rem;
$clr-near-white: #fafafa;
$clr-dark-gray: #565656;
$clr-light-gray: #eee;

app-header-actions {
  display: contents;

  .copyRight {
    margin-top: 10px;

    span {
      word-break: break-word;
      white-space: pre-wrap;
      width: 100%;
      text-align: center;
      line-height: 1.5;
    }
  }

  .user-nav-toggle {
    padding: 0 10px !important;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .app-nav-dropdown {
    //left padding for branding is also 24px
    padding-right: 15px;
    line-height: $clr-header-height;
    height: $clr-header-height;

    >button.dropdown-toggle {
      color: $clr-near-white;
      position: relative;

      &:after {
        content: "";
        background-color: $clr-near-white;
        opacity: .15;
        left: 0;
        position: absolute;
        width: 1px;
        height: 40px;
        top: 10px;
      }

      .badge {
        &.hidden {
          visibility: hidden;
        }
      }
    }

    clr-dropdown-menu {
      color: $clr-dark-gray;
      padding-bottom: 0;

      .separator {
        margin: 10px 0;
        border-bottom: 1px solid gray;
        // border-bottom: 1px solid $clr-dark-gray;
      }

      .dropdown-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        height: 45px;
        line-height: 40px;


        .badge {
          position: absolute;
          top: 15px;
          right: 26px;
          margin-right: 0;
        }

        &.debug-switch-item {
          padding: 0;
        }

        .toggle-switch {
          margin: 0;
          width: 100%;
          height: 100%;
          justify-content: center;
        }

        .clr-logout{
          position: absolute;
          right: 20px;
          top: 15px;
        }

        .clr-control-container {
          width: 100%;
          height: 100%;
        }

        clr-toggle-wrapper {
          width: 100%;
          margin: 0;
          height: 100%;
          padding: 10px 20px;
        }

        input {
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          // width: 100%;
          // height: 100%;
          cursor: pointer;
        }

        .clr-toggle-wrapper input[type=checkbox]+label::after {
          transition: none !important;
        }
      }
    }

  }

  .debug-toggle-label {
    padding-left: 42px;
  }

  @media (max-width: 768px){
    .sidenav-content{
      a.nav-link.active {
        color: inherit;
        padding: 15px;
        background: #565656;
      }
    }
  }
  .nav-link.d-block{
    span.badge{
      position: absolute;
    }

  }
  .avatar-img{
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border-radius: 50px;
  }
}
// HEADER-ACTIONS.COMPONENT END

// END OF CSP WORKAROUND

.clr-input-wrapper.small-mt {
  .clr-form-control {
    margin-top: 5px !important;
  }
}

body[cds-theme="dark"] {
  scrollbar-width: thin;
  scrollbar-color: $trackColor $thumbColor;

  &::-webkit-scrollbar {
    width: 11px;
  }
  &::-webkit-scrollbar-track {
    // Track
    background: $trackColor;
  }
  &::-webkit-scrollbar-thumb {
    // Thumb
    background-color: $thumbColor;
    border-radius: 6px;
    // Track
    border: 3px solid $trackColor;
  }

  clr-icon.is-highlight {
    fill: #4ec0ff;
  }
}

body,
html {
  font-weight: 400 !important;

  padding: 0;
  margin: 0;

  &.should-login {
    clr-modal {
      display: none !important;
    }
  }
}

body[cds-theme="dark"] {
  button {
    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 1px solid rgb(255, 255, 255)
    }
  }
}

body[cds-theme="light"] {
  button {
    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 1px solid rgb(0, 0, 0)
    }
  }
}

.select-table-icon {
  width: 80px;
}

.select-library-icon {
  width: 80px;
}

[cds-text=label] {
  color: var(--cds-global-typography-color-200);
}

[cds-text=labelLink] {
  line-height: 1.8 !important;
}

[cds-text=caption_clean] {
  font-size: var(--cds-global-typography-caption-font-size);
  font-weight: var(--cds-global-typography-caption-font-weight);
  line-height: var(--cds-global-typography-caption-line-height);
  letter-spacing: var(--cds-global-typography-caption-letter-spacing);

  &::after, &::before {
    display: none;
  }
}

.modal .modal-body {
  padding: 15px;
}

.modal .modal-footer {
  padding: 0 15px 15px 15px;
}

.log-wrapper {
  min-height: 50px;
  padding: 10px;
  margin-top: 10px;

  white-space: pre-wrap;
  border-radius: 3px;

  border: 1px solid $codeBorder;

  height: 48vh;
  overflow: auto;
}

// Custom loading spinner
.slider {
  position: absolute;
  width: 320px;
  margin-left: 75px;
  margin-top: 70px;
  height: 5px;
  overflow-x: hidden;
}

.line {
  position: absolute;
  opacity: 0.4;
  background: #73d544;
  width: 150%;
  height: 5px;
}

.subline {
  position: absolute;
  background: #73d544;
  height: 5px;
}
.inc {
  animation: increase 2s infinite;
}
.dec {
  animation: decrease 2s 0.5s infinite;
}

@keyframes increase {
  from {
    left: -5%;
    width: 5%;
  }
  to {
    left: 130%;
    width: 100%;
  }
}
@keyframes decrease {
  from {
    left: -80%;
    width: 80%;
  }
  to {
    left: 110%;
    width: 10%;
  }
}
// Custo loading spinner end

// Should be here until we figure out why it was there in the first place
// .modal {
//   z-index: 2020;
// }

.app-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: $headerBackground;
  flex-direction: column;
  z-index: 2000;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.select-none {
  user-select: none;
}

.h-auto {
  height: auto;
}

.h-unset-i {
  height: unset !important;
}

.min-h-50vh {
  min-height: 50vh;
}

.h-24vh {
  height: 25vh;
}

.h-25vh {
  height: 25vh;
}

.h-70vh {
  height: 70vh;
}

.h-80vh {
  height: 80vh;
}

.h-100 {
  height: 100%;
}

.w-50vw {
  width: 50vw;
}

.w-100 {
  width: 100%;
}

.w-100-i {
  width: 100% !important;
}

.w-40 {
  width: 40%;
}

.min-w-0 {
  min-width: 0px;
}

.mx-5 {
  margin: 0 5px;
}

.my-5 {
  margin: 5px 0;
}

.my-15 {
  margin: 15px 0;
}

.my-10-mx-auto {
  margin: 10px auto;
}

.m-0 {
  margin: 0 !important;
}

.m-10 {
  margin: 10px;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-3-negative {
  margin-top: -3px;
}

.mt-5 {
  margin-top: 5px;
}

.mt-5-i {
  margin-top: 5px !important;
}

.mt-2 {
  margin-top: 2px;
}

.mt-2-i {
  margin-top: 2px !important;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.ml-0 {
  margin-left: 0;
}

.ml-3 {
  margin-left: 3px;
}

.ml-5 {
  margin-left: 5px;
}

.ml-5-i {
  margin-left: 5px !important;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-20-i {
  margin-left: 20px !important;
}

.mr-0 {
  margin-right: 0;
}

.mr-5 {
  margin-right: 5px;
}

.mr-5i {
  margin-right: 5px !important;
}

.mr-10 {
  margin-right: 10px;
}

.mr-12 {
  margin-right: 12px;
}

.mr-20 {
  margin-right: 20px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-0i {
  margin-bottom: 0 !important;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-10-i {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.p-0 {
  padding: 0;
}

.p-10 {
  padding: 10px;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-10 {
  padding-bottom: 10px;
}

.py-5 {
  padding: 5px 0px;
}

.py-10 {
  padding: 10px 0px;
}

.background-transparent {
  background: transparent;
}

.background-transparent-i {
  background: transparent !important;
}

body[cds-theme="light"] {
  .color-gray {
    color: #5a5a5a;
  }

  .color-dark-gray {
    color: #495967;
  }

  .color-darker-gray {
    color: $headerBackground;
  }
}

.color-white {
  color: white;
}

.color-white-i {
  color: white !important;
}

.color-green {
  color: #4b9e4b;
}

.color-dc-green {
  color: #81b440;
}

.color-red {
  color: #e45454;
}

.color-orange {
  color: #e67e22;
}

.color-blue {
  color: #3f8cc3;
}

.color-yellow {
  color: #f1c40f;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-defualt {
  cursor: default;
}

.cursor-default-i {
  cursor: default !important;
}

.background-transparent {
  background-color: transparent;
}

.pointer-events-none {
  pointer-events: none;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.font-size-15 {
  font-size: 15px;
}

.font-size-18 {
  font-size: 18px;
}

.font-bold {
  font-weight: bold;
}

.font-bold-i {
  font-weight: bold !important;
}

.font-weight-300 {
  font-weight: 300;
}

.font-weight-700 {
  font-weight: 700;
}

.word-break {
  word-break: break-word;
}

.word-break-all {
  word-break: break-all;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.d-flex {
  display: flex;
}

.d-contents {
  display: contents;
}

.flex-unset {
  flex: unset;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-start {
  align-self: flex-start;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-center-i {
  justify-content: center !important;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

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

.clr-gap-5 {
  gap: 5px;
}

.clr-gap-0 {
  gap: 0;
}

.overflow-auto {
  overflow: auto;
}

.z-index-highest {
  z-index: 10000000;
}

.vertical-align-middle {
  vertical-align: middle;
}

.icon-dc-fill {
  fill: #81b440;
}

.datagrid-custom-footer {
  .datagrid-outer-wrapper {
    width: 100%;
  }
}

.text-area-full-width {
  .clr-control-container {
    width: 100%;

    textarea {
      width: 100%;

    }
  }

  clr-textarea-container {
    margin: 0 !important;
  }

  .clr-textarea-wrapper {
    margin: 0 !important;
  }
}

.progresStatic {
  margin-top: -6px !important;
  position: absolute !important;
  z-index: 10000 !important;
}

.progress,
.progress-static {
  background-color: #f5f6fe;
  border-radius: 0;
  font-size: inherit;
  height: 6px;
  margin: 0;
  max-height: 0.583333rem;
  min-height: 0.166667rem;
  overflow: hidden;
  display: block;
  width: calc(100% - 63px);
}

.progress.loop:after {
  -webkit-animation: clr-progress-looper 1.5s ease-in-out infinite;
  animation: clr-progress-looper 1.5s ease-in-out infinite;
  content: ' ';
  top: 0.166667rem;
  bottom: 0;
  left: 0;
  position: absolute;
  display: block;
  background-color: #60b515;
  width: 75%;
}

// Fix for clarity bug, should be addressed when clarity is updated
.badge-warning {
  color: white !important;
}

.content-container .content-area .card-header h3 {
  margin-top: 10px;
}

.modal-header--accessible {
  padding: 15px 15px 0 15px;
}

.modal-header--accessible .close clr-icon {
  display: none;
}
.show-close .modal-header--accessible .close clr-icon {
  display: inline-block;
  position: relative;
  top: -18px;
  right: -10px;
}

.alert-app-level.alert-danger {
  background: #d94b2e;
  color: #fff;
  border: none;
}

.card-header {
  font-weight: 300;
}

.select select:focus {
  border-bottom: 1px solid #495967;
  background: linear-gradient(180deg, transparent 95%, #495a67 0) no-repeat;
}

.clr-treenode-children {
  margin-left: 0.2rem !important;
}


.table-active:focus {
  background: #d8e3e9;
}

clr-select-container .clr-control-container,
clr-select-container .clr-control-container .clr-select-wrapper,
clr-select-container select {
  width: 100%;
}

tbody {
  font-weight: 400;
}

h3,
h4 {
  color: #585858;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1rem;
  margin-top: 1rem;
  margin-bottom: 0;
  /* text-transform: uppercase; */
}

h1,
h2 {
  color: #585858;
  font-weight: 400;
  /* font-family: Metropolis,Avenir Next,Helvetica Neue,Arial,sans-serif; */
  letter-spacing: normal;
  line-height: 2rem;
  margin-top: 1rem;
  margin-bottom: 0;
  /* text-transform: uppercase; */
}

clr-icon.is-info {
  fill: #80b441;
}

.datagrid-host,
.datagrid-overlay-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-box !important;
  -webkit-box-direction: normal;
}

.btn .clr-loading-btn-content {
  justify-content: center;
}

.btn.btn-danger,
.btn.btn-warning {
  border-color: #ef4f2e;
  background-color: #d94b2e;
  color: #fff;
}

// Vertical align fix for small buttons with icons
.btn.btn-sm:has(clr-icon) {
  line-height: 2;
}

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

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

.clr-flex-1 {
  flex: 1;
}

.clr-flex-column {
  flex-direction: column;
}

.clr-flex-row {
  flex-direction: row;
}

.border-0 {
  border: 0;
}

.box-shadow-none {
  box-shadow: none;
}

.box-shadow-none-i {
  box-shadow: none !important;
}

.htCustomHidden {
  display: none;
}

body[cds-theme="dark"] {
  .htDark {
    background: #888;
    color: #fff;
  }

  .handsontable .htDark {
    background: #3c5662;
    color: #eee;
  }

  .handsontable .darkTH {
    &:not(.primaryKeyHeaderStyle) {
      background: #487d96;
      color: #eee;
    }

    &.ht__highlight {
      background: #3b6b81;
    }
  }

  // flip color-scheme in built-in date parts
  .record-edit-modal .date-input {
    color-scheme: dark;
  }
}


// A11y: the Handsontable non-commercial banner links ship at #0079ad on the
// light banner background (4.24:1), failing WCAG AA color-contrast (Lighthouse
// `color-contrast` audit). Darken to #006699 (>=4.5:1 on #f0f0f0 / #f7f7f9).
.hot-display-license-info a,
.hot-display-license-info a:hover {
  color: #006699;
}

.handsontable .htAutocompleteArrow {
  color: #828282;
}

.handsontable.listbox {
  box-shadow: 0px 4px 20px 0px #00000070;

  // HT v17 sizes the inner table to the dropdown width but the 1px L+R menu
  // border eats 2px of that, leaving content 2px too wide -> a spurious
  // horizontal scrollbar. Render the border as an outline (no layout/overflow
  // impact) so the content fits exactly. outline-offset pulls it inside.
  border: 0 !important;
  outline: var(--ht-menu-border-width, 1px) solid var(--ht-menu-border-color, #e5e5e9);
  outline-offset: calc(-1 * var(--ht-menu-border-width, 1px));

  .wtHolder {
    overflow-x: hidden;
  }
}

.handsontable td.htInvalid {
  background: #e62700ad !important;
  border: 1px solid red !important;
  color: #ffffff !important;
}

.handsontable td.dc-invalid-cell {
  background: #e62700ad !important;
  border: 1px solid red !important;
  color: #ffffff !important;
}

.handsontable .numericListbox {
  text-align: right;
}

.margin-top-20 {
  margin-top: 20px;
}
.hidden {
  display: none !important;
}
.unvisible {
  visibility: hidden;
}

.no-borders {
  border: 0;
}

.card {
  &.no-borders {
    border: 0;
    box-shadow: none;

    .card-header, .card-block, .card-footer {
      border: 0;
      box-shadow: none;
    }
  }

  &.no-inner-borders {
    .card-header, .card-block, .card-footer {
      border: 0;
      box-shadow: none;
    }
  }
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .clr-flex-sm-column {
    flex-direction: column;
  }
  .clr-flex-sm-row {
    flex-direction: row;
  }
  .clr-gap-sm-5 {
    gap: 5px;
  }
  .clr-gap-sm-0 {
    gap: 0;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .clr-flex-md-column {
    flex-direction: column;
  }
  .clr-flex-md-row {
    flex-direction: row;
  }
  .clr-gap-md-5 {
    gap: 5px;
  }
  .clr-gap-md-0 {
    gap: 0;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .clr-flex-lg-column {
    flex-direction: column;
  }
  .clr-flex-lg-row {
    flex-direction: row;
  }
  .clr-gap-lg-5 {
    gap: 5px;
  }
  .clr-gap-lg-0 {
    gap: 0;
  }
}

.datagrid-body {
  padding-bottom: 2rem !important;
}

.abortMsg {
  white-space: pre-wrap;
  font-family: monospace;
}

#graph svg {
  height: 100%;
  width: 100%;
}

.no-table-selected {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  background: var(--clr-vertical-nav-bg-color);
  z-index: 10;
  width: 100%;
  height: 100%;
  top: 0;
}

.copyRight {
  background: #495967 !important;
  color: #fff;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 5px 0px 4px 0px;
  z-index: 100;
}

.nav-tree > clr-tree-node.clr-expanded {
  display: inline-block !important;
}

clr-tree-node {
  overflow-y: visible;

  &:focus {
    outline: none !important;
  }

  .clr-treenode-caret {
    width: auto !important;
    height: auto !important;
  }

  .clr-treenode-spinner-container {
    padding: 0px 8px 0px 8px;
    width: auto;
    height: auto;
    align-items: center;
  }

  .clr-tree-node-content-container {
    &:focus {
      outline: none !important;
    }
  }
}

.clr-treenode-content {
  p {
    white-space: nowrap;
  }
}

.search-node {
  margin-bottom: 5px;
}

.tree-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;

  clr-input-container {
    margin: 0;
  }

  clr-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    margin-bottom: 3px;
    cursor: pointer;
  }
}

.clr-tree-node {
  overflow: visible !important;
}

.content-container {
  width: 100%;
}

//Firefox Fixes
@-moz-document url-prefix() {
  .wtHolder {
    width: 100% !important;
  }
}

// IE Fixes
input::-ms-clear {
  display: none;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  clr-tree-node.clr-expanded {
    padding-bottom: 20px;
    min-height: auto;
  }

  .clr-tree-node {
    min-height: 24px;
  }

  .clr-treenode-children {
    overflow: hidden !important;
  }

  .clr-treenode-content .clr-icon,
  .clr-treenode-content clr-icon {
    min-width: 16px;
    min-height: 16px;
  }

  .tree-search-wrapper clr-icon {
    bottom: 2px;
  }

  .content-container {
    height: 100%;
  }

  .content-area {
    & > .card {
      margin-bottom: 20px;
    }
  }

  .record-edit-modal textarea {
    min-height: 42px;
  }
}

.border-bottom-divider {
  border-bottom: 1px solid #d3d3d3;
}

.loadingSpinner {
  height: 70vh;
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.disable-password-manager {
  -webkit-text-security: disc;
  -moz-text-security: disc;
  text-security: disc;
  font-family: text-security-disc;
}

.relative {
  position: relative;
}

hr.light {
  border: 0;
  border-bottom: 1px solid #dedede;
}

//Rules to fix CSP issues with clarity elements (they use base64 which is blocked)
.spinner {
  background: url('./images/spinner.svg') !important;
}

.clr-select-wrapper::after {
  background: url('./images/caret.svg') !important;
}

body[cds-theme="dark"] {
  .table-search-wrapper {
    // background: #2d4048;
    background: #21333b;
  }
}

.table-search-wrapper {
  background-color: #fff;

  .input-wrapper {
    position: relative;
    min-width: 170px;

    clr-icon,
    .spinner {
      position: absolute;
      right: 19px;
      top: 0px;
    }

    clr-icon {
      cursor: pointer;
    }

    [name="search-input"] {
      padding-right: 25px;
    }
  }

  clr-input-container {
    margin-top: -5px;
    margin-right: 0;

    label {
      display: none;
    }
  }

  clr-checkbox-container {
    margin-top: 0;
  }

  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type='number'] {
    -moz-appearance: textfield;
  }
}

.dc-locked-control {
  opacity: 0.4;
  cursor: not-allowed !important;
}

.link-it {
  cursor: pointer;
  text-decoration: underline;
}