.login-container {
    height: inherit;
    display: flex;
    align-items: center;
}

    .login-container:hover {
        color: var(--text-color-hover);
    }

    .login-container [icon] {
        cursor: pointer;
    }

    .login-container#logoutOptions {
        padding-left: 10px;
        padding-right: 10px;
    }

    .login-container.clicked .useroptions-list {
        display: block;
    }

.useroptions {
    position: relative;
    cursor: pointer;
    padding-top: 0px !important;
}

.notification-icon {
    position: relative;
    font-size: large;
}

    .useroptions.clicked .notification-icon, .notification-icon:hover {
        opacity: 1;
    }

.useroptions-list a.dropdown-item {
    color: var(--text-color);
}

    .useroptions-list a.dropdown-item:hover {
        background-color: var(--secondary-main-color);
    }

        .useroptions-list a.dropdown-item:hover span {
            color: var(--contrast-color);
        }

.total-notification-counter {
    position: absolute;
    border-radius: 5px;
    display: inline-block;
    background-color: var(--secondary-contrast-color);
    padding: 3px 3px;
    line-height: 6px;
    top: 11px;
    right: 7px;
}

    .total-notification-counter > span {
        position: relative;
        color: lightgrey;
        font-weight: bold;
        font-size: 16px;
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
        height: 13px;
    }

.useroptions-list {
    position: absolute;
    background-color: var(--main-color);
    color: var(--text-color);
    box-sizing: content-box;
    right: -10px;
    top: 40px;
    display: none;
    border-radius: 11px !important;
    padding-top: 0px!important;
    padding-bottom: 0px!important;
}

.useroptions-list-inside-wrapper {
    position: relative;
    display: block;
    border: none;
    min-height: 50px;
    max-height: 320px;
    box-sizing: content-box;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--main-color);
    z-index: 8889;
    border-radius: 10px;
}

.useroptions.clicked .useroptions-list {
    display: block;
}

.useroptions-list:before {
    content: ' ';
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--main-color);
    position: absolute;
    top: -10px;
    right: 16px;
    transform: rotate(45deg);
}

.notifyjs-advanced-base {
    font-weight: bold;
    padding: 8px 15px 8px 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    white-space: nowrap;
    padding-left: 25px;
    background-repeat: no-repeat;
    background-position: 3px 7px;
}

.notifyjs-advanced-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border-color: #EED3D7;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtRJREFUeNqkVc1u00AQHq+dOD+0poIQfkIjalW0SEGqRMuRnHos3DjwAH0ArlyQeANOOSMeAA5VjyBxKBQhgSpVUKKQNGloFdw4cWw2jtfMOna6JOUArDTazXi/b3dm55socPqQhFka++aHBsI8GsopRJERNFlY88FCEk9Yiwf8RhgRyaHFQpPHCDmZG5oX2ui2yilkcTT1AcDsbYC1NMAyOi7zTX2Agx7A9luAl88BauiiQ/cJaZQfIpAlngDcvZZMrl8vFPK5+XktrWlx3/ehZ5r9+t6e+WVnp1pxnNIjgBe4/6dAysQc8dsmHwPcW9C0h3fW1hans1ltwJhy0GxK7XZbUlMp5Ww2eyan6+ft/f2FAqXGK4CvQk5HueFz7D6GOZtIrK+srupdx1GRBBqNBtzc2AiMr7nPplRdKhb1q6q6zjFhrklEFOUutoQ50xcX86ZlqaZpQrfbBdu2R6/G19zX6XSgh6RX5ubyHCM8nqSID6ICrGiZjGYYxojEsiw4PDwMSL5VKsC8Yf4VRYFzMzMaxwjlJSlCyAQ9l0CW44PBADzXhe7xMdi9HtTrdYjFYkDQL0cn4Xdq2/EAE+InCnvADTf2eah4Sx9vExQjkqXT6aAERICMewd/UAp/IeYANM2joxt+q5VI+ieq2i0Wg3l6DNzHwTERPgo1ko7XBXj3vdlsT2F+UuhIhYkp7u7CarkcrFOCtR3H5JiwbAIeImjT/YQKKBtGjRFCU5IUgFRe7fF4cCNVIPMYo3VKqxwjyNAXNepuopyqnld602qVsfRpEkkz+GFL1wPj6ySXBpJtWVa5xlhpcyhBNwpZHmtX8AGgfIExo0ZpzkWVTBGiXCSEaHh62/PoR0p/vHaczxXGnj4bSo+G78lELU80h1uogBwWLf5YlsPmgDEd4M236xjm+8nm4IuE/9u+/PH2JXZfbwz4zw1WbO+SQPpXfwG/BBgAhCNZiSb/pOQAAAAASUVORK5CYII=);
}

.dropdown {
    z-index: 100;
}

    .dropdown.li {
        list-style-type: none;
    }

.menu-link {
    line-height: 3.7em;
    padding: 20px 18px;
    text-decoration: none;
    transition: background .5s, color .5s;
}

.dropdown-container {
    overflow-y: hidden;
}

    .dropdown-container.expanded .dropdown {
        -webkit-animation: fadein .5s;
        -moz-animation: fadein .5s;
        -ms-animation: fadein .5s;
        -o-animation: fadein .5s;
        animation: fadein .5s;
        display: block;
    }

    .dropdown-container .dropdown {
        -webkit-animation: fadeout .5s;
        -moz-animation: fadeout .5s;
        -ms-animation: fadeout .5s;
        -o-animation: fadeout .5s;
        animation: fadeout .5s;
        display: none;
        position: absolute;
        width: 300px;
        height: auto;
        max-height: 600px;
        overflow-y: hidden;
        padding: 0;
        margin: 0;
        background-color: var(--main-color);
        margin-top: 3px;
        margin-right: -15px;
        border-top: 4px solid var(--secondary-contrast-color);
        -webkit-box-shadow: 2px 2px 15px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 2px 2px 15px -5px rgba(0,0,0,0.75);
        box-shadow: 2px 2px 15px -5px rgba(0,0,0,0.75);
    }

        .dropdown-container .dropdown .notification-group {
            overflow: hidden;
            min-height: 65px;
        }

            .dropdown-container .dropdown .notification-group.hidden {
                display: none;
            }

            .dropdown-container .dropdown .notification-group:last-child {
                border-bottom: 0;
                border-bottom-left-radius: 15px;
                border-bottom-right-radius: 15px;
            }

            .dropdown-container .dropdown .notification-group .notification-tab {
                padding: 0px 25px;
                min-height: 65px;
            }

                .dropdown-container .dropdown .notification-group .notification-tab:hover {
                    cursor: pointer;
                    background: var(--secondary-main-color);
                }

                    .dropdown-container .dropdown .notification-group .notification-tab:hover .fa, .notification-tab h5, .notification-tab .label {
                        color: var(--text-color-hover);
                        display: inline-block;
                    }

                    .dropdown-container .dropdown .notification-group .notification-tab:hover .label {
                        background: var(--secondary-contrast-color);
                        border-color: var(--secondary-contrast-color);
                    }


            .dropdown-container .dropdown .notification-group .notification-list {
                padding: 0;
                overflow-y: auto;
                height: 0px;
                max-height: 250px;
            }

                .dropdown-container .dropdown .notification-group .notification-list .notification-list-item {
                    padding: 5px 25px;
                    border-top: 1px solid grey;
                    white-space: normal;
                    font-size: smaller;
                }

                    .dropdown-container .dropdown .notification-group .notification-list .notification-list-item .message {
                        color: var(--text-color);
                    }

                        .dropdown-container .dropdown .notification-group .notification-list .notification-list-item .message:hover {
                            cursor: pointer;
                            color: var(--text-color-hover);
                        }

                    .dropdown-container .dropdown .notification-group .notification-list .notification-list-item .item-footer a {
                        color: lightgrey;
                        text-decoration: none;
                    }

                    .dropdown-container .dropdown .notification-group .notification-list .notification-list-item .item-footer .date {
                        float: right;
                    }
                    /*            .dropdown-container .dropdown .notification-group .notification-list .notification-list-item:nth-of-type(odd) {
                background: grey;
            }*/
                    .dropdown-container .dropdown .notification-group .notification-list .notification-list-item:last-child {
                        border-bottom: 0;
                        border-bottom-left-radius: 15px;
                        border-bottom-right-radius: 15px;
                    }

                    .dropdown-container .dropdown .notification-group .notification-list .notification-list-item span {
                        color: var(--text-color);
                    }

            .dropdown-container .dropdown .notification-group.expanded .notification-tab {
                background: var(--secondary-main-color);
            }

                .dropdown-container .dropdown .notification-group.expanded .notification-tab .fa, .notification-tab h5, .notification-tab .label {
                    color: var(--text-color);
                    display: inline-block;
                }

                .dropdown-container .dropdown .notification-group.expanded .notification-tab .label {
                    background: var(--secondary-contrast-color);
                    border-color: var(--secondary-contrast-color);
                }

            .dropdown-container .dropdown .notification-group.expanded .notification-list {
                height: 100%;
            }

            .dropdown-container .dropdown .notification-group .fa, .notification-tab h5, .notification-tab .label {
                color: var(--text-color);
                display: inline-block;
            }

            .dropdown-container .dropdown .notification-group .fa {
                margin-right: 5px;
                margin-top: 25px;
            }

            .dropdown-container .dropdown .notification-group .label {
                float: right;
                margin-top: 20px;
                color: var(--text-color);
                border: 1px solid var(--secondary-contrast-color);
                background-color: var(--secondary-contrast-color);
                padding: 0px 7px;
                border-radius: 15px;
            }

.right {
    float: right;
}

.left {
    float: left;
}