#durability-infographic {
    font-size: 1rem;
    background-color: #ffffff;
}

/* Enable scrolling in fullscreen mode */
#durability-infographic:-webkit-full-screen {
    overflow: auto;
    position: fixed;
    top:0;
}
#durability-infographic:-moz-full-screen {
    overflow: auto;
    position: fixed;
    top:0;
}
#durability-infographic:-ms-fullscreen {
    overflow: auto;
    position: fixed;
    top:0;
}
#durability-infographic:fullscreen {
    overflow: auto;
    position: fixed;
    top:0;
}

.icon-bar{
    float: right;
    padding-right: 5px;
}

.fa-cbs {
    font-size: 20px!important;
    color: #271d6c;
    cursor: pointer;

    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dashboard-header {
    background-color: #d3d3d3;
    border: 1px solid #a9a9a9;
}

.dashboard-title {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}

.dashboard-subtitle {
    text-align: center;
}

.theme-title {
    text-align: center;
    font-weight: bold;
}

.centered-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pie-details {
    border-left: 1px solid #a9a9a9;
    border-right: 1px solid #a9a9a9;
}

.pie-details {
    overflow: hidden;
}

.theme-summary {
    display: inline-block;
    width: 20rem;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s ease-in;
}
.theme-row {
    border-bottom: 1px solid #a9a9a9;
}
.theme-rows {
    padding-bottom: 15px;
}
.theme-summary-visible .theme-summary,
.theme-rows > .theme-row:hover .theme-summary {
    visibility: visible;
    opacity: 1;
}

.theme-rows > .theme-row:nth-child(2n+1) {
    background-color: #f6f6f6;
    transition:background-color .2s ease-in;
}
.theme-rows > .theme-row:hover:not(.theme-summary-visible) {
    background-color: #dbf7fa;
    cursor: pointer;
}

.theme-details-row {
    opacity: 0;
    height: 0;
    visibility: hidden;
    align-items: stretch; /* Stretch columns to full height */

    /*visibility: hidden; !* Initial state *!*/
}

.details-center-col{
    border-bottom: 1px solid #a9a9a9;
}
.details-left-col, .details-right-col {
    border-bottom: 1px solid #a9a9a9;
    border-left: 1px solid #a9a9a9;
    border-right: 1px solid #a9a9a9;
}
.details-left-col, .details-center-col, .details-right-col {
    padding: 3px 0 3px 0;
}

.details-chart, .bar-chart {
    padding: 1rem;
}

.pie-chart {
    position: inherit;
    display: inline-block;
    left: 9rem;
    transition: left .4s;
}
.theme-summary-visible .pie-chart,
.theme-rows .theme-row:hover .pie-chart {
    left: 0;
}

.cbs-tooltip + .tooltip.top > .tooltip-arrow,
.cbs-tooltip + .tooltip.bottom > .tooltip-arrow {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.cbs-tooltip + .tooltip.left > .tooltip-arrow,
.cbs-tooltip + .tooltip.right > .tooltip-arrow{
    border-left-color: #ffffff;
    border-right-color: #ffffff;
}
.cbs-tooltip + .tooltip > .tooltip-inner {
    background-color: #ffffff;
    color: #000;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.4);
    -moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.4);
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.4);
}

.exclamationIcon {
    position: absolute;
    right: 2rem;
}

.highcharts-yaxis-grid .highcharts-grid-line {
    stroke-width: 1px;
    opacity: .4;
}

.subtheme-list {
    padding: 9px 0px 9px 0px;
}

.subtheme-title {
    padding: 5px 7px 5px 10px;
    font-weight: bold;
    text-align: left;
    background-color: #F0F0F0;
}

.indicator-title {
    text-align: center;
}
.selected-indicator-row, .indicator-row:hover {
    background-color: #dbf7fa;
    cursor: pointer;
}
.indicator-row {
    margin-left: 0;
    margin-right: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.indicator-info {
    color: #04617a;
    padding-left: 3px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ;
}
.selected-indicator-row .indicator-info {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.8s ;
}
.indicator-info + .tooltip > .tooltip-inner {
    max-width: 350px;
    width: 350px;
}
.theme-title + .tooltip > .tooltip-inner {
    max-width: 400px;
    width: 400px;
}

.details-title {
    font-size: 1.2rem;
    font-weight: bold;
}
.details-title, .details-subtitle {
    text-align: center;
    background-color: #d3d3d3;
    line-height: 2rem;
}
.trend-icon img, .rank-icon img {
    max-width: none;
    margin: auto;
    position: absolute;
    top: 3px; left: 0; right: 0;
}

#backButton {
    visibility: hidden;
}

.chart-title, .chart-title {
    text-align: center;
    font-weight: bold;
    padding-bottom: 1rem;
}

.trend-chart-axis-title {
    padding-left: 12px;
}

.rank-chart-axis-title {
    text-align: center;
}

.trend-source {
    padding-left: 10px;
    padding-bottom: 10px;
}
.industries-link {
    padding-left: 10px;
}

.rank-source {
    text-align: right;
    padding-right: 10px;
}

.statline-link-icon {
    color: #04617a;
    padding-left: 3px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.legend-item > .square {
    min-width: 10px;
    min-height: 10px;
    margin-right: 3px;
}
.legend-item > .line {
    min-width: 10px;
    min-height: 2px;
    margin-right: 3px;
}
.legend-item > .legend-label {
    padding-left: 3px;
    padding-top: 3px;
    font-size: 0.9rem;
}
.not-decoupled {
    background-color: #F1948A;
}
.relative-decoupled {
    background-color: #F9E79F;
}
.absolute-decoupled {
    background-color: #AED581;
}

#backButton{
    padding-left: 5px;
}
#last-updated-text{
    padding-left: 25px;
}

.explanation-area {
    background-color: #F0F0F0;
    padding: 6px 6px 6px 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.transitionToCollapsed {
    height: 0;
    opacity: 0;
    transition: opacity 0.5s, height 1s;
}

.fadeIn {
    height: auto;
    visibility: visible;
    opacity: 1;
    transition: 1s;
}

.notransition {
    transition: none !important;
}

.modal {
    text-align: center;
    padding: 0!important;
}

.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.modal-title {
    padding-top: 0.5rem;
}