/* ------------------- Fonts -------------------- */
@font-face {
    font-family: "Raleway Italic Bold";
    src: url("assets/fonts/Raleway/Raleway-BoldItalic.ttf");
}

@font-face {
    font-family: "Raleway Bold";
    src: url("assets/fonts/Raleway/Raleway-Bold.ttf");
}

@font-face {
    font-family: "Raleway Black";
    src: url("assets/fonts/Raleway/Raleway-Black.ttf");
}
@font-face {
    font-family: "Raleway Black Italic";
    src: url("assets/fonts/Raleway/Raleway-BlackItalic.ttf");
}
@font-face {
    font-family: "Raleway";
    src: url("assets/fonts/Raleway/Raleway-Regular.ttf");
}



/* ------------------- App syles -------------------- */

.bg {
    background-image: url("assets/bg2.jpg") ;
    background-size: 100%;
    min-height: 100vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center;
}


.app {
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    animation: fadein 1s;
    animation-fill-mode: backwards;
    animation-delay: 0.5s;
}

/* ------------------- Bar chart styles -------------------- */

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

text,
.axis text {
  font-size: 12px;
  font-family: "Raleway Bold";
  font-weight: bold;

}

#legend{
    transform-origin: bottom left !important;
    background: red;
}
#countryData p {
    font-size: 10pt;
}


/* Remove adsbox */
.adsbox{
    display: none;
}

/* ------------------- Utility styles -------------------- */
.fill-height{
    height: 100%;
}

.background {
    fill: none;
    pointer-events: all;
}


.hidden {
    display: none;
}


/* ------------------- Info bar styles -------------------- */

.life-time{
    font-family: "Raleway Bold";
    font-weight: bold;
}

.life-time-data{
    font-family: "Raleway Bold";
}

#countryFlag {
    max-height: 80px;
}

.flag {
    height: 60px;
}


#countryInfo {
    min-height: 430px;
    height: 65vh;
    width: 30vw;
    border-radius: 0 .25rem .25rem 0;
}

.noData{
    font-family: "Raleway Bold";
}


#countryHeader {
    background: rgb(236, 233, 233);
    border-radius: 0 .25rem 0 0;
}


#countryName {
    font-family: "Raleway Black";
}

.header {
    color: white;
    font-family: "Raleway Bold";
}

#introHeader{
    font-family: "Raleway Bold";
    font-size: 2vw;
}

#introText{
    font-family: "Roboto";
    font-size: 1vw;
}

/* ------------------- Map styles -------------------- */

.map {
    background-color: rgb(230, 246, 248);
    min-height: 430px;
    height: 65vh;
    width: 60vw;
}

.country:hover {
    fill: #aaa !important;
    transition: 0.2s ease fill;
}

.country {
    stroke: white;
    stroke-opacity: 0.3;
}




/* ------------------- Button styles -------------------- */

.menu-btn{
    font-family: "Raleway Bold";
}

.btn-style {

    font-family: "Raleway Bold";
}

.wave-active{
    background: rgb(233, 143, 8) !important;
    color: white !important;
}

.active {
    fill: orange;
}

.active:hover {
    fill: orange !important;
    transition: 0.3s ease fill;
}

.category-color-item{
    font-size: 12pt;
    list-style-type: none;
    font-weight: bold;
}


/* ------------------- Modal styles -------------------- */

.modal-body p{
    font-family: "Roboto" ;
}

.modal-body h4{
    font-family: "Raleway Black";
}

.modal-header {
    font-family: "Raleway Black";
}

.close-button{
    cursor: pointer !important;
}

.dot {
    height: 15px;
    width: 15px;
   
    display: inline-block;
  }


/* ------------------- Dropdown category styles -------------------- */
.dropdown-title{
    font-family: "Raleway Bold";
}

.dropdown-item{
    font-family: "Raleway Bold";
}


/* Tooltip styles */
div.tooltip {
    color: rgb(5, 5, 5);
    background: #fff;
    padding: 0.5em;
    text-shadow: #f5f5f5 0 1px 0;
    border-radius: 2px;
    box-shadow: 0px 0px 2px 0px #a6a6a6;
    opacity: 0.9;
    position: absolute;
    font-family: "Raleway Black";
}

.info {
    cursor: pointer;
    max-height: 35px;
}


/* ------------------- Animations -------------------- */

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* ------------------- Media queries -------------------- */

@media (max-width: 1200px){
    #introText{
        font-size: 8pt;
    }
}