/*
 * Layout
 */

#soluzioneDropdownMenu{
    /* min-width:970px; */
    width: 100%;
    box-sizing: border-box;
    height:88px;
    padding: 0 18px;

    display:flex;
}

#soluzioneDropdownMenu.without-usernav {
    width: 100%;
}

#soluzioneDropdownMenu .menuItems>p{
    display: none;
}

#soluzioneDropdownMenu .menuItems>ul>li{
    min-height:80px;
    width: 118px;
    padding: 10px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    margin: 8px;
    background: transparent;

    transition: background .3s ease-out;

    display: flex;
    align-items: center;
    flex-direction: column;
}

#soluzioneDropdownMenu .menuItems>ul.funcSelection>li{
    min-width: 200px;
    width: auto;
}

#soluzioneDropdownMenu .menuItems .bottom{
    background:#000;
    height:8px;
    padding:0;
    clear:both;
    display: none;
}

#soluzioneDropdownMenu .menuItems>ul>li p{
    overflow: hidden;
    font-size: 14px;
    text-align: center;
    margin: 5px 0;
    color: #505050;
    margin-bottom: auto;
}

#soluzioneDropdownMenu .menuItems>ul>li.findtime2307 p {
    hyphens: auto;
}

#soluzioneDropdownMenu .menuItems>ul>li p > span{
    font-size: 10px;
}

#soluzioneDropdownMenu .menuItems>ul>li p .duration {
    font-size: 12px;
    color: #828282;
    display: inline-block;
    margin-top: 12px;
}

#soluzioneDropdownMenu .menuItems>ul.funcSelection>li p{
    width:auto;
}

.dropdownItem{
    margin: 0 1em;
    align-self: start;
}

.dropdownItem.logo {
    width: auto;
    margin-left: 0;
}

.dropdownItem.home {
    display: flex;
    height: 100%;
    align-items: center;
    text-align: center;
}

.dropdownItem.home  > a {
    vertical-align: middle;
}

.dropdownSearch{
    min-width:180px;
    position: relative;
    flex-grow: 1;
}
.dropdownUserNav {
    width: 40px;
    margin-right: 0;
    z-index: 10;
    height: 100%;
}

.dropdownUserNav .title {
    display: none;
}

.dropdownSearch.withLanguageSwitch {

}

.titleContent p.title{
    margin-top:2px;
}

.titleImg {
    display:none;
}

.subImg {
    margin: auto;
}

.dropdownSearch input{
    width: calc(100% - 2em);
    margin: 24px 1em;
}

.dropdownSearch .button-cancel-search {
    position: absolute;
    right: 25px;
    top: 36px;
}

.mobile .dropdownSearch input.hasValue+.button-cancel-search {
    display: none;
}

.dropdownSearch button{
    display: none;
}

/*
 * Color styling
 */
.topItem{
    height:88px;
    overflow:hidden;
}

.dropdownCategory:hover,.dropdownHome:hover{
}

.topItem.active{
}

.dropdownHome .topItem .soluzioneLogo{
    width:36px;
    height:38px;
    margin:2px 0 0 8px;
}

#soluzioneDropdownMenu>li>ul>li>p{
    background:#111;
    color:#fff;
}

#soluzioneDropdownMenu .menuItems {
    position: absolute;
    left: 0;
/* 
    max-width: 1500px; */
    
    background: transparent;
    width: 100%;
    padding: 0;

    max-height: calc(100vh - 88px);
    overflow-y: auto;

    z-index: 10;
}

/* not as nice but works on ie11 */
#soluzioneDropdownMenu .menuItems ul{
    background: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    max-width: 960px;
    margin: auto;
    padding: 2em 0;
    box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.15);
}

/* nicer default for edge chrome ... */
@supports (grid-gap: 0) {
    #soluzioneDropdownMenu .menuItems ul{
        display: grid;
        grid-template-columns: repeat(auto-fill, 156px);
    }
}

@media (min-width: 1500px) {

    #soluzioneDropdownMenu .menuItems .themeSelection {
        margin-left: 300px;
    }
}

#soluzioneDropdownMenu .menuItems ul.funcSelection{
    background: #fff;
    cursor:pointer;
    display:none;
    -moz-box-shadow: 1px 1px 1px rgba(50,50,50,.3);
    -webkit-box-shadow: 1px 1px 1px rgba(50,50,50,.3);
    box-shadow: 1px 1px 1px rgba(50,50,50,.3);
}

#soluzioneDropdownMenu .menuItems ul li{
    cursor:pointer;
    /* overflow: hidden;
    float: left; */
}

#soluzioneDropdownMenu .menuItems ul li:hover, #soluzioneDropdownMenu .menuItems ul li.selected, #soluzioneDropdownMenu .menuItems ul li:active {
    background: #f2f2f2;

    transition: background .05s;
}

#soluzioneDropdownMenu ul:not(.funcLearn) .menuItems ul.themeSelection li:hover, 
#soluzioneDropdownMenu .funcSolution .menuItems ul.themeSelection li.selected, 
#soluzioneDropdownMenu .funcSolution .menuItems ul.themeSelection li:active {

    background: #3b3b3b url(../img/dropdown_hover_arrow.png) no-repeat right center;
}

#soluzioneDropdownMenu .menuItems ul.funcSelection li:hover, #soluzioneDropdownMenu .menuItems ul.funcSelection li.selected, #soluzioneDropdownMenu .menuItems ul.funcSelection li:active {
    background:#1e1e1e;
}



/*
 * Text styling
 */

#soluzioneDropdownMenu p{
    font-size:12px;
    color: #000;
}

#soluzioneDropdownMenu .titleContent{
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
}

#soluzioneDropdownMenu .titleContent > *{
    /* cursor:default; */
}

#soluzioneDropdownMenu .titleContent p.title{
    font-size:14px;
    text-align: center;
    margin: 0 8px 0 0;
}

#soluzioneDropdownMenu .titleContent svg{
    width: 27px;
    margin: -3px 5px 0;
}

#soluzioneDropdownMenu .active .titleContent p.title,
#soluzioneDropdownMenu .dropdownCategory:hover .titleContent p.title{
    color: var(--primary-color);
}

.dropdownItem.active svg,
.dropdownItem.active svg path,
#soluzioneDropdownMenu .active .titleContent svg,
#soluzioneDropdownMenu .dropdownCategory:hover .titleContent svg,
#soluzioneDropdownMenu .dropdownCategory:hover .titleContent svg path {
    fill: var(--primary-color);

}

/* language switch */
#soluzioneDropdownMenu #lng {
    z-index: 10;
    position: relative;
    margin: 0px 0 0 8px;
    display: flex;
    align-items: center;
}

#soluzioneDropdownMenu #lng label{
    color: #fff;
}

#soluzioneDropdownMenu #lng .soluzione--language-switch--option-list{
    height: 26px;
    border: 0;
    color: #333;

    /* outline: none; */
}

#soluzioneDropdownMenu #lng .soluzione--language-switch .ui-selectmenu-button {
    width: auto;
    background: #fff;
    color: #000;
    border: 0;
    /* outline: 0; */
    padding: 7px 4px;
}

#soluzioneDropdownMenu .icon-only {
    width: 40px;
    height: 40px;
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#soluzioneDropdownMenu .icon-only:hover svg,
#soluzioneDropdownMenu .icon-only:hover svg path {
    fill: var(--primary-color);
}

#soluzioneDropdownMenu .icon-only .title {
    display: none;
}

#soluzioneDropdownMenu #lng .soluzione--language-switch .ui-selectmenu-button .ui-selectmenu-icon {
    background: url(../img/icon_globe.svg) center center no-repeat;
    width: 25px;
    height: 25px;
}

#soluzioneDropdownMenu #lng .soluzione--language-switch .ui-selectmenu-button .ui-selectmenu-text {
    display: none;
}

 #navigation-overlay {
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.7;
    position: fixed;
    z-index: 9;
    top: 0;
    display: none;
}

.ui-selectmenu-menu ul.ui-menu {
    border: 0;
    background: #fff;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.soluzione--language-switch .ui-button,
.ui-selectmenu-menu ul.ui-menu .ui-menu-item,
.dropdownUserNav a,
.dropdownUserNav a p {
    /* cursor: default; */
}

.ui-selectmenu-menu ul.ui-menu .ui-menu-item-wrapper {
    padding: 15px;
    white-space: nowrap;
}

.ui-selectmenu-menu ul.ui-menu .ui-menu-item-wrapper.ui-state-active {
    border: 0;
    background: rgba(0,0,0,0.05);
    color: #000;
    margin: 0;
}

#func_learn {
    cursor: pointer;
}


/* user nav */
#nav_user {
    float: right;
    min-height: 0px;
    position: relative;
    height: auto;
    margin-top:64px;
    cursor: pointer;

    z-index: 2;
}

#nav_user li > * {
    color: #fff;
    padding: 16px 20px;
    display: block;
}

#nav_user > .title {
    display: none;
}

#nav_user::after,
.button-about {
    content: '';
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0px;
    margin: 20px 0px;
    top: -60px;
    background: #f2f2f2 url(../img/icon_usernav.svg) center center no-repeat;
    border-radius: 3px;
    display: block;
    transition: background .1s ease-out;
}

.button-about {
    position: relative;
    top: 4px;
    background: #f2f2f2 url(../img/icon_info_simple.svg) center center no-repeat;
    cursor: pointer;
    display: none;
}

#nav_user:hover::after,
.button-about:hover {
    background-color: #d9d9d9;
    transition: background .1s ease-out;
}

.mobile .button-about {
    display: none;
}

#nav_user li {
    display: none;
    background: transparent;
    transition: background .1s;
}

#nav_user li p {
    color: #000;
    font-size: 14px;
    white-space: nowrap;
}

#nav_user li:hover {
}

#nav_user li:hover .aboutImg p::after {
    background-position: -20px -420px;
}

#nav_user li:hover .profileImg p::after {
    background-position: -20px -400px;
}

#nav_user li:hover .adminImg p::after {
    background-position: -20px -340px;
}

#nav_user li:hover .loginImg p::after {
    background-position: -20px -440px;
}

#nav_user li:active {
    background: #646464;
}

#nav_user li:active p{
    color: #c6c6c6;
}

#nav_user li:hover .aboutImg p::after {
    background-position: -40px -420px;
}

#nav_user li:hover .profileImg p::after {
    background-position: -40px -400px;
}

#nav_user li:hover .adminImg p::after {
    background-position: -40px -340px;
}

#nav_user li:hover .loginImg p::after {
    background-position: -40px -440px;
}

#nav_user:hover,
#nav_user.visible {
    background: #fff;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

#nav_user:hover li,
#nav_user.visible li {
    display: block;
    padding: 0;
}
#nav_user li:hover,
#nav_user.visible li:focus {
    background: #f1f1f1;
    outline: 0;
}

/* mobile stying */

.mobile #soluzioneDropdownMenu .logo #homeButton {
    background-image: url(../../shared/img/logos/logo_soluzione_small.svg);
    width: 32px;
    height: 32px;
}

.mobile .navigation {
    height: 60px;
}

.mobile #soluzioneDropdownMenu {
    justify-content: space-between;
    height: 60px;
}

.mobile .dropdownItem.logo {
    margin: auto 0;
}

.mobile #soluzioneDropdownMenu .logo #homeButton {
    margin: 0;
}

.mobile .mobileSearchList,
.mobile .dropdownCategory.home {
    display: none;
}

.mobile .mobileSearch {
    display: flex;
    margin-left: auto;
    margin-right: 10px;
}

.mobile .mobileSearch.active {
    width: 100%;
    margin: 0;
}

.mobile .mobileSearch.active .mobileSearchList {
    display: flex;
    align-items: center;
    width: 100%;
}

.mobile .mobileSearch .mobileSearchList .dropdownSearch {
    margin: 0;
}

.mobile .mobileSearch .mobileSearchList .dropdownSearch .topItem {
    margin-left: -1em;
}

.mobile .mobileSearch .mobileSearchList .dropdownSearch input {
    margin-top: 10px;
}

.mobile .mobileSearch .mobileSearchToggle {
    width: 20px;
    height: 20px;
    margin: auto;
}

.mobile .mobileSearch.active .mobileSearchToggle {
    display: none;
}

.mobile .mobileSearch .mobileSearchToggle svg path {
    fill: #000;
}

.mobile .mobileSearch .mobileSearchCancel {
    color: var(--primary-color);
}

.mobile #soluzioneDropdownMenu #lng {
    margin-right: 20px;
}

.mobile .mobileNav {
    display: flex;
    flex-direction: column;
}

.mobile .mobileNav .mobileNavToggle {
    width: 40px;
    height: 40px;
    background: #f2f2f2;
    border-radius: 2px;
    margin: auto;
}

.mobile .mobileNav .mobileNavToggle .line {
    width: 20px;
    height: 2px;
    background:#000;
    left: 10px;
    position: relative;
    
    transition: all .3s ease;
}

.mobile .mobileNav .mobileNavToggle .line-0 {
    top: 13px;
    transform-origin: top left;
}
.mobile .mobileNav .mobileNavToggle .line-1 {
    top: 18px;
}
.mobile .mobileNav .mobileNavToggle .line-2 {
    top: 23px;
    transform-origin: bottom left;
}


.mobile .mobileNav.open .mobileNavToggle .line {
    left: 15px;
}

.mobile .mobileNav.open .mobileNavToggle .line-0 {
    transform: rotate(45deg);
}

.mobile .mobileNav.open .mobileNavToggle .line-1 {
    opacity: 0;
}

.mobile .mobileNav.open .mobileNavToggle .line-2 {
    transform: rotate(-45deg);
}

.mobile .mobileNav .mobileNavList,
.mobile .mobileNav .mobileSubnavList {
    display: none;

    width: 100%;
    position: absolute;
    top: 61px;
    background: #fff;
    height: calc(100vh - 61px);
    padding-top: 1em;

    transition: left .3s ease;
}

.mobile .mobileNav.open .mobileNavList,
.mobile .mobileNav.open .mobileSubnavList {
    display: block;
}

.mobile .mobileNav .mobileNavList {
    left: -100vw;
}
.mobile .mobileNav .mobileNavList.visible,
.mobile .mobileNav.open .mobileSubnavList.visible {
    left: 0;
}

.mobile .mobileNav.open .mobileSubnavList {
    left: 100vw;
}

.mobile .mobileNav.open .mobileSubnavList .returnMainNav {
    padding-left: 30px;
    text-transform: lowercase;
    font-weight: bold;
}

.mobile .mobileNav.open .mobileSubnavList .returnMainNav::before {
    content:' ';
    background: url(../img/player/arrowback.svg) no-repeat center;
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0;
    background-size: contain;
}

.mobile .mobileNav .mobileNavList > li,
.mobile .mobileNav .mobileSubnavList > li {
    margin: 0 1em !important;
    width: calc(100% - 2em) !important;
    justify-content: flex-start !important;
    height: 50px !important;
    display: flex;
    align-items: center;
    position: relative;
}

.mobile .mobileNav .mobileSubnavList>li>ul>li {
    height: 50px !important;
}

.mobile .mobileNav .mobileSubnavList>li>ul#nav_user {

}

.mobile .mobileNav .mobileSubnavList>li>ul#nav_user>li a {
    padding: 0;
}

.mobile .mobileNav .mobileSubnavList>li>ul#nav_user>li a p {
    font-size: 18px;
    font-weight: bold;
}

.mobile .dropdownUserNav .title {
    display: block;
}

.mobile .mobileNav .mobileNavList>li.hasSubnav::after {
    content:' ';
    background: url(../img/player/arrownext.svg) no-repeat center;
    position: absolute;
    width: 18px;
    height: 18px;
    right: 0;
    background-size: contain;
}

.mobile .mobileNav .mobileNavList>li .title {
    font-weight: bold;
    font-size: 18px !important;
}

.mobile .mobileNav .mobileNavList > li .titleContent svg {
    display: none;
}

.mobile #soluzioneDropdownMenu .icon-only svg {
    display: none;
}

.mobile #soluzioneDropdownMenu .icon-only .title {
    display: inline-block;
}

.mobile .soluzione--language-switch .title {
    display: none;
}

.mobile .soluzione--language-switch .ui-selectmenu-button {
    /* display: none; */
}

.mobile #nav_user>.title {
    display: inline-block;
}

.mobile #nav_user::after {
    display: none;
}

.mobile #nav_user li {
    display: block;
}

.mobile #soluzioneDropdownMenu .menuItems,
.mobile .mobileNav .mobileSubnavList>li.userNavItems {
    max-height: none;
    height: calc(100vh - 150px) !important;
}

.mobile .mobileNav .mobileSubnavList>li.userNavItems {
    align-items: flex-start;
}