@media screen {
    .statistics .statistic_items + .statistic_attr {
        margin-top: 25px;
    }

    .statistic div.items {
        display: grid;
        align-items: start;
        margin: 0;
        padding: 25px 0 10px 0;
        border: 1px solid #D9DEE4;
        border-radius: 5px;
        grid-column-gap: 15px;
        grid-row-gap: 15px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        justify-items: center;
    }

    .statistic div.items .item {
        display: flex;
        align-items: stretch;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin-bottom: 0;
        padding: 0;
        text-align: center;
    }

    .statistic div.items .item a {
        width: 100%;
        display: block;
        line-height: 1.1;
    }

    .statistic div.items:before {
        display: none;
    }

    .statistic .item .lbl {
        font-size: 16px;
        display: flex;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }

    .statistic .item .lbl img {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin: 0 10px 0 0;
        object-fit: contain;
    }

    .statistic.default .items {
        padding: 0;
        border: none;
    }

    .statistic.default .item a {
        text-decoration: none !important;
    }

    .statistic.default .items:after {
        display: none;
    }

    .statistic.default .items .item {
        height: 100%;
        padding: 15px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 10px 10px 20px 0 #EDF2FA;
    }

    .statistic.default .items .item:focus,
    .statistic.default .items .item:hover {
        box-shadow: 4px 4px 5px 0 rgba(50, 50, 50, 0.1)
    }

    .statistic.default .statistics > div + div {
        margin-top: 25px;
    }

    .statistic.default .statistics .statistic_attr .legend {
        margin-bottom: 10px;
    }

    .statistic.default .statistic_items .item > span,
    .statistic.default .statistic_items .item > a {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 10px 0;
    }

    .statistic.default .statistic_items .item .ico {
        width: 52px;
        height: 52px;
        margin-top: auto;
        border-radius: 50%;
        background: #F1F4FF;
    }

    .statistic.default .statistic_items .item .ico:before {
        display: block;
        width: 24px;
        height: 24px;
        margin: 14px 0 0 14px;
        content: "";
        background-position: 50% 50% !important;
    }

    .statistic.default .statistic_items .total .ico:before {
        margin: 14px 0 0 14px;
        background-color: #5078FE;
        -webkit-mask: url("../images/icons/car.svg") no-repeat 50% 50%;
        mask: url("../images/icons/car.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .statistic.default .statistic_items .ready .ico {
        background-color: #F2F0FE;
    }

    .statistic.default .statistic_items .ready .ico:before {
        background-color: #886BFE;
        -webkit-mask: url("../images/icons/check1.svg") no-repeat 50% 50%;
        mask: url("../images/icons/check1.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .statistic.default .statistic_items .inprogress .ico,
    .statistic.default .statistic_items .inrecon .ico {
        background-color: #FEF8E4;
    }

    .statistic.default .statistic_items .inprogress .ico:before,
    .statistic.default .statistic_items .inrecon .ico:before {
        background-color: #FFBF21;
        -webkit-mask: url("../images/icons/processing-time.svg") no-repeat 50% 50%;
        mask: url("../images/icons/processing-time.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .statistic.default .statistic_items .out .ico {
        background-color: #EBF9EA;
    }

    .statistic.default .statistic_items .out .ico:before {
        background-color: #3AC638;
        -webkit-mask: url("../images/icons/external.svg") no-repeat 50% 50%;
        mask: url("../images/icons/external.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .statistic.default .statistic_items .few-pictures-readyfor .ico {
        background-color: #FEE2DF;
    }

    .statistic.default .statistic_items .few-pictures-readyfor .ico:before {
        background-color: #F33636;
        -webkit-mask: url("../images/icons/photo-camera.svg") no-repeat 50% 50%;
        mask: url("../images/icons/photo-camera.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .statistic.default .statistic_items .wholesale .ico:before {
        -webkit-mask: url("../images/icons/judge-hammer4.svg") no-repeat 50% 50%;
        mask: url("../images/icons/judge-hammer4.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        background-color: #000;
    }

    .statistic.default .statistic_statuses .item {
        display: flex;
        flex-direction: column;
        gap: 10px 0;
    }

    .statistic.default .statistic_statuses .item .ttl {
        color: #5A738E;
    }

    .statistic.default .statistic_statuses .item .val {
        display: flex;
        gap: 10px 10px;
        justify-content: center;
    }

    .statistic.default .statistic_statuses .item .val > div {
        min-width: 32px;
        background: #CDDBF1;
        text-align: center;
        border-radius: 3px;
    }

    .statistic.default .statistic_statuses .item .val a {
        padding: 5px;
        border-radius: 3px;
    }

    .statistic.default .statistic_statuses .item .val a:hover,
    .statistic.default .statistic_statuses .item .val a:focus {
        box-shadow: 4px 4px 5px 0 rgba(50, 50, 50, 0.1);
    }

    .statistic.default .statistic_statuses .item .val .val1 {
        background: #D5F9D4;
    }

    .statistic.default .statistic_attr .items {
        padding: 0;
        border: none;
        grid-auto-rows: 1fr;
    }

    .statistic.default .statistic_attr .item .wrap {
        display: block;
        height: 100%;
        padding: 10px 10px;
        border-radius: 10px;
        background: #F1F4FF;
        box-shadow: none;
        width: 100%;
    }

    .statistic.default .statistic_attr .item {
        box-shadow: none;
        padding: 0;
    }

    .statistic.default .statistic_attr .item a {
        width: auto;
    }

    .statistic.default .statistic_attr .item:focus {
        box-shadow: 4px 4px 5px 0 rgba(50, 50, 50, 0.1)
    }

    .statistic.default .statistic_attr .circle {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
        height: 100%;
    }

    .statistic.default .statistic_attr .circle .diag {
        min-width: 52px;
        min-height: 0;
        margin-bottom: 0;
    }

    .statistic.default .statistic_attr .circlebar {
        width: 52px;
        min-width: 52px;
        height: 52px;
        min-height: 52px;
    }

    .statistic.default .statistic_attr .circles-text {
        display: none;
    }

    .statistic.default .statistic_attr .circle .title {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        gap: 10px 10px;
        flex-grow: 2;
    }

    .statistic.default .statistic_attr .circle .lbl {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.1;
        justify-content: flex-start;
        text-align: left;
    }

    .statistic.default .statistic_attr .val a {
        display: block;
        padding: 0 5px;
    }

    .statistic.default .statistic_attr .val a:focus,
    .statistic.default .statistic_attr .val a:hover {
        box-shadow: 4px 4px 5px 0 rgba(50, 50, 50, 0.1);
    }

    .statistic.default .val {
        font-size: 18px;
        font-weight: normal;
        text-align: left;
        color: #262833;
        display: flex;
        line-height: 24px;
    }

    .statistic.default .val a {
        border-radius: 3px;
        min-height: 24px;
        line-height: 24px !important;
    }

    .statistic.default .val .nexttodo a {
        background: #fffacf;
    }

    .statistic_attr .service_dashboard .el.other .mark {
        background: #CDDBF1 !important;
    }

    .statistic.default .statistics_charts {
        position: relative;
        overflow: hidden;
        width: 100%;
        border-radius: 16px;
    }

    .statistic.default .statistics_charts {
        position: relative;
        overflow: hidden;
        margin-bottom: 25px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 10px 10px 20px 0 #EDF2FA;
    }

    .statistic.default .statistics_charts .chart {
        margin: 15px 0;
    }

    .statistic_service_dashboard .statistic {
        display: flex;
        margin: 0;
        padding: 0 0;
        gap: 15px 15px;
    }

    #display-statistic.statistic_service_dashboard.loading{
        min-height: 0 !important;
    }

    #display-statistic.statistic_service_dashboard{
        margin-bottom: 15px;
    }

    .statistic_service_dashboard .statistic_items {
        display: flex;
        align-items: center;
        flex-grow: 1;
        min-width: 300px;
        margin-bottom: 0;
    }

    .statistic_service_dashboard .statistic_items div.items .circles-text {
        display: none;
    }

    .statistic_service_dashboard .statistic_items .circlebar {
        width: 100px;
        height: 100px;
        min-width: 100px;
        min-height: 100px;
    }

    .statistic_service_dashboard .statistic_items .item .diag {
        width: 100px !important;
        height: 100px !important;
    }

    .statistic_service_dashboard .statistic_attr {
        flex-grow: 2;
        min-width: 150px;
        margin-top: 0 !important;
        margin-bottom: 0;
    }

    .statistic_service_dashboard .statistic_attr .item {
        width: auto !important;
        min-width: 100px;
    }

    .statistic_service_dashboard .statistic_attr .item .circle {
        align-items: center;
    }

    .statistic_service_dashboard.loading .statistic_attr .items_wrap,
    .statistic_service_dashboard .statistic_attr.loading .items_wrap {
        opacity: 0 !important;
    }

    .statistic_service_dashboard .statistic_attr .items_wrap {
        overflow-x: auto;
    }

    .statistic_service_dashboard div.items {
        display: flex;
        flex-grow: 2;
        padding: 0;
        border: none;
        grid-column-gap: 0;
        grid-row-gap: 0;
        margin-bottom: 15px;
    }

    .statistic_service_dashboard ul.items {
        display: flex;
        flex-direction: column;
        flex-grow: 2;
        margin: 0;
        gap: 5px 15px;
    }

    .statistic_service_dashboard ul.items .item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 15px 15px;
    }

    .statistic_service_dashboard ul.items .item .val {
        font-size: 18px;
        font-weight: bold;
        line-height: 1.1;
        text-align: left;
        color: #262833;
    }

    .statistic_service_dashboard ul.items .item .lbl {
        display: block;
        flex-grow: 3;
        color: #848798;
    }

    .statistic_service_dashboard ul.items .item .ico {
        display: inline-block;
        width: 9px;
        min-width: 9px;
        height: 9px;
        border-radius: 50%;
    }

    .statistic_service_dashboard div.items:not(.owl-loaded) {
        gap: 15px 15px;
    }

    .statistic_service_dashboard .carousel div.items.loading:before {
        width: 100px;
        height: 100px;
        margin: -50px 0 0 -50px !important;
    }

    .statistic_service_dashboard div.items .item {
        height: 100%;
    }

    .statistic_service_dashboard .item .circle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: 5px 0;
    }

    .statistic_service_dashboard .item .circle .lbl {
        flex-grow: 2;
        color: #848798;
    }

    .statistic_service_dashboard .item .circle .lbl span {
        color: #848798;
    }

    .statistic_service_dashboard .item .lbl {
        font-size: 14px;
        line-height: 1.1;
    }

    .statistic_service_dashboard .item .lbl img {
        display: none;
    }

    .statistic_service_dashboard .item .diag {
        min-width: 60px;
        min-height: 60px;
        margin-bottom: 0;
    }

    .statistic_service_dashboard .item .circle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: 5px 0;
    }

    .statistic_service_dashboard .item .circle .circles-text {
        font-size: 20px !important;
        font-weight: 500;
        line-height: 1.1;
        text-align: left;
        color: #262833;
    }

    .statistic_service_dashboard .carousel .items.loading {
        min-height: 100px;
    }

    .statistic_service_dashboard .carousel .items.loading .owl-stage-outer {
        opacity: 0;
    }

    .block.statistics .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .block.statistics .title .actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .block.statistics .title .actions input {
        display: none;
    }

    .block.statistics .title .actions label {
        font-size: 16px;
        font-weight: normal;
        margin-bottom: 0;
        padding: 5px;
        cursor: pointer;
        border: 1px solid #EBECEE;
        border-radius: 5px;
        background: #fff;
    }

    .block.statistics .title .actions input[type="radio"]:checked + label {
        display: none;
    }

    .statistic_tasks .item a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 15px 15px;
    }

    .statistic_tasks .items {
        margin-bottom: 0;
    }

    .statistic_tasks .items .ico {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
    }

    .statistic_tasks .items .lbl {
        display: inline-block;
        flex-grow: 2;
    }

    .statistic_tasks .items a .lbl {
        text-decoration: underline;
    }

    .statistic_tasks .items .val {
        min-width: 30px;
        text-align: right;
    }

    .statistic_tasks .progress {
        position: relative;
        display: flex;
        overflow: visible;
        flex-direction: column;
        height: 20px;
        margin-top: 30px;
        margin-bottom: 20px;
        border-radius: 8px;
        background: #5078FE;
    }

    .statistic_tasks .progress-bar {
        position: absolute;
        float: none;
        border-radius: 8px;
    }

    .statistic_tasks .progress-bar + .progress-bar {
        float: none;
        border-radius: 4px;
    }

    .statistic_tasks .progress-bar .val {
        position: absolute;
        top: -20px;
        left: 0;
        display: block;
        color: #000;
    }

    .statistic_tasks .progress .max {
        font-size: 12px;
        position: absolute;
        top: -20px;
        right: 0;
        display: block;
        color: #000;
    }

    .statistic_tasks .progress-bar + .progress-bar .max {
        display: none;
    }

    .statistic_tasks .progress-bar + .progress-bar .val {
        top: auto;
        bottom: -20px;
    }

    .statistic.default .statistic_statuses .item .val .val2 {
        background: #FF8A8A !important;
    }

    .statistic.default .val > * {
        border-radius: 3px;
        min-width: 24px;
        text-align: center;
        background: #CDDBF1;
        display: block;
    }

    .statistic.default .val .done a {
        background: #CACACA;
    }

    .statistic.default .val .doing a {
        background: #D5F9D4;
    }

    .statistic.default .val .declined a {
        background: #FF8A8A;
    }

    .statistic.default .val .approval a {
        background: #ffe9ce;
    }

    .statistic.default .val .declined a {
        background: #FF8A8A;
    }
}