/*
National Early Warning Score 2 (NEWS2) chart © Royal College of Physicians 2017
Chart Render Rhidian Bramley 2018
*/

.news2-native-host {
    background: #fff;
    color: #000;
    overflow: auto;
    padding: 10px;
}

.news2-native-host #screen {
    width: 960px;
    /*height: 1200px;
    overflow: auto;*/
}


/*Patient banner*/
#patientbanner {
    margin-bottom: 10px;
}

table.patbanner {
    width: 100%;
    border-collapse: collapse;
    border: 0px;
}

    table.patbanner > tbody > tr > td {
        font: bold 16px arial;
        padding: 7px;
        border: 0px solid #ccc;
        background: #003087;
        color: white;
    }

        table.patbanner > tbody > tr > td:nth-child(1) {
            width: 40%;
        }

.news2-native-host h1 {
    font: bold 20px arial;
}

.news2-native-host sub{
    font-size: 50%;
}

.news2-native-host div.buttons {
    width: 160px;
    float: right;
}

    .news2-native-host div.buttons > a {
        font: bold 12px arial;
        display: inline-block;
        background: #B1BBDE;
        color: #000;
        text-align: center;
        padding: 7px;
        width: 140px;
        text-decoration: none;
        cursor: pointer;
        margin: 5px;
    }

        .news2-native-host div.buttons > a:hover {
            background: #9933ff;
            color: white;
        }

div.copyright{
    font: normal 11px arial;
}

#newschartcontainer {
}


    #newschartcontainer > table.newschart {
        width: 100%;
        table-layout: fixed;
        max-width: 1024px;
        min-width: 600px;
        border-collapse: collapse;
    }


/*default table cell borders*/
table.newschart > tbody > tr > td {
    border: 1px solid #333;
    padding: 0px;
}

/*table borders*/
table.newschart > tbody > tr:nth-child(1) > td {
    border-top: 2px solid #333;
}


table.newschart > tbody > tr:nth-child(75) > td {
    border-bottom: 2px solid #333;
}

/*spacer rows*/
table.newschart > tbody > tr.nspacerow > td {
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    height: 10px;
}

table.newschart > tbody > tr.nspacerow:last-child > td {
    border-top: 2px solid #333 !important;
    border-bottom: 2px solid #fff;
}


/*column formatting*/
table.newschart > tbody > tr > td.ntitle {
    width: 90px !important;
    background: #0066cc;
    color: white;
    font: bold 12px arial;
    vertical-align: top;
    padding: 5px;
}

    table.newschart > tbody > tr > td.ntitle > div.titleunits {
        font: bold 8px arial;
        white-space: nowrap;
    }


    table.newschart > tbody > tr > td.ntitle > div.titleinfo {
        font: bold 8px arial;
        color: #ddd;
        padding-top: 3px;
    }

    table.newschart > tbody > tr > td.ntitle > div.abcde {
        font: bold 24px arial;
        color: #798FC8;
    }

table.newschart > tbody > tr.nrow.nchart0.ndate > td.ntitle {
    background: #ffffff;
    color: #000;
}

    table.newschart > tbody > tr.nrow.nchart0.ndate > td.ntitle > div {
        width: 13px;
        padding: 1px;
        display: inline-block;
        text-align: center;
        color: #000;
        margin-right: 2px;
        margin-top: 2px;
        border: 1px solid #000;
    }




table.newschart > tbody > tr > td.nrange {
    width: 60px;
    font: bold 10px arial;
    text-align: right;
    white-space: nowrap;
    padding-right: 2px;
    border-right: 2px solid #333;
}

table.newschart > tbody > tr > td.nval {
    width: 30px;
    font: bold 10px arial;
    text-align: center;
    width: auto;
    height: 15px;
    background: #fff;
}

    table.newschart > tbody > tr > td.nval.colgrey {
        background: #eee;
    }

        table.newschart > tbody > tr > td.nval.colgrey.colhover {
            background: #fff;
            border-left: 2px solid #000 !important;
            border-right: 2px solid #000 !important;
        }



/*date/time row specific formatting*/
table.newschart > tbody > tr.ndate > td.nval {
    font: bold 10px arial;
}

table.newschart > tbody > tr.ntime > td.nval {
    font: normal 10px arial;
}


/*----------
Colour scheme
----------*/

/*plotted values formatting*/
table.newschart > tbody > tr > td.nval.plotted {
    border-top: 2px solid #0066cc;
    border-left: 2px solid #0066cc;
    border-right: 2px solid #0066cc;
    border-bottom: 2px solid #0066cc;
}
/*plotted BP value range formatting*/
table.newschart > tbody > tr > td.nval.systolic {
    border-bottom: 1px solid #333;
}

table.newschart > tbody > tr > td.nval.diastolicrange {
    border-left: 2px solid #0066cc;
    border-right: 2px solid #0066cc;
    border-bottom: 1px solid #333;
}

table.newschart > tbody > tr > td.nval.diastolic {
    border-left: 2px solid #0066cc;
    border-right: 2px solid #0066cc;
    border-bottom: 2px solid #0066cc;
}

table.newschart > tbody > tr > td.bpband {
    border-left: 3px solid #0066cc;
}


/*hide plotted border styling and text when d3 chart apllied*/
table.newschart > tbody > tr > td.hideborder {
    border: 1px solid #333 !important;
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
    border-left: 1px solid #333 !important;
    border-right: 1px solid #333;
    font-size: 0;
}

table.newschart > tbody > tr > td.diastolic.hideborder {
    font-size: 10px;
}


/*NEWS2 risk colors */

table.newschart > tbody > tr.nrow.nchart0.ndate > td.ntitle > div.score0 {
    background: #ffffff;
}

table.newschart > tbody > tr.nrow.nchart0.ndate > td.ntitle > div.score1 {
    background: #FFF2AC;
}

table.newschart > tbody > tr.nrow.nchart0.ndate > td.ntitle > div.score2 {
    background: #FCC98A;
}

table.newschart > tbody > tr.nrow.nchart0.ndate > td.ntitle > div.score3 {
    background: #F69781;
}


table.newschart > tbody > tr.nscore1 > td.nval {
    background: #FFF2AC;
}

table.newschart > tbody > tr.nscore2 > td.nval {
    background: #FCC98A;
}

table.newschart > tbody > tr.nscore3 > td.nval {
    background: #F69781;
}

table.newschart > tbody > tr.nscore1 > td.nval.plotted.colgrey.colhover {
    background: #FFF2AC !important;
}

table.newschart > tbody > tr.nscore2 > td.nval.plotted.colgrey.colhover {
    background: #FCC98A !important;
}

table.newschart > tbody > tr.nscore3 > td.nval.plotted.colgrey.colhover {
    background: #F69781 !important;
}

table.newschart > tbody > tr > td.yellowrow {
    background: #FFF2AC !important;
}

table.newschart > tbody > tr > td.orangerow {
    background: #FCC98A !important;
}

table.newschart > tbody > tr > td.redrow {
    background: #F69781 !important;
}


/*alternate RAG scheme*/

table.newschart > tbody > tr.nrow.nchart0.ndate > td.altcolor.ntitle > div.score0 {
    background: #ffffff;
}

table.newschart > tbody > tr.nrow.nchart0.ndate > td.altcolor.ntitle > div.score1 {
    background: #ffffcc;
}

table.newschart > tbody > tr.nrow.nchart0.ndate > td.altcolor.ntitle > div.score2 {
    background: #ffeeaa;
}

table.newschart > tbody > tr.nrow.nchart0.ndate > td.altcolor.ntitle > div.score3 {
    background: #ffcccc;
}

table.newschart > tbody > tr.nscore1 > td.altcolor.nval {
    background: #ffffcc;
}

table.newschart > tbody > tr.nscore2 > td.altcolor.nval {
    background: #ffeeaa;
}

table.newschart > tbody > tr.nscore3 > td.altcolor.nval {
    background: #ffcccc;
}

table.newschart > tbody > tr > td.altcolor.yellowrow {
    background: #ffffcc !important;
}

table.newschart > tbody > tr > td.altcolor.orangerow {
    background: #ffeeaa !important;
}

table.newschart > tbody > tr > td.altcolor.redrow {
    background: #ffcccc !important;
}



/*chart specific formatting*/


#newschartcontainer > table > tbody > tr.nrow.nchart3 > td.ntitle {
    background: #B1BBDE;
    color: #000;
}

#newschartcontainer > table > tbody > tr.nrow.nchart10 > td.nrange {
    background: #B1BBDE;
    color: #000;
}

#newschartcontainer > table > tbody > tr.nrow.nchart3 > td.ntitle > div {
    color: #000;
}

    #newschartcontainer > table > tbody > tr.nrow.nchart3 > td.ntitle > div.titlered {
        box-sizing: border-box;
        position: relative;
        margin-top: 8px;
        margin-left: -5px;
        margin-right: -5px;
        margin-bottom: -5px;
        font: bold 8px arial;
        color: red;
        background: white;
        padding: 5px;
        padding-top: 15px;
    }


        #newschartcontainer > table > tbody > tr.nrow.nchart3 > td.ntitle > div.titlered:before {
            box-sizing: border-box;
            content: '';
            display: block;
            position: absolute;
            margin: 0px;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 0px;
            border-top: 10px solid #B1BBDE;
            border-bottom: 10px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }


/*hide O2 delivery scale 2 chart by default*/
table.newschart > tbody > tr.nchart3 > td {
    /* display: none*/
}

/*add split section on O2 delivery scale 2 (with/without O2)*/
table.newschart > tbody > tr.nchartsplit > td.nrange {
    border-bottom: 1px solid #333;
}

table.newschart > tbody > tr.nchartsplit > td.nval {
    border-bottom: 1px solid #333;
}

/*chart 9 (NEWS total)*/
table.newschart > tbody > tr.nchart9 > td {
    font: bold 12px arial;
}

    table.newschart > tbody > tr.nchart9 > td.nval {
        font: bold 14px arial;
        /*  : #ddd;*/
    }

    table.newschart > tbody > tr.nchart9 > td.plotted {
        border: 1px solid #0066cc;
    }


/*chart 10 (bottom section repeat hrs etc)*/
table.newschart > tbody > tr.nchart10 > td.plotted {
    border: 1px solid #333;
}

table.newschart > tbody > tr.nchart10 > td {
    padding: 2px;
}

table.newschart > tbody > tr.nchart10 > td {
    padding: 2px;
}


/*D3 svg styling*/
#newschartcontainer {
    position: relative;
}

    #newschartcontainer > svg {
        pointer-events: none;
    }

svg .line {
    fill: none;
    stroke-width: 3px;
}

svg .linedash {
    fill: none;
    stroke-width: 3px;
}

.text-id, #text-id {
    font: normal 10px arial;
}

/*jquery-ui tooltip styling*/
.tooltip {
    padding: 5px 10px;
    border-radius: 5px;
    margin: 20px;
    text-align: center;
    font: normal 14px arial;
    font-stretch: condensed;
    text-decoration: none;
    box-shadow: 0 0 10px #0066cc;
}

span.red {
    color: red;
}

div.obstitledatetime {
    font: bold 12px arial;
    padding: 2px;
}

div.newsresponse {
    text-align: left;
    font: normal 12px arial;
}

div.newsscores {
    font: normal 8px arial;
}