/* The side navigation menu */
.sideNav {
    height: 100%;
    width: 48px;
    position: fixed;
    z-index: 1002;
    top: 0;
    left: 0;
    background-color: #1f2631;
    overflow-x: visible;
    padding-top: 0px;
    transition: 0.5s;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-align-last: center;
}

.sideNav table {
    align-content: center;
    width: 100%;
}

.sideNav tr{
    text-align: center;
}
.sideNav td{
    position: relative;
    margin-top: 8px;
    margin-bottom: 8px;
    display: inline-block;
}

.sideNav p {
    font-size: 18px;
    color: #FFF;
    padding-bottom: 16px;
    font-weight: normal;
}

.sideNav .homeButton, .editorButton, .analysisButton, .adminButton, .insightsButton , .watchwordsButton, .promptsButton{
    position: relative;
    width: 60%;
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: 10px;
}

.editorButton button {
    width: 28px;
}
.editorButton img {
    margin-top: -2px;
    margin-right: -2px;
}

.sideNav .bottomButtons {
    width: 60%;
    position: absolute;
    bottom: 0;
    margin-bottom: 8px;
    margin-left: 10px;
}

.sideNav .systemAdminButton {
    position: relative;
    margin-top: 16px;
    margin-bottom: 16px;
}

.sideNav .settingsButton {
    position: relative;
    margin-top: 16px;
}

.sidebarHoverHint {
	position: absolute;
    background: #555557;
    border-radius: 4px;
    left: 48px;
    cursor: default;
    top: 2px;
    white-space: nowrap;
    border: 1px solid #555557;
}

.sidebarHoverHint p {
	font-size: 11px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    padding: 6px;
}

.sidebarHoverHintTriangle {
	border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #555557;
    position: absolute;
    left: -6px;
    top: 8px;
    opacity: inherit;
}

.disabled-div {
    pointer-events: none;
    opacity: 0.6;
}

.homeButtonHint.sidebarHoverHint{ visibility: hidden; }
.editorButtonHint.sidebarHoverHint{ visibility: hidden; }
.scansButtonHint.sidebarHoverHint{ visibility: hidden; }
.adminButtonHint.sidebarHoverHint { visibility: hidden;}
.watchwordsButtonHint.sidebarHoverHint { visibility: hidden;}
.promptsButtonHint.sidebarHoverHint { visibility: hidden;}
.insightsButtonHint.sidebarHoverHint { visibility: hidden; }
.settingsButtonHint.sidebarHoverHint{ visibility: hidden; }
.systemAdminButtonHint.sidebarHoverHint{ visibility: hidden; }
.accountsButtonHint.sidebarHoverHint{ visibility: hidden; }
.usersButtonHint.sidebarHoverHint{ visibility: hidden; }

.homeButton:hover .sidebarHoverHint{ visibility: visible; }
.editorButton:hover .sidebarHoverHint{ visibility: visible; }
.analysisButton:hover .sidebarHoverHint{ visibility: visible; }
.adminButton:hover .sidebarHoverHint{ visibility: visible; }
.watchwordsButton:hover .sidebarHoverHint{ visibility: visible; }
.promptsButton:hover .sidebarHoverHint{ visibility: visible; }
.insightsButton:hover .sidebarHoverHint{ visibility: visible; }
.systemAdminButton:hover .sidebarHoverHint{ visibility: visible; }
.settingsButton:hover .sidebarHoverHint{ visibility: visible; }
.accountsButton:hover .sidebarHoverHint{ visibility: visible; }
.usersButton:hover .sidebarHoverHint{ visibility: visible; }

.analysisButton button div {
    background-image: url('/Icons/2020-Rebrand/History White-7dccf00c92d1d06d2d68be43445122ea.svg');
    background-position: center;
    background-repeat: no-repeat;
}

.insightsButton button div {
    background-image: url('/Icons/2020-Rebrand/new-insights-cf6ee2f313c4f141a36f14f7d6d09db1.svg');
    background-position: center;
    background-repeat: no-repeat;
}

/* 2020 Redesign */
.company-icon {
    vertical-align: sub;
    width: 22px;
    background: url('/Icons/2020-Rebrand/VT - White-1fe15750042cc6f96b14ce5a1f171274.svg') no-repeat;
    background-size: contain;
    height: 22px;
    margin: auto;
    margin-top: 12px;
}

.sideNav button.sidebar-highlighted {
	background: #533ffb;
	border-color: #533ffb;
}
.sideNav button {
    border-radius: 100%;
    background-color: #283141;
    border: 1px solid #283141;
    padding: 6px;
}
#sideNavBar img {
    width: 14px;
    height: 14px;
}
.sideNav button:hover {
    background-color: #533ffb;
    border: 1px solid #533ffb;
}
.sideNav button div, 
.sideNav button div:hover {
    min-width: 14px;
    min-height: 14px;
    background-size: 12px 12px;
}