.primaryDashboard {
    color: var(--whiteDashboard);
}

.blue2Dashboard {
    color: var(--blue2Dashboard);
}

/** Back Button Widget*/
.backButtonLink {
    color: var(--blue4Dashboard);
}

/** Connectivity Widget */
.connectivityTitle {
    color: var(--whiteDashboard);
}

.connectivityWidgetHealthy {
    background-color: var(--successDashboard);
}

.connectivityWidgetWarning {
    background-color: var(--warningDashboard);
}

.connectivityWidgetDanger {
    background-color: var(--dangerDashboard);
}

/** Accuracy Widget */
.accuracyTitle {
    color: var(--whiteDashboard);
}

.accuracyValue {
    color: var(--whiteDashboard);
}

.accuracyWidget {
    background-color: var(--primaryDashboard);
}

/** Daily Alerts Widget */
.dailyAlertsGraph {
    background-image: url(../../img/awaait/watermark.png);
}

.dailyAlertsTitle {
    color: var(--primaryDashboard);
}

.dailyAlertsSubtitle {
    color: var(--blue1Dashboard);
}

.dailyAlertsWidget {
    background-color: var(--whiteDashboard);
}

.timer1 {
    background-color: var(--primaryDashboard);
}

.timer-wrapper-stopped {
    background: transparent;
    cursor: pointer;
}

.timer-wrapper {
    background: transparent;
    cursor: pointer;
}

.timer-pie {
    background: var(--primaryDashboard);
    border: 1px solid transparent;
}

.timer-circle {
    background-color: var(--primaryDashboard);
}

/** Hot Spots Widget */

.hotSpotsLocationHeader {
    color: var(--whiteDashboard);
}

.hotSpotsLocationCell {
    color: var(--whiteDashboard);
}

.hotSpotsAlertsHeader {
    color: var(--whiteDashboard);
}

.hotSpotsAlertsCell {
    color: var(--whiteDashboard);
}

.hotSpotsBody {
    color: var(--whiteDashboard);
}

.hotSpotsTitle {
    color: var(--whiteDashboard);
}

.hotSpotsSubtitle {
    color: var(--blue3Dashboard);
}

.hotSpotsWidget {
    background-color: var(--blue1Dashboard);
}

.hotSpotsIcon {
    color: var(--iconRedDashboard);
}

/** Last Hours Widget */
.lastHoursAlertRed {
    color: var(--dangerDashboard);
}

.lastHoursAlertIconRed {
    color: var(--dangerDashboard);
}

.lastHoursAlertGreen {
    color: var(--successDashboard);
}

.lastHoursAlertIconGreen {
    color: var(--successDashboard);
}

.lastHoursAlertWhite {
    color: var(--whiteDashboard);
}

.lastHoursAlertIconWhite {
    color: var(--whiteDashboard);
}

.lastHoursAlertTitle {
    color: var(--blue3Dashboard);
}

.lastHoursTotalAlerts {
    color: var(--whiteDashboard);
}

.lastHoursPercentageAlerts {
    background-color: var(--primaryDashboard);
}

/** Legend Widget */
.legendAbsoluteIcon {
    color: var(--primaryDashboard);
}

.aboluteValue {
    color: var(--primaryDashboard);
}

.surgeIcon {
    color: var(--primaryDashboard);
}

.surgeText {
    color: var(--primaryDashboard);
}

.legendText {
    color: var(--primaryDashboard);
}

.legendWidget {
    background-color: var(--blue3Dashboard);
}

/** Local Time Widget */
.localTimeIcon {
    color: var(--whiteDashboard);
}

.localTime {
    color: var(--whiteDashboard);
}

.localTimeTitle {
    color: var(--whiteDashboard);
}

.localTimeWidget {
    background-color: var(--primaryDashboard);
}

/** MTA Widget */

.mtaLogoWidget {
    background-color: var(--whiteDashboard);
}

/** Peak Hours Widget */

.peakHoursLocation {
    color: var(--blue1Dashboard);
}

.peakHoursLocationCell {
    color: var(--blue1Dashboard);
}

.localColonTime {
    color: var(--whiteDashboard);
}

.peakHoursRow {
    color: var(--blue1Dashboard);
    background-color: var(--whiteDashboard);
}

.hotSpotsRow {
    background-color: var(--blue1Dashboard);
    color: var(--whiteDashboard);
}

.peakHoursStartTime {
    color: var(--blue1Dashboard);
}

.peakHoursStartTimeCell {
    color: var(--blue1Dashboard);
}

.peakHoursAlerts {
    color: var(--blue1Dashboard);
}

.peakHoursAlertsCell {
    color: var(--blue1Dashboard);
}

.peakHoursAlertCellIcon {
    color: var(--iconRedDashboard);
}

.peakHoursTitle {
    color: var(--primaryDashboard);
}

.peakHoursSubtitle {
    color: var(--blue1Dashboard);
}

.peakHoursWidget {
    background-color: var(--whiteDashboard);
}

.peakHoursTableHeader {
    border-bottom: 1px solid var(--greyDashboard);
}


/** Predicted Peak Widget */

.predictedPeakLocationCell {
    color: var(--blue1Dashboard);
}

.predictedPeakStartTimeCell {
    color: var(--blue1Dashboard);
}

.predictedPeakAlertsCell {
    color: var(--blue1Dashboard);
}

.predictedPeakHoursAlertCellIcon {
    color: var(--iconRedDashboard);
}

.predictedPeakTable {
    color: var(--blue2Dashboard);
}

.predictedPeakHoursLocation {
    color: var(--blue1Dashboard);
}

.predictedPeakHoursStartTime {
    color: var(--blue1Dashboard);
}

.predictedPeakHoursAlerts {
    color: var(--blue1Dashboard);
}

.predictedPeakHoursLine {
    color: var(--greyDashboard);
}

.predictedPeakTitle {
    color: var(--blue2Dashboard);
}

.predictedPeakSubtitle {
    color: var(--blue1Dashboard);
}

.predictedPeakWidget {
    background-color: var(--whiteDashboard);
    border:dashed 2px var(--blue3Dashboard);
}

.predictedPeakTableHeader {
    border-bottom: 1px solid var(--greyDashboard);
}

/** System Status Widget */

.sysUptimeChart {
    color: white;
}

.camsUptimeChart {
    color: white;
}

.camsOnlineText {
    color: white;
}

.resourceUsageText {
    color: white;
}

.systemStatusTitle {
    color: var(--blue3Dashboard);
}

.systemStatusWidget {
    background-color: transparent;
}

/** Use Case Distribution Widget */

.useCaseDistributionTitle {
    color: var(--primaryDashboard);
}

.useCaseDistributionSubtitle {
    color: var(--blue1Dashboard);
}

.ueCaseWidget {
    background-color: var(--whiteDashboard);
}

/** Loader Style */
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
  }

/** Options Widget */
.optionsWidget {
    background-color: transparent;
}

.switch-label {
    background-color: #8FB5F5;
    border: 3px solid #347CF8;
}

.switch-indicator {
    background-color: #ECD21F;
}

.switch-input:checked + .switch-label {
    background-color: #2B2B2B;
    border: 3px solid #5B5B5B;

    .switch-indicator {
        background-color: #7B7B7B;
        box-shadow: 10px 0px 0 0 rgba(0, 0, 0, 0.2) inset;
    }
}

.station-dropdown {
    color: var(--blue3Dashboard);
}

.station-input-text {
    color: var(--blue3Dashboard);
}

.select {
    border-color: var(--blue3Dashboard) !important;
}

.select:not(:hover)::after {
    border-color: var(--blue3Dashboard) !important;
}

.select:hover::after {
    border-color: var(--blue3Dashboard) !important;
}

select.is-focused,
select:focus {
    border-color: var(--blue3Dashboard) !important;
}

#main {
    background-color: rgb(247, 247, 247);
}

.increments-text {
    color: #2B2B2B;
}