/* CELL MODIFICATION */
.cell-radius { border-radius: 10px; }
.cell-shadow { box-shadow: var(--block-shadow); }

/* LAYOUT MODIFICATION */
.transparent-layout.dhx_layout,
.transparent-layout > .dhx_layout,
.transparent-layout > .dhx_layout-cell,
.transparent-layout > .dhx_layout-cell.dhx_layout-rows,
.transparent-layout > .dhx_layout-cell.dhx_layout-rows .dhx_layout-cell,
.transparent-layout.dhx_layout-wide.dhx_layout-columns > .dhx_layout-cell {
  background-color: transparent;
  border: none;
}

/* FLEX */
.flex { display: flex; }
.flex-inline { display: inline-flex; }
/* FLEX :: flex-direction */
.flex.row, .flex-inline.row { flex-direction: row; }
.flex.row-reverse, .flex-inline.row-reverse { flex-direction: row-reverse; }
.flex.column, .flex-inline.column { flex-direction: column; }
.flex.column-reverse, .flex-inline.column-reverse { flex-direction: column-reverse; }
/* FLEX :: justify-content */
.flex.jc-start, .flex-inline.jc-start { justify-content: start; }
.flex.jc-center, .flex-inline.jc-center { justify-content: center; }
.flex.jc-between, .flex-inline.jc-between { justify-content: space-between; }
.flex.jc-around, .flex-inline.jc-around { justify-content: space-around; }
.flex.jc-stretch, .flex-inline.jc-stretch { justify-content: stretch; }
.flex.jc-end, .flex-inline.jc-end { justify-content: end; }
/* FLEX :: align-items */
.flex.ai-start, .flex-inline.ai-start { align-items: start; }
.flex.ai-center, .flex-inline.ai-center { align-items: center; }
.flex.ai-stretch, .flex-inline.ai-stretch { align-items: stretch; }
.flex.ai-end, .flex-inline.ai-end { align-items: end; }
/* FLEX :: wrap */
.flex.wrap, .flex-inline.wrap { flex-wrap: wrap; }
.flex.nowrap, .flex-inline.nowrap { flex-wrap: nowrap; }

/* GAPS :: 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 */
/* gap */
.gap4  { gap: 4px;  }
.gap6  { gap: 6px;  }
.gap8  { gap: 8px;  }
.gap10 { gap: 10px; }
.gap12 { gap: 12px; }
.gap16 { gap: 16px; }
.gap20 { gap: 20px; }
.gap24 { gap: 24px; }
/* column gap */
.c-gap4  { column-gap: 4px;  }
.c-gap6  { column-gap: 6px;  }
.c-gap8  { column-gap: 8px;  }
.c-gap10 { column-gap: 10px; }
.c-gap12 { column-gap: 12px; }
.c-gap16 { column-gap: 16px; }
.c-gap20 { column-gap: 20px; }
.c-gap24 { column-gap: 24px; }
/* row gap */
.r-gap4  { row-gap: 4px;  }
.r-gap6  { row-gap: 6px;  }
.r-gap8  { row-gap: 8px;  }
.r-gap10 { row-gap: 10px; }
.r-gap12 { row-gap: 12px; }
.r-gap16 { row-gap: 16px; }
.r-gap20 { row-gap: 20px; }
.r-gap24 { row-gap: 24px; }

/* MARGINS :: auto | 2 | 4 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 28 */
/* margins */
.m-a  { margin: auto; }
.m-2  { margin: 2px;  }
.m-4  { margin: 4px;  }
.m-8  { margin: 8px;  }
.m-10 { margin: 10px; }
.m-12 { margin: 12px; }
.m-14 { margin: 14px; }
.m-16 { margin: 16px; }
.m-18 { margin: 18px; }
.m-20 { margin: 20px; }
.m-22 { margin: 22px; }
.m-24 { margin: 24px; }
.m-28 { margin: 28px; }
/* margin-right */
.mr-a  { margin-right: auto; }
.mr-2  { margin-right: 2px;  }
.mr-4  { margin-right: 4px;  }
.mr-8  { margin-right: 8px;  }
.mr-10 { margin-right: 10px; }
.mr-12 { margin-right: 12px; }
.mr-14 { margin-right: 14px; }
.mr-16 { margin-right: 16px; }
.mr-18 { margin-right: 18px; }
.mr-20 { margin-right: 20px; }
.mr-22 { margin-right: 22px; }
.mr-24 { margin-right: 24px; }
.mr-28 { margin-right: 28px; }
/* margin-left */
.ml-a  { margin-left: auto; }
.ml-2  { margin-left: 2px;  }
.ml-4  { margin-left: 4px;  }
.ml-8  { margin-left: 8px;  }
.ml-10 { margin-left: 10px; }
.ml-12 { margin-left: 12px; }
.ml-14 { margin-left: 14px; }
.ml-16 { margin-left: 16px; }
.ml-18 { margin-left: 18px; }
.ml-20 { margin-left: 20px; }
.ml-22 { margin-left: 22px; }
.ml-24 { margin-left: 24px; }
.ml-28 { margin-left: 28px; }
/* margin-bottom */
.mb-a  { margin-bottom: auto; }
.mb-2  { margin-bottom: 2px;  }
.mb-4  { margin-bottom: 4px;  }
.mb-8  { margin-bottom: 8px;  }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
/* margin-top */
.mt-a  { margin-top: auto; }
.mt-2  { margin-top: 2px;  }
.mt-4  { margin-top: 4px;  }
.mt-8  { margin-top: 8px;  }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
/* margin by X :: left + right */
.mx-a  { margin-left: auto; margin-right: auto; }
.mx-2  { margin-left: 2px;  margin-right: 2px;  }
.mx-4  { margin-left: 4px;  margin-right: 4px;  }
.mx-8  { margin-left: 8px;  margin-right: 8px;  }
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-12 { margin-left: 12px; margin-right: 12px; }
.mx-14 { margin-left: 14px; margin-right: 14px; }
.mx-16 { margin-left: 16px; margin-right: 16px; }
.mx-18 { margin-left: 18px; margin-right: 18px; }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mx-22 { margin-left: 22px; margin-right: 22px; }
.mx-24 { margin-left: 24px; margin-right: 24px; }
.mx-28 { margin-left: 28px; margin-right: 28px; }
/* margin by Y :: top + bottom */
.my-a  { margin-top: auto; margin-bottom: auto; }
.my-2  { margin-top: 2px;  margin-bottom: 2px;  }
.my-4  { margin-top: 4px;  margin-bottom: 4px;  }
.my-8  { margin-top: 8px;  margin-bottom: 8px;  }
.my-10 { margin-top: 10px; margin-bottom: 10px; }
.my-12 { margin-top: 12px; margin-bottom: 12px; }
.my-14 { margin-top: 14px; margin-bottom: 14px; }
.my-16 { margin-top: 16px; margin-bottom: 16px; }
.my-18 { margin-top: 18px; margin-bottom: 18px; }
.my-20 { margin-top: 20px; margin-bottom: 20px; }
.my-22 { margin-top: 22px; margin-bottom: 22px; }
.my-24 { margin-top: 24px; margin-bottom: 24px; }
.my-28 { margin-top: 28px; margin-bottom: 28px; }
/* margin other */
.mb-off-8 { margin-bottom: -8px; }

/* PADDINGS :: 12 | 16 | 24 */
/* padding */
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }
/* padding-right */
.pr-12 { padding-right: 12px; }
.pr-16 { padding-right: 16px; }
.pr-24 { padding-right: 24px; }
/* padding-left */
.pl-12 { padding-left: 12px; }
.pl-16 { padding-left: 16px; }
.pl-24 { padding-left: 24px; }
/* padding-top */
.pt-12 { padding-top: 12px; }
.pt-16 { padding-top: 16px; }
.pt-24 { padding-top: 24px; }
/* padding-bottom */
.pb-12 { padding-bottom: 12px; }
.pb-16 { padding-bottom: 16px; }
.pb-24 { padding-bottom: 24px; }
/* padding by X :: left + right */
.px-12 { padding-right: 12px; padding-left: 12px; }
.px-16 { padding-right: 16px; padding-left: 16px; }
.px-24 { padding-right: 24px; padding-left: 24px; }
/* padding by Y :: top + bottom  */
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }

/* border radius */
.br-10 { border-radius: 10px; }

/* overflow */
.ov-h { overflow: hidden; }
.ovx-h { overflow-x: hidden; }
.ovy-h { overflow-y: hidden; }
.ov-a { overflow: auto; }
.ovx-a { overflow-x: auto; }
.ovy-a { overflow-y: auto; }

/* borders */
.bb-300 { border-bottom: 1px solid var(--color-gray-300); }
.bt-300 { border-top: 1px solid var(--color-gray-300); }
.bl-300 { border-left: 1px solid var(--color-gray-300); }
.br-300 { border-right: 1px solid var(--color-gray-300); }

/* detached */
.has-detached { position: relative; }
.detached-element {
  position: absolute;

  &.out-top {
    top: -20px;
    left: 0;
    right: 0;
  }
  &.out-bottom {
    bottom: -20px;
    left: 0;
    right: 0;
  }
  &.out-left {
    top: 0;
    bottom: 0;
    left: -100%;
  }

  &.out-right {
    top: 0;
    bottom: 0;
    right: -100%;
  }
}

/* position */
.pos-r { position: relative; }
.pos-a { position: absolute; }
.pos-f { position: fixed; }

/* grid */
.grid { display: grid; }
.grid.col-two { grid-template-columns: 1fr 1fr; }
.grid.size-50-and-50 { grid-template-columns: 50% 50%; width: calc(100% - 4px); }
.grid.one-lh * { line-height: 1; }

/* justify-self */
.js-start { justify-self: start; }
.js-center { justify-self: center; }
.js-end { justify-self: end; }

/* align-self */
.as-start { align-self: end; }
.as-center { align-self: center; }
.as-end { align-self: end; }

/* other */
.border-bottom-1 { border-bottom: 1px solid var(--color-gray-300); }
.bsbb { box-sizing: border-box; }
.width-full { width: 100%; }
.max-h-100 { max-height: 100%; }

/* z index fixes */
.dhxwins_mcover { z-index: 1010 !important; }
.dhxwin_active { z-index: 1011 !important; }

.dhx_grid-row.readonly {
  user-select: none;
  opacity: 0.5;
}
.readonly .dhx_grid-cell {
  user-select: none;
  color: var(--color-gray-600) !important;
}

.events-off {
  pointer-events: none;
}
/* todo tmp disabled
.readonly .dhx_grid-cell__content,
.readonly .dhx_cell-editor__checkbox,
.readonly .dhx_checkbox__visual-input {
  pointer-events: none;
}
*/

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bubbled {
  cursor: pointer;
  border-radius: 6px;
  background-color: var(--color-brand-blue-75);
  color: var(--color-brand-blue-700);
  padding: 2px 10px;

  &.inlined {
    margin-top: -2px;
    margin-bottom: -2px;
  }
}

.c-pointer { cursor: pointer; }

.more-hover__content {
  display: grid;
  grid-template-columns: max-content max-content;
  color: var(--color-white);
  column-gap: 10px;

  > span {
    font-family: var(--font);
    font-style: normal;
    letter-spacing: 0.2px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
  }
}

.adm-procs {
  & span + span {
    border-top: 1px solid var(--color-gray-300);
    padding-top: 2px;
  }
}

.patient-chart-mobile {
  @media screen and (max-width: 1024px) {
    flex-direction: column;
    overflow-y: auto;

    [data-cell-id="patientInfoPatientPreview"] {
      max-height: 350px;
      max-width: 100%;
      margin-bottom: 12px;
      width: 100% !important;
    }

    > *:last-child {
      min-height: 650px;

      .enquiry-table__header__after-title {
        display: none;
      }
    }
  }
}

.enquiry-patient-selector__name,
.enquiry-patient-selector__birthday {
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-app-header-title] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  @media screen and (max-width: 1024px) {
    max-width: 160px;
  }
}

.windowForm {
  max-height: 100%;
}

/* add class to grid to disable `overflow: hidden` */
.disable-ovh .dhx_data-wrap,
.disable-ovh .dhx_grid-row,
.disable-ovh .dhx_grid-cell,
.disable-ovh .dhx_grid-cell__content {
  overflow: visible;
}

.fsg {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: var(--color-gray-75);
  z-index: calc(var(--dhx-z-index-overlay-total) + 20);
}

.brand-window {
  border-radius: 10px;
  max-width: 320px;
  width: 100%;
  padding: 30px 24px 20px;

  background: var(--color-white);
  box-shadow: 0 1px 5px rgba(16, 28, 91, 0.1);
}

.brand-window__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-bottom: 30px;
}

.brand-window__content {
  display: flex;
  flex-direction: column;
}

/*
<div class="fsg hidden">
    <div class="brand-window">
        <div class="brand-window__logo">
            <svg class="enquiry-menu__logotype" width="174" height="40" viewBox="0 0 176 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                <use href="/imgs/icons.svg?v={{$version}}#svg-logotype-black" />
            </svg>
        </div>

        <div class="brand-window__content">
            <button onclick="app.onClinicianProceed();" class="mt-22 enquiry-button primary full-width">
                Proceed
            </button>
        </div>
    </div>
</div>
 */