/* 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 */
scrollbar {
     width: 10px;
     height: 10px;
}

scrollbar-thumb {
     background-color: var(--scroll-handle-back);
     border-radius: 2px;
     box-shadow: inset 0 50% 0 white;
}

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

scrollbar-track {
     background-color: var(--scroll-track-back);
     box-shadow: inset 0 0 5px grey;
     border-radius: var(--radius);
}

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

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

::-webkit-scrollbar {
     width: 10px;
     height: 10px;
}

::-webkit-scrollbar-thumb {
     background-color: var(--scroll-handle-back);
     border-radius: 2px;
     box-shadow: inset 0 50% 0 white;
}

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

::-webkit-scrollbar-track {
     background-color: var(--scroll-track-back);
     box-shadow: inset 0 0 5px grey;
     border-radius: 2px;
}

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

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

html,
body, #app-body {
     background: var(--body-back);
     color: var(--body-color);
     font-size: var(--font-size);
     line-height: var(--line-height);
     min-width:100vw;
     width: 100vw;
     height: 100vh;
     user-select: none;
     font-family: var(--font-family);
     display:flex;
     flex-direction:column;
     justify-content: flex-start;
     align-items: flex-start;
}
#app-body {
     /* width:auto; */
}

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

ul li {
     overflow: unset;
}

/* body:not([route='login']) {min-width:500px;} */
mark {
     background-color: yellow;
     color: var(--primary-text);
     padding: 0 2px;
     border: var(--primary-border);
     border-radius: var(--radius);
}

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

input:not(.input-checkbox),
select,
textarea,
input:active:not(.input-checkbox),
select:active,
textarea:active,
input:focus:not(.input-checkbox),
select:focus,
textarea:focus {
     border-radius: var(--input-border-radius);
     background-color: var(--input-back);
     color: var(--input-color);
     padding: 0 4px;
     box-sizing: border-box;
     border-collapse: collapse;
     border: var(--input-border);
     outline: none;
     font-family: var(--font-family);
     font-size: var(--font-size-14);     
}
input[type='color'], input[type='checkbox'], input[type='radio'] {
     padding:0;
}

input,
select {
     height: var(--input-height);
     line-height: var(--input-height);
}

textarea {
     height: auto;
     line-height: var(--textarea-line-height);
     min-height: var(--textarea-min-height);
     field-sizing: content;
     min-height: 3em;
}

input:disabled:not(.input-checkbox):not(.dayselect-checkbox),
select:disabled,
select:disabled > option {
     height:var(--input-height-disabled);
     line-height:var(--input-height-disabled);
}

input:disabled:not(.input-checkbox):not(.dayselect-checkbox),
select:disabled,
textarea:disabled,
select:disabled > option {
     background-color: var(--input-disabled-back);
     color: var(--input-disabled-color);
     
}

input:active,
select:active,
textarea:active,
input:focus,
select:focus,
textarea:focus {
     background-color: var(--input-active);
}
input:hover,
select:hover,
textarea:hover {
     border: var(--input-border-hover);
}

.body-cover {
     width: 100vw;
     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: 4px;
     max-width:100%;
     width:max-content;
     flex-shrink:0;
     flex-grow:0;
     flex-wrap:wrap;
     overflow:visible;
}
.wrapper-inline {
     display:inline-block;
}
.wrapper-flex.flex-column {
     flex-direction:column;
}

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

.login-box {
     min-width: 300px;
}
.login-box input,
.login-box select {
     height: 30px;
     line-height: 30px;
}

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: rgba(0,0,0,0.015);
     color: inherit;
     border-color: transparent;
     border-bottom-right-radius:0;
     border-bottom-left-radius:0;
     /* width: auto;
     min-width: auto;
     max-width: none; */
     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);
}

input[required]:placeholder-shown {
     border: 2px solid var(--button-negative-back);
}

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

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

#app-wrapper {
     flex-grow:1;
     flex-shrink:0;
     width: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: row;
     justify-content: start;
     align-items: start;
     gap: 0;
     padding: 8px 8px 0;
     height:calc(100vh - 40px);
     max-height:calc(100vh - 40px);
     min-height:calc(100vh - 40px);
     z-index:1;
}

#app-body[route="login"] #app-wrapper,
#app-body[route="authenticate"] #app-wrapper,
#app-body[route="validate"] #app-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-content: center;
     align-items: center;
     padding: 20px;
     background-color: var(--secondary-back);
     height:100vh;
     min-height:100vh;
     max-height:100vh;
     /* background-image: url('../images/icon_large_white_10p.png');background-size: contain ; */
     background-image: none;
     background-size: cover;
     /* url('../images/treeonhill.png') */
}

[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-color);
}

#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-border-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;
}

#remember_check {
     display: inline-block;
     width: 20px;
     height: 20px;
     cursor: pointer;
     background-image: url("../images/checkbox.png");
}

#remember_check.checked {
     width: 20px;
     height: 20px;
     background-image: url("../images/checkbox_checked.png");
}

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(--primary-back);
     color: var(--primary-text);
     border: var(--primary-border);
     box-shadow: var(--box-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-color);
     background-color: var(--header-back);
     color: var(--header-color);
     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: absolute;
     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(--primary-text);
}

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

#login-message {
     line-height: 24px;
     min-width:300px;
     padding:8px;
}

.container {
     background-color: var(--primary-back);
     color: var(--primary-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-label-full,
.container-input-full {
     line-height: 24px;
     width: 100%;
     display: block;
     margin-bottom: 2px;
     text-align: left;
     font-weight: bold;
}

.container-input-full {
     font-weight: normal;
     margin-bottom: 4px;
}

.container-input-full input,
.container-input-full select {
     height: 30px;
     line-height: 30px;
}

.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;
     /* background-color:var(--primary-back-sub); */
     border: var(--primary-border);
     border-radius: var(--radius);
}

/* Menu */
#app-menu {
     display: flex;
     flex-direction: column;
     z-index: 11;
     flex: 0;
     overflow: hidden;
     width: var(--menu-width);
     min-width: var(--menu-width);
     height: calc(100% - 8px);
     min-height: calc(100% - 8px);
     border: var(--menu-border);
     border-radius: var(--radius);
     background: var(--menu-back);
     color: var(--menu-color);
     transition: var(--transition);
}
#app-menu.partial {
     width: var(--menu-width-partial);
     min-width: var(--menu-width-partial);
     height: calc(100% - 8px);
     min-height: calc(100% - 8px);
     margin-right:8px;
}

#app-menu.full,
#app-menu.temp {
     min-width: var(--menu-width-full);
     width: var(--menu-width-full);
     z-index: 5;
     margin-right: 4px;
}

#app-menu.temp {
     z-index: 11;
}

#app-header {
     display:none;
     flex-direction: row;
     align-items: center;
     justify-content: start;
     width:100%;
     min-width:100%;max-width:100%;
     min-height: 40px;
     height: 40px;
     padding: 4px;
     background-color: var(--header-back);
     color: var(--header-color);
}
#app-body[route='main'] #app-header {
     display:flex;
}

#app-body[route="login"] #app-header {
     width:200px;
     max-width:200px;
     min-width:200px;
     border-bottom-right-radius: var(--radius);
}

#app-header-controls {
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     padding:0 4px;
}

#menu-title, #app-header-title, #app-header-page {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: start;
     /* flex: 1 0 auto; */
     width: var(--menu-width-full);
     min-height: 40px;
     height: 40px;
     padding: 4px 8px;
     /* background-color: var(--menu-title); */
     color: var(--menu-color);
     white-space: nowrap;
     gap: 8px;
     font-size:var(--font-size-18);
}
#app-header-page {
     flex-grow:2;display:inline-flex;flex-direction:row;align-items:center;justify-content:start;overflow:hidden;
}

#menu-name {
     width: var(--menu-width-full);
     text-align: center;
     height: 40px;
     line-height: 40px;
}

#menu-icon, #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:100%;max-width:100%;
     background-position:center left;
}

.app-icon {
     transition: all 0.3s ease;
     height: 30px;
     min-height:30px;
     width:100%;
     background-size:contain;
     background-position:left;
     background-image: var(--headericon);

}

#menu-title-text, #app-header-title-text {
     font-family: "Orbitron", sans-serif;
     font-size: var(--font-size-26);
     width: var(--menu-width-full);
     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;
}
.app-header-page-divider {
     width:20px;height:20px;min-height:20px;max-height:20px;min-width:20px;max-width:20px;
     background-image:url(../images/right-white.png);
     background-position:center;
     background-size:70%;
     margin:0 4px;
}

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

#app-menu-toggle {
     position:absolute;
     top:10px;
     right:8px;
     width:30px;min-width:30px;max-width:30px;
     height:26px;min-height:26px;max-height:26px;
     z-index:2;     
     display:inline-flex;
     flex-direction:column;
     align-items:center;
     justify-content: space-around;
     padding:4px 6px;
     margin:0;
     flex:0;
     cursor:pointer;
     background:var(--menu-back);
     border-radius:var(--button-border-radius);
}
#app-menu-toggle div, #app-menu-toggle::after, #app-menu-toggle::before {
     width:100%;
     height:2px;
     transition:var(--transition);
     content:"";
     display:block;
     border-radius:var(--button-border-radius);
     background-color:var(--header-color);
}
#app-menu-toggle.closed::after, #app-menu-toggle.closed::before {
     width:calc(100% - 4px);
     transform:translateX(-4px);
}
#app-menu-toggle.partial {
     position:relative;
     right:auto;top:auto;
     margin:4px 4px 0 4px;

}
#app-menu-toggle.partial::after, #app-menu-toggle.partial::before {
     width:calc(100% - 4px);
     transform:translateX(-4px);
}
#app-menu-toggle.full::after, #app-menu-toggle.full::before {
     width:calc(100% - 4px);
     transform:translateX(4px);
}

#app-menu-content {
     max-height: calc(100%);
     overflow-x: hidden;
     overflow-y: auto;
     display: inline-flex;
     flex-direction: column;
     gap: 4px;
     width: var(--menu-width-full);
     min-width: var(--menu-width-full);
     padding: 8px;
     flex-grow:1;
}

#app-menu.partial #app-menu-content {
     padding:8px 4px;
}

.app-menu-divider {
     width: 100%;
     height:1px;
     background-color: var(--menu-border-color);
     display:block;
     margin:4px 0;
     flex:0 0 auto;
}
#app-menu-footer {
     width:100%;
     display:flex;
     align-items:center;
     justify-content:center;
     height:30px;min-height:30px;max-height:30px;
     font-size:var(--font-size-12);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
#app-menu.partial #app-menu-footer {
     display:none;
}

#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-divider {
     transition: var(--transition);
     height: 0px;
     border-top: 1px solid var(--menu-border-color);
     width: 40px;
     margin: 0 4px;
}

#app-menu.full .menu-divider {
     margin: 0 20px;
     width: calc(100% - 40px);
}

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

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

.menu-group-wrapper.active {
     background-color: var(--menu-group-active);
     border:1px solid var(--menu-border-color);
     flex:0 0 auto;
}

.menu-group {
     transition: var(--transition);
     width: 100%;
     line-height: 30px;
     min-height: 30px;
     width: 100%;
     cursor: pointer;
     display: flex;
     flex-direction: row;
     gap: 8px;
     align-items: center;
     justify-content: flex-start;
     background: var(--menu-button-back);
     color: var(--menu-button-color);
     border-bottom: 1px solid transparent;
}

.menu-button {
     transition: var(--transition);
     line-height: var(--line-height-2);
     min-height: var(--line-height-2);
     cursor: pointer;
     width: 100%;
     background: var(--menu-button-back);
     color: var(--menu-button-color);
     border-radius: var(--button-border-radius);
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     gap: 4px;
     flex: 0 0 auto;
}

.menu-group-wrapper .menu-button {
     padding-left: 10px;
     border-radius:0;
}

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

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

.menu-button-icon,
.menu-group-icon {
     display: inline-block;
     width: var(--button-height-large);
     min-width: var(--button-height-large);
     max-width: var(--button-height-large);
     height: var(--button-height-large);
     min-height: var(--button-height-large);
     max-height: var(--button-height-large);
     background-size: 70%;
}

.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);
     font-size: var(--menu-group-fontsize);
}
.menu-group-text {
     width: calc(100% - 60px);
}

.menu-button-text {
     width: calc(100% - 40px);
     font-size: var(--menu-element-fontsize);
}

#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-group:after {
     content: " ";
     position: absolute;
     height: 30px;
     width: 20px;
     right: 0px;
     top: 0;
     background-image: url("../images/next.png");
     background-color:transparent;
     background-repeat: no-repeat;
     background-position: 50% center;
     background-size: 60%;
}

.menu-category {
     transition: var(--transition);
     text-align: center;
     width: 100%;
     font-size: var(--font-size-18);
     margin: 4px 0;
     color: rgba(255, 255, 255, 0.5);
     opacity: 0;
     flex: 0 0 auto;
}

#app-menu.full .menu-category,
#app-menu.temp .menu-category {
     opacity: 1;
}

.menu-group-wrapper.active .menu-group:after {
     background-image: url("../images/expand.png");
}

#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: visible;
     width: auto;     
     min-width:100%;
     max-width:none;
     
     background:transparent;
     color:inherit; 
     border:none; 
}

.tabbar-wrapper.tabbar-left {
     display: inline-block;
     width: 140px;
     padding: 0;
     margin-right: 8px;
     overflow: hidden;
     background: var(--primary-back);
     color: var(--primary-text);
     border: var(--primary-border);
     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:var(--tab-border); */
     border-radius:var(--tab-border-radius);
}

.tabs-tab:hover {
     background: var(--tab-hover-back);
     color: var(--tab-hover-color);
}

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

.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(--primary-back);
     color: var(--primary-text);
     border-bottom: var(--primary-border);
}

.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-color-active);
}

.tabbar-bar {
     height: 10px;
     width: auto;
     min-width: calc(100% - 10px);
     border-radius: var(--radius);
     background-color: var(--tabbar-back-active);
     border-bottom-left-radius: 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
}

.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(--primary-border-color);
}

.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;
     box-shadow: var(--box-shadow);
     border-radius: var(--radius);
     overflow: hidden;
     background-color: var(--primary-back);
     color: var(--primary-text);
     z-index: 1;
     position: absolute;
     right: 20px;
     top: 40px;
}

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

.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 */
#app-content {
     transition: var(--transition);
     height: calc(100% - 8px);
     min-height: calc(100% - 8px);
     max-height: calc(100% - 8px);
     overflow: auto;
     background: var(--content-back);
     color: var(--content-color);
     width: auto;
     display: flex;
     flex-direction: column;
     flex: 1;
}

.content-right {
     float: right;
}

#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-color);
     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;
}

#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;
     margin: 0 4px;
     padding: 0 30px 0 4px;
     border: var(--box-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;
     height: var(--button-height);
     width: var(--button-height);;
     line-height: var(--button-height);
     position: absolute;
     right: 4px;
     background-size: 80%;
}

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

#content-body {
     transition: var(--transition);
     z-index: 1;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     gap: 8px;
     flex-grow: 1;
     width: auto;
     max-width: var(--mobile-width-max);
     /* height: calc(100% - 58px);
     max-height: calc(100% - 58px);
     overflow: auto; */
     padding:4px 4px 8px;
     border-radius: var(--radius);
     border:1px solid transparent;
}
#content-body.content-body-full {height:100%;max-height:100%;}
#content-body.scrolled-down {
     /* border-top: var(--primary-border);
     border-top-width: 2px; */
}
#content-body.scrolled-up {
     /* border-bottom: var(--primary-border);
     border-bottom-width: 2px; */
}
#content-body.scrollable {
     /* border: var(--primary-border);
     background-color:rgba(0,0,0,0.05); */
}

#app-content.full #content-body,
#app-content.full #content-header {
     max-width: var(--mobile-width-max-full);
}

#content-body.inactive {
     overflow: hidden;
}

#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(--color-primary);
     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: 4px;
}

.content-tab {
     display: inline-flex;
     flex-direction: row;
     gap:4px;
     width: auto;
     align-items:center;
     justify-content: start;
     min-width: 70px;
     font-weight: normal;
     height: 30px;
     line-height: 30px;
     cursor: pointer;
     text-align: center;
     border: var(--button-standard-border);
     border-radius: var(--button-border-radius);
     background-color: var(--tabbar-back);
     color: var(--tabbar-color);
}
.content-tab.tab-status {padding-left:8px;}
.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-border-radius);border-bottom-right-radius:var(--button-border-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.active {
     font-weight: bold;
     background-color: var(--tabbar-back-active);
     color: var(--tabbar-color-active);
}

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

/* .content-tab[edited]::before {
     content: "";
     float: left;
     width: 20px;
     height: 100%;
     background-image: url(../images/grid-edit-white.png);
     background-color: var(--button-negative-back);
} */

und-color:var(--color-good);
} .content-tab.root {
     text-align: center;
     /* margin-right: 4px; */
}

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

.content-tab:hover {
     background-color: var(--tabbar-back-active);
     color: var(--tabbar-color-active);
     /* opacity:0.8; */
     /* font-weight:bold; */
}

.content-tab-icon {
     width: 30px;
     height: 100%;
     display: inline-block;
     background-size: 90%;
}

.content-tab-text, .content-tab-filler {
     display: inline-block;
     max-width: 200px;
     width: auto;
     padding: 0 4px 0 6px;
     font-size: var(--font-size);
}
.content-tab-text {
     position:absolute;
}
.content-tab-filler {
     color:transparent;
     background-color:transparent;
     font-weight:bold;
     z-index:0;
}

.content-tab-close {
     float: right;
     background-image: url(../images/grid-delete-white.png);
     width: 24px;
     height: 100%;
     cursor: pointer;
}
.content-tab:hover .content-tab-close, .content-tab.tab-status-active.active .content-tab-close,
.content-tab.active .content-tab-close {
     background-image: url(../images/grid-delete.png);
}

.content-tab:hover .content-tab-icon.icon-create {
     background-image: url(../images/create-black.png);
}

.content-tab[edited] .content-tab-close {
     background-color: var(--button-negative-back);
}

.content-tab[edited].tab-warning .content-tab-close {
     background-image: url(../images/grid-delete-white.png);
}

.content-info {
     min-width: 30px;
     width: 30px;
     margin-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     background-size: 80%;
     border-right: 1px solid var(--button-standard-color);
}

.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;
     min-width: calc(100% - 50px);
     width: auto;
     height: auto;
     display: none;
     white-space: nowrap;
     overflow: visible;
}

.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: 100%;
}

.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:4px;
     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(--primary-back-sub);
     color: var(--primary-text);
}
.page-box {
     display:inline-block;
     flex-direction:row;
     justify-content: flex-start;
     align-items: flex-start;
     gap: 4px;
     max-width:100%;
     width:max-content;
     flex-shrink:0;
     flex-grow:0;
     flex-wrap:wrap;
     overflow:visible;
}
.page-box-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;
     background-color:var(--title-back);
     color:var(--title-color);
     border:var(--border-main);
     border-radius:var(--radius);
     gap: 8px;
     width: 100%;
}
.page-box-title-text {
     display:inline-flex;
     flex-direction: row;
     align-items:center;
     gap:8px;
     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;
}

.item-status::before {
     display: inline-block;
     width: 8px;
     height: 16px;
     border-radius:var(--radius);
     margin: 0 4px 0 0;
     background-color:transparent;
     border:var(--primary-border);
     border-color:var(--secondary-border-color);
     content:"";
}
.item-tab-status::before {
     display: inline-block;
     width: 8px;
     height: 18px;
     border-radius:var(--radius);
     margin: 4px;
     background-color:transparent;
     border:var(--primary-border);
     border-color:var(--secondary-border-color);
     content:"";
}
.item-status-good::before {
     background-color:var(--color-good);
     border-color:var(--color-good);
}
.item-status-active::before {
     background-color:var(--color-active);
     border-color:var(--color-active);
}
.item-status-warning::before {
     background-color:var(--color-warning);
     border-color:var(--color-warning);
}
.item-status-highlight::before {
     background-color:var(--color-highlight);
     border-color:var(--color-highlight);
}
.item-status-inactive::before {
     background-color:var(--color-inactive);
     border-color:var(--color-inactive);
}
.item-status-caution::before {
     background-color:var(--color-caution);
     border-color:var(--color-caution);
}
.item-status-deleted::before {
     background-color:var(--color-deleted);
     border-color:var(--color-deleted);
}


.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(--primary-back);
     color: var(--primary-text);
     border: var(--primary-border);
     border-radius: var(--radius);
}

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

/* Sub-header */
#content-submenu {
     float: right;
     margin-right: 20px;
     overflow: visible;
     padding: 0 10px 0px 0px;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     background-color: var(--submenu-back);
     color: var(--submenu-color);
     border: 1px solid transparent;
     border-color: var(--menu-border-color);
     border-top: 0;
}

#content-submenu-button {
     height: 36px;
     width: 36px;
     background-image: url("../images/profile2.png");
     opacity: 0.75;
     cursor: pointer;
     transition: var(--transition);
     margin-top: 2px;
}
#app-submenu-backdrop {
     position:absolute;
     top:44px;
     left:4px;
     right:4px;
     bottom:4px;
     background-color: rgba(0, 0, 0, 0.5);
     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-color);
     border: var(--primary-border);
     z-index:5;
     gap:4px;
     padding: 8px 4px 8px 8px;
     border-radius: var(--radius);
     border: 1px solid var(--menu-border-color);
     box-shadow: var(--box-shadow);
     transition: right 0.3s ease;
}

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

#app-submenu-header {
     display:flex;
     flex-direction:row;
     align-items:center;
     justify-content:start;
     gap:8px;
     margin-bottom:4px; 
}
#app-submenu .title-icon {
     width: 40px;
     height: 40px;
     background-image: url("../images/profile2.png");
     background-size: 80%;
     display: inline-block;
     flex-grow:0;
     min-width:40px;
     flex-shrink:0;
     max-width:40px;
     border:var(--menu-border);
     border-radius: 50px;
}
#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 {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 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 {
     border-radius: var(--button-border-radius);
     width: auto;
     height: var(--button-height);
     line-height: var(--button-height);
     max-height: var(--button-height);
     min-width: var(--button-height);
     text-align: center;
     cursor: pointer;
     font-size: var(--font-size-14);
     background-color: var(--button-standard-back);
     color: var(--button-standard-color);
     border: var(--button-standard-border);
     display: inline-flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
     /* box-shadow: var(--button-box-shadow); */
     font-weight: bold;
     padding:0 4px;
     overflow:hidden;
}
.button.button-small {
     height: var(--button-height-small);
     line-height: var(--button-height-small);
     font-size: var(--font-size-12);
}
.button.button-large {
     height: var(--button-height-large);
     min-height:var(--button-height-large);
     max-height:var(--button-height-large);
     font-size: var(--font-size);

}
.button.button-onhoveronly {
     background-color: transparent;
     border: 1px solid transparent;
     box-shadow: none;
}
.button.button-onhoveronly:hover {
     
     background-color: var(--button-standard-hover-back); 
     color: var(--button-standard-hover-color);
     border: var(--button-standard-border);
     box-shadow: var(--button-box-shadow);
}
.button span {
     padding: 0 4px;
}

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

.button .button-icon {
     display: inline-block;
     width: var(--button-height);
     height: 100%;
     background-size: 90%;
     min-width: var(--button-height);
     flex: 0;
     min-height: var(--button-height);
}

.button .button-text {
     display: inline-block;
     width: auto;
     flex: 1;
     text-align: center;
     font-weight: bold;
     padding: 0 4px;
}

.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;
     background-image: url("../images/info.png");
}

.button:hover:not(.button-negative):not(.button-caution):not(.button-warning):not(.button-delete):not(.no-hover):not(.content-button) {
     /* background-color: var(--button-standard-hover-back);
     color: var(--button-standard-hover-color); */
     transform:scale(0.98);
     opacity:0.98;
}

.button-control {
     min-width:80px;
     width:auto;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
}

.button-neutral {
     background-color: var(--button-neutral-back);
     color: var(--button-neutral-color);
     border: var(--button-neutral-border);
}
/* .button-neutral:hover {
     background-color: var(--button-neutral-hover-back);
     color: var(--button-neutral-hover-color);
     border: var(--button-neutral-hover-border);
} */

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

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

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

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

.button-control {
     transition: var(--transition);
     min-width: 80px;
}

.button-grid {
     background-color:var(--button-neutral-back);
     color: var(--button-neutral-color);
     border: var(--button-neutral-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-border-radius);

     cursor:pointer;
}

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

.login-button {
     text-align: center;
     justify-content: space-around;
     align-items: center;
     height: 30px;
     line-height: 30px;
     padding: 0 8px;
}
.login-button .button-icon {
     background-size: 70%;
}

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

.button-inverted {
     background-color: var(--button-standard-color);
     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-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);
}

#content-profile {
     /* color: var(--button-inverted-color); */
}

.content-menu-button {
     display: inline-block;
     transition: var(--transition);
     width: auto;
     min-width: 24px;
     height: 24px;
     line-height: 24px;
     margin: 2px 4px;
     color: var(--button-inverted-color);
}

.content-menu-button:hover {
     border-color: var(--button-inverted-color);
}

.content-menu-button .button-icon {
     margin-top: 0;
     margin-bottom: 0;
}

.link {
     display: inline-block;
     cursor: pointer;
}

.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-border-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-border-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(--primary-back);
     color: var(--primary-text);
     border: var(--primary-border);
     border-radius: var(--radius);
}
.tab-box {
     width: auto;
     min-width: 100%;
     overflow: visible;
     display: none;
     opacity: 0;
     background:var(--box-back);
     color:var(--box-color); 
     border:var(--box-border); 
     border-radius:var(--radius);
     box-shadow: var(--box-shadow);
     border-bottom:var(--box-border);
}

.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(--box-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;
}

.tab-box.tabbox-grid {
     border: 0;
     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;
     box-shadow: var(--box-shadow);     
}
.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(--box-title-back);
     color: var(--box-title-color);
}

/* Box Classes */
.box-statusbar {
     width: 100%;
     height: 10px;
     border-bottom: var(--primary-border);
     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;
     width: 100%;
     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;
}
/* .box-wrapper:not(.pad-0) {
     padding:8px;
} */
.box-wrapper + .box-wrapper:not(.noborder) {
     /* border-top: var(--box-border); */
     border-top:1px solid var(--secondary-border-color);
}

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

.box-padded {
     padding: 8px;
}

.box-group,
.stack-group {
     display: inline-flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     width: auto;
     flex: 1;
     min-width: var(--width-min);
}
.box-wrapper .box-group:not(.pad-0) {
     border-color: var(--secondary-border-color);
     padding: 8px;
     /* height:100%; */
}

.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: 100px;
     min-width: 100px;
     padding:0;
}

.box-group:not(.hide) + .box-group:not(.hide) {
     border-left: var(--primary-border);
     border-color:var(--secondary-border-color);
}
/* .box-wrapper .box-group + .box-group {
     border-left: var(--primary-border);
} */
/* .box-group:nth-child(2n+1) {border-left:0;} */

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

.box-image {
     width: 144px;
     height: 140px;
     border: var(--primary-border);
     border-radius: var(--radius);
     background-color: var(--primary-faded);
}

.box-image.box-image-small {
     width: 90px;
     height: 70px;
}

.box-image-attach {
     width: 150px;
     height: 150px;
     background-image: url("../images/imagecapture-faded.png");
     background-size: 80%;
     cursor: pointer;
}

.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 {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     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(--primary-back);
     border: var(--primary-border);
     border-radius: var(--button-border-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(--box-title-back);
     color: var(--box-title-color);
     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(--box-title-back);
     color:var(--box-title-color);
     flex-grow: 1;
     gap: 4px;     
}
.box-title {
     background:transparent;
     border-bottom:var(--secondary-border);
}

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

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

.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;
}
.box-title-button {
     width: 24px;
     height: 24px;
     border: 0;
     background-color: transparent;
}
.box-subtitle {
     font-weight: bold;
     font-size: var(--font-size);
     height: auto;
     line-height: var(--input-height);
     padding: 4px 10px 0;
     width: 100%;
     text-align: center;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     gap: 4px;
}

.box-content,
.stack-content,
.box-info {
     display: grid;
     grid-template-columns: auto 1fr;
     grid-gap: 2px;
     height: auto;
     line-height: var(--input-height);
     padding: 4px;
     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;
     width: 100%;
     min-width: 300px;
     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(--primary-back);
     color: var(--primary-text);
}
.box-flex {
     display: flex;
     gap: 4px;
     flex-direction: row;
     flex-wrap: wrap;
}

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

.box-empty-message {
     font-weight: bold;
     width: 100%;
     display: block;
     text-align: center;
     height: 30px;
     line-height: 30px;
     font-size: var(--font-size-18);
}

.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;
}

.box-controls {
     /* background: var(--primary-back-sub); */
     padding: 4px 8px;
     border-bottom: var(--secondary-border);
     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-color);
}
.table-cell,
.table-column {
     display: table-cell;
     padding: 4px;
     border: 1px solid var(--primary-border-color);
     field-sizing: content;
}
.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: 1px solid var(--primary-border-color);
     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-subback);
}

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

.box-column {
     display: inline-block;
     line-height: inherit;
     border-left: 1px solid var(--primary-border-color);
     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;
     padding-bottom: 30px;
     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-color);
     border-bottom: 1px solid var(--primary-border-color);
}

.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 4px;
     /* width: calc(100% - 64px); */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     float: left;
     font-size: 16px;
     display:flex;flex-direction:row;align-items:center;justify-content:start;
     flex-grow:2;
}

.box-folder-icon,
.box-folder-toggle {
     width: 24px;
     height: 30px;
     float: right;
     margin: 0 4px;
     background-image: url(../images/right-black.png);
     background-size: 90%;
     cursor: pointer;
     flex-grow:0;flex-shrink: 0;flex-basis: auto;
}

.box-folder-icon {
     background-image: url(../images/right-black.png);
     float: left;
}

.box-folder.active .box-folder-icon {
     background-image: url(../images/down-black.png);
}

.box-folder.active .box-folder-toggle {
     background-image: url(../images/down-black.png);
}

.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;
     /* font-size:var(--font-size-14); */
     gap: 4px;
}
.box-label-full {
     display:flex;
     width:100%;
     text-align:left;
     margin-bottom:4px;
     align-items:center;
     justify-content:flex-start;
}

/* .box-label[required]:before {
     content: "*";
     margin-right: 2px;
} */

.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-value, .box-value-full {
     flex-grow: 1;
     text-align: right;
     min-height: var(--input-height);
     line-height: var(--input-height);
     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-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-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(--box-shadow-inset);
}
.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-border-hover);
}
.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:104px;
}
.box-input-year {
     max-width:64px;
}
.box-input-day {
     max-width:54px;
}

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

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

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

.box-input-missing {
     background-color: #ffaaaa;
}

.box-inline-button {
     width: var(--input-button-height);
     max-width: var(--input-button-height);
     min-width: var(--input-button-height);
     height: var(--input-button-height);
     max-height: var(--input-button-height);
     min-height: var(--input-button-height);
     flex: 0;
     background-color: transparent;
     border-color: transparent;
     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);
}

/* 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(--primary-border);
}
.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-toggle-base);
}
.toggle-slider.toggle-green {
     background-color: var(--input-color-green);
}
.toggle-slider.toggle-red {
     background-color: var(--input-color-red);
}
.toggle-slider.toggle-yellow {
     background-color: var(--input-color-yellow);
}
.toggle-slider.toggle-cyan {
     background-color: var(--input-color-cyan);
}

.color-green {
     background-color: var(--input-color-green);
}
.color-red {
     background-color: var(--input-color-red);
}
.color-yellow {
     background-color: var(--input-color-yellow);
}
.color-cyan {
     background-color: var(--input-color-cyan);
}
.color-blue {
     background-color: var(--input-color-blue);
}
.color-orange {
     background-color: var(--input-color-orange);
}

/* Assign / Unassign */
.box-assign-wrapper {
     display: block;
     position: relative;
     height: calc(100% - 50px);
     flex-shrink: 0;
     flex-basis: auto;
     overflow:visible;
}
.box-assign-group {
     display:inline-block;
     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: 1px solid var(--primary-border-color);
     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;
}

.box-button-assign,
.box-button-remove {
     height: var(--button-height);
     min-height: var(--button-height);
     max-height: var(--button-height);
     width:var(--button-height);
     min-width: var(--button-height);
     max-width: var(--button-height);
     background-size:70%;
     background-position: center;
}

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

.icon-only {
     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;font-size:var(--font-size-16);
     min-width:100%;width:100%;max-width:100%;
     min-height:30px;height:auto;line-height:30px;
     padding:4px;border-radius:var(--radius);
     background:var(--primary-back-faded);
}

.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(--primary-text);
     background-color: var(--primary-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: absolute;
     background-color: var(--backdrop-back);
     transition: var(--transition);
     opacity: 0;
     width: 100%;
     height: 100%;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 5;
}

#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;
     background-color: var(--primary-back);
     color: var(--primary-text);
     border: 0;
     transition: var(--transition);
     border: var(--primary-border);
     border-radius: var(--radius);
     box-shadow: var(--box-shadow);
     z-index: 6;
     overflow:hidden;
}

.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%; */
     top: 150px;
     left: 50%;
     height: auto;
     width: auto;
     transform: Translate(-50%, -50%);
     max-height: calc(100% - 100px);
     min-width: 300px;
     right: auto;
     bottom: auto;
     border: var(--primary-border);
     border-radius: var(--radius);
     box-shadow: var(--box-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(--primary-border);
     background-color: var(--box-title-back);
     color: var(--box-title-color);
     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);
     width: var(--button-height);
     max-width: var(--button-height);
     min-width: var(--button-height);
     cursor: pointer;
     background-color: transparent;
     border: 0;
     background-image: url(../images/grid-delete.png);
}

.info-content {
     height: auto;
     display: block;
     overflow-y: auto;     
     width: 100%;
     min-width: 100%;
     max-width: 100%;
     padding:var(--box-padding);
     flex-grow:1;
     flex-shrink:1;
     flex-basis:auto;
}
.info-input, .info-textarea, .info-select {
     width: 100%;
     display: inline-block;
     font-size: var(--font-size-14);
}
.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(--secondary-border);
     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;
}

.info-row-label {
     font-weight: bold;
     line-height: 20px;
     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;
}

.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(--secondary-border);
     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(--context-back);
     color: var(--context-color);
     border: var(--context-border);
     border-radius: var(--radius);
     box-shadow: var(--context-shadow);
     opacity: 0;
     transition: opacity 0.1s ease;
}

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

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

.context-spacer {
     border-top: var(--primary-border);
     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 {
     /* background-color: var(--context-highlight);
     border-radius: var(--radius); */
     font-weight: bold;
}

.context-row-icon {
     flex: 0;
     width: 30px;
     max-width: 30px;
     min-width: 30px;
     height: 30px;
     padding: 0 4px;
     background-size: 70%;
}

.context-row-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(--context-highlight);
     border-radius: var(--radius);
}

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

.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;
}

.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-button:hover {
     background-color: var(--primary-back-hover);
}

.content-button.active {
     background-color: var(--primary-back-highlight);
}

.content-selector {
     position:absolute;
     right:44px;
     top:44px;
     border:var(--primary-border);
     border-radius:var(--radius);
     background-color:var(--primary-back);
     color:var(--primary-text);
     padding:8px;
     min-width:200px;
     max-width:300px;
     width:auto;
     height:auto;
     z-index:1;
     box-shadow:var(--box-shadow);
     display:none;
     opacity:0;
     transition:opacity 0.1s ease;
}
.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-color);
}
.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(--primary-border);
}
.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(--primary-border);
     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(--primary-border);
     cursor: pointer;
}

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

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

/* Links */
.link-file-container {
     display: flex;
     flex-direction: column;
     gap: 4px;
     padding: 4px;
     border: var(--primary-border);
     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-color);
}

/* Message */

.message-title {
     display: block;
     text-align: left;
     font-size: var(--font-size-18);
     font-weight: bold;
     padding: 10px 20px;
     line-height: 30px;
     white-space: nowrap;
     background-color: var(--box-title-back);
     color: var(--box-title-color);
}
.message-title-icon {
     width: 30px;
     height: 30px;
     margin-right: 10px;
     display: inline-block;
}

.message-content {
     height: auto;
     min-height: 20px;
     line-height: 20px;
     overflow-y: auto;
     padding: 16px;
     /* max-width:calc(100% - 32px); */
     max-width: 100%;
     /* min-width:300px; */
     /* border:1px solid var(--primary-border-color);border-radius:var(--radius); */
}

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

.message-text {
     line-height: 24px;
     text-align: left;
     font-size: var(--font-size);
     height: auto;
     min-height: 100%;
     /* padding: 8px 0; */
     width: auto;
     word-wrap: break-word;
     flex: 1;
}

.message-icon {
     float: left;
     height: 50px;
     min-width: 50px;
}

.message-close {
     float: right;
     height: var(--button-height);
     width: var(--button-height);
     margin-top: 2px;
     cursor: pointer;
     background-color: transparent;
     border: 0;
     background-image: url(../images/grid-delete.png);
}

#page-messages {
     position: absolute;
     right: 20px;
     bottom: 8px;
     width: auto;
     height: auto;
     overflow: visible;
}

.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;
     max-width: 300px;
     border: var(--primary-border);
     background-color: var(--message-back);
     color: var(--message-color);
     border-radius: var(--radius);
}

/* Clock */
.clock-container {
     margin-top: 4px;
}
.clock {
     display: flex;
     width: 300px;
     min-width: 300px;
     max-width: 300px;
     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;
}
/* .clock-info:hover + .clock-timezone {
    display:block;line-height:14px;
}
.clock-info:hover + .clock-label {
    display:block;line-height:14px;
} */
/* .clock-timezone:focus {appearance: auto;} */
/* .clock-timezone:active, .clock-timezone:focus {font-size:var(--font-size-14);width:120px;} */
.clock-delete {
     cursor: pointer;
     position: absolute;
     top: 0;
     right: 0;
     width: 20px;
     height: 20px;
     background-image: url(../images/grid-delete.png);
     background-size: contain;
     background-position: center;
     opacity: 0;
}
.clock:hover .clock-delete {
     opacity: 1;
}

/* Image */
.account-image {
     border-radius: 50px;
     border: var(--primary-border);
     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(--secondary-border);
     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(--color-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(--primary-back);
     color: var(--primary-text);
     border: var(--primary-border);
     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: 1px solid var(--secondary-border);
     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;
     background-image: url(../images/pause-black.png);
}
#scanner-pause.scanner-start {
     background-image:url(../images/play-black.png);
}

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

/* 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-color);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-content: center;
     align-items: center;
     opacity: 0;
     padding: 20px;
}

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

.loader-message {
     font-size: 20px;
     line-height: 36px;
     text-align: center;
}

.loader-gif {
     display: block;
     width: auto;
     text-align: left;
     /* background-image:url('../images/spinner.gif'); */
}

.loader-gif::after {
     margin-left: 10px;
     content: "•";
}

/* Attachments */
.attach-wrapper {
     display: block;
     width: 100%;
     margin: 4px 0;
     padding:4px;
     border: var(--primary-border);
     border-radius: var(--radius);

     /* background-color: var(--primary-back);
     color: var(--primary-text); */
}

/* 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;
}

.map-box {
     border-collapse: collapse;
     border-style:solid;
     border: var(--primary-border);
     border-radius: var(--radius);
     height: 200px;
     width:300px;
     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: rgba(0, 0, 0, 0.95);
}

#viewer-content {
     display: flex;
     position: absolute;
     left: 40px;
     right: 40px;
     top: 40px;
     bottom: 40px;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     border-radius: var(--radius);
}

#viewer-close {
     position: absolute;
     right: 10px;
     top: 10px;
     width: 30px;
     height: 30px;
     cursor: pointer;
     background-image: url(../images/grid-delete-white.png);
}

#viewer-name {
     position: absolute;
     left: 40px;
     top: 10px;
     height: 30px;
     line-height: 30px;
     font-size: 18px;
     text-align: left;
     width: calc(100% - 100px);
     font-size: 16px;
     color: white;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
}

.viewer-image {
     display: block;
     width: auto;
     height: auto;
     max-width: 100%;
     border-radius: 4px;
     background-color: var(--primary-back-faded);
}
video.viewer-image {
     object-position: top;
     height: auto;
}
.viewer-lesson {
     border-radius:var(--radius);
     background-color:var(--primary-back-faded);
     color:var(--primary-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(--primary-border);
     border-radius:var(--button-border-radius);
     color:var(--input-text);
}

.image-primary {
     background-color:var(--input-check-back);
     color:var(--input-check-color);
     border-radius:var(--button-border-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-border-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(--primary-border);
     border-radius:var(--button-border-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(--primary-border); */
     border-radius:var(--button-border-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-color);
     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 {
     background-image:url(../images/checkmark-black.png);
     background-size:70%;
     width:30px;height:30px;
}

/* SR Tools */
.srDatePicker, input:disabled.srDatePicker {
     width:84px;
}