input, output, select, textarea {
    -webkit-appearance: none;
    appearance: none;
}

textarea {
    resize: horizontal;
}

.input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=color], input[type=date], input[type=time], input[type=submit], input[type=button], .button, select, textarea {
    margin: 5px 0;
    padding: 12px 20px;
    border: 1px solid #00000021;
    background: #f9f9f9;
    text-decoration: none;
    font-family: inherit;
}
.ew-input .signature-pad {
    margin: 5px 0;
    border: 1px solid #00000021;
    background: white;
    border-radius: 3px;
    /*width: 100%;
    height: 200px;
    cursor: url('../lib/signature/pen.svg'), crosshair;*/
    cursor: crosshair;
    /*transform: translateX(-25px);*/
}
.ew-action-bar .button {
    margin-top: 0;
}
.ew-form button, .ew-form a.button {
    margin: 10px 10px 10px 0;
}
input[type=color] {
    height: 44px;
}
input[type=range] {
    width: 100%;
    margin: 5px 0;
    padding: 10px 5px;
/*border: 1px solid #00000021;
    background: #f9f9f9;*/
}
input.search, .input.search, input[type=search].search {
    padding: 15px 20px 15px 60px;
}
.ew-tab-page input.search {
    border-top: 1px solid #00000019;
    border-bottom: 1px solid #00000019;
}
.ew-tab-page input.search, .ew-tab-page input.search:active {
    max-width: 450px;
    border-left: 0 !important;
    border-right: 1px solid #00000019 !important;
    border-radius: 0;
}
.input-between {
    margin: 5px 0;
    padding: 12px 20px;
    border: 1px solid #00000021;
    border-left: 0;
    border-right: 0;
    background: #f9f9f9;
    text-decoration: none;
    font-family: inherit;
    text-align: center;
    color: #0000009c;
}
.input-unit {
    margin: 5px 0;
    padding: 12px 20px;
    border: 1px solid #00000021;
    border-left: 0;
    background: #f9f9f9;
    text-decoration: none;
    font-family: inherit;
    text-align: center;
    color: #000000bd;
}
.input-fade-right {
    border-right: 1px solid #0000000f !important;
}
.input-fade-left {
    border-left: 1px solid #0000000f !important;
}
select {
    padding: 12px 25px 12px 20px;
}
.input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=color], input[type=date], input[type=time], select, textarea {
    border-radius: 3px;
    background: #ffffffe6;
}
.input, input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], select, textarea, input.full, select.full, textarea.full {
    display: block;
    width: 100%;
}
input[type=number] {
    display: inline-block;
    width: 120px;
    text-align: right;
}
input.decimal {
    display: inline-block;
    width: 120px;
    text-align: right;
}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=date], input[type=time], textarea {
    cursor: text;
}
input.full-width {
    width: 100%;
}
a.button.full-width, button.full-width {
    width: 100%;
    text-align: center;
}
select, option, label, input[type=color] {
    cursor: pointer;
}
input:disabled {
    cursor: not-allowed;
}
textarea {
    resize: vertical;
    min-height: 100px;
    max-height: 450px;
    padding: 15px 20px;
    background: #ffffffe6;
}
textarea.long {
    height: 320px;
    min-height: 100px;
    max-height: 750px;
}
.input:active, input[type=text]:active, input[type=email]:active, input[type=password]:active, input[type=number]:active, input[type=url]:active, input[type=tel]:active, input[type=color]:active, input[type=date]:active, input[type=time]:active, select:active, textarea:active {
    background: #f3e3d2;
}
#ew-dialog .input, #ew-dialog input, #ew-dialog textarea {
    background: white;
}
#ew-dialog .input:read-only, #ew-dialog input:read-only, #ew-dialog textarea:read-only, #ew-dialog input.disabled {
    background: #f9f9f9 !important; /*rgba(234, 234, 234, 0.67) !important;*/
    color: rgba(0, 0, 0, 0.89);
}
.input:focus, input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, input[type=url]:focus, input[type=tel]:focus, input[type=color]:focus, input[type=date]:focus, input[type=time]:focus, select:focus, textarea:focus {
    background-color: #fff7e3 !important;
    border: 1px solid #0b0b0b30;
    outline: 5px solid #0000000a;
}
.ew-auth .ew-form input {
    margin-bottom: 10px; /* todo: check if looking nice everywhere */
}
h1 .h-buttons {
    display: inline-block;
    font-size: 0.55em;
    line-height: 0.66em;
    padding-left: 20px;
    vertical-align: middle;
}
h1 .h-buttons button, h1 .h-buttons a.button {
    /*padding: 12px 15px;*/
    background: #f0f0f054;
    border: 1px solid #0000000a;
    /*box-shadow: 3px 3px 7px #0000;*/
    line-height: 24px;
    font-size: 1.1em;
    vertical-align: middle;
}
h1 .h-buttons button.primary, h1 .h-buttons a.button.primary {
    background: hsla(var(--ew-color-hue), 100%, 45%, 0.82);
}
/*input:required {
    box-shadow: inset 0 0 25px #f9cfb5;
}*/

/* CHECKBOX AND RADIO */
.ew-checkbox, .ew-radio {
    display: block;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.ew-checkbox input, .ew-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.ew-checkbox input:disabled, .ew-radio input:disabled {
    cursor: default;
}
.ew-checkbox .ew-checkmark, .ew-radio .ew-checkmark {
    position: absolute;
    top: 16px;
    left: 15px;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #00000021;
    border-radius: 5px;
}
.ew-radio .ew-checkmark {
    top: 10px;
}
.ew-radio label:first-child .ew-checkmark {
    top: 16px;
}
.cuddle-top .ew-checkbox .ew-checkmark, .ew-checkbox.cuddle-top .ew-checkmark {
    top: 9px;
}
.ew-radio .ew-checkmark {
    border-radius: 15px;
}
.ew-checkbox label, .ew-radio label {
    position: relative;
    display: block;
    padding: 16px 10px 16px 50px;
}
.ew-radio label {
    padding: 10px 10px 10px 50px;
}
.ew-radio label:first-child {
    padding-top: 16px;
}
.ew-radio label:last-child {
    padding-bottom: 16px;
}
.ew-checkbox label.condensed, .ew-radio label {
    /*position: relative;
    display: block;
    padding: 16px 10px 16px 50px;*/
}
.cuddle-top .ew-checkbox label, .cuddle-top .ew-radio label, .ew-checkbox.cuddle-top label, .ew-radio.cuddle-top label {
    padding-top: 9px;
}
.cuddle-bottom .ew-checkbox label, .cuddle-bottom .ew-radio label, .ew-checkbox.cuddle-bottom label, .ew-radio.cuddle-bottom label {
    padding-bottom: 9px;
}
.ew-checkbox.framed label, .ew-radio.framed label {
    border: 1px solid #d9d9d991;
    border-top: 0;
}
.ew-radio.framed label {
    background: #ffffffd6;
}
.ew-checkbox.framed label:first-child, .ew-radio.framed label:first-child {
    border-top: 1px solid #d9d9d991;
    border-radius: 10px 10px 0 0;
}
.ew-checkbox.framed label:last-child, .ew-radio.framed label:last-child {
    border-radius: 0 0 10px 10px;
}
.ew-checkbox.framed label:only-child, .ew-radio.framed label:only-child {
    border-radius: 10px 10px 10px 10px;
}
.ew-checkbox input:focus + .ew-checkmark {
    outline: 5px solid #0000000a;
}
label.required {
    text-decoration: underline 1px dotted #0000006b;
}
.ew-checkbox:hover input ~ .ew-checkmark, .ew-radio label:hover input ~ .ew-checkmark {
    background-color: #ccc;
}
.ew-checkbox input:required ~ .ew-checkmark, .ew-radio input:required:invalid ~ .ew-checkmark {
    border: 1px solid red;
}
.ew-checkbox input:checked ~ .ew-checkmark, .ew-radio label input:checked ~ .ew-checkmark {
    background-color: #2196F3;
    border: 0;
}
.ew-checkbox .ew-checkmark:after, .ew-radio .ew-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.ew-checkbox input:checked ~ .ew-checkmark:after, .ew-radio input:checked ~ .ew-checkmark:after {
    display: block;
}
/*.ew-checkbox input.last ~ .ew-checkmark {
    background-color: orangered !important;
    border: 0;
}
.ew-checkbox input.shift ~ .ew-checkmark {
    background-color: red !important;
    border: 1px solid yellowgreen;
}*/
.ew-checkbox .ew-checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.ew-radio .ew-checkmark:after {
    left: 7px;
    top: 7px;
    width: 11px;
    height: 11px;
    border: 0;
    background: white;
    border-radius: 10px;
    /*transition: 180ms transform ease-in-out;
    transform: scale(0);*/
}
td.checkbox, td.kebab, th.checkbox, th.kebab {
    width: 55px;
    padding: 0 !important;
}
td.kebab > span {
    line-height: 44px;
}
td.checkbox .ew-checkbox, th.checkbox .ew-checkbox {
    height: 44px;
    width: 65px;
}
td.checkbox label, th.checkbox label {
    height: 44px;
    width: 65px;
    padding: 0 0 0 10px;
}
td.checkbox .ew-checkmark, td.checkbox .ew-checkmark, th.checkbox .ew-checkmark, th.checkbox .ew-checkmark {
    top: 10px;
}

/* SELECT */
select, select:focus {
    background-image:
            linear-gradient(45deg, transparent 50%, gray 50%),
            linear-gradient(135deg, gray 50%, transparent 50%),
            linear-gradient(to right, #ccc, #ccc);
    background-position:
            calc(100% - 20px) 23px,
            calc(100% - 15px) 23px,
            calc(100% - 2.5em) 13px;
    background-size:
            5px 5px,
            5px 5px,
            1px 1.5em;
    background-repeat: no-repeat;
    padding-right: 47px;
}
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
#ew-dialog select {
    background-color: white;
}

input[type=file] {
    display: none;
}
label i {
    margin-right: 7px;
}

/* RANGE */
input[type=range] {
    width: 100%;
    margin: 8.3px 0;
    background-color: transparent;
    -webkit-appearance: none;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    background: #2196f3;
    border: 0;
    border-radius: 3.9px;
    width: 100%;
    height: 8.4px;
    cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
    margin-top: -8.3px;
    width: 25px;
    height: 25px;
    background: #2196f3;
    border: 4.1px solid #ffffff;
    border-radius: 25px;
    cursor: pointer;
    -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #39a1f4;
}
input[type=range]::-moz-range-track {
    background: #2196f3;
    border: 0;
    border-radius: 3.9px;
    width: 100%;
    height: 8.4px;
    cursor: pointer;
}
input[type=range]::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #2196f3;
    border: 4.1px solid #ffffff;
    border-radius: 25px;
    cursor: pointer;
}
input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 20px 0;
    color: transparent;
    width: 100%;
    height: 8.4px;
    cursor: pointer;
}
input[type=range]::-ms-fill-lower {
    background: #0d8aee;
    border: 0;
    border-radius: 7.8px;
}
input[type=range]::-ms-fill-upper {
    background: #2196f3;
    border: 0;
    border-radius: 7.8px;
}
input[type=range]::-ms-thumb {
    width: 25px;
    height: 25px;
    background: #2196f3;
    border: 4.1px solid #ffffff;
    border-radius: 25px;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
    background: #2196f3;
}
input[type=range]:focus::-ms-fill-upper {
    background: #39a1f4;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    input[type=range] {
        margin: 0;
        /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
}

.input-wrap {
    position: relative;
}
.input-wrap.extended, .separator.extended {
    display: none;
}
form section.extended .input-wrap.extended, .input-wrap.extended.show {
    display: flex;
}
form section.extended .separator.extended, .separator.extended.show {
    display: block;
}
.input-wrap.extended.show.hidden, .separator.extended.show.hidden {
    display: none;
}
.ew-switch {
    display: flex;
    flex-wrap: nowrap;
    margin: 5px 0;
}
.ew-switch.ew-blocks {
    flex-wrap: wrap;
    position: relative;
    gap: 10px;
}
.ew-switch > div {
    flex-grow: 1;
    flex-basis: 0;
    padding: 12px 10px 12px 10px;
    border: 1px solid #00000021;
    border-right: 0;
    background: #f2f2f2;
    text-decoration: none;
    font-family: inherit;
    max-width: 100%;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.8;
    transition: all 100ms ease-in-out;
    text-align: center;
}
.ew-switch.ew-blocks > div {
    width: calc(50% - 5px);
    flex-grow: 0;
    flex-basis: auto;
}
.ew-switch:hover > div {
    opacity: 1;
}
.ew-switch > div:first-child {
    border-radius: 7px 0 0 7px;
}
.ew-switch > div:last-child {
    border-radius: 0 7px 7px 0;
    border-right: 1px solid #00000021;
}
.ew-switch.ew-blocks > div {
    border-radius: 7px !important;
    border: 1px solid #00000021 !important;
}
.ew-switch > div.selected {
    background: hsla(var(--ew-color-hue), 100%, 83%, 0.82);
    border: 1px solid hsla(var(--ew-color-hue), 100%, 63%, 0.82);
    cursor: default;
    z-index: 50; /* todo relative to other objects! */
    opacity: 1;
}
/*.ew-switch:hover > div.selected {
    transform: scale(1.05);
}*/
.ew-switch > div.selected + div {
    border-left: 0;
}
.ew-code-verify {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.ew-code-verify input {
    display: inline-block;
    flex-grow: 0;
    width: 60px;
    text-align: center;
    font-size: 28px;
    padding: 0;
    height: 60px;
    line-height: 60px;
}
.ew-code-verify input.middle-input {
    margin-right: 20px;
}
.ew-auth .ew-code-verify.compact {
    gap: 5px;
}
.ew-auth .ew-code-verify.compact input {
    width: 50px;
}
.ew-auth .ew-code-verify input.middle-input {
    margin-right: 10px;
}

.ew-multiples > div {
    position: relative;
    display: inline-flex;
    flex-flow: row;
    flex-wrap: nowrap;
    margin: 5px 10px 5px 0;
    padding-right: 37px;
    border: 1px solid #00000042;
    border-radius: 7px;
    background: #f2f2f2;
    text-decoration: none;
    font-family: inherit;
    max-width: 100%;
    overflow: hidden;
    /*z-index: 120;*/
}
.ew-multiples .object {
    display: inline-block;
    white-space: nowrap;
    padding: 10px 10px 10px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ew-multiples .object .text5 {
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ew-multiples .object .text .secondary, .ew-multiples .object .text .tertiary {
    display: none;
}
.ew-multiples .object .text .number {
    margin-right: 10px;
    background: hsla(var(--ew-color-hue), 100%, 83%, 0.22);
    border: 1px solid hsla(var(--ew-color-hue), 100%, 73%, 0.22);
    border-radius: 4px;
    padding: 0 6px;
    color: #000000c2;
}
.ew-multiples .object i {
    margin-right: 7px;
}
.ew-multiples .object-wrap a {
    position: absolute;
    top: 0;
    right: 0;
    width: 37px;
}
.ew-multiples a.remove {
    display: inline-block;
    padding: 12px 15px 10px 5px;
    line-height: 1.4em;
}
.ew-multiples a.remove:hover {
    color: darkred;
    font-weight: bold;
}
.ew-multiples a.add {
    display: inline-block;
    /*padding: 10px 10px 10px 10px;*/
    color: #000000ab;
    transition: all ease-in-out 120ms;
}
.ew-multiples a.add i {
    font-size: 1.2em;
}
.ew-multiples a.add .text {
    margin-left: 7px;
}
.ew-multiples a.add:hover {
    color: black;
}
.ew-multiples a.add:hover .text {
    text-decoration: underline;
}
.ew-multiples div.add {
    border: 0;
    background: 0;
}

.ew-input {
    position: relative;
}
.ew-input.checkbox {
    position: revert;
}
.ew-input .input-action, .ew-input .input-action-left {
    position: absolute;
    display: inline-block;
    top: 1px;
    right: 1px;
    height: 44px;
}
.ew-input .input-action-left {
    top: 1px;
    left: 1px;
    right: auto;
}
.ew-input .input-action a, .ew-input .input-action-left a {
    display: inline-block;
    line-height: 44px;
    width: 44px;
    text-align: center;
    color: #00000061;
}
.table-filter-wrap {
    display: none;
}
.table-filter-wrap.show {
    display: block;
}
.ew-table-filter:first-child {
    margin-top: 20px;
}
.ew-tab-page .ew-table-filter {
    /*margin-top: 0;*/
    margin-bottom: 20px;
}
.ew-tab-page .ew-wrap-contain {
    margin-top: 20px;
    margin-bottom: 20px;
}
.floating-action-bar .ew-wrap-contain {
    margin-top: 0;
    margin-bottom: 0;
}
.ew-tab-page .ew-action-bar + .ew-wrap-contain {
    margin-top: 0;
}
.ew-table-filter .ew-input .input-action-left a {
    line-height: 56px;
    width: 60px;
}
.ew-input .input-action a:hover, .ew-input .input-action-left a:hover {
    color: #000000b8;
}
.ew-input .input-action a:active, .ew-input .input-action-left a:active {
    color: black;
    font-weight: bold;
}
.ew-suggest {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    outline: 2px solid #0000000a;
    padding: 5px 0 10px 0;
    border-top: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 1px 1px 5px #00000036, 0 0 50px 20px #ffffff55;
    text-decoration: none;
    font-family: inherit;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
}
.ew-suggest li {
    margin: 0;
    padding: 0;
}
.ew-suggest li.hide, .ew-suggest li.filtered, .ew-suggest li.skipped {
    display: none;
}
.ew-suggest li a {
    display: block;
    margin: 0;
    /*padding: 5px 10px;*/
    text-decoration: none;
    transition: all ease-in-out 50ms;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ew-suggest li a:focus {
    background: #fff6e0;
}
.ew-suggest li a:hover {
    background: #0000000a;
}
.ew-suggest li a:hover .text {
    text-decoration: underline;
}
.ew-suggest li a i {
    display: inline-block;
    width: 30px;
    text-align: center;
    margin-right: 5px;
    color: #000000b0;
}
.ew-suggest li.hide {
    display: none;
}
.ew-suggest .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ew-suggest .text .number {
    margin-right: 10px;
    background: hsla(var(--ew-color-hue), 100%, 83%, 0.22);
    border: 1px solid hsla(var(--ew-color-hue), 100%, 73%, 0.22);
    border-radius: 4px;
    padding: 0 6px;
    color: #000000c2;
    text-decoration: none !important;
}
.ew-suggest .text .secondary {
    margin-left: 12px;
    opacity: 0.5;
}
.ew-suggest .text .tertiary {
    display: none; /* only for text filtering */
}
.ew-multiples .text .wrap {
    display: none;
}

/* PLACEHOLDER AND VALIDATION */
::placeholder {
    color: #00000085;
    font-family: monospace;
    letter-spacing: -1px;
}
input:user-invalid, select:user-invalid, textarea:user-invalid, .signature-pad.invalid {
    color: red;
    outline: 5px solid #ff00002b !important;
    border: 1px solid #bd0000ad !important;
}
.form-label {
    text-align: right;
}
.ew-form.mobile .form-label {
    display: none;
}
.form-label label {
    display: inline-block;
    padding: 15px 10px 15px 10px;
    text-align: right;
}
.form-label label:first-child {
    padding-left: 20px;
}
.form-label label:last-child {
    padding-right: 20px;
}
.form-label label:only-child {
    display: block;
    padding: 15px 20px 15px 5px;
}
.label-space {
    height: 3px;
}
@media only screen and (max-width: 768px) {
    .form-label label {
        padding: 7px 0 2px 1px;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.9em;
    }
}
.mobile .form-label label {
    padding: 7px 0 2px 1px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9em;
}
.form-input a, .ew-suggest a {
    display: inline-block;
    padding: 0 10px;
    line-height: 44px;
    color: #0000009e;
    cursor: pointer;
}
.form-input a.block {
    display: block;
}
.form-input a.loading {
    color: #0000002e !important;
    cursor: progress;
}

.ew-suggest.icons ul {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.ew-suggest.icons li {
    display: inline-block;
    width: 12.5%;
    text-align: center;
}
.ew-suggest.icons li.filtered, .ew-suggest.icons li .text {
    display: none;
}
.ew-suggest.icons li i {
    transition: all 160ms ease-in-out;
}
.ew-suggest.icons li:hover i {
    font-weight: bold;
    transform: scale(1.2);
}
.form-input label a {
    padding: 0;
    line-height: normal;
}
.form-input button + a, .form-input button + button {
    margin-left: 10px;
}
.form-input a:hover {
    color: black;
}
.form-input a i:first-child {
    margin-right: 7px;
}
.form-input > .flex-row {
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
.form-input > .flex-row > div.no-grow {
    flex-grow: 0;
}
.form-input > .flex-row > div {
    padding-right: 10px;
}
.form-input > .flex-row > div:last-child {
    padding-right: 0;
}

.ew-form a i {
    margin-right: 7px;
}

/* BUTTON BAR */
.button-bar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px 10px;
    text-decoration: none;
    transition: all ease-in-out 144ms;
}
.button-bar + .button-bar {
    border-top: 2px solid #eaeaea;
}
.button-bar:hover {
    box-shadow: inset 0 0 60px #80808049;
    /* todo: nicer borders on hover */
}
.button-bar:active {
    background: #3a3a3a;
    color: #ffffffa3;
    /* todo: nicer borders on hover */
}
.button-bar .bar-icon {
    display: inline-block;
    width: 50px;
    text-align: center;
}
.button-bar.bubble .bar-icon, .button-bar.bubble-space .bar-icon {
    display: inline-block;
    width: 25px;
    text-align: center;
}
.button-bar .bar-profile-pic {
    display: inline-block;
    margin-left: 15px;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    box-shadow: 0 0 2px #00000029, 2px 2px 7px #0003;
    background: #f0f0f0;
    background-size: cover;
    transition: transform .2s ease-in-out;
}
.button-bar .bar-profile-pic i {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 1.3em;
    text-align: center;
    color: #00000042;
}
.button-bar.bubble-space .bar-profile-pic {
    display: inline-block;
    margin-left: 15px;
    height: 30px;
    box-shadow: none;
    background: none;
}
.button-bar.bubble-space .bar-profile-pic i {
    height: 30px;
    line-height: 30px;
    font-size: 1.3em;
    color: #00000026;
}
.button-bar .bar-body {
    flex-grow: 1;
}
.button-bar:hover .bar-body .label {
    text-decoration: underline;
}
.button-bar .bar-body .desc {
    margin-top: 2px;
    margin-left: 50px;
    font-size: 0.8em;
    color: dimgrey;
    line-height: 1.3em;
}
.button-bar.bubble .bar-body .desc, .button-bar.bubble-space .bar-body .desc {
    margin-left: 25px;
}
.button-bar .bar-right {
    flex-grow: 0;
    width: 50px;
    text-align: center;
    transition: transform ease-in-out 250ms;
}
.button-bar:hover .bar-right {
    animation: ew-button-slide 0.8s ease infinite;
}

@keyframes ew-button-slide {
    0% { transform: translate(0, 0);}
    20% { transform: translate(-2px, 0); }
    50% { transform: translate(5px, 0); }
    100% { transform: translate(0, 0); }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { /* todo: activate without fucking up number input itself. */
    -moz-appearance: textfield;
}

@media only screen and (max-width: 768px) {
    .ew-tab-page input.search, .ew-tab-page input.search:active {
        max-width: 100%;
        border-right: 0;
    }
    .floating-action-bar.active .ew-wrap-contain > section {
        margin: 0 !important;
    }
    .input-wrap.flex-row {
        flex-wrap: wrap;
    }
}