:root {
    --primary-color: #3161d1;
    --text-color: #333;
    --gray-color: #e0e0e0;
    --success-color: #03cc76;
    --primary-light: #6e8fde;
    --primary-lighter: #acbfec;
    --primary-lightest: #eaeffb;
    --pre-startup-color: #ff8080;
    --closure-startup-color: #F68537;
    --post-startup-color: #6e9aaa;
    --closure-items-color: #FF7A30;
    --dotted-line-color: #C0C0C0;
    --moc-total-projects: #498add;
    --moc-open-projects: #2dbb9b;
    --moc-closed-projects: #b7b7b7;
    --moc-pending-projects: #f6bb43;
    --moc-watchpoint-projects: #ff7f50;
    --moc-hpapproval-color: #77dd77;
    --moc-hprejected-color: #ff6961;
}

@font-face {
  font-family: AvenirNextLTW01-Regular;
  src: url(../theme/font/AvenirNextLTW01-Regular.woff2) format("woff2");
}

@media (max-width: 1167px){
    .b-menubar,.set-backup {
        display: none !important;
    }

    .mob-set-backup{
        display: block;
    }
}

@media (min-width: 1167px) {
    .b-sidebar {
        display: none;
    }
}


@media (max-width: 768px) {

  .b-menu-toggler {
    display: block;
    position: absolute;
    top: 7%;
  }

  .nav-links {
    display: block;
  }

  .sub-menu {
    top: 140px !important;
  }
}

@media (min-width: 768px) {

  html {
    font-size: 16px;
  }
}

/* #region 1.Main */

html {
    font-size: 14px;
}

*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(i):not(.error_page):not(.k-dialog-title, .doc-badge) {
    font-size: 13px !important;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn {
    font-family: AvenirNextLTW01-Regular !important;
}

.btn {
    font-weight: bold;
}
/* #endregion */

/* #region 2.Header Menu */

main {
    margin: 0 20px;
    padding-bottom: 20px;
}

.main {
    height: 80vh;
    overflow-y: auto;
    padding: 0.5rem 0.5rem;
    flex-grow: 1;
    background-color: #f7f7f7;
    width: 100%;
    overflow-x: hidden;
}

header {
    margin-bottom: 15px;
}

.navbar {
    background-color: white;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-shadow: 0px 7px 19px -3px rgba(0, 0, 0, 0.3) !important;
}

.nav-menu {
    padding: 0;
}

    .nav-menu .active,
    .navbar .nav-item:hover {
        background-color: var(--primary-light);
    }

    .nav-menu .nav-item a,
    .navbar-nav .nav-link {
        font-size: 13px;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

.nav-item {
    cursor: pointer;
}

.dropdown-menu a {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

#header-img {
    background-color: var(--primary-color);
    width: 100%;
}

.navbar-light .navbar-nav .nav-link {
    padding-left: 8px;
    padding-right: 8px;
}

.navbar-light .navbar-nav .active,
.nav-link:hover {
    color: var(--primary-color);
}

.navbar-light .navbar-nav .active {
    color: white;
}

.dropdown-menu .active {
    background-color: white;
    color: var(--primary-color);
}

.dropdown-item:active {
    background-color: var(--primary-color);
    color: white;
}

.dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
}

#mod-dropdown {
    margin-right: 20px;
}

.dropdown-menu {
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
}

.usr-link {
    color: white;
}

    .usr-link:hover {
        text-decoration: underline !important;
        color: #62ff00;
    }

.link {
    cursor: pointer;
}

    .link:hover {
        text-decoration: underline !important;
    }

.set-backup {
    padding-left: 1.7rem;
    padding-right: 1.2rem;
}

.b-header:first-child {
    padding-left: 20px;
}

.radio-active {
    transform: scale(1.2);
}

/*.radio-active.form-check-input:checked {
    background-color: #66bb6a !important;
    border-color: #66bb6a !important;
}

.radio-active.form-check-input:focus {
    border-color: #b9dfbb !important;
    box-shadow: 0 0 0 0.15rem #b9dfbb !important;
}*/

.bk-usr-link{
    min-width: 150px;
}

.mod-link{
    min-width:178px;
}


#breadcrumbs ul {
    list-style: none;
    display: flex;
    margin: 5px 5px 10px 0px;
    padding: 0px !important;
}

#breadcrumbs li {
    flex: 1;
    height: 30px;
    display: inline-flex;
    position: relative;
}

#breadcrumbs .content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 15px;
    background-color: #d5d5d5;
}

    #breadcrumbs .content:not(.tool-tip) {
        pointer-events: none;
        user-select:none;
    }

#breadcrumbs .tool-tip {
    user-select: none;
    cursor: pointer;
}

#breadcrumbs .content-link {
    width: 15px;
    height: 2px;
    margin: 12px 0px;
    background-color: #d5d5d5;
}

/* #endregion */

/* #region 3.Kendo */
.k-grid-header:not(.allow-scroll .k-grid-header) {
    background-color: #f0f0f0;
    padding: 0 !important;
}

.k-grid-table thead .k-link,
.k-column-title {
  font-weight: 600 !important;
  color: #fff;
  margin-top: 1px;
}

.k-pager-numbers .k-link.k-selected,
.k-pager-numbers .k-link.k-state-selected {
  color: white;
  background-color: var(--primary-color);
}

.k-pager-numbers .k-link {
  color: var(--primary-color);
}

.k-grid td.k-selected,
.k-grid td.k-state-selected,
.k-grid tr.k-selected > td,
.k-grid tr.k-state-selected > td {
  background-color: var(--primary-lightest);
  color: #333;
}

.k-list-item.k-selected.k-hover,
.k-list-item.k-selected:hover,
.k-selected.k-hover.k-list-optionlabel,
.k-selected.k-list-optionlabel:hover,
.k-list-item.k-selected,
.k-selected.k-list-optionlabel,
.k-selected,
.k-calendar .k-hover:hover {
  background-color: var(--primary-color);
}

.k-grid tr.k-alt {
  background-color: rgba(0, 0, 0, 0.03);
}

.k-toolbar .k-input,
.k-toolbar .k-picker {
  width: 20em;
}

.k-column-title {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: 25px;
  display:flex;
  align-items:center;
}

.k-picker-solid {
  background-color: transparent !important;
  border-color: #d5d5d5;
}

.k-tooltip {
  max-width: 400px;
}

.k-stepper .k-step-label .k-step-text {
  white-space: normal;
}

.k-stepper .k-step-done .k-step-indicator {
  border-color: #046db1;
  background-color: #046db1;
}

.k-stepper .k-step-current .k-step-indicator {
  border-color: rgb(57 218 138);
  background-color: rgb(57 218 138);
}

.k-step-error .k-step-indicator {
  border-color: rgb(255 91 92) !important;
  background-color: rgb(255 91 92) !important;
  color: white !important;
}

.k-focus,
.k-textbox:hover {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--primary-color) !important;
  border-width: 1.4px !important;
}

.k-calendar-container {
  max-height: 300px !important;
}

.k-list-content {
  overflow: auto !important;
}

.k-datepicker.k-input-solid:not(.k-datepicker.k-input-solid.error) {
    border-color: #e3e3e3 !important;
}

.k-datepicker:hover {
    border-color: var(--primary-color);
    border-width: 1.4px;
}

.k-calendar-tr .k-focus,
.k-calendar-tr .k-hover a,
.k-calendar-tr .k-focus:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
  animation-delay: 0 !important;
}

.k-grid-toolbar .k-spacer {
  display: none;
}
.k-list-item-text {
  width: 100%;
  line-height: 1.5;
}
.k-list-content .k-selected td {
  color: white;
}

#k-table-wizard-tabs {
  max-height: 70vh !important;
}

.k-calendar .k-nav-today {
  color: var(--primary-color);
}

.k-calendar .k-nav-today.k-focus,
.k-calendar .k-nav-today.k-hover,
.k-calendar .k-nav-today.k-state-focus,
.k-calendar .k-nav-today.k-state-hover,
.k-calendar .k-nav-today:focus,
.k-calendar .k-nav-today:hover {
  color: var(--primary-light);
}

.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link,
.k-calendar .k-calendar-td.k-state-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-state-selected .k-link {
  background-color: var(--primary-color);
}

.k-detail-cell .k-grid-pager {
  display: none;
}

.k-detail-row .k-hierarchy-cell,
.k-detail-cell {
  background-color: var(--primary-lightest);
}

.k-icon {
  cursor: pointer;
  vertical-align: top;
  margin-top: 1px;
}

.k-rounded-md {
  border-radius: 0;
}

.k-grid-header,
.k-grid-header table tr {
  background-color: var(--primary-color);
}

.k-grid tr.k-alt {
  background-color: white;
}

.k-grid-header table .k-column-title,
.k-grid-header .k-i-filter {
  color: white;
}

.k-grid-header-wrap {
  border-width: 0 0 1px 0;
}

.k-grid td,
.k-grid th {
  border-width: 0 0 1px 0;
  border-color: #e6e6e6;
}

.k-grid td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.k-auto-scrollable:not(.allow-scroll .k-auto-scrollable) {
    overflow-y: hidden;
}

.k-input-solid.k-focus,
.k-input-solid:focus {
  border-color: var(--primary-color);
  box-shadow: none;
}

.k-grid-header .k-i-sort-asc-sm,
.k-grid-header .k-i-sort-desc-sm {
  color: white;
}

.k-cell-inner > .k-link {
  padding: 2px 12px 0 12px;
}

.k-grid-header .k-i-filter {
  margin-top: 4px;
}

.k-grid-header .k-header {
  vertical-align: middle;
}

.k-grid-toolbar {
  padding-left: 0;
}

.btn-toolbar {
  padding-top: 3px;
  padding-bottom: 3px;
}

.k-master-row td {
  padding-left: 12px !important;
}

.k-multiselect {
    border-color: #e3e3e3 !important;
}

.k-multiselect .k-chip {
    background-color: var(--primary-lightest);
}

.k-autocomplete.k-input-solid {
    border-color: #e3e3e3 !important;
}

.k-list-filter .k-input-inner {
    z-index: 9999 !important;
}

.k-list-filter .k-searchbox .k-input-inner {
  padding: 4px 0;
}

.k-toolbar .k-searchbox {
  margin-left: 6px;
}

.k-grid-customRefresh {
    position: absolute;
    right: 94px;
    padding-top: 6px;
    padding-bottom: 6px;
}

#entity-1-list .k-list-item-text,
#entity-2-list .k-list-item-text,
#entity-3-list .k-list-item-text {
    display: flex;
    flex-direction: column;
    align-items: start;
    height: 25px;
}

.k-grouping-header {
    display: none;
}

.k-button-group{
    display:flex;
    gap: 6px;
}

.k-button-group .k-button {
    background-color: #f3f6f8;
}

    .k-button-group .k-button i{
        display:none;
    }

    .k-button-group .k-selected {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
    }

        .k-button-group .k-selected i{
            display:block !important;
        }

    .k-button-group .k-button {
        transition: color 0s ease-in-out !important;
    }

    .k-dialog-titlebar {
        background-color: var(--primary-color);
    }

.k-dialog-title{
    font-size: 15px !important;
}
.k-treeview-md,
.k-treeview-leaf-text,
.k-chip-md {
    font-size: 12px;
}

.k-treeview-leaf.k-in.k-selected,
.k-treeview-leaf.k-in.k-hover,
.k-treeview-leaf.k-in.k-focus {
    border-radius: 2px;
}

.k-treeview-md .k-treeview-leaf{
    padding: 1px 6px;
    margin-bottom: 2px;
}

.k-treeview-leaf.k-in.k-focus{
    border: none;
}

.k-icon.k-cus-folder::after {
    content: "\e900";
}

.k-checkbox.k-indeterminate, .k-checkbox:indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233161d1' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e")
}

.k-checkbox:checked:focus{
    box-shadow: none;
}


.k-dropdowntree .k-chip{
    background-color: var(--primary-lighter);
}

.k-checkbox.k-checked, .k-checkbox:checked{
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.k-dropdowntree,
.k-checkbox{
    border-color: #d5d5d5;
}

.k-treeview-leaf.k-in.k-selected,
.k-treeview-leaf.k-in.k-hover,
.k-treeview-leaf.k-in.k-focus {
    border-radius: 2px;
}

.k-treeview-item {
    padding: 2px 0;
}

.k-treeview-md .k-treeview-leaf {
    padding: 1px 6px !important;
}

    .k-treeview-md .k-treeview-leaf .k-treeview-leaf-text {
        user-select: none;
        margin-top: 4px !important;
    }

.k-treeview-leaf.k-focus,
.k-treeview-leaf:focus {
    box-shadow: none !important;
}

.k-treeview-leaf.k-in {
    display: flex !important;
    align-items: start !important;
}
.k-grid-content:has(.no-records) {
    overflow-x: hidden !important;
}
/* #endregion */
/* #region 4.Dashboard */
.dashboard {
}

/* Compact summary tiles (about 62px). The colour is on the inner .db-tile; spacing comes from the
   row gutter, so the row never runs wider than the page. */
.dashboard .widgets .db-tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 62px;
  padding: 6px 14px;
  border-radius: 6px;
}

.dashboard .widgets img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* My Tasks / My Action Items use a Font Awesome glyph in the same white outline style. */
.dashboard .widgets .db-tile > .fa {
  font-size: 28px;
  color: white;
  flex-shrink: 0;
}

/* Not risk colours: these two tiles are plain counts. White text passes contrast on both. */
.dashboard .widgets .my-tasks {
  background-color: #7965C1;
}

.dashboard .widgets .my-actions {
  background-color: #2b7a8a;
}

.dashboard .widgets .detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.dashboard .widgets .total {
  background-color: var(--moc-total-projects);
}

.dashboard .widgets .open {
  background-color: var(--moc-open-projects);
}

.dashboard .widgets .closed {
  background-color: var(--moc-closed-projects);
}

.dashboard .widgets .pending {
  background-color: var(--moc-pending-projects);
}

    .dashboard .widgets .overdue {
        background-color: #ff5858;
    }

    .dashboard .widgets .watchpoint {
        background-color: var(--moc-watchpoint-projects);
    }

.dashboard .widgets .count,
.dashboard .widget .title {
  color: white;
}

.dashboard .widgets .count {
  font-weight: bold;
  font-size: 22px;
  line-height: 1.1;
  margin: 0 0 2px;
}

.dashboard .widgets .title {
  color: white;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
}

/* Dashboard cards: tighter padding and a compact header so charts, not whitespace, fill them.
   Scoped to .dashboard - other screens' cards and .chart-header are unchanged. */
.dashboard .card-body {
  padding: 10px 14px;
}

.dashboard .chart-header {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin-bottom: 6px;
  padding-bottom: 3px;
}

.dashboard .chart-header h4 {
  margin: 0;
  font-size: 16px;
}

/* Status, Discipline and Unit / Zone share one row height; the Unit / Zone list scrolls inside it. */
.dashboard .db-chart-card {
  height: 268px;
}

.dashboard .db-unit-list {
  height: 208px;
  overflow-y: auto;
}

/* Status / Discipline: the donut with its total in the hole and a count list beside it (stacked on
   phones). The list scrolls inside the card when a Site has many disciplines. */
.dashboard .db-donut {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 210px;
}

.dashboard .db-donut-chart {
  position: relative;
  flex: 0 0 170px;
  width: 170px;
  height: 170px;
}

.dashboard .db-donut-chart > div:first-child {
  width: 170px;
  height: 170px;
}

.dashboard .db-donut-total {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Class-based so it outranks the global "*:not(...) { font-size: 13px !important }" reset. */
.dashboard .db-donut-total .db-donut-num {
  font-size: 22px !important;
  line-height: 1.1;
  color: var(--text-color);
}

.dashboard .db-donut-total span {
  color: #6c757d;
}

.dashboard .db-donut-legend {
  flex: 1;
  min-width: 0;
  max-height: 210px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard .db-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 46px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.dashboard .db-legend-row:hover {
  background: var(--primary-lightest);
}

.dashboard .db-legend-row:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

.dashboard .db-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dashboard .db-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard .db-legend-count {
  font-weight: 700;
  text-align: right;
}

.dashboard .db-legend-pct {
  color: #6c757d;
  text-align: right;
}

@media (max-width: 575.98px) {
  .dashboard .db-chart-card {
    height: auto;
  }

  .dashboard .db-donut {
    flex-direction: column;
    height: auto;
  }

  .dashboard .db-donut-legend {
    width: 100%;
    max-height: none;
  }
}

/* Top 10 beside the activity chart: compact rows so most of the ten show without scrolling. */
.dashboard #grd-top-risk-threat td {
  padding-top: 5px;
  padding-bottom: 5px;
}

.dashboard .db-top-threat a {
  font-weight: 600;
  margin-right: 10px;
}

/* Score badge: neutral in every theme - the weighted score has no colour bands, so it never takes
   an exposure colour. */
.dashboard .db-score-badge {
  display: inline-block;
  min-width: 62px;
  padding: 1px 8px;
  border-radius: 4px;
  text-align: center;
  font-weight: 700;
  color: var(--cen-slate, #2b3a47);
  background: #eef1f4;
  border: 1px solid #d3dae1;
}

/* Risk Assessment Summary - one segmented bar per matrix, then a key with every count. Segment
   colours come from getRiskExposureColor (the official exposure colours); Not Set is neutral. The
   key repeats every count as text, so nothing relies on colour alone. */
.dashboard .db-risk-caption {
  color: #6c757d;
}

.dashboard .db-risk-row {
  margin-bottom: 6px;
}

.dashboard .db-risk-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.dashboard .db-risk-bar {
  display: flex;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--gray-color);
}

.dashboard .db-risk-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  color: #ffffff;
  font-weight: 700;
}

.dashboard .db-risk-notset {
  background: #b7b7b7;
}

.dashboard .db-risk-table {
  width: 100%;
  margin-top: 8px;
}

.dashboard .db-risk-table th,
.dashboard .db-risk-table td {
  padding: 1px 2px;
  text-align: center;
  white-space: nowrap;
}

.dashboard .db-risk-table th {
  font-weight: 600;
}

.dashboard .db-risk-table tbody tr {
  border-top: 1px solid #e0e0e0;
}

.dashboard .db-risk-table tbody th {
  text-align: left;
}

.dashboard .db-risk-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 2px;
}

 .chart-header {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 8px;
}

 .chart-header h4 {
  color: #707070;
}

.dashboard .item-list .items {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 8px;
  padding-bottom: 2px;
  padding-right: 10px;
}

.dashboard .bullet {
  width: 10px;
  height: 10px;
  background-color: var(--primary-color);
  border-radius: 100%;
  margin-right: 8px;
}

.dashboard .item-list .items div {
  display: flex;
  align-items: center;
}

.dashboard .bullet {
  background-color: var(--moc-pending-projects);
}

.card{
    margin-bottom: 0px !important;
}

/* #endregion */

/* #region 5.Common */
.nav-tabs .active:not(.styled-tab .nav-tabs .active) {
    font-weight: 600;
}

.icons {
  font-size: 16px;
  color: #727272;
}

.form-control, .form-select {
    border-radius: 0 !important;
}

    .form-control:focus,
    .form-select:focus,
    .btn:focus {
        outline: none !important;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--primary-color) !important;
        border-width: 1.4px !important;
    }

.tbl-detail {
  width: 100%;
}

.tbl-detail td {
  padding-top: 7px;
  vertical-align: top;
}

.tbl-detail tr td:first-child {
  color: var(--text-color);
  font-weight: 500;
  white-space: nowrap;
  padding-right: 20px !important;
}

.tbl-detail tr td:last-child {
  color: var(--text-color);
  width: 100%;
}

.tbl-lined tr {
    border-bottom: 1px dotted var(--dotted-line-color) !important;
}

.tbl-lined textarea, .tbl-lined .form-control, .tbl-lined .k-dropdownlist, .tbl-lined .k-multiselect, .tbl-lined .k-upload {
    margin-bottom: 6px;
}

.detail {
    color: var(--text-color);
    font-weight: 500;
    word-wrap: break-word;
}

.btn-secondary {
  background-color: gray !important;
}

.btn {
  border-radius: 0px !important;
}

.btn:not(.btn-normal) {
  min-width: 100px;
}

.btn-label-secondary {
  width: 100px;
  color: #69809a;
  border-color: lightgray;
  background: #e7ebef;
}

.btn-label-secondary:hover {
  border-color: rgba(0, 0, 0, 0) !important;
  background: #69809a !important;
  color: #fff !important;
}

.btn-mr {
  margin-right: 0.6rem;
}

.icon-mr {
  margin-right: 0.2rem;
}

.required-img {
  width: 5.5px;
  height: 5.5px;
  margin-left: 2px;
  position: relative;
  top: -3px;
}

.info-img {
  width: 15px;
  height: 15px;
  position: relative;
  top: -1px;
  margin-left: 2px;
  cursor: pointer;
}

.error {
  border-color: red !important;
}

.form-check-input {
  margin-top: 0.14rem !important;
  width: 1.1em;
  height: 1.1em;
}

.k-step:not(.k-step-focus) {
  pointer-events: none;
}

.request-title {
  font-size: 10pt;
  font-weight: bold;
  color: var(--primary-color);
  display: flex;
  align-items: center;
}

.modal-title {
  font-size: 18px !important;
  color: var(--text-color) !important;
}

.fit-content {
  width: fit-content;
}

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

.form-check-label {
  color: var(--text-color) !important;
  margin-top: 1px;
}

.table td {
  vertical-align: middle;
}

.option-col {
  width: 100px;
}
.k-grid-options .fa-trash:hover {
  color: #f62d51;
}

.k-grid-options .fa-pencil:hover,
.fa-search:hover {
  color: var(--primary-color);
}

.apexcharts-legend-text {
  font-family: "CircularStd" !important;
}

.error-view {
  display: flex;
  flex-direction: column;
}

.errorview-header {
  height: 25vh;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: end;
  padding-bottom: 0.8rem;
  padding-left: 2rem;
}

.error-content {
  padding-top: 2rem;
  padding-bottom: 0.8rem;
  padding-left: 2rem;
  color: var(--text-color);
}

.error-content h4 {
  font-weight: normal;
}

#start-doc,
#eng-doc,
#moc-doc,
#attachment-doc {
  font-size: 12px !important;
}

.custom-modal .modal-body {
  padding: 20px 30px 15px 30px !important;
}

.continue-btn,
.continue-btn:hover,
.continue-btn:focus,
.continue-btn:active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}
.toastify {
  display: flex !important;
  justify-content: space-between !important;
}

.td {
  vertical-align: middle !important;
  width: 1% !important;
}

.icon-btn {
  padding: 0.375rem 0.75rem 0.2rem !important;
  margin: 0 0.2rem;
}

.banner {
  background-color: var(--primary-color);
  color: white;
  padding: 5px 10px;
  vertical-align: middle;
  margin-bottom: 0.7rem;
}

.banner h4 {
  margin-bottom: 0 !important;
}

.search-report {
  font-weight: 300;
}
.search-report b {
  font-weight: bolder;
}

.search-report .filter {
  background-color: #e6e6e6;
  padding: 0.6rem;
}

.template-stirngs {
  display: flex;
  flex-direction: column;
  border: 1px solid #e3e3e3;
  height: 520px;
  overflow-y: auto;
}

.template-stirngs span {
  border-radius: 0;
  padding: 8px 0;
  color: #444;
}

.message {
  height: 70vh;
}

.message .col-md-12 {
  border-top: 0.5rem var(--success-color) solid;
  background-color: white;
  padding: 1.5rem 2rem;
  text-align: center;
  border-radius: 6px;
}

.message h3 {
  color: var(--success-color);
  text-transform: uppercase;
  margin-bottom: 1.8rem;
}

.message button {
  width: 100%;
}

.message img {
  width: 50px;
  height: 50px;
  margin-bottom: 1.5rem;
}

.message .btn {
  margin-top: 1rem;
  background-color: var(--success-color);
}

.btn-copy {
  background-color: var(--success-color);
  color: white;
}

.btn-copy,
.message input {
  cursor: pointer !important;
}

.message .input-group {
  margin-top: 0.7rem;
}

.img {
  width: 20px;
  height: 20px;
}

.unit-engineer .k-dropdownlist {
  background-color: white !important;
}

.btn-primary {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-primary:hover {
  background-color: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
}

.nav-tabs.nav-tabs-bottom > li > a.active,
.nav-tabs.nav-tabs-bottom > li > a.active:hover,
.nav-tabs.nav-tabs-bottom > li > a.active:focus {
  border-bottom-color: var(--primary-color);
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus{
  border-color: var(--primary-light);
  box-shadow: 0 0 0 0.15rem var(--primary-light);
}

.form-select:focus {
    box-shadow:none;
}

.k-button-solid-primary,
.k-button-solid-primary.k-hover,
.k-button-solid-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

#drop-zone .input {
  display: none;
}

#drop-zone p {
  color: grey;
}

#drop-zone img {
  width: 40px;
  height: 40px;
}

.dropzone {
  border: 2px dashed #ccc;
  border-radius: 4px;
  padding: 20px;
  height: 130px;
  text-align: center;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.dropzone p {
  margin: 0;
  color: var(--text-color);
}

.dropzone.dragover {
  border-color: var(--primary-color);
  background-color: var(--primary-lightest);
}

#drawer-content li {
  font-size: 1.2em;
  padding-left: 0.89em;
  background: 0 0;
  border-radius: 0;
  border-width: 0 0 1px;
  border-color: rgba(33, 37, 41, 0.125);
  border-style: solid;
  line-height: 1.5em;
}

#drawer-content li:last-child {
  border: 0;
}

.hidden {
  display: none;
}

.k-toolbar .k-icon {
  font-size: 18px;
}

#config #toolbar .k-selected {
  background-color: transparent;
}

.k-drawer-item.k-selected.k-hover,
.k-drawer-item.k-selected.k-state-hover,
.k-drawer-item.k-selected:hover,
.k-drawer-item.k-state-selected.k-hover,
.k-drawer-item.k-state-selected.k-state-hover,
.k-drawer-item.k-state-selected:hover,
.k-drawer-item.k-selected,
.k-drawer-item.k-state-selected {
  background-color: var(--primary-color);
}

#drawer,
#drawer-content {
  height: 67vh;
}

#list-box {
  margin-top: 20px;
}

#list-box label {
  color: var(--primary-color);
  margin-bottom: 4px;
}

#drawer-content li {
  border: none;
  outline: none;
  padding-right: 0.89em;
}

#drawer-content li:hover {
  background-color: #ebebeb;
}

#drawer-content .k-selected,
#drawer-content li:hover {
  background-color: var(--primary-color);
  color: white;
}

.k-listbox-toolbar li:hover {
  background-color: transparent !important;
}

#avl-companies {
/*  width: 530px;*/
}

#list-box .demo-section {
/*  max-width: none;*/
  width: 100%;
}

#list-box .k-listbox {
/*  width: 545px;*/
  width: 100%;
  height: 300px;
  margin-bottom: 10px;
}

#list-box .row .col-md:last-child{
    width: 92%;
}

#list-box .k-listbox:first-of-type {
    /*  width: 530px;*/
    margin-right: 1px;
}

#choice-list .k-list-scroller,
#choice-list .k-listbox {
  width: 100%;
}

.b-header {
  background-color: var(--primary-color);
  box-shadow: 0 0 0 #000;
  display: flex;
  align-items: center;
}

.b-header img {
  width: 100%;
  object-fit: cover;
}

.b-header .brand {
  color: white;
  margin-top: 10px;
  margin-bottom: 0;
  font-weight: bold;
}

.brand-window {
  margin-top: 4px !important;
}

.b-menubar {
    margin-top: 12px;
    margin-left: 118px;
    margin-right: 20px;
    background-color: var(--primary-color);
}

.b-menu-list {
  display: flex;
  justify-content: start;
  list-style-type: none;
  padding-inline-start: 0;
  margin-bottom: 0;
}

.b-menu-list .b-menu-item {
  margin: 0 0.5rem;
  font-weight: 400;
  transition: background-color ease 0.2s, color ease 0.2s;
  margin: 0;
  padding: 0.8rem 0;
}

.b-menu-list .b-menu-item .b-menu-link {
  text-decoration: none;
  font-family: AvenirNextLTW01-Regular;
  font-weight: 100;
  transition: background-color ease 0.2s, color ease 0.2s;
  color: white;
  padding: 0 0.8rem;
  display: flex;
}

.b-menu-list .b-menu-item:hover {
  background-color: white;
}

.b-menu-list .b-menu-item:hover > .b-menu-link {
  color: var(--primary-color);
}

.b-menu-list .active {
  background-color: white;
}

.b-menu-list .active .b-menu-link {
  color: var(--primary-color) !important;
}

.b-menu-item .b-menu-link i {
  margin-left: 5px;
  margin-top: 4px;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 105px;
  background-color: white;
  width: auto;
  min-width: 146px;
  list-style: none;
  padding-left: 0;
  box-shadow: 0 25px 50px -8px rgba(0, 0, 0, 0.19),
    0 20px 15px -8px rgba(0, 0, 0, 0.24);
}

#bkusr-dropdown .sub-menu {
   top: 94px;
}

#bkusr-dropdown .sub-menu .sub-menu-item:hover > a span {
  color: white !important;
}

.b-menu-item:hover > .sub-menu {
  display: block;
}

.sub-menu .sub-menu-item {
  padding: 0.2rem 0;
}

.sub-menu .sub-menu-item a {
  display: block;
  padding: 0.3rem 0.8rem;
}

.sub-menu .sub-menu-item a span {
  color: var(--text-color);
  font-family: AvenirNextLTW01-Regular;
  font-weight: 100;
}

.sub-menu .sub-menu-item:hover {
  background-color: var(--primary-color);
}

.sub-menu .sub-menu-item:hover > a span {
  color: white;
}

.b-menu-toggler {
  display: none;
  background-color: white;
  padding: 0.3rem 1rem;
  box-shadow: 0px 0px 50px #000;
}

.b-menu-toggler i {
  color: var(--primary-color);
}

.b-header .actions {
  margin-top: 18px;
}

#bkusr-dropdown span {
  font-weight: 500;
  color: var(--text-color);
  display: flex;
  align-items: center;
  font-family: AvenirNextLTW01-Regular;
}

#bkusr-dropdown span i {
  font-size: 16px;
  color: var(--text-color);
  margin-left: 4px;
}

/* Compact variant of the theme onoffswitch (style.css). */
.onoffswitch.onoffswitch-sm {
  width: 52px;
  margin-left: 0;
  flex-shrink: 0;
}

.onoffswitch-sm .onoffswitch-inner:before,
.onoffswitch-sm .onoffswitch-inner:after {
  height: 22px;
  line-height: 22px;
  font-size: 11px;
}

.onoffswitch-sm .onoffswitch-inner:before {
  padding-left: 8px;
}

.onoffswitch-sm .onoffswitch-inner:after {
  padding-right: 8px;
}

.onoffswitch-sm .onoffswitch-switch {
  width: 16px;
  height: 16px;
  margin: 3px;
  right: 30px;
}

.onoffswitch-sm .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0;
}

.onoffswitch-sm .onoffswitch-checkbox:disabled + .onoffswitch-label {
  opacity: 0.6;
  cursor: wait;
}

/* Long backup-user lists scroll under the pinned Email Notifications toggle. */
#bkusr-dropdown .bk-usr-menu {
  right: 20px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

#bkusr-dropdown .email-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
}

#bkusr-dropdown .email-pref:not(:last-child) {
  border-bottom: 1px solid #e6e6e6;
}

#bkusr-dropdown .email-pref:hover {
  background-color: white;
}

/* #bkusr-dropdown span is display:flex, which would flatten the switch's inner spans. */
#bkusr-dropdown .email-pref .onoffswitch-inner,
#bkusr-dropdown .email-pref .onoffswitch-switch {
  display: block;
}

#logo {
  margin-top: 10px;
  margin-right: 10px;
  width: 120px;
  object-fit: cover;
  padding-right: 10px;
  border-right: 1px solid #e6e6e6;
}

#logo-window {
  margin-top: 6px;
  margin-right: 10px;
  width: 100px;
  object-fit: cover;
  padding-right: 10px;
  border-right: 1px solid #e6e6e6;
}

.copy-right {
  background-color: #e0e1e3;
  color: var(--primary-color);
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
}

.copy-right h4 {
  margin: 0;
  font-size: 12px;
  padding: 6px 0;
  font-weight: normal;
}

.fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.custom-modal .modal-content {
  border-radius: 0;
}

.link-text {
  color: var(--primary-color) !important;
  text-decoration: underline !important;
}

.level .level-item {
  border: 1px solid #e6e6e8;
}

.level .level-item .level-title {
  margin: 10px 15px 0 15px;
}

.level .level-item .level-entity {
  padding: 5px 15px;
  margin-top: 4px;
}

/*.blue-border {
  border: 2px solid #1ac6ff !important;
}

.blue-border .form-check-input:checked {
  background-color: #1ac6ff;
  border-color: #1ac6ff;
}

.blue-border .form-check-input:focus {
  box-shadow: 0 0 0 0.15rem #1ac6ff;
}

.green-border {
  border: 2px solid #33ff33 !important;
}

.green-border .form-check-input:checked {
  background-color: #33ff33;
  border-color: #33ff33;
}

.green-border .form-check-input:focus {
  box-shadow: 0 0 0 0.15rem #33ff33;
}

.yellow-border {
  border: 2px solid #ffd11a !important;
}

.yellow-border .form-check-input:checked {
  background-color: #ffd11a;
  border-color: #ffd11a;
}

.yellow-border .form-check-input:focus {
  box-shadow: 0 0 0 0.15rem #ffd11a;
}*/

.default {
  font-family: AvenirNextLTW01-Regular !important;
}

.card {
  box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14) !important;
}

.disable {
  background-color: #f5f5f8;
  pointer-events: none;
}

.org-hp .org-hp-title {
  background: var(--primary-color);
  color: white;
  padding: 3px 6px;
}

.org-hp .org-hp-content {
  padding: 4px 6px;
  border-bottom: 1px solid #e6e6e6;
}

.org-hp .org-hp-content,
.org-hp .org-hp-content label {
  cursor: grab;
  user-select: none;
}

.org-hp .not-assinged {
  background-color: darkgray;
}

.org-chart-template {
  padding: 6px 5px;
  font-family: AvenirNextLTW01-Regular !important;
}

.validation-list .validation-item {
  background-color: darkgrey;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  margin-right: 3px;
}

.validation-list {
  display: flex;
  justify-content: end;
  margin-bottom: 3px;
}

.k-treeview-leaf.k-selected {
  background-color: var(--primary-color);
}

.cancel-btn {
  color: white;
}

.btn-filter,
.btn-filter:hover {
  background-color: #00a2e8;
  color: white;
}

.btn-filter:hover {
  background-color: #008fcc;
  color: white;
}

.active-row {
    background-color: #cae7cc !important;
}

.auto-grow {
    field-sizing: content;
}

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

.full-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.d-flex{
    display:flex;
}

.note{
    width:fit-content;
    padding: 0px 2px;
    border-radius: 4px;
    font-weight: bold;
}

hr {
    color: #B8B8B8;
}

.lbl-normal, button {
    font-family: 'CircularStd', sans-serif !important;
}

.usr-none, .read-only {
    pointer-events:none;
}

.rounded-pill{
    background-color: var(--primary-color);
}

.badge{
    padding: .15em .45em;
}

.buttons-acts {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 1050;
}

.buttons-edit-acts {
    position: absolute;
    top: 75px;
    right: 14px;
    z-index: 1050;
}

.no-wrap {
    max-width: 100%;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Editable register cell - reads as plain text until hovered. */
.inline-edit {
    display: inline-block;
    min-width: 60px;
    cursor: pointer;
    border-bottom: 1px dashed transparent;
}

    .inline-edit:hover {
        border-bottom-color: var(--primary-color);
    }

    .inline-edit.editing {
        border-bottom-color: transparent;
        display: block;
    }

/* Marks an editable register cell without hovering. */
.inline-edit-icon {
    font-size: 11px;
    margin-left: 4px;
    color: var(--primary-color);
    opacity: .6;
}

.inline-edit:hover .inline-edit-icon,
.field-cell:hover .inline-edit-icon {
    opacity: 1;
}

.inline-edit.editing .inline-edit-icon {
    display: none;
}

/* form-control-sm caps the height, so size= alone does not show the full list. */
.col-picker-list {
    height: 360px;
}

/* Clamped two-line register cell text - Latest Review Note, Description, Consequence. */
.review-note,
.field-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    cursor: pointer;
}

    .review-note:hover,
    .field-text:hover {
        text-decoration: underline;
    }

/* Keeps the pencil outside the clamp so it stays visible however long the text is. */
.field-cell {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

    .field-cell .field-text {
        flex: 1;
        min-width: 0;
    }

    .field-cell:hover .field-text {
        text-decoration: underline;
    }

.review-note-add {
    color: var(--primary-color);
}

.review-note-meta {
    display: block;
    font-size: 11px;
    color: #8a8a8a;
}

/* #endregion */

/* #region Styled Tabs */
.styled-tab .nav-tabs {
    border-bottom: 1px solid var(--primary-color);
}

.styled-tab .nav-item {
    border-bottom: 1px solid !important;
}

.styled-tab .tab-content {
    padding: 10px;
    border-left: 1px solid var(--primary-color);
    border-right: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}

.styled-tab .nav-item .nav-link {
    background-color: #ececec;
    background-image: linear-gradient(white,#e3e3e3);
    color: #495057;
    border: 1px solid #e3e3e3 !important;
    display: flex;
    align-content: center;
    gap: 5px;
    border-bottom: 1px solid var(--primary-color) !important;
}

    .styled-tab .nav-item .nav-link:not(.nav-link.active):hover {
        border: 1px solid #d1d1d1;
        color: #404040;
        background-color: #d1d1d1;
        background-image: linear-gradient(#f7f7f7,#d1d1d1);
        border-bottom: 1px solid var(--primary-color) !important;
    }

.styled-tab .nav-item .active {
    position: relative;
    border-color: #e3e3e3;
    color: #3396D3 !important;
    background-color: #fff;
    background-image: linear-gradient(#ebebeb, #fff);
}

.styled-tab .nav-link.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #3396D3;
    border-radius: 3px 3px 0 0;
}

.styled-tab .nav-tabs.nav-tabs-top > li + li > a {
    margin-left: 0 !important;
}

.styled-tab .nav-tabs .active {
    font-weight: 400;
}

.styled-tab .nav-tabs span {
    margin-top: 3px;
}

.styled-tab .nav-img {
    width: 22px;
    height: 22px;
}

.nav-link{
    padding: .5rem .7rem !important;
}

.styled-tab .nav-item .nav-link{
    gap: 5px !important;
}

/* #endregion */
/* #region 6.TreeView */
#treeview .k-sprite {
    background-image: url("../content/web/treeview/coloricons-sprite.png");
}

.rootfolder {
  background-position: 0 0;
}

.folder {
  background-position: 0 -16px;
}

.pdf {
  background-position: 0 -32px;
}

.html {
  background-position: 0 -48px;
}

.image {
  background-position: 0 -64px;
}

/* #endregion */

/* #region 7.Modal */

.modal-header {
  background-color: var(--primary-color);
}

.modal-title {
  color: white !important;
  padding-left: 5px;
}

.custom-modal .close {
  background-color: white;
  color: var(--primary-color);
}
.custom-modal .modal-header {
  padding: 6px;
  justify-content: space-between;
}

.custom-modal .modal-content {
  border-radius: 5px;
}

/* #endregion */

/* #region 8.Accordian */

.accordion-button:not(.collapsed),
.accordion-button:not(.collapsed) .form-check-label {
  color: black !important;
}

.accordion-body {
  background-color: #e7f1ff;
}

.section-header {
  background-color: var(--primary-color);
}

.section-header label {
  color: white;
  font-weight: 500;
  padding: 1px 5px 3px 5px;
}

.section-body {
  margin: 8px 10px;
}

.accordion-error {
  border: 1px solid red;
}

.accordion-alt {
    background-color: color-mix(in srgb, var(--kendo-color-on-app-surface, #424242)5%,transparent);
}

.accordion-button {
    padding: 0.9rem 1.25rem !important;
}

/*.accordion-button:not(.collapsed){
    background-color: var(--primary-lightest);
}*/
/* #endregion */ 

/* #region 9.Chips */
div.chip-wrapper {
}

div.chips_input {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  --primary: #fff;
  --secondary: #111;
  --invalid: #f00;
  color: var(--secondary);
}

div.chips_input > label {
  opacity: 0.8;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  color: inherit;
}

div.chips_input > p {
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 0 0.25rem;
  color: inherit;
}

div.chips_input > div.inner {
  width: 100%;
  min-height: 2rem;
  background-color: var(--primary);
  border: 1px solid #3333;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.3rem;
  box-sizing: border-box;
  position: relative;
}

div.chips_input > div.inner > input {
  border: none;
  outline: none;
  font-size: 1rem;
  position: relative;
  background: transparent;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  color: var(--secondary);
}

span.chip {
  padding: 0.15rem 0.5rem;
  box-sizing: border-box;
  background: var(--primary-color);
  border-radius: 2px;
  color: white;
  font-size: 0.8rem;
  padding-right: 1.7rem;
  position: relative;
}

span.chip > button {
  border: none;
  background: transparent;
  color: transparent;
  position: absolute;
  top: 50%;
  right: 0.1rem;
  transform: translateY(-50%);
}

span.chip > button > i {
  font-family: fontawesome;
  cursor: pointer;
  color: white;
}

span.limit {
  float: right;
}

/* #endregion */

/* #region 10. Side Menu*/

.b-sidebar .sidepanel {
  width: 0;
  position: fixed;
  z-index: 999999;
  height: 100%;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 50px;
}

.b-sidebar .sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.b-sidebar .sidepanel a:hover {
  color: var(--primary-color);
}

.b-sidebar .sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 5px;
  font-size: 24px !important;
}

.b-sidebar .openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: white;
  color: var(--primary-color);
  padding: 10px 15px;
  border: none;
  margin-bottom: 8px;
}


.sidepanel .b-menu-list {
  flex-direction: column !important;
}

.sidepanel .menu-title{
    color: var(--primary-color);
}

.b-mob-menu .active {
    background-color: var(--primary-color);
}

  .b-mob-menu .active a{
        color: white !important;
    }

.sub-heading h4 {
    color: var(--primary-color);
    border-bottom: 1.5px solid var(--primary-color);
    padding-bottom: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.sub-heading p {
    color: var(--primary-color);
    border-bottom: 1.5px solid var(--primary-color);
    padding-bottom: 6px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* #endregion*/

/* #region 11. Risk Assessment */

#grd-risk .k-grid-header:not(.k-detail-row .k-grid-header) {
    background-color: transparent !important;
}

    #grd-risk .k-grid-header .k-grid-header-wrap thead tr th:first-child:not(.k-detail-row th),
    #grd-risk .k-grid-header .k-grid-header-wrap thead tr th:nth-child(2):not(.k-detail-row th),
    #grd-risk .k-grid-header .k-grid-header-wrap thead tr th:nth-child(3):not(.k-detail-row th),
    #grd-risk .k-grid-header .k-grid-header-wrap thead tr th:nth-child(4):not(.k-detail-row th),
    #grd-risk .k-grid-header .k-grid-header-wrap thead tr th:nth-child(5):not(.k-detail-row th) {
        background-color: #38c778 !important;
    }

    #grd-risk .k-grid-header .k-grid-header-wrap thead tr th:nth-child(6):not(.k-detail-row th),
    #grd-risk .k-grid-header .k-grid-header-wrap thead tr th:nth-child(7):not(.k-detail-row th),
    #grd-risk .k-grid-header .k-grid-header-wrap thead tr th:nth-child(8):not(.k-detail-row th) {
        background-color: #ffbb33 !important;
    }

.doc-badge {
    position: absolute;
    top: -10px;
    right: 11px;
    background-color: #ea7300;
    color: white;
    border-radius: 100%;
    padding: 0px 5px;
    font-size: 11px;
}

div:has(.doc-badge) {
    position: relative;
}

#grd-risk > .k-grid-content.k-auto-scrollable {
    height: 420px;
}


/* #endregion*/

/* #region 12. MOC */

.auto-save p {
    width:fit-content;
    padding: 0 4px;
    margin: 0;
    color: red;
}
/* #endregion */
/* #region 13. Risk Matrix */

/* Official Cenovus Risk Matrix exposure colours (2025-08). */
/* Qualified with .table td so they outweigh Bootstrap's
   .table > :not(caption) > * > * { background-color: var(--bs-table-bg) } cell reset. */
.table td.risk-exposure-low {
  background-color: #83B93B;
}

.table td.risk-exposure-medium {
  background-color: #F7BC28;
}

.table td.risk-exposure-high {
  background-color: #EB6733;
}

.table td.risk-exposure-extreme {
  background-color: #BC3231;
}

/* The PDF prints every cell code in white on all four bands. */
.table td.risk-exposure-low,
.table td.risk-exposure-medium,
.table td.risk-exposure-high,
.table td.risk-exposure-extreme {
  color: #ffffff;
  font-weight: 600;
}

.ra-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ra-legend .ra-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ra-legend .ra-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.ra-legend .risk-exposure-low { background-color: #83B93B; }
.ra-legend .risk-exposure-medium { background-color: #F7BC28; }
.ra-legend .risk-exposure-high { background-color: #EB6733; }
.ra-legend .risk-exposure-extreme { background-color: #BC3231; }

/* Wider than modal-xl so three six-column matrices fit with their descriptors. */
#modal-threat-risk .modal-dialog {
    max-width: 1400px;
    width: 94vw;
}

/* Bordered panel per matrix, otherwise the three tables read as one grid. .error overrides
   the colour with !important. */
.ra-matrix-wrap {
    border: 1px solid var(--gray-color);
    border-radius: 3px;
    padding: 4px;
    background-color: #fff;
}

/* Auto layout - each likelihood column must be at least as wide as its descriptor. */
.ra-matrix {
    width: 100%;
}

.ra-matrix td.ra-cell {
    padding: 4px 2px;
}

/* Floating reference document - overlays the modal instead of taking layout space. Positioned
   against .modal-content, which Bootstrap already makes relative and overflow:hidden. Not a
   modal: no backdrop. */
.ra-reference {
    display: none;
    position: absolute;
    /* Anchored below the modal header so its title and close button stay reachable. */
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    width: 88%;
    height: 72vh;
    max-height: calc(100% - 56px);
    z-index: 20;
    background-color: #fff;
    border: 1px solid var(--dotted-line-color);
    border-radius: 3px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    flex-direction: column;
    overflow: hidden;
}

.ra-reference.ra-reference-open {
    display: flex;
}

.ra-reference-bar {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background-color: rgba(49, 97, 209, 0.08);
    border-bottom: 1px solid var(--dotted-line-color);
}

.ra-reference-close {
    margin-left: 8px;
}

.ra-reference-frame {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    min-height: 0;
    border: 0;
}

.ra-matrix td.ra-cell {
    cursor: pointer;
}

/* Hover affordance only - deliberately weaker than the selected treatment below, and it
   never repaints the cell background so the risk band still reads through. Selected cells
   are excluded so hover cannot water down the selection. */
.ra-matrix td.ra-cell:not(.ra-cell-selected):hover {
    box-shadow: inset 0 0 0 2px var(--primary-lighter);
}

.ra-matrix td.ra-cell-selected {
    border: 2px solid var(--primary-color) !important;
    box-shadow: inset 0 0 0 2px rgba(49, 97, 209, 0.25);
    font-weight: 700;
}

/* Shared by the Configuration preview and the assessment matrices so both screens keep the
   same header treatment. Tight padding/line-height keeps the two-line header compact. */
.table th.ra-axis-header {
    background-color: rgba(49, 97, 209, 0.16);
    border: 1px solid rgba(49, 97, 209, 0.35);
    color: var(--text-color);
    padding: 3px 2px;
    line-height: 1.15;
    vertical-align: middle;
}

/* Code over descriptor. nowrap keeps each descriptor whole; the auto-layout table widens to fit. */
.ra-axis-code,
.ra-axis-label {
    display: block;
    white-space: nowrap;
}

.ra-axis-code {
    font-weight: 700;
}

.ra-axis-label {
    font-weight: 400;
}

/* !important is required to beat the global "* { font-size: 13px !important }" reset at the
   top of this file. Cell codes keep their normal size. */
.ra-matrix th.ra-axis-header,
.ra-matrix th.ra-axis-header .ra-axis-code,
.ra-matrix th.ra-axis-header .ra-axis-label {
    font-size: 10px !important;
}

/* Reserve the row-header column so the descriptors do not squeeze the six data columns. */
.ra-matrix th:first-child,
#risk-matrix-preview th:first-child {
    width: 76px;
}

#risk-summary .ra-rank {
    font-weight: 700;
}

/* Threat Risk Assessment summary - one card per assessment stage. Theme colours come from the
   variables (the Cenovus theme remaps them); only the ranking cells carry exposure colours, and
   the Risk Score is deliberately neutral. */
#risk-summary .ra-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 2px solid var(--primary-color);
}

#risk-summary .ra-card-empty .ra-card-head {
    align-items: center;
    border-bottom: 0;
}

/* Sizes need !important to beat the global "* { font-size: 13px !important }" reset at the top of
   this file - the same approach as the matrix axis headers above. */
#risk-summary .ra-card-title {
    margin: 0;
    font-size: 15px !important;
    font-weight: 700;
    color: var(--primary-color);
}

#risk-summary .ra-card-meta,
#risk-summary .ra-score-label {
    font-size: 12px !important;
    color: #6c757d;
}

#risk-summary .ra-card-score {
    text-align: right;
    white-space: nowrap;
}

/* Threat-level Risk Approval state in the header of each complete card - display only. Approved
   uses the success colour the Logs already give approvals; Reapproval Required uses the amber of
   the reapproval note; Pending stays neutral. */
#risk-summary .ra-card-approval,
#risk-summary .ra-card-incomplete {
    line-height: 1.35;
}

/* A saved assessment that lacks a required field (Basis, Participants or a ranking): amber, the
   same "action needed" tone as Reapproval Required - not red, which is reserved for errors. */
#risk-summary .ra-incomplete-state {
    font-weight: 700;
    color: #8a6100;
}

#risk-summary .ra-incomplete-meta {
    font-size: 12px !important;
    color: #6c757d;
}

#risk-summary .ra-approval-state {
    font-weight: 700;
    color: var(--text-color);
}

#risk-summary .ra-approval-approved .ra-approval-state {
    color: #2e7d32;
}

#risk-summary .ra-approval-reapproval .ra-approval-state {
    color: #8a6100;
}

#risk-summary .ra-approval-meta {
    font-size: 12px !important;
    color: #6c757d;
}

/* Free text, so it wraps inside the header instead of widening it. */
#risk-summary .ra-approval-escalation {
    max-width: 340px;
    overflow-wrap: anywhere;
}

#risk-summary .ra-overall-score {
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-color);
}

#risk-summary .ra-card-body {
    padding: 10px 14px 4px;
}

#risk-summary .ra-rank-table {
    margin-bottom: 6px;
}

#risk-summary .ra-detail td {
    padding-top: 4px;
}

#risk-summary .ra-card-foot {
    padding: 4px 14px 12px;
    text-align: right;
}

/* The Dashboard heat maps reuse the official matrix to count Threats rather than to pick a
   cell, so nothing is selectable and cells holding no Threat are dimmed back. */
.dashboard .ra-matrix td.ra-cell {
    cursor: default;
}

.dashboard .ra-matrix td.ra-cell:not(.ra-cell-selected):hover {
    box-shadow: none;
}

.dashboard .ra-matrix td.ra-cell-empty {
    opacity: 0.25;
}
/* #endregion */

/* #region 14. Threat Logs */

/* One chronological event per block, used by the ATM Threat Logs tab
   (Thread view component, blockLayout = true).

   Every value here is an existing convention. The rail (4px solid #7cb342) and its 12px gutter
   are MOC's own Thread values, carried over unchanged. The dotted bottom rule is MOC's per-entry
   separator too - MOC writes it into the stored blob as 1px dotted #cccccc, so it is expressed
   here with the equivalent CFlow token (--dotted-line-color, the same rule .tbl-lined uses)
   rather than a second hard-coded grey.

   The layout follows a MOC log section: a blue heading over a thin blue rule, with the green rail
   starting underneath it and spanning only the event's content. Applied per event rather than per
   workflow group. The bold Updated by: / Updated: labels are MOC's label-then-value convention.
   ATM keeps its own content order - title first, then who, then when, then details - and
   deliberately omits MOC's Act: line, which the title already covers.

   The bottom margin is the one genuine addition: MOC's rails read as one continuous line purely
   because consecutive entries butt together with no gap, so separating the blocks gives each
   event its own short rail with no new visual language.

   Every event uses this same structure, including ones with no detail lines: a uniform shape is
   easier to scan than a mix of one-line and multi-line entries once the history is long.

   Presentation only: the Thread rows, their order and their content are untouched, and there is
   no grouping by role, workflow state or approval stage. MOC keeps the original rendering. */
.thread-event {
    border-bottom: 1px dotted var(--dotted-line-color);
    padding-bottom: 6px;
    margin-bottom: 8px;
    color: var(--text-color);
    font-family: 'CircularStd', sans-serif;
}

/* The last entry needs no closing rule or trailing gap. */
.thread-event:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

/* The title sits above and outside the rail and reuses the existing .sub-heading h4 treatment
   verbatim - blue, 1.5px solid --primary-color rule, weight 600, 0.5px letter-spacing - which is
   what MOC's log headings use. Nothing is restyled here: h4 is exempt from the global
   "* { font-size: 13px !important }" reset near the top of this file, so it picks up its real
   1.125rem size and the h1-h6 font-family on its own.

   The only adjustment is the entry's own <b>: MOC's headings carry no inline bold, so it is
   folded into the heading weight instead of compounding to 700. Scoped to .thread-event so
   .sub-heading everywhere else is untouched. */
.thread-event .te-title h4 b {
    font-weight: inherit;
}

/* The heading rule follows the heading's own colour, so an approval's success-coloured title
   keeps a matching rule and the ordinary blue title is unaffected - no colour is repeated here.
   Status colour itself comes from the app's existing .text-success / .text-warning classes. */
.thread-event .te-title h4 {
    border-bottom-color: currentColor;
}

/* Small leading icon on the event title and on the reapproval-required line. Font Awesome
   inherits its size from the text it sits in, so no sizing is needed. */
.thread-event .te-title h4 .fa,
.thread-event .te-detail .fa {
    margin-right: 5px;
}

/* The green rail starts below the title and spans only the event's content, as MOC's does. */
.thread-event .te-body {
    border-left: 4px solid #7cb342;
    padding: 1px 0 1px 12px;
}

/* Who and when, answered the same way on every entry. */
.thread-event .te-meta > div {
    line-height: 1.45;
}

.thread-event .te-label {
    font-weight: 600;
}

/* Details indented under the metadata they belong to. Size stays at the app's body size: the
   global font-size reset above would have to be overridden to change it. */
.thread-event .te-detail {
    margin-top: 4px;
    padding-left: 14px;
}

.thread-event .te-detail > div {
    line-height: 1.45;
}
/* #endregion */