/* Main sidebar */
.main-sidebar { z-index: 9; position: relative;flex: 0 0 auto; width: 250px; min-height: 0; border-right: 1px solid #e6e6e6; background: #fff; box-shadow: inset -2px 0 0 0 rgb(0, 0, 0, 0.02); transition: width 0.25s ease-out;}
.main-sidebar > .inner {width: 100%; height: 100%; padding: 12px 0; overflow-x: hidden; overflow-y: auto;}

/* Collapse-expand */
.main-sidebar > .collapse {display: none; z-index: 99; position: absolute; top: 0; right: -22px; width: 34px; height: calc(100vh - 50px); padding-top: 59px; opacity: 0; transition: opacity 0.25s ease-out;}
.main-sidebar > .collapse > .circle {position: relative; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2); color: #333; cursor: pointer; user-select: none;}
.main-sidebar > .collapse > .circle > svg {position: absolute; top: 50%; left: 6px; width: 10px; transform: translateY(-50%); fill: currentColor;}
.main-sidebar > .collapse > .circle:hover {background: #2f67f3;}
.main-sidebar > .collapse > .circle:hover > svg {color: #fff;}

.main-sidebar > .collapse.hover {display: block;}
.main-sidebar > .collapse.hover.transition {opacity: 1;}

/* Views */
.main-sidebar .side-view {display: none; position: relative; left: 0; transition: all 0.25s ease-out;}
.main-sidebar .side-view.visible {display: block;}
.main-sidebar .side-view.before-transition {display: block; left: -250px; transition: none;}

/* Static items */
.main-sidebar .static-items {display: none;}
.main-sidebar .static-items .item {display: none; padding: 0 7px;}
.main-sidebar .static-items .item > .button {display: block; position: relative; min-height: 39px; padding: 12px 17px; overflow: hidden; border-radius: 5px; background: rgba(0, 0, 0, 0.035); font-size: 0;white-space: nowrap; cursor: pointer; transition: color 0.15s ease-out, background-color 0.15s ease-out;}
.main-sidebar .static-items .item > .button > .svg-icon { display: block; position: absolute; top: 50%; left: 16px; width: 17px; height: 17px; transform: translateY(-50%);}
.main-sidebar .static-items .item > .button > .svg-icon > svg {width: 100%; color: #2f3c51; fill: currentColor;}
.main-sidebar .static-items .item > .button > .title {display: block; padding: 0 0 0 30px; color: #2f3c51; font-weight: 600; font-size: 13px; line-height: 15px;}
.main-sidebar .static-items .item > .button:hover { z-index: 2; position: relative; background: rgba(0, 0, 0, 0.055);}

.main-sidebar .static-items .item.return-back {display: block;}
.main-sidebar .static-items .item.return-back > .button > .svg-icon {width: 15px; height: 15px;}
.main-sidebar .static-items .item.expand-sidebar {display: none;}
.main-sidebar .static-items .item.expand-sidebar > .button > .svg-icon > svg {color: #8a0387;}
.main-sidebar .static-items .item.expand-sidebar > .button > .title {color: #8a0387;}
.main-sidebar .static-items .item.collapse-sidebar {display: none;}
.main-sidebar .static-items .item.collapse-sidebar > .button {background: #fbf4fb;}
.main-sidebar .static-items .item.collapse-sidebar > .button > .svg-icon > svg {color: #8a0387;}
.main-sidebar .static-items .item.collapse-sidebar > .button > .title {color: #8a0387;}
.main-sidebar .static-items .item.collapse-sidebar > .button:hover {background: #fbf2fc;}

.main-sidebar .side-view.secondary .static-items {display: block; margin-bottom: 15px;}

.main-sidebar .nav .group {margin-bottom: 20px;}
.main-sidebar .nav .group:last-child {margin-bottom: 0;}
.main-sidebar .nav .group > .title {padding: 0 22px 7px 22px;color: #444; font-weight: 600; font-size: 10px; line-height: 10px; text-transform: uppercase; cursor: default;}
.main-sidebar .nav .group > .short-title {display: none;}
.main-sidebar .nav .items {padding: 0 8px;}
.main-sidebar .nav .items > .item { display: block; position: relative; padding: 12px 17px; border-radius: 5px; font-size: 0; cursor: pointer; transition: color 0.05s ease-out, background-color 0.05s ease-out;}
.main-sidebar .nav .items > .item > .name { display: block; padding: 0 0 0 30px; color: #2f3c51; font-weight: 600; font-size: 13px; line-height: 15px;}
.main-sidebar .nav .items > .item > .number { position: absolute; top: 50%; right: 15px; width: 18px; height: 18px; transform: translateY(-50%); border: 1px solid transparent; border-radius: 50%; color: #eee; font-weight: 600; font-size: 11px; line-height: 16px; text-align: center;}
.main-sidebar .nav .items > .item > .svg-icon { display: block; position: absolute; top: 50%; left: 16px; width: 17px; height: 17px; transform: translateY(-50%);}
.main-sidebar .nav .items > .item > .svg-icon > svg {width: 100%; color: #2f3c51; fill: currentColor;}
.main-sidebar .nav .items > .item.vehicles > .svg-icon {width: 20px; height: 20px;}
.main-sidebar .nav .items > .item.transport > .svg-icon {width: 20px; height: 20px;}
.main-sidebar .nav .items > .item.transport-companies > .svg-icon {width: 18px; height: 18px;}
.main-sidebar .nav .items > .item.warehouse-operations > .svg-icon {width: 16px; height: 16px;}
.main-sidebar .nav .items > .item.create-weighting > .svg-icon {width: 16px; height: 16px;}
.main-sidebar .nav .items > .item.ships > .svg-icon {width: 19px; height: 19px;}
.main-sidebar .nav .items > .item.materials > .svg-icon {width: 21px; height: 21px;}
.main-sidebar .nav .items > .item.orders > .svg-icon {width: 19px; height: 19px; margin-left: -1px;}
.main-sidebar .nav .items > .item.waybills > .svg-icon {width: 19px; height: 19px;}
.main-sidebar .nav .items > .item.roles > .svg-icon {width: 20px; height: 20px;}
.main-sidebar .nav .items > .item.security > .svg-icon {width: 19px; height: 19px;}
.main-sidebar .nav .items > .item.industrial-sites > .svg-icon {width: 19px; height: 19px;}
.main-sidebar .nav .items > .item.certificate-types > .svg-icon {width: 19px; height: 19px;}
.main-sidebar .nav .items > .item.translations > .svg-icon {width: 19px; height: 19px;}
.main-sidebar .nav .items > .item.vac-permits > .svg-icon {width:18px; height: 18px;}
.main-sidebar .nav .items > .item.vac-journal > .svg-icon {width:19px; height: 19px;}
.main-sidebar .nav .items > .item.vac-current > .svg-icon {width:20px; height: 20px;}
.main-sidebar .nav .items > .item.warehouse-routing > .svg-icon {width:18px; height: 18px;}
.main-sidebar .nav .items > .item.work-receipt > .svg-icon {width:19px; height: 19px;}
.main-sidebar .nav .items > .item:hover { z-index: 2; position: relative; background: rgba(0, 0, 0, 0.035); box-shadow: inset 0 0 1px #dadada;}
.main-sidebar .nav .items > .item.active { z-index: 3; position: relative; background: #eaf1fd; box-shadow: inset 0 0 1px #d7e6fe;}
.main-sidebar .nav .items > .item.active > .name {color: #2552c1;}
.main-sidebar .nav .items > .item.active > .svg-icon svg {color: #2552c1;}

.main-sidebar .nav .items > .item.num-red > .number { border-color: #ff005a; color: #ff005a;}
.main-sidebar .nav .items > .item.num-purple > .number { border-color: #ce1bca; color: #ce1bca;}
.main-sidebar .nav .items > .item.num-blue > .number { border-color: #034dbf; color: #034dbf;}
.main-sidebar .nav .items > .item.num-green > .number { border-color: #267E54; color: #267E54;}
.main-sidebar .nav .items > .item.accounts > .svg-icon { width: 18px; height: 18px;}

/* Collapsed */
.main-layout.sidebar-collapsed .main-sidebar {width: 54px; border-right-color: #eaeaea; box-shadow: inset -2px 0 0 0 rgba(0, 0, 0, 0.015);}
.main-layout.sidebar-collapsed .main-sidebar > .collapse {display: none;}
.main-layout.sidebar-collapsed .main-sidebar > .inner {padding: 5px 0;}

.main-layout.sidebar-collapsed .main-sidebar .static-items {display: block; margin-bottom: 0;}
.main-layout.sidebar-collapsed .main-sidebar .static-items .item {padding: 0 0;}
.main-layout.sidebar-collapsed .main-sidebar .static-items .item > .button {display: block; padding: 10px 0; border-radius: 3px; background: none; text-align: center; opacity: 0.95;}
.main-layout.sidebar-collapsed .main-sidebar .static-items .item > .button .title {display: none;}
.main-layout.sidebar-collapsed .main-sidebar .static-items .item > .button .svg-icon {display: inline-block; position: static; top: 0; left: 0; width: 19px; height: 19px; transform: none; vertical-align: middle;}
.main-layout.sidebar-collapsed .main-sidebar .static-items .item > .button:hover { z-index: 2; position: relative; background: rgba(0, 0, 0, 0.035); box-shadow: inset 0 0 1px #d5d5d5;}
.main-layout.sidebar-collapsed .main-sidebar .static-items .item.expand-sidebar.desktop {display: block;}
.main-layout.sidebar-collapsed .main-sidebar .static-items .item.expand-sidebar.mobile {display: none;}
.main-layout.sidebar-collapsed .main-sidebar .static-items .item.return-back {display: none;}

.main-layout.sidebar-collapsed .main-sidebar .side-view {padding: 0 5px;}
.main-layout.sidebar-collapsed .main-sidebar .nav .group {margin-bottom: 0;}
.main-layout.sidebar-collapsed .main-sidebar .nav .group.account,
.main-layout.sidebar-collapsed .main-sidebar .nav .group.quick-actions {display: none;}
.main-layout.sidebar-collapsed .main-sidebar .nav .group > .short-title {display: block; padding: 12px 0; color: #0843d9; font-weight: 600; font-size: 16px; line-height: 16px; text-align: center; text-transform: uppercase; cursor: default;}
.main-layout.sidebar-collapsed .main-sidebar .nav .group > .title {display: none;}
.main-layout.sidebar-collapsed .main-sidebar .nav .items { padding-right: 0;padding-left: 0;}
.main-layout.sidebar-collapsed .main-sidebar .nav .items > .item {padding: 10px 0; border-radius: 5px; box-shadow: none; text-align: center; opacity: 0.95;}
.main-layout.sidebar-collapsed .main-sidebar .nav .items > .item > .name {display: none;}
.main-layout.sidebar-collapsed .main-sidebar .nav .items > .item > .number {display: none;}
.main-layout.sidebar-collapsed .main-sidebar .nav .items > .item > .svg-icon {display: inline-block; position: static; top: 0; left: 0; width: 20px; height: 20px; transform: none; vertical-align: middle;}
.main-layout.sidebar-collapsed .main-sidebar .nav .items > .item.active {opacity: 1;}

@media all and (max-width: 800px) {
    .main-layout .main-sidebar > .collapse {display: none;}
    .main-layout .main-sidebar > .inner {padding: 5px 0;}

    .main-layout:not([class*=sidebar-expanded]) .main-sidebar {width: 54px; border-right-color: #eaeaea; box-shadow: inset -2px 0 0 0 rgba(0, 0, 0, 0.015);}

    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .static-items {display: block; margin-bottom: 0;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .static-items .item {padding: 0 0;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .static-items .item > .button {display: block; padding: 10px 0; border-radius: 3px; background: none; text-align: center; opacity: 0.95;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .static-items .item > .button .title {display: none;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .static-items .item > .button .svg-icon {display: inline-block; position: static; top: 0; left: 0; width: 19px; height: 19px; transform: none; vertical-align: middle;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .static-items .item > .button:hover { z-index: 2; position: relative; background: rgba(0, 0, 0, 0.035); box-shadow: inset 0 0 1px #d5d5d5;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .static-items .item.expand-sidebar.desktop {display: none;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .static-items .item.expand-sidebar.mobile {display: block;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .static-items .item.return-back {display: none;}

    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .side-view {padding: 0 5px;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .nav .group {margin-bottom: 0;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .nav .group.account,
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .nav .group.quick-actions {display: none;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .nav .group > .short-title {display: block; padding: 12px 0; color: #1651bb; font-weight: 600; font-size: 16px; line-height: 16px; text-align: center; text-transform: uppercase; cursor: default;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .nav .group > .title {display: none;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .nav .items { padding-right: 0;padding-left: 0;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .nav .items > .item {padding: 10px 0; border-radius: 5px; box-shadow: none; text-align: center; opacity: 0.95;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .nav .items > .item > .name {display: none;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .nav .items > .item > .number {display: none;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .nav .items > .item > .svg-icon {display: inline-block; position: static; top: 0; left: 0; width: 20px; height: 20px; transform: none; vertical-align: middle;}
    .main-layout:not([class*=sidebar-expanded]) .main-sidebar .nav .items > .item.active {opacity: 1;}

    .main-layout.sidebar-expanded .main-sidebar .side-view {padding: 0 7px;}
    .main-layout.sidebar-expanded .main-sidebar .nav .group > .title { padding-right: 15px;padding-left: 15px;}
    .main-layout.sidebar-expanded .main-sidebar .nav .items { padding-right: 0;padding-left: 0;}
    .main-layout.sidebar-expanded .main-sidebar {flex: 1 1 auto;}
    .main-layout.sidebar-expanded .main-content {display: none;}
    .main-layout.sidebar-expanded .main-sidebar .static-items {display: block; margin-bottom: 5px;}
    .main-layout.sidebar-expanded .main-sidebar .side-view.secondary .static-items {margin-bottom: 15px;}
    .main-layout.sidebar-expanded .main-sidebar .static-items .item { margin-bottom: 3px;padding: 0 0;}
    .main-layout.sidebar-expanded .main-sidebar .static-items .item:last-child {margin-bottom: 0;}

    .main-layout.sidebar-expanded .main-sidebar .static-items .item.collapse-sidebar {display: block;}
    .main-layout.sidebar-expanded .main-sidebar .static-items .item.return-back {display: block;}
}