/* open-sans-300 - cyrillic_cyrillic-ext_vietnamese_latin-ext_greek-ext_latin_greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url("../fonts/open-sans-300.woff2") format("woff2"), url("../fonts/open-sans-300.woff") format("woff"); }

/* open-sans-300italic - cyrillic_cyrillic-ext_vietnamese_latin-ext_greek-ext_latin_greek */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local("Open Sans Light Italic"), local("OpenSansLight-Italic"), url("../fonts/open-sans-300italic.woff2") format("woff2"), url("../fonts/open-sans-300italic.woff") format("woff"); }

/* open-sans-regular - cyrillic_cyrillic-ext_vietnamese_latin-ext_greek-ext_latin_greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url("../fonts/open-sans-regular.woff2") format("woff2"), url("../fonts/open-sans-regular.woff") format("woff"); }

/* open-sans-italic - cyrillic_cyrillic-ext_vietnamese_latin-ext_greek-ext_latin_greek */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local("Open Sans Italic"), local("OpenSans-Italic"), url("../fonts/open-sans-italic.woff2") format("woff2"), url("../fonts/open-sans-italic.woff") format("woff"); }

/* open-sans-600 - cyrillic_cyrillic-ext_vietnamese_latin-ext_greek-ext_latin_greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("../fonts/open-sans-600.woff2") format("woff2"), url("../fonts/open-sans-600.woff") format("woff"); }

/* open-sans-600italic - cyrillic_cyrillic-ext_vietnamese_latin-ext_greek-ext_latin_greek */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local("Open Sans Semibold Italic"), local("OpenSans-SemiboldItalic"), url("../fonts/open-sans-600italic.woff2") format("woff2"), url("../fonts/open-sans-600italic.woff") format("woff"); }

/* open-sans-700 - cyrillic_cyrillic-ext_vietnamese_latin-ext_greek-ext_latin_greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("../fonts/open-sans-700.woff2") format("woff2"), url("../fonts/open-sans-700.woff") format("woff"); }

/* open-sans-700italic - cyrillic_cyrillic-ext_vietnamese_latin-ext_greek-ext_latin_greek */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("../fonts/open-sans-700italic.woff2") format("woff2") url("../fonts/open-sans-700italic.woff") format("woff"); }

/* open-sans-800 - cyrillic_cyrillic-ext_vietnamese_latin-ext_greek-ext_latin_greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url("../fonts/open-sans-800.woff2") format("woff2"), url("../fonts/open-sans-800.woff") format("woff"); }

/* open-sans-800italic - cyrillic_cyrillic-ext_vietnamese_latin-ext_greek-ext_latin_greek */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: local("Open Sans Extrabold Italic"), local("OpenSans-ExtraboldItalic"), url("../fonts/open-sans-800italic.woff2") format("woff2"), url("../fonts/open-sans-800italic.woff") format("woff"); }

body {
	#margin-left: 5%;
	margin-right: auto;
	#width: 1024px;
}

html, body {
	font-family: 'Open Sans', sans-serif;
	height: 100%;
}

.loader {
	position: fixed;
    top: 0; right: 0;
    bottom: 0; left: 0;
    background: #fff;
}

.row.justify-content-center.align-items-center {
	top: 50%;
	left: 50%;
	display: block;
    position: absolute;
}

#container {
    height: 366.492px;
    margin: 0 auto;
	display:none;
    #width: 1150px!important;
	
}

a, a:visited, a:active {
	color: #fff;
}

a:hover {
	text-decoration: none;
}

#vis {
	width: 940px;
	height: 600px;
	clear: both;
	margin-bottom: 3px;
}

.icon {
	margin:5px;
}

footer {
	text-align: center;
}

#view_selection {
	margin-top: 10px;
}

.years {
	font-size: 21px;
	fill: #aaa;
}

.value {
	margin-top:10px;
}

#gates_tooltip {
	height:100px;
}

.tooltip .name {
	font-weight:bold;
	font-size: 10px;
	color:#D4D4D4;
}

.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.y.axis path {
	display: none;
}

.y.axis line,.x.axis {
    stroke: #777;
    stroke-dasharray: 2,2;
}

.tick {
	#border-radius: 10px;
	#-webkit-transform: scale(8);
	#transform: scale(8);
}

.label {
  	position:absolute;
	z-index:1;
	width:51px;
	background-color: transparent;
	height:30px;
	text-align: center;
	color:#000;
	font-size:12px;
}

.thick {
  	position:absolute;
	border:1px dashed #fff;
	z-index:1;
	height:100%;
	width: 0;
}

.background {
  	position:absolute;
	border:1px dashed #000000;
	z-index:-999;
	height:550px;
}
  
.link a,.link a:visited, .link {
	font-size:16px;
	color:black;
	margin:6px;
}

.link a:hover {
	text-decoration:underline;
	  
}

.link a.active {
	color:#F79425;
	  
}

.thema img {
	float:left;
}

.thema, .indicator {
  	cursor:pointer;
	float:left;    	
	margin-right:10px;
	height:20px;
}

.thema p,.indicator p{
    font-size: 12px;
    font-weight: bold;
	display:inline;
}

.indicator p{
    margin-left: 0px;

}
.indicator  {
	text-align: center;
}

.thema:first-child,.indicator:first-child {
	#margin-left:10px;
}

#themasWrapper {
	#width:1000px !important;
	height:63px;
	background-color: #4682b4;
	#border: 1px solid #020202;
	position: relative;
	margin-top: 22px;
	width:100%;
}

#indicatorInfos {
	height:60px;
	margin-left:3px;
}

#indicatorName {
	display: block;
	font-size: 22px;
	font-weight: bold;
	margin-left: 20px; 
	margin-top: 27px;
}

#indicatorUnit {
	color: #000;
	display: block;
	font-size: 16px;
	margin-left: 20px;
}

#container {
	#width:1024px;
	#height:748px
}

#icons {
    background-color: white;
    height: 68px;
    left: 0px !important;
    margin-top: 0px;
    position: absolute;
    top: 0px;
	right: 0px !important;
    width: 280px;
}

#icons ul {
	margin:0 0 0 0;
	padding:0;
}

#femaleBtnLabel {
	font-size: 12px;
	color: #DFB369;
}

#maleBtnLabel {
	font-size: 12px;
	color: #4682b4;
}

.themaIcon {
    background-color: #25313b;
    float: left;
    height: 50px;
    list-style-type: none;
    width: 50px;
	cursor:pointer;
	margin-left: 5px;
	z-index: 1;
	position: relative;
}

#themaBtnGroup {
	width:100%;
	height:100%;
	position:relative;
	text-align:center;
}

.themaBtnContainer {
	width:48%;
	text-align:center;
	display:inline-block;
}

.iconPointer {
	font-size: 60px;
	margin-left: 5px;
	margin-top: 4px;
	position: relative;
}

.selected .iconPointer {
	display:block!important;
}

.tooltip_left,.tooltip_right {
	position: absolute;
	top: 100px;
	left: 100px;
	opacity: .9;
	color: white;
	padding: 10px 10px 10px 5px;
	width: 100px;
	font-size: 10px;
	z-index: 10;
	font-weight: bold;
	font-stretch: condensed;
	background-repeat:no-repeat;
	pointer-events: none;
}

.tooltip_left .title {
	font-size: 13px;
}

.tooltip_left {
	background-image:url("../icons/tooltip-left.png");

}

.tooltip_right {
	background-image:url("../icons/tooltip-right.png");
	background-repeat:no-repeat;
}

.tooltip_left .name {
	margin-left:20px;
}

#scaleWrapper {
    height: 535px;
    position: absolute;
    top: 106px;
    width: 100%;
    z-index: -1;
}

#svg_vis {
	z-index:999;
}

#infoDisplay img{
	width:20px;
	height:20px;
}

#infoDisplay {
	margin-left:10px;
}

#noData {
    font-size: 20px;
    font-stretch: condensed;
    font-weight: bold;
    #left: -440px;
	left: -330px;
    position: relative;
    top: -105px;
	z-index:-1;
}

#noData span {
	display:none;
}

#noData img {
	margin-left: -55px;
	margin-top: 10px;
	margin-left: 2px;
	margin-top: 5px;
	max-height: 40px;
	max-width: 100px;
}

#settingDisplay {
	cursor: pointer;
}

#countriesConteiner {
	border-radius: 6px;
    background-color: white;
    border: 1px solid #d4d4d4;
    font-size: 13px;
    left: 630px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
	padding-top:10px;
    position: absolute;
    top: 120px;
	width: 390px;
	z-index:999;
}

#countriesClosebutton {
	cursor: pointer;
	margin-left: 310px;
	margin-top: -30px;
}

#countriesClosebutton img {
	width:30px;
	height:30px;
	margin-left: 55px;
}

#countriesTitle {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    margin-left: 12px;
	cursor:move;
}

#countriesConteiner  {
	display:none;;
}

#countriesConteiner #memberStateContent, #countriesConteiner #estatContent {
	padding-top:10px;
}

#countriesConteiner #memberStateContent li,#countriesConteiner #estatContent li {
    float: left;
    list-style-type: none;
    width: 180px;
	cursor:pointer;
}

#countriesConteiner #memberStateContent li a,#countriesConteiner #estatContent li a {
    color: black;

}

/* <!-- margin top : -16px --> */
@media only screen and (device-width: 768px) {
	
	#icons {
	    top: -46px;
	}	
	#countriesConteiner {
	    left: 100px;
	}
  /* For general iPad layouts */
}

.triangle{
	width:0.1px;
	height:0.1px;
	border:1px solid #069;
	border-width:100px;
    border-image: none;
    border-style: solid;
    border-width: 20px;
    height: 1px;
    width: 1px;
}

#randomImg {
	margin-left:10px;
	position:absolute;
	#transform: rotate(90deg);
	#transform-origin: left top 0;
	display:none;
}

#randomTxt {
    background-color: white;
    margin-left: 10px;
    margin-top: 25px;
    max-width: 220px;
    min-height: 20px;
    min-width: 30px;
    opacity: 0.7;
    padding-left: 10px;
    position: absolute;
}

#randomTxt span {
    margin-left: 10px;
}

#randomTxt img {
    cursor:pointer;
}

span.bold {
	font-weight:bold;
}

img.iconButton {
	margin-left:10px;
	width:20px;
	height:20px
}

#shareConteiner  {
	margin-left:0px;
}

#shareConteiner li {
	list-style-type:none;
	display: inline;
}

.webui-popover-content {
	padding-left:0px;
	margin-left:0px;
}

#indicatorName a {
	text-align:center;
	width:20px;
}

#shareContent a,#shareContent a:visited,#shareContent a:active  {
	color:black;
}

#mainBart {
	background-color:red;
}

.graph {	
	display:inline-block;
}
.graph svg{
	display:block;
	margin:140px auto 0 60px;
	text-align:center;
    display: block;
    margin: 30px auto 0 0;
    text-align: center;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

#main {	
	#float:right;
	float: left;
	width: 1000px;
}
#subtitle {
	color: #29333c;
	display: inline-block;
	height: 40px;
	width:400px;	
}

#subtitle img {
    border: 2px solid black;
    border-radius: 22px;
    height: 40px;
    margin-left: 10px;
    margin-top: -7px;
    width: 40px;
	display:inline;
}

#logoEstat img {
    right: -23px !important;
    margin-top: -48px !important;
    position: absolute;
    width: 213px;
	height: auto;
}

#icons {
	#margin:auto;
}

#shareDisplay {
	position: absolute;
	right: 0px;
	top: 68px;
}

#shareDisplay  a{
	outline: none;
}

.share-btn {
	background-color: #469FFF;
    border-radius: 100%;
    color: #fff;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    margin: auto 2px;
    width: 24px;
    font-size: 14px;
    text-align: center;
} 

.share-btn:hover:before {
    opacity: 0.5;
}

.tooltip-btm {
    top: -50px;
	width: 90px auto;
	height: 20px;
	background-color: #414141;
    color: #fff;
    text-align: center;
    border-radius: 6px;
	padding: 5px 10px 5px 10px;
    position: absolute;
	font-size: 12px;
	display: none; 
	white-space: nowrap;
}

/* bottom arrow */
.tooltip-btm:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-bottom: -9px;
    border-width: 5px;
    border-style: solid;
    border-color: #414141 transparent transparent transparent;
}
#icons {
	left:calc((100% - 115px)/2)!important;
}

/* Applyed from 0 to width : 600 px */
@media screen and (max-width: 600px) {
	#selectorThema ,#selectedThema{
		opacity:0;
		width:100px
	}
	#indicatorName {
		font-size:15px;
		margin-left:10px!important;
	}
	#indicatorUnit {
		font-size:9px;
		margin-left:10px!important;
	}
	#infoDisplay img {
	    width: 15px;
	    height: 15px;
	}

	#selectorTitle {
		display:none;
	}
	#selectorThema {
	    margin-left: 0px !important;
	    width: 40px!important;
	}
	#selectedThema {
		width: 60px!important;
		font-size:10px!important;
	}
	#selectorThema ,#selectedThema{

	}
	#logoEstat img {
    	right: -6px!important;
    	margin-top: -27px !important;
    	position: absolute;
    	width: 113px;
    	height: auto;
	}
	#icons {
		left:27%!important;
	}
	.label {
		font-size:10px;
	}
	#themasWrapper {
		height:30px;
		margin-top:22px;
		
	}
	.themaIcon {
		width:30px;
		height:30px;
	}
	#icons {
		width: 80px!important;
	}
	.icon {
		max-width:80%;
		margin:3px;
	}
	#shareDisplay {
		top:33px;
	}
	#icons {
		left:calc((100% - 80px)/2)!important;
	}
	#themaBtnGroup {
		display:none;
	}
	#countriesConteiner {
		top:0px;
		left:25px;
	}
	#countriesConteiner #memberStateContent li, #countriesConteiner #estatContent li {
	    float: left;
	    list-style-type: none;
	    width: 180px;
	    cursor: pointer;
	    font-size: 10px;
	    line-height: 14px;
	}
}
/* Applyed from 0 to width : 400 px */
@media screen and (max-width: 400px) {
	#countriesConteiner {
		top:0px;
		left:25px;
	}
	img.iconButton {
	    margin-left: 5px;
	    width: 20px;
	    height: 20px;
		display:none;
	}
	body {
		overflow:scroll;
	}
	#themasWrapper {
		height:20px;
		margin-top:0px;
		
	}
	.themaIcon {
		width:20px;
		height:20px;
	}
	#icons {
		width: 60px!important;
	}
	.icon {
		width:15px;
		margin:3px;
	}
	#icons {
		left:calc((100% - 60px)/2)!important;
	}
	.share-btn {
	    background-color: #469FFF;
	    border-radius: 100%;
	    color: #fff;
	    display: inline-block;
	    height: 15px;
	    line-height: 17px;
	    margin: auto 2px;
	    width: 15px;
	    font-size: 9px;
	    text-align: center;
	    margin-top: 0px;
	    vertical-align: middle;
	}
	#shareDisplay {
		top:21px;
	}
	#indicatorName {
		font-size:10px;
	}
	#indicatorUnit span{
		font-size:8px!important;
	    top: -3px;
	    position: relative;
	}
	#logoEstat img {
	    right: -6px!important;
	    margin-top: -22px !important;
	    position: absolute;
	    width: 95px;
	    height: auto;
	}
	.label {
		font-size:7px;
	}
	#indicatorInfos {
	    height: 45px;
	}
	#scaleWrapper {
	    top: 71px;
	}
	
	p {
	    margin: 0 0 9px;
	    font-size: 8px;
	    line-height: 9px;
	}
	#randomTxt {
	    background-color: white;
	    margin-left: 3px;
	    margin-top: 3px;
	    max-width: 219px;
	    min-height: 19px;
	    min-width: 27px;
	    opacity: 0.7;
	    padding-left: 5px;
	    position: absolute;
	}
}
/* Applyed from 0 to width : 700 px */
@media screen and (min-width: 600px) and (max-width: 700px) {
	#countriesConteiner {
		top:0;
		left:25px;
	}
	body {
		overflow:scroll;
	}
	#selectedThema {
		width: 250px!important;
		font-size:10px;
		padding-right: 10px;
	}
	#indicatorName {
		font-size:15px;
	}
	#indicatorUnit {
		font-size:12px;
	}

	#selectorThema {
	    margin-left: 0px !important;
	    width: 40px!important;
	}
	#indicatorName {
		font-size:16px;
	}
	.label {
		font-size:10px;
	}
}
/* Applyed from 0 to width : 800 px */
@media screen and (min-width: 700px) and (max-width: 800px) {
	#selectedThema {
		margin-top:5px;
		width: 350px!important;
	}
}

@media screen and (min-width: 800px)  and (max-width: 900px) {
	#selectedThema {
		margin-top:5px;
		width: 400px;
	}
}
@media screen and (min-width: 900px) {
	#selectedThema {
		margin-top:5px;
		width: 450px!important;
	}	
}