/*_Tools______________________________*/
@import url('https://fonts.cdnfonts.com/css/montserrat');
body {
	font-family: "Montserrat";
}
.notSame {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5) !important;
}
.alert {
    margin: auto;
    padding: 5px;
    border-radius: 0 !important;
    transition: 0.3s all;
}
.bg-dark-degrad {
    background: rgba(33, 37, 41, 0.5);
}
.bg-dark-degrad2 {
    background: rgba(33, 37, 41, 0.75);
}
.fa-cloud-check {
    font-size: 50px;
}
.br-0 {
    border-radius: 0 !important;
}
.br-50 { border-radius: 50% !important; }
@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?bl3z76');
    src:  url('fonts/icomoon.eot?bl3z76#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?bl3z76') format('truetype'),
    url('fonts/icomoon.woff?bl3z76') format('woff'),
    url('fonts/icomoon.svg?bl3z76#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-logo-false:before {
    content: "\30";
    font-size: 50px;
    font-weight: bold;
}
.icon-logo-true:before {
    content: "\31";
    font-size: 50px;
    font-weight: bold;
}
.icon-logoFill:before {
    content: "\32";
    font-size: 50px;
    font-weight: bold;
}
.w-33 {
    width: 33%;
}
.invisible {
    display: none !important;
    padding: 0 !important;
}
.text-bleu {
    color: #1889A0;
}
.bg-bleu {
    background: #1889A0;
}
.bg-bleuu {
    background: #126D7F;   
}
.bg-vert {
    background: #86E3B7;
}
.bg-vert2 {
    background: #70C68B;
}
.badge {
    margin-left: 5px;
    margin-right: 5px;
    width: 50px;
    height: 50px;
    background: #212529;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: 0.3s all;
}
.badge:hover {
    width: 60px;
    height: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.badge .fa-duotone {
    position: relative;
    font-size: 25px; 
}
.badge_bronze { 
    color: #AA7021; 
}
.badge_argent { 
    color: #ADB1BE; 
}
.badge_or { 
    color: #ffe140; 
}
.badge_rouge { 
    color: #F44141; 
}
.badge_bleue { 
    color: #4199F4; 
}
.badge_diamant { 
    color: #79f8f8;
}
.badge_vert { 
    color: #51E07D;
}

.fa-user-plus {
    transition: 0.3s all;
    cursor: pointer;
    font-size: 20px;
}
.fa-user-plus:hover {
    color: #2AA95C;
}
.w-90 {
    width: 75%;
}
.h-25 {
    height: 25%;
}
.h-75 {
    height: 75%;
}
#title-nav-s {
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
}
.w-33 {
    width: 33%;
}
.w-25 {
    width: 25%;
}
.w-75 {
    width: 75%;
}
/*_Padding_*/
.p-0 {
    padding: 0;
}
.pl-5 {
    padding-left: 5px;
}
.pb-15 {
    padding-bottom: 15px;
}
.pb-20 {
    padding-bottom: 20px;
}
.pr-5 {
    padding-right: 5px;
}
.pr-15 {
    padding-right: 15px;
}
/*_Margin_*/
.m-0 {
    margin: 0 !important;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-15 {
    margin-bottom: 15px;
}
.mb-20 {
    margin-bottom: 20px;
}
.respire {
    margin-top: 15px;
    margin-bottom: 15px;
}
.text-deco {
    text-decoration: none;
    color: #212529;
    transition: 0.3s all;
}
.text-deco:hover {
    color: #1889A0;
}
.display-co {
    transform: translateY(-100vh);
    transition: 1s all ease;
    z-index: 500;
}
.undisplay-co {
    transform: translateY(100vh);
    transition: 2s all ease;   
}
.opa-0 {
    opacity: 0%;
}
.link-perso2 {
    cursor: pointer;
    transition: 0.3s all;
}
/*_Scrollbar__________________________*/

html {
/*    overflow: overlay;*/
}
/* width */
::-webkit-scrollbar {
	width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #212529;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 25px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555;
}
#register ::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23f9f9f9" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}
/*_Button_Perso_______________________*/

.btn-perso {
    padding: 10px 25px;
    background: #212529;
    transition: 0.3s all;
    border-radius: 25px !important;
}
.btn-perso:hover {
    color: #212529 !important;
}
.btn-perso-inverse {
    color: #0dcaf0;
    padding: 10px 25px;
    transition: 0.3s all;
    background: #212529;
    border-radius: 25px !important;
    font-weight: bold !important;
    border: solid 1px #0dcaf0;
}
.btn-perso-inverse:hover {
    color: #212529 !important;
    border: solid 1px #0dcaf0;
    background: #0dcaf0 !important;
}
/*_____ V2 _____*/
.btn-perso2 {
    padding: 10px 25px;
    background: #212529;
    transition: 0.3s all;
    border-radius: 0;
}
.btn-perso2:hover {
    color: #212529 !important;
}
/*_Form-control________________________*/
input[type=file]::file-selector-button {
    background: lightgrey;
    transition: 0.3s all;
}
/*_____v2_____*/
.fm2 {
    background: lightgrey;
    border-bottom: solid 0.1px #A3A3A3;
    margin-bottom: 15px;
}
.fm2:focus {
    border-color: lightgrey;
    box-shadow: 0 0 0 0.2rem rgba(11, 11, 11, 0.05);
    background: #C6C6C6 !important;
} 
.fm2:valid {
    border-color: lightgrey;
    background: #B9B9B9 !important;
}
/*_Link_perso__________________________*/ 
.link-perso {
    color: #0dcaf0;
    cursor: pointer;
    transition: 0.3s all;
}
.link-perso:hover {
    color: #1889A0;
}
/*_Parallax____________________________*/
.parallax {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/*_Login_______________________________*/
#byethan #by {
    margin-right: 5px;
}
#micard {
    margin-right: 2.5px;
}
#ethan {
    margin-left: 2.5px;
}
@keyframes AnimateBG { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
#test2 {
    z-index: 1000;
    transition: 0.5s all ease;  
}
#login .alert {
    border-radius: 15px !important;
}
#login .fa-eye {
    color: #f9f9f9;
    position: relative !important;
    top: -50px;
    left: 210px;
    cursor: pointer;
    transition: 0.3s all;
}
#login a {
    text-decoration: none !important;
}
/*_Register____________________________*/

#register a {
    text-decoration: none !important;
}
#register td {
    padding-left: 6px;
    padding-right: 6px;
}
#register #btn-faq {
    cursor: pointer;
}
.svg-faq {
    max-height: 300px;
}
/*_Nav_________________________________*/
#nav {
    background: #212529;
    padding: 0;
}
.nav-item  .btn-nav-v2:hover {
    border-radius: 50%;
    transition: 0.3s all;
}
.nav-item  .btn-nav-v1:hover {
    border-radius: 50px;
    transition: 0.5s all;
}
.dropdown-menu {
    background: #212529;
}
.dropdown-menu a {
    background: #212529;
    transition: 0.3s all;
}
.dropdown-menu a:hover {
    background: #212529;
    color: #f9f9f9 !important;
}
.link-phone {
    text-decoration: none;
}
.btn-account {
    color: #f9f9f9;
    padding-top: 20px;
    transition: 0.3s all;
}
.btn-account:hover {
    color: #0dcaf0;
}
.col-10 {
    padding: 0 !important;
}
.image_friend {
    padding: 30px;
}
.img-user {
    padding: 15px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50%;
}
.w-15 {
    width: 15%;
} 
#staticBackdrop textarea {
    min-height: 125px;
}
#staticBackdrop .fa-image {
    font-size: 30px;
    transition: 0.3s all;
    padding-top: 10px;
    padding-bottom: 10px;
}
#staticBackdrop #input-img {
    margin-bottom: 10px;
}
#length {
    padding-right: 5px;
}
#mntNotif {
    position: absolute;
    padding: 12px;
    background: #A92A45;
    border-radius: 50%;
    top: 5px;
}
#mtnnot {
    position: absolute;
    top: 0;
    right: 4px;
    left: 4px;
}
#mntNotif2 {
    position: absolute;
    padding: 12px;
    background: #A92A45;
    border-radius: 50%;
    top: 5px;
}
#mtnnot2 {
    position: absolute;
    top: 0;
    right: 4px;
    left: 4px;
}
/*_Nav 2_______________________________*/
#mynav {
    background: #212529;
    padding: 0;
    min-height: 70px;
}
#mynav button {
    padding: 15px 20px;
}
/*_Accueil_____________________________*/
#app {
    padding: 0;
}
.title {
    padding-top: 20px;
    color: #f9f9f9;
    transition: 0.3s all;
}
/*_Publication_________________________*/
.btn-delete-publi {
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s all;
}
.btn-delete-publi:hover {
    color: #A92A45;
}
.publi .role .badgeProfil {
    width: 30px;
    height: 30px;
    background: #212529;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s all;
    border-radius: 50%;
    margin-left: 5px;
    margin-right: 5px;
}
.publi .role .badgeProfil:hover {
    width: 35px;
    height: 35px;
    margin-left: 2.5px;
    margin-right: 2.5px;
}
.publi .role .badgeProfil .fa-duotone {
    position: relative;
    font-size: 15px; 
}


.publi .icon-logo-false:before {
    font-size: 25px !important;
    color: #B3B3B3;
}
.publi .icon-logo-true:before {
    font-size: 25px !important;
}
.fs-20 {
    font-size: 20px;
}
.fs-21 {
    font-size: 21px;
}
.fs-25 {
    font-size: 25px;
}
.fs-30 {
    font-size: 30px;
}
.publi {
    background: #f9f9f9;
}
.update-publi1 {
    margin-left: 10px;
}
.headerPubli {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left:  25px;
    background: #DDDDDD;
}
.headerPubli .fs-21 {
    font-weight: 600 !important;
}
.imgUserPubli {
    padding: 20px;
    background: #A5A5A5;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: 15px;
}
.infosPubli {
    padding-left: 8px;
}
.statut {
    font-size: 25px !important;
}
.bodyPubli {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 50px;
    padding-right: 50px;
    min-height: 150px;
}
.date-publication {
    text-align: center;
}
.texte_publi {
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgPubli {
    padding: 50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.btn-votee {
    padding: 0 !important;
}
.topDownPubli {
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.publi .fa-calendar-days {
    padding-right: 15px;
}
.publi .date_publi {
    padding-right: 10px;
}
.fa-arrow-up-to-line {
    transition: 0.3s all;
    padding: 5px;
}
.fa-arrow-down-to-line {
    padding: 5px;
    transition: 0.3s all;
}
.fa-arrow-up-to-line:hover {
    color: #198754;;
}
.fa-arrow-down-to-line:hover {
    color: #dc3545;
}
.fa-messages {
    margin-right: 50px;
    transition: 0.3s all;
    cursor: pointer;
}
.fa-messages:hover {
    font-size: 20px;
}
.nmb_com {
    padding-right: 10px;   
}
/*_Form_Updtae_________________________*/
.formUpdt {
    padding-top: 30px;
    padding-bottom: 30px;
    background: #E5E5E5;
}
.btn-image-updt {
    font-size: 25px;
    transition: 0.3s all;
}
/*Publi_updated________________________*/
.publiUpdated {
    margin-top: 15px;
    border-radius: 25px;
    padding-left: 10px;
    padding-right: 10px;
}
.bg-img-publi {
    height: 300px;
    width: 500px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
/*_Commentaires________________________*/
.imgUserCom {
    padding: 20px;
    background: #A5A5A5;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: 10px;
}
.com {
    padding: 10px;
    background: #DEDEDE;
    margin: auto;
    border-bottom: solid 0.5px;
}
.texteCom {
    padding: 5px 10px 5px 10px;
    text-align: center;
}
.btn-delete-com {
    position: relative;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s all;
}
.btn-delete-com:hover {
    color: #A92A45;
}

.downBox {
    padding-right: 20px;
}
.espaceCom {
    background: #D1D1D1;
}
.bg-grey {
    background: #D1D1D1;
}
.fmv2 {
    border-radius: 0 !important;
}
/*_Espace_personel_____________________*/
#staticBackdrop2 .form-control {
    margin-bottom: 10px;
    border-radius: 0 !important;
}
#boxHeart {
    padding-bottom: 10px;
}
.life_point {
    font-size: 20px;
    margin-left: 5px;
    margin-right: 5px;
    --fa-secondary-opacity: 100%;
}
.life_point_fill {
    color: #E93131;
}
#banUserSetting {
    height: 150px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.imgUserPubli2 {
    padding: 50px;
    background: #A5A5A5;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    top: -65px;
}
#changeUser {
    margin-top: -45px;
    margin-bottom: 15px;
}
#changeUser input {
    border-radius: 0;
}
#formMdp {
    margin-bottom: 15px;
}
#formMdp .fa-eye {
    position: relative;
    top: -45px;
    left: 400px;
}
#formMdp input {
    border-radius: 0;
}
.imgUserPubli2 #btnProfilImg {
    position: relative;
    top: -55px;
    right: -60px;
    font-size: 20px;
    cursor: pointer;
    transition: 0.3s all;
}
#banUserSetting #btnProfilBan {
    position: relative;
    right: -10px;
    top: -25px;
    font-size: 20px;
    cursor: pointer;
    transition: 0.3s all;   
}
#formChangeImg input {
    border-radius: 0;
}
#btnChangeImg {
    margin-bottom: 25px;
}
/*Setting_*/
#settingColor {
    height: 100px;
}
.colorChoose {
    padding: 18px;
    border-radius: 50%;
    margin-left: 2.5px;
    margin-right: 2.5px;
    transition: 0.3s all;
    cursor: pointer;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.colorChoose:hover {
    position: relative;
    margin-bottom: 20px;
}
/*_Friends_____________________________*/
.amiami .fa-square-user {
    font-size: 25px;
}
.amiami {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}
.firstami {
    margin-top: 0 !important;
}
.fa-user-check {
    transition: 0.3s all;
    cursor: pointer;
    font-size: 20px;
}
.fa-user-check:hover {
    color: #2AA95C;
}
#staticBackdrop1 .btn {
    padding: 0;
}
.fa-user-xmark {
    transition: 0.3s all;
    cursor: pointer;
    font-size: 20px;   
}
.fa-user-xmark:hover {
    color: #A92A45;
}
.fa-user-slash {
    transition: 0.3s all;
    cursor: pointer;
    font-size: 20px;    
}
.fa-user-slash:hover {
    color: #A92A45;
}
.formaccept {
    margin-right: 10px;
}
/*_Notification________________________*/
.notifs {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}
.notifs .imgUserPubli {
    width: 50px;
    min-width: 50px;
    height: 50px;
    min-height: 50px;
    padding: 0;
}
.bg-lightgrey {
    background: lightgrey;
}
.nom-notif {
    padding-right: 5px;
}
.new {
    background: lightblue !important;
}
.form-close-notif {
    position: absolute;
}
.btn-close-notif {
    position: relative;
    top: -10px;
    left: 400px;
    cursor: pointer;
    transition: 0.3s all;
}
.btn-close-notif:hover {
    color: #A92A45;
}
/*_Messagerie__________________________*/
.contact {
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    transition: 0.3s all;
    border: solid 0.1px #f7f7f7;
    margin-bottom: 10px;
}
.contact-active {
    background: #3DB4CC !important;
    font-weight: bold;
}
.lastMsg {
    margin-bottom: 125px;
}
.d-none {
    display: none;
}
.imgAmiContact {
    padding: 20px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.nomContact {
    margin-left: 5px;
}
#formTexte {
    position: sticky;
    bottom: 0;
}
#messagerie textarea {
    border-radius: 0;
}
#messagerie .fa-address-book {
    font-size: 30px;
    opacity: 75%;
}
.msg {
    padding: 10px;
    background: #f9f9f9;
    margin-bottom: 5px;
    margin-top: 5px;
    border-radius: 15px;
    margin-left: 10px;
    margin-right: 10px;
}
.imgAuteurMsg {
    padding: 25px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50%;
}
.nomAuteurMsg {
    margin-left: 5px;
    margin-right: 5px;
}
.bodyMsg {
    border-radius: 15px;
    padding: 0px 15px 0px 15px;
}
#messagerie .title {
    padding-top: 20px;
}
/*_Profil______________________________*/

#profil .title {
    padding-top: 20px;
}
#profil #banProfil {
    min-height: 225px !important;
}
.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.imgUserContact {
    padding: 75px;
    background: #A5A5A5;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
#profil .imgUserContact {
    position: relative;
    top: 110px;
}
#profil #infoProfil {
    padding-top: 100px;
    width: 100%;
    border-top-width: 5px;
}
.descriptionProfil {
    margin-top: 20px;
    font-size:  18px;
}
/*_Infos_______________________________*/
#infos ul li {
    list-style: none;
}
#textInfos {
    padding-left: 20px;
    padding-right: 20px;
}
.titleOrdo {
    padding-bottom: 25px;
    padding-top: 25px;
    font-weight: bold;
}
#lastInfosOrdo {
    padding-bottom: 25px;
}
/*_Footer_____________________________*/

.cursor-pointer {
    cursor: pointer !important;
}
.footer-box {
    padding-top: 25px;
}
footer b {
    font-size: 25px;
}
footer p {
    padding-bottom: 2px;
    padding-top: 2px;
    margin: 0;
}
footer .social {
    margin-top: 25px;
    font-size: 25px;
}
footer .social a {
    padding-left: 5px;
    padding-right: 5px;
}
footer .footLink {
    padding-bottom: 5px;
    padding-top: 5px;
}
footer a {
    text-decoration: none;
    transition: 0.3s all;
}
.footer-logo {
    margin-top: 25px;
    padding-bottom: 30px;
}
/*_Responsive__________________________*/
@media(min-width: 1625px) {
    .resStart {
        justify-content: start !important;
    }
}
@media(min-width: 992px) {
    .lastMsg {
        margin-bottom: 200px !important;
    }
    #title-nav-s {
        display: none;
        width: 0;
        height: 0;
    }
    #mntNotif2 {
        display: none;
    }
    .date-publication {
        text-align: end;
    }
    #logoNavS {
        display: none;
    }
    #boxContactPhone {
        display: none;
    }
}
@media(max-width: 991px) {
    .firstMsg {
        margin-top: 50px;
    }
    #app {
        padding-top: 70px;
    }
    #messagerie #keyboard {
        position: fixed;
        bottom: 0;
    }
    #messagerie #mynav {
        position: fixed;
    }
    .fm2 {
        background: lightgrey;
        border: solid 0.1px grey;
    }
    .fm2:focus {
        box-shadow: 0 0 0 0.2rem rgba(11, 11, 11, 0);
    } 
    .fm2:valid {
        box-shadow: 0 0 0 0.2rem rgba(11, 11, 11, 0);
    }
    #brand {
        height: 0 !important;
        display: none;
    }
    #mynav {
        position: absolute;
    }
    #mynav .container-fluid {
        padding: 0;
    }
    #mynav #ulnav {
        margin-bottom: 0 !important;
        padding: 5px;
    }
    #mynav .text-info {
        color: #f9f9f9 !important;
    }
    .nav-item .btn-perso2 {
        border-radius: 0 !important;
    }
    .nav-item .btn-perso2:hover {

    }
    #mynav li {
        width: 100%;
    }
    #mynav #ulnav button {
        width: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
    }
    #ulnav {
        justify-content: start !important;
        align-items: start;
    }
    #ulnav a {
        text-decoration: none;
    }
    .fs-25 {
        font-size: 15px !important;
    }
    .fs-21 {
        font-size: 15px !important;
    }
    .fs-20 {
        font-size: 12px !important;
    }
    .texteCom {
        font-size: 16px !important;
    }
    .publiUpdated .fs-20 {
        font-size: 15px !important;
    }
    .imgUserr {
        margin-left: -15px;
        margin-right: 5px;
    }
    .infosPubli {
        margin-left: -2px;
    }
    .date_publi {
        font-size: 12px !important;
    }
    .open-com {
        font-size: 13px;
    }
    .nmb_com {
        font-size: 12px;
    }
    .nmb_com2 {
        font-size: 12px;
    }
    .publi .fa-calendar-days {
        padding-right: 5px;
    }
    .publi .date_publi {
        padding-right: 5px; 
    }
    .texte_publi {
        font-size: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .bodyPubli {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        min-height: 100px;
    }
    .com {
        padding-top: 5px;
        padding-bottom: 5px;
        width: 90% !important;
    }
    .w-90 {
        width: 90% !important;
    }
    .downBox {
        padding-right: 5px;
    }
    .espaceCom .w-75 {
        width: 90% !important;
    }
    .bg-img-publi {
        height: 200px;
        width: 300px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }
    #mntNotif {
        display: none;
    }
    .fs-res {
        font-size: 13px;
    }
    #boxContactPhone {
        position: fixed;
        top: 70px;
    }
    #profil .resCol {
        height: 0 !important;
    }
    .descriptionProfil {
        font-size:  16px;
    }
    footer h6 {
        font-size: 12px !important;
    }
}
@media(max-width: 767px) {
    #logoNavS {
        font-size: 35px !important;
    }
    #title-nav-s {
        font-size: 25px !important;
    }
    .espaceCom .w-75 {
        width: 100% !important;
    }
    .boxFormCom .w-90 {
        width: 100% !important;
    }
    #login .bg-dark-degrad {
        height: 0 !important;
    }
    #register .bg-dark-degrad {
        height: 0 !important;
    }
    .resStart {
        justify-content: end !important;
    }
    .publi .icon-logo-false:before {
        font-size: 20px !important;
    }
    .publi .icon-logo-true:before {
        font-size: 20px !important;
    }
    .publi .btnUpdated {
        padding: 5px !important;
        margin-right: 0px !important;
    }
}
@media (max-width: 575px) {
    footer .footer-logo {
        padding-bottom: 150px;
    }
    footer .col-xl-3 {
        margin-bottom: 25px;
    }
    footer .col-xl-3 b {
        font-size: 20px !important;
        padding-bottom: 10px;
    }
    footer .col-xl-4 b {
        font-size: 20px !important;
        padding-bottom: 10px;
    }
    footer .footer-logo .icon-logo-true::before {
        font-size: 40px !important;
    }

    #register .fa-eye-duo {
        left: 170px !important;
        top: -45px !important;
    }
    #register td {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #register .form-control {
        padding: 5px 10px !important;
    }
    .date-publication {
        text-align: end !important;
    }
    .topBox form {
        font-size: 13px;
    }
    .downBox form {
        font-size: 13px;
    }
    .downBox form button {
        padding-right: 0px;
    }
    .topBox form button {
        padding-right: 0px;
    }
    .dateCommentaire {
        font-size: 13px;
    }

}
@media(max-width: 500px) {
    .colorChoose {
        padding: 15px !important;
    }
    #formMdp .fa-eye {
        left: 350px;
    }
    .btn-close-notif {
        left: 350px;
    }
}
@media(max-width: 450px) {
    #formMdp .fa-eye {
        left: 325px;
    }
    .btn-close-notif {
        left: 300px;
    }
}
@media(max-width: 400px) {
    #formMdp .fa-eye {
        left: 280px;
    }   
    .btn-close-notif {
        left: 280px;
    }
    .resStart {
        margin-left: 15px;
    }
    .colorChoose {
        padding: 13px !important;
    }
}
@media(max-width: 380px) {
    #register .fa-eye-duo {
        left: 150px !important;
    }
    .colorChoose {
        padding: 12px !important;
    }
}