@keyframes height-company-name {
    0% {
        max-height: 0px !important;
    }
    100% {
        max-height: 300px;
    }
}
.avatar {
    background-color: #565656 !important;
}

.navigation {
    /*background-color: #07151C!important;*/
    transition: -webkit-width 200ms ease;
    transition: width 200ms ease !important;
}


.collapsed-nav {
    /*transition: -webkit-width 200ms ease;*/
    /*transition: width 200ms ease !important;*/
}

.nav-menu-item {
    min-height: 55px !important;
    line-height: 55px !important;
    font-size: 16px !important;
    color: #fff !important;
    z-index: 1301;
    /*transition: "width 100ms ease-out 0ms"!important;*/
}

.nav-menu-item + div {
    max-height: calc(100vh - 285px);
    overflow-y: auto;
}

.nav-menu-item.with-partner-portal + div {
    max-height: calc(100vh - 340px);
    overflow-y: auto;
}

.navigation *::-webkit-scrollbar {
    background-color: #222222!important;
    width: 7px;
}

.navigation *::-webkit-scrollbar-thumb {
    background-color: #757575!important;
    border-radius: 7px;
}

.navigation *::-webkit-scrollbar-track-piece {
    background-color: #222222;
    border-radius: 7px;
}




.nav-menu-sub-item {
    min-height: 55px !important;
    line-height: 55px !important;
    font-size: 16px !important;
    color: #fff !important;
    /*transition: "left 100ms ease-in 0ms"!important;,*/
}

.nav-menu-sub-item.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.menu-item-icon {
    top: 6px !important;
    left: 0 !important;
    margin: 10px 20px 10px 20px !important;
}

.nav-menu-nested-item {
    background-color: #222!important;
}
.nav-menu-item.active svg path,
.nav-menu-item.active svg polyline,
.nav-menu-item.active svg circle,
.nav-menu-item.active svg line,
.nav-menu-item:hover svg path,
.nav-menu-item:hover svg polyline,
.nav-menu-item:hover svg circle,
.nav-menu-item:hover svg line {
    stroke: #238AC4;
}

.nav-menu-item.active svg rect,
.nav-menu-item.active svg polyline,
.nav-menu-item.active .material-icon path,
.nav-menu-nested-item.active .material-icon path,
.nav-menu-nested-item:hover .material-icon path,
.nav-menu-item:hover .material-icon path,
.nav-menu-item:hover svg polyline,
.nav-menu-item:hover svg rect {
    fill: #238AC4;
}

.nav-menu-item:hover .avatar,
.nav-menu-item.active .avatar {
    background-color: #238AC4 !important;
}

.site-logo-box {
    height: 56px;
    border-bottom: 1px solid #3c3d40;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 250px;

}

.menu-name-box {
    height: 56px;
    border-bottom: 1px solid #3c3d40;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 240px;
    color: #fff !important;
}

.nav-bottom-container {
    width: 240px;
    position: absolute;
    bottom: 0;
    z-index: 1302;
    background-color: #222222;
}

.expanded-nav .menu-name-box {
    width: 175px;
}
.collapsed-nav .site-logo-box,
.expanded-nav .site-logo-box {
    width: 65px;
}

.collapsed-nav .nav-bottom-container,
.expanded-nav .nav-bottom-container {
    width: 65px;
}

.site-logo {
    display: inline-block;
    width: 140px;
    height: 33px;
    margin: 7px 44px 0px 44px;
    text-indent: -9000px;
    background: url(../images/svg/armatic-logo-color.svg) no-repeat 0 0;
    background-size: 140px 33px;
    /*transition: width 200ms ease;*/
}

.collapsed-nav .site-logo,
.expanded-nav .site-logo {
    display: inline-block;
    width: 40px;
    height: 35px;
    margin: 7px 10px 0px 10px;
    background: url(../images/svg/armatic-robot-head.svg) no-repeat 0 0;
    background-size: 40px 35px;
}

.nav-account-block {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.drawer-close .nav-account-block .company-name {
    display: none;
}

.drawer-open .nav-account-block .company-name {
    word-break: break-all !important;
    white-space: normal !important;
    display: inline-block !important;
    text-overflow: unset !important;
    max-height: 0px;
    font-size: 12px !important;
    animation-name: height-company-name;
    animation-duration: 1s !important;
    animation-delay: 200ms;
    overflow: hidden !important;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.nav-menu-sub-item svg {
    fill: #565656 !important;
}

.account-details {
    padding-left: 17px !important;
    display: flex;
    align-items: flex-start !important;
}

.account-details .MuiListItemIcon-root {
    height: auto;
}

.help-box {
    position: fixed;
    right: 0;
    height: 100vh;
    width: 30vw;
    z-index: 1400;
    transition: all 2000ms ease!important;
}

.help-box.inactive {
    right: -60vw;
    transition: all 2000ms ease!important;
}


.help-box iframe {
    width: 100%;
    height: 100%;

}

.link{
    cursor: pointer;
}