/* UI */
[type=checkbox]:not(.not-styled) { appearance: none; width: 1em; height: 1em; margin-top: 0.25em; vertical-align: top; border-radius: 0.25em; border: 1px solid var(--background-color-checkbox-border); background-repeat: no-repeat; background-position: center; background-size: 0.75em; background-color: var(--background-color-input); cursor: pointer;}
[type=checkbox]:checked:not(.not-styled) { background-color: var(--accent-color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'%3E%3C/path%3E%3C/svg%3E");}
[type=checkbox]:indeterminate:not(.not-styled) { background-size: 1em; background-color: var(--accent-color); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");}

[type=radio]:not(.not-styled) { appearance: none; width: 1em; height: 1em; margin-top: 0.1em; vertical-align: top; border-radius: 50%; border: 1px solid var(--background-color-checkbox-border); background-repeat: no-repeat; background-color: var(--background-color-input); cursor: pointer;}
[type=radio]:checked:not(.not-styled) { background-color: var(--accent-color); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");}

*:not(.wa-select) > select:not(.not-styled) { padding: 0.1875em 2.25em 0.1875em 0.375em; line-height: 1.5em; border: 0.125em solid var(--border-color-input); color: var(--text-color-input); appearance: none; outline: none; box-sizing: border-box; background-color: var(--background-color-input); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 177 94' fill='none'%3e%3cpath fill='%23aab' d='M88.5 94L0.598419 0.25L176.402 0.25L88.5 94Z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 0.75em; border-radius: 0.25em; transition: 0.1s;}

[type=checkbox]:disabled, [type=radio]:disabled, select:disabled { pointer-events: none; filter: none; opacity: .5;}

.wa-general-settings-place__inner select {padding: initial; color: var(--text-color); appearance: auto; background-color: var(--white); background-image: none;}

.c-pseudo-brick { padding-bottom: 0.5rem; border-radius: 0.5rem; display: flex; flex-wrap: wrap; }
.c-pseudo-brick > .label { font-size: 0.8125rem; order: 3; flex: 0 1 auto; }
.c-pseudo-brick > .icon { font-size: 0.8125rem; order: 1; flex: 0 1 auto; }
.c-pseudo-brick > .icon > * { vertical-align: baseline; margin-right: 5px;  }
.c-pseudo-brick > .count { order: 0; flex: 0 1 auto; width: 100%; font-size: 1.25rem; margin-bottom: 0.375rem; color: var(--text-color-strong); font-weight: bold; margin-left: 0; }

.c-shadowed { box-shadow: 0 0 1rem rgb(0 0 20 / 10%); transition: 0.2s; }

.c-datepicker { width: 6.1em; }
.c-datepicker.state-with-inner-icon { width: 8.1em; }
.c-datepicker.state-with-inner-icon .icon { cursor: pointer; }

.c-dotted { border-bottom: 1px dotted; }

.bottombar.c-fixed-bottombar { background: var(--background-color); padding: 1rem 1.25rem; margin-top: 1.25rem; box-shadow: 0 -35px 45px -45px rgba(0, 0, 20, 50%), 0 -10px 15px -15px rgba(0, 0, 20, 25%) !important; }

.redactor-box .redactor-toolbar { background-color: var(--background-color-input)}
.redactor-box .redactor-layer { background-color: var(--background-color-input); color: var(--text-color-input); border-width: 2px}
.redactor-box .redactor-layer:hover { border-color: var(--border-color-input-hover)}
.redactor-box .redactor-layer:focus { transition: background-color .2s; border-color: var(--accent-color); background-color: var(--background-color-blank)}
.redactor-box .redactor-placeholder:before { color: var(--text-color-hint) }
.dialog .dialog-body .redactor-box .redactor-layer {max-height: 300px;}

button.flexbox { display: flex; }

#wa-app > .content { min-width: 0; flex-basis: auto !important; }
