/* Skyco15 */
:root {
    --color-structural: #d75907;
    --scrollbar-track-color: rgba(0,0,0,0.2);
    --scrollbar-thumb-color: rgba(0,0,0,0.4);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    position: relative;
    min-height: 0;
    min-width: 0;
    flex-shrink: 0;
    -webkit-text-size-adjust: 100%;
}
html,body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
#_root_, #app {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
}
[contenteditable] {
    outline: none;
}
strong {
    font-family: var(--font-semibold);
}
.no-pointer {
    pointer-events: none !important;
}
table {
    width: 100%;
    table-layout: auto;
	border-collapse: collapse;
}
::placeholder {
    color: inherit;
    opacity: .5;
}
.dnd-icon {
    cursor: grab;
}
.empty-hide:empty {
    display: none !important;
}

/* Skyco15 Base Fonts */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/MaterialIcons-2022.ttf') format('truetype');
}
@font-face {
    /* Support for Skyco14 */
    font-family: 'Material Icons 2022';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/MaterialIcons-2022.ttf') format('truetype');
}
@font-face {
    font-family: 'Bootstrap Icons';
    font-style: normal;
    src: url('../../fonts/bootstrap-icons.woff') format('woff');
}
@font-face {
    font-family: 'Monaco';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Monaco.woff') format('woff');
}

/* Hidden */
sky-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    display: none !important;
}

/* Container */
sky-container {
    display: block;
    width: 100%;
    height: auto;
    flex-shrink: 1;
}
sky-container[data-mode='v'],
sky-container[data-mode='h'] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
sky-container[data-mode='h'] {
    flex-direction: row;
}
sky-container[data-mode='wrap'] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
sky-container[data-mode='grid'] {
    display: grid;
    grid-auto-rows: max-content;
}
sky-container[data-mode='grid-auto'] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
sky-container[data-mode='grid-auto'] > * {
    width: var(--grid-column-size,auto);
}
sky-container > sky-container {
    flex-shrink: 0;
}
sky-container[data-mode='h'] > sky-container {
    flex-shrink: 1;
}
sky-container[data-mode='v'] > * {
    max-width: 100%;
}
sky-container[data-mode='h'] > * {
    max-height: 100%;
}

/* SplitView */
[data-split-view] {
    justify-content: space-between !important;
}
[data-split-view-type] {
    flex-grow: 1 !important;
    height: 100% !important;
}
[data-primary-size] [data-split-view-type='primary'] {
    flex-grow: 0 !important;
}
[data-split-view][data-size-class='compact'] > * {
    width: 100% !important;
}
[data-split-view-type='primary'] {
    order: 0 !important;
}
[data-split-view-type='secondary'] {
    order: 1 !important;
}
[data-split-view-type='supplementary'] {
    order: 2 !important;
}

/* Sheet */
sky-sheet * {
    max-width: none;
}

/* Iframe */
iframe {
    border: none !important;
}

/* Font Attributes */
select, input, textarea, sky-textarea, sky-text, sky-icon, sky-checkbox, sky-radio, sky-datepicker, [data-form]::before {
    font-family: var(--font-standard), Arial, sans-serif;
    font-size: var(--font-size,10pt);
    color: var(--font-color,black);
    text-align: var(--font-align,start);
    line-height: var(--font-lineheight,normal);
}
textarea {
    resize: vertical;
}

/* Text */
sky-text {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
}
sky-texteditor {
    width: 100%;
    z-index: 0;
    overflow: hidden;
}

/* Image */
img {
    display: inline-block;
}
img[src=''], img:not([src]) {
    display: none;
}
sky-image, sky-box {
    display: block;
    overflow: hidden !important;
}
sky-image img {
    display: block;
    width: 100%;
    height: 100%;
}
sky-image[data-blur="true"]::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    display: block;
    width: 120%;
    height: 120%;
    background-image: var(--image-blur-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(15px);
}
sky-image * {
    pointer-events: none;
}

/* Buttons */
button {
    appearance: none;
    display: block;
    border: none;
    border-radius: var(--button-corner);
    text-align: center;
    cursor: pointer;
    width: auto;
    height: auto;
    max-width: 100%;
    font-family: var(--button-font), 'Arial Bold', sans-serif;
    font-size: var(--font-size,10pt);
    line-height: var(--font-lineheight,normal);
    background-color: transparent;
    outline: none;
}
button[data-icon]:not([data-icon=""])::before,
button[data-icon]:not([data-icon=""]).icon-after::after {
    content: attr(data-icon);
    display: inline-block;
    font-family: var(--font-icon);
    font-size: var(--button-icon-size);
    vertical-align: text-bottom;
}
button[data-icon]:not([data-icon=""])::before {
    padding-inline-end: calc(var(--button-icon-size) / 2);
}
button[data-icon]:not([data-icon=""])::after {
    padding-inline-start: calc(var(--button-icon-size) / 2);
}
button[data-icon]:not([data-icon=""]).icon-after::before {
    content: none !important;
}

/* Icons */
sky-icon, button[data-type="icon"] {
    font-family: var(--font-icon), "Bootstrap Icons";
    font-size: var(--font-icon-size,18pt);
    line-height: normal;
}

/* Input Components */
input, select, textarea, sky-textarea, sky-datepicker, sky-select > div {
    -webkit-appearance: none;
    appearance: none;
    padding: var(--input-padding,4px);
    outline: none;
}
input, textarea, sky-textarea, sky-textfield, sky-select, sky-datepicker, sky-camera, sky-upload, sky-picture-db, sky-queryfield, sky-colorpicker {
    border-width: var(--input-border,1px);
    border-style: var(--input-border-type,solid);
    border-color: var(--font-color);
    background-color: var(--input-color);
    border-radius: var(--input-corner);
    overflow: hidden;
    max-width: 100%;
}
sky-textfield > input, sky-select > select, sky-select > div, input[type='range'], sky-camera input, sky-upload input, sky-queryfield input {
    width: 100%;
    flex-shrink: 1;
    border: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}
sky-queryfield {
    display: flex;
    flex-direction: column;
}
sky-textfield {
    display: flex;
    flex-direction: row;
    align-items: center;
}
sky-textfield sky-icon {
    margin-inline-start: 6px;
    font-size: var(--button-icon-size) !important;
    pointer-events: none;
}
sky-textfield button {
    position: absolute;
    top: 50%;
    right: 0;
    display: none;
    width: auto !important;
    transform: translateY(-50%) scale(.8);
    font-size: var(--button-icon-size) !important;
    color: var(--font-color,black) !important;
    padding: 0 4px;
}
sky-textfield:focus-within button,
sky-textfield:hover button {
    display: block;
}
sky-textfield:focus-within input,
sky-textfield:hover input {
    padding-inline-end: 30px !important;
}

sky-select {
    display: block;
}
sky-select > select, sky-select > div {
    padding-inline-end: 30px;
}
sky-select::after {
    content: "\F229";
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    padding: 6px;
    transform: translateY(-50%);
    pointer-events: none;
    font-family: "Bootstrap Icons";
    font-size: 9pt;
    color: var(--font-color);
}
sky-select.no-arrow > select {
    padding-inline-end: var(--input-padding,4px);
}
sky-select.no-arrow::after {
    content: none;
}
select:focus {
    background-color: var(--color-background) !important;
}
input[type="range"] {
    padding: .35em 0;
}
input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--input-color);
    height: .6em;
    border-radius: 10px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--font-color, black);
    height: 1.1rem;
    width: 1.1rem;    
    border-radius: 50%;
    margin-top: -.35em;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    border: none;
}
input[type="range"]::-moz-range-track {
    background-color: var(--input-color);
    height: .6em;
    border-radius: 10px;
}
input[type="range"]::-moz-range-thumb {
    background-color: var(--font-color, black);
    height: 1.1rem;
    width: 1.1rem;    
    border-radius: 50%;
    margin-top: -.35em;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    border: none;
}
sky-checkbox, sky-radio {
    display: flex;
    flex-direction: row;
    cursor: pointer;
}
sky-checkbox div:nth-child(2), sky-radio div:nth-child(2) {
    padding-top: 2px;
    flex-shrink: 1;
}
sky-datepicker {
    display: flex;
    flex-direction: row;
    align-items: center;
}
sky-camera {
    width: 120px;
    height: 120px;
    flex-grow: 0 !important;
}
sky-camera sky-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
sky-camera > * {
    max-width: 100%;
    max-height: 100%;
}
sky-camera input {
    display: none !important;
}
sky-upload, sky-upload div {
    display: flex;
    flex-direction: row;
}
sky-upload > div {
    width: 100%;
}
sky-upload button {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
sky-upload > button {
    font-size: var(--button-icon-size) !important;
    color: var(--font-color,black) !important;
    padding: 0 4px;
    transform: scale(.8);
}
sky-upload input[type="text"] {
    flex-grow: 1 !important;
    padding: var(--input-padding,4px) !important;
}
sky-upload progress {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: calc(100% - 8px);
}
sky-toggle {
    --toggle-size: 24px;
    display: flex;
    flex-direction: row;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    width: calc(var(--toggle-size) * 2) !important;
    height: var(--toggle-size) !important;
    border-radius: var(--toggle-size);
    background-color: var(--input-color);
    border: 1px solid var(--input-color);
    cursor: pointer;
    box-sizing: content-box;
    overflow: hidden !important;
}
sky-toggle .active {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
sky-toggle div:first-child, sky-toggle .active::before {
    content: "";
    display: block;
    width: var(--toggle-size);
    height: var(--toggle-size);
    border-radius: var(--toggle-size);
    background-color: var(--font-color);
    pointer-events: none;
}
sky-toggle .active::before {
    box-shadow: 0 0 6px rgba(0,0,0,.3);
}

/* Colour Picker */
sky-colorpicker {
    display: block;
    width: 52px;
    height: 52px;
    padding: 8px;
}
sky-colorpicker div {
    border-radius: var(--input-corner,0px) !important;
}
sky-colorpicker div {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.picker-popup {
    background: var(--color-background,white) !important;
    border-radius: var(--app-corners,6px) !important;
}
.picker-popup * {
    color: var(--font-color,black) !important;
    font-family: var(--font-standard,Arial);
}
.picker-popup .cp-tab {
    background-color: var(--input-color) !important;
    border-color: var(--color-background,white) !important;
    padding: var(--margin-xsmall,6px) !important;
}
.picker-popup .cp-tab.active {
    background-color: var(--color-background,white) !important;
}
.picker-popup button {
    /* border: none !important; */
    display: inline-block !important;
    border-color: rgba(0,0,0,.4) !important;
    padding: 4px !important;
    border-radius: 0px !important;
}

/* Dropdown Custom */
.dropdown-custom-options {
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
}
.dropdown-custom-options > div:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--font-color);
    opacity: .1;
}

/* QRCode */
sky-box.invalid::before {
    content: "\F6AE";
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: "Bootstrap Icons";
    font-size: var(--font-icon-size);
    color: var(--color-background);
    border: none;
    border-radius: 6px;
    background-color: var(--font-color);
    opacity: .4;
}

/* Tableview */
sky-tableview-header {
    display: flex;
    flex-direction: row;
    align-items: end;
    padding-bottom: var(--margin-xsmall);
}
sky-tableview-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--font-color);
    opacity: .16;
}
sky-tableview-cell {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: start !important;
    padding: 8px 0;
}
sky-tableview-column {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--margin-xsmall);
}
sky-tableview-column:last-child, sky-tableview-cell > *:last-child {
    padding-inline-end: 0px !important;
}
sky-tableview-column::after {
    content: "";
    display: block;
    width: 1px;
    height: var(--font-size);
    background-color: var(--font-color);
    opacity: .16;
}
sky-tableview-column:last-child:after {
    content: none;
}
sky-tableview-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-inline-start: var(--margin-xsmall);
    background-color: var(--color-background);
}
sky-tableview[data-size-class='small'] sky-tableview-cell {
    flex-direction: column;
    gap: var(--margin-xsmall);
}
sky-tableview[data-size-class='small'] sky-tableview-cell > * {
    width: 100% !important;
}
sky-tableview .tv_multi_select {
    align-self: center;
    margin-inline-end: 5px !important;
    appearance: auto !important;
    cursor: pointer;
}
/* Tableview display only last Load More */
sky-tableview.load-more-end [data-section-max] {
    display: none !important;
}
sky-tableview.load-more-end [data-section]:last-child [data-section-max] {
    display: flex !important;
}
/* Tableview Row Styles */
sky-tableview[data-row-style='alt-row-color'] [data-row-index]:nth-child(odd)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--font-color);
    opacity: .08;
    pointer-events: none;
}
sky-tableview[data-row-style='rounded'] [data-row-index]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: calc(100% - 8px);
    background-color: var(--font-color);
    border-radius: var(--input-corner);
    opacity: .1;
    pointer-events: none;
    transform: translateY(-50%);
}

/* Structural */
sky-structural {
    --structural-height: 16px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    align-items: start;
    margin-block-start: 2px;
    z-index: 0;
    overflow: hidden;
}
sky-structural::before {
    content: attr(data-tag);
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    width: auto;
    height: var(--structural-height);
    max-width: 100%;
    background: var(--color-structural);
    padding: 0 var(--margin-xsmall);
    font-family: var(--font-semibold), Arial, sans-serif;
    font-size: 8pt;
    line-height: var(--structural-height);
    color: white;
    text-transform: uppercase;
    border-radius: var(--input-corner);
    order: -100;
    z-index: 1;
}
sky-structural[data-collapsable="true"] {
    height: var(--structural-height);
}
sky-structural[data-collapsable="true"] > * {
    margin-inline-start: var(--margin-xsmall);
}
sky-structural[data-collapsable="true"]::before {
    padding-inline-start: 28px;
    align-self: stretch;
    background: linear-gradient(to right,var(--color-structural),transparent);
}
sky-structural[data-collapsable="true"].open {
    height: auto;
}
sky-structural .collapsable-arrow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 28px !important;
    margin-inline-start: 0px;
    text-align: center;
    color: white !important;
    font-size: 12px;
    line-height: var(--structural-height);
}
sky-structural.open .collapsable-arrow {
    transform: rotate(90deg);
}
sky-structural[data-tag="if"],
sky-structural[data-tag="then"],
sky-structural[data-tag="else"],
sky-structural[data-tag="switch"],
sky-structural[data-tag="case"],
sky-structural[data-tag="otherwise"] {
    border: 2px dashed var(--color-structural);
    border-radius: var(--input-corner);
    padding: 8px;
    gap: 4px;
}
sky-structural[data-tag="then"] {
    border-color: var(--color-success);
}
sky-structural[data-tag="else"] {
    border-color: var(--color-error);
}
sky-structural[data-tag="template"]:empty {
    min-height: 200px;
}

/* Spacer */
sky-spacer {
    width: 0;
    height: 0;
    visibility: hidden;
    flex-grow: 1;
    flex-shrink: 1 !important;
}

/* Busy */
sky-busy {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.7);
    z-index: 1000;
}
sky-busy::before {
    content: "";
    border-color: white !important;
    border-bottom-color: transparent !important;
}

/* Activity */
sky-activity, sky-busy::before {
    width: 32px;
    height: 32px;
    border: 4px solid var(--font-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    overflow: hidden;
}
sky-activity[data-size="small"] {
    width: 24px;
    height: 24px;
    border-width: 3px;
}
sky-activity[data-size="mini"] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

/* Segmented Controls */
sky-segments {
    display: flex;
    flex-direction: row;
    max-width: 100%;
}
sky-segments > * {
    width: auto;
    flex-grow: 1;
    flex-shrink: 1;
    border-radius: var(--input-corner);
    overflow: hidden;
    transition: flex-shrink .2s ease;
}
sky-segments > *:hover {
    flex-shrink: 0;
}
sky-segments button {
    padding: 6px var(--margin-xsmall);
    z-index: 0;
}
sky-segments button:hover::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--font-color);
    opacity: .2;
    z-index: -1;
}

/* Collapse */
sky-collapse {
    --collapse-header-height: calc(var(--font-size) + 24px);
    display: grid;
    grid-template-rows: var(--collapse-header-height);
    grid-auto-rows: 0fr;
    border-radius: var(--input-corner);
    padding: var(--margin-xsmall);
    gap: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    transition: grid-auto-rows 0.5s ease;
    align-items: normal !important;
}
sky-collapse .header {
    position: sticky;
    top: 0;
    left: 0;
    gap: var(--margin-small);
    align-items: center;
    width: calc(100% + calc(var(--margin-xsmall) * 2));
    margin-left: calc(0px - var(--margin-xsmall));
    padding: 0 var(--margin-xsmall);
}
sky-collapse .header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--font-color);
    opacity: .2;
    pointer-events: none;
}
sky-collapse .header * {
    color: var(--font-color);
}
sky-collapse .header sky-icon {
    font-size: var(--button-icon-size);
}
sky-collapse:not(.open) > *:not(.header){
    display: none !important;
}
sky-collapse.open {
    gap: var(--margin-small) !important;
    grid-auto-rows: auto;
    padding-bottom: var(--margin-xsmall) !important;
}
sky-collapse.open::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - var(--collapse-header-height));
    box-sizing: border-box;
    border: 1px solid var(--font-color);
    border-top-width: 0px;
    border-bottom-left-radius: var(--input-corner);
    border-bottom-right-radius: var(--input-corner);
    pointer-events: none;
    opacity: .2;
}
sky-collapse.open .arrow {
    transform: rotate(180deg);
}

/* Forms */
sky-form-e {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    flex-shrink: 1;
}
sky-form-e:not([data-form=""])::before {
    content: attr(data-form);
    display: block;
    width: 100%;
    font-family: var(--input-label-font,var(--font-semibold));
    opacity: calc(var(--input-label-alpha,100) / 100);
    order: -2;
}
sky-form-e > .base:not(sky-colorpicker,sky-camera,sky-preview) {
    width: 60%;
    flex-grow: 1;
}
sky-form-e .tooltip, sky-form-e .show-value {
    order: 100;
    width: 100% !important;
    flex-grow: 0;
    flex-shrink: 0;
}
sky-form-e .edit-dnd, sky-form-e .edit-btn {
    order: -1;
    width: auto !important;
    flex-grow: 0;
    flex-shrink: 0;
}
sky-form-e .edit-dnd {
    cursor: grab;
}
sky-form-e .edit-btn {
    order: 10;
}
sky-form-e .show-value {
    padding: 4px 8px;
    color: var(--button-color);
}
sky-form-e .show-value::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--button-color);
    opacity: .2;
    border-radius: 6px;
}

/* File Navigation */
.path-structure .level {
    transition: flex-shrink .3s ease;
}
.path-structure .level:hover {
    flex-shrink: 0 !important;
}

/* Info | Error */
sky-info,
sky-error {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--margin-xsmall) var(--margin-small);
    border-radius: var(--app-corners);
    background-color: var(--input-color);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    gap: var(--margin-xsmall);;
}
sky-info *,
sky-error * {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
    line-height: 120%;
}
sky-info[data-icon]:not([data-icon=""])::before,
sky-error[data-icon]:not([data-icon=""])::before {
    content: attr(data-icon);
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--font-icon), "Bootstrap Icons";
    font-size: var(--font-icon-size,18pt);
    color: var(--font-color);
    line-height: normal;
}
sky-error {
    background-color: var(--color-error);
}
sky-info[data-size='mini'],
sky-error[data-size='mini'] {
    flex-direction: row;
    padding: 6px var(--margin-xsmall);
}
sky-info[data-size='mini'][data-icon]:not([data-icon=""])::before,
sky-error[data-size='mini'][data-icon]:not([data-icon=""])::before {
    width: auto;
    font-size: 13pt;
}

/* KenBurns */
kenburns-img {
	position: absolute;
	display: block;
	opacity: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: white;
	-webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
	-webkit-transition-timing-function: ease-in-out, linear;
    transition-timing-function: ease-in-out, linear;
	-webkit-transition-duration: 0s, 1s;
    transition-duration: 0s, 1s;
}
kenburns-img.tl {
	bottom: 0;
	right: 0;
}
kenburns-img.tr {
	bottom: 0;
	left: 0;
}
kenburns-img.bl {
	top: 0;
	right: 0;
}
kenburns-img.br {
	top: 0;
	left: 0;
}

/* Scroll Snapping */
sky-container[snap] {
    scroll-snap-type: y mandatory;
}
sky-container[snap] > * {
    scroll-snap-align: start;
}
sky-container[snap="x"] {
    scroll-snap-type: x mandatory;
}

/* Sticky */
[data-sticky="top"] {
    position: sticky;
    top: var(--sticky-offset,0);
    left: 0;
    z-index: 1 !important;
}
[data-sticky="bottom"] {
    position: sticky;
    bottom: var(--sticky-offset,0);;
    left: 0;
    z-index: 1 !important;
}

/* Drag|Drop */
[draggable="true"] {
    cursor: grab;
}

/* RTL Language */
[dir='rtl'] sky-textfield button,
[dir='rtl'] sky-select::after {
    left: 0;
    right: initial;
}

/* Editable | Disabled */
[data-editable="false"], [data-editable="false"] * {
    pointer-events: none !important;
}
[data-editable="false"] input[type='text'] {
    pointer-events: auto !important;
    padding-inline-end: var(--input-padding, 4px) !important;
}
[data-editable='false']:not(sky-colorpicker,sky-form-e), sky-form-e[data-editable='false'] .base:not(sky-colorpicker) {
    opacity: .5;
}
[data-editable='false'] > :disabled {
    opacity: 1;
}

/* Backdrop Blur */
.backdrop-blur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Modals */
sky-modal-minimise-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--app-toolbar-safe-area,52px);
    display: flex;
    flex-direction: row;
    overflow: auto hidden;
    padding: 4px;
    gap: 4px;
    scroll-snap-type: x mandatory;
}
sky-modal-minimise-container:empty {
    display: none;
}
sky-modal-minimise-container > * {
    scroll-snap-align: start;
}
sky-modal-minimise-container [data-tag^="h"] {
    font-size: var(--font-h5-size) !important;
}
sky-modal-cover {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.01);
    padding: var(--margin-small);
    z-index: 10;
}
sky-modal-minimise-container sky-modal-cover {
    position: relative;
    width: 46% !important;
    flex-grow: 1 !important;
    padding: 0 !important;
    background-color: transparent !important;
    pointer-events: none !important;
}
sky-modal-minimise-container sky-modal {
    width: 100% !important;
    height: 100% !important;
    align-items: flex-start !important;
    padding: 4px 8px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    box-shadow: 0 0 8px var(--modal-shadow-color) !important;
}
sky-modal-minimise-container sky-modal-cover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid var(--modal-shadow-color);
    border-radius: 5px !important;
}
sky-modal-minimise-container sky-modal > * {
    width: 100% !important;
}
sky-modal-minimise-container .modal-minimise-hide {
    display: none !important;
}
sky-modal-cover .maximise {
    pointer-events: all !important;
}
sky-modal, sky-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--margin-small);
    width: auto;
    height: auto;
    max-width: min(100%,500px);
    max-height: 100%;
    background-color: var(--color-background);
    border-radius: var(--modal-corners);
    padding: var(--margin-small) var(--margin-def);
    overflow: hidden auto;
    /* box-shadow: 0 0 20px rgba(0,0,0,.3); */
    box-shadow: 0 0 20px var(--modal-shadow-color);
    transform: scale(0);
}
sky-modal {
    max-width: 100%;
}
sky-modal[data-margin='false'] {
    padding: 0;
}
sky-modal.ready,
sky-confirm.ready {
    animation: modal-reveal .2s ease forwards;
}
sky-confirm sky-text, sky-confirm button {
    text-align: center;
}
sky-confirm sky-text {
    line-height: 130%;
}
sky-confirm > button, sky-confirm sky-container > button {
    width: 100% !important;
}
sky-confirm button.delete {
    background-color: var(--color-error) !important;
}
#datepicker_component_modal {
    width: auto;
    height: auto;
}
@keyframes modal-reveal {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px var(--scrollbar-track-color, rgba(0,0,0,.4));
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color,rgba(0,0,0,.6));
    border-radius: 5px;
}

/* WordEditor(14) Override */
.wordeditor sky-box {
    overflow: hidden !important;
}

/* Display Modes */
@media all and (display-mode: standalone) {
    html,body {
        height: 100vh;
    }
}

/* Colour Scheme */
@media (prefers-color-scheme: dark) {
    :root {
        --scrollbar-track-color: rgba(255,255,255,0.2);
        --scrollbar-thumb-color: rgba(255,255,255,0.4);
    }
}