:root {
    /* main colors */
    --primary-color: #4c4c4c;  /* Main branding-color, also used for navigation and active buttons */
    --secondary-color: #797979; /* important color for link-text-color and button-bg */
    --primary-text-color: #fff; /* text-color for Elements with non-white background-color */
    --secondary-text-color: #5e5e5e; /* color for non important/header text */

  /* status colors */
    --inactive-color: #f0f0f0;
    --success-color: #4caf50;
    --warning-color: #ff9800;
    --danger-color: #f44336; /* often used as danger/red color that grabs attention */
    --error-color: #f6675d;
    --canceled-color: #d7006e;
    --delete-color: #a1a1a1;
    /* ------------- */

    /* pseudo states */
    --state-hover: brightness(85%); /* changes state color by changing the brightness */
    --state-focus: brightness(105%);
    --state-active: brightness(95%);
    /* ------------- */

    /* navigation element colors */
    --navigation-text-color: var(--primary-text-color); /* text-color for top-nav also used for nav icons */
    --navigation-bg-color: var(--primary-color); /* top-nav background-color, default set as primary color */
    --sidebar-text-color: var(--secondary-text-color);
    --sidebar-sub-text-color: var(--secondary-text-color);
    --sidebar-active-bg-color: var(--off-white-color);
    --body-bg-color: #f6f6f6; /* main background-color, other elements sit on top of this color */
    --pagination-bg-color: #e2e2e2; /* non-active pagination button background-color */
    --pagination-text-color: #7e7e7e; /* non-active pagination button text-color */
    --active-text-color: #262626; /* active pagination button text-color ie. sidebar current page text color */
    --important-color: var(--danger-color);

    /* standard element colors */
    --black-color: #000000;  /* black-color used as text/icon/element color */
    --black-bg: #000000; /* black-color used as black background-color */
    --white-bg: #fff; /* black-color used as black background-color */
    --input-bg-color: #fff; /* background-color for input field */
    --off-white-color: #f4f4f4; /* slightly off white color used as various background-color and odd table row background-color */
    --off-white-bg-color: #f7f7f7; /* slightly darker off white color */

    --grey-color-100: #ccc;
    --grey-color-200: #999;
    --grey-color-300: #797979;
    --grey-color-400: #4c4c4c;
    --grey-color-500: #333;
    --grey-color-border: #ddd;
    --grey-color-border-100: #eeeeee;
    --grey-color-border-001: #f0f0f0; /* grey colors of various shade */

    --footer-text-color: #a2a2a2; /* footer text color */
    --text-muted: var(--grey-color-300);
    --text-light: #a2a2a2;
    --text-middle: #5e5e5e;
    --text-dark: var(--grey-color-500);

    --info-color: #ec012b;
    --info-bg-color: #d9edf7;

    /* icon element colors */
    --icon-info-color: var(--primary-color); /* color for info-icon ie. under comments column */
    --icon-default-color: var(--secondary-text-color); /* default color for all icons */
    --icon-secondary-color: var(--secondary-color);
    /* -------------  */

    /* datepicker element colors */
    --datepicker-color: #ccc;
    --datepicker-accent-color: var(--secondary-color);
    --datepicker-in-range-color: #ebf4f8;
    --datepicker-disabled-color: #999;
    --datepicker-active-color: #357ebd;
    --datepicker-bg: #f5f5f5;
    --datepicker-modal-bg: #fff;
    --datepicker-hover-color: #eee;
    /* -------------  */

    /* alert element colors */
    --alert-text-color: #fff;
    --alert-secondary-text-color: var(--secondary-text-color);
    --alert-grey-text-color: #ddd;
    --alert-dark-text-color: #000;
    --alert-success-bg: #4CAF50B2;
    --alert-warning-bg: #FFC107B2;
    --alert-danger-bg: #F44336B2;
    --alert-info-bg: #2196F3B2;
    --alert-default-bg: #efefef;
    /* -------------  */

    /* table colors  */
    --table-text-color: #333; /* table header color */
    --table-bg-color: #fff; /* table background color */
    --table-bg-highlight-color: #FFFFDB; /* table highlighted background color*/
    --table-bg-chain-color: #b3d1e0; /* color between order chain */
    --table-bg-sky-color: #b3d1e0; /* color between order chain */
    --table-bg-warning: rgba(255, 168, 41, 0.6);
  /* -------------  */
}

/* Custom theme for prwb - Pink Robin - Wastebox */
/* theme */
.prwb-main-theme-primary {
    color: var(--primary-text-color);
    background-color: var(--primary-color);
}

.prwb-main-theme-secondary {
    color: var(--secondary-text-color);
    background-color: var(--secondary-color);
}

/* Status */
.prwb-status-inactive {
    color: var(--secondary-text-color);
    background-color: var(--inactive-color);
}

.prwb-status-success {
    color: var(--primary-text-color);
    background-color: var(--success-color);
}

.prwb-status-warning {
    color: var(--primary-text-color);
    background-color: var(--warning-color);
}

.prwb-status-danger {
    color: var(--primary-text-color);
    background-color: var(--danger-color);
}

.prwb-status-canceled {
    color: var(--primary-text-color);
    background-color: var(--canceled-color);
}

/* Buttons */
.prwb-btn-action {
    color: var(--primary-text-color);
    background-color: var(--secondary-color);
}

.prwb-btn-redirect {
    color: var(--primary-text-color);
    background-color: var(--secondary-color);
}

.prwb-input-border {
    color: var(--primary-text-color);
    background-color: var(--primary-color);
}

/* Text */
.prwb-text-link {
    color: var(--secondary-color);
}

.prwb-text-important {
    color: var(--error-color);
}

/* Icons */
.prwb-icon-relevant,
.prwb-icon-special,
.prwb-icon-supplemental,
.prwb-icon-subordinate {
    color: var(--primary-text-color);
}

.prwb-icon-relevant {
    background-color: var(--primary-color);
}

.prwb-icon-special {
    background-color: var(--warning-color);
}

.prwb-icon-supplemental {
    background-color: var(--black-bg);
}

.prwb-icon-subordinate {
    background-color: var(--grey-color-300);
}

/* pseudo states */
.prwb-status-inactive:hover,
.prwb-status-success:hover,
.prwb-status-warning:hover,
.prwb-status-danger:hover,
.prwb-status-canceled:hover,
.prwb-btn-action:hover,
.prwb-btn-redirect:hover,
.prwb-input-border:hover,
.prwb-icon-relevant:hover,
.prwb-icon-special:hover,
.prwb-icon-supplemental:hover,
.prwb-icon-subordinate:hover {
    filter: var(--state-hover);
}

.prwb-status-inactive:focus,
.prwb-status-success:focus,
.prwb-status-warning:focus,
.prwb-status-danger:focus,
.prwb-status-canceled:focus,
.prwb-btn-action:focus,
.prwb-btn-redirect:focus,
.prwb-input-border:focus,
.prwb-icon-relevant:focus,
.prwb-icon-special:focus,
.prwb-icon-supplemental:focus,
.prwb-icon-subordinate:focus {
    filter: var(--state-focus);
}

.prwb-status-inactive:active,
.prwb-status-success:active,
.prwb-status-warning:active,
.prwb-status-danger:active,
.prwb-status-canceled:active,
.prwb-btn-action:active,
.prwb-btn-redirect:active,
.prwb-input-border:active,
.prwb-icon-relevant:active,
.prwb-icon-special:active,
.prwb-icon-supplemental:active,
.prwb-icon-subordinate:active {
    filter: var(--state-active);
}

/* table */
.prwb-table th {
    background-color: var(--grey-color-100);
    color: var(--grey-color-500);
}

.prwb-table tr:nth-child(even) {
    background-color: var(--off-white-color);
}

/* */
.prwb-table {
    border-collapse: collapse;
    width: 100%;
}

.prwb-table th,
.prwb-table td {
    text-align: left;
    padding: 8px;
}

/* Helper classes for custom CSS variables */
/* Primary Colors */
.primary-bg {
    background-color: var(--primary-color);
}

.primary-text {
    color: var(--primary-text-color);
}

/* Secondary Colors */
.secondary-bg {
    background-color: var(--secondary-color);
}

.secondary-text {
    color: var(--secondary-text-color);
}

/* Inactive Color */
.inactive-bg {
    background-color: var(--inactive-color);
}

/* Success Color */
.success-bg {
    background-color: var(--success-color);
}

/* Warning Color */
.warning-bg {
    background-color: var(--warning-color);
}

/* Danger Color */
.danger-bg {
    background-color: var(--danger-color);
}

/* Error Color */
.error-bg {
    background-color: var(--error-color);
}

/* Canceled Color */
.canceled-bg {
    background-color: var(--canceled-color);
}

/* Default Status Color */
.default-text {
    color: var(--icon-default-color);
}

/* Success Color */
.success-text {
    color: var(--success-color);
}

/* Warning Color */
.warning-text {
    color: var(--warning-color);
}

/* Danger Color */
.danger-text {
    color: var(--danger-color);
}

/* Error Color */
.error-text {
    color: var(--error-color);
}

/* Canceled Color */
.canceled-text {
    color: var(--canceled-color);
}


/* Black Color */
.black-bg {
    background-color: var(--black-bg);
}

.black-text {
    color: var(--black-color);
}

/* Off-White Color */
.off-white-bg {
    background-color: var(--off-white-color) !important;
}

/* Grey Colors */
.grey-100-bg {
    background-color: var(--grey-color-100);
}

.grey-100-text {
    color: var(--grey-color-100);
}

.grey-300-bg {
    background-color: var(--grey-color-300);
}

.grey-300-text {
    color: var(--grey-color-300);
}

.grey-500-bg {
    background-color: var(--grey-color-500);
}

.grey-500-text {
    color: var(--grey-color-500);
}