@layer legacy {

  .glyphicons,
  .halflings {
    top: 0;
  }

  :not(.btn) > .glyphicons:not(.btn),
  :not(.btn) > .halflings:not(.btn) {
    line-height: inherit;
    font-size: 0.9em;
    top: 0;
    vertical-align: text-top;
    &.large {
      font-size: 1.1em;
    }
    &.small {
      font-size: 0.8em;
    }
  }
  
  a:has(.glyphicons,.halflings,.caret) {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    column-gap: 4px;
    line-height: inherit;
    .glyphicons,
    .halflings {
      font-size: 0.9em;
    }
    .caret {
      line-height: inherit;
      top: 0;
    }
  }

  .btn:has(.glyphicons,.halflings,.caret) {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    column-gap: 4px;
    line-height: inherit;
    .glyphicons,
    .halflings {
      font-size: 0.9em;
    }
    .caret {
      line-height: inherit;
      top: 0;
    }
  }

  #modalDialogContainer {
    .top-offset {
        margin-top: 25px;
    }
    .report-title {
        text-align: center;
    }
    .bold-header,
    .bold-header-no-underline {
        font-weight: bold;
    }
    .bold-header {
        text-decoration: underline;
    }
    .separator {
        margin: 5px 0 15px 0;
    }
  }

  .affix {
    position: sticky !important;
  }

  .modal-title {
    font-size: 1.4rem;
  }

  .k-calendar {
    display: block;

    .k-header,
    .k-footer {
      background-color: #f5f5f5;
    }
    .k-content {
      outline-offset: -2px;
      td.k-state-selected {
        background-color: var(--primary-dark-color);
        -webkit-box-shadow: none;
        box-shadow: none;
        > a {
          color: var(--primary-text-color);
        }
      }
      td.k-state-focused {
        background-color: var(--primary-color);
        -webkit-box-shadow: none;
        box-shadow: none;
        > a {
          color: var(--primary-text-color);
        }
      }
    }
    .k-nav-today,
    .k-nav-prev,
    .k-nav-next {
      &.k-state-hover {
        background: #b0b0b0;
        outline-offset: -2px;
      }
    }
    .k-link {
      border-radius: 0;
      outline-offset: -1px;
    }
  }

  .k-datepicker,
  .k-datetimepicker {
    border: none;
    &:has(.k-picker-wrap.k-state-focused) {
      outline: var(--outline);
      outline-offset: 2px;
    }
    .k-picker-wrap {
      color: var(--widget-btn-text-color);
      background-color: var(--widget-btn-bg-color);
      border: 1px solid var(--control-grid-color);
      border-radius: 4px;
      overflow: hidden;
      transition: box-shadow var(--transpeed) ease, border var(--transpeed) ease;
      box-shadow: none;
      &.k-state-hover {
        border: var(--control-focus-border);
      }
      &.k-state-focused {
        border: var(--control-focus-border);
        box-shadow: var(--control-focus-shadow);
      }
      &k-state-border-down {
        border-bottom: 1px !important;
      }
      .k-input {
        box-shadow: none;
      }
      .k-select {
        border-color: var(--control-grid-color);
      }
      .k-select:hover {
        color: var(--widget-btn-hover-text-color);
        background-color: var(--widget-btn-hover-bg-color);
      }
    }
    .k-input {
      background: transparent;
      outline: none;
    }
    .k-input:has(+ .k-select) {
      border: none !important;
    }
  }

  .k-dropdown {
    &:has(.k-dropdown-wrap.k-state-focused) {
      outline: var(--outline);
      outline-offset: 2px;
    }
    .k-dropdown-wrap {
      color: var(--control-text-color);
      background-color: var(--control-bg-color);
      border: 1px solid var(--control-grid-color);
      border-radius: 4px;
      transition: box-shadow var(--transpeed) ease, border var(--transpeed) ease;
      box-shadow: none;
      &.k-state-hover,
      &.k-state-focused {
        border: var(--control-focus-border);
      }
      &.k-state-focused {
        box-shadow: var(--control-focus-shadow);
      }
      &.k-state-border-down {
        border-bottom: 1px !important;
      }
    }
  }

  .k-combobox .k-dropdown-wrap::before,
  .k-picker-wrap::before {
    padding: 0;
  }

  .k-autocomplete {
    color: var(--control-text-color);
    background-color: var(--control-bg-color);
    border: 1px solid var(--control-grid-color);
    border-radius: 4px;
    transition: box-shadow var(--transpeed) ease, border var(--transpeed) ease;
    outline: none;
    box-shadow: none;
    &.k-state-hover,
    &.k-state-focused {
      box-shadow: var(--control-focus-shadow);
      border: var(--control-focus-border);
    }
    .k-input {
      background-color: transparent;
      box-shadow: none;
    }
  }
  
  .k-numerictextbox {
    border: none;
    &:has(.k-numeric-wrap.k-state-focused) {
      outline: var(--outline);
      outline-offset: 2px;
    }
    .k-numeric-wrap {
      color: var(--control-text-color);
      background-color: var(--control-bg-color);
      border: 1px solid var(--control-grid-color);
      box-shadow: none;
      .k-input {
        background-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        outline: none;
      }
      .k-select {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: none;
        border-left: 1px solid var(--control-grid-color);
        &:hover {
          color: var(--widget-btn-hover-text-color);
          background-color: var(--widget-btn-hover-bg-color);
        }
      }
      &.k-state-hover,
      &.k-state-focused {
        background-color: var(--control-bg-color);
        border: var(--control-focus-border);
      }
      &.k-state-focused {
        box-shadow: var(--control-focus-shadow);
      }
    }
  }

  .k-multiselect {
    box-shadow: none;
    color: var(--control-text-color);
    background-color: var(--control-bg-color);
    border: 1px solid var(--control-grid-color);
    border-radius: 4px;
    transition: box-shadow var(--transpeed) ease, border var(--transpeed) ease;
    &.k-state-hover,
    &.k-state-focused {
      border: var(--control-focus-border);
    }
    &.k-state-focused {
      box-shadow: var(--control-focus-shadow);
      outline: var(--outline);
      outline-offset: 2px;
    }
    &.k-state-border-down {
      border-bottom: 1px !important;
    }
    .k-multiselect-wrap {
      display: flex;
      align-items: center;
      justify-content: start;
      background: transparent;
      box-shadow: none;
      min-height: 2.3em;
    }
    .k-input {
      color: var(--placeholder-text-color);
      font-style: italic;
      border: none;
      outline: none;
      .k-readonly {
        color: var(--disabled-text-color);
        background: var(--disabled-bg-color);
      }
    }
    ul {
      margin-left: 5px;
      li.k-button {
        color: var(--primary-text-color);
        background: var(--primary-color);
        padding: 0px 22px 0px 8px;
        > span {
          display: flex;
          align-items: center;
          span {
            line-height: normal;
            margin: 0 6px 0 0 !important;
          }
        }
        .k-select {
          padding: 0;
        }
        .k-icon {
          filter: brightness(10);
        }
      }
    }
  }

  .k-list-container {
    border: 1px solid var(--primary-dark-color);
    padding: 0px;

    .k-textbox:focus {
      outline: none;
      outline-offset: -3px;
      background: #f0f0f0;
      border-width: 1px 0 !important;
      border-radius: 0 !important;
    }
    .k-item,
    .k-list-optionlabel {
      border: none;
      border-radius: 0;
      padding: 1px 5px;
      white-space: nowrap;
      > span {
        margin: 0 6px 0 0 !important;
        line-height: normal !important;
      }
      &.k-list-optionlabel {
        color: var(--primary-text-color);
        background: var(--primary-color);
        font-weight: bold;
        padding: 2px 10px;
      }
      &.k-state-hover,
      &.k-state-focused {
        color: var(--list-hover-text-color);
        background: var(--list-hover-bg-color);
      }
      &.k-state-selected {
        color: var(--list-focus-text-color);
        background: var(--list-focus-bg-color);
      }
    }
  }
  
  .k-autocomplete,
  .k-combobox,
  .k-datepicker,
  .k-timepicker,
  .k-datetimepicker,
  .k-colorpicker,
  .k-numerictextbox,
  .k-dropdown,
  .k-selectbox,
  .k-textbox,
  .k-toolbar .k-split-button {
    width: 100%;
    min-width: 100px;
  }

}