:root {
    /* Should be the same as --background-color */
    --surface-color: #ffffff;
    --background-color: #ffffff;
    --background-color-dark: #ffffff;
    --background-color-light: #ffffff;

    --font-color-main: rgba(0,0,0,.87);
    --font-color-medium: #444;
    --font-color-lightest: #f0f2f5;
    --font-color-light: #9e9e9e;

    /* Main color, used for menu and buttons */
    --primary-color: #009688;
    --primary-color-light: #1AB0A2;
    --primary-color-lightest: #80cbc4;
    --primary-color-dark: #006355;

    /* Mainly used for icons and titles */
    --secondary-color: #e74646;

    /* Cancel buttons and error messages */
    --warning-color: #e53935;
}


/* SURFACE COLOR */
.visibility .fa-secondary, .select-icon.fa-secondary {
    text-shadow: -1px 0 var(--surface-color), 0 1px var(--surface-color), 1px 0 var(--surface-color), 0 -1px var(--surface-color);
}

/** BACKGROUND COLOR **/
thead th {
    background-color: var(--background-color);
}

/** PRIMARY COLOR **/
a, .breadcrumb-item.active a, .dropdown-menu i, .navigation-block i, .autocomplete-content li .highlight, .autocomplete-result a b,
.fa-long-arrow-down.active, .fa-long-arrow-up.active {
    color: var(--primary-color);
}

.tabs-block li.tab.current {
    border-color: var(--primary-color);
}

.header-logo:hover, .sidebar-wrapper, .sidebar-element.separate-item div,
.header-profile .down-background, .btn, .btn:focus, .btn:hover,
.modal-custom .modal-header, .box h1, .box .logo {
    background-color: var(--primary-color);
}

/** PRIMARY COLOR DARK **/
.sidebar-element a:hover, .sidebar-element.current a {
    background-color: var(--primary-color-dark);
}

/** PRIMARY COLOR LIGHT **/
.header-logo {
    background-color: var(--primary-color-light);
}

.sidebar-element.separate-item div, .sidebar-element.separate-item {
    border-color: var(--primary-color-light);
}

/** SECONDARY COLOR **/
.btn-holder .button, .btn-holder .button i, .table-actions i,
.header {
    color: var(--secondary-color);
}

html.loading:before {
    background-color: var(--secondary-color);
}

/** WARNING COLOR **/
.btn-cancel, .btn-cancel:focus, .btn-cancel:hover, .toast.error {
    background-color: var(--warning-color);
}

.error-helper, .fa-warning:before, .helper-text-error {
    color: var(--warning-color);
}

/** FONT COLOR LIGHT **/
.autocomplete-results li span, .collections .collection-element .collection-stats,
.input-field > label, .rating-form > label, .tab:not(.current), .tab:not(.current) a,
footer, .image-label, .datum-row span.country-name, .breadcrumb-item a {
    color: var(--font-color-light);
}

.select2, .input-field.outlined input, .input-field.outlined textarea, .search-block {
    border-color: var(--font-color-light);
}

/** FONT COLOR LIGHTEST **/
i, .sidebar-element span, .header-logo a, .toast, .box h1 {
    color: var(--font-color-lightest);
}

/** FONT COLOR MAIN **/
.visibility i, .datum i, .related-item i, .autocomplete-result a,  .tab.current a, .locale-dropdown i, .handle i,
.select2-container--default .select2-selection--single .select2-selection__rendered, .select2 i, .select2-results__option i {
    color: var(--font-color-main);
}