.body-filter{
    filter: grayscale();
}
.uv-pwa-header{

}
.uv-pwa-drawer.is-visible{
    width: 70%;
    min-width: 240px;
}
.uv-pwa-ticket-label{
    margin-left: 30px;
}
.uv-js-disabled{
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    color: #ff4747;
}
.uv-pwa-ticket-count{

}
.uv-pwa-drawer-header {
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 12px;
    height: 151px;
    color: #fff;
    background-image: -webkit-linear-gradient(145deg,#1026B8 0,#cc4366 100%);
    background-image: -o-linear-gradient(145deg,#1026B8 0,#cc4366 100%);
    background-image: linear-gradient(145deg,#cc4366 0,#1026B8 100%);
}
.uv-pwa-avatar {
    width: 54px;
    height: 54px;
    border-radius: 27px;
    margin-bottom: 6px;
}
dialog .uv-pwa-avatar {
    width: 40px;
    height: 40px;
}
.uv-pwa-drawer-header .uv-pwa-title{
    font-weight: bold;
}
.uv-pwa-drawer-header .uv-pwa-email{

}

/*ticket list*/
.uv-pwa-ticket-list .mdl-list__item--three-line {
    height: auto;
    padding: 0px 15px 0px 10px;
}
.uv-pwa-ticket-list .mdl-list__item--three-line .mdl-list__item-primary-content.uv-pwa-list__item-primary-content{
    height: auto;
    padding: 0px 0px 15px 5px;
    margin-bottom: 12px;
}
.uv-pwa-ticket-list .mdl-list__item--three-line .mdl-list__item-primary-content.uv-pwa-list__item-primary-content:nth-child(2){
    border-bottom: 1px solid #dcdcdc;
    overflow: hidden;
    padding: 0px 3px 15px 0px;
    width: calc(100% - 75px);
}
.uv-pwa-ticket-list .mdl-list, .uv-pwa-ticket-list .mdl-list__item--three-line .mdl-list__item{
    padding: 0px;
}
.uv-pwa-saved-filters-list .mdl-list,
.uv-pwa-sorting-list .mdl-list{
    padding: 0px;
    margin: 0px;
}
.uv-pwa-saved-filters-list li.mdl-list__item,
.uv-pwa-sorting-list li.mdl-list__item {
    padding: 0;
    border-bottom: 1px solid #dcdcdc;
}
.uv-pwa-saved-filters-list li a,
.uv-pwa-sorting-list li a {
    text-decoration: none;
    color: #707070;
    display: block;
    width: 100%;
    height: 100%;
    padding: 18px 12px 18px 25px;
    line-height: 22px;
}
span.uv-pwa-ticket-list-customer {
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    max-width: calc(80% - 80px);
    white-space: nowrap;
}
.uv-pwa-ticket-list-subject{
    display: block;
    margin: 3px 0px;
}
.uv-pwa-ticket-list-message{
    display: block;
    font-size: 14px;
    color: #8B8B8B;
}
.uv-pwa-ticket-list-time{
    color: #7C70F4;
    font-size: 18px;
    vertical-align: top;
}
.uv-pwa-span-avatar{
    width: 54px;
    height: 54px;
    border-radius: 27px;
    margin-bottom: 6px;
    display: block;
    text-align: center;
    font-size: 30px;
    background: #cc7272;
    line-height: 54px;
    color: #fff;
}
dialog .uv-pwa-span-avatar{
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 40px;
}
.mdl-dialog {
    width: 80%;
}
.uv-pwa-left-green-border {
    border-left: 2px solid green;
}


/*ticket view*/
  .uv-pwa-ticket-view .mdl-list__item--three-line {
    height: auto;
    padding: 10px 10px 0px 0px;
    border-bottom: 1px solid #dcdcdc;
    /* margin-bottom: 10px; */
    align-items: flex-start;
} 
.uv-pwa-ticket-view .mdl-list__item--three-line .mdl-list__item-primary-content.uv-pwa-list__item-primary-content{
    height: auto;
    padding: 0px 15px 15px 15px;
    margin-bottom: 12px;
}
.uv-pwa-ticket-view .mdl-list__item--three-line .mdl-list__item-primary-content.uv-pwa-list__item-primary-content:nth-child(2){
    overflow: scroll;
    padding: 0px 10px 10px 0px;
    width: calc(100% - 80px);
}
.uv-pwa-ticket-view .mdl-list, .uv-pwa-ticket-view .mdl-list__item--three-line .mdl-list__item{
    padding: 0px;
} 
.uv-pwa-empty-state{
    text-align: center;
    height: 100%;
    width: 100%;
    position: absolute;
    background: #FAFAFA;
    padding-top: 20%;
}
.uv-pwa-empty-state img{
    width: 50%;
}
.uv-pwa-empty-state span{
    display: block;
    color: #BEBEBE;
    font-size: 16px;
    padding: 8%;
    text-align: center;
}
.uv-ticket-note li.mdl-list__item.mdl-list__item--three-line {
    background: rgba(245, 208, 42, .1);
    border-left: 2px solid rgb(245, 208, 42);
}

 /* .uv-pwa-ticket-view .mdl-list__item--three-line {
    height: auto;
    padding: 10px 18px 20px 20px;
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 10px;
    align-items: flex-start;
}
.uv-pwa-ticket-view .mdl-list__item--three-line .mdl-list__item-primary-content.uv-pwa-list__item-primary-content{
    height: auto;
}
.uv-pwa-ticket-view .mdl-list__item--three-line .mdl-list__item-primary-content.uv-pwa-list__item-primary-content:nth-child(2){
    margin-left: 12px;
    font-size: 14px;
}  */
.uv-pwa-ticket-view .mdl-list__item--three-line .mdl-list__item-primary-content.uv-pwa-list__item-primary-content:nth-child(2) table {
    font-size: 14px;
    border-spacing: 0px;
}
.uv-pwa-ticket-view .mdl-list__item--three-line .mdl-list__item-primary-content.uv-pwa-list__item-primary-content:nth-child(2) table td{
    padding-bottom: 5px;
    width: 50%;
}

.uv-pwa-ticket-view .mdl-list, .uv-pwa-ticket-view .mdl-list__item--three-line .mdl-list__item{
    padding: 0px;
}
.uv-pwa-ticket-properties{
    margin-top: 10px;
}
.uv-pwa-ticket-view-message{
    font-size: 14px;
    color: #7A7A7A;
}
.uv-pwa-ticket-view-customer-info table{
    margin-bottom: 10px;
    margin-top: 10px;
}

main.uv-pwa-activity-list {
    background: #FAFAFA;
}
main.uv-pwa-activity-list li.mdl-list__item.mdl-list__item--three-line {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    width: 90%;
    margin: 0px 20px 20px 20px;
    min-height: 100px;
    padding: 10px 15px 20px 15px;
    background: #fff;
}
main.uv-pwa-activity-list li.mdl-list__item.mdl-list__item--three-line div span.uv-pwa-span-heading {
    font-size: 18px;
}
main.uv-pwa-activity-list li.mdl-list__item.mdl-list__item--three-line div span:nth-child(2) {
    display: block;
    color: #8B8B8B;
    margin-top: 5px;
}
main.uv-pwa-activity-list li.mdl-list__item.mdl-list__item--three-line span.mdl-list__item-primary-content span{
    float: right;
}


.uv-pwa-drawer-separator{
    height: 1px;
    background-color: #dcdcdc;
    /* margin: 8px 0; */
}
.uv-pwa-header .mdl-layout__drawer-button .material-icons{
    line-height: 44px;
}
.uv-pwa-add-status-height{
    /* height: 325px; */
}
.uc-pwa-status-list {
    /* position: absolute; */
    left: 0;
    right: 0;
     border-bottom: 1px solid #dcdcdc; 
    /* border-top: 1px solid #dcdcdc; */
    /* margin: 12px 0px 0px 0px; */
}
.uv-pwa-status-active{
    background: #E0E0E0;
}
.uv-pwa-header-search{
    background: #fff;
}
.mdl-layout__content.uv-pwa-search-list{
    background: #FAFAFA;
}
.mdl-layout__content.uv-pwa-search-list .mdl-card.mdl-shadow--2dp {
    width: 90%;
    margin: 20px auto;
    min-height: 100px;
    padding: 10px 0px;
}
.uv-pwa-search-list .mdl-card__title {
    padding: 4px 16px;
}
.uv-pwa-search-list .mdl-card__supporting-text {
    padding: 6px 16px;
    line-height: 12px;
}
.uv-pwa-search-list h2.mdl-card__title-text {
    font-size: 20px;
}
.uv-pwa-header-search input a{
    color: #9E9E9E
}
.uv-pwa-header-search .mdl-textfield{
    width: 90%;
}
.uv-pwa-header-search .mdl-textfield input{
    border: none;
    color: #A0A0A0;
    width: 90%;
}
.uv-pwa-show-thread-info{
    margin-top: -5px;
}

/*helper*/
.uv-pwa-hide{
    display: none;
}
.uv-pwa-font-32{
    font-size: 32px;
}
.uv-pwa-font-22{
    font-size: 22px;
}
.uv-pwa-font-20{
    font-size: 20px;
}
.uv-pwa-clear{
    clear: both;
}
.uv-pwa-gold{
    color: #FFC107;
}
.uv-pwa-uvdesk{
    color: #7C70F4;
}
.uv-pwa-green{
    color: #2ED04C;
}
.uv-pwa-bold{
    font-weight: bold;
}
.uv-pwa-pull-right{
    float: right;
}
.uv-pwa-pull-left{
    float: left;
}
.uv-pwa-fixed{
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 1;
}
.uv-pwa-fixed .uv-pwa--fab-big{
    width: 66px;
    height: 66px;
    background-color: #2ED04C;
    color: #fff;
}
.uv-pwa--fab-big .material-icons{
    font-size: 32px;
    line-height: 20px;
}
.uv-pwa-button-small{
    padding: 0px 10px;
    font-size: 12px;
    height: 26px;
    line-height: 12px;
}

body .mdl-layout .uv-pwa-button-green:hover,
body .mdl-layout .uv-pwa-button-green:active,
body .mdl-layout .uv-pwa-button-green{
    background-color: #2ED04C;
    color: #fff;
}

body .mdl-layout .uv-pwa-button-yellow:hover,
body .mdl-layout .uv-pwa-button-yellow:active,
body .mdl-layout .uv-pwa-button-yellow{
    background-color: #F5D02A;
    color: #fff;
}

body .mdl-layout .uv-pwa-button-accent:hover,
body .mdl-layout .uv-pwa-button-accent:active,
body .mdl-layout .uv-pwa-button-accent{
    background-color: #757575;
    color: #fff;
}
.uv-pwa-bottom-navigation{
    height: 65px;
    /*position: fixed;*/
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    border-top: 1px solid #dcdcdc;
    background: #fff;
    color: #757575;
    text-align: center;
}
.uv-pwa-bottom-navigation button.mdl-button.mdl-js-button.mdl-button--icon {
    width: 49%;
    border-radius: 0;
    height: 100%;
    font-size: 12px;
}
.uv-pwa-bottom-navigation span.uv-icon {
    margin-bottom: 5px;
}
.uv-pwa-bottom-navigation .mdl-button--icon .material-icons{
    top: 40%;
}
.uv-pwa-pagination-li {
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 20px;
    margin-top: 10px;
}
.uv-ticket-agent{
    border-left: 2px solid rgb(0, 150, 136);
}
.uv-ticket-customer{
    border-left: 2px solid rgb(165, 65, 41);
}
.uv-pwa-pagination-row {
    position: absolute;
    left: 30px;
    border: 1px solid #dcdcdc;
    width: 45px;
    border-radius: 35px;
    margin-top: -28px;
    background: #fff;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
}
.uv-pwa-ticket-properties button.uv-pwa-button-small.mdl-button--raised {
    box-shadow: none;
}
.uv-pwa-pagination-row-line{

}
.uv-pwa-pagination-count{

}
.uv-pwa-reply-navigation{
    height: 65px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    border-top: 1px solid #dcdcdc;
    background: #fff;
    color: #757575;
}
.uv-pwa-attachments{
    margin-top: 10px;
}
button.mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect.uv-pwa-button-attachment {
    padding: 10px;
    font-size: 10px;
    text-transform: initial;
    line-height: 18px;
    text-align: left;
    font-weight: normal;
    height: auto;
    color: #717171;
    margin: 2px;
}
span.uv-pwa-attachment-name {
    display: block;
}
#uv-pwa-form .uv-pwa-attachment-name{
    display: inline;
}
.uv-pwa-main-reply{
    height: 100%;
    width: 100%;
}
.uv-pwa-main-reply .uv-pwa-div-textarea{
    height: calc(100% - 75px);
    width: 100%;
}
.uv-pwa-main-reply .uv-pwa-div-textarea textarea{
    height: 100%;
    padding: 20px 25px;
    outline: none;
    width: calc(100% - 45px);
}
dialog li.mdl-list__item.mdl-list__item--three-line {
    padding: 0px 16px;
}
.uv-pwa-reply-navigation button.mdl-button--icon{
    width: 50px;
    height: 100%;
    border-radius: 0;
}
.uv-pwa-reply-navigation button.mdl-button--fab{
    margin-top: 5px;
    margin-right: 8px;
}
.uv-pwa-saved-replies-main{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
}
.uv-pwa-saved-replies{
    position: fixed;
    bottom: 0px;
    max-height: 70%;
    width: 100%;
    /* padding: 20px; */
    font-size: 20px;
}
.uv-pwa-saved-replies ul{
    min-height: 200px;
    background: #fff;
    margin: 0;
    padding: 10px 0px;
}
.uv-pwa-saved-replies ul li{
    display: block;
    padding: 10px 20px;
    margin-top: 5px;
    font-size: 16px;
    cursor: pointer;
}
.uv-pwa-saved-replies ul li:nth-child(1){
    color: #A7A7A7;
    cursor: default;
}
.uv-pwa-attachments-main{
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 70px;
    /* background: #000; */
    /* padding: 10px; */
    z-index: 1;
}
.uv-pwa-attachments-main .uv-pwa-attachments{
    margin: 2px 1px 2px 3px;
    display: inline-block;
}
label.uv-pwa-attachment-label{
    height: 42px;
    width: 100%;
    margin-bottom: -8px;
    text-align: left;
    border-radius: 0;
    font-size: 12px;
}
#uv-pwa-form{
    height: 100%;
}
.uv-pwa-ticket-create #uv-pwa-form{
    padding: 25px;
}
.uv-pwa-ticket-create .mdl-textfield.mdl-js-textfield.is-upgraded {
    width: 100%;
}
.uv-pwa-full-width{
    width: 100%;
}
.mdl-dialog{
    padding: 0;
}
#uv-pwa-ticket-agent .mdl-dialog__content {
    padding: 0px;
}
.mdl-dialog .mdl-dialog__title{
    padding: 10px 20px 10px;
    font-size: 24px;
    border-bottom: 1px solid #E7E7E7;
}
#uv-pwa-ticket-agent .mdl-dialog__content .mdl-textfield{
    padding: 20px 15px;
    width: 100%;
}
.uv-pwa-edit-ticket ul{
    padding: 0px;
    margin: 0px;
}
.uv-pwa-edit-ticket li{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    padding: 0px 18px;
    border-bottom: 1px solid #E7E7E7;
    min-height: 75px;
}
.uv-pwa-edit-ticket div.mdl-list__item-primary-content.uv-pwa-list__item-primary-content {
    width: calc(100% - 80px);
}
.uv-pwa-edit-ticket dialog div.mdl-list__item-primary-content.uv-pwa-list__item-primary-content {
    width: calc(100% - 50px);
}
.uv-pwa-edit-ticket span.uv-pwa-span-heading {
    display: block;
    color: #707070;
    font-weight: bold;
    margin-bottom: 3px;
}
.uv-pwa-agent-list ul li div span{
    display: block;
    font-size: 12px;
}
.uv-pwa-edit-ticket li span{
    /* color: #707070; */
}
.uv-pwa-disabled{
    cursor: not-allowed;
}
.uv-pwa-loader{
    width: 100%;
    height: 100%;
    position: fixed;
    padding: 50%;
    background: rgba(0,0,0, .1);
    z-index: 9;
}
.uv-pwa-loader-inline{
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 9;
}
input:focus, textarea:focus, select:focus {
    outline: none;
}

/*override*/
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
    color: #383838;
    padding: 12px;
}
.mdl-layout__drawer{
    background: #fdfdfd;
}


@media screen and (max-width:1024px) {
    .uv-pwa-header-search .mdl-layout__header-row {
        padding: 0 16px 0 58px;
    }
    .mdl-layout__header-row.uv-pwa-header-row{
        padding: 0 16px 0 0
    }
}

@media only screen and (max-width: 800px) {
    .uv-pwa-navigation-container{
        /*display: none;*/
    }
}