.ui-dialog.user_modal .ui-dialog-titlebar-close
{
    z-index: 999999;
    position: absolute;
    top: 5px;
    right: 9px;
    border: 0px solid transparent;
    background-color: transparent;
    background-size: 100%;
    cursor: pointer;
    padding: 15px;
}

.ui-dialog.user_modal .ui-button-icon.ui-icon.ui-icon-closethick {
    background-image: url(../imgs/close.png);
    width: 16px;
    height: 16px;
    border: 0px solid transparent;
    background-color: transparent;
    background-size: 100%;
    cursor: pointer;
    display: block;
}

.ui-dialog.user_modal .ui-dialog-titlebar-close:focus-visible {
    outline: 0px solid transparent;
    background: transparent;
  }

.ui-dialog.user_modal .ui-dialog-title{
    display: block;
    font-weight: bold;
    font-size: 1.3rem;
    width: 100%;

}

.ui-widget-overlay.ui-front {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0.75;
    -moz-opacity:0.75;
    filter: alpha(opacity=75);
    width:100%;
    height:100%;
    z-index:1001;
    position: fixed;
}                


.dialogButtonClass{
    display: block;
    font-weight: bold;
    font-size: 1.3rem;
    color: #fff;
    background-color: #000;
    width: auto;
    height: auto;
    border-radius: 3px;
    padding: 12px;
    margin: 20px 0px 20px 5px;
}



.user_container
, .ui-dialog.user_modal
 {
    color: rgb(48, 48, 48);
    background-color: rgba(244,244,244,1)!important;
    /*padding-top: 2em;*/
    padding-bottom: 2em;
    padding-left: 0px;
    padding-right:0px;
    z-index: 100000;
    position: fixed;
    display: block;
    top: 0!important;
    right: -100%;
    bottom:0;
    width: 39.5vw!important;
    height: 100vh;
    transform: translateX(0%) translateY(0px) translateZ(0px);
    max-width: 512px;
}

.user_container.slideIn
, .ui-dialog.user_modal.slideIn {
    right: 0px;
    padding-left: 0px;
    padding-right:0px;
    max-width: 512px;
    overflow-y: scroll;
}


.ui-dialog.user_modal{
    display: none;
}


.user_header{
    width: 100%;
    background-color: #f4f4f4;
}

.user_header_bottom{
    width: 100%;
    background-color: #f4f4f4;
    padding-top: 2rem;
}

.user_container_title{
    font: 500 18px/28px Roboto;
    letter-spacing: 3px;
    /*margin-bottom: 10px;*/
    height: 55px;
    padding-top: 50px;    
    text-transform: uppercase;
}

.user_container_title.centered{
    text-align: center;
}

.user_container_title.signup{
    padding-left: 2rem;
}

.user_info_container{
    display: flex;
    flex-direction: column;
}

.user_info_container > .user_info{
    display: flex;
    flex-direction: row;
    padding-left: 2rem;
    font-size: 12px;
}

.user_info_container > .user_info > .fa{
    font: 300 14px/22px Roboto;
    width: 40px;
    justify-self: start;
    height: 50px;
}

.user_container_summary
{
    display: flex;
    flex-direction: column;
}

.user_container_summary{
    width: 100%;
    height: 145px;
    background-color: #fff;
}

.user_container_summary > .message{
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 2rem;
    font: 500 12px/19px Roboto;
}

.user_container_summary.logged{
    display: flex;
    flex-direction: row;
    height: 66px;
}

.user_container_summary.logged > .message,
.user_container_summary.logged > .username{
    padding-top: 25px;
    padding-bottom: 25px;
    justify-content: flex-start;
    font: 500 14px/19px Roboto;
    color: #808080;
}

.user_container_alert{
    display: flex;
    flex-direction: row;
    cursor: pointer;
    background-color: #fff;
    justify-content: start;
    border-bottom: 1px solid #ddd;    
}


.user_container_alert > .bell
{
    display: flex;
    position: relative;
    background-image: url(../imgs/bell.png);
    width: 31px;
    height: 28px;
    border: 0px solid transparent;
    background-color: transparent;
    background-size: 31px 28px;
    cursor: pointer;
    display: block;
    margin-right: 15px;
    margin-left: 1.6rem;
}

.user_container_alert > .user_container_alert_messages{
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
}

.user_container_alert_messages > .message1{
    font: 500 18px/24px Roboto;
    color: #8F404F;
}

.user_container_alert_messages .message2_container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    line-height: 1.5;
    height: 4rem;
    letter-spacing: 1px;
}

.user_container_alert_messages .message2{
    color: #000;
    background-color: #fff;
    font: 500 14px/19px Roboto;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding-right: 8px;
}


.user_container_alert > .bell > .badge_container {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 0px;
    right: 0px;  
    height: 10px;
    width: 10px;
    border-radius: 100%;
 
}

.user_container_alert > .bell > .badge_container > .badge {
    background: rgb(217, 65, 65);
    border-radius: 100%;
    height: 6px;
    width: 6px;    
}

.user_body{
    overflow-y: auto;
}

.user_menu_container {
    display: flex;
    flex-direction: column;
    border-top: 0px solid #ddd;
    background-color: #fff;
    overflow-x: hidden; /* previene scroll x del menu utente*/
}

.user_menu_container.light {
    background-color: #fff;
}

.user_menu_container_item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    line-height: 1.5;
    height: 4rem;
    letter-spacing: 3px;
    padding-left: 2rem;
    padding-right: 2rem;
    font: 500 18px/24px Roboto;
}


.user_menu_container_item .symbol,
.user_container_alert_messages .symbol{
    content: url(../imgs/arrow-right.svg)!important;
}


.user_menu_container_item.language_country {
    background-color: #fff;
}


.user_menu_container_item:hover {
    color: rgb(58, 58, 58);
}


.user_menu_container_item.bb {
    border-bottom: 1px solid #ddd;
}


/** submenues **/


.submenues.sm_hidden{
    display: none;
}

.submenues.sm_visible{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 80px; 
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow-y: scroll;
    padding-bottom: 100px;
}

.user_menu_container_item.submenu{
    margin-left: 0px;
    background-color:  #fff;
    padding-left: 60px;
}
.user_menu_container_item.submenu a.back{
    color: #424242;
    font-weight: 400;
}


.user_menu_container_item.parent.pm_open{
    flex-direction: row-reverse;
    justify-content: left;
    background-color: #f1f1f1;
}

.user_menu_container_item.parent.pm_close{
    flex-direction: row;
    justify-content: space-between;
}	

.user_menu_container_item.parent.pm_open > .label{
    opacity: 0.4;
}

.user_menu_container_item.parent.pm_close > .label{
    opacity: 1;
}

.user_menu_container_item.parent.pm_open > .symbol {
    transform: matrix(-1, 0, 0, -1, 0, 0);
    margin-right: 20px;
}

.user_menu_container_item.parent.pm_close > .symbol {
    transform: matrix(1, 0, 0, -1, 0, 0);
    margin-right: 0px;
}

.menu_separator{
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #707070;
    opacity: 0.3;
    width: 100%;
    height: 0px;
}

.submenu_separator{
    margin-top: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #707070;
    opacity: 0.3;
    width: 100%;
    height: 0px;
}	

/*-----------------------------------------------*/

.user_container_button{
    display: flex;
    flex: 90%;
    height: 56px;
    width: 87%;
    align-self: center;
}

.user_container_button.logout{
    padding-top: 30px;
    padding-bottom: 30px;
}

.user_button{
    border: 0px;
    outline: transparent solid 2px;
    outline-offset: 2px;
    width: 100%;
    height: 50px;
    vertical-align: middle;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    text-transform: uppercase;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    cursor: pointer;
    font: 400 12px/1.2 Roboto;
    letter-spacing: 1px;    
}

.user_button.login{
    background-color: rgb(38, 38, 38);
    color: #fff;
}

.user_button.signup
{
    background-color: #f4f4f4;
    color: #707070;
    border: 1px solid #1D1D1D;
}

.user_button.logout
{
    background-color: #fff;
    color: #1d1d1d;
    border: 1px solid #1D1D1D;
}

.fa-bell:before {
	content: url(../imgs/bell-on.svg)!important;
}

.fa-calendar:before {
	content: url(../imgs/calendar.svg)!important;
}

.fa-star:before {
	content: url(../imgs/star.svg)!important;
}

/*shop*/
.user_container_subtitle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    line-height: 1.5;
    height: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;        
    font: 500 14px/19px Roboto; 
    letter-spacing: 1.4px;
    color: #262626;
    font-weight: bold;
    opacity: 41%;
}

/*
@media (max-width: 1024px) {
    .user_container
    , .ui-dialog.user_modal{
        overflow-y: scroll;
    }
}
*/

@media (max-width: 480px) {
    .user_header > .log_sign{
        display: none;
    }
    .user_container, .ui-dialog.user_modal {
        width: 83vw!important;
    }

    .nopadding {
        padding-top: 0px;
    }

    .ui-dialog.user_modal .ui-button.ui-dialog-titlebar-close {
        top: 10px;
        right: 84.4vw;
    }

    .ui-dialog.user_modal .ui-button-icon.ui-icon.ui-icon-closethick {
        background-image: url(../imgs/close.svg);
        width: 25px;
        height: 25px;
        color: #fff;
    }    
/*
    .user_body {
        height: 45vh;
    }
*/
    .user_container_title{
        font: 500 14px/28px Roboto;
    }
    
    .user_menu_container_item{
        font: 500 14px/24px Roboto;
    }

    .user_container_summary > .message{
        font: 500 12px/19px Roboto;
    }

    .user_container_summary.logged > .message,
    .user_container_summary.logged > .username {
        font: 500 14px/19px Roboto!important;
    }    

    .user_container_alert_messages > .message1,
    .message2 {
        font: 500 12px/24px Roboto;
    }
    .user_menu_container{
        padding-bottom: 70px;
    }

}