.resize-observer[data-v-8859cc6c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-8859cc6c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}

svg.escr-logo {
    width: 42px;
    height: auto;
    fill: var(--text1);
}

/* restyled from floating-vue */
.v-popper--theme-vertical-menu .v-popper__inner {
    /* have to use !important here because sometimes floating-vue's v-popper--theme-dropdown's CSS,
    which is automatically applied, is loaded after this sequentially */
    background: var(--background1) !important;
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
    border-radius: 15px !important;
    padding: 16px 0;
    border: none !important;
}
.v-popper--theme-vertical-menu .v-popper__arrow-inner {
    display: none;
}
.v-popper--theme-vertical-menu .v-popper__arrow-outer {
    display: none;
}
/* menu items list */
.escr-vertical-menu {
    display: flex;
    flex-flow: column;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 220px;
}
.escr-vertical-menu .escr-menuitem-icon {
    width: 16px;
    height: 16px;
    margin-right: 1rem;
}
.escr-vertical-menu button,
.escr-vertical-menu a {
    display: flex;
    box-sizing: border-box;
    flex-flow: row nowrap;
    align-items: center;
    background: transparent;
    border: none;
    width: 100%;
    height: 36px;
    font-family: inherit;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    padding: 8px 32px;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    color: var(--text1);
    fill: var(--text1);
}
.escr-vertical-menu button:hover,
.escr-vertical-menu a:hover {
    background-color: var(--background2);
}
.escr-vertical-menu button:active,
.escr-vertical-menu button:focus,
.escr-vertical-menu a:active,
.escr-vertical-menu a:focus {
    background-color: var(--secondary-hover);
}
.escr-vertical-menu .new-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--background2);
}

.escr-global-nav {
    width: 64px;
    min-width: 64px;
    background: var(--background1);
    display: flex;
    flex-flow: column;
    padding: 20px 0;
    justify-content: space-between;
    filter: drop-shadow(0px 4px 4px var(--drop-shadow));
}
.escr-global-nav > div {
    width: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    flex-flow: column;
}
.escr-global-nav a.escr-global-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    background: var(--background);
    border-radius: 10px;
    color: var(--text1);
    fill: var(--text1);
    margin-top: 32px;
}
.escr-global-nav .escr-globalnav-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    padding: 8px;
    margin-top: 24px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--text1);
    fill: var(--text1);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        fill 0.15s ease-in-out;
}
.escr-global-nav .escr-globalnav-icon:hover,
.escr-global-nav .escr-globalnav-icon:focus,
.escr-global-nav .escr-globalnav-icon[data-popper-shown] {
    background-color: var(--secondary-hover);
    color: var(--text1);
    fill: var(--text1);
}
.escr-global-nav .escr-globalnav-icon:active,
.escr-global-nav .escr-globalnav-icon-active {
    color: var(--tag-text-ondark);
    fill: var(--tag-text-ondark);
    background-color: var(--secondary);
}
.escr-global-nav input#escr-lightdark-switcher {
    display: none;
}
.escr-global-nav input#escr-lightdark-switcher + label {
    display: flex;
    cursor: pointer;
    padding: 0;
    margin: 28px 0 16px;
    background-color: var(--secondary-hover);
    width: 42px;
    height: 24px;
    border-radius: 16px;
}
.escr-global-nav input#escr-lightdark-switcher:checked + label {
    background-color: #d3d3d3;
}
.v-popper--theme-vertical-menu .v-popper__inner:has(.escr-tasks-menu) {
    top: 24px;
}

/* Root styles for the entire application. */
:root {
    /* main colors */
    --primary: #28a696;
    --tertiary: #5869fc;
    --alert: #e84f4f;
    /* button state colors */
    --primary-dark: #229082;
    --primary-darker: #1e8174;
    --primary-focus: rgb(40 166 150 / 50%);
    --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%);
    /* text on all filled buttons */
    --button-text: #ffffff;

    /* 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);

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

    /* z-index layers */
    --segmented-button-focus-z: 1;
    --table-actions-z: 2;
    --taggroup-overflow-z: 3;
    --sidebar-backdrop-z: 4;
    --sidebar-container-z: 5;
    --sidebar-z: 6;
    --modal-backdrop-z: 7;
    --modal-z: 8;
    --toast-z: 9;
}
.light-mode {
    /* button colors */
    --secondary: #1761b5;
    --secondary-dark: #14549d;
    --secondary-darker: #114b8d;
    --secondary-focus: rgb(23 97 181 / 50%);
    --secondary-hover: rgb(23 97 181 / 20%);
    /* light mode backgrounds */
    --background: #f0f0f0;
    --background1: #ffffff;
    --background2: #e9e9e9;
    --background2-dark: #cacaca;
    --background2-darker: #b5b5b5;
    --background2-focus: rgb(202 202 202 / 50%);
    --background3: #dfdfdf;
    /* modal backdrop */
    --modal-backdrop: rgb(0 0 0 / 10%);
    /* light mode text */
    --text1: #212323;
    --text2: #666768;
    --text3: #a7a8a9;
    --toast-text: #ffffff;
}
.dark-mode {
    /* button colors */
    --secondary: #4f96e8;
    --secondary-dark: #2b80e3;
    --secondary-darker: #1c72d6;
    --secondary-focus: rgb(79 150 232 / 50%);
    --secondary-hover: rgb(79 150 232 / 20%);
    /* dark mode backgrounds */
    --background: #212323;
    --background1: #2f3132;
    --background2: #3e4142;
    --background2-dark: #565a5b;
    --background2-darker: #666a6c;
    --background2-focus: rgb(86 90 91 / 50%);
    --background3: #383b3c;
    /* modal backdrop */
    --modal-backdrop: rgb(0 0 0 / 33%);
    /* dark mode text */
    --text1: #ffffff;
    --text2: #a7a8a9;
    --text3: #717373;
    --toast-text: #ffffff;
}

/* Site-wide styles */
.escr-body {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    height: 100vh;
}
.escr-body main {
    max-height: 100vh;
    overflow: auto;
    width: 100%;
}
.escr-body.escr-vue-enabled {
    background-color: var(--background);
}

/* Typography */
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    src: url(c6776e8228bee1ff1106209c1d7160aa.ttf);
}
@font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 400;
    src: url(7bd27fb6e2b69b430823e0f9718959c9.ttf);
}
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    src: url(bd8f66c37701f36cc43fb2eb4fb95228.ttf);
}
@font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 600;
    src: url(bcde7938e01d834c92b40ff0b34a6add.ttf);
}
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    src: url(87ca550c455e71127ce23fdd485a2f1e.ttf);
}
@font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 700;
    src: url(14165947d7485ee3e22fa281db942180.ttf);
}
/* reset default fonts to 14px normal noto sans, weight 400 */
.escr-body.escr-vue-enabled,
.escr-page input[type="text"],
.escr-sidebar-container input[type="text"],
.escr-global-nav,
.v-popper__inner {
    font-family: "Noto Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text1);
    font-style: normal;
}
.escr-body .v-popper__popper .v-popper__arrow-inner {
    border-color: var(--background1);
}
.escr-body .v-popper__popper .v-popper__arrow-outer {
    border-color: var(--background2);
}
#vue-global-nav {
    height: 100vh;
    min-width: 64px;
}
#vue-global-nav .escr-global-nav {
    height: 100vh;
}
.escr-page 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-page 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-page 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-page 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-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 {
    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;
}
.v-popper--theme-escr-tooltip .v-popper__arrow-inner {
    border-color: var(--background1);
}
.v-popper--theme-escr-tooltip .v-popper__arrow-outer {
    border-color: var(--background2);
}

/* spinner (adapted from bootstrap) */
@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}
.escr-spinner {
    display: inline-block;
    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;
}
.escr-spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
}

