html, body {
 font-family:  'Roboto Slab', serif;
}
/*
   color palette
    */

:root {
    --petrol-color: #086375;
    --petroldark-color: #003245;
    --sky-color: #8DCEE2;
    --violet-color: #482b4b;
    --peach-color: #F7C788;
    --rose-color: rgb(235, 177, 188);
}

/* slider and timeline*/


.form-range{
    margin:auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    opacity: .70;
}

.form-range:hover{
    opacity: 1;
}
.form-range::-webkit-slider-thumb {
    -
    appearance: none;

    background:var(--petrol-color); /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.form-range::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background:var(--petrol-color);/* Green background */
    cursor: pointer; /* Cursor on hover */
}

.field{
    margin:auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    justify-self: center;
    width: 30em;

}
.field .value{

}
.field input{
    -webkit-appearance: none;

}
.range .sliderValue{
    
}
.Cyear .sliderValue span{
    font-size: 2rem;
    padding-bottom: 1em;

}


.minval {
    padding: 0 2rem 0 2rem;
    font-size: 1.2rem;
}

.maxval {
    padding: 0 2rem 0 2rem;
    font-size: 1.2rem;
}

.yearSelection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;

}

.fp-tableCell{
    vertical-align: baseline !important;
}

.globalscore{
    position: absolute;
        top: 70%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);

}

.titolo{
    color: var(--petrol-color);
    padding: 1rem;
}

.playbtn{

    width: 2em;
    height: 2em;
    margin:auto;
    background: url("img/left.png");

}



#button_play{
    background:url("img/left.png");
    background-size: contain;
}

#country2{background: transparent;}

.flex-container{
    display: flex;
}

.flex-flag{
    flex:0.4;
}

.IndexRank{
    display: flex;
    margin-top: 1em;
    margin-bottom: 1em;
    color: whitesmoke;
}

.rankfilter {
    display: flex;
    flex-direction: column;
}
/*ranking positioning*/
.chart{
    display:flex;
    padding: 3.5%;
    padding-top: 0%;
}
.fa{
    color: var(--petrol-color);
}
/*ranking btn edit*/
.rkfil{
    padding-top: 6em;

}
.rankfilter.btn{
    font-weight: bold;
}
/*background image in ranking page*/
#section1{
    background-image: url("./../img/Asset 48.svg");
    background-size: cover;
}
/*positioning and style of elements in country details page*/
.dotleft {
    height: 25px;
    width: 25px;
    background-color: var(--violet-color);
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
    opacity: 0.7;
}

.dotright {
    height: 25px;
    width: 25px;
    background-color: var(--peach-color);
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    opacity: 0.7;
}

.dotright:hover {
    transition: 0.3s;
    opacity: 1;

}

.dotleft:hover {
    transition: 0.3s;
    opacity: 1;
}

.btn-light{
    opacity: 0.9;
}
.btn-light:hover{
    opacity: 1;
}

.indicon{
    width:1em !important;
    height: 1em;
    margin-left:1em;
}