.page {
    transition: all 300ms ease;
    padding: 10px 10px 10px 10px;
    min-height: 50vh;
    background-image: linear-gradient(to left bottom, var(--salt-gray), transparent 50%);
}

.page > .panel {
    margin: 0;
}

.list-group-item span {
    width: 100%;
    opacity: 1;
    display: block;
    padding-left: 20px;
    white-space: nowrap;
    overflow: hidden;
    transition: all 300ms ease;
}

.list-group-item span.m-shrink {
    width: 0;
    opacity: 0;
    transition: all 300ms ease;
}

.container-menu {
    padding: 0;
    /*background: var(--indigo);*/
    transition: all 300ms ease;
}

.container-menu.shrink {
    width: 30px;
}

.page.de-shrink {
    /*background-color: #fff;*/
    width: calc(100% - 30px);
}

.erd-menu {
    min-height: calc(100vh - 162px);
    background: var(--salt-gray);
}
.erd-menu .list-group-item{
    cursor: pointer;
    height: 34px;
    border-radius: 0;
    border: 1px solid var(--dim-gray);
    border-left: 0 none;
    border-right: 0 none;
    color: var(--white);
}

.erd-menu .list-group-item .fa {
    position: absolute;
    line-height: 18px;
    width: 18px;
    text-align: center;
    /*color: #fff;*/
}

.erd-menu > div {
    position: relative;
}

.erd-menu > div > a{
    /*background: linear-gradient(transparent, rgba(0, 0, 0, 0.03)) !important;*/
}

.menu-back, .menu-back:hover {
    text-decoration: none;
    position: absolute;
    right: 30px;
    top: 7px;
    color: #fff;
}
.shrink a.list-group-item.on .fa {
    color: #fff;
}

a.list-group-item.fams-active, .shrink a.list-group-item.on {
    background-color: var(--green);
    outline: none;
}

a.list-group-item.fams-active > * {
    color: #fff !important;
    outline: none;
}

.shrink a.list-group-item + div.erd-sub-menu.on {
    display: block !important;
    position: absolute;
    background-color: #fff;
    z-index: 999999;
    width: 200px;
    left: 30px;
    top: 0;
    outline: none;
    box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
}

.erd-sub-menu > a {
    padding: 7px 5px 7px 10px;
    border-radius: 0 !important;
    border: 1px solid var(--dim-gray);
    color: #fff;
}

.shrink .erd-sub-menu > a {
    color: #555;
}

.erd-sub-menu > .fams-active {
    background-color: var(--green) !important;
}

.erd-sub-menu > .fams-active > * {
    /*color : #fff !important;*/
}

.erd-menu div:last-child > div > a:last-child {
    border-bottom: 1px solid var(--dim-gray);
}

/*/-------------------------------------///
// # Main Navigation
//--------------------------------------/*/

.main-navigation {
    background: var(--nav__bgcolor);
    box-shadow: var(--nav__shadow--light);
}

.main-navigation > ul.menu {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: stretch;

    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation > ul.menu > li {
    position: relative;
    flex: 0 0 auto;
    min-width: 10em;
    min-height: 3em;
}

.main-navigation > ul.menu > li > a {
    display: block;
    text-align: center;
    border-right: 1px solid var(--nav__link-border--color);
    padding: 0.7692307692307692em 1em;
    cursor: pointer;
    text-decoration: none;
    transition: var(--nav__link--animation);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 100%;
}

.main-navigation > ul.menu > li > a.home-link {
    flex-basis: 12em;
}

.main-navigation > ul.menu > li > a.home-link > i {
    color: var(--nav__home-link-icon);
}
.main-navigation > ul.menu > li > a.case-link > i {
    color: var(--nav__case-link-icon);
}
.main-navigation > ul.menu > li > a.license-link > i {
    color: var(--nav__license-link-icon);
}
.main-navigation > ul.menu > li > a.analysis-link > i {
    color: var(--nav__analysis-link-icon);
}
.main-navigation > ul.menu > li > a.operation-link > i {
    color: var(--nav__operation-link-icon);
}
.main-navigation > ul.menu > li > a.report-link > i {
    color: var(--nav__report-link-icon);
}
.main-navigation > ul.menu > li > a.help-link > i {
    color: var(--nav__help-link-icon);
}

.main-navigation > ul.menu > li > a {
    color: var(--nav__link);
}

.main-navigation > ul.menu > li:hover > a,
.main-navigation > ul.menu > li.active > a {
    color: var(--nav__link-hover);
    background: var(--nav__link-hover-bgcolor);
}

.main-navigation > ul.menu > li > a > i {
    margin-right: 2px;
    transition: var(--nav__link--animation);
}


.main-navigation > ul.menu > li:hover > a > i,
.main-navigation > ul.menu > li.active > a > i {
    color: var(--nav__link-hover);
    margin-right: 4px;
}

/* Sub Navigation */
.mN > ul.menu > li > ul.sub-menu {
    display: none;
    box-shadow: var(--subnav__shadow--mid);
    transition: var(--nav__link--animation);
}

.mN > ul.menu > li:hover > ul.sub-menu,
.mN > ul.menu > li:focus > ul.sub-menu {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    z-index: 999;
    left: 0;
    top: auto;
    min-width: calc(150% - 1px);
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--subnav__bgcolor);
}

.mN > ul.menu > li:hover > ul.sub-menu:before {
    display: block;
    position: absolute;
    content: '';
    z-index: 99;
    top: 0;
    left: 1em;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
}

.mN > ul.menu > li:hover > ul.sub-menu > li,
.mN > ul.menu > li:focus > ul.sub-menu > li {
    position: relative;
    flex: 0 1 auto;
    order: inherit;
}

.mN > ul.menu > li:hover > ul.sub-menu > li > a {
    display: block;
    text-align: left;
    border-top: 1px solid var(--nav__link-border--color);
    padding: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--nav__link--animation);
}

.mN > ul.menu > li:hover > ul.sub-menu > li > a:hover,
.mN > ul.menu > li:hover > ul.sub-menu > li > a:focus {
    background: var(--subnav__link-hover-bgcolor);
}

/* Custom added by rima */

.main-navigation > ul.menu > li > a.activeMenu{
    color: var(--white);
    background-color: var(--salt-gray);
}

.main-navigation > ul.menu > li > a.activeMenu > i {
    color: var(--white);
    margin-right: 4px;
}