/* buttons should be same as in web-app.css */
button, 
input[type=submit], 
input[type=button] {
	cursor: pointer;
	background: #e9e9ed;
	color: #000;
	border: 1px solid #8f8f9d;
    border-radius: 3px;
}
button:hover, 
input[type=submit]:hover, 
input[type=button]:hover {
    filter: brightness(1.015);
}
button:active, 
input[type=submit]:active, 
input[type=button]:active {
    filter: brightness(1.02);
}

.selbach-widget {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-family: sans-serif;
}
.selbach-widget button {
    font-family: sans-serif;
    padding: 1px 4px; /* this is different by default in FF and Chrome */
}
.selbach-widget button:disabled {
    opacity: 0.33;
    filter: grayscale(1);
}
.selbach-widget button.outlined {
    background: transparent;
    color: currentColor;
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.selbach-widget-content {
    height: 100%; 
    width: 100%; 
    padding: 16px;
    overflow: auto;
    /*scrollbar-gutter: stable both-edges;*/ /* TODO: enable generally? */
}
.selbach-widget-content.sticky-buttons {
    padding-bottom: 0;
}
.selbach-widget-content.symmetric-scrollbar {
    scrollbar-gutter: stable both-edges;
}
.selbach-widget-content.flex {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
}
.selbach-widget-content.flex.center {
    align-items: center;
    justify-content: center;
}
.selbach-widget-content h3.headline {
    /*cursor: pointer;*/
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 18px 0px;
}
.selbach-widget-content h3.headline.smaller {
    font-size: 18px;
}
.selbach-widget-content h3.headline.extended {
    margin: 18px 4px 4px 4px;
    flex-wrap: wrap;
}
.selbach-widget-content h3.headline.wrap {
    flex-wrap: wrap;
}
.selbach-widget-content h3.headline.wrap .headline-title {
    order: 1;
    margin: 0 16px 0 0;
}
.selbach-widget-content h3.headline.wrap .headline-controls {
    order: 3;
    flex: 1 0 100%;
    margin: 16px 0 0 0;
}
.selbach-widget-content h3.headline.wrap .headline-info {
    order: 2;
    margin: 0;
}
.selbach-widget-content h3.headline ~ button {
    margin-left: 8px;
}
.selbach-widget-content h3.headline .content-block {
    display: flex;
    flex-direction: row;
    flex: 2 1 auto;
}
.selbach-widget-content h3.headline.extended .content-block {
    flex-direction: column;
    margin-right: 32px;
}
.selbach-widget-content h3.headline .preview-images {
    display: none;
    border: 1px solid #ddd;
    background: #efeff1;
    min-height: 74px;
    font-size: 16px;
    font-weight: normal;
    /*width: 136px;
    height: 136px;
    max-width: 400px;*/
}
.selbach-widget-content h3.headline .preview-images > img {
    max-height: 144px;
    margin: 8px;
    border-radius: 5px;
}
.selbach-widget-content h3.headline.extended .preview-images {
    display: flex;
    flex: 1 0 100px;
    justify-content: center;
    align-items: center;
}
.selbach-widget-content h3.headline .content-block .headline-title {
    margin-top: 2px;
}
.selbach-widget-content h3.headline.extended .content-block .headline-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 20px;
    order: 1;
}
.selbach-widget-content h3.headline .headline-info {
    margin: 3px 0 3px 16px;
}
.selbach-widget-content h3.headline.extended .headline-info {
    margin: 8px 0;
    order: 2;
}
.selbach-widget-content h3.headline .headline-controls {
    flex: 1 1 auto;
    text-align: right;
    margin: 0 0 0 16px;
}
.selbach-widget-content h3.headline .headline-controls + div {
    margin-right: 0;
}
.selbach-widget-content h3.headline .headline-controls > .ctrl-group {
    display: inline-flex;
    gap: 5px;
}
.selbach-widget-content h3.headline.extended .headline-controls {
    margin: 8px 0;
    text-align: left;
    order: 3;
}
.selbach-widget-content h3.headline button {
    cursor: pointer;
    min-height: 26px;
    margin: 1px 0;
}
.selbach-widget-content h3.headline > span {
    margin-top: 3px;
    margin-bottom: 3px;
}
.selbach-widget-content h3.headline > span + span {
    margin-left: 16px;
}
.selbach-widget-content h3.headline select {
    min-height: 26px;
    margin: 1px 0;
    vertical-align: bottom;
    padding: 2px 4px;
}
.selbach-widget-content .menu-button {
    margin: 4px;
    padding: 4px 6px;
    min-height: 32px;
    width: calc(100% - 8px);
}

.selbach-widget-content .form-container {
    /*padding: 4px;*/ /* not yet widely adopted */
}
.selbach-widget-content form.full-width.flex,
.selbach-widget-content .ui-elements-1.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.selbach-widget-content .ui-elements-1.flex.center-vertical {
    align-items: center;
}
.selbach-widget-content form.full-width.columns,
.selbach-widget-content .ui-elements-1.columns {
    columns: 380px auto;
    column-gap: 8px;
    width: 100%;
}
.selbach-widget-content form.full-width .groupSection {
    padding: 0;
    margin: 0;
    flex: 1 1 400px;
}
.selbach-widget-content form.full-width .groupSection.closed > :not(.title-container:first-child) {
    display: none;
}
.selbach-widget-content form.full-width .groupSection.extendable {
    /*TODO: adjust after testing*/
}
.selbach-widget-content form.full-width.compact .groupSection {
    /* TODO: test and style */
}
.selbach-widget-content form.full-width.columns .groupSection {
    break-inside: avoid-column;
}
.selbach-widget-content form.full-width.larger-form .groupSection {
    /* TODO: test and style */
}
.selbach-widget-content form.full-width.smaller-content .groupSection {
    /* TODO: test and style */
}
.selbach-widget-content form.full-width.data-view .groupSection {
    margin: 4px;
    border: 1px solid #ddd;
    /*max-height: 45vh;*/
    /*overflow: auto;*/
}
.selbach-widget-content form.full-width .fieldSection,
.selbach-widget-content .ui-elements-1 .fieldSection {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    margin: 8px 4px;
    flex: 1 1 400px;
    min-width: 192px;
}
.selbach-widget-content form.full-width.compact .fieldSection,
.selbach-widget-content .ui-elements-1.compact .fieldSection {
    margin: 4px 4px;
}
.selbach-widget-content form.full-width.columns .fieldSection,
.selbach-widget-content .ui-elements-1.columns .fieldSection {
    break-inside: avoid;
    margin-bottom: 8px;
    min-width: 200px;
}
.selbach-widget-content form.full-width.larger-form .fieldSection,
.selbach-widget-content .ui-elements-1.larger .fieldSection {
    margin: 8px 8px;
}
.selbach-widget-content form.full-width.data-view .fieldSection,
.selbach-widget-content .ui-elements-1.data-view .fieldSection {
    padding: 8px 8px;
    margin: 4px 4px;
    border: 1px solid #ddd;
    min-width: 210px;
}
.selbach-widget-content form.full-width.data-view.smaller-content .fieldSection,
.selbach-widget-content .ui-elements-1.data-view.smaller-content .fieldSection {
    padding: 4px 8px;
}
.selbach-widget-content form.full-width.columns .fieldSection:first-child,
.selbach-widget-content .ui-elements-1.columns .fieldSection:first-child {
    margin-top: 0;
}
.selbach-widget-content form.full-width .fieldSection.full-width,
.selbach-widget-content .ui-elements-1 .fieldSection.full-width {
    width: calc(100% - 8px);
    flex: 1 0 calc(100% - 8px);
}
.selbach-widget-content form.full-width.larger-form .fieldSection.full-width,
.selbach-widget-content .ui-elements-1.larger .fieldSection.full-width {
    width: calc(100% - 16px);
    flex: 1 0 calc(100% - 16px);
}
.selbach-widget-content form.full-width .fieldSection.auto-value {
    /*display: none;*/
}
.selbach-widget-content form.full-width .fieldSection.unique-value label {
    font-weight: bold;
}
.selbach-widget-content form.full-width .fieldSection.input-required label {
    /*text-decoration: underline;*/
}
.selbach-widget-content form.full-width .fieldSection.section-formatting {
    min-height: unset;
    border: 0;
}
.selbach-widget-content form.full-width .fieldSection .section-line-separator {
    border-bottom: 1px solid currentColor;
    width: 100%;
    margin: 8px 0;
    opacity: 0.15;
}
.selbach-widget-content form.full-width .fieldSection .section-space-separator {
    width: 100%;
    margin: 0;
    min-height: 16px;
}
.selbach-widget-content form.full-width .fieldSection .section-title {
    /*width: 100%;*/
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: bold;
}
.selbach-widget-content form.full-width .groupSection > .groupSection .section-title {
    font-size: 14px;
}
.selbach-widget-content form.full-width .fieldSection .section-controls {
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.selbach-widget-content form.full-width .groupSection.closed .fieldSection .section-controls {
    display: none;
}
.selbach-widget-content form.full-width .fieldSection .info-text {
    /* TODO: format? */
}
.selbach-widget-content form.full-width .fieldSection .defaultToggle {
    display: inline-block;
    font-size: 11px;
    margin: 0 8px;
    padding: 2px 6px;
    background: #eee;
    border: 1px solid #eee;
    color: #000;
    border-radius: 10px;
    cursor: pointer;
}
.selbach-widget-content form.full-width .fieldSection.filled-with-default .defaultToggle {
    /*background: #0075ff;*/
    /*color: #fff;*/
    background: transparent;
    border: 1px solid currentColor;
}
.selbach-widget-content form.full-width .fieldSection .defaultToggle.hidden {
    display: none;
}
.selbach-widget-content form.full-width .fieldInputGroup {
    width: 100%;
    min-width: 192px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.selbach-widget-content form.full-width .fieldInputGroup.inline-actions {
    width: auto;
    min-width: unset;
    justify-content: end;
}
.selbach-widget-content form.full-width label {
    margin: 4px 8px 4px 0;
    min-width: 84px;
    display: flex;
    align-items: center;
}
.selbach-widget-content form.full-width.smaller-content label {
    font-size: 15px;
}
.selbach-widget-content form.full-width.labels-flex-g1 label {
    flex: 1 1 84px;
}
.selbach-widget-content form.full-width.labels-flex-g2 label {
    flex: 2 1 84px;
}
.selbach-widget-content form.full-width.labels-50pct label {
    min-width: 50%;
}
.selbach-widget-content form.full-width.labels-128px label {
    min-width: 128px;
}
.selbach-widget-content form.full-width.labels-150px label {
    min-width: 150px;
}
.selbach-widget-content form.full-width input.text {
    width: 100%;
    min-width: 192px;
    margin: 6px 0px;
    min-height: 32px;
    padding: 6px;
    border-radius: 3px;
    border: 1px solid currentColor;
}
.selbach-widget-content form.full-width.data-view input.text {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid currentColor;
}
.selbach-widget-content form.full-width input.text:disabled,
.selbach-widget-content form.full-width input.text.read-only,
.selbach-widget-content form.full-width textarea:disabled,
.selbach-widget-content form.full-width textarea.read-only {
    border: 0;
    border-bottom: 0;
    border-radius: 3px;
    color: #333;
    background: #efeff1;
}
.selbach-widget-content form.full-width.dark input.text:disabled,
.selbach-widget-content form.full-width.dark input.text.read-only,
.selbach-widget-content form.full-width.dark textarea:disabled,
.selbach-widget-content form.full-width.dark textarea.read-only {
    color: #ddd;
    background: #3d3d3d;
}
.selbach-widget-content form.full-width.compact input.text,
.selbach-widget-content form.full-width.compact .input-and-action {
    width: auto;
    flex: 1 1 auto;
}
.selbach-widget-content form.full-width.smaller-content input.text {
    padding: 4px;
    margin: 4px 0px;
    min-height: 28px;
    font-size: 13px;
}
.selbach-widget-content form.full-width.smaller-content .input-and-action {
    padding: 0px;
    margin: 0px;
    min-height: 24px;
    font-size: 13px;
}
.selbach-widget-content form.full-width input[type=date],
.selbach-widget-content form.full-width input[type=time] {
    padding: 4px 6px;
}
.selbach-widget-content form.full-width input.checkbox {
    margin: 4px 0 4px 4px;
    height: 20px;
    width: 20px;
    cursor: pointer;
}
.selbach-widget-content form.full-width input[type=submit],
.selbach-widget-content form .form-buttons input[type=button] {
    width: 100%;
    min-height: 32px;
    padding: 6px;
    cursor: pointer;
}
.selbach-widget-content form.view-only-mode input:disabled,
.selbach-widget-content form .static-content input:disabled,
.selbach-widget-content form.view-only-mode input.read-only,
.selbach-widget-content form .static-content input.read-only,
.selbach-widget-content form.view-only-mode select:disabled,
.selbach-widget-content form .static-content select:disabled {
    border-color: transparent;
    color: #000;
    background: #efeff1;
    appearance: none;
    border-radius: 3px;
    opacity: 1;
    cursor: default;
}
.selbach-widget-content form.view-only-mode input[type=checkbox]:disabled,
.selbach-widget-content form .static-content input[type=checkbox]:disabled {
    /*appearance: auto;*/
    background: transparent;
    border: 1px solid currentColor;
}
.selbach-widget-content form.view-only-mode input[type=checkbox]:disabled:checked,
.selbach-widget-content form .static-content input[type=checkbox]:disabled:checked {
    background: #0f6;
}
.selbach-widget-content form.full-width select {
    min-height: 32px;
    max-width: 100%;
    font-size: 14px;
    padding: 6px 4px;
    margin: 6px 0;
    flex-grow: 1;
    font-family: sans-serif;
    border-radius: 3px;
    border: 1px solid currentColor;
    background: rgba(128, 128, 128, 0.06);
}
.selbach-widget-content form.full-width.data-view select {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid currentColor;
}
.selbach-widget-content form.full-width.smaller-content select {
    padding: 2px 4px;
    min-height: 28px;
    margin: 4px 0px;
    font-size: 13px;
}
.selbach-widget-content form select.sb-client-options {
    background: #f6f6f6;
    border-radius: 3px;
    border: 1px solid #000;
}
.selbach-widget-content form.full-width .fieldSection button,
.selbach-widget-content .ui-elements-1 .fieldSection button {
    margin: 4px 0 4px 4px;
    min-height: 32px;
    /*min-width: 92px;*/
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.selbach-widget-content form.full-width.smaller-content .fieldSection button,
.selbach-widget-content .ui-elements-1.smaller-content .fieldSection button {
    min-height: 28px;
    font-size: 13px;
}
.selbach-widget-content form.full-width.smaller-content .fieldSection button > .material-icons,
.selbach-widget-content .ui-elements-1.smaller-content .fieldSection button > .material-icons {
    font-size: 18px;
}
.selbach-widget-content form.full-width.smaller-content .fieldSection button > .selbach-font-icons,
.selbach-widget-content .ui-elements-1.smaller-content  .fieldSection button > .selbach-font-icons {
    font-size: 16px;
}
.selbach-widget-content form.full-width .fieldSection button.round,
.selbach-widget-content .ui-elements-1 .fieldSection button.round {
    border-radius: 16px;
    padding: 0px 12px;
}
.selbach-widget-content form.full-width .fieldSection button.flex-auto,
.selbach-widget-content .ui-elements-1 .fieldSection button.flex-auto {
    flex: 1 1 auto;
}
.selbach-widget-content form.full-width .fieldSection .button-type-2,
.selbach-widget-content .ui-elements-1 .button-type-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    min-width: unset;
    padding: 0;
    border-radius: 16px;
    border: 0px solid #fff;
    /*box-shadow: 0 0 1px 0px white inset;*/
    background: #000;
    color: #fff;
    font-size: 16px;
    transition: transform .25s ease-in-out;
}
.selbach-widget-content form.full-width .fieldSection .button-type-2.medium,
.selbach-widget-content .ui-elements-1 .button-type-2.medium {
    min-height: unset;
    min-width: unset;
    height: 24px;
    width: 24px;
    font-size: 15px;
}
.selbach-widget-content form.full-width .fieldSection .button-type-2.small,
.selbach-widget-content .ui-elements-1 .button-type-2.small {
    min-height: unset;
    min-width: unset;
    height: 20px;
    width: 20px;
    font-size: 14px;
}
.selbach-widget-content form.full-width .fieldSection .button-type-2.small > *,
.selbach-widget-content .ui-elements-1 .button-type-2.small > * {
    font-size: inherit !important;
}
/*
.selbach-widget-content form.full-width .fieldSection .button-type-2.small > .material-icons,
.selbach-widget-content form.full-width .fieldSection .button-type-2.small > .selbach-font-icons,
.selbach-widget-content .ui-elements-1 .button-type-2.small > .material-icons,
.selbach-widget-content .ui-elements-1 .button-type-2.small > .selbach-font-icons {
    font-size: 14px;
}
*/
.selbach-widget-content form.full-width .fieldSection .button-type-2.outline,
.selbach-widget-content .ui-elements-1 .button-type-2.outline {
    background: transparent;
    color: currentColor;
    border: 2px solid;
}
.selbach-widget-content form.full-width .fieldSection .button-type-2.rot-clock-90,
.selbach-widget-content .ui-elements-1 .button-type-2.rot-clock-90 {
    transform: rotate(90deg);
}
.selbach-widget-content form.full-width .fieldInputGroup > input.text {
    width: auto;
    flex: 1 0 25%;
}
.selbach-widget-content form.full-width .fieldInputGroup > button {
    margin: 6px;
    padding: 2px 6px;
}
.selbach-widget-content form.full-width.smaller-content .fieldInputGroup > button {
    margin: 4px;
    padding: 2px 4px;
}
.selbach-widget-content form.full-width .fieldInputGroup > textarea {
    width: 100%;
    margin: 6px 0px;
    min-height: 32px;
    padding: 6px;
    resize: none;
}
.selbach-widget-content form.full-width .fieldInputGroup > button:last-child {
    margin-right: 0;
}
.selbach-widget-content form.full-width .fieldInputGroup > button:first-child {
    margin-left: 0;
}
.selbach-widget-content form.full-width .fieldInputGroup.input-and-action > input.text {
    min-width: 154px;
}
.selbach-widget-content form.full-width .fieldInputGroup.input-and-action > button + button {
    margin-left: 0;
}
.selbach-widget-content form.full-width .fieldInputGroup.input-groups-and-action > div {
    flex: 1 1 calc(100% - 48px);
    display: flex;
    flex-wrap: wrap;
}
.selbach-widget-content form.full-width.smaller-content .fieldInputGroup.input-groups-and-action > div {
    flex: 1 1 calc(100% - 42px);
}
.selbach-widget-content form.full-width .fieldInputGroup.input-groups-and-action > button {
    flex: 1 1 auto;
}
.selbach-widget-content form.full-width .fieldInputGroup.input-groups-and-action.hide-action > button {
    display: none;
}
.selbach-widget-content form.full-width .fieldInputGroup.input-groups-and-action > button.no-fill {
    flex: 0 0 auto;
}
.selbach-widget-content form.full-width .fieldInputGroup.input-groups-and-action > button.attach-right {
    margin-left: 0;
}
.selbach-widget-content form.full-width .fieldInputGroup .name-input-group {
    flex: 1 1 196px;
    display: flex;
    align-items: center;
    min-width: 146px;
}
.selbach-widget-content form.full-width .fieldInputGroup .name-input-group > span {
    min-width: 64px;
    text-align: center;
}
.selbach-widget-content form.full-width .fieldInputGroup .name-input-group > input {
    min-width: 72px;
    flex: 1 1 auto;
    /*margin: 6px 0;*/
}
.selbach-widget-content form .items-container {
    width: 100%;
    min-width: 192px;
    padding: 6px 0;
    display: flex;
    flex-wrap: wrap;
}
.selbach-widget-content form .items-container .item {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    margin: 4px;
    max-width: 100%;
    border: 1px solid currentColor;
}
.selbach-widget-content form .items-container .item.highlighted {
    outline: 1px solid;
    outline-offset: -2px;
}
.selbach-widget-content form .items-container .item > div {
    flex: 1 0 auto;
    min-height: 32px;
    padding: 4px 8px;
    border: 0;
    /*border-right: 1px solid currentColor;*/
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.selbach-widget-content form .items-container .item > button {
    width: 42px;
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: 0;
}
.selbach-widget-content form .items-container .item > button.set-off {
    background: rgba(155, 155, 155, 0.15);
}
.selbach-widget-content form .items-container .item > button.single-last {
    border-left: 1px solid;
}
.selbach-widget-content form .items-container .item i,
.selbach-widget-content form .items-container .item span {
    font-size: inherit;
}
.selbach-widget-content form .form-buttons {
    margin: 18px 0 0 0;
    width: 100%;
    flex: 1 0 100%;
}
.selbach-widget-content form .form-buttons.flex {
    display: flex;
    flex-wrap: wrap;
    margin-left: -2px;
    margin-right: -2px;
}
.selbach-widget-content.sticky-buttons form .form-buttons.flex {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    padding: 2px 0 16px 0;
    margin-top: 16px;
}
.selbach-widget-content form .form-buttons input[type=submit],
.selbach-widget-content form .form-buttons input[type=button] {
    margin: 4px 0;
}
.selbach-widget-content form .form-buttons.flex input[type=submit], 
.selbach-widget-content form .form-buttons.flex input[type=button] {
    width: auto;
    flex: 1 1 256px;
    margin: 4px;
}
.selbach-widget-content form .form-buttons.flex.smaller input[type=submit], 
.selbach-widget-content form .form-buttons.flex.smaller input[type=button] {
    flex: 1 1 96px;
}
.selbach-widget-content .form-buttons button {
    min-height: 32px;
    padding: 6px;
    margin: 4px;
}
.selbach-widget-content .form-buttons button.action-required,
.selbach-widget-content .form-buttons input[type=submit].action-required, 
.selbach-widget-content .form-buttons input[type=button].action-required {
    background: #ffeb3b;
    color: #000;
}

.selbach-widget-group {
    max-width: 100%;
    max-height: 100%;
    overflow: visible;
    display: block;
}

.selbach-widget-group input[type=text],
.selbach-widget-group input[type=email],
.selbach-widget-group input[type=password],
.selbach-widget-group input[type=url],
.selbach-widget-group input[type=search] {
    width: 100%;
    min-width: 192px;
    margin: 6px 0px 12px 0px;
    max-width: 100%;
    min-height: 32px;
    padding: 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 14px;
}
.selbach-widget-group input[type=file] {
    font-size: 16px;
    padding: 4px;
    width: 100%;
    min-width: 220px;
    appearance: none;
    border: 1px solid currentColor;
    border-radius: 3px;
}
.selbach-widget-group label {
    font-size: 15px;
}
.selbach-widget-group button {
    width: 100%;
    min-height: 32px;
    font-size: 14px;
    padding: 6px 16px;
    margin: 6px 0px 12px 0px;
    /*border: 1px solid currentColor;*/
    border: 0;
    border-radius: 3px;
    background: #7ec3d8;
    color: #fff;
    cursor: pointer;
}
.selbach-widget-group button.auto-size {
    width: auto;
}
.selbach-widget-group button:hover {
    filter: brightness(1.06);
}

.selbach-widget-textbox {
    width: 100%;
}
.selbach-widget-textbox > textarea {
    width: 100%;
    height: 100%;
    min-height: 50px;
    resize: vertical;
}

.selbach-widget-cards-box {
    margin: 0;
}
.selbach-widget-cards-box.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 4px -4px;
}
.selbach-widget-cards-box.grid-view {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.selbach-widget-cards-box.grid-view.align-evenly {
    justify-content: space-evenly;
}
.selbach-widget-cards-box.grid-view.align-start {
    justify-content: start;
}

.selbach-widget-card-item {
    position: relative;
    border: 1px solid currentColor;
    display: flex;
    flex-direction: row;
    margin: 8px 0px;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    overflow: auto;
    scrollbar-width: thin;
    contain-intrinsic-size: auto 200px auto 100px;
}
.selbach-widget-card-item.not-visible {
    /*visibility: hidden;*/
    /*contain: layout style paint size;*/
    content-visibility: hidden;
}
.selbach-widget-card-item.bold {
    border: 2px solid currentColor;
}
.selbach-widget-card-item.item-selected {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0px 0px 0px 2px rgba(0, 0, 0, 0.15);
    outline: 1px solid;
    outline-offset: 0px;
}
.selbach-widget-card-item.no-padding {
    padding: 0;
}
.selbach-widget-cards-box.flex .selbach-widget-card-item {
    margin: 4px;
    flex: 1 0 350px;
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item {
    margin: 4px;
    flex: 0 0 auto;
    flex-direction: column;
    width: 165px;
    height: 165px;
    padding: 4px;
}
/* grid card sizes for S, M, L, XL - with and without subtile and buttons */
.selbach-widget-cards-box.grid-view.bigger-grid-title .selbach-widget-card-item,
.selbach-widget-cards-box.grid-view.grid-footer-buttons .selbach-widget-card-item {
    width: 165px;
    height: 172px;
}
.selbach-widget-cards-box.grid-view.bigger-grid-title.grid-footer-buttons .selbach-widget-card-item {
    width: 165px;
    height: 196px;
}
.selbach-widget-cards-box.grid-view.grid-img-size-small .selbach-widget-card-item {
    width: 135px;
    height: 135px;
}
.selbach-widget-cards-box.grid-view.grid-img-size-small.bigger-grid-title .selbach-widget-card-item,
.selbach-widget-cards-box.grid-view.grid-img-size-small.grid-footer-buttons .selbach-widget-card-item {
    width: 135px;
    height: 149px;
}
.selbach-widget-cards-box.grid-view.grid-img-size-small.bigger-grid-title.grid-footer-buttons .selbach-widget-card-item {
    width: 135px;
    height: 164px;
}
.selbach-widget-cards-box.grid-view.grid-img-size-large .selbach-widget-card-item {
    width: 195px;
    height: 195px;
}
.selbach-widget-cards-box.grid-view.grid-img-size-large.bigger-grid-title .selbach-widget-card-item,
.selbach-widget-cards-box.grid-view.grid-img-size-large.grid-footer-buttons .selbach-widget-card-item {
    width: 195px;
    height: 205px;
}
.selbach-widget-cards-box.grid-view.grid-img-size-large.bigger-grid-title.grid-footer-buttons .selbach-widget-card-item {
    width: 195px;
    height: 215px;
}
.selbach-widget-cards-box.grid-view.grid-img-size-xl .selbach-widget-card-item {
    width: 225px;
    height: 225px;
}
.selbach-widget-cards-box.grid-view.grid-img-size-xl.bigger-grid-title .selbach-widget-card-item,
.selbach-widget-cards-box.grid-view.grid-img-size-xl.grid-footer-buttons .selbach-widget-card-item {
    width: 225px;
    height: 235px;
}
.selbach-widget-cards-box.grid-view.grid-img-size-xl.bigger-grid-title.grid-footer-buttons .selbach-widget-card-item {
    width: 225px;
    height: 245px;
}

.selbach-widget-card-item.clickable {
    cursor: pointer;
}
.selbach-widget-card-item.selected {
    outline: 2px solid currentColor;
}
.selbach-widget-card-item.deactivated {
    pointer-events: none;
    opacity: 0.25 !important;
}
.selbach-widget-card-item.attention-required::after {
    position: absolute;
    content: "!";
    top: 6px;
    right: 6px;
    width: 15px;
    height: 15px;
    padding: 1px;
    color: #f00;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid;
    border-radius: 10px;
    text-align: center;
}
.selbach-widget-card-item.hidden {
    display: none;
}
.selbach-widget-card-item > section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 4px 0;
    justify-content: space-around;
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item > section.grid-section {
    width: 100%;
    overflow: hidden;
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item > section:not(.grid-section) {
    display: none;
}
.selbach-widget-cards-box .selbach-widget-card-item > section.grid-section-title,
.selbach-widget-cards-box .selbach-widget-card-item > section.grid-section-footer {
    display: none;
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item > section.grid-section-title {
    display: flex;
    /*height: 50px;*/
    padding: 6px 8px 4px 8px;
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item > section.grid-section-title.with-subtitle {
    justify-content: start;
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item > section.grid-section-title > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    padding: 0;
    line-height: 1.15;
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item > section.grid-section-title .title {
    font-size: 14px;
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item > section.grid-section-title.with-subtitle .title {
    /*font-size: 14px;*/
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item > section.grid-section-title .subtitle {
    margin: 5px 0 0 0;
    font-size: 13px;
    /*display: block;*/
    /*text-overflow: ellipsis;*/
    -webkit-line-clamp: 2;
}
/*
.selbach-widget-cards-box.grid-view.grid-img-size-large .selbach-widget-card-item > section.grid-section-title .title,
.selbach-widget-cards-box.grid-view.grid-img-size-xl .selbach-widget-card-item > section.grid-section-title .title {
    font-size: 15px;
}
.selbach-widget-cards-box.grid-view.grid-img-size-large .selbach-widget-card-item > section.grid-section-title .subtitle,
.selbach-widget-cards-box.grid-view.grid-img-size-xl .selbach-widget-card-item > section.grid-section-title .subtitle {
    font-size: 13px;
}
*/
.selbach-widget-cards-box.grid-view.grid-img-size-small .selbach-widget-card-item > section.grid-section-title .subtitle {
    font-size: 12px;
}
.selbach-widget-cards-box.wrap-sections:not(.grid-view) .selbach-widget-card-item {
    flex-wrap: wrap;
    justify-content: space-between;
}
.selbach-widget-card-item > section.card-button,
.selbach-widget-card-item > section.card-checkbox {
    max-width: 64px;
    min-width: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.selbach-widget-cards-box.wrap-sections:not(.grid-view) .selbach-widget-card-item > section.properties-list {
    flex-basis: 256px;
}
/*.selbach-widget-cards-box.w640 .selbach-widget-card-item > section.properties-list {
}*/
.selbach-widget-card-item > section.card-button.reserve-height,
.selbach-widget-card-item > section.card-checkbox.reserve-height,
.selbach-widget-card-item.content-card > section.card-button,
.selbach-widget-card-item.content-card > section.card-checkbox {
    min-height: 64px;
}
.selbach-widget-card-item > section.card-button.with-image {
    max-width: 100px;
    max-height: 100%;
    overflow: hidden;
    flex: 0 0 auto;
    padding: 4px
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item.content-card > section.card-buttons-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: end;
    align-items: end;
    min-height: 33px;
    /*background: #eee;*/
    flex: 0 0 auto;
    padding: 0;
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item.content-card > section.grid-section-footer > .card-button {
    cursor: pointer;
    display: flex;
    padding: 2px;
    margin: 4px;
    border: 1px solid;
    border-radius: 5px;
    /* box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.20); */
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item.content-card > section.grid-section-footer > .card-button i {
    font-size: 17px;
    /*font-size: 19px;*/
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item > section.grid-section.with-image {
    max-width: unset;
    max-height: unset;
    height: calc(100% - 44px);  /* NOTE: aligned with title */
    padding: 6px;
}
.selbach-widget-cards-box.grid-view.bigger-grid-title .selbach-widget-card-item > section.grid-section.with-image {
    height: calc(100% - 62px);
}
.selbach-widget-cards-box.grid-view.grid-footer-buttons .selbach-widget-card-item > section.grid-section.with-image {
    height: calc(100% - 80px);
}
.selbach-widget-cards-box.grid-view.bigger-grid-title.grid-footer-buttons .selbach-widget-card-item > section.grid-section.with-image {
    height: calc(100% - 94px);
}
.selbach-widget-cards-box.wrap-sections:not(.grid-view) .selbach-widget-card-item > section.card-button.with-image {
    margin: 0 4px;
}
.selbach-widget-card-item > section.card-button.with-image > img {
    max-width: 100%;
    max-height: 75px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 5px;
    border: 1px solid currentColor;
    margin: 8px 0;
}
.selbach-widget-cards-box.grid-view .selbach-widget-card-item > section.grid-section.with-image > img {
    margin: 0;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}
.selbach-widget-card-item > section.card-button.image-placeholder > * {
    width: 56px;
    height: 48px;
    border-radius: 5px;
    border: 1px solid currentColor;
    margin: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eee;
}
.selbach-widget-card-item > section.card-button.with-sort-arrows {
    min-width: 55px;
    max-width: 55px;
}
.selbach-widget-card-item > section.card-button.with-sort-arrows button {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    padding: 2px;
    margin: 3px;
}
.selbach-widget-card-item > section.card-checkbox {
    max-width: 42px;
    min-width: 42px;
}
.selbach-widget-card-item > section a {
    color: currentColor;
}
.selbach-widget-card-item .title,
.selbach-widget-card-item .subtitle,
.selbach-widget-card-item .description {
    width: 100%;
    max-width: 100%;
    padding: 8px 8px;
    margin: 0;
    white-space: normal;
    overflow: hidden;
}
.selbach-widget-card-item .title {
    font-size: 15px;
    font-weight: bold;
}
.selbach-widget-card-item .subtitle {
    font-size: 14px;
}
.selbach-widget-card-item .label-button,
.selbach-widget-card-item .plain-label {
    font-size: 14px;
    padding: 8px;
    line-break: anywhere;
    min-width: 72px;
}
.selbach-widget-card-item .label-button {
    cursor: pointer;
}
.selbach-widget-card-item.smaller-labels .label-button,
.selbach-widget-card-item.smaller-labels .plain-label {
    padding: 4px 8px;
}
.selbach-widget-card-item .description {
    font-size: 13px;
}
.selbach-widget-card-item .description.flex {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}
.selbach-widget-card-item .description > .desc-item {
    margin: 0px 8px 4px 0px;
    /*word-break: break-all;*/
    overflow-wrap: anywhere;
}
.selbach-widget-card-item .description.flex > .desc-item {
    border: 1px solid #ddd;
    padding: 2px 4px;
}
.selbach-widget-card-item .description > .desc-item > *:first-child {
    font-weight: bold;
}
.selbach-widget-card-item .description > .desc-item.interactive {
    cursor: pointer;
}

.sb-label-box-container {
    display: flex;
    flex-wrap: wrap;
}
.sb-label-box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 4px;
    padding: 4px 8px;
    background: #fff;
    color: #000;
    border-radius: 3px;
    border: 1px solid currentColor;
    font-size: 15px;
    min-height: 28px;
}
.sb-label-box > label {
    font-size: inherit;
    font-weight: bold;
    margin-right: 4px;
}
.sb-label-box > span {
    white-space: nowrap;
}

.sb-label-and-text {
    width: calc(100% - 8px);
    margin: 4px;
    padding: 4px;
}
.sb-label-and-text > label {
    font-weight: bold;
    margin-right: 8px;
}

/* .sb-data-results {} */
/* .sb-text-results {} */
.sb-progress-results {
    overflow-y: auto;
}
.sb-progress-results label {
    display: inline-block;
	max-width: 100%;
	text-overflow: ellipsis;
    overflow: hidden;
}
.sb-progress-results .upload-success {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 4px 0;
}
.sb-progress-results button {
    flex: 0 0 auto;
    background: transparent !important;
    color: currentColor !important;
    border: 1px solid currentColor !important;
    width: 34px;
    padding: 4px;
    margin: 1px 0 1px 1px;
}
.sb-progress-results a {
    flex: 1 1 calc(100% - 35px);
    max-width: calc(100% - 35px);
    color: currentcolor;
    font-size: 12px;
    border: 1px solid currentcolor;
    border-radius: 3px;
    padding: 4px;
    margin: 1px 0;
    /*display: inline-block;*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*overflow-wrap: break-word;*/
    overflow: hidden;
}
.sb-progress-results progress {
    width: 100%;
}
.sb-request-results .error-message,
.sb-progress-results .error-message {
    color: #f00;
}
.sb-preview-results {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%;
    min-height: 72px;
    border: 1px solid currentColor;
    border-radius: 3px;
    overflow-y: auto;
}
.sb-preview-results .file-preview {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 72px;
    height: 72px;
    padding: 4px;
}
.sb-preview-results .file-preview.list-style {
    flex-direction: row;
    flex: 1 1 100%;
    width: auto;
    max-width: calc(100% - 8px);
    height: 35px;
    margin: 4px;
    background: #eee;
    border-radius: 3px;
}
.sb-preview-results .file-preview .file-icon {
    flex: 1 1 auto;
    font-size: 27px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sb-preview-results .file-preview .file-icon.loading {
    animation: sb-file-icon-rotate 5s linear infinite;
}
@keyframes sb-file-icon-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.sb-preview-results .file-preview.list-style .file-icon {
    flex: 0 0 auto;
    width: auto;
}
.sb-preview-results .file-preview .file-name {
    flex: 0 0 24px;
    display: inline-block;
    font-size: 10px;
    width: 100%;
    text-overflow: ellipsis; /* basically no effect, see below */
    overflow: hidden;
    text-align: center;
    overflow-wrap: break-word;
}
.sb-preview-results .file-preview .file-progress {
    font-size: 10px;
}
.sb-preview-results .file-preview.list-style .file-name {
    flex: 1 1 100%;
    width: auto;
    max-height: 100%;
    font-size: 12px;
    padding: 0 4px;
}
.sb-preview-results .file-preview.list-style .file-progress {
    font-size: 12px;
    padding: 0 4px;
}

.sb-tile-container {
    display: flex;
}
.sb-tile-icon {
    -webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
    width: 108px;
    height: 108px;
    padding: 8px;
    margin: 14px 16px 18px 16px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #000;
    color: #fff;
    border: 0px solid currentColor;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transition: all 0.3s;
    appearance: none;
    font-family: sans-serif;
}
.sb-tile-icon.tile-style-2 {
    border: 2px solid currentColor;
    background: #fff;
    color: #000;
}
.sb-tile-icon:focus {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    outline: none;
}
.sb-tile-icon:hover,
.sb-tile-icon:focus-visible {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    margin: 12px 16px 20px 16px;
    outline: none;
}
.sb-tile-icon:active {
    transition: all 0.0s;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.25);
    margin: 16px 16px 16px 16px;
}
.sb-tile-icon > div {
    -webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
    pointer-events: none;
	width: 63%;
    height: 63%;
    padding: 4px;
    margin: 0;
    flex: 0 0 auto;
	display: flex;
    justify-content: center;
    align-items: center;
	overflow: hidden;
}
.sb-tile-icon > div > span,
.sb-tile-icon > div > i {
    -webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
	font-size: 48px;
}
.sb-tile-icon label {
    -webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
    pointer-events: none;
    font-size: 12px;
    font-weight: bold;
    /*margin-top: 4px;*/
    padding: 2px 4px;
    max-width: 100%;
    height: 32px;
    text-align: center;
    display: inline-flex;
    /* align-items: center; */
	overflow-wrap: break-word;
    overflow: hidden;
}

.sb-launcher-icon-container {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
}
.sb-launcher-icon {
    -webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
	width: 128px;
	height: 128px;
    padding: 4px;
    margin: 8px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sb-launcher-icon > button {
	width: 60px;
    height: 60px;
    padding: 6px;
    margin: 4px;
    flex: 0 0 auto;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
    justify-content: center;
    align-items: center;
	overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    transition: all 0.3s;
}
.sb-launcher-icon > button.sbos-app-css-button {
	border: 2px solid #000;
    background: #fff;
    color: #000;
}
.sb-launcher-icon > button:focus {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    outline: none;
}
.sb-launcher-icon > button:hover,
.sb-launcher-icon > button:focus-visible {
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    margin: 2px 4px 6px 4px;
    outline: none;
}
.sb-launcher-icon > button:active {
    transition: all 0.0s;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.25);
    margin: 6px 4px 2px 4px;
}
.sb-launcher-icon > button > span,
.sb-launcher-icon > button > i {
	font-size: 31px;
}
.sb-launcher-icon > button > .selbach-font-icons {
    font-size: 24px;
}
.sb-launcher-icon label {
    font-size: 15px;
    font-weight: normal;
    margin-top: 10px;
    max-width: 100%;
    height: 34px;
    text-align: center;
    display: inline-flex;
    /* align-items: center; */
	overflow-wrap: break-word;
    overflow: hidden;
}

.sb-cards-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 24px 16px 8px 16px;
}
sb-flip-card {
	margin: 8px;
}
sb-flip-card.adaptive {
	width: 320px;
	height: 240px;
	margin: 8px 12px;
}
.sb-cards-container.portrait-style sb-flip-card.adaptive {
	width: 230px;
	height: 320px;
}
.sb-cards-container.portrait-style-2 sb-flip-card.adaptive {
	width: 224px;
	height: 286px;
}

.sb-partner-logos-container {
	display: flex;
    justify-content: center;
	align-items: center;
    flex-wrap: wrap;
}
.sb-partner-logos-container img {
	max-height: 92px;
	margin: 8px 16px;
}
.sb-partner-logos-container.bigger img {
	max-height: 128px;
	margin: 8px 16px;
}

/* -- overlays -- */

.selbach-widget-overlay,
.selbach-login-overlay,
.selbach-settings-overlay,
.selbach-load-overlay,
.selbach-notifications-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    margin: 0;
    background: #333;
    color: #eee;
    overflow: auto;
}
.selbach-widget-overlay.no-padding {
    padding: 0;
}

.selbach-overlay-section {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 100%;
    max-height: 100%;
    z-index: 1;
}
.selbach-overlay-ctrl {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.selbach-overlay-ctrl button {
    background: transparent;
    color: currentColor;
    margin: 4px;
    padding: 6px;
    border: 0;
}

.selbach-settings-overlay {
    z-index: 2;
}
.selbach-settings-overlay.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.selbach-load-overlay {
    background: #f7f7f7;
    color: #000;
    font-size: 21px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.sbos-theme-dark .selbach-load-overlay {
    background: #333;
    color: #eee;
}
.selbach-load-spinner {
    min-height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
/* credits for loader animation: https://loading.io/css/ */
.selbach-load-animation.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 62px;
    height: 12px;
}
.selbach-load-animation.lds-ellipsis div {
    position: absolute;
    top: 13%;
    width: 14%;
    height: 74%;
    border-radius: 50%;
    background: currentColor;
}
.selbach-load-animation.lds-ellipsis div:nth-child(1) {
    left: 12%;
    animation: lds-ellipsis1 0.6s infinite;
}
.selbach-load-animation.lds-ellipsis div:nth-child(2) {
    left: 12%;
    animation: lds-ellipsis2 0.6s infinite;
}
.selbach-load-animation.lds-ellipsis div:nth-child(3) {
    left: 42%;
    animation: lds-ellipsis2 0.6s infinite;
}
.selbach-load-animation.lds-ellipsis div:nth-child(4) {
    left: 72%;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% { transform: scale(1); }
    5% { transform: scale(1); }
    6% { transform: scale(0); }
    100% { transform: scale(1); }
}
@keyframes lds-ellipsis3 {
    0% { transform: scale(1); }
    100% { transform: scale(0); }
}
@keyframes lds-ellipsis2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(200%, 0); }
}

.selbach-notifications-overlay {
    box-sizing: border-box;
    background: transparent;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: unset;
    height: auto;
    padding: 0;
    margin: 0;
    z-index: 9;
}
.selbach-notifications-overlay .sb-view-notification {
    box-sizing: border-box;
    flex: 1 0 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f7f7f7;
    color: #000;
    border: 1px solid currentColor;
    font-size: 14px;
    padding: 8px;
    margin: 1px 0;
}
.sbos-theme-dark .selbach-notifications-overlay .sb-view-notification {
    background: #333;
    color: #eee;
}
.sb-view-notification button {
    background: transparent;
    color: currentColor;
    margin-right: 8px;
    padding: 2px 4px;
    border: 0;
}
.sb-view-notification .message {
    flex: 1 1 100%;
}
.sb-view-notification .menu-spacer {
    height: 100%;
    width: 50px;
}
/* notification message themes */
.selbach-notifications-overlay.theme-modern-frosted {
    padding: 4px 8px;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.selbach-notifications-overlay.theme-modern-frosted .sb-view-notification {
    margin: 4px 0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    background: #fff;
    border: 1px solid #777;
}

.selbach-login-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.selbach-login-inlay {
    display: flex;
    justify-content: center;
}
.selbach-login-overlay .selbach-login-box,
.selbach-login-inlay .selbach-login-box {
    width: 100%;
    height: 100%;
    max-width: 308px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.selbach-login-box h3 {
    text-align: center;
}
.selbach-login-box .login-client-info-box {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border: 1px solid;
    border-radius: 3px;
    margin: 16px 0;
    font-size: 15px;
    background: rgba(128, 128, 128, 0.05);
    text-align: left;
}
.selbach-login-box .login-client-info-box.active-client {
    border: 2px solid;
}

.sb-overlay-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-height: 100%;
    max-width: 345px;
    font-size: 15px;
}
.sb-overlay-menu .group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 8px 4px;
}
.sb-overlay-menu .group:last-child {
    margin-bottom: 16px;
}
.sb-overlay-menu .group > label {
    margin: 4px 8px 4px 0;
}
.sb-overlay-menu .group > span {
}

.sb-overlay-menu input.text {
	border: 0;
	border-bottom: 1px solid;
	background: transparent;
	color: currentColor;
	font-size: 14px;
}
.sb-overlay-menu select {
	width: 100%;
	min-width: 192px;
    border: 0;
}
.sb-overlay-menu form:not(.selbach-widget-form).view-only-mode input:disabled,
.sb-overlay-menu form:not(.selbach-widget-form) .static-content input:disabled {
    color: currentColor;
    background: transparent;
	font-size: 15px;
    padding: 0;
}