html, body ,select option, select{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
}
#loader{
    width:100%;
    height:1400px;
    position:absolute;
    top:0px;
    left:0px;
    visibility:hidden;
    z-index:1000!important;
    background-color:#fff;
    opacity:0.9;
}
#loaderGif{
    width:100px;
    height:100px;
    margin:auto;
    display:block;
    margin-top:250px;

}
.highcharts-tooltip {
    padding:0px!important;
    background-color: #fff;
    opacity: 0.9;
    z-index: 9999!important;
}
.highcharts-tooltip>span {
    background-color: #fff;
    opacity: 0.9;
    z-index: 9999!important;
    border-radius:5px;
    padding:4px!important;
    color:#000;
    
    

}
#loadingDiv{
    position: absolute;
    background-color: rgba(255,255,255,0.95); 
    z-index: 100; 
    width:100%; 
    height:200%;
}
.chartResize{
    float:left; 
    margin:7px;
    cursor:pointer;
    width:20px;
    height:20px;
}
#loadingGif{
    width: 100px; 
    height: 100px;
    position: absolute; 
    border-radius:50%; 
    left:45%;
    top:25%;
    display:block;
}
#menu{
    display:none;
}
.chartsContainerWide table{
    font-size:0.7em;
    width:100%;
}
.chartsContainerWide table th,td,tr{
    padding:3px;
}
    .chartsContainerWide table th, td {
        border:1px solid #777;
    }
    .chartsContainerWide table th {
        background-color:#ccc;
    }
    .chartsContainerNarrow table{
    font-size:0.7em;
    width:100%;
}
.chartsContainerNarrow table th,td,tr{
    padding:3px;
}
    .chartsContainerNarrow table th, td {
        border:1px solid #777;
    }
    .chartsContainerNarrow table th {
        background-color:#ccc;
    }
#container {
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 2.3fr 2.3fr 1.8fr;
    grid-template-rows: 0.9fr 0.5fr 3fr 3fr 0.3fr;
    background-color: #ddd;
    height: 800px;
    background-color: white;
    grid-gap: 5px;
    background-color: rgb(250,250,250);
    z-index: 10;
}
iframe{
     display:block;
      margin:auto; 
      width:95%; 
      height:800px;
}
.highcharts-button {
   position:relative;
    margin-top:-50px;
}
#sliderCharts{
    background-color:white;
    grid-column:4/-1;
    grid-row:2/5;
    display:grid;
    grid-gap:4px;
    grid-template-rows:0.25fr 1fr 1fr 1fr;
    grid-template-columns:1fr ;
}
#header {
    grid-column:1/-1;
    grid-row:1/2;
    display:grid;
    grid-template-columns:1fr 4fr;
    border:1px solid #D6A041;
}
#header #logo{
    overflow:hidden;
    background-size:130%;
    background-position:center;
    background-image:url("../Images/logo.jpg");
    background-repeat:no-repeat;
}
#header #mapTitle{
    overflow:hidden;
    background-size:cover;
    background-position:bottom;
    background-image:url("../Images/gradiant_header.png");
    background-repeat:no-repeat;
}
#mapTitleText {
    display:block;
    margin-top:20px;
    margin-left :20px;
    font-size:1.5em;
    color: #FFF;
}
#legend{
    grid-column:2/4;
    grid-row:2/3;
    display:grid;
    grid-template-columns:0.2fr 1fr;
    border:1px solid #D6A041;
    padding-top:5px;
}
#legend select{
   margin-top:5px;
   height:70%;
   margin-bottom:0px;
   display:inline-block;
   
}
    
#legend #yearsSelect{ 
  display:grid;
  grid-template-columns:0.5fr 2fr;
  grid-template-rows:1fr;
  grid-gap:3px;
  text-align:left;
  padding-left:10px;
  height:100%;

}
    #legend #yearsSelect span {
        margin-top: 10px;
    }
.listDataContainer {
    position:absolute;
    z-index:11;
    
    background-color:#fff;
    
}
.srcFilter{
    width:95%;
    display:none;
}




.chartColorsContainer {
    padding-left:10%;
     padding-right:10%;
    display:grid;
    grid-template-columns:1fr 1.5fr 1fr 0.5fr;
    text-align:center;
    width:60%;
    margin:auto;
}
#mapColorSwitch{
    width:20px;
    height:20px;
    cursor:pointer;
}
.trColor{
    width:15px;
    height:15px;
    border-radius:50%;
    display:inline-block;
   
}
.mapColorsSelect{
    position:absolute;
    list-style:none;
    padding:3px;
    z-index:10;
    display:none;
    border:1px solid #aaa;
    background-color:#fff;
    top:21%;
    left:34.3%;
    width:28%;
}
.mapColorsSelect li{
    cursor:pointer;
    display:grid;
    grid-template-columns:1fr 1.5fr 1fr;
    
}
.mapColorsSelect li:hover{
    background-color:#eee;
    
}
#reexportColor{

    background-color:#38CAF6;
}
#nonoilColor{

    background-color:#8DDF72;
}
#importsColor{

    background-color:#EB432B;
}
#filter{
    grid-column:1/1;
    grid-row:2/5;
    display:grid;
    grid-template-columns:repeate(1fr);
    grid-gap:4px;
    color: #333;

}
.filterSelect {
   
  
   border:1px solid #D6A041;
}
#filter .filterSelect .selTitle {
        
        width: 100%;
        display: block;
        margin-top:5px;
    }
.listHeader{
    color:#000;
    background-color:#fff; 
    width:100%; 
    cursor:pointer;
    font-size:0.8em;
    height:22px;
    padding-top:5px;
    padding-left:2px;
    border:1px solid #777;
}
    
.imgArrow {
    display:inline-block; 
    float:right;
    margin:5px; 
    width:8px;
    opacity:0.6;
}
#filter select {
    font-size:0.8em;
    width:100%;
    display:block;
    height:30px;
   

}
.selectContainer{
    width:80%;
    margin:auto;
    display:block;
}
.listData{
   display:block;
   
    width:100%; 
    height:auto; 
    max-height:200px; 
    overflow:hidden; 
    overflow-y:scroll; 
    margin:0px; 
    padding:0px; 
    background-color:#fff; 
   
    color:#333;
    font-size:0.8em;
   
    
}
.regSelect {
    width:100%;
    
}
.btnSelC{
    
    width:48%; 
    text-align:center; 
    display:inline-block; 
    margin:0px;
    position:relative;
    z-index:10;
}
.btnSelA{
    
    width:48%; 
    text-align:center; 
    display:inline-block; 
    margin:0px;
    position:relative;
    z-index:10;
}

.selectDiv{
   
    display:block;
    
    width:100%;
    
}
#mapContainer{
    grid-column:2/3;
    grid-row:3/4;
}
#topCountriesContainer{
    grid-column:3/4;
    grid-row:3/4;
}
#topMaterialsContainer{
    grid-column:2/3;
    grid-row:4/5;
}
#growthTableContainer{
    grid-column:3/4;
    grid-row:4/5;
}
 #growthTableContainer table td {
        font-size: 0.7em;
        color: #111;
        border:none;
    }
#growthTableContainer table {
        width:100%;
    }
 #growthTableContainer table th{
    font-size:0.9em;
    color:#444;
}

.chartsContainerWide {
    display:grid;
    grid-template-rows:40px auto;
     grid-template-columns:1fr;
    border:1px solid #D6A041;
    
   

}
.chartsContainerNarrow {
    display:grid;
    grid-template-rows:40px auto;
     grid-template-columns:1fr;
    border:1px solid #D6A041;
    
    
}
.chartsContainerWideT{
display:grid;
    grid-template-rows:40px auto;
     grid-template-columns:1fr;
    border:1px solid #D6A041;
    
}

.chartHeader input{
    width:50px;
    text-align:center;
    font-size:0.8em;
    margin-top:5px;
     
   

}
.chartHeader span{
    display:inline-block;
    margin-left:10px;
    font-size:1em;
     margin-top:5px;
   

}
.chartHeader{
   
    background-size:cover;
    background-position:bottom;
    background-image:url("../Images/gradiant_header.png");
    background-repeat:no-repeat;

     text-align:right;
      color: #111;
      padding-top:3px;
      position:relative;
      z-index:1;
      color:#fff;

}
.menuButton{
    float:right;
    cursor:pointer;
    width:20px;
    height:20px;
    margin:3px;
    margin-top:5px;
}
.menuSelect{
    position:absolute;
    color:#333;
    font-size:0.7em;
    list-style:none;
    padding:0px;
    background-color:#fff;
    display:none;
    width:100px;
    border:1px solid #D6A041;
    text-align:right;
    z-index:100;

}
.menuSelect li{
    padding:2px;
    margin:auto;
    cursor:pointer;
    width:100%;

}
.menuSelect li:hover{
    background-color:#eee;
}
.colorSwapSelectCls{
    list-style:none;
    padding:0px;
    position:absolute;
    z-index:5;
    display:none;
    background-color:#FFF;
    border:1px solid #D6A041;
    color:#333;
   
   
}
.colorSwapSelectCls li{
    padding:2px;
    width:100%;
    cursor:pointer;


   
}
.colorSwapSelectCls li span{
    width:10px;
    height:10px;
    margin:4px;


   
}
.colorSwapSelectCls li:hover{
    background-color:#eee;
    

   
}
.chartChangeSelectCls{
    list-style:none;
    padding:0px;
    position:absolute;
    z-index:5;
    display:none;
    background-color:#FFF;
    border:1px solid #D6A041;
    font-size:0.7em;
    color:#333;
   
   
}
.chartChangeSelectCls li{
    padding:2px;
    width:100%;
    cursor:pointer;


   
}

.chartChangeSelectCls li:hover{
    background-color:#eee;


   
}

.scrollAble{
     
    max-height:100%;
    height:100%;
    overflow:hidden;
    overflow-y:scroll;
    width:100%;
    display:block;
   background-color:rgb(250,250,250);
    
}
#sliderContainer{
   text-align:right;
   display:grid;
   padding:15px;
   grid-template-columns:0.8fr 1fr ;
   grid-template-rows:1fr;
  
   border: 1px solid #D6A041;
   background-color:rgb(250,250,250);
  
}
 #slider{
     margin-top:3px;
     margin-left:-20px;
     width:90%;
 }
 footer{
    display:grid;
    grid-column:1/-1;
    grid-row:5/6;
    grid-template-columns:0.2fr 1.6fr 1fr;
    grid-template-rows:1fr;
    background-color:#D6A041;
    border:1px solid #D6A041;
    grid-gap:5px;
    text-align:right;
 }
 
 .mapButtons{
     width:20px;
     height:20px;
     margin-top:5px;
     cursor:pointer;
      
 }
  .mapButtons:hover{
    box-shadow:0px 0px 4px 2px #FFF;
 }
  .footerText{
       margin-top:5px;
      font-size:0.9em;
      color:#FFF;
  }
  .buttons{
      display:grid;
      grid-gap:10px;
  }
@media screen and (max-width :1200px) {

    #container{
        grid-template-columns:1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 0.5fr 3fr 3fr 2.3fr 0.3fr;
        height:1300px;   }
    iframe{
        display:block; margin:auto; width:100%; height:1200px
    }
    #menu{
    display:none;
}
    #filter select {
    font-size:0.8em;
    width:100%;
    display:block;
    height:30px;

}
    #filter{
        grid-column:1/-1;
        grid-row:2/3;
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        grid-template-rows:1fr 1fr 1fr;
        border:1px solid #ccc;
        padding:1%;
        color: #333;
        grid-gap:8px;
}
    .listData{
        display:block;
        position:relative;
        z-index:10;
        border:1px solid #777;
   
    }
    .selectDiv{width:100%;}
    .chartsContainerNarrow {
        display:grid;
        grid-template-rows:40px auto;
        grid-template-columns:1fr;
        border:1px solid #D6A041;
}
    .selTitle{
        font-size:0.9em;
    }
    .chartHeader input{
        height:13px;
        font-size:0.8em;
    }
    .chartsContainerWide {
        display:grid;
        grid-template-rows:40px auto;
        grid-template-columns:1fr;
        border:1px solid #D6A041;
    
    
}
    .filterSelect {
      border:none;
      display:block;
   
}
    
#legend{
    grid-column:1/-1;
    grid-row:3/4;
    display:grid;
    grid-template-columns:0.3fr 1fr;
    font-size:0.8em;
    padding-top:5px;
   
}
#legend select{
   margin-top:0px;
   height:80%;
   margin-bottom:0px;
   display:inline-block;
   
}
.mapColorsSelect{
    position:absolute;
    list-style:none;
    padding:3px;
    z-index:10;
    display:none;
    border:1px solid #aaa;
    background-color:#fff;
    top:58%;
    left:41%;
    width:38%;
}

#chartsColors {
    padding-left:1%;
     padding-right:1%;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 0.5fr;
    text-align:center;
}
#sliderCharts{
    background-color:white;
    grid-column:1/-1;
    grid-row:6/7;
    display:grid;
    grid-template-rows:0.2fr 2fr;
    grid-template-columns:1fr  1fr 1fr;
}
#sliderContainer{
    grid-column:1/-1;
    grid-row:1/2;
    display:grid;
    grid-template-columns:0.5fr 4fr 0.2;
    margin:0;
    width:95%;
    margin:auto;

   
}
#slider{
     margin-top:3px;
     margin-right:0;
     width:70%;
 }
#mapContainer{
    grid-column:1/3;
    grid-row:4/5;
}
#topCountriesContainer{
    grid-column:3/-1;
    grid-row:4/5;
}
#topMaterialsContainer{
    grid-column:1/3;
    grid-row:5/6;
}
#growthTableContainer{
    grid-column:3/-1;
    grid-row:5/6;
}
.selectContainer{
    width:auto;
    margin:auto;
     
}
.listHeader{
border:1px solid #777;
padding-right:0px;
height:23px;
   width:98%;
}
    .imgArrow {
        
        
    }
    footer{
      
    display:grid;
    grid-column:1/-1;
    grid-row:7/-1;
    grid-template-columns:0.3fr 1.5fr 1fr;
    grid-template-rows:1fr;
    background-color:#D6A041;
    border:1px solid #D6A041;
    grid-gap:5px;
    text-align:right;

    }
    .footerText{
       margin-top:5px;
      font-size:0.75em;
      color:#FFF;
  }
  .buttons{
      display:grid;
      grid-gap:10px;
  }
}


@media screen and (max-width :800px) {
   
    #container{
        grid-template-columns:1fr;
        grid-template-rows: 0.6fr 0.3fr 0.8fr 2fr 2fr 2fr 2fr 6fr 0.3fr;
        height:2000px;   }
     iframe{
        display:block; margin:auto; width:100%; height:1800px
    }
    
    #filter select {
    font-size:1em;
    width:100%;
    display:block;
    height:30px;

}
    #menu{
        display:block;
        grid-column:1/-1;
        grid-row:2/3;
        text-align:center;
        border:1px solid #D6A041;
        cursor:pointer;
        font-size:0.85em;
    }
     #menu:hover{
        background-color:#eee;
    }

    #filter{
        display:none;
        position:absolute;
        z-index:11;
        top:125px;
        display:grid;
        background-color:#fff;
        grid-template-columns:1fr ;
        grid-template-rows:repeat(1fr);
        border:1px solid #D6A041;
        padding:1%;
        color: #333;
        grid-gap:8px;
        width:95%;


}
    #loadingGif{
    width: 50px; 
    height: 50px;
    position: absolute; 
    border-radius:50%; 
   
    color:#FFF; 
   left:45%;
   top:25%;
    font-size:2em;
    font-weight:bolder;
    text-align:center;
   
}
    .listData{
    display:block;
    position:relative;
    z-index:12;
    border:1px solid #777;
    }
    .chartsContainerNarrow {
    display:grid;
    grid-template-rows:40px auto;
     grid-template-columns:1fr;
    border:1px solid #D6A041;
    
    
}
    .selTitle{
        font-size:0.9em;
    }
    .chartHeader input{
        height:13px;
        font-size:0.8em;
    }
    .chartsContainerWide {
    display:grid;
    grid-template-rows:40px auto;
     grid-template-columns:1fr;
    border:1px solid #D6A041;
    
    
}
    .filterSelect {
      border:none;
      display:block;
   
}
    
#legend{
    grid-column:1/-1;
    grid-row:3/4;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr 1fr;
    font-size:0.8em;
   padding-right:0;
    grid-gap:3px;
   
}
#legend select{
   margin-top:0px;
   height:90%;
   width:95%;
   margin-bottom:0px;
   display:inline-block;
   
}
#legend #yearsSelect{ 
  display:grid;
  grid-template-columns:0.5fr 5fr;
  grid-template-rows:1fr;
  grid-gap:3px;
  text-align:center;
  padding-left:0px;
  height:100%;
  margin:auto;
  width:90%;
  grid-row:2/3;

}
#legend #yearsSelect span{ 
  margin-top:10px;

}
    .chartColorsContainer {
    padding:0;
    display:grid;
    grid-template-columns:1.2fr 1.2fr 1fr 0.2fr;
    text-align:start;
   
    font-size:1em;
   margin:auto;
   margin-left:15px;
   width:100%;
}
    #mapColorSwitch{
        margin:0;
        width:15px; height:15px;
    }

#legend #sliderContainer{
   text-align:right;
   display:grid;
   grid-template-columns:0.8fr 2fr 0.4fr;
   grid-template-rows:1fr;
   grid-gap:3px;
   border: 1px solid #D6A041;
  
}
#slider{
    width:70%;
    margin-right:0;
    padding:0px;
    margin:0;
}
#sliderContainer{
    grid-column:1/-1;
    grid-row:1/2;
    display:grid;
    grid-template-columns:1.5fr 4fr;
    margin:0;
    width:98%;
    margin:auto;
    padding-right:0;

   
}
#sliderContainer span{
   margin:0px;

   
}


.trColor{
    width:15px;
    height:15px;
    border-radius:50%;
    display:inline-block;
   
}
.mapColorsSelect{
    position:absolute;
    list-style:none;
    padding:3px;
    z-index:10;
    display:none;
    border:1px solid #aaa;
    background-color:#fff;
    top:25%;
    left:4%;
    width:85%;
}
.mapColorsSelect li{
    cursor:pointer;
    display:grid;
    grid-template-columns:1fr 1.5fr 1fr;
    
}
.mapColorsSelect li:hover{
    background-color:#eee;
    
}
#chartsColors {
    padding-left:5px;
     padding-right:5px;
    display:grid;
    grid-template-columns:1fr 1.5fr 1fr 0.5fr;
    text-align:left;
    
}
#sliderCharts{
    background-color:white;
    grid-column:1/-1;
    grid-row:8/9;
    display:grid;
    grid-template-rows:0.2fr 1fr  1fr 1fr;
    grid-template-columns:1fr;
}
#mapContainer{
    grid-column:1/-1;
    grid-row:4/5;
}
#header {
    grid-column:1/-1;
    grid-row:1/2;
    display:grid;
    grid-template-columns:1fr 1.5fr;
    border:1px solid #D6A041;
    
    padding:0px;
  
   
}
#header #logo{
    overflow:hidden;
    background-size:130%;
    background-position:center;
   background-image:url("../Images/logo.jpg");
    background-repeat:no-repeat;

}
#header #mapTitle{
    overflow:hidden;
    background-size:300%;
    background-position:center;
    background-image:url("../Images/gradiant_header.png");
    background-repeat:no-repeat;
    height:100%;

}
#mapTitleText {
    
    margin :5px;
    font-size:1em;
    color: #FFF;

    display:block;
    
}
#topCountriesContainer{
    grid-column:1/-1;
    grid-row:5/6;
}
#topMaterialsContainer{
    grid-column:1/-1;
    grid-row:6/7;
}
#growthTableContainer{
    grid-column:1/-1;
    grid-row:7/8;
}
.selectContainer{
    width:auto;
    margin:auto;
     
}
.listHeader{
border:1px solid #777;
padding-right:0px;
height:23px;
   width:98%;
}
    .imgArrow {
        
        
    }
    .infoSpan{
    display:none; 
    border:1px solid #eee; 
    color:#333; 
    font-size:0.8em; 
    font-style:italic;
    text-wrap:normal;
    width:200px;
    position:absolute;
    z-index:10;
    background-color:#fff;

}
     footer{
      
    display:grid;
    grid-column:1/-1;
    grid-row:9/-1;
    grid-template-columns:1fr;
    grid-template-rows:1fr 1fr 1fr;
    background-color:#D6A041;
    border:1px solid #D6A041;
    grid-gap:5px;
    text-align:center;

    }
    .footerText{
       margin-top:5px;
      font-size:0.75em;
      color:#FFF;
  }
  .buttons{
      display:grid;
      grid-gap:10px;
  }
  #loader{
    width:100%;
    height:2400px;
    position:absolute;
    top:0px;
    left:0px;
    visibility:hidden;
    z-index:1000!important;
    background-color:#fff;
    opacity:0.9;
}
#loaderGif{
    width:75px;
    height:75px;
    margin:auto;
    display:block;
    margin-top:250px;

}
}

    #elem_container select {
        font-size:0.8em;
        width:100%;
        display:block;
        line-height:10px;
        height:30px;

}

    
    #elem_container .listData{
        display:block;
        position:relative;
        z-index:12;
        border:1px solid #777;
   
    }
    
    #elem_container .filterSelect {
      border:1px solid #777;
      display:block;
   
    }