.complaint-list .item-list .tr {
    display: table;
    width: 100%;
}

.complaint-list .item-list .tr .td {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

.complaint-list .item-list .thead .tr {
    background-color: #0058C6;
}

.complaint-list .item-list .thead .td {
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 18px;
}

.complaint-list .item-list .tbody .td {
    padding: 10px;
}

.complaint-list .item-list .td {
    border: solid 1px #EBEBEB;
}

.complaint-list .item-list .thead .td:nth-child(2) {
    /*text-align: left;*/
}

.complaint-list .item-list .td.status,
.complaint-list .item-list .td.way {
    width: 20%;
}

.complaint-list .item-list .td.del {
    width: 5%;
}

.complaint-list .item-list .td.status .update-status a .complaint-list .item-list .td.del .btn {
    position: relative;
    color: #cf0000;
    text-align: center;
    display: block;
    margin: 0 auto;
    float: unset;
}

.complaint-list .item-list .td.del .btn .fa {
    font-size: 28px;
    color: #FF3E3A;
}

.complaint-list .item-list .td.status .text-status,
.complaint-list .item-list .td.status .update-status {
    margin-top: 10px;
}

.complaint-list .item-list .td.status .update-status a {
    color: #fff;
    background: #0058c6;
    width: 100%;
    display: block;
    padding: 10px;
    /*margin-top: 5px;*/
    border-radius: 5px;
}

.complaint-list .item-list .td .way-box {
    border-radius: 5px;
    border: solid #0058c6 2px;
    /* padding: 10px; */
}

.complaint-list .item-list .td .way-box .img {
    background: #0058c6; position: relative;
    padding: 10px 10px 10px 50px;
    color: #fff;
    min-height: 85px;
    max-height: 85px;
    font-size: 18px; line-height: 1;
    font-weight: 600;
    text-align: left;
    display: table;
    width: 100%
}
/*.complaint-list .item-list .td .way-box .img img,*/
.complaint-list .item-list .td .way-box .img span {
    display: table-cell;
    vertical-align: middle;
}

.complaint-list .item-list .td .way-box .img img {
    /*margin: 0 auto;
    display: inline-block;
    display: table-cell;
    vertical-align: middle;
    max-width: unset;*/ object-fit: contain; object-position: center;
    position: absolute; left: 10px; top: 0; bottom: 0; 
    width: 30px; height: 40px;
    margin: auto;
    margin-right: 10px;
}

.complaint-list .item-list .td .way-box .case span {
    display: block;
    text-align: center;
    color: #0058C6;
    font-size: 18px;
}

.complaint-list .item-list .td .way-box .case span+span {
    color: #0058C6;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}

.complaint-list .item-list .td .way-box .case {
    padding: 20px 10px;
}

.complaint-list .item-list .td .way-box.mobile {
    border: solid #0097C6 2px;
}

.complaint-list .item-list .td .way-box.mobile .img {
    background: #0097C6;
}

.complaint-list .item-list .td .way-box.mobile .case span+span,
.complaint-list .item-list .td .way-box.mobile .case span {
    color: #0097C6;
}

.complaint-list .item-list .td .way-box.web {
    border: solid #00C6B9 2px;
}

.complaint-list .item-list .td .way-box.web .img {
    background: #00C6B9;
}

.complaint-list .item-list .td .way-box.web .case span+span,
.complaint-list .item-list .td .way-box.web .case span {
    color: #00C6B9;
}

.complaint-list .item-list .td .way-box.mail {
    border: solid #00C66A 2px;
}

.complaint-list .item-list .td .way-box.mail .img {
    background: #00C66A;
}

.complaint-list .item-list .td .way-box.mail .case span+span,
.complaint-list .item-list .td .way-box.mail .case span {
    color: #00C66A;
}

.complaint-list .item-list .td.status .text-status {
    font-weight: 600;
    font-size: 16px
    min-height: 50px;
}
.complaint-list .percircle {
    font-size: 64px;
}
.complaint-list .percircle > span {
    margin-top: -12px;
    font-size: 16px;
}
.complaint-list .btn {
    position: relative;
}

.complaint-list .item-list .td.status .percircle.red>span {
    color: #FF5D34;
}

.complaint-list .item-list .td.status .text-status span {
    font-size: 16px;
}

.complaint-list .item-list .td.status .red {
    color: #FF5D34;
}

.complaint-list .item-list .td.status .red .bar {
    border-color: #FF5D34!important;
}


/*red*/

.complaint-list .item-list .td.status .percircle.yellow>span,
.complaint-list .item-list .td.status .yellow {
    color: #FFC934;
}

.complaint-list .item-list .td.status .yellow .bar {
    border-color: #FFC934!important;
}

.complaint-list .item-list .td.status .yellow {
    color: #FFC934;
}


/*yellow*/

.complaint-list .item-list .td.status .percircle.green>span,
.complaint-list .item-list .td.status .green {
    color: #0CB100;
}

.-status3.green.gt50 .fill,
.-status3.percircle.green .bar,
.complaint-list .item-list .td.status .darkgreen .fill,
.complaint-list .item-list .td.status .green .bar {
    border-color: #0CB100!important;
}

.complaint-list .item-list .td.status .green {
    color: #0CB100;
}


/*green*/

.complaint-list .item-list .td.status .percircle.darkgreen>span,
.complaint-list .item-list .td.status .darkgreen {
    color: #40C818;
}

.complaint-list .item-list .td.status .darkgreen .fill,
.complaint-list .item-list .td.status .darkgreen .bar {
    border-color: #40C818!important;
}

.complaint-list .item-list .td.status .darkgreen {
    color: #40C818;
}

.complaint-list .item-list .td.status .percircle.lightgreen>span,
.complaint-list .item-list .td.status .lightgreen {
    color: #91CC29;
}

.complaint-list .item-list .td.status .lightgreen .bar {
    border-color: #91CC29!important;
}

.complaint-list .item-list .td.status .lightgreen {
    color: #91CC29;
}

.complaint-list .item-list .info li span.text-primary {
    color: #757575;
}

.td.desc.web .info .fa,
.td.desc.web .category span,
.td.desc.web a {
    color: #00C6B9;
}

.td.desc.mail .info .fa,
.td.desc.mail .category span,
.td.desc.mail a {
    color: #00C66A;
}

.td.desc.mobile .info .fa,
.td.desc.mobile .category span,
.td.desc.mobile a {
    color: #0097C6;
}

.td.desc.web a span {
    color: #00C6B9;
}

.td.desc.mail a span {
    color: #00C66A;
}

.td.desc.mobile a span {
    color: #0097C6;
}

.complaint-list .btn {
    float: unset;
    height: auto;
    width: 100%;
}

.td.desc.mobile .info .fa {
    font-size: 16px;
    font-weight: 400;
    vertical-align: middle;
}

.td.desc .category {
    margin-bottom: 10px;
}

.complaint-list .item-list .info {
    margin-top: 30px;
}

.complaint-list .item-list .title {
    font-size: 20px;
}

.complaint-list .item-list .desc {
    padding-right: unset;
}

.complaint-list .item-list .td .way-box.mobile img {
    width: 26px;
}

.complaint-list .item-list .td .way-box.fb img {
    width: 24px;
}

.update-status .fa {
    margin-right: 5px;
    font-size: 20px;
    vertical-align: middle;
}

.complaint-detail .complaint-list .item-list .desc-detail {
    display: unset;
    -webkit-line-clamp: unset;
}

.user-detail-box .head-box {
    font-size: 24px;
    background: #0058c6;
    padding: 10px;
    color: #fff;
}

.user-detail-box .body-box {
    padding: 10px 20px;
}

.user-detail-box {

    border: solid 1px #EBEBEB;
}

.map-detail-box .body-box>div {
    margin-top: 0px;
    margin-bottom: 0px;
}

.body-box>div {
    margin-top: 10px;
    margin-bottom: 10px;
}

.report-detail-box .head-box .title {
    width: calc(100% - 112px);
    display: table-cell;
    vertical-align: middle;
    font-size: 22px;
    color: #0058c6;
}

.report-detail-box .head-box .btn-box {
    width: 112px;
    display: table-cell;
    vertical-align: middle;
}

.map-detail-box .head-box .title {
    display: table-cell;
    vertical-align: middle;
    width: calc(100% - 180px);
    font-size: 22px;
    color: #0058c6;
}

.map-detail-box .head-box .btn-box {
    display: table-cell;
    vertical-align: middle;
    width: 180px;
}

.head-box:after {
    display: block;
    content: "";
    clear: both;
}

.map-detail-box .head-box,
.report-detail-box .head-box {
    display: table;
    width: 100%;
    margin-bottom: 30px;
}

.head-box img {
    margin-right: 10px;
}

.bodypreview>.container>div {
    margin-bottom: 40px;
}

.complaint-detail-page {
    padding: 0;
    background: unset;
}

.complaint-detail-page .bodypreview {
    margin-bottom: 0px;
}

.body-box form#myFormMap {
    display: none;
}


/* .map-detail-box .head-box {
    margin-bottom: 30px;
} */

.report-detail-box .body-box .thead .tr .td {
    text-align: center;
}

/*.report-detail-box .table .thead .tr .td.detail,
.report-detail-box .table .thead .tr .td.status {
    text-align: left;
}*/

.report-detail-box .body-box .tr .td {
    width: 15%;
}

.report-detail-box .table .tr .td.num {
    width: 6%;
}

.report-detail-box .table .tr .td.status {
    /*width: 25%;*/
    width: 18%;
}

.download-box .item {
    border: solid 1px #0058c6;
    border-radius: 5px;
}

.download-box .detail span {
    display: block;
}

.download-box .btn-download a {
    color: #fff;
}

.download-box .btn-download {
    color: #fff;
}

.download-box .btn-download a {
    color: #fff;
    padding: 10px;
    display: block;
    background: #0058c6;
    border: solid 1px #0058c6;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.download-box .detail {
    padding: 10px;
    min-height: 120px;
    display: table;
    width: 100%;
}
.btn-download img {
    filter: brightness(0) invert(1);
    margin-right: 5px;
}

.download-box .btn-download a:hover {
    color: #0058c6;
    padding: 10px;
    display: block;
    background: #FFF;
    border: solid 1px #0058c6;
}
.download-box .detail .text-content{
    display: table-cell;
    vertical-align: middle;
}
.download-box .btn-download a:hover img {
    filter: unset;
}

.complaint-detail-page .complaint-list .item-list .info .fa {
    font-size: 16px;
    vertical-align: middle;
}

.complaint-detail-page .complaint-list .item-list .info li+li {
    margin-left: 5px;
}

.complaint-detail-page .body-box .table {
    border-left: solid 1px #EBEBEB;
}

.complaint-detail-page .body-box .tbody .td {
    border-right: solid 1px #EBEBEB;
    border-bottom: solid 1px #EBEBEB;
    vertical-align: middle;
    background: #fff;
}

.complaint-detail-page .complaint-list .item-list .info li+li:before {
    display: none;
}
.complaint-list .item-list .tr {

    background: #fff;
}
.complaint-detail .td.desc .category,
.complaint-user-detail ,
.body-box .tbody .td ,
.complaint-detail .complaint-list .item-list .desc-detail {

    font-size: 16px;
     line-height: 1.4;

}
.complaint-detail .complaint-list .item-list .desc-detail {

      
    
}
.complaint-detail .td.desc .category {

 color: #0058c6;
}
.complaint-detail .td.desc.mail .category {

 color: #00C66A;
}
.complaint-detail .td.desc.mobile .category {

 color: #0097C6;
}
.complaint-detail .td.desc.web .category {

 color: #00C6B9;
}
.complaint-detail .td.desc.fb .category {

 color: #0058c6;
}
.complaint-detail .complaint-list .item-list .info span {
    font-size: 16px;
    font-weight: 400;
    color: #0058c6;
}
.complaint-detail .complaint-list .item-list .mail .info span.date-time {
    color: #00C66A;
}
.complaint-detail .complaint-list .item-list .mobile .info span.date-time {
    color: #0097C6;
}
.complaint-detail .complaint-list .item-list .web .info span.date-time {
    color: #00C6B9;
}
.complaint-detail .complaint-list .item-list .fb .info span.date-time {
    color: #0058c6;
}
.download-box {

    font-size: 16px;
}
.download-box {
    width:  210px;
}
.download-box .slick-slide img {
    display: inline-block;
}




.download-box .slick-dots li {
    margin: 0 3px;
}

/*.download-box .slick-dots{
    display: flex;
    justify-content: center;
}
.download-box .slick-dots li {
    display: none;
    margin: 0 3px;
}
.download-box .slick-dots li.slick-active,
.download-box .slick-dots li.slick-active + li,
.download-box .slick-dots li.slick-active + li + li {
    display: block;
}

.download-box .slick-dots li:nth-last-child(1),
.download-box .slick-dots li:nth-last-child(2),
.download-box .slick-dots li:nth-last-child(3) {
    display: block;
}

.download-box .slick-dots li.slick-active ~ li:nth-last-child(1),
.download-box .slick-dots li.slick-active ~ li:nth-last-child(2),
.download-box .slick-dots li.slick-active ~ li:nth-last-child(3) {
    display: none;
}
.download-box .slick-dots li.slick-active + li + li:nth-last-child(3),
.download-box .slick-dots li.slick-active + li + li:nth-last-child(2),
.download-box .slick-dots li.slick-active + li + li:nth-last-child(1),
.download-box .slick-dots li.slick-active + li:nth-last-child(3),
.download-box .slick-dots li.slick-active + li:nth-last-child(2),
.download-box .slick-dots li.slick-active + li:nth-last-child(1){
    display: block;
}*/



.slick-dots li {
   
    width: 10px;
    height: 10px;
  
}
.slick-dots li button {
 
    width: 10px;
    height: 10px;
    padding: 0px;
   
}
.slick-dots li button:before  {
    width: 10px;
    height: 10px;
    background:     #0058C6;   
    border-radius:  50%;
    color: transparent;
}
.slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
    width: 10px;
    height: 10px;
    background:     #0058C6; 
    color: transparent;  
}
.tbody .td.detail .head-xs {
    display:    none;   
}
/*#####################################################################*/
@media screen and (max-width: 1024px) {
.download-box {
    width: 170px;
    margin: 0 auto;
}
}
@media screen and (max-width: 991px) {
    .complaint-list .tbody .tr .td .head-xs {
    
    font-size: 13px;
}
    .download-box {

    font-size: 13px;
}
    .complaint-detail .complaint-list .item-list .info span {
    font-size: 13px;
    
}
    .complaint-detail .td.desc .category, 
    .complaint-user-detail, 
    .body-box .tbody .td, 
    .complaint-detail .complaint-list .item-list .desc-detail {
    font-size: 13px;
}
    .td.desc .category,
    .body-box .tbody .td ,
    .complaint-user-detail ,
    .complaint-list .item-list .desc {
        font-size: 13px;
    }
.td.desc .category span {
    font-size: 16px; line-height: 1.4em;
}
    .head-xs {
        display: block;
    }
    .complaint-list .thead {
        display: none;
    }
    .complaint-list .tbody .tr .td .head-xs {
        width: 150px;
        background-color: #0058c6;
        text-align: center;
        color: #fff;
    }
    .complaint-list .tbody .tr .td>div {
        display: table-cell;
        padding: 10px;
        vertical-align: middle;
    }
    .complaint-list .tbody .tr .td {
        display: table;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .complaint-list .td.status {
        top: 0px;
    }
    .complaint-list .item-list .td .way-box {
        width: 230px;
        text-align: center;
        margin: 0 auto;
    }
    .complaint-list .item-list .title {
        padding-right: unset;
    }
    .complaint-list .tbody .tr .td .head-xs {
        width: 150px;
        font-size: 18px;
    }
    .percircle {
        position: relative;
        font-size: 120px!important;
    }
    .complaint-list .percircle>span {
        font-size: 20px!important;
        margin-top: -15px!important;
    }
    .complaint-list .item-list .td.status .text-status,
    .complaint-list .item-list .td.status .update-status {
        width: 230px;
        margin: 10px auto;
    }
    .download-box {
    width: 230px;
    text-align: center;
    margin: 0 auto;

    }
    .table .td {
    display: table;
    width: 100%;
}
.table .td>div {
    display: table-cell;
}
.report-detail-box .table .tr .td.num .body-xs {
    text-align: left;
}
.report-detail-box .table .tr .td.num {

    border-top: solid 1px #EBEBEB;
}
.download-box,
.complaint-list .item-list .td .way-box {

    margin-right: 100%;
}
.complaint-list .btn {
    width: auto;
}
.box-content {
    width: auto;
    margin: 0 auto;
    display: inherit;
}

}

@media screen and (max-width: 575px) {
    .map-detail-box .head-box .title,
    .report-detail-box .head-box .title  {
font-size:  20px
    }
    .report-detail-box .head-box .title img,
    .map-detail-box .head-box .title img {
    width: 24px;
}
    .box-content {
 
    display: block;
}
    .complaint-list .btn {
    width: 100%;
}
.download-box,
.complaint-list .item-list .td .way-box {

    margin-right: auto;
}
    .complaint-list .item-list .td.status .text-status,
    .complaint-list .item-list .td.status .update-status,
    .complaint-list .item-list .td .way-box {
        width: 180px;
    }
    .complaint-list .item-list .td .way-box .img {
        font-size: 16px;
    }
    .complaint-list .item-list .td .way-box .case span {
        font-size: 16px;
    }
    .complaint-list .item-list .td .way-box .case span+span {
        font-size: 20px;
    }
    .complaint-list .item-list .td .way-box .img {
        min-height: 50px;
        max-height: 50px;
    }
    .complaint-list .item-list .td .way-box.mobile img {
        width: 15px;
    }
    .complaint-list .item-list .td .way-box .img img {
        width: 25px;
    }
    .complaint-list .item-list .td .way-box.fb img {
        width: 13px;
    }
    .complaint-list .item-list .info li {
        width: 100%;
    }
    .complaint-list .item-list .info li+li:before {
        display: none;
    }
    .complaint-list .tbody .tr .td .head-xs {
        width: 110px;
    }
    .complaint-list .item-list .tr+.tr {
        display: block;
        margin-top: 15px;
    }
}

@media (max-width:320px) {
.complaint-list .item-list .td.status .text-status, .complaint-list .item-list .td.status .update-status, .complaint-list .item-list .td .way-box {
    width: 160px;
}
}