@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200&display=swap');
* {
    padding: 0px;
    margin: 0px
}

.menu_notif {
    position: relative;
    border-bottom: 1px solid black;
}
.notif_icon {

    display: flex;
	justify-content:right;
    align-items: center;
background:white;
    position: relative;
    border-bottom: 0px solid blue;
}
.nav-item a:hover,.nav-item a:focus{
	text-decoration:none;
}
.notifications {
    width: 300px;
    height: 300px;
    display: none;
position:absolute;
right:0px;
top:30px;
z-index:9999;
    border-radius: 5px 0px 5px 5px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.link-notif {
height: 75%;
overflow-y: auto;
}
.link-notif a{
text-decoration: none;
}
.titre-notif {
    font-size: 16px;
	font-family: FontAwesome;
    height: 40px;
	padding:5px 0px 0px 10px;
    color: white;
	background-color:#4db2ec;
	border-bottom: 1px solid #eee;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
}
.voirtout-notif {
	text-align:center;
	height: 10%;
    padding: 5px;
	background-color:#ddddff;
	margin-bottom:0px;
}
.voirtout-notif a{
font-size: 14px;
color: #8080c0;
text-decoration: underline;
font-family:'Maison Neue';
}
.voirtout-notif a:hover{
color: #07b5e7;
}
.notifications .repere {
height: 1px;
}

.notifications h2 span {
    color: #f00;
}
#no_notif {
 text-align:center;
 padding-top:50px;
 font-size:12px;
 color:#07b5e7;
 height:98%;
 background:#f5f5be;
 }
 .notifications-item{
  background-color: #ebeef1;
}
.notifications-item2 {
    background-color:white;
}
.notifications-item,.notifications-item2 {
    display: flex;
    border-bottom:1px solid #dfdfff;
    padding: 0px 0px;
    margin-bottom: 0px;

}
.notifications-item:hover,.notifications-item2:hover {
    background-color:#f3f5f8;
}
.notifications-item a,.notifications-item2 a {
display:block;width:100%;cursor: pointer;padding: 3px 3px 3px 3px;
}
a:hover {
text-decoration:none;
}
.notifications-item .not_contenu,.notifications-item2 .not_contenu {
display: flex;border-bottom: 1px solid #fff;padding: 0px 0px;margin-bottom: 0px;
}
.notifications-item img,.notifications-item2 img {
    display: block;
    width: 55px;
    height: 63px;
    margin-right: 9px;
}

.notifications-item .text h4,.notifications-item2 .text h4 {
    color: #000000;
	font-family:'Maison Neue';
    font-size: 14px;
    margin-top: 10px;
	border:0px solid blue;
}

.notifications-item .text,.notifications-item2 .text {
	margin-top: 0px;
    color: #000000;
   font-size:14px;font-family: FontAwesome;
}
.notifications-item3 .text .com_notif {
	border-bottom:1px solid #accdfb;
	margin-top:0px;
	padding:0px 3px 0px 3px;	
	border-radius:5px;
	font-size:14px !important;
    color:#61b150;
    font-family:'Maison Neue';
}	
.notifications-item .not_emoji {
display:inline-block;width:45px;height:45px;
}
.datte {	
color: #4d95f5;
	font-size:13px !important;
    font-family:'Maison Neue';
border-bottom:1px solid #accdfb;
margin-top:0px;
}
span.notification-badge {
  position: relative;
  top: -10px;
  right: 10px;
  border: $white 1px solid;
}
.div_haut{
width:50%;padding:5px;display: flex;justify-content: left;align-items: center;background:white;
}
.div_bas{
width:50%;padding:0px 0px px 0px;display: flex;justify-content: space-between;align-items: center;background:white;
}
.budgecard {
  background-color: white;
  align-items: center;
  justify-content: center;
  display: flex;
  padding:0px;
  position: relative;
  border-radius: 10px; 
}

.notifica i {
  font-size: 22px;
  color: #656565;
  padding-right:7px;
  position: relative;
}

.notifica .not_badge {
  position: absolute;	
  right: 2px;
  top: -10px;
  background-color: red;
padding:0px 5px 0px 5px;
  border-radius: 50%;
 display: flex;justify-content: center;align-items: center;
  color: #f4f4f4; 
  font-family: FontAwesome;font-size:13px;
  font-weight:bold;
}	
.econ_menu {
width:30px;
height:30px; 
border:0 px solid red;
border-radius:52%;
background:#fff;
padding:2px;
opacity:0.6;
}
.econ_menu:hover {
background:#d2d2d5;
}
.econ_menu_actif {
width:30px;
height:30px; 
border:0 px solid red;
border-radius:52%;
background:#dfdfe1;
padding-top:3px;
opacity:1;
}
.fa-lg:hover {
opacity:0.6;
}

.tooltipp {
    display:inline-block;
    position:relative;
    text-align:left;
}

.tooltipp .botom {	
    min-width:300px; 
    top:40px;
    left:75%;
    transform:translate(-75%, 0);
    padding:0px 0px;
    color:#444444;
    background-color:white;
    font-weight:normal;
    font-size:13px;
	border-top:0px solid #4db2ec;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
   visibility:visible; opacity:1;transition:opacity 0.8s;
}

.hidediv {
    visibility:visible; opacity:1;
}
.tooltipp .botom .ligneb{
	width:100%;
	border-top:3px solid #4db2ec;
}
.tooltipp .botom .search_contenu{
margin:20px 20px;
display: flex;justify-content: center;align-items: center;
}	
#search_new{
  width: 100%;
  padding: 5px 5px;
  box-sizing: border-box;
  border: 1px solid #eaeaea;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

#search_new:focus {
  border: 1px solid #b5b5b5;
}
.econ_search{
    width:25px;
    height:25px;
	margin-left:15px;

	cursor:pointer;
}	
.econ_search:hover{
opacity:0.6;
}	
.tooltipp .botom i, .notc{
    position:absolute;
    bottom:100%;
    left:75%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltipp .botom i::after,.notc::after  {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,50%) rotate(45deg);
    background-color:#4db2ec;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.notc {
   left:94%;
}

.notc::after {
box-shadow:0 0px 0px rgba(0,0,0,0.5);    
}

        @media screen and (max-width: 586px) {
            .div_haut, .div_bas {
                width: 100%;
            }			
        }