.noti_Container {
    position: absolute;
    top: 10px;
   /* right: 30px;*/
    left: 30px;
    /* This is crucial for the absolutely positioned element */
    width: 10px;
    height: 10px;
}

.noti_bubble {
    position: absolute; /* This breaks the div from the normal HTML document. */
    top: -6px;
    right: -6px;
    padding: 1px 2px 1px 2px;
    background-color: #ece66c;
    color: #fff !important;
    font-weight: bold;
    font-size: medium;
    border-radius: 30px;
    box-shadow: 1px 1px 1px gray;
   /* font-family: 'Freestyle Script';*/
}

.issamNoti {
    position: absolute; /* This breaks the div from the normal HTML document. */
    top: 1px;
    right: 3px;
    padding: 1px 2px 1px 2px;
    background-color: #cbc21a;
    color: white;
    font-weight: bold;
    font-size: small;
    /*   border-radius: 30px;*/
    border-radius: 50%;
    box-shadow: 1px 1px 1px gray;
}

.noti-box {
    z-index:10002;
    position: absolute;
    top: 65px;
    right: 20px;
   direction:rtl;
   width:300px;
    background: #2f3640;
    height: auto;
    /*border-radius: 20px;*/
    
    margin-bottom:30px;
    font-weight:bolder;
    
}



/*.noti_Container:hover ~ .noti-box {
    visibility: visible;
   direction:rtl;
    transition: 0.4s;
}*/