:root{
    --stone-10: #f8f7f4;
    --stone-30: #e9e6db;
    --steel-10: #E0E0E5;
    --steel-20: #C1C1CB;
    --steel-30: #A1A3B1;
    --steel-50: #63657D;
    --steel-70: #0D102B;
    --top50: #FF5100;
}

.no-scroll .ri-full-width-container {
    position: absolute;
    top: 0;
}



@media screen and (min-width:768px) {
    .no-scroll{
        overflow: hidden;
        height: 100%;
    }
    .no-scroll .country-details, .no-scroll .view-compare{
        position: fixed;
    }
}

@media screen and (max-width:767px) {
    .no-scroll .primary-nav, .no-scroll .footer {
        display: none;
    }
}

.floodmap table.dataTable, .floodmap table.dataTable th, .floodmap table.dataTable td {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
.view-data-explanation{
    margin-top: 16px;
    margin-bottom: 16px;
}

.floodmap {
    font-size: 16px;
    font-weight: 400;

    width: 100%; 
    color: var(--steel-70);
    fill: var(--steel-70);
    line-height: 1.25; 
    zoom: 1;
}

.floodmap a {
    color: var(--steel-70);
    text-decoration: none;
    cursor: pointer;
}


.floodmap ul{
    padding: 0;
    margin: 0;
}

h1.RIX{
    margin: 0;
    padding: 5px 0;
    line-height: 1;
    color: white;
    font-family: var(--font-display);
    font-size: 1.7em;
    text-transform: capitalize;
    font-weight: 500; 
}
.tagline{
    font-size: 1em;
    color: white;
    margin-right: 50px;
}
.floodmap .main-nav{
    margin-top: 20px;
}
.floodmap .main-nav div{
    height: 25px;
    display: inline-block;
    margin-right: 10px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
}
.floodmap .main-nav div.hover{
    border-bottom: 2px solid #FF5100;
}
.floodmap .main-nav a{
    font-weight: 500;
}
.floodmap .main-nav i{
    margin-left: 10px;
}
@media (min-device-width: 768px) and (min-width: 768px){
    h1.RIX{
        font-size: 2.8em ;
        padding: 0;
        color: var(--steel-70);
    }
    .tagline{
        font-size: 0.8em;
        color: var(--steel-70);
    }
}
@media (min-device-width: 992px) and (min-width: 992px) {
    h1.RIX {
        font-size: 4em ;
    }
    .tagline{
        font-size: 1em;
    }
}
@media (min-device-width: 1200px) and (min-width: 1200px) {
    h1.RIX {
        font-size: 5.6em ; 
    } 
}

.floodmap li{
    list-style-type: none;
}

.floodmap button{
    
    font-weight: 400;
    background: var(--steel-70);
    border: solid 2px var(--steel-70);
    border: 0;
    outline: 0;
    color: white;
    font-size: 1em;
    cursor: pointer;
    padding: 8px;
}

.floodmap button:hover{
    background: white;
    color: var(--steel-70);
    opacity: .9;
    border: solid 2px var(--steel-70);
    
}
 
.ri-full-width-container{
    display: none;
    position: relative;
    width: 100%;
    min-height: 100%;
    background-color: white;
    overflow: hidden;
}
@media (max-device-width: 768px) and (max-width: 768px){
    .ri-full-width-container{    
        min-height: 100vh;    
    }
}

.ri-limited-width-container{
    /* position: fixed; */
    width: 100%;
    margin: auto;
    max-width: 1170px;
    pointer-events:none;
    z-index: 0;

    color: var(--steel-70);
    fill: var(--steel-70);
    line-height: 1.25;
}
.ri-myrisk .ri-limited-width-container{
    position: static;
    max-width: 960px;
    pointer-events: none;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .ri-limited-width-container{
        position: relative;
        width: 85%;
    }
    .ri-limited-width-container.mobile{
        top: 0px;
    }
}

.div-toggle{
    float: right;
    cursor: pointer;
    pointer-events: all;
}
.div-toggle i{
    margin-top: -10px;
    position: relative;
    font-size: 1em;
}

.floodmap .right{
    text-align: right;
}
.floodmap .center{
    text-align: center;
}

.key-box{
    position: relative;
    width: 20px !important;
    height: 20px;
    border: 1px solid white;
    margin-bottom: 1px;
}

.key-label{
    position: relative;
    text-align: right;
    font-size: .6em;
    line-height: 10px;
    margin-bottom: 1px;
    color: var(--steel-50);
}
.white-cover{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(255,255,255,.8);
    display: none;
    z-index: 3999;
}

/***** MAP *****/
#map{
    position: absolute;
    display: none;
}
@media (min-device-width: 768px) and (min-width: 768px){
    #map{
        display: inline;
    } 
}
/***** MAP *****/



/****** HEADER ******/
.ri-header{
    position: relative;
    padding: 10px;
    background-color: var(--steel-70);
    z-index: 899;
    pointer-events:all;
}
.ri-header button, .view-data-button{
    border: solid 2px var(--steel-70);
    background: var(--steel-70);
    color: white;
}
.ri-header button:hover, .view-data-button:hover{
    background: white;
    color: var(--steel-70);
    opacity: 1;
}

@media (min-device-width: 768px) and (min-width: 768px){
    .ri-header{
        padding: 10px;
        margin-top: 20px;
        background-color: var(--stone-10);
        background-color: rgba(242,242,242,.65);
    } 
}
@media (min-device-width: 992px) and (min-width: 992px) {
    .ri-header{
        margin-top: 40px;
        z-index: 0;
    }
}

.ri-header .ri-menu{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 30px;
    width: 30px;
    height: 30px;
    font-size: 2em;
}
.ri-header .ri-hamburger{
    position: absolute;
    background: white;
    color: var(--steel-70);
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 4px;
    font-size: .6em;
    cursor: pointer;
    box-sizing: border-box;
}
.ri-hamburger-content{
    /*display: none;*/
    background: white;
    width: 220px;
    padding: 5px;
    top: 67px;
    font-size: 1em;
    color: var(--steel-70);
    border: solid 1px var(--steel-70);
    right: 29px;
    position: absolute;
    display: none;
    line-height: 0.8em;
    z-index: 3000;
}
.ri-hamburger-content div{
    padding: 10px;
}
.ri-hamburger-content div:hover{
    color: var(--steel-30);
    cursor: pointer;
}
@media (min-screen-width: 768px){
    .ri-header .ri-menu{
        right: 20px;
        width: 30px;
        height: 30px;
        font-size: .9em;
    }
    .ri-header .ri-hamburger{
        width: 30px;
        height: 30px;
        padding: 5px;
    }
    .ri-hamburger-content{
        width: 200px;
        font-size: 1em;
        top: 30px;
    }
    .ri-hamburger-content div{
        padding: 5px;
    }
}
@media (min-device-width: 768px) and (min-width: 768px) {
    .ri-header .ri-menu{
        width: auto;
        height: auto;
    }
    .ri-header .ri-hamburger{
        display: none;
    }
}
.ri-header button, .view-data-button{
    display: none;
    padding: 8px;
    margin: 5px 0;
}
@media (min-device-width: 768px) and (min-width: 768px) {
    .ri-header button, .view-data-button{
        display: inline-block;
        width: 100%;
    }
}
/***** HEADER *****/


/***** CONTROLS *****/

.controls{
    display: none;
    pointer-events:all;
}



.selectize-input{
    border-radius: 0 !important;
}
.selectize-input { 
    border: none;
    box-shadow: none;
    border-top: 1px solid var(--steel-30);
    border-bottom: 1px solid var(--steel-30);
    margin-top: 2px;
    padding-left: 10px;
}
.selectize-input > input{
    font-size: 1.2em; 
    height: 25px;
    line-height: 27px;
    width: 300px !important;
}
.selectize-dropdown-content{
    font-size: 1em; 
    height: 500px;
    max-height: none;
    line-height: 18px;
    background-color: #ffffff !important;
}
.selectize-control .item {
    font-size: 1em;
    /* height: 100px;
    line-height: 102px; */
}
@media (min-device-width: 992px) {
    .selectize-input { 
        /*border: none;*/
        margin-top: 0;
    }
}
.floodmap input::-webkit-input-placeholder {
    /*padding-top: 4px;*/
    color: var(--steel-50);
}
.floodmap input::-moz-placeholder,
.floodmap input:-ms-input-placeholder,
.floodmap input:-moz-placeholder {
    color: var(--steel-50);
}
@media (min-device-width: 768px) {
    .floodmap input::-webkit-input-placeholder {
        padding-top: 0;
    }
}

.inline-country-selector{
    z-index: 1000;
    display: block;
    pointer-events:all;
    margin-bottom: -8px;
}
.optgroup-header{
    color: var(--steel-50) !important;
    font-weight: bold;
}
@media (min-device-width: 768px){
    .selectize-input > input {
        font-size: 1.2em; 
        height: 50px;
        line-height: 52px;
        width: 300px !important;
    }    
    .selectize-control .item {
        font-size: 1.2em;
        height: 49px;
        line-height: 52px;
    }
    .selectize-dropdown-content{
        font-size: 1.3em; 
        height: 100%;
        max-height: 300px;
        line-height: 20px;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-drop-desktop-tablet{
        margin-bottom: 2px;
        /*display: none;*/
    }
    .inline-country-selector{
        position: relative;
        display: none !important;
    }
    .controls{
        display: block;
        margin-top: 10px;
        position: absolute;
        right: 0;
    }
    #control-select-country{
        display: block;
    }
    .compare-box{
        display: none;
        /* width: 250px !important; */
        position: relative;
        top: 3px;
    }
    .compare-box div{
        cursor: pointer;
    }
    .compare-box i{
        font-size: 1.2em;
    }
    .compare-country:last-of-type{
        margin-bottom: 10px;
    }
    .compare-box button{
        width: 100%;
        cursor: pointer;
    }
    .compare-box button:disabled{
        cursor: not-allowed;
        opacity: .3;
    }
    
    .selectize-input, .selectize-dropdown{
        width: 200px;
        margin-right: 2px;
    }
    .selectize-input {
        border-radius: 0;
        border: 1px solid var(--steel-70);
        box-shadow: inherit;
        width: 290px !important;
    }
    .selectize-input > input {
        font-size: 1em; 
        height: 50px;
        line-height: 52px;
        width: 280px !important;
    }
    .selectize-control.single .selectize-input:after{
        border-width: 8px 8px 0 8px;
    }
    .selectize-control.single .selectize-input.dropdown-active:after {
        border-width: 0 8px 8px 8px;
    }
}
@media (min-device-width: 992px) and (min-width: 992px){
    .controls{
        width: 300px;
    }
    .selectize-input, .selectize-dropdown{
        width: 300px;
    }
    .selectize-input {
        width: 300px !important;
        border: 1px solid var(--steel-30);
    }
    .selectize-input > input {
        width: 300px !important;
    }
}

@media (min-device-width: 768px) and (min-width: 768px){
    .selectize-input, .selectize-dropdown{
        width: 300px;
    }
    .selectize-control .item {
        font-size: 1.4em;
        height: 49px;
        line-height: 52px;
    }
    .selectize-input > input {
        font-size: 1em; 
        height: 49px;
        line-height: 52px;
        width: 300px !important;
    }
    .selectize-input.item {
        width: 300px !important;
    }
}

.IESelect{
    font-size: .5em;
}

/***** CONTROLS *****/


/***** SECONDARY CONTROLS *****/
.secondary-controls{
    display: none;
    pointer-events:all;
    line-height: 1;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .secondary-controls{
        display: block;
        position: absolute;
        font-size: 2.5em;
        cursor: pointer;
    }
    .secondary-controls-right{
        right: 10px;
        top: 20px;
    }

    .secondary-controls-right-question {
        right: 60px;
        top: 20px;
    }
    .secondary-controls-left{
        left: 20px;
        top: 35px;
    }
    .secondary-controls div:hover{
        color: var(--steel-70);
    }
}
@media (min-device-width: 992px) and (min-width: 992px){
    .secondary-controls{
        font-size: 3em;
    }
    .secondary-controls-left{
        top: 60px;
        left: 20px;
    }
    .secondary-controls-right{
        top: 42px;
        right: 20px;
    }
    .secondary-controls-right-question {
        top: 42px;
        right: 60px;
    }
}
@media (min-device-width: 1200px) and (min-width: 1200px){
    .secondary-controls{
        font-size: 3.5em;
    }
    .secondary-controls-left{
        left: 25px;
    }
    .secondary-controls-right{
        right: 25px;
    }
    .secondary-controls-right-question {
        right: 65px;
    }
}
/***** SECONDARY CONTROLS *****/

/***** MAIN INFO BOX *****/
.info-box{
    display: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 10px;
    background-color: white;
    width: 100%;
    /*float: right;*/
    box-sizing: border-box;
    /*margin-right: 32px;*/
}
.info-box i{
    cursor: pointer;
    margin-right: 10px;
    border-radius: 50%;
}
.info-box .country-name{
    font-weight: 700;
}
.info-box .country-name.top50{
    background: none;
    color: var(--top50);
}


.info-box .country, .info-box .separator{
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.info-box .info-i{
    float: left;
    font-size: 1.1em;
}
.info-box .country,.info-box .region-name{
    text-transform: capitalize;
    cursor: pointer;
}
.info-box .add-to-compare{
    margin-top: 10px;
    text-transform: none;
    font-size: .8em;
    cursor: pointer;
    position: absolute;
    bottom: 15px;
    display: inline-block;
    vertical-align: bottom;
}
.info-box .add-to-compare .info-i{
    font-size: 1.3em;
    margin-left: 5px;
}
.info-box .add-to-compare .label{
    max-width: 150px;
    line-height: 1em;
}
.info-box.country-info-box .country{
    font-size: 1em;
    width: 225px;
}
.info-box .scores .rank, .info-box .scores .score{
    color: var(--steel-70);
    cursor: pointer;
    font-weight:500;
    font-size: 1.5em;
}
.info-box .scores .score{
    font-weight: 400;
    font-size: 1.5em;
}
.info-box .scores{
    margin-top: 5px;
    font-size: 1em;
    display: inline-block;
}
.info-box .scores div{
    display: inline-block;
    margin-right: 20px;
}
.info-box .scores .label{
    font-size: .5em;
 }
.country-info-box .separator{
    background-color: var(--stone-10);
    width: 2px;
    margin: 0 10px;
    height: 100px;
}
.score_bar{
    position: relative;
    left: 11%;
    display: inline-flex;
    background-color: var(--stone-10);
    border-radius: 5px;
    /* box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1); */
}
@media (min-device-width: 768px) and (min-width: 768px){
    .info-box{
        margin-bottom: 2px;
        border: 1px solid var(--steel-30);
        width: 290px;
    }
    .info-box.country-info-box .country{
        width: 100%;
        top: 0;
    }
    .region-info-box{    
        max-height: 350px;
        overflow: auto;
    }
    .info-box .scores{
        margin-top: 5px;
    }
    .info-box .info-i{
        font-size: 1.5em;
    }
    .info-box .add-to-compare{
        bottom: 10px;
    }
    .info-box .add-to-compare .info-i{
        font-size: 1.7em;
    }
}
@media (min-device-width: 992px) and (min-width: 992px){
    .info-box{
        width: 300px;
    }
    .info-box.country-info-box .country{
        width: 100%;
        font-size: 1.3em;
    }
    .info-box .info-i{
        font-size: 1.1em;
    }
    .info-box .add-to-compare .info-i{
        font-size: 1.3em;
        max-width: 140px;
    }
    .info-box .scores .rank{
        font-size: 1.5em;
    }
    .info-box .scores .score{
        font-size: 0.8em;
    }
    .info-box .add-to-compare .label{
        width: 150px;
        text-align: center;
        margin-bottom: 5px;
    }
}

/***** MAIN INFO BOX *****/


/***** REGION/ALL COUNTRIES BOX ***/
.all-countries-list{
    overflow: auto;
    padding-bottom: 40px;
    /* position: fixed; */
}
.all-countries-list div.scores-list{
    padding: 10px 0;
    position: relative;
}
.all-countries-list div.scores-list div.clickable-country div,.all-countries-list-region div.scores-list-region div.clickable-country div{
    position: absolute;
}
.all-countries-list-region div.scores-list-region{
    margin-top: 10px;
}

.all-countries-list div.all-countries-list-content,.all-countries-region-list div.all-countries-list-region-content{
    padding: 10px;
}
.info-box.region-info-box .region-name, .all-countries-list .region-name{
    font-size: 1.4em;
}
@media (min-device-width: 768px){
    .info-box.region-info-box .region-name, .all-countries-list-region .region-name{
        margin-top: 5px;
        font-size: 1.8em;
    }
}
.info-box .region-info-box div.country, .all-countries-list div.country, .all-countries-list-region span.score{
    font-size: 1em;
    line-height: .9em;
}
@media (min-device-width: 768px){
    .info-box .region-info-box div.country, .region-info-box div.all-countries-list-region div.all-countries-list-region-content div.scores-list-region div.clickable-country, .all-countries-list span.score{
        font-size: 0.8em;
        line-height: 1.3em;
    }
}

.all-countries-list span.score,.all-countries-list div.country,.all-countries-list-region span.score,.all-countries-list-region div.country{
    top: 50%;
    transform: translateY(-50%);
}
.all-countries-list span.score,.all-countries-list div.country{
    margin-left: 10px;
}
.all-countries-list span.score,.all-countries-list span.rank{
    width: 30px;
    font-size: 1em;
}
@media (min-device-width: 768px){
    
}

.region-info-box i, .all-countries-list i{
    margin-left: 10px;
    border: 2px solid var(--steel-70);
    font-size: .6em;
    padding: 2px;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 50%;
    position: relative;
    top: -1px;
}
@media (min-device-width: 768px){
    .region-info-box i, .all-countries-list i{
        font-size: .7em;
        margin-left: 3px;
        top: 0;
    }
}
.region-info-box i.active, .all-countries-list i.active{
    background-color: var(--steel-70);
    color: white;
}
.region-info-box .separator, .all-countries-list .separator{
    background-color: var(--stone-10);
    width: 100%;
    height: 2px;
    margin: 8px 0;
}
.region-info-box table, .all-countries-list table{
    width: 100%;
    padding: 0 10px;
}
@media (min-device-width: 768px){
    .region-info-box table, .all-countries-list table{
        padding: 0 10px;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .region-info-box table{
        padding: 0;
    }
}
.region-info-box table thead th, .all-countries-list table thead th{
    text-align: left;
    color: var(--steel-70);
    font-size: .8em;
    padding: 10px 0;
}
.all-countries-list-sort{
    display: inline;
    cursor: pointer;
}
.all-countries-list-sort.rankscore{
    text-align: right;
}
@media (min-device-width: 768px){
    .region-info-box table thead th, .all-countries-list table thead th{
        font-size: 1em;
        padding: 10px 0;
    }
}
.region-info-box table tbody td.country,.region-info-box table tbody td.score_bar, .all-countries-list table tbody td.country,.all-countries-list table tbody td.score_bar{
    width: 120px;
}
@media (min-device-width: 992px) and (min-width: 992px){
    .region-info-box table tbody td.country,.region-info-box table tbody td.score_bar, .all-countries-list table tbody td.country,.all-countries-list table tbody td.score_bar{
        width: 120px;
    }
}
.country-details-explore-back, .country-details-close, .view-compare-explore-back,.click-country-details{
    display: block;
    color: var(--steel-50);
    cursor: pointer;
    font-size: 1em;
    line-height: 1em;
    padding: 5px 0; 
    border-bottom: solid 1px var(--steel-30);
    text-transform: none;
    width: 100%;
}


@media (min-device-width: 768px){
    .country-details-explore-back{
        font-size: 1em;
        line-height: 20px;padding-bottom: 8px;
        border-bottom: solid 1px var(--steel-30);
    }
    .click-country-details{
        font-size: 0.6em;
    }
    .country-details-close{
        border: 0;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .all-countries-list{
        display: none !important;
    }
    .country-details-explore-back{
        display: none !important;
    }
}
.country-details-explore-back i{
    margin: 10px;
}
.region-info-box tr, .all-countries-list tr{
    background: none;
    cursor: pointer;
}
.region-info-box tbody tr:hover, .all-countries-list tbody tr:hover{
    background: var(--stone-10);
}
.region-info-box td.rank,.region-info-box td.score, .all-countries-list td.rank, .all-countries-list td.score{
    text-align: center;
}
.clickable-country{
    cursor: pointer;
    width: 100%;
    display: inline-block;
    position: relative;
    height: 30px;
}
/***** REGION/ALL COUNTRIES BOX ***/


/***** SWARM PLOT *****/
.swarm-plot{
    display: none;
    pointer-events:all;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .swarm-plot{
        width: 100%;
        position: fixed;
        max-width: 1170px;
        z-index: 1;
    }
    .swarm-plot.myrisk{
        position: relative;
        display: block;
    }
    .swarm-plot div{
        overflow: hidden;
    }
    .swarm-plot.primary{
        position: absolute;
        width: 100%;
        margin-bottom: 20px;
    }

    .swarm-plot .RIXrows div{
        display: inline-block;
        box-sizing: border-box;
    }
    .swarm-plot .RIXrows.above{
        margin-bottom: 2px;
        width: 100%;
        height: 38px;
    }
    .swarm-plot.myrisk .RIXrows.above{
        height: 28px;
    }
    .swarm-plot .RIXrows.above div.label{
        width: 100%;
        font-size: .8em;
        margin-top: 14px;
        position: absolute;
    }
    .swarm-plot.myrisk .RIXrows.above div.label{
        margin-top: 3px;
    }
    .swarm-plot.myrisk.benchmarking .RIXrows.above div.label{
        margin-top: -30px;
    }

    .swarm-plot .RIXrows.above div.right{
        width: 70%;
        margin-left: 30%;
        position: absolute;
    }

    .swarm-plot .RIXrows.below{
        width: 100%;
        height: 20px;
        margin-top: -7px;
    }
    .swarm-plot .RIXrows.below div{
        width: 33.3%;
        position: absolute;
        font-size: .8em;
    }
    .swarm-plot .RIXrows.below div.data-as-of{
        margin-left: 33.3%;
        text-align: center;
    }
    .swarm-plot .RIXrows.below div.right{
        margin-left: 66.6%;
    }

    .swarm-plot.primary .RIXrows.above div.right div{
        display: inline-block;
        padding-top: 10px;
    }

    .swarm-plot .dots{
        background-color: white;
        border-top: 1px solid var(--stone-10);
        border-bottom: 1px solid var(--stone-10);
        height: 100px;
        width: 100%;
        padding: 0;
        display: inline-block;
        margin-top: -8px;
    }
    .swarm-plot-factor-label{
        fill: var(--steel-70);
    }
    .swarm-dot{
        stroke: var(--steel-70);
        stroke-width: 1px;
        cursor: pointer;
    }
    .swarm-dot.active{
        stroke: var(--steel-70);
        stroke-width: 2px;
        fill: none;
    }
    .swarm-dot.active-center{
        fill: var(--steel-70);
    }
}
@media (min-device-width: 768px) and (min-width: 992px){
    .swarm-plot .RIXrows.above div.label{
        font-size: .8em;
    }
}
/***** SWARM PLOT *****/

/***** macro Viz *****/
.macroDriverLabel{
    font-size: 0.14em;
    fill: var(--steel-50);
    font-weight: 400;
    cursor: pointer;
}
.macroDriverLabel.macro{
    fill: var(--steel-30);
}
.macroDriverLabel.phys{
    fill: var(--alpha-steel-700);
}
.macroDriverLabel.phys.fade{
    fill: var(--steel-30);
}
.macroDriverLabel.top50{
    fill: var(--top50);
}
.macroTitleLabel{
    font-size: 0.18em;
    fill: var(--steel-50);
    font-weight: 500;
    text-transform: capitalize;
}
.arc.active{
    fill: var(--steel-30);
}
.arc.top50{
    cursor: pointer;
    fill: var(--top50);
}
.arc.click{
    cursor: pointer;
}
@media (min-device-width: 992px) and (min-width: 992px){
    .macroDriverLabel{
        font-size: 0.14em;
    }
    .macroTitleLabel{
        font-size: 0.18em;
    }
}
/***** macro Viz *****/


/***** physical Viz *****/
rect.phys{
    fill: var(--steel-50);
    cursor: pointer;
}
rect.phys.fade{
    fill: var(--steel-30);
}
circle.phys{
    fill: var(--steel-50);
    stroke: white;
    stroke-width: 0.3px;
    cursor: pointer;
}
circle.phys.fade{
    fill: var(--steel-30);
}
circle.phys.top50{
    fill: var(--top50);
}
circle.phys.top50.fade{
    fill: var(--steel-30);
}
line.phys{
    stroke: var(--steel-50);
    stroke-width: 0.1px;
}
line.phys.secondary{
    stroke: var(--steel-70);
    stroke-width: 0.1px;
}
.physTitleLabel{
    font-size: 0.16em;
    fill: var(--steel-50);
    font-weight: 500;
    text-transform: capitalize;
}
@media (min-device-width: 992px) and (min-width: 992px){
    .physTitleLabel{
        font-size: 0.18em;
    }
}
/***** physical Viz *****/


/***** trends viz *****/
.rect.trends{
    fill: var(--steel-30);
}
.rect.trends.currentYear{
    cursor: pointer;
    fill: var(--steel-30);
}
.rect.trends.top50{
    fill: var(--top50);
}

.trendsLabelYear{
    font-size: 0.18em;
    fill: var(--steel-50);
    font-weight: 300;
}
path.connector{
    fill:none;
    stroke: var(--steel-30);
    stroke-width: 0.2;
}
path.connector.active{
    stroke-width: 0.4;
}
path.connector.top50{
    stroke: var(--top50);
}
circle.connector{
    fill: var(--steel-30);
}
circle.connector.top50{
    fill: var(--top50);
}
text.trendsLabelCountry{
    font-size: 0.13em;
    fill: var(--steel-30);
    font-weight: 300;
    cursor: pointer;
}
text.trendsLabelCountry.active{
    font-size: 0.28em;
    font-weight: 500;
}
text.trendsLabelCountry.top50{
    fill: var(--top50);
}
.trendsTitleLabel{
    font-size: 0.16em;
    fill: var(--steel-50);
    font-weight: 500;
    text-transform: capitalize;
}
@media (min-device-width: 992px) and (min-width: 992px){
    .trendsTitleLabel{
        font-size: 0.18em;
    }
}
/***** trends viz *****/

/***** MAP *****/
#map{
    overflow: hidden;
}
.map-layer {
    fill: white;
}
.map-country-invisible{
    display: none;
}
/***** MAP *****/

/***** VIEW DATA *****/
.view-data{
    position: relative;
    min-height: 100px;
    z-index: 1;
    display: none;
    padding: 0 10px;
    font-size: 1em;
    box-sizing: border-box;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-data{
        padding: 20px;
        font-size: 1em;
    }
}
.view-data .close{
    display: none;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-data{
        position: absolute;
        top: 20px;
        background-color: white;
        -moz-box-shadow: 0 0 5px var(--stone-10);
        -webkit-box-shadow: 0 0 5px var(--stone-10);
        box-shadow: 0px 0px 5px var(--stone-10);
        border-top: none;
        z-index: 4000;
    }
    .view-data .close{
        display: block;
        position: absolute;
        top: -15px;
        right: -15px;
        font-size: 1em;
        cursor: pointer;
    }
    .view-data .close i.fa-circle-o{
        background: white;
        border-radius: 50%;
    }
}
.view-data-title{
    display: block;
    position: relative;
    margin-top: 2px;
    text-transform: capitalize;
    font-size: 1.5em;
    line-height: 30px;
}
@media (min-device-width: 768px){
    .view-data-title{
        font-size: 1.1em;
        line-height: 20px;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-data-title{
        font-size: 2em;
}
}

/* #view-data-table.dataTable{
    width: 100%;
} */

.view-data-table{
    height: 100%;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-data-table{
        height: 400px;
        overflow: auto;
    }
}
.view-data button{
    margin-bottom: 20px;
    font-size: 1em;
}

button.view-data-button{
border: solid 2px var(--steel-70);
}

button.compare-button{
border: solid 2px var(--steel-70);
}

.view-data-table td,.view-data-table th{padding:8px;border:0;background:0;text-align:left}
.view-data-table tbody td{vertical-align:top}
.view-data-table [class*=column]+[class*=column]:last-child{float:none}
.view-data-table tbody td,.view-data-table tfoot th{border-top:1px solid var(--stone-10)}
.view-data-table tbody tr:first-child td{border-top:0}
.view-data-table thead th{border-bottom:1px solid var(--stone-10)}
.view-data-table tfoot th,.view-data-table thead th{background-color:var(--stone-10);color:var(--steel-70);font:500 11px/22px arial,helvetica,sans-serif;vertical-align:middle}
.view-data-table .odd td{background-color:var(--stone-10)}
.view-data-table .even td{background-color:white}
.view-data-table .RIXrow-hover tr:hover td{background-color:var(--stone-10)}
.view-data-table img{margin:0;padding:0;border:0;max-width:none}
.view-data-table_wrapper{clear:both;margin-bottom:1em}
.view-data-table_wrapper .view-data-table{clear:both;margin:0!important}
.dataTables_length{float:left;white-space:nowrap}
.dataTables_filter{float:right;white-space:nowrap}
.dataTables_info{clear:both;float:left;margin:4px 0 0}
.dataTables_processing{display:none}.dataTables_scroll{clear:both}
.dataTables_scrollBody{-webkit-overflow-scrolling:touch}
.view-data-table_wrapper .sorting,.view-data-table_wrapper .sorting_asc,.view-data-table_wrapper .sorting_desc{padding-right:20px;cursor:pointer;outline:0}
.view-data-table_wrapper .sorting div,.view-data-table_wrapper .sorting_asc div,.view-data-table_wrapper .sorting_desc div{position:relative;margin:0!important;padding:0!important;float:none!important}
.view-data-table_wrapper .sorting:hover,.view-data-table_wrapper .sorting_asc,.view-data-table_wrapper .sorting_desc{background-color: var(--steel-70);color:var(--steel-70)}
.view-data-table_wrapper label input,.view-data-table_wrapper label select{display:inline;margin:2px;width:auto}
.view-data-table thead th{background-color:var(--stone-10)!important;line-height:1em}

.view-data-table{
    border-collapse:collapse;border-spacing:0;width:auto;margin-bottom:1em;border:0; margin-top: 20px; width: 100%;
    font-size: 1.5em;
}
.view-data-table thead th, .view-data-table td{
    font-size: .7em;
}
.view-data p{
    font-size: 1em;
    line-height: 1.5em;
}
@media (min-device-width: 768px){
    .view-data-table{
        font-size: 1em;
    }
    .view-data-table thead th, .view-data-table td{
        font-size: 1em;
    }
    .view-data p{
        font-size: 1em;
        line-height: 20px;
    }
}
table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting{
    background-image: none !important;
}
table.dataTable thead th, table.dataTable thead td{
    padding: 5px;
}
table.dataTable tbody td{
    padding: 2px;
}
@media (min-device-width: 768px){
    table.dataTable thead th, table.dataTable thead td{
        padding: 10px;
    }
    table.dataTable tbody td{
        padding: 10px;
    }
}
table.dataTable thead th.sorting:hover{
    color: var(--steel-70);
}
.dataTables_info{
    display: none;
}
.dataTables_wrapper{
    font-size: .5em;
}
@media (min-device-width: 768px){
    .dataTables_wrapper{
        font-size: 1em;
    }
}
/***** VIEW DATA *****/


/***** COMPARE *****/
.view-compare{
    position: relative;
    min-height: 100px;
    z-index: 1;
    display: none;
    overflow: auto;
}
.view-compare span.top50{
    background: none !important;
    color: var(--top50);
    font-weight: bold;
}
.view-compare div.rix-title{
    display: block;
    text-transform: capitalize;
    color: var(--steel-50);
}
.view-compare div.RIXrow.title{
    padding: 25px;
}
.view-compare div.RIXrow.content{
    padding: 25px;
    background-color: var(--stone-10);
    width: 100%;
    box-sizing: border-box;
}
.view-compare table{
    border-spacing: 0;
}
.view-compare div.trends{
    display: none;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-compare{
        position: absolute;
        top: 0;
        background-color: white;
        border-top: none;
        z-index: 2000;
        width: 100%;
        height: 100%;
    }
}
.view-compare .close{
    display: none;
}
.view-compare-title{
    text-transform: capitalize;
    color: var(--steel-70);
    font-size: 1.8em;
    font-weight: 500;
    line-height: 1.2em;
}
@media (min-device-width: 768px){
    .view-compare-title{
        font-size: 1.4em;
    }
}
@media (min-device-width: 992px){
    .view-compare-title{
        font-size: 2em;
    }
}
.view-compare .compare-btn{
    text-transform: capitalize;
}

.view-compare .compare-data{
    margin-top: 20px;
}
.view-compare .country-name{
    text-transform: capitalize;
    color: var(--steel-70);
    font-size: 0.7em;
    line-height: 1.2em;
    cursor: pointer;
}
.view-compare .country-name:hover{
    opacity: .8;
}
 
.view-compare td{
    width: 80px;
    /* height: 48px; */
    text-align: center;
    box-sizing: content-box !important;
    vertical-align: middle;
}
.view-compare td.compare-matrix-square{
    border: solid 1px white;
    background: var(--stone-10);
}
.view-compare td.compare-matrix-square div.score.top50{
    color: white;
}
td.compare-matrix-square.MC,td.compare-matrix-square.RQ{
    border: solid 1px var(--stone-10);
    background: none;
}
.view-compare .top50Label{
    top: -3px;
}
.view-compare td div{
    width: 80px;
    text-align: center;
    cursor: pointer;
	overflow: hidden;
    padding: 5px 0;
    color: var(--steel-70);
}
.view-compare td div.rank{
   position: relative;
}
.view-compare td div.rank.top50{
   color: white;
}
.view-compare .black{
    color: var(--steel-70);
}
.view-compare td.factor-label{
    width: 200px;
    text-align: right;
    padding-right: 10px;
}
.view-compare td.factor-label:hover{
    opacity: .8;
    cursor: pointer;
}
.view-compare .factor-label .fa{
    font-size: 1.5em;
}
.view-compare .driver-label{
    text-transform: capitalize;
    font-size: .8em;
    text-align: right;
    padding-right: 10px;
}

.view-compare .key{
    margin-left: 220px;
    margin-top: 20px;
}
.view-compare .key div{
    display: inline-block;
}
.key-rank-note{
    margin-left: 20px;
    width: 200px !important;
}
.view-compare .info-explainer{
    margin-left: 220px;
    margin-top: 20px;
}
/***** COMPARE *****/


/***** COUNTRY DETAILS *****/
.country-details{
    /* position: fixed; */
    /* min-height: 100px;
    z-index: 1;
    display: none;
    overflow: auto;
    height: 650px; */
    /* top: 192px; */
}
.country-details div.rix-title{
    display: block;
    text-transform: capitalize;
    color: var(--steel-50);
}
.country-details .close{
    display: none;
}
.country-details .add-to-compare{
    display: inline-block;
}
.country-details .add-to-compare .info-i{
    float: left;
    margin-right: 5px;
    font-size: 1.2em;
}
.country-details .add-to-compare .label{
    max-width: 120px;
}

.country-details .toggles{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    right: 15px;
    font-size: 0.6em;
}
.country-details .toggles div{
    margin-left: 5px;
}
.country-details .toggles div.toggle{
    margin-top: -3px;
    margin: auto;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-details .toggles{
        font-size: 0.4em;
    }
    .country-details{
        position: absolute;
        top: 0;
        height: 100%;
        background-color: white;
        box-shadow: 0 0 5px var(--stone-10);
        /* -webkit-box-shadow: 0 0 5px var(--stone-10); */
        border-top: none;
        z-index: 2000;
        overflow: auto;
    }
    .country-details .close{
        display: block;
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 1em;
        cursor: pointer;
        z-index: 5000;
    }
    .country-details .close i.fa-circle-o{
        background: white;
        border-radius: 50%;
    }

    .country-details .add-to-compare{
        margin-left: 20px;
        font-size: 1.2em !important;
        line-height: 1em;
        cursor: pointer;
        margin-top: 12px;
        right: 1px;
        position: absolute;
    }
    .country-details .add-to-compare .label{
        font-size: 1em !important;
    }
}

.country-details div{
    display: inline-block;
}

@media (min-width: 992px){
    .country-details .toggles{
        font-size: 0.7em;
    }
}
.country-details div.control-block div{
    display: block;
}

.drop-label{
    font-weight: bold;
}
.floodmap input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
    cursor: pointer;
}


.country-details div.RIXrow{
    position: relative;
    width: 100%;
    margin-left: 0;
    margin-top: 1px;
    display: block;
    box-sizing: border-box;
}
.country-details div.RIXrow.content{
    padding: 25px;
    background-color: var(--steel-20);
    width: 100%;
    min-height: 115px;
}
.country-details div.RIXrow.content.desktop{
    display: none;
}

.country-details div.RIXrow.content.mobile div.row{
    width: 100%;
    margin-left: 0px;
}
.country-details div.RIXrow.content div.scoreType{
    text-transform: capitalize;
    margin-top: 10px;
    font-weight: 500;
}


.country-details div.RIXrow.content .scores .rank, .country-details div.RIXrow.content .scores .score{
    color: var(--steel-70);
    font-weight: 500;
    font-size: 2.5em;
    line-height: 0.8em;
}
.country-details div.RIXrow.content.top50 .scores .rank, .country-details div.RIXrow.content.top50 .scores .score{
    color: white;
    /* FM Review Bold */
    font-weight: 500;
}
.country-details div.RIXrow.content .scores .score{
    font-weight: 100;
    font-size: 1em;
}
.country-details div.RIXrow.content .scores .label{
    font-size: 0.7em;
    text-transform: capitalize;
}

.country-details div.RIXrow.content.footer{
    background-color: white;
    font-size: 1em;
    color: var(--steel-50);
    padding: 20px;
    min-height: 0;
}
.country-details div.RIXrow.content.top50{
    background-color: var(--top50);
    color: white;
}
div.scoreTypeDescription{
    margin-bottom: 20px;
}
.country-details div.RIXrow.content.footer span.top50, .all-countries-list div.scoreTypeDescription span.top50{
    /* color: var(--top50); */
    background-color: white;
    font-weight: 500;
}
div.scoreTypeDescription div.title{
    font-weight: 500;
    text-transform: capitalize;
    /* margin-top: 10px; */
    font-size: 1.2em;
}
div.scoreTypeDescription div.description{
    color: var(--steel-50);
}
div.scoreTypeDescription div.description span.top50{
    color: var(--top50);
}
.country-details div.RIXrow.content.footer span.top50{
    color: var(--top50);
}
.country-details div.RIXrow.content div.contentLeft{
    width: 59%;
    vertical-align: top;
}
.country-details div.RIXrow.content div.contentLeft .scoreTypeDescription{
    font-size: 0.9em;
    padding-right: 10px;
}
.country-details div.RIXrow.content div.contentRight{
    width: 40%;
    vertical-align: top;
    margin-right: 0;
    position: absolute;
}
.country-details div.RIXrow.content div.contentRight div{
    float: right;
    margin-right: 20px;
    vertical-align: bottom;
    height: 100%;
}
.country-details div.RIXrow.desktopviz{
    width: 85%;
    display: none;
    min-height: 100%;
    vertical-align: top;
    padding-top: 30px;
}


.country-details .swarm-plot .RIXrows.above div.right div{
    margin-bottom: 0;
}

.country-details div.country{
    display: none;
    padding: 25px;
}

@media (min-device-width: 768px) and (min-width: 768px){
    .country-details div.RIXrow.content.footer{
        font-size: 0.7em;
        /* text-align: right; */
    }
    .country-details div.RIXrow.desktopviz{
        display: grid;
    }
    .country-details div.country{
        display: block;
    }
    .country-details div.RIXrow.content div.contentLeft .scoreTypeDescription{
        font-size: 1em;
    }
    .country-details div.RIXrow.content.desktop{
        display: block;
    }
    .country-details div.RIXrow.content.mobile{
        display: none;
    }
    .country-details div.RIXrow.content .scores .rank, .country-details div.RIXrow.content .scores .score{
        font-size: 2.5em;
    }
    .country-details div.RIXrow.content .scores .score{
        font-size: 1em;
    }
    .country-details div.RIXrow.content .scores .label{
        font-size: 0.8em;
    }
}
@media (min-device-width: 992px) and (min-width: 992px){
    .country-details div.RIXrow.content.footer{
        font-size: 1em;
    }
}
@media (min-device-width: 1280px) and (min-width: 1280px){
    .country-details div.RIXrow.content .scores .rank, .country-details div.RIXrow.content .scores .score{
        font-size: 3em;
        line-height: 0.8em;
    }
    .country-details div.RIXrow.content .scores .score{
        font-size: 1.1em;
    }    
}

.country-details .country-name{
    text-transform: capitalize;
    color: var(--steel-70);
    font-size: 1.8em;
    font-weight: 500;
    line-height: 1.2em;
    margin-bottom: 10px;
}
.country-details div.RIXrow.content.mobile.top50 .country-name{
    /*FM Review Bold*/
    color: white;
    font-weight: 500;
}
@media (min-device-width: 768px){
    .country-details .country-name{
        font-size: 1.4em;
        margin-bottom: 0;
    }
}
@media (min-device-width: 992px){
    .country-details .country-name{
        font-size: 2em;
    }
}

.country-details div.country-details-score{
    display: none;
    box-sizing: border-box;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-details div.country-details-score{
        width: 100%;
        float: left;
        text-transform: capitalize;
        display: block;
        height: 250px;
        padding: 20px;
        border-bottom: solid 2px white;
    }
}
.country-details .score div{
    line-height: 1;
}
.country-details .score{
    color: white;
    text-align: center;
}
.country-details .label{
    font-size: 1em;
    margin-right: 10px;
}
@media (min-device-width: 768px){
    .country-details .label{
        font-size: 1em;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-details .score{
        text-align: right;
        margin-top: 16px;
    }
    .country-details .label{
        font-size: .8em;
    }
}
@media (min-device-width: 768px) and (min-width: 992px){
    .country-details .label{
        font-size: .9em;
        width: 130px;
        text-align: center;
    }
    .country-details .label.climateToggle{
        width: auto;
    }
}
.country-details-score-mobile{
    text-transform: capitalize;
}
.country-details .score .label{
    color: var(--steel-70);
}
.country-details-score-mobile .country-name{
    width: 100%;
    margin-top: 5px;
    color: white;
}
.country-details .score-value,.country-details .rank-value{
    font-size: 2em;
    color: white;
}
@media (min-device-width: 768px){
    .country-details .score-value,.country-details .rank-value{
        font-size: 1.8em;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-details .score .label{
        color: var(--steel-70);
        font-size: .9em;
    }
    .country-details .score{
        position: relative;
        margin-top: 10px;
        width: 100%;
    }
    .country-details .score-value, .country-details .rank-value{
        margin: 0;
        color: var(--steel-70);
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-details .score .label{
        font-size: 1em;
        margin-right: 20px;
    }
    .country-details .score-value,.country-details .rank-value{
        font-size: 2.1em;
    }
}

#country-details-mobile-table{
    border: 0;
    padding: 0 15px 50px 0;
    margin: 0 20px 20px 20px;
}
#country-details-mobile-table div{
    cursor: pointer;
    width: 100%;
}
#country-details-mobile-table div.driver{
    width: 100%;
}
#country-details-mobile-table div.factor:not(:first-of-type){
    margin-top: 40px;
}
#country-details-mobile-table div.top50{
    width: 2%;
    background-color: white;
    text-align: right;
    margin-right: 4px;
    height: 30px;
}
#country-details-mobile-table div.factor-name{
    text-transform: capitalize;
    padding-right: 10px;
    font-size: 1.1em;
    margin-bottom: 10px;
    /* FM Review Bold */
    font-weight: 500;
}
#country-details-mobile-table div.driver-name{
    color: var(--steel-70);
    padding-left: 10px;
    font-size: 0.9em;
    margin-top: 7px;
    vertical-align: middle;
    position: absolute;
}
#country-details-mobile-table div.score_bar{
    width: 96%;
    height: 30px;;
    vertical-align: top;
    left: 0;
}
@media (min-device-width: 650px) and (min-width: 650px){
    #country-details-mobile-table div.factor-name{
        padding-right: 20px;
        font-size: 1.7em;
    }
}
/***** COUNTRY DETAILS *****/





/***** COLORS *****/
.map-country{
    stroke: white;
    cursor: pointer;
    fill: var(--steel-20);
}
.mobileBars, .score_rank{
    fill: var(--steel-20); 
    background-color: var(--steel-20) !important;
    /* color: white; */
    border-radius: 5px;
}
.score_rank div{
    text-align: center;
    width: 100%;
    padding-right: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    /* vertical-align: middle; */
}
.mobileBars.top50, .score_rank.top50{
    fill: var(--top50); 
    background-color: var(--top50) !important;
    /* color: white; */
    margin-right: 2px;
}

.driver .top50 .mobileBars.top50{
    background-color: var(--top50)!important;
}
.mobileBars.RQ{
    background-color: var(--steel-20) !important;
}
.mobileBars.MC{
    background-color: var(--steel-20) !important;
}
.top50{
    fill: var(--top50);
    background-color: var(--top50);
}
.map-country.top50{
    fill: var(--top50);
}
.no-score:not(.key-label){
    fill: var(--stone-10);
    stroke: var(--stone-30);
    background-color: var(--stone-10); 
    cursor: not-allowed;
}

.map-layer .active{
    /* fill: var(--steel-70) !important; */
    fill: var(--steel-70);
    color: var(--steel-70);
}
.map-layer .highlight{
    fill: var(--steel-70);
}
.view-compare td div.active{
    color: white;
    background-color: var(--steel-70);
}
/***** COLORS *****/


/***** TOOLTIP *****/
.rixtooltip, .rixtooltip-mobile {
    position: absolute;
    z-index: 2000;
    display:none;
    border-radius: 10px;
    font-size: 1em;
    padding: 1px;
    box-sizing: border-box;
    background: white;
    text-transform: capitalize;
    border: 1px solid var(--steel-70);
    max-width: 300px;
}
.rixtooltip-mobile{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}
.rixtooltip div, .rixtooltip-mobile div {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    line-height: 1em;
}
.rixtooltip span.country, .rixtooltip-mobile span.country{
    /*FM Review Bold*/
    font-weight: 500;
}
.rixtooltip span.countrydefinition{
    font-weight: 300;
}
.rixtooltip span.detail, .rixtooltip-mobile span.detail{
    font-size: .8em;
}
.rixtooltip span.detail span.definition, .rixtooltip-mobile span.definition{
    text-transform: none;
}
span.definition.top50{
    color: var(--top50);
    background-color: white;
     /* FM Review Medium */
    font-weight: 500;
}
.rixtooltip div.rankChange, .rixtooltip-mobile div.rankChange{
    padding: 5px;
    font-size: 2.5em;
    font-weight: 500;
    text-align: center;
}
.rixtooltip div.rankYears, .rixtooltip-mobile div.rankYears{
    font-size: 0.7em;
    padding: 5px;
}

.rixtooltip:after, .rixtooltip:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.rixtooltip:after {
    border-width: 6px;
    margin-left: -6px;
    border-top-color: var(--steel-70);
}

.rixtooltip:before {
    border-width: 7px;
    margin-left: -7px;
    border-top-color: var(--steel-70);
}

/***** TOOLTIP *****/

/***** VIEW ALERT *****/
.view-alert{
    position: absolute;
    min-height: 100px;
    z-index: 1;
    display: none;
    padding: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.view-alert .close{
    display: none;
}
.view-alert .alert{
    padding: 20px;
    color: var(--steel-70);
    font-size: 2em;
    line-height: 1.2em;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-alert{
        position: absolute;
        background: white;
        -moz-box-shadow: 0 0 5px var(--stone-10);
        -webkit-box-shadow: 0 0 5px var(--stone-10);
        box-shadow: 0px 0px 5px var(--stone-10);
        border-top: none;
        z-index: 2000;
    }
    .view-alert .close{
        display: block;
        position: absolute;
        top: -15px;
        right: -15px;
        font-size: 1em;
        cursor: pointer;
    }
    .view-alert .close i.fa-circle-o{
        background: white;
        border-radius: 50%;
    }
}
/***** VIEW ALERT *****/

/***** TOGGLES *****/
.compareToggle{
    font-size: 0.6em;
    text-transform: capitalize;
}
.info-box .compareToggle{
    vertical-align: bottom;
    margin-bottom: -1px;
    margin: auto;
}
.toggleWrapper{
    display: inline-block;
}
.toggleWrapper div{
    display: block;
    text-transform: capitalize;
}
.toggle {
    width: 55px;
    height: 24px;
    position: relative;
    border-radius: 24px;
    background-color: var(--steel-10);
    cursor: pointer;
    transition: background-color 0.3s;
}

.toggle::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: white;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

.toggle.on {
    background-color: var(--steel-70);
}

.toggle.on::before {
    transform: translateX(30px);
}
/***** TOGGLES *****/

/***** FOOTER *****/
.floodmap .copyright {
  padding: 25px;
  color: var(--steel-50);
  font-size: 12px;
  text-align: center; 
}
@media (min-width: 768px) {
    .floodmap .copyright {
        display: inline;
        float: right;
        padding: 20px 0;
        font-size: 16px; } 
}
/***** FOOTER *****/

.container-fluid
{
	margin: 0;
	padding: 0;
}