/************************************************************************** Dropping that ill CSS for that progressive enhancement and them ESVEEGEES **************************************************************************/ /* Give some default styling to the tables in if JS fails to load */ .scrapeTable h5, .scrapeTable h4 { font-size: 15px; border: 1px solid #ccc; border-radius: 3px 3px 0 0; background: #588020; padding: 5px 10px; margin: 0; color: #fff; text-align: center; text-transform: uppercase; line-height: 1.3em; font-family: "Source Sans Pro", Helvetica, sans-serif; font-weight: bold; } .scrapeTable thead th { text-align: left; color: #fff; background: #222; } .scrapeTable th { background: #eee; text-align: right; color: #333; } .scrapeTable th, .scrapeTable td { padding: 5px 10px; } .halfSize { float: left; width: 47.5%; } .halfSize:first-child { margin-right: 2.5%; } .halfSize:last-child { margin-left: 2.5%; } @media (max-width: 767px) { .halfSize { float: none; width: 100%; } .halfSize:first-child { margin-right: 0; } .halfSize:last-child { margin-left: 0; } } /* If "js" class is on , that means JS is available. Hide the default data view from visual users but keep it accessible for screen readers. */ .defaultData { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @media (max-width: 1199px) { .tabletHide { display: none; } /* bring back the accessibly hidden data */ .tabletShow { position: relative; width: auto; height: auto; padding: 0; margin: 0; overflow: auto; clip: none; border: 0; } } @media (max-width: 767px) { .mobileHide { display: none; } /* bring back the accessibly hidden data */ .mobileShow { position: relative; width: auto; height: auto; padding: 0; margin: 0; overflow: auto; clip: none; border: 0; } } @media (max-width: 479px) { .tinyHide { display: none; } /* bring back the accessibly hidden data */ .tinyShow { position: relative; width: auto; height: auto; padding: 0; margin: 0; overflow: auto; clip: none; border: 0; } } /************** Common Fact Sheet *****************/ /* Mmm Pie Charts in At a Glance */ .pieContainer { margin-bottom: 30px; float: left; width: 50%; } @media (max-width: 649px) { .pieContainer { float: none; width: 80%; margin-left: auto; margin-right: auto; } } @media (max-width: 500px) { .pieContainer { width: 100%; } } .pieContainer ul { list-style: none; margin: 0 auto; width: 70%; padding-left: 0; } .pieContainer ul li * { float: left; display: block;} .pieContainer ul li div { width: 20px!important; height: 20px; margin-right: 10px; border-radius: 50px; } .pieContainer ul li span { width: calc(100% - 30px); } .nvd3.nv-pie path { fill-opacity: 1; } /* White bold font for pie labels on new cases/deaths pie charts */ #new_cases_pie .nv-label text, #new_deaths_pie .nv-label text { fill:#FFF !important; font-weight: bold; } .nvd3.nv-pie path { fill-opacity: 1; } .nvd3.nv-multiBarHorizontalChart .nv-multibarHorizontal g { fill-opacity: 1; } /*White bold font for pie labels on new cases/deaths pie charts*/ #new_cases_pie .nv-label text, #new_deaths_pie .nv-label text { fill:#FFF !important; font-weight: bold; font-size: 1.1em; } /* Eagle Plots */ .eaglePlotContainer { float: left; width: 38%; } .eaglePlotContainer:last-child { width: 62%; } .eagle-plot-right { float: right; } /*Font size for Eagle Plots*/ .eagle-chart-title { font-size: 1.1em!important; font-weight:bold!important; } .eagle-plot-bar g text, .apc-bar g text { font-size: .9em!important; font-weight:normal!important; } .counts-horiz-bar .nv-multibarHorizontal .nv-groups text { font-size: 1em!important; font-weight:normal!important; } /* Line Compare Legends */ .nvd3-wide-graph-legend ul { list-style: none; margin: 25px 0 0 0; padding: 10px 10px 5px 10px; font-size: 15px; background: #f6f6f6; border: 1px solid #ccc; } .nvd3-wide-graph-legend ul li div { width: 20px !important; float: left; margin-right: 10px; } @media (max-width: 767px) { .nvd3-wide-graph-legend ul { margin-top: .25rem; } .nvd3-wide-graph-legend li { display: inline-block; padding: 0 5%; width: 50%; vertical-align: middle; } } @media (max-width: 500px) { .nvd3-wide-graph-legend li { display: block; padding: 0 5%; width: 100%; text-align: left; } } /* Custom Legends */ .legend-inline ul { text-align: center; font-size: 14px; list-style: none; margin: 1em 0 2em; padding: 0; vertical-align: middle; } .legend-inline li { display: inline-block; padding: 0; margin: 0 1em; } .legend-inline li div { display: inline; margin-right: 5px; } .legend-inline li svg { vertical-align: top; } /** Survival Bars (Follicular)**/ .stackedBar { padding: 0; border-bottom: 1px solid #dcdcdc; } .stackedBar h5 { padding: 5px 15px; margin: 0; background: #ebebeb; border-bottom: 1px solid #dcdcdc; } .stackedBar ul { list-style: none; margin: 0; padding: 0; } .stackedBar li { background: #fff; padding: 5px 15px; margin: 0; } .stackedBar li * { vertical-align: middle; } @media (max-width: 1199px) { .stackedBar li { border-bottom: 1px solid #dcdcdc; } .stackedBar li:last-child { border-bottom: none; } } /** Survival Bars (DLBCL) **/ /* temporary padding fix while NCI reviews */ .stackPadding { padding-top: .5em; padding-bottom: .5em; } /* Data Table Styling (tabs and sorting */ .dataTable th { padding: .3em; } .dataTable tbody tr:nth-child(odd) td { background-color: #EEF3F7; } /* Inline SVG Responsive Hack/Fix/Method */ .svg-wrap { display: inline-block; position: relative; width: 100%; vertical-align: middle; overflow: hidden; } .svg-wrap svg { display: inline-block; position: absolute; top: 0; left: 0; } .svg-font text { font-size: 1em; } /* The height/width ratio all depends on the padding value, these are unique per graph */ .common-compare { padding-bottom: 53.84%; } .common-pie { padding-bottom: 100%; } .common-glance1 { padding-bottom: 41.25%; } .common-glance2 { padding-bottom: 30%; } .common-trends { padding-bottom: 110%; } .common-other { padding-bottom: 46%; } .common-death { padding-bottom: 53.33%; } button[class^="showData-btn-"] { display: none; } /* only show the button if there is JS */ .js button[class^="showData-btn-"] { display: block; width: 100%; color: #0065A8!important; text-align: left; font-size: 15px; padding: 5px 5px 5px 42px; margin: 0 auto; background: #f6f6f6 url("/statfacts/html/images/icn-datatable.png") 13px 5px no-repeat; border: 1px solid #ccc; border-radius: 0; } .js .statWrap button[class^="showData-btn-"] { background-color: #fff; border-color: #dedede; } /*@media (max-width: 767px) { .js button[class^="showData-btn-"] { width: 200px; background-position: 38px 5px; margin-top: -1px; text-align: center; } }*/ [id^="showData"] .modal-body { max-height: 400px; overflow-y: auto; } .graph_shared_footnotes { margin-bottom: 30px; text-align: left; } .graph_glance_footnotes { margin-bottom: 30px; text-align: center; } .graph_footnote { text-align: left; } /* Defaults for all Cancers */ .default-new { padding-bottom: 68.75%; } .default-glance { padding-bottom: 37.27%; } .default-pie { padding-bottom: 100%; } .default-survival { padding-bottom: 62.5%; } .default-bar { padding-bottom: 12%; } /* Disparities.html Eagles */ .default-eagle { padding-bottom: 34%; } /* Breast Subtypes Inline Legends */ .inline-legend { list-style: none; margin: 20px 0 0 0; padding: 0; text-align: center; } .inline-legend li { display: inline-block; margin-right: 10px; } .inline-legend li img { margin: 0 3px -1px 0; vertical-align: initial; } .counts-horiz-bar .nv-x.nv-axis.nvd3-svg .nvd3.nv-wrap.nv-axis .tick.zero line, .apc-bar .nv-x.nv-axis.nvd3-svg .nvd3.nv-wrap.nv-axis .tick.zero text:not(.apc_bar_chart_label), .apc-bar .nv-x.nv-axis.nvd3-svg .nvd3.nv-wrap.nv-axis .tick.zero line, .eagle-plot-bar .nv-x.nv-axis.nvd3-svg .nvd3.nv-wrap.nv-axis .tick.zero line, .apc-bar .nv-y.nv-axis.nvd3-svg .nvd3.nv-wrap.nv-axis .tick:not(.zero) line{ display: none; } .apc_bar_chart_label { font-weight: normal !important; } .graph_shared_axis_label { clear: both; text-align: center; } .chart_title, .bar_chart_title, .graph_shared_axis_label { text-align: center; font-size: 1em; font-weight: bold; color: #333; margin-bottom: .5em; } .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { fill-opacity: 1; stroke-opacity: 0; } .dashed { stroke-dasharray: 5, 5; } .nvd3.nv-scatter .nv-groups .nv-point.hover, .nvd3 .nv-groups .nv-point.hover { stroke-width: 0px; fill-opacity: 1 !important; stroke-opacity: 0 !important; } .thick-lines g[class*="nv-series-"]{ stroke-width: 5px !important; } /*Override tooltip background to remove transparency*/ .nvtooltip { background: rgba(255,255,255, 1.0); } .nv-bar .discreteBar { fill-opacity: 1 !important; } .nv-multiBarWithLegend .nv-bar { fill-opacity: 1 !important; } .nv-multiBarWithLegend text { font-size: 1em; } /* adjust line chart line thickness */ .nvd3 g.nv-groups path.nv-line { stroke-width: 4px !important; } /* remove tick grid lines parallel to y-axis */ .nv-x .tick line { display: none; } /* don't display rows corresponding to modeled data */ .trend-row { display: none !important; } /* Tooltip styles to overwrite the table offsetting in the tooltip */ .nvtooltip table td.percent { color: black; } /* .nvtooltip table { margin: 0px !important; padding: 0px !important; } .nvtooltip table thead tr td { padding-left: 1% !important; } .nvtooltip table td.value { text-align: center !important; padding-left: 2% !important; } .nvtooltip table td.percent { text-align: center !important; padding-left: 2% !important; color: black; } .nvtooltip table td.key { padding-left: 1% !important; } .nvtooltip table td div { top: 8% !important; margin-left: 36% !important; } */