@import "~@dnnsoftware/dnn-react-common/styles/index";
:local(.taskStatusItemLeftPane) {
    padding: 5px 15px 5px 15px;
    display: block;
    box-sizing: border-box;
    float: left;
    width: 100%;
    height: auto;
    border-right: 1px solid @alto;
    margin: 10px 0 10px 0;
    .taskIcon {
        width: 35px;
        height: 35px;
        float: left;
        > svg {
            fill: @mountainMist;
        }
    }
    @-ms-keyframes spin {
        from {
            -ms-transform: rotate(360deg);
        }
        to {
            -ms-transform: rotate(0deg);
        }
    }
    @-moz-keyframes spin {
        from {
            -moz-transform: rotate(360deg);
        }
        to {
            -moz-transform: rotate(0deg);
        }
    }
    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(360deg);
        }
        to {
            -webkit-transform: rotate(0deg);
        }
    }
    @keyframes spin {
        from {
            transform: rotate(360deg);
        }
        to {
            transform: rotate(0deg);
        }
    }
    .taskIconProcessing {
        width: 35px;
        height: 35px;
        float: left;
        > svg {
            fill: @curiousBlue;
        }
        -webkit-animation-name: spin;
        -webkit-animation-duration: 4000ms;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -moz-animation-name: spin;
        -moz-animation-duration: 4000ms;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        -ms-animation-name: spin;
        -ms-animation-duration: 4000ms;
        -ms-animation-iteration-count: infinite;
        -ms-animation-timing-function: linear;
        animation-name: spin;
        animation-duration: 4000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    .taskDetail {
        padding: 10px 0 0 45px;
        > div {
            padding: 0 0 10px 0;
            float: left;
            width: 100%;
        }
        .taskDetail-name {
            font-weight: bolder;
            font-size: 15px;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
        }
        .taskDetail-common {
            color: @thunder;
            .taskDetail-common-title {
                font-weight: bolder;
                float: left;
            }
            .taskDetail-common-value {
                float: right;
            }
            .taskDetail-common-title-processing {
                font-weight: bolder;
                float: left;
                color: @curiousBlue;
            }
        }
    }
}