:root {
    --bg: $white;
    --bg-2: #f8f9fc;
    --color-headings: #25373f;
    --color-texts: rgba(37, 55, 63, 0.7);
    --color-texts-2: #3b4656;
    --color-texts-3: rgba(38, 39, 41, 0.7);
    --border-color: rgba(128, 138, 142, 0.2);
    --border-color-2: rgba(37, 55, 63, 0.1);
    --logo-color: #6575c9;
    --link-color: #6575c9;
    --contact-background: #94AAF8;
    --dark-background: #94AAF8;
    --button-background: #6575c9;
    --button-warning: #ca402b;
    --button-info: #aaa;
    --info-background: var(--bg-2);
    --title-color: #aaa;
    --text-color: #aaa;
    --success-text-color: #6575c9;
    --input-color: #6575c9;
    --choice-background: #eee;
    --choice-selected-color: #eee;
    --choice-selected-background: #6575c9;
    --key-color: #94AAF8;
    --confirm-background: #6575c9;
    --navigate-background: #6575c9;
    --button-color: #fff;
    --button-background-primary: #6575c9;
    --button-border-primary: #6575c9 2px solid;
    --button-color-primary: #fff;
    --button-background-warning: hsl(0, 72%, 77%);
    --button-border-warning: #ca402b 2px solid;
    --button-color-warning: #ffffff;
    --button-background-neutral: transparent;
    --button-border-active: 2px solid #77DD77;
    --button-border-neutral: 2px solid #6575c9;
    --button-border-disabled: 2px solid #bbb;
    --button-color-neutral: #6575c9;
    --button-background-disabled: white;
    --button-border-disabled: 2px solid #ccc;
    --button-color-disabled: #bbb;
    --button-background-status: #e5f7ff;
    --button-background-paid: #77DD77;
    --button-background-partial: #77ddd8;
    --button-background-draft: #ccc;
    --button-background-void: rgb(241, 22, 95);
    /* --button-background-active: #77DD77; */
    --button-background-active: #5dbea3;
    --button-background-inactive: rgb(241, 22, 95);
    --form-section-background: #eee;
    --table-header-background: #eee;
    --table-header-font-size: 0.9rem;
    --input-error-background: #ffdddd;
    --app-header-background: #eee;
    --app-header-button-hover: rgba(0, 0, 0, 0.1);
    --app-header-height: 40px;
    --app-header-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.2);
    --app-left-toolbar-background: #eee;
    --app-left-toolbar-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.2);
    --app-right-toolbar-background: #eee;
    --app-right-toolbar-shadow: 0 -1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.2);
    --app-header-height: 40px;
    --status-bar-background: #eee;
    --status-bar-height: 36px;
    --status-bar-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 -1px 2px rgba(0, 0, 0, 0.2);
    --modal-overlay: rgba(0, 0, 0, 0.4);
    --background-error: #FFCCCC;
    --background-success: #cdffcd;
}

* {
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

body {
    background: #f5f6f7;
    color: #4c4c4c;
    padding: 0;
    margin: 0;
}