.app { font-size: 10px; margin-bottom: 20px; padding: 20px; border: 3px solid #eee; border-radius: 5px; background: white; display: flex; flex-flow: wrap; justify-content: center; align-items: center; }
.app.dark { background-color: #434343; border: 3px solid #434343; }
.app.colored { background: linear-gradient(315deg, #22a36d, #4ea3ed); border: none; }
.app .fb-button { font-weight: bold; padding: 0.4em 0.8em; border-radius: 5px; font-size: 1.1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; user-select: none; color: #f4f4f4; border: none !important; margin: 0.25em 0.5em; box-shadow: inset 0 -1px 0px 0px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.15); }
.app .fb-button:hover:not(.noop, .busy, :disabled) { filter: brightness(1.05); box-shadow: inset 0 -1px 0px 0px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 5px rgba(255, 255, 255, 0.3); }
.app .fb-button:active:not(.noop, .busy, :disabled) { filter: brightness(1); box-shadow: inset 0 1px 0px 0px rgba(0, 0, 0, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.2); }
.app .fb-button:disabled { filter: brightness(0.7) contrast(0.8); cursor: not-allowed; }
.app .fb-button.busy { cursor: progress; }
.app .fb-button.noop { cursor: default; }
.app .fb-green { background: #6a4; }
.app .fb-purple { background: #a64d79; }
.app .fb-pink { background: #eebbbb; }
.app .fb-red { background: #ee6666; }
.app .fb-yellow { background: #fd6; }
.app .fb-gray { background: #666; }
.app .fb-white { background: #f4f4f4; }
.app .fb-brown { background: #ca8; }
.app .fb-orange { background: #fa0; }
.app .fb-teal { background: #1eb287; }
.app .fb-blue { background: #489fe4; }
.app .fb-clear-light { background: transparent; box-shadow: inset 0 0 0 2px #f4f4f4; }
.app .fb-clear-light:hover:not(.noop, .busy, :disabled) { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 2px #f4f4f4, 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 5px rgba(255, 255, 255, 0.3); }
.app .fb-clear-light:active:not(.noop, .busy, :disabled) { background: rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 2px #f4f4f4; }
.app .fb-clear-light:disabled { filter: brightness(0.7) contrast(0.8); cursor: not-allowed; }
.app .fb-clear-dark { background: transparent; box-shadow: inset 0 0 0 2px #434343; }
.app .fb-clear-dark:hover:not(.noop, .busy, :disabled) { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 2px #434343, 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 5px rgba(255, 255, 255, 0.3); }
.app .fb-clear-dark:active:not(.noop, .busy, :disabled) { background: rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 2px #434343; }
.app .fb-clear-dark:disabled { filter: brightness(0.7) contrast(0.8); cursor: not-allowed; }
.app .fb-yellow, .app .fb-orange, .app .fb-clear, .app .fb-pink, .app .fb-white, .app .fb-brown, .app .fb-add-variable, .app .fb-clear-dark { color: #434343; }
.app .fb-icon-button-cluster { display: flex; flex-flow: wrap; justify-content: center; }
.app .fb-icon-button { width: 2em; height: 2em; font-size: 1.5em; border: none; border-radius: 5px; background: transparent; color: #434343; }
.app .fb-icon-button.light { color: #f4f4f4; }
.app .fb-icon-button.light:hover:not(.noop, .busy, :disabled) { background: rgba(255, 255, 255, 0.12); }
.app .fb-icon-button.light:disabled { color: #f4f4f4; filter: brightness(0.8); }
.app .fb-icon-button:hover { background: rgba(0, 0, 0, 0.08); }
.app .fb-icon-button:active:not(.noop, .busy, :disabled) { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); filter: brightness(0.95); }
.app .fb-icon-button:disabled { filter: invert(0.5); cursor: not-allowed; }
.app .fb-icon-button.busy { cursor: progress; }
.app .fb-icon-button.noop { cursor: default; }