@import "~@dnnsoftware/dnn-react-common/styles/index";
.collapsible-jobdetail {
    display: table;
    width: 100%;
    float: left;
    &.false {
        border-top: 2px solid @curiousBlue !important;
        border-bottom: 2px solid @curiousBlue !important;
        position: relative;
        margin-top: -1px;
        margin-bottom: -1px;
    }
    &:not(:last-child) {
        border-bottom: 1px solid #ddd;
    }
    .job-collapsible > div {
        float: left;
        padding-bottom: 25px;
    }
    div.collapsible-jobdetail-header {
        width: 100%;
        float: left;
        position: relative;
        padding: 15px 0 15px 0;
        box-sizing: border-box;
        .term-header {
            cursor: pointer;
            float: left;
            width: 100%;
            height: 18px;
            .term-label-cssclass {
                width: 5%;
                float: left;
                .jobIndicator-export {
                    color: #fff;
                    background-color: #ff8a14;
                    width: 15px;
                    height: 15px;
                    display: block;
                    float: left;
                    margin: 0 0 0 12px;
                }
                .jobIndicator-import {
                    color: #fff;
                    background-color: #099;
                    width: 15px;
                    height: 15px;
                    display: block;
                    float: left;
                    margin: 0 0 0 12px;
                }
            }
            .term-label-createdate {
                width: 20%;
                float: left;
            }
            .term-label-jobtype {
                width: 15%;
                float: left;
            }
            .term-label-username {
                width: 20%;
                float: left;
            }
            .term-label-portalname {
                width: 20%;
                float: left;
            }
            .term-label-jobstatus {
                width: 15%;
                float: left;
                .job-status0 {
                    color: #ff8a14;
                    float: left;
                }
                .job-status1 {
                    color: @mantis;
                    float: left;
                }
                .job-status2 {
                    color: @curiousBlue;
                    float: left;
                }
                .job-status3 {
                    color: @alizarinCrimson;
                    float: left;
                }
                .job-status4 {
                    color: @alto;
                    float: left;
                }
                @-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);
                    }
                }
                .cycle-icon {
                    width: 24px;
                    height: 24px;
                    float: right;
                    margin-top: -5px;
                    > svg {
                        fill: @mantis;
                    }
                    -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;
                }
            }
            .term-label-arrow {
                width: 5%;
                float: left;
                .arrow-icon svg {
                    width: 16px;
                    height: 16px;
                    float: left;
                    fill: @thunder;
                    margin-right: 5px;
                }
            }
            .term-label-wrapper {
                word-wrap: break-word;
            }
        }
    }
    .collapsible-jobdetail-body {
        .job-details {
            height: 480px;
        }
        float: left;
        width: 100%;
    }
}