@import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
@import "../node_modules/tinper-bee-core/scss/util-keyframe";

$icon-color-light-contrast: #505F79;
$icon-color-dark-contrast: #fff;
$text-color-base: #212121;
$disabled-text-color-base: #909090;
.u-menu {
    font-size: $font-size-base;
    font-variant: tabular-nums;
    line-height: 1.5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: $text-color-base;
    background: #fff;
    line-height: 0;
    -webkit-transition: background 0.3s, width 0.2s;
    transition: background 0.3s, width 0.2s;
    zoom: 1;
    border: 1px solid #d9d9d9;
    box-shadow: 0 0 4px #d9d9d9;
    border-radius: $border-radius-base;
}

.u-menu:before,
.u-menu:after {
    content: '';
    display: table;
}

.u-menu:after {
    clear: both;
}

.u-menuul,
.u-menuol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.u-menu-hidden {
    display: none;
}

.u-menu-item-group-title {
    color: $disabled-text-color-base;
    font-size: $font-size-base;
    line-height: 1.5;
    padding: 8px 16px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.u-menu-submenu,
.u-menu-submenu-inline {
    -webkit-transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.u-menu-item:active,
.u-menu-submenu-title:active {
    background: #e6f7ff;
}

.u-menu-submenu .u-menu-sub {
    cursor: initial;
    -webkit-transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.u-menu-item>a {
    display: block;
    color: rgba(0, 0, 0, 0.65);
}

.u-menu-item>a:hover {
    color: #108ee9;
}

.u-menu-item>a:focus {
    text-decoration: none;
}

.u-menu-item>a:before {
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: '';
}

.u-menu-item-divider {
    height: 1px;
    overflow: hidden;
    background-color: #e8e8e8;
    line-height: 0;
}

.u-menu-item:hover,
.u-menu-item-active,
.u-menu:not(.u-menu-inline) .u-menu-submenu-open,
.u-menu-submenu-active,
.u-menu-submenu-title:hover {
    background-color: $hover-bg-color-base;
    // color: $brand-primary;
}

.u-menu-horizontal .u-menu-item,
.u-menu-horizontal .u-menu-submenu {
    margin-top: -1px;
}

.u-menu-horizontal>.u-menu-item:hover,
.u-menu-horizontal>.u-menu-item-active,
.u-menu-horizontal>.u-menu-submenu .u-menu-submenu-title:hover {
    background-color: transparent;
}

.u-menu-item-selected {
    color: $brand-primary;
}

.u-menu-item-selected>a,
.u-menu-item-selected>a:hover {
    color: $brand-primary;
}

.u-menu:not(.u-menu-horizontal) .u-menu-item-selected {
    background-color: $selected-bg-color-base;
}

.u-menu-inline,
.u-menu-vertical,
.u-menu-vertical-left {
    border-right: 1px solid #e8e8e8;
    padding: 12px 0;
}

.u-menu-vertical-right {
    border-left: 1px solid #e8e8e8;
}

.u-menu-vertical.u-menu-sub,
.u-menu-vertical-left.u-menu-sub,
.u-menu-vertical-right.u-menu-sub {
    border-right: 0;
    padding: 0;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

.u-menu-vertical.u-menu-sub .u-menu-item,
.u-menu-vertical-left.u-menu-sub .u-menu-item,
.u-menu-vertical-right.u-menu-sub .u-menu-item {
    border-right: 0;
    margin-left: 0;
    left: 0;
}

.u-menu-vertical.u-menu-sub .u-menu-item:after,
.u-menu-vertical-left.u-menu-sub .u-menu-item:after,
.u-menu-vertical-right.u-menu-sub .u-menu-item:after {
    border-right: 0;
}

.u-menu-vertical.u-menu-sub>.u-menu-item,
.u-menu-vertical-left.u-menu-sub>.u-menu-item,
.u-menu-vertical-right.u-menu-sub>.u-menu-item,
.u-menu-vertical.u-menu-sub>.u-menu-submenu,
.u-menu-vertical-left.u-menu-sub>.u-menu-submenu,
.u-menu-vertical-right.u-menu-sub>.u-menu-submenu {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

.u-menu-horizontal.u-menu-sub,
.u-menu-vertical.u-menu-sub,
.u-menu-vertical-left.u-menu-sub,
.u-menu-vertical-right.u-menu-sub {
    min-width: 160px;
}

.u-menu-item,
.u-menu-submenu-title {
    cursor: pointer;
    margin: 0;
    padding: 0 20px;
    position: relative;
    display: block;
    white-space: nowrap;
    -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.u-menu-item .anticon,
.u-menu-submenu-title .anticon {
    min-width: 14px;
    margin-right: 10px;
    font-size: $font-size-base;
    -webkit-transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.u-menu-item .anticon+span,
.u-menu-submenu-title .anticon+span {
    -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 1;
}

.u-menu>.u-menu-item-divider {
    height: 1px;
    margin: 1px 0;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    background-color: #e8e8e8;
}

.u-menu-submenu-popup {
    position: absolute;
    border-radius: $border-radius-base;
    z-index: $zindex-menubar;
    background: #fff;
}

.u-menu-submenu-popup .submenu-title-wrapper {
    padding-right: 20px;
}

.u-menu-submenu-popup:before {
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    bottom: 0;
    content: ' ';
    opacity: 0.0001;
}
.u-menu-submenu-popup {
    &.u-menu-submenu-placement-rightTop:before{
        top: 0;
        left: -4px;
    }  
    &.u-menu-submenu-placement-leftTop:before{
        top: 0;
        left: 0;
        right: -4px;
    }  
    &.u-menu-submenu-placement-topLeft:before{
        top: 0;
        left: 0;
        bottom: -7px;
    } 
}

.u-menu-submenu>.u-menu {
    background-color: #fff;
    border-radius: $border-radius-base;
}

.u-menu-submenu>.u-menu-submenu-title:after {
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.u-menu-submenu-vertical>.u-menu-submenu-title .u-menu-submenu-arrow,
.u-menu-submenu-vertical-left>.u-menu-submenu-title .u-menu-submenu-arrow,
.u-menu-submenu-vertical-right>.u-menu-submenu-title .u-menu-submenu-arrow,
.u-menu-submenu-inline>.u-menu-submenu-title .u-menu-submenu-arrow {
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    position: absolute;
    top: 50%;
    right: 16px;
    width: 10px;
}

.u-menu-submenu-vertical>.u-menu-submenu-title .u-menu-submenu-arrow:before,
.u-menu-submenu-vertical-left>.u-menu-submenu-title .u-menu-submenu-arrow:before,
.u-menu-submenu-vertical-right>.u-menu-submenu-title .u-menu-submenu-arrow:before,
.u-menu-submenu-inline>.u-menu-submenu-title .u-menu-submenu-arrow:before,
.u-menu-submenu-vertical>.u-menu-submenu-title .u-menu-submenu-arrow:after,
.u-menu-submenu-vertical-left>.u-menu-submenu-title .u-menu-submenu-arrow:after,
.u-menu-submenu-vertical-right>.u-menu-submenu-title .u-menu-submenu-arrow:after,
.u-menu-submenu-inline>.u-menu-submenu-title .u-menu-submenu-arrow:after {
    content: '';
    position: absolute;
    vertical-align: baseline;
    background: #fff;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0.65)));
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65));
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65));
    width: 6px;
    height: 1.5px;
    border-radius: 2px;
    -webkit-transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.u-menu-submenu-vertical>.u-menu-submenu-title .u-menu-submenu-arrow:before,
.u-menu-submenu-vertical-left>.u-menu-submenu-title .u-menu-submenu-arrow:before,
.u-menu-submenu-vertical-right>.u-menu-submenu-title .u-menu-submenu-arrow:before,
.u-menu-submenu-inline>.u-menu-submenu-title .u-menu-submenu-arrow:before {
    -webkit-transform: rotate(45deg) translateY(-2px);
    -ms-transform: rotate(45deg) translateY(-2px);
    transform: rotate(45deg) translateY(-2px);
}

.u-menu-submenu-vertical>.u-menu-submenu-title .u-menu-submenu-arrow:after,
.u-menu-submenu-vertical-left>.u-menu-submenu-title .u-menu-submenu-arrow:after,
.u-menu-submenu-vertical-right>.u-menu-submenu-title .u-menu-submenu-arrow:after,
.u-menu-submenu-inline>.u-menu-submenu-title .u-menu-submenu-arrow:after {
    -webkit-transform: rotate(-45deg) translateY(2px);
    -ms-transform: rotate(-45deg) translateY(2px);
    transform: rotate(-45deg) translateY(2px);
}

.u-menu-submenu-vertical>.u-menu-submenu-title:hover .u-menu-submenu-arrow:after,
.u-menu-submenu-vertical-left>.u-menu-submenu-title:hover .u-menu-submenu-arrow:after,
.u-menu-submenu-vertical-right>.u-menu-submenu-title:hover .u-menu-submenu-arrow:after,
.u-menu-submenu-inline>.u-menu-submenu-title:hover .u-menu-submenu-arrow:after,
.u-menu-submenu-vertical>.u-menu-submenu-title:hover .u-menu-submenu-arrow:before,
.u-menu-submenu-vertical-left>.u-menu-submenu-title:hover .u-menu-submenu-arrow:before,
.u-menu-submenu-vertical-right>.u-menu-submenu-title:hover .u-menu-submenu-arrow:before,
.u-menu-submenu-inline>.u-menu-submenu-title:hover .u-menu-submenu-arrow:before {
    background: -webkit-gradient(linear, left top, right top, from($icon-color-light-contrast), to($icon-color-light-contrast));
    background: -webkit-linear-gradient(left, $icon-color-light-contrast, $icon-color-light-contrast);
    background: linear-gradient(to right, $icon-color-light-contrast, $icon-color-light-contrast);
}

.u-menu-submenu-inline>.u-menu-submenu-title .u-menu-submenu-arrow:before {
    -webkit-transform: rotate(-45deg) translateX(2px);
    -ms-transform: rotate(-45deg) translateX(2px);
    transform: rotate(-45deg) translateX(2px);
}

.u-menu-submenu-inline>.u-menu-submenu-title .u-menu-submenu-arrow:after {
    -webkit-transform: rotate(45deg) translateX(-2px);
    -ms-transform: rotate(45deg) translateX(-2px);
    transform: rotate(45deg) translateX(-2px);
}

.u-menu-submenu-open.u-menu-submenu-inline>.u-menu-submenu-title .u-menu-submenu-arrow {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.u-menu-submenu-open.u-menu-submenu-inline>.u-menu-submenu-title .u-menu-submenu-arrow:after {
    -webkit-transform: rotate(-45deg) translateX(-2px);
    -ms-transform: rotate(-45deg) translateX(-2px);
    transform: rotate(-45deg) translateX(-2px);
}

.u-menu-submenu-open.u-menu-submenu-inline>.u-menu-submenu-title .u-menu-submenu-arrow:before {
    -webkit-transform: rotate(45deg) translateX(2px);
    -ms-transform: rotate(45deg) translateX(2px);
    transform: rotate(45deg) translateX(2px);
}

.u-menu-vertical .u-menu-submenu-selected,
.u-menu-vertical-left .u-menu-submenu-selected,
.u-menu-vertical-right .u-menu-submenu-selected {
    color: $brand-primary;
}

.u-menu-vertical .u-menu-submenu-selected>a,
.u-menu-vertical-left .u-menu-submenu-selected>a,
.u-menu-vertical-right .u-menu-submenu-selected>a {
    color: $brand-primary;
}

.u-menu-horizontal {
    border: 0;
    border-bottom: 1px solid #e8e8e8;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 46px;
    white-space: nowrap;
}

.u-menu-horizontal>.u-menu-item,
.u-menu-horizontal>.u-menu-submenu {
    position: relative;
    top: 1px;
    display: inline-block;
    vertical-align: bottom;
    border-bottom: 2px solid transparent;
}

.u-menu-horizontal>.u-menu-item:hover,
.u-menu-horizontal>.u-menu-submenu:hover,
.u-menu-horizontal>.u-menu-item-active,
.u-menu-horizontal>.u-menu-submenu-active,
.u-menu-horizontal>.u-menu-item-open,
.u-menu-horizontal>.u-menu-submenu-open,
.u-menu-horizontal>.u-menu-item-selected,
.u-menu-horizontal>.u-menu-submenu-selected {
    border-bottom: 2px solid $brand-primary;
    color: $brand-primary;
}

.u-menu-horizontal>.u-menu-item>a {
    display: block;
    color: rgba(0, 0, 0, 0.65);
}

// .u-menu-horizontal>.u-menu-item>a:hover {
//     color: $brand-primary;
// }

.u-menu-horizontal>.u-menu-item>a:before {
    bottom: -2px;
}

.u-menu-horizontal>.u-menu-item-selected>a {
    color: $brand-primary;
}

.u-menu-horizontal:after {
    content: '\20';
    display: block;
    height: 0;
    clear: both;
}

.u-menu-vertical .u-menu-item,
.u-menu-vertical-left .u-menu-item,
.u-menu-vertical-right .u-menu-item,
.u-menu-inline .u-menu-item {
    position: relative;
}

.u-menu-vertical .u-menu-item:after,
.u-menu-vertical-left .u-menu-item:after,
.u-menu-vertical-right .u-menu-item:after,
.u-menu-inline .u-menu-item:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-right: 3px solid $brand-primary;
    -webkit-transform: scaleY(0.0001);
    -ms-transform: scaleY(0.0001);
    transform: scaleY(0.0001);
    opacity: 0;
    -webkit-transition: opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.u-menu-vertical .u-menu-item,
.u-menu-vertical-left .u-menu-item,
.u-menu-vertical-right .u-menu-item,
.u-menu-inline .u-menu-item,
.u-menu-vertical .u-menu-submenu-title,
.u-menu-vertical-left .u-menu-submenu-title,
.u-menu-vertical-right .u-menu-submenu-title,
.u-menu-inline .u-menu-submenu-title {
    padding: 0 16px;
    font-size: $font-size-base;
    line-height: 42px;
    height: 42px;
    margin-top: 4px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.u-menu-vertical .u-menu-submenu,
.u-menu-vertical-left .u-menu-submenu,
.u-menu-vertical-right .u-menu-submenu,
.u-menu-inline .u-menu-submenu {
    padding-bottom: 0.01px;
}

.u-menu-vertical .u-menu-item:not(:last-child),
.u-menu-vertical-left .u-menu-item:not(:last-child),
.u-menu-vertical-right .u-menu-item:not(:last-child),
.u-menu-inline .u-menu-item:not(:last-child) {
    margin-bottom: 0;
}

.u-menu-vertical>.u-menu-item,
.u-menu-vertical-left>.u-menu-item,
.u-menu-vertical-right>.u-menu-item,
.u-menu-inline>.u-menu-item,
.u-menu-vertical>.u-menu-submenu>.u-menu-submenu-title,
.u-menu-vertical-left>.u-menu-submenu>.u-menu-submenu-title,
.u-menu-vertical-right>.u-menu-submenu>.u-menu-submenu-title,
.u-menu-inline>.u-menu-submenu>.u-menu-submenu-title {
    line-height: 42px;
    height: 42px;
    margin: 0;
}

.u-menu-inline {
    width: 100%;
}

.u-menu-inline .u-menu-selected:after,
.u-menu-inline .u-menu-item-selected:after {
    -webkit-transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 1;
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

.u-menu-inline .u-menu-item,
.u-menu-inline .u-menu-submenu-title {
    width: calc(100% + 1px);
}

.u-menu-inline .u-menu-submenu-title {
    padding-right: 34px;
}

.u-menu-inline-collapsed {
    width: 80px;
}

.u-menu-inline-collapsed>.u-menu-item,
.u-menu-inline-collapsed>.u-menu-item-group>.u-menu-item-group-list>.u-menu-item,
.u-menu-inline-collapsed>.u-menu-item-group>.u-menu-item-group-list>.u-menu-submenu>.u-menu-submenu-title,
.u-menu-inline-collapsed>.u-menu-submenu>.u-menu-submenu-title {
    left: 0;
    text-overflow: clip;
    padding: 0 32px !important;
}

.u-menu-inline-collapsed>.u-menu-item .u-menu-submenu-arrow,
.u-menu-inline-collapsed>.u-menu-item-group>.u-menu-item-group-list>.u-menu-item .u-menu-submenu-arrow,
.u-menu-inline-collapsed>.u-menu-item-group>.u-menu-item-group-list>.u-menu-submenu>.u-menu-submenu-title .u-menu-submenu-arrow,
.u-menu-inline-collapsed>.u-menu-submenu>.u-menu-submenu-title .u-menu-submenu-arrow {
    display: none;
}

.u-menu-inline-collapsed>.u-menu-item .anticon,
.u-menu-inline-collapsed>.u-menu-item-group>.u-menu-item-group-list>.u-menu-item .anticon,
.u-menu-inline-collapsed>.u-menu-item-group>.u-menu-item-group-list>.u-menu-submenu>.u-menu-submenu-title .anticon,
.u-menu-inline-collapsed>.u-menu-submenu>.u-menu-submenu-title .anticon {
    font-size: 16px;
    line-height: 42px;
    margin: 0;
}

.u-menu-inline-collapsed>.u-menu-item .anticon+span,
.u-menu-inline-collapsed>.u-menu-item-group>.u-menu-item-group-list>.u-menu-item .anticon+span,
.u-menu-inline-collapsed>.u-menu-item-group>.u-menu-item-group-list>.u-menu-submenu>.u-menu-submenu-title .anticon+span,
.u-menu-inline-collapsed>.u-menu-submenu>.u-menu-submenu-title .anticon+span {
    max-width: 0;
    display: inline-block;
    opacity: 0;
}

.u-menu-inline-collapsed-tooltip {
    pointer-events: none;
}

.u-menu-inline-collapsed-tooltip .anticon {
    display: none;
}

.u-menu-inline-collapsed-tooltip a {
    color: rgba(255, 255, 255, 0.85);
}

.u-menu-inline-collapsed .u-menu-item-group-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 4px;
    padding-right: 4px;
}

.u-menu-item-group-list {
    margin: 0;
    padding: 0;
}

.u-menu-item-group-list .u-menu-item,
.u-menu-item-group-list .u-menu-submenu-title {
    padding: 0 16px 0 28px;
}

.u-menu-root.u-menu-vertical,
.u-menu-root.u-menu-vertical-left,
.u-menu-root.u-menu-vertical-right,
.u-menu-root.u-menu-inline {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.u-menu-sub.u-menu-inline {
    padding: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
}

.u-menu-sub.u-menu-inline>.u-menu-item,
.u-menu-sub.u-menu-inline>.u-menu-submenu>.u-menu-submenu-title {
    line-height: 42px;
    height: 42px;
    list-style-type: disc;
    list-style-position: inside;
}

.u-menu-sub.u-menu-inline .u-menu-item-group-title {
    padding-left: 32px;
}

.u-menu-item-disabled,
.u-menu-submenu-disabled {
    color: rgba(0, 0, 0, 0.25) !important;
    cursor: not-allowed;
    background: none;
    border-color: transparent !important;
}

.u-menu-item-disabled>a,
.u-menu-submenu-disabled>a {
    color: rgba(0, 0, 0, 0.25) !important;
    pointer-events: none;
}

.u-menu-item-disabled>.u-menu-submenu-title,
.u-menu-submenu-disabled>.u-menu-submenu-title {
    color: rgba(0, 0, 0, 0.25) !important;
    cursor: not-allowed;
}

.u-menu-item-disabled>.u-menu-submenu-title>.u-menu-submenu-arrow:before,
.u-menu-submenu-disabled>.u-menu-submenu-title>.u-menu-submenu-arrow:before,
.u-menu-item-disabled>.u-menu-submenu-title>.u-menu-submenu-arrow:after,
.u-menu-submenu-disabled>.u-menu-submenu-title>.u-menu-submenu-arrow:after {
    background: rgba(0, 0, 0, 0.25) !important;
}

.u-menu-dark,
.u-menu-dark .u-menu-sub {
    color: #fff;
    background: #2E3C61;
}
.u-menu-dark .u-menu-item{
    margin-top: 0;
}

.u-menu-dark .u-menu-submenu-title .u-menu-submenu-arrow,
.u-menu-dark .u-menu-sub .u-menu-submenu-title .u-menu-submenu-arrow {
    opacity: 0.45;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.u-menu-dark .u-menu-submenu-title .u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-sub .u-menu-submenu-title .u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-submenu-title .u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-sub .u-menu-submenu-title .u-menu-submenu-arrow:before {
    background: #fff;
}
.u-menu-dark.u-menu-inline .u-menu-item{
    margin-bottom: 0;
}
.u-menu-dark.u-menu-submenu-popup {
    background: transparent;
}

.u-menu-dark .u-menu-inline.u-menu-sub {
    background: #000c17;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
}

.u-menu-dark.u-menu-horizontal {
    border-bottom: 0;
}

.u-menu-dark.u-menu-horizontal>.u-menu-item,
.u-menu-dark.u-menu-horizontal>.u-menu-submenu {
    border-color: #001529;
    border-bottom: 0;
    top: 0;
    margin-top: 0;
}

.u-menu-dark.u-menu-horizontal>.u-menu-item>a:before {
    bottom: 0;
}

.u-menu-dark .u-menu-item,
.u-menu-dark .u-menu-item-group-title,
.u-menu-dark .u-menu-item>a {
    color: #fff;
    background: #1A213F;
}

.u-menu-dark.u-menu-inline,
.u-menu-dark.u-menu-vertical,
.u-menu-dark.u-menu-vertical-left,
.u-menu-dark.u-menu-vertical-right {
    border-right: 0;
}

.u-menu-dark.u-menu-inline .u-menu-item,
.u-menu-dark.u-menu-vertical .u-menu-item,
.u-menu-dark.u-menu-vertical-left .u-menu-item,
.u-menu-dark.u-menu-vertical-right .u-menu-item {
    border-right: 0;
    margin-left: 0;
    left: 0;
}

.u-menu-dark.u-menu-inline .u-menu-item:after,
.u-menu-dark.u-menu-vertical .u-menu-item:after,
.u-menu-dark.u-menu-vertical-left .u-menu-item:after,
.u-menu-dark.u-menu-vertical-right .u-menu-item:after {
    border-right: 0;
}

.u-menu-dark.u-menu-inline .u-menu-item,
.u-menu-dark.u-menu-inline .u-menu-submenu-title {
    width: 100%;
}

.u-menu-dark .u-menu-item:hover,
.u-menu-dark .u-menu-item-active,
.u-menu-dark .u-menu-submenu-active,
.u-menu-dark .u-menu-submenu-open,
.u-menu-dark .u-menu-submenu-selected,
.u-menu-dark .u-menu-submenu-title:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}

.u-menu-dark .u-menu-item:hover>a,
.u-menu-dark .u-menu-item-active>a,
.u-menu-dark .u-menu-submenu-active>a,
.u-menu-dark .u-menu-submenu-open>a,
.u-menu-dark .u-menu-submenu-selected>a,
.u-menu-dark .u-menu-submenu-title:hover>a {
    color: #fff;
}

.u-menu-dark .u-menu-item:hover>.u-menu-submenu-title>.u-menu-submenu-arrow,
.u-menu-dark .u-menu-item-active>.u-menu-submenu-title>.u-menu-submenu-arrow,
.u-menu-dark .u-menu-submenu-active>.u-menu-submenu-title>.u-menu-submenu-arrow,
.u-menu-dark .u-menu-submenu-open>.u-menu-submenu-title>.u-menu-submenu-arrow,
.u-menu-dark .u-menu-submenu-selected>.u-menu-submenu-title>.u-menu-submenu-arrow,
.u-menu-dark .u-menu-submenu-title:hover>.u-menu-submenu-title>.u-menu-submenu-arrow,
.u-menu-dark .u-menu-item:hover>.u-menu-submenu-title:hover>.u-menu-submenu-arrow,
.u-menu-dark .u-menu-item-active>.u-menu-submenu-title:hover>.u-menu-submenu-arrow,
.u-menu-dark .u-menu-submenu-active>.u-menu-submenu-title:hover>.u-menu-submenu-arrow,
.u-menu-dark .u-menu-submenu-open>.u-menu-submenu-title:hover>.u-menu-submenu-arrow,
.u-menu-dark .u-menu-submenu-selected>.u-menu-submenu-title:hover>.u-menu-submenu-arrow,
.u-menu-dark .u-menu-submenu-title:hover>.u-menu-submenu-title:hover>.u-menu-submenu-arrow {
    opacity: 1;
}

.u-menu-dark .u-menu-item:hover>.u-menu-submenu-title>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-item-active>.u-menu-submenu-title>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-submenu-active>.u-menu-submenu-title>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-submenu-open>.u-menu-submenu-title>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-submenu-selected>.u-menu-submenu-title>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-submenu-title:hover>.u-menu-submenu-title>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-item:hover>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-item-active>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-submenu-active>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-submenu-open>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-submenu-selected>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-submenu-title:hover>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-item:hover>.u-menu-submenu-title>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-item-active>.u-menu-submenu-title>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-submenu-active>.u-menu-submenu-title>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-submenu-open>.u-menu-submenu-title>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-submenu-selected>.u-menu-submenu-title>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-submenu-title:hover>.u-menu-submenu-title>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-item:hover>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-item-active>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-submenu-active>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-submenu-open>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-submenu-selected>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-submenu-title:hover>.u-menu-submenu-title:hover>.u-menu-submenu-arrow:before {
    background: #fff;
}

.u-menu-dark .u-menu-item-selected {
    border-right: 0;
    color: #fff;
}

.u-menu-dark .u-menu-item-selected:after {
    border-right: 0;
}

.u-menu-dark .u-menu-item-selected>a,
.u-menu-dark .u-menu-item-selected>a:hover {
    color: #fff;
}

.u-menu.u-menu-dark .u-menu-item-selected,
.u-menu-submenu-popup.u-menu-dark .u-menu-item-selected {
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
    &:after{
        border-right: 3px solid rgb(245, 60, 50);
    }
}

.u-menu-dark .u-menu-item-disabled,
.u-menu-dark .u-menu-submenu-disabled,
.u-menu-dark .u-menu-item-disabled>a,
.u-menu-dark .u-menu-submenu-disabled>a {
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.35) !important;
}

.u-menu-dark .u-menu-item-disabled>.u-menu-submenu-title,
.u-menu-dark .u-menu-submenu-disabled>.u-menu-submenu-title {
    color: rgba(255, 255, 255, 0.35) !important;
}

.u-menu-dark .u-menu-item-disabled>.u-menu-submenu-title>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-submenu-disabled>.u-menu-submenu-title>.u-menu-submenu-arrow:before,
.u-menu-dark .u-menu-item-disabled>.u-menu-submenu-title>.u-menu-submenu-arrow:after,
.u-menu-dark .u-menu-submenu-disabled>.u-menu-submenu-title>.u-menu-submenu-arrow:after {
    background: rgba(255, 255, 255, 0.35) !important;
}

//-----------

.u-menu-horizontal {
    background-color: #F3F5F7;
    border: none;
    border-bottom: 1px solid transparent;
    border-bottom: 1px solid #d9d9d9;
    box-shadow: none;
}
.u-menu-horizontal .u-menu-item-selected{
    border-bottom: 2px solid transparent;
}




.zoom-enter,.zoom-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.zoom-leave {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
    animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-enter.zoom-enter-active,.zoom-appear.zoom-appear-active {
    -webkit-animation-name: uZoomIn;
    animation-name: uZoomIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.zoom-leave.zoom-leave-active {
    -webkit-animation-name: uZoomOut;
    animation-name: uZoomOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.zoom-big-enter,.zoom-big-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.zoom-big-leave {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
    animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-big-enter.zoom-big-enter-active,.zoom-big-appear.zoom-big-appear-active {
    -webkit-animation-name: uZoomBigIn;
    animation-name: uZoomBigIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.zoom-big-leave.zoom-big-leave-active {
    -webkit-animation-name: uZoomBigOut;
    animation-name: uZoomBigOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.zoom-big-fast-enter,.zoom-big-fast-appear {
    -webkit-animation-duration: 0.1s;
    animation-duration: 0.1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.zoom-big-fast-leave {
    -webkit-animation-duration: 0.1s;
    animation-duration: 0.1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
    animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-big-fast-enter.zoom-big-fast-enter-active,.zoom-big-fast-appear.zoom-big-fast-appear-active {
    -webkit-animation-name: uZoomBigIn;
    animation-name: uZoomBigIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.zoom-big-fast-leave.zoom-big-fast-leave-active {
    -webkit-animation-name: uZoomBigOut;
    animation-name: uZoomBigOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.zoom-up-enter,.zoom-up-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.zoom-up-leave {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
    animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-up-enter.zoom-up-enter-active,.zoom-up-appear.zoom-up-appear-active {
    -webkit-animation-name: uZoomUpIn;
    animation-name: uZoomUpIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.zoom-up-leave.zoom-up-leave-active {
    -webkit-animation-name: uZoomUpOut;
    animation-name: uZoomUpOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.zoom-down-enter,.zoom-down-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.zoom-down-leave {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
    animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-down-enter.zoom-down-enter-active,.zoom-down-appear.zoom-down-appear-active {
    -webkit-animation-name: uZoomDownIn;
    animation-name: uZoomDownIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.zoom-down-leave.zoom-down-leave-active {
    -webkit-animation-name: uZoomDownOut;
    animation-name: uZoomDownOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.zoom-left-enter,.zoom-left-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.zoom-left-leave {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
    animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-left-enter.zoom-left-enter-active,.zoom-left-appear.zoom-left-appear-active {
    -webkit-animation-name: uZoomLeftIn;
    animation-name: uZoomLeftIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.zoom-left-leave.zoom-left-leave-active {
    -webkit-animation-name: uZoomLeftOut;
    animation-name: uZoomLeftOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.zoom-right-enter,.zoom-right-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.zoom-right-leave {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
    animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-right-enter.zoom-right-enter-active,.zoom-right-appear.zoom-right-appear-active {
    -webkit-animation-name: uZoomRightIn;
    animation-name: uZoomRightIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.zoom-right-leave.zoom-right-leave-active {
    -webkit-animation-name: uZoomRightOut;
    animation-name: uZoomRightOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.u-motion-collapse {
    overflow: hidden;
}
.u-motion-collapse-active {
    -webkit-transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.zoom-big-enter, .zoom-big-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.zoom-big-enter.zoom-big-enter-active, .zoom-big-appear.zoom-big-appear-active {
    -webkit-animation-name: uZoomBigIn;
    animation-name: uZoomBigIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.slide-up-enter,.slide-up-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.slide-up-leave {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.slide-up-enter.slide-up-enter-active,.slide-up-appear.slide-up-appear-active {
    -webkit-animation-name: uSlideUpIn;
    animation-name: uSlideUpIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.slide-up-leave.slide-up-leave-active {
    -webkit-animation-name: uSlideUpOut;
    animation-name: uSlideUpOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.slide-up-enter,.slide-up-appear {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-down-enter,.slide-down-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-down-leave {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
.slide-down-enter.slide-down-enter-active,
.slide-down-appear.slide-down-appear-active {
    -webkit-animation-name: uSlideDownIn;
    animation-name: uSlideDownIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.slide-down-leave.slide-down-leave-active {
    -webkit-animation-name: uSlideDownOut;
    animation-name: uSlideDownOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.slide-left-enter,.slide-left-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-left-leave {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.slide-left-enter.slide-left-enter-active,
.slide-left-appear.slide-left-appear-active {
    -webkit-animation-name: uSlideLeftIn;
    animation-name: uSlideLeftIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.slide-left-leave.slide-left-leave-active {
    -webkit-animation-name: uSlideLeftOut;
    animation-name: uSlideLeftOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.slide-right-enter,.slide-right-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.slide-right-leave {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
.slide-right-enter.slide-right-enter-active,
.slide-right-appear.slide-right-appear-active {
    -webkit-animation-name: uSlideRightIn;
    animation-name: uSlideRightIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.slide-right-leave.slide-right-leave-active {
    -webkit-animation-name: uSlideRightOut;
    animation-name: uSlideRightOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.swing-enter,.swing-appear {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.swing-enter.swing-enter-active,
.swing-appear.swing-appear-active {
    -webkit-animation-name: uSwingIn;
    animation-name: uSwingIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}