/* #region Style Guidelines */

/*
Usage:
  - Use this file (app.css) for all styling
  - Use Telerik/Bootstrap existing style classes where possible
Placement:
  - Put stylings within their appropriate region
Naming:
  - Use BEM naming scheme for custom style classes, see: https://getbem.com/naming/
Overrides:
  - Use indirect overrides where possible by utilizing a custom class name as a precursor
  - Label overrides as an "Override" or "Indirect Override"
Comments:
  - Use comments when it is not absolutely clear what a style class does by name
*/

/* #endregion Style Guidelines */

/* #region Base app.css Styles */

html, body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

  .blazor-error-boundary::after {
    content: "An error has occurred."
  }

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}

  .loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
  }

    .loading-progress circle:last-child {
      stroke: #1b6ec2;
      stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
      transition: stroke-dasharray 0.05s ease-in-out;
    }

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

  .loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
  }

/* #endregion Base app.css Styles */

/* #region Variables & Common Variable Styles */

:root {
  --module-color__home: #0bb3ce;
  --module-color__activities: #4a803b;
  --module-color__issues: #d55a1e;
  --module-color__analysis: #164781;
  --module-color__reports: #440b52;
  --module-color__settings: #88959e;
  --module-color__admin: #107da7;
  /**/
  --module-color__home--selected: #19d5f3;
  --module-color__activities--selected: #5ea34b;
  --module-color__issues--selected: #e47742;
  --module-color__analysis--selected: #1d5fad;
  --module-color__reports--selected: #69117f;
  --module-color__settings--selected: #a4aeb5;
  --module-color__admin--selected: #14a0d6;
  /**/
  --module-color__reports--light: #8f17ac;
  /**/
  --app-bar-height: 70px;
  /* Used for grid rows and dropdown list items */
  --background-color--selected: #c2ddf2;
  --background-color--hover: #e2eff9;
}

/* Text-color Presets for each module color */
.text-color--home {
  color: var(--module-color__home) !important;
}

.text-color--activities {
  color: var(--module-color__activities) !important;
}

.text-color--issues {
  color: var(--module-color__issues) !important;
}

.text-color--analysis {
  color: var(--module-color__analysis) !important;
}

.text-color--reports {
  color: var(--module-color__reports) !important;
}

.text-color--settings {
  color: var(--module-color__settings) !important;
}

.text-color--admin {
  color: var(--module-color__admin) !important;
}

/* Text-color Presets for each module color
  If the color: white is interfereing with your styling, feel free to remove it (and fix anywhere these are being used) */
.bg-color--home {
  background-color: var(--module-color__home) !important;
  color: white;
}

  .bg-color--home:hover,
  .bg-color--home.selected {
    background-color: var(--module-color__home--selected) !important;
    cursor: pointer;
  }

.bg-color--activities {
  background-color: var(--module-color__activities) !important;
  color: white !important;
}

  .bg-color--activities:hover,
  .bg-color--activities.selected {
    background-color: var(--module-color__activities--selected) !important;
    cursor: pointer;
  }

.bg-color--issues {
  background-color: var(--module-color__issues) !important;
  color: white;
}

  .bg-color--issues:hover,
  .bg-color--issues.selected {
    background-color: var(--module-color__issues--selected) !important;
    cursor: pointer;
  }

.bg-color--analysis {
  background-color: var(--module-color__analysis) !important;
  color: white;
}

  .bg-color--analysis:hover,
  .bg-color--analysis.selected {
    background-color: var(--module-color__analysis--selected) !important;
    cursor: pointer;
  }

.bg-color--reports {
  background-color: var(--module-color__reports) !important;
  color: white;
}

  .bg-color--reports:hover,
  .bg-color--reports.selected {
    background-color: var(--module-color__reports--selected) !important;
    cursor: pointer;
  }

.bg-color--settings {
  background-color: var(--module-color__settings) !important;
  color: white;
}

  .bg-color--settings:hover,
  .bg-color--settings.selected {
    background-color: var(--module-color__settings--selected) !important;
    cursor: pointer;
  }

/* #endregion Variables & Common Variable Styles */

/* #region MainLayout Styles */

/* Main header app bar */
.app-bar {
  height: var(--app-bar-height);
  padding-left: 20px !important;
  box-shadow: none !important;
}

.app-bar--transparent {
  background-color: transparent;
  pointer-events: none;
}

.app-bar__button--position-right {
  right: 1vw;
  position: absolute;
}

.app-bar__save-button {
  width: 65px;
  height: 65px;
  pointer-events: all;
}

  .app-bar__save-button .k-button-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

/* nTap logo within the header app bar */
.logo-item {
  content: url(../img/logo/nTAP_Blue.svg);
  cursor: pointer;
  height: 30px;
}

/* Indirect Override. Affects header app bar color */
.app-bar.k-appbar-dark {
  background-color: #121d23 !important;
}

/* Margin to allow top level elements to play nicely with the app bar */
.app-bar--margin {
  margin-top: var(--app-bar-height) !important;
}

/* Affects the header app bar icons */
button.appbar-icon-button {
  gap: 0px;
  color: transparent;
  padding: 4px;
}

  /* Indirect Override. Affects the header app bar icons */
  button.appbar-icon-button span.k-button-icon {
    width: 24px;
  }

  /* Indirect Override. Affects the header app bar icons */
  button.appbar-icon-button span svg path {
    color: white;
  }

  /* Indirect Override. Affects the header app bar icons */
  button.appbar-icon-button:hover span svg path {
    color: var(--module-color__home);
  }

.appbar-button--separator {
  padding: 4px 0px;
  border-block-start: 1px solid rgba(9, 30, 66, 0.16);
}

/* #endregion MainLayout Styles */

/* #region Grid Styles */

/* Indirect Override. Affects the section of the header directly above the scrollbar */
.app-grid .k-grid-header {
  background-color: lightgray;
}

  /* Indirect Override. Affects the grid column headers */
  .app-grid .k-grid-header .k-header {
    background-color: lightgray;
    line-height: 1rem;
    color: #888;
  }

/* Indirect Override. Affects the grid toolbar with the title and export button */
.app-grid .k-toolbar {
  font-weight: bold;
  color: white;
  padding: 0 10px 0 10px;
}

/* Indirect Override. Applies specific module color to grid header */
.app-grid.assessment-grid .k-toolbar {
  background-color: var(--module-color__home);
}

/* Indirect Override. Applies specific module color to grid header */
.module-theme--activities .app-grid .k-toolbar {
  background-color: var(--module-color__activities);
}

/* Indirect Override. Applies specific module color to grid header */
.module-theme--issues .app-grid .k-toolbar {
  background-color: var(--module-color__issues);
}

/* Indirect Override. No wrapping of text in grid cells*/
.app-grid.k-grid .k-table-td {
  white-space: nowrap;
}

/* Indirect Override. Applies specific module color to grid header */
.module-theme--admin .app-grid .k-toolbar {
  background-color: var(--module-color__admin);
}

/* Indirect Override. Applies specific module color to grid header */
.module-theme--analysis .app-grid.analysis-grid .k-toolbar {
  background-color: var(--module-color__analysis);
}

/* Indirect Override. Applies color to icons of grids in specific module */
.module-theme--analysis .app-grid .k-icon {
  color: white;
}

/* Indirect Override. Applies specific module color to particular icon in grids in specific module */
.module-theme--analysis .app-grid .k-table-td .k-svg-i-plus {
  color: white;
  background-color: var(--module-color__analysis);
}

/* Indirect Override. Applies specific module color to particular icon in grids in specific module */
.module-theme--analysis .app-grid .k-table-td .k-svg-i-minus {
  color: white;
  background-color: var(--module-color__analysis);
}

/* Indirect Override. Affects the grid toolbar header button */
.app-grid .header-button {
  background-color: transparent !important;
  color: white;
  border: none;
}

/* Indirect Override. Affects the grid selected row */
.app-grid .k-selected {
  background-color: var(--background-color--selected) !important;
}

/* Indirect Override. Affects the grid row hover events */
.app-grid tr:hover {
  background-color: var(--background-color--hover) !important;
  cursor: pointer;
}

/* Indirect Override. Prevent the no records row from having any pointer events */
.app-grid .k-grid-norecords {
  pointer-events: none;
}

/* Indirect Override. Affects the grid row text */
.app-grid .k-table-row {
  color: #888;
}

  .app-grid .k-table-row.inactive-assessment-row {
    background-color: #888 !important;
    color: white;
  }

/* Indirect Override. Prevent columns with sorting applied from having default background color */
.app-grid col.k-sorted {
  background-color: white;
}

/* Indirect Override. Prevent header column menu icon from showing by default */
.app-grid .k-grid-header-menu {
  visibility: hidden;
}

  /* Indirect Override. Affects header column menu icon, show on hover/active */
  .app-grid .k-grid-header th:hover .k-grid-header-menu,
  .app-grid .k-grid-header-menu[aria-expanded="true"] {
    visibility: visible;
  }

  /* Indirect Override. Prevent header column menu icons default active styling */
  .app-grid .k-grid-header-menu.k-active {
    color: #888;
    background-color: transparent;
  }

  /* Indirect Override. Affects header column menu icon hover styling */
  .app-grid .k-grid-header-menu:hover {
    color: black;
  }

/*Indirect override. Hides the tile header of the analysis grid.*/
.app-grid-tile--no-header .k-tilelayout-item-header {
  display: none;
}

/*Indirect override. Make the copy facts to issue slide out tile header the same as the grid header */
.module-theme--analysis .facts-to-issues-tile .k-tilelayout-item-header {
  display: block;
  padding: 6px;
}

/* Overlay a disabled grid mask. Must be used in conjuction with code interaction prevention */
.grid--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/*Indirect override. Sets the height to fill the parent form */
.app-grid-filter .app-form {
  height: 100%;
}

.app-bar-username {
  font: 500 17px / 20px Roboto;
  padding: 0 10px;
}

/* #endregion Grid Styles */

/* #region Form Styles */

/* Affects the filter forms outer most component */
.app-form {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 0.5rem;
  overflow-y: auto;
}

  /* Indirect Override. Affects the forms button container */
  .app-form .k-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  /* Affects the form buttons via a custom class */
  .app-form .form-button {
    background-color: #abeffa;
    flex: 1 1 0%;
    text-transform: capitalize;
    font-weight: bold;
    font-size: 16px;
  }

    /* Indirect Override. Affects the form buttons disabled state */
    .app-form .form-button.k-disabled {
      color: rgba(0, 0, 0, 0.38) !important;
      background-color: #e0e0e0 !important;
    }

/* Affects the form buttons via a custom class */
.module-theme--admin .app-form .form-button:not(.k-disabled) {
  background-color: #32b8eb !important;
  color: white;
}

/* Affects the form buttons via a custom class */
.module-theme--admin .app-form .form-button:hover {
  background-color: #2ea9d9;
  color: black;
}

/* Affects the form buttons via a custom class */
.module-theme--activities .app-form .form-button {
  background-color: var(--module-color__activities) !important;
  color: white;
}

  /* Affects the form buttons via a custom class */
  .module-theme--activities .app-form .form-button.k-disabled {
    color: white !important;
    opacity: 0.5;
  }

/* Affects the form buttons via a custom class */
.module-theme--issues .app-form .form-button,
.module-theme--issues .facts-to-issues-tile .form-button {
  background-color: var(--module-color__issues) !important;
  color: white;
}

.module-theme--activities .facts-to-issues-tile .form-button {
  background-color: var(--module-color__activities) !important;
  color: white;
}

.module-theme--analysis .facts-to-issues-tile .form-button {
  background-color: var(--module-color__analysis) !important;
  color: white;
}

/* Affects the form buttons via a custom class */
.module-theme--issues .app-form .form-button.k-disabled {
  color: white !important;
  opacity: 0.5;
}

/* Affects the form buttons via a custom class */
.module-theme--analysis .app-form .form-button {
  background-color: var(--module-color__analysis) !important;
  color: white;
}

/* Indirect Override. Affects the form labels in both floating positions */
.app-form .k-floating-label-container > .k-floating-label,
.app-form .k-form-label {
  left: 0px !important;
  white-space: normal;
}

/* Indirect Override. Affects the form labels in both floating positions */
.app-form.assessment-form .k-floating-label-container > .k-floating-label,
.app-form.assessment-form .k-form-label {
  color: var(--module-color__home) !important;
}

/* Indirect Override. Affects the form labels in both floating positions */
.module-theme--activities .app-form .k-floating-label-container > .k-floating-label,
.module-theme--activities .app-form .k-form-label {
  color: var(--module-color__activities) !important;
}

/* Indirect Override. Affects the form labels in both floating positions */
.module-theme--issues .app-form .k-floating-label-container > .k-floating-label,
.module-theme--issues .app-form .k-form-label {
  color: var(--module-color__issues) !important;
}

/* Indirect Override. Affects the form labels in both floating positions */
.app-form.reports-form .k-floating-label-container > .k-floating-label,
.app-form.reports-form .k-form-label {
  color: var(--module-color__reports) !important;
}

/* Indirect Override. Affects the form labels in both floating positions */
.app-form.analysis-form .k-floating-label-container > .k-floating-label,
.app-form.analysis-form .k-form-label {
  color: var(--module-color__analysis) !important;
}

/* Indirect Override. Affects the form labels in both floating positions */
.module-theme--admin .app-form .k-floating-label-container > .k-floating-label,
.module-theme--admin .app-form .k-form-label {
  color: var(--module-color__admin) !important;
}

/* Indirect Override. Affects the forms input components */
.app-form .k-input-solid {
  background-color: transparent;
}

/* Indirect Override. Affects the forms buttons */
.app-form.assessment-form .form-button {
  color: #164781;
}

/* Indirect Override. Affects the forms input components when focused */
.app-form.assessment-form .k-input-solid:focus-within {
  border-color: var(--module-color__home);
}

/* Indirect Override. Affects the forms input components when focused */
.app-form.reports-form .k-input-solid:focus-within {
  border-color: var(--module-color__reports);
}

/* Indirect Override. Affects the forms input components when focused */
.module-theme--admin .app-form .k-input-solid:focus-within {
  border-color: var(--module-color__admin);
}

/* Indirect Override. Affects the forms checkbox components */
.app-form.assessment-form .k-checkbox {
  border-color: var(--module-color__home) !important;
}

  /* Indirect Override. Affects the forms checkbox components when checked */
  .app-form.assessment-form .k-checkbox:checked {
    background-color: var(--module-color__home);
  }

/* Indirect Override. Affects the forms components icons (ie dropdown arrow, calendar icon) */
.app-form.assessment-form .k-button-icon {
  color: var(--module-color__home);
}

/* Indirect Override. Affects the forms checkbox components */
.app-form.reports-form .k-checkbox {
  border-color: var(--module-color__reports) !important;
}

  /* Indirect Override. Affects the forms checkbox components when checked */
  .app-form.reports-form .k-checkbox:checked {
    background-color: var(--module-color__reports);
  }

.app-form.reports-form .k-form-buttons .k-button-solid-primary,
.app-form.reports-form .k-form-buttons .k-button-solid {
  background-color: var(--module-color__reports--light);
  border: none;
  color: white;
}

  .app-form.reports-form .k-form-buttons .k-button-solid-primary:hover,
  .app-form.reports-form .k-form-buttons .k-button-solid:hover {
    color: black;
  }

/* Indirect Override. Affects the forms components icons (ie dropdown arrow, calendar icon) */
.app-form.reports-form .k-button-icon {
  color: var(--module-color__reports);
}

/* Indirect Override. Affects the forms components icons (ie dropdown arrow, calendar icon) */
.module-theme--admin .app-form .k-button-icon {
  color: var(--module-color__admin);
}

/* #endregion Form Styles */

/* #region AssessmentHome Styles */
/* Indirect Override. Affects the activities tile header color */
.tile-layout .module-theme--activities .k-tilelayout-item-header {
  background-color: var(--module-color__activities);
}

/* Indirect Override. Affects the issues tile header color */
.tile-layout .module-theme--issues .k-tilelayout-item-header {
  background-color: var(--module-color__issues);
}

.assessment-header-info {
  background-color: #dedede;
}

  .assessment-header-info .span--text-color {
    color: #065f6d;
  }
/* #endregion AssessmentHome Styles */

/* #region TabStrip Styles */
/* Indirect Override. Affects the tab strip */
.app-tabstrip ul.k-tabstrip-items {
  background-color: #dedede;
  text-transform: none;
}

/* Indirect Override. Affects the tab strip */
.app-tabstrip.assessment-tabstrip ul.k-tabstrip-items {
  margin-top: var(--app-bar-height);
}

/* Indirect Override. Affects the individual tab strip items */
.app-tabstrip ul.k-tabstrip-items .k-link {
  border-right: 1px solid white;
  height: 40px;
}

.app-tabstrip > .k-tabstrip-content:active, .app-tabstrip > .k-tabstrip-content:focus {
  outline: none !important;
}

.app-tabstrip .k-item {
  white-space: nowrap;
}

.app-tabstrip__title-width {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Indirect Override. Color for Add Tab Button */
.assessment-tabstrip__add-tab-button {
  border: none;
  background-color: #dedede;
  color: var(--module-color__home);
}

/* Indirect Override. Color for Add Tab Button */
.admin-tabstrip__add-tab-button {
  border: none;
  background-color: #dedede;
  color: var(--module-color__admin);
}

/* Indirect Override. Creates a bottom border with the theme color on tabstrip */
.module-theme--activities .activity-issue-tabstrip .k-tabstrip-items-wrapper {
  border-bottom: 5px solid var(--module-color__activities);
}

/* Indirect Override. Creates a bottom border with the theme color on tabstrip */
.module-theme--issues .activity-issue-tabstrip .k-tabstrip-items-wrapper {
  border-bottom: 5px solid var(--module-color__issues);
}

/* Indirect Override. Affects tab items in inner tabstrip */
.activity-issue-tabstrip ul.k-tabstrip-items {
  margin-top: 0 !important;
}

/* Indirect Override. Affects tab contents in inner tabstrip */
.activity-issue-tabstrip .k-tabstrip-content {
  height: 79vh;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.activity-issue-tabstrip.small_screen .k-tabstrip-content {
  height: 75vh;
}

/* Indirect Override. Affects Add Tab Button on Tabstrip */
.activity-issue-tabstrip__add-tab-button {
  border: none;
  background-color: #dedede;
}

/* Indirect Override. Color for Add Tab Button */
.module-theme--activities .activity-issue-tabstrip__add-tab-button, .module-theme--activities .activity-issue-tabstrip__add-tab-button-dropdown .k-active {
  color: var(--module-color__activities);
}

/* Indirect Override. Color for Add Tab Button */
.module-theme--issues .activity-issue-tabstrip__add-tab-button {
  color: var(--module-color__issues);
}

/* Indirect Override. Affects the tab strip */
.module-theme--admin .app-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper {
  border-bottom-width: 5px !important;
  background-color: var(--module-color__admin);
}

/* Indirect Override. Affects the admin user security tab strip to hide the bottom border */
.app-tabstrip.k-tabstrip-top.user-security-tabstrip > .k-tabstrip-items-wrapper {
  border-bottom-width: 0 !important;
}

/* Indirect Override. Affects the tab strip active item */
.app-tabstrip div.k-tabstrip-items-wrapper li.k-item.k-active::after {
  border-color: transparent;
}

/* Indirect Override. Affects the tab strip active item */
/* Note that the assessment tab strip doesnt follow the same color pattern as the rest and therefore references __analysis */
.app-tabstrip.assessment-tabstrip li.k-item.k-active {
  background-color: white;
  color: var(--module-color__analysis) !important;
}

/* Indirect Override. Color for selected Tabstrip Item */
.module-theme--activities .activity-issue-tabstrip li.k-item {
  background-color: var(--module-color__activities--selected);
  color: white !important;
}

  /* Indirect Override. Color for active Tabstrip Item */
  .module-theme--activities .activity-issue-tabstrip li.k-item.k-active {
    background-color: var(--module-color__activities) !important;
    color: white !important;
  }

/* Indirect Override. Color for selected Tabstrip Item */
.module-theme--issues .activity-issue-tabstrip li.k-item {
  background-color: var(--module-color__issues--selected);
  color: white !important;
}

  /* Indirect Override. Color for active Tabstrip Item */
  .module-theme--issues .activity-issue-tabstrip li.k-item.k-active {
    background-color: var(--module-color__issues) !important;
    color: white !important;
  }

/* Indirect Override. Affects the tab strip active item */
.module-theme--admin .app-tabstrip li.k-item.k-active {
  background-color: var(--module-color__admin) !important;
  color: white;
}

/* Indirect Override. Affects the tab strip active item */
.module-theme--admin .app-tabstrip li.k-item.k-active {
  margin-bottom: 0px;
}

/* Indirect Override. Affects the individual tab strip items */
.app-tabstrip li.k-item {
  color: white;
}

/* Indirect Override. Affects the individual tab strip items */
.app-tabstrip.assessment-tabstrip li.k-item {
  background-color: #9e9999;
}

/* Indirect Override. Affects the individual tab strip items */
.module-theme--admin .app-tabstrip li.k-item {
  background-color: #32b8eb;
}

/* Indirect Override. Affects the individual tab strip items */
.app-tabstrip.assessment-tabstrip li.k-item:not(.k-active):hover {
  color: var(--module-color__home);
  background-color: lightgrey;
}

/* Indirect Override. Affects the individual tab strip items */
.module-theme--admin .app-tabstrip li.k-item:not(.k-active):hover {
  filter: brightness(105%);
  color: white;
}

/* Affects the individual tab strip item's close button */
button.tabstriptab-close-button {
  padding: 4px !important;
  top: -8px;
  left: 24px;
  border: none;
}

  /* Indirect Override. Affects the individual tab strip item's close button */
  button.tabstriptab-close-button::before {
    display: none;
  }

  /* Affects the individual tab strip item's close button */
  button.tabstriptab-close-button:hover span svg path {
    filter: brightness(90%);
  }

.popup-foreground {
  z-index: 2; /* this is explicty set higher than .close-popup-background to force this div to be placed on top of the close popup div */
}

.close-popup-background {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* this is explicty set lower than .popup-foreground to force this div to be placed below the popup itself */
}

/* #endregion AssessmentTabStrip Styles */

/* #region Activity and Issue Form Styles */
.activity-issue-form__container {
  position: relative;
  background: #f8f8f8;
  border-color: #c2c2c2;
  padding: 10px;
  font-size: 14px;
  font-weight: 400;
  font-family: Roboto;
  border-width: 1px;
  border-style: solid;
  width: 100%;
  float: right;
}

/* Indirect Override. Sets size for Icon */
.activity-issue-form__button-container .k-button-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* Indirect Override. Sets bottom padding due to sizing change */
.activity-issue-form__button-container .k-checkbox-wrap {
  padding-bottom: 2px;
}

/* Indirect Override. Sets Color. */
.module-theme--activities .activity-issue-form__button-container .k-checkbox:checked {
  border-color: var(--module-color__activities--selected);
  background-color: var(--module-color__activities--selected);
}

/* Indirect Override. Sets Color. */
.module-theme--issues .activity-issue-form__button-container .k-checkbox:checked {
  border-color: var(--module-color__issues--selected);
  background-color: var(--module-color__issues--selected);
}

/* Indirect Override. Sets Color. */
.module-theme--issues .facts-to-issues-tile .k-checkbox:checked {
  border-color: var(--module-color__issues--selected);
  background-color: var(--module-color__issues--selected);
}

.module-theme--activities .facts-to-issues-tile .k-checkbox:checked {
  border-color: var(--module-color__activities--selected);
  background-color: var(--module-color__activities--selected);
}

.module-theme--analysis .facts-to-issues-tile .k-checkbox:checked {
  border-color: var(--module-color__analysis--selected);
  background-color: var(--module-color__analysis--selected);
}

/*Indirect override. Positions the copy evidence container*/
.activity-issue-form__container div.k-animation-container {
  right: 0px;
}

/*Required to place the slideout over the examples and save icon */
.facts-to-issues-container {
  z-index: 1001;
}

  /*Defaults the copy facts to issues slide out to 100%, this is only used in the analysis grid version */
  .facts-to-issues-container > div,
  .facts-to-issues-container > div > div {
    height: 100%;
  }

/*Controls the facts to issues slide out height for the activity and issue page versions */
.module-theme--activities .facts-to-issues-container > div,
.module-theme--activities .facts-to-issues-container > div > div,
.module-theme--activities .facts-to-issues-container .k-tilelayout,
.module-theme--issues .facts-to-issues-container > div,
.module-theme--issues .facts-to-issues-container > div > div,
.module-theme--issues .facts-to-issues-container .k-tilelayout {
  height: fit-content;
  min-height: 79vh;
}

.facts-to-issues-container .k-form-buttons {
  margin-top: 0;
}

.facts-to-issues-container .k-treeview-item {
  padding: 0;
}

.module-theme--issues .facts-to-issues-container .k-card-body .k-button-icon {
  color: var(--module-color__issues);
}

.module-theme--activities .facts-to-issues-container .k-card-body .k-button-icon {
  color: var(--module-color__activities);
}

.module-theme--analysis .facts-to-issues-container .k-card-body .k-button-icon {
  color: var(--module-color__analysis);
}

.module-theme--activities .k-radio:checked, .k-radio.k-checked {
  border-color: var(--module-color__activities);
  color: var(--module-color__activities);
}

.module-theme--analysis .k-radio:checked, .k-radio.k-checked {
  border-color: var(--module-color__analysis);
  color: var(--module-color__analysis);
}

.activity-issue-form {
  font-size: 15px;
  height: 85%;
}

  /* Indirect Override. Sets Margin for form fields and buttons. */
  .activity-issue-form .k-form-md .k-form-field, .activity-issue-form .k-form-md .k-form-buttons {
    margin-top: 16px;
  }

  /* Indirect Override. Sets styling for field inputs. */
  .activity-issue-form .k-input-inner {
    background-color: white;
    padding-block: 4px;
    padding-inline: 8px;
    font-size: 15px;
  }

  /* Indirect Override. Sets Border for inputs and pickers. */
  .activity-issue-form .k-input, .activity-issue-form .k-picker {
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.38) !important;
  }

/* Indirect Override. Sets Color. */
.module-theme--activities .activity-issue-form .k-input.k-focus {
  border-color: var(--module-color__activities--selected) !important;
}

/* Indirect Override. Sets Color. */
.module-theme--issues .activity-issue-form .k-input.k-focus {
  border-color: var(--module-color__issues--selected) !important;
}

/* Indirect Override. Removes horizontal header line of form item. */
.activity-issue-form--no-header-line .k-form-legend {
  display: none;
}

/* Indirect Override. Converts the form fields to be horizontal rather than vertical grouping. */
.activity-issue-form--horizontal-group .k-form-field {
  display: flex;
  align-items: center;
}

  /* Indirect Override. Label Styling for horizontal style form. */
  .activity-issue-form--horizontal-group .k-form-field label {
    margin-right: 10px;
  }

  /* Indirect Override. Converts the form fields to be horizontal rather than vertical grouping. */
  .activity-issue-form--horizontal-group .k-form-field .k-form-field-wrap {
    flex: 1;
  }

/* Indirect Override. Removes top margin for topmost items of the form (below horizontal line). */
.activity-issue-form__primary-items .k-form-field {
  margin-top: 0px;
}

/* Indirect Override. Sets Color. */
.module-theme--activities .activity-issue-form__primary-items .k-button-icon {
  color: var(--module-color__activities);
}

/* Indirect Override. Sets Color. */
.module-theme--issues .activity-issue-form__primary-items .k-button-icon {
  color: var(--module-color__issues);
}

/* Indirect Override. Label width fix. */
.activity-issue-form__secondary-items .k-form-label {
  width: auto !important;
}

.activity-issue-form__textarea-component textarea {
  height: 10vh;
}

.activity-issue-form__delete-item-button--red {
  color: red
}

.collapsible-form-panel {
  width: 100%;
  border: 0px;
}

  .collapsible-form-panel .k-panelbar-toggle.k-icon {
    display: none;
  }

  .collapsible-form-panel .k-panelbar-header {
    border: none !important;
  }

  .collapsible-form-panel .k-panelbar-content {
    background-color: #f8f8f8;
  }

.module-theme--activities .collapsible-form-panel .k-link {
  background-color: #f8f8f8 !important;
  color: var(--module-color__activities) !important;
  padding: 0px !important;
}

.module-theme--issues .collapsible-form-panel .k-link {
  background-color: #f8f8f8 !important;
  color: var(--module-color__issues) !important;
  padding: 0px !important;
}


.collapsible-form-panel__header {
  cursor: pointer;
  font-size: 16px;
  align-items: center;
  display: flex;
  width: 100%;
  padding: 5px 0px;
}

.module-theme--activities .collapsible-form-panel__header .k-button-icon svg {
  color: var(--module-color__activities) !important;
}

.module-theme--issues .collapsible-form-panel__header .k-button-icon svg {
  color: var(--module-color__issues) !important;
}
/* #endregion Activity and Issue Form Styles */

/* #region Evidence Styles */

.evidence-item-container {
  border: 1px solid #cbcbcb;
  margin-bottom: 4px;
  margin-left: 20px;
  padding-right: 4px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.evidence-item {
  padding: 10px 10px 0px 10px;
  background-color: #f8f8f8;
}

.evidence-item__row {
  display: flex;
}

.evidence-item__move-fact-button {
  padding: 0px 7px !important;
}

.evidence-item__add-fact-button {
  color: var(--module-color__activities) !important;
}

  .evidence-item__add-fact-button > button {
    padding: 4px 0px 4px 8px;
  }

/* #endregion Evidence Styles */

/* #region Conclusion Styles */
.conclusion-container {
  border: 1px solid #cbcbcb;
  margin-bottom: 4px;
  margin-left: 20px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.conclusion-item {
  padding: 10px;
}

  .conclusion-item:hover {
    background-color: #b7d9ae;
    cursor: pointer;
  }

.conclusion-item__evidence-button {
  margin-right: 16px;
}

  .conclusion-item__evidence-button.k-disabled {
    opacity: 0.5;
  }

.conclusion-item__evidence-dropdown {
  overflow-y: auto;
}
/* #endregion Conclusion Styles */

/* #region Issue Example Styles */
.issue-example-container {
  border: 1px solid #cbcbcb;
  margin-bottom: 4px;
  margin-left: 20px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.issue-example-item {
  padding: 10px;
}

  .issue-example-item:hover {
    background-color: #f7d7c8;
    cursor: pointer;
  }
/* #endregion Issue Example Styles */

/* #region Tag Tree Styles */
.tag-tree-toggle-button {
  box-shadow: none;
  font: 500 13px/16px Roboto;
  padding: 0px;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  border-color: #dedede;
  background-color: #dedede;
  margin-top: 2px;
  margin-bottom: 2px;
}

.tag-tree-toggle-button__icon {
  padding: 0px !important;
}

.module-theme--activities .tag-tree-toggle-button {
  color: var(--module-color__activities--selected);
}

  .module-theme--activities .tag-tree-toggle-button.k-selected {
    background-color: var(--module-color__activities--selected);
    border-color: var(--module-color__activities--selected);
    color: white !important;
    opacity: 0.8;
  }

  .module-theme--activities .tag-tree-toggle-button:hover, .module-theme--activities .tag-tree-toggle-button:hover .tag-tree-toggle-button__icon,
  .module-theme--activities .tag-tree-toggle-button--selected, .module-theme--activities .tag-tree-toggle-button--selected .tag-tree-toggle-button__icon {
    background-color: var(--module-color__activities) !important;
    border-color: var(--module-color__activities) !important;
    color: white !important;
    opacity: 1 !important;
  }

.module-theme--issues .tag-tree-toggle-button {
  color: var(--module-color__issues--selected);
}

  .module-theme--issues .tag-tree-toggle-button.k-selected {
    background-color: var(--module-color__issues--selected);
    border-color: var(--module-color__issues--selected);
    color: white !important;
    opacity: 0.8;
  }

  .module-theme--issues .tag-tree-toggle-button:hover, .module-theme--issues .tag-tree-toggle-button:hover .tag-tree-toggle-button__icon,
  .module-theme--issues .tag-tree-toggle-button--selected, .module-theme--issues .tag-tree-toggle-button--selected .tag-tree-toggle-button__icon {
    background-color: var(--module-color__issues) !important;
    border-color: var(--module-color__issues) !important;
    color: white !important;
    opacity: 1 !important;
  }

.tag-tree-container {
  height: 38vh;
}

.tag-tree-component {
  width: auto;
  min-width: 180px;
  max-width: 500px;
}

.tag-tree-component__label {
  padding: 3px 6px;
  margin-right: 2px;
  text-transform: initial;
}

.tag-tree-component__label--selectable {
  border-right: solid 1px;
}

.tag-tree-component--disabled .k-checkbox-wrap {
  cursor: default;
  opacity: 0.6;
  pointer-events: none;
}

.tag-tree-component .k-treeview-leaf {
  width: 100%;
}

  /* Indirect Override. Matching color for clicked items with that of the old nTAP */
  .tag-tree-component .k-treeview-leaf.k-focus {
    background-color: #c2ddf2;
  }

.tag-tree-component .k-treeview-item {
  width: max-content;
}

.module-theme--activities .tag-tree-component .k-treeview-item {
  color: var(--module-color__activities);
}

  .module-theme--activities .tag-tree-component .k-treeview-item .k-checkbox {
    border-color: var(--module-color__activities);
  }

.module-theme--issues .tag-tree-component .k-treeview-item {
  color: var(--module-color__issues);
}

  .module-theme--issues .tag-tree-component .k-treeview-item .k-checkbox {
    border-color: var(--module-color__issues);
  }

.tag-tree-component .k-checkbox:indeterminate, .k-checkbox.k-indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='white' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/%3e%3c/svg%3e");
}

/* #endregion Tag Tree Styles */

/* #region Description Panel Styles */

.detailed-information-panel {
  writing-mode: vertical-rl;
}

  .detailed-information-panel .k-panelbar-item .k-link {
    cursor: pointer;
  }

  .detailed-information-panel svg {
    transform: rotateZ(270deg);
  }

.module-theme--activities .detailed-information-panel .k-link {
  color: white !important;
  background-color: var(--module-color__activities) !important;
}

.module-theme--issues .detailed-information-panel .k-link {
  color: white !important;
  background-color: var(--module-color__issues) !important;
}

.detailed-information-panel .k-link .k-panelbar-item-text {
  font-weight: bold;
}

.detailed-information-panel__content {
  writing-mode: initial;
  width: 25vw;
}

.detailed-information-panel__description-label {
  font-size: 15px;
  font-weight: bold;
  padding: 4px;
}

.module-theme--activities .detailed-information-panel__description-label {
  color: var(--module-color__activities);
}

.module-theme--issues .detailed-information-panel__description-label {
  color: var(--module-color__issues);
}

.detailed-information-panel .description-content__textarea-component textarea {
  color: black;
  pointer-events: auto;
  min-height: 15vh;
}

/* #endregion Description Panel Styles */

/* #region NavMenu Styles */

/* Applies base navigation Menu nav-box styling */
.nav-box {
  position: relative;
  color: white;
  margin: 10px;
  padding: 10px;
  text-align: center;
  justify-content: center;
  align-items: center;
  max-height: 120px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

  /* Applies selected nav-box styling for color and righthand triangle */
  .nav-box.selected::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--selected-color);
    margin-right: -10px;
  }

/* Applies specific nav-box color */
.nav-menu__home {
  background-color: var(--module-color__home);
}

  /* Applies specific nav-box hover and selected styles */
  .nav-menu__home:hover,
  .nav-menu__home.selected {
    background-color: var(--module-color__home--selected);
    cursor: pointer;
  }

/* Applies specific nav-box color */
.nav-menu__activities {
  background-color: var(--module-color__activities);
}

  /* Applies specific nav-box hover and selected styles */
  .nav-menu__activities:hover,
  .nav-menu__activities.selected {
    background-color: var(--module-color__activities--selected);
    cursor: pointer;
  }

/* Applies specific nav-box color */
.nav-menu__issues {
  background-color: var(--module-color__issues);
}

  /* Applies specific nav-box hover and selected styles */
  .nav-menu__issues:hover,
  .nav-menu__issues.selected {
    background-color: var(--module-color__issues--selected);
    cursor: pointer;
  }

/* Applies specific nav-box color */
.nav-menu__analysis {
  background-color: var(--module-color__analysis);
}

  /* Applies specific nav-box hover and selected styles */
  .nav-menu__analysis:hover,
  .nav-menu__analysis.selected {
    background-color: var(--module-color__analysis--selected);
    cursor: pointer;
  }

/* Applies specific nav-box color */
.nav-menu__reports {
  background-color: var(--module-color__reports);
}

  /* Applies specific nav-box hover and selected styles */
  .nav-menu__reports:hover,
  .nav-menu__reports.selected {
    background-color: var(--module-color__reports--selected);
    cursor: pointer;
  }

/* Applies specific nav-box color */
.nav-menu__settings {
  background-color: var(--module-color__settings);
}

  /* Applies specific nav-box hover and selected styles */
  .nav-menu__settings:hover,
  .nav-menu__settings.selected {
    background-color: var(--module-color__settings--selected);
    cursor: pointer;
  }

/* Applies specific nav-box color */
.nav-menu__admin {
  background-color: var(--module-color__admin);
  font-family: Roboto;
}

  /* Applies specific nav-box hover and selected styles */
  .nav-menu__admin:hover,
  .nav-menu__admin.selected {
    background-color: var(--module-color__admin--selected);
    cursor: pointer;
  }

/* Affects the nav menu to allow vertical scrolling on small screens */
.nav-menu {
  overflow-y: auto;
  min-width: 120px;
}

/* Affects the nav menu to display as disabled. Must be used in conjuction with code navigation prevention */
.nav-menu--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* #endregion NavMenu Styles */

/* #region Admin Styles */

/* Indirect Override. Affects tile background color */
.module-theme--admin .k-tilelayout {
  background-color: white;
}

/* Indirect Override. Affects the admin user prfile tile header */
.module-theme--admin .tile-layout .user-profile-tile .k-tilelayout-item-header {
  background-color: #f8f8f8;
  text-align: center;
  color: var(--module-color__admin);
  border-width: 0px;
}

/* Indirect Override. Affects tile background color */
.module-theme--admin .tile-layout .k-tilelayout-item-body {
  background-color: #f8f8f8;
}

/* Indirect Override. Affects border box shadow on tiles */
.module-theme--admin .tile-layout .k-tilelayout-item {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Indirect Override. Affects the admin tile header color */
.module-theme--admin .tile-layout .k-tilelayout-item-header {
  background-color: var(--module-color__admin);
}

/* Indirect Override. Prevent tabstrip header from showing (useful when we want grid headers in place of tile headers) */
.user-security-tile .k-tilelayout-item-header,
.security-groups-tile .k-tilelayout-item-header {
  display: none;
}

/* Indirect Override. Prevent grid borders (useful in tiles or tabstrips) */
.user-security-tile .k-grid,
.security-groups-tile .k-grid {
  border-style: none;
}

/* Indirect Override. Prevent tabstrip internal padding */
.user-security-tabstrip .k-tabstrip-content {
  padding: 0;
  overflow: hidden;
}

/* Indirect Override. Affects checkbox */
.module-theme--admin .k-checkbox {
  border-color: var(--module-color__admin);
}

  /* Indirect Override. Affects checkbox */
  .module-theme--admin .k-checkbox:checked {
    background-color: var(--module-color__admin);
  }

/* Affects user functions display header within the admin user page */
.module-theme--admin .user-functions-header {
  background-color: var(--module-color__admin);
  color: white;
  font-weight: bold;
}

/* Indirect Override. Affects tree view text color */
.module-theme--admin .k-treeview-leaf-text {
  color: var(--module-color__admin);
}

/* Indirect Override. Affects security functions treeview dropdown icon */
.module-theme--admin .security-functions-tree .k-svg-icon {
  color: var(--module-color__admin);
}

/* Affects the user admin treeview, subtracting 70px to allow space for the override checkbox and header */
.security-functions-tree {
  height: calc(100% - 70px);
}

/* Affects the div wrapping the user admin security grid. Used in conjunction with the below styling */
.user-security-grid-wrapper {
  height: 40%;
}

  /* Indirect Override. Applies padding to the admin user security group grid toolbar to allow the dropdown room */
  .user-security-grid-wrapper .app-grid .k-toolbar {
    padding: 5px 10px 5px 10px;
  }

/* Affects the div wrapping the user admin security functions tree. Used in conjunction with the above styling */
.user-security-tree-wrapper {
  height: 60%;
}

/* Indirect Override. Padding override for tag admin tile. */
.tag-admin-tile .k-tilelayout-item-header {
  padding: 3px 16px;
}

.tag-admin-tree .k-icon {
  color: var(--module-color__admin);
}

/* Indirect Override. Adjust leaf item of tag tree admin */
.tag-admin-tree .k-treeview-leaf {
  width: 100%;
  padding: 0px;
}

/* Indirect Override. Allow tag children containers to cause horizontal scrollbar */
.tag-admin-tree .k-animation-container,
#tag-container .k-treeview-lines {
  min-width: fit-content;
}

.tag-admin-tree-item {
  color: var(--module-color__admin);
  width: 100%;
  padding: 8px;
}

.tag-admin-tree-item--selected {
  background-color: var(--module-color__admin);
  color: white !important;
}

.tag-admin-form__container {
  padding: 0px 20px;
  width: 100%;
}

.tag-admin-form {
  font-size: 15px;
  height: 85%;
}

  /* Indirect Override. Sets Margin for form fields and buttons. */
  .tag-admin-form .k-form-md .k-form-field, .tag-admin-form .k-form-md .k-form-buttons {
    margin-top: 16px;
  }

  /* Indirect Override. Sets styling for field inputs. */
  .tag-admin-form .k-input-inner {
    background-color: white;
    padding-block: 4px;
    padding-inline: 8px;
    font-size: 15px;
  }

  /* Indirect Override. Sets Border for inputs and pickers. */
  .tag-admin-form .k-input, .tag-admin-form .k-picker {
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.38) !important;
  }

  .tag-admin-form .k-invalid {
    border-color: #f31700 !important;
  }

/* Indirect Override. Converts the form fields to be horizontal rather than vertical grouping. */
.tag-admin-form--horizontal-group .k-form-field {
  display: flex;
  align-items: center;
}

  /* Indirect Override. Label Styling for horizontal style form. */
  .tag-admin-form--horizontal-group .k-form-field label {
    margin-right: 10px;
  }

  /* Indirect Override. Converts the form fields to be horizontal rather than vertical grouping. */
  .tag-admin-form--horizontal-group .k-form-field .k-form-field-wrap {
    flex: 1;
  }

/* Indirect Override. Removes horizontal header line of form item. */
.tag-admin-form--no-header-line .k-form-legend {
  display: none;
}

/* #endregion Admin Styles */

/* #region Analysis Page Styles*/

/*Positions the tag dropdown in the analysis filter*/
.tag-dropdown {
  bottom: -150px;
}

/*Indirect override. Hides the tile header of the analysis filter.*/
.analysis-filter .k-tilelayout-item-header {
  display: none;
}

/*Indirect override. Colors the header of the card in the copy evidence container*/
.module-theme--analysis .analysis-grid-tile .k-card-header {
  background-color: var(--module-color__analysis);
}

  /*Indirect override. Colors the title of the card in the copy evidence container*/
  .module-theme--analysis .analysis-grid-tile .k-card-header .k-card-title {
    background-color: var(--module-color__analysis);
  }

/*Indirect override. Positions the copy evidence container*/
.analysis-grid-tile div.k-animation-container {
  right: 0px;
}

/*Indirect override. Prevent the hierarchy header button from being bottom aligned*/
.analysis-grid .k-header.k-hierarchy-cell.k-table-th {
  vertical-align: middle;
}

/*Indirect override. Colors the expand/collapse all icon in analysis grid*/
.analysis-grid #expandButton .k-button-icon {
  color: var(--module-color__analysis);
}

/*Indirect override. Wraps the text for analysis grid*/
.analysis-grid .k-detail-cell {
  text-wrap: wrap !important;
  word-break: break-word;
}

/* #endregion Analysis Page Styles*/

/* #region Reports page Styles*/
.reports-header {
  padding: 10px;
  background-color: var(--module-color__reports) !important;
  color: white;
  font-size: 14px;
  font-weight: bold;
  font-family: Roboto;
  line-height: 16px;
  display: flex;
  justify-content: space-between;
}

.reports-list-item-button {
  color: var(--module-color__reports);
  box-shadow: none;
  text-transform: none;
  font-weight: bold;
  font-size: 16px;
  padding: none;
}

  .reports-list-item-button.k-button-solid-base:active,
  .reports-list-item-button.k-button-solid-base:focus {
    box-shadow: none !important;
  }

.overlay-message {
  padding: 12px;
  background-color: #EDEDED;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 5px;
}
/* #endregion Reports page Styles*/

/* #region Assessment Settings Styles */
.settings-span {
  color: #065f6d;
  font-size: 0.875rem;
  text-align: center !important;
  font-weight: 700 !important;
  padding-bottom: 1rem !important;
  padding-top: 0.5rem !important;
}
/* #endregion Assessment Settings Styles */

/* #region General Styles */

/* Indirect override to apply consistent styling to selected list items */
.k-list-item.k-selected,
.k-list-item.k-selected:hover {
  color: initial;
  background-color: var(--background-color--selected);
}

/* Indirect override to apply consistent styling to list items on hover; k-menu targets DropDownButtonItems */
.k-list-item:hover,
.k-menu-popup .k-menu-item .k-menu-link:hover {
  background-color: var(--background-color--hover);
}

/* Indirect override to prevent theme's default pink text and icon color on click of DropDownButtonItems */
.k-menu-popup .k-menu-item .k-menu-link-text,
.k-menu-popup .k-menu-item .k-icon {
  color: initial;
}

/*
Indirect Override. Affects the base tile layout component header.
We default to blue as this is the most commonly used color.
To override this to a specific color, see the AssessmentHome styles above
*/
.tile-layout .k-tilelayout-item-header,
.tile-layout .k-card-title {
  background-color: var(--module-color__home);
  color: white;
  font-size: 14px;
  font-weight: bold;
}

/* Indirect Override. Affects the tile layout component's body */
.tile-layout .k-card:not(.assessment-header-info, .facts-to-issues-tile) > .k-card-body {
  padding: 0px;
  overflow-y: auto;
}

/* Indirect Override. Apply to loading containers to let them be transparent over the component */
.app-loader .k-loader-container-panel {
  background-color: transparent;
  border-style: none;
}

/* Indirect Override. Apply to loading containers to remove animation icon */
.no-loader-animation .k-loader {
  display: none;
}

/* Indirect Override. Apply to Push style Drawer components to mimic the style of
 * an Overlay style drawer component. This is how you have to make an Overlay style
 * drawer that contains a ComboBox or Date picker control in it.
*/
.overlay-drawer.k-drawer-container {
  position: fixed;
  z-index: 10002;
  top: 0;
  right: 0;
  height: 100%;
}

.overlay-drawer .k-drawer-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.overlay-drawer-body {
  padding: 10px;
  flex-grow: 1;
  display: flex;
}

.form-grow {
  flex-grow: 1;
}

.drawer-close:hover {
  color: gray;
  cursor: pointer;
}

.drawer-close {
  color: white;
}

.text-transform-none,
.text-transform-none .k-button {
  text-transform: none !important;
}

/* Override to allow dialogs to be positioned above loading masks
 * https://feedback.telerik.com/blazor/1653349-dialogs-and-loading-indicator-z-index-broken-v6-0
 */
.k-dialog-wrapper:has(.k-alert) {
  z-index: 21000 !important;
}

/* Override to set max width of predefined alert dialogs. Primarily used with our error notifications
 * https://www.telerik.com/blazor-ui/documentation/knowledge-base/dialog-dialogfactory-alert-confirm-prompt-width
 */
.k-dialog.k-alert {
  max-width: 50vw;
}

/* Indirect override to set max width of toasts.
 * We need to target the content because of how the toasts are positioned
 */
.notification--width .k-notification-container .k-notification .k-notification-content {
  max-width: 300px;
  overflow-wrap: break-word;
}

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

.max-h-80 {
  max-height: 80px;
}

.max-h-300 {
  max-height: 300px;
}

.max-h-350 {
  max-height: 350px;
}

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

.grid-row__hover tr:not(.k-grid-norecords):hover {
  cursor: pointer;
}

/* #endregion General  Styles */