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;
        }












p {
  line-height: 2rem;
}

.sidenav  {
  color: #26a69a;
}

.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;
}






#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;
}


/*  ******************************************************* */
/*  Hack to have larger Modal on mobile (using materialize) */
/*  ******************************************************* */
@media only screen and (max-width : 600px) {
    .modal:not(.bottom-sheet) {
        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) {
        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: -140px;
    }

    nav ul a {
        font-size: 0.85rem;
    }
    .nav-wrapper {
        width: 85%;
    }
    nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
        font-size: 20px;
    }
    i.left {
        margin-right: 5px;
    }
}
/* No greater than 1260px, no less than 1170px */
@media (max-width:1260px) and (min-width:1170px) {

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

    nav ul a {
        font-size: 0.90rem;
    }
    .nav-wrapper {
        width: 85%;
    }
    nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
        font-size: 22px;
    }
    i.left {
        margin-right: 5px;
    }
}
/* No greater than 1550px, no less than 1260px */
@media (max-width:1550px) and (min-width:1260px) {

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

    nav ul a {
        font-size: 0.90rem;
    }
    .nav-wrapper {
        width: 85%;
    }
    nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
        font-size: 22px;
    }
    i.left {
        margin-right: 5px;
    }
}
/*  ********************************************************************************** */
/*  ********************************************************************************** */






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

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

nav ul li a:hover {
    color: #fff;
}


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

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







/*  ********************************************************************************************************************** */
/*  ***********************Correct aspect ratio of the image of the avatar used in the chat******************************* */
.collection .collection-item.avatar img
{
    object-fit: cover;
    max-height: 42px;
}
/*  ********************************************************************************************************************** */


/*  ********************************************************************************************************************** */
/*  ***********************Correct aspect ratio of the image of the avatar used to display members of group************ */
#div_GroupMembers_modal_Form_ViewGroup img.circle
{
    object-fit: cover;
    max-height: 56px;
}
/*  ********************************************************************************************************************** */







/*  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);
}