:root {
    /* image */
    --⚙️: url(/s/paytree/logo.png);
    --⚙️-height: 60px;
    --🖼️: url(/s/paytree/login-bg.png);
    /* colors */
    --theme-color-1: #5A5F7D;
    --theme-color-2: #4F536D;
    --theme-color-3: #d54926;
    --theme-color-4: #e37b3f;
    --theme-color-5: #ffffff;
    --theme-color-6: #ffffffbf;
    --theme-color-7: #333333;
    --theme-color-8: #000000;
    --theme-color-9: #ffcb2f26;
    --theme-color-a: #584613;
    /* main */
    --theme-background: var(--theme-color-1);
    --theme-h5: var(--theme-color-5);
    --theme-text: var(--theme-color-5);
    --theme-content-text: var(--theme-color-3);
    --theme-eth-low: var(--theme-color-3);
    --theme-progress-bar: var(--theme-color-3);
    /* nav */
    --theme-navbar: var(--theme-color-1);
    --theme-navbar-height: 60px;
    --theme-navbar-text: var(--theme-color-5);
    --theme-navbar-text-opaque: var(--theme-color-6);
    --theme-link-active: unset;
    --theme-nav-active-border: 3px solid var(--theme-color-3);
    --theme-profile: var(--theme-color-a);
    --margin: 3% 15%;
    /* table */
    --theme-table-border: 1px solid var(--theme-color-7);
    --theme-table-search-background: var(--theme-color-2);
    --theme-table-search-border: 1px solid var(--theme-color-5);
    --theme-table-search-border-focus: 1px solid var(--theme-color-5);
    /* card */
    --theme-card-border: var(--theme-color-7);
    --theme-card-header: var(--theme-color-1);
    --theme-card-header-text: var(--theme-color-5);
    --theme-card-body: var(--theme-color-1);
    --theme-card-body-text: var(--theme-color-5);
    --theme-card-body-select-group: var(--theme-color-2);
    --theme-card-body-input-group-border: 1px solid var(--theme-color-5);
    --theme-card-body-thead: var(--theme-color-2);
    --theme-card-footer: var(--theme-color-4);
    --theme-card-footer-hover: var(--theme-color-3);
    --theme-card-footer-text: var(--theme-color-1);
    --theme-card-action: var(--theme-color-5);
    --theme-modal-footer-has-button: var(--theme-color-3);
    /* button */
    --theme-btn: var(--theme-color-4);
    --theme-btn-border-radius: 25px;
    --theme-btn-export: var(--theme-color-3);
    --theme-btn-primary: var(--theme-color-4);
    --theme-btn-border: var(--theme-color-4);
    --theme-btn-text: var(--theme-color-5);
    --theme-btn-hover: var(--theme-color-3);
    --theme-btn-hover-border: var(--theme-color-3);
    --theme-btn-hover-text: var(--theme-color-1);
    --theme-btn-success: var(--theme-color-4);
    --theme-btn-success-border: var(--theme-color-4);
    --theme-btn-success-text: var(--theme-color-1);
    --theme-btn-success-hover: var(--theme-color-3);
    --theme-btn-success-hover-border: var(--theme-color-3);
    --theme-btn-success-hover-text: var(--theme-color-1);
    --theme-btn-danger-text: var(--theme-color-4);
    --theme-btn-danger-border: var(--theme-color-4);
    --theme-btn-danger-hover: var(--theme-color-4);
    --theme-btn-danger-hover-border: var(--theme-color-4);
    /* form */
    --theme-form-background: var(--theme-color-2);
    --theme-form-border: var(--theme-color-5);
    --theme-form-text: var(--theme-color-5);
    --theme-form-auth-text: var(--theme-color-7);
    --theme-form-auth-placeholder: var(--theme-color-7);
    --theme-form-autofill-shadow: 0 0 0 100px var(--theme-color-5) inset;
    --theme-form-autofill-text: var(--theme-color-7);
    --theme-form-checkbox-border: var(--theme-color-5);
    --theme-form-checkbox-background: var(--theme-color-5);
    /* pagination */
    --theme-pagination-background: var(--theme-color-1);
    --theme-pagination-text: var(--theme-color-5);
    /* announcement */
    --theme-announcement-background: var(--theme-color-9);
    --theme-announcement-border: 1px solid var(--theme-color-3);
    --theme-toast-background: var(--theme-color-5);
    /* login page form*/
    --theme-login-form-background: var(--theme-color-5);
    --theme-login-placeholder: var(--theme-color-5);
    --theme-login-text: var(--theme-color-8);
}