#last-update {
    color:#83878a;
    text-align:right;
    float: right;
    font-size:0.8vw;
}

#variation-pannel {
    display:flex;
    flex-wrap: wrap;
}


#accuracy-cell {
    font-size: 1.2vw;
}

.card-container {
    display:inline-block;
    margin-left:0.5vw;
    width:49%;
}

.card-row {
    display: flex;
    flex-wrap: nowrap;
}

.dashboard-title {
    font-size: 1.7vw !important;
}

.dashboard-legend {
    font-size: 0.64vw;
    margin:0px; 
    background-color:#FFFFFF; 
    position:absolute; 
    bottom:0px
}

.dashboard-card {
    table-layout: fixed;
    height: 98.5%;
    width:100%;
}

.dashboard-card tr td, .dashboard-card tr th {
    border: 2px solid #dee2e5;
    vertical-align : middle;
    text-align:center !important;
    white-space:nowrap;
    font-size:0.8vw;
    padding:0px;
}

.dashboard-card tr th {
    background-color:#1f2424;
    color:#ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-card tr .text {
    vertical-align : middle;
    text-align:left !important;
}

.dashboard-card tr:last-child td {
    border-bottom-width: 2px !important;
}

.dashboard-card tr .positive {
    color:#2ecc71;
}

.dashboard-card tr .negative {
    color:#e64231;
}

.dashboard-card .danger {
    border: 3px solid #ca3423;
}

.dashboard-card .warning {
    border: 3px solid #f0c92c;
}

.dashboard-card .success {
    border: 3px solid #20bd61;
}

.dashboard-card .neutral {
    border: 3px solid #dee2e5;
}

.dashboard-card .alert-cell {
    margin:0px;
    padding:0px;
    text-align:left !important;
}

.dashboard-card tr .separator-top {
    border:0px solid transparent !important;
    border-top: 2px solid #dee2e5 !important;
}

.dashboard-card tr .separator {
    border:0px solid transparent !important;
}

.dashboard-card tr .separator-bottom {
    border:0px solid transparent !important;
    border-bottom: 2px solid #dee2e5 !important;
}

.dashboard-alert {
    width: 100%;
}

.aggregated-time-header {
    cursor:pointer;
}

.db-blinking{
    animation:blinkingText 0.25s infinite;
    animation-direction: alternate;
}
@keyframes blinkingText{
	0%{		color: #2b3c4e;	}
	100%{	color: #FF0000;	}
}

.aggregated-stats {
    margin-top:0.5em;
    margin-bottom:0.5em;
}

.warning-sign {
    color:#FF0000;
}

.red-text {
    color:#FF0000 !important;
}

/** Back Button Widget*/
.backButtonLink {
    font-size: 2em;
    text-decoration: none;
}

.backButtonSpan {
    height: var(--height52);
    width: var(--width52);
}


/** Connectivity Widget */
.connectivityTitle {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize18);
}

.connectivityWidgetHealthy {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    height: var(--height140);
    width: var(--width160);
}

.connectivityWidgetWarning {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    height: var(--height140);
    width: var(--width160);
}

.connectivityWidgetDanger {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    height: var(--height140);
    width: var(--width160);
}

.connectivityCanvas {
    width: var(--width135);
    height: var(--height80);
}

/** Accuracy Widget */
.accuracyTitle {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize18);
}

.accuracyValue {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize46);
}

.accuracyWidget {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    height: var(--height140);
    width: var(--width160);
}

/** Daily Alerts Widget */
.dailyAlertsGraph {
    width: var(--width1183);
    height: var(--height375);
}

.dailyAlertsTitle {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize25)
}

.dailyAlertsSubtitle {
    font-family: var(--fontFamilyRubikNormal);
    font-size: var(--fontSize12)
}

.dailyAlertsWidget {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    height: var(--height420);
    width: var(--width1215);
}

.firstBlock {
    height: var(--height420);
    width: var(--width1215);
}

.secondBlock {
    height: var(--height420);
    width: var(--width1215);
    opacity: 0;
}

.thirdBlock {
    height: var(--height420);
    width: var(--width1215);
    opacity: 0;
}

.timer1 {
    border-radius: 100px;
    height: 20px;
    width: 20px;
}

.timer-circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
  }

.dailyAlertsAnimation {
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-name: anim-left;
    animation-timing-function:  ease-in-out;
}

.dailyAlertsAnimationOut {
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-name: anim-left-out;
    animation-timing-function:  ease-in-out;
    
}

/** Hot Spots Widget */
.hotSpotsSpiner {
    margin-left: var(--marginLeft100);
    margin-top: var(--marginTop140);
}

.hotSpotsTableHeader {
    height: var(--height30);
}

.hotSpotsLocationHeader {
    width: var(--width210);
}

.hotSpotsLocationCell {
    height: var(--height52);
    vertical-align: var(--alignMiddle);

}

.hotSpotsAlertsHeader {
    text-align: var(--textAlignRight)  !important;
    width: var(--width125); 

}

.hotSpotsAlertsCell {
    height: var(--height52);
    text-align: var(--textAlignRight) !important;
    vertical-align: var(--alignMiddle);

}

.hotSpotsBody {
    font-family: var(--fontFamilyRubikNormal);
}

.hotSpotsTitle {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize25)
}

.hotSpotsSubtitle {
    font-family: var(--fontFamilyRubikNormal);
    font-size: var(--fontSize12);
}

.hotSpotsWidget {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    height: var(--height420);
    width: var(--width400);
}

.hotSpotsIcon {
    margin-left: var(--marginLeft8);
}

/** Last Hours Widget */
.lastHoursAlertRed {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize32);
}

.lastHoursAlertIconRed {
    font-size: var(--fontSize32);
    margin-left: var(--marginLeft24);
    margin-right: var(--marginRight8);
}

.lastHoursAlertGreen {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize32);
}

.lastHoursAlertIconGreen {
    margin-left: var(--marginLeft24);
    margin-right: var(--marginRight8);
    font-size: var(--fontSize32);
}

.lastHoursAlertWhite {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize32);
}

.lastHoursAlertIconWhite {
    margin-left: var(--marginLeft24);
    margin-right: var(--marginRight8);
    font-size: var(--fontSize32);
}

.lastHoursAlertSpinner {
    margin-left: var(--marginLeft200);
    margin-top: var(--marginTop100);
}

.lastHoursAlertTitle {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize28);
}

.lastHoursTotalAlerts {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize56);
}

.lastHoursPercentageAlerts {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    height: var(--height140);
    width: 1660px;
}

.lastAlertsContainer {
    width: 35%;
    overflow: var(--overflowHidden);
    padding: 5px;
    height: 80px;
}

/** Legend Widget */
.legendAbsoluteIcon {
    text-align: var(--textAlignCenter)  !important;
    font-size: var(--fontSize18);
    width: var(--width135);
}

.aboluteValue {
    font-family: var(--fontFamilyRubikNormal);
    text-align: var(--textAlignRight) !important;
    width: var(--width135);
    font-size: var(--fontSize16);
}

.surgeIcon {
    text-align: var(--textAlignCenter)  !important;
    width: var(--width135);
    font-size: var(--fontSize16);
}

.surgeText {
    font-family: var(--fontFamilyRubikNormal);
    text-align: var(--textAlignRight)  !important;
    font-size: var(--fontSize18);
    width: var(--width100);
}

.legendText {
    font-family: var(--fontFamilyRubikNormal);
    text-align: var(--textAlignCenter)  !important;
    font-size: var(--fontSize12);
    width: var(--width135);
}

.legendWidget {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    width: var(--width160);
    height: var(--heigth255);
}

/** Local Time Widget */
.localTimeIcon {
    font-size: var(--fontSize25);
}

.localTime {
    font-family: var(--fontFamilyRubikNormal);
    font-size: var(--fontSize46);
    letter-spacing: 3px;
}

.localTimeTitle {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize18);
}

.localTimeWidget {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    height: var(--height140);
    width: var(--width160);
}

/** MTA Widget */
.mtaLogo {
    width: var(--width100);
    height: var(--height110);
}

.mtaLogoWidget {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    height: var(--height140);
    width: var(--width160);
}

/** Peak Hours Widget */
.peakHoursSpinner {
    margin-left: var(--marginLeft200);
    margin-top: var(--marginTop100);
}

.peakHoursTable {
    font-family: var(--fontFamilyRubikNormal);
}

.peakHoursLocation {
    width: var(--width240);
}

.peakHoursLocationCell {
    height: var(--height52);
    vertical-align: var(--alignMiddle);
}

@keyframes anim-lineUp {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }
    20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translateY(0%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes anim-left {
    0% {
        opacity: 1;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

@keyframes anim-left-out {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    100% {
        opacity: 1;
        transform: translateX(-100%);
    }
}

@keyframes blinker { 
    50% { opacity: 0; }
}

@keyframes rota {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  @keyframes opa {
    0%, 49.9% { visibility: visible; }
    50%, 100% { visibility: hidden; }
  }

.animationDelay1 {
    animation-delay: 0s;
}

.animationDelay2 {
    animation-delay: 1s;
}

.animationDelay3 {
    animation-delay: 2s;
}

.animationDelay4 {
    animation-delay: 3s;
}

.animationDelay5 {
    animation-delay: 4s;
}

.animationDelay6 {
    animation-delay: 5s;
}

.highlightedRow {
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-name: anim-lineUp;
    animation-timing-function: ease-out;
}

.localColonTime {
    animation: blinker 1s step-start infinite;
}

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

.peakHoursStartTime {
    width: var(--width90);
}

.peakHoursStartTimeCell {
    height: var(--height52);
    vertical-align: var(--alignMiddle);
    text-align: var(--textAlignRight)  !important;
}

.peakHoursAlerts {
    text-align: var(--textAlignRight)  !important;
    width: var(--width200);
}

.peakHoursAlertsCell {
    text-align: var(--textAlignRight)  !important;
    height: var(--height52);
    vertical-align: var(--alignMiddle);
}

.peakHoursAlertCellIcon {
    margin-left: var(--marginLeft16);
    vertical-align: var(--alignMiddle);

}

.peakHoursTitle {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize25);
}

.peakHoursSubtitle {
    font-family: var(--fontFamilyRubikNormal);
    font-size: var(--fontSize12);
}

.peakHoursWidget {
    border-radius: var(--borderRadius7);
    width: var(--width595);
    height: var(--height420);
}

.peakHoursTableHeader {
    height: var(--height30);
}


/** Predicted Peak Widget */
.predictedPeakSpinner {
    margin-left: var(--marginLeft210);
    margin-top: var(--marginTop100);
}

.predictedPeakLocationCell {
    height: var(--height52);
    vertical-align: var(--alignMiddle);

}

.predictedPeakStartTimeCell {
    height: var(--height52);
    vertical-align: var(--alignMiddle);
    text-align: var(--textAlignRight)  !important;
}

.predictedPeakAlertsCell {
    text-align: var(--textAlignRight)  !important;
    vertical-align: var(--alignMiddle);

}

.predictedPeakHoursAlertCellIcon {
    margin-left: var(--marginLeft16);
    vertical-align: var(--alignMiddle);
}

.predictedPeakTable {
    font-family: var(--fontFamilyRubikNormal);
}

.predictedPeakHoursLocation {
    width: var(--width240);
}

.predictedPeakHoursStartTime {
    width: var(--width90);
}

.predictedPeakHoursAlerts {
    text-align: var(--textAlignRight)  !important;
    width: var(--width240);
}

.predictedPeakHoursLine {
    width: var(--width570);
    margin-bottom: var(--marginBottom10);
}

.predictedPeakTitle {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize25);
}

.predictedPeakSubtitle {
    font-family: var(--fontFamilyRubikNormal);
    font-size: var(--fontSize12);
}

.predictedPeakWidget {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    width: var(--width620);
    height: var(--height420);
}

.predictedPeakTableRow {
    width: 610px !important;
}

.predictedPeakTableHeader {
    height: var(--height30);
}

/** System Status Widget */
.sysUptimeCanvas {
    font-family: var(--fontFamilyRubikNormal);
    width: var(--width66);
    height: var(--height66);
}

.sysUptimeCanvasBlock {
    overflow: var(--overflowHidden);
    width: var(--width78);
    height: var(--height78);
}

.sysUptimeChart {
    font-family: var(--fontFamilyRubikNormal);
    font-size: var(--fontSize12);
}

.sysUptimeBlock {
    overflow: var(--overflowHidden);
    width: var(--width122);
    height: var(--height95);
}

.camsUptimeCanvas {
    overflow: var(--overflowHidden);
    width: var(--width78);
    height: var(--height78);
}

.camsUptimeChart {
    font-family: var(--fontFamilyRubikNormal);
    font-size: var(--fontSize12);
}

.camsUptimeBlock {
    overflow: var(--overflowHidden);
    width: var(--width122);
    height: var(--height95);
}

.camsOnline {
    position: fixed !important;
    margin-top: 0px !important;
    font-size: var(--fontSize32);
    font-family: var(--fontFamilyRubikBold);
}

.camsOnlineText {
    font-family: var(--fontFamilyRubikNormal);
    font-size: var(--fontSize12);
}

.camsOnlineBlock {
    width: var(--width122);
    height: var(--height95);
}

.resourceUsageCanvas {
    overflow: var(--overflowHidden);
    width: var(--width78);
    height: var(--height78);
}

.resourceUsageText {
    font-family: var(--fontFamilyRubikNormal);
    font-size: var(--fontSize12);
}

.resourceUsageChart {
    overflow: var(--overflowHidden);
    width: var(--width122);
    height: var(--height95);
}

.systemStatusTitle {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize14);
}

.systemStatusWidget {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    height: var(--height140);
    width: var(--width680);
    z-index: 99;
}

.systemStatusSpinner {
    width: var(--width78) !important;
    height: var(--height78) !important;
}

.camsUptimeSpinner {
    width: var(--width78) !important;
    height: var(--height78) !important;
}

.camsOnlineSpinner {
    margin-left: var(--marginLeft24) !important;
    width: var(--width78) !important;
    height: var(--height78) !important;  
}

.resourceUsageSpinner {
    width: var(--width78) !important;
    height: var(--height78) !important;
}


/** Use Case Distribution Widget */
.useCaseDistributionSpinner {
    margin-left: var(--marginLeft210);
    margin-top: var(--marginTop100);
}

.useCaseDistributionCanvas {
    font-family: var(--fontFamilyRubikNormal);
    width: var(--width500);
    height: var(--height320);
    position: absolute;
}

.useCaseBlock {
    width: var(--width550);
    height: var(--height320);
    display: block;
}

.usecaseOpacityBlock {
    width: var(--width550);
    height: var(--height320);
    opacity: 0;
}

.useCaseDistributionTitle {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize25);
}

.useCaseDistributionSubtitle {
    font-family: var(--fontFamilyRubikNormal);
    font-size: var(--fontSize16);
}

.ueCaseWidget {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    width: var(--width595);
    height: var(--height420);
}

/** Loader Style */
.loader {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .primaryDashboard, .blue2Dashboard {
    flex: 1;
    text-align: center;
  }

/** Options Widget */
.optionsWidget {
    overflow: var(--overflowHidden);
    border-radius: var(--borderRadius7);
    height: var(--height140);
    width: 345px;
}

.switch-container {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    width: 17.5rem;
    align-items: center;
}

.switch {
    display: inline-block;
    position: relative;
}

.switch-input {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

.switch-label {
    position: relative;
    display: inline-block;
    width: 115px;
    height: 40px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
}

.switch-indicator {
    position: absolute;
    top: 50%;
    left: 42%;
    transform: translate(-50%, -50%) translateX(-85%);
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 9999px;
}

.switch-indicator {
    &,
    &::before,
    &::after {
        transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
    }
}

.switch-input:checked + .switch-label {

    .switch-indicator {
        transform: translate(-50%, -50%);
        left: 83%;

        &::before,
        &::after {
            display: none;
        }
    }
}

.station-dropdown {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize14);
}

.dropdown-options-container {
    margin-top: .5rem;
    width: 100%;
}

.station-input-text {
    font-family: var(--fontFamilyRubikBold);
    font-size: var(--fontSize14);
}

.station-selected-title {
    margin-bottom: .3rem;
}

.increments-text {
    width: 20rem;
    font-family: var(--fontFamilyRubikNormal);
    font-size: var(--fontSize16);
}