/* Root styles for the entire application. */
:root {
    /* main colors */
    --primary: #28a696;
    --tertiary: #5869fc;
    --alert: #e84f4f;
    --at-risk: #FFAB00;
    /* button state colors */
    --primary-dark: #229082;
    --primary-darker: #1e8174;
    --primary-focus: rgb(40 166 150 / 50%);
    --secondary: #1761b5;
    --secondary-dark: #14549d;
    --secondary-darker: #114b8d;
    --secondary-focus: rgb(23 97 181 / 50%);
    --secondary-hover: rgb(23 97 181 / 20%);
    --tertiary-dark: #2c41fb;
    --tertiary-darker: #0f26fa;
    --tertiary-focus: rgb(88 105 252 / 50%);
    --alert-dark: #e32b2b;
    --alert-darker: #d61c1c;
    --alert-focus: rgb(227 43 43 / 50%);
    --at-risk-light: #FFAB004C;;
    /* text on all filled buttons */
    --button-text: #ffffff;

    /* task colors */
    --initiated: #f2c94c;
    --in-progress: #1761b5;
    --completed: #219653;

    /* tag colors */
    --tag-0: #c6c4c4;
    --tag-1: #adffd9;
    --tag-2: #adfeff;
    --tag-3: #99e6ff;
    --tag-4: #88c9f2;
    --tag-5: #99aff2;
    --tag-6: #b3b3e6;
    --tag-7: #c195db;
    --tag-8: #da9ecf;
    --tag-9: #f2a7c3;
    --tag-10: #dc8f8d;
    --tag-11: #ff9a6f;
    --tag-12: #fcb55f;
    --tag-13: #f7ed78;
    --tag-14: #cbe364;
    --tag-15: #a9d69a;
    --tag-16: #006644;
    --tag-17: #006666;
    --tag-18: #006699;
    --tag-19: #0074de;
    --tag-20: #3864e5;
    --tag-21: #5056ce;
    --tag-22: #5d36b4;
    --tag-23: #a126a0;
    --tag-24: #d61c71;
    --tag-25: #ed0020;
    --tag-26: #ff621f;
    --tag-27: #fba841;
    --tag-28: #e7d50d;
    --tag-29: #979f34;
    --tag-30: #41742f;
    --tag-text: #212323;
    --tag-text-ondark: #ffffff;
    /* drop shadow */
    --drop-shadow: rgba(0, 0, 0, 0.15);
    --drag-overlay: rgba(0, 0, 0, 0.3);

    /* color combinations on some components (e.g. Alert) */
    --foreground-secondary: #104581;
    --background-secondary: #b9d0e9;
    --foreground-alert: #771010;
    --background-alert: #f8caca;

    /* line ordering panel */
    --line-ordering-border: rgba(0, 0, 0, 0.15);
    --line-ordering-selected: rgba(23, 97, 181, 0.2);

    /* z-index layers */
    --editor-toolbar-z: 1;
    --editor-global-toolbar-z: 2;
    --editor-nav-z: 3;
    --detached-toolbar-z: 4;
    --global-nav-z: 5;
    --segmented-button-focus-z: 6;
    --table-actions-z: 7;
    --sticky-table-header-z: 8;
    --loading-overlay-z: 9;
    --taggroup-overflow-z: 10;
    --sidebar-backdrop-z: 11;
    --sidebar-container-z: 12;
    --sidebar-z: 13;
    --menu-z: 14;
    --modal-backdrop-z: 15;
    --modal-z: 16;
    --toast-z: 17;
    /* modal menus must be above bootstrap modals, which are z-index 1050 */
    --modal-menu-z: 1100;
}
.light-mode {
    /* light mode backgrounds */
    --background: #f0f0f0;
    --background1: #ffffff;
    --background2: #e9e9e9;
    --background2-dark: #cacaca;
    --background2-darker: #b5b5b5;
    --background2-focus: rgb(202 202 202 / 50%);
    --background3: #dfdfdf;
    --selected-background: #d1dff0;
    /* modal backdrop */
    --modal-backdrop: rgb(0 0 0 / 10%);
    /* light mode text */
    --text1: #212323;
    --text2: #666768;
    --text3: #a7a8a9;
    --toast-text: #ffffff;
    --alert-hover: #f8caca;
}
.dark-mode {
    /* dark mode backgrounds */
    --background: #212323;
    --background1: #2f3132;
    --background2: #3e4142;
    --background2-dark: #565a5b;
    --background2-darker: #666a6c;
    --background2-focus: rgb(86 90 91 / 50%);
    --background3: #383b3c;
    --selected-background: #2b3a4c;
    /* modal backdrop */
    --modal-backdrop: rgb(0 0 0 / 33%);
    /* dark mode text */
    --text1: #ffffff;
    --text2: #a7a8a9;
    --text3: #717373;
    --toast-text: #ffffff;
    --alert-hover: #771010;
}

/* Site-wide styles */
.escr-body,
.escr-page-container {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    height: 100vh;
    overflow-y: hidden;
    max-height: 100vh;
}
.escr-body main {
    max-height: 100vh;
    overflow: auto;
    width: 100%;
}
.escr-body  {
    background-color: var(--background);
    color: var(--text1);
    min-height: 100vh;
}
.escr-page:not(#editor),
main:has(.escr-vue-enabled):not(:has(.escr-page)) {
    padding: 16px 32px;
}
.escr-vue-enabled .escr-page-container {
    background-color: var(--background);
}

/* screens smaller than desktop */
@media (max-width: 1200px),
    (max-height: 680px) {
    .escr-page-container {
        min-width: 1200px;
        min-height: 768px;
        max-height: max(768px, 100vh);
    }
    html,
    .escr-body,
    .escr-body-main {
        overflow: hidden;
    }
    .escr-page:not(#editor),
    main:has(.escr-vue-enabled):not(:has(.escr-page)) {
        padding-bottom: 0;
    }
}

/* Typography */
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    src: url(1b2f49aa997028c7f55c.ttf);
}
@font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 400;
    src: url(2696b2acd42fc115ac7a.ttf);
}
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    src: url(f1c1d33ce1bb7cc10dbf.ttf);
}
@font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 600;
    src: url(229cb9adf7421e95ab5a.ttf);
}
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    src: url(b24963b60c925fbfa01c.ttf);
}
@font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 700;
    src: url(230c50ec58b3e4cb68ee.ttf);
}
/* arabic resizing */
@font-face {
    font-family: "Resized Arabic";
    size-adjust: 120%;
    src: local("GeezaPro"), local("Geeza Pro"), local("Times New Roman");
    unicode-range:
    /* Arabic */ U+600-6FF, /* Arabic Supplement */ U+750-77F,
        /* Arabic Extended-A */ U+08A0-08FF, /* Arabic Extended-B */ U+0870-089F,
        /* Arabic Extended-C */ U+10EC0-10EFF,
        /* Arabic Presentation Forms-A */ U+FB50-FDFF,
        /* Arabic Presentation Forms-B */ U+FE70-FEFF,
        /* Rumi Numeral Symbols */ U+10E60-10E7F,
        /* Indic Siyaq Numbers */ U+1EC70-1ECBF,
        /* Ottoman Siyaq Numbers */ U+1ED00-1ED4F,
        /* Arabic Mathematical Alphabetic Symbols */ U+1EE00-1EEFF;
}
/* reset default fonts to 14px normal noto sans, weight 400 */
.escr-vue-enabled .escr-page-container,
.escr-page input[type="text"],
.escr-sidebar-container input[type="text"],
.escr-global-nav,
.v-popper__inner {
    font-family: "Noto Sans", "Resized Arabic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text1);
    font-style: normal;
}
/* tooltip/menu arrows restyling */
.escr-body .v-popper__popper .v-popper__arrow-inner,
.escr-body .v-popper__popper .v-popper__arrow-outer {
    border-color: var(--background1);
}

/* global nav layout styles */
#vue-global-nav {
    height: 100vh;
    min-width: 64px;
    z-index: var(--global-nav-z);
}
#vue-global-nav .escr-global-nav {
    height: 100vh;
}
/* font styles */
.escr-vue-enabled h1,
.escr-sidebar-container h1 {
    font-weight: 700;
    font-size: 24px;
    line-height: 33px;
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;
}
.escr-vue-enabled h2,
.escr-page h2,
.escr-modal h2,
.escr-line-modal h2,
.escr-sidebar-container h2 {
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;
}
.escr-vue-enabled h3,
.escr-page h3,
.escr-modal h3,
.escr-sidebar-container h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;
}
.escr-vue-enabled h4,
.escr-sidebar-container h4 {
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;
}

/* Horizontal rule */
.escr-page hr,
.escr-line-modal hr,
.escr-sidebar-container hr {
    border: none;
    border-top: 1px solid var(--text3);
}

/**
 * Improved screen reader only CSS class
 * @author Gaël Poupard
 */
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

/* tooltip styling */
.v-popper--theme-escr-tooltip .v-popper__inner,
.v-popper--theme-escr-tooltip-small .v-popper__inner {
    background: var(--background1);
    border-radius: 15px;
    padding: 16px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.15);
    border: none;
    max-width: 220px;
    font-size: 12px;
    color: var(--text1);
}
.v-popper--theme-escr-tooltip-small .v-popper__inner {
    padding: 8px;
    border-radius: 8px;
}
.v-popper--theme-escr-tooltip .v-popper__arrow-inner,
.v-popper--theme-escr-tooltip-small .v-popper__arrow-inner {
    border-color: var(--background1);
}
.v-popper--theme-escr-tooltip .v-popper__arrow-outer,
.v-popper--theme-escr-tooltip-small .v-popper__arrow-outer {
    border-color: var(--background2);
}

/* spinner (adapted from bootstrap) */
@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}
.escr-spinner {
    display: inline-block;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 4px solid var(--background2);
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border 1s linear infinite;
    animation: spinner-border 1s linear infinite;
}
.escr-spinner--inactive {
    border-right-color: var(--background2);
    -webkit-animation: none;
    animation: none;
}
.escr-spinner--secondary {
    border-color: var(--secondary);
    border-right-color: transparent;
}
.escr-spinner--secondary-inactive {
    border-color: var(--secondary);
    border-right-color: var(--secondary);
    -webkit-animation: none;
    animation: none;
}
.escr-spinner--danger {
    border-color: var(--alert);
    border-right-color: var(--alert);
    -webkit-animation: none;
    animation: none;
}

/* toolbars */
.escr-toolbar {
    position: relative;
    z-index: var(--editor-toolbar-z);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    min-height: 54px;
    max-height: 54px;
    margin: 0;
}
.escr-toolbar-tooltip {
    text-align: center;
}
.escr-toolbar .new-section,
nav.escr-editor-nav .new-section {
    margin-left: 0.5rem;
}
.escr-toolbar .new-section.with-separator,
nav.escr-editor-nav .new-section.with-separator {
    display: flex;
    flex-flow: row;
    align-items: center;
}
.new-section.with-separator::before {
    width: 1px;
    content: "";
    height: 1rem;
    border-left: 1px solid var(--text3);
    padding-left: 0.5rem;
}

/* legacy UI alerts in new UI style */
#alerts-container {
    left: 6rem;
    bottom: 2rem;
    top: auto;
    right: auto;
}
.alert {
    font-family: "Noto Sans", "Resized Arabic", sans-serif;
    font-weight: 600;
    font-size: 14px;
    background-color: var(--background2);
    color: var(--text1);
    box-shadow: 0px 4px 4px var(--drop-shadow);
    border-radius: 5px;
    border-color: transparent;
}
.alert .close {
    padding: 0.6rem;
    color: var(--text1);
}
.alert a {
    color: var(--text1);
}
.alert.alert-danger {
    background-color: var(--alert);
    color: var(--toast-text);
    box-shadow: 0px 4px 4px var(--alert-focus);
}
.alert.alert-success {
    background-color: var(--primary);
    color: var(--toast-text);
    box-shadow: 0px 4px 4px var(--primary-focus);
}
.alert.alert-danger .close:hover,
.alert.alert-success .close:hover,
.alert.alert-danger a,
.alert.alert-success a {
    color: var(--toast-text);
}
.alert p.additional {
    margin-top: 0.5rem;
    margin-bottom: 0;
    display: inline-block !important;
}
p.additional:empty {
    display: none !important;
}
.alert a {
    display: block;
    border: 1px solid var(--text1);
    border-radius: 5px;
    padding: 4.5px 10px;
}
.alert.alert-danger a,
.alert.alert-success a {
    border-color: var(--toast-text);
}

/* Bootstrap 5.3 color-mode bridge.
 *
 * The theme toggle sets data-bs-theme alongside .dark-mode/.light-mode,
 * so Bootstrap's components style themselves. Bootstrap's stock dark
 * palette is not the app's (--background, --text1, … from theme.css),
 * so the global Bootstrap tokens are pointed at the app variables here
 * — one token bridge instead of the per-component remap the Bootstrap 4
 * era needed. Residual component rules may be re-added below when the
 * page pass shows a gap; measured, not guessed.
 */

[data-bs-theme="dark"] {
    --bs-body-bg: var(--background);
    --bs-body-color: var(--text1);
    --bs-emphasis-color: var(--text1);
    --bs-secondary-color: var(--text2);
    --bs-secondary-bg: var(--background1);
    --bs-tertiary-bg: var(--background2);
    --bs-border-color: var(--background2);
}

.dark-mode body {
    background-color: var(--background);
    color: var(--text1);
}

/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cropper-container img {
    backface-visibility: hidden;
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
  }

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
  }

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
  }

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
  .cropper-center::after {
    background-color: #eee;
    content: ' ';
    display: block;
    position: absolute;
  }

.cropper-center::before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
  }

.cropper-center::after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
  }

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
  }

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
  }

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
  }

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
  }

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
  }

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
  }

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
  }

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
  }

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
  }

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px;
  }

@media (min-width: 768px) {

.cropper-point.point-se {
      height: 15px;
      width: 15px;
  }
    }

@media (min-width: 992px) {

.cropper-point.point-se {
      height: 10px;
      width: 10px;
  }
    }

@media (min-width: 1200px) {

.cropper-point.point-se {
      height: 5px;
      opacity: 0.75;
      width: 5px;
  }
    }

.cropper-point.point-se::before {
    background-color: #39f;
    bottom: -50%;
    content: ' ';
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%;
  }

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}