/* ↓ SVG icons */
:root {
  --icon-menu_2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' %3E%3Cpath fill='%23666679' d='M24 33A3 3 0 1024 39 3 3 0 1024 33zM24 21A3 3 0 1024 27 3 3 0 1024 21zM24 9A3 3 0 1024 15 3 3 0 1024 9z'/%3E%3C/svg%3E");
  --icon-info-color-primary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' %3E%3Cpath fill='%231078cf' d='M 24 4 C 12.972066 4 4 12.972074 4 24 C 4 35.027926 12.972066 44 24 44 C 35.027934 44 44 35.027926 44 24 C 44 12.972074 35.027934 4 24 4 z M 24 7 C 33.406615 7 41 14.593391 41 24 C 41 33.406609 33.406615 41 24 41 C 14.593385 41 7 33.406609 7 24 C 7 14.593391 14.593385 7 24 7 z M 24 14 A 2 2 0 0 0 24 18 A 2 2 0 0 0 24 14 z M 23.976562 20.978516 A 1.50015 1.50015 0 0 0 22.5 22.5 L 22.5 33.5 A 1.50015 1.50015 0 1 0 25.5 33.5 L 25.5 22.5 A 1.50015 1.50015 0 0 0 23.976562 20.978516 z'/%3E%3C/svg%3E");
}

html,
body {
  overflow: hidden;
  height: 100%;
  background-color: var(--container-bg-01, #f7f7f8);
  font-size: 14px !important;
  font-weight: var(--font-weight-medium, 500);
  color: var(--body-color, #161616);
  font-family: 'Montserrat',sans-serif;
}

a {
  color: var(--text-primary, #1078cf);
}

a:hover {
  color: var(--primary-hover, #1260a1);
}

label {
  font-size: var(--font-size-sm, 0.75rem);
  font-weight: var(--font-weight-semi-bold, 600);
}

.hidden {
  display: none;
}

#CWContent {
  background-color: var( --container-bg-02, #fff);
}

#CWContent > .card {
  border: none;
  border-radius: none;
}

#CWHeader {
  margin-bottom: 0 !important;
}

/* Add the new window icon after a link*/

.newwindow::after {
  content: "";
  display: inline-block;
  opacity: 0.7;
  top:  var(--spacing-03, 0.5rem);
  width: 20px;
  height: 20px;
  position: relative;
  margin-inline-start: var(--spacing-03, 0.5rem);
  background-image: url(../_imgs/bg-new-window.png);
  background-repeat: no-repeat;
  background-size: var(--spacing-05, 1rem);
}

a.navgroup-link {
  text-transform: none;
}

.bg-light {
  background-color: var(--container-bg-01, #f7f7f8);
}

h1 {
  font-size: calc(1.75rem * var(--size-adjustment));
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.009em;
  line-height: 1.357em;
}

@media (max-width: 1280px) {
  h1 {
    font-size: calc(1.075rem + 0.84375vw);
  }
}

#CWHeaderText {
  background-image: none !important;
}

h2 {
  font-size: calc(1.5rem * var(--size-adjustment));
  font-weight: var(--font-weight-semi-bold, 600);
  letter-spacing: 0.008em;
  line-height: 1.417em;
}

@media (max-width: 1280px) {
  h2 {
    font-size: calc(1.05rem + 0.5625vw);
  }
}

h3 {
  font-size: calc(1.25rem * var(--size-adjustment));
  font-weight: var(--font-weight-semi-bold, 600);
  letter-spacing: 0.007em;
  line-height: 1.5em;
}

@media (max-width: 1280px) {
  h3 {
    font-size: calc(1.025rem + 0.28125vw);
  }
}

h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semi-bold, 600);
  letter-spacing: 0.008em;
  line-height: 1.556em;
}

@media (max-width: 1280px) {
  h4 {
    font-size: calc(1.0125rem + 0.14063vw);
  }
}

h5 {
  font-size: var(--font-size-lg);
  letter-spacing: 0.009em;
  line-height: 1.625em;
}

h5,
h6 {
  font-weight: var(--font-weight-semi-bold, 600);
}

h6 {
  font-size: var(--font-size-base);
  letter-spacing: 0.011em;
  line-height: 1.714em;
}

strong {
  font-weight: var(--font-weight-semi-bold, 600);
}

.material-icons {
  color: var(--icon-01) !important;
}

/* Bootstrap overrides*/

.close {
  font-size: 2rem;
  font-weight: var(--font-weight-medium, 500);
}

.bgwhite {
  background-color: var(--container-bg-02, #fff);
}

.bg-1 {
  background-color: var(--container-bg-02, #fff);
}

.bg-2 {
  background-color: var(--container-bg-02, #fff);
}

.w-10 {
  width: 10% !important;
}

.w-20 {
  width: 20% !important;
}

.w-80 {
  width: 80% !important;
}

.w-90 {
  width: 90% !important;
}

.vw-100 {
  width: 100vw !important;
}

/* Default colour overrides*/

.text-dark {
  color: var(--text-default, #161616) !important;
}

a.text-dark:hover,
a.text-dark:active,
a.text-dark:focus {
  color: var(--text-muted, #666679) !important;
}

.bg-primary {
  background-color: var(--container-bg-02, #fff) !important;
}

.text-primary {
  color: var(--text-primary, #1078cf) !important;
}

.bg-secondary {
  background-color: var(--secondary, #666679) !important;
}

.text-secondary {
  color: var(--text-muted, #666679) !important;
}

.disabled {
  cursor: not-allowed;
}

.card {
  border: none;
  border-radius: 0;
  background-color: var(--container-bg-02, #fff);
}

.card-header {
  padding: var(--spacing-06, 1.5rem);
  border-bottom: none;
  background-color: transparent;
  font-size: var(--font-size-xl, 1.125rem);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--text-default, #161616);
}

.card h2 button {
  font-size: var(--font-size-base, 0.875rem);
  font-weight: var(--font-weight-semi-bold, 600);
  text-transform: uppercase;
  color: var(--text-default, #161616);
}

.card-body {
  padding: var(--spacing-06, 1.5rem);
  padding-top: 0;
}

.card-footer {
  padding: var(--spacing-06, 1.5rem);
  padding-top: 0;
}

.lookupform .card {
  margin-bottom: var(--spacing-05, 1rem);
}

.table-hover tbody tr:hover {
  background-color: var(--gray-light, #eeeef1);
  transition: all 150ms;
}

/* Material Design box shadows */

.card-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.card-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.card-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.card-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

/*headers*/

.header {
  margin: 0 var(--spacing-05, 1rem) !important;
  padding-left: 0 !important;
}

.header h1 {
  display: block;
  overflow: hidden;
  min-height: 65px;
  padding: 17px 0 17px 55px;
  background-position-y: 15px;
  background-repeat: no-repeat;
  background-size: 40px;
  text-overflow: ellipsis;
  white-space: nowrap;
  /*needs to be fixed height so there is no page jump when second line of h1 is added*/
  margin-bottom: 0;
  font-weight: var(--font-weight-normal, 400);
}

.header h1 small {
  display: block;
  overflow: hidden;
  font-size: 50%;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header h2 {
  display: block;
  overflow: hidden;
  margin-bottom: 0;
  padding: 20px 0 20px 43px;
  text-overflow: ellipsis;
  background-repeat: no-repeat;
  background-position-y: var(--spacing-05, 1rem);
  background-size: 35px;
  text-transform: uppercase;
  white-space: nowrap;
}

.header h3 {
  display: block;
  overflow: hidden;
  margin-bottom: 0;
  padding: 10px 0 10px 38px;
  background-repeat: no-repeat;
  background-size: var(--spacing-07, 2rem);
  background-position-y: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header h3:empty {
  display: none;
}

/* dialog */

#CWHeader {
  border-bottom: none !important;
  background-color: var(--container-bg-02, #fff) !important;
}

#CWFooter {
  border-top: none !important;
  background-color: var(--container-bg-02, #fff) !important;
}

/* Address Action */

#CWAddressActionDialog {
  height: auto !important;
}

#CWAddressActionDialog .modaltemplate  {
  display: block;
}

#CWAddressActionDialog #CWContent {
  padding-inline-start: 0;
}

#CWAddressActionDialog #CWCancel {
  margin-inline-end: 0 !important;
}

.modal-main,
body.dialog,
body.lookupform {
  background-color: var(--container-bg-02, #fff);
}

body.dialog,
body.dialog > form {
  height: 100%;
}

body.dialog > form > .container-fluid {
  padding: 0 !important;
}

body.dialog .modal-content.container-fluid {
  padding-inline: var(--spacing-06, 1.5rem) !important;
}

body.dialog #CWHeader,
body.lookupform #CWHeader,
.dialog-header h1#CWHeaderText,
.dialog-header h1#CWHeaderTitle,
.dialog-h1,
#CWActionHeader {
  border-top: var(--spacing-03, 0.5rem) solid var(--primary-border, #348cd6);
  padding: var(--spacing-06, 1.5rem) !important;
}

.dialog-header h1#CWHeaderText.h1-cloneattachment,
#CWPauseSection > #CWHeader > .dialog-header > #CWHeaderTitle,
form[action*='dialogname=SelectAddress'] #CWHeaderTitle {
  border: none;
  padding: 0 !important;
}

body.lookupform #CWHeader + .container-fluid {
  padding: 0;
}

body.dialog #CWContent {
  padding-inline: var(--spacing-06, 1.5rem) !important;
}

body.dialog #CWFooter,
body.lookupform #CWFooter,
body.dialog #CWButtonPanel,
body.dialog .modal-content + .button-panel,
header.dialog-header + main + footer,
#CWHeader + modal-content + button-panel {
  padding: var(--spacing-06, 1.5rem) !important;
}

.modaltemplate {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--spacing-06, 1.5rem);
  height: 100%;
  overflow: auto;
}

.modaltemplate header {
  border-bottom: none !important;
}

.modaltemplate header > div {
  all: unset !important;
}

.modaltemplate main {
  overflow: auto;
  height: unset !important;
  padding-inline: var(--spacing-06, 1.5rem) !important;
}

.modaltemplate .grid-holder {
  height: unset !important;
}

.modaltemplate footer {
  position: unset;
  border-top: none !important;
  padding-block: unset !important;
  padding-inline: var(--spacing-06, 1.5rem) !important;
}

.alert-dialog h1,
.dialog-header h1 {
  margin: 0;
  background: none !important;
  font-size: calc(1.5rem * var(--size-adjustment));
  font-weight: var(--font-weight-semi-bold, 600);
  letter-spacing: 0.008em;
  line-height: 1.417em;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-03, 0.5rem);
}

@media (max-width: 1280px) {
  .alert-dialog h1,
  .dialog-header h1 {
    font-size: calc(1.05rem + 0.5625vw);
  }
}

.dialog-header h1 small {
  font-size: 1em;
}

body.dialog div.border-bottom  {
  border-bottom: none !important;
}

body.dialog div.border-top  {
  border-top: none !important;
}

/*Alert modals*/

.alert-dialog h1 {
  padding: var(--spacing-06, 1.5rem);
}

.alert-danger-dialog header {
  border-top: var(--spacing-03, 0.5rem) solid var(--mds-color-danger-border, #dc3545);
}

.alert-warning-dialog header {
  border-top: var(--spacing-03, 0.5rem) solid var(--mds-color-warning-border, #f2a900);
}

.alert-info-dialog header {
  border-top: var(--spacing-03, 0.5rem) solid var(--mds-color-primary-border, #1078cf);
}

.alert-success-dialog header {
  border-top: var(--spacing-03, 0.5rem) solid var(--mds-color-success-border, #458045);
}

.alert-dialog + .modal-content + .border-top {
  border-top: none !important;
}

.dialookup div.px-20:last-child {
  border-block-end: var(--border-width-01, 1px) solid var(--border-color);
}

.form-group.row.px-20 {
  margin-bottom: 0;
  padding-bottom: var(--spacing-05, 1rem);
  background-color: var(--container-bg-02, #fff);
}

.searchview-bar {
  overflow: hidden;
  padding: 0 !important;
  margin: 0 0 var(--spacing-05, 1rem);
  padding-top: var(--spacing-05, 1rem) !important;
}

.vdivider {
  all: unset;
  width: var(--spacing-03, 0.5rem);
}

/*Alerts*/

.error-container {
  overflow: hidden;
  width: 0;
  height: 0;
}

.mandatory {
  margin: 0 var(--spacing-01, 0.125rem);
  font-weight: bold;
  color: var(--danger, #dc3545) !important;
}

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

/*dropdown*/

.dropdown-item {
  overflow: hidden;
  background-position: 6px !important;
  background-repeat: no-repeat;
  background-size: var(--icon-size, 1.5rem);
  margin-bottom: var(--spacing-01, 0.125rem);
  padding: 6px 10px 6px 40px;
  transition: all 150ms;
  text-overflow: ellipsis;
}

    .dropdown-item:hover {        
        background-color: var(--mds-color-secondary-soft-hover);
        text-decoration: none !important;
        color: var(--mds-text-color-muted) !important;
    }

.dropdown-header {
  padding-left: var(--spacing-03, 0.5rem) !important;
  font-size: var(--font-size-base, 0.875rem);
  text-transform: uppercase;
}

/*general styles*/

.scroll-x {
  overflow-x: auto;
}

.no-scroll-x {
  overflow-x: hidden !important;
}

.no-scroll-y {
  overflow-y: hidden !important;
}

.scroll-y {
  overflow-y: auto !important;
}

.overlay {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--backdrop, hsla(0,0%,9%,.3));
  cursor: wait;
}

h1.modal-save {
  background-repeat: no-repeat;
}

.overlay-clear {
  background-color: transparent !important;
}

.loader {
  position: fixed;
  top: 45%;
  left: 45%;
  opacity: 0.8;
  border: 10px solid var(--container-bg-02, #fff);
  border-top: 10px solid var(--primary, #1078cf);
  border-radius: var(--border-radius-circle, 50%);
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
  background-color: transparent;
}

.dialog .list-group-item {
  border: none;
}

.progress {
  height: 34px;
  font-size: var(--font-size-base, 0.875rem);
}

.overlay-local {
  z-index: 50;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background-color: var(--overlay-shadow, rgba(0,0,0,.15));
  cursor: pointer;
}

.loader-local {
  position: absolute;
  top: 45%;
  left: 45%;
  opacity: 0.8;
  border: 10px solid var(--container-bg-02, #fff);
  border-radius: 50%;
  border-top: 10px solid var(--primary, #1078cf);
  width: 10px;
  height: 10px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
  background-color: transparent;
}

/*Jquery controls, datepicker, timepicker*/

.ui-widget .ui-widget-header {
  margin: -5px;
  padding: 5px;
  background-color: var(--primary, #1078cf) !important;
}

.ui-widget-content {
  z-index: 32 !important;
  border: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  vertical-align: top;
  background-color: var(--container-bg-02, #fff);
}

.ui-datepicker th {
  text-transform: uppercase !important;
}

a.ui-state-default {
  border: none !important;
  border-radius: var(--border-radius-02, 6px) !important;
  font-size: var(--font-size-base, 0.875rem) !important;
  color: var(--primary, #1078cf) !important;
}

a.ui-state-default.a.ui-state-hover {
  border: none;
}

.ui-timepicker-table th.periods {
  padding: 10px !important;
  font-weight: var(--font-weight-semi-bold, 600);
  vertical-align: middle !important;
}

.ui-timepicker-table .ui-widget-header {
  border: none !important;
  border-radius: var(--border-radius-02, 6px) !important;
}

.ui-timepicker-title.ui-widget-header {
  margin: 1px !important;
}

.ui-state-default.ui-state-active {
  border-color: var(--primary-selected) !important;
  background-color: var(--form-bg, #fff) !important;
  font-weight: var(--font-weight-semi-bold, 600) !important;
  color: var(--text-default, #161616) !important;
}

button[title="Clear Address"]:hover {
  border-left: var(--border-width-01, 1px) solid var(--secondary, #666679) !important;
}

.ui-datepicker-trigger + input.input-time {
  border-left: none !important;
}

.date-time-field{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    gap:var(--spacing-03);
    flex-wrap:wrap;
}

    .date-time-field .input-group {
        flex: 1 !important;
        flex-wrap: nowrap;
    }

    .date-time-field .form-control{
        height:fit-content!important;
    }

input.input-time {
    min-width: 5rem !important;    
}

input.input-date {
    min-width: 100px !important;    
}

    .input-group.formerror {
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%
    }

    /*Modal styles*/
    .modal-header,
    .dialog-header,
    .modal-footer,
    .modal-footer-form {
        border-radius: 6px;
    }

.dialog-header-fixed {
  margin-top: 0;
  min-height: 55px !important;
}

.dialog-content-fixed {
  overflow-y: auto;
  margin-top: 0;
  height: 300px;
  background: var(--container-bg-02, #fff);
}

.dialog-footer-fixed {
  margin-top: 0;
  height: 60px !important;
  padding-top: 10px;
}

.modal-header {
  border-bottom: var(--border-width-02, 2px) solid transparent;
}

.modal-title {
  font-size: var(--font-size-xl, 1.125rem);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
}

.modal-footer .btn {
  min-width: 100px;
}

.modal-header h5 {
  display: block;
  overflow: hidden;
  margin-bottom: 0;
  padding: 10px 0 10px 52px;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 36px;
  font-size: var(--font-size-xl, 1.125rem) !important;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-default, #161616);
}

.modal-footer-form .input-group select {
  max-width: 400px;
}

/* Safari */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.px-15 {
  padding-left: var(--spacing-05, 1rem) !important;
  padding-right: var(--spacing-05, 1rem) !important;
}

.px-20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.wx-90 {
  min-width: 90px !important;
}

.wx-100 {
  min-width: 100px !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--overlay-bg, #fff);
  background-position: 6px !important;
  background-repeat: no-repeat;
  color: var(--text-default, #161616);
}

/* ↓ Mosaic Design System | alert | v1.1.6 */
/* ↓ Heavily modified */
:is(.alert, .info, .warning, :where(.error, .success):not(tr)),
.warning p,
/* ↓ Forms */
.instruction-div {
  --mds-alert-spacing: var(--mds-spacing-03, 0.5rem);
  --mds-alert-border-color: transparent;
  --mds-alert-border-color-accent: transparent;
  --mds-alert-padding-block: calc(var(--mds-spacing-04, 0.75rem) - 2px);
  --mds-alert-padding-inline: calc(var(--mds-spacing-05, 1rem) - 2px) var(--mds-spacing-05, 1rem);
  --mds-alert-background-color: transparent;
  --mds-alert-icon-color: var(--text-default, #161616);
  position: relative;
  margin-block-end: var(--mds-spacing-05, 1rem);
  border: var(--border-width-02, 2px) solid var(--mds-alert-border-color);
  border-radius: var(--border-radius-02, 6px);
  padding-block: var(--mds-alert-padding-block);
  padding-inline: var(--mds-alert-padding-inline);
  background-color: var(--mds-alert-background-color);
  color: var(--text-default, #161616);
  display:block;
}

:is(.alert, .info, .warning, :where(.error, .success):not(tr))::before,
.warning p::before,
/* ↓ Forms */
.instruction-div::before {
  content: "";
  position: absolute;
  inset: calc(var(--mds-spacing-01, 0.125rem) * -1);
  border-inline-start: var(--mds-spacing-03, 0.5rem) solid var(--mds-alert-border-color-accent);
  border-radius: var(--border-radius-02, 6px);
  pointer-events: none;
}

:is(.alert, .info, .warning, :where(.error, .success):not(tr)) a,
.warning p a,
/* ↓ Forms */
.instruction-div a {
  font-weight: var(--font-weight-semi-bold, 600);
  color: inherit;
  text-decoration: underline;
}

:is(.alert-success, .success:not(tr)) {
  --mds-alert-border-color: var(--mds-color-success-border, #458045);
  --mds-alert-border-color-accent: var(--mds-color-success-border, #458045);
  --mds-alert-background-color: var(--mds-color-success-soft, #ecf2ec);
  --mds-alert-icon-color: var(--mds-color-success, #458045);
}

:is(.alert-info, .info) {
  --mds-alert-border-color: var(--mds-color-info-border, #157a80);
  --mds-alert-border-color-accent: var(--mds-color-info-border, #157a80);
  --mds-alert-background-color: var(--mds-color-info-soft, #e8f2f2);
  --mds-alert-icon-color: var(--mds-color-info, #157a80);
}

:is(.alert-warning, .warning) {
  --mds-alert-border-color: var(--mds-color-warning-border, #f2a900);
  --mds-alert-border-color-accent: var(--mds-color-warning-border, #f2a900);
  --mds-alert-background-color: var(--mds-color-warning-soft, #fef6e6);
  --mds-alert-icon-color: var(--mds-color-warning, #f2a900);
}

:is(.alert-danger, .error:not(tr)),
.warning p {
  --mds-alert-border-color: var(--mds-color-danger-border, #dc3545);
  --mds-alert-border-color-accent: var(--mds-color-danger-border, #dc3545);
  --mds-alert-background-color: var(--mds-color-danger-soft, #fcebec);
  --mds-alert-icon-color: var(--mds-color-danger, #dc3545);
}

/* ↓ Forms */
.instruction-div {
  --mds-alert-border-color: var(--mds-color-primary-border, #1078cf);
  --mds-alert-border-color-accent: var(--mds-color-primary-border, #1078cf);
  --mds-alert-background-color: var(--mds-color-primary-soft, #e7f2fa);
  --mds-alert-icon-color: var(--mds-color-primary, #348cd6);
}


.modal-content > .alert,
.dialog-content > .alert {
  float: left;
  margin-top: var(--spacing-05, 1rem);
  width: 100%;
}

.alertsmall {
  display: block;
  clear: left;  
  padding: 10px;
  font-size: 1.4em;
  color: var(--danger-on) !important;
  padding-left: 40px;
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
  min-height: 20px;
  position: relative;
  margin-right: 20px;
}

/*draggable items*/

.drag-handle {
  width: var(--icon-size, 1.5rem);
  height: var(--icon-size, 1.5rem);
  padding-left: 35px !important;
  background-image: url(../_imgs/bg-drag.png);
  background-position: left center;
  background-repeat: no-repeat;
}

/*Medium devices (tablets, 768px and up)*/

@media (max-width: 700px) {
  li.linkbutton {
    width: 100% !important;
  }
}

/*spinners*/

@keyframes lds-dual-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes lds-dual-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.lds-dual-ring {
  position: relative;
}

.lds-dual-ring div {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 120px;
  height: 120px;
  border: 18px solid var(--ui-01);
  border-color: var(--ui-01) transparent var(--ui-01) transparent;
  border-radius: var(--border-radius-circle, 50%);
  -webkit-animation: lds-dual-ring 1s linear infinite;
  animation: lds-dual-ring 1s linear infinite;
}

.lds-dual-ring {
  width: 30px !important;
  height: 30px !important;
  -webkit-transform: translate(-15px, -15px) scale(0.15) translate(15px, 15px);
  transform: translate(-15px, -15px) scale(0.15) translate(15px, 15px);
}

.lds-css {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.9;
}

.overflow {
  font-size: var(--font-size-xl, 1.125rem);
  font-weight: var(--font-weight-semi-bold, 600);
}

/*popup arrow*/

.micropopup {
  border: var(--border-width-01, 1px) solid var(--border-color);
}

.micropopupheader {
  width: 100%;
  height: 40px;
  background-color: var(--primary, #1078cf);
  color: var(--primary-on);
  padding-top: 5px;
}

.micropopupheader .close {
  color: var(--primary-on);
  text-shadow: none;
}

.editpopup {
  position: relative;
}

.arrow {
  position: absolute;
  top: calc(var(--spacing-07, 2rem) * -1);
  height: var(--spacing-07, 2rem);
  background-color: transparent;
  background-image: url(../_imgs/bg-dialog-arrow-top.png);
  background-position: right;
  background-repeat: no-repeat;
}

/*Empty state view*/
.no-records {
    text-align: center;
    padding-top: 15px;
    font-weight: 600;
}

.norecords {
  position: relative;
  top: calc(38% - 100px);
  left: calc(50% - 100px);
  margin-bottom: 0 !important;
  border: none !important;
  width: 250px;  
  padding-top: 50px;
  background-color: transparent !important;  
  text-align: center;
}

.norecords-sm {
  position: relative;
  top: calc(45% - 100px);
  left: calc(50% - 100px);
  width: 200px;  
  margin-bottom: 0 !important;
  border: none !important;
  background-color: transparent !important;  
  padding-top: 50px;
  text-align: center;
}

:is(.norecords, .norecords-sm)::before {
  content: revert;
}

/*Center the no records on smaller screen*/

@media (max-width: 576px) {
  .norecords {
    position: relative;
    top: calc(50% - 100px);
  }
}

.button-panel {
  z-index: 30;
  position: absolute;
  left: 0;
  bottom: 0;
  border: none;
  padding: var(--spacing-05, 1rem);
}

.cd-dialog-button-panel {
  z-index: 30;
  position: absolute;
  left: 0;
  bottom: 0;
  border: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--spacing-05);
  background-color: var(--container-bg-02, #fff) !important;
  padding: var(--spacing-06, 1.5rem) !important;
  border-top: 1px solid var(--mds-border-color, #e0e0e7);
}

.cd-dialog-button-panel > button {
  flex: 1 1 0px;
}

ul#fieldPanelContainer > li,
ul.field-panel li {
  padding: var(--spacing-03, 0.5rem) 0;
}

ul#fieldPanelContainer > li {
  padding-bottom: 0;
}

/*Print assessment*/

.printassess .treeview.sectioncontainer {
  overflow-y: auto;
  height: 190px;
  vertical-align: top;
}

.printassess .treeview ul.container li.navgroup {
  clear: left !important;
}

.cwtv-nodecontainer label {
  margin-left: 5px;
}

.modal-content {
  border: none !important;
  overflow-y: auto;
}

.modal-content h3 {
  margin-bottom: var(--spacing-05, 1rem);
}

.modal-content dl.row {
  margin-bottom: 0;
}

.modal-content dl.row ul {
  margin-bottom: 0.3rem;
}

.modal-style {
  background-color: var(--container-bg-02, #fff);
}

body.dialog > form div.container-fluid.border-bottom {
  background-color: var(--container-bg-02, #fff);
}

.modal-body {
  background-color: var(--container-bg-02, #fff);
}

.single-record h4 {
  text-transform: capitalize;
}

.single-record button {
  opacity: 0.7;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.single-record button:hover {
  opacity: 1 !important;
}

.single-record:last-child {
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

/*Section Headings*/

.section-heading {
  display: block;
  margin-bottom: var(--spacing-03, 0.5rem);
  min-height: 30px;
  text-decoration: none;
}

.section-heading h2 {
  display: block;
  overflow: hidden;
  margin: 3px 0 3px 0;
  margin-right: 20px;
  line-height: 30px;
  font-weight: var(--font-weight-normal, 400);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-t.section-heading.nocollapse h2 {
  cursor: default;
}

/*splitter*/
.splitter-vertical {
    float: left;
    border-radius: 0 var(--spacing-02) var(--spacing-02) 0;
    width: var(--spacing-04, 0.75rem);
    vertical-align: middle;
    position: absolute
}

.splitter-link {
    margin-top: 77.5px;
}

.splitter-vertical a {
  z-index: 20;
  position: relative;
  left: 0;
  display: inline-block;
  margin-left: -5px;
  width: var(--spacing-04, 0.75rem);
  height: 200px;
  background-image: url(../_imgs/bg-splitter-open.png);
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}

.splitter-vertical a:hover {
  background-image: url(../_imgs/bg-splitter-open-hover.png);
  /* FF3.6+ */
  -webkit-transition: background-image 0.2s ease-in-out;
  -moz-transition: background-image 0.2s ease-in-out;
  -o-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
}

.splitter-vertical a.closed {
  margin-left: -1px;
  background-image: url(../_imgs/bg-splitter-closed.png);
}

.splitter-vertical a.closed:hover {
  -webkit-transition: background-image 0.2s ease-in-out;
  -moz-transition: background-image 0.2s ease-in-out;
  -o-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
  background-image: url(../_imgs/bg-splitter-closed-hover.png);
}

.row .col-3.pr-0,
.row .col-6.pr-0 {
  border-right: var(--border-width-01, 1px) solid var(--border-color) !important;
  background-color: var(--container-bg-02, #fff);
}

.row .col-3.pr-0 .scroll-y.pt-3 .card {
  background-color: var(--container-bg-02, #fff);
}

#CWSearchFooter.button-panel-footer {
  padding: var(--spacing-05, 1rem);
  bottom: 0;
  left: 0;
  position: absolute;  
  border-top: none !important;
  z-index: 2;
  background-color: var(--container-bg-02,#fff);
  width: auto;
}

/*Filter row on top of main content area*/

.filter-wrap {
  border-bottom: var(--border-width-01, 1px) solid var(--border-color, #e0e0e7);
  padding-block: var(--spacing-05, 1rem);
  padding-inline: var(--spacing-05, 1rem);
  background-color: var(--container-bg-02, #fff);
}

.filter-wrap .form-inline {
  padding-left: var(--spacing-05, 1rem);;
}

.btn-filter {
  border-radius: var(--border-radius-02, 6px);
  padding-right: 40px;
  background-image: url(../_imgs/bg-button-filter.svg);
  background-position: right 6px center !important;
  background-repeat: no-repeat;
  background-size: var(--icon-size, 1.5rem);
}

.filter-wrap .form-group.row {
  margin: 0.8rem 0 !important;
}

header.container-fluid.header.row {
  z-index: 5;
  position: relative;
  margin: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
  padding-left: var(--spacing-05, 1rem) !important;
}

/*Blink animation to show elements have changed*/

@keyframes blinkanim {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.blink {
  animation-name: blinkanim;
  animation-duration: 0.1s;
}

/*Blink animation to apply to a button to show elements have changed*/

@keyframes buttonblink {
  0% {
    background: var(--container-bg-02, #fff);
  }
  50% {
    background-color: rgba(255, 236, 179, 0.8);
    color: var(--text-default, #161616);
  }
  100% {
    background: var(--container-bg-02, #fff);
  }
}

.button-blink {
  animation-name: buttonblink;
  animation-duration: 0.5s;
}

.currency {
  display: table-cell;
  border: var(--border-width-01, 1px) solid var(--secondary, #666679) !important;
  width: 34px;
  background: var(--ui-01) !important;
  line-height: 34px;
  font-weight: var(--font-weight-bold, 700);
  text-align: center;
  vertical-align: middle;
}

div#ui-datepicker-div.ui-datepicker {
  z-index: 45 !important;
}

.card-hover:hover {
  transition: background-color 150ms linear;
  background-color: var(--container-bg-02, #fff);
  cursor: pointer;
}

.card-hover.selected {
  border-bottom: var(--border-width-01, 1px) solid transparent !important;
  background-color: var(--container-bg-02, #fff)!important;
}

.apexcharts-canvas {
  padding: 5px;
  background-color: var(--container-bg-02, #fff);
}

body.chartpage {
  background-color: var(--container-bg-02, #fff);
}

/*Responsive - move to separate style sheet*/

@media (max-width: 992px) {
  .navbar-nav {
    flex-direction: row;
  }
  .wx-100 {
    min-width: initial;
  }
}

/* form */

[disabled] {
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

/* button */ 

.btn {
  position: relative;
  border-radius: var(--border-radius-01, 3px);
  padding: var(--spacing-03, 0.5rem) var(--spacing-05, 1rem);
}

.btn.btn-primary {
  border-color: var(--primary-border, #1078cf);
  background-color: var(--primary, #1078cf);
  color: var(--primary-on, #fff);
}

.btn.btn-primary:hover {
  border-color: var(--primary-hover, #1260a1);
  background-color: var(--primary-hover, #1260a1);
} 

.btn.btn-primary:active,
.btn.btn-primary:focus {
  background-color: var(--primary-active, #134773) !important;
}

.btn.btn-primary-soft {
  border-color: var(--primary-soft-border, #1078cf);
  background-color: var(--primary-soft, #1078cf);
  color: inherit;
}

.btn.btn-primary-soft:hover {
  border-color: var(--primary-soft-hover, #1260a1);
  background-color: var(--primary-soft-hover, #1260a1);
}

.btn.btn-primary-soft:active,
.btn.btn-primary-soft:focus {
    background-color: var(--primary-soft-active, #134773) !important;
}

.btn.btn-outline-secondary {
  border: var(--border-width-01, 1px) solid var(--secondary, #666679);
  background-color: var(--ui-01, #fff);
  color: inherit;
}

.btn.btn-outline-secondary:hover {
  background-color: var(--secondary-soft, #f0f0f2);
}

.btn.btn-outline-secondary:active,
.btn.btn-outline-secondary:focus {
  background-color: var(--secondary-soft-hover, #d1d1d7) !important;
  color: inherit !important;
}

/* button group */

.btn-group-lg {
  display: flex;
  gap: var(--spacing-05, 1rem);
  margin-top: var(--spacing-05, 1rem)
}

/* image buttons */

.btn-24-icon,
.btn-24-icon-lhs
.btn-24-icon-rhs,
.btn-localized,
.btn-lookup-clear,
.btn-lookup,
.btn-refresh,
.btn24clear,
.btn24up,
.btn24down,
.btn24delete,
.btn24edit {
  width: 35px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--icon-size, 1.5rem);
  filter: grayscale(100%);
}

.btn24edit {
  background-repeat: no-repeat;
}

.btn-lookup-clear {
  background-image: url(../_imgs/bg-button-clear.png);
}

.btn-refresh {
  width: auto;
  padding-left: calc(var(--spacing-05, 1rem) + 35px);
  background-image: url(../_imgs/bg-button-refresh.png);
  background-position-x: var(--spacing-05, 1rem);
}

.btn-add,
.btn-delete-rule {
  padding-right: var(--spacing-07, 2rem);
  background-position: right var(--spacing-03, 0.5rem) center;
  background-repeat: no-repeat;
  filter: grayscale(100%);
}

.btn-add {
  background-image: url(../_imgs/bg-button-add.png);
}

.btn-localized {
  background-image: url(../_imgs/icon-translate.svg);
}

.btn-datepicker,
.btn-timepicker {
  min-height: var(--spacing-08, 2.5rem);
  filter: grayscale(100%);
}

.btn-lookup[disabled="disabled"] {
  background-image: url(../_imgs/icon-search-24-disabled.png);
}

.btn24clear {
  height: 35px;
  background-image: url(../../../_imgs/toolbar/icon-menu-clear.png);
}

.btn24up {
  height: 35px;
  background-image: url(../../../_imgs/toolbar/icon-menu-move-step-up-dark.png);
}

.btn24down {
  height: 35px;
  background-image: url(../../../_imgs/toolbar/icon-menu-move-step-down-dark.png);
}

.btn24delete {
  height: 35px;
  background-image: url(../../../_imgs/toolbar/icon-24-delete.png);
}

.btn24edit {
  height: 35px;
  background-image: url(../../../_imgs/toolbar/icon-24-edit.png);
}

/* input */

input[type="checkbox"].form-control, input[type="radio"].form-control {
  width: auto !important;
}

.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) {
  border-top-left-radius: var(--border-radius-01, 3px);
  border-bottom-left-radius: var(--border-radius-01, 3px);
}

.form-control,
.custom-file-label {
    min-height: var(--spacing-08, 2.5rem);
    padding: var(--spacing-03, 0.5rem) var(--spacing-05, 1rem);
    border-color: var(--secondary, #666679);
    border-radius: var(--border-radius-01, 3px);
    background-color: var(--form-bg, #fff);
    height: auto;
}

.custom-file-label {
  height: auto;
  display: grid;
  place-items: center normal;
}

.custom-file-label::after {
  height: auto;
  display: grid;
  place-items: center;
}

.form-control:focus {
  box-shadow: 0 0 0 0.2rem var(--selected-low-emphasis, #88bce7);
  border-color: var(--selected, #1078cf);
}

.form-control[readonly],
.form-control[disabled] {
  background-color: var(--ui-02, #eeeef1);
  color: var(--text-default, #161616);  
}

/* error handler */

label.formerror {
  width: 100% !important;
  font-size: var(--small-font-size);
  font-weight: var(--font-weight-normal, 400);
  color: var(--invalid) !important;
}

label.formerror span {
  display: block !important;
  margin-top: var(--spacing-02, 0.25rem);
}

input[type="text"].formerror {
  z-index: 3;
  border: var(--border-width-01, 1px) solid var(--invalid) !important;
}

input[type="text"].formerror:focus {
  box-shadow: 0 0 0 0.2rem var(--invalid-low-emphasis, #ee9aa2);
}

/* checkbox */

.form-check {
  position: unset;  
  padding-left: unset;
  display: flex;
  gap: var(--spacing-03, 0.5rem);
}

.form-check .form-check-input {
  position: unset;
  margin: unset;
}

/* select */
select.form-control {
  padding-right: var(--spacing-08, 2.5rem);
  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='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--spacing-05, 1rem) center;
  background-size: var(--spacing-05, 1rem) var(--spacing-04, 0.75rem);
  appearance: none;
}

/* input inside a form control */

.form-control.p-0 {
  border-top-left-radius: var(--border-radius-01, 3px) !important;
  border-bottom-left-radius: var(--border-radius-01, 3px) !important;
  background-color: var(--form-bg, #fff);
  min-height: calc(var(--spacing-08, 2.5rem) - var(--border-width-02,2px));
}

.form-control.p-0:focus-within {
  z-index: 3;
  border: var(--border-width-01, 1px) solid var(--selected, #1078cf);
  box-shadow: 0 0 0 0.2rem var(--selected-low-emphasis, #88bce7);
}

.form-control .form-control-lookup {
  width: calc(100% - var(--border-width-02, 2px));
  min-height: calc(var(--spacing-08, 2.5rem) - var(--border-width-02, 2px));
  padding: var(--spacing-03, 0.5rem) var(--spacing-05, 1rem);
  border: none;
  border-top-left-radius: var(--border-radius-01, 3px);
  border-bottom-left-radius: var(--border-radius-01, 3px);
  background: transparent;
}

.form-control .form-control-lookup:focus-visible {
  outline: none;
}

.form-control .lookup-link {
  display: block;
  align-items: center;
  overflow: hidden;
  min-height: calc(var(--spacing-08, 2.5rem) - var(--border-width-02, 2px));
  padding: var(--spacing-03, 0.5rem) var(--spacing-05, 1rem);
  text-overflow: ellipsis; 
  white-space: nowrap; 
}

.form-control-plaintext {
  min-height: var(--spacing-08, 2.5rem);
  display: flex;
  align-items: center;
}

/* multiselect-list inside a form control */

.form-control > .multiselect-list {
  margin: calc(var(--spacing-03, 0.5rem) * -1) calc(var(--spacing-05, 1rem) * -1);
  background-color: transparent;
}

/* label */

label {
  cursor: pointer;
  font-size: var(--font-size-base, 0.875rem);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--text-muted, #666679);
}

.label-soft {
    cursor: pointer;
    font-size: var(--font-size-base, 0.875rem);
    font-weight: var(--font-weight-normal, 500);
    color: var(--text-muted, #666679);
}

.cd-required-label {
    display: flex;
    color: var(--danger);
    line-height: var(--spacing-08);
}

.cd-fw-semi-bold {
    font-weight: var(--font-weight-semi-bold, 600);
}

.entity-icon-16 {
  width: 30px !important;
  background-repeat: no-repeat !important;
  background-position: center;
  background-size: 24px;
  border-left: solid 1px #ced4da;
  border-top: solid 1px #ced4da;
  border-bottom: solid 1px #ced4da;
}

/* multiselect */
.multiselect-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-03, 0.5rem);
  overflow-y: auto;
  padding: calc(var(--spacing-02, 0.25rem) + var(--border-width-01, 1px));
}

.multiselect-list li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--spacing-07, 2rem);
  border-radius: var(--border-radius-pill, 50rem);
  padding: 0 var(--spacing-08, 2.5rem) 0 var(--spacing-05, 0.5rem);
  background-color: var(--cd-primary-soft, #E7F1FA);
  font-size: var(--font-size-base, 0.875rem);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--cd-primary-soft-on, #14334E);
  border: 1px solid var(--cd-primary-soft-border, #87BBE7);
}

.multiselect-list .text-hide {
  position: absolute;
  right: var(--spacing-03, 0.5rem);
  width: var(--icon-size, 1.5rem);
  height: var(--icon-size, 1.5rem);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='white' d='M 39.486328 6.9785156 A 1.50015 1.50015 0 0 0 38.439453 7.4394531 L 24 21.878906 L 9.5605469 7.4394531 A 1.50015 1.50015 0 0 0 8.484375 6.984375 A 1.50015 1.50015 0 0 0 7.4394531 9.5605469 L 21.878906 24 L 7.4394531 38.439453 A 1.50015 1.50015 0 1 0 9.5605469 40.560547 L 24 26.121094 L 38.439453 40.560547 A 1.50015 1.50015 0 1 0 40.560547 38.439453 L 26.121094 24 L 40.560547 9.5605469 A 1.50015 1.50015 0 0 0 39.486328 6.9785156 z'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  filter: invert(1);
}

.multiselect-list li a.multi-select-link {
  position: static;
  top: auto;
  right: auto;
  width: auto;
  height: auto;
  background: none;
  color: var(--cd-primary-soft-on, #fff);
}

.multiselect-list li span {
  width: 1em;
  height: 1em;
  padding-left: var(--spacing-06, 1.5rem);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--spacing-05, 1rem);
}

/* flatpickr */

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background-color: var(--form-bg, #fff) !important;
}

/* Correct Errors */

#CWBulkEdit .form-group,
#CWBulkEdit .form-check {
  align-items: center;
}

#CWBulkEdit label {
  margin-bottom: 0;
}

/* Helping to differentiate between enabled and disabled select options  */
.form-control,
.form-control:focus {
  color: var(--body-color, #161616);
  font-weight: var(--font-weight-medium, 500);
}

.form-control optgroup > option {
  color: var(--body-color, #161616);
  font-weight: var(--font-weight-medium, 500);
}

.form-control optgroup > option:disabled {
  color: var(--text-muted, #666679);
}

.color-picker{
  display:block;
}

.check-list {
  margin-left: 1rem;
  margin-right: 1rem;
  padding-top: .7rem;
}

.check-list input {
  margin-top: .3rem;
  margin-left: 20px !important;
}

.check-list li label {
  line-height: 1;
  margin-left: 15px !important;
}

.btn-close-drawer {
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    background-image: url(../_imgs/close.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.btn-full-screen-drawer {
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    background-image: url(../_imgs/toggle_full_screen.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ↓ Mosaic Design System | table | v1.1.3 */
/* ↓ Heavily modified */
table {
  --mds-table-padding-block: var(--mds-spacing-03, 0.5rem);
  --mds-table-padding-inline: var(--mds-spacing-03, 0.5rem);
  --mds-table-border-color: var(--mds-color-gray-30, #d5d6e0);
  --mds-table-bg-color: var(--mds-ui-color-01, #fff);
  --mds-table-vertical-align: baseline;
  inline-size: 100%;
  border-collapse: collapse;
  line-height: calc(1.714em - 0.0625rem);
  vertical-align: var(--mds-table-vertical-align);
}
table :where(tbody, td, tfoot, th, thead, tr) {
  border: 0 solid var(--mds-table-border-color);
}
table > :where(:not(caption)) > * > * {
  border-block-end-width: 1px;
  padding-block: var(--mds-table-padding-block);
  padding-inline: var(--mds-table-padding-inline);
  background-color: var(--mds-table-bg-color);
}
table > :where(thead, tfoot) {
  vertical-align: top;
}
table > :where(thead, tfoot) > :not(caption) > * {
  --mds-table-bg-color: var(--mds-table-header-bg-color, #e0e0e7);
}
table > tbody {
  vertical-align: inherit;
}
table th {
  font-weight: 700;
}
table > :not(caption) > * {
  border-block-width: 1px;
  border-inline-width: 0;
}
table > :not(caption) > * > * {
  border-block-width: 0;
  border-inline-width: 1px;
}
table > :where(thead, tfoot) > :not(caption) > *:not(:last-child) {
  border-inline-end-color: var(--mds-ui-color-01, #fff);
}
table > tbody > tr:nth-of-type(even) > * {
  --mds-table-bg-color: var(--mds-ui-color-02, #eeeef1);
}

/* ↓ Additional */
table > tbody > tr.selrow > * {
  --mds-table-bg-color: var(--mds-color-primary-soft, #e7f2fa);
}

table > tbody > tr.success > * {
  --mds-table-bg-color: var(--mds-color-success-soft, #ecf2ec);
}

table > tbody > tr.error > * {
  --mds-table-bg-color: var(--mds-color-danger-soft, #fcebec);
}

/* ↓ data-grid */
table thead a {
  text-decoration: none;
  color: inherit;
}

table thead a[onclick] {
  text-decoration: underline;
}

table thead a:hover {
  cursor: default;
  text-decoration: none;
  color: inherit;
}

table thead a[onclick]:hover {
  cursor: pointer;
  text-decoration: underline;
}

@supports not selector(:has(.some-element)) {
  table thead a:focus {
    outline: var(--mds-spacing-01) solid var(--mds-ui-color-07);
    outline-offset: var(--mds-spacing-01);
  }
}

@supports selector(:has(.some-element)) {
  table thead a {
    outline: none;
  }

  table thead th:has(a:focus) {
    outline: var(--mds-spacing-01) solid var(--mds-ui-color-07);
    outline-offset: calc(var(--mds-spacing-01) * -1);
  }
}