/* Copyright 2022-present Software Response LLC */

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     position: relative;
     user-select: inherit;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     background-color: transparent;
     border: 0 solid transparent;
     line-height: inherit;
     vertical-align: top;
     flex-shrink:0;
}

/* Scrollbar */
::-webkit-scrollbar {
     width: 8px;
     height: 8px;
}

::-webkit-scrollbar-track {
     background-color: var(--scroll-track-back);     
     border-radius: var(--radius);
}

::-webkit-scrollbar-thumb {
     background-color: var(--scroll-handle-back);
     border-radius: var(--radius);
     border: 2px solid transparent;
     background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
     background-color: var(--scroll-handle-hover);
}

::-webkit-scrollbar-track:hover {
     background-color: var(--scroll-track-hover);
}

::-webkit-scrollbar-track:active {
     background-color: var(--scroll-track-active);
}

* {
     scrollbar-width: thin;
     scrollbar-color: var(--scroll-handle-back) var(--scroll-track-back);
}

html, body, #app-body {

     font-family: var(--font-family);
     font-size: var(--font-size);

     min-width:100vw;
     width: 100vw;
     height: 100vh;
     
     margin: 0;
     padding:0;
     
     user-select: none;
     display:flex;
     flex-direction:column;
     justify-content: flex-start;
     align-items: flex-start;
     
     background: var(--body-back);
     color: var(--body-text);
}

#app-body {
     background-image: var(--body-back-image);
     display: flex;
     flex-direction: row;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
}

#app-body[route="login"] {
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

ul {
     padding-inline-start: 40px;
     overflow: unset;
}

ul li {
     overflow: unset;
}

mark {
     background-color: yellow;
     color: var(--content-text);
     padding: 0 2px;
     border: var(--content-border-internal);
     border-radius: var(--radius);
}

a {
     text-decoration: none;
}
a,
a:visited,
a:hover,
a:active {
     color: var(--link-text);
}

label {
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:flex-start;
}

input, select, textarea {
     font-family: var(--font-family);
     font-size: var(--font-size-14);
     line-height: var(--line-height);
     min-height: var(--input-height);
     color: var(--input-text);
     background-color: var(--input-back);
     border: var(--input-border);
     border-radius: var(--input-radius);
     transition: var(--transition);
     outline: none;
     box-sizing: border-box;
     padding: 0 8px;
     outline:none;
}

input:hover:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([no-style]), select:hover:not([no-style]), textarea:hover:not([no-style]) {
     background-color: var(--input-hover-back);
     color: var(--input-hover-text);
     border: var(--input-hover-border);
     outline:none;
}

input:focus:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([no-style]), select:focus:not([no-style]), textarea:focus:not([no-style]) {
     background-color: var(--input-focus-back);
     color: var(--input-focus-text);
     border: var(--input-focus-border);
     box-shadow: var(--input-focus-shadow);
     outline:none;
}

input:active {
     background-color: var(--input-focus-back);
     color: var(--input-focus-text);
     border-color: var(--input-focus-border);
     box-shadow: var(--input-focus-shadow);
     outline:none;
}

input:disabled {
     background-color: var(--input-disabled-back);
     color: var(--input-disabled-text);
     border-color: var(--input-disabled-border);
}

input[type='color'], input[type='checkbox'], input[type='radio'] {
     padding:0;
}

.input-large {
     height:40px;
}

input.good,
select.good {
     background-color: var(--color-good);
}

input.warning,
select.warning {
     background-color: var(--color-warning);
}

input.caution,
select.caution {
     background-color: var(--color-caution);
}

input.highlight,
select.highlight {
     background-color: var(--color-highlight);
}

input[id="name_ident"] {
     text-transform: uppercase;
}

input[type="color"] {
     appearance: none;
     -webkit-appearance: none;
     cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
     padding: 0;
}

input[type="color"]::-webkit-color-swatch {
     border: none;
}

input[type="color"]:focus,
input[type="color"]:active {
     outline: none;
     box-shadow: none;
     padding: 0;
}

/* input[type='tel'] {width:110px;} */
input[list],
input[list]:active,
input[list]:hover {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
}

input[sr-datalist],
input[sr-datalist]:active,
input[sr-datalist]:hover {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
}

input[list]::-webkit-calendar-picker-indicator,
input[list]::-moz-focus-inner,
input[list]::-ms-clear,
input[list]::-ms-expand {
     display: none;
}

input[sr-datalist]::-webkit-calendar-picker-indicator,
input[sr-datalist]::-moz-focus-inner,
input[sr-datalist]::-ms-clear,
input[sr-datalist]::-ms-expand {
     display: none;
}

input[no-style]:not(.lookup-input):not(.input-checkbox):not(.dayselect-checkbox),
input:disabled[no-style]:not(.lookup-input):not(.input-checkbox):not(.dayselect-checkbox),
select[no-style],
select:disabled[no-style],
textarea[no-style],
textarea:disabled[no-style],
select:disabled[no-style] > option {
     background-color: transparent;
     color: inherit;
     border-color: transparent;
     border-bottom-right-radius:0;
     border-bottom-left-radius:0;
     background-image: none;
     appearance: none;
     padding: 0;
     text-align: left;
     padding-left: 4px;
     opacity: 1;
     resize: none;
     min-height:var(--input-height);
     border-bottom:var(--input-border);
}


input[no-style1]:not(.lookup-input):not(.input-checkbox):not(.dayselect-checkbox),
input:disabled[no-style1]:not(.lookup-input):not(.input-checkbox):not(.dayselect-checkbox),
select[no-style1],
select:disabled[no-style1],
textarea[no-style1],
textarea:disabled[no-style1],
select:disabled[no-style1] > option {
     background-color: transparent;
     color: inherit;
     border-color: transparent;
     background-image: none;
     appearance: none;
     padding: 0;
     text-align: left;
     padding-left: 4px;
     opacity: 1;
     resize: none;
     min-height:var(--input-height);
}

textarea[no-style],
textarea:disabled[no-style] {
     width: 100%;
}

input[edited], select[edited], textarea[edited] {
    border-color:var(--color-edited);
}

input.login-input {
     padding-left: 44px;
}

svg {
     width:100%;
     height:100%;
     stroke-width: 0.5;
}

.input-erase {
    position: absolute;
    right: 8px;
    top: 0;

    width: 24px;
    height: 100%;
    opacity: 0.7;

    display:inline-flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;

    color: inherit;
    
    cursor: pointer;
}
.input-erase svg {
     width:80%;
     height:80%;
}

.login-input-icon {
     position:absolute;left:8px;top:5px;
     height:30px;width:30px;
     color: var(--color-text-neutral);
}
.login-input-view {
     position:absolute;right:8px;top:8px;
     height:24px;width:24px;
     cursor: pointer;
     color: var(--color-text-neutral);
}
input.login-input:focus + .login-input-icon {
     color: var(--input-focus-icon-color);
}
.login-button {
     text-align: center;
     justify-content: space-around;
     align-items: center;
     height: 40px;
     line-height: 40px;
     padding: 0 8px;
     background: var(--button-control-back);
     color: var(--button-control-text);
     border: var(--button-control-border);
     box-shadow: var(--button-shadow);
     cursor: pointer;
}
.login-button .button-icon {
     background-size: 70%;
}
.login-button:hover {
     box-shadow: var(--button-hover-shadow);
     transform: scale(0.9999);
}
#login-message-inline {
     display:inline-block;
     padding: 8px 16px;
     border-radius: var(--radius);
     font-size: var(--font-size-12);
     background-color: var(--color-warning);
     color: var(--color-light);
     text-align:center; 
     width:auto;
     margin: 0 auto;
     flex-grow:0;
     max-width:100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.body-cover {
     height: 100vh;
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     display: flex;
     z-index: 4;
     pointer-events: all;
     background: var(--loader-back);
     justify-content: flex-start;
     align-items: center;
     flex-direction: column;
     z-index: 5;
}

.wrapper-flex, .wrapper-inline {
     display:inline-flex;
     flex-direction:row;
     justify-content: flex-start;
     align-items: flex-start;
     gap: var(--gap);
     width:100%;
     max-width:100%;
     flex-shrink:0;
     flex-grow:0;
     flex-wrap:wrap;
     overflow:visible;
}
.wrapper-inline {
     display:inline-block;
     width:fit-content;
}
.wrapper-flex.flex-column {
     flex-direction:column;
}

.box {
     background-color:var(--content-back);
     color:var(--content-text);
     border:var(--content-border);
     border-radius:var(--content-border-radius);
     padding:var(--box-padding);
     min-width:300px;
     max-width:100%;
     flex-shrink:0;
}
.box-internal {
     border: var(--content-border-internal);
     border-radius: var(--internal-radius);
}
.box-hover {
     pointer-events: all;
     display: block;
     min-width: 350px;
     max-width: 600px;
     width: auto;
     height: auto;
     overflow:hidden;
     max-height: calc(100% - 50px);
     top: 25%;
     transform: translateY(-25%);
     border-radius: var(--content-border-radius);
     border: var(--content-border);
     background: var(--content-back);
     color: var(--content-text);
     box-shadow: var(--content-shadow);
     transition: var(--transition);
}

.card-box {
     display: block;
     min-width:var(--width-login);
     max-width:var(--width-login);
     margin-bottom: var(--margin);
     background: var(--content-back);
     color: var(--content-text);
     box-shadow: var(--content-shadow);
     border-radius: var(--radius);
     overflow: hidden;
}
.card-box-content {
     padding:40px;
}
.card-box-footer {
     padding:12px 40px;
     background-color: var(--content-footer-back);
     color: var(--content-footer-text);
     border-top: var(--content-border-internal);
}
.card-box-header {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 10px;
     display: block;
     text-align: left;
     display:flex;
     width:100%;
     flex-direction:row;
     align-items:flex-start;
     height:auto;
     justify-content:center;
}
.card-box-title {
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     margin: 20px 0 20px 0;
     gap: 8px;
     width:100%;
     font-family:var(--font-roboto);
     font-weight:bold;
     font-size:var(--font-size-26);
     color:var(--content-title-text);
}

.card-box-subtitle {
     display:flex;flex-direction:row;
     align-items:center;justify-content:center;
     margin:8px 0;
     width:100%;
     font-family:var(--font-roboto);
     font-weight:bold;
     font-size:var(--font-size-20);
     color: var(--content-subtitle-text)
}

.card-box-slogan {
     font-size:var(--font-size-14);
     color: var(--content-subtitle-text);
     width:100%;display:block;text-align:center;
     font-weight:normal;
}

#app-wrapper {
     flex:1;
     
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: start;
     align-items: stretch;

     height: 100vh;
     max-height: 100vh;
     min-height: 100vh;

     z-index:1;
}

#app-content {
     transition: var(--transition);
     z-index: 1;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     position:relative;
     gap: 8px;
     flex-grow: 1;
     width: auto;
     max-width: var(--mobile-width-max);
     border-radius: var(--radius);
     border:1px solid transparent;
     overflow:auto;
     padding: 8px;
     height: calc(100vh - 50px);
     max-height: calc(100vh - 50px);
     min-height: calc(100vh - 50px);

}

#app-body[route="login"] #app-wrapper,
#app-body[route="authenticate"] #app-wrapper,
#app-body[route="validate"] #app-wrapper,
#app-body[route="login"] #app-content,
#app-body[route="authenticate"] #app-content,
#app-body[route="validate"] #app-content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-content: center;
     align-items: center;
     padding: 20px;
     height:100vh;
     min-height:100vh;
     max-height:100vh;
     width:100%;
     max-width:100%;
     min-width: 100%;
     background-image: none;
     background-size: cover;
     margin: 0;
}

[onclick] {
     cursor: pointer;
}

#banner-wrapper {
     height: auto;
     position: absolute;
     z-index: 5;
     left: 0;
     right: 0;
     top: 0;
     width: 100%;
     text-align: center;
     background: var(--menu-back);
     color: var(--menu-text);
}

#banner-content {
     margin: auto;
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
     width: auto;
     max-width: 700px;
     padding: 10px;
}

#banner-text {
     width: auto;
     max-width: 700px;
     font-size: 16px;
     text-align: left;
}

#banner-button {
     font-size: 16px;
     text-align: center;
     height: 30px;
     line-height: 30px;
     width: 100px;
     border: 1px solid #fff;
     border-radius: var(--button-radius);
}

.site-header {
     background-image: url("../images/icon2.png");
     text-align: center;
     margin: auto;
}

.site-logo {
     background-image: url("../images/favicon.png");
     display: inline-block;
}

.site-text {
     font-weight: bold;
     text-align: left;
     padding-left: 15px;
     display: inline-block;
     vertical-align: top;
     font-size: 26px;
}

.password-info {
     display: inline-block;
     margin-left: 2px;
     margin-top: 3px;
     font-size: 10px;
     height: 18px;
     width: 18px;
     background-image: url("../images/info.png");
     background-size: contain;
}

label[for] {
     cursor: pointer;
}

/* Page */
.page-logo {
     background-image: url("../images/icon3.png");
     background-size: contain;
     height: 50px;
     width: 50px;
     text-align: left;
     background-position: center left;
     display: block;
     position: absolute;
     left: 10px;
     top: 10px;
     cursor: pointer;
}

.page-title {
     font-size: 20px;
     height: 50px;
     line-height: 50px;
}

.page-container {
     display: block;
     margin-bottom: 4px;
     max-width: 600px;
     border-radius: var(--radius);
     background: var(--content-back);
     color: var(--content-text);
     border: var(--content-border-internal);
     box-shadow: var(--content-shadow);
}

.page-container-header {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: start;
     width: 100%;
     min-width: 100%;
     min-height: 40px;
     height: 40px;
     padding: 8px;
     background-color: var(--header-back);
     color: var(--header-text);
     font-size:var(--font-size-20);
     font-family: "Orbitron", sans-serif;
     gap:8px;
}

.page-container-header-icon, .page-container-header-logo {
     transition: all 0.3s ease;
     height: 24px;
     width: 24px;
     min-width: 24px;
     display: inline-block;
     background-image: var(--favicon-colored);
     background-repeat:no-repeat;
     background-size:contain;
     vertical-align: top;
     flex:0;
}
.page-container-header-logo {
     width:auto;min-width:100%;max-width:100%;
     background-position:center left;
}

.page-container-title {
     width: 100%;
     display: inline-block;
     text-align: left;
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 10px;
     line-height: 30px;
}
.page-container-content {
     padding: 20px;
     width: 100%;
     display: flex;
     flex-direction:column;
     gap:8px;
     justify-content: flex-start;
     align-items:center;
}

.page-controls {
     display: flex;
     text-align: right;
     padding: 4px 4px 4px 0;
     flex-direction: row;
     justify-content: flex-start;
     flex: 0 0 auto;
}

#page-wrapper {
     height: auto;
     width: auto;
     overflow: initial;
     display: block;
}

#app-footer {
     height: 30px;
     line-height: 30px;
     padding: 0 20px;
     width: 100%;
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     top: auto;
     text-align: right;
     font-family: "SinkinSans";
}

#app-footer > a {
     margin: 0 10px;
     text-decoration: none;
     color: var(--content-text);
}

#app-footer > a:active,
#app-footer > a:hover {
     color: var(--content-text);
}

.container {
     background-color: var(--content-back);
     color: var(--content-text);
}

.container-label {
     width: auto;
     min-width: 100px;
     display: inline-block;
     text-align: right;
     margin-right: 4px;
}

.container-input {
     width: auto;
     min-width: 100px;
     display: inline-block;
     text-align: left;
}

.container-title {
     width: 100%;
     display: inline-block;
     text-align: left;
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 10px;
     line-height: 30px;
     padding:4px 8px;
}

.container-icon {
     width: 30px;
     height: 30px;
     margin-right: 10px;
     display: inline-block;
}

.container-text {
     line-height: 24px;
     text-align: left;
     padding:8px;
}

.container-text p {
     margin-bottom: 4px;
     text-align: justify;
}

.container-text:last-child {
     margin-bottom: 0;
}

.container-sub {
     display: block;
     margin: 4px;
     padding: 4px;
     border: var(--content-border-internal);
     border-radius: var(--radius);
}

#app-header {
     display:flex;
     flex-direction: row;
     align-items: center;
     justify-content: start;
     flex-shrink: 0;
     flex-grow: 1;
     min-height: 50px;
     max-height: 50px;
     height: 50px;

     background-color: var(--header-back);
     color: var(--header-text);
     border-top: 0;
     border-bottom: var(--header-border);
     border-left: 0;
     border-right: 0;
     z-index:11;
}

#app-header-controls {
     min-height: 40px;
     height: 40px;
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     padding:0 16px 0 0;
     gap:8px;
     padding: 0 8px;
     margin-right:8px;
     color: var(--header-text-faded);
}

#app-header-title {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: start;
     overflow:hidden;
     width: var(--menu-width);
     min-height: 40px;
     height: 40px;
     color: var(--header-text);
     white-space: nowrap;
     gap: 8px;
     /* background-color: var(--header-back-muted); */
     background-color: transparent;
     font-size:var(--font-size-18);
     /* border-right: var(--header-border);
     border-bottom: var(--header-border); */
     transition: var(--transition);
}
#app-header-title.menu-closed {
     width:0;
     min-width:0;
     max-width:0;
}

#app-header-page {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: start;
     overflow:hidden;
     width: auto;
     min-height: 40px;
     height: 40px;
     padding: 0 8px;
     color: var(--header-text);
     white-space: nowrap;
     gap: 8px;
     font-size:var(--font-size-18);
     flex-grow:2;
}

/* Menu */
#app-menu {
     display: flex;
     flex-direction: column;
     z-index: 11;
     flex: 0;
     overflow: hidden;
     
     width: var(--menu-width);
     min-width: var(--menu-width);
     max-width: var(--menu-width);

     height: 100%;
     max-height: 100%;
     min-height: 100%;

     background: var(--menu-back);
     color: var(--menu-text);
     font-size: var(--menu-fontsize);
     border-radius: 0;

     border:0;
     /* border-top: 0;
     border-left: 0;
     border-bottom: 0;
     border-right: var(--menu-border); */

     transition: var(--transition);

}
#app-menu.menu-closed {
     width:0;
     min-width:0;
     max-width:0;
}

#app-menu-title {
     height: 50px;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     border-bottom: var(--content-border-internal);
}

#app-header-icon, #app-header-logo {
     transition: all 0.3s ease;
     height: 30px;
     width: 30px;
     min-width: 30px;
     background-size: 80%;
     display: inline-block;
     background-image: var(--favicon-colored);
     background-repeat:no-repeat;
     background-size:contain;
     vertical-align: top;
     flex:0;
}
#app-header-logo {
     width:auto;
     min-width: var(--menu-width);
     width: var(--menu-width);
     max-width: var(--menu-width);
}

.app-icon {
     transition: all 0.3s ease;
     height: 30px;
     width: 30px;
     color: inherit;
     stroke-width: 0.5;
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:center;
}
.app-icon-small {
     height: 20px;
     width: 20px;
}
.app-icon-large {
     height: 40px;
     width: 40px;
}
.app-icon-red {
     color: var(--color-red);
}
.size-icon-1 {
     width:30px;
     min-width:30px;
     max-width: 30px;
     height:30px;
     min-height:30px;
     max-height:30px;
     flex:0;
}
.size-icon-2 {
     width:24px;
     min-width:24px;
     max-width: 24px;
     height:24px;
     min-height:24px;
     max-height:24px;
     flex:0;
}
.size-icon-3 {
     width:20px;
     min-width:20px;
     max-width: 20px;
     height:20px;
     min-height:20px;
     max-height:20px;
     flex:0;
}
.header-icon {
     display:inline-flex;
     align-items:center;
     justify-content:center;
     height:24px;
     width:24px;
     color:inherit;
     background:none;
     background-size:contain;
     background-repeat: no-repeat;
     border:none;
     padding:0;
     cursor: pointer;
     border-radius:var(--header-button-border-radius);
     background-color: var(--header-button-back);
     color: var(--header-button-text);
     transition: var(--transition);
}
.header-icon:hover, .header-icon:active {
     background-color: var(--header-button-hover-back);
     color: var(--header-button-hover-text);
}
.box-icon {
     color: var(--icon-color);
     background-color: var(--icon-back);
     width: 30px;
     height:30px;
     min-width:30px;
     max-width:30px;
     min-height:30px;
     max-height:30px;
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:center;
     border-radius:var(--radius);
}
.box-icon:hover {
     color: var(--icon-color-hover);
}
.box-icon.size-small {
     height: var(--button-height-small);
     max-height: var(--button-height-small);
     min-height: var(--button-height-small);
     width:  var(--button-height-small);
     min-width:  var(--button-height-small);
     max-width:  var(--button-height-small);
}
.inline-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: inherit;
     stroke-width: 0.5;
     height:30px;
     min-height:30px;
     max-height:30px;
     width:30px;
     min-width:30px;
     max-width:30px;
}

#app-header-title-text {
     font-size: var(--font-size-26);
     width: var(--menu-width);
     text-align: left;
     display: inline-block;
     vertical-align: top;
     opacity: 1;
     flex:1;
}
#app-header-page-text {
     flex-grow:2;
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:start;
     overflow:hidden;
     padding: 0;
     gap: var(--gap);
}
.app-header-divider {
     width:20px;
     height:20px;
     min-height:20px;
     max-height:20px;
     min-width:20px;
     max-width:20px;
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:center;
}

#app-menu-toggle {
     width:30px;min-width:30px;max-width:30px;
     height:30px;min-height:30px;max-height:30px;
     z-index:2;     
     display:inline-flex;
     flex-direction:column;
     align-items:center;
     justify-content: space-around;
     padding:4px;
     margin:0;
     flex:0;
     cursor:pointer;
     border-radius:var(--button-radius);
}
#app-menu-toggle.hide {
     display:none;
     width:0;min-width:0;max-width:0;
     height:0;min-height:0;max-height:0;
     padding:0;
     margin:0;
     visibility:hidden;
}

#app-menu-content {
     /* max-height: calc(100% - 90px); */
     max-height: calc(100% - 50px);
     overflow-x: hidden;
     overflow-y: auto;
     display: inline-flex;
     flex-direction: column;
     gap: 8px;
     width: var(--menu-width);
     min-width: var(--menu-width);
     border-right: var(--menu-border); 
     padding: 12px;
     flex-grow:1;
}

.app-menu-divider {
     width: 100%;
     height:1px;
     background-color: var(--content-border-internal-color);
     display:block;
     margin:4px 0;
     flex:0 0 auto;
}

#app-menu-footer {
     width:100%;
     display:flex;
     align-items:center;
     justify-content:center;
     
     height:40px;
     min-height:40px;
     max-height:40px;

     font-size:var(--font-size-12);
     background-color:var(--menu-footer-back);
     color: var(--menu-footer-text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     border-right: var(--menu-border); 
     border-top: var(--menu-footer-border);
}

#menu-version {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 20px;
     line-height: 20px;
     text-align: center;
     padding: 0 4px;
}

.menu-spacer-full {
     width: 100%;
     height: 50px;
}

.menu-spacer-half {
     width: 100%;
     height: 20px;
}

.menu-group-wrapper {
     width: 100%;
     height: var(--menu-element-height);
     min-height: var(--menu-element-height);
     transition: var(--transition);
     /* border:1px solid transparent; */
     border-radius:var(--radius);
     flex: 0 0 auto;
     gap:4px;
     overflow:hidden; 
}

.menu-group {
     transition: var(--transition);
     min-height: var(--menu-element-height);
     max-height: var(--menu-element-height);
     width: 100%;
     cursor: pointer;
     display: flex;
     flex-direction: row;
     gap: 8px;
     padding:0 4px 0 8px;

     align-items: center;
     justify-content: flex-start;
     background: var(--menu-group-back);
     color: var(--menu-group-text);
     border:1px solid transparent;
     border-radius: var(--radius);
     border-bottom:0;
}

.menu-group-toggle {
     width: 20px;
     height: 20px;
     display: inline-block;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     transition: var(--transition);
}
.menu-group-toggle.expanded {
     transform: rotate(90deg);
}
.menu-group-wrapper.active {
     /* border-left: 3px solid #0065d8; */
     background-color: var(--menu-wrapper-back-active);
}

.menu-group-wrapper.active .menu-group {
     background: var(--menu-group-back-active);
     color: var(--menu-group-text-active);
     /* border-bottom:0; */
}

.menu-group:hover, .menu-group-wrapper.active .menu-group:hover {
     background: var(--menu-group-back-hover);
     color: var(--menu-group-text-hover);
}

.menu-group-content {
     display: flex;
     flex-direction: column;
     overflow: hidden;
     border-left: var(--content-border-internal);
     padding:4px 0 4px 12px ;
     margin: 4px 0 0 24px;
     gap: 4px;
}

.menu-button {
     transition: var(--transition);
     min-height: var(--menu-element-height);
     height: var(--menu-element-height);
     max-height: var(--menu-element-height);
     cursor: pointer;
     width: 100%;
     background: var(--menu-element-back);
     color: var(--menu-element-text);
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     padding:0 4px 0 8px;
     gap: 8px;
     flex: 0 0 auto;
     font-weight:normal;
     border-radius: var(--radius);
     border:1px solid transparent;
}
.menu-group-content .menu-button {
     padding:0 8px;
}

.menu-button:hover, .menu-button:active {
     background: var(--menu-element-hover-back);
     color: var(--menu-element-hover-text);
}

.menu-button.menu-single {
     padding-left: 4px;
}

/* .menu-button:hover {
     background: var(--menu-element-active-back);
     color: var(--menu-element-active-text);
} */
.menu-button.active {
     background: var(--menu-element-active-back);
     color: var(--menu-element-active-text);
     font-weight:600;
     /* border-left: 3px solid #0065d8; */
}

.menu-button-icon {
     display: inline-block;
     width: var(--menu-group-icon-height);
     min-width: var(--menu-group-icon-height);
     max-width: var(--menu-group-icon-height);
     height: var(--menu-group-icon-height);
     min-height: var(--menu-group-icon-height);
     max-height: var(--menu-group-icon-height);
}
.menu-group-content .menu-button-icon {
     width: var(--menu-element-icon-height);
     min-width: var(--menu-element-icon-height);
     max-width: var(--menu-element-icon-height);
     height: var(--menu-element-icon-height);
     min-height: var(--menu-element-icon-height);
     max-height: var(--menu-element-icon-height);
}

.menu-group-icon {
     display: inline-block;
     width: var(--menu-group-icon-height);
     min-width: var(--menu-group-icon-height);
     max-width: var(--menu-group-icon-height);
     height: var(--menu-group-icon-height);
     min-height: var(--menu-group-icon-height);
     max-height: var(--menu-group-icon-height);
}

.menu-button-text,
.menu-group-text {
     opacity: 1;
     display: inline-block;
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     /* font-weight: normal; */
     transition: var(--transition);
}
.menu-group-text {
     font-size: var(--menu-group-fontsize);
     width: calc(100% - 60px);
}

.menu-button-text {
     width: calc(100% - 40px);
}

#app-menu:not(.full):not(.temp) .menu-button-icon {
     width: var(--button-height-large);
     height: var(--button-height-large);
     min-width: var(--button-height-large);
     min-height: var(--button-height-large);
     max-width: var(--button-height-large);
     max-height: var(--button-height-large);
}

#app-menu:not(.full):not(.temp) .menu-button-text,
#app-menu:not(.full):not(.temp) .menu-group-text {
     opacity: 0;
}

.menu-button-text.full {
     width: 100%;
}

.menu-category {
     transition: var(--transition);
     text-align: center;
     width: 100%;
     font-size: var(--menu-category-fontsize);
     text-transform: uppercase;
     font-weight: bold;
     margin: 4px 0 0 0;
     color: var(--menu-category-color);
     flex: 0 0 auto;
}

#menu-toggle {
     position: relative;
     /* width: 30px; */
     height: 30px;
     display: inline-block;
     cursor: pointer;
     z-index: 4;
     min-height: 30px;
     flex: 0;
     width: 100%;
     min-width: 100%;
     transition: var(--transition);
     background-image: url(../images/openmenu.png);
     background-position: 50% center;
     background-repeat: no-repeat;
     /* border-top: 1px solid rgba(255, 255, 255, 0.2); */
}

#app-menu.full #menu-toggle {
     background-image: url(../images/closemenu.png);
     background-position: 96% center;
}
#app-menu.temp #menu-toggle {
     background-position: 96% center;
}

#copyright {
     transition: var(--transition);
     position: absolute;
     bottom: 0;
     width: 180px;
     left: 0;
     right: 0;
     line-height: 20px;
     height: 20px;
     text-align: center;
     font-size: 10px;
     opacity: 0.8;
}

#app-menu:not(.full):not(.temp) #copyright {
     opacity: 0;
}

/* Tabs */
.tabs-wrapper {     
     display:flex;
     flex-grow:1;
     width:auto;
     min-width:100%;
     flex-direction:column;
     gap:4px;
}

/* Tab Bar */
.tabbar-wrapper {
     text-align: left;
     z-index: 2;
     position: relative;
     padding: 0 0 4px 0;
     gap: 4px;
     display: flex;
     flex-wrap: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
     width: auto;     
     min-width:100%;
     max-width:none;
     height:30px;
     min-height:30px;
     max-height:30px;
     
     background:transparent;
     color:inherit; 
     border:none; 
     border-bottom: var(--content-border-internal);
}

.tabbar-wrapper.tabbar-left {
     display: inline-block;
     width: 140px;
     padding: 0;
     margin-right: 8px;
     overflow: hidden;
     background: var(--content-back);
     color: var(--content-text);
     border: var(--content-border-internal);
     border-radius: var(--radius);
}

.tabbar-wrapper.tabbar-hidden {
     display: none;
     visibility: hidden;
     opacity: 0;
}

.tabs-content {
     display: block;
     z-index: 3;
     gap: 8px;
     width:auto;
     min-width:100%;
     overflow:initial;
}

.tabs-content.tabbar-left {
     display: inline-block;
}

.tabs-tab {
     transition: var(--transition);
     position: relative;
     display: inline-flex;
     flex-direction:row;
     align-items: center;
     justify-content:center;
     font-size: var(--font-size-16);
     text-align:center;
     cursor: pointer;
     z-index: 1;
     top: 0px;
     height: var(--tab-height);
     min-width:80px;
     background: var(--tab-back);
     color: var(--tab-color);
     border:var(--tab-border);
     border-bottom: 2px solid transparent;
}

.tabs-tab:hover {
     background: var(--tab-hover-back);
     color: var(--tab-hover-text);
     border-bottom: 2px solid var(--tab-hover-text);
}

.tabs-tab.active {
     top: 0px;
     height: var(--tab-active-height);
     background: var(--tab-active-back);
     color: var(--tab-active-text);
     z-index: 2;
     font-weight:bold;
     
     border-bottom: 2px solid var(--tab-active-text);
}

.tabbar-wrapper.tabbar-left .tabs-tab {
     width: 100%;
     display: block;
     border-radius: 0;
     height: 30px;
     line-height: 30px;
     top: 0;
     border: none;
     background-color: var(--content-back);
     color: var(--content-text);
     border-bottom: var(--content-border-internal);
}

.tabbar-wrapper.tabbar-left .tabs-tab:last-child {
     border-bottom: 0;
}

.tabbar-wrapper.tabbar-left .tabs-tab.active {
     height: 30px;
     line-height: 30px;
     top: 0;
     border: none;
     background-color: var(--tabbar-back-active);
     color: var(--tabbar-text-active);
}

.tabs-tab-icon {
     display: inline-block;
     height: var(--button-height);
     width: var(--button-height);
     margin-top: 2px;
     background-size: 80%;
     margin-left: 4px;
     z-index: 1;
}

.tabs-tab-text, .tabs-tab-filler {
     display: inline-block;
     padding: 0 10px 0 4px;
     text-align: center;
     width: auto;
     min-width: 60px;
     z-index: 1;
}

.tabs-tab-text.full, .tabs-tab-filler.full {
     padding: 0 10px;
}

.tabs-tab-filler {
     font-weight:bold;
     /* position:absolute; */
     z-index:0;
     width:auto;
     left:0;top:0;
     background-color:transparent;
     color:transparent;

}
.tabs-tab-text {
     position:absolute; 
}

.tabs-tab[edited]:before {
     content: "";
     float: left;
     width: 10px;
     height: 10px;
     min-height:10px;
     min-width:10px;
     flex:0;
     margin: 2px;
     background-position:center;
     background-size:contain;
     background-repeat:no-repeat;
     background-color:var(--color-edited);
     border-radius:50%;
     border-color:var(--content-border-internal);
}

.tabs-tab[edited] .tabs-tab-text {
     padding-left: 2px;
}

.tabs-tab-circle {
     background-color: var(--tabbar-border);
     position: absolute;
     top: -20px;
     right: -4px;
     width: 20px;
     height: 50px;
     z-index: 0;
     border-radius: 50%;
     transform: rotate(-45deg);
}

/* Notifications */
#notify-wrapper {
     width: 300px;
     height: auto;
     overflow: hidden;
     z-index: 1;
     position: absolute;
     right: 20px;
     top: 40px;
     background-color: var(--content-back);
     color: var(--content-text);
     box-shadow: var(--content-shadow);
     border-radius: var(--radius);
}

#notify-title {
     height: 30px;
     text-align: center;
     background-color: rgba(0, 0, 0, 0.2);
     font-size: 18px;
     line-height: 30px;
     background-color: var(--content-title-back);
     color: var(--content-title-text);
}

.notify-entry {
     height: 50px;
     line-height: 24px;
}

.notify-entry-top,
.notify-entry-bottom {
     height: 24px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: 0 10px;
}

.notify-entry-top {
     font-weight: bold;
     font-size: var(--font-size);
}

.notify-entry-bottom {
     font-weight: bold;
     font-size: 12px;
}

/* Content */
#content-header {
     transition: var(--transition);
     width: auto;
     height: 40px;
     overflow: visible;
     z-index: 4;
     white-space: nowrap;
     display: flex;
     flex-direction: row;
     align-items:center;
     justify-content:flex-start;
     gap: 8px;
     background-color: var(--header-back);
     color: var(--header-text);
     border-radius: var(--radius);
     margin-bottom:4px;
}

#content-header-title {
     flex-grow: 2;
     display: inline-block;
     font-size: 20px;
     /* height:30px;line-height:30px; */
     width: auto;
     margin-left: 10px;
     overflow: hidden;
}

#content-search {
     display: inline-flex;
     padding: 0;
     min-height: var(--button-height);     
     width: var(--button-height);
     overflow:visible;
     flex-direction:row;
     align-items:center;
     justify-content: end;
     position: relative;
     border-right: var(--header-border);
     transition: var(--transition);
     padding-right: 8px;
}

#content-search.active {
     width: 140px;
}

#content-search input {
     opacity: 0;
     width: 0;
     height: 0;
     opacity: 0;
}

#content-search.active input {
     opacity: 1;
     width: 95%;
     height: 30px;
     line-height: 30px;
     padding: 0 30px 0 4px;
     border: var(--content-border);
}

#content-search-count {
     width: 50px;
     text-align: center;
     height: 30px;
     line-height: 30px;
     position: absolute;
     left: auto;
     top: 10px;
     right: 70px;
}

#content-search-button,
#content-clear-button {
     background-color: transparent;
     border: transparent;
     position: absolute;
     right: 8px;
}

#content-search #content-clear-button {
     right: 30px;
}

#content-loader-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 10;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(5px);
}

#content-loader {
     width: 200px;
     height: 200px;
     border: 4px solid var(--content-text);
     border-radius: 50%;
     border-top-color: transparent;
     animation: spin 1s linear infinite;
     background-image:url(../images/favicon-colored.png);
     background-size: contain;
}

#content-tabs {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: center;
     font-size: var(--font-size);
     min-height: 30px;
     height: auto;
     gap: 8px;
}

.content-tab {
     display: inline-flex;
     flex-direction: row;
     width: auto;
     align-items:center;
     justify-content: space-between;
     padding: 0 8px;
     min-width: 70px;
     font-weight: normal;
     
     height: 30px;
     min-height:30px;
     max-height:30px;

     cursor: pointer;
     font-size: var(--font-size);
     
     border: var(--content-border);
     border-radius: var(--button-radius);
     background: var(--tabbar-back);
     color: var(--tabbar-text);
     transition:var(--transition);
}
.content-tab.tab-status {
     padding-left:12px;
     padding-right:4px;
}
.content-tab.tab-status::after {
     content:"";
     position:absolute;
     left:0;width:4px;bottom:4px;top:4px;margin-right:4px;
     border-top-right-radius:var(--button-radius);border-bottom-right-radius:var(--button-radius);
}
.content-tab.tab-status-create::after {
}
.content-tab.tab-status-good::after {
     background-color:var(--color-good);
} 
.content-tab.tab-status-active::after {
     background-color:var(--color-active);
} 
.content-tab.tab-status-warning::after {
     background-color:var(--color-warning);
} 
.content-tab.tab-status-highlight::after {
     background-color:var(--color-highlight);
}
.content-tab.tab-status-inactive::after {
     background-color:var(--color-inactive);
}
.content-tab.tab-status-caution::after {
     background-color:var(--color-caution);
}
.content-tab.tab-status-deleted::after {
     background-color:var(--color-deleted);
}

.content-tab:hover {
     background-color: var(--tabbar-back-hover);
     color: var(--tabbar-text-hover);
     border: var(--tabbar-border-hover);
}
.content-tab.active, .content-tab:active {
     font-weight: bold;
     background-color: var(--tabbar-back-active);
     color: var(--tabbar-text-active);
     border: var(--tabbar-border-active);
     border-bottom-width: 3px ;
}

.content-tab.tab-warning,
.content-tab.active.tab-warning {
     border-bottom-width: 4px;
     border-bottom-color: var(--color-warning);
}

.content-tab.root.root-info {
     text-align: center;
     margin-left: -8px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0px;
     border-left: 0;
     min-width: 46px;
}

.content-tab:hover {
     background-color: var(--tabbar-back-hover);
     color: var(--tabbar-text-hover);
}

.content-tab-icon {
     width: 24px;
     min-width:24px;
     max-width:24px;
     height:24px;
     min-height:24px;
     max-height:24px;
     display: inline-flex;
     flex: 0;
     flex-direction: row;
     align-items: center;
     justify-content: center;
}
.content-tab .content-tab-icon:not(.content-info) {
     margin-left:4px;
}

.content-tab-text {
     display: inline-flex;
     flex-direction: row;
     align-items:center;
     justify-content: flex-start;
     width: auto;
     flex:0;
}

.content-close {
     margin-left: 8px;
     width: 24px;
     cursor: pointer;
}

.content-info {
     min-width: 30px;
     width: 30px;
     margin-right: 0;
     padding:0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     background-size: 80%;
     border-right: 1px solid var(--button-standard-text);
}
.content-info > svg {
     height: 80%;
     width: 100%;
     stroke: currentColor;
}


.content-grid {
     min-width: 24px;
     width: 24px;
     margin-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right: 0;
}

.content-stack {
     min-width: 24px;
     width: 24px;
     margin-left: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     border-left: 0;
}

#content-pages {
     display: block;
     height: auto;
     white-space: nowrap;
     overflow: visible;
}

.content-page {
     flex-direction: column;
     gap: 8px;
     justify-content: start;
     align-items: start;
     height: auto;
     display: none;
     white-space: nowrap;
     overflow: visible;

     padding: 12px;
     min-width:500px;
     width:fit-content;

     background-color:var(--content-back);
     color:var(--content-text);
     border: var(--content-border);
     border-radius: var(--content-border-radius);
     box-shadow: var(--content-shadow);
}

.content-page.pad-0 {
     padding:0;
}

.content-page.active {
     display: flex;
}

.content-page-title {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     overflow: visible;
     font-size: var(--font-size-18);
     text-align: left;
     font-weight: bold;
     gap: 8px;
     width: calc(100% - 8px);
     margin-right:8px;
}

.content-page-title.reversed {
     flex-direction: row-reverse;
}

.content-page-title-text,
.content-page-title-controls, .content-page-title-danger {
     display:inline-flex;
     flex-direction: row;
     align-items:center;
     gap: 8px;
     justify-content:start;
     height: 30px;
     flex-grow: 0;
}

.content-page-title-text {
     flex-grow: 2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: 0 8px;
     justify-content:start;
}

.content-page-controls {
     width: 100%;
     padding: 8px;
     margin: 8px 0;
     display: flex;
     justify-content: space-around;
     align-items: center;
     flex-direction: row;
     flex-wrap: wrap;
     background-color: var(--content-back-muted);
     color: var(--content-text);
}
.page-box, .page-card {
     display:inline-flex;
     flex-direction:row;
     justify-content: flex-start;
     align-items: flex-start;
     gap: var(--gap);
     
     width: auto;
     flex-wrap:wrap;
     overflow:hidden;
     height:auto;
     flex 1 1 300px;

     padding: var(--content-padding);
     background-color:var(--content-back);
     color:var(--content-text);
     border: var(--content-border);
     border-radius: var(--content-border-radius);
     box-shadow: var(--content-shadow);
}
.page-box-title {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     overflow: visible;
     text-align: left;
     width: 100%;
     height: 30px;
     min-height:30px;
     max-height:30px;
     font-size: var(--font-size-18);
     letter-spacing: .2px;
     font-weight:600;
    border-bottom:1px solid var(--content-border-internal-color);
}
.page-box-title-text {
     display:inline-flex;
     flex-direction: row;
     align-items:center;
     gap:8px;
     height: 30px;
     min-height:30px;
     max-height:30px;
     flex-grow: 2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: 0 8px;
     justify-content:start;     
}

#item-title {
     display: inline-block;
     max-width: 200px;
     width: auto;
}

#item-close {
     width: 24px;
     height: 24px;
     margin: 4px 0 0 4px;
     background-image: url(../images/close.png);
     background-size: 90%;
     display: inline-block;
     cursor: pointer;
}

.item-status {
     display:inline-flex;
     justify-content:flex-start;
     align-items:center;
     width:100%;
     flex-wrap:wrap;
     padding:0 4px;
     height: 24px;
     line-height: 24px;
     margin-top:1px;
     border: var(--content-border-internal);
     border-radius: var(--radius);
     background-color: var(--content-back-muted);
     color: var(--content-text);
     width: calc(100% - 8px);
     font-size: var(--font-size-14);
}

.item-status-icon {
     display: inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:center;
     width: 16px;
     height: 16px;
     margin-right: 4px;
}
.item-tab-status::before {
     display: inline-block;
     width: 8px;
     height: 18px;
     border-radius:var(--radius);
     margin: 4px;
     background-color:transparent;
     border:var(--content-border-internal);
     content:"";
}
.item-status-pending {
     background-color: var(--status-pending-back);
     color: var(--status-pending-text);
     border: var(--status-pending-border);
}
.item-status-good {
     background-color: var(--status-good-back);
     color: var(--status-good-text);
     border: var(--status-good-border);
}
.item-status-bad {
     background-color: var(--status-bad-back);
     color: var(--status-bad-text);
     border: var(--status-bad-border);
}
.item-status-pending::before {
     background-color:var(--status-pending-back);
     border-color:var(--status-pending-border);
}
.item-status-good::before {
     background-color:var(--status-good-back);
     border-color:var(--status-good-border);
}
.item-status-bad::before {
     background-color:var(--status-bad-back);
     border-color:var(--status-bad-border);
}
.item-status-active {
     background-color:var(--status-active-back);
     color: var(--status-active-text);
     border-color:var(--status-active-border);
}
.item-status-active::before {
     background-color:var(--status-active-back);
     border-color:var(--status-active-border);
}
.item-status-beta {
     background-color:var(--status-beta-back);
     color: var(--status-beta-text);
     border-color:var(--status-beta-border);
}
.item-status-beta::before {
     background-color:var(--status-beta-back);
     border-color:var(--status-beta-border);
}
.item-status-hidden {
     background-color:var(--status-hidden-back);
     color: var(--status-hidden-text);
     border-color:var(--status-hidden-border);
}
.item-status-hidden::before {
     background-color:var(--status-hidden-back);
     border-color:var(--status-hidden-border);
}
.item-status-warning {
     background-color:var(--status-warning-back);
     color: var(--status-warning-text);
     border-color:var(--status-warning-border);
}
.item-status-warning::before {
     background-color:var(--status-warning-back);
     border-color:var(--status-warning-border);
}
.item-status-highlight::before {
     background-color:var(--color-highlight);
     border-color:var(--color-highlight);
}
.item-status-inactive {
     background-color:var(--status-inactive-back);
     color: var(--status-inactive-text);
     border-color:var(--status-inactive-border);
}
.item-status-inactive::before {
     background-color:var(--status-inactive-back);
     border-color:var(--status-inactive-border);
}
.item-status-caution {
     background-color:var(--status-caution-back);
     color: var(--status-caution-text);
     border-color:var(--status-caution-border);
}
.item-status-caution::before {
     background-color:var(--status-caution-back);
     border-color:var(--status-caution-border);
}
.item-status-deleted {
     background-color:var(--status-deleted-back);
     color: var(--status-deleted-text);
     border-color:var(--status-deleted-border);
}
.item-status-deleted::before {
     background-color:var(--status-deleted-back);
     border-color:var(--status-deleted-border);
}
.item-status-assigned {
     background-color:var(--status-assigned-back);
     color: var(--status-assigned-text);
     border-color:var(--status-assigned-border);
}
.item-status-unassigned {
     background-color:var(--status-unassigned-back);
     color: var(--status-unassigned-text);
     border-color:var(--status-unassigned-border);
}


.content-break::before {
     content: " ";
     display: inline-block;
     border-left: 1px solid #333;
     margin-left: 10px;
     margin-top: 4px;
     height: 20px;
}

/* Main Box */
.main-box {
     width: auto;
     display: inline-block;
     line-height: 24px;
     margin: 0 4px 4px 0;
     font-size: 16px;
     padding: 4px 10px;
     background: var(--content-back);
     color: var(--content-text);
     border: var(--content-border-internal);
     border-radius: var(--radius);
}

.main-box-row {
     display: block;
     line-height: 24px;
}

#app-submenu-backdrop {
     position:absolute;
     top:40px;
     left:0;
     right:0;
     bottom:0;
     background-color: var(--backdrop-back);
     color: var(--backdrop-text);
     z-index:5;
     border-radius:var(--radius);
}
#app-submenu {
     width: 300px;
     position: absolute;
     right: 0px;
     line-height: 30px;
     top: 48px;
     right:-304px;
     display:flex;
     flex-direction: column;
     justify-content:start;
     align-items: flex-start;
     background: var(--menu-back);
     color: var(--menu-text);
     border: var(--content-border-internal);
     z-index:5;
     gap:4px;
     padding: 16px;
     border-radius: var(--content-border-radius);
     border: var(--content-border);
     box-shadow: var(--content-shadow);
     transition: var(--transition);
}

#app-submenu.active {
     right:8px;
}

#app-submenu-header {
     display:flex;
     flex-direction:row;
     align-items:center;
     justify-content:start;
     gap:8px;
     margin-bottom:4px; 
     width: 100%;
     height: 40px;
}

#app-submenu .title-icon {
     display:inline-flex;
     flex-direction:row;
     justify-content:center;
     align-items:center;

     width: 40px;
     min-width: 40px;
     max-width: 40px;
     height: 40px; 
     min-height: 40px;
     max-height: 40px;

     flex-grow:0;
     flex-shrink:0;
     
     border:var(--content-border-internal);
     border-radius: var(--content-border-radius);
     background-color: var(--content-back-muted);
     color: var(--content-text);

     font-size: var(--font-size);
}

#app-submenu .title-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     width: 100%;
     height: 40px;
     flex-grow:1;
     flex-shrink:0;
     flex-basis:auto;
     max-width:calc(100% - 48px);
}

#app-submenu .title-top {
     font-size: var(--font-size-14);
     font-weight: bold;
     text-align: left;
     height:20px;
     line-height: 20px;
}

#app-submenu .title-bottom {
     font-size: var(--font-size-14);
     font-weight: normal;
     text-align: left;
     height:20px;
     line-height: 20px;
}

.submenu-button {
     margin-left: 4px;
     width: auto;
     height: 40px;
     line-height: 40px;
     font-weight: normal;
     cursor: pointer;
     font-size: 18px;
}

.submenu-button:hover {
     font-weight: bold;
}

.submenu-bottom {
     border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

@keyframes animate-loader-gif {
     0% { content: "•"; }
     33% { content: "• •"; }
     66% { content: "• • •"; }
     100% { content: "•"; }
}

.loader-gif::after {
     animation-name: animate-loader-gif;
     animation-duration: 3s;
     animation-iteration-count: infinite;
}

/* Support */
.cover-all {
     position: fixed;
     inset:0;
     display: flex;
     align-items: center;
     justify-content: center;
}

.cover-content {
     padding:16px;
     display:flex;
     width:100%;
     height:100%;
     z-index:1;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}

/* Button */
.button {
     width: auto;
     cursor: pointer;
     display: inline-flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     overflow:hidden;   
     gap: var(--gap);
     padding:var(--button-padding);
     font-size: var(--font-size-14);
     border-radius: var(--button-radius);
     box-shadow: var(--button-shadow);
     transition: var(--transition);  
     height: var(--button-height);
     line-height: var(--button-height);
     max-height: var(--button-height);
     min-width: var(--button-height);
}
.button:has(.button-icon){
     justify-content: flex-start;
}
.button:has(.button-icon):not(:has(.button-text)) {
    padding: 0;
    justify-content: center;
    width: var(--button-height);
    min-width: var(--button-height);
    max-width: var(--button-height);
}
.button:hover:not(.no-hover) {
     transform: var(--button-hover-transform);
     box-shadow: var(--button-hover-shadow);
}
.button:active:not(.no-hover) {
     transform: var(--button-active-transform);
     box-shadow: var(--button-shadow);
}
.button.size-small {
     height: var(--button-height-small);
     min-height: var(--button-height-small);
     max-height: var(--button-height-small);
     font-size: var(--font-size-12);
     padding: var(--button-padding-small);
     gap: var(--gap-small);
}

.button.size-small:has(.button-icon):not(:has(.button-text)) {
    width: var(--button-height-small);
    min-width: var(--button-height-small);
    max-width: var(--button-height-small);
}

.button.size-large {
     height: var(--button-height-large);
     min-height:var(--button-height-large);
     max-height:var(--button-height-large);
     font-size: var(--font-size-16);
     padding: var(--button-padding-large);
     gap: var(--gap-large);
}

.button.size-large:has(.button-icon):not(:has(.button-text)) {
    width: var(--button-height-large);
    min-width: var(--button-height-large);
    max-width: var(--button-height-large);
}
.button.on-header {
     background-color:var(--header-button-back);
     color:var(--header-button-text);
     border: var(--header-button-border);
}
.button.on-menu {
     background-color:var(--menu-button-back);
     color:var(--menu-button-text);
     border: var(--menu-button-border);
}
.button.on-title {
     background-color:var(--content-title-button-back);
     color:var(--content-title-button-text);
     border: var(--content-title-button-border);
}
.button.on-content {
     background-color:var(--content-button-back);
     color:var(--content-button-text);
     border: var(--content-button-border);
}
.button span {
     padding: 0 4px;
}
.border-onhover {
     border: 1px solid transparent;
     transition: var(--transition);
     border-radius: var(--button-radius);
     cursor:pointer;
}
.border-onhover:hover {
     border: var(--button-standard-border);
}


input[type="submit"] {
     display: block;
}

.button .button-icon {
     display: inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:center;
     height: 100%;
     flex: 0 0 var(--button-height);
     width: var(--button-height);
     min-width: var(--button-height);
     min-height: var(--button-height);
}
.button-icon svg {
     height: 60%;
     width: 60%;
     stroke: currentColor;
}
.button.size-small .button-icon {
     flex: 0 0 var(--button-height-small);
     width: var(--button-height-small);
     min-width: var(--button-height-small);
     min-height: var(--button-height-small);
}
.button.size-large .button-icon {
     flex: 0 0 var(--button-height-large);
     width: var(--button-height-large);
     min-width: var(--button-height-large);
     min-height: var(--button-height-large);
}

.button .button-text {
     display: inline-flex;
     align-items:center;
     flex-direction:row;
     justify-content:center;     
     width: auto;
     flex: 1;
     text-align: center;
     font-weight: bold;     
}
.button:has(.button-icon) .button-text {
     justify-content:flex-start;
}

.button.button-left {
     border-right: 0;
}

.button.button-left,
.button.button-mid {
     margin-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
}

.button.button-right,
.button.button-mid {
     margin-left: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
}

.button-round {
     border-radius: 20px;
}

.button-info {
     float: left;
     height:100%;
     min-height: var(--input-button-height);
     width: var(--input-button-height);
     min-width: var(--input-button-height);
     max-width: var(--input-button-height);
     max-height: 32px;
     display:inline-flex;
     justify-content: center;
     align-items: center;
     flex-direction: row;
     border-color: transparent;
     background-size: 90%;
     background-position: center;
     margin: 0;
     padding: 0;
     background-color: transparent;
}

.button-control {
     min-width: 80px;
     height: 30px;
     min-height:30px;
     max-height:30px;
     width:auto;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     cursor:pointer;
     transition: var(--transition);
     font-size: var(--font-size-14);

     background:var(--button-control-back);
     color: var(--button-control-text);
     border: var(--button-control-border);
     border-radius: var(--button-control-border-radius);
}
.button-control:hover:not(.no-hover) {
     background: var(--button-control-hover-back);
     color: var(--button-control-hover-text);
}

.button-standard {
     background: var(--button-standard-back);
     color: var(--button-standard-text);
     border: var(--button-standard-border);     
}
.button-standard:hover {
     background: var(--button-standard-hover-back);
     color: var(--button-standard-hover-text);
     border: var(--button-standard-hover-border);
}

.button-positive {
     background: var(--button-positive-back);
     color: var(--button-positive-text);
     border: var(--button-positive-border);
}
.button-positive:hover:not(.no-hover) {
     background: var(--button-positive-hover-back);
     color: var(--button-positive-hover-text);
     border: var(--button-positive-hover-border);
}

.button-negative {
     background: var(--button-negative-back);
     color: var(--button-negative-text);
     border:var(--button-negative-border);
}
.button-negative:hover:not(.no-hover) {
     background: var(--button-negative-hover-back);
     color: var(--button-negative-hover-text); 
     border: var(--button-negative-hover-border);
}

.button-caution {
     background: var(--button-caution-back);
     color: var(--button-caution-text);
     border:var(--button-caution-border);
}
.button-caution:hover:not(.no-hover) {
     background: var(--button-caution-hover-back);
     color: var(--button-caution-hover-text);
     border: var(--button-caution-hover-border);
}

.button-tabbed {
     height: var(--button-height);
     line-height: var(--button-height);
     margin-top: 2px;
}

.button-grid {
     background:var(--button-standard-back);
     color: var(--button-standard-text);
     border: var(--button-standard-border);

     width:var(--grid-button-height);
     min-width: var(--grid-button-height);
     max-width: var(--grid-button-height);
     
     height: var(--grid-button-height);
     min-height: var(--grid-button-height); 
     max-height: var(--grid-button-height);
     
     border-radius: var(--button-radius);

     cursor:pointer;
}

.button-grid:hover:not(.no-hover) {
     background-color: var(--button-standard-hover-back);
     color: var(--button-standard-hover-text);
}

.button-icon:not(:empty) + .button-text {
     padding: 0;
     margin: 0;
}

.button-inverted {
     background-color: var(--button-standard-text);
     color: var(--button-standard-back);
}

.button-auth {
     width: 80px;
     position: absolute;
     right: 0;
     bottom: 0;
     text-align: center;
     display: block;
     height: var(--button-height);
     line-height: var(--button-height);
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     border-bottom-left-radius: 0;
}

.button-dragdrop {
     width: 100px;
     min-width:100px;
     max-width:100px;
}

.button-select, .button-select-large {
     display: inline-flex;
     flex-direction: column;
     width: var(--button-height);
     min-width: var(--button-height);
     max-width: var(--button-height);
     height: var(--button-height);
     min-height: var(--button-height);
     max-height: var(--button-height);
     line-height: var(--button-height);
     padding: 0;
     margin: 0;
     justify-content: start;
     align-items: center;
     font-weight: normal;
}
.button-select-large {
     min-width:var(--button-height-large);
     max-width:var(--button-height-large);
     width:var(--button-height-large);
     min-height:var(--button-height-large);
     max-height:var(--button-height-large);
     height:var(--button-height-large);
}

.page-controls .button {
     height: var(--button-height-small);
     line-height: var(--button-height-small);
}

.page-controls .button .button-icon {
     width: var(--button-height-small);
     height: var(--button-height-small);
}

.link, .message-link {
     display: inline-block;
     cursor: pointer;
     background-color:var(--link-back);
     color: var(--link-text);     
}
.message-link {
     text-decoration: underline; 
}

.checkbox {
     width: var(--button-height-small);
     height: var(--button-height-small);
     margin-right: 2px;
     margin: 0;
     padding: 0;
     cursor: pointer;
     background: white;
     border-radius: var(--button-radius);
}

.radio-wrapper {
     display: inline-flex;
     flex-direction: row;
     justify-content: start;
     align-items: center;
     cursor: pointer;
     gap: 8px;
     flex-wrap:wrap;
     height:var(--input-height);
}
.radio-label {
     font-size: var(--font-size);
     font-weight:bold;
     height:var(--input-height);
     display: inline-flex;
     flex-direction: row;
     justify-content: start;
     align-items: center;
     background: var(--input-back);
     color: var(--input-color);
     padding: 0 8px;
     border: var(--input-border);
     border-radius:var(--button-radius);
}
.radio-label::before {
     content: "";
     display: inline-block;
     width: var(--button-height-small);
     height: var(--button-height-small);
     margin: 0;
     padding: 0;
     border: var(--input-border);
     border-radius: 50%;
     margin-right:4px;
     background: var(--input-back);
     box-sizing: border-box;
     vertical-align: middle;
}
.radio-label.radio-selected::after {
     content: "";
     display: inline-block;
     position:absolute;
     left: 11px;
     width: calc(var(--button-height-small) - 6px);
     height: calc(var(--button-height-small) - 6px);
     margin-right:7px;
     padding: 0;
     border-radius: 50%;
     background: var(--input-color);
     box-sizing: border-box;
     vertical-align: middle;
}

/* Box */
.box-popup,
.container-box,
.stack-box {
     width: auto;
     min-width: 100%;
     max-width: 1200px;
     overflow: hidden;
     display: none;
     opacity: 0;
     background: var(--content-back);
     color: var(--content-text);
     border: var(--content-border-internal);
     border-radius: var(--radius);
}

.tab-box {
     width: fit-content;
     min-width: 100%;
     overflow: visible;
     display: none;
     opacity: 0;
/* 
     background:var(--content-back);
     color:var(--content-text); 
     border:var(--content-border); 
     border-radius:var(--content-border-radius); */
     /* box-shadow: var(--content-shadow); */
}

.container-box,
.stack-box {
     display: inline-block;
     opacity: 1;
}

.box-popup-back {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     height: 100%;
     overflow: hidden;
     pointer-events: all;
     z-index: 7;
     background-color: var(--loader-back);
     border-radius: var(--radius);
     display: none;
}
.box-popup {
     position: absolute;
     overflow: hidden;
     margin: 0;
     display: none;
     z-index: 8;
     top: 50%;
     left: 50%;
     transform: Translate(-50%, -50%);
     max-height: calc(100vh - 100px);
     max-width: calc(100% - 20px);
     min-width: 300px;
     width: auto;
     box-shadow: var(--content-shadow);
}

.tab-box.active,
.box-popup.active,
.box-popup-back.active {
     display: flex;
     flex-direction: column;
     justify-content: start;
     align-items: start;
     opacity: 1;
}

.tab-box.tabbox-table {
     width: auto;
     min-width: auto;
     max-width: none;
     padding: 8px;
     width:fit-content;
}

.tab-box.tabbox-grid {
     overflow: visible;
     background: transparent;
     padding:0;
     width:auto;
     min-width:auto;
     max-width:none;
     flex-direction: column;
     align-items:flex-start;
     justify-content:flex-start;
}
.tab-box.tabbox-grid.active {
     display:inline-flex;
     flex-direction: column;
}

.tab-box.tabbox-flex.active {
     display: inline-flex;
     flex-direction: row;
}

.tab-box-title {
     width: 100%;
     background-color: var(--content-title-back);
     color: var(--content-title-text);
}

/* Box Classes */
.box-statusbar {
     width: 100%;
     height: 10px;
     border-bottom: var(--content-border-internal);
     background-color: var(--tabbar-back-active);
}

.box-statusbar.good {
     background-color: var(--color-good);
}

.box-statusbar.warning {
     background-color: var(--color-warning);
     color: #333;
}

.box-statusbar.caution {
     background-color: var(--color-caution);
}

.box-statusbar.highlight {
     background-color: var(--color-highlight);
}

.box-wrapper,
.stack-wrapper {
     display: flex;
     min-width: 100%;
     width:auto;
     gap: 0px;
     flex-direction: row;
     flex-wrap: wrap;
     flex-shrink: 0;
     overflow:visible;
     flex-shrink:0;
     justify-content: flex-start;
     align-items: flex-start;
}
.box-wrapper {
     display: flex;
     flex-direction: row;
     align-items:stretch;
     justify-content: flex-start;     
     gap:4px;

     background-color: var(--content-back);
     border: var(--content-border-internal);
     border-radius: var(--content-border-radius);
     color: var(--content-text);
}
.box-wrapper:not(.pad-0) {
     padding:8px;
}
.box-wrapper + .box-wrapper {
     margin-top: 8px;
}
.box-wrapper + .box-wrapper:not(.noborder) {
     border-top:var(--content-border-internal);
}

.box-wrapper:last-of-type,
.stack-wrapper:last-of-type {
     border-bottom-width: 1px;
}

.box-padded {
     padding: 8px;
}

.box-group,
.stack-group {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     width: fit-content;
     flex: 1;
     min-width: var(--width-box-min);
     gap: 4px;
}
.box-wrapper .box-group:not(.pad-0) {
     padding: 8px;
}

.stack-group {
     border: 0;
}

.box-group.box-image-wrap {
     flex: none;
     width: 160px;
     min-width: 160px;
}

.box-group.image-wrap-small {
     display: inline-flex;
     flex-direction: column;
     justify-content: space-around;
     flex: none;
     width: 150px;
     min-width: 150px;
     padding:0;
}

.box-group:not(.hide) + .box-group:not(.hide) {
     border-left: var(--content-border-internal);
     border-color:var(--content-border-internal-color);
}

.box-group.box-group-edit {
     background-color: var(--color-edited);
}

.box-image {
     width: 144px;
     height: 140px;
     border: var(--content-border-internal);
     border-radius: var(--radius);
     background-color: var(--content-back-muted);
     color: var(--content-text);
     background-size: contain;
     overflow:hidden;
}

.box-image-small {
     width: 140px;
     height: 100px;
}

.box-image-attach {
     width:100%;
     height:100%;
     color: var(--content-subtext);
     cursor: pointer;
     display:inline-flex;flex-direction:column;
     align-items:center;justify-content:center;
}

.box-upload-wrap {
     width:100%;
     height:100%;
}

.box-image-file {
     background-image: url("../images/filetype.png");
}

.box-image-filetype {
     left: 50%;
     top: 50%;
     transform: Translate(-50%, -50%);
     font-size: var(--font-size);
     font-weight: bold;
     width: calc(100% - 30px);
     text-align: center;
     background-color: #252525;
     color: white;
}

.box-file-buttons {
     display: flex;
     width: 100px;
     min-width: 100px;
     flex: none;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
}

.box-image-buttons {
     height: auto;
     padding: 2px;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
}

.box-image-button {
     width: 24px;
     height: 24px;
     background-color: var(--content-back);
     border: var(--content-border-internal);
     border-radius: var(--button-radius);
}

.box-image-center {
     display: inline-flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}

.box-header {
     font-weight: bold;
     font-size: var(--font-size-16);
     height: 40px;
     line-height: 40px;
     background-color: var(--content-title-back);
     color: var(--content-title-text);
     text-align: left;
     padding: 0 8px;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
}

.box-body {
     overflow: auto;
     width: 100%;
     display: block;
}

.box-button-close {
     float: right;
     height: 30px;
     width: 30px;
     border: 0;
}

.stack {
     display: block;
}

.box-title,
.stack-title {
     font-weight: bold;
     font-size: var(--font-title);
     width: 100%;
     height: 30px;
     max-height: 30px;
     min-height: 30px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 0px 8px;
     background-color: var(--content-title-back);
     color:var(--content-title-text);
     flex-grow: 1;
     gap: 4px;     
}
.box-title {
     background:transparent;
     border-bottom:var(--content-border-internal);
}

.box-wrapper .box-title {
     width: 100%;
     min-width: 100%;
     border-color:var(--content-border-internal);
}

.box-title-controls {
     flex-grow: 0;
     flex-shrink: 0;
     width: auto;
     align-items: center;
     justify-content: end;
     display: inline-flex;
     flex-direction: row;
}

.box-title-icon {
     width:30px;
     height:30px;
     background-size:70%;
     margin-right:4px;
     background-repeat:no-repeat;
     background-position:center;
}

.stack-title {
     font-size: var(--font-size);
     line-height: 30px;
     padding: 0px 10px;
}

.box-title.reduced-padding {
     padding: 0px 2px;
}

.box-title-text,
.stack-title-text {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     display: inline-flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     flex: 1;
     height: 100%;
     gap: 4px;
}
.flex-reverse .box-title-text {
     justify-content: flex-end;
}
.box-title-button {
     width: 24px;
     height: 24px;
     border: 0;
     background-color: transparent;
}
.box-subtitle {
     font-weight: bold;
     font-size: var(--font-size);
     height: auto;
     min-height:30px;
     width: 100%;
     text-align: center;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     background: var(--content-subtitle-back);
     color: var(--content-subtitle-text);
     gap: 4px;
}
.box-group .box-subtitle ~ .box-subtitle {
    margin-top:12px;
}

.box-content,
.stack-content,
.box-info {
     display: grid;
     grid-template-columns: auto 1fr;
     grid-gap: 4px;
     height: auto;
     line-height: var(--input-height);
     padding: 4px;
     width:100%;
     max-width:100%;
     min-width: 300px;
}

.box-image-wrap .box-content {
     width:100%;
     max-width:none;
     min-width: 150px;
     padding:0;margin:0;
}
.image-wrap-small .box-content {
     width:100%;
     max-width:none;
     min-width: 100px;
     padding:0;margin:0;
}

.box-wrapper, .box-group, .box-content {
     overflow:hidden;
}

.box-frame {
     display: block;
     min-width: 100%;
     /* min-width: 300px; */
     width:auto;
     padding-bottom: var(--padding);
     margin-bottom: var(--margin);
     padding:8px;
}

.box-container {
     display: block;
     width: 100%;
     min-width: 300px;
     padding-bottom: var(--padding);
}

.box-filled {
     background-color: var(--content-back);
     color: var(--content-text);
}
.box-flex {
     display: flex;
     gap: 4px;
     flex-direction: row;
     flex-wrap: wrap;
}

.box-container-title {
     background-color: var(--content-title-back);
     color: var(--content-title-text);
     font-weight: bold;
     width: 100%;
}

.box-empty-message {
     font-weight: bold;
     width: 100%;
     display: block;
     text-align: center;
     height:auto;
     font-size: var(--font-size-18);
     border: var(--content-border-internal);
     border-radius: var(--radius);
     background:transparent;
     color:inherit;
     padding: var(--padding);
}

.box-info {
     margin: 0 4px;
     padding: 4px;
}

.box-text {
     text-align:left;
     display: block;
     line-height: var(--line-height);
     padding: 4px 8px;
     font-size: var(--font-size);
}
.box-note {
     text-align: left;
     display: block;
     line-height: var(--line-height);
     padding: 4px 8px;
     font-size: var(--font-size-12);
}

.box-input-full {
     width: 100%;
     min-height: 36px;
     padding: 4px;
}

.box-description {
     min-height: 40px;
     padding: 4px;
     /* margin: 4px; */
     margin-top: 2px;
     /* display:flex;
    flex-direction:row;
    align-items:center; */
}

.box-description textarea,
.box-wrapper textarea,
.box-input-full textarea {
     width: 100%;
     min-height: 3em;
}

.box-spacer {
     width: 100%;
     height: 1px;
     min-height:1px;
     max-height:1px;
     display: block;
     margin: 0;
     padding: 0;
     border-top: var(--content-border-internal);
}

.box-controls {
     padding: 4px 8px;
     border-bottom: var(--content-border-internal);
     flex: 1;
     width: 100%;
     display:flex;
     flex-direction:row;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
}
.box-controls.button {
     height: var(--button-height-large);
     line-height: var(--button-height-large);
}
.box-attachment {
     display: flex;
     flex-direction: row;
     align-items: start;
     justify-content: space-between;
     padding: 2px;
}

.table-container {
     width: 100%;
}
.table {
     display: table;
     width: 100%;
     border-collapse: collapse;
     border-width:0px;
     overflow: visible;
}
.table-head {
     display: table-header-group;
     font-weight: bold;
     background-color: #eee;
}
.table-body {
     display: table-row-group;
}
.table-row {
     display: table-row;
}

.table-row:nth-child(even) {
     background-color: var(--row-offset-back);
     color: var(--row-offset-text);
}
.table-cell,
.table-column {
     display: table-cell;
     padding: 4px;
     border: var(--content-border-internal);
     field-sizing: content;
}
.table, .tabl-row, .table-head, .table-cell, .table-column, .table-row {box-sizing: border-box;}
.table-cell.no-wrap {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
.table-head .table-cell, .table-head .table-column {
     text-align: center;
     font-weight: bold;
     font-size: var(--font-size-16);
}

.attachment-input {
     flex: 1;
}

.box-half {
     width: calc(50% - 10px);
}

.box-row,
.box-head,
.stack-head,
.stack-row {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     width: auto;
     line-height: 24px;
     border-bottom: var(--content-border-internal);
     overflow: hidden;
}

.box-head,
.stack-head {
     background-color: var(--stack-title-back);
     color: var(--stack-title-color);
     font-weight: bold;
     height: 24px;
}

.stack-head {
     padding: 0 4px;
}

.stack-head-text {
     display: inline-block;
     width: calc(100% - 100px);
}

.stack-filter {
     display: inline-block;
     width: 100px;
     margin: 0 10 0 0;
}

.stack-filter-input {
     display: block;
     width: 100px;
     height: 20px;
     line-height: 20px;
     margin-top: 2px;
}

.box-rows .box-row:nth-child(even) {
     background-color: var(--row-offset-back);
}

.box-rows .box-row:last-child {
     border-bottom: none;
}

.box-column {
     display: inline-block;
     line-height: inherit;
     border-left: var(--content-border-internal);
     text-align: left;
     padding: 2px 4px;
}

.box-head .box-column {
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     padding: 0 2px;
}

.box-column:first-child {
     border-left: 0;
}

.box-column input,
.box-column select,
.box-column textarea {
     width: calc(100% - 4px);
}

.box-span-2 {
     grid-column: span 2;
}

.box-folder {
     height: 30px;
     min-height: 30px;
     line-height: 30px;
     width: 100%;
     cursor: pointer;
     overflow: hidden;
     flex-shrink: 0;
}
.box-folder.h40 {
     height: 40px;
     min-height: 40px;
     line-height: 40px;
}
.box-folder-content {
     display: none;
     width: 100%;
     height: 100%;
     overflow: auto;
     flex-shrink:0;
}

.box-folder.active {
     height: auto;
}

.box-folder.active .box-folder-content {
     display: block;
}

.box-folder-title:not(.box-container-title) {
     width: 100%;
     height: 30px;
     line-height: inherit;
     text-align: left;
     font-weight: bold;
     background-color: var(--folder-back);
     color: var(--folder-text);
     border-bottom: var(--content-border-internal);
}

.box-folder-title {
     height: 30px;
     line-height: 30px;
     display: flex;
     flex-direction: row;
     align-items: center;
}
.box-folder.h40 .box-folder-title {
     height: 40px;
     line-height: 40px;
}

.box-folder-title-text {
     padding: 0 8px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     float: left;
     font-size: var(--font-title);
     display:flex;flex-direction:row;align-items:center;justify-content:start;
     flex-grow:2;
}

.box-folder-icon,
.box-folder-toggle {
     width: 24px;
     height: 24px;
     margin: 0 4px;
     cursor: pointer;
     flex-grow:0;flex-shrink: 0;flex-basis: auto;
     transition: var(--transition);
}

.box-folder.active .box-folder-icon svg, .box-folder.active .box-folder-toggle svg {
     transform: rotate(90deg);
}

.box-input-row {
     display: block;
}

.box-label, .box-label-full {
     width: auto;
     /* min-width: 100px; */
     min-height: var(--input-height);
     flex: 0 0 auto;
     white-space: nowrap;
     text-align: right;
     /* padding-left: 4px; */
     font-weight: 500;
     line-height: var(--input-height);
     display: inline-flex;
     flex-direction: row;
     align-items: start;
     justify-content: end;
     gap: 4px;
}
.box-label-full {
     display:flex;
     width:100%;
     text-align:left;
     margin-bottom:4px;
     align-items:center;
     justify-content:flex-start;
}

.box-label-text:after {
     content: ":";
     position: relative;
}
.box-label-link {
     cursor: pointer;
     text-decoration: underline;
     color: var(--color-link);
     display:inline-flex;
     flex-direction:row;
     justify-content:end;
     align-items:center;
}

.box-label-logic {
     text-decoration: underline;
}

.box-value, .box-value-full {
     flex-grow: 1;
     text-align: right;
     min-height: var(--input-height);
     line-height: var(--input-height);
     width: fit-content;
     background-size: 6px 1px;
     background-position: bottom;
     background-repeat: repeat-x;
     padding-bottom: 2px;
     word-wrap: break-word;
     overflow-wrap: break-word;
     word-break: break-all;
     display: inline-flex;
     flex-wrap: wrap;
     flex-direction: row;
     align-items: start;
     gap: 4px;
}

.box-value-full {
     width: 100%;
     text-align: left;
}
.box-value-full input, .box-value-full select, .box-value-full textarea {
     width: 100%;
}

.box-value-full > .box-icon {
     width:30px;
     min-width:30px;
     max-width:30px;
     height:30px;
     min-height:30px;
     max-height:30px;
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:center;
}
.box-value-full > .box-icon > svg {
     min-width:24px;
     max-width:24px;
     height:24px;
     min-height:24px;
     max-height:24px;
}

.box-label + .box-value {
     padding-left: 2px;
}

.line-line {
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 100%);
     background-size: 6px 1px;
     background-position: bottom;
     background-repeat: repeat-x;
     padding-bottom: 2px;
}

.box-input {
     vertical-align: middle;
     width: 100%;
     flex: 2;
}

.input-days-wrapper {
     display: inline-flex;
     flex-direction: row;
     flex-wrap:wrap;
     gap: 4px;
     padding:0 2px;
     align-items: center;
     justify-content: flex-start;
     width:auto;max-width:100%;
}
.input-days-day {
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     gap: 4px;
}

.input-checkbox {
     appearance: none;
     -webkit-appearance: none;
     padding: 0;
     border-radius: 20px;
     cursor: pointer;
     position: relative;
     transition: var(--transition);

     width: var(--input-check-width);
     background: var(--input-check-back);
     border: var(--input-border);
     height: var(--input-check-height);
}
.input-checkbox::after {
     content: "";
     position: absolute;
     top: 3px;
     left: 2px;
     border-radius: 50%;

     transition: var(--transition);
     background: var(--input-check-checked-back);
     width: var(--input-check-slider);
     height: var(--input-check-slider);     
     box-shadow: var(--input-shadow);
}
.input-checkbox:checked {
     background: var(--input-check-checked-back);
     border-color: var(--input-check-checked-color);
}
.input-checkbox:checked::after {
     transform: translateX(20px);
     background: var(--input-check-back);
}
.input-checkbox-positive, .input-checkbox.input-checkbox-positive {
     background:var(--negative);
     border-color:var(--negative);
}
.input-checkbox-positive:checked {
     background: var(--positive);
     border-color: var(--positive);
}
.input-checkbox-negative:checked {
     background: var(--error);
     border-color: var(--error);
}
.input-checkbox:hover {
     border-color: var(--input-hover-border);
}
.input-checkbox-label {
     width:auto;
     text-align:left;
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:flex-start;
     gap:4px;
     cursor: pointer;
     user-select: none;
     margin-left:8px;
}

.dayselect-wrapper {
     position: relative;
     display: inline-flex;
     width: auto;
     gap:0;
}
.dayselect-day {
     margin:0;padding:0;
}
.dayselect-day.dayselect-all {
     margin-left:4px;
}
.dayselect-checkbox {
     width:1px;height:1px;overflow:hidden;position:absolute;left:0;top:0;
     background-color: var(--input-check-back);
     color:var(--input-check-color);
     border:var(--input-border);
     border-radius:var(--input-border-radius);
     line-height:1px;
     min-height:1px;max-height:1px;
     min-width:1px;max-width:1px;
     visibility: hidden;
}
.dayselect-label {
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     width: var(--input-height);
     height: var(--input-height);
     min-width:var(--input-height);
     min-height:var(--input-height);
     max-width:var(--input-height);
     max-height:var(--input-height);
     margin: 0;
     border: var(--input-border);
     border-right:0;
     border-radius:0;
     background-color: var(--input-back);     
     color: var(--input-text);
     cursor: pointer;
     user-select: none;
     font-size: var(--font-size-12);
}
.dayselect-label:hover {
     background-color: var(--input-check-hover-back);
     color: var(--input-check-hover-color);
     border: var(--input-check-hover-border);
}
.dayselect-label.dayselect-first {
     border-right:0;
     border: var(--input-border);
     border-radius: var(--input-border-radius);
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;     
     border-right:0;
}
.dayselect-label.dayselect-last {
     border: var(--input-border);
     border-radius: var(--input-border-radius);
     border-top-left-radius: 0;border-bottom-left-radius: 0;
}
.dayselect-label.dayselect-all {
     border: var(--input-border);
     border-radius: var(--input-border-radius);
     width:30px;
     min-width:30px;
     max-width:30px;
}
.dayselect-checkbox:checked + .dayselect-label {
     background-color: var(--input-check-checked-back);
     color: var(--input-check-checked-color);
     border: var(--input-border);
}
.box-input-month {
     max-width:110px;
}
.box-input-year {
     max-width:70px;
}
.box-input-day { max-width:70px; }

.box-input-hour, .box-input-minute, .box-input-second, .box-input-ampm {
     max-width: 70px;
}

.box-input.inline-input {
     float: right;
     width: calc(100% - 30px);
}

.box-input.inline-input-clear {
     width: calc(100% - 60px);
}

.box-input-missing {
     background-color: var(--input-missing-back);
     border: var(--input-missing-border);
     color: var(--input-missing-text);
}

.box-inline-icon {
     cursor: pointer;
     width: 24px;     
     max-width: 24px;
     min-width: 24px;
     height: 24px;
     max-height: 24px;
     min-height: 24px;
     flex: 0;
     display:inline-flex;
     align-items:center;
     justify-content:center;
     box-shadow:none;
}
.box-inline-icon:hover {
     box-shadow:none;
}

.box-inline-clear {
     background-color:transparent;
     border: 0;
     width: 24px;
     height: 24px;
     position: absolute;
     right: 2px;
     z-index: 1;
     background-size: 75%;
     background-image: url("../images/erase-black.png");
}

.box-input-info {
     font-style: italic;
     line-height: 20px;
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 100%);
     background-size: 6px 1px;
     background-position: bottom;
     background-repeat: repeat-x;
     padding-bottom: 2px;
}

input.box-input-error, input:disabled.box-input-error, input[no-style]:disabled.box-input-error,
select.box-input-error, select:disabled.box-input-error{
     border:var(--input-border-error);
}
.box-input-caution {
     border:var(--input-border-caution);
}
.alternate-faded:nth-child(even) {
  background: rgba(0,0,0,0.04);
}

/* File / Upload */
.upload-input {
     display: none;
}
.upload-button {
     padding: 0 4px;
     cursor: pointer;
}
.upload-name {
     margin: 0 4px;
     width: auto;
     word-wrap: nowrap;
     overflow-wrap: nowrap;
     white-space: nowrap;
     text-overflow: ellipsis;
}

/* Checkbox / Toggle */
.toggle-wrapper {
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     flex-shrink: 0;
     gap: 4px;
}
.toggle-switch {
     position: relative;
     display: none;
     height: var(--input-toggle-switch-height);
     width: var(--input-toggle-switch-width);
}
.toggle-switch.toggle-small {
     height: var(--input-toggle-switch-height-small);
     width: var(--input-toggle-switch-width-small);
}
.content-page[editing] .toggle-switch,
.content-page[edited] .toggle-switch,
.toggle-switch.active {
     display: inline-block;
}
.toggle-switch input {
     display: none;
}
.toggle-slider {
     position: absolute;
     cursor: pointer;
     display: flex;
     flex-direction: row;
     align-items: center;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 20px;
     transition: var(--transition);
     border:var(--content-border-internal);
}
.toggle-slider::before {
     position: absolute;
     content: "";
     height: var(--input-toggle-switch-size);
     width: var(--input-toggle-switch-size);
     left: 1px;
     background-color: white;
     border-radius: 50%;
     transition: var(--transition);
     background-color: #eee;
}
.toggle-switch.toggle-small .toggle-slider::before {
     height: var(--input-toggle-switch-size-small);
     width: var(--input-toggle-switch-size-small);
}

/* Move the circle to the right when checked */
.toggle-switch input:checked + .toggle-slider::before {
     left: calc(100% - var(--input-toggle-switch-size) - 1px);
}
.toggle-switch.toggle-small input:checked + .toggle-slider::before {
     left: calc(100% - var(--input-toggle-switch-size-small) - 1px);
}
.toggle-status {
     margin-left: 4px;
}

.toggle-slider.toggle-base {
     background-color: var(--input-back);
}
.toggle-slider.toggle-green {
     background-color: var(--color-green);
}
.toggle-slider.toggle-red {
     background-color: var(--color-red);
}
.toggle-slider.toggle-yellow {
     background-color: var(--color-yellow);
}
.toggle-slider.toggle-cyan {
     background-color: var(--color-cyan);
}
.toggle-slider.toggle-blue {
     background-color: var(--color-blue);
}

/* Assign / Unassign */
.box-assign-wrapper {
     display: flex;
     position: relative;
     flex-direction:row;
     gap: var(--gap);
     height: calc(100% - 50px);
     flex-shrink: 0;
     flex-basis: auto;
     overflow:visible;
}
.box-assign-group {
     display:inline-flex;
     flex-direction:column;
     gap: var(--gap);
     width:auto;
     min-width: 300px;
}
.box-assign-group-title {
     display:flex;
     flex-direction:row;
     align-items: center;
     justify-content: space-between;
     width: 100%;
}

.box-assign-grid,
.box-available-grid {
     border: var(--content-border-internal);
     border-radius: var(--radius);
     min-height:300px;height:auto;
     flex-grow:0;flex-shrink:0; 
     /* max-height:400px; */
}

.box-assign-controls {
     display: inline-flex;
     flex-direction: column;
     width: 60px;
     align-items: center;
     justify-content: space-around;
     height:100%;
     min-height:300px;
}

.only-icon {
     background-color: transparent;
     border: 0;     
}
.icon-inline {
     height:24px;
     width:24px;
     min-width:24px;
     max-width:24px;
     min-height:24px;
     max-height:24px;
     background-color: transparent;
     border: 0;
}

.open-icon {
     width: var(--button-height);
     height: var(--button-height);
     background-size: 85%;
}

.box-message {
     display:flex;
     flex-direction:row;
     align-items:center;
     justify-content:start;
     flex-wrap:wrap;
     font-weight:bold;
     min-width:100%;width:100%;max-width:100%;
     min-height:30px;height:auto;line-height:30px;
     font-size:var(--font-size-16);
     padding:4px;border-radius:var(--radius);
     background:var(--content-back-muted);
}

.box-message-debug,
.box-message-error,
.box-message-notify {
     width: 100%;
     line-height: 20px;
     font-size: var(--font-size);
     padding: 4px;
     margin: 0 0 8px;
     user-select: text;
     color: var(--content-text);
     background-color: var(--content-back);
     border-radius: var(--radius);
     border: 2px solid #0000ff;
     word-wrap: break-word;
     text-wrap:auto;
     overflow-wrap: break-word;
}

.box-message-error {
     border: 2px solid #ff0000;
}

.box-message-notify {
     text-align: center;
     padding: 0 10px;
     font-size: 16px;
     line-height: 30px;
     min-height: 30px;
     border: 1px solid #ff0000;
     color: #ff0000;
}

.box-message-notify::before {
     content: "~";
     margin-right: 4px;
}

.box-message-notify::after {
     content: "~";
     margin-left: 4px;
}

/* Info Box */
#info-backdrop {
     display: block;
     position: fixed;
     inset:0;
     background-color: var(--backdrop-back);
     transition: var(--transition);
     opacity: 0;
}

#info-backdrop.active {
     opacity: 1;
}

.info-wrapper {
     position: absolute;
     display:flex;
     flex-direction:column;
     justify-content: start;
     align-items: start;
     width: 0;
     height: 0;
     pointer-events: all;
     z-index: 6;
     overflow:hidden;
     background-color: var(--content-back);
     color: var(--content-text);
     transition: var(--transition);
     border: var(--content-border-internal);
     border-radius: var(--content-border-radius);
     box-shadow: var(--content-shadow);
}

.info-wrapper.position-right { 
     width: 0;
     left: auto;
     bottom:8px;
     top:8px;
     right: 8px;   
     height:calc(100% - 16px);
}

.info-wrapper.position-left {
     left: 8px;
     width: 0;
     right: auto;
     top: 8px;
     bottom: 8px;
     height:calc(100% - 16px);
     border-left: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
}

.info-wrapper.position-top {
     top: 8px;
     width: calc(100% - 16px);
     height: auto;
     left: 8px;
     right: 8px;
     bottom: auto;
}

.info-wrapper.position-bottom {
     bottom: 20px;
     width: calc(100% - 16px);
     height: auto;
     left: 8px;
     right: 8px;
     top: auto;
     border-bottom: 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
}

.info-wrapper.position-right.active, .info-wrapper.position-left.active {
     min-width: 500px;
     width: auto;
}

.info-wrapper.position-top.active {
     height: auto;
}

.info-wrapper.position-bottom.active {
     height: auto;
}
.info-wrapper.position-center {
     
     top: 50%;
     left: 50%;
     height: auto;
     width: auto;
     transform: Translate(-50%, -50%);
     max-height: calc(100% - 100px);
     min-width: 300px;
     right: auto;
     bottom: auto;
     border: var(--content-border);
     border-radius: var(--radius);
     box-shadow: var(--content-shadow);
}
.info-wrapper.position-full.active {
     width:100%;
     max-width:800px;
}

@media (max-width: 400px){
     .info-wrapper.position-right.active, .info-wrapper.position-left.active {
          min-width:300px;
          width: auto;
          max-width:100%;
     }
}

.info-title {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     text-align: left;
     font-size: var(--font-size-18);
     font-weight: bold;
     max-width: 100%;
     min-width: 100%;
     width: auto;
     min-height:40px;
     max-height:40px;
     padding:4px 8px;
     white-space: nowrap;
     border-bottom: var(--content-border-internal);
     background-color: var(--content-title-back);
     color: var(--content-title-text);
     flex-shrink: 0;
     flex-grow: 0;
}

.info-wrapper.position-top .info-title,
.info-wrapper.position-bottom .info-title {
     width: 100%;
     max-width: 100%;
}

.info-wrapper.position-top .info-content,
.info-wrapper.position-bottom .info-content {
     width: 100%;
     max-width: 100%;
}

.info-title-text {
     display: inline-flex;
     flex-wrap:nowrap;
     flex-direction:row;
     align-items: center;
     justify-content: start;
     flex-grow: 2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
.info-title-controls {
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: end;
     flex-grow: 0;
     flex-shrink: 0;
     gap:4px;
     width: auto;
}

.info-close {
     height: var(--button-height);
     min-height: var(--button-height);
     max-height: var(--button-height);
     width: var(--button-height);
     max-width: var(--button-height);
     min-width: var(--button-height);
     cursor: pointer;
     background-color: transparent;
     border: 0;
     padding: 0;
     box-shadow: none;
}
.info-close svg {
     width: 20px;
     height: 20px;
}

.info-content {
     height: auto;
     display: block;
     overflow-y: auto;     
     width: 100%;
     min-width: 100%;
     max-width: 100%;
     padding:var(--content-padding);
     flex-grow:1;
     flex-shrink:1;
     flex-basis:auto;
}
.info-input, .info-textarea, .info-select {
     width: 100%;
     display: inline-block;
}
.info-option-icon {
     width: 16px;
     height: 16px;
     background-size: 70%;
     flex-shrink: 0;
     flex-grow: 0;
     flex-basis: auto;
}

.info-wrapper.position-right .info-content,
.info-wrapper.position-left .info-content {
     height: calc(100% - 50px);
}

.info-wrapper.position-top .info-content,
.info-wrapper.position-bottom .info-content {
     width: 100%;
     height: 300px;
}

.info-column {
     display:inline-flex;
     flex-direction: column;
     flex-wrap: wrap;
     flex: 1 0 auto;
}

.info-spacer {
     border-top: var(--content-border-internal);;
     height: 1px;
     width: 100%;
     margin-top: 4px;
     padding-bottom: 3px;
}

.info-row {
     display: flex;
     flex-direction: column;
     font-size: var(--font-size);
     text-align: left;
     width:100%;
}

.info-row-label {
     font-weight: bold;
     line-height: 24px;
     min-height:24px;
     margin: 4px 0 4px 0;
     display:inline-flex;
     flex-direction:row;
     flex-wrap:wrap;
     align-items: center;
     justify-content: start;
     gap: 4px;
}

.info-row-value {
     margin: 0 0 8px 0;
     display: inline-flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
     justify-content: flex-start;
     gap: 4px;
     min-height:30px;
     line-height:30px;
     flex: 1 0 auto;
}
.info-row-value input, .info-row-value select, .info-row-value textarea {
     width: 100%;
}

.info-row-icon {
     width: 20px;
     height: 20px;
     min-width:20px;
     max-width:20px;
     min-height:20px;
     max-height:20px;
     flex-shrink: 0;
     flex-grow: 0;
     flex-basis: auto;
}
.info-row-value input:not([type='color']):not([type='checkbox']):not(.input-hidden),.info-row-value select,.info-row-value select > option,.info-row-value textarea {
     width: 100%;
     display:inline-block;
}
.info-row-value input {
     flex: 1;
}
.info-row-value [type="color"],
.info-row-value [type="checkbox"] {
     width: var(--input-height-px);
     max-width: var(--input-height-px);
     min-width: var(--input-height-px);
     height: var(--input-height-px);
     max-height:var(--input-height-px);
     min-height:var(--input-height-px);
     flex-shrink: 0;
     flex-grow:0;
     flex-basis:auto;
}

.info-controls {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     padding: 4px 8px;
     gap:4px;
     border-bottom:var(--content-border-internal);;
     flex:1 0 auto;
}

/* Context */
#context-backdrop {
     display: none;
     position: absolute;
     width: 0;
     height: 0;
     z-index: 70;
}

#context-backdrop.active {
     display: block;
     width: 100%;
     height: 100%;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
}

.context-wrapper {
     display: inline-block;
     width: auto;
     min-width: 200px;
     max-width: 300px;
     position: absolute;
     left: 50%;
     top: 25%;
     transform: translateX(-50%);
     background-color: var(--content-back);
     color: var(--content-color);
     border: var(--content-border);
     border-radius: var(--content-border-radius);
     box-shadow: var(--content-shadow);
     opacity: 0;
     transition: opacity 0.1s ease;
}

.context-wrapper.active {
     opacity: 1;
     z-index: 1;
}

.content-back {
     background-color: var(--content-back);
     color: var(--content-text);
}

.content-box {
     background-color: var(--content-back);
     color: var(--content-text);
     border: var(--content-border);   
     border-radius: var(--content-border-radius);  
}
.content-icon {
     width: 24px;
     min-width: 24px;
     max-width: 24px;
     height: 24px;
     min-height 24px;
     max-height:24px;
     flex-shrink: 0;
     flex-grow: 0;
     flex-basis: auto;
     color: var(--content-subtitle-text);
}
.content-subtitle {
     color: var(--content-subtitle-text);
     font-size: var(--font-size-14);
     font-weight:normal;
}
.content-shadow {
     box-shadow: var(--content-shadow);
}

.context-content {
     display: block;
     width: 100%;
     padding: 12px;
}

.context-row-spacer {
     border-top: var(--content-border-internal);
     height: 1px;
     width: 100%;
     margin-top: 4px;
     padding-bottom: 3px;
}

.context-row {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: start;
     align-items: center;
     height: 30px;
     line-height: 30px;
     min-height: 30px;
}
.context-row-selected {
     font-weight: bold;
}

.context-icon {
     flex: 0;
     width: 30px;
     max-width: 30px;
     min-width: 30px;
     height: 30px;
     padding: 0 4px;
     background-size: 70%;
     color: var(--content-text);
}

.context-text {
     flex: 1;
     height: 30px;
     line-height: 30px;
     padding: 0 8px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.context-row.context-row-select {
     padding: 0 4px;
     cursor: pointer;
     font-weight: bold;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.context-row:hover {
     background-color: var(--content-back-muted);
     border-radius: var(--content-border-radius);
}

.content-control {
     display: inline-block;
     height: 40px;
     line-height: 40px;
     min-width: 140px;
     background-color: var(--button-standard-back);
     color: var(--button-standard-text);
     border: var(--button-standard-border);
     border-radius: var(--button-radius);
     padding: 0 8px;
     overflow:hidden;
}

.content-control input {
     height: 32px;
     line-height: 32px;
     border: 0;
     background: transparent;
     outline: none;
     margin: 4px 0;
}

.content-button {
     width: 40px;
     min-width: 40px;
     max-width: 40px;
     height: 40px;
     min-height: 40px;
     max-height: 40px;
     display: inline-block;
     background-size: 60%;
     overflow:hidden;
     cursor: pointer;
     border: var(--content-button-border);
     color: var(--content-button-text);
     background-color: var(--content-button-back);
     border-radius: var(--button-radius);
}

.content-control-button {
     min-width: 60px;
     padding: 0;
     margin-left: 4px;
     text-align: center;
     font-weight: bold;
}
.content-control-button-auto {
     width: auto;
     min-width: auto;
     max-width: none;
     padding: 0 8px;
}
.content-control-icon {
     padding: 0;
     min-width: 40px;
     max-width: 40px;
     width: 40px;
}

.content-button:hover {
     background-color: var(--content-button-hover-back);
     color: var(--content-button-hover-text);
     border: var(--content-button-hover-border);
}
.content-button.active {
     background-color: var(--content-button-active-back);
     color: var(--content-button-active-text);
     border: var(--content-button-active-border);
}

.content-selector {
     position:absolute;
     right:44px;
     top:44px;
     padding:8px;
     min-width:200px;
     max-width:300px;
     width:auto;
     height:auto;
     z-index:1;
     display:none;
     opacity:0;
     transition: var(--transition);
}
.content-selector.active {
     display:block;
     opacity:1;
}

.content-selector-row {
     height:30px;
     line-height:30px;
     font-size:var(--font-size-14);
     padding:0 4px;
     border-radius:var(--radius);
}
.content-selector-row:nth-child(even){
     background-color:var(--row-offset-back);
     color:var(--row-offset-text);
}
.content-selector-row.active, .content-selector-row.selected, .content-selector-row:hover {
     font-weight: bold;
}

/* Restriction */
.restriction-wrapper {
     display: flex;
     flex-direction: column;
     min-width: 300px;
     max-width: 740px;
     padding: 4px;
}
.restriction-wrapper:not(:last-child) {
     border-bottom:var(--content-border-internal);
}
.restriction-group {
     display: flex;
     flex-direction: row;
     width:100%;
     gap: 4px;
     flex: 1;
     padding-bottom:8px;
}
.restriction-list {
     display:flex;flex-direction:column;
     gap:4px;
     min-width:220px;
     flex:1;
}
.restriction-controls {
     display:flex;flex-direction:column;
     gap:4px;
     flex:1;
     justify-content:space-around;
     align-items: center;
}
.restriction-assigned,
.restriction-available {
     min-width: 200px;
     min-height: 100px;
     height: 100px;
     max-height: 100px;
     background-color:var(--input-back);
     color:var(--input-color);
     border: var(--content-border-internal);
     border-radius: var(--radius);
     display: inline-block;
     overflow-y: auto;
     overflow-x: hidden;
}

.restriction-controls {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: 60px;
}

.association-row {
     width: 100%;
     height: 20px;
     line-height: 20px;
     text-align: left;
     padding: 0 4px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     border-bottom: var(--content-border-internal);
     cursor: pointer;
}

.association-row:hover {
     background-color: var(--grid-hover-back);
     color: var(--grid-hover-text);
}

.association-row.selected {
     background-color: var(--grid-hover-back);
     color: var(--grid-hover-text);
}

/* Links */
.link-file-container {
     display: flex;
     flex-direction: column;
     gap: 4px;
     padding: 4px;
     border: var(--content-border-internal);
     border-radius: var(--radius);
}
.link-file-row {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     gap: 4px;
     padding: 4px;
}
.link-file-button {
     flex: 0;
     min-width: 60px;
     text-align: left;
}
.link-file-name {
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.link-file-row:nth-child(even) {
     background-color: var(--row-offset-back);
     color: var(--row-offset-text);
}

/* Message */

.message-title {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content:space-between;
     width: 100%;
     font-size: var(--font-size-18);
     font-weight: bold;
     padding: 8px 20px;
     white-space: nowrap;
     background-color: var(--content-title-back);
     color: var(--content-title-text);
}
.message-title-icon {
     width: 30px;
     height: 30px;
     margin-right: 10px;
     display: inline-block;
}

.message-content {
     height: auto;
     overflow-y: auto;
     padding: 20px;
     max-width: 100%;
}

.message-content.content-flex {
     display: flex;
     flex-direction: row;
     justify-content: stretch;
     align-items: stretch;
     gap: 8px;
}

.message-text {
     display:inline-flex;
     flex-grow:1;
     flex-direction:column;
     align-items:flex-start;
     justify-content: center;
     gap:8px;
     line-height: 24px;
     text-align: left;
     font-size: var(--font-size);
     height: auto;
     min-height: 100%;
     width: auto;
     word-wrap: break-word;
     overflow-y:auto;
     width:100%;
     flex: 1;
}
.message-text p, .message-text div, .message-text span{
     margin: 0 0 8px 0;
     word-wrap: break-word;
     overflow-wrap: break-word;
     width:100%;
     max-width:100%;
     min-width:100%;
}
.message-controls {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     gap: 8px;
     margin-top: 12px;
}

.message-icon {
     float: left;
     height: 100%;
     min-height:100%;
     display:inline-flex;
     justify-content:flex-start;
     align-items:flex-start;
     flex-direction:column;
     min-width: 50px;
}
.message-icon svg {
     width: 50px;
     height: 50px;
     stroke-width: 1px;
}

.message-close {
     float: right;
     height: var(--button-height);
     width: var(--button-height);
     margin-top: 2px;
     cursor: pointer;
     background-color: transparent;
     border: 0;
}

#page-messages {
     position: absolute;
     right:100px;
     bottom: 20px;
     width: auto;
     height: auto;
     overflow: visible;
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:start;
     gap:8px;
     z-index:9;
}

.page-message {
     padding: 4px 8px;
     width: 100%;
     margin: 0 0 4px 0;
     font-size: var(--font-size-14);
     font-weight: bold;
     height: auto;
     line-height: 20px;
     width: auto;
     min-width: 100px;
     display:inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
     border: var(--content-border-internal);
     background-color: var(--content-back);
     color: var(--content-text);
     border-radius: var(--radius);
}

.grid-icon {
     width: 20px;
     height: 20px;
     min-width: 20px;
     min-height: 20px;
     background-size: 70%;
     flex-shrink: 0;
     flex-grow: 0;
     flex-basis: auto;
}

/* Clock */
.clock-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     gap: var(--content-gap);
}
.clock {
     display: flex;
     width: 300px;
     min-width: 300px;
     max-width: 300px;
     flex:0 0 auto;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
}
.clock-time {
     font-size: var(--font-size-26);
}
.clock-info {
     width: 100%;
     min-width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
}
.clock-label {
     font-size: var(--font-size-20);
     white-space: nowrap;
     overflow: hidden;
}
.clock-timezone {
     font-size: var(--font-size-14);
     padding: 0 4px;
     min-width: 100%;
     white-space: nowrap;
     overflow: hidden;
     display: none;
}

/* Image */
.account-image {
     border-radius: 50px;
     border: var(--content-border-internal);
     text-align: center;
     align-items: center;
     font-weight: bold;
     font-size: var(--font-size-18);
     display: flex;
     flex-direction: row;
     justify-content: center;
}

.image-size-50 {
     width: 50px;
     height: 50px;
}

.image-size-40 {
     width: 40px;
     height: 40px;
}

.image-size-30 {
     width: 30px;
     height: 30px;
}

/* Tags */
.app-tag-wrapper {
     display: flex;
     flex-direction:column;
     gap:4px;
     width: 100%;
     flex-wrap: wrap;
}
.app-tag-list {
     display: flex;
     flex-wrap: wrap;
     list-style: none;
     padding: 0;
     margin: 0;
     gap:4px;
}
.app-tag-list li {
     padding:0 4px;
     border-radius: var(--radius);
     border:var(--content-border-internal);;
     background-color:var(--input-back);
     color:var(--input-text);
     display:inline-flex;
     height:30px;line-height:30px;
     font-size: var(--font-size-14);
     align-items: center;
}
.app-tag-list li div {
     background: none;
     color: var(--content-text);
     border: none;
     margin:0 4px 0 8px;
     cursor: pointer;
     font-size:var(--font-size-14);
     font-weight: bold;
     pointer-events: all;
}
input[app-tag] {
     flex: 1;
     min-width: 120px;
}

/* Scanner */
#scanner-wrapper {
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     background-color: var(--loader-back);
     width: 100%;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
     justify-content: start;
     align-items: center;
     padding-top: 70px;
     z-index: 5;
}

#scanner-container,
#scanner-message,
#scanner-results {
     min-width: var(--width-min);
     width: var(--width-min);
     max-width: var(--width-min);
     height: auto;
     display: flex;
     flex-direction: column;
     margin-bottom: 8px;
     background-color: var(--content-back);
     color: var(--content-text);
     border: var(--content-border-internal);
     border-radius: var(--radius);
}

#scanner-message {
     width: 100%;
     text-align: center;
     padding: 4px;
}

#scanner-results-header {
     padding:4px;font-size:var(--font-size-18);
     font-weight: bold;
     text-align: center;
}
.scanner-result {
     padding: 4px;
     border-bottom: var(--content-border-internal);;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     gap:4px;
     word-wrap: break-word;
     overflow-wrap: break-word;
}
.scanner-result-text a {
     text-decoration: underline;
}

#scanner-message-feedback {
     width: 100%;
     height: 30px;
     line-height: 30px;
     text-align: center;
     font-weight: bold;
     font-size: var(--font-size-16);
}

#scanner-camera-select {
     width: 100%;
     font-size: var(--font-size-16);
     padding: 4px 8px;
     text-align: left;
     font-weight: bold;
     display:flex;
     flex-direction: row;
     gap:4px;
     align-items: center;
     justify-content: start;
}
#scanner-camera-select select {
     flex:1;
     min-width: 120px;
}

#scanner-camera {
     width: calc(100% - 60px);
}
#scanner-reader {
     min-width: 300px;
     width:auto;
     min-height:150px;
     height:auto;
     border-radius:var(--radius);
     margin:4px;
     border:4px solid transparent;
}
#scanner-reader.match-found {
     border-color:var(--color-good);
}
#scanner-reader.match-not-found {
     border-color: var(--color-highlight);
}
#scanner-pause {
     position:absolute;
     right:12px;bottom:12px;
     width:30px;
     max-width:30px;
     min-width:30px;
     height:30px;
     max-height:30px;
     min-height:30px;
}

#qr-shaded-region {
     overflow: visible;
}

.box-assign-content .srGrid {
     border: var(--content-border-internal);
}

/* Loader */
.loader-wrapper {
     position: absolute;
     left: 0px;
     right: 0px;
     top: 0px;
     bottom: 0px;
     width: 100%;
     height: 100%;
     border-radius: var(--radius);
     overflow: hidden;
     z-index: 10;
     background-color: var(--loader-back);
     color: var(--loader-text);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-content: center;
     align-items: center;
     opacity: 0;
     padding: 20px;
}

.loader-image {
     width: 100px;
     height: 100px;
     display: block;
}

.loader-content {
     background: var(--content-back);
     color: var(--content-text);
     padding: 20px;
     border: var(--content-border);
     border-radius: var(--radius);
     box-shadow: var(--content-shadow);
     font-size:var(--font-size-24);
     font-weight: 600;
     min-width:300px;
     width:auto;
     max-width:400px;
     gap:16px;
     display:flex;
     flex-direction:column;
     justify-content:flex-start;
     align-items:center;
}
.loader-text {
     display:flex;
     flex-direction:column;
     justify-content:flex-start;
     align-items:center;
     gap:4px;
}
.loader-submessage {
     width:100%;
     text-align: center;
     display:flex;
     flex-direction:row;
     align-items:center;
     justify-content:center;
}

.loader-gif {
     display:inline-block;
     width: var(--loader-size);
     height: var(--loader-size);
     border: var(--loader-width) solid var(--loader-text);
     border-top: var(--loader-width) solid transparent;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
}
@keyframes spin{
     from { transform: rotate(0deg); }
     to   { transform: rotate(360deg); }
}

/* Attachments */
.attach-wrapper {
     display: flex;
     width: 100%;
     flex-direction: column;
     gap: 4px;
}

/* Text Editor */
.text-editor {
     display: block;
     margin: 4px;
}

.text-editor-text {
     min-height: 100px;
     background-color:var(--input-back);
     color:var(--input-text);
}

/* Map */
.map-box-wrapper {
     pointer-events: all;
     padding: 0;
     border: 0;
     overflow:hidden;
     width:100%;
     min-width:200px;
     min-height:200px;
     height:auto;
}

.map-box {
     border-collapse: collapse;
     border-style:solid;
     border: var(--content-border-internal);
     border-radius: var(--radius);
     height: 100;
     width:100%;
     height:100%;
     pointer-events: none;
}

.map-box:focus {
     outline: none;
}

/* Viewer */
#viewer-wrapper {
     display: block;
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     z-index: 12;
     width: 100%;
     height: 100%;
     background-color: var(--body-back);
     color: var(--body-text);
     padding: 8px 16px;
}
#viewer-title {
     height:30px;
     display:flex;
     flex-direction:row;
     align-items:center;
     justify-content:space-between;
     padding:0 8px;     
}
#viewer-close {
     position: relative;
     width: 30px;
     height: 30px;
     cursor: pointer;
}

#viewer-name {
     position: relative;
     height: 30px;
     line-height: 30px;
     font-size: 18px;
     text-align: left;
     width: calc(100% - 100px);
     flex: 1 0 auto;
     font-size: 16px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
}

#viewer-content {
     display: block;
     width:100%;
     height:calc(100% - 40px);
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     overflow:auto;
     border-radius: var(--radius);
     border: var(--content-border-internal);
}
#viewer-content.notitle {
     height:100%;
}


.viewer-image {
     display: block;
     width: auto;
     height: auto;
     max-width: 100%;
     border-radius: 4px;
     background-color: var(--content-back-muted);
}
video.viewer-image {
     object-position: top;
     height: auto;
}
.viewer-lesson {
     border-radius:var(--radius);
     background-color:var(--content-back-muted);
     color:var(--content-text);
}

/* Other */
.image-placeholder {
     width: 90%;
     height: 90%;
     border: 2px solid white;
     background-color: grey;
     border-radius: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     font-size: 20px;
     font-weight: bold;
}

.image-neutral {
     background-color: #d4f959;
     color: #333;
}

.image-male {
     background-color: #59a4f9;
     color: #333;
}

.image-female {
     background-color: #a159f9;
     color: #333;
}

.image-input {
     display: none;
}
.image-input-button {
     width:150px;
     height:150px;
     background-image:url(../images/imagecapture-faded.png);
     background-size:contain;
     background-repeat:no-repeat;
     background-position:center;
     background-color:var(--input-back);
     border:var(--content-border-internal);
     border-radius:var(--button-radius);
     color:var(--input-text);
}

.image-primary {
     background-color:var(--input-check-back);
     color:var(--input-check-color);
     border-radius:var(--button-radius);
     border:var(--input-border);
     display:inline-flex;
     flex-direction:column;
     justify-content:flex-start;
     align-items:center;
     position:absolute;
     right:4px;top:4px;
     width:var(--button-height);
     height:var(--button-height);
     min-width:var(--button-height);
     min-height:var(--button-height);
     max-width:var(--button-height);
     max-height:var(--button-height);
     cursor:pointer;
}
.image-primary.selected::after {
     content: "";
     position: absolute;
     top: 2px;
     left: 2px;
     right: 0;
     bottom: 0;
     
     width:calc(var(--button-height) - 6px);
     height:calc(var(--button-height) - 6px);
     min-width:calc(var(--button-height) - 6px);
     min-height:calc(var(--button-height) - 6px);
     max-width:calc(var(--button-height) - 6px);
     max-height:calc(var(--button-height) - 6px);

     border-radius: var(--button-radius);
     background-color: var(--input-check-checked);

}
.image-preview-wrapper {
     width:150px;
     height:150px;
     background-size:contain;
     background-repeat:no-repeat;
     background-position:center;
     background-color:var(--input-back);
     border:var(--content-border-internal);
     border-radius:var(--button-radius);
     color:var(--input-text);
     display:inline-flex;flex-direction:column;
     justify-content:flex-start;
     align-items:center;
}
.image-preview {
     width:100%;
     height:100%;
     background-size:contain;
     background-repeat:no-repeat;
     background-position:center;
     background-color:var(--input-back);
     /* border:var(--content-border-internal); */
     border-radius:var(--button-radius);
     color:var(--input-text);
     display:inline-flex;flex-direction:column;
     justify-content:flex-start;
     align-items:center;
}

.image-preview-controls {
     display:flex;
     flex-direction:row;
     justify-content:space-between;
     align-items:center;
     width:100%;
     padding:4px;
     position:absolute;
     bottom:0;height:30px;left:0;right:0;z-index:1;
}

.percent-circle {
     --strokeWidth:4px;
     --fontSize:var(--font-size-12);
     --fontSmall:var(--font-size-10);
     --size:40px;
     --p: 0; /* 0–100 (percent) */
     --fill: var(--percent-progress); /* filled color */
     --track: var(--percent-track); /* background ring color */
     
     position:relative;
     width:var(--size);
     height:var(--size);
     aspect-ratio:1;
     display:flex;
     align-items:center;
     justify-content:center;
     border-radius:50%;
     background-color:var(--percent-back);
     color:var(--percent-text);
     font-size:var(--fontSize);
}
.percent-circle-fill {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     background:
     conic-gradient(
          var(--fill) calc(var(--p) * 1%),
          var(--track) 0
     );
     /* Start at the top (default is 3 o’clock) */
     transform: rotate(0deg);
}
.percent-circle-fill::after {
     content: "";
     position: absolute;
     inset: var(--strokeWidth); /* thickness of the ring */
     border-radius: inherit;
     background: var(--percent-back);    /* inner background */
}
.percent-circle-label {
     position: relative;     /* sits above the fill */
     display:flex;
     align-items: center;
     justify-content: center;
     font-size: var(--fontSize);
     font-weight: bold;
}
.percent-circle-percent {
     font-size:var(--fontSmall);
}
.percent-circle-complete {
     width:30px;height:30px;
     display:inline-flex;
     flex-direction:row;
     align-items: center;
     justify-content: center;

}
.percent-circle-complete svg {
     width: 20px;
     height: 20px;
     stroke-width: 2px;
}

svg {
     shape-rendering: geometricPrecision;
}
svg path {
     vector-effect: non-scaling-stroke;
}