.font-green {
  color: #15803d !important;
  font-weight: 700 !important;
}

.font-yellow {
  color: #eab308 !important;
  font-weight: 700 !important;
}

.font-grey {
  color: #64748b !important;
}

.font-blue {
  color: #0ea5e9 !important;
  font-weight: 700 !important;
}

.font-pink {
  color: #be185d !important;
  font-weight: 700 !important;
}

.font-purple {
  color: #a21caf !important;
  font-weight: 700 !important;
}

.font-red {
  color: #ef4444 !important;
  text-align: right;
}

.td-red {
  color: #ef4444 !important;
  text-align: center;
}

.font-amber {
  color: #f59e0b !important;
  text-align: right;
}

.font-dark-blue {
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

.font-selected-theme {
  color: var(--level-8);
  font-weight: 700 !important;
}

.storybook-button {
  font-family: "Josefin Sans" !important;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  border: 0;
  border-radius: 6px;
  margin: 10px 10px 0px 0px;
  color: white;
  padding: 5px;
  text-transform: capitalize;
}
.storybook-button img {
  width: 25px;
  padding-right: 2px;
  filter: invert(0%);
}
.storybook-button:hover {
  cursor: pointer;
}
.storybook-button:focus {
  box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.5), 6px 5px 5px rgba(0, 0, 0, 0.5);
}

.storybook-button--default {
  background-color: var(--level-8);
}
.storybook-button--default:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--addnew,
.storybook-button--preview-submit,
.storybook-button--addwidgets,
.storybook-button--schedule-appointment,
.storybook-button--re-schedule-appointment,
.storybook-button--add,
.storybook-button--collect-fine,
.storybook-button--copy-demand,
.storybook-button--copy,
.storybook-button--create,
.storybook-button--schedule,
.storybook-button--apply,
.storybook-button--copy-test,
.storybook-button--insert,
.storybook-button--pre-defined,
.storybook-button--re-concile,
.storybook-button--raise-connect,
.storybook-button--rewrite-demand,
.storybook-button--generate,
.storybook-button--pending,
.storybook-button--user-rights,
.storybook-button--passout-students,
.storybook-button--transfer-receipt,
.storybook-button--add-depositledgers,
.storybook-button--add-doctype,
.storybook-button--pay-only-ob,
.storybook-button--send,
.storybook-button--lets-connect,
.storybook-button--mark-as-resolved,
.storybook-button--pay-newdemand-also,
.storybook-button--history,
.storybook-button--img-download {
  background-color: var(--level-8);
}
.storybook-button--addnew:hover,
.storybook-button--preview-submit:hover,
.storybook-button--addwidgets:hover,
.storybook-button--schedule-appointment:hover,
.storybook-button--re-schedule-appointment:hover,
.storybook-button--add:hover,
.storybook-button--collect-fine:hover,
.storybook-button--copy-demand:hover,
.storybook-button--copy:hover,
.storybook-button--create:hover,
.storybook-button--schedule:hover,
.storybook-button--apply:hover,
.storybook-button--copy-test:hover,
.storybook-button--insert:hover,
.storybook-button--pre-defined:hover,
.storybook-button--re-concile:hover,
.storybook-button--raise-connect:hover,
.storybook-button--rewrite-demand:hover,
.storybook-button--generate:hover,
.storybook-button--pending:hover,
.storybook-button--user-rights:hover,
.storybook-button--passout-students:hover,
.storybook-button--transfer-receipt:hover,
.storybook-button--add-depositledgers:hover,
.storybook-button--add-doctype:hover,
.storybook-button--pay-only-ob:hover,
.storybook-button--send:hover,
.storybook-button--lets-connect:hover,
.storybook-button--mark-as-resolved:hover,
.storybook-button--pay-newdemand-also:hover,
.storybook-button--history:hover,
.storybook-button--img-download:hover {
  background-color: var(--level-4) !important;
}
.storybook-button--addnew:focus,
.storybook-button--preview-submit:focus,
.storybook-button--addwidgets:focus,
.storybook-button--schedule-appointment:focus,
.storybook-button--re-schedule-appointment:focus,
.storybook-button--add:focus,
.storybook-button--collect-fine:focus,
.storybook-button--copy-demand:focus,
.storybook-button--copy:focus,
.storybook-button--create:focus,
.storybook-button--schedule:focus,
.storybook-button--apply:focus,
.storybook-button--copy-test:focus,
.storybook-button--insert:focus,
.storybook-button--pre-defined:focus,
.storybook-button--re-concile:focus,
.storybook-button--raise-connect:focus,
.storybook-button--rewrite-demand:focus,
.storybook-button--generate:focus,
.storybook-button--pending:focus,
.storybook-button--user-rights:focus,
.storybook-button--passout-students:focus,
.storybook-button--transfer-receipt:focus,
.storybook-button--add-depositledgers:focus,
.storybook-button--add-doctype:focus,
.storybook-button--pay-only-ob:focus,
.storybook-button--send:focus,
.storybook-button--lets-connect:focus,
.storybook-button--mark-as-resolved:focus,
.storybook-button--pay-newdemand-also:focus,
.storybook-button--history:focus,
.storybook-button--img-download:focus {
  background-color: var(--level-7) !important;
}
.storybook-button--addnew:disabled,
.storybook-button--preview-submit:disabled,
.storybook-button--addwidgets:disabled,
.storybook-button--schedule-appointment:disabled,
.storybook-button--re-schedule-appointment:disabled,
.storybook-button--add:disabled,
.storybook-button--collect-fine:disabled,
.storybook-button--copy-demand:disabled,
.storybook-button--copy:disabled,
.storybook-button--create:disabled,
.storybook-button--schedule:disabled,
.storybook-button--apply:disabled,
.storybook-button--copy-test:disabled,
.storybook-button--insert:disabled,
.storybook-button--pre-defined:disabled,
.storybook-button--re-concile:disabled,
.storybook-button--raise-connect:disabled,
.storybook-button--rewrite-demand:disabled,
.storybook-button--generate:disabled,
.storybook-button--pending:disabled,
.storybook-button--user-rights:disabled,
.storybook-button--passout-students:disabled,
.storybook-button--transfer-receipt:disabled,
.storybook-button--add-depositledgers:disabled,
.storybook-button--add-doctype:disabled,
.storybook-button--pay-only-ob:disabled,
.storybook-button--send:disabled,
.storybook-button--lets-connect:disabled,
.storybook-button--mark-as-resolved:disabled,
.storybook-button--pay-newdemand-also:disabled,
.storybook-button--history:disabled,
.storybook-button--img-download:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--user-rights img {
  filter: invert(100%);
}

.storybook-button--edit,
.storybook-button--connect,
.storybook-button--complete-case,
.storybook-button--update,
.storybook-button--update-continue,
.storybook-button--skip,
.storybook-button--permission,
.storybook-button--move,
.storybook-button--predefined-type,
.storybook-button--ledger-report,
.storybook-button--collection-report,
.storybook-button--reserve-book,
.storybook-button--renewal-book,
.storybook-button--previous,
.storybook-button--assign-salary-structure,
.storybook-button--multiple-inst-invoice {
  background-color: #0ea5e9;
}
.storybook-button--edit:hover,
.storybook-button--connect:hover,
.storybook-button--complete-case:hover,
.storybook-button--update:hover,
.storybook-button--update-continue:hover,
.storybook-button--skip:hover,
.storybook-button--permission:hover,
.storybook-button--move:hover,
.storybook-button--predefined-type:hover,
.storybook-button--ledger-report:hover,
.storybook-button--collection-report:hover,
.storybook-button--reserve-book:hover,
.storybook-button--renewal-book:hover,
.storybook-button--previous:hover,
.storybook-button--assign-salary-structure:hover,
.storybook-button--multiple-inst-invoice:hover {
  background-color: #38bdf8;
}
.storybook-button--edit:focus,
.storybook-button--connect:focus,
.storybook-button--complete-case:focus,
.storybook-button--update:focus,
.storybook-button--update-continue:focus,
.storybook-button--skip:focus,
.storybook-button--permission:focus,
.storybook-button--move:focus,
.storybook-button--predefined-type:focus,
.storybook-button--ledger-report:focus,
.storybook-button--collection-report:focus,
.storybook-button--reserve-book:focus,
.storybook-button--renewal-book:focus,
.storybook-button--previous:focus,
.storybook-button--assign-salary-structure:focus,
.storybook-button--multiple-inst-invoice:focus {
  background-color: #0369a1;
}
.storybook-button--edit:disabled,
.storybook-button--connect:disabled,
.storybook-button--complete-case:disabled,
.storybook-button--update:disabled,
.storybook-button--update-continue:disabled,
.storybook-button--skip:disabled,
.storybook-button--permission:disabled,
.storybook-button--move:disabled,
.storybook-button--predefined-type:disabled,
.storybook-button--ledger-report:disabled,
.storybook-button--collection-report:disabled,
.storybook-button--reserve-book:disabled,
.storybook-button--renewal-book:disabled,
.storybook-button--previous:disabled,
.storybook-button--assign-salary-structure:disabled,
.storybook-button--multiple-inst-invoice:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--day-end,
.storybook-button--unclear-entries,
.storybook-button--delete,
.storybook-button--unlink,
.storybook-button--clean-up,
.storybook-button--reject,
.storybook-button--end-session,
.storybook-button--check-out,
.storybook-button--Reject,
.storybook-button--remove,
.storybook-button--remove-button,
.storybook-button--absent,
.storybook-button--work-done,
.storybook-button--no {
  background-color: #dc2626;
}
.storybook-button--day-end:hover,
.storybook-button--unclear-entries:hover,
.storybook-button--delete:hover,
.storybook-button--unlink:hover,
.storybook-button--clean-up:hover,
.storybook-button--reject:hover,
.storybook-button--end-session:hover,
.storybook-button--check-out:hover,
.storybook-button--Reject:hover,
.storybook-button--remove:hover,
.storybook-button--remove-button:hover,
.storybook-button--absent:hover,
.storybook-button--work-done:hover,
.storybook-button--no:hover {
  background-color: #ef4444;
}
.storybook-button--day-end:focus,
.storybook-button--unclear-entries:focus,
.storybook-button--delete:focus,
.storybook-button--unlink:focus,
.storybook-button--clean-up:focus,
.storybook-button--reject:focus,
.storybook-button--end-session:focus,
.storybook-button--check-out:focus,
.storybook-button--Reject:focus,
.storybook-button--remove:focus,
.storybook-button--remove-button:focus,
.storybook-button--absent:focus,
.storybook-button--work-done:focus,
.storybook-button--no:focus {
  background-color: #b91c1c;
}
.storybook-button--day-end:disabled,
.storybook-button--unclear-entries:disabled,
.storybook-button--delete:disabled,
.storybook-button--unlink:disabled,
.storybook-button--clean-up:disabled,
.storybook-button--reject:disabled,
.storybook-button--end-session:disabled,
.storybook-button--check-out:disabled,
.storybook-button--Reject:disabled,
.storybook-button--remove:disabled,
.storybook-button--remove-button:disabled,
.storybook-button--absent:disabled,
.storybook-button--work-done:disabled,
.storybook-button--no:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--view,
.storybook-button--view-allimages,
.storybook-button--change-image,
.storybook-button--fee-details,
.storybook-button--selected,
.storybook-button--select-staff,
.storybook-button--View-channel,
.storybook-button--view-graph {
  background-color: #a21caf;
}
.storybook-button--view:hover,
.storybook-button--view-allimages:hover,
.storybook-button--change-image:hover,
.storybook-button--fee-details:hover,
.storybook-button--selected:hover,
.storybook-button--select-staff:hover,
.storybook-button--View-channel:hover,
.storybook-button--view-graph:hover {
  background-color: #e879f9;
}
.storybook-button--view:focus,
.storybook-button--view-allimages:focus,
.storybook-button--change-image:focus,
.storybook-button--fee-details:focus,
.storybook-button--selected:focus,
.storybook-button--select-staff:focus,
.storybook-button--View-channel:focus,
.storybook-button--view-graph:focus {
  background-color: #701a75;
}
.storybook-button--view:disabled,
.storybook-button--view-allimages:disabled,
.storybook-button--change-image:disabled,
.storybook-button--fee-details:disabled,
.storybook-button--selected:disabled,
.storybook-button--select-staff:disabled,
.storybook-button--View-channel:disabled,
.storybook-button--view-graph:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--clear,
.storybook-button--change-visitor-type {
  background-color: #053e7a;
}
.storybook-button--clear:hover,
.storybook-button--change-visitor-type:hover {
  background-color: #4f7eb0;
}
.storybook-button--clear:focus,
.storybook-button--change-visitor-type:focus {
  background-color: #052e59;
}
.storybook-button--clear:disabled,
.storybook-button--change-visitor-type:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--demand {
  background-color: #ec4899;
}
.storybook-button--demand:hover {
  background-color: #f472b6;
}
.storybook-button--demand:focus {
  background-color: #9d174d;
}
.storybook-button--demand:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--print,
.storybook-button--reorder,
.storybook-button--statement,
.storybook-button--demand-details,
.storybook-button--previous-receipt,
.storybook-button--forward {
  background-color: #8b5cf6;
}
.storybook-button--print:hover,
.storybook-button--reorder:hover,
.storybook-button--statement:hover,
.storybook-button--demand-details:hover,
.storybook-button--previous-receipt:hover,
.storybook-button--forward:hover {
  background-color: #a78bfa;
}
.storybook-button--print:focus,
.storybook-button--reorder:focus,
.storybook-button--statement:focus,
.storybook-button--demand-details:focus,
.storybook-button--previous-receipt:focus,
.storybook-button--forward:focus {
  background-color: #4c1d95;
}
.storybook-button--print:disabled,
.storybook-button--reorder:disabled,
.storybook-button--statement:disabled,
.storybook-button--demand-details:disabled,
.storybook-button--previous-receipt:disabled,
.storybook-button--forward:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--ledger,
.storybook-button--account-ledger {
  background-color: #06b6d4;
}
.storybook-button--ledger:hover,
.storybook-button--account-ledger:hover {
  background-color: #22d3ee;
}
.storybook-button--ledger:focus,
.storybook-button--account-ledger:focus {
  background-color: #164e63;
}
.storybook-button--ledger:disabled,
.storybook-button--account-ledger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--export,
.storybook-button--excel,
.storybook-button--auto-generate,
.storybook-button--submit-approval,
.storybook-button--re-open,
.storybook-button--Active,
.storybook-button--pdf,
.storybook-button--preview-pdf,
.storybook-button--grade,
.storybook-button--extend,
.storybook-button--transport-demand,
.storybook-button--capture,
.storybook-button--generate-invoice {
  background-color: rgba(0, 0, 0, 0.8);
}
.storybook-button--export:hover,
.storybook-button--excel:hover,
.storybook-button--auto-generate:hover,
.storybook-button--submit-approval:hover,
.storybook-button--re-open:hover,
.storybook-button--Active:hover,
.storybook-button--pdf:hover,
.storybook-button--preview-pdf:hover,
.storybook-button--grade:hover,
.storybook-button--extend:hover,
.storybook-button--transport-demand:hover,
.storybook-button--capture:hover,
.storybook-button--generate-invoice:hover {
  background: rgba(0, 0, 0, 0.48);
}
.storybook-button--export:focus,
.storybook-button--excel:focus,
.storybook-button--auto-generate:focus,
.storybook-button--submit-approval:focus,
.storybook-button--re-open:focus,
.storybook-button--Active:focus,
.storybook-button--pdf:focus,
.storybook-button--preview-pdf:focus,
.storybook-button--grade:focus,
.storybook-button--extend:focus,
.storybook-button--transport-demand:focus,
.storybook-button--capture:focus,
.storybook-button--generate-invoice:focus {
  background: rgba(0, 0, 0, 0.92);
}
.storybook-button--export:disabled,
.storybook-button--excel:disabled,
.storybook-button--auto-generate:disabled,
.storybook-button--submit-approval:disabled,
.storybook-button--re-open:disabled,
.storybook-button--Active:disabled,
.storybook-button--pdf:disabled,
.storybook-button--preview-pdf:disabled,
.storybook-button--grade:disabled,
.storybook-button--extend:disabled,
.storybook-button--transport-demand:disabled,
.storybook-button--capture:disabled,
.storybook-button--generate-invoice:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--pay-online,
.storybook-button--add-new-fee,
.storybook-button--waive-off,
.storybook-button--active,
.storybook-button--fetch,
.storybook-button--received,
.storybook-button--adjust,
.storybook-button--transfer,
.storybook-button--assign,
.storybook-button--customize,
.storybook-button--check-in,
.storybook-button--visitor-entry,
.storybook-button--move-to,
.storybook-button--make-active,
.storybook-button--allocate,
.storybook-button--yes,
.storybook-button--cash-receipts,
.storybook-button--bank-receipts,
.storybook-button--re-calculate,
.storybook-button--start-posting,
.storybook-button--next,
.storybook-button--adjustment-receipts {
  background-color: #15803d;
}
.storybook-button--pay-online:hover,
.storybook-button--add-new-fee:hover,
.storybook-button--waive-off:hover,
.storybook-button--active:hover,
.storybook-button--fetch:hover,
.storybook-button--received:hover,
.storybook-button--adjust:hover,
.storybook-button--transfer:hover,
.storybook-button--assign:hover,
.storybook-button--customize:hover,
.storybook-button--check-in:hover,
.storybook-button--visitor-entry:hover,
.storybook-button--move-to:hover,
.storybook-button--make-active:hover,
.storybook-button--allocate:hover,
.storybook-button--yes:hover,
.storybook-button--cash-receipts:hover,
.storybook-button--bank-receipts:hover,
.storybook-button--re-calculate:hover,
.storybook-button--start-posting:hover,
.storybook-button--next:hover,
.storybook-button--adjustment-receipts:hover {
  background-color: #22c55e;
}
.storybook-button--pay-online:focus,
.storybook-button--add-new-fee:focus,
.storybook-button--waive-off:focus,
.storybook-button--active:focus,
.storybook-button--fetch:focus,
.storybook-button--received:focus,
.storybook-button--adjust:focus,
.storybook-button--transfer:focus,
.storybook-button--assign:focus,
.storybook-button--customize:focus,
.storybook-button--check-in:focus,
.storybook-button--visitor-entry:focus,
.storybook-button--move-to:focus,
.storybook-button--make-active:focus,
.storybook-button--allocate:focus,
.storybook-button--yes:focus,
.storybook-button--cash-receipts:focus,
.storybook-button--bank-receipts:focus,
.storybook-button--re-calculate:focus,
.storybook-button--start-posting:focus,
.storybook-button--next:focus,
.storybook-button--adjustment-receipts:focus {
  background-color: #14532d !important;
}
.storybook-button--pay-online:disabled,
.storybook-button--add-new-fee:disabled,
.storybook-button--waive-off:disabled,
.storybook-button--active:disabled,
.storybook-button--fetch:disabled,
.storybook-button--received:disabled,
.storybook-button--adjust:disabled,
.storybook-button--transfer:disabled,
.storybook-button--assign:disabled,
.storybook-button--customize:disabled,
.storybook-button--check-in:disabled,
.storybook-button--visitor-entry:disabled,
.storybook-button--move-to:disabled,
.storybook-button--make-active:disabled,
.storybook-button--allocate:disabled,
.storybook-button--yes:disabled,
.storybook-button--cash-receipts:disabled,
.storybook-button--bank-receipts:disabled,
.storybook-button--re-calculate:disabled,
.storybook-button--start-posting:disabled,
.storybook-button--next:disabled,
.storybook-button--adjustment-receipts:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--back,
.storybook-button--progress,
.storybook-button--pending-approval,
.storybook-button--cancel,
.storybook-button--reconcil-entries {
  background-color: #eab308;
}
.storybook-button--back:hover,
.storybook-button--progress:hover,
.storybook-button--pending-approval:hover,
.storybook-button--cancel:hover,
.storybook-button--reconcil-entries:hover {
  background-color: #fde047;
}
.storybook-button--back:focus,
.storybook-button--progress:focus,
.storybook-button--pending-approval:focus,
.storybook-button--cancel:focus,
.storybook-button--reconcil-entries:focus {
  background-color: #ca8a04;
}
.storybook-button--back:disabled,
.storybook-button--progress:disabled,
.storybook-button--pending-approval:disabled,
.storybook-button--cancel:disabled,
.storybook-button--reconcil-entries:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--all-transaction,
.storybook-button--all-configure,
.storybook-button--log-sheet,
.storybook-button--submit,
.storybook-button--Submit,
.storybook-button--page-config,
.storybook-button--finish,
.storybook-button--issue-book,
.storybook-button--make-elligible,
.storybook-button--return-book,
.storybook-button--save,
.storybook-button--adjust-deposits,
.storybook-button--request-extension,
.storybook-button--publish,
.storybook-button--review,
.storybook-button--complete,
.storybook-button--save-continue,
.storybook-button--select,
.storybook-button--save-order,
.storybook-button--configure,
.storybook-button--show-summarized,
.storybook-button--all-receipts,
.storybook-button--okay,
.storybook-button--approve,
.storybook-button--Approve,
.storybook-button--pay-fee,
.storybook-button--reset-save {
  background-color: #319795;
}
.storybook-button--all-transaction:hover,
.storybook-button--all-configure:hover,
.storybook-button--log-sheet:hover,
.storybook-button--submit:hover,
.storybook-button--Submit:hover,
.storybook-button--page-config:hover,
.storybook-button--finish:hover,
.storybook-button--issue-book:hover,
.storybook-button--make-elligible:hover,
.storybook-button--return-book:hover,
.storybook-button--save:hover,
.storybook-button--adjust-deposits:hover,
.storybook-button--request-extension:hover,
.storybook-button--publish:hover,
.storybook-button--review:hover,
.storybook-button--complete:hover,
.storybook-button--save-continue:hover,
.storybook-button--select:hover,
.storybook-button--save-order:hover,
.storybook-button--configure:hover,
.storybook-button--show-summarized:hover,
.storybook-button--all-receipts:hover,
.storybook-button--okay:hover,
.storybook-button--approve:hover,
.storybook-button--Approve:hover,
.storybook-button--pay-fee:hover,
.storybook-button--reset-save:hover {
  background-color: #4fd1c5;
}
.storybook-button--all-transaction:focus,
.storybook-button--all-configure:focus,
.storybook-button--log-sheet:focus,
.storybook-button--submit:focus,
.storybook-button--Submit:focus,
.storybook-button--page-config:focus,
.storybook-button--finish:focus,
.storybook-button--issue-book:focus,
.storybook-button--make-elligible:focus,
.storybook-button--return-book:focus,
.storybook-button--save:focus,
.storybook-button--adjust-deposits:focus,
.storybook-button--request-extension:focus,
.storybook-button--publish:focus,
.storybook-button--review:focus,
.storybook-button--complete:focus,
.storybook-button--save-continue:focus,
.storybook-button--select:focus,
.storybook-button--save-order:focus,
.storybook-button--configure:focus,
.storybook-button--show-summarized:focus,
.storybook-button--all-receipts:focus,
.storybook-button--okay:focus,
.storybook-button--approve:focus,
.storybook-button--Approve:focus,
.storybook-button--pay-fee:focus,
.storybook-button--reset-save:focus {
  background-color: #285e61 !important;
}
.storybook-button--all-transaction:disabled,
.storybook-button--all-configure:disabled,
.storybook-button--log-sheet:disabled,
.storybook-button--submit:disabled,
.storybook-button--Submit:disabled,
.storybook-button--page-config:disabled,
.storybook-button--finish:disabled,
.storybook-button--issue-book:disabled,
.storybook-button--make-elligible:disabled,
.storybook-button--return-book:disabled,
.storybook-button--save:disabled,
.storybook-button--adjust-deposits:disabled,
.storybook-button--request-extension:disabled,
.storybook-button--publish:disabled,
.storybook-button--review:disabled,
.storybook-button--complete:disabled,
.storybook-button--save-continue:disabled,
.storybook-button--select:disabled,
.storybook-button--save-order:disabled,
.storybook-button--configure:disabled,
.storybook-button--show-summarized:disabled,
.storybook-button--all-receipts:disabled,
.storybook-button--okay:disabled,
.storybook-button--approve:disabled,
.storybook-button--Approve:disabled,
.storybook-button--pay-fee:disabled,
.storybook-button--reset-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--sign-in,
.storybook-button--enable-login {
  background-color: #22c55e;
  border-radius: 6px;
  padding: 8px;
  width: 100%;
}
.storybook-button--sign-in:hover,
.storybook-button--enable-login:hover {
  background-color: #4ade80;
}
.storybook-button--sign-in:focus,
.storybook-button--enable-login:focus {
  background-color: #15803d;
}
.storybook-button--sign-in:disabled,
.storybook-button--enable-login:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--otp {
  background-color: #f59e0b;
  border-radius: 30px;
  padding: 8px;
  width: 100% !important;
}
.storybook-button--otp:hover {
  background-color: #fbbf24;
}
.storybook-button--otp:focus {
  background-color: #b45309;
}
.storybook-button--otp:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--sign-out,
.storybook-button--disable-login {
  background-color: #ef4444;
  border-radius: 20px;
  padding: 6px;
  width: 100%;
}
.storybook-button--sign-out:hover,
.storybook-button--disable-login:hover {
  background-color: #f87171;
}
.storybook-button--sign-out:focus,
.storybook-button--disable-login:focus {
  background-color: #b91c1c;
}
.storybook-button--sign-out:disabled,
.storybook-button--disable-login:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--upload {
  background-color: #0ea5e9;
}
.storybook-button--upload:hover {
  background-color: #38bdf8;
}
.storybook-button--upload:focus {
  background-color: #0369a1;
}
.storybook-button--upload img {
  filter: invert(100%);
}
.storybook-button--upload:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--preview {
  background-color: #6fee22;
}
.storybook-button--preview:hover {
  background-color: #4ade80;
}
.storybook-button--preview:focus {
  background-color: #15803d;
}
.storybook-button--preview img {
  filter: invert(100%);
}
.storybook-button--preview:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--reset,
.storybook-button--reset-widget {
  background-color: #fa5b49;
}
.storybook-button--reset:hover,
.storybook-button--reset-widget:hover {
  background-color: #fe7464;
}
.storybook-button--reset:focus,
.storybook-button--reset-widget:focus {
  background-color: #ef3e33;
}
.storybook-button--reset:disabled,
.storybook-button--reset-widget:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--grade img {
  filter: invert(100%);
}

.storybook-button--close {
  background-color: #ef4444;
}
.storybook-button--close:hover {
  background-color: #f87171;
}
.storybook-button--close:focus {
  background-color: #dc2626;
}
.storybook-button--close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--continue,
.storybook-button--proceed {
  color: white;
  background-color: transparent;
  display: flex;
  margin-top: 20px;
  justify-content: center;
  column-gap: 10px;
  width: 100%;
}
.storybook-button--continue img,
.storybook-button--proceed img {
  width: 20px;
}
.storybook-button--continue:hover,
.storybook-button--proceed:hover {
  text-decoration: underline;
}
.storybook-button--continue:focus,
.storybook-button--proceed:focus {
  text-decoration: underline;
}
.storybook-button--continue:disabled,
.storybook-button--proceed:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storybook-button--docs-upload {
  background-color: white;
  border-radius: 20px;
  width: 100px;
  font-weight: 500;
  color: var(--text-color);
  border: 1px solid #e2e8f0;
}
.storybook-button--docs-upload img {
  margin-top: 0px;
  width: 20px;
  margin-left: 5px;
}

.storybook-button--docs-delete {
  background-color: #ef4444;
  border-radius: 20px;
  width: 100px;
  font-weight: 500;
  color: white;
  border: 1px solid #e2e8f0;
}
.storybook-button--docs-delete img {
  margin-top: 0px;
  width: 20px;
  margin-left: 5px;
}

.storybook-button--message {
  background-color: #9ca3af;
}
.storybook-button--message:hover {
  background-color: #9ca3af;
}
.storybook-button--message:focus {
  background-color: #111827;
}
.storybook-button--message:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.storybook-button--message img {
  filter: invert(100%);
}

.storybook-button--history img {
  filter: invert(100%);
}

.storybook-button--change-image,
.storybook-button--capture {
  width: 100%;
  margin: 0px !important;
  border-radius: 0px 0px 0px 6px;
}.font-green {
  color: #15803d !important;
  font-weight: 700 !important;
}

.font-yellow {
  color: #eab308 !important;
  font-weight: 700 !important;
}

.font-grey {
  color: #64748b !important;
}

.font-blue {
  color: #0ea5e9 !important;
  font-weight: 700 !important;
}

.font-pink {
  color: #be185d !important;
  font-weight: 700 !important;
}

.font-purple {
  color: #a21caf !important;
  font-weight: 700 !important;
}

.font-red {
  color: #ef4444 !important;
  text-align: right;
}

.td-red {
  color: #ef4444 !important;
  text-align: center;
}

.font-amber {
  color: #f59e0b !important;
  text-align: right;
}

.font-dark-blue {
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

.font-selected-theme {
  color: var(--level-8);
  font-weight: 700 !important;
}

.Label, .present-day, .LabelPrimary, .LabelBold, .AccountingLabel {
  font-family: "Josefin Sans" !important;
  font-style: normal;
  font-weight: 500 !important;
  font-size: 14px;
  color: var(--text-color);
  margin-top: 10px;
  padding: 5px;
}

.AccountingLabel {
  font-size: 14px;
  margin-top: 3px;
  padding: 0px;
}

.LabelBold {
  font-weight: 600 !important;
}

.LabelPrimary {
  color: var(--level-6);
  font-weight: 600;
}

.present-day {
  margin-top: 5px !important;
  margin-left: 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px;
  background-color: var(--disabled-color);
}.font-green {
  color: #15803d !important;
  font-weight: 700 !important;
}

.font-yellow {
  color: #eab308 !important;
  font-weight: 700 !important;
}

.font-grey {
  color: #64748b !important;
}

.font-blue {
  color: #0ea5e9 !important;
  font-weight: 700 !important;
}

.font-pink {
  color: #be185d !important;
  font-weight: 700 !important;
}

.font-purple {
  color: #a21caf !important;
  font-weight: 700 !important;
}

.font-red {
  color: #ef4444 !important;
  text-align: right;
}

.td-red {
  color: #ef4444 !important;
  text-align: center;
}

.font-amber {
  color: #f59e0b !important;
  text-align: right;
}

.font-dark-blue {
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

.font-selected-theme {
  color: var(--level-8);
  font-weight: 700 !important;
}

.storybook-input {
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  width: 100%;
  height: 30px;
  margin-top: 10px;
  padding: 0px 5px;
  font-size: 16px;
  font-family: "Josefin Sans" !important;
  color: var(--text-color);
}

.storybook-input:focus {
  border: 1px solid var(--level-3);
}

.large {
  height: 4.5rem;
  font-size: 1.25rem;
  width: 100%;
}

.medium {
  width: 70%;
}

.field_error::placeholder {
  color: #c53030;
}

.field_error {
  border: 1.5px solid #f87171 !important;
  box-shadow: 2px 0px 1px red !important;
}

.required_error {
  box-shadow: 3px 0px 0px red;
  width: calc(100% - 3px) !important;
}

/*Hide the arrow tag in type number*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 
Firefox */
input[type=number] {
  -moz-appearance: textfield;
  font-family: "Spline Sans Mono", monospace !important;
}

.small {
  padding-left: 1rem;
  height: 25px;
  margin: 2px;
  padding: 10px;
  font-size: 14px;
}

.storybook-input[disabled] {
  background-color: var(--disabled-color);
  color: var(--text-color);
  cursor: not-allowed;
}

input[type=date] {
  width: fit-content !important;
}

input[type=time] {
  width: fit-content !important;
}

input[type=date]::-webkit-calendar-picker-indicator {
  filter: var(--img-color);
}

.storybook-input[type=checkbox] {
  width: 22px !important;
  height: 22px !important;
  border-radius: 3px !important;
}

input[type=checkbox]:checked {
  background-color: var(--level-8);
  border-color: var(--level-8);
}