@import "/includes/styles/jquery.scheduler.css" layer(vendor);
@import "/includes/vendor/redactor-3-5-2/redactor.min.css" layer(vendor);
@import "/includes/vianpm/cropperjs/dist/cropper.min.css" layer(vendor);
@import "/includes/vianpm/dropzone/dist/dropzone.css" layer(vendor);
@import "/includes/vianpm/fontawesome-kit/css/fontawesome.min.css" layer(vendor);
@import "/includes/vianpm/fontawesome-kit/css/custom-icons.min.css" layer(vendor);
@import "/includes/vianpm/fontawesome-kit/css/brands.min.css" layer(vendor);
@import "/includes/vianpm/fontawesome-kit/css/regular.min.css" layer(vendor);
@import "/includes/vianpm/fontawesome-kit/css/solid.min.css" layer(vendor);
@import "/includes/vianpm/fullcalendar/dist/fullcalendar.css" layer(vendor);
@import "/includes/vianpm/jqGrid-5.8.10/css/ui.jqgrid.css" layer(vendor);
@import "/includes/vianpm/jquery-ui/dist/themes/redmond/jquery-ui.min.css" layer(vendor);
@import "/includes/vianpm/responsive-slides/responsiveslides.css" layer(vendor);
@import "/includes/vianpm/video.js/dist/video-js.css" layer(vendor);
@import "/includes/vianpm/tinycolorpicker/examples/simple/css/website.css" layer(vendor);
@import "/includes/vianpm/webui-popover/dist/jquery.webui-popover.css" layer(vendor);
@import "/includes/styles/jquery-ui.multiselect.css" layer(vendor);
@import "/includes/vianpm/jqGrid-5.8.10/css/addons/ui.multiselect.css" layer(vendor);
@import "/includes/vianpm/tippy.js/dist/border.css" layer(vendor);
@import "/includes/vianpm/prismjs/themes/prism.css" layer(vendor);
@import "/includes/vianpm/prismjs/plugins/toolbar/prism-toolbar.css" layer(vendor);
/* Sky Framework dependencies */
@import "/includes/vianpm/tippy.js/dist/tippy.css" layer(vendor);
@import "/includes/vianpm/choices.js/styles/choices.min.css" layer(vendor);
/* ==========================================================================
   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 skysuite {
  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 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);
    z-index: 999 !important;
  }
  .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 vendor {
  /*!
  * 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);
  }
}
/*------------------------------------*\
	Dropzone
\*------------------------------------*/
@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;
  }
  .formtable .dropzone.dropzone-small img {
    margin: 0 0;
  }
  .dropzone .dz-preview.dz-image-preview {
    background: var(--color-layout-cardbackground);
  }
  .dropzone .dz-progress {
    box-shadow: 0px 0px 0px 3px var(--color-layout-cardbackground);
    background-color: var(--color-layout-cardbackground);
  }
  .dropzone .dz-progress .dz-upload {
    background: linear-gradient(45deg, var(--color-primary-600) 25%, var(--color-primary-500) 25%, var(--color-primary-500) 50%, var(--color-primary-600) 50%, var(--color-primary-600) 75%, var(--color-primary-500) 75%, var(--color-primary-500));
    background-size: 20px 20px;
    animation: progressStripes 1.5s linear infinite;
  }
  @keyframes progressStripes {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 20px 0;
    }
  }
  .dropzone .dz-success-mark,
  .dropzone .dz-error-mark {
    border-radius: 50%;
    background-color: var(--color-layout-cardbackground);
    box-shadow: 0px 0px 0px 3px var(--color-layout-cardbackground);
  }
  .dropzone .dz-success-mark svg path {
    stroke: var(--color-util-success);
    fill: var(--color-util-success);
    stroke-opacity: 0;
    fill-opacity: 1;
  }
  .dropzone .dz-error-mark svg path {
    stroke: var(--color-util-error);
    fill: var(--color-util-error);
    stroke-opacity: 0;
    fill-opacity: 1;
  }
}
/*------------------------------------*\
	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;
  }
}
@layer skysuite {
  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;
    }
  }
}
/*------------------------------------*\
	Form / form elements
\*------------------------------------*/
@layer skysuite {
  ::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);
  }
}
@layer skysuite {
  .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: 6px 12px;
    margin-right: -4px !important;
    margin-top: -1px !important;
    font-size: 13px;
  }
  .multi-radio-group label:last-of-type {
    margin-right: 0 !important;
  }
  .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);
  }
}
@layer skysuite {
  .content-container {
    padding: 1rem;
    background: var(--color-base-100);
    border: 1px solid var(--color-base-300);
    border-radius: 4px;
  }
}
/* ==========================================================================
   Alert Component - Notification messages with different states
   ========================================================================== */
/**
 * Alert component for displaying notifications, warnings, errors, and info messages
 *
 * Modifiers:
 * .alert--info     - Information alert (blue)
 * .alert--error    - Error alert (red)
 * .alert--warning  - Warning alert (yellow)
 * .alert--success  - Success alert (green)
 * .alert--small    - Compact alert variant
 */
@layer skysuite {
  /* Variants using CSS variables
     -------------------------------------------------------------------------- */
  .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-padding: 12px;
    --alert-width: auto;
    --alert-icon-size: inherit;
  }
  .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--small {
    --alert-padding: 8px;
    --alert-width: max-content;
    --alert-icon-size: 16px;
  }
  /* Component Styling - Visual implementation
     -------------------------------------------------------------------------- */
  .alert {
    line-height: 1.4;
    border-radius: 4px;
    padding: var(--alert-padding);
    width: var(--alert-width);
    background-color: var(--alert-backgroundcolor);
    color: var(--alert-textcolor);
    box-shadow: var(--shadow-box-xy);
    display: block;
    text-align: left;
  }
  .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__icon {
    color: var(--alert-primary);
    flex: 0 0 auto;
    font-size: var(--alert-icon-size);
  }
  .alert__content {
    flex: 1 1 auto;
  }
  .alert__content p {
    margin-top: 0;
  }
  .alert__title {
    font-weight: 600;
  }
  .alert__description a {
    color: var(--alert-linkcolor);
  }
  .alert__description a:hover {
    text-decoration: underline;
  }
  .alert__buttons {
    margin-top: 0.5rem;
  }
  /* Context-specific styling
     -------------------------------------------------------------------------- */
  .ui-tabs .alert,
  .card .alert,
  .dialog__content .alert,
  .modal__content .alert {
    box-shadow: none;
    background-color: var(--alert-backgroundcoloralt);
  }
}
/* ==========================================================================
   Button Component - Primary interactive element for user actions
   ========================================================================== */
/**
 * Button component providing consistent styling across the Sky Suite applications.
 * Supports multiple variants, sizes, and semantic color schemes with full theming
 * via CSS custom properties for light/dark mode compatibility.
 *
 * Color Variants:
 * .button--primary   - Primary button (uses application primary color)
 * .button--red       - Red/danger button variant
 * .button--green     - Green/success button variant  
 * .button--blue      - Blue/info button variant
 * .button--info      - Info button (uses utility info color)
 *
 * Semantic Aliases:
 * .button--delete    - Delete/danger button (red styling)
 * .button--save      - Save/success button (green styling)
 * .button--add       - Add/create button (green styling)
 * .button--externallink - External link button (styled for external actions)
 * .button--externallink-colored - External link button with colored background
 *
 * Size Variants:
 * .button--small     - Compact button (0.75rem font, reduced padding)
 * .button--large     - Prominent button (1.125rem font)
 * .button--fw-s      - Fixed-width small button (2rem width)
 *
 * Style Variants:
 * .button--link      - Text-only button (transparent background/border)
 * .button--timestamp - Timestamp button (floated right, positioned)
 *
 * Legacy Support (deprecated - use BEM modifiers):
 * .button.delete, .button.save, .button.add, .button.small, .button.large
 *
 * Special Classes:
 * .button.disabled           - Disabled state styling
 *
 * TODO:
 * - Consolidate remaining legacy class support (.button.delete, .button.save, etc.) to utility classes
 * - Consider adding focus states for accessibility (--button-focus-* variables)
 * - Add disabled state for button--link variant
 * - Consider relocating the timestamp button to a different file (does not fit the button component)
 * - Alternative way to handle the fixed width buttons (more like tailwind's width utilities)
 */
@layer skysuite {
  /* Variants using CSS variables
     -------------------------------------------------------------------------- */
  .button {
    --button-background-color: var(--color-button-default-background);
    --button-background-hover-color: var(--color-button-default-hover-background);
    --button-link-color: var(--color-button-default-text);
    --button-link-hover-color: var(--color-button-default-hover-text);
    --button-text-color: var(--color-button-default-text);
    --button-font-size: inherit;
    --button-font-weight: 700;
    --button-padding: 8px 12px;
    --button-border-radius: 4px;
  }
  .button--primary {
    --button-background-color: var(--color-button-primary-background);
    --button-background-hover-color: var(--color-button-primary-hover-background);
    --button-link-color: var(--color-button-primary-background);
    --button-link-hover-color: var(--color-button-primary-hover-background);
    --button-text-color: var(--color-button-primary-text);
  }
  .button--red {
    --button-background-color: var(--color-button-red-background);
    --button-background-hover-color: var(--color-button-red-hover-background);
    --button-link-color: var(--color-button-red-background);
    --button-link-hover-color: var(--color-button-red-hover-background);
    --button-text-color: var(--color-button-red-text);
  }
  .button--green {
    --button-background-color: var(--color-button-green-background);
    --button-background-hover-color: var(--color-button-green-hover-background);
    --button-link-color: var(--color-button-green-background);
    --button-link-hover-color: var(--color-button-green-hover-background);
    --button-text-color: var(--color-button-green-text);
  }
  .button--blue {
    --button-background-color: var(--color-button-blue-background);
    --button-background-hover-color: var(--color-button-blue-hover-background);
    --button-link-color: var(--color-button-blue-background);
    --button-link-hover-color: var(--color-button-blue-hover-background);
    --button-text-color: var(--color-button-blue-text);
  }
  .button--delete,
  .button.delete {
    --button-background-color: var(--color-button-red-background);
    --button-background-hover-color: var(--color-button-red-hover-background);
    --button-link-color: var(--color-button-red-background);
    --button-link-hover-color: var(--color-button-red-hover-background);
    --button-text-color: var(--color-button-red-text);
  }
  .button--info {
    --button-background-color: var(--color-util-info);
    --button-background-hover-color: var(--color-util-info-dark);
    --button-link-color: var(--color-util-info);
    --button-link-hover-color: var(--color-util-info-dark);
    --button-text-color: white;
  }
  .button--save,
  .button.save {
    --button-background-color: var(--color-button-green-background);
    --button-background-hover-color: var(--color-button-green-hover-background);
    --button-link-color: var(--color-button-green-background);
    --button-link-hover-color: var(--color-button-green-hover-background);
    --button-text-color: var(--color-button-green-text);
  }
  .button--add,
  .button.add {
    --button-background-color: var(--color-button-green-background);
    --button-background-hover-color: var(--color-button-green-hover-background);
    --button-link-color: var(--color-button-green-background);
    --button-link-hover-color: var(--color-button-green-hover-background);
    --button-text-color: var(--color-button-green-text);
  }
  .button--externallink {
    --button-background-hover-color: var(--color-sky-600);
    --button-text-hover-color: white;
  }
  .button--externallink-colored {
    --button-background-color: var(--color-sky-500);
    --button-text-color: white;
    --button-background-hover-color: var(--color-sky-600);
  }
  .button--large,
  .button.large {
    --button-font-size: 1.125rem;
  }
  .button--small,
  .button.small {
    --button-font-size: 0.75rem;
    --button-padding: 4px 6px;
  }
  .button--fw-s {
    --button-width: 2rem;
  }
  .button--link {
    --button-background-color: transparent;
    --button-background-hover-color: transparent;
    --button-text-color: var(--button-link-color);
    --button-text-hover-color: var(--button-link-hover-color);
  }
  .button--disabled,
  .button.disabled {
    opacity: 0.5;
    filter: grayscale(50%);
    --button-cursor: default;
    --button-pointer-events: none;
  }
  .button--timestamp {
    --button-float: right;
    --button-display: block;
    --button-top: 1px;
    --button-border-radius: 4px 4px 0 0;
  }
  /* Component Styling - Visual implementation
     -------------------------------------------------------------------------- */
  .button {
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    background: var(--button-background-color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--button-border-color, var(--button-background-color));
    color: var(--button-text-color);
    font-weight: var(--button-font-weight);
    font-size: var(--button-font-size);
    float: var(--button-float, none);
    display: var(--button-display, inline-block);
    position: relative;
    cursor: var(--button-cursor, pointer);
    pointer-events: var(--button-pointer-events, auto);
    white-space: nowrap;
    line-height: initial;
    width: var(--button-width, auto);
    text-align: center;
    top: var(--button-top, auto);
    right: var(--button-right, auto);
    bottom: var(--button-bottom, auto);
    left: var(--button-left, auto);
  }
  .button:link, .button:visited {
    color: var(--button-text-color);
    background: var(--button-background-color);
    border-color: var(--button-border-color, var(--button-background-color));
  }
  .button:active, .button:hover {
    background: var(--button-background-hover-color);
    border-color: var(--button-border-hover-color, var(--button-background-hover-color));
    color: var(--button-text-hover-color, var(--button-text-color));
  }
  .button--selected,
  .button--selected:link,
  .button--selected:visited {
    border-bottom: 4px solid var(--color-button-primary-background);
    padding-bottom: 4px;
  }
  .button__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__badgecount[data-badgecount="0"] {
    border: 1px solid var(--color-text-faded);
    background-color: var(--color-base-100);
    color: var(--color-text-faded);
  }
}
html {
  font-size: 16px;
  min-height: 100vh;
}

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}
body {
  font-family: var(--font-body);
  line-height: 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-layout-background);
  background: var(--gradient-layout-background);
  display: grid;
  grid-template-rows: 100px auto 100px;
  row-gap: 2rem;
  justify-items: center;
}

h1,
h2,
h3 {
  padding-bottom: 0;
  color: #111827;
}

h1 {
  font-weight: 900;
  font-size: 2rem;
  margin-bottom: 0;
  margin-top: 0;
}

h2 {
  margin-bottom: 0px;
  margin-top: 0;
  font-size: 1.5rem;
}

h3 {
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0;
}

p {
  color: #374151;
  margin: 0 0 16px;
}

p.intro {
  font-size: 1.125rem;
  margin: 16px 0;
}

a:not(.button) {
  color: #008ba2;
}

a:not(.button):hover {
  color: #005f6f;
}

.container {
  max-width: 992px;
  padding: 12px 0;
  margin: 0 16px;
}

@media (min-width: 1024px) {
  .container {
    margin: 0 auto;
  }
}
.card {
  padding: 2rem;
  border-radius: 4px;
  background-color: var(--color-layout-cardbackground);
}

header {
  background-color: #fff;
  border-top: 8px solid var(--color-vic);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  width: 100%;
}

header img {
  max-height: 4rem;
}

main {
  max-width: 880px;
  width: 100%;
  display: grid;
  row-gap: 2rem;
  padding: 0 1.5rem;
  margin-top: 0 !important;
}

hgroup {
  padding: 1rem 0;
}

/* Form layout */
form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

form fieldset {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-base-300);
  gap: 1.5rem;
  border-radius: 4px;
  padding: 2rem;
}

form legend {
  font-weight: 600;
  font-size: 1.125rem;
  padding: 0 1rem;
  margin-left: -1rem;
}

.formFieldsubset {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.formFieldsubset__title {
  font-weight: 600;
  font-size: 1rem;
}

.formItem {
  font-size: 0.875rem;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.formItem__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.formItem__description {
  color: var(--color-text-dimmed);
  font-style: italic;
  margin-bottom: 0.25rem;
}

.formItem__field {
  margin-bottom: 0.25rem;
}

p {
  padding: 0;
  margin: 0;
}

form input::placeholder,
form textarea::placeholder {
  font-style: italic;
}

form input[type=text],
form input[type=tel],
form input[type=email],
form input[type=date],
form input[type=number],
form textarea,
form select {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  margin-top: 4px;
}

form textarea {
  resize: vertical;
  min-height: 100px;
  width: 100%;
}

form input[type=text],
form input[type=tel],
form input[type=email],
form input[type=date],
form input[type=number],
form select {
  box-sizing: border-box;
  height: 2.5rem;
}

form input[type=checkbox] + label {
  font-weight: normal;
  font-size: 1rem;
}

form ::file-selector-button {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  margin-right: 4px;
  background-color: #e5e7eb;
}

form ::file-selector-button:hover {
  cursor: pointer;
  background-color: #d1d5db;
}

form > *:not(:first-child) {
  margin-top: 20px;
}

.error {
  border-color: var(--color-util-error);
}

label.error {
  margin: 8px 0;
  color: var(--color-util-error);
}

.formfield__yesno {
  display: grid;
  gap: 4px;
}

.formfield__textfield input {
  width: 100%;
}

.formfield__select .formfield__select__filtergroup {
  display: flex;
  gap: 1rem;
}

.formfield__epacheckboxgroup .formfield__epacheckboxgroup__list {
  display: grid;
  gap: 4px;
}
.formfield__epacheckboxgroup .formfield__epacheckboxgroup__item {
  cursor: pointer;
  padding: 2px 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.formfield__epacheckboxgroup .formfield__epacheckboxgroup__item__meta {
  color: var(--color-text-dimmed);
  font-style: italic;
}

.formfield__datepicker {
  position: relative;
}
.formfield__datepicker:before {
  content: "\f073";
  font-family: var(--font-icon);
  position: absolute;
  top: 13px;
  left: 12px;
  color: var(--color-text-dimmed);
}
.formfield__datepicker input[type=text] {
  padding-left: 34px;
}
.formfield__datepicker button {
  display: none;
}

footer {
  display: grid;
  place-items: center;
  color: var(--color-text-dimmed);
  width: 100%;
}
/*# sourceMappingURL=maps/style.min.css.map */