﻿.wait-time-container * {
    box-sizing: border-box;
}

#wait-time-container, .wait-time-container {
    text-align: right;
    margin-top: 62px;
}

#wait-time-container > p, .wait-time-container > p {
    margin: 10px 0 15px
}

#wait-time-container .emphasis-Primary, #wait-time-container .emphasis-Secondary, #wait-time-container .emphasis-Tertiary, #wait-time-container .emphasis-Warning, .wait-time-container .emphasis-Primary, .wait-time-container .emphasis-Secondary, .wait-time-container .emphasis-Tertiary, .wait-time-container .emphasis-Warning {
    margin: 15px 0 28px;
    text-align: left
}

    .wait-time-container .emphasis-Warning {
        background-color: rgba(205,32,39,.15);
        border-color: #cd2027;
        margin: 15px 0;
        padding: 10px 15px;
        overflow: hidden;
        display: block;
        color: #424242;
        border-left: 4px solid #cd2027;
    }


.wait-time-inner {
    border: 0
}

@media(min-width: 768px) {
    .wait-time-inner {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: center;
        justify-content: center;
        border-top: 0;
        border-bottom: 1px solid #d8d8d8
    }
}

@media(min-width: 1200px) {
    .wait-time-inner {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        border-top: 0;
        border-left: 0;
        border-bottom: 1px solid #d8d8d8;
        border-right: 0
    }
}

.wait-time-inner .wrapper {
    padding: 20px;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #d8d8d8
}

@media(min-width: 768px) {
    .wait-time-inner .wrapper {
        max-width: 50%;
        border-top: 0
    }

    .wait-time-inner .wrapper:nth-child(even) {
        border-left: 1px solid #d8d8d8
    }

    .wait-time-inner .wrapper:last-child {
        border-bottom: 0
    }
}

@media(min-width: 1200px) {
    .wait-time-inner .wrapper {
        max-width: 20%;
        border-right: 1px solid #d8d8d8;
        border-bottom: none
    }

    .wait-time-inner .wrapper:nth-child(even) {
        border-left: 0
    }

    .wait-time-inner .wrapper:last-child {
        border-right: none
    }
}

.wait-time-inner .wrapper > div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center
}

@media(min-width: 1200px) {
    .wait-time-inner .wrapper > div {
        height: 70px
    }
}

.wait-time-inner .wrapper p {
    padding-top: 20px;
    margin: 0;
    text-align: center
}

@media(min-width: 1200px) {
    .wait-time-inner .wrapper p {
        padding-top: 10px
    }
}

.wait-time-inner .wrapper p:not(:first-of-type) {
    margin: 0;
    padding-top: 0
}

.wait-time-inner .wrapper .patients-triaged, .wait-time-inner .wrapper .patients-waiting {
    color: #565692
}

    .wait-time-inner .wrapper .patients-triaged span, .wait-time-inner .wrapper .patients-waiting span {
        font-size: 1.76471em;
        font-weight: 700;
        line-height: 1
    }

.wait-time-inner .wrapper .wait-time {
    color: #565692
}

    .wait-time-inner .wrapper .wait-time span {
        line-height: 1.3
    }

        .wait-time-inner .wrapper .wait-time span:not(:first-child) {
            margin-left: 4px
        }

        .wait-time-inner .wrapper .wait-time span:not(.time) {
            font-size: 22px;
            font-family: Roboto,serif
        }

        .wait-time-inner .wrapper .wait-time span:nth-child(even) {
            margin-top: 6px
        }

    .wait-time-inner .wrapper .wait-time .time {
        font-size: 30px;
        font-weight: 700;
        line-height: 1
    }

.wait-time-inner .wait-trends .trend-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #e6e6ee;
    background-image: url(../resources/trend-same.svg);
    background-position: left 50% center;
    background-repeat: no-repeat;
    background-size: 28px 28px
}

.wait-time-inner .wait-trends.increasing .trend-icon {
    background-image: url(../resources/trend-increase.svg)
}

.wait-time-inner .wait-trends.decreasing .trend-icon {
    background-image: url(../resources/trend-decrease.svg)
}
#chartCanvas{
    height: 600px;
    width: 800px;
}