body,html {
    margin: 0;
    width:100%; 
    height: 100%;
    background-color: #ffffff;
    font-family: 'Helvetica', sans-serif;
}

* {
    box-sizing: border-box;
}

h1 {
    color: #023047;
    text-align: center;
}

/*================== header================*/
body.open-about-us {
    overflow: hidden;
}

#head {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #023047;
    height: 50px;
}

#open-menu {
    height:50px;
    width: 50px;
    font-size: 20px;
    color: #fdfdfd;
    border: none;
    background: transparent;
}

#open-menu .fa-times {
    display: none;
}

#open-menu.active .fa-times {
    display: inline;
}

#open-menu.active .fa-bars {
    display: none;
}

#btn-search .fa-times {
    display: none;
}

#btn-search.active .fa-times {
    display: inline;
}

#btn-search.active .fa-search {
    display: none;
}

#logo img {
    padding: 0 10px;
    height: 20px;
}

#nav {
    z-index: 100;
    background-color: #e8e8e8;
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 30%;
    transform: translateX(-100%);
    transition: transform .2s linear;
}

#nav.visible {
    transform: translateX(0);
}

#nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav a {
    display: block;
    position: relative;
    padding: 15px;
    border-bottom: solid #d6d6d6 1px;
    text-decoration: none;
    color: #023047;
    font-size: 18px;
}

#nav a:before {
    content:"";
    position: absolute;
    left:0;
    right:100%;
    bottom:0;
    background: #DB4034;
    height: 2px;
    transition: right .2s ease-out;
}

#nav a:hover:before {
    right:0;
}

#nav li .fas {
    font-size : 18px;
    color:#DB4034;
    margin-right: 6px;
}

#nav .fa-phone-volume {
    transform: rotate(-45deg);
}

#nav a:hover {
    background-color: #01486b;
}

#btn-estimation, #btn-history, #btn-search, #btn-search-input {
    padding: 6px;
    position: absolute;
    right:0;
    margin-right: 20px;
    background: transparent;
    border: 1px solid #fdfdfd;
    border-radius: 6px;
    width: 32px;
}


#btn-estimation:hover ,#btn-history:hover, #btn-search:hover {
    background-color:#fdfdfd;
}

#btn-estimation .fas, #btn-history .fas, #btn-search .fas, #btn-search-input .fas {
    font-size: 18px;
    color: #fdfdfd;
}

#btn-estimation:hover .fas, #btn-history:hover .fas, #btn-search:hover .fas {
    color:#023047;
}

#btn-estimation span, #btn-history span {
    display: none;
}

#btn-estimation:hover span, #btn-history:hover span {
    color: #023047;
}

#search-bar.visible {
    display: block;
}

#search-autocomplete {
    display: none;
    position: absolute;
    padding: 7px 20px;
    top: 50px;
    background-color: #fdfdfd;
    z-index: 10000;
    left: 0;
    right: 0;
    height: 50px;
}

#search-container {
    width: 100%;
    display: flex;
}

#search-input {
    font-size: 16px;
    background: transparent;
    height: 36px;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid #023047;
    color: #023047;
    margin: 0;
    width: 100%;
}

#btn-search-input .fas {
    color: #023047;
}

#btn-search-input:hover .fas {
    color: #DB4034;
}

#search-container #btn-search-input {
    position: unset;
    margin-right: 0;
    height: 36px;
    border: 1px solid #023047;
    border-radius: 0 6px 6px 0;
    border-left: unset;
}

#search-autocomplete.visible {
    display: block;
}

@media screen and (min-width: 1100px) {

    #nav {
        background-color: transparent;
        position: static;
        transform: translateX(0);
        flex-grow: 1;
    }

    #nav a {
        line-height: 50px;
        font-size: 16px;
        height: 50px;
        padding: 0 20px;
        color: #fdfdfd;
        border: none;
    }

    #nav a:before {
        height: 4px;
    }
    
    #nav a.active {
        border-bottom: 4px solid #DB4034;
    }

    #nav a.active:hover:before {
        right:100%;
    }

    #nav li {
        float: left;
    }

    #nav li .fas {
        display: none;
    }

    #open-menu {
        display: none;
    }

    #btn-estimation, #btn-history {
        z-index: 100;
        width: unset;
    }

    #btn-estimation span , #btn-history span {
        display: inline-block;
        margin-left: 10px;
        font-size: 18px;
        color: #fdfdfd;
    }

    #btn-search {
        display: none;
    }

    #search-autocomplete {
        background: transparent;
        position: static;
        width: 300px;
        display: block;
    }

    #search-input {
        flex-grow: 1;
        height: 34px;
        padding: 2px 6px;
        border-radius: 6px;
        border: 1px solid #fdfdfd;
        color: #fdfdfd;
        width: 100%;
        background: transparent;
    }

    #search-container #btn-search-input {
        height:34px;
        border-radius: 0 6px 6px 0;
        border: 1px solid #fdfdfd;
        border-left: unset;
    }

    #search-container #btn-search-input .fas {
        color: #fdfdfd;
    }

    #search-container #btn-search-input:hover .fas {
        color: #DB4034;
    }    
}

/*================== container ================*/

.container {
    overflow: hidden;
    position: absolute;
    top:50px;
    right: 0;
    bottom: 0;
    left:0;
}

#map, #historyMap, #estimationMap {
    z-index: 1;
    width: 100%;
    height: 100%
}

/*================== search-bar ==========*/

.search-bar {
    display: none;
    position: sticky;
    z-index: 100000;
    background-color: #fdfdfd;
    height: 45px;
    left: 0;
    right: 0;
}

/*================== card ================*/

.card {
    position: absolute;
    height: auto;
    bottom: 30px;
    left: 20px;
    right: 20px;
    background: #fdfdfd;
    border-radius: 6px;
    z-index: 10000; 
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    color :#023047;
    display: block;
}

#card-estimation {
    background: #fdfdfd;
}

#card-estimation.card.hide {
    display: none;
}

#card-estimation .card {
    display: block;
}
.card.hide {
    display: block;
}

.card-title-global {
    overflow: hidden;
    margin-bottom: 10px;
    flex-grow: 1;
}

.close-btn-card .fas {
    font-size: 18px;
    color: #023047;
}

.close-btn-card .fas:hover {
    color: #DB4034;
    cursor: pointer;
}

.card-title {
    font-size: 24px;
}

.card-title-element {
    font-size: 15px;
    color: #DB4034;
    margin-left: 4px;
}
.card-icons {
    margin-top: 10px;
}

.card-icons, .card-value {
    display: flex;
    flex-direction: row;
    text-align: center;
    font-size: 24px;
}

.card-value {
    padding-bottom: 20px;
}

#flat-icon, #house-icon, #flat-value, #house-value {
    flex:1;
}

#flat-icon, #house-icon {
    color: rgba(2, 48, 71, 0.75);
}

#flat-value, #house-value, #map-price-card {
    font-size: 16px;
    font-weight: 500;
}

#map-price-card .card-header {
    display: flex;
}


.card-body {
    margin-top: 20px;
}

.card-footer {
    padding: 5px;
}

.container-prices {
    padding: 10px;
    display: flex;
    flex-direction: row;
}

.container-prices .data-scale-average-min-price {
   flex-grow: 1;
}

#map-price-card {
    display: none;
}

#map-price-card.visible {
    display: block;
}

#map-price-card #card-name:hover {
    cursor: pointer;
    color: #DB4034;
}

.bubble-card-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    right: 20px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    background-color: #fdfdfd;
    border-radius: 6px;
    z-index: 10000000;
    box-shadow: 0 0 15px rgba(0,0,0,.3);
    border: 1px solid #888888;
}

.bubble-card-icon:hover .fas {
    cursor: pointer;
}

.bubble-card-icon.visible {
    display: none;
}

.bubble-card-icon .fas {
    color: #DB4034;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
}

#scale {
    flex-grow:1;
    margin:0 20px;
    height: 20px;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    background: linear-gradient(to right, rgba(0,255,0,.8) 0%, rgba(255,127,0,.8) 50%,rgba(255,0,0,.8) 100%);
    z-index:100000;
}

@media screen and (min-width: 460px) {

    .card {
        width: 420px;
        right: unset;
    }

}

@media screen and (min-width: 1100px) {

    .card {
        top: 20px;
        left : 20px;
        width: 350px;
        bottom: unset;
    }

    .close-btn-card {
        display: none;
    }

    .bubble-card-icon {
        display: none;
    }

    .bubble-card-icon.visible {
        display: none;
    }

    #map-price-card #card-name:hover {
        cursor: default;
        color: #023047;
    }

    #map-price-card.visible, #map-price-card {
        display: block;
    }
}

/*================= Modal ===================*/

.modal, .about-us-modal-bg  {
    background-color: rgba(0,0,0,.7);
    z-index: 1000000;
    position: absolute;
    display: none;
    top: 50px;
    margin: 0 auto;
    bottom: 0;
    left: 0;
    right: 0;
}

.about-us-modal-bg.visible {
    display: block;
}

#estimation-modal {
    display: none;
}

#history-modal {
    display: none;
}

#history-modal.visible {
    display: block;
    z-index: 100;
}

#estimation-modal.visible {
    display: block;
    z-index:100;
}

.modal-container.visible {
    position: absolute;
    display: block;
    z-index: 1000;
    top: 100px;
    bottom: 50px;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    background-color: #fdfdfd;
    border-radius: 6px;
}


.about-us-modal-container {
    display: none;
    position: absolute;
    z-index: 1000000;
    top: 100px;
    bottom: 50px;
    left: 50px;
    right: 50px;
    background-color: #fdfdfd;
    border-radius: 6px;
}

.about-us-modal-container.visible {
    display: block;
}

.about-us-modal-header {
    color: #023047;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    height: 50px;
    padding: 2px 15px;
    border-radius: 6px 6px 0 0;
    background-color: #f1f1f1;
}

.about-us-title {
    flex-grow: 1;
    font-size: 22px;
}

.about-us-modal-header .fas:hover {
    color: #DB4034;
    cursor: pointer;
}

.about-us-modal-body {
    position: absolute;
    top:50px;
    right: 0;
    left:0;
    bottom: 0;
    padding:10px;
    overflow-y: scroll;
}

.container-img-about-us {
    overflow: hidden;
}

.container-img-about-us img {
    float: right;
    width: 180px;
    padding: 15px;
}

.about-us-modal-body p {
    text-align: justify;
    padding: 0 10px;
    color: #023047;
    font-size: 18px;
}

@media screen and (min-width : 1100px) {
    .about-us-modal-container {
        position: absolute;
        z-index: 10000000;
        top: 150px;
        bottom: 300px;
        left: 50%;
        margin-left: -400px;
        width: 800px;
        background-color: #fdfdfd;
        border-radius: 6px;
    }

    .container-img-about-us img {
        float: right;
        width: 250px;
    }
}

.modal-container {
    display: block;
}

.modal-container .modal-header {
    color: #023047;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    height: 50px;
    padding: 2px 15px;
    border-radius: 6px 6px 0 0;
}


.modal-header .title {
    flex-grow: 1;
}

.modal-header .fas:hover {
    color: #DB4034;
    cursor: pointer;
}

.modal-body {
    position: absolute;
    display: flex;
    flex-direction: column;
    top:50px;
    right: 0;
    left:0;
    bottom: 50px;
    padding:10px;
    overflow-y: scroll;
}

.btn-content {
    display: flex;
    flex-direction: column;
}

#icon-container-modal {
    padding: 20px 10px;
    display: flex;
    flex-direction: row;
    text-align: center;
    font-size: 28px;
    color: #023047;
}

.btn-choice-local-type {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    border-bottom: 2px solid #e2e2e2;
    outline: 1px solid #e2e2e2;
    border-radius: 2px;
    width: 90px;
    background-color: transparent;
    height: 90px;
}

.btn-choice-local-type:hover {
    background-color: #d6d6d6;
    cursor: pointer;
}

.btn-choice-local-type span {
    padding: 5px;
    font-size: 14px;
}

#btn-house-icon.selected, #btn-building-icon.selected {
    border-color: #DB4034;
    outline-color: #DB4034;
    border-radius: 4px;
    background-color: #e8e8e8;
}

#added {
    display: none;
    position:absolute;
    color: #DB4034;
    font-size: 12px;
    top:10px;
    right: 10px;
}

#btn-house-icon.selected .fa-check, #btn-building-icon.selected .fa-check{
    display: block;
}

.input-fields {
    padding: 10px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
}

.modal-input {
    display: flex;
    align-items: stretch;
    border: 1px solid #e8e8e8;
    width: 100%;
    margin-bottom: 10px;
}

#address {
    margin-bottom: unset;
}

.modal-input input {
    padding: 12px;
    border: none;
    width: 100%;
}

#input-container-address {
    padding: 12px;
}

#label-address, #label-nbRooms, #label-real-area-built, #label-ground-area {
    display: block;
    margin-bottom: 5px;
    color: #023047;
}

#location-span {
    color:#023047;
}

#location-span.error, #label-address.error {
    color:#DB4034;
}

#estimation-ground-area.error {
    border: 1px solid #DB4034;
}

#estimation-real-area-built.error {
    border: 1px solid #DB4034;
}

#real-area-built.error, #ground-area.error {
    border: 1px solid #DB4034; 
}

#nb-romms-select-btn.error {
    border: 1px solid #DB4034;
}

#radius-container {
    padding: 20px 10px 0 10px ;
    display: flex;
    align-items: center;
}

#radius-container input {
    margin-left: 10px;
    margin-right: 10px;

}

input[type="range"].radius-slider {
    color:#DB4034;
    accent-color: currentColor;
}

#radius-container span {
    color:#023047;
}

.modal-input span {
    color: #023047;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    background-color: #e8e8e8;
}

#select-nb-rooms-container {
    position: relative;
    margin-bottom: 10px;
}

.modal-select {
    text-align: left;
    position: relative;
    padding: 10px;
    width: 100%;
    border: 1px solid #e8e8e8;
    background-color: #ffffff;
}

.modal-select:hover {
    cursor: pointer;
}

.select-items {
    z-index:100000;
    position: absolute;
    display: none;
    background-color: #ffffff;
    height: 160px;
    overflow-y: scroll;
    border: 1px solid #e8e8e8;
    border-top: none;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#select-nb-rooms-container.visible .select-items {
    display: block;
}

.item {
    border-bottom: 1px solid #e8e8e8;
    padding: 10px;
}

.item:hover {
    background-color: #023047;
    color: #fdfdfd;
}

.modal-select .fas {
    float: right;
    color: #DB4034;
}

#select-nb-rooms-container .fa-chevron-down {
    display: none;
}

#select-nb-rooms-container.visible .fa-chevron-down {
    display: inline;
}

#select-nb-rooms-container.visible .fa-chevron-left {
    display: none;
}

.item {
    font-size: 14px;
}

.item:hover {
    cursor: pointer;
}

.item .fas {
    display: none;
    color: red;
    float: right;
}

.item.selected {
    background-color: #023047;
    color: #fdfdfd;
}

.item.selected .fas {
    display: block;
}

.modal-container .modal-footer {
    display: flex;
    position: absolute;
    border-top: 1px solid #e8e8e8;
    align-items: center;
    justify-content: right;
    bottom: 0;
    right: 0;
    left: 0;
    height: 50px;
    border-radius: 0 0 6px 6px;
    padding: 2px 15px;
}

#submit-estimation-btn, #cancel-estimation-btn, #cancel-history-btn, #submit-history-btn {
    color: #fdfdfd;
    font-size: 16px;
    padding: 4px 10px;
    background: #023047;
    border-radius: 6px;
    border: 1px solid #023047;
    margin-left: 10px;
}

#cancel-estimation-btn, #cancel-history-btn {
    margin-left: auto;
}

#submit-estimation-btn:hover, #cancel-estimation-btn:hover, #cancel-history-btn:hover, #submit-history-btn:hover {
    background-color: #fdfdfd;
    color: #023047;
    cursor: pointer;
}

@media screen and (min-width: 600px) {
    .modal-container.visible{
        width: 400px;
        margin-left: -200px;
    }
}

@media screen and (min-width: 1100px) {

    .modal-container.visible {
        width: unset;
        width: 400px;
        top: 150px;
        bottom: 100px;
        margin-left: -200px;
    }
}

/* =========== toogle ============ */

#toogle-btn-container {
    padding: 14px 0 0 10px;
    display: flex;
    align-items: center;
}

#toogle-btn-container #location-span {
    margin-left: 10px;
}

.switch {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}
  
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
  
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
  
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #DB4034;
}

input:focus + .slider {
    box-shadow: 0 0 1px #DB4034;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

/* ======== autocomplete ====*/
.autocomplete {
    position: relative;
}

.place-type {
    color: #DB4034;
    font-style: italic;
    font-size: 12px;
}

#search-dropdown {
    background-color: #fdfdfd;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: scroll;
}

#search-dropdown div:hover {
    background-color: #023047;
    color: #fdfdfd;
}

.autocomplete input {
    border: 1px solid #e8e8e8;
    width: 100%;
    margin-bottom: 10px;
    height: 40px;
    padding: 6px;
}

.autocomplete input.error {
    border: 1px solid #DB4034;
}

.autocomplete .dropdown {
    display: none;
    position: absolute;
    z-index: 1000;
    top: 40px;
    right: 0;
    left: 0;
    background: #eee;
    color: #023047;
}

#search-autocomplete .dropdown {
    display: none;
}

.dropdown div {
    padding: 6px;
}

.dropdown .fas {
    color: #DB4034;
    margin-right: 10px;
}

.autocomplete input:focus + .dropdown, .dropdown:active {
    display: block;
    border-radius: 0 0 6px 6px;
}

#search-autocomplete input:focus + .dropdown, #search-autocomplete .dropdown:active {
    display: block;
    border-radius: 0 0 6px 6px;
}

.autocomplete .dropdown div {
    cursor: pointer;
}

.autocomplete .dropdown div:hover {
    cursor: pointer;
    background: #023047;
    color: #fdfdfd;
}

.loader-container {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    background-color: rgba(0,0,0,.7);
    z-index: 9999;
}

#loader-map {
    top: 50px;
    z-index: 1000000;
}

.loader {
    position: absolute;
    border: 16px solid #f3f3f3; 
    border-top: 16px solid #DB4034;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    z-index: 1000000;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -60px;
}

.loader-container.visible {
    display: block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*========= panel ==========*/

.panel {
    background-color: #fdfdfd;
    right: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    z-index: 10000;
    position: absolute;
    transform: translateX(100%);
    transition: transform .2s linear;
}

@media screen and (min-width: 1100px){
    .panel {
        width: 400px;
    }
}

.panel.visible {
    transform: translateX(0);
}

#display-history-panel {
    display: none;
    position: absolute;
    height: 60px;
    width: 20px;
    left: -20px;
    top: 50%;
    margin-top: -30px;
    background-color: #fdfdfd;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color:#023047;
    padding: 0;
}

#display-history-panel.visible {
    display: block;
}

.panel.visible #display-history-panel .fa-caret-left {
    transform: rotate(180deg);
    margin:0;
    padding: 0;
}

#display-history-panel:hover {
    color: #DB4034;
}

#assets-details {
    overflow-y: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px;
}

.container_asset {
    padding-top:10px;
    padding-bottom:10px;
    border-bottom: 1px solid #aeaeae;
    font-size: 18px;
    color: #023047;
}

.container_asset:not(:last-of-type) {
    margin-bottom: 20px;
}

.container_asset .data_history_title {
    font-weight: bold;
}

.container_nbRooms {
    padding-top:10px;
    width:150px;
}

.container_nbRooms .label{
    margin-bottom:5px;
}

.card-history {
    display:flex;
    width:100%;
    align-items: center;
}
  
.content-estimation {
    display: flex;
    align-items: center;
}

.card-history .local_type_icon, #card-estimation .local_type_icon {
    font-size: 32px;
    flex:1;
    color: #aeaeae;
    text-align: center;
}

.card-history .land_value_address, #card-estimation .land_value_address {
    flex:3;
} 
  
.card-history .land_value, #card-estimation .land_value {
    margin-bottom: 4px;
    font-size: 22px;
}

.card-history  .address, #card-estimation .address {
    font-size: 12px;
    color:#4d4d4d;
}

.card-history .logo_address i, #card-estimation .logo_address i {
    font-size: 12px;
    color:red;
    margin-right: 4px;
}

.border_separator {
    border-bottom: 1px solid #e6e6e6;
    margin:10px 15px;
}

.data_infos {
    display:flex;
    width:100%;
    align-items: center;
    padding:0 15px;
}

.data_infos .nbRooms {
    flex:1;
    font-size: 16px;
    color:#aeaeae;
    text-align: center;
}

.data_infos .nbRooms i {
    margin-right: 5px;
}

.data_infos .realAreaBuilt {
    flex:1;
    font-size: 16px;
    color:#aeaeae;
    text-align: center;
}

.data_infos .realAreaBuilt i {
    margin-right: 5px;
}

.data_infos .groundArea {
    flex:1;
    font-size: 16px;
    color:#aeaeae;
    text-align: center;
}

.data_infos .groundArea i {
    margin-right: 5px;
}

.date_mutation {
    flex:1;
    font-size: 16px;
    margin-bottom: 10px;
    color:#aeaeae;
}

.date {
    color:#023047;
}

.data_infos .nbRooms .furnished {
    color:#023047;
}

.data_infos .realAreaBuilt .value_area_built {
    color:#023047;
}

.data_infos .groundArea .value_ground_area {
    color:#023047;
}

.data_infos {
    color:#023047;
    font-size: 18px;
}

.data_infos .icon_estimation_flats {
    width:100%;
    height: 100%;
    text-align: center;
}

.data_infos_estimation, .data_infos_estimation_percent {
    width:100%;
    text-align: center;
    padding: 15px 15px 25px 15px;
    color: #023047;
    font-size: 16px;
}
.data_infos_estimation_percent {
    justify-content: center;
    padding: 0 15px 10px 15px;
}

.data_infos_estimation_percent i {
    text-align: center;
}

.data_infos_estimation .stats_estimation_flats {
    text-align: center;
    flex:1;
}

.container-index {
    max-width: 400px;
    position: absolute;
    overflow: hidden;
    left: 50%;
    margin-left: -200px;
    top: 150px;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

#title {
    font-size: 30px;
    margin-top: 40px;
}

@media screen and (min-width : 1200px) {
    .container-index {
        max-width: unset;
        flex-direction: row;
        left: 100px;
        right: 100px;
        margin-left: unset;
    }
}

.tile {
    flex:1;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}

.tile:not(:last-child) {
    margin-bottom: 40px;
}

.info-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.info-container label {
    color: #023047;
    margin-bottom: 15px;
    display: block;
}

.info-container a {
    font-size: 16px;
    text-decoration: none;
    color: #DB4034;
    display: block;
}

.info-container a .fas {
    font-size: 14px;
    margin-left: 6px;
}

.info-container p {
    display: block;
    font-weight: normal;
    text-align: justify;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.info-container:hover a {
    cursor: pointer;
}

#tile-map-price, #tile-estimate, #tile-history {
    font-size: 20px;
    font-weight: bold;
    color: #023047;
    background-color: #fdfdfd;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
}

.tile-img-container {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.tile-img-container img {
    width: 100%;
    transition: transform .1s;
}

.tile-img-container  img:hover {
    transform: scale(1.03);
}

@media screen and (min-width: 1200px) {

    .tile-img-container {
        max-height: 350px;
    }

    .tile:not(:last-child) {
        margin-bottom: 0;
        margin-right: 40px;
    }
}
#breadcrumb ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#breadcrumb li {
    float: left;
    font-weight: normal;
}

#breadcrumb a:hover {
    cursor: pointer;
    color: #023047;
}
#breadcrumb a {
    color: #DB4034;
}

#breadcrumb span {
    color: #023047;
}

#myChart {
    margin-top: 20px;
}

.filter-type {
    z-index: 10000;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 20px;
    top : 20px;
    background-color: #fdfdfd;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    width: 40px;
    height: 40px;
    box-shadow: 0 0 15px rgba(0,0,0,.3);
    border: 1px solid #888888;
}

.filter-type:hover {
    cursor: pointer;
}

.filter-type .fas {
    font-size: 20px;
    margin: 0;
    color: #DB4034;
}

.filter-modal-background {
    display: none;
    position: absolute;
    z-index: 100000;
    left: 0;
    right: 0;
    bottom: 0;
    top: 50px;
    background-color: rgba(0,0,0,.7);
}

.filter-modal-background.visible {
    display: block;
}

.filter-modal {
    display: none;
    position: absolute;
    z-index: 100000;
    background-color: #fdfdfd;
    left: 50%;
    width: 300px;
    margin-left: -150px;
    bottom: 50%;
    margin-bottom: -100px;
    border-radius: 5px;
}

.filter-modal.visible {
    display: block;
}

.filter-modal .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    top: 0;
    right: 0;
    height: 50px;
    border-bottom: 1px solid #e8e8e8;
    color: #023047;
}

.filter-modal .header span {
    flex-grow: 1;
    font-size: 18px;
    font-weight: 600;
}

.filter-modal .header .fas {
    font-size: 18px;
    margin-right: 5px;
}

.filter-modal .header .fas:hover {
    color: #DB4034;
    cursor: pointer;
}

.filter-modal .footer {
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    border-top: 1px solid #e8e8e8;
    color: #023047;
}

.filter-modal .footer button {
    color: #fdfdfd;
    font-size: 16px;
    padding: 4px 10px;
    background: #023047;
    border-radius: 6px;
    border: 1px solid #023047;
    margin-left: auto;
}

.filter-modal .footer button:hover {
    cursor: pointer;
    color: #023047;
    font-size: 16px;
    padding: 4px 10px;
    background: #fdfdfd;
    border-radius: 6px;
    border: 1px solid #023047;
}

.filter-modal .body {
    padding: 10px 20px;
    color: #01486b;
    font-size: 16px;
}

.select-container-type, .year-container-type {
    position: relative;
}

.filter-modal .body .select-type, .filter-modal .body .select-year {
    height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #01486b;
    display: flex;
    align-items: center;
    padding: 5px 10px;
}

.filter-modal .select-type span, .filter-modal .select-year span {  
    flex-grow: 1;
}

.filter-modal .body .type-dropdown,.filter-modal .body .year-dropdown {
    display: none;
    position: absolute;
    z-index: 100000;
    top: 40px;
    left: 0;
    right: 0;
    background-color: #fdfdfd;
    border: 1px solid #023047;
    border-radius: 5px;
    height: 100px;
    overflow-y: scroll;
}
  
.filter-modal .body .type-dropdown.visible, .filter-modal .body .year-dropdown.visible{
    display: block;
}

.item-type, .item-year {
    border-bottom: 1px solid #e8e8e8;
    padding: 10px;
}

.item-type:hover, .item-year:hover {
    background-color: #023047;
    color: #fdfdfd;
}

.filter-modal .body #year-label {
    margin-bottom: 20px;
}

.filter-modal .body .filter-title {
    font-weight: 600;
}

.filter-modal .body .filter-title .fas {
    color: #DB4034;
}


@media screen and (min-width : 1100px) {

    .filter-type {
        display: none;
    }

    .filter-modal {
        display: block;
        top: unset;
        right: 20px;
        bottom: 20px;
        margin-left: unset;
        left: unset;
        margin-bottom: unset;
        padding: 10px 0;
    }

    .filter-modal .header {
        display: none;
    }

    .filter-modal .footer {
        display: none;
    }
    .filter-modal .body .year-dropdown  {
        top: unset;
        bottom:40px;
        height: 240px;
    }
}

.sources {
    display: flex;
    padding: 20px;
    flex-direction: column;
}

.sources .data-source {
    display: flex;
    flex-direction: column;
    flex:1;
}

.sources .data {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.sources .data label {
    margin-bottom: 5px;
}

@media screen  and (min-width: 800px){
    .sources {
        flex-direction: row;
    }
}