/* General Demo Style */
@font-face {
  font-family: Caecilia;  src: url('caecilia.otf');
}
#wheel_section {
	 height:auto;
	 display:none;
   padding-left:0%;
	 padding-right:0%;
	 margin-top: 50px;
   margin-bottom: 50px;
 }

.city_colors{
  background-color:#cbdbef;
}

.region_colors{
  background-color:#07366c;
}

.bottom_cover_all_space{
	width: 98%;
}


#wheel_area {
  margin: 0 auto;
  height: auto;
	 min-height: 500px;
	 padding-bottom: 25px;
  float:left;
}

.section_map {
 padding-bottom: 20px;
 padding-top: 20px;
 }

 .tooltip2 {
   position: relative;
   display: inline-block;
   margin-bottom:15px;
 }

 /* Tooltip text */
 .tooltip2 .tooltiptext {
   visibility: hidden;
   width: 250px;
   left: -200px;
   top: 20px;
   background-color: #fafafa;
   color: rgba(0,0,0,.5);
   text-align: center;
   padding: 10px 10px;
   border-radius: 6px;
   font:0.85em sans-serif;
   line-height: 1.6;
   /* Position the tooltip text - see examples below! */
   position: absolute;
   z-index: 1;
 }

 /* Show the tooltip text when you mouse over the tooltip container */
 .tooltip2:hover .tooltiptext {
   visibility: visible;
 }


#comparable_regions{
	display: none;
	width:100%;
 padding-top:25px;
padding-bottom:20px;

}

.no_padding_bottom{
padding-bottom: 0px;
}

.small_font{
font-size:0.7rem;
}

.no_margin_sides{
 margin-right: 0px;
 margin-left: 0px;
}

.wheel_hover_over{
margin: 0 auto;
font-size:0.8rem;
padding-top:30px;
}

.descrpition{
font-size:0.7rem;

}

.wheel_slice{
stroke:white;
stroke-width:1px;
}

div.tooltip {
  position: absolute;
  text-align: left;
  padding: 5px;
  font: 1rem sans-serif;
  background:#f0f0f0;
  border: 0px;
  border-radius: 18px;
  pointer-events: none;
  max-width:250px;
  font-size: 0.8em;
}

#infobox {

  }

.infobox {
float:left;
height:100%;
text-align: center;
margin-top:1px;
background-color: #ececec47;
padding: 10px;
margin-bottom: 10px;
border-radius: 6px;
  }

#infobox .title {

  }

.column {
  float: left;
  width: 50%;
}


form {
 position: relative;
 right: 10px;
 top: 10px;
}

.rect {
   min-height:15px;
   min-width: 10px;
   background-color: steelblue;
   margin-bottom: 2px;
   font-size: 11px;
   color: #f0f8ff;
   text-align: right;
   padding-right: 2px;
   fill:"orange";
}
circle {
   min-height:15px;
   min-width: 10px;
   background-color: steelblue;
   margin-bottom: 2px;
   font-size: 11px;
   color: #f0f8ff;
   text-align: right;
   z-index:2;
   padding-right: 2px;
}

.main_axis_date{
  z-index:2000;
}

.wheel_circle{
 fill:#e2e2e2;
 stroke-width: 0.5;
 stroke: #000000b0;

}
.wheel_circle_active{
 fill: #004081;
 stroke: white;
}

.wheel_circle_country{
fill: #ffa500;
stroke: white;
}

.wheel_circle_highlight{
  fill: #269a45;
  stroke:#000000;

}

.tooltip_wheel{
opacity: 0;
}
.control-group {
 padding-top: 10px;
 margin: 10px;
}

.monthArc {
 fill: white;
 stroke: #AAAAAA;
}

.monthText {
 fill: #6B6B6B;
 font-size: 13px;
 font-family: 'Courgette', sans-serif;
}

.selected {
 background-color: #f08080;
}
.intro{
width:100%;
heigth:100%;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: rgba(0,0,0,.5);
}

.index_circle{
}
.index_circle_active{
	fill:#e2e2e2;
}
.index_circle_country{
	stroke:#929292a3;
	fill:#e2e2e2;

}
.g-buttons .g-button.g-active {
    z-index: 2;
}
.g-buttons .g-button:last-child {
    border-radius: 0 5px 5px 0;
    margin-left: -5px;
}
.g-button.g-active {
    background: #f0f0f0;
    border-color: #ccc;
    border-top-color: #bbb;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    color: #222;
    font-weight: 600;
}
.g-buttons .g-button {
    width: 13em;
    border: solid 1px #ddd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.g-button {
    background: #fff;
    border: none;
    border-radius: 3px;
    border-bottom-color: #ccc;
    color: #888;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    line-height: 18px;
    padding: 4px 8px;
		margin-top: 8px;
    white-space: nowrap;
}




#chart_section {
	 height:auto;
	 display:none;
   min-height: 650px;
	 }


.contentgoal_svg{
opacity:0;
}

#search2{
	position:relative
}

#main_axis_date {
font-size:0.4rem;
}
#main_axis_date2 {
color:#FFFFFF;
font-size:0.4rem;
}
.domain{
  color:#e2e2e2;
}


.textgraph tspan{
color: rgb(192, 192, 204);
font-family:sans-serif;
}

.textgraph{
font-family:sans-serif;
font-size:0.8rem;
fill:#383737;
z-index:4000;
font-weight: 600;
}


.main_axis_date g {
color:#000000;
font-size:1rem;
}
 .links line {
   stroke: #999;
   stroke-opacity: 0.6;
 }

 .nodes circle {
   stroke: #fff;
   stroke-width: 1.5px;
 }


 .button {
   width: : 50px; /* navy 40% */
   height: 50px;
 }


 .button rect {
   stroke: #999faa; /* navy 40% */
   stroke-width: 2px;
 }

 .button rect.pressed {
   fill: #000f2b; /* navy 100% */
 }


 .button #gradient-start {
   stop-color: #999faa; /* navy 40% */
   stop-opacity: 1;
 }

 .button #gradient-stop {
   stop-color: #4d576b; /* navy 70% */
   stop-opacity: 1;
 }

 .button #gradient-start.active, .button #gradient-start.pressed {
   stop-color: #4d576b; /* navy 70% */
 }

 .button #gradient-stop.active, .button #gradient-stop.pressed {
   stop-color: #000f2b; /* navy 100% */
 }

 .button text {
   font-size: 16px;
   fill: #eee;
   pointer-events: none;
   text-anchor: middle;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }

 .column {
   flex: 50%;
   padding: 0 4px;
 }

 #horizontal_menu img {
   margin-top: 8px;
   vertical-align: middle;
	 height: 80px;
    width: 80px;
 }


  #map {
    width: 100%;
    height: 240px;
  }

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e2e2e2fc; /* Black background with opacity */
  z-index: 50000; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}


.bottom_20{
  fill: #ecf4fa;
  opacity: 0.25;

}

.bottom_circle{
  fill:#bdd7ee;
  stroke-width: 0.2;
  stroke: #383737;
}

.top_circle {
  fill:#3837376b;
  stroke-width: 0.9;
 stroke: #ecf4fa
}
.help{
  min-width: 600px;
  max-width: 900px;
  height: 500px;
}


#myHeader {
	background-color: #ffffff;
	color:white;
	flex: 0 0 auto;
	-webkit-flex: 0 0 auto;
}
#myHeader img {
	height:auto;
	max-height:50px;

}

#navbarSupportedContent{
  margin:0px;
}


#container {
  max-width:  1170px;
  width:100%;
  margin:auto;
  padding-right:0px;
  padding-left:0px;
}

.line_index{
  stroke-width:2.5;
  stroke:#383737;
}

#Mybody{
  font-family: Helvetica; Arial, sans-serif;
  background-color:#ffffff;
  color:rgba(0,0,0,.5);
  font-size: 16px;
  margin:0px;
  -webkit-text-size-adjust: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  font-display: swap;
}


#section_intro{
position:relative;
min-height: 300px;
}

.no_padding{
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px;
}

.light_green{
background-color:#1695a3;
}
.dark_green{
background-color:#2c858d;
}

.white_font{
color:#ffffff;
}

.button_go{
width:100%;
background-color:#dc8300;
color: #07366c;
margin-top:10px;
margin-bottom:10px;
border-color:#edb993;
}
.button_go:hover{
background-color: #07366c;
  }

.tiny_image{
  max-height:40px;
  max-width: 40px;
  margin-top:8px;
  padding-right:5px;
}

h5{
  padding: 10px 10px 10px 10px;
}

.title_intro_panel{
 color: #dc8300;
 font-family: caecilia;
 padding:10px 10px 0px 10px;
 margin-bottom: 0px;
}
#subtitle_intro_panel{
  padding-bottom:1px;
  margin-bottom:1px;
  padding:0px;
  font-style: bold;
  font-weight: 600;
}

#image_bg{
position:absolute;
top:-10px;
right:0px;
height: 260px;
}

#search{
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0px;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#search_container{
background-color: white;
padding-bottom:10px;
border: 1px solid #e5e7e9;
border-radius: 0.05rem;
padding-left: 10px;
padding-right: 10px;
}

.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding: 5px 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 100%;
}
.select2-hidden-accessible {
    width: 100%;
}
.select2 {
width:100%!important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    left: 95%;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #c5c5c5;
    border-radius: 4px;
    width: 100%;
    font-family: Caecilia;

}
.ui-widget {
    font-size: 1em;
}


.ui-widget.ui-widget-content {
    border: 0px solid #665050;
    margin-top: 8px;
  }

.ui-widget-header{
  background:#00000000;
  border:0px;
}

.ui-tabs .ui-tabs-panel {
    border: 1px solid #c5c5c5;
    color: #717171;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  text-align: center;
  width: 100%;

}

.leaflet-container .leaflet-control-attribution{
background: rgba(255, 255, 255, 0);
}
.leaflet-container a {
    color:#b3b7bd;
}

.leaflet-touch .leaflet-bar a {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.leaflet-touch .leaflet-control-layers-toggle {
    width: 44px;
    height: 44px;
    display: none;
}

.leaflet-touch .leaflet-bar a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color:#b3b7bd;
    background-color:#e2e2e200;
}

.leaflet-control-zoom-in{
background-color: blue ;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
    color: #717171;
    text-decoration: none;
}


.ui-widget-content{

  background: #f6f6f6;

}
.ui-widget-header {
    background: #00000000;
}

.ui-tabs{
  padding:0px;
}

.ui-tabs li{
  width:48%;
}

.ui-tabs .ui-tabs-nav{
  padding:0px;
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 0px 0em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
    width: 50%;
}

.ui-state-active, .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active,
  a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
background:#e2e2e2;
border:0px;
}

.custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }
  .custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
  }



#image_city{
position: absolute;
top:-20px;
width: 450px;
height: auto;
right:150px;
}



#image_sdg{
max-width:340px;

max-height:340px;
height: auto;
margin-top:50px;
}
#image_wheel{
max-height:350px;
max-width:350px;
margin-top:50px;
height: auto;
}

#image_worldmap{
height: 450px;
}

.section{
  margin-top:80px;
  padding-bottom: 40px;
  position: relative;
}


.section_no_padding_top{
  margin-top:0px;
  padding-bottom: 40px;
  position: relative;
}


.offwhite{
  background-color:#edf0f745;
}

.blue{
  background-color:#0f7bff;
  padding-top: 80px;
  padding-bottom: 40px;
  position: relative;

}

.grey_footer{
  background-color:#e2e2e2;
  padding-top: 0px;
  padding-bottom: 0px;
  position: relative;
}




.grey_footer::after{
  background-color:#e2e2e2;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 110vw;
  z-index: -1;
  display: block;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}



.blue::after{
  background-color:#0f7bff;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  display: block;
  width: auto;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.darkgrey{
  background-color: #383737;
  position: relative;

}
.darkgrey::after{
  background-color: #383737;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 110vw;
  z-index: -1;
  display: block;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.darkblue {
  background-color:#07366c;
  position: relative;

}


.darkblue::after {
    background-color: #07366c;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 110vw;
    z-index: -1;
    display: block;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.click-to-top{
  display: block;
  height: auto;
  display: inline-flex;
}
div.click-to-top span {
  position: absolute;
  bottom: -60px;
  height: auto;
  font-family: Caecilia;
  left: 0;
  right: 0;
  background: #edf0f745;
  opacity: 0;
  -webkit-transition: opacity 1.5s; /* For Safari 3.1 to 6.0 */
   transition: opacity 1.5s;
}
div.click-to-top:hover span {
  display: block;
  opacity: 1;

 }

 /*Added*/.clear {
   clear: both;
 }

.offwhite::after{
  background-color:#edf0f745;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  display: block;
  width: 110vw;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}


.title{
  color:#004081;
  font-weight:bold;
}
.title_description{
  font-size: 13px;

}

.titles{
  color:#004081;
  font-weight:bold;
}


.impact-story__header__scroll{
  font-size: 0.75rem;
}

.goal_intro{
  max-width: 100px;
  opacity:1;
  display: inline-table;

}

.goal_intro:hover{
  opacity:1;

}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid #afafaf;
}
.arrow-down {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid #afafaf;
}


.btn2 {
  border: none;
  background-color: #deebf7;
  border-radius: 50px;
  padding: 5px 5px;
  font-size: 0.7em;
  cursor: pointer;
  display: inline-block;
}

/* On mouse-over */
.btn2:hover {background: #eee;}

.success {color: green;}
.info {
color: #313334;
font-weight: 700;
}
.warning {color: orange;}
.danger {color: red;}
.default {color: black;}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor  {
    cursor: text;
    background-color: #dc8300;
}

#section_cityregion{
background-image:url(/images/internet.svg) ;
background-repeat: no-repeat;
background-size: 100% 100%;
min-height: 300px;
}
#section_pilots{
background-repeat: no-repeat;
background-size: 100% 100%;
min-height: 300px;
}
#wheel_introsection{
background-image:url(/images/world_map2.png) ;
background-repeat: no-repeat;
background-size: 100% 100%;
min-height: 300px;
max-height: 500px;
min-width: 800px;

}

.legend text{
  font-size:0.8em;
}
.myhr {
    margin-top: 0px;
    margin-bottom: 0px;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

.padding_buttom{
  margin-bottom: 10px;
}

.nobull {
  list-style-type: none;
 }




#search2{
}


#horizontal_menu img {
    min-height: 30px;
    min-width: 30px;
    max-height: 50px;
    max-height: 50px;
    height: auto;
    width:auto;
}

#container  {
  width: 100%;
  padding: 10px 0px 0px 0px;
}
#region_title{
  align-items: 'center';
}


#Mybody{
  width:100%;
}

##mouseposition-extension-element-full-container{
  width:100%;
}

#horizontal_menu{
}
.marker-cluster-small div {
background-color : rgba(220, 131, 0,0.9);
}
.marker-cluster-small  {
background-color : rgba(220, 131, 0,0.5);
}

.marker-cluster-medium div{

background-color :rgba(132, 139, 144,0.9)
}
.marker-cluster-medium{

background-color :rgba(132, 139, 144,.4)
}

.marker-cluster-large div{
background-color :  rgba(222, 235, 247,0.9);
}
.marker-cluster-large {
background-color :  rgba(222, 235, 247,0.5);
}
.g-axis line {
     fill: none;
     stroke: #000;
     shape-rendering: crispEdges;
                                   }

.section_no_padding_top {
  margin:0px 0px 0px 0px;
}

.section {
    margin-top: 10px;
    padding-bottom: 10px;
}
.ui-widget-content a {
    color: #2b82cb;
}
#content_goal{
	height:300px;
  width:100%
}

@media  screen and (max-width: 800px) {
  #wheel_area {
      min-height: 340px;
      padding-bottom: 0px;
     }
     .help {
    width: auto;
    height: 80%;
    min-width: 100px;
     max-width:100%;
      }

     .row{
       margin-right: 0px;
       margin-left: 0px;
     }

   #image_wheel{
   height: 0px;
   }
  .textgraph{
  font-size:0.5rem;
  }
  #content_goal{
    width: 98%;

  }

  #chart_section {
    margin-left: 0px;
    margin-right: 0px;
  	 }
  #Mybody{
    font-size: 12px;
  }
  .h2, h2 {
      font-size: 1.2rem;
  }

 #wheel_section {
  height:auto;
  display:none;
  padding-top: 45px;
  padding-right: 0px;
  padding-left:7px;
  padding-right:7px;

 }
 #comparable_regions{
	 display: none;
 }


	#infobox {
    min-height: 300px;
	  height:auto;
		text-align: center;
	  margin-top:0px;
	    }




      .grey_footer::after{
        width: 0vw;
      }



      .blue::after{
        width: 0vw;

      }


      .darkgrey::after{
        width: 0vw;

      }

      .darkblue::after {
        width: 0vw;

      }

      .offwhite::after{
        width: 0vw;

      }



}