/* =============================================================
   main.css
   Base styles for the DataBiz MIS platform.
   Each screen/app supplements these with its own stylesheet.

   TABLE OF CONTENTS
   ---------------------------------------------------------
   1.  CSS Variables
   2.  Reset / Base
   3.  Typography
   4.  Utilities
   5.  Icons
   6.  Layout: Page Shell
   7.  Layout: Global Nav
   8.  Layout: App Title Bar
   9.  Layout: Sidebar Nav
   10. Layout: App Nav Window
   11. Layout: Screen Title Area & Slide Window
   12. Layout: Footer
   13. Form Elements: Base
   14. Form Elements: Date Input
   15. Form Elements: Checkboxes — Legacy Sprite
   16. Form Elements: Checkboxes — Icon Input
   17. Form Elements: Checkbox List Labels
   18. Form Elements: Tags
   19. Form Elements: Dropdown List
   20. Form Elements: Multi Select (DS)
   21. Form Elements: Multi Selector
   22. Form Elements: Time
   23. Screen Controls (Detached)
   24. Filter
   25. Table List
   26. Notices & Attention Boxes
   27. Toast Notifications
   28. Error Content
   29. Popup / Dialog
   30. Datepicker
   31. Contextual Help
   32. Screen Top Nav
   33. Simplebar
   34. TinyMCE
   35. Responsive
   ============================================================= */


/* ============================================================
   1. CSS Variables
   ============================================================ */

:root {
    --negative: #FF7676;
    --positive: #5ABA40;
    --regular: #5D738A;
    --export: #5BB7DF;
    --negative-pale: #F3B1BC;
    --positive-pale: #B1D0A7;
    --regular-pale: #A6B4C3;
    --export-pale: #D9C3D9;
    --red-highlight: #FF6384;
    --red-bg: #FFBFCA;
    --red-bg-rgb: 255,191,202;
    --red-text: #AC4D5D;
    --red-alert: #E84C4C;
    --blue-bg: #EDFAFF;
    --blue-mid-bg: #D7E4F1;
    --blue-outline: #C2D9F1;
    --blue-dark: #26323E;
    --blue-rich: #5BB7DF;
    --blue-link: #3267bb;
    --yellow-bg: #FFFEEB;
    --yellow-slight-bg: #FDF6DA;
    --yellow-mid-bg: #FFF0CC;
    --yellow-outline: #ECD6A1;
    --yellow-text: #F4AE53;
    --yellow-beige: #FBFAF1;
    --orange-bg: #FF8024;
    --green-bg: #E8F0E5;
    --green-mid-bg: #D0DFCA;
    --green-outline: #B2C4AB;
    --green-text: #689659;
    --green-rich: #BDDE79;
    --green-rich-dark: #5B820B;
    --green-teal: #1D6A63;
    --green-teal-text: #0a3b51;
    --violet-bg: #FFF0FF;
    --violet-outline: #F2C1F2;
    --purple: #800080;
    --purple-bg: #BE80BE;
    --ns-cream-bg: #FBFAF1;
    --ns-green-dark: #1D6A63;
    --sidebar-width-min: 3em;
    --sidebar-width: 15em;
    --cursive: Merienda, "Open Sans", sans-serif;
}


/* ============================================================
   2. Reset / Base
   ============================================================ */

html, * {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    font-family: "Open Sans", sans-serif;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}


/* ============================================================
   3. Typography
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: "Signika Negative", sans-serif;
    font-weight: 400;
}
h1#screen-title {
    color: #fff;
    line-height: 1.2em;
    font-size: 2em;
    margin: 0;
    font-weight: normal;
}
p#screen-blurb {
    margin: 0;
    font-family: var(--cursive), sans-serif;
    font-size: 1.5em;
}
p.form-note {
    font-style: italic;
    font-family: serif;
}


/* ============================================================
   4. Utilities
   ============================================================ */

a {
    color: var(--blue-link);
}
.ds-hidden {
    display: none !important;
}
.negative {
    color: var(--negative);
}
.positive {
    color: var(--positive);
}
.light-panel {
    background: #fff;
    padding: 1em;
    border: 1px solid #1c3e24;
    border-radius: 0.5em;
    color: #000;
    box-shadow: 0 0 1em;
}
a.back-to-top {
    display: none;
    position: fixed;
    top: calc(100% - 7em);
    right: 0.5em;
    color: #031d1d;
    font-size: 1.5em;
    z-index: 101;
    cursor: pointer;
    background: transparent;
    width: 3em;
    height: 3em;
    line-height: 3em;
    border-radius: 50%;
    opacity: 0.75;
}
.back-to-top .fa-stack-2x {
    font-size: 1em;
}
.back-to-top .fa-stack-1x {
    font-size: 1em;
}


/* ============================================================
   5. Icons
   ============================================================ */

i, svg {
    display: inline-block;
    color: inherit;
}
i.icon-left + span, svg.icon-left + span {
    margin-left: 0.5rem;
}
i.icon-right + span {
    margin-right: 1rem
}
.left-iconed-input {
    position: relative;
}
.left-iconed-input input {
    padding-left: 2rem;
    max-width: 100%;
}
.left-iconed-input i, .left-iconed-input svg {
    position: absolute;
    font-size: 1.2em;
    top: 50%;
    margin-top: -0.5em;
    left: 0.6rem;
    color: #7cc4c8;
}
.right-iconed-input {
    position: relative;
}
.right-iconed-input input {
    padding-right: 2rem;
    max-width: 100%;
}
.right-iconed-input i, .right-iconed-input svg {
    position: absolute;
    font-size: 1.2em;
    top: 50%;
    margin-top: -0.5em;
    right: 0.6rem;
}


/* ============================================================
   6. Layout: Page Shell
   ============================================================ */

/* vertical flexbox (sticky footer) */
body {
    /*background: #327b42;*/ /*#27873D;*/
    color: #fff;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    font-size: 14px;
}
#content {
    flex: 1 0 auto;
    display: flex;
    flex-wrap: nowrap;
    background: linear-gradient(to top, #1e4d28 0%, #327b42 40%, #327b42 100%) no-repeat;
}
#screen-footer {
    z-index: 2;
    background: #021010;
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    justify-content: left;
}

/* horizontal flexbox (sidebar) */
.screen-wrap {
    z-index: 1;
    position: relative;
    flex-grow: 1;
    width: 100%;
}

header.screen-header {
    position: relative;
    z-index: 3;
    width: 100%;
}
header.screen-header.without-app-nav {
    padding-left: 0;
}
section.screen-content {
    min-width: 12rem;
    position: relative;
    z-index: 1;
    padding: 0.5rem 1rem 3rem;
}
.home-page .screen-content {
    padding: 0;
}
section.screen-content.with-app-nav {
    /*border-left: 1rem solid #27873d;*/
}

.screen-top-bar-element {
    height: 3em;
}
.screen-top-bar-element-inner {
    padding: 1em;
    line-height: 1em;
    display: flex;
    gap: 0 0.5em;
    align-items: center;
}

/* ============================================================
   7. Layout: Global Nav
   ============================================================ */

#global-nav {
    background: #022626;
    position: relative;
    color: var(--positive);
    text-align: center;
    z-index: 3;
}
#global-nav-list {
    list-style: none;
    background: #103535;
    width: 100%;
    text-align: left;
    position: absolute;
    top: 100%;
    margin: 0;
    display: none;
    flex-direction: column;
    padding: 0;
}
#global-nav-list > li {
    display: block;
    position: relative;
    padding: 0;
    cursor: pointer;
}
#global-nav-spacer {
    display: none;
    cursor: default;
}

#global-nav-list > li:not(#global-nav-spacer):hover {
    background: #035951;
}
#global-nav-spacer:hover {
    cursor: default;
}

#global-nav-list > li > a {
    color: #fff;
    text-decoration: none;
    background: transparent;
}

#global-nav-link-home a {
    line-height: 1.25em;
}
#global-nav-link-support {
    min-width: 8em;
}

/* public, non-logged in links */
#global-nav-link-admissions {
    background: #347d62;
}
#global-nav-link-admissions:hover {
    background: #449376;
}
#global-nav-link-login-parent {
    background: #ce925d;
}
#global-nav-link-login-parent:hover {
    background: #dda471;
}
#global-nav-link-login-staff {
    background: #b0715e;
}
#global-nav-link-login-staff:hover {
    background: #c68774;
}

#global-nav-link-org-selection {
    cursor: default;
    color: #777;
    padding: 1em;
}
#global-nav-org-selector {
    /* height: 1.5em; */
    /* line-height: 1.5em; */
    border: none;
    padding: 0;
    width: 14em;
    height: auto;
    line-height: inherit;
}
.with-app-nav #global-nav-list > li.home-link {
    display: none;
}

/* System updates bell icon */
#system-updates-cta {
    height: 3em;
}
#system-updates-icon {
    font-size: 0.3em;
}
#system-updates-cta [data-icon="bell"] {
    margin-left: -0.5em;
}
#system-updates-cta.all-read [data-icon="circle"] {
    display: none;
}
#system-updates-cta [data-icon="circle"] {
    color: red;
    font-size: 0.5rem;
    margin-left: -1em;
    margin-bottom: -0.5rem;
}

/* Support dropdown menu */
#global-nav-support-trigger {
    position: relative;
    color: #fff;
}
#global-nav-support-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.25em);
    left: 0.25em;
    padding: 1em;
    background: #fff;
    z-index: 3;
    box-shadow: 4px 4px 8px #000;
    border-radius: 3px;
    width: 20em;
    color: #000;
}
#global-nav-support-menu p {
    margin: 0 0 0.25em;
    text-align: justify;
    color: #666;
    line-height: 1.2em;
    font-size: 0.9em;
}
#global-nav-support-menu a {
    color: inherit;
    display: block;
}
.global-nav-support-contact-value {
    display: flex;
    align-items: center;
    gap: 0 0.5em;
    margin: 0.5em 0;
}
#global-nav-support-menu a.screenshare-link {
    margin: 0.5em 0;
    padding: 0.25em 0;
    display: flex;
    gap: 0 0.5em;
    align-items: center;
}
#global-nav-support-menu svg {
    color: var(--ns-green-dark);
}


#global-nav-trigger {
    display: block;
    width: 100%;
    cursor: pointer;
}
#global-nav-trigger .screen-top-bar-element-inner {
    justify-content: flex-end;
}

/* ============================================================
   8. Layout: App Title Bar
   ============================================================ */

.app-title-bar {
    text-align: left;
    padding: 0 0.5em;
    /*font-size: 0.8rem;*/
    background: #2b6738;
    color: #022626;
    text-transform: uppercase;
}
.org-guid-ctn {
    float: right;
    position: relative;
}
.org-guid-ctn-guid:hover {
    color: #aef9bf;
    cursor: pointer;
}
#org-details-expando {
    position: absolute;
    top: calc(100% + 0.5em);
    background: #fff;
    padding: 1em;
    right: 0;
    border-radius: 3px;
    box-shadow: 4px 4px 8px #000;
    text-transform: none;
}
#org-details-expando-flex-wrap {
    display: flex;
    justify-content: flex-start;
    gap: 1em;
    align-items: stretch;
}
#odp-crest-ctn {
    height: 8em;
}
#odp-crest-ctn img {
    height: 100%;
}
#odp-details-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#odp-org-header {
    margin-bottom: 1em;
}
#odp-org-name {
    margin: 0;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.2em;
    white-space: nowrap;
}
#odp-org-guid {
    margin: 0;
}
#odp-blurb {
    margin: 0;
    font-style: italic;
    font-size: 0.8em;
}
#odp-contact-details {
    margin-bottom: 2em;
}
#odp-contact-details > * {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
}
.odp-contact-detail-label {
    font-weight: bold;
}
#odp-contact-details a {
    color: inherit;
}


/* ============================================================
   9. Layout: Sidebar Nav
   ============================================================ */

nav.app-nav-ctn {
    z-index: 3;
    position: relative;
    flex-basis: var(--sidebar-width-min);
    background: #035951;
}

/* top-left home link */
#app-nav-home-link {
    background: #031d1d;
    text-align: center;
}
#app-nav-home-link > a {
    display: inline-block;
    color: #327b42;
}
#app-nav-home-link > a:hover {
    color: #27873d;
}
#app-nav-home-link > a > span {
    display: none;
}

#app-nav-sidebar-simplebar {
    overflow-x: hidden;
    margin-top: 3em;
}
#app-nav-sidebar-simplebar .simplebar-scrollbar::before {
    background: var(--regular);
}
#app-nav-intro {
    display: none;
}
#app-nav-sidebar {
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
li.app-nav-option {
    display: block;
    text-align: center;
    width: 100%;
}
.app-nav-option:hover {
    background: #cdeee3;
    /*border-right: 0.5em inset #94e1c8;*/
    box-shadow: 3px 3px 8px #103535;
}
.app-nav-option.current-app {
    background: var(--red-highlight);
    border-right: 0.5em solid var(--red-text);
    box-shadow: 3px 3px 8px #103535;
}
span.app-nav-option-trigger {
    display: flex;
    cursor: pointer;
    color: #fff;
    padding: 0.5em 1em;
    align-items: center;
    justify-content: center;
}
span.app-nav-option-trigger .fa-stack {
    font-size: 0.6em;
    top: -0.3em;
}
span.app-nav-option-trigger .fa-stack-1x {
    top: 0.75em;
    margin-left: 0.75em;
    color: #ff945b;
}
span.app-nav-option-trigger:hover {
    color: #404040;
}
.current-app span.app-nav-option-trigger:hover {
    color: inherit;
}
.app-nav-app-title {
    display: none;
    line-height: 1em;
}


/* ============================================================
   10. Layout: App Nav Window
   ============================================================ */

#app-nav-window {
    width: 225px;
    position: fixed;
    top: 6em;
    background: #fffde8;
    overflow: hidden;
    padding: 1em;
    opacity: 0;
    box-shadow: 4px 4px 8px #103535;
    min-height: 60vh;
    left: -400px;
    max-height: 75vh;
}
#app-nav-window-inner {
    font-size: 1em;
}
.app-nav-app-home {
    border-bottom: 2px solid #0a3b51;
    margin: -1em -1em 0;
    padding: 0.5em 2em 0.5em 0.5em;
}
.app-nav-window-app-title {
    cursor: default;
    line-height: 1.1em;
}
.close-app-nav {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    opacity: 0.4;
    padding: 0.5em;
}
.close-app-nav:hover {
    opacity: 1;
}
.app-nav > li.app-nav-back-link {
    display: block;
    margin-left: -1.5em;
    cursor: pointer;
    color: var(--purple);
}
.app-nav-back-link span {
    padding-left: 1em;
}
#nav-lists-simplebar {
    margin-top: 3em;
    max-height: calc(75vh - 6em);
}
.simplebar-scrollbar::before {
    background: var(--regular);
}
ul.app-nav {
    display: none;
    padding: 0 0 0 1.5em;
    list-style: outside disc;
    background: transparent;
    margin: 0;
}
ul.app-nav.current-app-nav {
    display: block;
}
.app-nav > li {
    line-height: 1.1em;
    min-height: 1.2em;
    cursor: default;
    margin-bottom: 0.75em;
    color: var(--green-teal-text);
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.app-nav > li.destination {
    margin-left: -1.25rem;
}
.app-nav > li a {
    text-decoration: none;
    color: inherit;
    order: 1;
}
.app-nav > li:hover > a {
    text-decoration: underline;
}
.destination-new-tab {
    margin-right: 1em;
    color: var(--purple-bg);
    font-size: 0.7em;
    order: 0;
}
.destination:hover .destination-new-tab {
    font-size: 1em;
    color: var(--purple);
    margin-right: 0.4em;
}
.app-nav > li.current-module-nav, .app-nav > li.current-view-nav {
    list-style: none;
    font-weight: bold;
}
.app-nav > li.module {
    list-style: none;
    margin-bottom: 1em;
}
.app-nav > li.module::before {
    content: "\f054";
    font-family: "Font Awesome 5 Pro", sans-serif;
    font-style: normal;
    text-decoration: inherit;
    color: var(--purple);
    position: absolute;
    top: 0;
    left: -1.5em;
    font-size: 0.9em;
    font-weight: bold;
}
.app-nav > li[data-get] > span {
    cursor: pointer;
}

/* split up testing menu */
.destination[data-dest="nsadmin-testing-othertestdashboard"],
.destination[data-dest="nsadmin-testing-stdotsimport"],
.destination[data-dest="nsadmin-testing-settings"] {
    padding-top: 1em;
    margin-top: 1em;
    border-top: 2px dashed var(--yellow-outline);
}


/* ============================================================
   11. Layout: Screen Title Area & Slide Window
   ============================================================ */

#screen-title-ctn {
    display: flex;
    align-items: stretch;
    margin: 0 0 0.5em;
    gap: 0.5em;
}
.home-page #screen-title-ctn
{
    margin: 0;
}
#screen-title-ctn-inner {
    flex-grow: 1;
}

.slide-window {
    position: fixed;
    top: 0;
    right: -27em;
    background: var(--yellow-bg);
    padding: 1em;
    z-index: 100;
    width: 100%;
    border-left: 1px solid #ccc;
    box-shadow: -0.5em -0.5em 1em #000;
    max-width: 25em;
    bottom: 0;
    color: #000;
}
.slide-window-controls {
    font-size: 0.6em;
    text-align: right;
    line-height: 1em;
    color: var(--regular);
    margin-bottom: 1rem;
}
.slide-window-controls > span {
    cursor: pointer;
}
.slide-window .inner {
    /*font-size: 0.8rem;*/
}


/* ============================================================
   12. Layout: Footer
   ============================================================ */

#footer-nav-spacer {
    display: none;
}
#screen-footer-inner {
    padding: 2rem 1rem 1rem;
    max-width: 60rem;
    margin: 0 auto;
    flex-grow: 1;
}
#screen-footer-segments {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: -1em;
}
#screen-footer-segments > div {
    margin: 0 0 1em 1em;
    flex-basis: 10em;
}
.footer-segment h6 {
    font-size: 1rem;
    font-weight: bold;
    margin: 0 0 0.5rem;
}
.footer-segment ul {
    padding: 0;
    margin: 0;
    list-style: none;
    /*font-size: 0.8rem;*/
}
.footer-segment li {
    display: block;
    margin: 0 0 0.5em;
}
.footer-segment a {
    display: block;
    text-decoration: none;
}
#company-info {
    /*font-size: 0.8rem;*/
    color: #76a66f;
    flex-grow: 1;
    min-width: 25em;
}
#company-info > h4 {
    margin: -0.2em 0 0.25em;
    font-size: 2em;
    line-height: 1em;
    border-bottom: 1px solid #035951;
    padding-bottom: 0.25em;
    color: #fff;
}
#company-info > p.company-name {
    font-size: 0.6em;
    margin: 0;
    line-height: 1.2em;
}
#company-info > p.address,
#company-info > p.vat {
    margin: 0.5em 0;
    line-height: 1.2em;
}
ul.contact-links {
    padding: 0;
    margin: 1em 0 0 0;
    list-style: none;
    color: #fff;
}
.contact-links > li {
    display: block;
    margin: 0 0 0.5em;
}
.contact-links span {
    display: inline-block;
    margin-right: 1em;
}
.contact-links span:after {
    content: ":";
}
.contact-links a {
    display: inline-block;
    text-decoration: none;
}


/* ============================================================
   13. Form Elements: Base
   ============================================================ */

.buttonset {
    overflow: hidden;
    padding-top: 1rem;
    text-align: right;
}
label {
    margin: 0.25em 0;
    display: block;
}
span.label-text {
    display: inline-block;
    line-height: 1.5em;
}
span.edit-parameter-values {
    color: #b9cce0;
    display: none;
    margin-left: 0.5em;
    cursor: pointer;
}
input, select, textarea {
    width: 100%;
    border: 1px solid var(--blue-outline);
    background: #fff;
    padding: 0 0.25em;
    height: 2em;
    line-height: 1.2em;
    border-radius: 3px;
    color: inherit;
    outline-color: var(--regular);
    max-width: 16rem;
}
textarea {
    padding: 0.25em 0.5em;
    font-size: 0.9em;
    color: #888;
}
select.select-positive {
    border: 1px solid var(--positive);
    background: #27873d;
    color: #ffffff;
    outline: none;
}
select.select-highlight {
    border: 1px solid var(--red-highlight);
    background: var(--red-highlight);
    color: #ffffff;
    outline: none;
}
select.select-highlight:disabled {
    background: #eee;
    border-color: #ccc;
    color: #777;
}
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    height: auto;
    vertical-align: middle;
}
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px #fff inset;
    -webkit-text-fill-color: #333;
}
button {
    line-height: 1.8em;
    padding: 0 0.75em;
    background: #ccc;
    border: 1px solid;
    border-radius: 3px;
    min-height: 2em;
    margin: 0;
    outline: none;
}
button.negative, button.positive, button.regular, button.export, button.action {
    border-color: transparent;
    color: #fff;
}
button.negative {
    background: var(--negative);
}
button.regular {
    background: var(--regular);
}
button.positive {
    background: var(--positive);
}
button.export {
    background: var(--export);
}
button.action {
    background: var(--purple-bg);
}
button.negative:disabled,
button.regular:disabled,
button.positive:disabled,
button.export:disabled,
button.action:disabled {
    background: #ccc;
    color: #777;
}
button:disabled {
    cursor: default;
}
.buttonset button {
    margin: 0 0 0 0.25rem;
}
.buttonset button:first-of-type {
    margin: 0 0 0 0;
}
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder {
    color: #777;
}


/* ============================================================
   14. Form Elements: Date Input
   ============================================================ */

.ds-date-ctn {
    display: flex;
    align-items: center;
    width: 100%;
}
.ds-date-input-datepicker-trigger {
    cursor: pointer;
    color: var(--purple);
    padding-left: 0.5em;
}
.ds-date-input-datepicker-trigger .ui-datepicker-inline {
    position: absolute;
    background: #fff;
    z-index: 99;
    padding: 1em;
    border: 1px solid var(--red-highlight);
    border-radius: 3px;
    box-shadow: 4px 4px 8px #888;
}
.ds-date-inputs {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--blue-outline);
    border-radius: 3px;
    flex-grow: 1;
}
.ds-date-inputs input {
    width: 1.5em !important;
    padding: 0 !important;
    min-width: auto !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
}
.ds-date-inputs input:focus {
    outline: none !important;
}
.ds-date-inputs input[data-segment="year"] {
    width: 2.75em !important;
}


/* ============================================================
   15. Form Elements: Checkboxes — Legacy Sprite
   ============================================================ */

/* Replace default checkbox/radio with sprite-sheet icons */
input[type="checkbox"]:not(.ms-checkbox):not(.not-fancy), input[type="radio"]:not(.not-fancy) {
    opacity: 0;         /*hide it visually*/
    z-index: -1;        /*avoid unintended clicks*/
    position: absolute; /*don't affect other elements positioning*/
}
input[type="checkbox"] + .checkbox-icon-ctn .checkbox-icon,
input[type="radio"] + .checkbox-icon-ctn .checkbox-icon {
    display: inline-block;
    width: 18px;
    height: 19px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}
input[type="checkbox"] + .checkbox-icon-ctn .checkbox-icon {
    background: url('images/check_radio_sheet.png') -39px top no-repeat;
}
input[type="checkbox"]:checked + .checkbox-icon-ctn .checkbox-icon {
    background:url('images/check_radio_sheet.png') -58px top no-repeat;
}
input[type="checkbox"]:disabled + .checkbox-icon-ctn .checkbox-icon {
    background: url('images/check_radio_sheet.png') -20px top no-repeat;
    cursor: default;
}
input[type="checkbox"]:disabled:checked + .checkbox-icon-ctn .checkbox-icon {
    background: url('images/check_radio_sheet.png') 0 top no-repeat;
}
input[type="radio"] + .checkbox-icon-ctn .checkbox-icon {
    background: url('images/check_radio_sheet.png') -77px top no-repeat;
}
input[type="radio"]:checked + .checkbox-icon-ctn .checkbox-icon {
    background:url('images/check_radio_sheet.png') -96px top no-repeat;
}
input[type="radio"]:disabled + .checkbox-icon-ctn .checkbox-icon {
    background: url('images/check_radio_sheet.png') -115px top no-repeat;
    cursor: default;
}
input[type="radio"]:disabled:checked + .checkbox-icon-ctn .checkbox-icon {
    background: url('images/check_radio_sheet.png') -134px top no-repeat;
}

.pretty-checkbox-ctn {
    cursor: pointer;
    font-size: 0.75em;
    vertical-align: top;
    margin-top: 0.33em;
}
.pretty-checkbox-ctn.pretty-radio {
    font-size: 1.25em;
}
.pretty-checkbox-ctn .fa-stack-1x {
    left: 0.25em;
    font-size: 1.5em;
    color: #4f98b5;
    top: -0.05em;
    visibility: hidden;
}
input[type="checkbox"]:checked + .pretty-checkbox-ctn .fa-stack-1x {
    visibility: visible;
}
input[type="radio"] + .pretty-checkbox-ctn .fa-dot-circle {
    display: none;
    color: #4f98b5;
}
input[type="radio"]:checked + .pretty-checkbox-ctn .fa-dot-circle {
    display: inline-block;
}
input[type="radio"]:checked + .pretty-checkbox-ctn .fa-circle {
    display: none;
}


/* ============================================================
   16. Form Elements: Checkboxes — Icon Input
   ============================================================ */

label.icon-input-label {
    display: inline-block;
    margin: 0;
    position: relative;
}
.icon-input-ctn {
    display: inline-block;
    font-size: 1em;
    margin: 0;
    width: 1.5em;
    cursor: pointer;
    vertical-align: middle;
}
.icon-input:disabled + .icon-input-ctn {
    opacity: 0.5;
}
.icon-input:focus + .icon-input-ctn svg:first-child path {
    fill: var(--regular);
}
.icon-input-ctn.pretty-radio {
    font-size: 1.25em;
}
.icon-input-ctn .fa-stack-1x {
    left: 0;
    top: -0.05em;
    font-size: 1.6em;
    color: #45cae7;
}
.icon-input-ctn .indeterminate {
    font-size: 1em;
}
.icon-input-ctn .fa-stack-1x path {
    stroke: black;
    stroke-width: 20;
}
.icon-input-ctn .indeterminate path {
    stroke: #45cae7;
    stroke-width: 50;
}
.icon-input-ctn.icon-radio .fa-stack-1x {
    left: 1px;
    top: -1px;
    font-size: 0.75em;
}
.icon-input-ctn .fa-stack-2x {
    font-size: 1em;
    width: 1.5em;
}
input.icon-input + .icon-input-ctn .checkmark {
    visibility: hidden;
}
input.icon-input + .icon-input-ctn .indeterminate {
    visibility: hidden;
}
input.icon-input:checked + .icon-input-ctn .checkmark {
    visibility: visible;
}
input.icon-input:indeterminate + .icon-input-ctn .indeterminate {
    visibility: visible;
}


/* ============================================================
   17. Form Elements: Checkbox List Labels
   ============================================================ */

label.checkbox-list-label {
    display: block;
    max-width: 30em;
    padding: 0.5em 3em 0.5em 0.5em;
    overflow: hidden;
    position: relative;
    background: #d7e4f1;
    margin: 0.25em 0 0 0;
    cursor: pointer;
}
.popup-content label.checkbox-list-label {
    /*font-size: 0.8em;*/
    padding: 0.25em 3em 0.25em 0.5em;
    text-align: left;
}
.checkbox-list-label span.checkbox-icon-ctn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5em 0.5em 0.5em 0.75em;
    bottom: 0;
    background: rgba(38, 50, 62,0.2);
}
.popup-content .checkbox-list-label span.checkbox-icon-ctn {
    padding: 0.3em 0.25em 0.25em 0.5em;
}
.popup-content .dialog-status-array {
    text-align: left;
    font-family: monospace;
    font-size: 10px;
    padding: 10px;
    background: #fff;
    margin: 0.5rem 0;
    color: red;
}
.popup-content .dialog-status-array pre {
    margin: 0;
}


/* ============================================================
   18. Form Elements: Tags
   ============================================================ */

.ds-tags-ctn {
    position: relative;
    display: block;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.ds-tag-lists-ctn {
    position: absolute;
    top: calc(100% - 0.25em);
    left: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    padding: 1.5em 1em 1em;
    box-shadow: 4px 4px 8px #aaa;
    display: none;
    min-width: 14em;
    z-index: 2;
    max-height: 15em;
    overflow-y: scroll;
}
.ds-tag-lists-toggle {
    display: block;
    position: absolute;
    top: 2px;
    right: 1em;
    font-size: 0.8em;
    cursor: pointer;
    color: var(--purple-bg);
}
.ds-tag-lists-ctn label {
    display: flex;
    width: 14em;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    cursor: pointer;
    padding: 2px;
}
.ds-tag-lists-ctn .label-text {
    color: #000 !important;
}
.ds-tag-lists-ctn label:hover {
    background: var(--blue-bg);
}
.ds-tag-lists-ctn .icon-input-ctn {
    font-size: 0.75em;
}
.ds-selected-tags-list {
    min-height: 2em;
    margin: 0 0 0 -1.5em;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}
.ds-selected-tags-list > li {
    display: inline-block;
    margin: 0 0 0.25em 1.5em;
    background: var(--blue-mid-bg);
    padding: 0 0.5em;
    position: relative;
    border: 1px solid transparent;
    border-radius: 3px;
    line-height: 1.5em;
    height: 1.75em;
}
.tag-toggle {
    position: absolute;
    top: -0.25em;
    right: -0.5em;
    background: #fff;
    height: 1em;
    line-height: 1em;
    width: 1em;
    text-align: center;
    border-radius: 1em;
    box-shadow: 1px 1px 4px #444;
    cursor: pointer;
    color: var(--purple-bg);
    font-size: 0.8em;
}


/* ============================================================
   19. Form Elements: Dropdown List
   ============================================================ */

.dropdown-list {
    position: relative;
    border-radius: 3px;
    border: 1px solid #c2d9f1;
    background: #fff;
    cursor: pointer;
    color: inherit;
    outline-color: var(--regular);
    height: 2em;
}
.dropdown-list > i, .dropdown-list > svg {
    position: absolute;
    z-index: 101;
    right: 0;
    top: 1px;
    bottom: 1px;
    width: 2em;
    text-align: center;
    border-left: 1px solid #c2d9f1;
    line-height: 2em;
    background: #fff;
}
.dropdown-list ul {
    position: absolute;
    margin: 0;
    padding: 0 0.25em;
    list-style: none;
    height: 2em;
    width: 100%;
    line-height: 1.2em;
    text-align: left;
    overflow: hidden;
}
.dropdown-list ul > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2em;
    padding: 0.4em;
    line-height: 1.2em;
    display: none;
}
.dropdown-list ul > *:first-child {
    display: block;
}


/* ============================================================
   20. Form Elements: Multi Select (DS)
   ============================================================ */

.ds-multi-select {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}
.ds-multi-select.w-btn {
    padding-right: 2.5em;
}
.ds-multi-select-label {
    border: 1px solid var(--blue-outline);
    border-radius: 3px;
    height: 2em;
    line-height: 2em;
    position: relative;
    padding-right: 3em;
    white-space: nowrap;
    padding-left: 0.5em;
    flex-basis: 100%;
    background: #fff;
    overflow: hidden;
}
.disabled .ds-multi-select-label {
    background: #eee;
    border-color: #ccc;
}
.ds-multi-add {
    width: 2em;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
}
.ds-multi-select-trigger {
    position: absolute;
    right: 0;
    line-height: 2em;
    height: 2em;
    padding: 0 0.5em;
    border-left: 1px solid var(--blue-outline);
    cursor: pointer;
    top: -1px;
    background: var(--blue-mid-bg);
}
.disabled .ds-multi-select-trigger {
    border-left: 1px solid #ccc;
    background: #ddd;
    cursor: default;
}
.ds-multi-select-expando {
    border: 1px solid var(--blue-outline);
    border-radius: 0 0 3px 3px;
    position: absolute;
    background: #fff;
    z-index: 3;
    top: 100%;
    left: 0;
    padding-bottom: 0.5em;
    display: none;
    width: 100%;
    min-width: 14em;
}
.ds-multi-select-ctas {
    color: var(--regular);
    font-size: 0.8em;
    display: flex;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;
    margin: 0 0 0 -1em;
    padding: 0.25em 1em;
}
.ds-multi-select-ctas > span {
    display: inline-block;
    cursor: pointer;
    margin: 0 0 0 1em;
}
.multi-select-list-simplebar {
    padding: 0.5em 1.5em 0.5em 0.5em;
    max-height: 15em;
    overflow-x: hidden;
    width: 100%;
}
.multi-select-list-simplebar .simplebar-scrollbar::before {
    background: var(--regular);
}
.ds-multi-select-list {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}
.ds-multi-select-optgroup {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0.5em 0;
    width: 100%;
}
.ds-multi-select-optgroup-list {
    list-style: none;
    padding: 0 0 0 0.5em;
    margin: 0;
    flex-basis: 100%;
    width: 100%;
}
.ds-multi-select-list > :first-child {
    margin-top: 0;
}
.ds-multi-select-optgroup > label > .label-text {
    font-weight: bold;
    color: var(--regular);
    cursor: pointer;
}
.ds-multi-select-optgroup > label.icon-input-label, .ds-multi-select-item > label.icon-input-label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    cursor: pointer;
    align-items: center;
    width: 100%;
}
.ds-multi-select-item:hover {
    background: var(--blue-mid-bg);
}
.ds-multi-select-optgroup > .icon-input-label > .label-text, .ds-multi-select-item .label-text {
    width: calc(100% - 2em);
    display: inline-block;
    line-height: 1.4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12em;
}
.ds-multi-select .icon-input-ctn {
    font-size: 0.6em;
    flex-basis: 2em !important;
    text-align: center;
}
.ds-multi-select-break hr {
    background: #ccc;
    border: none;
    height: 1px;
}


/* ============================================================
   21. Form Elements: Multi Selector
   ============================================================ */

.multi-selector-container {
    position: relative;
    z-index: 99;
    width: 100%;
    text-align: left !important;
}
.multi-selector-pseudo-select {
    border: 1px solid var(--blue-outline);
    background: #fff;
    height: 2em;
    border-radius: 3px;
    outline-color: var(--regular);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.multi-selector-pseudo-select.multi-selector-pseudo-select-disabled {
    background: #eee;
}
.multi-selector-list-count {
    line-height: 1.2em;
    flex-grow: 1;
    padding: 0 0.5em;
}
.multi-selector-list-toggle {
    padding: 0 0.5em;
    font-size: 0.7em;
}
.multi-selector-list-ctn {
    display: none;
    background: #fff;
    border: 1px solid #ccc;
    max-height: 20em;
    overflow-y: scroll;
    position: absolute;
    top: 100%;
    left: 0;
    border-radius: 3px;
    box-shadow: 1px 1px 3px #aaa;
}
.multi-selector-toggle-all-checkbox {
    padding: 0.25rem 0.35rem;
    font-size: 0.8em;
    cursor: pointer;
}
.multi-selector-select-all-toggle-ctn {
    padding: 0.25em 0.5em;
}
.multi-selector-select-all-toggle {
    cursor: pointer;
    font-size: 0.9em;
    text-decoration: underline;
    color: var(--blue-link);
    display: inline-block;
}
.multi-selector-label {
    padding: 0.25em 1.5em 0.25em 0.5em;
    border-bottom: 1px solid var(--blue-outline);
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}
.multi-selector-label > * {
    margin: 0 !important;
}
.multi-selector-label > .multi-selector-label-text {
    margin-left: 0.5em !important;
    white-space: nowrap;
}
.multi-selector-custom-checkbox-container {
    position: relative;
    display: flex;
    align-items: center; /* Align checkboxes vertically centered */
    margin-bottom: 8px; /* Adjust as needed */
}
.multi-selector-custom-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin-right: 8px;
    cursor: pointer;
    position: relative;
    background: #000;
}
.multi-selector-custom-checkbox::before {
    content: "\f00c";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
    display: none;
    color: #45cae7;
    font-size: 1.33em;
    text-shadow: 1px 0px 0px #000;
}
.multi-selector-custom-checkbox.checked::before {
    display: block; /* Display the checkmark when checked */
}
.multi-selector-list-count.multi-selector-selected-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   22. Form Elements: Time
   ============================================================ */

.time-wrap {
    vertical-align: middle;
}
.time-wrap:after {
    content: "";
    display: table;
    clear: both;
}
.time-wrap .label-text {
    display: inline-block;
    margin-right: 0.5em;
    float: left;
    line-height: 2em;
}
.time-wrap .select-ctn {
    display: inline-block;
    float: right;
    white-space: nowrap;
    width: 9em;
}
.time-wrap .select-ctn:after {
    content: "";
    display: table;
    clear: both;
}
.time-wrap .select-ctn select {
    width: 4em;
    margin: 0;
    float: left;
}
span.time-delimiter {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    float: left;
    vertical-align: middle;
    line-height: 2em;
    width: 1em;
}


/* ============================================================
   23. Screen Controls (Detached)
   ============================================================ */

.screen-controls.detached-controls {
    position: fixed;
    bottom: 0;
    padding: 1rem 2rem;
    background: #fff;
    left: 0;
    right: 0;
    text-align: right;
    box-shadow: 0 0 8px var(--regular);
    z-index: 100;
}


/* ============================================================
   24. Filter
   ============================================================ */

.filter-ctn {
    background: #d7e4f1;
    padding: 0.5rem 1rem;
}
.filter-active {
    overflow: hidden;
    text-align: center;
}
.filter-active label {
    display: inline-block;
    margin: 0 0.25em;
    width: 3.5em;
}
.filter-active span.label-text {
    display: block;
}


/* ============================================================
   25. Table List
   ============================================================ */

ul.table-list {
    padding: 0;
    list-style: none;
    margin: 0;
}
li.table-list-header {
    display: none;
    background: #ccdbea;
}
li.table-list-block:nth-child(odd) {
    background: #eacdf7;
}
li.table-list-block:nth-child(even) {
    background: #efdef7;
}
li.table-list-block.no-results {
    background: #fff;
    text-align: center;
}
ul.table-list-row {
    padding: 0.5rem;
    list-style: none;
}
ul.table-list-row:after {
    content: "";
    display: table;
    clear: both;
}
li.table-list-item {
    display: block;
    /*font-size: 0.9rem;*/
    line-height: 1.2em;
    padding: 0;
}
.table-list-item label {
    margin: 0;
}


/* ============================================================
   26. Notices & Attention Boxes
   ============================================================ */

.ds-attention-box {
    margin: 1em 0;
    position: relative;
    padding-left: 7em;
    border: 1px solid var(--blue-mid-bg);
    border-radius: 0.5em;
    background: var(--blue-bg);
}
.ds-attention-box.ds-medium {
    background: var(--yellow-bg);
    border-color: var(--yellow-mid-bg);
    color: var(--yellow-text);
}
.ds-attention-box.ds-high {
    background: var(--red-bg);
    border-color: var(--red-text);
    color: var(--red-text);
}
.ds-attention-tab {
    position: absolute;
    top: 50%;
    left: 0;
    width: 7em;
    text-align: center;
    padding: 0 1em;
}
.ds-attention-tab.w-title {
    top: 0;
}
.ds-attention-icon > svg {
    font-size: 3em;
    margin-top: -1.5em;
    opacity: 0.3;
}
.w-title .ds-attention-icon > svg {
    margin-top: 0.5em;
}
.ds-attention-title {
    display: block;
    line-height: 1.1em;
}
.ds-attention-content {
    padding: 1em;
    background: rgba(255,255,255,0.5);
    min-height: 4em;
}
.ds-attention-content > :first-child {
    margin-top: 0;
}
.ds-attention-content > :last-child {
    margin-bottom: 0;
}

.ds-notice {
    margin: 1rem 0;
    overflow: hidden;
    border: 1px solid;
}
.ds-notice > p {
    margin: 0 0.5em 0.5em;
}
.ds-notice > p.ds-notice-title {
    margin: 0 0 0.5em;
    padding: 0.25em 0.5em;
    line-height: 1.2em;
    overflow: hidden;
    border-bottom: 1px solid;
}
.ds-notice-title > i, .ds-notice-title > svg {
    float: right;
    line-height: 1.25em;
}
.ds-notice.ds-warning,
.ds-notice.ds-warning > p.ds-notice-title {
    border-color: red;
}
.ds-notice.ds-warning > p.ds-notice-title {
    background: pink;
}
.ds-notice.ds-info, .ds-notice.ds-info > p.ds-notice-title {
    border-color: #c2d9f1;
}
.ds-notice.ds-info > p.ds-notice-title {
    background: #dcebfb;
}
.ds-notice-inner {
    margin: 0;
    padding: 1em 1em 2em;
}
.ds-notice-inner > *:first-child {
    margin-top: 0;
}
.ds-notice-inner > *:last-child {
    margin-bottom: 0;
}
.ds-notice-inner > ul {
    padding: 0 0 0 1em;
}


/* ============================================================
   27. Toast Notifications
   ============================================================ */

ul#feedback-toasting-list {
    position: fixed;
    z-index: 999;
    top: 5rem;
    right: 0.5rem;
    padding: 0;
    list-style: none;
    margin: 0;
    min-width: 14rem;
    max-width: 25rem;
}
#feedback-toasting-list > li {
    display: block;
    width: 14em;
    /*font-size: 0.8rem;*/
    box-shadow: 4px 4px 8px #1a3321;
    padding: 0.5em 0.5em;
    line-height: 1.2em;
    cursor: pointer;
    margin-bottom: 0.5em;
}
#feedback-toasting-list > li.regular-toast {
    background: var(--blue-bg);
    border: solid var(--regular);
    color: var(--regular);
    border-width: 0 0 0 4px;
}
#feedback-toasting-list > li.positive-toast {
    background: var(--green-bg);
    border: solid var(--green-text);
    color: var(--green-text);
    border-width: 0 0 0 4px;
}
#feedback-toasting-list > li.negative-toast {
    background: var(--red-bg);
    border: solid var(--red-text);
    color: var(--red-text);
    border-width: 1px 1px 1px 1em;
    border-radius: 4px;
}


/* ============================================================
   28. Error Content
   ============================================================ */

.error-content {
    margin: 1rem;
    padding: 3rem 1rem;
    text-align: center;
}
.error-content h2 {
    margin: 0;
    line-height: 1.2em;
}
.error-content p {
    margin: 1rem 0 0;
    padding-bottom: 0.5rem;
}
span#error-param {
    font-weight: bold;
}
span#thrown-error {
    display: block;/*
    margin: 1rem 0 0;
    font-style: italic;
    font-family: serif;
    font-size: 0.9rem;*/
}


/* ============================================================
   29. Popup / Dialog
   ============================================================ */

.ui-widget-overlay {
    background: #689659 50% 50% repeat-x;
    opacity: .3;
    position: fixed;
    filter: Alpha(Opacity=30);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.popup {
    background: #fff;
}
.popup.ui-dialog {
    border-radius: 6px;
    border: 1px solid transparent;
    box-shadow: 4px 4px 8px #022626;
    padding: 0;
    font-family: inherit;
    background: #fff;
    color: #000;
}
.popup.popup-error.ui-dialog {
    border: 1px solid #882133;
    background: #dc2f4d;
}
.popup.ui-dialog .ui-dialog-titlebar {
    border-radius: 4px 4px 0 0;
    border: none;
    background: var(--blue-rich);
    color: #fff;
    font-weight: normal;
    font-family: inherit;
    line-height: 1.2em;
    padding: 1em;
    position: relative;
    margin: -1px -1px 0 -1px;
}
.popup.popup-error.ui-dialog .ui-dialog-titlebar {
    background: #882133;
    color: #fff;
}
.popup.ui-dialog .ui-dialog-titlebar-close {
    color: #fff;
    cursor: pointer;
    border: none;
    background: none;
    text-indent: 0;
}
.popup.ui-dialog .ui-dialog-title {
    line-height: 1.2em;
    float: none;
    width: 100%;
    white-space: normal;
    overflow: visible;
}
.popup.ui-dialog .ui-dialog-content {
    background: #fff;
}
.popup.popup-error.ui-dialog .ui-dialog-content {
    background: #dc2f4d;
}
.popup-content {
    text-align: center;
    padding: 1em;
}
.popup-error .popup-content {
    color: #fff;
}
.popup-content > *:last-child {
    margin-bottom: 0;
}
.popup-content > *:first-child {
    margin-top: 0;
}
.popup.ui-dialog .ui-dialog-buttonpane {
    text-align: center;
    margin-top: 0;
    background: #fff;
    border-radius: 0 0 4px 4px;
    padding: .3em 0.5em 0.5em
}
.popup.popup-error.ui-dialog .ui-dialog-buttonpane {
    background: #dc2f4d;
    border-radius: 0 0 4px 4px;
}
.popup.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
}
.popup.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em;
}
.popup.popup-error button.negative {
    background: #882133;
    color: #fff;
}
.popup.popup-error button.positive {
    background: var(--positive);
    color: #fff;
}
.popup-form-with-header {
    position: relative;
    padding-top: 5.5rem;
}
.popup-form-header {
    padding: 0.25em 0 0.75em;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* Revalidate popup */
#revalidate-popup .ui-dialog-titlebar {
    background: var(--blue-rich);
    padding: 1em;
    font-size: 1.2em;
}
#revalidate-popup label {
    margin: 0 0 2px -0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#revalidate-popup label > * {
    margin: 0 0 0 0.5em;
}
#revalidate-popup input {
    flex-basis: 14em;
}


/* ============================================================
   30. Datepicker
   ============================================================ */

.ui-datepicker-trigger {
    display: none;
}
div#ui-datepicker-div {
    background: #fff;
    border: 1px solid var(--red-highlight);
    margin-top: 0.25em;
    margin-left: -3.5rem;
    z-index: 102 !important;
    border-radius: 3px;
    box-shadow: 0.5em 0.5em 1em #4d4d4d;
    padding: 1em;
    width: auto;
}
.ui-datepicker-header {
    text-align: center;
    margin: -1em -1em 0;
    background: var(--red-highlight);
    color: #fff;
    border-radius: 2px 2px 0 0;
}
.ui-datepicker-header > a {
    cursor: pointer;
}
.ui-icon-circle-triangle-w,
.ui-icon-circle-triangle-e {
    color: #ffffff;
}
table.ui-datepicker-calendar {
    width: 100%;
    border: 1px solid #fff;
    font-size: 1em;
}
.ui-datepicker-calendar th {
    color: var(--red-highlight);
}
table.ui-datepicker-calendar tbody {
    border: 1px solid #ddd;
}
.ui-datepicker-calendar td, .ui-datepicker-calendar th {
    text-align: center;
    vertical-align: middle;
    width: 14.285% !important;
    border: 1px solid transparent;
    padding: 0.5em 0.25em 0.25em;
    font-weight: normal;
}
table.ui-datepicker-calendar thead th {
    border-bottom: 1px solid var(--red-bg);
}
.ui-datepicker-calendar td {
    border: 1px solid var(--red-bg);
}
.ui-datepicker-calendar td:hover {
    background: var(--negative-pale);
}
.ui-datepicker-calendar td span, .ui-datepicker-calendar td a {
    text-align: center;
}
#ui-datepicker-div .ui-datepicker-calendar a,
#ui-datepicker-div .ui-datepicker td a {
    text-decoration: none;
    text-align: center;
}
.ui-datepicker-calendar a {
    color: #000;
}
.ui-state-disabled {
    color: #aaa !important;
}
.ui-datepicker-today { /*today's date*/
    background: var(--yellow-mid-bg);
}
.ui-datepicker-current-day { /*currently selected date*/
    background: var(--red-bg);
}
.ui-datepicker td a.ui-state-active { /*currently selected date link*/
    color: #000;
}
a.ui-datepicker-prev {
    float: left;
}
a.ui-datepicker-next {
    float: right;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
}
span.ui-icon.ui-icon-circle-triangle-e {
    background: url(images/jquery_ui.png) -33px -2px no-repeat #fff;
    border: 1px solid #fff;
    border-radius: 8px;
}
span.ui-icon.ui-icon-circle-triangle-w {
    background: url(images/jquery_ui.png) -98px -2px no-repeat #fff;
    border: 1px solid #fff;
    border-radius: 8px;
}
.ui-datepicker .ui-datepicker-next-hover {
    top: 2px !important;
    right: 2px !important;
}
.ui-datepicker .ui-datepicker-prev-hover {
    top: 2px !important;
    left: 2px !important;
}


/* ============================================================
   31. Contextual Help
   ============================================================ */

#screen-context-help-ctn {
    display: flex;
    align-items: flex-end;
    position: relative;
    margin-left: auto;
}
#screen-context-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    padding: 0;
    border-radius: 50%;
    font-size: 1.1em;
    background: var(--green-teal);
}
#screen-context-help-btn:hover {
    background: #022626;
}
#kb-context-expando {
    position: absolute;
    top: calc(100% + 0.5em);
    right: 0;
    z-index: 200;
    width: 22em;
    background: #fff;
    border-radius: 3px;
    box-shadow: 4px 4px 8px #000;
    padding: 1em;
}
.kb-ctx-group {
    margin-bottom: 0.5em;
}
.kb-ctx-group-label {
    display: block;
    font-size: 0.72em;
    margin-bottom: 0.25em;
    color: #000;
}
.kb-ctx-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kb-ctx-group ul li a {
    font-size: 0.85em;
    color: var(--blue-link);
    text-decoration: none;
}
.kb-ctx-group ul li a:hover {
    text-decoration: underline;
}
.kb-ctx-no-results {
    font-size: 0.82em;
    color: var(--regular);
    margin: 0 0 0.5em;
}
.kb-ctx-browser-link {
    border-top: 1px solid var(--blue-outline);
    margin-top: 0.5em;
    padding-top: 0.5em;
}
.kb-ctx-browser-link a {
    font-size: 0.82em;
    text-decoration: none;
    display: flex;
    gap: 0.5em;
    align-items: center;
    color: #222;
}
.kb-ctx-browser-link a:hover {
    text-decoration: underline;
}


/* ============================================================
   32. Screen Top Nav
   ============================================================ */

#screen-top-nav {
    margin: 0 0 0.5em;
}
#screen-top-nav-flex-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1px 0.5em;
}
#screen-top-nav-flex-wrap > * {
    margin: 0;
}
#screen-top-nav-flex-wrap > a {
    display: inline-block;
    background: var(--green-teal);
    color: #fff;
    text-decoration: none;
    line-height: 1.6em;
    padding: 0.2em 1em;
    border-radius: 3px;
}


/* ============================================================
   33. Simplebar
   ============================================================ */

.simplebar-track.simplebar-vertical {
    width: 1em;
}


/* ============================================================
   34. TinyMCE
   ============================================================ */

.tox-promotion {
    display: none !important;
}
.tox .tox-edit-area::before {
    opacity: 1;
    border: none !important;
}
.mce-branding.mce-label {
    display: none;
}
.mce-container.mce-toolbar {
    border: solid #ccc;
    border-width: 0 0 1px 0;
}


/* ============================================================
   35. Responsive
   ============================================================ */

@media (min-width: 680px)
{
    /*footer*/
    .footer-cols > li {
        max-width: 25%;
    }
    #feedback-toasting-list > li {
        width: 24rem;
        font-size: 1em;
    }
}

@media (min-width: 720px)
{
}

@media (min-width: 800px)
{
}

@media (min-width: 880px)
{
    #global-nav-trigger {
        display: none;
    }
    #global-nav-list {
        display: flex;
        position: relative;
        flex-direction: row;
    }
    #global-nav-spacer {
        flex-grow: 1;
    }
    #system-updates-text {
        display: none;
    }

    .screen-top-bar-element-inner {
        gap: 0 0.25em;
    }
    #global-nav-support-trigger {
        gap: 0 0.5em;
    }
    #global-nav-link-org-selection .screen-top-bar-element-inner {
        padding: 0.8em 1em 0;
    }
}

@media (min-width: 1024px)
{
    /*.screen-wrap.with-app-nav {
        width: calc(100% - var(--sidebar-width));
    }*/
    nav.app-nav-ctn {
        flex-basis: var(--sidebar-width);
    }

    #app-nav-intro {
        display: block;
        margin: 0 0 1em 0;
        padding: 0.5em;
        line-height: 1.3em;
        font-weight: normal;
        border-bottom: 2px solid;
    }

    li.app-nav-option {
    }

    span.app-nav-option-trigger {
        text-align: left;
        justify-content: start;
    }
    .app-nav-option .app-nav-app-icon {
        margin: 0 1em 0 0;
        width: 1em;
    }
    .app-nav-app-title {
        display: inline-block;
    }

    .with-app-nav #footer-nav-spacer {
        display: inline-block;
        width: var(--sidebar-width);
    }
}