:root {
    --typography: 55 65 81;
    --surface: 209 213 219;
    --surface-soft: 229 231 235;
    --surface-hard: 250 250 250;
    --popup-surface: 250 250 250;
    --input-edge: 156 163 175;
    --input-background: 229 231 235;
    --input-disabled: 156 163 175;
    --input-button: 244 244 245;
    --input-button-hover: 228 228 231;
    --input-button-active: 212 212 216;
    --input-option-hover: 107 114 128;
    --box-background: 250 250 250;
    --box-edge: 209 213 219;
    --box-elevation-background: 241 245 249;
    --box-elevation-edge: 203 213 225;
    --box-elevation-hover: 203 213 225;
    --crud-button-edge: 209 213 219;
    --crud-input-background: 209 213 219;
    --pos-button-edge: 209 213 219;
    --numpad-background: 107 114 128;
    --numpad-typography: 55 65 81;
    --numpad-edge: 209 213 219;
    --numpad-hover: 203 213 225;
    --numpad-hover-edge: 209 213 219;
    --option-hover: 107 114 128;
    --scroll-thumb: 30 64 175;
    --scroll-track: 0 0 0;
    --scroll-popup-thumb: 71 85 105;
    --pre: 107 114 128;
    --tab-active: 250 250 250;
    --tab-active-border: 209 213 219;
    --tab-inactive: 229 231 235;
    --tab-table-th: 209 213 219;
    --tab-table-th-edge: 209 213 219;
    --table-th: 229 231 235;
    --table-th-edge: 209 213 219;
    --floating-menu: 255 255 255;
    --floating-menu-hover: 241 245 249;
    --floating-menu-selected: 226 232 240;
    --floating-menu-edge: 226 232 240;
    --primary: 55 65 81;
    --secondary: 31 41 55;
    --tertiary: 17 24 39;
    --soft-primary: 75 85 99;
    --soft-secondary: 107 114 128;
    --soft-tertiary: 156 163 175;
    --info-primary: 191 219 254;
    --info-secondary: 96 165 250;
    --info-tertiary: 37 99 235;
    --info-light-primary: 191 219 254;
    --info-light-secondary: 147 197 253;
    --info-light-tertiary: 96 165 250;
    --error-primary: 254 202 202;
    --error-secondary: 248 113 113;
    --error-tertiary: 220 38 38;
    --error-light-primary: 254 202 202;
    --error-light-secondary: 252 165 165;
    --error-light-tertiary: 248 113 113;
    --success-primary: 187 247 208;
    --success-secondary: 74 222 128;
    --success-tertiary: 22 163 74;
    --success-light-primary: 187 247 208;
    --success-light-secondary: 134 239 172;
    --success-light-tertiary: 74 222 128;
    --warning-primary: 254 215 170;
    --warning-secondary: 251 146 60;
    --warning-tertiary: 234 88 12;
    --warning-light-primary: 255 237 213;
    --warning-light-secondary: 254 215 170;
    --warning-light-tertiary: 253 186 116;
    --danger-primary: 202 138 4;
    --danger-secondary: 161 98 7;
    --danger-tertiary: 133 77 14;
    --danger-light-primary: 254 249 195;
    --danger-light-secondary: 254 240 138;
    --danger-light-tertiary: 253 224 71;
    --default-primary: 203 213 225;
    --default-secondary: 148 163 184;
    --default-tertiary: 107 114 128;
    --default-light-primary: 226 232 240;
    --default-light-secondary: 203 213 225;
    --default-light-tertiary: 148 163 184
}

.is-popup .ns-box {
    overflow: hidden;
    border-radius: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .ns-box .ns-box-header {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .ns-box .ns-box-body {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .ns-box .ns-box-footer {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

.is-popup .ns-box div>h3 {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-box {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-box .ns-box-header,
.ns-box .ns-box-body {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-box .ns-box-footer {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

.ns-box div>h3 {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-notice {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-notice h1,
.ns-notice h2,
.ns-notice h3,
.ns-notice h4,
.ns-notice h5,
.ns-notice p,
.ns-notice span {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-notice.danger {
    --tw-border-opacity: 1;
    border-color: rgb(var(--danger-tertiary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--danger-primary) / var(--tw-bg-opacity, 1))
}

.ns-notice.danger h1,
.ns-notice.danger h2,
.ns-notice.danger h3,
.ns-notice.danger h4,
.ns-notice.danger h5 {
    --tw-text-opacity: 1;
    color: rgb(var(--danger-tertiary) / var(--tw-text-opacity, 1))
}

.ns-notice.danger p>a {
    --tw-text-opacity: 1;
    color: rgb(var(--danger-tertiary) / var(--tw-text-opacity, 1))
}

.ns-notice.danger p>a:hover {
    text-decoration-line: underline
}

.ns-notice.danger pre {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--pre) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-notice.warning {
    --tw-border-opacity: 1;
    border-color: rgb(var(--warning-tertiary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-primary) / var(--tw-bg-opacity, 1))
}

.ns-notice.warning h1,
.ns-notice.warning h2,
.ns-notice.warning h3,
.ns-notice.warning h4,
.ns-notice.warning h5 {
    --tw-text-opacity: 1;
    color: rgb(var(--warning-tertiary) / var(--tw-text-opacity, 1))
}

.ns-notice.warning p>a {
    --tw-text-opacity: 1;
    color: rgb(var(--warning-tertiary) / var(--tw-text-opacity, 1))
}

.ns-notice.warning p>a:hover {
    text-decoration-line: underline
}

.ns-notice.warning pre {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--pre) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-notice.success {
    --tw-border-opacity: 1;
    border-color: rgb(var(--success-tertiary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-primary) / var(--tw-bg-opacity, 1))
}

.ns-notice.success h1,
.ns-notice.success h2,
.ns-notice.success h3,
.ns-notice.success h4,
.ns-notice.success h5 {
    --tw-text-opacity: 1;
    color: rgb(var(--success-tertiary) / var(--tw-text-opacity, 1))
}

.ns-notice.success p>a {
    --tw-text-opacity: 1;
    color: rgb(var(--success-tertiary) / var(--tw-text-opacity, 1))
}

.ns-notice.success p>a:hover {
    text-decoration-line: underline
}

.ns-notice.success pre {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--pre) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-notice.error {
    --tw-border-opacity: 1;
    border-color: rgb(var(--error-secondary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-notice.error h1,
.ns-notice.error h2,
.ns-notice.error h3,
.ns-notice.error h4,
.ns-notice.error h5 {
    --tw-text-opacity: 1;
    color: rgb(var(--error-tertiary) / var(--tw-text-opacity, 1))
}

.ns-notice.error p {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-notice.error p a {
    --tw-text-opacity: 1;
    color: rgb(var(--error-tertiary) / var(--tw-text-opacity, 1))
}

.ns-notice.error p a:hover {
    text-decoration-line: underline
}

.ns-notice.error pre {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--pre) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-notice.info {
    --tw-border-opacity: 1;
    border-color: rgb(var(--info-tertiary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-primary) / var(--tw-bg-opacity, 1))
}

.ns-notice.info h1,
.ns-notice.info h2,
.ns-notice.info h3,
.ns-notice.info h4,
.ns-notice.info h5 {
    --tw-text-opacity: 1;
    color: rgb(var(--info-tertiary) / var(--tw-text-opacity, 1))
}

.ns-notice.info p {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-notice.info p>a {
    --tw-text-opacity: 1;
    color: rgb(var(--info-secondary) / var(--tw-text-opacity, 1))
}

.ns-notice.info p>a:hover {
    text-decoration-line: underline
}

.ns-notice.info pre {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--pre) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-normal-text {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-floating-notice.info {
    --tw-border-opacity: 1;
    border-color: rgb(var(--info-tertiary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-primary) / var(--tw-bg-opacity, 1))
}

.ns-floating-notice.info h2,
.ns-floating-notice.info p {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-floating-notice.error {
    --tw-border-opacity: 1;
    border-color: rgb(var(--error-tertiary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-primary) / var(--tw-bg-opacity, 1))
}

.ns-floating-notice.error h2,
.ns-floating-notice.error p {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-floating-notice.warning {
    --tw-border-opacity: 1;
    border-color: rgb(var(--warning-tertiary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-primary) / var(--tw-bg-opacity, 1))
}

.ns-floating-notice.warning h2,
.ns-floating-notice.warning p {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-floating-notice.success {
    --tw-border-opacity: 1;
    border-color: rgb(var(--success-tertiary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-primary) / var(--tw-bg-opacity, 1))
}

.ns-floating-notice.success h2,
.ns-floating-notice.success p {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-switch button.selected {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-switch button.selected:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1))
}

.ns-switch button.unselected {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.input-group {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1))
}

.input-group input,
.input-group select {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--crud-button-edge) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.input-group button {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-disabled) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px
}

.input-group button i,
.input-group button span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.input-group button .disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-edge) / var(--tw-bg-opacity, 1))
}

.input-group.info {
    --tw-border-opacity: 1;
    border-color: rgb(var(--info-tertiary) / var(--tw-border-opacity, 1))
}

.input-group.info input {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.input-group.info button {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.input-group.info button i,
.input-group.info button span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.input-group.error {
    --tw-border-opacity: 1;
    border-color: rgb(var(--error-tertiary) / var(--tw-border-opacity, 1))
}

.input-group.error input {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.input-group.error button {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.input-group.error button i,
.input-group.error button span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.input-group.warning {
    --tw-border-opacity: 1;
    border-color: rgb(var(--error-primary) / var(--tw-border-opacity, 1))
}

.input-group.warning input {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.input-group.warning button {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.input-group.warning button i,
.input-group.warning button span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.input-group.success {
    --tw-border-opacity: 1;
    border-color: rgb(var(--success-primary) / var(--tw-border-opacity, 1))
}

.input-group.success input {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.input-group.success button {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.input-group.success button i,
.input-group.success button span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-select select {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-select select option {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1))
}

.ns-select select option:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-option-hover) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-input [disabled],
.ns-switch [disabled],
.ns-select [disabled],
.ns-textarea [disabled],
.ns-media [disabled],
.ns-checkbox [disabled] {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-disabled) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--tertiary) / var(--tw-text-opacity, 1))
}

.ns-input .ns-enabled,
.ns-switch .ns-enabled,
.ns-select .ns-enabled,
.ns-textarea .ns-enabled,
.ns-media .ns-enabled,
.ns-checkbox .ns-enabled {
    background-color: transparent
}

.ns-input label.has-error,
.ns-switch label.has-error,
.ns-select label.has-error,
.ns-textarea label.has-error,
.ns-media label.has-error,
.ns-checkbox label.has-error {
    --tw-text-opacity: 1;
    color: rgb(var(--error-secondary) / var(--tw-text-opacity, 1))
}

.ns-input label.is-pristine,
.ns-switch label.is-pristine,
.ns-select label.is-pristine,
.ns-textarea label.is-pristine,
.ns-media label.is-pristine,
.ns-checkbox label.is-pristine {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-input div.has-error,
.ns-switch div.has-error,
.ns-select div.has-error,
.ns-textarea div.has-error,
.ns-media div.has-error,
.ns-checkbox div.has-error {
    --tw-border-opacity: 1;
    border-color: rgb(var(--error-secondary) / var(--tw-border-opacity, 1))
}

.ns-input div.is-pristine,
.ns-switch div.is-pristine,
.ns-select div.is-pristine,
.ns-textarea div.is-pristine,
.ns-media div.is-pristine,
.ns-checkbox div.is-pristine {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1))
}

.ns-input .leading,
.ns-switch .leading,
.ns-select .leading,
.ns-textarea .leading,
.ns-media .leading,
.ns-checkbox .leading {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-input input,
.ns-input textarea,
.ns-switch input,
.ns-switch textarea,
.ns-select input,
.ns-select textarea,
.ns-textarea input,
.ns-textarea textarea,
.ns-media input,
.ns-media textarea,
.ns-checkbox input,
.ns-checkbox textarea {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px
}

.ns-input button,
.ns-switch button,
.ns-select button,
.ns-textarea button,
.ns-media button,
.ns-checkbox button {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-input button:hover,
.ns-switch button:hover,
.ns-select button:hover,
.ns-textarea button:hover,
.ns-media button:hover,
.ns-checkbox button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-button-hover) / var(--tw-bg-opacity, 1))
}

.ns-input p.ns-description,
.ns-switch p.ns-description,
.ns-select p.ns-description,
.ns-textarea p.ns-description,
.ns-media p.ns-description,
.ns-checkbox p.ns-description {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-input p.ns-error,
.ns-switch p.ns-error,
.ns-select p.ns-error,
.ns-textarea p.ns-error,
.ns-media p.ns-error,
.ns-checkbox p.ns-error {
    --tw-text-opacity: 1;
    color: rgb(var(--error-secondary) / var(--tw-text-opacity, 1))
}

.form-input {
    outline-width: 0px
}

.form-input *[disabled] {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-disabled) / var(--tw-bg-opacity, 1))
}

.form-input label {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.form-input select {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.form-input select option {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1))
}

.form-input select option:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-option-hover) / var(--tw-bg-opacity, 1))
}

.form-input input {
    border-radius: .25rem;
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1))
}

.form-input input[disabled] {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-disabled) / var(--tw-bg-opacity, 1))
}

.form-input p {
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

.form-input-invalid label {
    --tw-text-opacity: 1;
    color: rgb(var(--error-secondary) / var(--tw-text-opacity, 1))
}

.form-input-invalid input {
    border-radius: .25rem;
    --tw-border-opacity: 1;
    border-color: rgb(var(--error-primary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-secondary) / var(--tw-bg-opacity, 1))
}

.form-input-invalid p {
    --tw-text-opacity: 1;
    color: rgb(var(--error-secondary) / var(--tw-text-opacity, 1))
}

.ns-button {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-button button,
.ns-button a {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-button) / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.ns-button:hover a,
.ns-button:hover button {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-button-hover) / var(--tw-bg-opacity, 1))
}

.ns-button.hover-success:hover button,
.ns-button.hover-success:hover a,
.ns-button.success button,
.ns-button.success a {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-button.hover-success:hover button span.ns-label,
.ns-button.hover-success:hover a span.ns-label,
.ns-button.success button span.ns-label,
.ns-button.success a span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--success-primary) / var(--tw-text-opacity, 1))
}

.ns-button.hover-error:hover button,
.ns-button.hover-error:hover a,
.ns-button.error button,
.ns-button.error a {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-button.hover-error:hover button span.ns-label,
.ns-button.hover-error:hover a span.ns-label,
.ns-button.error button span.ns-label,
.ns-button.error a span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--error-secondary) / var(--tw-text-opacity, 1))
}

.ns-button.hover-warning:hover button,
.ns-button.hover-warning:hover a,
.ns-button.warning button,
.ns-button.warning a {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-button.hover-warning:hover button span.ns-label,
.ns-button.hover-warning:hover a span.ns-label,
.ns-button.warning button span.ns-label,
.ns-button.warning a span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--warning-secondary) / var(--tw-text-opacity, 1))
}

.ns-button.hover-default:hover button,
.ns-button.hover-default:hover a,
.ns-button.default button,
.ns-button.default a {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-button) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-button.hover-default:hover button span.ns-label,
.ns-button.hover-default:hover a span.ns-label,
.ns-button.default button span.ns-label,
.ns-button.default a span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--surface) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

.ns-button.hover-info:hover button,
.ns-button.hover-info:hover a,
.ns-button.info button,
.ns-button.info a {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-button.hover-info:hover button span.ns-label,
.ns-button.hover-info:hover a span.ns-label,
.ns-button.info button span.ns-label,
.ns-button.info a span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--info-tertiary) / var(--tw-text-opacity, 1))
}

.ns-button>button:disabled {
    cursor: not-allowed;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1));
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.ns-button>button:disabled span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-buttons {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.ns-buttons button.success,
.ns-buttons a.success {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-buttons button.success span.ns-label,
.ns-buttons a.success span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--success-tertiary) / var(--tw-text-opacity, 1))
}

.ns-buttons button.error,
.ns-buttons a.error {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-buttons button.error span.ns-label,
.ns-buttons a.error span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--error-secondary) / var(--tw-text-opacity, 1))
}

.ns-buttons button.warning,
.ns-buttons a.warning {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-buttons button.warning span.ns-label,
.ns-buttons a.warning span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--warning-secondary) / var(--tw-text-opacity, 1))
}

.ns-buttons button.default,
.ns-buttons a.default {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--input-disabled) / var(--tw-text-opacity, 1))
}

.ns-buttons button.default span.ns-label,
.ns-buttons a.default span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--surface) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-buttons button.info,
.ns-buttons a.info {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-buttons button.info span.ns-label,
.ns-buttons a.info span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--info-tertiary) / var(--tw-text-opacity, 1))
}

.ns-buttons .ns-disabled {
    cursor: not-allowed;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-buttons .ns-disabled span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-close-button {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-close-button:hover {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-close-button:hover>i {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-floating-panel .ns-inset-button {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-floating-panel .ns-inset-button:hover,
.ns-floating-panel .ns-inset-button.active,
.ns-floating-panel .ns-inset-button.info:hover,
.ns-floating-panel .ns-inset-button.info.active {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-floating-panel .ns-inset-button.success:hover,
.ns-floating-panel .ns-inset-button.success.active {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-floating-panel .ns-inset-button.warning:hover,
.ns-floating-panel .ns-inset-button.warning.active {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-floating-panel .ns-inset-button.error:hover,
.ns-floating-panel .ns-inset-button.error.active {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-inset-button {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-inset-button:hover,
.ns-inset-button.active,
.ns-inset-button.info:hover,
.ns-inset-button.info.active {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-inset-button.success:hover,
.ns-inset-button.success.active {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-inset-button.warning:hover,
.ns-inset-button.warning.active {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-inset-button.error:hover,
.ns-inset-button.error.active {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-multiselect .ns-dropdown {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.ns-daterange-picker .form-control.reportrange-text {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1))
}

#crud-table {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

#crud-table #crud-table-header {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1))
}

#crud-table .ns-crud-input {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1))
}

#crud-table .ns-crud-input input,
#crud-table .ns-crud-input select {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#crud-table .ns-table-row {
    --tw-border-opacity: 1;
    border-color: rgb(var(--table-th-edge) / var(--tw-border-opacity, 1))
}

#crud-table .ns-table-row td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--table-th-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#crud-table .ns-table-row .ns-menu-wrapper>div {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-elevation-background) / var(--tw-bg-opacity, 1))
}

#crud-table .ns-table-row .ns-action-button {
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

#crud-table .ns-table-row .ns-action-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#crud-table .ns-table-row .ns-action-button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

#crud-table .ns-crud-button,
#crud-table .ns-crud-input-button {
    --tw-border-opacity: 1;
    border-color: rgb(var(--crud-button-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#crud-table .ns-crud-button.table-filters-enabled,
#crud-table .ns-crud-input-button.table-filters-enabled {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#crud-table .ns-crud-button.table-filters-disabled,
#crud-table .ns-crud-input-button.table-filters-disabled {
    --tw-border-opacity: 1;
    border-color: rgb(var(--crud-button-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

#crud-table .ns-crud-button:hover,
#crud-table .ns-crud-input-button:hover {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#crud-table .ns-crud-button:hover i,
#crud-table .ns-crud-button:hover span,
#crud-table .ns-crud-input-button:hover i,
#crud-table .ns-crud-input-button:hover span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#crud-table .footer {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1))
}

#crud-form .ns-crud-button,
#crud-form .ns-crud-input-button {
    --tw-border-opacity: 1;
    border-color: rgb(var(--crud-button-edge) / var(--tw-border-opacity, 1));
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#crud-form .ns-crud-button.table-filters-enabled,
#crud-form .ns-crud-input-button.table-filters-enabled {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#crud-form .ns-crud-button.table-filters-disabled,
#crud-form .ns-crud-input-button.table-filters-disabled {
    --tw-border-opacity: 1;
    border-color: rgb(var(--crud-button-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

#crud-form .ns-crud-button:hover,
#crud-form .ns-crud-input-button:hover {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-button-hover) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#crud-form .ns-crud-input {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-background) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-background) / var(--tw-bg-opacity, 1))
}

#crud-form .ns-crud-input input {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--crud-button-edge) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#main-container,
#page-container {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--surface) / var(--tw-bg-opacity, 1))
}

.card-widget h1,
.card-widget h2,
.card-widget h3,
.card-widget h4,
.card-widget h5,
.card-widget h6,
.card-widget i {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#dashboard-aside>div {
    --tw-bg-opacity: 1;
    /* background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)) */
    background-color: #f2f2f7;
}

#dashboard-aside>div .ns-aside-menu {
    --tw-text-opacity: 1;
    /* color: rgb(229 231 235 / var(--tw-text-opacity, 1)) */
    color: black;
    font-size: 20px;
}

#dashboard-aside>div .ns-aside-menu:hover {
    --tw-bg-opacity: 1;
    /* background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) */
    background-color: lightgrey;

}

#dashboard-aside>div .ns-aside-menu.toggled {
    --tw-border-opacity: 1;
    /* border-color: rgb(30 64 175 / var(--tw-border-opacity, 1)); */
    --tw-bg-opacity: 1;
    background-color: lightgrey
}

#dashboard-aside>div .ns-aside-menu.normal {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: #f2f2f7;
    /* background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)) */
}

#dashboard-aside>div .ns-aside-menu .notification-label {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    /* color: rgb(255 255 255 / var(--tw-text-opacity, 1)) */
    color: black;
}

#dashboard-aside>div .ns-aside-submenu {
    --tw-border-opacity: 1;
    /* border-color: rgb(30 64 175 / var(--tw-border-opacity, 1)); */
    --tw-bg-opacity: 1;
    /* background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)) */
    background-color: #f2f2f7;
}

#dashboard-aside>div .ns-aside-submenu:hover {
    --tw-bg-opacity: 1;
    /* background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) */
    background-color: lightgrey;
}

#dashboard-aside>div .ns-aside-submenu.active {
    --tw-text-opacity: 1;
    /* color: rgb(255 255 255 / var(--tw-text-opacity, 1)) */
}

#dashboard-aside>div .ns-aside-submenu.normal {
    --tw-text-opacity: 1;
    /* color: rgb(243 244 246 / var(--tw-text-opacity, 1)) */
    color: black;
    font-family: system-ui;
    font-size: 15px;
}

#dashboard-body {
    --tw-bg-opacity: 1;
    /* background-color: rgb(var(--surface) / var(--tw-bg-opacity, 1)) */
    background-color: #fff;
}

.ns-toggle-button {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-toggle-button:hover {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
}

.ns-avatar {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-avatar:hover,
.ns-avatar.toggled {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.pending-drag {
    border-color: transparent
}

.awaiting-drop {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1))
}

.drag-over {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1))
}

#notificaton-wrapper #notification-button {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#notificaton-wrapper #notification-button.panel-visible {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

#notificaton-wrapper #notification-button.panel-hidden {
    --tw-border-opacity: 1;
    border-color: rgb(var(--input-edge) / var(--tw-border-opacity, 1))
}

#notificaton-wrapper #notification-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#notificaton-wrapper #notification-center>div>div {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

#notificaton-wrapper .clear-all {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#notificaton-wrapper .clear-all:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-button-hover) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#notificaton-wrapper .notification-card {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1))
}

#notificaton-wrapper .notification-card h1 {
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

#notificaton-wrapper .notification-card p {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#notificaton-wrapper .notification-card .date {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1))
}

#ns-orders-chart .head,
#ns-orders-chart .foot {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

#ns-orders-chart .foot>div {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1))
}

#ns-orders-chart .foot>div span {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-orders-chart .foot>div h2 {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-orders-summary .title {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1))
}

#ns-orders-summary .head,
#ns-orders-summary .title {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

#ns-orders-summary .head h3,
#ns-orders-summary .head i,
#ns-orders-summary .head h4,
#ns-orders-summary .head p,
#ns-orders-summary .head span,
#ns-orders-summary .title h3,
#ns-orders-summary .title i,
#ns-orders-summary .title h4,
#ns-orders-summary .title p,
#ns-orders-summary .title span {
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#ns-orders-summary .head .paid-order,
#ns-orders-summary .title .paid-order {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#ns-orders-summary .head .other-order,
#ns-orders-summary .title .other-order {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-orders-summary .head .single-order,
#ns-orders-summary .title .single-order {
    --tw-border-opacity: 1;
    border-color: rgb(var(--success-tertiary) / var(--tw-border-opacity, 1))
}

#ns-orders-summary .head .paid-currency,
#ns-orders-summary .title .paid-currency {
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#ns-orders-summary .head .unpaid-currency,
#ns-orders-summary .title .unpaid-currency {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-best-customers,
#ns-best-cashiers {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

#ns-best-customers .head,
#ns-best-cashiers .head {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-best-customers .body,
#ns-best-cashiers .body {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-best-customers .body .entry,
#ns-best-cashiers .body .entry {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1))
}

.ns-scrollbar::-webkit-scrollbar {
    width: 5px
}

.ns-scrollbar::-webkit-scrollbar-track {
    background-color: #ffffff80
}

.ns-scrollbar::-webkit-scrollbar-thumb {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--scroll-thumb) / var(--tw-bg-opacity, 1))
}

.is-popup .ns-scrollbar::-webkit-scrollbar-thumb {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--scroll-popup-thumb) / var(--tw-bg-opacity, 1))
}

ul.ns-vertical-menu {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

ul.ns-vertical-menu li {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

ul.ns-vertical-menu li:hover,
ul.ns-vertical-menu li.active {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--floating-menu-selected) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#alert-popup,
#confirm-popup,
#prompt-popup {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--popup-surface) / var(--tw-bg-opacity, 1))
}

#alert-popup h2,
#confirm-popup h2,
#prompt-popup h2 {
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

#alert-popup p,
#confirm-popup p,
#prompt-popup p {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#alert-popup .action-buttons,
#confirm-popup .action-buttons,
#prompt-popup .action-buttons {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#alert-popup .action-buttons button:hover,
#confirm-popup .action-buttons button:hover,
#prompt-popup .action-buttons button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#alert-popup .action-buttons hr,
#confirm-popup .action-buttons hr,
#prompt-popup .action-buttons hr {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1))
}

.is-popup {
    background: #0006
}

.is-popup .elevation-surface {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-elevation-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-elevation-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .elevation-surface.hoverable:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-elevation-hover) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .elevation-surface.success {
    --tw-border-opacity: 1;
    border-color: rgb(var(--success-secondary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .elevation-surface.success.hoverable:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .elevation-surface.error {
    --tw-border-opacity: 1;
    border-color: rgb(var(--error-secondary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .elevation-surface.error.hoverable:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .elevation-surface.info {
    --tw-border-opacity: 1;
    border-color: rgb(var(--info-secondary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .elevation-surface.info.hoverable:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .elevation-surface.warning {
    --tw-border-opacity: 1;
    border-color: rgb(var(--warning-secondary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.is-popup .elevation-surface.warning.hoverable:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#loader {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--surface) / var(--tw-bg-opacity, 1))
}

#loader p,
#ns-pos-customer-select-popup .purchase-amount {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#pos-container {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--surface) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart #tools .switch-cart {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1));
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart #tools .switch-cart>span.products-count {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart #tools .switch-grid {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-inactive) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-toolbox {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-toolbox>div {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-toolbox>div hr {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--pos-button-edge) / var(--tw-bg-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-toolbox>div .ns-button button {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-table-header {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-table-header>div {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table a {
    --tw-border-opacity: 1;
    border-color: rgb(var(--info-tertiary) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table a:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--info-tertiary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div>div {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .product-item>div {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .product-item>div .remove-product {
    --tw-border-opacity: 1;
    border-color: rgb(var(--error-primary) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .product-item>div .remove-product:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--error-primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .product-item>div .price:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--info-secondary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .product-item>div .wholesale-mode {
    --tw-border-opacity: 1;
    border-color: rgb(var(--success-primary) / var(--tw-border-opacity, 1));
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(var(--success-primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .product-item>div .wholesale-mode:hover {
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(var(--success-primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .product-item>div .normal-mode {
    --tw-border-opacity: 1;
    border-color: rgb(var(--info-primary) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .product-item>div .normal-mode:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--info-primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .product-item>div .product-controls {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .quantity-changer {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .quantity-changer>span {
    --tw-border-opacity: 1;
    border-color: rgb(var(--info-primary) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .quantity-changer:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-button-hover) / var(--tw-bg-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table>div .product-price {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table .empty-cart {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-table .empty-cart h3 {
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-summary table {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-summary table td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-summary table td a {
    --tw-border-opacity: 1;
    border-color: rgb(var(--info-tertiary) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-summary table td a:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--info-tertiary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-summary table .summary-line {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-summary table .summary-line a {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-products-summary table .summary-line a:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-bottom-buttons {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-bottom-buttons #pay-button {
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--success-primary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-bottom-buttons #pay-button:hover,
#pos-container #pos-cart .cart-table #cart-bottom-buttons #pay-button:active {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-secondary) / var(--tw-bg-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-bottom-buttons #hold-button {
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--info-secondary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-bottom-buttons #hold-button:hover,
#pos-container #pos-cart .cart-table #cart-bottom-buttons #hold-button:active {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-bottom-buttons #discount-button {
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-bottom-buttons #discount-button:hover,
#pos-container #pos-cart .cart-table #cart-bottom-buttons #discount-button:active {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-button-active) / var(--tw-bg-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-bottom-buttons #void-button {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--typography) / var(--tw-text-opacity, 1))
}

#pos-container #pos-cart .cart-table #cart-bottom-buttons #void-button:hover,
#pos-container #pos-cart .cart-table #cart-bottom-buttons #void-button:active {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-secondary) / var(--tw-bg-opacity, 1))
}

#pos-container #pos-grid .switch-cart {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-inactive) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-grid .switch-cart .products-count {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#pos-container #pos-grid .switch-grid {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-grid #grid-container {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1))
}

#pos-container #pos-grid #grid-container #grid-header {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-grid #grid-container #grid-header>div {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-grid #grid-container #grid-header>div button {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-grid #grid-container #grid-header>div button.pos-button-clicked {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--input-disabled) / var(--tw-bg-opacity, 1));
    box-shadow: inset 0 0 5px #303131
}

#pos-container #pos-grid #grid-container #grid-header>div input {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

#pos-container #pos-grid #grid-container #grid-breadscrumb {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-grid #grid-container #grid-breadscrumb ul>li {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-grid #grid-container #grid-items {
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-grid #grid-container #grid-items .cell-item {
    --tw-border-opacity: 1;
    border-color: rgb(var(--pos-button-edge) / var(--tw-border-opacity, 1))
}

#pos-container #pos-grid #grid-container #grid-items .cell-item .cell-item-label {
    background: #fafafaba
}

#pos-container #pos-grid #grid-container #grid-items .cell-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

#pos-container #pos-grid #grid-container #grid-items .cell-item h3 {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#pos-container #pos-grid #grid-container #grid-items .cell-item i,
#pos-container #pos-grid #grid-container #grid-items .cell-item span {
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

#ns-pos-customers {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

#ns-pos-customers .ns-header {
    --tw-border-opacity: 1;
    border-color: rgb(var(--box-edge) / var(--tw-border-opacity, 1))
}

#ns-pos-customers .ns-header h3 {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-pos-customers .ns-tab-cards h3,
#ns-pos-customers .ns-tab-cards h2 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#ns-pos-customers .ns-body,
#ns-order-type {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-background) / var(--tw-bg-opacity, 1))
}

#ns-order-type h3 {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-order-type div>div>i {
    --tw-text-opacity: 1;
    color: rgb(var(--error-primary) / var(--tw-text-opacity, 1))
}

#ns-order-type div>div div>p {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-order-type .ns-box-body>div:hover h4 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#ns-order-type .ns-box-body>div h4 {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-units-selector .overlay {
    background: #fafafaba
}

#ns-pos-cash-registers-popup div.alert {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-secondary) / var(--tw-bg-opacity, 1))
}

#ns-payment-popup .ns-pos-screen {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active-border) / var(--tw-bg-opacity, 1))
}

#ns-payment-popup>div h3 {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div ul li {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div ul li.ns-payment-gateway.ns-visible,
#ns-payment-popup>div ul li.ns-payment-list.ns-visible {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1))
}

#ns-payment-popup>div ul li:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1))
}

#ns-payment-popup>div ul li span.ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div .ns-payment-wrapper {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1))
}

#ns-payment-popup>div .ns-payment-wrapper ul li {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active-border) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div .ns-payment-wrapper ul li button.error {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div .ns-payment-wrapper ul li button.default {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div .ns-payment-buttons .ns-payment-type-button {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div .ns-payment-buttons .ns-submit-button {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div .ns-payment-buttons .ns-layaway-button {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div .ns-payment-buttons .ns-payment-button {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div .ns-payment-buttons .ns-payment-button .ns-label {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#ns-payment-popup>div .ns-payment-list {
    --tw-border-opacity: 1;
    border-top-color: rgb(var(--tab-active) / var(--tw-border-opacity, 1))
}

#ns-payment-popup>div .ns-payment-footer {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active-border) / var(--tw-bg-opacity, 1))
}

.ns-tab .tab {
    --tw-border-opacity: 1;
    border-color: rgb(var(--tab-active-border) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-tab .tab.active {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1))
}

.ns-tab .tab.inactive {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-inactive) / var(--tw-bg-opacity, 1))
}

.ns-tab-item>div {
    --tw-border-opacity: 1;
    border-color: rgb(var(--tab-active-border) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1))
}

.ns-tab-item>div .ns-tab-item-footer {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1))
}

h1,
h2,
h3,
h4,
h5,
h6 {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

p {
    --tw-text-opacity: 1;
    color: rgb(var(--secondary) / var(--tw-text-opacity, 1))
}

.ns-tab-item .ns-table thead th {
    --tw-border-opacity: 1;
    border-color: rgb(var(--tab-table-th-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-tab-item .ns-table tbody {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-tab-item .ns-table tbody td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--tab-table-th-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-table {
    width: 100%
}

.ns-table thead {
    --tw-border-opacity: 1;
    border-color: rgb(var(--table-th-edge) / var(--tw-border-opacity, 1))
}

.ns-table thead th {
    --tw-border-opacity: 1;
    border-color: rgb(var(--table-th-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--table-th) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-table thead tr.error>th,
.ns-table thead tr.error td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--table-th-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-table thead tr.success>th,
.ns-table thead tr.success td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--table-th-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-table thead tr.info>th,
.ns-table thead tr.info td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--table-th-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-table thead tr.warning>th,
.ns-table thead tr.warning td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--table-th-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-tertiary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-table tbody,
.ns-table tfoot {
    --tw-border-opacity: 1;
    border-color: rgb(var(--table-th-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-table tbody td,
.ns-table tfoot td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--table-th-edge) / var(--tw-border-opacity, 1))
}

.ns-table tbody tr.info,
.ns-table tfoot tr.info {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-table tbody tr.error,
.ns-table tfoot tr.error {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-table tbody tr.success,
.ns-table tfoot tr.success {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-table tbody tr.warning,
.ns-table tfoot tr.warning {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-primary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-table tbody .ns-inset-button,
.ns-table tfoot .ns-inset-button {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
}

.ns-table tbody .ns-inset-button.active,
.ns-table tbody .ns-inset-button:hover,
.ns-table tfoot .ns-inset-button.active,
.ns-table tfoot .ns-inset-button:hover {
    border-color: transparent
}

.ns-table td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--table-th-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-table tr.info {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-table tr.error {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-table tr.success {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-table tr.warning {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

@keyframes loader-animation {
    0% {
        left: -100%
    }

    49% {
        left: 100%
    }

    50% {
        left: 100%
    }

    to {
        left: -100%
    }
}

.ns-loader {
    height: 2px;
    width: 100%;
    overflow: hidden;
    margin-top: -1px
}

.ns-loader .bar {
    position: relative;
    height: 2px;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-primary) / var(--tw-bg-opacity, 1));
    animation-name: loader-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.ns-numpad-key {
    --tw-border-opacity: 1;
    border-color: rgb(var(--numpad-edge) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

.ns-numpad-key:hover {
    --tw-border-opacity: 1;
    border-color: rgb(var(--numpad-hover-edge) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--numpad-hover) / var(--tw-bg-opacity, 1))
}

.ns-numpad-key.error:hover,
.ns-numpad-key.error.active {
    --tw-border-opacity: 1;
    border-color: rgb(var(--error-secondary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-numpad-key.error:hover h1,
.ns-numpad-key.error:hover h2,
.ns-numpad-key.error:hover h3,
.ns-numpad-key.error:hover h4,
.ns-numpad-key.error:hover h5,
.ns-numpad-key.error:hover h6,
.ns-numpad-key.error:hover span,
.ns-numpad-key.error.active h1,
.ns-numpad-key.error.active h2,
.ns-numpad-key.error.active h3,
.ns-numpad-key.error.active h4,
.ns-numpad-key.error.active h5,
.ns-numpad-key.error.active h6,
.ns-numpad-key.error.active span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-numpad-key.success:hover,
.ns-numpad-key.success.active {
    --tw-border-opacity: 1;
    border-color: rgb(var(--success-secondary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--success-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-numpad-key.success:hover h1,
.ns-numpad-key.success:hover h2,
.ns-numpad-key.success:hover h3,
.ns-numpad-key.success:hover h4,
.ns-numpad-key.success:hover h5,
.ns-numpad-key.success:hover h6,
.ns-numpad-key.success:hover span,
.ns-numpad-key.success.active h1,
.ns-numpad-key.success.active h2,
.ns-numpad-key.success.active h3,
.ns-numpad-key.success.active h4,
.ns-numpad-key.success.active h5,
.ns-numpad-key.success.active h6,
.ns-numpad-key.success.active span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-numpad-key.info:hover,
.ns-numpad-key.info.active {
    --tw-border-opacity: 1;
    border-color: rgb(var(--info-secondary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--info-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-numpad-key.info:hover h1,
.ns-numpad-key.info:hover h2,
.ns-numpad-key.info:hover h3,
.ns-numpad-key.info:hover h4,
.ns-numpad-key.info:hover h5,
.ns-numpad-key.info:hover h6,
.ns-numpad-key.info:hover span,
.ns-numpad-key.info.active h1,
.ns-numpad-key.info.active h2,
.ns-numpad-key.info.active h3,
.ns-numpad-key.info.active h4,
.ns-numpad-key.info.active h5,
.ns-numpad-key.info.active h6,
.ns-numpad-key.info.active span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-numpad-key.warning:hover,
.ns-numpad-key.warning.active {
    --tw-border-opacity: 1;
    border-color: rgb(var(--warning-secondary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--warning-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-numpad-key.warning:hover h1,
.ns-numpad-key.warning:hover h2,
.ns-numpad-key.warning:hover h3,
.ns-numpad-key.warning:hover h4,
.ns-numpad-key.warning:hover h5,
.ns-numpad-key.warning:hover h6,
.ns-numpad-key.warning:hover span,
.ns-numpad-key.warning.active h1,
.ns-numpad-key.warning.active h2,
.ns-numpad-key.warning.active h3,
.ns-numpad-key.warning.active h4,
.ns-numpad-key.warning.active h5,
.ns-numpad-key.warning.active h6,
.ns-numpad-key.warning.active span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-numpad-key.default:hover,
.ns-numpad-key.default.active {
    --tw-border-opacity: 1;
    border-color: rgb(var(--default-secondary) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--default-secondary) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.ns-numpad-key.default:hover h1,
.ns-numpad-key.default:hover h2,
.ns-numpad-key.default:hover h3,
.ns-numpad-key.default:hover h4,
.ns-numpad-key.default:hover h5,
.ns-numpad-key.default:hover h6,
.ns-numpad-key.default:hover span,
.ns-numpad-key.default.active h1,
.ns-numpad-key.default.active h2,
.ns-numpad-key.default.active h3,
.ns-numpad-key.default.active h4,
.ns-numpad-key.default.active h5,
.ns-numpad-key.default.active h6,
.ns-numpad-key.default.active span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#ns-media .sidebar {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1))
}

#ns-media .sidebar h3 {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-media .sidebar .sidebar-menus li {
    border-color: transparent
}

#ns-media .sidebar .sidebar-menus li.active,
#ns-media .sidebar .sidebar-menus li:hover {
    --tw-border-opacity: 1;
    border-color: rgb(var(--tab-active) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--surface) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity, 1))
}

#ns-media .content {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--surface) / var(--tw-bg-opacity, 1))
}

#ns-media .content #ns-grid .ns-media-image-selected {
    --tw-ring-color: rgb(var(--info-tertiary) / var(--tw-ring-opacity, 1));
    --tw-ring-opacity: .9
}

#ns-media .content .ns-media-footer {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1))
}

#ns-media .content .ns-media-upload-item {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--box-elevation-background) / var(--tw-bg-opacity, 1))
}

#ns-media .content .ns-media-upload-item .error {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--error-primary) / var(--tw-bg-opacity, 1))
}

#ns-media .content .ns-media-preview-panel {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tab-active) / var(--tw-bg-opacity, 1))
}

#crud-table tr.ns-table-row td>a {
    border-bottom-width: 1px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(var(--info-tertiary) / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--info-tertiary) / var(--tw-text-opacity, 1))
}