/*
 * 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{
    height:80px;
    width: 95px;
    padding: 10px;
    background: transparent;

    transition: background .3s ease-out;
}

#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;
}

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

#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;
}

.dropdownItem.home  > a:before {
    content: url(../img/icon_home.svg);
    margin: 0 10px;
    vertical-align: -3px;
}

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

.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{
    display: none;
}

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

.dropdownCategory:hover,.dropdownHome:hover{
}

.topItem.active{
    background:url(../img/dropdown/menu_category_1x40.png) bottom left;
}

.dropdownHome .topItem .soluzioneLogo{
    background: url(../img/dropdown/menu_icon_01.png) top left;
    width:36px;
    height:38px;
    margin:2px 0 0 8px;
}

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

#soluzioneDropdownMenu .menuItems {
    position: absolute;
    left: 0;
    
    background: transparent;
    width: 100%;
    padding: 0;

    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, 115px);
    }
}

#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;
    width: 100%;
    color: #000;
}

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

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

#soluzioneDropdownMenu .titleContent p{
    display: table-cell;
    vertical-align: middle;
}

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

#soluzioneDropdownMenu .active .titleContent p.title,
#soluzioneDropdownMenu .dropdownCategory:hover .titleContent p.title{
    color: #FF3300;
}

#soluzioneDropdownMenu .titleContent p.title:before{
    content: url(../img/icon_library.svg);
    margin: 0 10px;
    vertical-align: -3px;
}

#soluzioneDropdownMenu .active .titleContent p.title:before,
#soluzioneDropdownMenu .dropdownCategory:hover .titleContent p.title:before{
    content: url(../img/icon_library_active.svg);
}

/* language switch */
#soluzioneDropdownMenu #lng {
    z-index: 10;
    position: relative;
    /* padding: 17px 20px 17px 0; */
    margin: 24px 0;
}

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

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

    outline: none;
}

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

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

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

 #navigation-overlay {
    width: 100%;
    height: 100%;
    background: #000;
    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;
}

.soluzion--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: 15px;
    display: block;
}

#nav_user::after {
    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;
}

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

#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 {
    background: #fff;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

#nav_user:hover li {
    display: block;
    padding: 1px 5px;
}
#nav_user li:hover {
    background: #f1f1f1;
}