.menu-link-expanded-right {
    font-size: 16px;
}

.menu-link-expanded-right > * {
    width: 100%;
}

.menu-link-expanded-right-link {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-blue3);
    line-height: 3;
    width: 100%;
    white-space: nowrap;
}

.phone div[data-block="Custom.MenuLinkExpandRight"] .menu-link-expanded-right .menu-link-expanded-right-link a[data-link],
.tablet div[data-block="Custom.MenuLinkExpandRight"] .menu-link-expanded-right .menu-link-expanded-right-link a[data-link] {
    padding: 0;
    background-color: unset;
    border-bottom: unset;
}

.menu-link-expanded-right:has(.menu-link-expanded-right-open a) .menu-link-expanded-right-link:after {
    content: "\e902";
    font-family: 'cmvm';
    font-size: 14px;
    margin: 0 20px;
}

.desktop .menu-link-expanded-right:hover .menu-link-expanded-right-open {
    visibility: visible;
}

.menu-link-expanded-right-open {
    display: flex;
    position: absolute;
    left: 100%;
    top: 0;
    flex-flow: column;
    width: 100%;
    height: 100%;
    padding: 26px 0;
    line-height: 3;
    visibility: hidden;
    overflow: auto;
}

.menu-link-expanded-right-open .list.list-group.OSFillParent {
    display: flex;
    flex-flow: column;
}

.menu-link-expanded-right-open a {
    color: var(--color-blue3);
}

.desktop .menu-link-expanded-right a:hover:before,
.desktop .menu-link-expanded-right:hover .menu-link-expanded-right-link a:before{
    opacity: 1;
    transform: translateX(10px);
}

.desktop .menu-link-expanded-right a span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.desktop .menu-link-expanded-right a:hover span,
.desktop .menu-link-expanded-right:hover .menu-link-expanded-right-link a span{
    transform: translateX(15px);
    transition: all .5s;
    text-shadow: 0px 0px 1px var(--color-blue3);
    color: var(--color-primary);
}

.desktop .menu-link-expanded-right a:before {
    transition: all .5s;
    content: '\e92c';
    font-family: 'cmvm';
    font-size: 14px;
    opacity: 0;
    color: var(--color-copper);
    transform: translateX(-100%);
}

.desktop .menu-link-expand a:has(a):before {
    content: '';
}

.menu-link-expanded-right a:hover {
    text-shadow: 0px 0px 1px var(--color-blue3);
}

/* mobile version */


.phone .menu-link-expanded-right[expanded='True'] .menu-link-expanded-right-link:after,
.tablet .menu-link-expanded-right[expanded='True'] .menu-link-expanded-right-link:after {
    rotate: -180deg;
}


.phone .menu-link-expanded-right[expanded='True'] .menu-link-expanded-right-open,
.tablet .menu-link-expanded-right[expanded='True'] .menu-link-expanded-right-open {
    transform: scaleY(1);
    display: flex;
}


.phone .menu-link-expanded-right-open,
.tablet .menu-link-expanded-right-open {
    position: relative;
    color: blue;
    background: var(--color-white);
    flex-flow: column;
    width: 100%;
    height: 100%;
    left: 0;
    padding: 0;
    visibility: initial;
    display: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s ease-in-out .1s;
}