html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#nav_carte {
    position: absolute;
    left: 0px;
    top: 0px;
}


/* To avoid scrollbar on body_map element*/
#body_map {
    overflow: hidden; /* Never display scrollbars  */
}




.search {
    margin-top: 1px;
    padding: 1px 0 0 0;
}

.search .search-wrapper {
    margin: 0 0px;
}

.search .search-wrapper.focused {
    margin: 0;
}

.search .search-wrapper input {
    display: block;
    font-size: 16px;
    font-weight: 300;
    width: initial;
    height: 45px;
    padding: 10px 45px 0 15px;
    border: 0;
}

.search .search-wrapper input:focus {
    outline: none;
}

.search .search-wrapper i.material-icons {
    position: absolute;
    top: 15px;
    right: 10px;
}




/*https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio */
.forceImageLandscapeAndKeepAspectRatio {
    object-fit: cover;
    width: 100%;
    height: auto;
    max-height: 50vh;
}





.centreContenu {
    justify-content: center;
    display: flex;
}




p {
    line-height: 2rem;
}


.parallax-container {
  min-height: 380px;
  line-height: 0;
  height: auto;
  color: rgba(255,255,255,.9);
}
  .parallax-container .section {
    width: 100%;
  }

@media only screen and (max-width : 992px) {
  .parallax-container .section {
    position: absolute;
    top: 40%;
  }
  #index-banner .section {
    top: 10%;
  }
}

@media only screen and (max-width : 600px) {
  #index-banner .section {
    top: 0;
  }
}

.icon-block {
    padding: 0 15px;
}
.icon-block .material-icons {
    font-size: inherit;
}

footer.page-footer {
    margin: 0;
}






/*  ************************************************************************************** */
/*  ************************************************************************************** */
/*  Different size for picture of the creator of a advert on mobile & on other devices     */
/*                     pictures of the producer in the news on mobile & on other devices   */
/*                     pictures in the chat on mobile & on other devices                   */

@media only screen and (max-width : 600px) {

    .profilePictureInChat {
        width: 45px !important;
        height: 45px !important;
    }

    .no_profilePictureInChat {
        width: 45px !important;
        height: 45px !important;
        line-height: 45px;
    }

    .pictureCreator_modal_Form_ViewGroup {
        width: 70px !important;
        height: 70px !important;
        vertical-align: middle;
    }

    .no_pictureCreator_modal_Form_ViewGroup {
        width: 70px !important;
        height: 70px !important;
        line-height: 70px;
        text-align: center;
        font-size: 2.3rem;
    }

    .pictureGroupMember_modal_Form_ViewGroup {
        width: 60px !important;
        height: 60px !important;
        vertical-align: middle;
        margin-left: 15px;
    }

    .no_pictureGroupMember_modal_Form_ViewGroup {
        width: 60px !important;
        height: 60px !important;
        line-height: 60px;
        text-align: center;
        font-size: 2.0rem;
        margin-left: 15px;
        vertical-align: middle;
    }

    .pictureProducer_modal_Form_ViewNews, .pictureProducer_modal_Form_EditGroupPurchaseOrder, .pictureProducer_Pages {
        width: 60px !important;
        height: 60px !important;
        vertical-align: middle;
    }

    .no_pictureProducer_modal_Form_ViewNews, .no_pictureProducer_modal_Form_EditGroupPurchaseOrder, .no_pictureProducer_Pages {
        width: 60px !important;
        height: 60px !important;
        line-height: 60px;
        text-align: center;
        font-size: 2.0rem;
    }

    .pictureGroupCreator_modal_Form_ViewNews {
        width: 60px !important;
        height: 60px !important;
        vertical-align: middle;
    }

    .no_pictureGroupCreator_modal_Form_ViewNews {
        width: 60px !important;
        height: 60px !important;
        line-height: 60px;
        text-align: center;
        font-size: 2.0rem;
    }

    #pictureProfileCreator_modal_Form_ViewAdvert {
        width: 70px !important;
        height: 70px !important;
        margin-right: 5px;
        vertical-align: top;
    }

    #no_pictureProfileCreator_modal_Form_ViewAdvert {
        width: 70px !important;
        height: 70px !important;
        line-height: 70px;
        text-align: center;
        font-size: 2.3rem;
    }

    .span_pictureProfileCreator_modal_Form_ViewAdvert, .span_pictureProducer_Pages {
        height: 70px;
        line-height: 70px;
    }

    #divContainer_profile_picture_modal_Form_EditAdvert {
        max-height: 80px !important;
    }

    #profile_picture_modal_Form_EditAdvert {
        width: 70px !important;
        height: 70px !important;
    }

    #no_profile_picture_modal_Form_EditAdvert {
        width: 70px !important;
        height: 70px !important;
        line-height: 70px;
        text-align: center;
        font-size: 2.3rem;
    }

    #div_Profile_picture_modal_Form_EditAdvert {
        top: -35px;
        left: 50px;
        position: relative;
    }
}


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


    .profilePictureInChat {
        width: 50px !important;
        height: 50px !important;
    }

    .no_profilePictureInChat {
        width: 50px !important;
        height: 50px !important;
        line-height: 50px;
    }

    .pictureCreator_modal_Form_ViewGroup {
        width: 90px !important;
        height: 90px !important;
        vertical-align: middle;
    }

    .no_pictureCreator_modal_Form_ViewGroup {
        width: 90px !important;
        height: 90px !important;
        line-height: 90px;
        text-align: center;
        font-size: 2.3rem;
    }

    .pictureGroupMember_modal_Form_ViewGroup {
        width: 75px !important;
        height: 75px !important;
        vertical-align: middle;
        margin-left: 15px;
    }

    .no_pictureGroupMember_modal_Form_ViewGroup {
        width: 75px !important;
        height: 75px !important;
        line-height: 75px;
        text-align: center;
        font-size: 2.1rem;
        margin-left: 15px;
        vertical-align: middle;
    }

    .pictureProducer_modal_Form_ViewNews, .pictureProducer_modal_Form_EditGroupPurchaseOrder, .pictureProducer_Pages {
        width: 75px !important;
        height: 75px !important;
        vertical-align: middle;
    }

    .no_pictureProducer_modal_Form_ViewNews, .no_pictureProducer_modal_Form_EditGroupPurchaseOrder, .no_pictureProducer_Pages {
        width: 75px !important;
        height: 75px !important;
        line-height: 75px;
        text-align: center;
        font-size: 2.1rem;
    }

    .pictureGroupCreator_modal_Form_ViewNews {
        width: 75px !important;
        height: 75px !important;
        vertical-align: middle;
    }

    .no_pictureGroupCreator_modal_Form_ViewNews {
        width: 75px !important;
        height: 75px !important;
        line-height: 75px;
        text-align: center;
        font-size: 2.1rem;
    }

    #pictureProfileCreator_modal_Form_ViewAdvert {
        width: 90px !important;
        height: 90px !important;
        margin-right: 5px;
        vertical-align: top;
    }

    #no_pictureProfileCreator_modal_Form_ViewAdvert {
        width: 90px !important;
        height: 90px !important;
        line-height: 90px;
        text-align: center;
        font-size: 2.3rem;
    }

    .span_pictureProfileCreator_modal_Form_ViewAdvert, .span_pictureProducer_Pages {
        height: 90px;
        line-height: 90px;
    }

    #divContainer_profile_picture_modal_Form_EditAdvert {
        max-height: 100px !important;
    }

    #profile_picture_modal_Form_EditAdvert {
        width: 90px !important;
        height: 90px !important;
    }

    #no_profile_picture_modal_Form_EditAdvert {
        width: 90px !important;
        height: 90px !important;
        line-height: 90px;
        text-align: center;
        font-size: 2.3rem;
    }

    #div_Profile_picture_modal_Form_EditAdvert {
        top: -35px;
        left: 65px;
        position: relative;
    }
}
/*  ************************************************************************************** */
/*  ************************************************************************************** */




    .item-picture {
        max-height: 50px;
        min-height: 50px;
    }






    .hideScrollbars {
        overflow-y: hidden; /* Hide vertical scrollbar */
        overflow-x: hidden; /* Hide horizontal scrollbar */
    }



    #modal_login_page {
        max-width: 500px;
    }

    #modal_registration_page {
        max-width: 500px;
    }

    #modal_forgot_password_page {
        max-width: 500px;
    }

    #modal_Form_ViewNews {
        max-width: 700px;
    }




    /*  ************************************************************************************************************************************************** */
    /*  Force To have a height 90% for #modal_Form_EditAdvert, #modal_Form_ViewNews, #modal_Form_AddAdvertItem_Stock, #modal_Form_EditAdvertItem_Stock, #modal_Form_ViewAdvert, #modal_Form_ViewGroup, #modal_Form_EditGroup, #modal_Form_EditSimpleUserPurchaseOrder, #modal_Form_EditGroupPurchaseOrder     */
    /*    on mobile & 80% on other devices */
    @media only screen and (max-width : 600px) {
        #modal_Form_EditAdvert, #modal_Form_ViewNews, #modal_Form_AddAdvertItem_Stock, #modal_Form_EditAdvertItem_Stock, #modal_Form_ViewAdvert, #modal_Form_ViewGroup, #modal_Form_EditGroup, #modal_Form_EditSimpleUserPurchaseOrder, #modal_Form_EditGroupPurchaseOrder {
            height: 90% !important;
            max-height: 90% !important;
        }
    }

    @media only screen and (min-width : 600px) {
        #modal_Form_EditAdvert, #modal_Form_ViewNews, #modal_Form_AddAdvertItem_Stock, #modal_Form_EditAdvertItem_Stock, #modal_Form_ViewAdvert, #modal_Form_ViewGroup, #modal_Form_EditGroup, #modal_Form_EditSimpleUserPurchaseOrder, #modal_Form_EditGroupPurchaseOrder {
            height: 80% !important;
            max-height: 80% !important;
        }
    }
    /*  ************************************************************************************************************************************************** */




    /*  ******************************************************* */
    /*  Hack to have larger Modal on mobile (using materialize) */
    /*  ******************************************************* */
    @media only screen and (max-width : 600px) {
        .modal:not(.bottom-sheet):not(.datepicker-modal) {
            width: 100% !important;
            top: 10% !important;
            max-height: 90% !important;
        }
    }
    /*  ******************************************************* */


    /*  ******************************************************* */
    /*  Hack to have heighter Modal on desktop (using materialize) */
    /*  ******************************************************* */
    @media only screen and (min-width : 600px) {
        .modal:not(.bottom-sheet):not(.datepicker-modal) {
            max-height: 80% !important;
        }
    }
    /*  ******************************************************* */




    /*  ********************************************************************************** */
    /*  ********************************************************************************** */
    /*  Hack to have the menu well displayed with the site title on tablet (landscape view */
    /*  ********************************************************************************** */

    /* No greater than 1170px, no less than 993px */
    @media (max-width:1170px) and (min-width:993px) {

        .brand-logo {
            position: relative;
            left: 5px;
        }

        nav ul:not(.dropdown-content) > li > a {
            font-size: 0.80rem;
        }

        .nav-wrapper {
            width: 100%;
            min-width: 100%;
        }

        nav i, nav [class^="mdi-"], nav [class*="mdi-"] {
            font-size: 18px;
        }

        nav a > i.material-icons:first-child:not(.switchTheme_i) {
            font-size: 0px;
            display: none;
        }

        i.left {
            margin-right: 4px;
        }
    }
    /* No greater than 1500px, no less than 1170px */
    @media (max-width:1500px) and (min-width:1170px) {

        .brand-logo {
            position: relative;
            left: 5px;
        }

        nav ul:not(.dropdown-content) > li > a {
            font-size: 0.90rem;
        }

        .nav-wrapper {
            width: 100%;
            min-width: 100%;
        }

        nav i, nav [class^="mdi-"], nav [class*="mdi-"] {
            font-size: 22px;
        }

        nav a > i.material-icons:first-child:not(.switchTheme_i){
            font-size: 0px;
            display: none;
        }

        i.left {
            margin-right: 5px;
        }
    }
    /* no less than 1500px */
    @media  (min-width:1500px) {

        .brand-logo {
            position: relative;
            left: -50px;
        }

        nav ul:not(.dropdown-content) > li > a {
            font-size: 0.90rem;
        }

        .nav-wrapper {
            width: 90%;
            min-width: 90%;
        }

        nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
            font-size: 22px;
        }

        i.left {
            margin-right: 5px;
        }
    }
    /*  ********************************************************************************** */
    /*  ********************************************************************************** */









    /*  ********************************************************************************************************************** */
    /*  ***********************Correct aspect ratio of the image with the class circle                          *************** */
    /*  ***********************                   used for image of the avatar used in the chat                 *************** */
    /*  ***********************                            image of the avatar used to display members of group *************** */
    /*  ***********************                            image profil,....                                    *************** */
    img.circle {
        object-fit: cover;
    }
    /*  ********************************************************************************************************************** */







    /*  Fix Material Icons Bug- Vertical Align Doesn't work well alongside text                                                */
    /*  ********************************************************************************************************************** */
    .myCardPanelFilters i.material-icons {
        vertical-align: middle;
    }
    /*  ********************************************************************************************************************** */






    /*  ********************************************************************************************************************** */
    /*  Fix Material SELECT Bug- with Scrool to height with a select with quite a number of options.   --> https://stackoverflow.com/questions/36466209/materialize-select-scrolling-issue?rq=1                                             */
    /*                                                                                                     April 2019 (bug in version 1.0 Materializecss  */
    /*  ********************************************************************************************************************** */
    .dropdown-content {
        max-height: 350px !important;
        overflow-y: auto !important;
        backface-visibility: hidden !important;
    }
    /*  ********************************************************************************************************************** */






    /*  ********************************************************************************************************************** */
    /* to allow smoth scrolling on Iphone Safari:                  */
    /*   --> https://github.com/Dogfalo/materialize/issues/5658    */
    /*   --> https://stackoverflow.com/questions/24455286/responsive-website-doesnt-scroll-smoothly-on-iphone    */
    /*  ********************************************************************************************************************** */
    .modal {
        -webkit-overflow-scrolling: touch;
    }
    /*  ********************************************************************************************************************** */





    /* On IOS, Buttons was not well rendered on the modal form with scroll */
    /*   --> https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela    */
    /*   --> https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/    */
    .modal .btn {
        -webkit-transform: translate3d(0, 0, 0);
    }

    .modal .btn-small {
        -webkit-transform: translate3d(0, 0, 0);
    }

    .modal .btn-floating {
        -webkit-transform: translate3d(0, 0, 0);
    }

    .modal .material-icons {
        -webkit-transform: translate3d(0, 0, 0);
    }

    .modal .avatar {
        -webkit-transform: translate3d(0, 0, 0);
    }

    .modal .circle {
        -webkit-transform: translate3d(0, 0, 0);
    }





    /*  ********************************************************************************************************************** */
    /* puts the google places autocomplete dropdown results above the  modal zindex. */
    .pac-container {
        z-index: 1051 !important;
    }
    /*  ********************************************************************************************************************** */







/*  ********************************************************************************** */
/*  ***********************************FOR THE BLOG********************************** */

article a.more-link {
    float: right;
}

div.valign-bottom-cell-wrapper {
    z-index: 900; /*  to fix an issue with the text caption displayed on the images in the blog */
}


.post-thumbnail img{
    max-width: 100%;
    object-fit: cover;
}

.found-details {
    display:none;
}

article.post {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: black groove;
}

/*  ********************************************************************************** */