body { margin: 0; padding: 0; font-family: 'Noto Sans', sans-serif; background: #fdfbfb; }

h1, h2, h3, h4, h5, h5, h6{font-family: 'Overpass', sans-serif;}

p{font-family: 'Noto Sans', sans-sarif;}

text{font-family: 'Noto Sans', sans-sarif;}

.subheadv{
    font-size: 2.2rem;
    line-height: 3rem;
    margin: 10px;
}

.header-ilo{
    border-top:3px solid #EF3B4B;
    width:100%;
    padding:15px;
    background:#1e2dbe;
    /*background:-moz-linear-gradient(top,#2c3872 0,#37468e 100%);*/
    /*background:-webkit-linear-gradient(top,#2c3872 0,#37468e 100%);*/
    /*background:linear-gradient(to bottom,#2c3872 0,#37468e 100%);*/
    /*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c3872', endColorstr='#37468e', GradientType=0)*/
}
.header-ilo .logo{
    max-height: 70px;
    margin: 0 auto;
    display: block;
    width: auto;
}
#division-description {
    font-size: 13px;
    color:#444;
    font-style: italic;
}

#wrapper { max-width: 1100px; /*height: 750px;*/ height: auto; margin: 20px auto; /* overflow: hidden; */ 
    border: 1px solid #e4e4e4;
    padding: 15px;
}

.footernote {
    background: #6B91CB;
    color:#FFF;
    padding: 15px 15px 30px 15px;
    font-family: 'Noto Sans', sans-sarif;
    font-size: 14px;
    border-bottom: 3px solid #E40046;
}
.countryname{
    color:rgb(70, 83, 147);
    font-weight: 600;
    /*border-bottom: 2px solid #E40046;*/
}

#masthead { font-family: 'Overpass', sans-serif; font-size: 34px; text-align: center; padding: 20px 2% 20px; text-transform: none; 
background: #230050;
color:#FFF;
margin: -15px;    
border-bottom: 3px solid #EF3B4B;
    
}
#masthead #strap { color: #FFF; font-family: 'Noto Sans', sans-serif; display: inline-block; }
#controls { text-align: center; font-size: 15px; margin: 5px 0; }
#controls #buttons { display: inline-block; }
#controls .scale-control { font-size: 16px; font-family: 'Noto Sans', sans-serif;; }
#controls #scale-by { margin-right: 6px; }
#controls #scale-by-population { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
#controls #scale-equally { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
/*#chart { display: inline-block; vertical-align: top; width: 61%; padding: 0 1% 32% 2%; }*/
#chart { display: inline-block; vertical-align: top; width: 61%; padding: 0 1% 2% 2%; }
#chart svg {width: 100%; height: 100%;}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #chart svg {width: 100%; height: 65vh;}
}

#chart svg circle { cursor: pointer; fill: white; }
#chart svg #central-icon { pointer-events: none; fill: #bbb; }
#chart svg .arc { stroke: white; stroke-width: 1; cursor: pointer; }
#chart svg #highlighter { stroke: black; stroke-width: 3; fill: none; display: none; pointer-events: none; }
#chart svg .label { font-size: 10px; font-family: 'Noto Sans', sans-serif; pointer-events: none; }
#chart svg .category-label { font-size: 12px; }
#chart svg .category-label.current { font-family: 'Noto Sans', sans-serif; }
#info { display: inline-block; vertical-align: top; width: 32%; padding: 0 2% 100px 0; text-align: left; font-family: 'Overpass', sans-serif; }
#info a:link, #info a:visited { color: #aaa; }
#info a:hover, #info a:active { color: #333; }
#info #region { font-size: 22px; color: #999; }
#info #country { margin-top: 2px; margin-bottom: 10px; font-size: 30px; font-family: 'Overpass', sans-serif; /*color:#1e2dbe;*/ color:#230050 !important;}
#info #category { margin-top: 12px; font-size: 16px;  text-transform: uppercase; }
#info #metrics { margin-top: 10px; font-size: 15px; color: #444;}
#info #metrics .metric { position: relative; /*display: inline-block;*/ display: block; /*min-height: 30px;*/ min-height: auto; margin-top: 7px; left-align: left; padding: 0 0 0 28px; }

#wrapper #info #metrics .metric .metricname { line-height: 1.2em; display: inline-block; vertical-align: middle; }
#wrapper #info .response { position: absolute; height: 30px; /*font-size: 30px;*/ font-size: 22px; text-align: center; top: -5px; left: 0; }
#wrapper #info .tweet-button { display: none; }

/*#wrapper.is-locked #info #metrics .metric { padding: 0 70px 0 0; }*/
/*#wrapper.is-locked #info .response { right: 35px; }*/
#wrapper.is-locked #info .tweet-button { position: absolute; height: 35px; font-size: 30px; text-align: center; top: 0; right: 0; display: block; }

#info #metrics .metric .response .fa-check { color: #7FB963; }
#info #metrics .metric .response .fa-times { color: #CF2C2D; }
#info #metrics .metric .response .fa-question { color: #BBB; }
#info #metrics .metric .response .fa-not-applicable { color: #aaa; font-size: 15px; font-family: 'Noto Sans', sans-serif; font-weight: bold; }
#info #metrics .metric .response .fa-not-applicable:after { content: "N/A"; }
#info .source { font-size: 12px; line-height: 1.2em; display: none; margin: 20px 0; }
#info .source a:link, #info .source a:visited { color: #777; }
#info .source a:hover, #info .source a:active { color: #333; }
@media only screen and (max-width: 850px) {
    #wrapper { height: 850px; }
}
@media only screen and (max-width: 700px) {
    #wrapper { height: auto; }
	#masthead { font-size: 40px; }
	#info { width: 94%; padding: 0 3% 0; margin-top: -30%; }
	#info #region, #info #country { display: inline-block; margin-left: 8px; }
    #wrapper #info #metrics .metric { width: 28%; margin-left: 10px; }
	/*#chart { width: 96%; padding: 10px 2% 32%; }*/
	#chart { width: 96%; padding: 10px 2% 2%; }
}
@media only screen and (max-width: 500px) {
    #wrapper #info #metrics .metric { width: auto; margin-left: 0; }
}

/* Button styles borrowed from Bootstrap */

.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled = false);
    border: 1px solid #cccccc;
    border-bottom-color: #b3b3b3;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled,
.btn[disabled] {
    color: #333333;
    background-color: #e6e6e6;
}

.btn:active, .btn.active {
    background-color: #cccccc \9;
}

.btn:hover, .btn:focus {
    color: #333333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

.btn:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn.active, .btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
}

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active,
.btn-info.active, .btn-inverse.active {
    color: rgba(255, 255, 255, 0.75);
}
#info #metrics .metric .response .fa-check {
        color: #1e2dbe !important;
    }
  
  	#info #metrics .metric.blank{
  		padding-left: 0;
  		/*font-weight: 500;*/
  	}
  	#info #metrics .metric.blank.heading{
  		font-weight: 600;
  		color: #230050;
  	}
  	#country-details h4{
  		margin-top: 0;margin-bottom: 0;
  	}
  	.tooltip {position: absolute; z-index: 1070; display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; line-height: 1.42857143; line-break: auto; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; word-wrap: normal; white-space: normal; font-size: 12px; filter: alpha(opacity=0); opacity: 0; } .tooltip.in {filter: alpha(opacity=90); opacity: 0.9; } .tooltip.top {padding: 5px 0; margin-top: -3px; } .tooltip.right {padding: 0 5px; margin-left: 3px; } .tooltip.bottom {padding: 5px 0; margin-top: 3px; } .tooltip.left {padding: 0 5px; margin-left: -3px; } .tooltip.top .tooltip-arrow {bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; } .tooltip.top-left .tooltip-arrow {right: 5px; bottom: 0; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } .tooltip.top-right .tooltip-arrow {bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } .tooltip.right .tooltip-arrow {top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000; } .tooltip.left .tooltip-arrow {top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000; } .tooltip.bottom .tooltip-arrow {top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .tooltip.bottom-left .tooltip-arrow {top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .tooltip.bottom-right .tooltip-arrow {top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .tooltip-inner {max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; background-color: #000; border-radius: 4px; } .tooltip-arrow {position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } #region
    {
  display: none !important;
    }
    .metric.empty {
    display: none !important;
}
.metric.indent.cross,
.metric.indent.tick{
    margin-left: 25px !important;
    font-size:15px !important;
}
.ratified-link {
    font-size: 15px;
    font-weight: bold;
    color: #000 !important;
    margin-bottom: 20px !important;
    display: inline-block;
}