@charset "UTF-8";
@import "/includes/styles/jquery.scheduler.css" layer(components);
@import "/includes/styles/jquery.tagit.css" layer(components);
@import "/includes/vendor/redactor-3-5-2/redactor.min.css" layer(components);
@import "/includes/vianpm/cropperjs/dist/cropper.min.css" layer(components);
@import "/includes/vianpm/dropzone/dist/dropzone.css" layer(components);
@import "/includes/vianpm/fontawesome-kit/css/fontawesome.min.css" layer(components);
@import "/includes/vianpm/fontawesome-kit/css/custom-icons.min.css" layer(components);
@import "/includes/vianpm/fontawesome-kit/css/brands.min.css" layer(components);
@import "/includes/vianpm/fontawesome-kit/css/regular.min.css" layer(components);
@import "/includes/vianpm/fontawesome-kit/css/solid.min.css" layer(components);
@import "/includes/vianpm/fullcalendar/dist/fullcalendar.css" layer(components);
@import "/includes/vianpm/jqGrid-5.3.2/css/ui.jqgrid.css" layer(components);
@import "/includes/vianpm/jquery-ui/dist/themes/redmond/jquery-ui.min.css" layer(components);
@import "/includes/vianpm/jquery.fancybox/source/jquery.fancybox.css" layer(components);
@import "/includes/vianpm/responsive-slides/responsiveslides.css" layer(components);
@import "/includes/vianpm/select2/dist/css/select2.css" layer(components);
@import "/includes/vianpm/selectize/dist/css/selectize.default.css" layer(components);
@import "/includes/vianpm/video.js/dist/video-js/video-js.css" layer(components);
@import "/includes/vianpm/tinycolorpicker/examples/simple/css/website.css" layer(components);
@import "/includes/vianpm/webui-popover/dist/jquery.webui-popover.css" layer(components);
@import "/includes/styles/jquery-ui.multiselect.css" layer(components);
@layer reset, tailwind, primevue, components, defaults, utilities, overrides;
@layer defaults {
  div.textblock {
    padding-bottom: 15px;
  }
  div.textblock p {
    margin-top: 15px;
  }
  .image-checkbox {
    cursor: pointer;
    margin-right: 5px;
  }
  p.extra-information {
    padding: 10px;
  }
  span.entry-option-unit {
    display: inline-block;
    padding-top: 5px;
  }
  .reactions {
    position: absolute;
    bottom: 10px;
  }
  span.requiredStar {
    color: var(--color-text-faded);
    font-size: 16px;
  }
  .sub-text {
    color: var(--color-text-muted);
  }
  .sortButton {
    cursor: move;
    display: block;
    float: right;
    margin: 4px 5px 0 5px;
    color: var(--color-text-dimmed);
  }
  .sortButton:hover {
    color: var(--color-text);
  }
  .sortButton--fa {
    cursor: move;
    padding: 0;
    float: none;
    margin: 0;
  }
  .sortButton--fa i {
    text-align: center;
    padding: 4px 4px;
    cursor: move;
  }
  td.sortButton i {
    cursor: move;
  }
  i.sortButton {
    cursor: grab;
    padding: 2px;
    margin: 3px;
  }
  i.editQuestion {
    cursor: pointer;
    padding: 2px;
    margin: 3px;
  }
  h3.subcategory-header {
    padding: 5px 0 5px 0;
    margin: 20px 0 10px 0;
  }
  .square {
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    line-height: normal;
  }
  .deployment {
    background-image: var(--gradient-label-deployment);
  }
  .vim {
    background-image: var(--gradient-label-vim);
  }
  .complaint {
    background-image: var(--gradient-label-complaint);
  }
  .calamity {
    background-image: var(--gradient-label-calamity);
  }
  .aggression {
    background-image: var(--gradient-label-aggression);
  }
  .homesafe {
    background-image: var(--gradient-label-homesafe);
  }
  .dataleak {
    background-image: var(--gradient-label-dataleak);
  }
  .inquiry {
    background-image: var(--gradient-label-inquiry);
  }
  .improvementproposal {
    background-image: var(--gradient-label-improvementProposal);
  }
  .audit {
    background-image: var(--gradient-label-audit);
  }
  .label {
    border-radius: 3px;
    color: var(--color-label-text);
    padding: 0 4px 1px 4px;
    font-size: var(--body-size-extrasmall);
  }
  .label-large {
    padding: 4px;
  }
  .label-aqua {
    background-color: var(--color-label-aqua);
  }
  .label-navy {
    background-color: var(--color-label-navy);
  }
  .label-orange {
    background-color: var(--color-label-orange);
  }
  .label-teal {
    background-color: var(--color-label-teal);
  }
  .label-maroon {
    background-color: var(--color-label-maroon);
  }
  .label-lightblue {
    background-color: var(--color-label-lightblue);
  }
  .label-blue {
    background-color: var(--color-label-blue);
  }
  .label-olive {
    background-color: var(--color-label-olive);
  }
  .label-doc {
    background-color: var(--color-doc);
  }
  .label-succes {
    background-color: var(--color-util-success);
  }
  .label-concept {
    background-color: var(--color-issue-concept);
  }
  .label-new {
    background-color: var(--color-issue-new);
  }
  .label-pending {
    background-color: var(--color-issue-pending);
  }
  .label-active {
    background-color: var(--color-issue-active);
  }
  .label-reviewable {
    background-color: var(--color-issue-reviewable);
  }
  .label-solved {
    background-color: var(--color-issue-solved);
  }
  .label-rejected {
    background-color: var(--color-issue-rejected);
  }
  .label-closed {
    background-color: var(--color-issue-closed);
  }
  span.label-expiration {
    background-color: var(--color-base-100);
    border-radius: 3px;
    padding: 1px 6px 2px 6px;
    font-size: var(--body-size-extrasmall);
  }
  span.label-expiration.alert {
    background-color: var(--color-monitor-red);
    color: var(--color-label-text);
  }
  .general-warning {
    display: block;
    float: right;
    font-size: 11px;
    color: var(--color-util-error);
  }
  .count {
    background-color: var(--color-base-400);
    padding: 1px 4px;
    color: var(--color-base-50);
    font-size: 10px;
    border-radius: 3px;
  }
  td#codeCheckResult,
  td#plateNumberCheckResult {
    text-align: right;
  }
  span.label-unique,
  span.label-not-unique {
    border-radius: 3px;
    font-size: 12px;
    padding: 3px 5px 6px 5px;
    color: #fff;
  }
  span.label-unique {
    background-color: var(--color-green-500);
  }
  span.label-not-unique {
    background-color: var(--color-red-500);
  }
  /* action labels */
  span.label-view,
  span.label-save,
  span.label-delete {
    border-radius: 3px;
    font-size: 11px;
    padding: 1px 5px 2px 5px;
    color: #fff;
  }
  span.label-view {
    background-color: var(--color-indigo-500);
  }
  span.label-save {
    background-color: var(--color-green-500);
  }
  span.label-delete {
    background-color: var(--color-red-500);
  }
  .thumb {
    border-radius: 3px;
  }
  tr.hide {
    display: none;
  }
  .warning,
  .success {
    margin: 10px 0;
    padding: 5px;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
  }
  .warning {
    border-color: var(--color-util-error);
    background-color: var(--color-util-error-bg);
  }
  .success {
    border-color: var(--color-util-success);
    background-color: var(--color-util-success-bg);
  }
  div#container {
    position: relative;
    padding-bottom: 35px;
    min-height: 300px;
  }
  .column-left {
    width: 690px;
    float: left;
  }
  .column-right {
    width: 220px;
    float: right;
  }
  .dialogbody > .wrapper {
    padding: 20px;
  }
  .dialogbody > .site-header + .wrapper {
    padding: 0 20px;
  }
  .webview #info {
    padding: 20px;
  }
  .header-bullet {
    background-color: var(--color-primary);
    width: 8px;
    height: 8px;
    margin: 5px 5px 1px 0;
    display: inline-block;
  }
  .header-button {
    background-color: var(--color-base-300);
    border-radius: 4px;
    border: 1px solid var(--color-base-300);
    margin-right: 8px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    padding: 6px 12px;
    display: inline-block;
  }
  .header-button.search {
    margin-left: 5px;
    height: 34px;
  }
  .header-button:hover, .header-button:link:hover, .header-button:active, .header-button.active {
    background: var(--color-base-400);
    border: 1px solid var(--color-base-400);
  }
  .header-button.right {
    float: right;
  }
  #header-logo-right {
    text-align: right;
  }
  #header-logo-right img {
    margin: 50px 0 0 20px;
  }
  @media screen and (max-width: 414px) {
    #header-logo {
      width: 103px;
      height: 80px;
      display: inline-block;
      margin-left: 5px;
      position: relative;
    }
    #header-logo img {
      width: 80px;
      height: 80px;
      display: inline-block;
      margin-left: 5px;
      position: absolute;
      z-index: 1;
    }
    #header-logo-right {
      display: inline-block;
      vertical-align: top;
      height: 80px;
      width: 60%;
      position: relative;
    }
    #header-logo-right img {
      margin: 0;
      position: absolute;
      top: 20px;
      right: 0;
      z-index: 0;
    }
  }
  /* content-menu (catalogue) */
  div#content-menu {
    float: left;
    width: 215px;
  }
  div#content-menu ul {
    display: block;
    width: 215px;
    background-color: var(--color-layout-sidebarbackground);
    border: 1px solid var(--color-base-300);
    border-top: none;
    border-radius: 0 0 0 4px;
    z-index: 5;
    list-style: none;
  }
  div#content-menu li {
    overflow: hidden;
    border-color: var(--color-base-300);
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-base-300);
    padding: 0;
    white-space: nowrap;
    display: block;
  }
  div#content-menu li:last-child {
    border-bottom: none;
  }
  div#content-menu li:hover {
    background-color: var(--color-base-200);
  }
  div#content-menu li.selected {
    background-color: var(--color-layout-cardbackground);
  }
  div#content-menu li a {
    color: var(--color-text);
    line-height: 37px;
    padding: 4px 10px 4px 12px;
    font-weight: bold;
    font-size: 14px;
    display: block;
  }
  div#content-menu li a.child {
    padding-left: 30px;
    font-weight: normal;
    font-size: 13px;
  }
  div.content-main {
    border-radius: 5px;
    box-shadow: 0 0 3px var(--color-base-300);
    background-color: white;
  }
  div.content-margin-bottom {
    margin-bottom: 20px;
  }
  div.content-main-full {
    min-height: 350px;
    z-index: 0;
    border-radius: 0 0 4px 4px;
    position: relative;
    background-position: center center;
    background-size: cover;
    overflow-y: hidden;
  }
  div.content-main-full.blockgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  div.content-main-full div.block {
    background-color: var(--color-layout-cardbackground);
    min-height: 90px;
  }
  div.content-main-full div.block.one {
    grid-column: 1/span 4;
  }
  div.content-main-full div.block.two {
    grid-column-end: span 2;
  }
  div.content-main-full div.block tr:not(.no-hover):hover td,
  div.content-main-full div.block tr.go-to-detail:hover td {
    background-color: var(--color-dashboard-hover);
    cursor: pointer;
  }
  div.content-main-full div.block div.legend {
    width: 90px;
    height: 20px;
    color: white;
    border-radius: 3px;
    text-align: center;
    font-size: 11px;
    line-height: 20px;
    margin: 5px auto;
  }
  .content-main .content {
    padding: 20px;
  }
  div.content-main-header {
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid var(--color-base-300);
    padding: 8px 18px;
    z-index: 1;
    position: relative;
  }
  div.content-main-header.with-search {
    height: 62px;
  }
  div.content-main-header.with-search > div {
    width: 100%;
    margin: 9px 9px 0 0;
  }
  .footer {
    padding: 16px;
    display: grid;
    place-items: center;
    color: var(--color-base-400);
    font-size: 0.813rem;
  }
  .footer a,
  .footer a:link,
  .footer a:visited {
    text-decoration: underline;
    color: var(--color-base-400);
  }
  .footer a:hover,
  .footer a:link:hover,
  .footer a:visited:hover {
    color: var(--color-primary);
  }
  /*------------------------------------*\
  	Components
  \*------------------------------------*/
  #message-box {
    position: absolute;
    font-size: 15px;
    width: 100%;
    display: grid;
    place-items: center;
  }
  #message-box div[class^=cbox_messagebox_] {
    color: white;
    padding: 5px 15px;
    border-radius: 0 0 6px 6px;
    background-repeat: no-repeat;
    background-position-x: 15px;
    background-position-y: center;
    width: fit-content;
  }
  #message-box div[class^=cbox_messagebox_] .cbox_messagebox:before {
    font-family: var(--font-icon);
    font-weight: 900;
    margin-right: 8px;
  }
  #message-box .cbox_messagebox_info {
    background-color: var(--color-messagebox-info);
  }
  #message-box .cbox_messagebox_info .cbox_messagebox:before {
    content: "\f164";
  }
  #message-box .cbox_messagebox_warning,
  #message-box .cbox_messagebox_error {
    background-color: var(--color-messagebox-warning);
  }
  #message-box .cbox_messagebox_warning .cbox_messagebox:before,
  #message-box .cbox_messagebox_error .cbox_messagebox:before {
    content: "\f165";
  }
  div.helpbutton.portfolioresult {
    position: absolute;
    right: -30px;
    top: 12px;
  }
  a.add-participant,
  a.add-teacher {
    border-radius: 5px;
  }
  .rssfeed-item {
    padding: 20px;
  }
  .rssfeed-item-thumbnail {
    float: left;
    margin-right: 20px;
  }
  .rssfeed-item a.read-more {
    border-radius: 5px 5px 5px 5px;
    padding: 4px 15px;
    margin-top: 10px;
  }
  .ruleTargetItemLabel {
    display: block;
    margin-top: 6px;
    float: left;
    margin-left: 3px;
  }
  #rulesresults {
    padding-left: 10px;
    padding-top: 10px;
  }
  .tag {
    background: transparent;
    border: 1px solid var(--color-base-300);
    border-radius: 4px;
    color: var(--color-text);
    display: inline-block;
    height: 26px;
    padding: 0 16px;
    position: relative;
    margin: 0 10px 10px 0;
    display: inline-flex;
    place-items: center;
  }
  .tag:before {
    font-family: var(--font-icon);
    content: "\f111";
    font-weight: 900;
    font-size: 6px;
    margin-right: 8px;
  }
  .tag:hover, .tag.active {
    background-color: var(--color-primary-700);
    border: 1px solid var(--color-primary-700);
    color: white !important;
  }
  div.courses-budget-bar {
    height: 24px;
    background-color: var(--color-base-100);
    border-radius: 4px;
    width: 100%;
    overflow: hidden;
  }
  div.courses-budget-bar-used {
    height: 100px;
    background-color: var(--color-green-600);
    width: 0;
  }
  table.budget-period {
    padding: 10px 10px 5px 10px;
  }
  .tiles-element {
    float: left;
    width: 195px;
    min-height: 308px;
    max-height: 308px;
    overflow: hidden;
    background-color: var(--color-layout-cardbackground);
    margin: 5px 5px 20px 5px;
    border-radius: 4px;
    position: relative;
  }
  .tiles-element:hover {
    background-color: var(--color-layout-sidebarbackground);
  }
  .tiles-element div,
  .tiles-element p {
    padding: 0 10px;
  }
  .tiles-element .date {
    color: var(--color-text-dimmed);
    font-style: italic;
  }
  .instructionalvideos-container {
    width: 100%;
  }
  .instructionalvideos-current-container {
    padding: 15px;
  }
  .tiles-element .instructionalvideos-title {
    padding: 10px;
    margin-bottom: 5px;
  }
  .tiles-element .instructionalvideos-title span.instructionalvideos-meta {
    color: var(--color-text-dimmed);
    display: inline-block;
    margin-top: 5px;
    font-size: 12px;
  }
  div.filter-info {
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 14px;
    border-radius: 4px;
    background-color: var(--color-util-info-bg);
    border: 1px solid var(--color-util-info);
    width: 100%;
  }
  div.filter-info a:link,
  div.filter-info a:visited {
    color: var(--color-util-info-dark);
    text-decoration: underline;
  }
  div.accpoints {
    position: absolute;
    right: 80px;
    width: 50px;
    height: 50px;
    background: var(--color-layout-cardbackground) url(../images/icn_accpoints.png) repeat 0 0;
    text-align: center;
    line-height: 46px;
    font-weight: bold;
    font-size: 18px;
    color: var(--color-neutral-700);
  }
  div.accpoints.no-file {
    right: 0;
  }
  div.accpoints-b {
    width: 50px;
    height: 50px;
    background: var(--color-layout-cardbackground) url(../images/icn_accpoints.png) repeat 0 0;
    color: var(--color-neutral-700);
    text-align: center;
    line-height: 46px;
    font-weight: bold;
    font-size: 18px;
  }
  div.accpointsinhours {
    background-color: var(--color-base-300);
    text-align: center;
    font-size: 13px;
    border-radius: 3px;
    font-weight: bold;
    padding: 2px;
  }
  .not-editable h3 {
    margin-bottom: 5px;
  }
  .not-editable p {
    margin: 0;
    padding: 5px 0 10px 0;
    line-height: 1.6em;
  }
  .not-editable table tr td {
    padding: 3px 0;
    vertical-align: top;
  }
  .faces-polaroid {
    max-width: 100%;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .faces-polaroid div.photo {
    line-height: 0;
  }
  .faces-polaroid div.photo img {
    width: 100%;
    height: auto;
    border-radius: 50%;
  }
  .faces-polaroid .faces-polaroid__name {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
  }
  .newsletteritem h2 {
    font-size: 19px;
    color: var(--color-text-vibrant);
  }
  .newsletteritem h2,
  .newsletteritem img,
  .newsletteritem p,
  .youtube-player {
    margin-bottom: 8px;
  }
  #please-wait-spinner {
    position: absolute;
    z-index: 15;
    top: 50%;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    font-size: 24px;
  }
  .autosave-notification {
    right: 30px;
    position: absolute;
    font-size: 12px;
    border-radius: 3px;
    padding: 10px;
    background-color: var(--color-primary);
  }
  .autosave-notification__fixed {
    top: 30px;
    position: fixed;
    color: #fff;
  }
  .autosave-notification-homesafe {
    background-color: var(--color-label-homesafe);
    color: #fff;
  }
  .open-close {
    text-align: center;
    display: inline-block;
    padding: 10px 0;
    width: 100%;
  }
  .open-close span {
    display: inline-block;
    padding: 3px 10px;
  }
  .button-add-template-to-textarea {
    margin-bottom: 5px;
    width: auto !important;
  }
  div.file-container {
    width: 100px;
    float: left;
    text-align: center;
    margin-right: 8px;
  }
  .file-container-small {
    margin: 4px;
    border: solid 1px var(--color-base-100);
  }
  #media-files-container div.file-container.file-container-small {
    height: 60px;
    width: 60px;
    border-radius: 4px;
  }
  #media-files-container div.file-container.file-container-small a img {
    float: none;
  }
  #media-files-container div.file-container.file-container-small .filename {
    margin-left: 0;
  }
  #printable,
  .printable {
    display: none;
  }
  .printtable {
    border: 1px solid var(--color-base-300);
    width: 100%;
    border-collapse: collapse;
  }
  .printtable td {
    border: 1px solid var(--color-base-300);
    padding: 8px;
    text-align: left;
  }
  .printtable td:first-child {
    width: 150px;
  }
  .expandable-textbox {
    max-height: 100px;
    position: relative;
    overflow: hidden;
    padding: 15px 15px 30px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  .expandable-textbox.expand {
    height: auto;
    max-height: 100%;
  }
  .expandable-textbox.expand .read-more {
    display: none;
  }
  .expandable-textbox h1 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
  }
  .expandable-textbox .read-more {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 10px 0;
    background-image: linear-gradient(to bottom, transparent, var(--color-layout-cardbackground));
  }
  .link-block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .link-block span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .link-block figure {
    flex: 0;
    line-height: 0;
    margin-left: 10px;
  }
  img.trashButton {
    cursor: pointer;
    display: block;
    float: right;
    margin: 3px 5px 0 5px;
  }
  .redactor-content.news-content h1,
  .redactor-content.news-content h2,
  .redactor-content.news-content h3,
  .redactor-content.news-content h4,
  .redactor-content.news-content h5 {
    color: var(--color-text);
  }
  .redactor-content.news-content h2 {
    font-size: 22px;
    margin-bottom: 16px;
  }
  .errorbox,
  .warningbox {
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
  }
  .errorbox {
    background-color: var(--color-util-error-bg);
    border: 1px solid var(--color-util-error) !important;
    color: var(--color-util-error-dark);
  }
  .errorbox ul {
    list-style-position: outside;
    margin-left: 20px;
  }
  .warningbox {
    background-color: var(--color-util-warning-bg);
    border: 1px solid var(--color-util-warning) !important;
    color: var(--color-util-warning-dark);
  }
  /* Projects */
  div.user-icon {
    width: 40px;
    height: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
    background-color: var(--color-base-300);
    border-radius: 50%;
    margin: 7px;
    box-sizing: content-box;
  }
  div#project-image {
    float: left;
  }
  div#project-members {
    float: left;
    margin-left: 5px;
  }
  div.news-block {
    float: left;
    width: 300px;
    padding: 5px;
    margin: 10px 20px 10px 0;
  }
  div.news-header {
    position: relative;
    height: 169px;
  }
  div.news-meta {
    font-size: 12px;
    margin: 5px 0;
  }
  div.news-content {
    text-align: justify;
    margin: 5px 0;
  }
  span.news-title {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
  }
  /* News archive with tiles */
  .archive-item {
    display: block;
    padding: 5px 0;
  }
  .archive-item .news-item-title,
  .groupmessages-item-title {
    display: inline-block;
    padding-left: 20px;
    font-weight: bold;
    font-size: 14px;
  }
  .archive-item .news-item-date,
  .groupmessages-item-date {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    color: var(--color-text-dimmed);
  }
  .archive-item .news-item-description,
  .groupmessages-item-description {
    display: block;
    padding-left: 91px;
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: 12px;
  }
  .newsItemRead h3,
  .newsItemRead .news-item-title {
    color: var(--color-text) !important;
    font-weight: 400;
  }
  .news-archive-container {
    padding: 15px 0 0 30px;
  }
  #group-header {
    height: 150px;
    overflow: auto;
  }
  #group-image {
    float: left;
  }
  #group-members {
    float: left;
  }
  .groupmessages-item-edit {
    border: solid 1px var(--color-base-300);
    padding: 5px 5px 5px 7px;
    border-radius: 50%;
    float: right;
  }
  .groupmessages-item-edit:hover {
    background-color: var(--color-base-200);
  }
  .groupmessages-container .go-to-detail {
    width: 100%;
  }
  .groupmessages-container .column-left {
    width: 640px;
  }
  .system-notification-summary h3 {
    padding: 10px;
    text-align: center;
    height: 62px;
    border-bottom: 1px solid var(--color-layout-sidebarbackground);
  }
  .system-notification-summary .fa {
    font-size: 30px;
  }
  .system-notification-summary .fa-exclamation-triangle {
    color: var(--color-util-error);
  }
  .system-notification-summary .fa-check {
    color: var(--color-util-success);
  }
  .system-notification-summary .indicator {
    font-size: 16px;
    font-weight: bold;
    color: white;
    width: 30px;
    height: 30px;
    margin-left: 8px;
    text-align: center;
    line-height: 30px;
  }
  .system-notification-summary .container-indicator {
    width: 100%;
    text-align: center;
    background-color: var(--color-layout-sidebarbackground);
    height: 70px;
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
  .system-notification-summary .container-indicator:hover, .system-notification-summary .container-indicator:active {
    background-color: var(--color-layout-cardbackground);
  }
  .logout-spinner img {
    float: left;
  }
  .logout-spinner span {
    display: inline-block;
    margin-top: 10px;
    padding-left: 10px;
    font-size: 14px;
  }
  .multi-checkbox-table {
    width: 100%;
  }
  .multi-checkbox-table tr {
    width: 100%;
  }
  .multi-checkbox-table tr td {
    width: 33% !important;
  }
  .form-control {
    padding: 10px;
  }
  div.container-compliment {
    min-height: 150px;
    background-color: var(--color-layout-sidebarbackground);
    margin: 30px;
    border-radius: 10px;
  }
  div.container-compliment:before {
    width: 80px;
    height: 80px;
    content: "\f164";
    position: absolute;
    font-family: var(--font-icon);
    background-color: var(--color-layout-cardbackground);
    color: var(--color-text);
    display: grid;
    place-items: center;
    font-size: 3rem;
    border-radius: 50%;
    font-weight: 900;
    transform: translateX(-25%) translateY(-25%);
    color: var(--color-text-dimmed);
  }
  div.container-compliment div.compliment-description {
    margin: -10px 40px 0 80px;
    padding: 40px 0;
    font-size: 1rem;
  }
  div.container-compliment div.edit-item {
    text-align: right;
  }
  div.container-compliment div.edit-item i {
    margin: 20px 20px 0 0;
    padding: 5px;
    background-color: var(--color-button-default-background);
    border: 1px solid var(--color-button-default-background);
    border-radius: 3px;
    float: right;
  }
  div.container-compliment div.edit-item i:hover {
    background-color: var(--color-button-default-hover-background);
    cursor: pointer;
  }
  .clothing-image {
    box-shadow: 0 0 5px var(--color-base-300);
    border-radius: 5px;
  }
  .teacher-options {
    text-align: center;
  }
  .teacher-options .button {
    position: relative;
  }
  div.info {
    width: 100%;
    height: 20px;
    margin: 0 0 10px 0;
  }
  #searchCourse {
    float: right;
  }
  .planofactioninterventionstable {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
  }
  .planofactioninterventionstable tr th,
  .planofactioninterventionstable tr td {
    padding: 0;
    margin: 0;
    width: 20%;
    float: center;
  }
  .check-mark {
    background-color: #b71c1d;
    position: relative;
    top: 8px;
    border: 1px solid #dddddd;
    padding: 5px 4px 2px 8px;
    display: inline;
    border-radius: 5px;
  }
  .check-mark.done {
    background-color: #a0b42b;
  }
  .badge {
    padding: 2px 5px;
    background-color: #5b677d;
    color: #ffffff;
    border-radius: 15px;
  }
  .questionanswer-checkbox {
    display: inline-block;
    padding: 3px 0 0 0;
  }
  .questionanswer-checkbox input:hover,
  .questionanswer-checkbox label:hover {
    cursor: pointer;
  }
  .like,
  .dislike {
    display: inline-block;
    cursor: pointer;
    margin: 10px 30px 10px;
    font-size: 26px;
    color: var(--color-base-500);
  }
  .dislike:hover,
  .like:hover {
    color: var(--color-primary-500);
    transition: all 0.2s ease-in-out;
    transform: scale(1.2);
  }
  .like.active,
  .dislike.active {
    color: var(--color-primary-500);
    transform: scale(1.2);
  }
  .like.active.small,
  .dislike.active.small {
    margin: 0 30px 0 0;
    transform: scale(0.8);
  }
  .stars {
    float: left;
    height: 46px;
    padding: 0 10px;
  }
  .star:before {
    content: "★";
  }
  .star {
    color: var(--color-yellow-500);
    font-size: 14px;
  }
  .stars:not(:checked) > input {
    position: absolute;
    left: -9999px;
  }
  .stars:not(:checked) > label {
    float: right;
    width: 24px;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: var(--color-base-500);
    margin-top: 0 !important;
  }
  .stars:not(:checked) > label:before {
    content: "★";
  }
  .stars input:checked ~ label {
    color: var(--color-yellow-500);
    /* active */
  }
  .stars:not(:checked) > label:hover,
  .stars:not(:checked) > label:hover ~ label {
    color: var(--color-yellow-500);
    /* inactive hover */
  }
  .stars input:checked + label:hover,
  .stars input:checked + label:hover ~ label,
  .stars input:checked ~ label:hover,
  .stars input:checked ~ label:hover ~ label,
  .stars label:hover ~ input:checked ~ label {
    color: var(--color-yellow-500);
    /* active hover */
  }
  .coursefeedback fieldset {
    background-color: var(--color-layout-sidebarbackground);
    border: 1px solid var(--color-base-300);
    padding: 15px;
  }
  .coursefeedback fieldset ul li {
    padding: 0 0 10px 0;
    list-style-type: none;
  }
  .coursefeedback fieldset ul li .square {
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 10px;
  }
  .coursefeedback fieldset ul li .square.blue {
    background-color: var(--color-coursefeedback-teacher);
  }
  .coursefeedback fieldset ul li .square.orange {
    background-color: var(--color-coursefeedback-student);
  }
  .coursefeedback fieldset ul li .square.blueorange {
    background-image: linear-gradient(var(--color-coursefeedback-teacher), var(--color-coursefeedback-student));
  }
  .documentation-current-container .tiles-element {
    float: left;
    width: 195px;
    min-height: 200px;
    max-height: 200px;
    overflow: hidden;
    margin: 5px 5px 20px 5px;
    border-radius: 4px;
    position: relative;
  }
  .documentation-current-container .tiles-element i {
    margin: -10px 0 10px 10px;
    position: absolute;
    bottom: 0;
    left: 10px;
  }
  .documentation-current-container .documentation-title img {
    position: relative;
    top: 4px;
  }
  .stickyTop {
    position: fixed !important;
    top: 0 !important;
  }
  #virtualVehiclesOverview {
    position: relative;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: 17px;
    background: repeating-linear-gradient(45deg, var(--color-base-50), var(--color-base-50) 10px, var(--color-base-200) 10px, var(--color-base-200) 20px);
    border: 1px dashed var(--color-base-200);
  }
  #virtualVehiclesOverview .header {
    position: absolute;
    left: 15px;
    top: -9px;
    font-weight: bold;
    letter-spacing: normal;
    background: none;
    text-transform: none;
    color: var(--color-base-700);
  }
  .virtualmedicalinstrument {
    padding: 2px 4px;
    background-color: #d1c365;
    color: #ffffff;
    border-radius: 3px;
  }
  .touch-button {
    border: solid 2px var(--color-layout-sidebarbackground);
    float: left;
    background-color: var(--color-layout-sidebarbackground);
    font-size: 0.8125rem;
    font-weight: bold;
    width: 116px;
    height: 86px;
    margin: 5px;
    border-radius: 5px;
    text-align: center;
  }
  .touch-button:active {
    background-color: var(--color-layout-cardbackground);
  }
  .touch-button-icon {
    width: 100%;
    display: inline-block;
    padding: 4px 0;
    display: flex;
    justify-content: center;
  }
  .touch-button-icon img {
    width: 50px;
    float: none;
    filter: var(--filter-clothing-img);
  }
  .touch-button-text {
    display: inline-block;
  }
  .touch-button-selected {
    border: 2px solid var(--color-primary);
    background-color: var(--color-layout-cardbackground);
  }
  .btnTouch {
    width: 360px;
    height: 40px;
  }
  .showVehicles div.locationTitle {
    width: 75%;
    overflow: hidden;
    float: left;
    white-space: nowrap;
  }
  ul.list-participated li span {
    display: inline-block;
    height: inherit;
    vertical-align: top;
  }
  #scrolltop {
    position: fixed;
    bottom: 10px;
    right: 10px;
    margin: 5px;
    padding: 8px 16px;
    background-color: var(--color-button-default-background);
    color: var(--color-button-default-text);
    font-size: 0.8125rem;
    border-radius: 4px;
    display: none;
  }
  #scrolltop:hover {
    background-color: var(--color-button-default-hover-background);
  }
  #scrolltop::before {
    font-family: var(--font-icon);
    content: "\f357";
    font-weight: 900;
    margin-right: 8px;
  }
  .webui-popover {
    background-color: var(--color-popover-background);
  }
  .webui-popover.right > .webui-arrow:after {
    border-right-color: var(--color-popover-background);
  }
  .webui-popover.left > .webui-arrow:after {
    border-left-color: var(--color-popover-background);
  }
  .webui-popover.top > .webui-arrow:after {
    border-top-color: var(--color-popover-background);
  }
  .webui-popover.bottom > .webui-arrow:after {
    border-bottom-color: var(--color-popover-background);
  }
  .webui-popover-title {
    background-color: var(--color-popover-background);
    color: var(--color-text);
    border-bottom-color: var(--color-popover-border);
  }
  .webui-popover-title i {
    margin-right: 10px;
  }
  .webui-popover-popover-container {
    max-width: 480px;
  }
  .webui-popover-title #header-login ul li span.indicator,
  .indicator {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50% !important;
    background: grey;
    font-size: 8px;
    padding: 0;
    border: none;
  }
  .webui-popover-title #header-login ul li span.indicator.available,
  .indicator.available {
    background: var(--color-green-400);
  }
  .webui-popover-title #header-login ul li span.indicator.notavailable,
  .indicator.notavailable {
    background: var(--color-red-400);
  }
  .webui-popover-title #header-login ul li span.indicator.busy,
  .indicator.busy {
    background: var(--color-orange-400);
  }
  .webui-popover-title #header-login ul li span.indicator.meeting,
  .indicator.meeting {
    background: var(--color-orange-400);
  }
  .webui-popover-title #header-login ul li span.indicator.holiday,
  .indicator.holiday {
    background: var(--color-neutral-400);
  }
  .webui-popover-title #header-login ul li span.indicator.unknown,
  .indicator.unknown {
    background: var(--color-neutral-400);
    display: none;
  }
  .setMFAvisible {
    display: none;
  }
  input[name=emailtoken]::placeholder,
  input[name=smstoken]::placeholder {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0;
  }
  #usernameError {
    display: none;
    width: 300px;
    margin-top: -4px;
    margin-left: 4px;
    font-size: 12px;
    padding: 4px 0 2px 4px;
    border-radius: 4px;
    background-color: #ffddde;
    border: 1px solid #db5353 !important;
    box-shadow: inset 0 7px 10px -7px rgba(0, 0, 0, 0.5);
  }
  @media screen and (max-width: 414px) {
    form .button.save {
      margin-left: 0;
    }
  }
  .input-group:not(:last-of-type) {
    margin-bottom: 12px;
  }
  .input-group label {
    display: inline-block;
    color: var(--color-text-dimmed);
    min-width: 135px;
  }
  @media screen and (max-width: 414px) {
    .input-group {
      height: auto;
    }
    .input-group label {
      display: block;
      color: var(--color-text-dimmed);
      margin-bottom: 10px;
    }
  }
  .ajax-loader {
    display: none;
  }
  .ajax-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.5;
    background-color: var(--color-base-300);
    z-index: 99;
  }
  .ajax-image {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    opacity: 1;
    z-index: 100;
    background-color: #fff;
    border-radius: 50%;
    line-height: 0;
    display: grid;
    place-items: center;
  }
  .checkbox_options {
    margin-top: 5px;
    display: none;
  }
  .checkbox_options .selectize-input {
    padding: 2px !important;
  }
  .checkbox_options .selectize-control .selectize-input [data-value] {
    background-image: none !important;
    background-color: #dedede !important;
    color: #000;
    text-shadow: none;
  }
  .checkbox_options .selectize-control.multi .selectize-input > div {
    background-image: none !important;
    border: none;
    margin-top: 2px;
  }
  .answer-options {
    border: 1px solid var(--color-base-300);
    border-radius: 4px;
  }
  .answer-options .answer-options-container {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
  }
  .answer-options .answer-options__add {
    border: none;
    background-color: transparent;
    margin: 0 auto;
    padding: 6px 12px;
    margin: 12px auto;
    display: block;
    cursor: pointer;
    color: var(--color-button-green-background);
  }
  .answer-options .answer-options__add:hover {
    color: var(--color-button-green-hover-background);
  }
  .answer-options .answer-option {
    padding-bottom: 12px;
    padding-top: 12px;
    border-bottom: 1px dotted var(--color-base-300);
  }
  .answer-options .answer-option__answer {
    display: flex;
    gap: 8px;
  }
  .answer-options .answer-option__answer .answer-option__button {
    background-color: transparent;
    border: none;
    height: 35px;
    width: 35px;
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .answer-options .answer-option__answer .answer-option__button:after {
    font-family: var(--font-icon);
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-text-dimmed);
  }
  .answer-options .answer-option__answer .answer-option__button--drag {
    cursor: grab;
  }
  .answer-options .answer-option__answer .answer-option__button--drag:after {
    content: "\e411";
  }
  .answer-options .answer-option__answer .answer-option__button--action:after {
    content: "\e455";
    color: var(--color-text-faded);
  }
  .answer-options .answer-option__answer .answer-option__button--action--active:after {
    color: var(--color-text-default);
  }
  .answer-options .answer-option__answer .answer-option__button--action:hover:after {
    color: var(--color-text-default);
  }
  .answer-options .answer-option__answer .answer-option__button--delete:after {
    content: "\e2ae";
    color: var(--color-button-red-background);
  }
  .answer-options .answer-option__answer .answer-option__button--delete:hover:after {
    color: var(--color-button-red-hover-background);
  }
  .answer-options .answer-option__refferal {
    display: flex;
    margin-top: 8px;
    align-items: center;
    padding: 0 69px 0 38px;
    gap: 8px;
  }
  ul.tagit.ui-widget {
    box-shadow: none;
    border: 1px solid var(--color-form-border);
    background-color: var(--color-form-background);
  }
  ul.tagit li.tagit-new {
    padding: 0.3em 4px 0.3em 0;
  }
  .page-header {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 2.5rem;
  }
  @media (min-width: 640px) {
    .page-header {
      align-items: center;
      flex-direction: row;
    }
  }
  .page-header p {
    font-size: 1rem;
  }
  .page-header hgroup i {
    color: var(--color-primary);
    margin-right: 4px;
  }
  .page-header hgroup i.fa-sky-homesafe {
    color: var(--color-label-homesafe);
  }
  .page-header hgroup i.fa-sky-aggression {
    color: var(--color-label-aggression);
  }
  .page-header hgroup i.fa-sky-calamity {
    color: var(--color-label-calamity);
  }
  .page-header hgroup i.fa-sky-dataincident {
    color: var(--color-label-dataleak);
  }
  .page-header hgroup i.fa-sky-audit {
    color: var(--color-label-audit);
  }
  .page-header hgroup i.fa-sky-complaint {
    color: var(--color-label-complaint);
  }
  .page-header hgroup i.fa-sky-vim {
    color: var(--color-label-vim);
  }
  .page-header hgroup i.fa-sky-inquiry {
    color: var(--color-label-inquiry);
  }
  .page-header hgroup i.fa-sky-improvementproposal {
    color: var(--color-label-improvementproposal);
  }
  .page-header hgroup h1 {
    font-family: var(--font-header);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 6px 0 10px;
    line-height: 1;
  }
  .page-header .meta-info {
    margin-top: 4px;
    color: var(--color-text-dimmed);
    font-style: italic;
    font-weight: 400;
  }
  .page-header .buttongroup {
    margin-left: 24px;
    justify-content: end;
  }
  .article-list {
    list-style: none;
  }
  .article-item {
    display: flex;
  }
  .article-item__media {
    width: 120px;
    flex-shrink: 0;
    flex-grow: 0;
    margin-right: 12px;
  }
  .article-item__media img {
    width: 100%;
    height: auto;
    border-radius: 4px;
  }
  .rolestable table tr td:first-of-type {
    display: flex;
    align-items: center;
  }
  .initials-avatar {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background-color: hsl(calc(var(--colormultiplier) * 7), 30%, 50%);
    font-size: 1.4em;
  }
  .initialAvatar {
    max-width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
  }
  .initialAvatar .svgtext {
    font-size: 2.5rem;
    font-weight: 400;
    fill: white;
  }
  .dot {
    background-color: purple;
    border-radius: 50%;
    height: 32px;
    width: 32px;
    display: grid;
    place-items: center;
    color: var(--color-text-inverted);
    position: relative;
  }
  .dot:before {
    content: " ";
    display: block;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    position: absolute;
    border: 1px solid var(--color-text-inverted);
    border-radius: 50%;
  }
  .dot--green {
    background-color: var(--color-monitor-green);
  }
  .dot--orange {
    background-color: var(--color-monitor-orange);
  }
  .dot--blue {
    background-color: var(--color-monitor-blue);
  }
  .filterlist {
    list-style: none;
    margin-bottom: 12px;
  }
  .filterlist li:not(:last-child) {
    margin-bottom: 8px;
  }
  .filterlist__button {
    background: transparent;
    border: 1px solid var(--color-base-300);
    border-radius: 4px;
    color: var(--color-text);
    display: inline-block;
    height: 26px;
    padding: 0 16px;
    position: relative;
    display: inline-flex;
    place-items: center;
    cursor: pointer;
  }
  .filterlist__button:hover, .filterlist__button.active {
    background-color: var(--color-primary-700);
    border: 1px solid var(--color-primary-700);
    color: white !important;
  }
  .description-list {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
  .avatar {
    border-radius: 50% !important;
    aspect-ratio: 1/1;
  }
  .progressbar {
    height: 1.5rem;
    background-color: var(--color-base-300);
    border-radius: 4px;
    width: 100%;
    overflow: hidden;
    display: flex;
  }
  .progressbar .progresspart {
    height: 1.5rem;
    padding: 0 4px;
    overflow: hidden;
  }
  .progressbar .progresspart:before {
    content: "";
    display: inline-block;
    margin: 8px 0;
  }
  .progressbar .progresspart--green {
    background-color: var(--color-monitor-green);
  }
  .progressbar .progresspart--orange {
    background-color: var(--color-monitor-orange);
  }
  .progressbar .progresspart__percentage {
    color: white;
    font-size: 0.8rem;
    display: inline-block;
    white-space: nowrap;
    line-height: 1.5rem;
  }
  .releasenotes p {
    line-height: 1.4;
  }
  .releasenotes hr {
    margin: 1.25rem 0;
  }
  .releasenotes__date {
    font-style: italic;
    color: var(--color-text-dimmed);
  }
  .releasenotes__header {
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .releasenotes__applist {
    display: flex;
    gap: 4px;
  }
  .releasenotes__applist img {
    width: 24px;
    height: 24px;
  }
  .releasenotes__list {
    list-style: none;
    padding: 0;
  }
  .releasenotes__list li:not(:last-of-type) {
    margin-bottom: 12px;
  }
  .releasenotes__list:not(:last-of-type) {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-base-300);
  }
  .releasenotes__icon {
    padding-top: 1px;
  }
  .releasenotes__item {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 12px;
  }
  .releasenotes__description {
    margin-bottom: 4px;
  }
  .releasenotes__meta {
    color: var(--color-text-dimmed);
    font-style: italic;
  }
  .releasenotes__image {
    max-width: 100%;
    height: auto;
    margin-top: 4px;
    border-radius: 4px;
  }
  /* svg logo */
  .svglogo *[class*=text] {
    fill: var(--color-text-vibrant);
  }
  .svglogo *[class*=background],
  .svglogo *[class*=outer-stroke] {
    fill: var(--color-layout-cardbackground);
  }
  .definitionList {
    display: grid;
    grid-template-columns: [label] min-content [value] 1fr;
    gap: 12px;
  }
  .definitionList dt {
    grid-column: label;
    white-space: nowrap;
    color: var(--color-text-dimmed);
  }
  .definitionList dd {
    grid-column: value;
  }
}
/* ==========================================================================
   Globals
   ========================================================================== */
@layer reset {
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: 0;
    box-sizing: border-box;
  }
  @media not print {
    *[data-uimode=dark] {
      color-scheme: dark;
    }
  }
  html {
    font-size: 16px;
    min-height: 100vh;
  }
  @media screen and (max-device-width: 480px) {
    body {
      -webkit-text-size-adjust: 100%;
    }
  }
}
@layer defaults {
  body {
    background: var(--color-layout-background);
    background: var(--gradient-layout-background);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: var(--font-body);
    font-size: var(--body-size-small);
    color: var(--color-text);
    overflow-y: scroll;
  }
  a img {
    border: 0;
  }
  ul,
  ol {
    list-style-position: inside;
  }
  a:link,
  a:visited {
    text-decoration: none;
    color: var(--color-text);
  }
  a.link {
    color: var(--color-primary) !important;
  }
  a.link:hover {
    color: var(--color-primary-700) !important;
  }
  hr {
    border: 0;
    border-top: 1px solid var(--color-base-300);
  }
  strong {
    font-weight: bold;
  }
  em {
    font-style: italic;
  }
}
/* ==========================================================================
   Utilities that can be used throughout the site
   ========================================================================== */
@layer utilities {
  .bold {
    font-weight: bold;
  }
  .center {
    text-align: center;
  }
  .right {
    text-align: right;
  }
  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  *[class*=lineclamp-],
  .lineclamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: var(--linesclamped, 1);
  }
  .lineclamp-2 {
    --linesclamped: 2;
  }
  .lineclamp-3 {
    --linesclamped: 3;
  }
  .single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bg-virtualmedicalinstrument {
    background-color: var(--color-label-virtualmedicalinstrument);
  }
  .bg-virtualvehicle {
    background-color: var(--color-label-virtualvehicle);
  }
  .no-border {
    border: 0 !important;
  }
  .no-margin {
    margin: 0 !important;
  }
  .rounded {
    border-radius: 4px;
  }
  @media (max-width: 639px) {
    .hide-on-mobile {
      display: none;
    }
  }
  img.image-right {
    float: right;
    margin: 0 0 6px 6px;
  }
  img.image-left {
    float: left;
    margin: 0 6px 6px 0;
  }
  .hidden {
    display: none;
  }
}
@layer overrides {
  .teleport {
    display: none;
  }
}
@layer defaults {
  .alert {
    --alert-backgroundcolor: var(--color-layout-cardbackground);
    --alert-backgroundcoloralt: var(--color-base-50);
    --alert-bordercolor: var(--color-base-300);
    --alert-textcolor: var(--color-text);
    --alert-primary: var(--color-base-500);
    --alert-linkcolor: var(--color-primary);
  }
  .alert--info {
    --alert-backgroundcolor: var(--color-layout-cardbackground);
    --alert-backgroundcoloralt: var(--color-util-info-bg);
    --alert-bordercolor: var(--color-util-info);
    --alert-textcolor: var(--color-text);
    --alert-primary: var(--color-util-info);
    --alert-linkcolor: var(--color-primary);
  }
  .alert--error {
    --alert-backgroundcolor: var(--color-layout-cardbackground);
    --alert-backgroundcoloralt: var(--color-util-error-bg);
    --alert-bordercolor: var(--color-util-error);
    --alert-textcolor: var(--color-text);
    --alert-primary: var(--color-util-error);
    --alert-linkcolor: var(--color-primary);
  }
  .alert--warning {
    --alert-backgroundcolor: var(--color-layout-cardbackground);
    --alert-backgroundcoloralt: var(--color-util-warning-bg);
    --alert-bordercolor: var(--color-util-warning);
    --alert-textcolor: var(--color-text);
    --alert-primary: var(--color-util-warning);
    --alert-linkcolor: var(--color-primary);
  }
  .alert--success {
    --alert-backgroundcolor: var(--color-layout-cardbackground);
    --alert-backgroundcoloralt: var(--color-util-success-bg);
    --alert-bordercolor: var(--color-util-success);
    --alert-textcolor: var(--color-text);
    --alert-primary: var(--color-util-success);
    --alert-linkcolor: var(--color-primary);
  }
  .alert {
    line-height: 1.4;
    border-radius: 4px;
    padding: 12px;
    background-color: var(--alert-backgroundcolor);
    color: var(--alert-textcolor);
    box-shadow: var(--shadow-box-xy);
    display: block;
    text-align: left;
  }
  .alert--small {
    padding: 8px;
    width: max-content;
  }
  .alert .alert__inner {
    border-left-width: 4px;
    border-left-color: var(--alert-primary);
    border-left-style: solid;
    padding-left: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .alert .alert__icon {
    color: var(--alert-primary);
    flex: 0 0 auto;
  }
  .alert--small .alert__icon {
    font-size: 16px;
  }
  .alert .alert__content {
    flex: 1 1 auto;
  }
  .alert .alert__content p {
    margin-top: 0;
  }
  .alert .alert__title {
    font-weight: 600;
  }
  .alert .alert__description a {
    color: var(--alert-linkcolor);
  }
  .alert .alert__description a:hover {
    text-decoration: underline;
  }
  .alert .alert__buttons {
    margin-top: 0.5rem;
  }
  .ui-tabs .alert,
  .card .alert,
  .fancybox-inner .alert {
    box-shadow: none;
    border: 1px solid var(--alert-bordercolor);
    background-color: var(--alert-backgroundcoloralt);
  }
}
/*------------------------------------*\
	Animations
\*------------------------------------*/
@layer defaults {
  .flash {
    -moz-animation: flash 1s ease-out;
    -moz-animation-iteration-count: 1;
    -webkit-animation: flash 1s ease-out;
    -webkit-animation-iteration-count: 1;
    -ms-animation: flash 1s ease-out;
    -ms-animation-iteration-count: 1;
  }
  @-webkit-keyframes flash {
    0% {
      background-color: none;
    }
    50% {
      background-color: #fbf8b2;
    }
    100% {
      background-color: none;
    }
  }
  @-moz-keyframes flash {
    0% {
      background-color: none;
    }
    50% {
      background-color: #fbf8b2;
    }
    100% {
      background-color: none;
    }
  }
  @-ms-keyframes flash {
    0% {
      background-color: none;
    }
    50% {
      background-color: #fbf8b2;
    }
    100% {
      background-color: none;
    }
  }
}
@layer defaults {
  .helpbutton {
    padding: 8px;
    display: inline-grid;
    place-items: center;
  }
  .helpbutton i {
    color: var(--color-base-700);
  }
  .buttongroup {
    display: flex;
    gap: 12px;
    margin-left: 12px;
    flex-wrap: wrap;
  }
  @media screen and (max-width: 640px) {
    .buttongroup {
      margin-left: 0;
      margin-top: 24px;
    }
  }
  .buttongroup--right {
    justify-content: flex-end;
  }
  .button {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--color-button-default-background);
    background: var(--color-button-default-background);
    display: inline-block;
    font-weight: 700;
    color: var(--color-button-default-text);
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    line-height: initial;
  }
  .button:link, .button:visited {
    color: var(--color-base-700);
    background: var(--color-base-300);
  }
  .button:active, .button:hover {
    background: var(--color-button-default-hover-background);
    border: 1px solid var(--color-button-default-hover-background);
  }
  .button--primary, .button--primary:link, .button--primary:visited {
    background: var(--color-button-primary-background);
    border: 1px solid var(--color-button-primary-background);
    color: var(--color-button-primary-text);
  }
  .button--primary:hover, .button--primary:link:hover, .button--primary:visited:hover {
    background: var(--color-button-primary-hover-background);
    border: 1px solid var(--color-button-primary-hover-background);
    color: var(--color-button-primary-text);
  }
  .button--red, .button--red:link, .button--red:visited, .button.delete, .button.delete:link, .button.delete:visited {
    background: var(--color-button-red-background);
    border: 1px solid var(--color-button-red-background);
    color: var(--color-button-red-text);
  }
  .button--red:hover, .button--red:link:hover, .button--red:visited:hover, .button.delete:hover, .button.delete:link:hover, .button.delete:visited:hover {
    background: var(--color-button-red-hover-background);
    border: 1px solid var(--color-button-red-hover-background);
    color: var(--color-button-red-text);
  }
  .button--info, .button--info:link, .button--info:visited {
    background: var(--color-util-info);
    border: 1px solid var(--color-util-info);
    color: white;
  }
  .button--info:hover, .button--info:link:hover, .button--info:visited:hover {
    background: var(--color-util-info-dark);
    border: 1px solid var(--color-util-info-dark);
    color: white;
  }
  .button--add, .button--save, .button--green, .button.add, .button.save {
    background: var(--color-button-green-background);
    color: var(--color-button-green-text);
    border: 1px solid var(--color-button-green-background);
  }
  .button--add:link, .button--add:visited, .button--save:link, .button--save:visited, .button--green:link, .button--green:visited, .button.add:link, .button.add:visited, .button.save:link, .button.save:visited {
    border: 1px solid var(--color-button-green-background);
    background: var(--color-button-green-background);
    color: var(--color-button-green-text);
  }
  .button--add:active, .button--add:hover, .button--save:active, .button--save:hover, .button--green:active, .button--green:hover, .button.add:active, .button.add:hover, .button.save:active, .button.save:hover {
    background: var(--color-button-green-hover-background);
    border: 1px solid var(--color-button-green-hover-background);
    color: var(--color-button-green-text);
  }
  .button--blue {
    background: var(--color-button-blue-background);
    color: var(--color-button-blue-text);
    border: 1px solid var(--color-button-blue-background);
  }
  .button--blue:link, .button--blue:visited {
    border: 1px solid var(--color-button-blue-background);
    background: var(--color-button-blue-background);
    color: var(--color-button-blue-text);
  }
  .button--blue:active, .button--blue:hover {
    background: var(--color-button-blue-hover-background);
    border: 1px solid var(--color-button-blue-hover-background);
    color: var(--color-button-blue-text);
  }
  .button--link, .button--link:link, .button--link:visited {
    background: none;
    border: 1px solid transparent;
  }
  .button--link:hover, .button--link:link:hover, .button--link:visited:hover {
    background: none;
    border: 1px solid transparent;
  }
  .button.small, .button--small, .button-linked-application {
    padding: 4px 6px;
    font-size: 0.75rem;
    font-weight: 600;
  }
  .button.large, .button--large {
    padding: 8px 12px;
    font-size: 1.125rem;
    font-weight: 600;
  }
  .button.timestamp-button {
    width: auto;
    position: relative;
    float: right;
    top: 1px;
    border-radius: 4px 4px 0 0;
  }
  .button.marginright {
    margin-right: 10px;
  }
  .button.edit {
    font-size: 13px;
    border-radius: 4px;
    margin-right: 6px;
  }
  .button.edit img {
    margin-bottom: -3px;
  }
  .button.disabled, .button.disabled:hover {
    color: var(--color-text-faded) !important;
    border: 1px solid var(--color-base-100);
    background: var(--color-base-100);
    cursor: default;
  }
  .button.edit-issue {
    padding: 4px 12px 4px 12px;
    margin-left: 30px;
  }
  .button.edit-issue span.icon-issue-new,
  .button.edit-issue span.icon-issue-pending {
    display: inline-block;
    width: 15px;
    height: 14px;
  }
  .button.edit-issue span.icon-issue-new {
    display: grid;
    place-items: center;
  }
  .button.edit-issue span.icon-issue-new:after {
    font-family: var(--font-icon);
    content: "\e0b7";
    font-weight: 600;
    font-size: 12px;
  }
  .button.edit-issue span.icon-issue-pending {
    display: grid;
    place-items: center;
  }
  .button.edit-issue span.icon-issue-pending:after {
    font-family: var(--font-icon);
    content: "\f253";
    font-weight: 600;
    font-size: 12px;
  }
  .button.add-issue {
    padding: 0px 12px 0 12px;
    margin-left: 30px;
  }
  .button.add-issue span.icon-issue-new,
  .button.add-issue span.icon-issue-pending {
    display: inline-block;
    width: 22px;
    height: 25px;
    display: grid;
    place-items: center;
  }
  .button.add-issue span.icon-issue-new:before,
  .button.add-issue span.icon-issue-pending:before {
    font-family: var(--font-icon);
    content: "\f253";
    font-weight: 600;
    font-size: 12px;
  }
  .button.add-issue span.icon-issue-new:before {
    content: "\e0b7";
  }
  .button.add-issue span.icon-issue-pending:before {
    content: "\f252";
  }
  .button.btn-quantity {
    padding: 3px;
    border-radius: 4px;
    border: 0;
    width: 22px;
    height: 25px;
    position: relative;
    top: -1px;
  }
  .button.btn-quantity:hover {
    color: #fff;
    background-color: #305a54;
    cursor: pointer;
  }
  .button.download {
    padding: 4px 6px 0 6px;
    border-radius: 5px;
  }
  .button.secondary {
    border-radius: 5px;
  }
  .button.btn-fa {
    color: var(--color-text-dimmed) !important;
  }
  .button.btn-fa i.fa {
    position: relative;
    top: -1px;
  }
  .button .btn-badgecount {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
    background-color: var(--color-red-500);
    border: 1px solid var(--color-red-500);
    border-radius: 50rem;
    color: white;
    padding: 1px 4px;
    transform: translate(-50%, -50%);
    font-size: 11px;
    display: grid;
    place-items: center;
  }
  .button .btn-badgecount[data-badgecount="0"] {
    border: 1px solid var(--color-text-faded);
    background-color: var(--color-base-100);
    color: var(--color-text-faded);
  }
  .button-externallink:active, .button-externallink:hover {
    border-color: var(--color-sky-600);
    background: var(--color-sky-600);
    color: white;
  }
  .button-externallink__colored:link, .button-externallink__colored:visited {
    border-color: var(--color-sky-500);
    background-color: var(--color-sky-500);
    color: white !important;
  }
  .button-externallink__colored:hover {
    border-color: var(--color-sky-600);
    background: var(--color-sky-600);
  }
  a.button.middle {
    margin-top: 13px;
  }
  a.button-selected {
    background: var(--color-primary);
    color: #fff !important;
  }
  a.button-selected:active,
  a.button-selected:hover {
    background: var(--color-primary);
    color: #fff;
  }
  a.btn-icon-fa {
    display: inline-block;
    padding: 3px 7px 3px 8px;
    color: var(--color-text-dimmed);
    font-size: 15px;
  }
  a.btn-icon-fa.error {
    border: 1px solid var(--color-util-error-bg);
    margin: 0 4px;
  }
}
/*------------------------------------*\
	Calendar
\*------------------------------------*/
@layer defaults {
  .calendarfiltertable div.header {
    color: var(--color-text-dimmed);
    margin-bottom: 5px;
    background: none;
    text-transform: none;
    letter-spacing: normal;
  }
  .calendarfiltertable tr td {
    width: 33%;
  }
  /* Calendar display options */
  ul.calendardisplayoptions {
    position: relative;
    left: 50%;
    top: 22px;
    display: inline-block;
    transform: translateX(-50%);
  }
  ul.calendardisplayoptions li {
    display: inline;
    padding: 2px 4px;
  }
  ul.calendardisplayoptions li label {
    cursor: pointer;
  }
  ul.calendardisplayoptions li input {
    vertical-align: bottom;
    top: -1px;
    *overflow: hidden;
  }
  /* Calendar message */
  div.calendar-message {
    margin-bottom: 10px;
    color: white;
    padding: 5px;
    border-radius: 6px;
    background-color: #8ba325;
    text-align: center;
  }
  /* Calendar virtual vehicles overview */
  ul.virtualvehiclesoverview {
    font-size: 0.85em;
  }
  ul.virtualvehiclesoverview li {
    display: inline;
    padding: 2px 4px;
    background-color: var(--color-base-500);
    color: white;
    border-radius: 3px;
  }
  /* Calendar footer */
  div.calendarfooter {
    text-align: right;
    font-size: 0.85em;
    margin-top: 10px;
    position: relative;
    padding: 4px 0 10px;
  }
  /* Calendar legend */
  ul.calendarlegend li {
    display: inline-block;
    padding: 2px 4px;
    background-color: var(--color-base-500);
    color: #ffffff;
    border-radius: 3px;
    margin-bottom: 5px;
  }
}
/*------------------------------------*\
	Calendar table
\*------------------------------------*/
@layer overrides {
  .calendartable {
    width: 100%;
    height: auto;
    border-spacing: 0;
    border-collapse: collapse;
  }
  .calendartable th {
    text-align: center;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--color-calendartable-bg);
  }
  .calendartable tr {
    border: 1px solid var(--color-calendartable-border);
    width: 100%;
  }
  .calendartable td {
    border-right: 1px solid var(--color-calendartable-border);
    padding: 5px !important;
    background-color: var(--color-calendartable-bg);
    height: 60px;
    width: 14%;
  }
  .calendartable td.today {
    background-color: var(--color-base-100);
  }
  .calendartable td.weekend {
    background-image: repeating-linear-gradient(-45deg, var(--color-calendartable-weekendstripes) 0, var(--color-calendartable-weekendstripes) 1px, transparent 0, transparent 50%);
    background-size: 9px 9px;
    background-color: var(--color-layout-cardbackground);
  }
  .calendartable td div {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .calendartable td div span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -11px;
    text-align: center;
    width: 20px;
    height: 20px;
  }
  .calendartable td div img {
    margin-right: 1px;
  }
  .calendar-legend-item {
    display: inline-block;
    margin: 4px 0 18px 0;
    line-height: 25px;
    width: 90px;
  }
  .calendar-legend-item img {
    float: left;
    margin-right: 7px;
  }
  .calendar-navigation {
    float: right;
    margin-top: 5px;
  }
  .calendartable .whereabouts td {
    border-right: 1px solid var(--color-base-100);
    padding: 0 !important;
    background-color: var(--color-layout-cardbackground);
    height: 70px;
    width: 14.2857143%;
  }
  .calendartable td .whereabout {
    padding: 0;
    text-align: center;
    border-top: 1px solid var(--color-base-100);
    width: 100%;
    height: 20px;
    display: block;
    position: absolute;
    bottom: 1px;
    left: 0;
    overflow: hidden;
  }
  .calendartable td .whereabout a {
    font-size: 11px;
    font-weight: bold;
    line-height: 22px;
    display: inline-block;
    padding: 0;
    margin: 0;
    background: transparent;
    width: 90%;
    height: 20px;
    overflow: hidden;
  }
  .editwhereabout {
    cursor: pointer;
  }
}
/*------------------------------------*\
	Catalogue Courses
\*------------------------------------*/
@layer defaults {
  .courselist {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .course-container {
    padding: 30px 30px 30px 30px;
    border-bottom: 1px solid var(--color-base-300);
    display: flex;
    flex-direction: row;
    gap: 20px;
  }
  .course-container:nth-of-type(even) {
    flex-direction: row-reverse;
  }
  .course-container:last-of-type {
    border-bottom: 0;
  }
  .course-container .course-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
  }
  .course-container .course-goal p {
    line-height: 1.4;
    margin-bottom: 0;
  }
  .course-container .redactor-content p:not(:last-of-type) {
    margin-bottom: 8px;
  }
  .course-table {
    border: 0;
    width: 100%;
  }
  .course-table h3 {
    font-size: 17px;
    font-weight: normal;
  }
  .course-table h3.course-details-title {
    font-size: 17px;
    font-weight: normal;
    margin-bottom: 10px;
  }
  .course-table h3.course-details-title + span.subtitle {
    margin-bottom: 10px;
    display: block;
    color: var(--color-text-dimmed);
  }
  td.course-image {
    width: 200px;
  }
  .course-image-left,
  .course-image-right {
    border: 1px solid white;
  }
  .course-image-ribbon-container {
    position: relative;
  }
  .course-ribbon-left {
    position: absolute;
    top: -8px;
    left: -7px;
  }
  .course-ribbon-right {
    position: absolute;
    top: -8px;
    right: 129px;
  }
  td.total-courses {
    padding: 15px 5px;
    font-weight: bold;
  }
}
/*------------------------------------*\
	Checklist
\*------------------------------------*/
@layer defaults {
  .checklist-container {
    width: 660px;
    display: inline-block;
    position: relative;
  }
  .checklist-row {
    width: inherit;
    display: inline-flex;
    position: relative;
  }
  .checklist-col {
    padding: 5px;
    width: auto;
    display: table-cell;
  }
  .checklist-col select {
    width: 100%;
    padding: 3px 6px;
  }
  .checklist-col .button.add-issue {
    margin-left: 0 !important;
  }
  .col-3 input[type=text] {
    width: 100%;
    border-radius: 4px;
    padding: 4px 6px;
  }
  .col-2-x input[type=text] {
    width: 60px;
    border-radius: 4px;
    padding: 3px 6px;
  }
  .col-1 {
    width: 150px;
  }
  .col-2 {
    width: 300px;
  }
  .col-3 {
    width: 210px;
  }
  .col-4 {
    width: 400px;
  }
  .col-1-x {
    min-width: 378px;
    max-width: 378px;
  }
  .col-2-x {
    min-width: 102px;
  }
  .col-3-x {
    min-width: 46px;
  }
  .col-100 {
    width: inherit;
  }
  .col-icon {
    width: 80px;
  }
  .issue-title-bar {
    background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #dcdcdc 0%, #e8e8e8 100%, #f5f5f5 95%);
    background-image: -webkit-radial-gradient(45px 45px, circle cover, #e8e8e8, #f5f5f5);
    background-image: radial-gradient(45px 45px 45deg, circle cover, #dcdcdc 0%, #e8e8e8 100%, #f5f5f5 95%);
  }
  .checklist-comments td {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-base-300);
  }
}
/*------------------------------------*\
	Report column chooser styles
\*------------------------------------*/
@layer defaults {
  div.colchooser_dialog {
    background: var(--color-layout-cardbackground);
    border: 1px solid var(--color-base-300) !important;
    box-shadow: var(--shadow-box-xy);
  }
  div.colchooser_dialog .ui-state-default {
    color: var(--color-text);
  }
  div.colchooser_dialog div.ui-dialog-titlebar {
    background-image: none;
    background-color: var(--color-layout-cardbackground);
    border: 1px solid var(--color-layout-cardbackground);
    color: var(--color-base-700);
  }
  div.colchooser_dialog .ui-dialog-titlebar-close,
  div.colchooser_dialog .search {
    display: none;
  }
  div.colchooser_dialog a.remove-all,
  div.colchooser_dialog a.add-all {
    visibility: hidden;
  }
  div.colchooser_dialog .ui-dialog-buttonpane {
    border-top: 1px solid var(--color-base-200);
    background-color: var(--color-layout-cardbackground);
  }
  div.colchooser_dialog .actions {
    background: var(--color-base-300);
    border-bottom: 1px solid var(--color-base-200);
    color: #2e6e9e;
  }
  div.colchooser_dialog .ui-dialog-buttonpane .ui-button {
    background-image: none;
    background-color: var(--color-button-default-background);
    border: 1px solid var(--color-button-default-background);
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    color: var(--color-button-default-text);
  }
  div.colchooser_dialog .ui-dialog-buttonpane .ui-button:hover {
    background-color: var(--color-button-default-hover-background);
  }
  div.colchooser_dialog .count {
    background-color: transparent;
    color: var(--color-base-700);
  }
}
/*------------------------------------*\
	Colorpicker overwrite
\*------------------------------------*/
@layer overrides {
  #editFormInfo .colorPickerProjects {
    position: absolute !important;
    top: -68px !important;
    left: 4px !important;
  }
  #editFormInfo .colorPickerProjects .color {
    width: 25px;
    height: 25px;
  }
  #editFormInfo .colorPickerProjects .colorInner {
    width: 21px;
    height: 21px;
  }
  #editFormInfo .colorPickerProjects .track {
    padding: 8px;
    height: 168px;
    width: 168px;
  }
  .projectColour {
    height: 18px;
    width: 18px;
    border: 1px solid transparent;
    border-radius: 50%;
  }
}
/*------------------------------------*\
	Competence Badge
\*------------------------------------*/
@layer defaults {
  .competenceBadge {
    display: block;
    float: left;
    margin-right: 15px;
    width: 50px;
    height: 75px;
    border-radius: 5px;
  }
  .competenceBadge label {
    display: block;
    width: 49px;
    height: 38px;
    padding-top: 6px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    margin-top: -1px !important;
    cursor: pointer;
  }
  .competenceBadge input {
    margin-left: 18px;
    margin-top: 5px;
  }
  .competenceBadge-zero {
    border: 1px solid var(--color-competenceBadge-zero);
  }
  .competenceBadge-zero label {
    background-color: var(--color-competenceBadge-zero);
  }
  .competenceBadge-zero:hover,
  .competenceBadge-zero.active {
    box-shadow: 0 0 2px var(--color-competenceBadge-zero);
  }
  .competenceBadge-one {
    border: 1px solid var(--color-competenceBadge-one);
  }
  .competenceBadge-one label {
    background-color: var(--color-competenceBadge-one);
  }
  .competenceBadge-one:hover,
  .competenceBadge-one.active {
    box-shadow: 0 0 2px var(--color-competenceBadge-one);
  }
  .competenceBadge-two {
    border: 1px solid var(--color-competenceBadge-two);
  }
  .competenceBadge-two label {
    background-color: var(--color-competenceBadge-two);
  }
  .competenceBadge-two:hover,
  .competenceBadge-two.active {
    box-shadow: 0 0 2px var(--color-competenceBadge-two);
  }
  .competenceBadge-three {
    border: 1px solid var(--color-competenceBadge-three);
  }
  .competenceBadge-three label {
    background-color: var(--color-competenceBadge-three);
  }
  .competenceBadge-three:hover,
  .competenceBadge-three.active {
    box-shadow: 0 0 2px var(--color-competenceBadge-three);
  }
}
@layer defaults {
  .content-container {
    padding: 1rem;
    background: var(--color-base-100);
    border: 1px solid var(--color-base-300);
    border-radius: 4px;
  }
}
/** 
* _dashboardv2.scss
* 
* These are the styles for the new dashboard.
* 
* Index 
* - Outer box
* - Box header
* - Box content
* - Inner boxes
*/
/** 
* Outer box
*/
@layer defaults {
  .dashboard {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
    gap: 24px;
    margin-bottom: 24px;
    position: relative;
  }
  .dbbox,
  .dashboard-box {
    color: var(--color-text);
    grid-column: span 12;
    background-color: var(--color-dashboard-background);
    box-shadow: var(--shadow-box-xy);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 640px) {
    .dbbox,
    .dashboard-box {
      grid-column: span 6;
    }
    .dbbox--double, .dbbox--tripple, .dbbox--fullwidth,
    .dashboard-box--double,
    .dashboard-box--tripple,
    .dashboard-box--fullwidth {
      grid-column: span 12;
    }
  }
  @media (min-width: 768px) {
    .dbbox,
    .dashboard-box {
      grid-column: span 4;
    }
    .dbbox--double,
    .dashboard-box--double {
      grid-column: span 8;
    }
    .dbbox--tripple, .dbbox--fullwidth,
    .dashboard-box--tripple,
    .dashboard-box--fullwidth {
      grid-column: span 12;
    }
  }
  @media (min-width: 1024px) {
    .dbbox,
    .dashboard-box {
      grid-column: span 3;
    }
    .dbbox--double,
    .dashboard-box--double {
      grid-column: span 6;
    }
    .dbbox--tripple,
    .dashboard-box--tripple {
      grid-column: span 9;
    }
    .dbbox--fullwidth,
    .dashboard-box--fullwidth {
      grid-column: span 12;
    }
  }
  @media (min-width: 640px) {
    .dbbox--scrollable,
    .dashboard-box--scrollable {
      min-height: 250px;
      position: relative;
      height: 100%;
    }
    .dbbox--scrollable-medium,
    .dashboard-box--scrollable-medium {
      min-height: 340px;
    }
    .dbbox--scrollable-large,
    .dashboard-box--scrollable-large {
      min-height: 400px;
    }
  }
  .dbbox--primary {
    --color-text: var(--color-dashboard-primarybox-text);
    --color-dashboard-background: var(--color-dashboard-primarybox-background);
    --color-dashboard-line: var(--color-dashboard-primarybox-hover);
    --color-dashboard-hover: var(--color-dashboard-primarybox-hover);
    --color-dashboard-icon: white;
    --color-dashboard-header-arrow: var(--color-primary-300);
    --color-dashboard-header-arrow-hover: var(--color-primary-50);
  }
  /** 
  * Box header
  */
  .dbbox__header {
    border-bottom: 1px solid var(--color-dashboard-line);
    display: flex;
    align-items: center;
    min-height: 52px;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 8px;
  }
  .dbbox__title {
    display: flex;
    align-items: center;
    justify-items: flex-start;
    flex-grow: 1;
    gap: 8px;
    max-width: 100%;
    min-width: 1px;
  }
  .dbbox__title svg,
  .dbbox__title img {
    max-height: 24px;
    width: auto;
  }
  .dbbox__title h2 {
    color: var(--color-text);
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dbbox__title i {
    color: var(--color-dashboard-icon);
  }
  .dbbox__title i.fa-arrow-right {
    transition: all 0.25s;
    color: var(--color-dashboard-header-arrow);
  }
  .dbbox__title:hover i.fa-arrow-right {
    transform: translateX(4px);
    color: var(---color-dashboard-header-arrow-hover);
  }
  .dbbox__options {
    position: relative;
  }
  .dbbox__options i {
    color: var(--color-base-500);
    margin-right: 0;
    transition: all 0.25s;
    font-size: 0.875rem;
  }
  .dbbox__options.open .dbbox__options-menu {
    display: block;
  }
  .dbbox__options-button {
    border: none;
    background: none;
    padding: 4px;
    cursor: pointer;
  }
  .dbbox__options-button:hover i {
    color: var(--color-primary);
  }
  .dbbox__options-menu {
    box-shadow: var(--shadow-box-xy);
    position: absolute;
    background-color: var(--color-layout-cardbackground);
    z-index: 100;
    border: 1px solid var(--color-base-100);
    border-radius: 4px;
    padding: 12px;
    right: 0;
    display: none;
  }
  .dbbox__options-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .dbbox__options-menu ul li a,
  .dbbox__options-menu ul li div {
    color: var(--color-text);
    font-size: 0.875rem;
    border: none;
    padding: 12px 12px;
    white-space: nowrap;
    background: none;
    border-radius: 4px;
    user-select: none;
    display: flex;
    align-items: center;
    position: relative;
    gap: 6px;
    cursor: pointer;
  }
  .dbbox__options-menu ul li a i,
  .dbbox__options-menu ul li div i {
    color: var(--color-base-700);
  }
  .dbbox__options-menu ul li a i.fa-toggle-on,
  .dbbox__options-menu ul li div i.fa-toggle-on {
    color: var(--color-green-600);
  }
  .dbbox__options-menu ul li a span,
  .dbbox__options-menu ul li div span {
    flex-grow: 1;
  }
  .dbbox__options-menu ul li a:hover {
    background-color: var(--color-base-100);
  }
  .dbbox__options-menu ul hr {
    background-color: var(--color-base-200);
    margin: 12px 0;
    border: none;
    height: 1px;
  }
  /** 
  * Box content
  */
  .dbbox__content {
    padding: 12px;
    height: 100%;
    min-height: 120px;
  }
  @media (min-width: 640px) {
    .dbbox__content > *:nth-child(n+2) {
      position: relative;
    }
    .dbbox__content > *:nth-child(n+2):before {
      content: " ";
      position: absolute;
      top: 12px;
      left: -24px;
      right: 0;
      border-left: 1px solid var(--color-dashboard-line);
      height: calc(100% - 24px);
      width: 1px;
    }
  }
  @media (max-width: 639px) {
    .dbbox__content > *:nth-child(n+2) {
      position: relative;
    }
    .dbbox__content > *:nth-child(n+2):before {
      content: " ";
      position: absolute;
      top: -12px;
      left: 0;
      right: 0;
      border-top: 1px solid var(--color-dashboard-line);
    }
  }
  .dbbox__content .spinnerContainer {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
  }
  .dbbox__content .dbbox__inner-box {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .dbbox__content .dbbox__inner-box > *:nth-child(n+2) {
    position: relative;
  }
  .dbbox__content .dbbox__inner-box > *:nth-child(n+2):before {
    content: " ";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    border-top: 1px solid var(--color-dashboard-line);
  }
  @media (min-width: 640px) {
    .dbbox__scrollcontainer {
      height: calc(100% - 52px);
      position: absolute;
      width: 100%;
      top: 52px;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
  .dbbox__content--columns {
    display: grid;
    gap: 24px 48px;
    grid-template-columns: repeat(6, 1fr);
  }
  .dbbox__content--columns .spinnerContainer {
    grid-column: 1/-1;
  }
  .dbbox__content--columns > div {
    min-width: 0;
    grid-column: 1/-1;
  }
  @media (min-width: 640px) {
    .dbbox__content--columns .dbbox__inner-box--half {
      grid-column: span 3;
    }
    .dbbox__content--columns .dbbox__inner-box--two-thirds {
      grid-column: span 3;
    }
    .dbbox__content--columns .dbbox__inner-box--one-third {
      grid-column: span 3;
    }
  }
  @media (min-width: 768px) {
    .dbbox__content--columns .dbbox__inner-box--two-thirds {
      grid-column: span 4;
    }
    .dbbox__content--columns .dbbox__inner-box--one-third {
      grid-column: span 2;
    }
  }
  /** 
  * Inner boxes
  */
  .dbbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .dbbox-list li {
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .dbbox-list li a {
    color: var(--color-text);
  }
  .dbbox-list li:not(.no-hover):hover {
    background-color: var(--color-dashboard-hover);
  }
  .dbbox-list li .dbbox-list__left,
  .dbbox-list li .dbbox-list__right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dbbox-list li .dbbox-list__left.padding,
  .dbbox-list li .dbbox-list__right.padding {
    padding: 12px;
  }
  .dbbox-list li .dbbox-list__left {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
  }
  .dbbox-list li .dbbox-list__left > *:first-child {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
  }
  .dbbox-list li .dbbox-list__link-group {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 1px;
    flex-grow: 1;
    flex-shrink: 1;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
  }
  .dbbox-list li .dbbox-list__link-group * {
    flex-grow: 0;
    flex-shrink: 0;
  }
  .dbbox-list li .dbbox-list__link-group img {
    border-radius: 4px;
  }
  .dbbox-list li .dbbox-list__button-group {
    flex-shrink: 0;
    flex-grow: 0;
    padding-right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dbbox-list li .dbbox-list__button-group--show-on-hover {
    visibility: hidden;
  }
  .dbbox-list li:hover .dbbox-list__button-group {
    visibility: visible;
  }
  .dbbox-list li > a + * {
    padding-right: 0;
  }
  .dbbox-list li .flexible {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    line-height: 1.4;
  }
  .dbbox-list li .label {
    color: var(--color-base-100);
    font-size: 12px;
    padding: 6px 4px;
    display: grid;
    place-items: center;
    background-color: var(--color-base-300);
    border-radius: 4px;
  }
  .dbbox-list li .label--fw {
    width: 32px;
  }
  .dbbox-list li .label--orange {
    background-color: var(--color-orange-400);
  }
  .dbbox-list li .label--virtualmedicalinstrument {
    background-color: var(--color-label-virtualmedicalinstrument);
  }
  .dbbox-list li .label--cluster {
    background-color: var(--color-label-cluster);
  }
  .dbbox-list li .label--reserve {
    background-color: var(--color-label-reserve);
  }
  .dbbox-list li .label--new {
    background-color: var(--color-issue-new);
  }
  .dbbox-list li .label--active {
    background-color: var(--color-issue-active);
  }
  .dbbox-list li .label--solved {
    background-color: var(--color-issue-solved);
  }
  .dbbox-list li .label--closed {
    background-color: var(--color-issue-closed);
  }
  .dbbox-list li .label--aggressions {
    background-color: var(--color-label-aggression);
  }
  .dbbox-list li .label--calamities {
    background-color: var(--color-label-calamity);
  }
  .dbbox-list li .label--dataleaks {
    background-color: var(--color-label-dataleak);
  }
  .dbbox-list li .label--audits {
    background-color: var(--color-label-audit);
  }
  .dbbox-list li .label--complaints {
    background-color: var(--color-label-complaint);
  }
  .dbbox-list li .label--homesafes {
    background-color: var(--color-label-homesafe);
  }
  .dbbox-list li .label--vims {
    background-color: var(--color-label-vim);
  }
  .dbbox-list li .label--improvements {
    background-color: var(--color-label-improvement);
  }
  .dbbox-list li .label--proposals {
    background-color: var(--color-label-improvementproposal);
  }
  .dbbox-list li .label--inquiries {
    background-color: var(--color-label-inquiry);
  }
  .dbbox-list li .indicator {
    background-color: var(--color-base-400);
  }
  .dbbox-list li .indicator--green {
    background-color: var(--color-green-400);
  }
  .dbbox-list li .indicator--orange {
    background-color: var(--color-orange-400);
  }
  .dbbox-list li .indicator--green {
    background-color: var(--color-green-400);
  }
  .dbbox-list li .indicator--orange {
    background-color: var(--color-orange-400);
  }
  .dbbox-list li .indicator.available {
    background: var(--color-green-400);
  }
  .dbbox-list li .indicator.notavailable {
    background: var(--color-red-400);
  }
  .dbbox-list li .indicator.busy {
    background: var(--color-orange-400);
  }
  .dbbox-list li .indicator.meeting {
    background: var(--color-orange-400);
  }
  .dbbox-list li .indicator.holiday {
    background: var(--color-base-400);
  }
  .dbbox-list li .indicator.unknown {
    background: var(--color-base-400);
    display: none;
  }
  .dbbox-list li .meta {
    color: var(--color-text-dimmed);
    font-style: italic;
    font-size: 12px;
  }
  .dbbox-list li .meta--orange {
    color: var(--color-label-orange-600);
  }
  .dbbox-list li .meta--red {
    color: var(--color-red-600);
  }
  .dbbox-list li .checklists {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 4px;
  }
  .dbbox-list li i.icon-courses:before {
    content: "\f5db";
  }
  .dbbox-list li i.icon-deployments:before {
    content: "\e02d";
  }
  .dbbox-list li i.icon-documents:before {
    content: "\e178";
  }
  .dbbox-list li i.icon-mail:before {
    content: "\f0e0";
  }
  .dbbox-list li i.icon-questions:before {
    content: "\f05a";
  }
  .dbbox-list li i.icon-registrations:before {
    content: "\f570";
  }
  .dbbox-list li .inline-labels {
    line-height: 1.25rem;
  }
  .dbbox-list li .inline-labels .date,
  .dbbox-list li .inline-labels .notes {
    border-bottom: 2px solid;
  }
  .dbbox-list li .inline-labels .date {
    border-color: var(--color-base-300);
  }
  .dbbox-list li .inline-labels .date.highlight {
    border-color: var(--color-sky-300);
  }
  .dbbox-list li .inline-labels .notes {
    border-color: var(--color-amber-300);
  }
  @media (min-width: 480px) {
    .dbbox-list--double {
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(var(--rowcount), auto);
      column-gap: 12px;
    }
  }
  .dbbox-list--grid {
    display: grid;
    column-gap: 12px;
    grid-template-columns: repeat(1, 1fr);
  }
  @container (min-width: 400px) {
    .dbbox-list--grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @container (min-width: 660px) {
    .dbbox-list--grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @container (min-width: 880px) {
    .dbbox-list--grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .dbbox-p {
    padding: 12px;
  }
  .dbbox-p p:not(:last-of-type) {
    margin-bottom: 8px;
  }
  .dbbox-faces {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .dbbox-faces li {
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .dbbox-faces li:hover {
    background-color: var(--color-dashboard-hover);
  }
  .dbbox-faces li a {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 1px;
    flex-grow: 1;
    flex-shrink: 1;
  }
  .dbbox-faces li a * {
    flex-grow: 1;
    flex-shrink: 1;
  }
  .dbbox-faces li a img {
    border-radius: 4px;
  }
  .dbbox-article a {
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    gap: 8px;
    padding: 12px;
    border-radius: 4px;
  }
  .dbbox-article a:hover {
    background-color: var(--color-dashboard-hover);
  }
  .dbbox-article a img {
    width: 100%;
    height: auto;
    border-radius: 4px;
  }
  .dbbox-article a h4 {
    font-size: 1rem;
  }
  .dbbox-article a .meta {
    color: var(--color-base-400);
    font-style: italic;
    font-size: 12px;
  }
  .dbbox-article a .readmore {
    color: var(--color-primary-600);
    font-weight: 500;
  }
  .dbbox-profile {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .dbbox-profile__avatar {
    max-width: 160px;
    border-radius: 50%;
  }
  .dbbox-profile__status, .dbbox-profile__status:link, .dbbox-profile__status:visited {
    display: flex;
    justify-content: center;
    gap: 4px;
    justify-content: center;
    align-items: center;
    color: var(--color-text);
  }
  .dbbox-profile__status .indicator, .dbbox-profile__status:link .indicator, .dbbox-profile__status:visited .indicator {
    border: 1px solid var(--color-text);
  }
  .dbbox-definitionlist {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .dbbox-definitionlist div {
    display: flex;
    gap: 4px;
  }
  .dbbox-definitionlist dt {
    font-weight: 500;
  }
  .dbbox-definitionlist dt:after {
    content: ":";
  }
  .dbbox-image {
    position: relative;
  }
  .dbbox-image a {
    position: relative;
    display: block;
    line-height: 0;
    border-radius: 4px;
    overflow: hidden;
    padding: 12px;
  }
  .dbbox-image a:hover {
    background-color: var(--color-base-100);
  }
  .dbbox-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
  }
  .dbbox-image .overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(0, 0, 0, 0.4));
    border-radius: 4px;
  }
  .dbbox-image .overlay h4 {
    font-size: 20px;
    color: #fff;
    line-height: 1;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
  }
  .dbbox-image .overlay span {
    color: #fff;
    margin-bottom: 12px;
  }
  .dbbox-chart {
    padding: 12px;
    border-radius: 4px;
  }
  .dbbox-poll {
    padding: 12px;
  }
  .dbbox-poll h4 {
    margin-bottom: 8px;
  }
  .dbbox-poll .poll-results {
    margin-top: 8px;
  }
  .dbbox-poll .poll-results .pollbar {
    border-radius: 4px;
    background-color: var(--color-primary);
  }
  .dbbox-poll .poll-option ul {
    list-style-type: none;
    padding: 15px 0;
  }
  .dbbox-poll .poll-option ul li {
    display: flex;
    gap: 8px;
  }
  .dbbox-poll .poll-option ul li:not(:first-of-type) {
    margin-top: 8px;
  }
  .dbbox-poll #poll-vote-submit {
    border-radius: 5px;
  }
  .dbbox-buttonlist {
    list-style: none;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dbbox-buttonlist a {
    display: block;
  }
  .dbbox-calendar .fc-left {
    margin-top: 5px;
  }
  .dbbox-calendar h2 {
    font-size: 0.875rem;
    font-weight: 400;
  }
  .dbbox-progress {
    list-style: none;
    padding: 12px;
  }
  .dbbox-progress .courses-budget-bar {
    margin-bottom: 8px;
  }
  .dbbox-progress li:not(:last-of-type) {
    margin-bottom: 12px;
  }
  .dbbox-progress .progressbar {
    margin-bottom: 12px;
  }
  .dbbox-progress p:not(:last-of-type) {
    margin-bottom: 12px;
  }
  .dbbox-progress a {
    color: var(--color-primary);
  }
  .dbbox-content-slide__container {
    display: flex;
    transform: translateX(0);
    transition: all 0.5s ease-in-out;
  }
  .dbbox-content-slide__pane {
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
  }
  .dbbox-content-slide__navigation {
    display: grid;
    grid-template-columns: [button-left] 28px [title] 1fr [button-right] 28px;
    place-items: center;
    border-bottom: 1px dotted var(--color-base-300);
    padding-bottom: 12px;
    margin-bottom: 12px;
    height: 48px;
  }
  .dbbox-content-slide__navigation .category-title {
    grid-column-start: title;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .dashboardSettings .fa-toggle-on {
    color: var(--color-green-600);
  }
  .dashboardSettings .toggle--disabled i {
    color: var(--color-base-300);
  }
}
/*------------------------------------*\
	Document detailview
\*------------------------------------*/
@layer defaults {
  /* Document detailview */
  .document-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  div.document-header div.document-header-icon {
    flex-grow: 0;
    flex-shrink: 0;
  }
  div.document-header div.document-header-info {
    float: left;
    margin: 5px 0 0 22px;
    max-width: 576px;
  }
  div.document-header div.document-header-info p {
    font-size: 12px;
  }
  div.document-content {
    margin: 20px 0 0 86px;
  }
  .document-content .fa {
    margin-right: 5px;
  }
}
/*------------------------------------*\
	Fancybox
\*------------------------------------*/
@layer overrides {
  .dropzone {
    border: 4px dashed var(--color-base-300);
    background-color: var(--color-layout-cardbackground);
  }
  .dropzone.dz-clickable .dz-message,
  .dropzone.dz-clickable .dz-message * {
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-text-dimmed);
  }
  .dropzone__nopadding.dz-clickable {
    padding: 0;
  }
  /* Added for Sky */
  div.file-container {
    height: 115px;
  }
  div.file-container.file-container-small {
    width: 51px;
    margin-right: 0;
  }
  div.file-container,
  div.folder-container {
    position: relative;
    width: 112px;
    display: inline-block;
    text-align: center;
    padding: 5px;
    overflow: hidden;
    border-radius: 5px;
    font-size: 13px;
  }
  div.file-container a,
  div.folder-container a {
    color: var(--color-text);
  }
  div.file-container i,
  div.folder-container i {
    margin-bottom: 16px;
    margin-top: 28px;
    font-size: 24px;
  }
  div.file-container:hover,
  div.folder-container:hover,
  div.folder-container.active {
    background-color: var(--color-button-default-background);
    color: var(--color-button-default-text);
    cursor: pointer;
  }
  div.folder-container {
    height: 88px;
  }
  div.folder-container .media-in-folder-count {
    position: absolute;
    top: 10px;
    display: grid;
    place-items: center;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-green-600);
    color: white;
    font-weight: bold;
    font-size: 11px;
  }
  p.caption {
    padding: 5px 0 5px 10px;
    border-radius: 3px;
    border: 1px solid var(--color-form-border);
    background: var(--color-layout-sidebarbackground);
    margin-bottom: 10px;
    font-size: 12px;
    margin-top: 5px;
  }
  div.file-container div.btn-delete,
  div.folder-container div.btn-delete {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 22px;
    height: 24px;
    display: none;
    border-radius: 4px;
    padding: 3px;
    background-color: var(--color-layout-cardbackground);
  }
  div.file-container div.btn-delete:hover,
  div.folder-container div.btn-delete:hover {
    background-color: var(--color-base-200);
  }
  body[data-uimode=dark] div.file-container div.btn-delete img,
  body[data-uimode=dark] div.folder-container div.btn-delete img {
    filter: invert(1);
  }
  div.folder-container div.btn-edit {
    position: absolute;
    left: 4px;
    top: 32px;
    width: 22px;
    height: 24px;
    display: none;
    border-radius: 4px;
    padding: 3px;
    background-color: var(--color-layout-cardbackground);
  }
  div.folder-container div.btn-edit:hover {
    background-color: var(--color-base-200);
  }
  body[data-uimode=dark] div.folder-container div.btn-edit img {
    filter: invert(1);
  }
  div.folder-container .add-folder-name,
  div.folder-container .new-folder-name {
    display: none;
    border-radius: 5px;
    border: 1px solid var(--color-form-border);
    padding: 2px 5px;
    font-size: 12px;
    width: 102px;
    margin-top: 4px;
  }
  .dropzone.dropzone-small {
    min-height: 100px;
    padding: 10px 10px;
    margin-bottom: 5px;
  }
  .dropzone.dropzone-small .dz-message {
    margin: 1em 0;
  }
  .dropzone.dropzone-small .dz-preview {
    margin: 0 6px 0 0;
    min-height: 72px;
  }
  .dropzone.dropzone-small .dz-preview .dz-image {
    border-radius: 5px;
    width: 72px;
    height: 72px;
  }
  .dropzone.dropzone-small .dz-preview .dz-image img {
    width: 72px;
    height: 72px;
  }
  .dropzone.dropzone-small .dz-preview .dz-details .dz-size {
    font-size: 10px;
  }
  .dropzone.dropzone-small .dz-preview .dz-details .dz-filename {
    display: none;
  }
  .dropzone .dz-preview.dz-complete .dz-progress {
    width: 40px;
  }
  .formtable .dropzone.dropzone-small img {
    margin: 0 0;
  }
  .dropzone .dz-preview.dz-image-preview {
    background: var(--color-layout-cardbackground);
  }
}
@layer defaults {
  .epaProgressPage h2 {
    margin: 0 0 16px;
  }
  .epaProgressPage__listTitle {
    margin: 32px 0 16px;
  }
  .epaProgress {
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 16px 8px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-base-300);
  }
  .epaProgress:hover {
    background-color: var(--color-layout-sidebarbackground);
  }
  .epaProgress:hover:after {
    content: "\f105";
    font-family: var(--font-icon);
    font-size: 16px;
    color: var(--color-text-dimmed);
    right: 0;
  }
  .epaProgress .svgcontainer {
    width: 64px;
    line-height: 0;
    margin-right: 12px;
    flex-shrink: 0;
  }
  .epaProgress h3 {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 4px;
  }
  .epaProgress__meta {
    color: var(--color-text-dimmed);
  }
  .epaProgress__meta i {
    margin-right: 4px;
  }
  .epaProgress__meta span {
    margin-right: 8px;
  }
  .epaProgress__info {
    flex-grow: 1;
  }
  .circleProgress .progress {
    stroke: #6eb783;
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out;
    stroke-width: 3;
  }
  .circleProgress .track {
    stroke: var(--color-base-300);
    stroke-width: 3;
  }
  .circleProgress .innercircle {
    fill: #cbe7d6;
  }
  .circleProgress .svgtext {
    font-weight: bold;
    fill: var(--color-neutral-700);
    font-size: 8px;
  }
  .circleProgress .number .numberCircle {
    fill: #6eb783;
    stroke-width: 1;
    stroke: #ffffff;
  }
  .circleProgress .number .numberText {
    font-size: 6px;
    font-weight: bold;
    color: white;
    fill: white;
  }
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
  .circleProgress.stage1 .progress {
    stroke: var(--color-supervisionLevel-1);
  }
  .circleProgress.stage1 .innercircle {
    fill: var(--color-supervisionLevel-1-light);
  }
  .circleProgress.stage1 .numberCircle {
    fill: var(--color-supervisionLevel-1);
  }
  .circleProgress.stage2 .progress {
    stroke: var(--color-supervisionLevel-2);
  }
  .circleProgress.stage2 .innercircle {
    fill: var(--color-supervisionLevel-2-light);
  }
  .circleProgress.stage2 .numberCircle {
    fill: var(--color-supervisionLevel-2);
  }
  .circleProgress.stage3 .progress {
    stroke: var(--color-supervisionLevel-3);
  }
  .circleProgress.stage3 .innercircle {
    fill: var(--color-supervisionLevel-3-light);
  }
  .circleProgress.stage3 .numberCircle {
    fill: var(--color-supervisionLevel-3);
  }
  .circleProgress.stage4 .progress {
    stroke: var(--color-supervisionLevel-4);
  }
  .circleProgress.stage4 .innercircle {
    fill: var(--color-supervisionLevel-4-light);
  }
  .circleProgress.stage4 .numberCircle {
    fill: var(--color-supervisionLevel-4);
  }
  .epaProgressDetail__header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-base-300);
    padding: 20px 0 40px;
  }
  .epaProgressDetail__header h2 {
    margin-bottom: 4px;
  }
  .epaProgressDetail .svgcontainer {
    width: 160px;
    line-height: 0;
    margin-right: 16px;
    flex-shrink: 0;
  }
  span[class^=supervisionLevel] {
    display: inline-block;
    width: 22px;
    height: 22px;
    font-weight: bold;
    color: white;
    border-radius: 50%;
    line-height: 22px;
    text-align: center;
  }
  .supervisionLevel-1 {
    background-color: var(--color-supervisionLevel-1);
  }
  .supervisionLevel-2 {
    background-color: var(--color-supervisionLevel-2);
  }
  .supervisionLevel-3 {
    background-color: var(--color-supervisionLevel-3);
  }
  .supervisionLevel-4 {
    background-color: var(--color-supervisionLevel-4);
  }
  .epaProgressBar {
    height: 26px;
    border: 2px solid #fff;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-supervisionLevel-1) 0%, var(--color-supervisionLevel-1) 25%, var(--color-supervisionLevel-3) 25%, var(--color-supervisionLevel-3) 75%, var(--color-supervisionLevel-4) 75%, var(--color-supervisionLevel-4) 100%);
  }
}
/*------------------------------------*\
	Fancybox
\*------------------------------------*/
@layer overrides {
  .fancybox-overlay {
    background-color: rgba(255, 255, 255, 0.25);
  }
  *[data-uimode=dark] .fancybox-overlay {
    background-color: rgba(25, 25, 25, 0.5);
  }
  .fancybox-opened .fancybox-skin,
  .fancybox-skin {
    box-shadow: var(--shadow-box-xy);
    background-color: var(--color-layout-cardbackground);
  }
  img.image-left.fancybox-header {
    border-radius: 4px;
  }
  .fancybox-skin {
    color: var(--color-text);
  }
  .fancyboxbuttonholder {
    bottom: 0;
    width: 100%;
  }
  .fancyboxbuttonholder a.button {
    border-radius: 5px;
    font-weight: normal;
    font-size: 13px;
  }
  .fancybox-close {
    background-image: none;
    background-color: transparent;
    display: grid;
    place-items: center;
    top: -30px;
    right: -30px;
  }
  .fancybox-close:before {
    content: "\f00d";
    color: var(--color-fancybox-closebuttoncolor);
    font-family: var(--font-icon);
    font-size: 1rem;
    font-weight: 900;
    transition: all 0.25s;
  }
  .fancybox-close:hover:before {
    color: var(--color-fancybox-closebuttoncolor-hover);
    transform: rotate(90deg);
  }
  .fancyboxtable td {
    padding: 4px;
  }
  .fancyboxtable a:not(a.button) {
    color: var(--color-primary);
    text-decoration: underline;
  }
  .fancyboxtable a:not(a.button):hover {
    color: var(--color-primary-700);
  }
  .fancyboxtable .formtable input.hasDatepicker {
    width: 130px;
    float: left;
  }
  div.fancybox-inner .formtable tr {
    background-color: transparent;
  }
  div.fancybox-inner textarea {
    width: 95%;
  }
  /* flashmessage fancybox */
  .fancybox-wrap-flashmessage .fancybox-skin {
    background-color: var(--color-flashmessage-fancybox-bg);
    border: 2px solid var(--color-flashmessage-fancybox-border);
    color: var(--color-flashmessage-fancybox-text);
  }
  .fancybox-textblock p {
    margin-bottom: 12px;
  }
  .fancybox-textblock ul {
    margin-left: 20px;
    margin-bottom: 12px;
  }
  /* content inside fancybox */
  .fancybox-inner table.fancyboxtable p:first-child {
    padding-top: 20px;
  }
  .fancybox-inner table.fancyboxtable p {
    margin-bottom: 8px;
  }
  .fancyboxheader {
    margin-bottom: 16px;
  }
  .fancyboxheader__icon {
    margin-right: 4px;
    padding: 6px;
  }
  .fancyboxheader__icon i {
    font-size: 1.4rem;
    line-height: normal;
  }
  .fancyboxheader__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2px;
  }
}
@layer defaults {
  .fa-mr {
    margin-right: 4px;
  }
  .fa-mr2 {
    margin-right: 8px;
  }
  .fa-ml {
    margin-left: 4px;
  }
  .fa-ml2 {
    margin-left: 8px;
  }
  .fa-color-day {
    color: var(--color-checklist-day);
  }
  .fa-color-week {
    color: var(--color-checklist-week);
  }
  .fa-color-month {
    color: var(--color-checklist-month);
  }
  .fa-color-quater {
    color: var(--color-checklist-quater);
  }
  .fa-color-year {
    color: var(--color-checklist-year);
  }
  .fa-sky-homesafe {
    color: var(--color-label-homesafe);
  }
  .fa-sky-aggression {
    color: var(--color-label-aggression);
  }
  .fa-sky-calamity {
    color: var(--color-label-calamity);
  }
  .fa-sky-dataincident {
    color: var(--color-label-dataleak);
  }
  .fa-sky-audit {
    color: var(--color-label-audit);
  }
  .fa-sky-complaint {
    color: var(--color-label-complaint);
  }
  .fa-sky-vim {
    color: var(--color-label-vim);
  }
  .fa-sky-inquiry {
    color: var(--color-label-inquiry);
  }
  .fa-sky-improvementproposal {
    color: var(--color-label-improvementproposal);
  }
}
/*------------------------------------*\
	Form / form elements
\*------------------------------------*/
@layer defaults {
  ::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--color-base-500);
    font-style: italic;
    opacity: 1;
    /* Firefox */
  }
  :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-style: italic;
    color: var(--color-base-500);
  }
  ::-ms-input-placeholder {
    /* Microsoft Edge */
    font-style: italic;
    color: var(--color-base-500);
  }
  input,
  textarea,
  button {
    font-family: inherit;
  }
  button[type=button] {
    border-radius: 4px;
    border: 1px solid var(--color-base-300);
    background: var(--color-base-300);
  }
  button[type=button]:hover {
    background: var(--color-base-400);
    border: 1px solid var(--color-base-400);
    cursor: pointer;
  }
  input,
  select,
  textarea {
    background-color: var(--color-form-background);
    border: 1px solid var(--color-form-border);
    color: var(--color-text);
    border-radius: 4px;
    padding: 8px 8px;
    box-sizing: border-box;
  }
  input.error,
  select.error,
  textarea.error {
    background-color: var(--color-util-error-bg);
    border: 1px solid var(--color-util-error) !important;
  }
  input[type=checkbox].error {
    filter: sepia(100%) brightness(90%) hue-rotate(300deg) saturate(200%) contrast(120%);
  }
  span > input[type=checkbox].error {
    filter: none;
  }
  select {
    padding: 7.5px 8px;
  }
  @supports (-webkit-touch-callout: none) {
    select {
      color: var(--color-text);
      background-color: var(--color-form-background);
      background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      padding-right: 16px;
    }
  }
  .inputiconprefix {
    position: relative;
  }
  .inputiconprefix input {
    padding-left: 28px !important;
    margin-left: 0 !important;
  }
  .inputiconprefix select {
    padding-left: 28px !important;
  }
  .inputiconprefix i {
    position: absolute;
    top: 11px;
    left: 8px;
    color: var(--color-base-500);
  }
  .inputLoader {
    position: absolute;
    top: 11px;
    right: 20px;
    display: none;
  }
  .inputLoader i {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-base-500);
  }
  .inputLoading {
    position: relative;
  }
  .inputLoading input {
    padding-right: 28px !important;
    margin-right: 0 !important;
  }
  .inputLoading .inputLoader {
    display: block;
  }
  .radiobox {
    padding: 5px;
  }
  input[type=file] {
    padding: 8px 0;
    border: none;
  }
  ::-webkit-file-upload-button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    margin-right: 12px;
    border: 1px solid var(--color-base-300);
    background: var(--color-base-300);
  }
  ::file-selector-button {
    padding: 8px 12px;
    border-radius: 4px;
    margin-right: 12px;
    border: 1px solid var(--color-base-300);
    background: var(--color-base-300);
  }
  ::-webkit-file-upload-button:hover {
    cursor: pointer;
    background: var(--color-base-400);
    border: 1px solid var(--color-base-400);
  }
  ::file-selector-button:hover {
    cursor: pointer;
    background: var(--color-base-400);
    border: 1px solid var(--color-base-400);
  }
  .formbuilder-form fieldset {
    border: none;
  }
  .formbuilder-form fieldset .fieldset-title {
    background-color: var(--color-form-background);
    width: 100%;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-form-border);
  }
  .formbuilder-footer {
    border-top: 1px solid var(--color-form-border);
    padding-top: 2rem;
    margin: 2rem 0;
    display: flex;
    justify-content: space-between;
  }
  .formbuilder-footer .formbuilder-footer__left {
    display: flex;
    align-items: center;
  }
  .formbuilder-footer .formbuilder-footer__right {
    display: flex;
    align-items: center;
  }
  .formbuilder-progress {
    height: 0.5rem;
    border-radius: 0.25rem;
    margin: 2rem 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-base-300);
    overflow: hidden;
  }
  .formbuilder-progress .formbuilder-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--color-primary);
  }
  .answer-options {
    border: 1px solid var(--color-base-300);
    border-radius: 4px;
  }
  .answer-options .answer-options-container {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
  }
  .answer-options .answer-options__add {
    border: none;
    background-color: transparent;
    margin: 0 auto;
    padding: 6px 12px;
    margin: 12px auto;
    display: block;
    cursor: pointer;
    color: var(--color-button-green-background);
  }
  .answer-options .answer-options__add:hover {
    color: var(--color-button-green-hover-background);
  }
  .answer-options .answer-option {
    padding-bottom: 12px;
    padding-top: 12px;
    border-bottom: 1px dotted var(--color-base-300);
  }
  .answer-options .answer-option__answer {
    display: flex;
    gap: 8px;
  }
  .answer-options .answer-option__answer .answer-option__button {
    background-color: transparent;
    border: none;
    height: 35px;
    width: 35px;
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .answer-options .answer-option__answer .answer-option__button:after {
    font-family: var(--font-icon);
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-text-dimmed);
  }
  .answer-options .answer-option__answer .answer-option__button--drag {
    cursor: grab;
  }
  .answer-options .answer-option__answer .answer-option__button--drag:after {
    content: "\e411";
  }
  .answer-options .answer-option__answer .answer-option__button--action:after {
    content: "\e455";
    color: var(--color-text-faded);
  }
  .answer-options .answer-option__answer .answer-option__button--action--active:after {
    color: var(--color-text-default);
  }
  .answer-options .answer-option__answer .answer-option__button--action:hover:after {
    color: var(--color-text-default);
  }
  .answer-options .answer-option__answer .answer-option__button--delete:after {
    content: "\e2ae";
    color: var(--color-button-red-background);
  }
  .answer-options .answer-option__answer .answer-option__button--delete:hover:after {
    color: var(--color-button-red-hover-background);
  }
  .answer-options .answer-option__refferal {
    display: flex;
    margin-top: 8px;
    align-items: center;
    padding: 0 69px 0 38px;
    gap: 8px;
  }
  .checkups {
    border: 1px solid var(--color-base-300);
    border-radius: 4px;
  }
  .checkups .checkups__appointments {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
  }
  .checkups .checkups__appointment {
    padding-bottom: 12px;
    padding-top: 12px;
    border-bottom: 1px dotted var(--color-base-300);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .checkups .checkups__datetime {
    display: flex;
    gap: 8px;
  }
  .checkups .checkups__smsreminder {
    padding-left: 3rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .checkups .checkups__smsreminder i {
    color: var(--color-text-dimmed);
  }
  .checkups .checkups__impactscore {
    padding-left: 3rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .checkups .checkups__impactscore i {
    color: var(--color-text-dimmed);
  }
  .checkups .checkups__buttons {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
  }
  .checkups .checkups__button, .checkups .checkups__deletebtn, .checkups .checkups__draghandler {
    background-color: transparent;
    border: none;
    height: 35px;
    width: 35px;
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .checkups .checkups__button:after, .checkups .checkups__deletebtn:after, .checkups .checkups__draghandler:after {
    font-family: var(--font-icon);
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-text-dimmed);
  }
  .checkups .checkups__draghandler {
    cursor: grab;
  }
  .checkups .checkups__draghandler:after {
    content: "\e411";
  }
  .checkups .checkups__deletebtn:after {
    content: "\e2ae";
    color: var(--color-button-red-background);
  }
  .checkups .checkups__deletebtn:hover:after {
    color: var(--color-button-red-hover-background);
  }
  .checkups .checkups__addbtn {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    margin: 0 auto;
    padding: 6px 12px;
    margin: 12px auto;
    display: block;
    cursor: pointer;
    color: var(--color-button-green-background);
  }
}
/*------------------------------------*\
	Formtable
\*------------------------------------*/
@layer components {
  .formtable {
    width: 100%;
  }
  .formtable tr {
    background-color: var(--color-layout-cardbackground);
  }
  .formtable tr td {
    padding: 6px 5px;
    vertical-align: top;
  }
  .formtable tr td:nth-child(odd) {
    width: 130px;
  }
  .formtable tr td:nth-child(even) {
    width: 200px;
  }
  .formtable tr td:nth-child(even) label {
    margin-right: 20px;
    display: inline-block;
  }
  .formtable tr td:first-child {
    padding-left: 0;
  }
  .formtable tr td:nth-child(odd) label:not(.basic-label) {
    color: var(--color-text);
    padding-top: 10px;
    display: inline-block;
  }
  .formtable tr td:nth-child(odd) label:after {
    content: ":";
  }
  .formtable tr td:nth-child(odd) label.nocolon:after {
    content: "";
  }
  .formtable tr td:nth-child(odd) label.required:after {
    content: ": *";
  }
  .formtable tr td:nth-child(even) label {
    margin-right: 20px;
    margin-top: 10px;
  }
  .formtable tr td:nth-child(3) label:not(.basic-label) {
    display: block;
    width: 150px;
    float: left;
    text-align: right;
    color: #898989;
  }
  .formtable tr td:nth-child(3) span.requiredStar {
    display: block;
    float: left;
    width: 5px;
  }
  .formtable tr td.auto-width:nth-child(odd) {
    width: auto;
    width: 20px;
  }
  .formtable tr td.info {
    color: #898989;
  }
  .formtable tr td .evendistribution {
    display: flex;
    justify-content: space-between;
  }
  .formtable tr td .button {
    margin-top: 6px;
  }
  .formtable tr:first-child td {
    padding-top: 0;
  }
  .formtable input[type=text],
  .formtable input[type=password],
  .formtable input[type=email],
  .formtable input[type=number],
  .formtable select,
  .formtable textarea {
    width: 100%;
  }
  .formtable input[type=radio] {
    margin-top: 12px;
  }
  .formtable input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  .formtable input[type=number]::placeholder {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0;
  }
  .formtable input[type=text].hasDatepicker {
    width: 130px;
    float: left;
  }
  .formtable input[type=text].hasMultiDatespicker {
    width: 90%;
  }
  .formtable input[type=text].entry-option {
    width: 50px;
  }
  .formtable input[type=text].search-input {
    width: 296px;
    float: right;
  }
  .formtable input[type=file] {
    border: none;
    padding-top: 2px;
    background-color: transparent;
  }
  .formtable input.quantity {
    width: 40px;
    padding: 3px;
    text-align: center;
  }
  .formtable input.quantity::-webkit-outer-spin-button, .formtable input.quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .formtable input.quantity[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .formtable .mini {
    width: 10%;
  }
  .formtable .small {
    width: 25%;
  }
  .formtable .medium {
    width: 50%;
  }
  .formtable .tiny {
    width: 40px !important;
  }
  .formtable .small-fixed {
    width: 57px !important;
  }
  .formtable .medium-fixed {
    width: 110px !important;
  }
  .formtable .large-fixed {
    width: 165px !important;
  }
  .formtable img {
    float: left;
    margin: 2px 4px;
  }
  .formtable div.preview {
    width: 104px;
    border: 2px dotted #cccccc;
    min-height: 104px;
  }
  .formtable div.preview.loading {
    background: url("/includes/images/loading.gif") no-repeat 39px 40px;
  }
  .formtable div.preview.loading img {
    display: none;
  }
  .formtable div.preview img {
    float: none;
  }
  .formtable div.preview-newsletteritem {
    width: 100% !important;
  }
  .formtable div.previewfluid {
    border: none;
  }
  .formtable div.previewfluid.loading {
    background: url("/includes/images/loading.gif") no-repeat 39px 40px;
  }
  .formtable div.previewfluid.loading img {
    display: none;
  }
  .formtable div.previewfluid img {
    float: none;
    margin: 0;
  }
  .formtable .photo-upload-preview {
    border: 2px dotted #cccccc;
    width: 106px;
    height: 106px;
    margin-top: 10px;
  }
  .formtable .photo-upload-preview img {
    padding: 3px;
    float: none;
    margin: 0;
  }
  .formtable div.preview.loading {
    background: url("/includes/images/loading.gif") no-repeat 39px 40px;
  }
  .formtable div.preview.loading img {
    display: none;
  }
  .formtable div.previewfluid.loading {
    background: url("/includes/images/loading.gif") no-repeat 39px 40px;
  }
  .formtable div.previewfluid.loading img {
    display: none;
  }
  .formtable .redactor-editor img {
    float: none;
  }
  .formtable .divider {
    border-bottom: 4px solid var(--color-formtable-dividers);
    width: 100%;
    margin: 5px 0;
  }
  .formtable .divider.improvement {
    border-bottom: 4px solid var(--color-label-improvement);
  }
  .formtable .divider.complaint {
    border-bottom: 4px solid var(--color-label-complaint);
  }
  .formtable .divider.calamity {
    border-bottom: 4px solid var(--color-label-calamity);
  }
  .formtable .divider.aggression {
    border-bottom: 4px solid var(--color-label-aggression);
  }
  .formtable .divider.homesafe {
    border-bottom: 4px solid var(--color-label-homesafe);
  }
  .formtable .divider.dataleak {
    border-bottom: 4px solid var(--color-label-dataleak);
  }
  .formtable .divider.inquiry {
    border-bottom: 4px solid var(--color-label-inquiry);
  }
  .formtable .divider.improvementproposal {
    border-bottom: 4px solid var(--color-label-improvementproposal);
  }
  .formtable .divider.audit {
    border-bottom: 4px solid var(--color-label-audit);
  }
  .formtable .header-description {
    font-size: 13px;
    background-color: var(--color-layout-sidebarbackground);
    padding: 10px 15px;
    border: solid 1px var(--color-base-300);
  }
  .formtable .label-subform {
    background-color: var(--color-formtable-dividers);
    font-size: 12px;
    padding: 2px 7px 2px 7px;
    border-radius: 5px;
    color: #fff;
  }
  .formtable .single-checkbox {
    margin-top: 12px;
  }
  .formtable p {
    margin-top: 10px;
  }
  .formtable .label-subform-homesafe {
    background-color: #33b2de;
    color: #fff;
  }
  .formtable div#textarea-counter {
    color: grey;
  }
  .formtable .header-bullet {
    background-color: var(--color-formtable-dividers);
    width: 8px;
    height: 8px;
    margin: 5px 10px 0 0;
  }
  .formtable .header-bullet.header-bullet-aggression {
    background-color: var(--color-label-aggression);
  }
  .formtable .header-bullet.header-bullet-audit {
    background-color: var(--color-label-audit);
  }
  .formtable .header-bullet.header-bullet-calamity {
    background-color: var(--color-label-calamity);
  }
  .formtable .header-bullet.header-bullet-complaint {
    background-color: var(--color-label-complaint);
  }
  .formtable .header-bullet.header-bullet-dataleak {
    background-color: var(--color-label-dataleak);
  }
  .formtable .header-bullet.header-bullet-homesafe {
    background-color: var(--color-label-homesafe);
  }
  .formtable .header-bullet.header-bullet-improvement {
    background-color: var(--color-label-improvement);
  }
  .formtable .header-bullet.header-bullet-improvementproposal {
    background-color: var(--color-label-improvementproposal);
  }
  .formtable .header-bullet.header-bullet-inquiry {
    background-color: var(--color-label-inquiry);
  }
  .formtable .switch {
    margin-top: 6px;
  }
  .formtable.highlightrows tr:not(.disablehighlight):hover td:first-child {
    border-left: 4px solid #002b7f;
    padding-left: 6px !important;
  }
  .formtable-under-matrixtable tr td:first-child {
    width: 166px !important;
  }
  .formtable-under-matrixtable tr td select {
    width: 60px;
  }
  .formtable-under-matrixtable tr td textarea {
    width: 99%;
  }
  .formtable.fancybox-exception tr td:nth-child(odd) {
    width: 55px;
  }
  .formtable.fancybox-exception img {
    float: left;
    margin: 0;
  }
  textarea.textarea-with-timestamp-button {
    border-top-right-radius: 0;
  }
}
/*------------------------------------*\
	Full calendar
\*------------------------------------*/
@layer overrides {
  .fc-sat,
  .fc-sun {
    background: repeating-linear-gradient(45deg, var(--color-base-100) 0, var(--color-base-100) 1px, transparent 1px, transparent 8px);
  }
  .fc th,
  .fc td {
    border-color: var(--color-fullcalendar-border);
  }
  .fc .fc-head-container th {
    text-align: center;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--color-fullcalendar-header);
    border-style: none;
  }
  .fc .fc-button-group > * {
    margin: 0 0 0 4px;
  }
  .fc .fc-button-group > :first-child {
    margin: 0;
  }
  .fc-row .fc-content-skeleton {
    min-height: 75px;
  }
  .fc-event-container a.event-for-user {
    cursor: pointer !important;
  }
  .fc-time-in-title .fc-time {
    display: none;
  }
  .fc-time {
    display: inherit;
  }
  .fc-content .progressbar {
    border: solid 1px var(--color-layout-cardbackground);
    margin: 3px;
  }
  .fc-content .progressbar .progress {
    padding: 1px;
  }
  .fc-content .progressbar .progressText {
    position: relative;
    left: 50%;
  }
  .fc-content .drop {
    margin: 2px;
    padding: 2px;
    border: solid 1px var(--color-layout-cardbackground);
  }
  .fc-content .teacher {
    border: 2px solid var(--color-layout-cardbackground);
    margin: 2px;
    padding: 2px;
    border-radius: 50%;
    color: var(--color-text);
    width: 15px;
    height: 15px;
    float: left;
    text-align: center;
  }
  .fc-content .teacherslist .full {
    background-color: var(--color-fullcalendar-today);
  }
  .fc-content .teacherslist .empty {
    background-color: transparent;
    border: 2px dashed var(--color-layout-cardbackground);
  }
  .fc-content .btnNote {
    position: absolute;
    right: 1px;
    top: 2px;
    font-size: 8px;
    border-radius: 2px;
    padding: 1px;
    color: var(--color-layout-cardbackground);
  }
  .fc-unthemed td.fc-today {
    background: var(--color-fullcalendar-today);
  }
  .fc-row .fc-content-skeleton td,
  .fc-row .fc-helper-skeleton td {
    border-color: var(--color-fullcalendar-border);
  }
  .calendarcontainer {
    width: 100%;
    height: auto;
    position: relative;
  }
  .calendarcontainer.full,
  .formContainer.full,
  .listcontainer.full {
    width: 94%;
    margin: 0 auto 30px auto;
  }
  .listcontainer.full thead tr th {
    border: 1px solid var(--color-fullcalendar-border);
  }
  .listcontainer.full tbody tr td {
    height: 30px;
    text-indent: 1em;
  }
  .formContainer.full {
    padding-top: 24px;
    margin: 30px auto 30px auto;
  }
  .calendarcontainer .right {
    width: 100%;
    clear: both;
    margin: 0 0 10px 0;
  }
  .fc-state-default {
    background: none;
    text-shadow: none;
    box-shadow: none;
    border-color: var(--color-base-200);
    background-color: var(--color-base-200);
  }
  .fc-state-default.fc-state-disabled {
    cursor: default;
  }
  .fc-state-default:not(.fc-state-disabled):hover {
    border-color: var(--color-base-300);
    background-color: var(--color-base-300);
  }
  .fc-state-default {
    color: var(--color-text);
  }
  .fc-unthemed th,
  .fc-unthemed td,
  .fc-unthemed thead,
  .fc-unthemed tbody,
  .fc-unthemed .fc-divider,
  .fc-unthemed .fc-row,
  .fc-unthemed .fc-content,
  .fc-unthemed .fc-popover,
  .fc-unthemed .fc-list-view,
  .fc-unthemed .fc-list-heading td {
    border-color: var(--color-fullcalendar-border);
  }
  .fc-unthemed .fc-divider,
  .fc-unthemed .fc-popover .fc-header,
  .fc-unthemed .fc-list-heading td {
    background: var(--color-fullcalendar-header);
  }
  .fc-unthemed .fc-list-empty {
    background-color: var(--color-layout-cardbackground);
  }
  .fc-list-item:hover td {
    background-color: var(--color-base-100);
  }
  .fc-event-reservation {
    background-color: red;
    border-color: red;
  }
  .fc-event-appointment {
    background-color: green;
    border-color: green;
  }
}
@layer defaults {
  .imagegrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 15px;
    row-gap: 15px;
  }
  .imagegrid > *:hover {
    cursor: pointer;
  }
  .imagegrid__image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
  }
  .imagegrid__imagecontainer {
    position: relative;
  }
  .imagegrid__imagecontainer--editable:hover:before {
    content: "\f040";
    font-family: var(--font-icon);
    height: 100%;
    width: 100%;
    background-color: var(--color-imagegrid-overlay);
    font-weight: 900;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-imagegrid-primary);
  }
  .imagegrid__placeholder {
    border-radius: 4px;
    background-color: var(--color-imagegrid-placeholderbg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 15px;
  }
  .imagegrid__placeholder:hover {
    background-color: var(--color-imagegrid-placeholderbghover);
  }
  .imagegrid__placeholder i {
    font-size: 24px;
    color: var(--color-imagegrid-primary);
  }
  .imagegrid__caption {
    margin: 4px 0;
  }
}
/*------------------------------------*\
	jqGrid
\*------------------------------------*/
@layer overrides {
  .ui-jqgrid,
  .ui-jqgrid.ui-widget {
    box-shadow: var(--shadow-box-xy);
    font-size: 13px;
    margin-bottom: 40px;
  }
  .ui-jqgrid tr td,
  .ui-jqgrid tr th,
  .ui-jqgrid.ui-widget tr td,
  .ui-jqgrid.ui-widget tr th {
    padding: 10px 10px !important;
    border-right: none !important;
  }
  .ui-jqgrid .jqgfirstrow,
  .ui-jqgrid.ui-widget .jqgfirstrow {
    visibility: collapse;
  }
  .ui-jqgrid .ui-jqgrid-hdiv,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv {
    border: 0;
    position: relative;
    z-index: 5;
    background-color: var(--color-layout-cardbackground);
    border-bottom: 1px solid var(--color-base-400);
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox {
    padding: 10px 0 14px;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable .ui-th-column,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable .ui-th-column {
    background: none;
    border: 0;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable .ui-th-column .ui-th-div,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable .ui-th-column .ui-th-div {
    text-align: left;
    padding-bottom: 20px;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-jqgrid-labels,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-jqgrid-labels {
    color: var(--color-primary);
    border: 0;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-jqgrid-labels th,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-jqgrid-labels th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th {
    padding-top: 0 !important;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table .ui-search-input,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table .ui-search-input {
    position: relative;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table .ui-search-input input,
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table .ui-search-input select,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table .ui-search-input input,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table .ui-search-input select {
    width: calc(100% - 10px) !important;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table tr td,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table tr td {
    padding: 0 !important;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table button.ui-search-button.ui-button,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table button.ui-search-button.ui-button {
    position: absolute;
    right: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background: var(--color-layout-cardbackground);
    border-radius: 0 4px 4px 0;
    border: 1px solid var(--color-base-300);
    width: 20px;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table button.ui-search-button.ui-button .ui-icon,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table button.ui-search-button.ui-button .ui-icon {
    background: none;
    text-indent: 0;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table button.ui-search-button.ui-button .ui-icon:before,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar .ui-search-table button.ui-search-button.ui-button .ui-icon:before {
    font-family: var(--font-icon);
    content: "\f002";
    font-size: 11px;
    color: var(--color-base-500);
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th {
    text-align: left;
    background: none;
    border: 0;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th input,
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th select,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th input,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th select {
    border: 1px solid var(--color-form-border);
    border-radius: 4px;
    color: var(--color-text);
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th input,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th input {
    padding: 2px 3px;
  }
  .ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th select,
  .ui-jqgrid.ui-widget .ui-jqgrid-hdiv .ui-jqgrid-hbox .ui-jqgrid-htable tr.ui-search-toolbar th select {
    padding: 1px 2px;
  }
  .ui-jqgrid .ui-jqgrid-bdiv,
  .ui-jqgrid.ui-widget .ui-jqgrid-bdiv {
    overflow-x: hidden;
  }
  .ui-jqgrid .ui-jqgrid-bdiv tr.jqgrow:hover,
  .ui-jqgrid.ui-widget .ui-jqgrid-bdiv tr.jqgrow:hover {
    cursor: pointer;
  }
  .ui-jqgrid .ui-jqgrid-bdiv tr.jqgrow.no-cursor-pointer td,
  .ui-jqgrid.ui-widget .ui-jqgrid-bdiv tr.jqgrow.no-cursor-pointer td {
    cursor: default;
  }
  .ui-jqgrid .ui-jqgrid-bdiv tr.jqgrow.ui-state-hover,
  .ui-jqgrid.ui-widget .ui-jqgrid-bdiv tr.jqgrow.ui-state-hover {
    background-image: none;
    background-color: var(--color-base-100);
  }
  .ui-jqgrid .ui-jqgrid-bdiv tr.jqgrow td,
  .ui-jqgrid.ui-widget .ui-jqgrid-bdiv tr.jqgrow td {
    color: var(--color-base-600) !important;
    border-color: var(--color-base-300);
    overflow: hidden;
    white-space: nowrap;
  }
  .ui-jqgrid .ui-jqgrid-bdiv tr.jqgrow td .greencell,
  .ui-jqgrid.ui-widget .ui-jqgrid-bdiv tr.jqgrow td .greencell {
    color: green;
  }
  .ui-jqgrid .ui-jqgrid-bdiv tr.jqgrow td .greenlabel,
  .ui-jqgrid.ui-widget .ui-jqgrid-bdiv tr.jqgrow td .greenlabel {
    color: white;
    background-color: var(--color-emerald-500);
    border-radius: 5px;
    padding: 1px 8px;
    font-size: 11px;
  }
  .ui-jqgrid .ui-jqgrid-bdiv tr.jqgrow td .redcell,
  .ui-jqgrid.ui-widget .ui-jqgrid-bdiv tr.jqgrow td .redcell {
    color: var(--color-red-500);
  }
  .ui-jqgrid .ui-jqgrid-bdiv tr.jqgrow td .redlabel,
  .ui-jqgrid.ui-widget .ui-jqgrid-bdiv tr.jqgrow td .redlabel {
    color: white;
    background-color: var(--color-red-500);
    border-radius: 5px;
    padding: 1px 8px;
    font-size: 11px;
  }
  .ui-jqgrid .ui-jqgrid-toppager,
  .ui-jqgrid .ui-jqgrid-pager,
  .ui-jqgrid.ui-widget .ui-jqgrid-toppager,
  .ui-jqgrid.ui-widget .ui-jqgrid-pager {
    border: none;
    border-top: 1px solid var(--color-base-400);
    top: -1px;
    position: relative;
  }
  .ui-jqgrid .ui-jqgrid-toppager .ui-pager-control,
  .ui-jqgrid .ui-jqgrid-pager .ui-pager-control,
  .ui-jqgrid.ui-widget .ui-jqgrid-toppager .ui-pager-control,
  .ui-jqgrid.ui-widget .ui-jqgrid-pager .ui-pager-control {
    height: auto;
    background-color: var(--color-layout-cardbackground);
  }
  .ui-jqgrid .ui-jqgrid-toppager .ui-pg-input,
  .ui-jqgrid .ui-jqgrid-toppager .ui-pg-selbox,
  .ui-jqgrid .ui-jqgrid-pager .ui-pg-input,
  .ui-jqgrid .ui-jqgrid-pager .ui-pg-selbox,
  .ui-jqgrid.ui-widget .ui-jqgrid-toppager .ui-pg-input,
  .ui-jqgrid.ui-widget .ui-jqgrid-toppager .ui-pg-selbox,
  .ui-jqgrid.ui-widget .ui-jqgrid-pager .ui-pg-input,
  .ui-jqgrid.ui-widget .ui-jqgrid-pager .ui-pg-selbox {
    height: auto;
    padding: 3px 0 3px 5px;
    border: 1px solid var(--color-base-300);
    background-color: var(--color-form-background);
    color: var(--color-text);
  }
  .ui-jqgrid .s-ico,
  .ui-jqgrid.ui-widget .s-ico {
    margin-left: 4px;
  }
  .ui-jqgrid .s-ico .ui-icon,
  .ui-jqgrid.ui-widget .s-ico .ui-icon {
    background: none;
    text-indent: 0;
    color: var(--color-base-700);
    margin-left: 0;
  }
  .ui-jqgrid .s-ico .ui-icon:before,
  .ui-jqgrid.ui-widget .s-ico .ui-icon:before {
    font-family: var(--font-icon);
  }
  .ui-jqgrid .s-ico .ui-icon-asc:before,
  .ui-jqgrid.ui-widget .s-ico .ui-icon-asc:before {
    content: "\f0d8";
  }
  .ui-jqgrid .s-ico .ui-icon-desc:before,
  .ui-jqgrid.ui-widget .s-ico .ui-icon-desc:before {
    content: "\f0d7";
  }
  .ui-jqgrid-table-striped > tbody > tr:nth-of-type(odd) {
    opacity: 1;
  }
}
@layer overrides {
  .ui-widget.ui-datepicker,
  .ui-daterangepicker {
    border: 1px solid var(--color-base-300);
  }
  .ui-widget.ui-datepicker.ui-widget,
  .ui-daterangepicker.ui-widget {
    border: 1px solid var(--color-base-200);
  }
  .ui-widget.ui-datepicker .ranges,
  .ui-daterangepicker .ranges {
    background-image: none;
    background-color: var(--color-base-100);
    border: 1px solid var(--color-base-300);
  }
  .ui-widget.ui-datepicker .title-start,
  .ui-widget.ui-datepicker .title-end,
  .ui-daterangepicker .title-start,
  .ui-daterangepicker .title-end {
    color: var(--color-base-700);
  }
  .ui-widget.ui-datepicker button.btnDone,
  .ui-daterangepicker button.btnDone {
    padding: 4px 8px;
    border: none;
  }
  .ui-datepicker .ui-datepicker-header {
    background-image: none;
    background-color: var(--color-base-300);
    border: var(--color-base-300);
  }
  .ui-datepicker .ui-datepicker-prev,
  .ui-datepicker .ui-datepicker-next {
    top: 9px;
    display: grid;
    place-items: center;
  }
  .ui-datepicker .ui-datepicker-prev:before,
  .ui-datepicker .ui-datepicker-next:before {
    font-family: var(--font-icon);
    content: "\f0d9";
    color: var(--color-base-700);
  }
  .ui-datepicker .ui-datepicker-prev:hover,
  .ui-datepicker .ui-datepicker-next:hover {
    background-color: var(--color-base-100);
    border: none;
    cursor: pointer;
  }
  .ui-datepicker .ui-datepicker-prev:hover:before,
  .ui-datepicker .ui-datepicker-next:hover:before {
    color: var(--color-primary);
  }
  .ui-datepicker .ui-datepicker-prev .ui-icon,
  .ui-datepicker .ui-datepicker-next .ui-icon {
    display: none;
  }
  .ui-datepicker .ui-datepicker-prev {
    left: 7px;
  }
  .ui-datepicker .ui-datepicker-prev:before {
    content: "\f0d9";
  }
  .ui-datepicker .ui-datepicker-next {
    right: 9px;
  }
  .ui-datepicker .ui-datepicker-next:before {
    content: "\f0da";
  }
  .ui-datepicker .ui-widget-content .ui-state-active,
  .ui-datepicker .ui-state-active {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: white !important;
  }
}
@layer components {
  /*!
  * Based on Redmond theme
  */
  /* Component containers
  ----------------------------------*/
  .ui-widget {
    font-family: var(--font-header);
    font-size: 0.875rem;
  }
  .ui-widget .ui-widget {
    font-size: 1em;
  }
  .ui-widget input,
  .ui-widget select,
  .ui-widget textarea,
  .ui-widget button {
    font-family: var(--font-header);
    font-size: 1em;
  }
  .ui-widget.ui-widget-content {
    background-image: none;
    border: none;
  }
  .ui-widget-content {
    border: 1px solid var(--color-layout-sidebarbackground);
    background: var(--color-layout-cardbackground);
    color: var(--color-text);
  }
  .ui-widget-content a {
    color: var(--color-text);
  }
  .ui-widget-header {
    border: 1px solid #4297d7;
    background: #5c9ccc url("images/ui-bg_gloss-wave_55_5c9ccc_500x100.png") 50% 50% repeat-x;
    color: #ffffff;
    font-weight: bold;
  }
  .ui-widget-header a {
    color: #ffffff;
  }
  /* Interaction states
  ----------------------------------*/
  .ui-state-default,
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default,
  .ui-button,
  html .ui-button.ui-state-disabled:hover,
  html .ui-button.ui-state-disabled:active {
    border: 1px solid var(--color-base-300);
    font-weight: bold;
    background: var(--color-layout-cardbackground);
    color: var(--color-text);
  }
  .ui-state-default a,
  .ui-state-default a:link,
  .ui-state-default a:visited,
  a.ui-button,
  a:link.ui-button,
  a:visited.ui-button,
  .ui-button {
    color: #2e6e9e;
    text-decoration: none;
  }
  .ui-state-hover,
  .ui-widget-content .ui-state-hover,
  .ui-widget-header .ui-state-hover,
  .ui-state-focus,
  .ui-widget-content .ui-state-focus,
  .ui-widget-header .ui-state-focus,
  .ui-button:hover,
  .ui-button:focus {
    border: 1px solid var(--color-base-200);
    background: none;
    background-color: var(--color-base-200);
    font-weight: bold;
    color: inherit;
  }
  .ui-state-hover a,
  .ui-state-hover a:hover,
  .ui-state-hover a:link,
  .ui-state-hover a:visited,
  .ui-state-focus a,
  .ui-state-focus a:hover,
  .ui-state-focus a:link,
  .ui-state-focus a:visited,
  a.ui-button:hover,
  a.ui-button:focus {
    color: inherit;
    text-decoration: none;
  }
  .ui-visual-focus {
    box-shadow: 0 0 3px 1px rgb(94, 158, 214);
  }
  .ui-state-active,
  .ui-widget-content .ui-state-active,
  .ui-widget-header .ui-state-active,
  a.ui-button:active,
  .ui-button:active,
  .ui-button.ui-state-active:hover {
    border: 1px solid var(--color-base-100);
    background-image: none;
    background-color: var(--color-base-100);
    color: inherit;
    font-weight: bold;
  }
  .ui-icon-background,
  .ui-state-active .ui-icon-background {
    border: #79b7e7;
    background-color: #e17009;
  }
  .ui-state-active a,
  .ui-state-active a:link,
  .ui-state-active a:visited {
    color: inherit;
    text-decoration: none;
  }
  /* Interaction Cues
  ----------------------------------*/
  .ui-state-highlight,
  .ui-widget-content .ui-state-highlight,
  .ui-widget-header .ui-state-highlight {
    border: 1px solid var(--color-primary);
    background: var(--color-jqueryui-hightlight);
    color: #363636;
  }
  .ui-state-checked {
    border: 1px solid #fad42e;
    background: #fbec88;
  }
  .ui-state-highlight a,
  .ui-widget-content .ui-state-highlight a,
  .ui-widget-header .ui-state-highlight a {
    color: #363636;
  }
  .ui-state-error,
  .ui-widget-content .ui-state-error,
  .ui-widget-header .ui-state-error {
    border: 1px solid #cd0a0a;
    background: #fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
    color: #cd0a0a;
  }
  .ui-state-error a,
  .ui-widget-content .ui-state-error a,
  .ui-widget-header .ui-state-error a {
    color: #cd0a0a;
  }
  .ui-state-error-text,
  .ui-widget-content .ui-state-error-text,
  .ui-widget-header .ui-state-error-text {
    color: #cd0a0a;
  }
  .ui-priority-primary,
  .ui-widget-content .ui-priority-primary,
  .ui-widget-header .ui-priority-primary {
    font-weight: bold;
  }
  .ui-priority-secondary,
  .ui-widget-content .ui-priority-secondary,
  .ui-widget-header .ui-priority-secondary {
    opacity: 0.7;
    font-weight: normal;
  }
  .ui-state-disabled,
  .ui-widget-content .ui-state-disabled,
  .ui-widget-header .ui-state-disabled {
    opacity: 0.35;
    background-image: none;
  }
  .ui-state-disabled .ui-icon {
    filter: "alpha(opacity=35)"; /* support: IE8 - See #6059 */
  }
  /* Icons
  ----------------------------------*/
  /* states and images */
  .ui-icon {
    width: 16px;
    height: 16px;
  }
  .ui-icon,
  .ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_469bdd_256x240.png");
  }
  .ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_d8e7f3_256x240.png");
  }
  .ui-state-hover .ui-icon,
  .ui-state-focus .ui-icon,
  .ui-button:hover .ui-icon,
  .ui-button:focus .ui-icon {
    background-image: url("images/ui-icons_217bc0_256x240.png");
  }
  .ui-state-active .ui-icon,
  .ui-button:active .ui-icon {
    background-image: url("images/ui-icons_f9bd01_256x240.png");
  }
  .ui-state-highlight .ui-icon,
  .ui-button .ui-state-highlight.ui-icon {
    background-image: url("images/ui-icons_2e83ff_256x240.png");
  }
  .ui-state-error .ui-icon,
  .ui-state-error-text .ui-icon {
    background-image: url("images/ui-icons_cd0a0a_256x240.png");
  }
  .ui-button .ui-icon {
    background-image: url("images/ui-icons_6da8d5_256x240.png");
  }
  /* positioning */
  /* Three classes needed to override `.ui-button:hover .ui-icon` */
  .ui-icon-blank.ui-icon-blank.ui-icon-blank {
    background-image: none;
  }
  .ui-icon-caret-1-n {
    background-position: 0 0;
  }
  .ui-icon-caret-1-ne {
    background-position: -16px 0;
  }
  .ui-icon-caret-1-e {
    background-position: -32px 0;
  }
  .ui-icon-caret-1-se {
    background-position: -48px 0;
  }
  .ui-icon-caret-1-s {
    background-position: -65px 0;
  }
  .ui-icon-caret-1-sw {
    background-position: -80px 0;
  }
  .ui-icon-caret-1-w {
    background-position: -96px 0;
  }
  .ui-icon-caret-1-nw {
    background-position: -112px 0;
  }
  .ui-icon-caret-2-n-s {
    background-position: -128px 0;
  }
  .ui-icon-caret-2-e-w {
    background-position: -144px 0;
  }
  .ui-icon-triangle-1-n {
    background-position: 0 -16px;
  }
  .ui-icon-triangle-1-ne {
    background-position: -16px -16px;
  }
  .ui-icon-triangle-1-e {
    background-position: -32px -16px;
  }
  .ui-icon-triangle-1-se {
    background-position: -48px -16px;
  }
  .ui-icon-triangle-1-s {
    background-position: -65px -16px;
  }
  .ui-icon-triangle-1-sw {
    background-position: -80px -16px;
  }
  .ui-icon-triangle-1-w {
    background-position: -96px -16px;
  }
  .ui-icon-triangle-1-nw {
    background-position: -112px -16px;
  }
  .ui-icon-triangle-2-n-s {
    background-position: -128px -16px;
  }
  .ui-icon-triangle-2-e-w {
    background-position: -144px -16px;
  }
  .ui-icon-arrow-1-n {
    background-position: 0 -32px;
  }
  .ui-icon-arrow-1-ne {
    background-position: -16px -32px;
  }
  .ui-icon-arrow-1-e {
    background-position: -32px -32px;
  }
  .ui-icon-arrow-1-se {
    background-position: -48px -32px;
  }
  .ui-icon-arrow-1-s {
    background-position: -65px -32px;
  }
  .ui-icon-arrow-1-sw {
    background-position: -80px -32px;
  }
  .ui-icon-arrow-1-w {
    background-position: -96px -32px;
  }
  .ui-icon-arrow-1-nw {
    background-position: -112px -32px;
  }
  .ui-icon-arrow-2-n-s {
    background-position: -128px -32px;
  }
  .ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px;
  }
  .ui-icon-arrow-2-e-w {
    background-position: -160px -32px;
  }
  .ui-icon-arrow-2-se-nw {
    background-position: -176px -32px;
  }
  .ui-icon-arrowstop-1-n {
    background-position: -192px -32px;
  }
  .ui-icon-arrowstop-1-e {
    background-position: -208px -32px;
  }
  .ui-icon-arrowstop-1-s {
    background-position: -224px -32px;
  }
  .ui-icon-arrowstop-1-w {
    background-position: -240px -32px;
  }
  .ui-icon-arrowthick-1-n {
    background-position: 1px -48px;
  }
  .ui-icon-arrowthick-1-ne {
    background-position: -16px -48px;
  }
  .ui-icon-arrowthick-1-e {
    background-position: -32px -48px;
  }
  .ui-icon-arrowthick-1-se {
    background-position: -48px -48px;
  }
  .ui-icon-arrowthick-1-s {
    background-position: -64px -48px;
  }
  .ui-icon-arrowthick-1-sw {
    background-position: -80px -48px;
  }
  .ui-icon-arrowthick-1-w {
    background-position: -96px -48px;
  }
  .ui-icon-arrowthick-1-nw {
    background-position: -112px -48px;
  }
  .ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px;
  }
  .ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px;
  }
  .ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px;
  }
  .ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px;
  }
  .ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px;
  }
  .ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px;
  }
  .ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px;
  }
  .ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px;
  }
  .ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px;
  }
  .ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px;
  }
  .ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px;
  }
  .ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px;
  }
  .ui-icon-arrowreturn-1-w {
    background-position: -64px -64px;
  }
  .ui-icon-arrowreturn-1-n {
    background-position: -80px -64px;
  }
  .ui-icon-arrowreturn-1-e {
    background-position: -96px -64px;
  }
  .ui-icon-arrowreturn-1-s {
    background-position: -112px -64px;
  }
  .ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px;
  }
  .ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px;
  }
  .ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px;
  }
  .ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px;
  }
  .ui-icon-arrow-4 {
    background-position: 0 -80px;
  }
  .ui-icon-arrow-4-diag {
    background-position: -16px -80px;
  }
  .ui-icon-extlink {
    background-position: -32px -80px;
  }
  .ui-icon-newwin {
    background-position: -48px -80px;
  }
  .ui-icon-refresh {
    background-position: -64px -80px;
  }
  .ui-icon-shuffle {
    background-position: -80px -80px;
  }
  .ui-icon-transfer-e-w {
    background-position: -96px -80px;
  }
  .ui-icon-transferthick-e-w {
    background-position: -112px -80px;
  }
  .ui-icon-folder-collapsed {
    background-position: 0 -96px;
  }
  .ui-icon-folder-open {
    background-position: -16px -96px;
  }
  .ui-icon-document {
    background-position: -32px -96px;
  }
  .ui-icon-document-b {
    background-position: -48px -96px;
  }
  .ui-icon-note {
    background-position: -64px -96px;
  }
  .ui-icon-mail-closed {
    background-position: -80px -96px;
  }
  .ui-icon-mail-open {
    background-position: -96px -96px;
  }
  .ui-icon-suitcase {
    background-position: -112px -96px;
  }
  .ui-icon-comment {
    background-position: -128px -96px;
  }
  .ui-icon-person {
    background-position: -144px -96px;
  }
  .ui-icon-print {
    background-position: -160px -96px;
  }
  .ui-icon-trash {
    background-position: -176px -96px;
  }
  .ui-icon-locked {
    background-position: -192px -96px;
  }
  .ui-icon-unlocked {
    background-position: -208px -96px;
  }
  .ui-icon-bookmark {
    background-position: -224px -96px;
  }
  .ui-icon-tag {
    background-position: -240px -96px;
  }
  .ui-icon-home {
    background-position: 0 -112px;
  }
  .ui-icon-flag {
    background-position: -16px -112px;
  }
  .ui-icon-calendar {
    background-position: -32px -112px;
  }
  .ui-icon-cart {
    background-position: -48px -112px;
  }
  .ui-icon-pencil {
    background-position: -64px -112px;
  }
  .ui-icon-clock {
    background-position: -80px -112px;
  }
  .ui-icon-disk {
    background-position: -96px -112px;
  }
  .ui-icon-calculator {
    background-position: -112px -112px;
  }
  .ui-icon-zoomin {
    background-position: -128px -112px;
  }
  .ui-icon-zoomout {
    background-position: -144px -112px;
  }
  .ui-icon-search {
    background-position: -160px -112px;
  }
  .ui-icon-wrench {
    background-position: -176px -112px;
  }
  .ui-icon-gear {
    background-position: -192px -112px;
  }
  .ui-icon-heart {
    background-position: -208px -112px;
  }
  .ui-icon-star {
    background-position: -224px -112px;
  }
  .ui-icon-link {
    background-position: -240px -112px;
  }
  .ui-icon-cancel {
    background-position: 0 -128px;
  }
  .ui-icon-plus {
    background-position: -16px -128px;
  }
  .ui-icon-plusthick {
    background-position: -32px -128px;
  }
  .ui-icon-minus {
    background-position: -48px -128px;
  }
  .ui-icon-minusthick {
    background-position: -64px -128px;
  }
  .ui-icon-close {
    background-position: -80px -128px;
  }
  .ui-icon-closethick {
    background-position: -96px -128px;
  }
  .ui-icon-key {
    background-position: -112px -128px;
  }
  .ui-icon-lightbulb {
    background-position: -128px -128px;
  }
  .ui-icon-scissors {
    background-position: -144px -128px;
  }
  .ui-icon-clipboard {
    background-position: -160px -128px;
  }
  .ui-icon-copy {
    background-position: -176px -128px;
  }
  .ui-icon-contact {
    background-position: -192px -128px;
  }
  .ui-icon-image {
    background-position: -208px -128px;
  }
  .ui-icon-video {
    background-position: -224px -128px;
  }
  .ui-icon-script {
    background-position: -240px -128px;
  }
  .ui-icon-alert {
    background-position: 0 -144px;
  }
  .ui-icon-info {
    background-position: -16px -144px;
  }
  .ui-icon-notice {
    background-position: -32px -144px;
  }
  .ui-icon-help {
    background-position: -48px -144px;
  }
  .ui-icon-check {
    background-position: -64px -144px;
  }
  .ui-icon-bullet {
    background-position: -80px -144px;
  }
  .ui-icon-radio-on {
    background-position: -96px -144px;
  }
  .ui-icon-radio-off {
    background-position: -112px -144px;
  }
  .ui-icon-pin-w {
    background-position: -128px -144px;
  }
  .ui-icon-pin-s {
    background-position: -144px -144px;
  }
  .ui-icon-play {
    background-position: 0 -160px;
  }
  .ui-icon-pause {
    background-position: -16px -160px;
  }
  .ui-icon-seek-next {
    background-position: -32px -160px;
  }
  .ui-icon-seek-prev {
    background-position: -48px -160px;
  }
  .ui-icon-seek-end {
    background-position: -64px -160px;
  }
  .ui-icon-seek-start {
    background-position: -80px -160px;
  }
  /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
  .ui-icon-seek-first {
    background-position: -80px -160px;
  }
  .ui-icon-stop {
    background-position: -96px -160px;
  }
  .ui-icon-eject {
    background-position: -112px -160px;
  }
  .ui-icon-volume-off {
    background-position: -128px -160px;
  }
  .ui-icon-volume-on {
    background-position: -144px -160px;
  }
  .ui-icon-power {
    background-position: 0 -176px;
  }
  .ui-icon-signal-diag {
    background-position: -16px -176px;
  }
  .ui-icon-signal {
    background-position: -32px -176px;
  }
  .ui-icon-battery-0 {
    background-position: -48px -176px;
  }
  .ui-icon-battery-1 {
    background-position: -64px -176px;
  }
  .ui-icon-battery-2 {
    background-position: -80px -176px;
  }
  .ui-icon-battery-3 {
    background-position: -96px -176px;
  }
  .ui-icon-circle-plus {
    background-position: 0 -192px;
  }
  .ui-icon-circle-minus {
    background-position: -16px -192px;
  }
  .ui-icon-circle-close {
    background-position: -32px -192px;
  }
  .ui-icon-circle-triangle-e {
    background-position: -48px -192px;
  }
  .ui-icon-circle-triangle-s {
    background-position: -64px -192px;
  }
  .ui-icon-circle-triangle-w {
    background-position: -80px -192px;
  }
  .ui-icon-circle-triangle-n {
    background-position: -96px -192px;
  }
  .ui-icon-circle-arrow-e {
    background-position: -112px -192px;
  }
  .ui-icon-circle-arrow-s {
    background-position: -128px -192px;
  }
  .ui-icon-circle-arrow-w {
    background-position: -144px -192px;
  }
  .ui-icon-circle-arrow-n {
    background-position: -160px -192px;
  }
  .ui-icon-circle-zoomin {
    background-position: -176px -192px;
  }
  .ui-icon-circle-zoomout {
    background-position: -192px -192px;
  }
  .ui-icon-circle-check {
    background-position: -208px -192px;
  }
  .ui-icon-circlesmall-plus {
    background-position: 0 -208px;
  }
  .ui-icon-circlesmall-minus {
    background-position: -16px -208px;
  }
  .ui-icon-circlesmall-close {
    background-position: -32px -208px;
  }
  .ui-icon-squaresmall-plus {
    background-position: -48px -208px;
  }
  .ui-icon-squaresmall-minus {
    background-position: -64px -208px;
  }
  .ui-icon-squaresmall-close {
    background-position: -80px -208px;
  }
  .ui-icon-grip-dotted-vertical {
    background-position: 0 -224px;
  }
  .ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px;
  }
  .ui-icon-grip-solid-vertical {
    background-position: -32px -224px;
  }
  .ui-icon-grip-solid-horizontal {
    background-position: -48px -224px;
  }
  .ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px;
  }
  .ui-icon-grip-diagonal-se {
    background-position: -80px -224px;
  }
  /* Misc visuals
  ----------------------------------*/
  /* Corner radius */
  .ui-corner-all,
  .ui-corner-top,
  .ui-corner-left,
  .ui-corner-tl {
    border-top-left-radius: 4px;
  }
  .ui-corner-all,
  .ui-corner-top,
  .ui-corner-right,
  .ui-corner-tr {
    border-top-right-radius: 4px;
  }
  .ui-corner-all,
  .ui-corner-bottom,
  .ui-corner-left,
  .ui-corner-bl {
    border-bottom-left-radius: 4px;
  }
  .ui-corner-all,
  .ui-corner-bottom,
  .ui-corner-right,
  .ui-corner-br {
    border-bottom-right-radius: 4px;
  }
  /* Overlays */
  .ui-widget-overlay {
    background-color: var(--color-base-100);
    opacity: 0.3;
    filter: Alpha(Opacity=30); /* support: IE8 */
  }
  .ui-widget-shadow {
    -webkit-box-shadow: -8px -8px 8px var(--color-base-100);
    box-shadow: -8px -8px 8px var(--color-base-100);
  }
}
/*------------------------------------*\
	jQuery UI
\*------------------------------------*/
@layer overrides {
  .ui-paging-info {
    color: var(--color-base-500);
  }
  .ui-jqgrid .ui-jqgrid-hdiv {
    border-bottom: 1px solid var(--color-base-300);
  }
  .ui-state-placeholder,
  .ui-widget-content .ui-state-placeholder {
    width: 298px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0;
    height: 152px;
    margin-bottom: 10px !important;
    display: block;
  }
  .ui-widget button.ui-datepicker-trigger,
  .ui-datepicker-trigger {
    display: inline-block;
    cursor: pointer;
    font-size: 12px;
    padding: 9.5px 10px;
    border-radius: 0 4px 4px 0;
    border: 1px solid var(--color-base-300);
    font-size: 12px;
    font-weight: bold;
    color: var(--color-text);
    margin-left: -5px;
    background-color: var(--color-base-300);
  }
  .ui-widget button.ui-datepicker-trigger::before,
  .ui-datepicker-trigger::before {
    font-family: var(--font-icon);
    content: "\f073";
  }
  .ui-widget button.ui-datepicker-trigger:hover,
  .ui-datepicker-trigger:hover {
    border: 1px solid var(--color-base-400);
    background-color: var(--color-base-400);
  }
  .ui-pager-control .ui-state-hover {
    background: none;
    border: none;
  }
  .ui-pager-control .ui-icon {
    background: none;
    text-indent: 0;
    color: var(--color-base-700);
  }
  .ui-pager-control .ui-icon:before {
    font-family: var(--font-icon);
  }
  .ui-pager-control .ui-state-hover .ui-icon {
    color: var(--color-primary);
  }
  .ui-pager-control .ui-icon-seek-first:before {
    content: "\f33e";
  }
  .ui-pager-control .ui-icon-seek-prev:before {
    content: "\f060";
  }
  .ui-pager-control .ui-icon-seek-next:before {
    content: "\f061";
  }
  .ui-pager-control .ui-icon-seek-end:before {
    content: "\f340";
  }
  .ui-pager-control .ui-pg-input {
    text-align: center;
  }
  .ui-pager-control .ui-pg-input[type=text] {
    padding: 3px 6px;
  }
  .ui-multiselect {
    border: 1px solid var(--color-base-300);
  }
  .ui-multiselect div.available {
    border-left: 1px solid var(--color-base-300);
  }
  .ui-multiselect ul.selected,
  .ui-multiselect ul.available {
    background-color: var(--color-layout-cardbackground);
  }
}
@layer defaults {
  main {
    margin-top: 2.5rem;
  }
  .wrapper {
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    max-width: 1000px;
    min-width: 1000px;
  }
  .wrapper--full {
    max-width: 1240px;
    min-width: 1000px;
  }
  .wrapper--wide {
    max-width: 1240px;
    min-width: 1000px;
  }
  .wrapper--small {
    max-width: 640px;
    min-width: 640px;
  }
  .responsive .wrapper {
    width: 100%;
    min-width: 0;
    max-width: 1280px;
    padding: 0 24px;
  }
  .responsive .wrapper--small {
    max-width: 768px;
  }
  @media (min-width: 1024px) {
    .responsive .wrapper--full {
      max-width: 100%;
    }
  }
  .flex {
    display: flex;
  }
  .flex--between {
    justify-content: space-between;
  }
  .flex--evenly {
    justify-content: space-evenly;
  }
  .flex--center {
    align-items: center;
  }
  .flex--start {
    align-items: flex-end;
  }
  .flex--end {
    justify-content: end;
  }
  .flex--column {
    flex-direction: column;
  }
  .flex--flexible {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
  }
  .flex--gap {
    gap: 4px;
  }
  .flex--gap2 {
    gap: 8px;
  }
  .flex--wrap {
    flex-wrap: wrap;
  }
  .panelshadow {
    box-shadow: var(--shadow-box-y);
  }
  .defaultshadow {
    box-shadow: var(--shadow-box-xy);
  }
  .card {
    box-shadow: var(--shadow-box-xy);
    background-color: var(--color-layout-cardbackground);
    border-radius: 4px;
    overflow: hidden;
  }
  .card--padding {
    padding: 20px;
  }
  .card__header {
    padding: 12px 24px;
    border-bottom: 1px solid var(--color-base-300);
  }
  .grid {
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 24px;
  }
  .grid--two-thirds {
    grid-column: auto/span 8;
  }
  .grid--one-third {
    grid-column: auto/span 4;
  }
  .grid--half {
    grid-column: auto/span 6;
  }
  .grid--three-fourths {
    grid-column: auto/span 9;
  }
  .grid--one-fourth {
    grid-column: auto/span 3;
  }
  .grid--no-padding {
    padding: 0;
  }
  @media (max-width: 640px) {
    .hide-on--sm {
      display: none;
    }
  }
}
/*------------------------------------*\
	Listtable
\*------------------------------------*/
@layer overrides {
  .listtable {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 0.8125rem;
  }
  .listtable th {
    text-align: left;
    padding: 5px;
    padding-top: 16px;
    padding-bottom: 16px;
    background-color: var(--color-layout-sidebarbackground);
  }
  .listtable tr {
    border-top: 1px solid var(--color-base-300);
    border-bottom: 1px solid var(--color-base-300);
    width: 100%;
  }
  .listtable tr.doubleheight td {
    padding: 12px 0;
  }
  .listtable td {
    padding: 12px 5px !important;
  }
  .listtable td.overflow {
    max-width: 455px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .listtable td.subheader {
    font-size: 11px;
    background: var(--color-base-300);
    font-weight: bold;
  }
  .listtable img {
    margin: 0 0 !important;
  }
  .listtable a.btn-icon {
    display: inline-block;
  }
  .listtable input[type=text] {
    width: 96%;
  }
  .listtable tr.selected td {
    background-color: var(--color-primary-100);
  }
  .listtable td.completed {
    color: var(--color-text-dimmed);
  }
  .listtable tr.has-link td {
    background-color: transparent;
  }
  .listtable.subheader th {
    background: none;
    background-color: var(--color-base-300);
  }
  .listtable div.error,
  .listtable div.unavailable,
  .listtable div.t_error,
  .listtable div.t_unavailable {
    float: left;
    border: 1px solid var(--color-util-error);
    background-color: var(--color-util-error-bg);
    padding: 3px 3px;
    border-radius: 2px;
    font-size: 12px;
    text-align: center;
  }
  .listtable div.checking {
    cursor: pointer;
  }
  .listtable tr.exemption-active {
    color: var(--color-base-400) !important;
  }
  .listtable-filter-container {
    display: flex;
    gap: 12px;
    justify-content: end;
    margin-bottom: 10px;
    align-items: center;
  }
  .listtable-filter-container div {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .listtable-filter {
    border: 1px solid var(--color-base-300);
    border-radius: 4px;
    padding: 3px 6px;
  }
  .transaction-amount {
    padding: 1px 5px;
  }
  .transaction-amount.plus {
    background-color: var(--color-base-100);
    border-radius: 3px;
  }
  .listtable__divider {
    font-weight: bold;
  }
}
/*------------------------------------*\
	Lust user
\*------------------------------------*/
@layer defaults {
  .list-user {
    position: relative;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .list-user img {
    margin: 0;
  }
  .list-user .user-fullname {
    font-weight: bold;
    display: inline-block;
    width: 64%;
    position: relative;
  }
  .list-user .user-presence {
    font-size: 12px;
    top: 18px;
    display: inline-block;
    width: 50%;
  }
  .list-user .user-presence.green {
    color: var(--color-green-500);
  }
  .list-user .user-presence.red {
    color: var(--color-red-500);
  }
  .list-user .user-usergroup {
    font-size: 12px;
    display: inline-block;
    width: 64%;
    position: relative;
    top: auto;
  }
  .list-user .user-team {
    font-size: 12px;
    display: inline-block;
    width: 64%;
    position: relative;
    top: auto;
  }
  .list-user .user-notification {
    position: absolute;
    font-size: 12px;
    top: 33px;
    color: var(--color-red-500);
  }
  .list-user .button {
    float: right;
  }
  .list-user .icon-placeholder {
    float: right;
    padding: 5px;
    width: 15px;
    height: 15px;
  }
  .list-user .icon-placeholder .ui-icon {
    background-image: url(/images/ui-icons_cd0a0a_256x240.png);
  }
  .list-user .user-info {
    width: 80%;
    display: inline-block;
    margin-left: 5px;
  }
  .list-user .user-motivation {
    position: absolute;
    font-size: 12px;
    top: 48px;
  }
  .list-user .user-remarks {
    width: 80px;
    display: block;
    float: left;
    font-size: 11px;
    color: var(--color-red-500);
    text-align: center;
  }
  .list-user-motivation {
    margin-left: 58px;
    font-size: 12px;
    margin-bottom: 10px;
  }
  .list-user-details {
    margin-bottom: 5px;
  }
  .list-user-details .advise {
    font-size: 13px;
  }
  .list-item {
    position: relative;
    margin-bottom: 4px;
    height: 60px;
    clear: both;
  }
  .list-item .list-title {
    position: absolute;
    font-weight: bold;
  }
  .list-item .switch {
    float: right;
  }
  .list-item .button {
    float: right;
  }
  .list-item .add-participant-detail {
    float: right;
    width: 100px;
  }
  div.list-user-absence-note {
    margin-bottom: 15px;
  }
}
/*------------------------------------*\
	Master Detail
\*------------------------------------*/
@layer defaults {
  .outer-wrap {
    overflow-x: hidden;
    position: relative;
    width: 650px;
  }
  .middle-wrap {
    position: relative;
    width: 1305px;
    left: 0;
  }
  .inner-wrap {
    display: inline-block;
    width: 649px;
    vertical-align: top;
    min-height: 300px;
  }
  tr.go-to-detail:hover {
    background-color: var(--color-base-100);
  }
  tr.go-to-detail:hover td, tr.go-to-detail:hover td a {
    cursor: pointer;
    color: var(--color-text-vibrant);
  }
  tr.go-to-detail.improvement:hover td, tr.go-to-detail.improvement:hover td a {
    background-color: var(--color-label-improvement);
  }
  tr.go-to-detail.complaint:hover td, tr.go-to-detail.complaint:hover td a {
    background-color: var(--color-label-complaint);
  }
  tr.go-to-detail.calamity:hover td, tr.go-to-detail.calamity:hover td a {
    background-color: var(--color-label-calamity);
  }
  tr.go-to-detail.aggression:hover td, tr.go-to-detail.aggression:hover td a {
    background-color: var(--color-label-aggression);
  }
  tr.go-to-detail.homesafe:hover td, tr.go-to-detail.homesafe:hover td a {
    background-color: var(--color-label-homesafe);
  }
  tr.go-to-detail.dataleak:hover td, tr.go-to-detail.dataleak:hover td a {
    background-color: var(--color-label-dataleak);
  }
  tr.go-to-detail.vim:hover td, tr.go-to-detail.vim:hover td a {
    background-color: var(--color-label-vim);
  }
  tr.go-to-detail.inquiry:hover td, tr.go-to-detail.inquiry:hover td a {
    background-color: var(--color-label-inquiry);
  }
  tr.go-to-detail.improvementproposal:hover td, tr.go-to-detail.improvementproposal:hover td a {
    background-color: var(--color-label-improvementproposal);
  }
  tr.go-to-detail.audit:hover td, tr.go-to-detail.audit:hover td a {
    background-color: var(--color-label-audit);
  }
  div.master-detail-navigation {
    margin-bottom: 15px;
    border-bottom: 4px solid var(--color-primary);
    padding-bottom: 15px;
  }
  div.master-detail-navigation.master-detail-navigation-improvement {
    border-bottom: 4px solid var(--color-label-improvement);
  }
  div.master-detail-navigation.master-detail-navigation-complaint {
    border-bottom: 4px solid var(--color-label-complaint);
  }
  div.master-detail-navigation.master-detail-navigation-calamity {
    border-bottom: 4px solid var(--color-label-calamity);
  }
  div.master-detail-navigation.master-detail-navigation-aggression {
    border-bottom: 4px solid var(--color-label-aggression);
  }
  div.master-detail-navigation.master-detail-navigation-homesafe {
    border-bottom: 4px solid var(--color-label-homesafe);
  }
  div.master-detail-navigation.master-detail-navigation-dataleak {
    border-bottom: 4px solid var(--color-label-dataleak);
  }
  div.master-detail-navigation.master-detail-navigation-vim {
    border-bottom: 4px solid var(--color-label-vim);
  }
  div.master-detail-navigation.master-detail-navigation-inquiry {
    border-bottom: 4px solid var(--color-label-inquiry);
  }
  div.master-detail-navigation.master-detail-navigation-improvementproposal {
    border-bottom: 4px solid var(--color-label-improvementproposal);
  }
  div.master-detail-navigation.master-detail-navigation-audit {
    border-bottom: 4px solid var(--color-label-audit);
  }
}
/*------------------------------------*\
	Matrix table
\*------------------------------------*/
@layer defaults {
  .matrixtable {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
  }
  .matrixtable tr {
    background-color: var(--color-layout-cardbackground);
  }
  .matrixtable tr th {
    text-align: center;
    padding: 6px;
    vertical-align: top;
    border-radius: 10px 10px 0 0;
  }
  .matrixtable tr th:first-child {
    text-align: left;
    background-color: transparent !important;
    padding-left: 0;
  }
  .matrixtable tr td {
    padding: 6px;
    vertical-align: top;
    width: 60px;
    text-align: center;
  }
  .matrixtable tr td:first-child {
    width: auto;
    text-align: left;
    background-color: transparent !important;
    padding-left: 0;
  }
  .matrixtable tr td label {
    color: var(--color-text);
    padding-top: 2px;
    display: inline-block;
  }
  .matrixtable tr th:nth-child(odd),
  .matrixtable tr td:nth-child(odd) {
    background-color: var(--color-base-200);
  }
  .matrixtable tr th:nth-child(even),
  .matrixtable tr td:nth-child(even) {
    background-color: var(--color-base-100);
  }
  .matrixtable tr:last-child td {
    border-radius: 0 0 10px 10px;
  }
  .matrixtable-legend {
    color: var(--color-text-dimmed);
    text-align: center;
    font-size: 11px;
    margin-top: 10px;
  }
}
/*------------------------------------*\
	Media
\*------------------------------------*/
@layer defaults {
  .audio-player-container {
    max-width: 100%;
    margin: 0 auto;
  }
  audio {
    width: 100%;
  }
}
/*------------------------------------*\
	Meta Note
\*------------------------------------*/
@layer defaults {
  div.meta-note-container {
    position: relative;
    margin-bottom: 20px;
  }
  div.meta-note-container:not(:last-of-type) {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-base-300);
  }
  div.meta-note-container a.meta-note-delete:link,
  div.meta-note-container a.meta-note-delete:visited {
    background: none !important;
    border: 1px solid var(--color-base-500) !important;
    color: var(--color-base-500) !important;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    position: absolute;
    top: 0;
    right: 8px;
    padding: 0;
  }
  div.meta-note-container a.meta-note-delete:link:hover,
  div.meta-note-container a.meta-note-delete:visited:hover {
    border-color: var(--color-base-700) !important;
    color: var(--color-base-700) !important;
  }
  blockquote.meta-note {
    position: relative;
    padding: 0 52px 0 0;
    margin: 0 0 8px 0;
  }
  blockquote.meta-note + p {
    color: var(--color-text-dimmed);
    font-style: italic;
  }
}
@layer defaults {
  .multi-radio-group input[type=radio] {
    position: absolute;
    visibility: hidden;
    display: none;
  }
  .multi-radio-group label {
    color: var(--color-base-700);
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    padding: 8px 12px;
    margin-right: -3px !important;
    margin-top: -1px !important;
    font-size: 13px;
  }
  .multi-radio-group input[type=radio]:checked + label {
    color: #fff;
    background: var(--color-coursefeedback-teacher);
  }
  .multi-radio-group input[type=radio].mark-checked-alternative + label {
    color: #fff;
    background: var(--color-coursefeedback-student);
  }
  .multi-radio-group input[type=radio].mark-checked-alternative:checked + label {
    color: #fff;
    background-image: linear-gradient(var(--color-coursefeedback-teacher), var(--color-coursefeedback-student));
  }
  .multi-radio-group label + input[type=radio] + label {
    border-left: solid 1px var(--color-base-300);
  }
  .multi-radio-group {
    border: solid 1px var(--color-base-300);
    display: inline-block;
    border-radius: 4px;
    overflow: hidden;
  }
  .multi-radio-group.error {
    border: solid 1px var(--color-util-error);
  }
  .multi-radio-group.error label + input[type=radio] + label {
    border-left: solid 1px var(--color-util-error);
  }
}
/*------------------------------------*\
	Options table
\*------------------------------------*/
@layer defaults {
  .optionstable {
    width: 104%;
  }
  .optionstable tr td:nth-child(1) {
    width: 350px;
  }
  .optionstable tr td:nth-child(2) {
    width: 30px;
  }
  .optionstable a.button-add-field-item {
    padding: 1px 12px;
    font-size: 16px;
  }
  .optionstable a.button-delete-field-item {
    padding: 3px 12px;
  }
}
/*------------------------------------*\
	Organisations
\*------------------------------------*/
@layer defaults {
  .organisation {
    width: -webkit-fill-available;
    border-bottom: 1px solid var(--color-base-300);
    padding: 20px;
    font-weight: bold;
  }
  .organisations-container ul li:hover,
  .organisations-container ul li label:hover {
    background-color: var(--color-layout-sidebarbackground);
    cursor: pointer;
  }
  .organisations-container ul li.active {
    background-color: var(--color-layout-sidebarbackground);
  }
  .list-column-container > ul {
    height: 472px;
    overflow-y: auto;
  }
  .list-column {
    width: 24.91%;
    height: 530px;
    float: left;
    border-right: 1px solid var(--color-base-300);
  }
  .list-column:nth-child(4) {
    border-right: 0;
  }
  .list-column ul li {
    list-style-type: none;
  }
  .list-column-header {
    font-weight: bold;
  }
  .list-column-header,
  ul.list-column-content li {
    border-bottom: 1px solid var(--color-base-300);
    position: relative;
  }
  .list-column-header {
    padding: 20px;
  }
  .list-column:first-child ul.list-column-content li {
    padding-left: 20px;
  }
  ul.list-column-content li {
    padding: 20px 20px 20px 55px;
  }
  ul.list-column-content li.user {
    padding: 29px 20px 28px 55px;
  }
  span.name {
    display: inline-block;
    width: 100%;
    font-weight: bold;
  }
  span.title {
    font-style: italic;
  }
  .list-column-content li i {
    position: absolute;
  }
  .list-column-content li i.fa-chevron-right {
    top: 33px;
    right: 20px;
  }
  /* pencil positioning general */
  .list-column-content li i.fa-pencil {
    top: 25px;
    left: 20px;
    padding: 5px;
    background-color: var(--color-base-200);
    border: 1px solid var(--color-base-300);
    border-radius: 3px;
  }
  .list-column-content li i.fa.fa-pencil:hover {
    background-color: var(--color-base-300);
  }
  /* pencil positioning users */
  .list-column-content li.user i.fa-pencil {
    top: 25px;
  }
}
/*------------------------------------*\
	Pager
\*------------------------------------*/
@layer overrides {
  /* Subscribe tiles interface with columns */
  .pager-element-container {
    background-color: var(--color-layout-sidebarbackground);
    width: 100%;
    margin-top: 20px;
    border-radius: 4px;
  }
  .pager-element-columns {
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 20px;
  }
  .pager-element-column {
    margin: 0 10px 0 0;
    padding-left: 10px;
    flex-basis: 20%;
  }
  .pager-element-container h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
  }
  .pager-element-container h4 {
    padding-bottom: 10px;
  }
  .pager-element-container .button {
    margin-top: 5px;
    border-radius: 5px;
    padding: 8px 10px 8px 10px;
    background-repeat: no-repeat;
    background-position: left, center;
  }
  .pager-element {
    float: left;
    width: 200px;
    min-height: 430px;
    overflow: hidden;
    background-color: var(--color-layout-cardbackground);
    margin: 5px 25px 20px 5px;
    border-radius: 4px;
    position: relative;
  }
  .pager-element:hover {
    background-color: var(--color-layout-sidebarbackground);
  }
  .pager-element div,
  .pager-element p {
    padding: 0 10px;
  }
  .pager-element .packagesessions-title,
  .pager-element .news-title,
  .pager-element .group-title {
    padding: 10px;
    margin-bottom: 5px;
  }
  .pager-element .packagesessions-title h3,
  .pager-element .news-title h3,
  .pager-element .group-title h3 {
    font-size: 0.875rem;
  }
  .pager-element .packagesessions-title span.packagesessions-meta,
  .pager-element .packagesessions-title span.news-meta,
  .pager-element .packagesessions-title span.group-meta,
  .pager-element .news-title span.packagesessions-meta,
  .pager-element .news-title span.news-meta,
  .pager-element .news-title span.group-meta,
  .pager-element .group-title span.packagesessions-meta,
  .pager-element .group-title span.news-meta,
  .pager-element .group-title span.group-meta {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
  }
  .pager-element .packagesessions-title span.news-meta,
  .pager-element .packagesessions-title span.group-meta,
  .pager-element .news-title span.news-meta,
  .pager-element .news-title span.group-meta,
  .pager-element .group-title span.news-meta,
  .pager-element .group-title span.group-meta {
    color: var(--color-text-dimmed);
  }
  .pager-element .date {
    color: var(--color-base-500);
    font-style: italic;
  }
  .packagesessions-container {
    padding: 10px;
  }
  .news-container {
    padding: 10px;
  }
  .news-archive-container {
    padding: 15px 0 0 30px;
  }
  .ui-pg-input {
    text-align: center;
  }
}
@layer defaults {
  @media print {
    html,
    body {
      background: none;
    }
    #header-menu-container,
    #header-login,
    #dropover,
    .ui-tabs-nav,
    .back.button,
    .meta-info,
    .button,
    .mainnav,
    .usermenu,
    .site-preheader,
    #footer,
    .footer {
      display: none !important;
    }
    .noprint,
    .no-print *,
    #non-printable,
    .non-printable {
      display: none;
    }
    input[type=text].noprint,
    input[type=submit],
    input[type=button].print {
      display: none;
    }
    div#header {
      border-top: 0 solid #fce6aa;
      border-bottom: 0 solid #dbdbdb;
    }
    div#header-logo > a > img {
      width: 50% !important;
      height: auto !important;
    }
    #printable,
    .printable {
      display: block !important;
    }
    #info ui-tabs-panel ui-widget-content ui-corner-bottom {
      float: left;
      width: 100%;
    }
    select {
      background: transparent !important;
      padding: 10px 0 0 !important;
      border: 0 !important;
      color: #222 !important;
      -webkit-appearance: none !important;
    }
    .site-header__logo {
      border-right: none !important;
    }
    .card,
    .tabs,
    #tabs {
      box-shadow: none !important;
    }
    .card {
      border: 1px solid #ccc;
    }
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
  }
}
/*------------------------------------*\
	Redactor
\*------------------------------------*/
@layer overrides {
  .redactor-styles {
    font-family: inherit;
    line-height: 1.4;
  }
  .redactor_editor div,
  .redactor_editor p,
  .redactor_editor ul,
  .redactor_editor ol,
  .redactor_editor table,
  .redactor_editor dl,
  .redactor_editor blockquote,
  .redactor_editor pre,
  .redactor_editor h1,
  .redactor_editor h2,
  .redactor_editor h3,
  .redactor_editor h4,
  .redactor_editor h5,
  .redactor_editor h6 {
    font-family: var(--font-body);
  }
  .redactor_editor h1,
  .redactor_editor h2,
  .redactor_editor h3,
  .redactor_editor h4,
  .redactor_editor h5,
  .redactor_editor h6 {
    margin-top: 0 !important;
    padding: 0 !important;
    background: none;
    font-weight: bold;
    color: var(--color-text);
  }
  .redactor_editor h1 {
    font-size: 30px !important;
  }
  .redactor_editor h2 {
    font-size: 19px !important;
  }
  .redactor_editor h3 {
    font-size: 17px !important;
  }
  .redactor_editor h4 {
    font-size: 14px !important;
  }
  .redactor_editor h5 {
    font-size: 11px !important;
  }
  .redactor_editor h6 {
    font-size: 0.8em !important;
    line-height: 1.6em !important;
    text-transform: uppercase;
    margin-bottom: 0.3em !important;
  }
  .redactor-box.redactor-styles-on {
    background-color: var(--color-redactor-background);
    border: 1px solid var(--color-redactor-border);
  }
  .redactor-box.redactor-styles-on .redactor-toolbar {
    background-color: var(--color-redactor-toolbar-bg);
    padding: 18px 16px 16px 16px;
  }
  .redactor-box.redactor-styles-on .redactor-toolbar a {
    background-color: var(--color-redactor-button-bg);
    color: var(--color-text);
  }
  .redactor-dropdown {
    background-color: var(--color-redactor-toolbar-bg);
  }
  .redactor-dropdown a {
    border-bottom: 1px solid var(--color-redactor-border);
  }
  .redactor-dropdown a.redactor-dropdown-item-disabled {
    background-color: var(--color-redactor-toolbar-bg);
    color: var(--color-text-faded);
  }
  .redactor-dropdown .redactor-dropdown-item-blockquote {
    color: var(--color-text);
  }
  .redactor-styles {
    color: var(--color-text);
  }
  .redactor-styles figure img {
    float: none;
  }
  .redactor-styles h1,
  .redactor-styles h2,
  .redactor-styles h3,
  .redactor-styles h4,
  .redactor-styles h5,
  .redactor-styles h6 {
    color: var(--color-text-vibrant);
  }
  .redactor-styles a:not(a.button) {
    color: var(--color-primary);
    text-decoration: underline;
  }
  .redactor-styles a:not(a.button):hover {
    color: var(--color-primary-700);
  }
  .redactor-context-toolbar a:link,
  .redactor-context-toolbar a:visited {
    color: var(--color-base-300);
  }
  .redactor-context-toolbar a:link:hover,
  .redactor-context-toolbar a:visited:hover {
    color: var(--color-redactor-background);
  }
  .redactor-modal-box .redactor-modal {
    background-color: var(--color-redactor-background);
  }
  .redactor-modal-box .redactor-modal-header {
    color: var(--color-text);
  }
  .redactor-modal-box .redactor-close {
    color: var(--color-text);
  }
  .redactor-modal-box .form-item label {
    color: var(--color-text);
  }
  .redactor-modal-box .form-item input {
    background-color: var(--color-form-background);
    border: 1px solid var(--color-form-border);
  }
  .redactor-modal-box .form-item textarea {
    background-color: var(--color-form-background);
    border: 1px solid var(--color-form-border);
  }
  .redactor-modal-box button {
    color: var(--color-text);
    background-color: var(--color-redactor-button-bg);
    border: 2px solid var(--color-primary);
  }
  .upload-redactor-box {
    background-color: var(--color-redactor-background);
    border: 5px dashed var(--color-base-300);
    color: var(--color-text);
  }
  .upload-redactor-box .upload-redactor-placeholder {
    color: var(--color-text-faded);
  }
  .redactor-content div {
    border: 1px dashed var(--color-base-300) !important;
  }
  .redactor-content object,
  .redactor-content embed,
  .redactor-content video,
  .redactor-content img {
    max-width: 100%;
    width: auto;
  }
  .redactor-content video,
  .redactor-content img {
    height: auto;
  }
  .redactor-content div,
  .redactor-content p,
  .redactor-content ul,
  .redactor-content ol,
  .redactor-content table,
  .redactor-content dl,
  .redactor-content blockquote,
  .redactor-content pre {
    margin: 0;
    margin-bottom: 15px;
    border: none;
    background: none;
    box-shadow: none;
    line-height: 1.4;
    color: var(--color-text);
  }
  .redactor-content h2,
  .redactor-content h3,
  .redactor-content h4 {
    margin-bottom: 0.25em;
  }
  .redactor-content iframe,
  .redactor-content object,
  .redactor-content hr {
    margin-bottom: 15px;
  }
  .redactor-content ul,
  .redactor-content ol {
    padding-left: 2em;
  }
  .redactor-content ul ul,
  .redactor-content ol ol,
  .redactor-content ul ol,
  .redactor-content ol ul {
    margin: 2px;
    padding: 0;
    padding-left: 2em;
    border: none;
  }
  .redactor-content .redactor_placeholder {
    color: var(--color-text-dimmed) !important;
    display: block !important;
    margin-bottom: 10px !important;
  }
  .redactor-content a:not(.button) {
    color: var(--color-primary);
    text-decoration: underline;
  }
  .redactor-content a:not(.button):hover {
    color: var(--color-primary-700);
  }
  .redactor-styles a:not(a.button) redactor-styles a:not(a.button),
  .redactor-styles a:not(a.button) .redactor-content a:not(a.button),
  .redactor-content a:not(a.button) redactor-styles a:not(a.button),
  .redactor-content a:not(a.button) .redactor-content a:not(a.button) {
    position: relative;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-text);
    padding-bottom: 1px;
  }
  .redactor-styles a:not(a.button) a:after,
  .redactor-content a:not(a.button) a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid var(--color-text);
    transition: 0.1s;
    color: var(--color-text);
  }
  .redactor-styles a:not(a.button) a:hover,
  .redactor-content a:not(a.button) a:hover {
    color: var(--color-text);
    cursor: pointer;
  }
  .redactor-styles a:not(a.button) a:hover:after,
  .redactor-content a:not(a.button) a:hover:after {
    width: 100%;
    color: var(--color-text);
  }
  .redactor-styles table,
  .redactor-content table {
    border-collapse: collapse;
    font-size: 1em;
    width: 100%;
    margin-top: 10px;
  }
  .redactor-styles table th,
  .redactor-styles table td,
  .redactor-content table th,
  .redactor-content table td {
    padding: 5px;
    border: 1px solid var(--color-base-300);
    vertical-align: top;
  }
  .redactor-styles table th,
  .redactor-content table th {
    padding: 10px 0 0 0;
  }
  .redactor-styles table td,
  .redactor-content table td {
    padding: 10px;
  }
  .redactor-styles table thead th,
  .redactor-content table thead th {
    font-weight: bold;
    text-align: center;
    border-color: var(--color-redactor-border);
  }
  .redactor-styles table thead td,
  .redactor-content table thead td {
    border-bottom: 2px solid var(-color-redactor-border);
    font-weight: bold;
  }
  .redactor-styles code,
  .redactor-content code {
    background-color: var(--color-base-300);
    color: var(--color-text);
  }
  .redactor-styles pre,
  .redactor-content pre {
    overflow: auto;
    padding: 1em;
    border: 1px solid var(--color-base-300);
    border-radius: 3px;
    background: var(--color-base-300);
    white-space: pre;
    font-size: 90%;
    color: var(--color-text);
  }
  .redactor-styles hr,
  .redactor-content hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--color-base-300);
  }
  .redactor-styles dl dt,
  .redactor-content dl dt {
    font-weight: bold;
  }
  .redactor-styles dd,
  .redactor-content dd {
    margin-left: 1em;
  }
  .redactor-styles kbd,
  .redactor-content kbd {
    border-color: var(--color-base-300);
    color: var(--color-text);
  }
  .redactor-styles var,
  .redactor-content var {
    color: var(--color-text-dimmed);
  }
  .redactor-styles blockquote,
  .redactor-content blockquote {
    margin-left: 1.5em !important;
    padding-left: 0;
    font-style: italic;
    color: var(--color-text);
  }
  div.redactor-box.error {
    background-color: var(--color-util-error-bg) !important;
    border: 1px solid var(--color-util-error) !important;
  }
}
/*------------------------------------*\
	Risk matrix
\*------------------------------------*/
@layer defaults {
  table.riskmatrix {
    border: 2px solid var(--color-layout-cardbackground);
  }
  table.riskmatrix td {
    text-align: center;
  }
  table.riskmatrix td.data {
    cursor: pointer;
  }
  table.riskmatrix td.data-head {
    background-color: var(--color-riskmatrix-head-bg);
    border: 1px solid var(--color-riskmatrix-head-bg);
    color: var(--color-riskmatrix-head-text);
  }
  table.riskmatrix td.data0 {
    border: 3px solid var(--color-riskmatrix-0-bg);
    background-color: var(--color-riskmatrix-0-bg);
    color: var(--color-riskmatrix-0-text);
  }
  table.riskmatrix td.data1 {
    border: 3px solid var(--color-riskmatrix-1-bg);
    background-color: var(--color-riskmatrix-1-bg);
    color: var(--color-riskmatrix-1-text);
  }
  table.riskmatrix td.data2 {
    border: 3px solid var(--color-riskmatrix-2-bg);
    background-color: var(--color-riskmatrix-2-bg);
    color: var(--color-riskmatrix-2-text);
  }
  table.riskmatrix td.data3 {
    border: 3px solid var(--color-riskmatrix-3-bg);
    background-color: var(--color-riskmatrix-3-bg);
    color: var(--color-riskmatrix-3-text);
  }
  table.riskmatrix td.highlighted {
    border: 3px solid rgba(0, 0, 0, 0.5);
    font-weight: bold;
  }
  table.riskmatrix tr:first-child td {
    padding-top: 6px;
  }
  table.riskmatrix div.legenditem {
    float: left;
    margin-left: 12px;
  }
  table.riskmatrix div.legenddot {
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-layout-cardbackground);
    float: left;
    margin-right: 5px;
  }
  div.riskmatrix {
    background-color: var(--color-base-500);
  }
  div.riskmatrix div {
    text-align: center;
    width: 80px;
    float: left;
  }
  div.riskmatrix div.data0 {
    background-color: var(--color-riskmatrix-0-bg);
  }
  div.riskmatrix div.data1 {
    background-color: var(--color-riskmatrix-1-bg);
  }
  div.riskmatrix div.data2 {
    background-color: var(--color-riskmatrix-2-bg);
  }
  div.riskmatrix div.data3 {
    background-color: var(--color-riskmatrix-3-bg);
  }
}
/*------------------------------------*\
	ResponsiveSlides
\*------------------------------------*/
@layer overrides {
  .rslides_tabs {
    list-style: none;
    text-align: center;
    padding: 12px 12px 12px;
  }
  .rslides_tabs li {
    display: inline-block;
  }
  .rslides_tabs li a {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-base-300);
    text-indent: -9999px;
    border: 4px solid white;
  }
  .rslides_tabs li a:hover {
    background-color: var(--color-base-400);
  }
  .rslides_tabs li.rslides_here a {
    background-color: var(--color-primary);
  }
}
@layer overrides {
  .select2-container .select2-selection--single {
    height: auto;
  }
  .select2-container--default .select2-selection--single {
    background-color: var(--color-form-background);
    border: 1px solid var(--color-form-border);
    color: var(--color-text);
    border-radius: 4px;
    padding: 8px 8px;
    box-sizing: border-box;
  }
  .select2-container--default .select2-selection--multiple {
    background-color: var(--color-form-background);
    border-color: var(--color-form-border);
  }
  .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-form-border);
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-base-300);
    border-color: var(--color-base-400);
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal;
  }
  .select2-selection__arrow {
    top: 4px;
  }
  .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-form-border);
    padding: 8px 8px 8px 32px;
  }
  .select2-search--dropdown:before {
    content: "\f002";
    font-family: var(--font-icon);
    font-weight: 900;
    color: var(--color-base-500);
    position: absolute;
    top: 15px;
    left: 15px;
  }
  .select2-dropdown {
    background-color: var(--color-form-background);
    border: 1px solid var(--color-form-border);
    color: var(--color-text);
    border-radius: 4px;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: transparent;
    border-style: solid;
    border-width: 0;
    height: auto;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: 10px;
    width: 0;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow b:after {
    font-family: var(--font-icon);
    content: "\f107";
    font-weight: 900;
  }
  .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border: none;
  }
  .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary);
  }
}
@layer defaults {
  .site-preheader {
    background-color: var(--color-primary);
    min-height: 12px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 700;
  }
  body:not(.responsive) .site-header .wrapper {
    max-width: 1280px;
    min-width: 1000px;
    padding: 0 24px;
  }
  .site-header {
    box-shadow: var(--shadow-box-y);
    background-color: var(--color-layout-cardbackground);
    position: relative;
    margin-bottom: 2.5rem;
    z-index: 800;
    padding: 16px 0;
    min-width: fit-content;
    border-top: 12px solid var(--color-primary);
  }
  .site-header__logo {
    margin-right: 20px;
    padding-right: 28px;
    border-right: 1px solid var(--color-base-300);
    user-select: none;
  }
  .site-header__logo svg {
    max-height: 40px;
    width: auto;
  }
  .site-header__logo img {
    height: 40px;
  }
  .site-client__logo {
    text-align: right;
  }
  .site-client__logo img {
    max-width: 80%;
    max-height: 56px;
  }
  .navlist--overflow .hidden {
    display: none;
  }
  .navlist--overflow .subNav .subNav__header-toggle {
    display: none;
  }
  .navlist--overflow .subNav .collapsed .subNav__list {
    height: auto;
    overflow: auto;
  }
  .navlist--apps .subNav .subNav__list li a {
    display: grid;
    grid-template-columns: 72px 1fr;
  }
  @media screen and (min-width: 480px) {
    .navlist--apps .subNav .subNav__list li a {
      display: flex;
    }
  }
  .navlist--apps .subNav .subNav__list li a span {
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .navlist--apps .subNav .subNav__list li a span:before {
    content: ":  ";
  }
  .navlist--apps .subNav .subNav__list--remote li a span {
    margin-top: 0;
  }
  .navlist--apps .subNav .subNav__list--remote li a span:before {
    content: "";
  }
  .mainnav {
    display: flex;
    gap: 4px;
  }
  .navlist {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .navlist li {
    position: relative;
  }
  .navlist .navlist__item {
    color: var(--color-text-default);
    font-size: 0.875rem;
    border: none;
    padding: 12px 8px;
    white-space: nowrap;
    background: none;
    border-radius: 4px;
    user-select: none;
    display: flex;
    align-items: center;
    position: relative;
    gap: 4px;
  }
  .navlist .navlist__item.hassubs:after {
    font-family: var(--font-icon);
    content: "\f107";
    font-weight: bold;
    font-size: 10px;
    margin-left: 4px;
    position: relative;
    bottom: 1px;
    color: var(--color-base-400);
    transition: transform 0.15s ease-in-out;
  }
  .navlist .navlist__item:hover {
    color: var(--color-primary-100);
    background-color: var(--color-primary);
    cursor: pointer;
  }
  .navlist .navlist__item:hover.hassubs:after {
    color: var(--color-primary-200);
  }
  .navlist .navlist__item.active {
    color: var(--color-primary-100);
    background-color: var(--color-primary-700);
  }
  .navlist .navlist__item.active.hassubs:after {
    color: var(--color-primary-300);
    transform: rotate(-180deg);
  }
  .navlist .navlist__item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary);
  }
  .subNav {
    background-color: var(--color-layout-cardbackground);
    box-shadow: var(--shadow-box-xy);
    border: 1px solid var(--color-base-100);
    padding: 24px;
    position: fixed;
    display: none;
    top: calc(100% + 8px);
    border-radius: 0;
    overflow-y: auto;
    top: 0;
    width: 80%;
    left: 0;
    height: 100%;
    z-index: 10;
  }
  @media screen and (min-width: 480px) {
    .subNav {
      position: absolute;
      top: 49px;
      padding: 12px;
      max-height: calc(100vh - 120px);
      height: auto;
      border-radius: 4px;
      width: auto;
    }
  }
  .subNav .subNav__header-toggle {
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-base-500);
    font-size: 0.6875rem;
    padding: 8px 0;
    width: 100%;
    display: block;
    user-select: none;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
  }
  .subNav .subNav__header-toggle:after {
    font-family: var(--font-icon);
    content: "\f107";
    font-weight: bold;
    font-size: 10px;
    margin-left: 4px;
    position: relative;
    bottom: 1px;
    color: var(--color-base-400);
    transition: transform 0.2s ease-in-out;
    display: inline-block;
  }
  .subNav .collapsed .subNav__header-toggle:after {
    transform: rotate(-180deg);
  }
  .subNav .collapsed .subNav__list {
    height: 0;
    overflow: hidden;
  }
  .subNav .subNav__list {
    list-style: none;
    display: grid;
    padding: 0;
    margin: 0;
  }
  .subNav .subNav__list li a {
    color: var(--color-base-700);
    font-size: 0.875rem;
    border: none;
    padding: 12px 12px;
    white-space: nowrap;
    background: none;
    border-radius: 4px;
    user-select: none;
    display: flex;
    align-items: center;
    position: relative;
    gap: 6px;
  }
  .subNav .subNav__list li a:hover {
    background-color: var(--color-base-100);
  }
  .subNav .subNav__badge {
    font-size: 10px;
    font-weight: 500;
    background: var(--color-orange-500);
    border-radius: 4px;
    color: white;
    padding: 2px;
  }
  .subNav .subNav__applogo {
    max-height: 32px;
    width: 72px;
    object-position: left;
    object-fit: contain;
  }
  .subNav .subNav__applogo svg {
    max-height: 32px;
    width: auto;
  }
  .subNav i {
    color: var(--color-primary);
  }
  .subNav i.fa-sky-homesafe {
    color: var(--color-label-homesafe);
  }
  .subNav i.fa-sky-aggression {
    color: var(--color-label-aggression);
  }
  .subNav i.fa-sky-calamity {
    color: var(--color-label-calamity);
  }
  .subNav i.fa-sky-dataincident {
    color: var(--color-label-dataleak);
  }
  .subNav i.fa-sky-audit {
    color: var(--color-label-audit);
  }
  .subNav i.fa-sky-complaint {
    color: var(--color-label-complaint);
  }
  .subNav i.fa-sky-vim {
    color: var(--color-label-vim);
  }
  .subNav i.fa-sky-inquiry {
    color: var(--color-label-inquiry);
  }
  .subNav i.fa-sky-improvementproposal {
    color: var(--color-label-improvementproposal);
  }
  .usermenu {
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 0.875rem;
  }
  .usermenu ul {
    list-style: none;
  }
  .usermenu ul li {
    white-space: nowrap;
  }
  .usermenu__avatar {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 10px;
    border: 4px solid var(--color-layout-cardbackground);
    position: relative;
  }
  .usermenu__avatar img {
    max-width: 100%;
    height: auto;
  }
  .usermenu__avatar:hover {
    cursor: pointer;
  }
  .usermenu__avatar:hover img {
    filter: brightness(0.8);
  }
  .usermenu__notificationdot {
    width: 12px;
    height: 12px;
    position: absolute;
    border-radius: 50%;
    bottom: 0;
    right: 0;
    border: 2px solid var(--color-layout-cardbackground);
    background-color: var(--color-util-warning);
  }
  .usermenu__trustedlabel {
    color: var(--color-primary);
    position: absolute;
    font-size: 0.625rem;
    top: 14px;
    right: 52px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 10;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid var(--color-primary);
  }
  .usermenu__nav {
    box-shadow: var(--shadow-box-xy);
    border: 1px solid var(--color-base-100);
    border-radius: 4px;
    padding: 0 8px;
    background-color: var(--color-layout-cardbackground);
    position: absolute;
    display: none;
    flex-direction: column;
    right: 0;
    top: 53px;
    padding: 8px;
  }
  .usermenu__nav li {
    margin-right: 0;
  }
  .usermenu__nav li:first-of-type {
    border-bottom: 1px solid var(--color-base-200);
    padding: 4px 12px 12px 8px;
    margin-bottom: 8px;
  }
  .usermenu__nav li a {
    cursor: pointer;
    display: flex;
    white-space: nowrap;
    border-radius: 4px;
    padding: 12px 12px 12px 8px;
    align-items: center;
    color: var(--color-base-700);
  }
  .usermenu__nav li a i {
    font-size: 16px;
    margin-right: 8px;
    width: 20px;
    text-align: center;
    color: var(--color-base-600);
  }
  .usermenu__nav li a img {
    margin-right: 4px;
  }
  .usermenu__nav li a:hover {
    background-color: var(--color-base-100);
  }
  .usermenu__nav li:hover a {
    color: var(--color-base-800);
  }
  .usermenu__nav li:hover a i {
    color: var(--color-primary);
  }
  .usermenu__badge {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    background: var(--color-util-warning);
    border-radius: 4px;
    color: white;
    padding: 2px;
    min-width: 8px;
    min-height: 8px;
    margin-left: 8px;
  }
  .usermenu .indicator {
    margin: 0 14px 0 6px;
  }
}
/*------------------------------------*\
	Sky search 2.0
\*------------------------------------*/
@layer defaults {
  .search-current-container {
    padding: 15px 0 0 30px;
  }
  .search-item {
    display: flex;
    flex-direction: row;
    padding: 5px 0;
    width: 100%;
    margin-top: 5px;
  }
  .search-item-title {
    display: inline-block;
    padding-left: 22px;
    font-weight: bold;
    font-size: var(--body-size-large);
  }
  .search-item-date {
    display: inline-block;
    font-size: var(--body-size-extrasmall);
    font-weight: bold;
    color: var(--color-text-dimmed);
  }
  .search-item-description {
    display: block;
    padding-left: 22px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
    margin: 7px 0;
  }
  .search-item-description p {
    line-height: 1.5em;
  }
  .search-item-meta {
    display: block;
    padding-left: 22px;
    padding-top: 0;
    padding-bottom: 10px;
    font-size: 12px;
    color: var(--color-text-dimmed);
  }
  .search-item-devider {
    display: inline-block;
    padding: 0 5px;
  }
  .search-item-error {
    margin: 30px;
  }
  .filters-chosen {
    display: none;
  }
  .filters {
    margin-top: 30px;
  }
  .filters ul {
    list-style: none;
  }
  .filters .filter {
    margin: 10px 0;
  }
  .filters .filter h3 {
    margin-bottom: 5px;
  }
  .filters .filter li {
    padding: 4px 0;
  }
  .filters .filter li input {
    margin-right: 4px;
  }
}
/*------------------------------------*\
	Small tabs
\*------------------------------------*/
@layer defaults {
  .small-tabs a {
    color: var(--color-base-500);
  }
  .small-tabs .active-tab a {
    color: var(--color-base-700);
  }
  .small-tabs div {
    display: none;
    background-color: var(--color-smalltabs-background);
    padding: 10px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
  }
  .small-tabs div.active-panel {
    display: block;
  }
  .small-tabs div tr td {
    background-color: var(--color-smalltabs-background);
  }
  .small-tabs ul {
    overflow: hidden;
    width: 100%;
  }
  .small-tabs ul li {
    display: block;
    float: left;
    padding: 6px 12px;
    background-color: var(--color-smalltabs-background);
    border-bottom: 3px solid var(--color-layout-cardbackground);
    margin-right: 3px;
  }
  .small-tabs ul li:first-child {
    border-top-left-radius: 4px;
  }
  .small-tabs ul li:last-child {
    border-top-right-radius: 4px;
  }
  .small-tabs ul li.active-tab {
    border-bottom: 3px solid var(--color-smalltabs-background);
    font-weight: bold;
  }
  .small-tabs ul li.disabled-tab a {
    color: var(--color-base-400);
    cursor: default;
  }
}
/*------------------------------------*\
	Subscribe button
\*------------------------------------*/
@layer defaults {
  .container-subscribe-button {
    margin-left: -35px;
  }
  .container-subscribe-button input {
    position: absolute;
    left: -9999px;
  }
  .container-subscribe-button label {
    display: block;
    position: relative;
    margin: 5px;
    padding: 5px 10px 5px 30px;
    border: 2px solid var(--color-layout-cardbackground);
    border-radius: 100px;
    color: white;
    background-color: var(--color-base-400);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, box-shadow 0.2s;
  }
  .container-subscribe-button label::before {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: 13px;
    border: 2px solid var(--color-layout-cardbackground);
    border-radius: 100px;
    transition: background-color 0.2s;
  }
  .container-subscribe-button label:first-of-type {
    transform: translateX(-20px);
  }
  .container-subscribe-button label:last-of-type {
    transform: translateX(20px);
  }
  .container-subscribe-button input:checked + label {
    background-color: var(--color-util-success);
  }
  .container-subscribe-button input:checked + label::before {
    background-color: #fff;
  }
}
/*------------------------------------*\
	Switch
\*------------------------------------*/
/* Switch! */
@layer defaults {
  .switch {
    display: flex;
  }
  .switch a {
    display: inline-block;
    padding: 4.5px 16px;
    background-color: var(--color-button-default-background);
    border: 1px solid var(--color-button-default-background);
    color: var(--color-button-default-text);
    font-size: 11px;
    min-width: 48px;
    text-align: center;
  }
  .switch a span {
    text-align: center;
    display: inline;
    width: 20px;
    height: 18px;
    background-color: var(--color-base-300);
    overflow: hidden;
  }
  .switch a span:before {
    display: block;
    font-family: var(--font-icon);
    font-size: 1rem;
    font-weight: 900;
  }
  .switch a:first-child {
    border-radius: 4px 0 0 4px;
  }
  .switch a:last-of-type {
    border-radius: 0 4px 4px 0;
  }
  .switch a:not(:last-of-type) {
    margin-right: 1px;
  }
  .switch a.disabled {
    background-color: var(--color-button-default-disabled-background);
    border-color: var(--color-button-default-disabled-background);
    color: var(--color-button-default-disabled-text);
  }
  .switch a.switch-on span:before {
    content: "\f00c";
  }
  .switch a.switch-on:not(.disabled).active, .switch a.switch-on:not(.disabled):active, .switch a.switch-on:not(.disabled):hover {
    background-color: var(--color-util-success);
    border-color: var(--color-util-success);
    color: white;
  }
  .switch a.switch-off span:before {
    content: "\f00d";
  }
  .switch a.switch-off:not(.disabled).active, .switch a.switch-off:not(.disabled):active, .switch a.switch-off:not(.disabled):hover {
    background: var(--color-util-error);
    border-color: var(--color-util-error);
    color: white;
  }
  .switch a.switch-does-not-apply span:before {
    content: "\f068";
  }
  .switch a.switch-does-not-apply:not(.disabled).active, .switch a.switch-does-not-apply:not(.disabled):active, .switch a.switch-does-not-apply:not(.disabled):hover {
    background: var(--color-button-default-hover-background);
    border-color: var(--color-button-default-hover-background);
    color: white;
  }
  .switch a.disabled {
    cursor: default;
  }
  .switch-neutral a:hover,
  .switch-neutral a:active,
  .switch-neutral a.active {
    background: var(--color-button-default-hover-background);
    color: var(--color-button-default-text);
  }
  .switch a.disabled.switch-on span.thumbs-up,
  .switch a.disabled.switch-on:hover span.thumbs-up,
  .switch a.disabled.switch-on:active span.thumbs-up,
  .switch a.disabled.switch-on.active span.thumbs-up {
    background: url(../images/icn_tick_disabled.png) no-repeat left bottom;
  }
  .switch a.disabled.switch-off span.thumbs-down,
  .switch a.disabled.switch-off:hover span.thumbs-down,
  .switch a.disabled.switch-off:active span.thumbs-down,
  .switch a.disabled.switch-off.active span.thumbs-down {
    background: url(../images/icn_cross_disabled.png) no-repeat left bottom;
  }
  .switch a.switch-on.disabled.active:hover,
  .switch a.switch-on.disabled.active:active {
    background: #9ab02a url(../images/bgd_buttonswitch_meta_hover.png) repeat-x 0 0;
  }
  .switch a.switch-off.disabled.active:hover,
  .switch a.switch-off.disabled.active:active {
    background: #9ab02a url(../images/bgd_buttonswitchoff_meta_hover.png) repeat-x 0 0;
  }
}
/*------------------------------------*\
	Tabs
\*------------------------------------*/
@layer defaults {
  div#tabs {
    display: none;
    padding: 0;
    overflow: hidden;
  }
  div#tabs.add-item li:first-of-type {
    opacity: 1;
  }
  #tabs > div {
    min-height: 300px;
    background-color: var(--color-layout-cardbackground);
    z-index: 10;
  }
  div#tabs > ul > li > a {
    position: relative;
  }
  #tabs {
    box-shadow: var(--shadow-box-xy);
    position: relative;
    border: none;
    z-index: 1;
    background-color: var(--color-layout-cardbackground);
  }
  #tabs .ui-tabs-nav {
    width: 235px;
    padding: 0;
    background-image: none;
    background-color: var(--color-layout-sidebarbackground);
    border: none;
    border-radius: 4px 0 0 4px;
    overflow: hidden;
    z-index: 5;
    flex-shrink: 0;
    flex-grow: 0;
  }
  #tabs .ui-tabs-nav li {
    width: 100%;
    margin: 0;
    border-right: none;
    overflow: hidden;
    border-radius: 0;
    border: none;
    background-image: none;
    margin-bottom: 0;
    background-color: var(--color-layout-sidebarbackground);
    border-color: var(--color-layout-sidebarbackground);
    border-left-width: 4px;
    border-left-style: solid;
    box-sizing: border-box;
    padding-bottom: 0;
    font-weight: 400;
  }
  #tabs .ui-tabs-nav li:hover {
    color: var(--color-text);
    background-color: var(--color-layout-cardbackground);
    border-color: var(--color-layout-cardbackground);
  }
  #tabs .ui-tabs-nav li:hover a {
    color: var(--color-text);
  }
  #tabs .ui-tabs-nav li.ui-tabs-selected, #tabs .ui-tabs-nav li.ui-tabs-active {
    z-index: 10;
    color: var(--color-text);
    width: 235px;
    background-color: var(--color-layout-cardbackground);
    overflow: visible;
    border-color: var(--color-primary);
  }
  #tabs .ui-tabs-nav li.ui-tabs-selected a:link,
  #tabs .ui-tabs-nav li.ui-tabs-selected a:visited, #tabs .ui-tabs-nav li.ui-tabs-active a:link,
  #tabs .ui-tabs-nav li.ui-tabs-active a:visited {
    color: var(--color-text);
  }
  #tabs .ui-tabs-nav li.menu-closer {
    border-top: 1px solid var(--color-base-300);
  }
  #tabs .ui-tabs-nav li.menu-social {
    border: 1px solid var(--color-base-300);
    border-bottom: 1px solid var(--color-base-300) !important;
    border-right: 0;
    color: var(--color-text-dimmed);
    font-weight: normal;
    margin-top: 15px;
    background-color: var(--color-layout-sidebarbackground);
  }
  #tabs .ui-tabs-nav li.menu-social div.content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 0.9em;
    padding: 0;
  }
  #tabs .ui-tabs-nav li.menu-social div.content.list-of-users {
    font-size: 0.9em;
    padding: 10px;
  }
  #tabs .ui-tabs-nav li a {
    width: 228px;
    color: var(--color-text);
    padding: 0.875rem 1.5rem;
  }
  #tabs .ui-tabs-nav li a.btn-social {
    width: auto;
    background: none;
    text-align: center;
    font-size: 13px;
    border-right: 1px solid var(--color-base-300);
    padding: 8px;
    cursor: pointer;
    flex: 0;
  }
  #tabs .ui-tabs-nav li a.btn-social img {
    margin-right: 2px;
  }
  #tabs .ui-tabs-nav li a.btn-social.btn-small {
    font-size: 10px;
    padding: 4px 8px;
    border-top: 1px solid var(--color-base-300);
  }
  #tabs .ui-tabs-nav li a.btn-social.btn-small.selected {
    background: var(--color-base-300);
  }
  #tabs .ui-tabs-nav li a.btn-social.last {
    border-right: 0;
  }
  #tabs .ui-tabs-nav li a.btn-social:hover {
    background-color: var(--color-base-300);
  }
  #tabs .ui-tabs-nav li a.btn-social i {
    margin-right: 8px;
  }
  #tabs .ui-tabs-nav li.meta {
    border: 1px solid var(--color-base-300);
    border-bottom: 1px solid var(--color-base-300) !important;
    border-right: 1px solid var(--color-base-300);
    color: var(--color-text-dimmed);
    font-weight: normal;
    margin-top: 15px;
    background-color: var(--color-layout-cardbackground);
  }
  #tabs .ui-tabs-nav li.meta h3 {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 10px;
    margin: 10px;
    font-size: 0.9em;
  }
  #tabs .ui-tabs-nav li.meta div.content {
    padding: 10px;
    font-size: 0.9em;
    border-top: 1px solid var(--color-base-300);
  }
  #tabs .ui-tabs-nav li.meta a.listitem {
    border-top: 1px solid var(--color-base-300);
    font-size: 0.9em;
    padding: 10px;
    float: none;
    background: none;
    width: 100%;
    height: 100%;
    display: block;
    color: var(--color-text);
  }
  #tabs .ui-tabs-nav li.meta a.listitem.highlight {
    background-color: var(--color-base-300);
  }
  #tabs .ui-tabs-nav li.meta a.listitem:hover {
    background-color: var(--color-base-300);
    cursor: pointer;
  }
  #tabs .ui-tabs-nav li.meta td.val {
    color: #13899a;
  }
  #tabs .ui-tabs-nav li.meta td.val {
    padding: 3px;
  }
  #tabs .ui-tabs-panel {
    min-height: 300px;
    width: 100%;
  }
  #tabs.tabs--horizontal {
    flex-direction: column;
    padding: 0;
    position: relative;
    padding-left: 0;
    border: none;
    z-index: 1;
    background-color: var(--color-layout-cardbackground);
  }
  #tabs.tabs--horizontal .ui-tabs-nav {
    position: relative;
    width: auto;
    border-radius: 4px 4px 0 0;
    margin-bottom: 12px;
  }
  #tabs.tabs--horizontal .ui-tabs-nav li {
    display: inline-block;
    width: auto;
    border-left: none;
    border-bottom-width: 4px;
    border-bottom-style: solid;
  }
  #tabs.tabs--horizontal .ui-tabs-nav li.ui-tabs-selected, #tabs.tabs--horizontal .ui-tabs-nav li.ui-tabs-active {
    z-index: 10;
  }
  #tabs.tabs--horizontal .ui-tabs-nav li a {
    width: 100%;
  }
  div#tabs #item-delete-button {
    position: absolute;
    left: -1px;
    bottom: -1px;
    z-index: 99;
    border-radius: 5px;
    height: 16px;
    font-weight: bold;
    border-color: var(--color-base-300);
    border-top-left-radius: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0;
    width: 189px;
  }
  span.tabcounter {
    float: right;
    background-color: var(--color-base-400);
    color: white;
    min-width: 20px;
    text-align: center;
    border-radius: 3px;
    font-size: 13px;
    min-height: 18px;
    line-height: 18px;
    margin-top: 1px;
  }
  @media screen and (max-width: 640px) {
    .responsive #tabs {
      flex-direction: column;
      padding: 0;
      position: relative;
      padding-left: 0;
      border: none;
      z-index: 1;
      background-color: var(--color-layout-cardbackground);
    }
    .responsive #tabs .ui-tabs-nav {
      position: relative;
      width: auto;
      border-radius: 4px 4px 0 0;
      margin-bottom: 12px;
    }
    .responsive #tabs .ui-tabs-nav li {
      display: inline-block;
      width: auto;
      border-left: none;
      border-bottom-width: 4px;
      border-bottom-style: solid;
    }
    .responsive #tabs .ui-tabs-nav li.ui-tabs-selected, .responsive #tabs .ui-tabs-nav li.ui-tabs-active {
      z-index: 10;
    }
    .responsive #tabs .ui-tabs-nav li a {
      width: 100%;
    }
  }
}
/*------------------------------------*\
	target audience 1.0 (?)
\*------------------------------------*/
@layer defaults {
  #target-audience-counter {
    margin-bottom: 20px;
  }
  #target-audience-button-bar {
    margin-bottom: 20px;
  }
  #target-audience-button-bar .button {
    border-radius: 5px;
  }
  #target-audience-button-save {
    margin-top: 20px;
  }
  #target-audience-button-save a.button.save {
    border-radius: 5px 5px 5px 5px;
    padding: 5px 17px;
    font-weight: bold;
  }
  label.target-audience-checkbox-label {
    cursor: pointer;
  }
  #target-audience-list {
    width: 400px;
  }
  #target-audience-list strong {
    font-size: 18px;
    display: block;
    margin-bottom: 6px;
  }
  div.list-audience {
    float: left;
    width: 206px;
  }
  div.list-audience.margin {
    margin-left: 20px;
  }
  div.list-audience ul {
    list-style: none;
    white-space: nowrap;
    padding-bottom: 12px;
  }
  div.list-audience ul li {
    position: relative;
    margin-top: 5px;
  }
  div.list-audience ul li img {
    vertical-align: middle;
  }
  div.list-audience-header {
    margin-bottom: 15px;
    font-weight: bold;
  }
  div.list-audience-scroll {
    width: 100%;
    border-top: 1px solid var(--color-base-300);
    margin-top: 5px;
  }
  div#target-audience2-counter {
    float: right;
  }
  label.target-audience2-checkbox-label {
    white-space: nowrap;
    position: relative;
    top: 2px;
    margin-left: 5px;
  }
  label.target-audience2-checkbox-label.clickable {
    cursor: pointer;
    text-decoration: underline;
  }
  img.image-checkbox2 {
    cursor: pointer;
  }
  div#target-audience-selected-users {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
  }
}
/*------------------------------------*\
	TileGrid
\*------------------------------------*/
@layer defaults {
  .tilegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 24px;
    padding: 12px;
  }
  .tilegrid__tile {
    border-radius: 4px;
    background-color: var(--color-base-50);
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
  }
  .tilegrid__tile:hover {
    background-color: var(--color-primary-50);
  }
  .tilegrid__tile.hide {
    display: none;
  }
  .tilegrid__tile.read {
    opacity: 0.5;
  }
  .tilegrid__tile.read:hover {
    opacity: 1;
  }
  .tilegrid__content {
    padding: 24px;
  }
  .tilegrid__link, .tilegrid__link:link, .tilegrid__link:visited {
    color: var(--color-text);
    flex-grow: 1;
  }
  .tilegrid__buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-top: 1px solid var(--color-base-200);
  }
  .tilegrid__icon {
    font-size: 2rem;
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--color-base-200);
    color: var(--color-primary);
  }
  .tilegrid__image {
    width: 100%;
    height: auto;
  }
  .tilegrid__title {
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
  }
  .tilegrid__meta {
    font-size: 0.75rem;
    color: var(--color-text-dimmed);
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
  }
  .tilegrid__labels {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    margin-bottom: 8px;
  }
  .tilegrid__labels li {
    display: inline-block;
    margin-right: 4px;
    padding: 4px 8px;
    font-size: 0.75rem;
    color: var(--color-base-700);
    background-color: transparent;
    border: 1px solid var(--color-base-200);
    border-color: var(--color-base-200);
    border-radius: 4px;
  }
  .tilegrid__labels li.base {
    color: var(--color-base-600);
    border-color: var(--color-base-400);
  }
  .tilegrid__labels li.primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
  .tilegrid__labels li.info {
    color: var(--color-util-info-dark);
    border-color: var(--color-util-info);
  }
  .tilegrid__labels li.success {
    color: var(--color-util-success-dark);
    border-color: var(--color-util-success);
  }
  .tilegrid__labels li.warning {
    color: var(--color-util-warning-dark);
    border-color: var(--color-util-warning);
  }
  .tilegrid__labels li.error {
    color: var(--color-util-error-dark);
    border-color: var(--color-util-error);
  }
  .tilegrid__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 4;
  }
  .tilegrid__readmore {
    border: none;
    background: none;
    margin-top: 8px;
  }
  .tilegrid__readmore:hover {
    cursor: pointer;
    color: var(--color-primary);
  }
  .tilegrid__button:link, .tilegrid__button:visited {
    padding: 12px;
    color: var(--color-text);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .tilegrid__button:link:hover, .tilegrid__button:visited:hover {
    color: var(--color-primary);
  }
  .tilegrid__button:link i, .tilegrid__button:visited i {
    margin-right: 4px;
  }
  .tilegrid--list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .tilegrid--list .tilegrid__header {
    flex: 0 0 auto;
    padding: 12px 0 12px 12px;
  }
  .tilegrid--list .tilegrid__content {
    padding: 12px;
    flex: 1 1 auto;
  }
  .tilegrid--list .tilegrid__tile {
    flex-direction: row;
  }
  .tilegrid--list .tilegrid__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .tilegrid--list .tilegrid__image {
    max-width: 100px;
    height: auto;
  }
  .tilegrid--list .tilegrid__title {
    margin-bottom: 4px;
    -webkit-line-clamp: 1;
  }
  .tilegrid--list .tilegrid__meta {
    margin-bottom: 4px;
  }
  .tilegrid--list .tilegrid__description {
    -webkit-line-clamp: 1;
  }
}
/*------------------------------------*\
	Timeline
\*------------------------------------*/
@layer defaults {
  .text-right {
    text-align: right;
  }
  .btn-today {
    width: 150px;
    background-color: var(--color-primary);
    border: solid 1px var(--color-primary);
    color: white;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    transform: translateX(50%);
  }
  .timeline {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    position: relative;
    table-layout: fixed;
    width: 100%;
  }
  .timeline .time-show {
    margin-top: 30px;
    position: relative;
    margin-bottom: 30px;
  }
  .timeline .time-show .btn {
    width: 150px;
  }
  .timeline .time-show a {
    color: var(--color-text-inverted);
  }
  .timeline:before {
    background-color: var(--color-base-300);
    bottom: 0;
    content: "";
    right: 50%;
    position: absolute;
    top: 30px;
    width: 1px;
    z-index: 0;
  }
  h3.timeline-title {
    margin: 0;
    color: var(--color-base-300);
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 5px;
    text-transform: uppercase;
  }
  .t-info {
    color: var(--color-base-300);
  }
  .timeline-item {
    display: table-row;
  }
  .timeline-item:before, .timeline-item.alt:after {
    content: "";
    display: block;
    width: 50%;
  }
  .timeline-desk {
    display: table-cell;
    vertical-align: top;
    width: 50%;
  }
  .timeline-desk h1 {
    font-size: 16px;
    font-weight: normal;
    margin: 0 0 5px;
  }
  .timeline-desk .panel {
    display: block;
    margin-left: 45px;
    position: relative;
    text-align: left;
    background: var(--color-layout-cardbackground);
    padding: 4px;
    padding-right: 20px;
  }
  .timeline-desk .panel-body p {
    border-top: 1px solid var(--color-base-300);
    padding: 5px;
  }
  .timeline-item .timeline-desk .arrow {
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    display: block;
    height: 0;
    left: -7px;
    position: absolute;
    top: 13px;
    width: 0;
  }
  .timeline-item .timeline-desk .arrow {
    border-right: 8px solid var(--color-layout-cardbackground) !important;
  }
  .timeline-item.alt .timeline-desk .arrow-alt {
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    display: block;
    height: 0;
    right: -7px;
    position: absolute;
    top: 13px;
    width: 0;
    left: auto;
  }
  .timeline-item.alt .timeline-desk .arrow-alt {
    border-left: 8px solid var(--color-layout-cardbackground) !important;
  }
  .timeline .timeline-icon {
    left: -60px;
    position: absolute;
    top: 5px;
  }
  .timeline .timeline-icon {
    background: var(--color-base-300);
  }
  .timeline-desk span a {
    text-transform: uppercase;
  }
  .timeline-desk h1.red,
  .timeline-desk span a.red {
    color: #ef6f66;
  }
  .timeline-desk h1.green,
  .timeline-desk span a.green {
    color: #39b6ae;
  }
  .timeline-desk h1.blue,
  .timeline-desk span a.blue {
    color: #3872aa;
  }
  .timeline-desk h1.purple,
  .timeline-desk span a.purple {
    color: #8074c6;
  }
  .timeline-desk h1.light-green,
  .timeline-desk span a.light-green {
    color: #a8d76f;
  }
  .timeline-desk h1.yellow,
  .timeline-desk span a.yellow {
    color: #fed65a;
  }
  .timeline .timeline-icon.red {
    background: #ef6f66;
  }
  .timeline .timeline-icon.green {
    background: #39b6ae;
  }
  .timeline .timeline-icon.blue {
    background: #3872aa;
  }
  .timeline .timeline-icon.purple {
    background: #8074c6;
  }
  .timeline .timeline-icon.light-green {
    background: #a8d76f;
  }
  .timeline .timeline-icon.yellow {
    background: #fed65a;
  }
  .timeline .timeline-icon.aggression {
    background: var(--color-label-aggression);
  }
  .timeline .timeline-icon.calamity {
    background: var(--color-label-calamity);
  }
  .timeline .timeline-icon.dataleak {
    background: var(--color-label-dataleak);
  }
  .timeline .timeline-icon.homesafe {
    background: var(--color-label-homesafe);
  }
  .timeline .timeline-icon.vim {
    background: var(--color-label-vim);
  }
  .timeline .timeline-icon.complaint {
    background: var(--color-label-complaint);
  }
  .timeline .timeline-icon.inquiry {
    background: var(--color-label-inquiry);
  }
  .timeline .timeline-icon.improvementProposal {
    background: var(--color-label-improvementproposal);
  }
  .timeline .timeline-icon.light-gray {
    background: var(--color-base-100);
    border: 1px solid var(--color-base-200);
  }
  .timeline .timeline-icon {
    border-radius: 50%;
    display: block;
    height: 30px;
    width: 30px;
    color: var(--color-text-inverted);
    font-weight: bold;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .timeline .timeline-icon__large {
    width: 40px;
    height: 40px;
    left: -65px;
  }
  .timeline .timeline-icon i {
    color: var(--color-base-600);
    font-size: 20px;
  }
  .timeline-item.alt .timeline-icon {
    left: auto;
    right: -60px;
  }
  .timeline-item.alt .timeline-icon__large {
    right: -65px;
  }
  .timeline .time-icon:before {
    font-size: 16px;
    margin-top: 5px;
  }
  .timeline .timeline-date {
    left: -245px;
    position: absolute;
    text-align: right;
    top: 12px;
    width: 150px;
    display: none;
  }
  .timeline-item.alt .timeline-date {
    left: auto;
    right: -245px;
    text-align: left;
    display: none;
  }
  .timeline-desk h5 span {
    color: #999999;
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
  }
  .timeline-item.alt:before {
    display: none;
  }
  .timeline-item:before,
  .timeline-item.alt:after {
    content: "";
    display: block;
    width: 50%;
  }
  .timeline-desk p {
    font-size: 14px;
    margin-bottom: 0;
    color: #999;
  }
  .timeline-desk a {
    color: inherit;
  }
  .timeline-desk .panel {
    margin-bottom: 12px;
  }
  .timeline-desk .album {
    margin-top: 20px;
  }
  .timeline-item.alt .timeline-desk .album {
    margin-top: 20px;
    float: right;
  }
  .timeline-desk .album a {
    margin-right: 5px;
    float: left;
  }
  .timeline-item.alt .timeline-desk .album a {
    margin-left: 5px;
    float: right;
  }
  .timeline-desk .notification {
    background: none repeat scroll 0 0 var(--color-layout-cardbackground);
    margin-top: 20px;
    padding: 8px;
  }
  .timeline-item.alt .panel {
    margin-left: 0;
    margin-right: 45px;
    padding-left: 20px;
    padding-right: 0;
  }
  .mbot30 {
    margin-bottom: 30px;
  }
  .timeline-item.alt h1,
  .timeline-item.alt p {
    text-align: right;
  }
  /* Timeline calimities */
  #calimity-timeline {
    background-color: var(--color-layout-cardbackground);
  }
  #calimity-timeline .calimity-timeline {
    border-left: 2px dotted #999;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    margin: 50px auto;
    padding: 15px;
    list-style: none;
    max-width: 75%;
  }
  #calimity-timeline .calimity-timeline h1 {
    letter-spacing: 1.5px;
    font-weight: 100;
    font-size: 1.4em;
  }
  #calimity-timeline .calimity-timeline h2,
  #calimity-timeline .calimity-timeline h3 {
    letter-spacing: 1.5px;
    font-weight: 400;
    font-size: 1.4em;
  }
  .eventTitle {
    position: relative;
    background: white;
    border: 1px solid #999999;
    margin-left: 12px;
    padding: 2px;
    font-weight: bold;
    box-shadow: 3px 3px 6px #ccc;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
  }
  #calimity-timeline .calimity-timeline .eventTitle:after,
  #calimity-timeline .calimity-timeline .eventTitle:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  #calimity-timeline .calimity-timeline .eventTitle:after {
    border-color: rgba(63, 28, 0, 0);
    border-right-color: #999;
    border-width: 12px;
    margin-top: -12px;
  }
  #calimity-timeline .calimity-timeline .eventTitle:before {
    border-color: rgba(194, 225, 245, 0);
    border-right-color: #999999;
    border-width: 13px;
    margin-top: -13px;
  }
  #calimity-timeline .calimity-timeline .event {
    border-bottom: 1px dashed #999;
    padding-bottom: 25px;
    margin-bottom: 50px;
    position: relative;
  }
  #calimity-timeline .calimity-timeline .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
  }
  #calimity-timeline .calimity-timeline .event:before,
  #calimity-timeline .calimity-timeline .event:after {
    position: absolute;
    display: block;
    top: 0;
  }
  #calimity-timeline .calimity-timeline .event:before {
    left: -135px;
    color: black;
    content: attr(data-date);
    text-align: right;
    font-weight: 100;
    font-size: 0.9em;
    min-width: 100px;
    font-weight: bold;
    top: 5px;
  }
  #calimity-timeline .calimity-timeline .event:after {
    box-shadow: 0 3px 6px #999;
    left: -29px;
    background: #cd5b5b;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    content: "";
    border: solid 2px #999;
  }
  #calimity-timeline .calimity-timeline p {
    padding-left: 15px;
    padding-top: 5px;
    color: rgb(114, 114, 114);
    margin-left: 10px;
  }
  #calimity-timeline .calimity-timeline .day-event {
    margin-left: -68px;
    margin-bottom: 30px;
    background-color: #cd5b5b;
    border: solid 2px #999;
    padding: 3px;
    color: white;
    width: 100px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
  }
  .eventActions {
    float: right;
    display: none;
  }
  #calimity-timeline .calimity-timeline .eventSource {
    position: absolute;
    left: 25px;
    margin-top: 10px;
    color: #999;
    font-size: 11px;
  }
}
/*------------------------------------*\
	Tree of Life
\*------------------------------------*/
@layer defaults {
  /* called Issue categories in some*/
  /* called Document categories in doc */
  .tol {
    padding-bottom: 10px;
  }
  .tol-item-wrapper {
    position: relative;
  }
  .tol-item {
    padding-left: 10px;
    height: 32px;
  }
  .tol-item:hover {
    background: var(--color-base-100);
  }
  .tol-item.no-hover:hover {
    background: none;
  }
  .tol-item.prepend,
  .tol-item.append {
    height: 10px;
  }
  .tol-content {
    display: block;
    padding: 8px 10px 2px 0;
    position: relative;
    color: var(--color-base-700);
  }
  .tol-content span.category-title {
    padding-left: 10px;
  }
  .tol-content span.count-issues {
    position: absolute;
    left: 800px;
  }
  .tol-content span.count-editors {
    position: absolute;
    left: 500px;
  }
  .tol-content span.count-usergroups {
    position: absolute;
    left: 650px;
  }
  .tol-content span.count-documents {
    position: absolute;
    left: 800px;
  }
  .tol-content span.count-favorites {
    position: absolute;
    left: 800px;
  }
  .tol-content a.button {
    float: right;
  }
  #treeoflife_title {
    float: left;
  }
  #treeoflife_issues {
    float: left;
    margin-left: 770px;
  }
  #treeoflife_editors {
    float: left;
    margin-left: 466px;
  }
  #treeoflife_usergroups {
    float: left;
    margin-left: 72px;
  }
  #treeoflife_documents {
    float: left;
    margin-left: 57px;
  }
  #treeoflife_favorites {
    float: left;
    margin-left: 770px;
  }
  /* Indent levels */
  [class*=tol-indent-level-] {
    float: left;
    border-left: 1px dotted var(--color-base-400);
    height: 100%;
  }
  [class*=tol-indent-level-] span {
    display: block;
    height: 50%;
    border-bottom: 1px dotted var(--color-base-400);
  }
  .tol-item:last-child [class*=tol-indent-level-] {
    border-left: none;
  }
  .tol-item:last-child [class*=tol-indent-level-] span {
    border-left: 1px dotted var(--color-base-400);
  }
  .tol-indent-level-1 {
    width: 10px;
  }
  .tol-indent-level-2 {
    width: 20px;
  }
  .tol-indent-level-3 {
    width: 30px;
  }
  .tol-indent-level-4 {
    width: 40px;
  }
  .tol-indent-level-5 {
    width: 50px;
  }
  .tol-indent-level-6 {
    width: 60px;
  }
  .tol-indent-level-7 {
    width: 70px;
  }
  .tol-indent-level-8 {
    width: 80px;
  }
  .tol-indent-level-9 {
    width: 90px;
  }
  .tol-indent-level-10 {
    width: 100px;
  }
  .tol-indent-level-11 {
    width: 110px;
  }
  .tol-indent-level-12 {
    width: 120px;
  }
  .tol-indent-level-13 {
    width: 130px;
  }
  .tol-indent-level-14 {
    width: 140px;
  }
  .tol-indent-level-15 {
    width: 150px;
  }
  .tol-indent-level-16 {
    width: 160px;
  }
  .tol-indent-level-17 {
    width: 170px;
  }
  .tol-indent-level-18 {
    width: 180px;
  }
  .tol-indent-level-19 {
    width: 190px;
  }
  .tol-indent-level-20 {
    width: 200px;
  }
  .tol-indent-level-21 {
    width: 210px;
  }
  .tol-indent-level-22 {
    width: 220px;
  }
  .tol-indent-level-23 {
    width: 230px;
  }
  .tol-indent-level-24 {
    width: 240px;
  }
  .tol-indent-level-25 {
    width: 250px;
  }
  .tol-indent-level-26 {
    width: 260px;
  }
  .tol-indent-level-27 {
    width: 270px;
  }
  .tol-indent-level-28 {
    width: 280px;
  }
  .tol-indent-level-29 {
    width: 290px;
  }
  .tol-indent-level-30 {
    width: 300px;
  }
  .tol-indent-level-31 {
    width: 310px;
  }
  .tol-indent-level-32 {
    width: 320px;
  }
  .tol-indent-level-33 {
    width: 330px;
  }
  .tol-indent-level-34 {
    width: 340px;
  }
  .tol-indent-level-35 {
    width: 350px;
  }
  .tol-indent-level-36 {
    width: 360px;
  }
  .tol-indent-level-37 {
    width: 370px;
  }
  .tol-indent-level-38 {
    width: 380px;
  }
  .tol-indent-level-39 {
    width: 390px;
  }
  .tol-indent-level-40 {
    width: 400px;
  }
  .tol-indent-level-41 {
    width: 410px;
  }
  .tol-indent-level-42 {
    width: 420px;
  }
  .tol-indent-level-43 {
    width: 430px;
  }
  .tol-indent-level-44 {
    width: 440px;
  }
  .tol-indent-level-45 {
    width: 450px;
  }
  .tol-indent-level-46 {
    width: 460px;
  }
  .tol-indent-level-47 {
    width: 470px;
  }
  .tol-indent-level-48 {
    width: 480px;
  }
  .tol-indent-level-49 {
    width: 490px;
  }
  .tol-indent-level-50 {
    width: 500px;
  }
  .tol-indent-level-51 {
    width: 510px;
  }
  .tol-indent-level-52 {
    width: 520px;
  }
  .tol-indent-level-53 {
    width: 530px;
  }
  .tol-indent-level-54 {
    width: 540px;
  }
  .tol-indent-level-55 {
    width: 550px;
  }
  .tol-indent-level-56 {
    width: 560px;
  }
  .tol-indent-level-57 {
    width: 570px;
  }
  .tol-indent-level-58 {
    width: 580px;
  }
  .tol-indent-level-59 {
    width: 590px;
  }
  .tol-indent-level-60 {
    width: 600px;
  }
  .tol-indent-level-61 {
    width: 610px;
  }
  .tol-indent-level-62 {
    width: 620px;
  }
  .tol-indent-level-63 {
    width: 630px;
  }
  .tol-indent-level-64 {
    width: 640px;
  }
  .tol-indent-level-65 {
    width: 650px;
  }
  .tol-indent-level-66 {
    width: 660px;
  }
  .tol-indent-level-67 {
    width: 670px;
  }
  .tol-indent-level-68 {
    width: 680px;
  }
  .tol-indent-level-69 {
    width: 690px;
  }
  .tol-indent-level-70 {
    width: 700px;
  }
  .tol-indent-level-71 {
    width: 710px;
  }
  .tol-indent-level-72 {
    width: 720px;
  }
  .tol-indent-level-73 {
    width: 730px;
  }
  .tol-indent-level-74 {
    width: 740px;
  }
  .tol-indent-level-75 {
    width: 750px;
  }
}
@layer overrides {
  div.variant2 h3 {
    color: #13899a;
  }
  div.variant2 h4 {
    color: #13899a;
    margin: 15px 0 5px 0;
  }
  div.variant2 img.course-image {
    border-radius: 3px;
    margin-top: 10px;
  }
  div.variant2 table {
    margin-bottom: 20px;
  }
  div.variant2 table td {
    font-weight: bold;
  }
  div.variant2 table td.val {
    color: #13899a;
  }
  div.variant2 .line-separator {
    border-top: 2px solid #cc071e;
    width: 100%;
    margin: 10px 0;
  }
  div.variant2 div.interesting {
    width: 100%;
    text-align: center;
  }
  div.variant2 div.interesting img {
    margin: 10px 20px 10px 0;
    border-radius: 3px;
  }
}
/*------------------------------------*\
	Vehicle event
\*------------------------------------*/
@layer defaults {
  /* Show vehicle event */
  .event-info table {
    margin-bottom: 20px;
  }
  .event-info table td {
    padding: 6px 5px;
    vertical-align: top;
  }
  .event-info table td.label, .event-info table td.label-with-sublabels, .event-info table td.sublabel {
    color: var(--color-text-dimmed);
    padding-top: 2px;
  }
  .event-info table td.sublabel, .event-info table td.label {
    width: 150px;
    color: var(--color-text-dimmed);
    padding-top: 2px;
  }
  .event-info table .show-vehicle-footer-left,
  .event-info table .show-vehicle-footer-right {
    white-space: nowrap;
  }
  .event-info table .show-vehicle-footer-right {
    float: right;
  }
}
/*# sourceMappingURL=maps/main.min.css.map */