table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}
axis--x path {
      display: none;
    }

    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }
    p.ex1 {
        margin: 35px;
    }
    h3.exh{
        margin-right: 50px;
        margin-left: 100px;
        font-weight: bold;
    }


    .bar:hover {
      fill: '8a89a6' ;
    }


    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }

    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }

    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }


table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    padding-left: 80px;
    width: 300px;
}

td, th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 0px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}



#map1{
    width:98%;
    height:600px;
}

#bar_chart{
    width:98%;
    height:250px;
    display:inline-block;
    padding-top: 30px;
}
#bar_chart1{
    width:98%;
    height:250px;
    display:inline-block;
    padding-top: 30px;
}

/* text after on-click of map bubbles */
#textMap{
    width:93%;
    height:150px;
    background: #fff;
    opacity: 0.8;
    overflow:scroll;
    overflow-x:hidden;
    border:2px solid;
    border-color: #011e41;
    margin-left: 40px;
    margin-bottom: 15px;
    margin-top: 15px;
/*    border-radius:25px 0px 0px 25px;
*/    
}
#textMap1{
    width:93%;
    height:150px;
    background: #fff;
    opacity: 0.8;
    overflow:scroll;
    overflow-x:hidden;
    border:2px solid;
    border-color: #011e41;
    margin-left: 40px;
    margin-bottom: 15px;
    margin-top: 15px;
/*    border-radius:25px 0px 0px 25px;
*/    
}
.sidenote {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: small;
    height:10px;
    line-height: 10px;
    text-align: left;
    left: 300px;
    max-width: 90%;
    position: relative;
}
.hidden{display: none;}

#textMap::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#textMap::-webkit-scrollbar
{
    width: 10px;
    background-color: #011e41;
}

#textMap::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
                                       left bottom,
                                       left top,
                                       color-stop(0.44, #011e41),
                                       color-stop(0.72, #011e41),
                                       color-stop(0.86, #011e41));
}

.title{
    font-family:Georgia,serif;
    color:#4E443C;
/*    font-variant: small-caps; 
*/    text-transform: none; 
    font-weight: 300; 
    margin-bottom: 0;
    color:#000;
    font-size: 18px;
}


.content{
    background-color: steelblue;
    display: list-item;
    list-style-type: disc;
    font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
    margin-top: .5em; 
    color: #666;
}

.allE{
    fill:#7ebff7;
}

.allA{
    fill:#ef8128;
}

.positiveE {
  fill: #e04428;
}

.positiveA {
  fill: steelblue;
}


.negativeE {
  fill: red;
}

.negativeA {
  fill: steelblue;
}

.death {
  fill: balck;
}


.axis {
  font: 9px sans-serif;
}

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

rect {
    shape-rendering: crispEdges;
}

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

.x.axis path {
  display: none;
}



.maplabel{
    fill: #666666;
}
.playPause{
  cursor: pointer;
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-bottom: -8px;
  margin-left:20px;
  background:url(../img/play_button.png) 25px 25px no-repeat;
    line-height: 25px;
}
.playPause1{
  cursor: pointer;
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-bottom: -8px;
  margin-left:20px;
  background:url(../img/play_button.png) 25px 25px no-repeat;
    line-height: 25px;
}

.playPause.paused{
  background-position:0px 0px;
}

.playPause.playing{
  background-position:-25px 0px;
}

.playPause1.paused{
  background-position:0px 0px;
}

.playPause1.playing{
  background-position:-25px 0px;
}
.auto_tip{
    /*padding-left:40px;*/
    font-size: small;
    color: #9e9e9e;
}
.d3-tip {
    line-height: 1;
    font: 10px sans-serif;
    font-weight: lighter;
    padding: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 1px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font: 8px sans-serif;
    width: 100%;
    line-height: 2;
    color: rgba(0, 0, 0, 0.6);
    content: "\25BC";
    position: absolute;
    text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
}


.active { fill: blue !important;}
/*.datamaps-key dt, .datamaps-key dd {float: none !important;}
.datamaps-key {right: -50px; top: 0;}*/



.row_head{
    background-color: #011e41;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: x-large;
    color: #ffffff;
    height:90px;
    line-height: 90px;
    text-align: center;
    padding-top: 15px;

    /*position: relative;*/
}

.timelineTitle{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: large;
    height:40px;
    line-height: 40px;
    text-align: left;
    left: 40px;
    max-width: 90%;
    position: relative;
}

.timeline_events_title{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: medium;
    height:30px;
    line-height: 30px;
    text-align: left;
    max-width: 1000px;
    left: 80px;
    padding-bottom:50px;
    position: relative;
}

.timeline_events_title_table{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    font-size: medium;
    height:30px;
    line-height: 25px;
    text-align: left;
    max-width: 1000px;
    padding-left: 100px;
    padding-bottom:50px;
    position: relative;
}

.timeline_events_details{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-align: left;
    width: 85%;
    max-width: 1000px;
    left: 80px;
    position: relative;
}

.linechartStyle{
    height: 420px; 
    max-width: 920px; 
}

.singlebarchartStyle{
    height: 450px; 
    max-width: 920px; 
    margin: 0px auto
}





#panel{
    max-width: 1000px;
}

#English{
    width: 100%;

}

#Arabic{
    width: 100%;
    display: none;

}
#Ratio{
    width: 100%;
    display: none;

}


/*radio button*/

#radio_bt{
    padding-left: 60px;
}

input[type="radio"]:checked,
input[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
input[type="radio"]:checked + label,
input[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    padding-top: 2px;
    cursor: pointer;
    line-height: 18px;
    display: inline-block;
    color: #fff;
}
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #0a73b0;
    position: absolute;
    top: 5px;
    left: 9px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
input[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


#group1{
    padding: 4px 10px;
    background-color: #00205c;
    color: white;
    opacity: 0.6;
    font-size: 12px;
    font-weight: normal;
}

#group2{
    padding: 2px 8px;
    background-color: #00205c;
    color: white;
    opacity: 0.6;
    font-size: 12px;
    font-weight: normal

}


/*map bubbles*/
.bubble {
    fill-opacity: 1;
    stroke: #fff;
    stroke-width: .5px;
}


.font-show{
    font-size: 10px;
    color: #000;
    opacity: 1;
}

.font-hide{
    font-size: 10px;
    color: #000;
    opacity: 0;
}

div.tooltip {   
    position: absolute;         
    text-align: center;              
    padding: 2px;               
    font: 12px sans-serif;      
    background: lightsteelblue; 
    border: 0px;        
    border-radius: 8px;         
    pointer-events: none;           
}

/*About*/

/*.click{

    float: right;
    margin-right: 80px;
    width: 80px;
    padding-left: 20px;
    color: #333333;
    background: #fefefe;
    border: 1px solid #f0f0f0;
}
.click .a{
    color: #333333;  
}
.click .a:hover{
    color: steelblue;  
}

.bg{
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    background:#000;
    z-index:2;
    top:0;
    left:0;
    opacity:0.7;
}
.content{
    display:none;
    width:500px;
    height:300px;
    position:fixed;
    top:50%;
    margin-top:-150px;
    background:#fff;
    z-index:3;
    left:50%;
    margin-left:-250px;
}*/

#main { 
/*height:50px; */
padding-top:10px; 
text-align:center; 
} 
/*#fullbg { 
background-color:gray; 
left:0; 
opacity:0.5; 
position:absolute; 
top:0; 
z-index:3; 
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity:0.5; 
} */
#dialog { 
background-color:#fff; 
border:3px solid rgba(0,0,0, 0.1); 
height:400px; 
left:50%; 
margin:-200px 0 0 -200px; 
padding:1px; 
position:fixed !important; /* floating dialog */ 
position:absolute; 
top:50%; 
width:400px;
z-index:5; 
border-radius:6px; 
display:none; 
} 
#dialog p { 
height:12px; 
line-height:12px; 
font-size: 12px;
} 
#dialog .about{
    float:left;
    padding-top: 35px;
    padding-left: 20PX;
}
#dialog p{
    font-size: 12px;
    text-align: left;
}
#dialog p.close {
margin:0 0 12px; 
height:24px; 
line-height:24px; 
background:#CCCCCC; 
text-align:right; 
padding-right:10px; 
} 
#dialog p.close a { 
color:#333; 
text-decoration:none; 
} 

/* checkbox */



#categ{
    padding-left: 60px;
}


/*time axis*/

#wrap{
    height: 60px;
    width: 100%;
    display:inline-block;
    padding-top: 30px;
    padding-left: 2%;
    padding-right: 3%;
}
#wrap1{
    height: 60px;
    width: 100%;
    display:inline-block;
    padding-top: 30px;
    padding-left: 2%;
    padding-right: 3%;
}

#timeaxis{
/*    height: 60px;
    padding-top: 30px;*/
    width: 97%;
    margin-left: 1%;
    display:inline-block;
    height: 50px;
/*    border: 1px solid #c6bcb6;
    background-color: #c6bcb6;*/
}
#timeaxis1{
/*    height: 60px;
    padding-top: 30px;*/
    width: 97%;
    margin-left: 1%;
    display:inline-block;
    height: 50px;
/*    border: 1px solid #c6bcb6;
    background-color: #c6bcb6;*/
}


/* line area chart*/

.axis path,
.axis line {
fill: #999999;
stroke: #121401;
stroke-width: 1px;
shape-rendering: crispEdges;
}

#line_chart{
    heith:370px;
}

* {
    font-family: 'Libre Baskerville', serif;
}

h1, h2, h3, h4 {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 500;
}

body {
    background-color: #fcfbf8;
}

.footer {
    color: #A9A9A9;
    padding: 20px;
    bottom: 0;
}

.landing {
    height: 250px;
    margin: 0 auto;
    padding-top: 100px;
    text-align: center;
}

.landing h1 {
    font-size: 70px;
}

.container p {
    font-size: 16px;
}