#navbar {
    width: 50px;
    position: absolute;
    top: 50px;
    left: 50px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 #00000025;
    z-index: 999;
}

#navbar-switch-box {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 #00000025;
    cursor: pointer;

    transition-property: all;
    transition-duration: 300ms;
}

#navbar-switch-box:hover .navbar-text {
    transform: scale(1, 1) skewX(0deg);
}

.navbar-opened .navbar-first-text {
    transform: scale(0, 0) skewX(90deg) !important;
}

.navbar-opened #navbar-switch-box {
    box-shadow: 0 0 10px 0 #00000050;
}

#navbar-switch-icon {
    width: 50px;
    height: 50px;
    display: block;

    text-align: center;
    line-height: 50px;
}

#navbar-switch-icon:active {
    padding: 0;
}

.navbar-opened #navbar-switch-icon {
    color: #359cf9 !important;
}

#navbar-menu {
    display: none;
    overflow: visible;
    margin-top: 5px;
}

.navbar-anchor {
    width: 50px;
    height: 50px;
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    text-decoration: none;
    
    transition-property: all;
    transition-duration: 300ms;
}

.navbar-icon {
    font-size: 25px;
    color: #252525;
    
    transition-property: all;
    transition-duration: 100ms;
}

#navbar-menu:hover .navbar-anchor {
    opacity: 0.4;
}

.navbar-anchor:hover {
    opacity: 1 !important;
}

.navbar-icon:active {
    padding: 5px;
    border-radius: 10px;
    background-color: #25252525;
}

.navbar-text {
    height: 10px;
    position: absolute;
    top: 30px;
    left: 30px;
    padding: 10px;
    background-color: #ffffff;
    box-shadow: 0 0 10px 0 #00000050;
    border-radius: 10px;
    
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    color: #252525;

    transition-property: transform ;
    transform-origin: top left;
    transition-duration: 200ms;
    transform: scale(0, 0) skewX(90deg);
}

.navbar-anchor:hover .navbar-text {
    transform: scale(1, 1) skewX(0deg);
}

.navbar-active-app {
    padding: 5px;
    border-radius: 10px;
    background-color: #25252525;
}

#navbar-notification-circle {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 10px;
    right: 8px;
    border-radius: 100%;
    background-color: #359cf9;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);

    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

#navbar-notifications-box {
    display: flex;
    flex-direction: column;
    height: auto;
    min-width: 400px;
    padding: 0;
}

.navbar-notification {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    cursor: default !important;
}

.navbar-notification-infobox {
    display: flex;
    flex-direction: row;
}

.navbar-notification-avatar {
    height: 35px;
    width: 35px;
    display: block;
    border-radius: 100%;
    background-position: center center;
    background-size: cover;
}

.navbar-notification-info {
    margin-left: 10px;
}

.navbar-notification-sent-by {
    margin: 0;

    font-size: 15px;
    font-weight: 800;
}

.navbar-notification-text {
    margin: 0;

    font-size: 10px;
    font-weight: 600;
    color: #252525a0;
}

.navbar-notification-buttons {
    display: flex;
    flex-direction: row;
    margin-left: 15px;

    font-size: 10px;
    font-weight: 600;
}

.navbar-notification-button {
    margin: 0;
    padding: 5px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;

    transition-property: all;
    transition-duration: 300ms;
}

.navbar-notification-accept {
    margin-right: 5px;
    border-color: #359cf9;
    color: #359cf9;
}

.navbar-notification-accept:hover {
    background-color: #395cf920;
}

.navbar-notification-refuse {
    opacity: 0.75;

    border-color: #a924d9;
    color: #a924d9;
}

.navbar-notification-refuse:hover {
    background-color: #a924d930;
}