#map{
    width:98%;
    height:500px;
}

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

#bar_chart_ar{
    width:98%;
    height:250px;
    padding-top: 30px;
}

#slider { 
    width:84%;
    margin-left: 125px;
    margin-bottom: 15px;
}

#slider_ar { 
    width:84%;
    margin-left: 125px;
    margin-bottom: 15px;
}

/* 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;
*/    
}

.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: black;
}


.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:45%;
  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;
}

.auto_tip{
    font-size: small;
    color: #9e9e9e;
}

.slide_tip{
    margin-left: 73px;
    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;}*/


#English{
    width: 100%;

}

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

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

}


/*radio button*/

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;
}
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{
    width: 100%;
    text-align: center;

}


/*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;         
    width: 60px;                    
    height: 28px;                   
    padding: 2px;               
    font: 12px sans-serif;      
    background: lightsteelblue; 
    border: 0px;        
    border-radius: 8px;         
    pointer-events: none;           
}

#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; 
}

#categ p {
    font-size: 1.3rem;
}
#categ {
    margin: 0 auto;
}


#categ_ar{
}


/*time axis*/

#wrap{
    height: 60px;
    width: 100%;
}

#timeaxis{
/*    height: 60px;
    padding-top: 30px;*/
    width: 97%;
    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;
}

html {
    scroll-behavior: smooth;
}

* {
    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;
}

.col-md-8 h2 { 
    padding: 15px;
}

#super p {
    font-size: 1.3rem;
}

#super li {
    font-size: 1.3rem;
}

#super {
    background-color: #fcfbf8;
}

#radio-bt {
    margin: 0 auto;
}

#week {
    text-align: center;
    margin: 0 auto;
}

.row-heading {
    text-align: left;
    padding: 15px;
}

.final-notes {
    font-size: 1.3rem;
    padding: 20px;
}

.map_tooltip {
    position: absolute;
    word-wrap: break-word;
    max-width: 300px;
    padding: 5px;
    background-color: white;
    border-style: solid;
}

#play_button {
    transform: scale(1.2);
    float: right;
    margin: 0 auto;
}