:root {
    --font-family: Roboto, Arial, Helvetica, sans-serif;
    --accent-color: #1a8e96;
    --hover-color: var(--accent-color);
    --hover-background-color: var(--hover-color);
    --hover-foreground-color: #fff;
    --hover-background-color-transparent: #1a8e9630;
    --hover-border-color: #117e86;
    --active-color: var(--hover-color);
    --active-background-color: var(--hover-background-color);
    --active-foreground-color: var(--hover-foreground-color);
    --active-border-color: var(--hover-border-color);
    --success-color: #0a8536; 
    --success-background-color: var(--success-color);
    --success-border-color: var(--success-color);
    --error-color: #b13636;
    --error-background-color: var(--error-color);
    --error-border-color: #a84040;
    --error-background-gradient: linear-gradient(to bottom, rgb(223 72 72 / 36%) 0%, rgba(255, 255, 255, 0) 100%);
    --input-error-border-color: #daa7a7;
    --input-error-background-color: #fff6f6;
    --input-focus-outline-color: #adc2d8;
    --emphasize-color: #e18a1e;
    --emphasize-background-color: var(--emphasize-color);
    --emphasize-border-color: var(--emphasize-color);
    --emphasize-background-gradient: linear-gradient(to bottom, rgb(255 185 91 / 58%) 0%, rgba(255, 255, 255, 0) 100%);
    --notice-background-color: #fffcc1;
    --state-new-color: #1989d4; /* state 1 */
    --state-pending-color: #ffe256; /* state 2 */
    --state-approved-color: var(--success-background-color); /* state 3 */
    --state-rejected-color: #da5e5e; /* state 4 */
    --state-cancelled-color: #c2cad2; /* state 5 */
    --state-moved-color: #874685;
    --state-temporarily-approved-color: #aacf98; /* state 7 */
    --navigation-background-color: #012538;
    --header-background-color: #004467;
    --search-form-background-color: #1c5978;
    --dashboard-background-color: #e6e8ea;
    --enrollment-state-new-color: var(--state-new-color);
    --enrollment-state-pending-color: var(--state-pending-color);
    --enrollment-state-approved-color: var(--state-approved-color);
    --enrollment-state-rejected-color: var(--state-rejected-color);
    --enrollment-state-cancelled-color: var(--state-cancelled-color);
    --enrollment-state-temporarily-approved-color: var(--state-temporarily-approved-color);
    --enrollment-draft-color: #ad13a8;
    --table-row-current-border-color: var(--success-border-color);
    --table-row-current-background-color: #eef3ef; /*#ebf1e5;*/
    --table-row-notice-border-color: #ffe256;
    --table-row-notice-background-color: #ffff0017;
    --table-row-hover-background-color: #dde3ea;
    --table-row-selected-background-color: #d1d8e0;
    --guide-background-color: var(--accent-color);
    --evaluation-result-unanswered-background-color: #f5f5f5;
    --evaluation-result-worst-background-color: var(--error-background-color);
    --evaluation-result-bad-background-color: var(--emphasize-background-color);
    --evaluation-result-neutral-background-color: #badc32;
    --evaluation-result-good-background-color: #6ebf5a;
    --evaluation-result-best-background-color: #080;
    --enrollment-graphs-neutral-background-color: #cccccc;
    --enrollment-graphs-new-background-color: var(--state-new-color);
    --enrollment-graphs-pending-background-color: var(--state-pending-color);
    --enrollment-graphs-approved-background-color: var(--state-approved-color);
    --enrollment-graphs-rejected-background-color: var(--state-rejected-color);
    --enrollment-graphs-cancelled-background-color: var(--state-cancelled-color);
    --enrollment-graphs-moved-background-color: var(--state-moved-color);
    --enrollment-graphs-temporarily-approved-background-color: var(--state-temporarily-approved-color);
    --switch-active-color: var(--state-new-color);
    --just-changed-info: 'Lige ændret';
}

@keyframes spin {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@media all {

    html {
        font-size: 90%;
        font-weight: 400;
    }

    html, td, input, button, select, textarea {
        font-family: var(--font-family);
    }

    body {
        padding: 0;
        margin: 0;
        font-size: 1em;
        background: #fff;
        overflow: hidden;
    }

    .noList, .noList > li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    input, select, textarea, button {
        font-size: 1em;
    }

    .clearFix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    .material-icons, .fa {
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 75, 'opsz' 24;
    }

    .material-icons-spinner {
        animation: spin 2s linear infinite;
    }

    .material-icons-filled {
        font-variation-settings: 'FILL' 1;
    }

    .fa-bold::before {
        content: '\e238';
    }

    .fa-italic::before {
        content: '\e23f';
    }

    .fa-list-ol::before {
        content: '\e242';
    }

    .fa-list-ul::before {
        content: '\e241';
    }

    .flex {
        display: flex;
        column-gap: .5rem;
        align-items: center;
        justify-content: flex-start;
    }

    .flex-vert {
        flex-direction: column;
        align-items: flex-start;
    }

    label > small {
        display: block;
        padding-top: .3em;
        color: #888;
        max-width: 90%;
    }

    label.after > small {
        max-width: none;
    }

    label.textareaLabel {
        width: auto;
        display: block;
    }

    input.textBox, textarea.textBox, select, .tablesorter input {
        padding: .5em .75em;
        border: solid 1px #ccc;
        width: 15em;
        border-radius: 5px;
    }

    input.textBox, textarea.textBox, select {
        width: calc(100% - 1.5em - 2px);
        max-width: 15em;
    }

    input[readonly] {
        opacity: .7;
        border-color: #e1e1e1;
        outline: none;
    }

    select {
        min-width: 25em;
        width: auto;
    }

    select.large {
        min-width: 31.5em;
    }

    select.small {
        min-width: 12em;
    }

    select.outOfRange {
        border: solid 1px var(--emphasize-border-color);
    }

    input.textBoxNumeric, input.small {
        max-width: 7em;
    }

    input.xsmall {
        max-width: 3em;
    }

    input[type=number].xsmall {
        max-width: 3.5em;
    }

    input.medium {
        max-width: 10.5em;
    }

    textarea.textBox {
        max-width: 30em;
        height: 5em;
        resize: vertical;
    }

    input.checkBox, input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        -webkit-appearance: none;
        border: solid 1px #bbb;
        background: #fff;
        border-radius: 2px;
        vertical-align: top;
        position: relative;
        top: -3px;
        cursor: pointer;
    }

    input.checkBox:checked::after, input[type="checkbox"]:checked::after {
        content: "✓";
        display: block;
        position: relative;
        font-size: 1rem;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 700;
        left: 2px;
        line-height: 1.155rem;
    }

    input.checkBox {
        margin-left: 12.25em;
    }

    table.dataTable .col input[type="checkbox"] {
        top: 0;
    }

    input[type="radio"] {
        -webkit-appearance: none;
        width: 15px;
        height: 15px;
        border: solid 1px #adadad;
        border-radius: 50%;
        line-height: 1.25em;
        position: relative;
        top: -2px;
        font-family: Arial, Helvetica, Sans-serif;
        font-size: 15px;
        cursor: pointer;
    }

    input[type="radio"]:checked::after {
        background: #636363;
        content: "";
        width: 7px;
        height: 7px;
        display: block;
        border-radius: 50%;
        transform: translateX(3px) translateY(3px);
    }

    input.checkBox:disabled, input[type="checkbox"]:disabled, input[type="radio"]:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    input.large {
        max-width: 30em;
    }

    .textBox.small + .textBox.medium {
        max-width: 21.1em;
    }

    textarea.xl {
        height: 12em;
    }

    textarea.xxl {
        height: 25em;
        max-width: 45em;
    }

    textarea.overAndUnder {
        clear: both;
        margin-top: 1em;
    }

    textarea.oneLine {
        height: 1.25em;
    }

    input.error, select.error, textarea.error {
        border-color: var(--input-error-border-color) !important;
        background: var(--input-error-background-color) !important;
    }

    input.warning {
        border-color: var(--emphasize-border-color);
    }

    input:focus, textarea:focus, select:focus {
        outline-color: var(--input-focus-outline-color);
    }

    button, .button {
        border: solid 1px #e1e6e8;
        padding: .5em 1em;
        background: #f1f2f3;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 1em;
        outline-color: var(--input-focus-outline-color);
        transition: border .1s ease;
        white-space: nowrap;
    }

    button.emphasized, .button.emphasized {
        border: solid 2px var(--active-border-color);
    }

    html.noTouch button:not(.disabled):not(:disabled):hover {
        background: var(--hover-background-color);
        color: #fff;
        border-color: var(--hover-border-color);
    }

    html.noTouch button.disabled:hover,
    html.noTouch button:disabled:hover {
        cursor: not-allowed;
    }

    html.noTouch button#toolbarButtondelete:not(.disabled):hover {
        background: var(--error-background-color);
        color: #fff;
        border-color: var(--error-border-color);
    }

    html.noTouch button.disabled, html.touch button.disabled, html.noTouch .button.disabled, html.touch .button.disabled {
        background: #fff;
        border-color: #fff;
        color: #777;
        cursor: default;
    }

    button.smallButton {
        padding: .35em 1em;
        margin-top: .5em;
        font-size: .9em;
    }

    button.iconButton {
        padding: .4em 1em;
        margin-bottom: .1em;
        vertical-align: middle;
    }

    button.iconButton i {
        vertical-align: middle;
    }

    /* toggle switch */

    .switch-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: .75rem;
    }

    .switch-wrapper + .switch-wrapper {
        margin-left: 1em;
    }

    .switch-wrapper * {
        box-sizing: border-box;
    }

    .switch-wrapper--side-by-side {
        flex-direction: row;
        align-items: center;
        gap: .5rem;
        margin: 0;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 2.4rem;
        height: 1.3rem;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch input::after {
        content: none;
    }

    .switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 1rem;
    }

    .switch-wrapper--inverted .switch .slider {
        background-color: #ffffff77;
    }

    .switch .slider:before {
        position: absolute;
        content: '';
        height: .9rem;
        width: .9rem;
        left: .2rem;
        bottom: .2rem;
        background-color: #fff;
        transition: .4s;
        border-radius: 50%;
    }

    .switch input:checked + .slider {
        background-color: var(--switch-active-color);
    }

    .switch input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    .switch input:checked + .slider:before {
        transform: translateX(1rem);
    }

    label.switch-caption {
        width: auto;
        font-size: .85rem;
        padding-top: .25rem;
        white-space: nowrap;
        cursor: pointer;
    }

    .switch-wrapper--side-by-side label.switch-caption {
        padding-top: 0;
    }

    label.switch-caption .short {
        display: none;
    }

    .clear {
        clear: both;
    }

    .pad {
        padding: 15px 2%;
    }

    a i.material-icons, button i.material-icons {
        font-size: 1.4rem;
    }

    .mainContent a {
        text-decoration: none;
        color: #212121;
    }

    .mainContent a.emph:hover {
        text-decoration: underline;
    }

    .mainContent.scrollContent.hasToolbar {
        top: 145px;
        padding: 1em 0 2em;
    }

    h3.indent {
        margin-top: 30px;
        margin-left: 2%;
    }

    form {
    }

    fieldset {
        border: none;
        border-radius: 3px;
        padding: 1em 2%;
        background: #fff;
    }

    body.overlay:before {
        content: '';
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.5);
        z-index: 10003;
    }

    #sideBar iframe.entityCreateFrame {
        border: none;
        appearance: none;
        width: 100%;
        height: calc(100% - 4px);
    }

    #sideBar fieldset {
        padding: 1em 20px;
    }

    legend {
        font-weight: 600;
        font-size: 1.2em;
        margin: 0 0 .5em -2px;
        text-transform: uppercase;
        color: #7e8387;
        display: none;
    }

    fieldset.enableLegend legend {
        display: block;
        float: left;
        width: 100%;
        padding-bottom: .75em;
        margin: 1em 0 1.5em -2px;
        border-bottom: solid 1px #ddd;
    }

    label {
        display: inline-block;
        font-size: 1em;
        width: 12em;
        vertical-align: top;
        padding-top: .65em;
    }

    form.overAndUnder label:not(.error), fieldset.overAndUnder label:not(.error), li.overAndUnder label:not(.error) {
        display: block;
        width: unset;
        margin-bottom: .5em;
    }

    label.after {
        margin-bottom: 0;
        margin-left: .25em;
        padding-top: 0;
        width: auto;
    }

    label.error {
        display: inline-block;
        font-size: smaller;
        background: var(--error-background-color);
        padding: .25em .5em;
        width: auto;
        color: #fff;
        margin-left: 1em;
        margin-top: .5em;
    }

    .guide {
        padding: .75rem 1.5rem;
        background: var(--guide-background-color);
        color: #fff;
        margin: 1.75em 2em 0;
        border-radius: 5px;
        font-size: .9em;
    }

    .guide.hiddenByStatus {
        visibility: hidden;
    }

    #sideBar form.sideBySide label.error {
        margin-left: calc(12rem + 3px);
    }

    #sideBar form .formList li:has(label.error){
        position: relative;
    }

    #sideBar form .formList li label.error {
        top: 6px;
        position: absolute;
        right: 0;
    }

    #sideBar textarea.xxl + label.error {
        margin-left: 0;
    }

    #sideBar form.overAndUnder label.error {
        margin-left: 0;
    }

    #sideBar #courseInstanceDayChangeTimeForm label.error {
        position: absolute;
    }

    #sideBar form.overAndUnder input.datePicker + label.error {
        margin-left: 1em;
    }

    #sideBar textarea.overAndUnder {
        display: block;
    }

    #sideBar textarea.overAndUnder + label.error {
        margin-left: 0;
    }

    #sideBar #textMessageForm .field label.error {
        margin-left: 0;
        margin-bottom: .5rem;
    }

    label > small {
        display: block;
        padding-top: .3em;
        color: #888;
        max-width: 90%;
    }

    .formList > li {
        padding: .5em 0;
    }

    .formList > li > label:not(.after) {
        font-weight: 500;
    }

    .formList > li > label > small {
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .formList.sideBySide li {
        display: inline-block;
        padding-right: 1em;
    }

    .formList.sideBySide li label {
        width: auto;
        margin-right: 1em;
    }

    .formList li.navigation {
        padding-top: 1.5em;
    }

    .formList li.navigation a {
        text-decoration: none;
        margin-right: 1em;
        padding: .5em;
        color: #212121;
        outline-color: var(--input-focus-outline-color);
    }

    .formList li.navigation button {
        min-width: 8em;
        margin-left: 12.25em;
        margin-right: 3em;
    }

    .formList li.navigation.noIndent button {
        margin-left: 0;
    }

    .formList li.navigation.navigationRight,
    .navigation.navigationRight { text-align: right; }

    .formList .radioList {
        display: inline-block;
        padding-top: .2em;
        margin-bottom: 1em;
    }

    .formList .radioList label.error {
        float: right;
    }

    .formList .radioList li {
        padding-bottom: 0;
        margin-left: -.35em;
    }

    .formList h3 {
        text-transform: uppercase;
        color: #7e8387;
        border-bottom: solid 1px #ddd;
        padding-bottom: .75em;
        margin: 1.5em 0;
    }

    .formList li:first-child h3 {
        margin-top: 1em;
    }

    .formList h3.guideModeHeading {
        margin-top: 0;
    }

    .formList h3.first {
        margin-top: .5em;
    }

    .formList li.conditional {
        display: none;
    }

    .formList li small.fieldInfo {
        display: block;
        margin: .5rem 0 0 12.5rem;
        line-height: 1.5em;
    }

    .formList li.dateAutoAdjusted::after {
        content: attr(data-adjustinfo);
        display: inline-block;
        margin-left: 1em;
        padding: .25em .5em;
        font-size: .9em;
        background: #fff7e7;
        border-radius: 3px;
        border: solid 1px var(--emphasize-border-color);
    }

    #sideBar .formList li.dateAutoAdjusted::after {
        margin: .5rem 0 0 0;
        display: block;
        width: fit-content;
    }

    .formList li.dateAutoAdjusted input.datePicker {
        border: solid 1px var(--emphasize-border-color);
    }

    .formList li p.info {
        margin-left: 12.25rem;
        font-size: .9em;
    }

    form div.status {
        position: fixed;
        top: 105px;
        padding: .5em 1em;
        background: #dadada;
        display: none;
        color: #111;
        border-radius: 3px;
        box-shadow: #fff 0 0 15px 10px;
        z-index: 10007;
    }

    .loginpage form div.status {
        position: static;
        margin-top: 2em;
    }

    main.chromeless form div.status {
        top: 25px;
    }

    form#courseInstanceDatesForm div.status {
        z-index: 10010;
    }

    form div.status.noIndent {
        margin-left: 0;
    }

    form div.status.success {
        background: var(--success-background-color);
        color: #fff;
    }

    form div.status.error {
        background: var(--error-background-color);
        color: #fff;
    }

    form .formNotice {
        margin: 0 0 0 .5em;
        display: inline-block;
        padding: .5em;
        background: var(--notice-background-color);
    }

    form .field {
        display: inline-block;
        width: 30em;
        max-width: 96%;
    }

    form .fieldText {
        display: inline-block;
        width: calc(100% - 1.5em - 2px);
        max-width: 15em;
        padding: .5em .75em;
        border: solid 1px white;
    }

    form .field.wide {
        width: unset;
    }

    form .field .fieldRow {
        display: flex;
        align-items: center;
    }

    form .field .fieldRow label.error {
        margin-top: 0;
        order: 3;
    }

    form .field .fieldRow + .fieldRow {
        margin-top: .25rem;
    }

    form .field .fieldRow small {
        margin-left: .25rem;
    }

    form .field .fieldRow label.error + small {
        order: 2;
    }

    form .charCountWrapper {
        display: block;
        font-size: .9em;
    }

    form .charCount {
        display: inline-block;
        background-color: #efefef;
        padding: .25em;
    }

    form .charCount.maxed {
        background-color: var(--error-background-color);
        color: white;
    }

    form .filePicker {
    }

    form .filePicker .preview {
        padding: .35em;
        border: solid 1px #e1e1e1;
        max-width: 12em;
        max-height: 11em;
        min-height: 6em;
        text-align: center;
        position: relative;
    }

    form .filePicker .preview img {
        display: block;
        max-height: 6em;
        margin: 0 auto;
        max-width: 100%;
    }

    form .filePicker .preview .remove {
        position: absolute;
        bottom: .45em;
        right: .45em;
        color: white;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background-color: var(--error-background-color);
        opacity: .8;
    }

    form .filePicker .preview .remove i {
        font-size: 1.2em;
        display: inline-block;
        vertical-align: middle;
        line-height: 26px;
    }

    form .filePicker .preview:hover .remove {
        opacity: 1;
    }

    form .filePicker .upload {
        display: inline-block;
        width: 12em;
        height: 6em;
        text-align: center;
        border: solid 1px #e1e1e1;
        color: #999;
        line-height: 6em;
    }

    form .filePicker .upload i {
        font-size: 2em;
        display: inline-block;
        vertical-align: middle;
    }

    form .filePicker .preview a .file {
        font-size: 2.4em;
        color: #777;
        margin-top: .45em;
    }

    form .filePicker .preview a span {
        display: block;
        width: 100%;
        overflow: hidden;
        font-size: .75em;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    form .CodeMirror {
        display: inline-block;
        width: 50em;
        margin-top: .5em;
        border: solid 1px #ccc;
    }

    form .fieldLockTrigger {
        display: inline-block;
        margin-left: .25em;
        vertical-align: middle;
        cursor: help;
        color: #999;
    }

    form .fieldLockTrigger:hover {
        opacity: 1;
        color: #999 !important;
    }

    form .formList .formInputNote {
        display: block;
        margin-left: 12.25rem;
        margin-top: .5rem;
    }

    form select.required.error + label.error {
        display: none !important;
    }

    form select.required.error + label.error + .chosen-container > .chosen-choices {
        border: solid 1px var(--input-error-border-color);
    }

    .pickmeup {
        z-index: 10006 !important;
    }

    .searchBox {
        border-bottom: solid 1px #ddd;
        margin-bottom: 1em;
        padding-bottom: 1em;
    }

    .searchBox .formList li {
        float: left;
        margin-right: 1em;
    }

    .searchBox label {
        display: block;
        padding: 0 0 .5em;
    }

    .searchBox .formList li.navigation button {
        min-width: 8em;
        margin: .8em 0 0;
    }

    #courseLocationForm .button i,
    #btnSyncTitle i,
    #btnSetEndDate i {
        vertical-align: middle;
        position: relative;
        margin-top: -2px;
    }

    #courseLocationForm .button[disabled],
    #btnSyncTitle[disabled] {
        opacity: .5;
        cursor: not-allowed;
        pointer-events: none;
    }

    #sideBar #newJobConsultantForm div.error {
        color: var(--error-color);
        border: solid 1px var(--error-border-color);
        padding: 1em;
        margin-bottom: 1em;
        display: none;
    }

    #mainNavMobile {
        display: none;
    }

    #mainNav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1002;
        width: 100px;
        background: var(--navigation-background-color);
    }

    .singleSectionMode #mainNav {
        display: none;
    }

    #mainNav a {
        display: block;
        text-align: center;
        color: #ffffffc2;
        text-decoration: none;
        border-bottom: solid 1px rgba(255,255,255,.15);
    }

    #mainNav li:first-of-type a {
        border-top: solid 1px rgba(255,255,255,.15);
    }

    #logoLink {
        height: 90px;
    }

    #mainNav ul li a {
        padding: 1.3em 15px;
        transition: color .2s ease-in;
    }

    html.noTouch #mainNav:hover ul li a {
        color: #fff;
    }

    #mainNav ul li a.active, html.noTouch #mainNav ul li a:hover {
        padding-left: 10px;
    }

    #mainNav ul li a i.material-icons {
        font-variation-settings: 'wght' 200, 'GRAD' 50;
    }

    #mainNav ul li a.active i.material-icons {
        font-variation-settings: 'FILL' 1;
    }


    #mainNav ul li a i {
        font-size: 2.1em;
    }

    #mainNav ul li a span {
        display: block;
        text-align: center;
        font-size: .75em;
        padding-top: .2em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    #mainNav ul {
        max-height: calc(100% - 88px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    #mainNav ul::-webkit-scrollbar {
        width: 4px;
        background-color: rgba(255,255,255,0.75);
        -webkit-border-radius: 2px;
    }

    #mainNav ul::-webkit-scrollbar:hover {
        background-color: rgba(255,255,255,0.8);
    }

    #mainNav ul::-webkit-scrollbar-thumb {
        max-height: 5em;
    }

    #mainNav ul::-webkit-scrollbar-thumb:vertical {
        background: rgba(0,0,0,0.5);
        -webkit-border-radius: 2px;
    }

    #mainNav ul::-webkit-scrollbar-thumb:vertical:active {
        background: rgba(0,0,0,0.61);
        -webkit-border-radius: 2px;
    }

    main.dashboard {
        background: var(--dashboard-background-color);
    }

    .dashboardBox .header {
        padding: 0 2rem;
        margin-bottom: .5rem;
    }

    .dashboard main .header:first-child h1 {
        width: 100%;
        float: none;
        max-width: none;
    }

    .dashboard main .header:first-child h1 i {
        position: static;
        top: auto;
    }

    .dashboard main .header:first-child h1 span {
        float: none;
        display: inline-block;
        margin-left: .35rem;
    }


    .dashboardBox .header.subHeader {
        padding: 0 2rem;
        border-radius: 6px 6px 0 0;
    }

    .dashboard .mainContent {
        padding: 1.5rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .dashboard .column {
    }

    .dashboard .mainColumn {
        flex: 66.66%;
        max-width: 66.66%;
        display: flex;
        padding-right: .5rem;
        flex-wrap: wrap;
        align-items: stretch;
        flex-direction: row;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .dashboard .asideColumn {
        flex: 33.33%;
        max-width: 33.33%;
        padding-left: 1rem;
        box-sizing: border-box;
    }

    .dashboard .mainColumn .column {
        flex: 50%;
        max-width: 50%;
        box-sizing: border-box;
    }

    .dashboard .mainColumn .column:first-of-type {
        padding-right: 1rem;
    }

    .dashboard .mainColumn .column:last-of-type {
        padding-left: .5rem;
    }

    .dashboardBox {
        align-self: auto;
        padding: 0;
        margin-bottom: 1.25rem;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 0 8px -4px rgb(0 0 0 / 35%);
    }

    .dashboardBoxContent {
        padding: 0 2rem 1.5rem;
    }

    .dashboardBoxContent em {
        font-size: .9em;
    }

    .checkListBox .dashboardBoxContent {
        max-height: none;
    }

    .dashboardHeaderContent {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        justify-content: center;
        height: 100%;
    }

    .dashboardHeaderContent h1.firstHeader {
        position: static;
    }

    .dashboard #headerSwitchesWrapper {
        color: #fff;
        display: flex;
        gap: 1rem;
    }

    .dashboard #primaryAdministratorToggle {
        color: inherit;
    }

    .dashboard #primaryAdministratorToggle i {
        vertical-align: middle;
    }

    .dashboard #primaryAdministratorToggle label {
        width: auto;
        margin-left: .1em;
        vertical-align: middle;
        padding-top: 0;
        font-size: .9em;
        cursor: pointer;
    }

    #sectionTree {
        position: absolute;
        top: 0;
        left: 100px;
        bottom: 32px;
        z-index: 5;
        background: #fff;
        border-right: solid 1px #ddd;
    }

    #sectionTree.smallFont a.item {
        font-size: .85em;
    }

    .singleSectionMode #sectionTree {
        left: 0;
    }

    #sectionTree .treeHeader {
        position: relative;
        z-index: 5;
    }

    #sectionTree.narrow {
        width: 280px;
    }

    #sectionTree > ul {
        padding: 15px 5px;
        overflow: auto;
        position: absolute;
        width: 100%;
        bottom: 0;
        top: 88px;
        box-sizing: border-box;
        z-index: 5;
        background: white;
    }

    #sectionTree > ul li {
        display: block;
    }

    #sectionTree > ul div.clearFix {
        padding: .1em;
        border-radius: 4px;
    }

    #sectionTree > ul ul div.clearFix {
        padding-left: 4em;
    }

    #sectionTree > ul ul ul div.clearFix {
        padding-left: 5.75em;
    }

    html.noTouch #sectionTree > ul div.clearFix:not(.active):hover {
        background: var(--hover-background-color-transparent); /*#f8f8f8;*/
        color: #000;
    }

    #sectionTree > ul li a {
        display: block;
        padding: .25em;
        color: inherit; /*#333;*/
        text-decoration: none;
        float: left;
    }

    #sectionTree > ul li a.item {
        min-width: 200px;
        margin-left: 1.75em;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #sectionTree > ul ul li a.item {
        max-width: 85%;
    }

    #sectionTree > ul li.has-children a.item {
        margin-left: 0;
    }

    #sectionTree > ul li a.more {
        float: right;
        padding: .25em .5em;
        display: none;
        border-radius: 4px;
    }

    #sectionTree > ul li div.clearFix:hover a.more {
        display: block;
    }

    #sectionTree > ul li div.clearFix:hover a.more:hover {
        background: var(--hover-background-color); /*#fff;*/
        color: var(--hover-foreground-color);
        cursor: pointer;
    }

    #sectionTree > ul li div.clearFix.active {
        background: var(--active-background-color); /* #F1F2F3;*/
        color: var(--active-foreground-color);
    }

    #sectionTree > ul li a.item i {
        margin-right: 10px;
        vertical-align: middle;
        color: inherit; /*#5A6169;*/
    }

    #sectionTree > ul li a.item span:not(.toggler) {
        display: inline;
        vertical-align: middle;
    }

    #sectionTree > ul li a.item .toggler i {
        margin-right: 0;
        margin-left: 5px;
    }

    #sectionTree > ul li a.item .toggler-disabled {
        opacity: .25;
    }

    #sectionTree > ul li.empty .toggler {
        visibility: hidden;
    }

    #sectionTree > ul li a.more i {
        vertical-align: middle;
    }

    #sectionTree > ul li.has-children > ul {
        display: none;
    }

    #sectionTree > ul li.has-children.expanded > ul {
        display: block;
    }

    #sectionTree > ul li.has-children.expanded .toggler i {
        position: relative;
        color: transparent;
    }

    #sectionTree > ul li.has-children.expanded .toggler i::before {
        content: 'arrow_drop_down';
        position: absolute;
        left: 0;
        top: 0;
        color: #5A6169;
    }

    .template1062 #sectionTree > ul > li {
        margin-bottom: .5em;
    }

    #sectionTree #treeFilterForm {
        position: absolute;
        left: 0;
        right: 0;
        top: 88px;
        z-index: 100001;
        background-color: #F9FAFB;
        padding: .25rem .65rem;
        border-bottom: solid 1px #CFD7E0;
    }

    #sectionTree #treeFilterForm input {
        border: none;
        background-color: transparent;
        max-width: none;
        width: 100%;
    }

    #sectionTree #treeFilterForm + .navList {
        top: 125px;
    }

    #sectionTree .navList li.filtered {
        display: none;
    }

    #sectionTree > .navList li.noResults {
        padding: .5rem 1.1rem;
    }

    .treeMenu {
        display: none;
        position: absolute;
        top: 0;
        left: 371px;
        bottom: 0;
        width: 300px;
        background: #fff;
        z-index: 4;
        border-right: solid 1px #ddd;
        box-shadow: rgba(0,0,0,.1) 4px 0 8px 0;
    }

    .treeMenus.narrow .treeMenu {
        left: 291px;
    }

    .treeMenu > ul {
        margin: 15px;
    }

    .treeMenu > ul li {
        display: block;
    }

    .treeMenu > ul li a {
        display: block;
        padding: .5em;
        color: #333;
        border-radius: 4px;
        text-decoration: none;
    }

    html.noTouch .treeMenu > ul li a:hover {
        background: var(--hover-background-color); /*#f8f8f8;*/
        color: var(--hover-foreground-color);
    }

    .treeMenu > ul li a i {
        vertical-align: middle;
        margin-right: 10px;
        color: inherit;
    }

    .treeMenu > ul li a span.confirm {
        display: none;
    }

    body.users #sectionTree .userAnonymizationSuggestion {
        padding-top: 1rem;
        margin-top: 1rem;
        border-top: solid 1px #e1e6e8;
    }

    .header {
        height: 88px;
        text-align: left;
        padding: 0 2rem;
        background: var(--header-background-color);
    }

    .header.mainHeader {
        position: relative;
    }

    .header h1 {
        margin: 0;
        font-size: 1.2em;
        font-weight: 700;
        text-transform: uppercase;
        color: #fff;
        position: relative;
        top: 2em;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .column .header h1 i {
        float: left;
        margin-right: .5em;
        color: #4e4e4e;
        position: relative;
        top: -1px;
    }

    .header.subHeader {
        height: 40px;
        background: #fff;
        padding: 0 0 0 10px;
    }

    .header.subHeader h1 {
        top: .85em;
        text-transform: none;
        font-size: 1.4em;
        font-weight: 400;
        color: #222;
        float: left;
    }

    .header.subHeader a {
        color: #333;
        text-decoration: none;
        font-size: .9em;
        float: right;
        margin: 1.9em 0 0;
        max-width: 6em;
        overflow: hidden;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .header h1 span.number::before {
        content: ' (';
    }

    .header h1 span.number::after {
        content: ')';
    }

    ul.breadcrumbList {
        font-size: 1.2em;
        font-weight: 700;
        text-transform: uppercase;
        position: relative;
        top: 2em;
    }

    ul.breadcrumbList li {
        display: inline-block;
    }

    ul.breadcrumbList li a {
        display: inline-block;
        text-decoration: none;
        color: #ffffffb8;
    }

    ul.breadcrumbList li a i {
        position: relative;
        top: 2px;
    }

    ul.breadcrumbList li a[href] {
        color: #fff;
    }

    ul.breadcrumbList li:not(:last-of-type) a:after {
        content: "/";
        display: inline-block;
        width: 1em;
        text-align: center;
        vertical-align: middle;
    }

    ul.breadcrumbList li a span {
        display: inline-block;
        max-width: 240px;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    html.noTouch ul.breadcrumbList li a[href]:hover {
        color: #ffffffb8;
    }

    ul.breadcrumbList .breadcrumbHelpTrigger {
        vertical-align: middle;
        margin-left: .25rem;
    }

    ul.toolList {
        padding: 15px 2% 0;
        margin-bottom: 1.5em;
        top: 78px;
        transition: top ease-in-out .2s;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        gap: .7em;
    }

    ul.toolList li.custom {
        display: inline-flex;
        align-items: center;
        gap: .25em;
    }

    ul.toolList li select {
        margin-right: 1em;
    }

    ul.toolList li em {
        display: inline-block;
        margin-right: 1em;
    }

    ul.toolList li input[type="checkbox"] {
        position: relative;
        top: -.15em;
    }

    ul.toolList li.custom input[type="checkbox"] {
        top: 0;
    }


    ul.toolList li label {
        padding-top: 0;
    }

    main > ul.toolList {
        margin: 0;
        border-bottom: solid 1px #eee;
        padding: .75em 2%;
    }

    ul.toolList button {
        margin-right: 0;
    }

    ul.toolList .group > button:not(.disabled):hover {
        opacity: .8;
        background-color: #f1f2f3;
        border-color: #e1e6e8;
        color: inherit;
    }

    ul.toolList .group > button {
        padding-right: .65em;
    }

    ul.toolList .group > button:after {
        content: '\e5cf';
        display: inline-block;
        margin-left: .25em;
        font-size: 1.1rem;
        position: relative;
        top: 3px;
        font-weight: 600;
        font-family: 'Material Symbols Outlined';
        line-height: 1em;
    }

    ul.toolList .group.active > button:after {
        transform: rotate(-180deg) translateY(2px);
    }

    ul.toolList .group .groupButtons {
        display: none;
        position: absolute;
        background-color: white;
        border-radius: 5px;
        width: 100%;
        max-width: 15em;
        margin-top: .25em;
        z-index: 10001;
        box-shadow: rgba(0,0,0,.15) 2px 5px 10px 0;
    }

    ul.toolList .group .groupButtons button {
        display: block;
        width: 100%;
        border-bottom: none;
        border-radius: 2px;
        text-align: left;
        background: #fff;
    }

    ul.toolList .group .groupButtons > button:first-child {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    ul.toolList .group .groupButtons > button:last-child {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    ul.toolList .group.active > .groupButtons {
        display: block;
    }

    ul.toolList li form {
        border-right: solid 1px #ddd;
        margin-right: 1em;
        padding-right: 1em;
    }

    ul.toolList li form .formList.sideBySide label {
        vertical-align: text-bottom;
    }

    ul.toolList li form .formList.sideBySide > li {
        padding: 0;
    }

    ul.toolList .nestedGroup {
        position: relative;
        anchor-name: --nested-group-anchor;
    }

    ul.toolList .nestedGroup > button {
        position: relative;
    }

    ul.toolList .nestedGroup > button::after {
        content: '+';
        position: absolute;
        right: .75rem;
        width: .5rem;
        text-align: center;
        font-size: 0.8em;
        display: flex;
        top: 0;
        align-items: center;
        bottom: 0;
        justify-content: center;
        height: 100%;
    }

    ul.toolList .nestedGroup .groupButtons button {
        border-radius: 0 !important;
    }

    ul.toolList .nestedGroup .groupButtons {
        display: none;
        position-anchor: --nested-group-anchor;
        position: fixed;
        position-try-fallbacks: --nested-group-anchor-left;
        top: 0;
        left: 100%;
        top: anchor(top);
        left: anchor(right);
        margin-top: -1px;
    }

    ul.toolList .wrappedButtonsContainer {
        position: relative;
        padding-left: 2rem;
    }

    ul.toolList .wrappedButtonsContainer .wrappedButtonsTrigger {
        aspect-ratio: 1;
        padding: .25rem;
        display: flex;
        border-radius: 50%;
        text-decoration: none;
        color: inherit;
    }

    ul.toolList .wrappedButtonsContainer .wrappedButtonsTrigger i {
        line-height: normal;
        display: flex;
        align-items: center;
    }

    ul.toolList .wrappedButtonsContainer .wrappedButtonsList,
    ul.toolList .wrappedButtonsContainer .wrappedButtonsList > li {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    ul.toolList .wrappedButtonsContainer .wrappedButtonsList {
        position: absolute;
        right: 0;
        z-index: 10002;
        background-color: white;
        padding: .75em;
        box-shadow: rgba(0, 0, 0, .15) 2px 5px 10px 0;
        margin-top: .75rem;
    }

    ul.toolList .wrappedButtonsContainer .wrappedButtonsList > li + li {
        margin-top: .5rem;
    }

    ul.toolList .wrappedButtonsContainer .wrappedButtonsList .btn {
        width: 100%;
    }

    ul.toolList .wrappedButtonsContainer .wrappedButtonsList .nestedGroup > .btn {
        padding-right: 1.75rem;
    }

    ul.toolList .wrappedButtonsContainer .wrappedButtonsList .groupButtons {
        max-width: none;
        right: 0;
        width: fit-content;
        min-width: 100%;
    }

    ul.toolList .wrappedButtonsContainer:not(.active) .wrappedButtonsList {
        display: none;
    }

    ul.toolList .wrappedButtonsContainer.active .wrappedButtonsTrigger {
        background-color: #f1f1f1;
    }


    @position-try --nested-group-anchor-left {
        left: auto;
        right: anchor(left);
    }

    .nonChrome ul.toolList .nestedGroup .groupButtons {
        position: absolute;
        top: 0;
        left: 100%;
    }

    .noTouch ul.toolList .nestedGroup:hover {
    }

    .noTouch ul.toolList .nestedGroup:hover > button::after {
        content: '–';
    }

    .noTouch ul.toolList .nestedGroup:hover .groupButtons {
        display: block;
    }


    body.scrolledToTabContent ul.toolList {
        position: fixed;
        z-index: 99;
        top: 88px;
        background: #fff;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 1.5%;
        margin: 0;
        border-bottom: solid 1px #ddd;
        box-shadow: rgba(0,0,0,.15) 0px 6px 6px -5px;
    }



    #mobileHeader {
        display: none;
    }

    main {
        position: absolute;
        top: 0;
        bottom: 32px;
        left: 471px;
        right: 0;
    }

    .singleSectionMode main {
        left: 371px;
    }

    main.noTree {
        left: 100px;
    }

    main.narrowTree {
        left: 381px;
    }


    .scrollContent {
        position: absolute;
        top: 88px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
    }

    main.chromeless {
        left: 0 !important;
        top: 0 !important;
    }

    main.chromeless .scrollContent.mainContent {
        top: 0 !important;
    }

    div.card {
        padding: 20px 2%;
        margin-bottom: 2em;
    }

    div.card:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    div.card .cardHeader h2 {
        font-size: 1.75em;
        font-weight: 400;
        margin: 0 0 1.2em;
        color: #222;
        float: left;
    }

    div.card ul.cardList {
        width: 30%;
        margin-right: 3%;
        float: left;
    }

    div.card ul.cardList li {
        padding: 0 0 .5em;
    }

    div.card ul.cardList li label {
        padding: 0 1em .25em 0;
        font-weight: 600;
        font-size: 1em;
        width: 16em;
    }

    div.card ul.cardList li div {
        line-height: 1.4em;
    }

    div.card ul.cardList li div.limited {
        max-height: 12em;
        overflow-y: auto;
        overflow-x: hidden;
        word-break: break-word;
    }

    div.card ul.cardList li div.limited.overflown {
        border-bottom: solid 1px #ddd;
    }

    div.card ul.cardList li a[href] {
        color: var(--accent-color) !important;
    }

    div.card ul.cardList li a[href]:hover {
        text-decoration: underline;
    }

    .diplomaMasterTemplateCard ul.cardList li div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    ul.enrollmentNoteList {
        margin: 15px 2% 1.5em;
        clear: both;
    }

    ul.enrollmentNoteList li {
        padding: .25em 0;
    }

    .enrollmentCard .userPhoto {
        margin-bottom: .3rem;
    }

    .instructorCard .userDiplomaSignature img {
        max-width: 20rem;
        width: 100%;
        max-height: 5rem;
        object-fit: contain;
    }

    .enrollmentCard .cardList p {
        margin: .5rem 0 0 0;
    }

    .enrollmentCard .tags {
        padding: .5em 0;
    }

    #enrollmentCompanyVatCountryCode option[data-note]:not([data-note=""]) {
        font-weight: bold;
    }

    .cardContent.entityNote {
        padding: 2em 2%;
        border-top: solid 1px #ddd;
    }

    .cardContent.entityNote p {
        max-width: 55em;
        line-height: 1.5em;
        margin: 0;
    }

    .cardContent.entityNote p + p {
        margin-top: 1em;
    }

    div.card .cardList .role + .role::before {
        content: ' | ';
    }

    div.card .cardList .role a:not([href]) {
        color: #222 !important;
    }

    .userPhoto {
        display: block;
        width: 70px;
        height: 90px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .enrollmentTable .colStudent i {
        vertical-align: middle;
        font-size: 1.25em;
        margin-right: .05em;
        cursor: help;
        width: 1em;
    }

    .enrollmentTable .colStudent .name {
        display: inline-block;
        vertical-align: top;
    }

    .enrollmentTable tr.lifeCycleStateCurrent.approved td {
        background: var(--table-row-current-background-color);
    }


    .userTable .colName i {
        vertical-align: middle;
        font-size: 1.25em;
        margin-right: .5em;
        cursor: help;
        width: 1em;
        position: absolute;
        right: 0;
        top: .65em;
    }

    .userTable .colName .name {
        display: inline-block;
        vertical-align: middle;
    }

    .userTable .colName .ellipsis,
    .userTable .colUsername .ellipsis {
        max-width: 16vw;
    }

    #userCreateForm #ddlHasEmail:has(option[value="true"]:checked) + .warning {
        display: none;
    }

    #userCreateForm li:first-child {
        display: flex;
        flex-direction: column-reverse;
    }

    #userCreateForm li .warning {
        max-width: 100%;
        margin: 0 0 1rem;
    }

    #userCreateForm select.large {
        min-width: 31em;
    }

    ul.tabList {
        margin: 0 0 0 2em;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }

    ul.tabList li {
        display: inline;
    }

    ul.tabList li a {
        display: inline-block;
        text-decoration: none;
        font-size: 1em;
        font-weight: 500;
        color: #222;
        margin-right: .005em;
        padding: .5em .55em;
        border: solid 1px #ccc;
        border-bottom: none;
        position: relative;
        top: 2px;
        z-index: 1;
        background: #f8f8f8;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 2px;
    }

    ul.tabList li a.active {
        color: #000;
        border-bottom-color: #fff;
        background: #fff;
        border-bottom: solid 1px #fff;
        z-index: 3;
    }

    ul.tabList li a.emphasize, ul.tabList li a.emphasize:hover {
        color: inherit !important;
        border-top: 2px solid var(--emphasize-border-color);
        background: var(--emphasize-background-gradient);
        margin-top: 0;
    }

    ul.tabList li a.errors, ul.tabList li a.errors:hover {
        color: inherit !important;
        border-top: solid 2px var(--error-border-color);
        background: var(--error-background-gradient);
        margin-top: 0;
    }

    ul.tabList li a.emphasize.active,
    ul.tabList li a.errors.active {
        margin-top: 1px;
    }

    ul.tabList li a[href].emphasize:hover {
        color: #4b4b4b;
    }

    .tabContent {
        display: none;
        position: relative;
        top: -3px;
        z-index: 2;
        border-top: solid 1px #ccc;
        padding-top: 1em;
        padding-bottom: 2em;
    }

    .tabContent.active {
        display: block;
    }

    .tabContent.active[data-tab="attendance"]) {
        top: -3px;
    }

    .tabContent[data-warning]:not([data-warning=""])::before {
        content: attr(data-warning);
        color: #fff;
        background: var(--emphasize-background-color);
        padding: .5em 1em;
        font-size: .9em;
        margin: .5em 2em;
        display: inline-block;
        border-radius: 3px;
    }

    .tabContent[data-error]:not([data-error=""])::before {
        content: attr(data-error);
        color: #fff;
        background: var(--error-background-color);
        padding: .5em 1em;
        font-size: .9em;
        margin: .5em 2em;
        display: inline-block;
        border-radius: 3px;
    }

    .tabContent[data-info]:not([data-info=""])::before {
        content: attr(data-info);
        color: #fff;
        background: #999;
        padding: .5em 1em;
        font-size: .9em;
        margin: .5em 2em;
        display: inline-block;
        border-radius: 3px;
    }

    .dataTableScroller {
        overflow-x: auto;
    }

    .dataTable {
        border-collapse: collapse;
        width: 96%;
        display: none;
        margin: 0 2% 2em;
    }

    .dataTable.initialized {
        display: table;
    }

    .dataTableFixed {
        table-layout: fixed;
    }

    .dataTable.hasFilters {
        margin-bottom: 0;
    }

    .resetDataTableFilter {
        margin: 1em 0 2em 2%;
        display: inline-block;
        font-size: .9em;
        padding: .5em 1em;
        background-color: #f1f2f3;
        float: left;
    }

    .dataTable.smaller {
        font-size: smaller;
    }

    .dataTable thead th {
        text-align: left;
        font-weight: 600;
        font-size: 1.05em;
        border-bottom: solid 4px #C2CAD2;
        padding: 0 24px .5em .85em;
        background-position: right .5em;
        background-repeat: no-repeat;
        white-space: nowrap;
    }

    .dataTable td {
        padding: .75rem 1rem;
        border: solid 1px #e1e6e8;
        vertical-align: top;
        white-space: nowrap;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .dataTable .col.nw {
        white-space: nowrap;
    }

    .dataTable tbody tr.even {
        background-color: #FDFDFD;
    }

    .dataTable tr.tablesorter-filter-row td {
        padding: .2em .25em;
        border-bottom-color: #CFD7E0;
        background: #F9FAFB;
        position: relative;
    }

    .dataTable tr.tablesorter-filter-row td a.help {
        position: absolute;
        top: -30px;
        right: 1.1em;
        color: #35548d;
        display: none;
        z-index: 10001;
        background-color: white;
    }

    .dataTable tr.tablesorter-filter-row td input.focus + a.help {
        display: block;
        z-index: 1000;
    }

    .dataTable thead td .tablesorter-filter {
        border: solid 1px #F9FAFB;
        font-size: .9em;
        background: #F9FAFB;
        width: 100%;
    }

    .dataTable thead td select.tablesorter-filter {
        padding: .349em .2em;
        font-size: .9em;
        min-width: 3em;
        max-width: none;
    }

    .dataTable thead td input.tablesorter-filter::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    .dataTable thead td input.tablesorter-filter:focus::-webkit-search-cancel-button {
        -webkit-appearance: searchfield-cancel-button;
    }

    .dataTable thead td .tablesorter-filter.disabled {
        display: none;
    }

    .dataTable thead th:not(.sorter-false) .tablesorter-header {
        cursor: pointer;
    }

    .dataTable thead .tablesorter-header-inner {
        white-space: nowrap;
    }

    .dataTable th.tablesorter-headerAsc {
        background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
    }

    .dataTable th.tablesorter-headerDesc {
        background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
    }

    .dataTable .col.right {
        text-align: right;
    }

    .dataTable .col.center {
        text-align: center;
    }

    .dataTable .col .ellipsis {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    .dataTable .col .ellipsis--xsmall {
        max-width: 7em;
    }

    .dataTable .col .ellipsis--small {
        max-width: 10em;
    }

    .dataTable .col .ellipsis--medium {
        max-width: 15em;
    }

    .dataTable .col .ellipsis--large {
        max-width: 20em;
    }

    .dataTable .col .ellipsis--xlarge {
        max-width: 25em;
    }

    .dataTable .col .ellipsis i + span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: top;
    }

    .dataTable .col.colOrigin {
        width: 5%;
        max-width: 15em;
    }

    .dataTable tbody tr.obsolete, .dataTable tbody tr.deleted {
        opacity: .5;
    }

    .dataTable tbody tr.obsolete td:first-child, .dataTable tbody tr.hasWarning td:first-child {
        border-left: solid 3px var(--emphasize-border-color);
    }

    .dataTable tbody tr.deleted td:first-child, .dataTable tbody tr.hasError td:first-child {
        border-left: solid 3px var(--error-border-color);
    }

    .dataTable tbody tr.new td:first-child {
        border-left: solid 3px var(--success-border-color);
    }

    .dataTable.enrollmentAddonTable tbody tr.approved:not(.deleted) td:first-child {
        border-left: solid 3px var(--success-border-color);
    }

    .dataTable.enrollmentAddonTable tbody tr.notapproved:not(.deleted) td:first-child {
        border-left: solid 3px var(--enrollment-state-pending-color);
    }

    .dataTable td.col.hasErrors {
        color: var(--error-color);
        font-weight: 700;
    }

    .dataTable td.col.hasWarning {
        color: var(--emphasize-color);
    }

    .dataTable td.col.hasError {
        color: var(--error-color);
    }

    .dataTable .col[title]:not([title=""]) {
        cursor: help !important;
    }

    body.busy .dataTable tbody {
        opacity: .5;
    }

    .tablesorter .filtered {
        display: none;
    }

    .tablesorter .tablesorter-errorRow td {
        text-align: center;
        cursor: pointer;
        background-color: var(--input-error-background-color);
    }

    .dataTable .sortable .col {
        vertical-align: middle;
    }

    .dataTable .sortable .colIcon i {
        cursor: move;
        color: #666;
    }

    .dataTable.smallDataTable {
        font-size: .9em;
    }

    .dataTable.smallDataTable th {
        font-size: 1em;
        font-weight: 500;
    }

    .dataTable.smallDataTable .col {
        padding: .35em .75em;
    }

    .dataTable .col.colTags {
        width: 6%;
    }

    .dataTable td.col.colTags {
        font-size: 0;
        padding: .5rem;
        vertical-align: top;
        white-space: normal;
    }

    .dataTable .col.colTags span.tag {
        cursor: help;
        max-width: 10em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dataTable .col.colTags br + span.tag {
        margin-top: .25rem;
    }

    .dataTable .col.colUserPhoto {
        text-align: center;
        width: 5%;
    }

    .dataTable .note {
        position: absolute;
        top: -.3rem;
        right: -.1rem;
    }

    .dataTable .noteJustifyRight {

    }

    .dataTable .note .icon {
        color: var(--emphasize-color);
        cursor: help;
        display: block;
    }

    .dataTable .note .icon::before {
        content: '◥';
    }

    .dataTable .note .tooltip {
        display: none;
        background-color: white;
        padding: 1em;
        font-size: .85em;
        width: 25em;
        position: absolute;
        right: -350%;
        bottom: 85%;
        white-space: normal;
        z-index: 20001;
        box-shadow: rgba(0,0,0,.35) 0 0 5px 0;
        border-radius: 2px;
    }

    .dataTable .noteJustifyRight .tooltip{
        right: 0;
    }

    .dataTable .noteLarge .tooltip { width: 35em; }

    .dataTable .note .tooltip .noteHeader { display:block; }



    .dataTable .note:hover .tooltip {
        display: block;
    }



    .dataTable .hasNote {
        position: relative;
    }

    .dataTable tbody tr .col:first-of-type .tooltip {
        right: -1100%;
    }

    /*    .dataTable tbody tr:first-of-type .tooltip {
        top: 200%;
        bottom: auto;
    }
*/
    .formList > li.formListDataTableWrapper {
        margin: 1em -2% 0;
    }

    .formList > li.formListDataTableWrapper[data-error]:not([data-error=""])::before {
        content: attr(data-error);
        color: #fff;
        background: var(--error-background-color);
        padding: .5em 1em;
        font-size: .9em;
        margin: .5em 2em 2em;
        display: inline-block;
        border-radius: 3px;
    }

    .formList > li.formListDataTableWrapper .dataTable td {
        padding: .6rem;
        position: relative;
        overflow:visible;
    }

    .formList > li.formListDataTableWrapper .dataTable td .chosen-container {
        width: 100% !important;
    }

    .formList > li.formListDataTableWrapper .dataTable td .textBoxShowAsText {
        color: #000;
        border: none;
        opacity: 1;
        text-overflow:ellipsis;
    }

    .formList > li.formListDataTableWrapper .dataTable td:has(textarea.breakout) {
        padding-bottom: 0;
    }

    .formList > li.formListDataTableWrapper textarea.breakout {
        resize: none;
    }

    .formList > li.formListDataTableWrapper input.breakout:not(:focus) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .formList > li.formListDataTableWrapper textarea.breakout:not(:focus) {
        max-height: 1.25em;
        overflow: hidden;
    }

    .formList > li.formListDataTableWrapper .breakout:focus {
        position: absolute;
        z-index: 1;
        width: 125% !important;
        max-height: 25vh !important;
        max-width: unset !important;
        box-shadow: rgba(0,0,0,.2) 0 0 10px;
    }

    .formList > li.formListDataTableWrapper .breakout.breakout--large:focus {
        width: 200% !important;
    }

    .formList > li.formListDataTableWrapper .dataTable input.time + label.error {
        position: absolute;
        z-index: 1;
    }

    .dataImportTable {
        display: block;
        margin: 0;
        table-layout: fixed;
        width: 100%;
    }

    .dataImportTable .colMessage {
    }

    .dataImportTable .colMessage span {
        display: block;
        color: white;
        background-color: var(--success-background-color);
        padding: .25em .5em;
        font-size: .9em;
        max-width: 20em;
        white-space: normal;
        box-sizing: border-box;
        text-align: center;
    }

    .dataImportTable .colMessage span[title] {
        cursor: help;
    }

    .dataImportTable .col {
        vertical-align: middle;
    }

    .dataImportTable td.col {
        font-size: .85em;
        max-width: 7.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dataImportTable .col:not(.colCheck):not(.colMessage) {
        width: 7%;
    }

    .dataImportTable .error .colMessage span {
        background-color: var(--error-background-color);
    }

    .dataImportTable .warning .col {
        background-color: white;
    }

    .dataImportTable .warning .colMessage span {
        background-color: var(--emphasize-background-color);
    }

    .dataImportTable tr.ignored {
        opacity: .35;
        text-decoration: line-through;
    }

    .dataImportTable tr.ignored .colMessage span {
        background-color: #a2a2a2;
        color: #222;
    }

    .dataImportTable tr.processing {
    }

    .dataImportTable tr.processed {
    }

    .dataImportTable tr.processed.success .colMessage span {
        background-color: var(--success-background-color);
    }

    .dataImportTable tr.processed.error .colMessage span {
        background-color: var(--error-background-color);
    }


    .dataImportTable tbody tr.error td.error,
    .dataImportTable tbody tr.error[data-errorcolumns*='colDateOfBirth'] .colDateOfBirth,
    .dataImportTable tbody tr.error[data-errorcolumns*='colEmail'] .colEmail,
    .dataImportTable tbody tr.error[data-errorcolumns*='colUsername'] .colUsername {
        color: var(--error-color);
        font-weight: 500;
    }

    tr:not(.error) td.col.colUsername[data-username=""]::after {
        content: attr(data-nousername);
    }

    tr.anonymous td {
        position: relative;
        font-style: italic;
    }

    .genericNoteTable .colEntity {
        width: 15%;
    }

    .genericNoteTable .colCategory {
        width: 8%;
    }

    .genericNoteTable .colAuthor, .genericNoteTable .colDateTime {
        width: 12%;
    }

    .genericNoteTable .colText span {
        display: block;
        max-width: 40em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .genericNoteTable tbody tr.emphasized .col:first-of-type {
        border-left: solid 3px var(--emphasize-border-color);
    }

    .genericNoteTable tbody tr:not(.emphasized) .col:first-of-type {
        border-left: solid 3px #e1e6e8;
    }

    .tablesorter-pager {
        margin: 1em 2em;
        text-align: center;
        font-size: smaller;
        float: right;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .tablesorter-pager .disabled {
        opacity: 0.5;
        filter: alpha(opacity=50);
        cursor: default;
        color: initial !important;
    }

    .tablesorter-pager a {
        display: inline-block;
        margin: 0 .25em;
        cursor: pointer;
        vertical-align: middle;
    }

    .tablesorter-pager a i {
        font-size: 2em;
        vertical-align: middle;
    }

    .tablesorter-pager span {
        vertical-align: middle;
        display: inline-block;
        margin: 0 1em;
    }

    .enrollmentTable .tablesorter-filter-row td:first-child {
        border-left: solid 3px #c2cad2;
    }

    .enrollmentTable tr.enrollmentState1 td:first-child {
        border-left: solid 3px var(--enrollment-state-new-color);
    }

    .enrollmentTable tr.enrollmentState2 td:first-child {
        border-left: solid 3px var(--enrollment-state-pending-color);
    }

    .enrollmentTable tr.enrollmentState3 td:first-child {
        border-left: solid 3px var(--enrollment-state-approved-color);
    }

    .enrollmentTable tr.enrollmentState4 td:first-child {
        border-left: solid 3px var(--enrollment-state-rejected-color);
    }

    .enrollmentTable tr.enrollmentState5 td:first-child {
        border-left: solid 3px var(--enrollment-state-cancelled-color);
    }

    .enrollmentTable tr.enrollmentState7 td:first-child {
        border-left: solid 3px var(--enrollment-state-temporarily-approved-color);
    }

    .enrollmentTable tr.enrollmentState4 td:not(.hasNote),
    .enrollmentTable tr.enrollmentState5 td:not(.hasNote),
    .enrollmentTable tr.enrollmentState6 td:not(.hasNote) {
        opacity: .6;
    }

    .enrollmentTable tr.enrollmentState4 td.hasNote span:not(.note):not(.tooltip),
    .enrollmentTable tr.enrollmentState5 td.hasNote span:not(.note):not(.tooltip),
    .enrollmentTable tr.enrollmentState6 td.hasNote span:not(.note):not(.tooltip) {
        opacity: .6;
    }

    .enrollmentTable td.colOrigin.hasNote .note {
        top: .75rem;
        right: 0.5rem;
    }

    .enrollmentTable td.colOrigin.hasNote .note .icon {
        color: currentColor;
    }

    .enrollmentTable td.colOrigin.hasNote .note .icon::before {
        content: 'error_outline';
        font-family: 'Material Symbols Outlined';
    }

    tr.modeContinuousEnrollment.lifeCycleStateCompleted td {
        opacity: .6;
    }

    .enrollmentTable tr.enrollmentState3[data-stopped="true"] .col {
        background-color: #f1f1f1;
        opacity: .75;
    }

    .enrollmentTable tr.enrollmentState3[data-stopped="true"] .colStopped {
        font-weight: 700;
    }

    .enrollmentTable .colStudent {
        max-width: 16rem;
    }

    .enrollmentTable .colEmail {
        max-width: 14rem;
    }

    .enrollmentTable .colType {
        max-width: 15rem;
    }

    .enrollmentTable .colPhone {
        width: 7%;
    }

    .enrollmentTable .colType i,
    .enrollmentDraftTable .colType i {
        vertical-align: top;
        font-size: 1.25em;
        margin-right: .25em;
        cursor: help;
    }

    .enrollmentTable .colType .ellipsis span,
    .enrollmentTable .colType .ellipsis span {
        display: inline-block;
        vertical-align: middle;
    }

    .enrollmentTable .colType .ellipsis {
        display: flex;
    }

    .enrollmentTable .colStudent .name {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90%;
        white-space: nowrap;
    }

    .enrollmentTable tr.anonymous {
        opacity: .5;
        cursor: help;
    }

    .enrollmentTable tr.anonymous td {
        cursor: help;
    }

    .enrollmentTable .col.colCitizenship {
        width: 6%;
    }

    .enrollmentTable .colStage {
        width: 6%;
    }

    .enrollmentTable .colStartDate {
        width: 6%;
    }

    .enrollmentTable .colEndDate {
        width: 6%;
    }

    .enrollmentTable .colCourseDays {
        width: 2%;
        text-align: right;
    }

    .enrollmentTable tr.moduleEnrollment {
        background: #f5f5f5 !important;
        font-size: .9em;
    }

    .enrollmentTable td.colOrigin {
        width: 13%;
        min-width: 10em;
    }

    .enrollmentTable td.colOrigin a.toggle::before {
        font-family: 'Material Symbols Outlined';
        content: 'navigate_next';
        font-size: 1.4em;
        line-height: 1rem;
        vertical-align: top;
        display: inline-block;
        position: relative;
        top: 3px;
        transition: transform .2s ease-in-out;
    }

    .enrollmentTable td.colOrigin a.toggle:not([href]) {
        opacity: .25;
        pointer-events: none;
    }

    .enrollmentTable tr.expanded td.colOrigin a.toggle::before {
        transform: rotate(90deg);
    }

    .enrollmentTable tr.moduleEnrollment td.colOrigin {
        padding-left: 2.5rem;
    }

    .courseTable tr.inactive {
        opacity: .6;
    }

    .courseInstanceTable tr.cancelled {
        opacity: .6;
    }

    .courseInstanceTable tr.row td:first-child {
        border-left: solid 2px #c2cad2;
    }

    .courseInstanceTable tr.row.full td:first-child {
        border-left-color: var(--table-row-notice-border-color);
    }

    .courseInstanceTable tr.row.full td.colSeats {
        background-color: var(--table-row-notice-background-color);
    }

    .courseInstanceTable tr.row.overBooked td:first-child {
        border-left-color: var(--emphasize-border-color);
    }

    .courseInstanceTable tr.row.overBooked:not(.selected) td.colSeats {
        background-color: var(--emphasize-background-color);
        color:#fff;
    }

    .courseInstanceTable tr.row.outOfRange td:first-child {
        border-left-color: var(--emphasize-border-color);
    }

    .courseInstanceTable tr.row.current td:first-child {
        border-left-color: var(--table-row-current-border-color);
    }

    .courseInstanceTable tr.row.current td {
        background: var(--table-row-current-background-color);
    }

    .courseInstanceInstructorTable .col.colAssistantInstructor {
        width: 15%;
    }

    .courseInstanceInstructorTable .deleted .col {
        font-style: italic;
    }

    .courseInstanceInstructorTable .disabled .col {
        opacity: .5;
    }

    .enrollmentExamTable .tablesorter-filter-row td:first-child, .enrollmentExamTable tr td:first-child {
        border-left: solid 2px #c2cad2;
    }

    .enrollmentExamTable tr.passed td:first-child {
        border-left: solid 2px var(--success-border-color);
    }

    .enrollmentExamTable tr.notPassed td:first-child {
        border-left: solid 2px var(--error-border-color);
    }

    .courseInstancePersonalDataCollectionTable .colEnrollments,
    .courseInstancePersonalDataCollectionTable .colData,
    .courseInstancePersonalDataCollectionTable .colType,
    .courseInstancePersonalDataCollectionTable .colActive {
        width: 10%;
    }

    .courseInstanceCard span.weekDay + span.weekDay::before {
        content: '| ';
    }

    #enrollmentCompanySearchForm {
        padding: 1em 1.5em 2em;
    }

    #enrollmentCompanySearchForm .textBox {
        width: 25em;
    }

    .companyResultList li {
        padding: 1em 1.5em;
        border-bottom: solid 1px #ddd;
    }

    .companyResultList li:hover {
        background: #f5f5f5;
    }

    .companyResultList li a {
        text-decoration: none;
        color: inherit;
        display: block;
        position: relative;
    }

    .companyResultList li p {
        margin: 0 0 .25em;
    }

    .companyResultList li a > i {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 1.4em;
        color: #ccc;
    }

    .companyResultList li .contactPerson {
        margin-top: .5em;
    }

    .companyResultList li .contactPerson i {
        font-size: 1.7em;
        float: left;
        margin-right: .25em;
    }

    .companyResultList li .contactPerson span {
        float: left;
        font-size: .9em;
    }

    #moveEnrollmentsSideBar form {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: solid 1px #e1e1e1;
        text-align: right;
    }

    #moveEnrollmentsSideBar form button {
        margin: 0 0 0 1rem;
    }

    #transferEnrollmentsForm {
    }

    #transferEnrollmentsForm select option:disabled {
        display: none;
    }

    .statsList h3 {
        margin-bottom: 0;
        max-width: 55rem;
    }

    .statsList .info {
        font-size: .8em;
        max-width: 55rem;
        display: block;
    }

    .statsTable {
        display: table;
        margin: 1rem 0 2em;
    }

    .statsTable td {
        user-select: all;
        white-space: normal;
    }

    .statsTable td.dates {
        width: 15%;
    }

    .statsTable td.location {
        width: 25%;
    }

    .statsTable td.count {
        width: 8%;
        text-align: right;
        font-weight: 600;
        position: relative;
    }

    .statsTable tr:first-child td.count::before {
        font-weight: normal;
        font-size: .7em;
        text-transform: uppercase;
        position: absolute;
        left: .25rem;
        right: .25rem;
        text-align: center;
        top: -1rem;
        color: #424242;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .statsTable tr:first-child td.enrollmentCount::before {
        content: attr(data-header);
    }

    .statsTable tr:first-child td.userCertificationCount::before {
        content: attr(data-header);
    }

    .statsTable tr:first-child td.passedEnrollmentCount::before {
        content: attr(data-header);
    }

    .statsTable tfoot td, .statsTable.summaryTable {
        background-color: #f7f7f7;
    }

    .statsTable tfoot tr:first-child td {
        border-top-width: 2px;
    }

    .statsTable tfoot tr:last-child td:first-child,
    .statsTable.summaryTable tr:last-child td:first-child {
        font-weight: bold;
    }

    #statsFilterForm {
        margin-bottom: 3rem;
        border-bottom: solid 1px #e1e1e1;
        padding-bottom: 1rem;
    }

    #statsFilterForm input.textBox + label {
        width: 2rem;
        text-align: center;
    }

    #statsFilterForm .formList > li > label:not(.after):first-of-type {
        width: 8em;
    }

    #statsFilterForm input[type="checkbox"],
    #statsFilterForm input[type="checkbox"] + label {
        vertical-align: middle;
        top: 0;
    }

    #statsFilterForm #groupBy,
    #statsFilterForm input[type="checkbox"] + label {
        margin-right: 2rem;
    }

    #statsFilterForm .dateButtonList {
        display: inline-flex;
        margin: 0;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 18em;
        position: absolute;
        margin-top: -.45rem;
        margin-left: 1rem;
    }

    #statsFilterForm .dateButtonList li {
        max-width: 16.66%;
        flex: 16.66%;
        box-sizing: border-box;
        padding: .1rem;
    }

    #statsFilterForm .dateButtonList li button.dateButton {
        padding: .25em .5em;
        font-size: .75em;
        text-transform: capitalize;
        width: 100%;
        margin: 0;
    }

    #statsFilterForm .dateButtonList li button.dateButton.active {
        background: var(--active-background-color);
        color: #fff;
        border-color: var(--active-border-color);
    }

    #statsFilterForm .navigation {
        padding-top: .5rem;
    }

    #statsFilterForm .navigation button {
        margin-left: 8.2rem;
    }

    #downloadStatisticsBtn {
        position: absolute;
        right: 6%;
        margin-top: -2rem;
        display: flex;
    }

    #downloadStatisticsBtn i {
        display: inline-block;
        margin-right: .25rem;
    }

    .attendanceTable .colAttendance {
        width: 5%;
        text-align: center;
    }

    .attendanceTable span.stopped {
        text-decoration: line-through;
        cursor: help;
    }

    .tendencyCharts canvas {
        max-width: 80%;
        margin: 0 auto 4em;
    }

    .leadTable .col.colInterestedIn {
        max-width: 25em;
    }

    .sentMailTable .col.colName {
        max-width: 20em;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sentTextMessageTable .col.colType {
        width: 7%;
    }

    .sentTextMessageTable .col.colMessage {
        width: 22%;
        max-width: 25em;
    }

    .sentTextMessageTable .col.colSentDate {
        width: 7%;
    }

    .sentTextMessageTable .col.colSentBy {
        width: 20%;
    }

    .sentTextMessageTable .col.colDelivered {
        width: 7%;
        text-align: center;
    }

    .sentTextMessageTable .col.colTo {
        width: 10%;
    }

    .sentTextMessageTable .tablesorter-filter-row td:first-child {
        border-left: solid 2px #c2cad2;
    }

    .sentTextMessageTable tr.statusDelivered td:first-child {
        border-left: solid 2px var(--success-border-color);
    }

    .sentTextMessageTable tr.statusEnroute td:first-child {
        border-left: solid 2px var(--table-row-notice-border-color);
    }

    .sentTextMessageTable tr.statusNotDelivered:not(.statusEnroute) td:first-child {
        border-left: solid 2px var(--error-border-color);
    }

    html.noTouch .dataTable.grid tbody tr:not(.anonymous):hover td {
        background-color: var(--table-row-hover-background-color);
        cursor: default;
    }

    html.noTouch .dataTable.grid tbody tr.empty:hover td {
        background-color: inherit !important;
    }

    .dataTable.grid tbody tr.selected td {
        background-color: var(--table-row-selected-background-color) !important;
        opacity: 1 !important;
    }

    .dataTable td.past {
        text-decoration: line-through;
        color: #5a5a5a;
    }

    .courseInstanceDateTable .colDate {
        width: 15%;
    }

    .courseInstanceDateTable .col:nth-child(2), .courseInstanceDateTable .col:nth-child(3) {
        width: 10%;
    }

    .courseInstanceDateTable .col.colDisplayName {
        width: 10%;
    }

    .courseInstanceDateTable .colEvaluation {
        width: 12%;
    }

    .courseInstanceDateTable .colAgendaCount {
        width: 10%;
    }

    .courseInstanceDateTable .colTags {
        width: 15%;
    }

    .enrollmentAddonTable .colDate {
        width: 10%;
    }

    .enrollmentAddonTable .colName small {
        display: block;
        margin-top: .25rem;
        white-space: normal;
    }

    .enrollmentAddonTable .colName .ellipsis {
        max-width: 30rem;
    }

    .enrollmentAddonTable .colStudent {
    }

    .enrollmentAddonTable .colStudent .ellipsis {
        max-width: 22rem;
    }

    .enrollmentAddonTable .colItemNumber {
        width: 12%;
    }

    .enrollmentAddonTable .colPrice {
        width: 10%;
        text-align: right;
    }

    .enrollmentAddonTable .colQuantity {
        width: 8%;
        text-align: center;
    }

    .enrollmentAddonTable .colTotal {
        width: 10%;
        text-align: right;
    }

    .enrollmentAddonTable tbody tr[data-allowupdate="true"] .colName span::after {
        content: ' *';
    }

    .enrollmentAddonTable tbody .colItemNumber {
        position: relative;
    }

    .enrollmentAddonTable tbody .colItemNumber i {
        position: absolute;
        right: 0;
        margin-right: .5em;
        font-size: 1.25em;
        cursor: help;
    }

    .dataTable i.inline {
        font-size: 14px;
        position: relative;
        top: 2px;
        left: 5px;
        cursor: help;
    }

    .templateBlockValueTable .imageWrapper span, .diplomaMasterTemplateBlockTable .imageWrapper span {
        display: block;
    }

    #sideBar {
        position: fixed;
        z-index: 10005;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px;
        background: #fff;
        box-shadow: rgba(0,0,0,.2) -2px 0 12px 0;
        display: none;
    }

    #sideBar .sideBarContent {
        position: absolute;
        top: 88px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
    }

    #sideBar .sideBarContent.hasOverlay {
        overflow: hidden;
    }


    #sideBar .header button {
        float: right;
        margin-top: 2em;
        margin-right: 0;
        padding: .25em .35em 0;
        font-size: .5em;
    }

    #sideBar .header button.close:hover {
        background: var(--error-background-color);
        border-color: var(--error-border-color);
    }

    #sideBar .sideBarContent .pad {
        padding: 1em 2em;
    }

    #sideBar .sideBarContent .dialogForm label:not(.after) {
        width: 100%;
    }

    #sideBar .sideBarContent a {
        color: #212121;
        text-decoration: none;
    }

    #sideBar .sideBarContent p.noResults:not(.pad) {
        padding: 1em 2em;
    }


    #sideBar .exportList li {
        margin-bottom: .5em;
    }

    #sideBar .exportList li a {
        display: inline-block;
        font-size: 1em;
        text-decoration: none;
        color: #333;
        background-color: #e1e1e1;
        padding: .5em 2em;
        min-width: 8em;
    }

    #sideBar .exportList li a i {
        vertical-align: middle;
        margin-right: .2em;
        font-size: 1.2em;
    }

    #sideBar #enrollmentAssessmentForm li {
    }

    #sideBar #enrollmentAssessmentForm li:not(.navigation) {
        clear: both;
        width: calc(100% - 2em);
        border-bottom: solid 1px #e1e1e1;
        padding: 1em 0 1em 2em;
        position: relative;
    }

    #sideBar #enrollmentAssessmentForm li input {
        position: absolute;
        left: 0;
        top: .85em;
    }

    #sideBar #enrollmentAssessmentForm li label {
        display: block;
        margin-bottom: .4em;
        padding-top: 0;
    }

    #sideBar #enrollmentAssessmentForm textarea {
        height: 1.4em;
    }

    #sideBar #courseInstanceDateAttendanceForm li {
    }

    #sideBar #courseInstanceDateAttendanceForm li:not(.navigation) {
        clear: both;
        width: calc(100% - 2em);
        border-bottom: solid 1px #e1e1e1;
        padding: 1em 0 1em 2em;
        position: relative;
    }

    #sideBar #courseInstanceDateAttendanceForm li input {
        position: absolute;
        left: 0;
        top: .85em;
    }

    #sideBar #courseInstanceDateAttendanceForm li label {
        display: block;
        margin-bottom: .4em;
        padding-top: 0;
    }

    #sideBar #courseInstanceDateAttendanceForm textarea {
        height: 1.4em;
    }

    #sideBar #examForm a.toggleLink {
        color: #212121;
    }

    #sideBar #examForm .enrollmentWrapper {
        width: 40em;
        margin-top: .65em;
    }

    #sideBar #examForm .enrollmentWrapper li:not(.navigation) {
        clear: both;
        width: calc(100% - 2em);
        border-bottom: solid 1px #e1e1e1;
        padding: 1em 0 1em 2em;
        position: relative;
    }

    #sideBar #examForm .enrollmentWrapper li input {
        position: absolute;
        left: 0;
        top: .85em;
    }

    #sideBar #examForm .enrollmentWrapper li .name {
        font-weight: 500;
        display: block;
    }

    #sideBar #examForm .enrollmentWrapper li .user {
        font-size: .8em;
    }

    #sideBar .enrollmentPickerForm .enrollmentWrapper li {
        padding: .75em 0;
        border-bottom: solid 1px #e1e1e1;
    }

    #sideBar .enrollmentPickerForm .enrollmentWrapper li:last-child {
        border-bottom: none;
    }

    #sideBar .enrollmentPickerForm .enrollmentWrapper li.processed {
    }

    #sideBar .enrollmentPickerForm .enrollmentWrapper li.processed.success {
        color: var(--success-color);
    }

    #sideBar .enrollmentPickerForm .enrollmentWrapper li.processed.error {
        color: var(--error-color);
    }

    #sideBar .enrollmentPickerForm .enrollmentWrapper .status {
        font-size: 1.1em;
        display: inline-block;
        width: 20%;
        text-align: center;
    }

    #sideBar .enrollmentPickerForm .enrollmentWrapper label {
        width: 70%;
        display: inline-block;
    }

    #sideBar .enrollmentPickerForm .enrollmentWrapper a.toggleLink,
    #sideBar .enrollmentPickerForm a.toggleLink {
        margin-top: 1em;
        display: inline-block;
        text-decoration: none;
        color: #222;
    }

    #sideBar #certificationForm .enrollmentWrapper {
        width: 30em;
        margin-top: .65em;
    }

    #sideBar #certificationForm .enrollmentWrapper li {
        clear: both;
        width: calc(100% - 2em);
        border-bottom: solid 1px #e1e1e1;
        padding: 1em 0 1em 2em;
        position: relative;
    }

    #sideBar #certificationForm .enrollmentWrapper li input {
        position: absolute;
        left: 0;
        top: .85em;
    }

    #sideBar #certificationForm a.toggleLink {
        display: inline-block;
        text-decoration: none;
        color: #222;
    }

    #sideBar #userSearchResultList {
        margin: 2em 0;
    }

    #sideBar .userSearchResultList a {
        display: block;
        padding: 1em 1.5em;
        margin: 0;
        border: none;
        border-top: solid 1px #ddd;
    }

    #sideBar .userSearchResultList a + a,
    #sideBar .userSearchResultList > li:first-child a:first-child {
        border: none;
    }

    #sideBar .userSearchResultList a:hover {
        cursor: pointer;
        background: #f5f5f5;
    }

    .userSearchResultList a span,
    #studentData span,
    #userData span {
        display: block;
    }

    .userSearchResultList a span.name,
    .userSearchResultList a span.address,
    #studentData span.name,
    #studentData span.address,
    #userData span.name,
    #userData span.address {
        margin-bottom: .25rem;
    }

    #studentData {
        margin-bottom: .5rem;
    }

    #studentSearchBox .userSearchResultList a {
        display: block;
        padding: 1em;
        border: solid 1px #ccc;
        background: #fff;
        box-sizing: border-box;
        height: 100%;
    }

    #studentSearchBox .userSearchResultList li {
        flex: 25%;
        padding: 0 .5em 1em;
        box-sizing: border-box;
        max-width: 25%;
    }

    #studentSearchBox .userSearchResultList {
        display: flex;
        margin: 0 -.5em;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: .95em;
        width: 100%;
    }

    #studentSearchBox .userSearchResultList a:hover {
        cursor: pointer;
        background: #f5f5f5;
        color: #222;
    }

    #studentSearchResults {
        margin-top: 2rem;
    }

    #studentDataWrapper {
        display: inline-block;
        padding-top: .6em;
    }

    #searchHandler {
        position: absolute;
        right: 0;
        top: .5rem;
        bottom: .5rem;
        display: flex;
        align-items: center;
        width: fit-content;
        max-width: 42rem;
        box-sizing: border-box;
        justify-content: end;
    }

    #searchForms {
        position: absolute;
        z-index: 1000;
        top: 0;
        bottom: 0;
        right: .5em;
        background-color: var(--search-form-background-color);
        width: 100%;
        overflow: hidden;
        transition: all .2s ease-in-out;
        padding: 0 3rem 0 1.35rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: end;
        border-radius: 8px;
        box-sizing: border-box;
    }

    #searchHandler:not(.active) #searchForms {
        width: 0;
        max-width: 0;
        padding: 0;
    }

    #searchHandler.active {
        width: calc(100% - 2rem);
    }

    #searchHandler.active .searchTrigger {
        display: none;
    }

    #searchForms form input {
        width: 100%;
        box-sizing: border-box;
        border: none;
        border-radius: 5px;
        max-width: none;
        padding: .5rem;
        visibility: hidden;
    }

    #searchHandler.active #searchForms form input {
        visibility: visible;
    }

    #searchForms form {
        flex: 1;
    }

    #searchForms form + form {
        margin-left: 1rem;
    }

    #searchHandler a {
        display: flex;
        text-decoration: none;
    }

    #searchHandler a i {
        color: white;
        font-size: 2em;
    }

    #searchHandler a.searchTrigger {
        margin-right: 3rem;
    }

    #searchHandler a.searchClose {
        margin-left: 1rem;
        visibility: hidden;
    }

    #searchHandler.active a.searchClose {
        visibility: visible;
    }

    .courseInstanceSearchList li {
        padding: 1em 1.5em;
        border-bottom: solid 1px #ddd;
    }

    .courseInstanceSearchList li a {
        text-decoration: none;
        color: #212121;
    }

    .courseInstanceSearchList li p {
        margin: 0 0 .25em;
    }

    ul.dashboardLinkList {
    }

    ul.dashboardLinkList li {
        padding: 1rem 0;
        max-width: 100%;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    ul.dashboardLinkList li + li {
        border-top: solid 1px #f1f1f1;
    }

    ul.dashboardLinkList li small {
        padding: .25em .7em;
        background: #999;
        color: #fff;
        margin-right: 1em;
        position: relative;
        vertical-align: middle;
        display: inline-block;
    }

    ul.dashboardLinkList li p {
        margin: 0 0 .25em;
    }

    ul.dashboardLinkList li .listSubject {
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }

    ul.dashboardLinkList li a {
        text-decoration: none;
        color: #212121;
        max-width: 85%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    ul.dashboardLinkList li a.listName {
        max-width: calc(100% - 200px);
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    ul.dashboardLinkList li .listDesc {
        display: block;
        padding-top: .5em;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    ul.dashboardLinkList li a strong {
        vertical-align: middle;
    }

    ul.dashboardLinkList li > strong {
        display: inline-block;
    }

    ul.dashboardLinkList li span.enrollmentCount {
        font-size: 1.15em;
        border-radius: 4px;
        color: #111;
    }

    ul.dashboardLinkList li span.enrollmentCount span.approved {
        font-weight: 700;
        cursor: help;
    }

    ul.dashboardLinkList li span.enrollmentCount span.tempApproved {
        font-weight: 700;
        cursor: help;
        opacity: .5;
    }

    ul.dashboardLinkList li span.enrollmentCount span.tempApproved::before {
        content: '/';
        display: inline-block;
        color: black;
        font-weight: normal;
        padding: 0 .25rem;
    }

    ul.dashboardLinkList button.listBtn {
        float: none;
        top: 0;
        margin-right: 0;
        background-color: #e1e1e1;
        border: none;
        padding: .35rem 1rem;
        font-size: .8em;
        border-radius: 4px;
        transition: transform .1s ease-in-out;
    }

    ul.dashboardLinkList button.listBtn:hover {
        transform: scale(1.035);
    }

    a.dashboardListAction {
        margin-top: .5rem;
        color: #212121;
        display: flex;
        margin-left: auto;
        width: fit-content;
        background-color: #e1e1e1;
        font-size: .85em;
        padding: 0.35rem 1rem;
        border-radius: 4px;
        transition: transform .1s ease-in-out;
    }

    a.dashboardListAction[href]:hover {
        transform: scale(1.035);
        color: inherit !important;
    }

    ul.dashboardLinkList.coursesComingUpList {
        margin-top: 1rem;
    }

    ul.dashboardLinkList.coursesComingUpModuleList {
        margin-top: 1rem;
        margin-left: 0;
        padding: .5rem 1rem 1rem;
        border: solid 1px #f1f1f1;
        background: #f7f7f7;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
    }

    ul.dashboardLinkList.coursesComingUpModuleList li span.enrollmentCount {
        font-size: 1em;
    }

    body.withoutModules ul.dashboardLinkList.coursesComingUpModuleList {
        display: none;
    }

    ul.dashboardLinkList.enrollmentList li .courseName {
        font-size: .9em;
        display: none;
    }

    ul.dashboardLinkList.dashboardFlexLinkList li a strong {
        vertical-align: unset;
    }

    ul.dashboardLinkList.dashboardFlexLinkList > li {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: .85rem 0;
        border-color: #ebebeb;
    }

    ul.dashboardLinkList.dashboardFlexLinkList > li:last-of-type {
        padding-bottom: 0;
    }

    ul.dashboardLinkList.dashboardFlexLinkList > li > small {
        flex: 0 1 auto;
        align-self: center;
        top: 0;
        padding: 0 0.5rem;
        line-height: 1.2rem;
        font-size: 11px;
        border-radius: 2px;
    }

    ul.dashboardLinkList.dashboardFlexLinkList > li > .content {
        flex: 1 0 0;
        overflow: hidden;
        display: flex;
        gap: .5em;
        align-items: center;
    }

    ul.dashboardLinkList.dashboardFlexLinkList > li > .content.contentSpaceBetween {
        justify-content: space-between;
    }

    ul.dashboardLinkList.dashboardFlexLinkList > li .listDesc {
        padding-top: .4rem;
        font-size: .9em;
        display: block;
        width: 100%;
    }

    ul.dashboardLinkList.dashboardFlexLinkList > li .listDesc + .listDesc {
    }

    ul.dashboardLinkList.dashboardFlexLinkList > li .listName {
        max-width: none;
    }

    /*    ul.dashboardLinkList.dashboardFlexLinkList > li .listSubject {
        margin-right: .35rem;
    }
*/
    ul.dashboardLinkList.dashboardFlexLinkList.enrollmentList > li .courseName {
        font-size: .9em;
        display: none;
    }


    ul.dashboardLinkList.enrollmentList .listDesc.notes {
        padding-top: .5rem;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: .25rem;
    }

    ul.dashboardLinkList.enrollmentList a.note {
        display: inline-block;
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    ul.dashboardLinkList.enrollmentList a.note::before {
        content: '';
        background: #ff9900;
        width: 8px;
        height: 8px;
        display: inline-block;
        margin-right: 0.55rem;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: .45rem;
    }

    ul.dashboardLinkList.enrollmentList ul.dashboardLinkList.enrollmentList {
        font-size: .9em;
        margin-left: 2rem;
        margin-top: .5rem;
    }

    ul.dashboardLinkList.enrollmentList ul.dashboardLinkList.enrollmentList > li { padding: .65rem 0; }

    .coursesTodayList.dashboardFlexLinkList small,
    .coursesToCancelList.dashboardFlexLinkList small,
    .coursesComingUpList.dashboardFlexLinkList small { background-color: #777; }

    .leadList.dashboardFlexLinkList small {
        background-color: var(--enrollment-state-new-color);
    }

    html.noTouch ul.dashboardLinkList.dashboardFlexLinkList button.listBtn:hover {
        background-color: var(--error-background-color);
        border-color: var(--error-border-color);
    }

    .dashboardFlexLinkList.coursesTodayList small {
    }

    .coursesComingUpBox ul.dashboardLinkList li.noEnrollments {
        display: none;
    }

    body.withAllCourses .coursesComingUpBox ul.dashboardLinkList li.noEnrollments {
        display: flex;
    }

    .coursesComingUpBox a.toggleLink span.hideEmpty {
        display: none;
    }

    body.withAllCourses .coursesComingUpBox a.toggleLink span.hideEmpty {
        display: inline;
    }

    body.withAllCourses .coursesComingUpBox a.toggleLink span.showAll {
        display: none;
    }

    #sideBar ul.dashboardLinkList {
        margin: 0 20px;
    }

    /* funky selector that prevents the weird "empty experience" when no "noEnrollments" items were found */
    .dashboardBox.coursesComingUpBox:not(:has(li.noEnrollments:not([data-temp="0"]))) li {
        display: flex;
    }

    .dashboardBox.coursesComingUpBox:not(:has(li.noEnrollments:not([data-temp="0"]))) .dashboardListAction {
        display: none;
    }

    /* mails/sms */
    ul.messageList {
        margin: 0 2em 2em;
    }

    ul.messageList > li {
        padding: 2em;
        margin-top: 2em;
        border: solid 1px #ddd;
        position: relative;
    }

    ul.messageList > li span.entityId {
        font-size: .7em;
        position: absolute;
        top: -2em;
        right: -1px;
        padding: .25em 1em;
        background: #fff;
        border: solid 1px #ddd;
        border-bottom: none;
        border-radius: 3px;
    }

    ul.messageList > li p.address {
        font-size: .9em;
        margin: 0 0 .25em;
    }

    ul.messageList > li p.subject {
        font-size: 1.1em;
        margin: 0 0 .5em;
        font-weight: 700;
    }

    ul.messageList > li div.body {
        margin-top: 1.5em;
        padding-top: 1.5em;
        border-top: dashed 1px #ddd;
    }

    .generateMessageButtons {
        margin-left: 2em;
    }

    #sideBar .messageStatus {
        margin: 2em;
        padding: .5em 1em;
        background: #444;
        color: #fff;
        border-radius: 3px;
        float: left;
    }

    #sideBar .messageStatus.success {
        background: var(--success-background-color);
    }

    #sideBar .messageStatus.error {
        background: var(--error-background-color);
    }

    #sideBar #generatedMails .messageStatus {
        float: none;
        display: inline-block;
        margin-bottom: 0;
    }

    .textMessageWarning {
        background-color: var(--emphasize-background-color);
        color: white;
        display: inline-block;
        padding: .25em;
        margin-top: 1em;
    }

    .dashboard .dateList .past {
        text-decoration: line-through;
    }

    .sentMailTable tr td:first-child {
        border-left: solid 2px #e1e6e8
    }

    .sentMailTable tr.statusSent td:first-child {
        border-left: solid 2px var(--table-row-notice-border-color);
    }

    .sentMailTable tr.statusDelivered td:first-child, .sentMailTable tr.statusOpened td:first-child {
        border-left: solid 2px var(--success-border-color);
    }

    .sentMailTable tr.statusNotDelivered td:first-child {
        border-left: solid 2px var(--error-border-color);
    }

    .sentMailTable tbody tr.statusNotDelivered .colStatus {
        color: var(--error-color);
    }

    #mailForm li.copy {
        height: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease-in-out;
        visibility: hidden;
    }

    #mailForm:not(.withCopy) li.copy {
        padding: 0;
    }

    #mailForm.withCopy li.copy {
        height: auto;
        max-height: 20em;
        visibility: visible;
    }

    #mailForm.withCopy #copyButton {
        background: var(--hover-background-color);
        color: #fff;
        border-color: var(--hover-border-color);
    }

    #mailForm #mailTo {
        vertical-align: middle;
    }

    /* certifications */
    .certificationTable tbody tr td:first-child,
    .userCertificationTable tbody tr td:first-child {
        border-left: solid 2px #c2cad2;
    }

    .certificationTable tbody tr.hasExpirationFlags td:first-child,
    .userCertificationTable tbody tr.hasExpirationFlag td:first-child {
        border-left-color: var(--error-border-color);
    }

    .certificationTable .note .tooltip,
    .userCertificationTable .note .tooltip {
        max-width: 19em;
    }

    .certificationTable tbody tr.deactivated {
        opacity: .6;
    }

    .userCertificationTable tbody tr.hasNewerVersion .col {
        color: #999;
    }

    .userCertificationTable tbody tr.hasNewerVersion .col .note {
        color: black;
    }

    .userCertificationTable .colStudent .ellipsis {
        max-width: 17rem;
    }

    .userCertificationTable .colContact .ellipsis {
        max-width: 19rem;
    }


    .tabContent[data-tab="certifications"] .toolList .custom form {
        border-left: solid 1px #ddd;
        border-right: none;
        margin: 0 0 0 1.5rem;
        padding: 0 0 0 1.5rem;
    }

    #userCertificationExpirationFlagForm a.toggleLink {
        font-size: .8em;
    }

    #userCertificationExpirationFlagForm .formList {
        margin-top: .25rem;
    }

    #userCertificationExpirationFlagForm .formList strong {
    }

    #userCertificationExpirationFlagForm .formList > li:not(.navigation) {
        clear: both;
        border-bottom: solid 1px #e1e1e1;
        padding: 1em 0;
    }

    #userCertificationExpirationFlagForm .formList ul {
        margin-left: 1rem;
    }

    #userCertificationExpirationFlagForm .formList ul li:not(.navigation) {
        clear: both;
        width: calc(100% - 2em);
        padding: .1em 0 .1em 2em;
        position: relative;
    }

    #userCertificationExpirationFlagForm .formList ul li input {
        position: absolute;
        left: 0;
        top: .55em;
    }

    #userCertificationExpirationFlagForm .formList ul li label span {
        display: block;
        font-size: .8em;
        margin-top: .25rem;
    }

    #userCertificationExpirationFlagForm .formList a.toggleLink {
        margin-left: .5rem;
    }

    #userCertificationExportForm .helpers {
        margin-top: .5rem;
    }

    #userCertificationExportForm .helper {
        padding: .25em .5em;
        font-size: .75em;
        margin: 0;
    }

    /* LOADER */
    .loader {
        display: none;
    }

    body.loading .loader {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(255,255,255,.9);
        padding: 5em 0 0 5em;
    }

    body.loading .circular {
        -moz-animation: rotate 2s linear infinite;
        -o-animation: rotate 2s linear infinite;
        -webkit-animation: rotate 2s linear infinite;
        animation: rotate 2s linear infinite;
        height: 40px;
        position: relative;
        width: 40px;
        vertical-align: middle;
        margin-right: .5em;
    }

    body.loading .path {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
        animation: dash 1.5s ease-in-out infinite;
        stroke-linecap: round;
        stroke: #5A6169;
    }

    .studentFileTable .colIcon {
        width: 4%;
        text-align: center;
    }

    .noTouch .studentFileTable .colIcon {
        cursor: move !important;
    }

    .studentFileTable .colName {
        width: 66%;
    }

    .studentFileTable .colSize {
        width: 15%;
    }

    .studentFileTable .colCreateDate {
        width: 15%;
    }

    main .fileUploadForm {
        display: none;
    }

    .fileUploadForm {
        padding: 0 1em 1em 1em;
    }

    .fileUploadForm input[type='file'] {
        position: absolute;
        left: -5000px;
    }

    .fileUploadForm .uploadingList {
        margin-top: 1em;
    }

    .fileUploadForm .uploadingList li {
        padding: .5em 0;
    }

    .fileUploadForm .uploadingList li.error {
        color: var(--error-color);
    }

    .fileUploadForm .uploadingList li.error span.progress span {
        background-color: var(--error-background-color);
    }

    .fileUploadForm .uploadingList li span {
        display: block;
    }

    .fileUploadForm .uploadingList li span.progress {
        display: none;
        background-color: #FBFBFB;
        margin-top: .2em;
    }

    .fileUploadForm .uploadingList li span.progress span {
        height: 3px;
        background-color: var(--success-background-color);
        width: 0;
    }

    .fileUploadForm .totalProgress {
        display: block;
        margin-bottom: 2em;
        background-color: #FBFBFB;
    }

    .fileUploadForm .totalProgress div {
        height: 10px;
        background-color: var(--success-background-color);
        width: 0;
    }

    .fileUploadForm button {
        padding: 0;
    }

    .fileUploadForm button label {
        padding: .5em 1em;
        display: block;
        cursor: pointer;
    }

    #filterForm {
        margin-bottom: 2em;
    }

    #filterForm li {
        display: inline-block;
    }

    .diplomaMasterTemplateBlockTable .colValue, .templateBlockValueTable .colValue {
        white-space: normal;
        width: 70%;
    }

    .diplomaMasterTemplateBlockTable .colIcon {
        width: 4%;
        text-align: center;
        color: #999;
    }

    .diplomaMasterTemplateBlockTable .colIcon:hover {
        color: #666;
    }

    .diplomaMasterTemplateBlockTable .colIcon i {
        cursor: move;
        font-size: 14px;
    }

    .diplomaMasterTemplateBlockTable .colIsEditable {
        width: 4%;
        text-align: center;
    }

    .diplomaMasterTemplateBlockTable .imageWrapper img,
    .templateBlockValueTable .imageWrapper img {
        max-width: 450px;
        max-height: 150px;
        width: 100%;
    }

    .templateBlockValueTable .colIsEditable {
        width: 4%;
        text-align: center;
    }

    .templateBlockValueTable .col p, .diplomaMasterTemplateBlockTable .col p {
        margin: 0;
    }

    .templateBlockValueTable tbody tr {
        opacity: .6;
    }

    .templateBlockValueTable tbody tr.editable {
        opacity: 1;
    }

    main .templatePreview {
        display: none;
    }

    main .diplomaTemplatePicker {
        display: none;
    }

    .diplomaTemplatePicker .enrollmentWrapper a.toggleLink,
    #enrollmentAssessmentForm a.toggleLink,
    #courseInstanceDateAttendanceForm a.toggleLink {
        margin-top: 1em;
        display: inline-block;
        text-decoration: none;
        color: #222;
    }

    .studentDiplomaTable td.col.colFileName {
        position: relative;
    }

    .studentDiplomaTable td.col.colFileName i + span {
        padding-left: 1.25rem;
    }

    .studentDiplomaTable td.col.colFileName span {
        max-width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .studentDiplomaTable td.col.colFileName i {
        font-size: 1.3em;
        position: absolute;
        left: .75rem;
        top: .75rem;
        cursor: help;
    }

    .studentDiplomaTable td.col.colName {
        max-width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
    }



    .evaluationQuestionOptions {
        position: relative;
        min-height: 150px;
        margin-top: .2rem;
    }

    .evaluationQuestionOptions .amount {
        margin-bottom: 1em;
    }

    .evaluationQuestionOptions .amount input {
        width: 5em;
    }

    .evaluationQuestionOptions .amount label.error {
        display: none !important;
    }

    .evaluationQuestionOptions .options ol {
        counter-reset: my-counter;
    }

    .evaluationQuestionOptions .options ol[data-displaytype="BestToWorst"],
    #evaluationQuestionTranslationForm .formList[data-displaytype="BestToWorst"] {
        display: flex;
        flex-direction: column-reverse;
    }

    .evaluationQuestionOptions .options ol li.option div {
        display: flex;
        flex-direction: row;
        gap: .1rem;
    }

    .evaluationQuestionOptions .options ol li.option {
        position: relative;
        padding-left: 2.25rem;
        margin-top: .2rem;
        display:inline-flex;
        gap:.25rem;
    }

    .evaluationQuestionOptions .options ol li.option .select {
        width: auto;
        padding: .25rem 0;
        min-width: auto;
    }

    .evaluationQuestionOptions .options ol li.option .select[name=emoji] {
        font-family: 'Material Symbols Outlined';
        font-size: 24px;
        font-weight: 300;
    }

    .evaluationQuestionOptions .options ol li.option .select[name=emoji] option {
        font-size: 18px;
    }

    .evaluationQuestionOptions .options ol li.option .select[disabled] {
        display: none;
    }

    .evaluationQuestionOptions .options ol li.option:before {
        display: inline-block;
        content: counter(my-counter);
        counter-increment: my-counter;
        background-color: #8f8f8f;
        color: white;
        width: 2rem;
        text-align: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .evaluationQuestionOptions .options ol li.empty {
        color: #999;
        font-style: italic;
    }

    .evaluationQuestionOptions .options input {
        font-size: .9em;
    }

    .evaluationQuestionOptions .helpers, #evaluationQuestionTranslationForm .helpers {
        font-size: .8em;
    }

    .evaluationQuestionOptions .helpers button, #evaluationQuestionTranslationForm .helpers button {
        margin: 0 .2em 1em 0;
    }

    .evaluationQuestionOptions .helpers button[disabled] {
        display: none;
    }

    .evaluationQuestionOptions .emojis {
        margin: 0 0 1rem;
        display: flex;
        align-items: center;
        gap: .25rem;
    }

    .evaluationQuestionOptions .emojis label {
        padding-top: 0;
        font-size: .9em;
    }

    .evaluationQuestionOptions .emojis input {
        margin: 0;
        top: 0;
    }

    .evaluationQuestionTable .colIcon {
        width: 3%;
    }

    .evaluationQuestionTable .colIcon i {
        vertical-align: middle;
        cursor: move;
        color: #666;
    }

    .evaluationQuestionTable .colAllowElaboration {
        width: 5%;
    }

    .evaluationQuestionTable .colTranslations {
        width: 15%;
    }

    .evaluationQuestionTable .col {
        vertical-align: middle;
    }

    .agendaTable .colIcon {
        width: 3%;
    }

    .agendaTable .colStart, .agendaTable .colEnd {
        width: 6%;
    }

    .agendaTable .colIcon i {
        vertical-align: middle;
        cursor: move;
        color: #666;
    }

    .agendaTable .col {
        vertical-align: middle;
    }

    .courseTable .colPrimaryAdministrators {
        max-width: 25em;
    }

    .courseTable .colPrimaryAdministrators span {
    }

    .studentEvaluationTable .colCreateDate {
        width: 15%;
    }

    .studentEvaluationTable .colAllowContact {
        width: 15%;
    }

    .studentEvaluationTable .colAverage {
        width: 15%;
    }

    .studentEvaluationTable .colAnswers {
        width: 15%;
        padding-bottom: .3em;
    }

    .studentEvaluationTable .colAnswers.many {
        width: 25%;
    }

    .studentEvaluationTable .colAnswers .answer {
        height: 1.3em;
        box-sizing: border-box;
        display: inline-block;
        border-radius: 1px;
        margin: 1px;
        cursor: help;
        float: left;
    }

    .studentEvaluationTable .colAnswers .answer:hover {
        opacity: .8;
    }

    .studentEvaluationTable .colAnswers .answer:last-child {
        border-right: none;
    }

    .answer.value--1-of-2, .answer.value--1-of-3, .answer.value--1-of-4, .answer.value--1-of-5,
    .answer.value--1-of-6, .answer.value--1-of-7, .answer.value--1-of-8, .answer.value--1-of-9, .answer.value--1-of-10 {
        background: var(--evaluation-result-worst-background-color);
    }

    .answer.value-0-of-2, .answer.value-0-of-3, .answer.value-0-of-4, .answer.value-0-of-5 {
        background: var(--evaluation-result-unanswered-background-color);
    }

    .answer.value-1-of-2, .answer.value-1-of-3, .answer.value-1-of-4, .answer.value-1-of-5 {
        background: var(--evaluation-result-worst-background-color);
    }

    .answer.value-2-of-3, .answer.value-3-of-5 {
        background: var(--evaluation-result-neutral-background-color);
    }

    .answer.value-2-of-5 {
        background: var(--evaluation-result-bad-background-color);
    }

    .answer.value-4-of-5 {
        background: var(--evaluation-result-good-background-color);
    }

    .answer.value-2-of-2, .answer.value-3-of-3, .answer.value-4-of-4, .answer.value-5-of-5 {
        background: var(--evaluation-result-best-background-color);
    }

    .answers .answer.value-1-of-10,
    .answers .answer.value-2-of-10 {
        background-color: var(--evaluation-result-worst-background-color);
    }

    .answers .answer.value-3-of-10,
    .answers .answer.value-4-of-10 {
        background-color: var(--evaluation-result-bad-background-color);
    }

    .answers .answer.value-5-of-10,
    .answers .answer.value-6-of-10 {
        background-color: var(--evaluation-result-neutral-background-color);
    }

    .answers .answer.value-7-of-10,
    .answers .answer.value-8-of-10 {
        background-color: var(--evaluation-result-good-background-color);
    }

    .answers .answer.value-9-of-10,
    .answers .answer.value-10-of-10 {
        background-color: var(--evaluation-result-best-background-color);
    }

    .studentEvaluationGroupList h2 {
        font-weight: 400;
        font-size: 1.65em;
    }

    .studentEvaluationGroupList h3 {
        font-weight: 400;
        font-size: 1.5em;
    }

    .studentEvaluationGroupList > li {
        margin-bottom: 3em;
    }

    .studentEvaluationGroupList .studentEvaluationQuestionList {
        border-top: solid 1px #e1e1e1;
    }

    .studentEvaluationGroupList .studentEvaluationQuestionList li {
        padding: 1em 0;
        border-bottom: solid 1px #e1e1e1;
    }

    .studentEvaluationGroupList .studentEvaluationQuestionList li label {
        padding: 0;
        width: 25em;
        font-weight: 600;
    }

    .studentEvaluationGroupList .studentEvaluationQuestionList li span {
        display: inline-block;
    }

    .studentEvaluationGroupList .studentEvaluationQuestionList li .answer {
        max-width: 60%;
    }

    .studentEvaluationGroupList .studentEvaluationQuestionList li span.answerElaboration {
        display: block;
        font-style: italic;
        margin-top: .5em;
    }

    #evaluationQuestionTranslationForm .navigation {
        margin-top: 2em;
    }

    #evaluationQuestionTranslationForm, #evaluationCategoryTranslationForm {
    }


    .translationLanguages {
        float: right;
        margin: 2em 2em 0 0;
    }

    .translationLanguages button {
        font-size: .8em;
    }

    .translationLanguages button.active {
        background: var(--active-background-color);
        color: #fff;
        border-color: var(--active-border-color);
    }

    /* tags */
    span.tag {
        display: inline-block;
        background-color: #eee;
        padding: 0.2em .5em;
        line-height: 1.35em;
        font-size: .85rem;
        color: #333;
        border-radius: 3px;
        margin: 0 .25rem .25rem 0;
    }

    div.flexTags {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        width: 100%;
        height: 100%;
        min-width: 15em;
        gap: 3px;
    }

    div.flexTags span.tag {
        margin: 0;
    }

    #tagForm li[title] {
        opacity: .5;
        cursor: not-allowed;
    }

    #tagForm li[title] input,
    #tagForm li[title] label {
        cursor: not-allowed;
    }

    /* generic notifications */
    .notifications {
        position: fixed;
        right: 2em;
        top: 7.5em;
        z-index: 101;
        transition: top ease-in-out .3s;
    }

    .notifications .trigger {
        display: block;
        text-align: center;
        margin-bottom: .5em;
    }

    .notifications .trigger i {
        color: #c1c1c1;
        font-size: 2em;
        width: 1.8em;
        line-height: 1.8em;
        background-color: #f6f6f6;
        border-radius: 9999px;
    }

    .notifications .trigger:hover {
    }

    .notifications > .overdue .trigger i {
        background-color: var(--error-background-color);
        color: white;
    }

    .notifications > .current .trigger i {
        background-color: var(--emphasize-background-color);
        color: white;
    }

    .notifications > .allChecked .trigger i {
        background-color: var(--success-background-color);
        color: white;
    }

    body.scrolledToTabContent .notifications {
        top: 11em;
    }

    /* checklists */
    /*    .checklistItemForm {
        font-size: .8em;
    }
*/
    .checklistItemForm input, .checklistItemForm select, .checklistItemForm button {
        display: inline-block;
        position: static;
    }

    .checklistItemForm input[type='number'] {
        width: 3em;
    }

    .checklistItemForm select {
        width: 8em;
        min-width: unset;
    }

    .checklistItemForm input[name='text'] {
        width: 20em;
    }

    .courseChecklistItemTable .col {
        vertical-align: middle;
    }

    .courseChecklistItemTable .colEntity {
        width: 8%;
    }

    .courseChecklistItemTable .colDays {
        width: 10%;
        text-align: center;
    }

    .courseChecklistItemTable .colSequence {
        width: 15%;
        text-align: center;
    }

    .courseChecklistItemTable .colDate {
        width: 15%;
        text-align: center;
    }

    .courseChecklistItemTable .colIcon {
        width: 3%;
    }

    .courseChecklistItemTable .colIcon i {
        vertical-align: middle;
        cursor: move;
        color: #666;
    }

    #checklistWrapper {
        display: block;
    }

    #checklistWrapper .triggerWrapper {
    }

    #checklistWrapper .checklist {
        display: none;
    }

    #checklistWrapper.cancelled .trigger i { background: #ddd; color: #666; }

    #sideBar .checklist {
        padding: 2em 1.5em;
    }

    #sideBar .checklistItemList label {
        width: unset;
        max-width: 25em;
        font-size: 1rem;
        padding-top: 0;
        cursor: pointer;
    }

    #sideBar i.checklistTypeIcon {
        font-size: 1.5rem;
    }

    #sideBar .subChecklistItemList i.checklistTypeIcon {
        font-size: 1.25rem;
    }

    #sideBar .checklist li {
        position: relative;
    }

    #sideBar .checklist .subChecklistItemList {
        margin: .25rem 0 .75rem 4rem;
    }

    #sideBar .subChecklistItemList.continuousEnrollments {
        margin-left: 2rem;
    }

    #sideBar .checklist .subChecklistItemList > li + li {
        margin-top: .5rem;
    }

    /*    #sideBar .checklist .checklistItemList > li {
        position: relative;
        padding-left: 1.75em;
    }
*/
    #sideBar .checklist .checklistItemList > li + li {
        margin-top: 1rem;
    }

    #sideBar .checklist .checklistItemList li > i {
        font-size: 1.5em;
        position: absolute;
        left: 0;
        top: 0;
        color: #e1e1e1;
    }

    #sideBar .checklist .checklistItemList .overdue > .flex i.checklistTypeIcon,
    #sideBar .checklist .subChecklistItemList .overdue form > i.checklistTypeIcon {
        color: var(--error-color);
    }

    #sideBar .checklist .checklistItemList .current > .flex i.checklistTypeIcon,
    #sideBar .checklist .subChecklistItemList .current form > i.checklistTypeIcon {
        color: var(--emphasize-color);
    }

    #sideBar .checklist .checklistItemList .checked > .flex i.checklistTypeIcon,
    #sideBar .checklist .subChecklistItemList .checked form > i.checklistTypeIcon {
        color: var(--success-color);
    }

    /*    #sideBar .checklist .checklistItemList form {
        display: inline-block;
        vertical-align: middle;
    }
*/
    /*    #sideBar .checklistItemForm {
        padding-left: 2.25rem;
        position: relative;
    }

    #sideBar .checklistItemForm .checkbox {
        position: absolute;
        left: .15rem;
    }*/

    #sideBar li.justChecked::after {
        content: var(--just-changed-info);
        position: absolute;
        right: 0;
        top: .1rem;
        font-size: .75em;
        opacity: 1;
        background: #f5f5f5;
        padding: .2rem .4rem;
        border-radius: 4px;
        border: solid 1px #ddd;
    }

    #sideBar li.justChecked.current > .checklistItemForm .checkbox {
        border: solid 1px var(--emphasize-color);
    }

    #sideBar li.justChecked.overdue > .checklistItemForm .checkbox {
        border: solid 1px var(--error-color);
    }

    #sideBar li.justChecked > .checklistItemForm .checkbox:checked {
        border: solid 1px var(--success-color);
    }

    #sideBar .checklistItemList small {
        display: none;
        color: #888;
        overflow: hidden;
        padding: 0;
        margin: 0;
        font-size: .785rem;
    }

    #sideBar .checklist .checklistItemList .entityChecklistItemNoteForm textarea {
        height: 1rem;
        min-height: 1rem;
        resize: none;
        overflow: hidden;
        margin-bottom: .5rem;
        display:block;
    }

    #sideBar .checklist .checklistItemList .entityChecklistItemNoteForm {
        font-size: .9em;
        width: calc(100% - 4rem);
        margin: .5rem 0 .5rem 4rem;
        display: none;
        box-sizing: border-box;
        max-height: 0;
        height: 0;
        overflow: hidden;
        transition: max-height .3s ease-in-out;
    }

    #sideBar .checklist .checklistItemList .instanceEnrollments .entityChecklistItemNoteForm {
        margin-left: 2.25rem;
    }

    #sideBar .checklist .checklistItemList .entityChecklistItemNoteForm button {
        padding: .45rem .75rem;
        margin-right: .5rem;
    }

    #sideBar .checklist .item .note {
        max-height: 50em;
        height: auto;
        width: calc(100% - 4rem);
        overflow: hidden;
        transition: max-height .3s ease-in-out;
        margin-left: 2.25rem;
        margin-top:.25rem;
    }

    #sideBar .checklist .item .note.postponeNote {
        display: none;
    }

    #sideBar .checklist.showLogInformation .item .note.postponeNote {
        display: block;
        margin-bottom: .25rem;
    }

    #sideBar .checklist .item.instance .note {
        margin-left: 4.25rem;
        margin-top: .25rem;
    }

    #sideBar .checklist.showLog .item .note {
        margin-top: .35rem;
    }

    #sideBar .checklist .item .note p {
        margin: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .85rem;
    }

    #sideBar .checklist .editNoteTrigger,
    #sideBar .checklist .postponeTrigger {
        margin-left: .5rem;
        opacity: .75;
    }

    #sideBar .checklist .editNoteTrigger i,
    #sideBar .checklist .postponeTrigger i {
        font-size: 1.25rem;
    }

    #sideBar .checklist .postponeTrigger.postponed i {
        color: var(--success-color);
    }

    #sideBar .checklist .editNoteTrigger:hover,
    #sideBar .checklist .postponeTrigger:hover {
        opacity: 1;
    }

    #sideBar .checklist .checklistItemList:has(.useOnCancelled) .item:not(.useOnCancelled) { filter: grayscale(1); }
    #sideBar .checklist .checklistItemList:has(.useOnCancelled) .item:not(.useOnCancelled) label { opacity: .75; }
    #sideBar .checklist .checklistItemList:has(.useOnCancelled)::before { content: 'Kursusforløbet er aflyst'; margin-top: -.25rem; position: relative; display: block; margin-bottom: 1rem; font-weight: 500; }
    #sideBar .checklist .checklistItemList .item.useOnCancelled + .item:not(.useOnCancelled) { margin-top: 3rem; }
    #sideBar .checklist .checklistItemList .item.useOnCancelled + .item:not(.useOnCancelled)::before { content: ''; position: absolute; inset: 0; height: 1px; background-color: #e1e1e1; top: -1.5rem; }

    #sideBar .checklist .editNote > .note {
        max-height: 0;
        height: 0;
        margin-top: 0;
    }

    #sideBar .checklist .editNote > .note small {
        margin-top: 0;
    }

    #sideBar .checklist .editNote > .flex .entityChecklistItemNoteForm,
    #sideBar .checklist .editNote > .flex + .entityChecklistItemNoteForm {
        display: block;
        max-height: 50em;
        height: auto;
    }

    #sideBar .checklist.editNoteMode li:not(.editNote) > .checklistItemForm,
    #sideBar .checklist.editNoteMode li:not(.editNote) > .note {
        opacity: .5;
        pointer-events: none;
        cursor: not-allowed;
    }

    #sideBar .checklist.editNoteMode a.editNoteTrigger {
        display: none;
    }

    #sideBar .checklistItemList small.postponeInfo {
        display: block;
        color: #000;
    }

    #sideBar .checklist + .postponeFormWrapper {
        position: absolute;
        top: 0;
        left: 100%;
        right: 0;
        bottom: 0;
        background: #fff;
        border-left: solid 1px #ddd;
        box-shadow: rgba(0, 0, 0, .15) -4px 2px 15px;
        transition: left .25s ease-in;
    }

    #sideBar .checklist + .postponeFormWrapper.active {
        left: 2rem;
    }

    #sideBar .postponeFormWrapper h3.postponeFormHeader {
        margin: 0;
        padding: 1rem 1.5rem;
        background: #f5f5f5;
        font-size: 1.1rem;
        font-weight: 500;
    }

    .dashboard .checkList small {
        color: white;
        top: .1em;
        max-width: calc(30% - 1.4em - 1em);
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .dashboard .checkList .overdue small {
        background-color: var(--error-background-color);
    }

    .dashboard .checkList .current small {
        background-color: var(--emphasize-background-color);
    }

    .dashboard .checkList p {
        display: inline-block;
        width: 70%;
        overflow: hidden;
        float: right;
        padding-top: .4em;
    }

    ul.dashboardLinkList.checkList li a {
        max-width: unset;
    }

    #sideBar .checklist.showLogInformation .item small {
        display: block;
        height: auto;
        max-height: 10rem;
    }

    #sideBar .checklist.showLogInformation .item small.author {
        margin-left: 4rem;
        margin-bottom: .25rem;
    }

    #sideBar .checklist.showLogInformation .item.instance small:not(.noteAuthor, .postponeInfo) {
        margin-left: 4.25rem;
    }

    #sideBar .checklist.showLogInformation .item.enrollment .instanceEnrollments small:not(.noteAuthor, .postponeInfo, .postponeLogInfo) {
        margin-left: 2.25rem;
    }

    #sideBar .checklist.showLogInformation .item small.noteAuthor {
        margin-top: .2rem;
    }

    #sideBar .checklist.showLogInformation .filterWrapper .checklistLogTrigger,
    #sideBar .checklist.requiresAttentionFilter .filterWrapper .requiresAttentionTrigger {
        background-color: var(--active-background-color);
        color: white;
    }

    #sideBar .checklist.requiresAttentionFilter .checklistItemList > li:not(.overdue,.current,.justChecked),
    #sideBar .checklist.requiresAttentionFilter .subChecklistItemList > li:not(.overdue,.current,.justChecked) {
        display: none;
    }

    #sideBar .checklist .filterWrapper {
        display: flex;
        gap: .4rem;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 2rem;
    }

    #sideBar .checklist .filterWrapper h2 {
        font-weight: 500;
        font-size: .9em;
        margin: 0 .35rem 0 0;
    }

    #sideBar .checklist .filterWrapper .filter {
        display: inline-block;
        padding: .35rem .65rem;
        background-color: rgba(0,0,0,.1);
        font-size: .9em;
        border-radius: 4px;
        transition: .1s ease-in-out;
    }

    .noTouch #sideBar .checklist .filterWrapper .filter:hover {
        transform: scale(1.025);
    }

    /*    #sideBar .checklist[data-coursemode="ContinuousEnrollment"] .subChecklistItemList .checklistItemForm {
        padding-left: 3rem;
    }

    #sideBar .checklist[data-coursemode="ContinuousEnrollment"] .subChecklistItemList .checklistItemForm i {
        position: absolute;
        left: 0;
        font-size: 1.6em;
    }

    #sideBar .checklist[data-coursemode="ContinuousEnrollment"] .subChecklistItemList .checklistItemForm .checkbox {
        left: 1.15rem;
    }*/

    #sideBar .checklist[data-coursemode="ContinuousEnrollment"] .item .note {
        margin-left: 4rem;
    }



    #sideBar .entityReminderListWrapper .log {
        height: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease-in-out;
    }

    #sideBar .entityReminderListWrapper.showLog .log {
        height: auto;
        max-height: 10em;
    }

    #sideBar .entityReminderListWrapper .entityReminderList {
        margin-top: 1.25rem;
    }

    /* reminders */
    #entityReminderWrapper .trigger i {
        background: #ddd;
        color: #666;
    }

    #entityReminderWrapper .trigger[data-count] {
        position: relative;
    }

    #entityReminderWrapper .trigger[data-count]::after {
        content: attr(data-count);
        position: absolute;
        top: 50%;
        margin-top: -.5rem;
        left: 0;
        right: 0;
        font-size: .9em;
        display: block;
        line-height: 1rem;
        text-align: center;
        border-radius: 50%;
        display: block;
        font-weight: 700;
        letter-spacing: -2px;
        margin-left: -2px;
        color: #ddd;
    }

    #entityReminderWrapper.allDisabled .trigger[data-count]::after {
        color: var(--success-color);
    }

    #entityReminderWrapper.overdue .trigger[data-count]::after {
        color: var(--error-color);
    }

    #entityReminderWrapper.current .trigger[data-count]::after {
        color: var(--emphasize-color);
    }

    #entityReminderWrapper.allDisabled .trigger i {
        background: var(--success-background-color);
        color: white;
    }

    #entityReminderWrapper.overdue .trigger i {
        background: var(--error-background-color);
        color: white;
    }

    #entityReminderWrapper.current .trigger i {
        background: var(--emphasize-background-color);
        color: white;
    }

    .entityReminderList > li {
        position: relative;
        padding: .25rem 4rem .25rem 4rem;
    }

    .entityReminderList > li > i {
        position: absolute;
        left: 0;
        top: .25rem;
        color: #666;
    }

    .entityReminderList > li label {
        width: 100%;
        padding: 0;
    }

    .entityReminderList > li label strong {
        font-weight: 500;
        display: block;
    }

    .entityReminderList > li label small {
        color: #999;
    }

    .entityReminderList > li form {
        position: absolute;
        left: 2rem;
    }

    .entityReminderList > li .actions {
        position: absolute;
        right: 0;
        top: .5rem;
        left: calc(100% - 4rem);
        text-align: right;
    }

    #sideBar .entityReminderList > li .actions a {
        display: inline-block;
        color: #999;
        transition: color .3s ease-in-out;
    }

    #sideBar .entityReminderList > li:hover .actions a {
        color: #333;
    }

    .entityReminderList .reminder.disabled > i {
        color: #999;
    }

    .entityReminderList .reminder.overdue > i {
        color: var(--error-color);
    }

    .entityReminderList .reminder.current > i {
        color: var(--emphasize-color);
    }

    #btnCreateEntityReminder {
        margin-top: 2em;
    }

    .dashboard .reminderList li {
        position: relative;
    }

    .dashboard .reminderList li small {
        position: relative;
        color: white;
        margin-right: 1em;
        top: .1em;
        max-width: calc(37% - 1.4em - 1em);
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .dashboard .reminderList li p {
        display: inline-block;
        width: 70%;
        float: right;
        padding-top: .4em;
    }

    .dashboard .reminderList li a {
        max-width: 95%;
    }

    .dashboard .reminderList .overdue small {
        background-color: var(--error-background-color);
    }

    .dashboard .reminderList .current small {
        background-color: var(--emphasize-background-color);
    }

    .dashboard .reminderList .comment {
        padding-top: 0;
    }


    /* leads */
    .leadEnrollmentCheckList li {
        padding: 1.5em 1.25em;
        border-bottom: solid 1px #e1e1e1;
    }

    .leadEnrollmentCheckList li strong {
        display: block;
    }

    .leadEnrollmentCheckList li label {
        width: 25em;
        padding-top: 0;
        font-weight: 400 !important;
    }

    .leadEnrollmentCheckList li span {
        display: block;
    }

    .leadEnrollmentCheckList li i {
        float: right;
        font-size: 1.6em;
        color: var(--error-color);
        cursor: help;
    }

    /* login */
    .loginpage .wrapper {
        width: 680px;
        margin: 25vh auto 0;
    }

    .loginpage header {
        margin-bottom: 0;
        text-transform: none;
        display: block;
        text-align: center;
        margin: 0 0 0 0;
    }

    .loginpage header::before {
        display: inline-block;
        vertical-align: middle;
    }

    .loginpage header::after {
        font-size: 1.85em;
        font-weight: 400;
        display: inline-block;
        vertical-align: middle;
    }

    .loginpage .formList li label {
        text-align: right;
        margin-right: 1em;
    }

    .loginpage .formList li.navigation button {
        margin-left: 13.25em;
        margin-right: 1.25em;
    }

    .loginpage form div.status {
        margin-left: 13.25em;
    }

    .loginpage #resetPasswordForm {
        display: none;
    }

    /* warnings */
    .warning:not(tr, input), .nameTagsInfo {
        color: #fff;
        background: var(--emphasize-background-color);
        padding: 0.5em 1em;
        font-size: .9em;
        margin: 2em 2em;
        display: inline-block;
        border-radius: 3px;
        max-width: 50em;
    }

    .warning:not(tr, input) {
        max-width: 30em;
    }

    .warning:not(tr, input) + .warning:not(tr, input) {
        margin-top: -1rem;
    }

    .warning.innerWarning {
        margin: .5em 0;
        max-width: fit-content;
    }

    .cardHeader + .warning {
        margin-top: 0;
        margin-left: 0;
    }

    .nameTagsInfo,
    .participantListInfo {
        margin: 0 0 1em 0;
        line-height: 1.35em;
    }

    fieldset .warning {
        margin-left: 0;
    }

    .overbookedWarning {
        display: block;
    }

    /* move enrollment */
    main .moveEnrollmentWrapper {
        display: none;
    }

    /* enrollment form */
    #enrollmentCompanyVatCountryCode {
        min-width: 4em;
        padding: .43em .75em;
    }

    #enrollmentCompanyVatCountryCode + input {
        width: 10.1em;
    }

    /* name tags & participant list */
    .nameTags, .participantList {
        width: 210mm;
        height: 297mm;
        margin: 2em auto;
        border: solid 1px #ddd;
    }

    .nameTags .margins {
        margin: 0 15mm;
    }

    .nameTags .nameTag {
        float: left;
        position: relative;
        width: 90mm;
        height: 59.4mm;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: dashed 1px #ddd;
    }

    .nameTags .nameArea {
        position: absolute;
        left: 10mm;
        right: 10mm;
        top: 20mm;
        max-height: 25mm;
        overflow: hidden;
    }

    .nameTags h1 {
        margin: 0;
        font-weight: 600;
        font-size: 15pt;
        white-space: nowrap;
    }

    .nameTags h2 {
        margin: 0;
        font-weight: 400;
        font-size: 11pt;
        padding-top: 2mm;
        white-space: nowrap;
    }

    .nameTags .courseArea {
        position: absolute;
        right: 10mm;
        bottom: 7mm;
        overflow: hidden;
        text-align: right;
    }

    .nameTags .courseName {
        font-size: 9pt;
        font-weight: 600;
        margin-bottom: 1mm;
    }

    .nameTags .courseInstanceName {
        font-size: 8pt;
    }

    .nameTags.type1 .margins {
        margin: 0 15mm;
    }

    .nameTags.type1 .nameTag {
        width: 90mm;
        height: 59.4mm;
    }

    .nameTags.type1 .nameArea {
        left: 10mm;
        top: 20mm;
        max-height: 25mm;
    }

    .nameTags.type2 {
        width: 297mm;
        height: 210mm;
        zoom: .7;
    }

    .nameTags.type2 .margins {
        margin: 105mm 0 0;
    }

    .nameTags.type2 .nameTag {
        width: 297mm;
        height: 105mm;
    }

    .nameTags.type2 .nameArea {
        left: 30mm;
        right: 30mm;
        top: 30mm;
        max-height: 45mm;
    }

    .nameTags.type2 .courseArea {
        right: 15mm;
        bottom: 12mm;
    }

    .nameTags.type2 h1 {
        font-size: 50pt;
    }

    .nameTags.type2 h2 {
        font-size: 30pt;
    }

    .nameTags.type2 .courseName {
        font-size: 18pt;
        margin-bottom: 2mm;
    }

    .nameTags.type2 .courseInstanceName {
        font-size: 12pt;
    }

    #nameTagsPrintButton, #participantListPrintButton {
        float: right;
        margin: 1em;
    }

    body.ie-edge .nameTagsInfo p.ie-edge, body.ie-edge .participantListInfo p.ie-edge {
        margin: 0 0 .7em;
        display: block !important;
    }

    .nameTagsPage form label {
        width: auto;
    }

    .participantList {
        height: auto;
    }

    .participantList .margins {
        margin: 15mm;
    }

    .participantList h1 {
        font-size: 1.4em;
        font-weight: 500;
    }

    .participantList h2 {
        font-size: 1.2em;
        font-weight: 500;
        margin-top: 1.5em;
    }

    .participantList .infoList li {
        margin-bottom: .5em;
    }

    .participantList .infoList li label {
        font-weight: 600;
        display: block;
    }

    .participantList .infoList .dateList li {
        margin: 0;
    }

    .participantList table {
        width: 100%;
    }

    .participantList table th {
        font-weight: 500;
        text-align: left;
    }

    .participantList table .col {
        padding: .1em 0;
    }

    .participantList table .colCompany {
        width: 40%;
    }

    .participantList table tbody .firstInGroup .col {
        padding-top: .5em;
    }

    .participantList table tbody .lastInGroup .col {
        padding-bottom: .5em;
    }

    /* latest lists */
    ul.dashboardLinkList li small.enrollmentState1, ul.dashboardLinkList li small.leadState1 {
        background: var(--enrollment-state-new-color);
    }

    ul.dashboardLinkList li small.enrollmentState2, ul.dashboardLinkList li small.leadState5 {
        background: var(--enrollment-state-pending-color);
    }

    ul.dashboardLinkList li small.enrollmentState3, ul.dashboardLinkList li small.leadState4 {
        background: var(--enrollment-state-approved-color);
    }

    ul.dashboardLinkList li small.enrollmentState4, ul.dashboardLinkList li small.leadState3 {
        background: var(--enrollment-state-rejected-color);
    }

    ul.dashboardLinkList li small.enrollmentState5, ul.dashboardLinkList li small.leadState2 {
        background: var(--enrollment-state-cancelled-color);
    }

    ul.dashboardLinkList li small.enrollmentState7 {
        background: var(--enrollment-state-temporarily-approved-color);
    }

    ul.dashboardLinkList li small.enrollmentStateDraft {
        background: var(--enrollment-draft-color);
    }

    ul.dashboardLinkList li span.enrollmentCount span.approved {
        color: var(--state-approved-color);
    }


    /* auto task */
    .autoTaskJobActionList {
    }

    .autoTaskJobActionList li {
        margin: .5em 0;
        padding: .5em 0;
        border-bottom: solid 1px #e1e1e1;
    }

    .autoTaskJobActionList li .date {
        display: block;
        font-weight: 600;
        margin-bottom: .25em;
    }

    .autoTaskJobActionList li .text {
        display: block;
    }

    .autoTaskJobActionList li .error {
        color: var(--error-color);
        font-size: .9em;
        font-style: italic;
    }

    /* user access */
    .accessPolicyWrapper {
        max-width: 600px;
        margin-top: 5em;
    }

    .accessPolicyWrapper > .accessPolicyList > li {
        background: #f5f5f5;
        margin: .5em 0;
        padding: .85em .75em .75em;
        border-top: solid 1px #ddd;
        border-bottom: solid 1px #ddd;
    }

    .accessPolicyWrapper > .accessPolicyList > li > label {
        font-weight: 700;
    }

    .accessPolicyWrapper .accessPolicyList .accessPolicyList {
        margin: .25em 0 .25em 2em;
    }

    .accessPolicyWrapper .accessPolicyList .accessPolicyList li {
        padding: .1em 0;
    }

    .accessPolicyWrapper .accessPolicyList ul ul label {
        font-size: .9em;
        vertical-align: text-top;
    }

    .accessPolicyWrapper .navigation {
        margin-top: 2em;
        text-align: right;
    }

    .accessPolicyWrapper label, .accessPolicyWrapper input {
        cursor: pointer;
    }

    /* copy enrollments */
    .copyEnrollmentList {
        margin-top: 2em;
        border-top: solid 1px #e1e1e1;
    }

    .copyEnrollmentList li {
        padding: .5em;
        border-bottom: solid 1px #e1e1e1;
    }

    .copyEnrollmentList li .name {
        display: inline-block;
        width: 80%;
    }

    .copyEnrollmentList li .status {
        display: inline-block;
        width: 18%;
        text-align: right;
    }

    .copyEnrollmentList li .errorMessage {
        display: block;
        font-size: .9em;
        font-style: italic;
        margin-top: .25em;
    }

    .copyEnrollmentList li.queued {
        color: #888;
    }

    .copyEnrollmentList li.processing {
        color: #333;
    }

    .copyEnrollmentList li.processed .name {
        text-decoration: line-through;
    }

    .copyEnrollmentList li.processed.success {
        color: var(--success-color);
    }

    .copyEnrollmentList li.processed.error {
        color: var(--error-color);
    }

    .copyEnrollmentList li.processed.error .status {
        cursor: help;
    }

    /* calendar */
    .calendar {
        margin: 0 2em;
        max-width: 1000px;
        border-radius: 5px;
    }

    .calendarList {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        background-color: #F1F2F3;
        padding: .2em;
    }

    .calendarList > li {
        flex: 14.28%;
        max-width: 14.28%;
        border: solid .2em #F1F2F3;
        padding: .25em;
        box-sizing: border-box;
        position: relative;
    }

    .calendarList.noWeekends .weekend {
        display: none;
    }

    .calendarList.noWeekends > li {
        flex: 20%;
        max-width: 20%;
    }

    .calendarList .dayHeader {
        font-weight: 500;
        text-align: center;
    }

    .calendarList .date {
        background-color: white;
        min-height: 7em;
    }

    .calendarList .date .day {
        font-size: 1.2rem;
        display: inline-block;
        border-radius: 50%;
        width: 2.65rem;
        height: 2.65rem;
        text-align: center;
        line-height: 2.65rem;
        margin-bottom: .25em;
    }

    .calendarList .date .day:after {
        content: '';
    }

    .calendarList .date .week {
        position: absolute;
        font-size: .8em;
        color: #999;
        top: .75rem;
        right: .5rem;
        text-transform: capitalize;
    }

    .calendarList .date.today .day {
        background: #dcdfe2;
        color: #032435;
    }

    .calendarList .date.notThisMonth {
        opacity: .4;
    }

    .calendarList .eventList {
        font-size: .75em;
    }

    .calendarList .eventList li {
        margin: .1em 0;
    }

    .calendarList .eventList a, .instructorCalendar .personList span {
        display: block;
        padding: .25em .5em;
        border-radius: 3px;
        color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendarList .eventList a.event {
        background-image: repeating-linear-gradient( 125deg, transparent, transparent 2px, rgba(255,255,255,.15) 0px, rgba(255,255,255,.15) 3px);
    }

    .calendarList .eventList a[href]:hover {
        color: #fff !important;
        opacity: .8;
    }

    #calendarWrapper .calendarHeader {
        position: relative;
        text-align: center;
        background-color: #004467;
        padding: .8em 0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    #calendarWrapper .calendarHeader h2 {
        margin: 0;
        font-weight: normal;
        font-size: 1.25em;
        color: white;
    }

    #calendarWrapper .calendarHeader a {
        position: absolute;
        top: .4em;
        color: white;
    }

    #calendarWrapper .calendarHeader a:hover {
        color: #fff;
        opacity: .8;
    }

    #calendarWrapper .calendarHeader a i {
        font-size: 2.4em;
    }

    #calendarWrapper .calendarHeader a:nth-of-type(1) {
        left: 0.5em;
    }

    #calendarWrapper .calendarHeader a:nth-of-type(2) {
        right: 0.5em;
    }

    #calendarForm .formList > li:nth-of-type(1n+2) {
        display: inline-block;
        float: none;
        margin-right: .5em;
    }

    #calendarForm .formList .select:not([multiple]) {
        min-width: unset;
    }

    #calendarForm .formList #instructors {
        min-width: 50em;
    }

    #calendarForm .navigation {
        padding-top: .25em;
    }

    /* instructor calendar */
    .instructorCalendar .personList {
        font-size: .85em;
        margin-bottom: .75em;
    }

    .instructorCalendar .personList li {
        display: inline-block;
        margin-right: .25em;
    }

    /* location calendar */
    #calendarForm .formList > li {
        display: inline-block;
        float: none;
        margin-right: .5em;
    }

    .calendarList .eventList a {
        background-color: var(--active-background-color);
    }

    /* agenda mapper */
    #courseInstanceDateAgendaMappingForm.processing {
        color: #999;
    }

    #courseInstanceDateAgendaMappingForm .courseInstanceDateList > li:not(.navigation) {
        margin: 0;
        padding: 1em 0;
        border-bottom: solid 1px #eee;
    }

    #courseInstanceDateAgendaMappingForm .courseInstanceDateList label {
        padding-top: 0;
        vertical-align: middle;
        font-weight: 500;
    }

    #courseInstanceDateAgendaMappingForm .courseInstanceDateList .existingAgenda,
    #courseInstanceDayAgendaMappingForm .courseInstanceDayList .existingAgenda {
        line-height: 2.5em;
        display: inline-block;
        vertical-align: middle;
        color: #999;
    }

    #courseInstanceDateAgendaMappingForm .courseInstanceDateList > li.processed.success label {
        color: var(--success-color);
    }

    #courseInstanceDateAgendaMappingForm .courseInstanceDateList > li.processed.error label {
        color: var(--error-color);
    }

    #courseInstanceDateAgendaMappingForm .courseInstanceDateList > li.processed.error:after {
        content: attr(data-error);
        color: #BF4949;
        display: block;
        font-size: .85em;
        margin: .5em 0 0 12.5rem;
    }

    /* classroom profile */
    .classroomUserAvatar {
        display: inline-block;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .classroomUserAvatar:not([style]) {
        background-color: #e1e1e1;
    }

    #classroomProfileAvatarForm .avatar {
        text-align: center;
        max-width: 6em;
    }

    .classroomFormWrapper h3 {
        text-transform: uppercase;
        color: #7e8387;
        border-bottom: solid 1px #ddd;
        margin: 1.5em 0 0;
    }

    .classroomFormWrapper fieldset {
        padding-top: 0;
        padding-bottom: 0;
    }

    .classroomFormWrapper .pad {
    }

    /* roles */
    #userUserRoleForm .formList {
        max-width: 50em;
    }

    #userUserRoleForm .formList > li:not(.navigation) {
        padding: 1rem 0 1rem 2rem;
        border-bottom: solid 1px #ddd;
        position: relative;
    }

    #userUserRoleForm .formList > li input[type="checkbox"] {
        position: absolute;
        top: .85rem;
        left: 0;
        cursor: pointer;
    }

    #userUserRoleForm .formList > li input[type="checkbox"]:disabled {
        cursor: not-allowed;
    }

    #userUserRoleForm .formList > li label {
        padding: 0;
        cursor: pointer;
    }

    #userUserRoleForm .formList > li input[type="checkbox"]:disabled + label {
        cursor: not-allowed;
    }

    #userUserRoleForm .formList > li p {
        margin: 0;
        font-size: .85em;
    }

    /* personal data */
    div.courseInstancePersonalDataCollectionCard {
        margin-bottom: 0;
    }

    div.courseInstancePersonalDataCollectionCard + .pad {
        padding-top: 0;
    }

    .personalDataList {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: -.5em;
    }

    .personalDataList > li {
        box-sizing: border-box;
        border: solid 1px #ddd;
        border-radius: 4px;
        margin: .5em;
        padding: 1em 1em 3em;
        width: calc(33.33% - 1em);
        position: relative;
    }

    .personalDataList h4 {
        margin: 0 0 .5rem;
    }

    .personalDataList p {
        margin: 0 0 .5em;
    }

    .personalDataList .addData {
        color: var(--active-color);
    }

    .enrollmentDataList {
        margin: .5em 1em;
    }

    .enrollmentDataList li {
        position: relative;
        padding: .5em 2em .5em 0;
        border-bottom: solid 1px #f1f1f1;
    }

    .enrollmentDataList li:last-child {
        border-bottom: none;
    }

    .enrollmentDataList li .actions {
        position: absolute;
        right: 0;
        top: .5rem;
    }

    .enrollmentDataList li .actions .action {
        opacity: .5;
        transition: opacity .3s ease-in-out;
    }

    .enrollmentDataList li:hover .actions .action {
        opacity: 1;
    }

    .enrollmentDataList li:hover .actions .action.delete:hover {
        color: var(--error-color);
    }

    #multiNoteForm {
    }

    #multiNoteForm textarea {
        height: 1.25em;
        resize: none;
        max-width: none;
        width: 96%;
    }

    #multiNoteForm label {
        width: 20em;
        padding-top: 0;
    }

    #multiNoteForm.hasData #excel {
        display: none;
    }

    #multiNoteForm #enrollments {
        transition: max-height .3s ease-in-out;
    }

    #multiNoteForm:not(.hasData) #enrollments {
        padding-top: 0;
        padding-bottom: 0;
        height: 0;
        max-height: 0;
        overflow: hidden;
    }

    #multiNoteForm .navigation button {
        margin-left: 20.25em;
    }

    #courseInstanceDatesTable tr.new td:first-child {
        border-left: solid 3px var(--success-border-color);
    }

    #courseInstanceDatesTable tr.outOfRange,
    #courseInstanceDatesTable tr.deleted {
        opacity: .5;
        pointer-events: none;
    }

    #courseInstanceDatesTable tr.outOfRange td:first-child,
    #courseInstanceDatesTable tr.deleted td:first-child {
        border-left: solid 3px var(--error-border-color);
    }

    #courseInstanceDatesTable tr.new.deleted {
        display: none;
    }

    #courseInstanceDaysTable tr.new td:first-child {
        border-left: solid 3px var(--success-border-color);
    }

    #courseInstanceDaysTable td.name {
        width: 20%;
    }

    #enrollmentDayDatesTable td.time,
    #courseInstanceDatesTable td.time,
    #courseInstanceDaysTable td.time {
        width: 5%;
        min-width:10rem;
    }

    #courseInstanceDatesTable td.time .autoSuggestTrigger,
    #courseInstanceDaysTable td.time .autoSuggestTrigger {
        display: inline-block;
        font-size: 1.25em;
        top: 0.25em;
        position: relative;
        left: .2em;
    }

    #courseInstanceDatesTable td.time.hasAutoSuggest .autoSuggestTrigger,
    #courseInstanceDaysTable td.time.hasAutoSuggest .autoSuggestTrigger {
        transform: rotate(180deg);
    }

    #enrollmentDayDatesTable td.time input.textBox.time,
    #courseInstanceDatesTable td.time input.textBox.time,
    #courseInstanceDaysTable td.time input.textBox.time {
        width: 3em;
    }

    #enrollmentDayDatesTable td.time .timePickerWrapper,
    #courseInstanceDatesTable td.time .timePickerWrapper,
    #courseInstanceDaysTable td.time .timePickerWrapper {
        position: relative;
    }

    #enrollmentDayDatesTable td.time .timePickerWrapper:first-child::after,
    #courseInstanceDatesTable td.time .timePickerWrapper:first-child::after,
    #courseInstanceDaysTable td.time .timePickerWrapper:first-child::after {
        content: "-";
    }

    #courseInstanceDatesTable td.description,
    #courseInstanceDaysTable td.description {
        width: 30%;
    }

    #courseInstanceDatesTable td.description textarea.textBox,
    #courseInstanceDaysTable td.description textarea.textBox {
        width: calc(100% - 1.5em);
        max-width: none;
    }

    #courseInstanceDatesTable td.tags,
    #courseInstanceDaysTable td.tags {
        width: 30%;
    }

    .courseInstanceDateTable .col,
    .courseInstanceDayTable .col {
        width: 5%;
    }

    .courseInstanceDateTable .col:has(.flexTags),
    .courseInstanceDayTable .col:has(.flexTags) {
        padding: .55rem .5rem;
    }

    .courseInstanceDateTable .colOrigin {
        width: 12%;
        max-width: 12em;
    }

    .courseInstanceDayTable .colName {
        width: 15%;
        max-width: 25em;
    }

    .courseInstanceDayTable .colTime {
        width: 8%;
    }

    .courseInstanceDateTable .colAgendaCount::after,
    .courseInstanceDayTable .colAgendaCount::after {
        content: ' ' attr(data-postfix);
    }

    .courseInstanceDayTable .colDescription {
        width: 15%;
        max-width: 12em;
    }

    .courseInstanceDayTable .col.colTags {
        width: 16%;
        max-width: 25em;
    }

    .courseInstanceDayTable .colInstructors {
        width: 20%;
    }

    .courseInstanceDateTable .colInstructors span.tagInstructor,
    .courseInstanceDayTable .colInstructors span.tagInstructor {
        background: #fff;
        border: solid 1px #ddd;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .courseInstanceDateTable .colInstructors span.tagInstructor.missingInstructor,
    .courseInstanceDayTable .colInstructors span.tagInstructor.missingInstructor {
        background-color: var(--emphasize-background-color);
        color: #fff;
        border-color: var(--emphasize-border-color);
        max-width: none;
    }


    .courseInstanceDateTable .colInstructors span.tagInstructor.disabled,
    .courseInstanceDayTable .colInstructors span.tagInstructor.disabled {
        opacity: .6;
    }

    .courseInstanceDateTable .colInstructors.limitedSpace span.tagInstructor,
    .courseInstanceDayTable .colInstructors.limitedSpace span.tagInstructor {
        max-width: 8.5em;
    }

    .courseInstanceDateTable .colInstructors.manyInstructors span.tagInstructor,
    .courseInstanceDayTable .colInstructors.manyInstructors span.tagInstructor {
        max-width: 6.5em;
    }

    .courseInstanceDateTable .colInstructors span.tagInstructor.notSupported,
    .courseInstanceDayTable .colInstructors span.tagInstructor.notSupported {
        border: none;
        max-width: none;
    }

    #enrollmentDayDatesTable tr.new td:first-child {
        border-left: solid 3px var(--success-border-color);
    }

    #enrollmentDayDatesTable tr.outOfRange, #enrollmentDayDatesTable tr.deleted {
        opacity: .5;
        pointer-events: none;
    }

    #enrollmentDayDatesTable tr.outOfRange td:first-child {
        border-left: solid 3px var(--error-border-color);
    }

    #enrollmentDayDatesTable tr.new.deleted {
        display: none;
    }

    #enrollmentDayDatesTable td.day,
    #enrollmentDayDatesTable td.date {
        width: 10%;
    }

    #enrollmentDayDatesTable td.date input.textBox {
        min-width: 8em;
    }

    #courseInstanceInstructorsTable tr.new td:first-child {
        border-left: solid 3px var(--success-border-color);
    }

    #courseInstanceInstructorsTable tr.hasMismatch, #courseInstanceInstructorsTable tr.deleted {
        opacity: .5;
        pointer-events: none;
    }

    #courseInstanceInstructorsTable tr.hasMismatch td:first-child {
        border-left: solid 3px var(--error-border-color);
    }

    #courseInstanceInstructorsTable tr.new.deleted {
        display: none;
    }

    #courseInstanceInstructorsTable td.type {
        width: 10%;
        min-width: 12.5rem;
    }

    /* time registration */
    .userTimeRegistrationTable {}

    .timeRegistrationSuggestionForm { }
    .timeRegistrationSuggestionForm .timeGroup {
        border-bottom: solid 1px #e1e1e1;
        padding: 2rem;
    }
    .timeRegistrationSuggestionForm .timeGroup h3 {
        margin-top: 0;
    }

    .timeRegistrationSuggestionForm .timeGroup .formList {
        margin-top: 1rem;
    }

    .timeRegistrationSuggestionForm .timeGroup .courseInstance {
        display: block;
    }

    .timeRegistrationSuggestionForm .timeGroup .enrollment + .courseInstanceDay::before {
        content: ', ';
    }

    .timeRegistrationSuggestionForm .timeGroupInfoList { padding-left: 1.25rem }
    .timeRegistrationSuggestionForm .timeGroupInfoList li + li {
        margin-top: .35rem;
    }

    .timeRegistrationLogItemList { }
    .dataTable .timeRegistrationLogItemList { display: none; }
    .timeRegistrationLogItemList li { position: relative; padding-left: 8rem; }
    .timeRegistrationLogItemList li + li { margin-top: .5rem; }
    .timeRegistrationLogItemList li .date { position: absolute; left: 0; top: .05rem; max-width: 7rem; font-size: .85em; }
    .timeRegistrationLogItemList li .reason { display: block; font-size: .9em; color: #666; }
    .timeRegistrationLogItemList li .comment { margin-top: 1rem; display: block; font-size: .9em; }
    .timeRegistrationLogItemList li .internalNote { margin-top: 1rem; display: block; font-size: .9em; font-style: italic; }
    .timeRegistrationLogItemList h3 { font-weight: 500; font-size: .9em; margin: 0; }

    /* errors and warnings */
    .formWarning,
    .cardList li[data-warning]:not([data-warning=""])::after { color: #fff; background: var(--emphasize-background-color); padding: .5em 1em; font-size: .9em; margin: .5em; display: inline-block; border-radius: 3px; }

    .cardList li[data-warning]:not([data-warning=""])::after {
        content: attr(data-warning);
        margin: 0;
        max-width: 30em;
    }

    /* link colors */
    .mainContent a.emph,
    #sideBar a.emph,
    .mainContent a[href]:hover,
    .formList li.navigation a:hover,
    #userInfo a,
    html.noTouch ul.tabList li a:hover,
    .courseInstanceSearchList li a:hover,
    .diplomaTemplatePicker .enrollmentWrapper a.toggleLink:hover,
    ul.dashboardLinkList li a:hover {
        color: var(--hover-color);
    }

    #mainNav ul li a.active, html.noTouch #mainNav ul li a:hover {
        border-left: solid 5px var(--active-color);
        color: #fff;
    }

    #courseInstanceDateEditForm label:first-letter {
        text-transform: uppercase;
    }

    /* chosen styles */
    .chosen-container {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
        user-select: none;
        width: calc(100% - 2px);
        max-width: 31.65rem;
    }

    .chosen-container * {
        box-sizing: border-box;
    }

    .chosen-container .chosen-drop {
        position: absolute;
        top: 100%;
        z-index: 1010;
        width: 100%;
        border: 1px solid #ccc;
        border-top: 0;
        background: #fff;
        box-shadow: rgba(0, 0, 0, 0.15) 1px 20px 25px 0px;
        clip: rect(0, 0, 0, 0);
        margin-bottom: 2em;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .chosen-container.chosen-with-drop .chosen-drop {
        clip: auto;
    }

    .chosen-container a {
        cursor: pointer;
    }

    .chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
        margin-right: 4px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: normal;
        color: #999999;
    }

    .chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
        content: ":";
        padding-left: 2px;
        vertical-align: top;
    }

    .chosen-container .chosen-results {
        color: #444;
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
        margin: 0 4px 4px 0;
        padding: 0 0 0 4px;
        max-height: 240px;
        -webkit-overflow-scrolling: touch;
    }

    .chosen-container .chosen-results li {
        display: none;
        margin: 0;
        padding: 5px 6px;
        list-style: none;
        line-height: 15px;
        word-wrap: break-word;
        -webkit-touch-callout: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chosen-container .chosen-results li.active-result {
        display: list-item;
        cursor: pointer;
    }

    .chosen-container .chosen-results li.disabled-result {
        display: list-item;
        color: #ccc;
        cursor: default;
    }

    .chosen-container .chosen-results li.highlighted {
        background-color: #eee;
        color: #111;
    }

    .chosen-container .chosen-results li.no-results {
        color: #777;
        display: list-item;
        background: #f4f4f4;
    }

    .chosen-container .chosen-results li.group-result {
        display: list-item;
        font-weight: bold;
        cursor: default;
    }

    .chosen-container .chosen-results li.group-option {
        padding-left: 15px;
    }

    .chosen-container .chosen-results li em {
        font-style: normal;
        text-decoration: underline;
    }

    .chosen-container-single {
        font-size: 1em;
    }

    .chosen-container-single .chosen-single {
        display: block;
        padding: .5em .75em;
        border: solid 1px #ccc;
        border-radius: 5px;
        position: relative;
    }

    .chosen-container-single .chosen-single:hover {
        color: #212121;
    }

    .chosen-container-single .chosen-single::after {
        content: "\e5cf";
        position: absolute;
        right: .05em;
        top: .35em;
        font-size: 1.2em;
        font-family: 'Material Symbols Outlined';
        font-weight: 600;
    }

    .chosen-container-single .chosen-search {
        margin: .5em .75em;
    }

    .chosen-container-single .chosen-search input {
        padding: .25em .5em;
        width: 100%;
    }

    .chosen-container-single .chosen-results li.no-results {
        margin: .5em .75em;
        white-space: normal;
        line-height: 1.4em;
        font-size: .9em;
    }

    .chosen-container-single .chosen-results li.no-results span {
        font-weight: 500;
    }

    .chosen-container-multi .chosen-choices {
        position: relative;
        overflow: hidden;
        margin: 0;
        padding: 1px 5px 6px;
        width: 100%;
        height: auto;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
        cursor: text;
    }

    .chosen-container-multi .chosen-choices li {
        float: left;
        list-style: none;
    }

    .chosen-container-multi .chosen-choices li.search-field {
        margin: 0;
        padding: 2px 0 0 0;
        white-space: nowrap;
    }

    .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
        margin: 3px 0 0;
        padding: 0;
        height: 21px;
        outline: 0;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none;
        color: #999;
        font-size: 100%;
        line-height: normal;
        border-radius: 0;
        width: 25px;
    }

    .chosen-container-multi .chosen-choices li.search-choice {
        position: relative;
        margin: 5px 5px 0 0;
        padding: 3px 20px 3px 5px;
        border: 1px solid #e8e8e8;
        max-width: 100%;
        border-radius: 2px;
        background-color: #eee;
        color: #333;
        line-height: 13px;
        cursor: default;
    }

    .chosen-container-multi .chosen-choices li.search-choice span {
        word-wrap: break-word;
    }

    .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
        position: absolute;
        top: 4px;
        right: 3px;
        display: block;
        width: 12px;
        height: 12px;
        font-size: 1.4em;
    }

    .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
        color: var(--error-color);
    }

    .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:after {
        content: "×";
    }

    .chosen-container-multi .chosen-choices li.search-choice-disabled {
        padding-right: 5px;
        border: 1px solid #ccc;
        background-color: #e4e4e4;
        color: #666;
    }

    .chosen-container-multi .chosen-choices li.search-choice-focus {
        background: #d4d4d4;
    }

    .chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
        background-position: -42px -10px;
    }

    .chosen-container-multi .chosen-results {
        margin: 0;
        padding: 0;
    }

    .chosen-container-multi .chosen-drop .result-selected {
        display: list-item;
        color: #ccc;
        cursor: default;
    }

    .chosen-container-active .chosen-single {
        border: 1px solid var(--input-focus-outline-color);
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .chosen-container-active.chosen-with-drop .chosen-single {
        border: 1px solid #aaa;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        box-shadow: 0 1px 0 #fff inset;
    }

    .chosen-container-active.chosen-with-drop .chosen-single div {
        border-left: none;
        background: transparent;
    }

    .chosen-container-active.chosen-with-drop .chosen-single div b {
        background-position: -18px 2px;
    }

    .chosen-container-active .chosen-choices {
        border: 1px solid var(--input-focus-outline-color);
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    }

    .chosen-container-active .chosen-choices li.search-field input[type="text"] {
        color: #222 !important;
    }

    .chosen-disabled {
        opacity: 0.5 !important;
        cursor: default;
    }

    .chosen-disabled .chosen-single {
        cursor: default;
    }

    .chosen-disabled .chosen-choices .search-choice .search-choice-close {
        cursor: default;
    }

    body.statistics .chosen-results .group-result:not(.allowed) {
        display: none;
    }

    .chosen-choices[data-sortable-id] .search-choice span {
        cursor: move;
    }

    .chosen-choices[data-sortable-id] .sortable-placeholder {
        opacity: .25;
    }

    /* chosen styles end */

    /* custom sortable styles */
    .chosen-results .hidden {
        display: none !important;
    }

    .item-chosen-container {
        width: calc(100% - 2px);
        max-width: 31.65rem;
    }

    /* timepicker styles */
    .ui-timepicker-container {
        position: absolute;
        overflow: hidden;
        box-sizing: border-box;
        z-index: 100000 !important;
    }

    .ui-timepicker-viewport {
        max-height: 10em;
        overflow-y: auto;
        overflow-x: hidden;
    }

    ul.ui-timepicker-viewport, ul.ui-timepicker-viewport li {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    ul.ui-timepicker-viewport li:first-child {
        margin-top: .25em;
    }

    ul.ui-timepicker-viewport li a {
        padding: .25em .5em;
        display: block;
        cursor: pointer;
        color: #111;
    }

    ul.ui-timepicker-viewport li a:hover {
        background-color: #eee;
    }

    .ui-timepicker-standard {
        background-color: white;
        border: solid 1px #ccc;
        box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px 0;
    }


    /* pickmeup styles*/
    .pickmeup {
        background: #fff;
        border: solid 1px #ccc;
        font-size: .9em;
        border-radius: 5px;
        display: inline-block;
        position: absolute;
        z-index: 20;
        box-shadow: rgba(0,0,0,.15) 1px 1px 10px 0;
    }

    .pickmeup * {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .pickmeup .pmu-instance {
        display: inline-block;
        height: 18.5em;
        padding: 1em;
        text-align: center;
        width: 23.25em;
        border-right: solid 1px #ddd;
        margin-left: .5em;
    }

    .pickmeup.pmu-hidden {
        display: none
    }

    .pickmeup.pmu-flat {
        position: relative
    }

    .pickmeup .pmu-instance .pmu-button {
        color: #464646;
        cursor: pointer;
        outline: 0;
        text-decoration: none;
    }

    .pickmeup .pmu-instance .pmu-today {
        color: var(--active-color);
        font-weight: 800;
    }

    .pickmeup .pmu-instance .pmu-button:hover {
        background: var(--hover-background-color);
        color: #fff;
    }

    .pickmeup .pmu-instance nav .pmu-button:hover {
        background: #fff;
        color: var(--hover-color);
    }

    .pickmeup .pmu-instance .pmu-not-in-month {
        color: #c5c5c5;
    }

    .pickmeup .pmu-instance .pmu-disabled, .pickmeup .pmu-instance .pmu-disabled:hover {
        background: transparent;
        color: #e0e0e0;
        cursor: default;
    }

    .pickmeup .pmu-instance .pmu-selected, .pickmeup .pmu-instance .pmu-selected:hover {
        background: var(--active-background-color);
        color: #fff !important;
    }

    .pickmeup .pmu-instance .pmu-selected.pmu-module-date {
        opacity: .5;
    }

    .pickmeup .pmu-instance .pmu-selected.pmu-out-of-range {
        background: var(--error-background-color);
    }

    .pickmeup .pmu-instance .pmu-not-in-month.pmu-selected {
        background: transparent;
        color: #665F54;
    }

    .pickmeup .pmu-instance nav {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        color: #565656;
        line-height: 2em;
        font-weight: 600;
    }

    .pickmeup .pmu-instance nav *:first-child :hover {
        background: #C8DEB2;
    }

    .pickmeup .pmu-instance nav .pmu-prev, .pickmeup .pmu-instance nav .pmu-next {
        display: none;
        height: 2em;
        width: 1em;
    }

    .pickmeup .pmu-instance nav .pmu-month {
        width: 19em;
        font-size: 1.1em;
        font-weight: 800;
        padding-bottom: .3em;
    }

    .pickmeup .pmu-instance .pmu-years *, .pickmeup .pmu-instance .pmu-months * {
        display: inline-block;
        line-height: 3.6em;
        width: 3.5em;
    }

    .pickmeup .pmu-instance .pmu-day-of-week {
        color: #999;
        cursor: default;
    }

    .pickmeup .pmu-instance .pmu-day-of-week *, .pickmeup .pmu-instance .pmu-days * {
        display: inline-block;
        line-height: 1.85em;
        width: 2.85em;
        margin: .075em;
        border-radius: 5px;
    }

    .pickmeup .pmu-instance .pmu-day-of-week * {
        line-height: 1.8em;
    }

    .pickmeup .pmu-instance:first-child .pmu-prev, .pickmeup .pmu-instance:last-child .pmu-next {
        display: block;
    }

    .pickmeup .pmu-instance:first-child .pmu-month, .pickmeup .pmu-instance:last-child .pmu-month {
        width: 18em;
    }

    .pickmeup .pmu-instance:first-child:last-child .pmu-month {
        width: 17em;
    }

    .pickmeup:not(.pmu-view-days) .pmu-days, .pickmeup:not(.pmu-view-days) .pmu-day-of-week, .pickmeup:not(.pmu-view-months) .pmu-months, .pickmeup:not(.pmu-view-years) .pmu-years {
        display: none;
    }

    .pickmeup .pmu-instance .selected_but_disabled {
        background: #ccc;
    }

    .pickmeup .pmu-instance:last-child {
        border-right: none;
    }

    #datePickerWrapper .pickmeup {
        font-size: .95em;
        box-shadow: none;
    }

    .pickmeup .pmu-instance nav .pmu-prev, .pickmeup .pmu-instance nav .pmu-next {
        width: 3em;
    }

    /* CARD TOOLS */
    #cardTools {
        float: left;
        margin: .1em 0 .2em .5em;
    }

    #cardTools .trigger {
        display: inline-flex;
        margin-left: .5em;
    }

    #cardTools .trigger i {
        background-color: var(--active-background-color);
        color: white;
        border-radius: 50%;
        display: inline-block;
        font-size: 1.2em;
        vertical-align: middle;
        line-height: 2rem;
        width: 2rem;
        text-align: center;
    }

    #cardTools .triggerMore {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        color: black;
        margin-left: .25em;
        border-radius: 50%;
    }

    #cardTools .triggerMore i {
        font-size: 1.2em;
    }

    #cardTools .triggerMore:hover,
    #cardTools.active .triggerMore {
        background-color: #f1f1f1;
    }

    #cardTools .cardToolList,
    #cardTools .cardToolList .groupButtons {
        display: none;
        position: absolute;
        background-color: white;
        box-shadow: 1px 2px 5px rgba(0,0,0,.25);
        margin: .5em 0;
        z-index: 10001;
        border-radius: 5px;
    }

    #cardTools .cardToolList {
        margin-left: 2.5em;
    }

    #cardTools .cardToolList button {
        margin: 0;
        width: 100%;
        min-width: 15em;
        position: relative;
        background-color: white;
        border: none;
        border-radius: 0;
        text-align: left;
        padding: 1em;
        font-size: .95em;
        visibility: hidden;
    }

    #cardTools .cardToolList button:hover {
        color: black;
        background-color: #f1f1f1;
    }

    #cardTools .cardToolList > li {
        position: relative;
    }

    #cardTools .cardToolList .group > button::after {
        content: '…';
        font-weight: 700;
        position: absolute;
        right: 1em;
        top: .75em;
        color: black;
    }

    #cardTools .cardToolList .groupButtons {
        z-index: 100;
        left: 100%;
        top: -.5em;
    }

    #cardTools.active .cardToolList,
    #cardTools .group.active .groupButtons {
        display: block;
    }

    #cardTools.active .cardToolList button {
        visibility: visible;
    }

    #cardTools li.group.active > button {
        background-color: #f1f1f1;
        color: black;
    }

    #cardTools li.group.active > button::after {
        transform: rotate(90deg);
        top: 1em;
        right: .75em;
    }

    /* USER DELETE SIDEBAR */
    #sideBar .userRoleList > li {
        padding: 1rem 0;
        border-bottom: solid 1px #e1e1e1;
    }

    #sideBar .userRoleList strong {
        font-size: 1.1em;
        font-weight: 500;
        margin-bottom: .25rem;
        display: block;
    }

    #sideBar .userRoleList p {
        margin: 0;
    }

    #sideBar .userRoleList p + p {
        margin-top: 1rem;
        background-color: #fdf7da;
        border: solid 1px #ead775;
        color: #170f00;
        padding: .5rem;
    }

    /* USER AVATAR */
    #userAvatar {
        height: 88px;
        width: 100%;
        text-align: center;
    }

    #userAvatar a {
        border-bottom: none;
        font-size: .95em;
        height: 42px;
        background-color: var(--active-background-color);
        width: 42px;
        display: inline-block;
        line-height: 42px;
        border-radius: 50%;
        margin: 21px auto;
        color: #ffffff;
    }

    #userNav {
        position: fixed;
        top: 0;
        bottom: 0;
        background: white;
        width: 0;
        z-index: 9;
        overflow: hidden;
        transition: left .3s ease-in-out;
        box-shadow: rgba(0,0,0,.2) 6px 0 12px 0;
    }

    #userNav a {
        display: block;
        padding: .45rem 1.2rem;
        color: #012538;
        text-decoration: none;
    }

    #userNav a span {
        display: inline-block;
        vertical-align: middle;
    }

    #userNav a i {
        display: inline-block;
        vertical-align: middle;
    }

    #userNav a:hover {
        background-color: var(--hover-background-color-transparent);
    }

    #userNav a.language.active span {
        font-weight: 600;
    }

    #userNav ul {
        padding: 1rem 0;
    }

    #userNav ul li {
        margin: 0;
    }

    #userNav p {
        padding: 0 1.5rem;
    }

    #sectionTree:not(.narrow) + #userNav,
    #mainNav + #userNav {
        width: 370px;
        left: -470px;
    }

    #sectionTree.narrow + #userNav {
        width: 280px;
        left: -380px;
    }

    body.withUserNav nav#userNav {
        left: 100px !important;
        z-index: 1001;
    }

    body.withUserNav main::before {
        content: '';
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.5);
        z-index: 1000;
    }

    #userNav form {
        padding: .25rem;
    }

    #userNav form select {
        width: 100%;
        min-width: unset;
        max-width: none;
    }

    #mainNav ul li a {
        padding: 1.1em 15px;
    }

    #sectionTree {
        position: absolute;
        top: 0;
        left: 100px;
        bottom: 0;
        z-index: 5;
        width: 370px;
        background: #fff;
        border-right: solid 1px #ddd;
    }

    main {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 471px;
        right: 0;
    }

    /* MARKUP TOOLBAR */
    .markupToolbar {
        margin: 1em 0;
    }

    .markupToolbar select {
        margin-right: 1rem;
        min-width: unset;
        max-width: 20rem;
    }

    .markupToolbar .markupTool {
        font-weight: 700;
        padding: .4em .8em;
        margin: 0;
    }

    .markupToolbar .markupTool + .markupTool {
        margin-left: .25rem;
    }

    .markupToolbar .markupTool:disabled {
        pointer-events: none;
    }

    /* FINANCE */
    .finance .toolList #filterForm {
        margin-bottom: 0;
    }

    /* NOT CONFIGURED */
    #not-configured {
        text-align: center;
        margin-top: 2rem;
    }

    div.card .enrollmentDraftUserComparisonMode .cardHeader h2 {
        margin: 0 0 1rem;
    }

    .enrollmentDraftTypeDesc p {
        margin: 0;
        max-width: 50em;
    }

    .enrollmentDraftUserComparison {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-top: 2rem;
        gap: 2rem;
        max-width: 60em;
    }

    .enrollmentDraftUserComparison > div {
        background-color: #F1F2F3;
        padding: 1.5rem 2rem 2rem;
        flex: 50%;
        max-width: calc(50% - 5rem);
    }

    div.card .enrollmentDraftUserComparison .cardHeader h2 {
        font-size: 1.4em;
    }

    .enrollmentDraftUserComparison .studentInfoList {
    }

    .enrollmentDraftUserComparison .studentInfoList > li {
        min-height: 18px;
    }

    .enrollmentDraftUserComparison .studentInfoList + .studentInfoList {
        margin-top: .5rem;
    }

    .enrollmentDraftUserComparison .username {
        margin-bottom: .5rem;
    }

    .enrollmentDraftUserComparison[data-selectedaction="1"] {
    }

    .enrollmentDraftUserComparison[data-selectedaction="1"] .existingUser,
    .enrollmentDraftUserComparison[data-selectedaction="3"] .existingUser,
    .enrollmentDraftUserComparison[data-selectedaction="4"] .existingUser,
    .enrollmentDraftUserComparison[data-selectedaction="5"] .existingUser,
    .enrollmentDraftUserComparison[data-selectedaction="2"] .enrollmentDraftUser,
    .enrollmentDraftUserComparison[data-selectedaction="7"] .enrollmentDraftUser {
        opacity: .3;
    }

    .enrollmentDraftUserComparison[data-selectedaction="1"] .existingUser .studentInfoList,
    .enrollmentDraftUserComparison[data-selectedaction="3"] .existingUser .studentInfoList,
    .enrollmentDraftUserComparison[data-selectedaction="4"] .existingUser .studentInfoList,
    .enrollmentDraftUserComparison[data-selectedaction="5"] .existingUser .studentInfoList,
    .enrollmentDraftUserComparison[data-selectedaction="6"] .existingUser .studentInfoList,
    .enrollmentDraftUserComparison[data-selectedaction="7"] .enrollmentDraftUser .studentInfoList,
    .enrollmentDraftUserComparison[data-selectedaction="2"] .enrollmentDraftUser .studentInfoList {
        text-decoration: line-through;
    }

    .enrollmentDraftUserComparison[data-selectedaction="3"] .enrollmentDraftUser .username,
    .enrollmentDraftUserComparison[data-selectedaction="3"] .enrollmentDraftUser .email,
    .enrollmentDraftUserComparison[data-selectedaction="4"] .enrollmentDraftUser .username,
    .enrollmentDraftUserComparison[data-selectedaction="4"] .enrollmentDraftUser .email,
    .enrollmentDraftUserComparison[data-selectedaction="5"] .enrollmentDraftUser .username,
    .enrollmentDraftUserComparison[data-selectedaction="5"] .enrollmentDraftUser .email,
    .enrollmentDraftUserComparison[data-selectedaction="6"] .enrollmentDraftUser .username,
    .enrollmentDraftUserComparison[data-selectedaction="6"] .enrollmentDraftUser .email,
    .enrollmentDraftUserComparison[data-selectedaction="3"] .enrollmentDraftUser .studentDataFieldList li,
    .enrollmentDraftUserComparison[data-selectedaction="5"] .enrollmentDraftUser .studentDataFieldList li {
        opacity: .5;
        text-decoration: line-through;
    }

    .enrollmentDraftUserComparison[data-selectedaction="7"] .existingUser {
        display: none;
    }

    .enrollmentDraftDetails {
        display: none;
    }

    .enrollmentDraftDetailsSideBar {
        padding: 1.5rem;
    }

    .enrollmentDraftDetailsSideBar label {
        font-weight: 600;
    }

    .enrollmentDraftActions {
        margin: 3rem 0 2rem;
    }

    .enrollmentDraftActionList {
        margin-bottom: 1.5rem;
        max-width: 60em;
        width: 100%;
    }

    .enrollmentDraftActionList > li {
        padding: 1.5rem 0 1.5rem 2rem;
        border-bottom: solid 1px #ddd;
        position: relative;
    }

    .enrollmentDraftActionList > li label:not(.error) {
        width: 100%;
        padding: 0;
        margin: 0;
        cursor: pointer;
    }

    .enrollmentDraftActionList > li label em {
        font-weight: 600;
        font-style: normal;
        display: block;
        margin-bottom: .15rem;
    }

    .enrollmentDraftActionList > li label span {
        display: block;
        font-size: .85em;
    }

    .enrollmentDraftActionList > li input[type="radio"] {
        position: absolute;
        left: 0;
        top: 2em;
        margin: 0;
    }

    .enrollmentDraftActionList > li .conditional {
        max-height: 0;
        height: 0;
        overflow: hidden;
        transition: all .2s ease-in-out;
    }

    .enrollmentDraftActionList > li .conditional.visible {
        margin-top: .5rem;
        height: auto;
        max-height: 20rem;
    }

    .enrollmentDraftActionList > li .conditional .field {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .enrollmentDraftActionList > li .conditional .field + .field {
        margin-top: .5rem;
    }

    .enrollmentDraftActionList > li .conditional .field input + i,
    .enrollmentDraftActionList > li .conditional .field input + label.error:not([style*="none"]) + i {
        display: none;
        font-size: 2em;
    }

    .enrollmentDraftActionList > li .conditional .field input.valid + label.error[style*="none"] + i,
    .enrollmentDraftActionList > li .conditional .field input.valid + i {
        display: inline;
        color: var(--success-color);
    }

    .enrollmentDraftActionList > li .conditional .field label.error {
        margin-top: 0;
    }

    /* USER MERGE */
    .userMergeTable {
    }

    .userMergeTable td.col {
        vertical-align: middle;
    }

    .userMergeTable td.col,
    .userMergeTable thead th:not(:first-of-type) {
        width: 40%;
    }

    .userMergeTable thead th:first-of-type,
    .userMergeTable tbody th {
        width: 28rem;
    }

    .userMergeTable tbody th {
        text-align: left;
        padding: 0.75em 1em;
        border: solid 1px #e1e6e8;
        vertical-align: top;
    }

    .userMergeTable tbody th[rowspan] {
        vertical-align: top;
    }

    .userMergeTable label {
        padding-top: 0;
        cursor: pointer;
    }

    .userMergeTable input {
        top: 2px;
        margin: 0 .25rem 0 0;
    }

    .userMergeTable input:disabled + label {
        cursor: not-allowed;
    }

    .userMergeTable .userPhotoWrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .userMergeTable .userPhotoWrapper input {
        margin-right: .5rem;
    }

    .userMergeTable input:not(:disabled):hover + label,
    .userMergeTable input:not(:disabled) + label:hover {
        opacity: .8;
        text-decoration: none;
    }

    .userMergeTable input:not(:checked),
    .userMergeTable input:not(:checked) + label {
        opacity: .5;
    }

    .userMergeTable input:not(:checked) + label {
        text-decoration: line-through;
    }

    .userMergeTable input:checked:disabled {
        opacity: 1;
    }

    .userMergeTable tbody td.col:nth-of-type(1) {
        background-color: #f9f9f9;
        border-left-width: 3px;
        border-right-width: 3px;
    }

    .userMergeTable thead th:last-of-type {
        text-decoration: line-through;
    }

    .userDataMergeTable #swapUsersBtn {
        float: right;
    }

    .userDataMergeTable #swapUsersBtn i {
        vertical-align: middle;
    }

    .enrollmentMergeTable tbody input:not(:checked):disabled,
    .enrollmentMergeTable tbody input:not(:checked):disabled + label {
        opacity: .5;
    }

    .enrollmentMergeTable tbody input:not(:checked):disabled + label {
        text-decoration: line-through;
    }

    #userMergeForm {
        margin-bottom: 2rem;
    }

    #userMergeForm .actions {
        margin: 0 2%;
    }

    .card.mergerCard {
        margin-bottom: 0;
    }

    .mergerCard #selectedUser {
        display: block;
        padding: 1em;
        border: solid 1px #ccc;
        background: #fff;
        box-sizing: border-box;
        max-width: 30rem;
    }

    .mergerCard #selectedUser span {
        display: block;
    }

    .mergerCard #selectedUser span + span {
        margin-top: .25rem;
    }

    /* SENSITIVE INFO */
    .sensitiveInfo {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        padding-right: 1.8rem;
    }

    .sensitiveInfo:not(.sensitiveInfoInitialized) {
        display: none;
    }

    .sensitiveInfo .unsafeTrigger {
        position: absolute;
        right: 0;
        width: 20px;
        height: 20px;
    }

    .sensitiveInfo:not(.sensitiveInfoUnsafe) .unsafeInfo,
    .sensitiveInfo.sensitiveInfoUnsafe .safeInfo,
    .sensitiveInfo.sensitiveInfoUnsafe .unsafeTriggerIconUnsafe,
    .sensitiveInfo:not(.sensitiveInfoUnsafe) .unsafeTriggerIconSafe {
        display: none;
    }

    .sensitiveInfo .unsafeTrigger span {
        font-size: 20px;
        font-weight: 500;
    }


    /* COMPANY MERGE */
    .companyMerge {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: 100%;
    }

    .companyMerge.busy {
        opacity: .5;
    }

    .companyMerge.busy a {
        pointer-events: none;
    }

    .companyMerge .companies {
        flex: 1;
        overflow: auto;
        margin: 2rem 0;
    }

    .companyMerge .navigation {
    }

    .companyMerge .masterCompany {
        padding: 1rem;
        border: solid 1px #e1e1e1;
        background-color: #f9f9f9;
    }

    .companyMerge .companies .company {
        padding: 1rem;
        margin-right: 1rem;
    }

    .companyMerge .companies .company + .company {
        border-top: solid 1px #e1e1e1;
    }

    .companyMerge .companies .company .companyName,
    .companyMerge .companies .company .companyVAT,
    .companyMerge[data-mode="2"] .companies .company .companyAddress {
        text-decoration: line-through;
        opacity: .5;
    }

    .companyMerge:not([data-mode]) .masterCompany .companyAddress,
    .companyMerge[data-mode="1"] .masterCompany .companyAddress {
        opacity: .5;
    }

    .companyMerge .masterCompany h1 {
        margin: 0 0 .75rem;
        font-size: 1.3em;
        font-weight: 400;
    }

    .companyMerge .masterCompany select {
        margin-top: 1rem;
        width: 100%;
        max-width: none;
    }

    .companyMerge .companies h2 {
        margin: 0 0 .5rem;
        font-size: 1.3em;
        font-weight: 400;
    }

    .companyMerge .company a {
        display: inline-block;
        margin-top: 0.5rem;
        font-size: .85em;
        color: green;
    }

    .companyMerge.merging .company a {
        display: none;
    }

    .companyMerge.merging .company.queued {
        opacity: .5;
    }

    .companyMerge.merging .company.processed {
    }

    .companyMerge.merging .company.processed.error {
        color: var(--error-color);
    }

    .companyMerge.merging .company.processed.success {
        color: var(--success-color);
    }

    .companyMerge .error {
        margin-top: .5rem;
        font-size: .9em;
        color: var(--error-color);
    }

    .companyMerge p {
        margin: 1rem 0 0;
    }

    .companyMerge p:last-of-type {
        margin-bottom: 2rem;
    }


    /* CURRENT USER */
    #changePasswordForm {
        padding: 2rem;
        width: 100%;
        max-width: 50em;
        background-color: white;
        box-sizing: border-box;
    }

    .administratorCalendar {
        max-width: 100%;
        width: 100%;
        margin-inline: 0;
    }

    .administratorCalendar.busy {
        opacity: .5;
    }

    .administratorCalendar.busy a,
    .administratorCalendar.busy input,
    .administratorCalendar.busy button {
        pointer-events: none;
    }

    .administratorCalendar .eventGroup {
        max-height: 200rem;
        height: auto;
        transition: all .2s ease-in-out;
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .administratorCalendar .eventGroup.empty {
        display: none;
    }

    .administratorCalendar[data-courseactivity="false"] .eventGroup.courseactivity,
    .administratorCalendar[data-checklists="false"] .eventGroup.checklists,
    .administratorCalendar[data-reminders="false"] .eventGroup.reminders {
        max-height: 0;
        height: 0;
        margin-bottom: 0;
    }

    .administratorCalendar[data-mode="currentprimaryadministrator"] .eventList > li:not(.currentprimaryadministrator),
    .administratorCalendar[data-mode="noprimaryadministrator"] .eventList > li:not(.noprimaryadministrator),
    .administratorCalendar[data-mode="otherprimaryadministrator"] .eventList > li:not(.otherprimaryadministrator) {
        display: none;
    }

    .administratorCalendar .material-icons {
        color: #4f5861;
    }

    .administratorCalendar .eventGroupHeader {
        display: flex;
        align-items: center;
    }

    .administratorCalendar .eventGroupHeader .material-icons {
        font-size: 1.2em;
        margin-right: .25rem;
        line-height: normal;
    }

    .administratorCalendar .eventGroupHeader strong {
        font-weight: 400;
        font-size: 1em;
    }

    .administratorCalendar .eventGroupHeader.eventSubGroupHeader {
        margin: 0.5rem 0 0 1.8rem;
    }

    .administratorCalendar .eventGroupHeader.eventSubGroupHeader strong {
        font-size: .9em;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        white-space: nowrap;
    }

    .administratorCalendar .eventGroupHeader.eventSubGroupHeader.empty {
        display: none;
    }

    .administratorCalendar .eventGroupHeader + .eventSubGroupHeader {
        margin-top: .5rem;
    }

    .administratorCalendar .eventList {
        margin: 0.5rem 0 0 1.4rem;
    }

    .administratorCalendar .eventList li + li {
        margin-top: .25rem;
    }

    .administratorCalendar .eventGroupHeader.eventSubGroupHeader + .eventList li + li {
        margin-top: 0;
    }

    .administratorCalendar .eventList .material-icons {
        font-size: 1.2em;
        margin-right: .35rem;
        line-height: normal;
    }

    .administratorCalendar .eventList a {
        display: flex;
        font-size: .85rem;
        padding: .1rem;
        align-items: center;
    }

    .administratorCalendar .eventList a .text {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .administratorCalendar .eventList a .text + i {
        margin-left: .25rem;
    }

    .administratorCalendar .eventList + .eventSubGroupHeader {
        margin-top: 0.5rem;
    }

    .administratorCalendar .eventList small {
        display: inline-block;
        background-color: #004467;
        color: white;
        padding: 0 0.25rem;
        line-height: 1.2rem;
        font-size: 10px;
        border-radius: 2px;
        margin-right: .35rem;
        white-space: nowrap;
    }

    .administratorCalendar .eventGroupHeader.eventSubGroupHeader + .eventList {
        margin: 0.1rem 0 0 1.65rem;
    }

    .administratorCalendarHeader {
        margin: 0;
        box-sizing: border-box;
        padding-bottom: 1.5em;
        height: 4rem;
        display: flex;
        justify-content: space-between;
        gap: 1em;
        align-items: center;
    }

    .administratorCalendarHeader .administratorCalendarWeek {
        font-weight: 500;
        font-size: 1.2em;
        margin-right: 1rem;
    }

    .administratorCalendarHeader .actions {
        display: flex;
        align-items: center;
    }

    .administratorCalendarHeader .tools {
    }

    .administratorCalendarHeader .filter {
        position: relative;
    }

    .administratorCalendarHeader .filterTrigger {
        display: flex;
        color: #212121;
        transition: all .1s ease-in-out;
        opacity: .8;
        position: relative;
    }

    .administratorCalendarHeader .filterTrigger[data-activefiltercount]:not([data-activefiltercount=""]):not([data-activefiltercount="0"])::before {
        content: attr(data-activefiltercount);
        position: absolute;
        width: 1.1rem;
        height: 1.1rem;
        line-height: 1.1rem;
        background-color: var(--active-background-color);
        color: white;
        right: -.15rem;
        top: -.15rem;
        text-align: center;
        border-radius: 50%;
        font-size: .7em;
        font-weight: 600;
    }

    .administratorCalendarHeader .filterTrigger:hover,
    .administratorCalendarHeader .filter.active .filterTrigger {
        transform: scale(1.1);
        opacity: 1;
    }

    .administratorCalendarHeader .filterTrigger i {
        font-size: 2.4em;
        color: #212121;
    }

    .administratorCalendarHeader .filter .filterLayer {
        position: absolute;
        background-color: white;
        box-shadow: 0 0 10px -4px rgb(0 0 0 / 100%);
        border-radius: 3px;
        padding: 0 1.5rem;
        overflow: hidden;
        max-height: 0;
        height: 0;
        transition: all .2s ease-in-out;
        right: -.5rem;
    }

    .administratorCalendarHeader .filter.active .filterLayer {
        max-height: 100em;
        height: auto;
        padding: 1rem 1.75rem 1rem 1.5rem;
    }

    .administratorCalendarHeader .filterLayer .formList + .formList {
        border-top: solid 1px #e1e1e1;
        margin-top: .25rem;
        padding-top: .75rem;
    }

    .administratorCalendarHeader .filterLayer #filterForm {
        margin-bottom: 0;
    }

    .administratorCalendarHeader .filterLayer #filterForm li {
        display: flex;
    }

    .administratorCalendarHeader .filterLayer #filterForm label {
        order: 2;
        padding-top: 0;
        cursor: pointer;
        font-weight: 400;
        white-space: nowrap;
        width: auto;
    }

    .administratorCalendarHeader .filterLayer #filterForm input {
        order: 1;
        margin-right: .75rem;
    }

    .administratorCalendarDate {
        font-size: 1rem;
        width: 5em;
        background: transparent;
        border: none;
        padding: 5px;
        margin: 0;
        appearance: none;
        color: currentColor;
        opacity: 1 !important;
    }

    .administratorCalendarDate:not([disabled]):hover {
        background: #ffffffee;
        cursor: pointer;
    }

    .administratorCalendar .thisWeekButton {
        font-size: 1em;
        background-color: white;
    }

    .administratorCalendar .administratorCalendarArrow {
        display: inline-flex;
        margin: 0 1rem;
        transition: transform .2s ease-in-out;
    }

    .administratorCalendar .administratorCalendarArrow:hover {
        transform: scale(1.2);
    }

    .administratorCalendar .calendarDays {
        display: grid;
        grid-template-columns: repeat(5, calc((100% + 1em) / 5 - 1em));
        min-height: calc(100% - 4rem);
        gap: 1em;
    }

    .administratorCalendar .calendarDays:has(.dayWeekend .eventGroup) {
        grid-template-columns: repeat(7, calc((100% + 1em) / 7 - 1em));
    }

    .administratorCalendar .calendarDays:not(:has(.dayWeekend .eventGroup)) .dayWeekend {
        display: none;
    }

    .administratorCalendar .day {
        background: #fff;
        box-shadow: 0 0 10px -4px rgb(0 0 0 / 35%);
        border-radius: 5px;
    }

    .administratorCalendar .dayHeader {
        display: grid;
        grid-template-columns: 35% auto;
        padding: 1rem;
        border-bottom: solid 1px #eee;
    }

    .administratorCalendar .dayHeaderDayOfWeek {
        text-transform: capitalize;
        margin: 0;
    }

    .administratorCalendar .dayHeaderDate {
        display: block;
        text-align: right;
    }

    .administratorCalendar .administratorCalendar .dayToday {
        border: solid 2px var(--active-border-color);
    }

    .administratorCalendar .dayWeekend .dayHeader {
        background: #f7f7f7;
    }

    .administratorCalendar .dayContent {
        padding: 1rem;
    }

    @keyframes rotate {
        100% {
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes dash {
        0% {
            stroke-dasharray: 1,200;
            stroke-dashoffset: 0;
        }

        50% {
            stroke-dasharray: 89,200;
            stroke-dashoffset: -35;
        }

        100% {
            stroke-dasharray: 89,200;
            stroke-dashoffset: -124;
        }
    }

    @keyframes color {
        100%, 0% {
            stroke: #6AB147;
        }

        40% {
            stroke: #6AB147;
        }

        66% {
            stroke: #6AB147;
        }

        80%, 90% {
            stroke: #6AB147;
        }
    }
}

@media screen and (max-width:1750px) {
    ul.tabList li a {
        font-size: 1em;
        max-width: 10em;
        margin-right: .2em;
    }
}


@media screen and (max-width:1600px) {
    html {
        font-size: 84%;
    }

    #mainNav ul li a {
        padding: 1.475em 15px;
    }

    ul.tabList li a {
        max-width: 7em;
    }

    ul.tabList li a:first-child {
        max-width: 10em;
    }

    .mainContent.scrollContent.hasToolbar {
        top: 142px;
    }
}

@media screen and (max-width:1500px) {
    .header h1 {
        max-width: 75%;
    }
}

@media screen and (max-width:1400px) {
    html {
        font-size: 80%;
    }

    #mainNav {
        width: 90px;
    }

    #userInfo {
        left: 90px;
    }

    #sectionTree {
        width: 300px;
        left: 90px;
    }

    #sectionTree.narrow {
        width: 260px;
    }

    #sectionTree > ul {
        top: 68px;
    }

    #sectionTree > ul li a.item {
        min-width: 160px;
    }

    #sectionTree > ul li ul li a.item {
        max-width: 160px;
    }

    #sectionTree > ul li a.item i {
        vertical-align: text-bottom;
        position: relative;
        top: 2px;
    }

    #sectionTree > ul li a.more i {
        vertical-align: text-bottom;
    }

    .singleSectionMode main {
        left: 301px;
    }

    #categoryMenu, #rootMenu {
        left: 301px;
    }

    .narrow #categoryMenu {
        left: 261px;
    }

    main, .treeMenu {
        left: 391px;
    }

    main.narrowTree, .treeMenus.narrow .treeMenu {
        left: 351px;
    }

    main.noTree {
        left: 90px;
    }

    #logoLink {
        height: 70px;
    }

    #logoLink img {
        max-height: 100%;
        width: auto;
    }

    #mainNav ul li a {
        padding: .95em 15px;
    }

    .header {
        height: 67px;
    }

    .header.subHeader {
        height: 40px;
        padding: 0;
    }

    .header h1, ul.breadcrumbList {
        font-size: 1.1em;
    }

    .header h1 {
        top: 2.5em;
    }

    .dashboard #primaryAdministratorToggle {
        margin-left: -.25rem;
        margin-top: -6.25rem;
    }

    .scrollContent {
        top: 67px;
    }

    body.scrolledToTabContent ul.toolList {
        top: 67px;
    }

    .mainContent.scrollContent.hasToolbar {
        top: 118px;
    }

    #sideBar .sideBarContent {
        top: 67px;
    }


    div.card ul.cardList {
        width: 47%;
    }

    ul.tabList li a {
        max-width: 6em;
        padding: .5em .7em;
    }

    ul.dashboardLinkList {
        margin-left: 6px;
    }

    a.dashboardListAction {
        margin-left: 6px;
        margin-top: 1.5rem;
    }

    .header h1 i {
        font-size: 20px;
    }

    .item-chosen-container {
    }

    #sectionTree:not(.narrow) + #userNav,
    #mainNav + #userNav {
        width: 300px;
        left: -390px;
    }

    #sectionTree.narrow + #userNav {
        width: 260px;
        left: -350px;
    }

    body.withUserNav nav#userNav {
        left: 90px !important;
    }

    #userAvatar {
        height: 66px;
    }

    #userAvatar a {
        height: 36px;
        width: 36px;
        line-height: 36px;
        margin: 16px auto;
    }
}

@media screen and (max-width:1280px) {
    .administratorCalendar .calendarDaysWorkWeek {
        grid-template-columns: repeat(3, calc(100% / 3 - 1.2em));
    }
}

@media screen and (max-width:1260px) {
    .studentDiplomaTable td.col.colName {
        max-width: 300px;
    }
}

@media screen and (max-width:1110px) {
    #sectionTree {
        display: none;
    }

    .singleSectionMode main {
        left: 0;
    }

    html.withMenu #sectionTree {
        display: block;
    }

    main, main.noTree, main.narrowTree {
        left: 91px;
    }

    main.dashboard {
        min-width: unset;
        overflow: auto;
    }

    .dataTable {
        font-size: .9em;
    }

    div.card .cardHeader h2 {
        font-size: 1.4em;
        margin-bottom: 1em;
    }

    ul.tabList li a {
        font-size: 1em;
    }

    .header.subHeader h1 {
        white-space: nowrap;
        max-width: 65%;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    ul.dashboardLinkList li span.enrollmentCount {
        font-size: 1.5em;
    }

    .studentDiplomaTable td.col.colName {
        max-width: 150px;
    }

    .dashboard .mainContent {
        align-items: flex-start;
    }

    .dashboard .mainColumn {
        flex: 50%;
        max-width: 50%;
        flex-wrap: wrap;
    }

    .dashboard .mainColumn .column {
        flex: 100%;
        max-width: 100%;
        padding: 0;
    }

    .dashboard .mainColumn .column + .column {
        padding: 2rem 0 0;
    }

    .dashboard .asideColumn {
        flex: 50%;
        max-width: 50%;
    }

    #cardTools {
        margin-top: -.1rem;
    }

    #searchHandler {
        max-width: 35rem;
    }
}

@media screen and (max-width:900px) {

    .administratorCalendar .calendarDaysWorkWeek {
        grid-template-columns: repeat(2, calc(100% / 2 - 1em));
    }
}

@media screen and (max-width:768px) {
    .dataTable thead, .dataTable td {
        padding: .65em .5em;
    }

/*    .dataTable thead th:nth-child(n+5), .dataTable td:nth-child(n+5) {
        display: none;
    }*/

    fieldset {
        padding: 1em 4%;
        width: 91%;
    }

    button, .button {
        margin-bottom: 1em;
    }

    .formList li.navigation button {
        margin-left: 0;
        margin-right: 2em;
    }

    label {
        display: block;
        font-size: .9em;
        width: auto;
        margin-bottom: .25em;
    }

    label.after {
        display: inline-block;
        font-size: 1em;
    }

    ul.toolList li label {
        display: inline-block;
        padding-top: .75em;
    }

    input.checkBox {
        margin-left: 0;
    }

    select {
        max-width: 280px;
        min-width: unset !important;
    }

    input.textBox:not([data-locked="locked"]):not(.small), textarea.textBox, .item-chosen-container {
        max-width: 100%;
    }

    #statsFilterForm select {
        max-width: unset !important;
        width: 100%;
    }

    .formList li small.fieldInfo {
        margin-left: 0;
    }

    .scrollContent {
        top: 68px;
    }

    form .formNotice {
        margin: .25rem 0;
    }

    form input + .smallButton {
        display: block;
        width: fit-content;
        margin: .25rem 0 0 0;
    }

    .statsTable tr:first-child td.count::before {
        right: 0;
    }

    .statsTable {
        margin-left: 0 !important;
        margin-top: .5rem !important;
    }

    #statsFilterForm .dateButtonList {
        margin-top: -2.5em;
    }

    #statsFilterForm .navigation button {
        margin-left: 0;
    }

    .tendencyCharts canvas {
        max-width: calc(100% - 3rem);
    }

    body.withUserNav nav#userNav {
        top: 50px;
    }

    .dashboard .mainContent {
        padding: 1rem;
    }

    .dashboard .mainColumn .column:first-of-type {
        padding-right: .5rem;
    }

    .dashboard .mainColumn .column:last-of-type {
        padding-right: .5rem;
    }

    .dashboard .mainColumn .column + .column {
        padding: 0;
    }

    .dashboard .asideColumn {
        padding-left: 0;
    }

    .dashboardBoxContent {
        padding: 0 1rem 1.5rem;
    }

    .dashboard main .header:first-child h1 i {
        float: left;
    }

    .dashboardBox .header.subHeader {
        padding: 0 1rem;
    }

    ul.dashboardLinkList.coursesComingUpModuleList {
        width: calc(100% - .5rem);
    }

    body.loading .loader {
        padding-top: 15rem;
    }

    body.scrolledToTabContent ul.toolList {
        top: 52px;
    }
}

@media screen and (max-width:1023px) {
    body:not(.singleSectionMode) #mobileHeader {
        display: block;
        height: 50px;
        background: var(--navigation-background-color);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 101;
    }

    label.switch-caption .full {
        display: none;
    }

    label.switch-caption .short {
        display: inline;
    }

    #searchHandler, #searchForms {
        position: static;
    }

    #searchHandler {
        max-width: 100% !important;
        width: auto;
        justify-content: flex-start;
    }

    #searchHandler a.searchTrigger, #searchHandler a.searchClose {
        display: none;
    }

    #searchForms {
        width: 100% !important;
        max-width: 42rem !important;
        padding: 0 0 1em !important;
        background: transparent;
    }

    #mobileHeader a {
        color: #fff;
        display: inline-block;
        margin: 13px 2.5%;
        text-decoration: none;
    }

    #mobileHeader a i {
        font-size: 2.1em;
    }

    main {
        left: 0 !important;
        top: 50px;
        min-width: unset;
    }

    .scrollContent {
        top: 88px;
    }

    .pad {
        padding: 15px 1.5em;
    }

    .singleSectionMode main {
        top: 0;
    }

    #mainNav, .treeMenu, #sectionTree {
        display: none;
    }

    .notifications {
        top: 15em;
    }

    body.hasNav {
        overflow: hidden !important;
    }

    #mobileHeader #menuClose {
        display: none;
    }

    body.hasNav #mobileHeader #menuClose {
        display: block;
    }

    body.hasNav #mobileHeader #menuOpen {
        display: none;
    }

    #userAvatar a {
        text-decoration: none;
        zoom: 1.4;
        margin-top: 10px;
    }

    body.hasUserNav #userAvatar a {
        background: #fff;
        color: #111;
    }

    body.hasNav #mainNavMobile {
        left: 0;
    }


    #mainNavMobile #userNav {
        position: absolute;
        top: 138px;
        width: 100%;
        background: var(--navigation-background-color);
        left: -100%;
        border: none;
        box-shadow: none;
        font-size: 1.2em;
        transition: left 400ms;
    }

    body.hasUserNav #mainNavMobile #userNav {
        left: 0;
    }

    #mainNavMobile #userNav .header {
        background: var(--navigation-background-color);
        padding: 20px;
        height: auto;
    }

    #mainNavMobile #userNav .header h1 {
        top: unset;
        position: static;
        font-size: 1em;
    }

    #mainNavMobile #userNav a {
        visibility: hidden;
    }

    body.hasUserNav #mainNavMobile #userNav a {
        visibility: visible;
    }

    #mainNavMobile #userNav a:hover {
        background: none;
    }

    #mainNavMobile #userNav i {
        font-size: 1.2em;
        width: 22px;
    }

    #mainNavMobile {
        display: block !important;
        overflow: auto;
        position: fixed;
        top: 0;
        left: -100%;
        bottom: 0;
        z-index: 10000;
        width: 100%;
        max-width: 450px;
        overflow-y: auto;
        padding-bottom: 2rem;
        background: #fff;
        color: #111;
        transition: left 400ms;
        box-shadow: rgba(0,0,0,.35) 0 0 15px;
    }

    #mainNavMobile a.burger {
        position: absolute;
        left: 1.5rem;
        top: 1em;
        color: #fff;
    }

    #mainNavMobile a.burger i {
        font-size: 2rem;
    }

    #mainNavMobile #userAvatar {
        background: var(--navigation-background-color);
        padding: 59px 0 1em;
    }

    #mainNavMobile #userNav {
        color: #fff;
    }

    #mainNavMobile .navList.nav-lvl-1 {
        padding: 2em 0;
    }

    #mainNavMobile .navList .nav-lvl-1-item {
        border-bottom: solid 1px #ddd;
    }

    #mainNavMobile .navList a {
        display: flex;
        text-decoration: none;
        color: inherit;
        padding: .7em 1.5rem;
        align-items: center;
        gap: 0.5rem;
        box-sizing: border-box;
        width: 100%;
    }

    #mainNavMobile > .navList a.active {
        color: var(--active-color);
    }

    #mainNavMobile #userNav a.active {
        opacity: .7;
    }

    #mainNavMobile .navList .nav-item-wrapper a:not(:only-child) {
        width: calc(100% - 4rem);
    }

    #mainNavMobile .navList .nav-item-wrapper {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        position: relative;
    }

    #mainNavMobile .navList .nav-lvl-1-item > .nav-item-wrapper a {
        font-size: 1.3em;
        gap: 1rem;
    }

    #mainNavMobile .navList .nav-lvl-1-item > .nav-item-wrapper a:not(.toggler) i {
        font-size: 1.2em;
        width: 22px;
    }

    #mainNavMobile .navList .nav-item-wrapper a.toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 4rem;
        background: #f5f5f5;
    }

    #mainNavMobile .navList .nav-item-wrapper a.item[href="#"] + a.toggler {
        position: absolute;
        z-index: 2;
        inset: 0;
        width: 100%;
        background: none;
        justify-content: flex-end;
    }

    #mainNavMobile .nav-item-wrapper a.toggler i {
        transform: rotate(0deg);
        transition: transform 400ms;
    }


    #mainNavMobile .expanded > .nav-item-wrapper a.toggler i {
        transform: rotate(90deg);
    }

    #mainNavMobile li.has-children .nav-lvl-2 {
        display: none;
    }

    #mainNavMobile li.has-children.expanded .nav-lvl-2 {
        display: block;
    }

    #mainNavMobile .nav-lvl-2 li.has-children .navList {
        display: none;
    }

    #mainNavMobile .nav-lvl-2 li.has-children.expanded .navList {
        display: block;
        padding-left: 2em;
    }

    #mainNavMobile .nav-lvl-2 a:not(.toggler) {
        display: block;
        padding: .6em 1.5rem;
        padding-left: calc(22px + 2.5rem);
        min-width: 200px;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #mainNavMobile .nav-lvl-2-item > .nav-item-wrapper a:not(.toggler) {
        font-size: 1.2em;
    }

    #mainNavMobile .nav-lvl-2-item:first-child > .nav-item-wrapper > a {
        padding-top: .7em;
    }

    #mainNavMobile .nav-lvl-2-item:last-child > .nav-item-wrapper > a {
        padding-bottom: .7em;
    }

    #mainNavMobile .nav-lvl-3-item a:not(.toggler) {
        font-size: 1.1em;
        padding-left: calc(22px + 2.5rem);
    }

    #mainNavMobile .nav-lvl-3-item:first-child > .nav-item-wrapper > a {
        padding-top: .7em;
    }

    #mainNavMobile .nav-lvl-3-item:last-child > .nav-item-wrapper > a {
        padding-bottom: .7em;
    }

    ul.breadcrumbList li {
        display: none;
    }

    ul.breadcrumbList li:nth-child(1), ul.breadcrumbList li:nth-last-child(2) {
        display: flex;
        font-size: 1em;
    }

    ul.breadcrumbList li:nth-last-child(2) a {
        max-width: 250px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dataTable {
        margin: 0 2.5% 2em;
        width: 94%;
    }

    .dataTable thead th, .dataTable td {
        max-width: 50px;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    ul.toolList {
        max-width: 100%;
        white-space: nowrap;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .header {
        padding-inline: 2.5%;
    }

    body.scrolledToTabContent ul.toolList {
        top: 136px;
    }

    .mainContent.scrollContent.hasToolbar {
        top: 144px;
    }

    .tabContent ul.toolList {
        padding: 0 2.5%;
    }

    ul.toolList button {
        margin-bottom: 0;
    }

    .gutter + ul.toolList, .gutter + main > ul.toolList {
        margin-bottom: 0;
    }

    ul.tabList {
        margin: 0 2.5%;
    }

    div.card {
        padding: 15px 2.5%;
        margin-bottom: 1em;
    }

    div.card ul.cardList {
        width: 97%;
    }

    body.dashboard {
        overflow: auto;
    }

    .dashboard main, .dashboard #aside, .dashboard .scrollContent, .dashboard #userInfo {
        position: static;
        width: auto;
        height: auto;
    }

    .dashboard main {
        margin-top: 50px;
    }

    .dashboard .scrollContent {
        overflow: visible;
    }

    .dashboard .mainHeader {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        height: 88px;
    }

    .dashboard .mainContent {
        flex-direction: column;
    }

    .mainHeader {
        height: 88px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        justify-content: center;
    }

    ul.breadcrumbList {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        position: static;
    }

    .dashboard #primaryAdministratorToggle {
        position: absolute;
        margin-left: auto;
        margin-top: auto;
        top: 5.2rem;
        left: 1.5rem;
        right: auto;
        text-align: center;
    }

    .dashboard #primaryAdministratorToggle label {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 0;
    }

    .dashboard main .header:first-child h1.firstHeader {
        display: none;
    }

    ul.dashboardLinkList li a {
        max-width: 70%;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    ul.dashboardLinkList li .comment {
        max-width: 95%;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    ul.dashboardLinkList button.listBtn {
        margin-bottom: 0;
    }

    .dashboardBoxContent {
        max-height: none;
        height: auto !important;
    }

    div.card .cardHeader h2 {
        max-width: calc(100% - 4em);
    }

    #datePickerWrapper {
        max-width: 280px;
    }

    .formList.sideBySide li {
        display: block;
    }

    .dashboard .column {
        flex: 100%;
        width: 100%;
        max-width: none;
        flex-direction: column;
    }

    .dashboard .mainColumn {
    }

    .dashboard .column {
        flex-direction: column;
        padding-right: 0 !important;
    }

    .loginpage header {
        margin-left: 0;
    }

    main:not(.chromeless) .pickmeup .pmu-instance {
        width: auto;
        border-right: none;
    }

    body:has(main.chromeless) .pickmeup {
        max-width: 25rem;
    }

    ul.toolList li form {
        display: none;
    }

    .template2243 ul.toolList li.custom {
        display: none;
    }


    /* login */
    .loginpage .wrapper {
        max-width: 20em;
        width: calc(100% - 6em);
        font-size: 1.1em;
    }

    .loginpage header img {
        max-width: 80%;
        margin: 0 auto;
    }

    .loginpage .formList li label {
        text-align: left;
        margin-right: auto;
    }

    .loginpage .formList li.navigation button {
        margin: 0 auto 2em;
        width: 100%;
    }

    .loginpage .formList li.navigation a {
        white-space: nowrap;
        width: 100%;
        text-align: center;
        display: block;
    }

    .loginpage form div.status {
        margin-left: 0;
    }

    .loginpage form {
        max-width: 500px;
        margin: 0 auto;
    }

    .administratorCalendar .thisWeekButton {
        margin: 0 1rem 0 0;
    }

    .administratorCalendar {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
    }

    #searchHandler a.searchTrigger {
        margin-right: 2rem;
    }

    #searchForms {
        padding-right: 1rem;
    }
}

@media screen and (max-width: 600px) {
    .administratorCalendar .calendarDaysWorkWeek {
        grid-template-columns: repeat(1, 100%);
    }

    .administratorCalendar .administratorCalendarWeek {
        font-size: 1em;
    }

    .administratorCalendar .thisWeekButton {
        margin: 0 1rem 0 0;
    }

    .administratorCalendar .administratorCalendarArrow {
        margin: 0 0.2rem;
    }
}


@media screen and (max-height: 1023px) {
    #mainNav ul li a {
        padding: .95em 15px;
    }

    #mainNav ul li a i {
        font-size: 2em;
    }
}


@media screen and (max-height: 768px) {
    #mainNav ul li a {
        padding: .75em 15px;
    }

    #mainNav ul li a i {
        font-size: 1.6em;
    }

    #mainNav ul li a span {
        font-size: .7em;
        padding-top: .1em;
    }
}


@media print {
    html {
        font-size: 10px;
    }

    nav, #userInfo, ul.toolList, .noPrint {
        display: none !important;
    }

    main {
        left: 0 !important;
        min-width: unset;
    }

    .scrollContent {
        overflow: visible;
        padding-top: 0;
    }

    .header {
        background: #fff;
        height: auto;
        color: #222;
    }

    .dataTable {
        width: 100%;
        margin: 0 0 2em;
    }

    .dataTable .tablesorter-filter-row {
        display: none;
    }

    body.nameTagsPage {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.nameTagsPage .header {
        display: none;
    }

    body.nameTagsPage main, body.nameTagsPage .scrollContent {
        position: static;
    }

    .nameTags {
        height: auto !important;
        margin: 0 !important;
        border: none !important;
        page-break-before: always;
    }

    .nameTags:first-child {
        page-break-before: avoid;
    }

    .nameTags div.nameTag {
        border: none !important;
    }

    .nameTags.type2 {
        page-break-before: avoid;
        zoom: normal !important;
    }
}