/* App menu */

.app-menu {
    position: relative;
    display: inline-block;
    text-align: left;
    vertical-align: bottom;
}

.app-menu-link > a {
    display: block;
    text-decoration: none;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    padding-left: 40px;
    padding-right: 10px;
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    transition: border-color 0.1s, background-color 0.1s, box-shadow 0.1s;
}

.app-menu-label {
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    padding-left: 40px;
    padding-right: 10px;
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.app-menu-link > a:active,
.app-menu-link--selected > a {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.app-menu-popup {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 256px;
    margin-top: 1px;
    padding: 3px 0;
    border: 1px solid #a60f16;
    border-top: 0;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    transform-origin: left top;
    animation: zoom-y 0.3s;
    z-index: 100;
}

.app-menu-popup-item > a {
    display: block;
    font-size: 15px;
    padding: 3px 10px;
    text-decoration: none;
}

.app-menu-popup-item > a:hover {
    background: rgba(216, 19, 29, 0.1);
}

/* User menu */

.app-menu-link--user > a {
    background: url('../images/header/user-ver-A4C1F54152A81F2755855E126DAA1140.svg') 10px center no-repeat, url('../images/navigation/nav-menu-down-ver-C6775B583A7F70A44A1622219F8A7F8C.svg') right 10px center no-repeat;
    background-size: 24px 24px, 16px auto;
    padding-right: 35px;
}

.app-menu-label--user {
    background: url('../images/header/user-ver-A4C1F54152A81F2755855E126DAA1140.svg') 10px center no-repeat;
    background-size: 24px 24px;
}

/* Help menu */

.app-menu-link--help > a {
    background: url('../images/header/hotkeys-ver-75133D3CCE35C7282CD356AAB2DE1FE4.svg') 10px center no-repeat, url('../images/navigation/nav-menu-down-ver-C6775B583A7F70A44A1622219F8A7F8C.svg') right 10px center no-repeat;;
    background-size: 24px 24px, 16px auto;
    padding-right: 35px;
}

/* todo Task manager menu */

.app-menu-link--task-manager > a {
    background: url('../images/header/taskmanager-ver-110C58ED9200E61D62D68F66AF4ABEB8.svg') 10px center no-repeat;
    background-size: 24px 24px;
}

/* Unread tasks menu */

.app-menu-link--unread-tasks > a {
    background: url('../images/header/task-ver-6337F534EEE2C8E24237FEC86409A506.svg') 10px center no-repeat;
    background-size: 24px 24px;
}

/* Error tasks menu */

.app-menu-link--error-tasks > a {
    background: url('../images/header/error-task-ver-44C3DFED525F3E483B21F44F65BFD28F.svg') 10px center no-repeat;
    background-size: 24px 24px;
}

/* Tasks popup */

.app-tasks-popup {
    position: fixed;
    top: 41px; /* Height of the header */
    right: 0;
    width: 320px;
    bottom: 0;
    padding: 8px 0;
    background: #f1f1f1;
    animation: slide-to-left 0.3s;
    box-shadow: 0 2px 32px rgba(0, 0, 0, 0.4);
    overflow: auto;
    z-index: 100;
    opacity: 0.9999; /* IE11 fix */
}

/* Tasks pageable */

.app-tasks-popup-pageable .pageable-content {
    padding: 0 8px;
}

.app-tasks-popup-pageable .pageable-content > div {
    border-bottom: 1px solid #ddd;
}

.app-tasks-popup-pageable .pageable-content > div:first-child {
    border-top: 1px solid #ddd;
}

.app-tasks-popup-pageable .pageable-empty {
    display: block;
    padding: 0 8px;
    color: #888;
    font-weight: bold;
    text-align: center;
}

/* Crypt key indicator */

.app-menu-crypt-key {
    display: inline-block;
    height: 40px;
    vertical-align: top;
    text-align: left;
    cursor: default;
}

.app-menu-crypt-key > span {
    display: block;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 0 32px;
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.app-menu-crypt-key > .connected {
    background: url('../images/encryption/key-light-ver-763E8D60D5A167AF1F3FE98DC66D5CF4.svg') 10px center no-repeat;
    background-size: 16px 16px;
}

.app-menu-crypt-key > .disconnected {
    background: url('../images/encryption/key-ver-588949DD48A4617DBB3B554F57D9E556.svg') 10px center no-repeat;
    background-size: 16px 16px;
}