@charset "UTF-8";
/* Add your variable customizations of layout here */
:root {
    --layout-wrapper-background: #ffffff; /* same as prevent-autofill-background */
    --splash-border: #282939;
    --body-background: #f4f3f8;
    --body-layout-wrapper-color: #333333;
    --topbar-layout-color: #b6b7c2;
    --sidebar-link-color: #575867;
    --sidebar-background-color: #f2f2f7;
    --topbar-badge-background: #ffaa00;
    --layout-wrapper-background-hover: #f1f2f7;

    --primaryColor: #bf0413; /* colors should be equal: primaryColor, inputFocusBorderColor, errorColor */
    --primaryTextColor: #ffffff;
    --primaryDarkColor: #a00e1a;
    --primaryDarkerColor: #830b15; /* update colors.constant.ts `burgundy` color */
    --primaryLightColor: #fe7572;
    --primaryDesaturatedColor: #9a4847;
    --primarySemitransparentColor: rgba(238, 59, 56, 0.7);
    --counterLogoBGColor: hsla(1, 21%, 30%, 0.9);
    --highlightBgColor: #ec9d3a; /* same as --actionColor */
    --datableEvenRowBgColor: #fdfafc;
    --datatableHoverBgColor: #e3e1e2;
    --inputFocusBorderColor: #bf0413; /* colors should be equal: primaryColor, inputFocusBorderColor, errorColor */

    --containerHeaderBgColor: #f2f2f7;
    --containerHeaderBorderColor: #c1c1c5;
    --containerHeaderIconColor: #848484;
    --containerHeaderHoverBgColor: #d9d9de;

    --actionColor: #ec9d3a; /* same as --highlightBgColor */
    --actionSemitransparentColor: rgb(236, 157, 58, 0.7);
    --actionBGColor: #ffe2c1;
    --textColor: #444444;
    --contextBGColor: #fef8f1; /* same as --tableHeaderColor */
    --tableHeaderColor: #fef8f1; /* same as --contextBGColor */
    --selectedColor: rgba(109, 161, 206, 0.1);
    --neutralColor: #f8f7fb;
    --borderLightColor: rgba(0, 0, 0, 0.15);
    --successBGColor: #f7fff0;
    --errorBGColor: #fff0f0;
    --warnBGColor: #fff1d9;
    --infoBGColor: #edf5fd;
    --successColor: #63b814; /* update colors.constant.ts `success` color */
    --errorColor: #bf0413; /* update colors.constant.ts `error` color, colors should be equal: primaryColor, inputFocusBorderColor, errorColor */
    --warnColor: #c2690a; /* update colors.constant.ts `warn` color */
    --infoColor: #147df0; /* update colors.constant.ts `info` color */
    --infoLightColor: #2899e9;
    --inactiveColor: #999; /* update colors.constant.ts `inactive` color */
    --readonlyColor: #f9f8f5;
    --fieldLabelColor: #294257;
    --subfieldBGColor: #fff0c8;
    --topMenuWarnBGColor: rgba(255, 187, 0, 0.05);
    --topMenuAlertBGColor: rgba(255, 0, 0, 0.05);
    --listRecordHoverColor: hsla(0, 0%, 0%, 0.025);
    --evenRowBGColor: #fdfafc;

    --whiteColor: #ffffff; /* update colors.constant.ts `white` color */
    --blackColor: #231f20; /* update colors.constant.ts `black` color */
    --lightGrayColor: #c8c8c8;
    --darkGrayColor: #333333;
    --off-theme-dark-on-bright-color: #333333; /* this will appear on a bright background so it's off theme because we want this to remain a dark color */
    --whiteSlightlyTransparentColor: rgba(255, 255, 255, 0.97);
    --whiteSemitransparentColor: rgba(255, 255, 255, 0.9);
    --graySemitransparentColor: rgba(127, 127, 127, 0.8);

    --scheduleNewShiftColor: rgba(222, 255, 222, 0.75);
    --scheduleConflictedBGColor: rgba(255, 222, 222, 0.75);
    --scheduleDriverColor: #751;
    --scheduleVehicleColor: blue; /* update colors.constant.ts `vehicle` color */
    --scheduleAttendantColor: purple;
    --scheduleInfoBGColor: #edf5fd;
    --scheduleDetailsInfoColor: var(--infoColor);

    --border-hover: #c8c8c8; /* Note: more than just borders, used a lot so hard to describe */
    --header-row-background-hover: #eaeaea; /* includes some borders */
    --p-datepicker-today-background: #d0d0d0;
    --google-maps-map-satellite-view-toggle: #dadada;
    --prevent-autofill-background: #ffffff; /* same as layout-wrapper-background */
    --top-bar-background-desaturated: #9a4847; /* a gradient color used for topbar and sidebar background color */
    --top-bar-background-light-desaturated: #b14f4e; /* a gradient color used for topbar and sidebar background color */
    --disabled-opacity: 0.5; /* for disabled buttons - number should be higher for darker themes, lower for lighter */
    --disabled-opacity-num: 50; /* see above */
    --sidebar-navigation-background-color: #f2f2f7;
    --sidebar-company-name-background: #f2f2f7;
    --sidebar-company-name-color: #ffffff;
    --tooltip-background: #333333;
    --tooltip-text-color: #ffffff;
    --bright-text-color: #ffffff; /* use for instances where we want bright white text on dark backgrounds no matter what the theme is */
    --select-placeholder-color: rgba(127, 127, 127, 0.8);
    --chips-token-background-color: #147df0;

    --dispatch-key-text-color: #333333;
    --dispatch-key-border: #c8c8c8;
    --dispatch-key-scheduled-trips-color: var(--warnBGColor);
    --dispatch-key-late-trips-color: var(--errorBGColor);
    --dispatch-key-pending-trips-color: var(--infoBGColor);
    --dispatch-key-cancelled-trips-color: #f2f2f7;
    --dispatch-key-completed-trips-color: var(--successBGColor);
}