h2 {
    font-family: "Gill Sans", "Lucida Grande", Arial, sans-serif;
}

.body {
    background-image: url('./../../images/SubtleNet-White-Simple-Seamless-Patterns-For-Website-Backgrounds.jpg');
    // z-index: 1;

    //background-image: url('http://127.0.0.1:8080/asuntomarkkinat/css/../images/tiny_grid.png');
    z-index: 1;
}

#ylanavi{
    position:absolute;
    top: -20px;
    left: 0px;
    width:100%;
    height:18px;
    background-color: #dcdcdc;
    opacity: 0.5;
    font-size: 10px;
    text-decoration: none;
    vertical-align: middle;
    z-index:99999;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

#ylanavi:hover{
    padding-top: 10px;
    opacity: 1;


}

.ylanavinLinkki{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: #666;
    text-decoration: none;
    padding-left: 15px;
}

.container{
    margin-top: 20px;
    margin-left: 20px;;
}

h2{
    text-align: left;
}

/**
Opastus liikuttaa hiirtä graafin päällä
*/
.instructionToDetails{
    margin-top: 150px;
}

/**
Vasemman laidan valinnat
*/
.valinnat{
    background-color: #e8e8e8;
    padding-top: 10px;

    border-style: none;
    border-width: 2px;
    border-color: #d3d3d3;
    border-radius: 2px;

    transition: all 1s;
    -webkit-transition: all 1s;

}

.valinnat-row{
    margin-bottom: 20px;
}

.valitut-row{
    color: grey;
    margin-bottom: 5px;
    margin-left: -15px;
    transition: all 1s;
    -webkit-transition: all 1s;
}

.valitut-row:hover {
    color: black;
}

.malliValinta{
    margin-top: 3px;
}

.mallinVarilaatikko{
    float: left;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    margin-right: 10px;
}

.piilotettu{
    visibility: hidden;
}

.kappyra{
    padding-top: 10px;

    /*background-color: #708090;*/
    border-style: none;
    border-width: 2px;
    border-color: #d3d3d3;
    border-radius: 2px;

}

/*
Oikeassa laidassa olevat mallien tiedot
*/

.loppukilometrit{
    border-style: solid; border-width: 0px 0px 2px 0px; border-color: rgb(43, 166, 203);
}

.loppukilometrit:hover{
    color: rgb(43, 166, 203);
}

.kilometriValintaB{
    display: none; position: absolute; left: 100px; width: 100px; height: 200px; background-color: #eeeeee; border: solid 1px #dddddd; z-index: 30;
}

.kilometriValintaB li{
    padding-left: 10px;
    list-style: none;
    font-family: 'Gill Sans';
    font-size: 14px;

}

.kilometriValintaB li:hover{
    background: #49A3FF;
    color: #FFF;

}

.tiedot{
    padding-top: 10px;

    /* background-color: #708090; */
    /*background-color: #e8e8e8;*/
    border-style: none;
    border-width: 2px;
    border-color: #d3d3d3;
    border-radius: 2px;
}

/* Oikeassa laidassa oleva mallin tietolaatikko*/
.tietolaatikko{
    /* background-color: #a9a9a9; */
    border-style: none;
    border-width: 2px;


    border-color: #d3d3d3;
    border-radius: 2px;

}

/* Oikeassa laidassa oleavan laatikon sulkemispainike*/
.removeIcon{
    top: 20px; float: right; text-align: right; color:red; font-size:14px; margin-right: 10px; margin-top: 7px;
    transition: all 0.3; webkit-transition: all 0.3;
}

.removeIcon:hover{
    /* font-size: 16px; */
    color: black;
}

/* Valittuna olevan hinnan tiputus*/
.valitunHinnantiputus{
    height: 54px;

    border-style: solid;
    border-width: 0px 0px 0px 0px; /* Jos tarvitaan kasvava alue jonka alalaita on merkin värillä, niin ala border 2 px */

    border-color: #d3d3d3;
    border-radius: 2px;

    line-height: 120%;
    margin-bottom: 15px;

    transition: all 0.3s;
    -webkit-transition: all 0.5s;
}

.hintatiputus_visualisaatio{
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.valitunHinnantiputus_otsikko{
    font-size: 14px;
}

.valitunHinnantiputus_tiedot{
    font-size: 13px;
}

.hintamuutosE{
    font-size: 13px;
}

.hintatiputus_pystyVisualisaatio{
    z-index: 10;
    position: relative;
    width: 100%;
    height: 15px;

    background-color: white;

    float: right;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.hintatiputus_pystyVisualisaationPohja{
    z-index: 9;
    width: 10px;
    height: 15px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    right: 10px;

    background-color: #4d4d4d;
    opacity: 0.5;

    float: right;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.lisatietoja_linkki{
    border-style: solid;
    border-width: 0px 0px 2px 0px;
    border-color: #2ba6cb;
    padding-bottom: 2px;
    width: 110px;

    font-size: 12px;
    line-height: 75%;
}

.lisatietoja_linkki a{
    color:black;
}

/* Kehoitus siirtää hiiri graafin päälle*/
.huomiolaatikko{
    color: #4d4d4d;

}

.piilotettuDisplay {
    display: none;
}

.valintaTemplate {
    display: none;
}

/* Alalaidan myynnissä taulukko*/
.myynnissa_ala_otsikko{
    padding-left: 40px;
}

.myynnissa_ala_taulukko{
    margin-left: 40px;

}

.myynnissa_ala_taulukko th { color: #708090; font-size: 11px;}

/* Oikean laidan myynnissä taulukko */

.filtterilinkki{
    padding-left: 5px;
}

.myynnissa_otsikko{

}

.myytavatAutotTaulukkoBody{
    font-size: 12px;
    height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
}

.myynnissa_taulukko_div {
    font-size: 12px;
    padding-left: 0px;
}

.valkoinenrivi{
    background-color: white; !important
}

/*.valkoinenrivi:hover{
    background-color: yellow;
}*/

.harmaarivi{
    background-color: #F9F9F9; !important
}

/*.harmaarivi:hover{
    background-color: yellow;
}*/

.taulukonVasenReuna{
    border-style:  solid;
    border-width: 0px 0px 0px 7px;
    border-color: #2ba6cb;
}



thead > tr, tbody{
    display:block;}


.delayIndicator{
    text-align: center;
}

/* Graafin otsikko*/
.graafinOtsikkoDiv{
    margin-bottom: 10px;
}

.graafinOtsikko{
    margin: 0px 0px 15px 0px;
    color: #4d4d4d;
}

.hinnantiputuksenOtsikko{
    margin: 0px 0px 15px 0px;
    color: #4d4d4d;
}


/* Nuolet */

.arrow { position:relative; width: 80px; }
.triangle-left {
    border-color: transparent #54ff5e transparent transparent;
    border-style: solid;
    border-width: 15px;
    width: 0;
    height: 0;
    float: left;
}
.triangle-right {
    border-color: transparent transparent transparent #54ff5e;
    border-style: solid;
    border-width: 15px;
    width: 0;
    height: 0;
    float: right;
}
.tail { width: 20px; height: 11px; position: absolute; background-color: #54ff5e}
.tail.left-arrow { left: 25px; top: 10px }
.tail.right-arrow { right: 25px; top: 10px }

.nuolenTeksti{
    margin-left: 70px;
}

/* Puppuoksennuksen tyylit */
.pupunOtsikko{
    color: #d3d3d3;
}

.pupunTeksti{
    color: #d3d3d3;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.pupunTeksti:HOVER{
    color: #4d4d4d;
}

/* ANIMAATIOT */

/* Nuolen animaatio */
.nuolenAnimaatio{
    animation: animaatio_nuoli 1s;
    -webkit-animation: animaatio_nuoli 1s; /* Safari and Chrome */

    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;

}


@keyframes animaatio_nuoli
{
    0% { margin-left: 0px;}
    50% { margin-left: 20px;}
    100% { margin-left: 0px;}
}

@-webkit-keyframes animaatio_nuoli /* Safari and Chrome */
{
    0% { margin-left: 0px;}
    50% { margin-left: 20px;}
    100% { margin-left: 0px;}
}

/* Oikean laidan animaatiot */
.oikeanLaidanAnimaatio{
    animation: animaatio_nuoli 1s;
    -webkit-animation: animaatio_nuoli 1s; /* Safari and Chrome */

    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;

    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}

@keyframes animaatio_oikeaLaita
{
    0% { margin-bottom: 100%;}
    50% { margin-bottom: 50%;}
    100% { margin-bottom: 0%;}
}

@-webkit-keyframes animaatio_oikeaLaita /* Safari and Chrome */
{
    0% { margin-bottom: 100%;}
    50% { margin-bottom: 50%;}
    100% { margin-bottom: 0%;}
}

#myytavatAutot{
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

#hinnantiputukset{
    transition: all 0.3s;
    -webkit-transition: all 0.3s;

}

/* Footer */

.footer{
    position: fixed;
    bottom: 0px;
    height: 20px;
    width: 100%;
    background-color: rgba(220, 220, 220, 0.5);
    opacity: 0.8;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;

}

.footer:hover{
    opacity: 1;
    height: 30px;
    padding-top: 5px;
}

.footer_teksti{
    font-size: 10px;
    margin-right: 20px;
    color: #4d4d4d;
}

.footer_teksti:hover{
    color: #2ba6cb;
}

.footer_cr{
    font-size: 10px;
    margin-left: 20px;
    margin-right: 20px;
    color: #4d4d4d;
}

.footer_cr:hover{

    // font-weight: bold;
}

.footer_teksti {

}

/* SVG tyylit */
.line {
    fill: none;
    stroke: #000;
    stroke-width: 2px;
}

.axis{
    font-family: "Helvetica Neue", Helvetica;
    font-size: 10px;
    color: rgb(199, 199, 199);

    fill: rgb(199, 199, 199);

}
.axis path,
.axis line {
    fill: none;
    stroke: rgb(199, 199, 199);
    color: rgb(199, 199, 199);
    shape-rendering: crispEdges;
}

.hintaympyra:hover{

}

/* X-akselin otsikko*/
.axisOtsikko {
    font-family: "Helvetica Neue", Helvetica;
    font-size: 10px;

    fill: rgb(150, 150, 150);
    /*fill: #4d4d4d;*/
}

line.tick{
    stroke:rgb(199, 199, 199);
}

path.domain{
    stroke: rgb(199, 199, 199);
    color: rgb(199, 199, 199);

}

.axis-y{
    font-family: "Helvetica Neue", Helvetica;
    font-size: 10px;
}
.axis-y path,
.axis-y line {
    fill: none;
    stroke: rgb(199, 199, 199);;
    shape-rendering: crispEdges;
}

.hintaIndikaattori{
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

/*General foundicons */


/* copy paste filttereille - pitää muokata*/
#sddm
{	margin: 0;
    padding: 0;
    z-index: 30;
}

#sddm li
{	margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}

#sddm li a
{	display: block;
    margin: 0 1px 0 0;
    padding-left: 10px;
    color: #2ba6cb;
    text-align: center;
    text-decoration: none;
}

#sddm li a:hover
{	/* background: #49A3FF */
    /*border-width: 0px 0px 2px 0px;
    border-style: solid;
    border-color: rgb(43, 166, 203);*/
    text-decoration: underline;
}


#sddm div
{	position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #e8e8e8;
    border: solid 1px #dddddd;}


#sddm div a
{	position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #eeeeee;
    color: #2ba6cb;
    font: 11px arial}

#sddm div a:hover
{	background: #49A3FF;
    color: #FFF}