.scdh #pageContent .scdh-menu > p, .d-flx-center, .d-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.flex-dir-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.flex-dir-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.justify-content-start {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.justify-content-end {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.justify-content-space-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.justify-content-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.align-items-flex-start {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.align-items-flex-end {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

.scdh #pageContent .scdh-menu > p, .d-flx-center, .align-items-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.align-item-baseline {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

.align-items-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.middleY, .translateY-50 {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.middleY {
    top: 50%
}

tr.specific td:last-child i, .icon-on-end:after, .icon-on-end-after, .end-abs {
    position: absolute;
    left: 0
}

tr.specific > div, tr.specific td:last-child i, .icon-on-end:after, .icon-on-end-after, .round-icon {
    border-radius: 100%;
    height: 1.5em;
    width: 1.5em;
    line-height: 1.5em;
    text-align: center
}

* {
    padding: 0;
    margin: 0;
    border: 0;
    touch-action: auto
}

body {
    font-size: 12px;
    font-family: Tahoma,Arial,sans-serif;
    color: GrayText;
    background-color: #d9d9d9;
    margin: 0;
    padding: 0;
    direction: rtl
}

button {
    font-size: 12px;
    font-family: Tahoma,Arial,sans-serif
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: #cfcfcf
}

    ::-webkit-scrollbar-thumb:hover {
        background: gray
    }

.card-details .newTasks, .card-details .extra {
    line-height: 1.2;
    margin-top: 5px
}

.status-div .waitForScdh {
    opacity: .5
}

.newTasks > div {
    color: #000
}

    .newTasks > div:not(:first-child):before {
        display: inline-block
    }

.flex-fill {
    flex: 1 1 100%
}

.filterBox .list ul li {
    unicode-bidi: plaintext;
    line-height: 1.5;
    min-height: 1.5em
}

    .select2-results__option .info, .filterBox .list ul li .info {
        color: #bfbfbf
    }

    .filterBox .list ul li[disabled] {
        display: none
    }

.select2-results__option > div {
    display: flex
}

#all {
    position: fixed;
    top: 60px;
    left: 0;
    border: 1rem solid #fff;
    height: calc(100vh - 60px - 4rem);
    overflow: auto;
    background: #e8e8e8;
    width: 20rem;
    z-index: 100;
    padding: 1rem
}

    #all h4 {
        margin-top: 1rem
    }

    #all .datarow {
        float: none;
        width: 100%
    }

    #all .fieldlabel {
        width: 55%
    }

        #all .fieldlabel [dir] {
            display: none
        }

    #all .datarow:hover {
        background-color: #d8f6ff;
        cursor: pointer
    }

    #all .unit-pool {
        display: flex;
        flex-wrap: wrap
    }

        #all .unit-pool > div {
            padding: 5px 10px;
            background: #fff;
            margin-left: 5px;
            text-align: center;
            margin-bottom: 5px;
            flex: 0 1 2rem
        }

    #all .group-content {
        display: none
    }

.edit-field.datarow .fieldlabel {
    flex: 1 1 20%;
    max-width: 192px
}

.edit-field.datarow .HtmlValue {
    flex: 1
}

.edit-field.datarow .buttons {
    display: inline-flex;
    flex: 1 1 100%;
    padding: 10px 0 5px;
    justify-content: flex-end
}

    .edit-field.datarow .buttons i {
        z-index: 11;
        padding: 5px;
        width: 1.1em;
        font-size: 1.3em;
        height: 1.1em;
        line-height: 1.1em;
        border-radius: 3px;
        background: #fff;
        text-align: center;
        cursor: pointer;
        margin-right: 10px
    }

.edit-field.datarow h3 .trans, .edit-field.datarow .fieldlabel .trans {
    background-color: rgba(255,164,0,.12);
    cursor: text
}

.edit-field.datarow .fieldlabel textarea {
    line-height: 1;
    padding: 5px 5px 2px
}

@media(min-device-width:480px) {
    .filterBox {
        position: relative
    }
}

#t ul li {
    unicode-bidi: unset
}

#menu-mask {
    display: none
}

[data-write=false] .deleteItem {
    display: none
}

[data-write=false] .openItem {
    color: inherit;
    cursor: unset;
    text-decoration: none
}

a.DisplayNone, div.DisplayNone, span.DisplayNone, .dn {
    display: none
}

.p-1 {
    padding: 1rem
}

.p-10 {
    padding: 10px
}

.hidden {
    height: 0;
    overflow: hidden
}

hr {
    background-color: #e8e8e8;
    height: 1px;
    margin: 10px 0
}

.db {
    display: block
}

.dbi {
    display: block !important
}

.cp {
    cursor: pointer
}

.fn {
    float: none
}

.fl {
    float: left !important
}

.fr {
    float: right !important
}

.b {
    font-weight: bold
}

.al {
    text-align: left
}

.clear {
    clear: both
}

.clearfix {
    *zoom: 1
}

    .clearfix:before, .clearfix:after {
        display: table;
        line-height: 0;
        content: "";
        clear: both
    }

.row-flx {
    display: flex
}

    .row-flx.space > * + * {
        padding-right: 3px
    }

@media(max-device-width:480px) {
    .row-flx {
        flex-wrap: wrap
    }

        .row-flx > * {
            flex: 1 1 100% !important;
            margin-bottom: 1rem
        }
}

.row-flx.start-end > *:first-child {
    flex: 1 1 100%
}

.row-flx.start-end > *:not(:first-child) {
    white-space: nowrap
}

.middle {
    overflow: hidden;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
}

.col-flex {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.vertical-tabs .navs {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}

    .vertical-tabs .navs a {
        display: block;
        padding: .5rem 1rem;
        border-radius: 3px;
        cursor: pointer
    }

        .vertical-tabs .navs a.active {
            color: #fff;
            background: #05ade2
        }

.vertical-tabs .tab-content {
    margin-right: 1rem;
    flex: 1
}

    .vertical-tabs .tab-content > div:not(.active) {
        display: none
    }

.center {
    margin: 0 auto
}

[align="center"] {
    text-align: center
}

.under {
    text-decoration: underline
}

.p_10 {
    padding: 10px
}

ul, ol {
    list-style: none
}

li {
    padding: 5px 0
}

.mt_5 {
    margin-top: 5px
}

.op_0 {
    opacity: 0;
    filter: alpha(opacity=0)
}

.op_50 {
    opacity: .5;
    filter: alpha(opacity=50)
}

.fnt_s {
    font-size: .9em
}

.fnt_xs {
    font-size: smaller
}

.unit {
    font-size: .8em;
    margin: 0 1px;
    font-weight: normal
}

.fnt_l {
    font-size: larger
}

.fa-trash {
    cursor: pointer
}

.fa-1_5x {
    font-size: 1.5em
}

.surface {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000
}

.popup {
    width: auto;
    position: relative;
    z-index: 1001;
    background-color: #fff
}

.corn_3 {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    behavior: url(../css/corns.htc)
}

.corn_5 {
    -webkit-border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;
    behavior: url(../css/corns.htc)
}

.corn_3corn {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    behavior: url(../css/corns.htc);
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0
}

.corn_top {
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.keep-eng, tr.options .SelectVal {
    direction: ltr;
    unicode-bidi: embed
}

#MechanicalSpecifications, #ElectricalSpecs {
    direction: ltr;
    text-align: left
}

label {
    cursor: pointer
}

[label=ItemTitle] {
    unicode-bidi: embed
}

.td-pic {
    width: 2.5rem;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

.radio-horizontal {
    line-height: 2
}

    .radio-horizontal label {
        margin-left: 15px
    }

        .radio-horizontal label input {
            margin-left: 3px
        }

.shadow, .edit-field.datarow .buttons i {
    box-shadow: 0 0 15px 0 #bbb;
    -moz-box-shadow: 0 0 15px 0 #bbb;
    -webkit-box-shadow: 0 0 15px 0 #bbb
}

.shadow_L {
    box-shadow: 0 0 10px 2px #bbb;
    -moz-box-shadow: 0 0 10px 2px #bbb;
    -webkit-box-shadow: 0 0 10px 2px #bbb
}

.shadow_Focused {
    box-shadow: 0 0 6px 2px #bbb;
    -moz-box-shadow: 0 0 6px 2px #bbb;
    -webkit-box-shadow: 0 0 6px 2px #bbb
}

.shadow_none {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none
}

.colw {
    color: #eff0f4 !important
}

.noTextSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.italic {
    font-style: italic
}

header, footer, nav, section {
    display: block
}

div, p, ul {
    margin: 0;
    padding: 0;
    position: relative
}

@media(min-device-width:480px) {
    .pos-unset div, .pos-unset p, .pos-unset ul {
        position: unset
    }

    .pos-unset .filterBox .list {
        top: unset;
        right: unset;
        min-width: 15rem
    }
}

pre {
    font-family: Tahoma;
    word-break: break-word;
    white-space: pre-line
}

    pre.no-lines {
        white-space: inherit;
        cursor: pointer
    }

.scrl {
    overflow-y: auto
}

.shadow-bottom {
    position: relative;
    z-index: 2;
    box-shadow: 0 -10px 10px -10px #000 inset;
    height: 20px;
    margin-top: -35px;
    margin-right: 15px
}

.sticknote {
    background-color: #ffedd1;
    color: #000;
    padding: 5px 10px;
    margin: 5px
}

.LoadGif {
    position: absolute;
    margin: 0 auto;
    top: 50%;
    display: block;
    text-align: center;
    justify-content: center;
    vertical-align: middle;
    padding: 1rem 0;
    width: 100%
}

.small-Loading {
    position: absolute;
    left: 10px;
    top: 12px
}

.filterBox .small-Loading {
    left: 32px;
    top: 8px
}

.loading-div-action {
    padding: 12px;
    position: fixed;
    right: 25px;
    bottom: 25px;
    background: #fff;
    margin: 0 auto;
    z-index: 99999
}

.OpenAdminMacPage {
    cursor: pointer
}

.absLast {
    position: absolute;
    top: 0;
    left: 0
}

.money {
    direction: ltr
}

.currencySign {
    float: left
}

.invtCost {
    color: #adabab;
    font-style: italic;
    white-space: nowrap
}

.date-estimated {
    color: #a5a5a5
}

.date-actual {
    color: #000
}

.tblMin {
    display: table;
    border-collapse: separate;
    border-spacing: 5px 0
}

.tbl {
    display: table;
    border-collapse: separate;
    border-spacing: 5px 0;
    width: 100%;
    box-sizing: border-box
}

td.tbl {
    border-spacing: 0
}

.tc {
    display: table-cell;
    vertical-align: middle
}

.tcTop {
    display: table-cell;
    vertical-align: top
}

.tcTopMin {
    display: table-cell;
    vertical-align: top;
    width: 1px
}

.tcMin {
    display: table-cell;
    vertical-align: middle;
    width: 1px
}

.tcMiddle {
    display: table-cell;
    vertical-align: middle;
    width: 100%
}

.tcFirst {
    display: table-cell;
    text-align: right;
    width: 1px;
    white-space: nowrap
}

td.pic {
    padding: 0 17px;
    height: 50px;
    background-size: cover
}

i[disabled] {
    animation: fa-spin 2s infinite linear
}

    i[disabled]:before {
        content: ""
    }

a[disabled] {
    pointer-events: none;
    color: gray
}

.job-details {
    width: 100%;
    display: block;
    box-sizing: border-box
}

    .job-details > div, .job-details > a {
        display: inline-block
    }

    .job-details .tblMin {
        border-spacing: 2px 0
    }

    .job-details .extra-info {
        float: left;
        white-space: normal;
        text-align: left
    }

    .job-details .pic {
        width: 41px;
        height: 29px;
        vertical-align: top;
        background-size: cover;
        background-position: center;
        border: 1px solid #818483
    }

        .job-details .pic img {
            display: table-cell;
            vertical-align: top;
            height: 38px
        }

.done-graph {
    border: 1px solid #fff;
    height: 14px;
    width: 8px;
    background-color: #fff;
    position: relative;
    margin-bottom: -3px;
    border-radius: 1px
}

    .done-graph div {
        position: absolute;
        background-color: green;
        width: 100%;
        right: 0;
        bottom: 0;
        border-radius: 1px
    }

.red {
    color: red
}

.green {
    color: green
}

.orange {
    color: #ff8c00
}

.back-red {
    background-color: red;
    color: #fff
}

.back-green {
    background-color: green;
    color: #fff
}

.back-orange {
    background-color: #ff8c00;
    color: #fff
}

.circle {
    border-radius: 100%;
    width: 1em;
    height: 1em;
    text-align: center;
    line-height: 1em;
    padding: .5em;
    display: inline-block
}

.square {
    min-width: 1em;
    height: 1em;
    text-align: center;
    line-height: 1em;
    padding: .5em;
    display: inline-block;
    white-space: nowrap
}

.helptext {
    color: #adabab
}

td p.helptext {
    margin-bottom: 0
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    opacity: .7;
    background-color: #000;
    cursor: pointer
}

.cards-in-date {
    margin-right: 68px;
    margin-top: 15px
}

    .cards-in-date .hours {
        font-weight: bold;
        margin: .5rem;
        padding-top: .5rem;
        font-size: 1.2em
    }

.card, .index-card {
    display: inline-block;
    vertical-align: top;
    margin: 6px 7px 12px;
    position: relative;
    min-height: 217px;
    width: 300px;
    color: #fff;
    text-align: right;
    cursor: pointer;
    box-shadow: 0 0 8px 0 #818181;
    border-radius: 2px
}

    .card .card-bottom {
        background: #fff;
        padding: 10px;
        color: #232323;
        border-radius: 2px;
        line-height: 1.2
    }

        .card .card-bottom .job-link {
            font-size: 1.3em
        }

        .card .card-bottom b, .index-card b, .small-gray {
            font-weight: normal;
            color: gray;
            margin-left: 3px;
            font-size: .9em
        }

        .card .card-bottom .tasks {
            display: flex;
            padding: 5px;
            flex-wrap: wrap;
            background: #fbfbfb
        }

            .card .card-bottom .tasks a {
                flex: 1 1 50%;
                margin-bottom: 5px;
                white-space: nowrap
            }

.equip-title-in {
    margin-bottom: 10px
}

    .equip-title-in > div {
        display: inline-block
    }

.SiteSideMenu .card-pic, .card .card-pic {
    width: 100%;
    height: 200px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-radius: 2px
}

.SiteSideMenu .card-pic {
    height: 10rem
}

.card .card-pic i.fa {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    margin: 7px;
    font-size: 18px;
    background: #232323;
    border-radius: 2px;
    padding: 5px;
    display: none
}

.card .card-pic:hover i.fa {
    display: block
}

.card.task-done .card-pic {
    border: 1px solid green
}

.card-bottom .isdone {
    color: #006400 !important
}

.card-title {
    border-spacing: 0;
    font-size: 16px;
    display: table;
    font-weight: bold
}

    .card-title .tc {
        padding-left: 7px;
        vertical-align: top
    }

.cards-in-date .card .card-title > div {
    display: inline-block
}

.card-title > div.card-done-graph {
    margin: 2px 0
}

.card-title .small, .index-card .small {
    font-size: xx-small
}

.card .card-details {
    overflow: hidden;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 10px;
    padding-top: 40px;
    background-color: #232323;
    background: -moz-linear-gradient(bottom,rgba(0,0,0,.7) 30%,rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(bottom,rgba(0,0,0,.7) 30%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to top,rgba(0,0,0,.7) 30%,rgba(0,0,0,0) 100%)
}

#search-equips > div {
    overflow-y: auto;
    padding: 7px;
    max-height: 17vh
}

#search-equips .card {
    min-height: initial;
    background-color: #fff;
    color: #000;
    width: auto;
    display: inline-block;
    padding-left: 1rem
}

    #search-equips .card .ellipsis {
        max-width: 220px
    }

#search-equips p {
    margin: 1rem .5rem
}

.transports .card .card-pic {
    height: 120px
}

.transports .done-by {
    padding: .5rem;
    text-align: center;
    background-color: #ebebeb;
    font-weight: bold
}

[data-page="/Admin/Transport"] .station {
    font-size: 1.5em
}

[data-page="/Admin/Transport"] .buttondefault.full.doneBtn {
    margin-bottom: .5rem;
    font-size: 1.2em
}

[data-page="/Admin/Transport"] .card-details .card-title {
    padding: 0
}

[data-page="/Admin/Transport"] #deleteTransBtn {
    display: none
}

[data-page="/Admin/Transport"] hr {
    margin: 1rem 0
}

    [data-page="/Admin/Transport"] hr + p > b {
        margin-bottom: .5rem;
        display: block
    }

.trans-icon {
    position: relative;
    margin: 1px !important
}

    .trans-icon i {
        margin: 1px !important
    }

#taskDetails .gannt-tag {
    padding: 1px 5px
}

#taskDetails .tags:not(.openMaterial) .gannt-tag:not(.isDone) {
    background-color: #fff
}

#taskDetails .gannt-tag i {
    margin-right: 5px;
    border-right: 1px solid #d3d3d3;
    padding-right: 6px;
    padding-left: 2px
}

.gannt-row td .gannt-tag i {
    font-size: 1em !important;
    margin: 0 3px
}

.openTransport .gannt-tag > div {
    margin-left: 0
}

.openTransport .tags {
    display: inline-block
}

.sts[data-status='Reception'], .legend .label.Reception:before {
    background: linear-gradient(to right,rgba(157,0,0,.4) 0%,#fff 50%)
}

.sts[data-status='Disassembly'], .sts[data-status='AcceptanceTests'], .legend .label.Disassembly:before {
    background: linear-gradient(to right,rgba(147,85,0,.4) 0%,#fff 50%)
}

.sts[data-status='Repair'], .legend .label.Repair:before {
    background: linear-gradient(to right,rgba(0,9,181,.4) 0%,#fff 50%)
}

.sts[data-status='Done'], .legend .label.Done:before {
    background: linear-gradient(to right,rgba(130,130,130,.9) 0%,rgba(130,130,130,.4) 100%);
    color: #e8e8e8
}

.card.task-done .card-details {
    background: -moz-linear-gradient(bottom,rgba(0,128,0,.8) 0%,rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(bottom,rgba(0,128,0,.8) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to top,rgba(0,128,0,.8) 0%,rgba(0,0,0,0) 100%)
}

.card .card-details .side {
    position: absolute;
    bottom: 10px;
    left: 10px
}

.card .card-details .aprved {
    font-weight: bold;
    color: #0f0;
    font-size: smaller
}

.card .card-tasks {
    overflow: auto;
    max-height: 8rem
}

.all-done {
    text-align: center;
    color: #9c9c9c;
    font-size: 1.3em;
    display: flex;
    height: 80vh;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

    .all-done i {
        font-size: 7em;
        margin-bottom: 1rem;
        color: #b7b7b7
    }

.index-card {
    background: url('/images/singture_whils.jpg?v2') #fff no-repeat bottom -60px left -128px;
    min-height: initial
}

    .index-card .index-card-title {
        display: block;
        padding: 10px 10px 20px;
        position: relative
    }

.card-tab {
    display: inline-block;
    color: #fff;
    padding: 2px 5px;
    font-size: .9em;
    margin-bottom: 5px;
    z-index: 1;
    position: relative
}

.index-card .card-tab.online {
    position: absolute;
    bottom: -15px;
    font-size: 1em;
    border: 1px solid #fff
}

.index-card .index-card-title h4, .index-card .index-card-title h3 {
    color: #000;
    padding: 0
}

.index-card .index-card-title h3 {
    font-size: 14px
}

.index-card .index-card-title h4 {
    font-size: 14px;
    font-weight: normal
}

.index-card .index-card-title .equip-title {
    color: #000;
    margin-top: 7px;
    color: hsl(194,100%,45%);
    font-weight: bold;
    line-height: 17px;
    padding-right: 15px
}

    .index-card .index-card-title .equip-title .tc {
        padding-left: 3px
    }

.index-card .index-card-details {
    padding: 20px 10px 5px;
    color: #000
}

.transports .due-Passed, .index-card.due-Passed {
    border: 5px solid red
}

.transports .done, .index-card.done {
    box-shadow: 0 0 8px 0 green
}

.equip-title-row {
    display: table;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

    .equip-title-row > div {
        display: table-cell;
        padding-left: 5px
    }

.wheel {
    background: url(/images/Icons.png) repeat scroll -418px -326px transparent;
    height: 17px;
    width: 13px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0
}

.row-task {
    padding: 5px;
    margin-bottom: 1px;
    width: 100%;
    box-sizing: border-box
}

.row-and-icon {
    display: table
}

    .row-and-icon .fa, .row-and-icon .far {
        display: table-cell;
        font-size: 1.2em;
        padding: 2px 1px;
        width: 1em;
        text-align: center
    }

    .row-and-icon > div {
        display: table-cell;
        vertical-align: top
    }

    .row-and-icon.big .fa {
        font-size: 2em;
        padding: 2px 3px
    }

@-webkit-keyframes rotating {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(720deg)
    }
}

.rotating {
    animation: rotating 5s ease-in-out infinite
}

.card-date {
    position: absolute;
    display: inline-block;
    box-shadow: 0 0 8px 0 #818181;
    background: #232323;
    color: #fff;
    width: 35px;
    vertical-align: top;
    margin-top: 5px;
    padding: 8px;
    word-break: break-word;
    text-align: center;
    margin-right: -60px;
    margin-left: 6px
}

    .card-date.today {
        background-color: #05ade2
    }

    .card-date .b {
        font-size: 20px
    }

.card-split {
    border-top: 1px solid transparent;
    height: 1px;
    margin: 15px 0
}

.scdh-card.card {
    width: 200px;
    min-height: initial;
    text-shadow: 0 1px black;
    margin-bottom: 0
}

    .scdh-card.card .card-title {
        padding: 2px 0;
        border-spacing: 4px 0
    }

        .scdh-card.card .card-title .tc {
            padding-left: 0
        }

    .scdh-card.card .card-pic {
        height: auto;
        min-height: 80px
    }

    .scdh-card.card .card-title > div {
        margin-right: -7px;
        font-size: 12px
    }

.scdh #pageContent {
    overflow: hidden;
    margin: 0;
    box-sizing: border-box
}

    .scdh #pageContent .scdh-table, .scdh #pageContent .scdh-menu {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box
    }

    .scdh #pageContent:not(.only-calendar) .table-wrapper {
        width: calc(100vw - 305px)
    }

    .scdh #pageContent .table-wrapper::-webkit-scrollbar {
        height: 8px
    }

    .scdh #pageContent .scdh-menu {
        width: 351px;
        margin-left: 20px;
        z-index: 98
    }

        .scdh #pageContent .scdh-menu .scrl {
            flex: 1;
            margin-top: 15px
        }

        .scdh #pageContent .scdh-menu > p > i {
            flex: unset !important;
            margin-bottom: 0
        }

.scdh-table tr.even td {
    height: 57px
}

.tbody-title {
    font-size: 16px;
    font-weight: bold
}

tr.depart:hover td {
    background-color: #d2d2d2
}

.scdh-form {
    display: none;
    background: #fff;
    margin-top: 1.5rem;
    padding: 10px;
    z-index: 1001
}

    .scdh-form h3 {
        margin-bottom: 10px
    }

    .scdh-form #SdchJobName {
        background: #e8e8e8;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 10px
    }

        .scdh-form #SdchJobName::-webkit-input-placeholder {
            color: GrayText
        }

.scdh th.dis {
    background: #bbb;
    color: GrayText
}

.scdh th.today {
    background: #05ade2;
    color: #fff
}

.scdh td.dis {
    background: #e8e8e8;
    min-width: 150px
}

.scdh td.today {
    background-color: #eafaff
}

.scdh-table tr.odd {
    z-index: 0
}

.scdh-table td {
    vertical-align: top;
    padding-top: 10px;
    min-width: 192px
}

.scdh-table table thead tr th:not(:first-child), .scdh-table table thead tr td:not(:first-child) {
    width: 260px
}

.scdh-table table thead tr th:first-child {
    width: 67px
}

.scdh-table table tbody {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    overflow-x: hidden
}

.scdh-table th {
    text-align: center
}

tr {
    position: relative
}

.freezed {
    margin-top: -20px;
    margin-bottom: 0
}

    .freezed span {
        background: #000;
        color: #05ade2;
        padding: 3px 5px;
        margin-right: -20%;
        height: auto;
        box-shadow: 0 0 8px 2px #bbb;
        display: inline-block;
        opacity: .7;
        text-align: center
    }

td .overflow {
    overflow: hidden;
    height: 2rem;
    bottom: 0;
    z-index: 0;
    left: 0;
    width: 2rem;
    position: absolute
}

@media(max-device-width:480px) {
    .freezed {
        position: fixed;
        left: 1rem;
        margin-top: -23px;
        z-index: 11;
        font-size: 12px
    }
}

.scdh-table .card {
    margin: 0
}

.scdh #pageContent .scdh-menu.ui-state-hover {
    background-color: #fff4df
}

.scdh-table tr.even td.ui-state-hover {
    background-color: #fff4df
}

.scdh-table .equip-row.card {
    background-color: #fff
}

    .scdh-table .equip-row.card .equip-title-row {
        flex-wrap: nowrap
    }

.scdh-zone .equip-row.card {
    box-shadow: 0 0 5px 0 #bbb;
    border: 1px solid #fff;
    cursor: pointer;
    min-height: inherit;
    color: initial;
    width: inherit;
    margin-bottom: 7px;
    user-select: none
}

    .scdh-zone .equip-row.card .extra {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 3px;
        text-align: center;
        box-sizing: border-box;
        width: 100%;
        background-color: rgba(0,0,0,.5);
        color: #fff
    }

        .scdh-zone .equip-row.card .extra .priority {
            margin: 4px
        }

    .scdh-zone .equip-row.card .details {
        line-height: 1.5
    }

.ui-draggable-dragging.equip-row.card .details .ellipsis, .scdh-table .equip-row.card .details .ellipsis {
    max-width: 168px
}

.scdh-zone .equip-row.card .details .equip-title {
    color: GrayText;
    font-size: .9em
}

    .scdh-zone .equip-row.card .details .equip-title .tc {
        padding-left: 5px;
        vertical-align: top
    }

.scdh-zone .equip-row.card .pic {
    border-width: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.scdh-zone .equip-row.card .menu {
    display: none
}

.equip-row.card.note {
    padding: 5px;
    background: #fafad2 !important;
    text-align: center;
    min-height: 3.5rem;
    justify-content: center;
    display: flex;
    box-sizing: border-box;
    align-items: center
}

    .equip-row.card.note form {
        flex: 1 1 100%;
        min-width: 100%
    }

[data-date] {
    position: relative
}

.add-note {
    position: absolute;
    bottom: -2rem;
    left: 0;
    margin: 5px 2px;
    padding: 2px 4px;
    cursor: pointer;
    font-size: 1.5em;
    z-index: 1;
    background: #f3f3f3;
    color: silver;
    transition: .5s ease-in-out
}

td:hover .add-note {
    bottom: 0
}

    td:hover .add-note:hover {
        color: #000
    }

.ui-draggable-dragging {
    z-index: 1001
}

td.main.Reception, .scdh-zone .equip-row[data-status='Reception'] {
    background: linear-gradient(to right,rgba(157,0,0,.5) 0%,rgba(255,255,255,1) 5%);
}

td.main.Disassembly, .scdh-zone .equip-row[data-status='Disassembly'], .scdh-zone .equip-row[data-status='AcceptanceTests'] {
    background: linear-gradient(to right,rgba(147,85,0,.4) 0%,rgba(255,255,255,1) 5%);
}

td.main.Repair, .scdh-zone .equip-row[data-status='Repair'], .scdh-table .equip-row[data-status='RepairScheduling'] {
    background: linear-gradient(to right,rgba(0,9,181,.4) 0%,rgba(255,255,255,1) 5%);
}

.scdh-table .equip-row[data-status='WaitForClientAprove'], .scdh-table .equip-row[data-status='WaitForCardApprove'], .scdh-table .equip-row[data-status='WaitForQuote'], .scdh-table .equip-row[data-status='WaitForQuat'], .legend .label.WaitForClientAprove::before {
    background-color: transparent;
    border: 1px solid rgba(255,153,0,.5)
}

.gannt-row.failed td:not(:hover).main, .gannt-row.done td:not(:hover).main {
    background: linear-gradient(to right,rgba(16,147,0,.62) 0%,#fff 5%)
}

    .gannt-row.failed td:not(:hover).main:after {
        content: 'x';
        position: absolute;
        left: 1rem;
        transform: translateY(-50%);
        top: 50%;
        color: red;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: ""
    }

.scdh-zone .equip-row[data-status='Done'], .legend .label.Done::before {
    border-left: 1px solid #39c20b
}

.scdh-zone .equip-row[data-status='Rejected'], .scdh-zone .equip-row[data-status='Invalid'], .legend .label.Rejected::before {
    border-left: 1px solid red
}

.scdh .scdh-zone .equip-row[data-outside='True'], .legend .label.Outside:before {
    background-color: rgba(146,192,255,.2)
}

.scdh-zone .equip-row[data-done='True'], .legend .label.TaskDone::before {
    background: #e8e8e8
}

.scdh.isOutside .scdh-table .equip-row[data-done='False'] {
    background: #fff
}

#scdh-table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center
}

.time-picker {
    text-align: right;
    flex: 1;
    display: inline-block
}

    .time-picker > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        align-items: center;
        max-width: 50rem
    }

        .time-picker > div .tc {
            display: inline-block;
            margin-left: 5px;
            flex: 1 1 auto;
            order: 1
        }

    .time-picker .searchFields {
        width: 150px
    }

    .time-picker .b {
        margin: 0 5px
    }

    .time-picker .week, .time-picker .twodays, .time-picker .goToToday {
        margin: 0 7px;
        font-size: 14px
    }

#toggleLegend {
    font-size: 14px
}

.min-cards {
    font-size: 14px !important;
    margin-left: 5px
}

.time-picker .is-search .tc:not(.searchFields) {
    display: none
}

@media(max-device-width:480px) {
    .time-picker .searchFields {
        width: 100%
    }

    .time-picker > div .tc {
        margin-bottom: 10px
    }

    .time-picker .tc.scnd-line {
        order: 2
    }

    .scdh-table table tbody {
        height: unset;
        overflow: visible
    }
}

.status-div {
    border: 1px solid #fff;
    background: #fff
}

    .status-div + .status-div {
        margin-top: 15px
    }

    .status-div h3 {
        font-size: 1.2em;
        background-color: #d9d9d9;
        padding: 8px;
        cursor: pointer;
        position: relative
    }

        .group h3:after, .status-div h3:after {
            font-family: "Font Awesome 5 Free";
            content: "";
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            margin: 0 1rem;
            position: absolute
        }

    .status-div .card .priority {
        display: none
    }

.scdh-zone .status-div .equip-row.card .details .b {
    margin-right: 0
}

.group.hide h3:after, .status-div.toggle h3:after {
    content: ""
}

.status-div.toggle .status-div-cards {
    display: none
}

.status-div h3:hover {
    background-color: #05ade2;
    color: #fff
}

.status-div-cards {
    padding: 5px
}

    .status-div-cards h4 {
        padding: 5px
    }

.scdh-table .scdh-card {
    margin-bottom: 5px
}

.scdh-table .card-date {
    margin: 10px 0 10px
}

.toggle-scdh-menu.expand:before {
    content: ""
}

.legend {
    text-align: center;
    margin: 1rem 0;
    display: none
}

    .legend .label {
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle
    }

        .legend .label:before {
            content: " ";
            display: inline-block;
            vertical-align: middle;
            border-radius: 2px;
            padding: 7px 10px;
            box-shadow: 0 0 5px 0 #717171;
            border: 1px solid #fff;
            margin-left: 5px
        }

input, textarea {
    font-size: 1em;
    font-family: tahoma;
    color: #232323
}

[type="text"], [type="search"], [type="email"], [type="number"], [type="tel"], [type="password"], textarea, .autocomplete.filterBox, .OuterSelect, .select2 .field, .select2-container--default .select2-search--dropdown .select2-search__field, body .select2-container--default .select2-selection--multiple, .cke_textarea_inline {
    width: 100%;
    padding: 7px;
    box-sizing: border-box;
    text-align: right;
    margin: 0
}

[type="text"], [type="search"], [type="email"], [type="number"], [type="tel"], [type="password"], textarea, .autocomplete.filterBox, .OuterSelect, .select2 .field, .select2-container--default .select2-search--dropdown .select2-search__field, .select2-box.selectbox, body .select2-container--default .select2-selection--multiple, .cke_textarea_inline, .SwitchBtn, .CheckZone {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    behavior: url(../css/corns.htc);
    border: 1px solid #fff;
    -moz-box-shadow: inset 0 0 7px #d1d3d3;
    -webkit-box-shadow: inset 0 0 7px #d1d3d3;
    box-shadow: inset 0 0 7px #d1d3d3
}

    [type="tel"]:invalid {
        color: red;
        border-color: red
    }

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #fff !important
}

.select2-box.selectbox {
    font-family: inherit;
    height: 30px;
    min-height: unset !important;
    font-size: 12px;
    padding: 3px;
    color: #999 !important
}

.HtmlValue .select2-container {
    width: 100% !important
}

.cke_textarea_inline {
    min-height: 2rem
}

textarea {
    text-indent: 0;
    line-height: 1.5;
    padding: 7px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.select2 .field span {
    line-height: 1.2em
}

input[type="submit"], input[type="button"], button:not(.select2-selection__choice__remove), .div-button, a.button {
    background: linear-gradient(0deg,#1ea4ce 0%,#48c8f1 100%);
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    margin: 0;
    min-width: 100px;
    border: none;
    cursor: pointer;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    behavior: url(../css/corns.htc);
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

    input[type="submit"].Black, input[type="button"].Black, .div-button.Black, a.button.Black, button.Black, .rect.black, input[type="checkbox"]:checked:after {
        background: linear-gradient(0deg,#1e1f1f 0%,#343634 100%)
    }

.rect.black {
    color: #fff
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

button.btn-small, input[type="button"].btn-small, a.button.btn-small {
    padding: 3px 5px;
    min-width: inherit;
    font-size: .9em;
    font-weight: normal
}

.VbTabBlockHeader input[type=button] {
    min-width: initial
}

.VbTabBlockHeader .page-control {
    display: inline-block;
    padding-top: 0;
    padding-bottom: 0
}

a.button {
    padding: 0 10px;
    display: inline-block;
    text-align: center
}

.div-button {
    padding: 5px;
    display: inline-block;
    text-align: center
}

    .div-button:hover, a.button:hover {
        text-decoration: none;
        cursor: pointer
    }

.clickable:hover, .buttons i:hover {
    background-color: #05ade2 !important;
    color: #fff !important;
    cursor: pointer
}

#AddPartBtn {
    padding: 4px 8px
}

td .OuterSelect, th .OuterSelect {
    width: auto
}

.OuterSelect {
    align-items: center;
    display: flex;
    position: relative !important;
    box-sizing: border-box !important;
    background-color: #fff;
    cursor: pointer;
    line-height: 16px;
    padding: 0;
    text-indent: 7px;
    box-sizing: initial;
    min-height: 1.3em
}

    .OuterSelect > input[name] {
        flex: 1;
        padding: 7px 0;
        background: none;
        text-indent: 7px
    }

    .OuterSelect[data-id='4'] {
        background-color: #57d302
    }

    .OuterSelect[data-id='3'] {
        background-color: #5fa648
    }

    .OuterSelect[data-id='2'] {
        background-color: #eaaf00
    }

    .OuterSelect[data-id='1'] {
        background-color: #ea6767
    }

    .OuterSelect[data-id='5'] {
        background-color: #d9d9d9
    }

.RowDis .OuterSelect {
    background-color: #d9d9d9
}

.TextAreaDiv {
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 7px #d1d3d3 inset;
    margin: 0;
    padding: 1px;
    position: relative
}

    .TextAreaDiv textarea {
        width: 100%;
        margin: 1px
    }

.checkboxes-line {
    line-height: 3
}

    .checkboxes-line[data-lead='true'] {
        display: none
    }

    .checkboxes-line label {
        display: inline-block;
        white-space: nowrap;
        width: auto;
        margin-left: 2rem;
        vertical-align: middle
    }

.RefubrishFieldsSet input[type="text"].input-validation-error, .RefubrishFieldsSet input[type="number"].input-validation-error, .RefubrishFieldsSet input [type="tel"], .input-validation-error, .CheckZone.field-validation-error, tr input[type="text"].input-validation-error, tr input[type="number"].input-validation-error, tr input [type="tel"], .input-validation-error, .input-validation-error + .select2 .select2-selection {
    border-color: red;
    font-size: inherit
}

.CheckZone.field-validation-error {
    color: inherit
}

.RefubrishFieldsSet .fieldlabel {
    width: 165px
}

.SwitchDiv {
    width: 100%;
    overflow: hidden;
    border-spacing: 0
}

.SwitchDivInner {
    width: 200%;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    -webkit-transform: translate3d(50%,0,0);
    -moz-transform: translate3d(50%,0,0);
    -ms-transform: translate3d(50%,0,0);
    -o-transform: translate3d(50%,0,0);
    transform: translate3d(50%,0,0);
    margin-right: 50%
}

    .SwitchDivInner[data-val=true] {
        -webkit-transform: translate3d(25%,0,0);
        -moz-transform: translate3d(25%,0,0);
        -ms-transform: translate3d(25%,0,0);
        -o-transform: translate3d(25%,0,0);
        transform: translate3d(25%,0,0)
    }

    .SwitchDivInner[data-val=false] {
        -webkit-transform: translate3d(75%,0,0);
        -moz-transform: translate3d(75%,0,0);
        -ms-transform: translate3d(75%,0,0);
        -o-transform: translate3d(75%,0,0);
        transform: translate3d(75%,0,0)
    }

.SwitchBtn {
    width: calc(50% - 4px);
    color: #fff;
    float: right;
    padding: 7px 0;
    cursor: pointer
}

    .SwitchBtn.true {
        background: linear-gradient(0deg,#2cb905 0%,#57d51b 100%);
        margin-left: 4px;
        text-align: left
    }

    .SwitchBtn.false {
        background: linear-gradient(0deg,#ff1301 0%,#ff1818 100%)
    }

    .SwitchBtn.UnClicked {
        width: 0
    }

    .SwitchBtn.Clicked {
        width: 100px
    }

.SwitchBtnSep {
    width: 4px;
    float: right
}

.SwitchBtn .Hand {
    font-size: 140%
}

    .SwitchBtn .Hand.Ok {
        margin-left: 10%;
        transform: rotateY(180deg)
    }

    .SwitchBtn .Hand.NotOk {
        margin-right: 10%
    }

.switch-container {
    display: flex
}

    .switch-container > * {
        flex: 1
    }

    .switch-container [type=radio] {
        visibility: hidden;
        width: 0
    }

    .switch-container label {
        border: 1px solid #fff;
        text-align: center;
        padding: 7px 0;
        border-radius: 3px;
        margin: 2px -1px;
        box-shadow: inset 0 0 7px #d1d3d3
    }

        .switch-container label.selected {
            background-color: #05ade2;
            color: #fff
        }

body .select2-container--default .select2-selection--single .select2-selection__arrow {
    cursor: pointer;
    background: linear-gradient(0deg,rgba(239,239,239,1) 0%,rgba(255,255,255,1) 100%);
    border: 1px solid #b5b5b5;
    border-radius: 3px;
    top: 2px;
    height: 20px;
    width: 22px;
    margin: 2px 3px;
    position: absolute
}

.select2-clear {
    border: 1px solid #f4f5f5;
    border-radius: 3px;
    color: #05ade2;
    top: 0;
    left: 0;
    cursor: pointer;
    bottom: 0;
    position: absolute;
    background: #fff;
    padding: 0 11px;
    line-height: 1.5rem;
    text-align: center;
    vertical-align: middle;
    font-size: .9em;
    margin: 2px
}

body .select2-container--default .select2-selection--multiple {
    padding: 3px 7px
}

    body .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin-top: 0;
        line-height: 1;
        height: 20px;
        display: inline-flex;
        border: none;
        align-items: center
    }

.select2-container--default .select2-selection--multiple .select2-selection__choice.input-validation-error {
    background: red
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-color: #d3d3d3 !important
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    font-size: .9em;
    margin: 0 3px
}

.ui-sortable-helper {
    border: 1px solid #05ade2;
    opacity: .9;
    background-color: #b0dbee
}

.ui-datepicker-trigger {
    background: repeat scroll -130px -1px transparent;
    cursor: pointer;
    height: 30px;
    width: 37px;
    min-width: initial
}

.DatePicker {
    color: #05ade2;
    font-weight: bold;
    display: inline-block;
    background: transparent;
    cursor: pointer
}

.datetime-pick:after {
    font-family: 'Font Awesome 5 Free';
    content: "";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
    position: absolute;
    left: .5rem;
    font-size: 1em
}

.OuterSelect.date-picker {
    padding: 0;
    height: unset
}

    .OuterSelect.date-picker .DatePicker {
        width: 95%;
        font-weight: normal
    }

.ui-datepicker {
    background-color: #fff;
    border: 1px solid #05ade2;
    padding: 5px !important
}

.client-notes, .client-alerts {
    background: #fdf4db;
    padding: 1rem;
    border: 1px solid #e5d4ae;
    margin: 5px
}

    .client-alerts label {
        font-weight: bold;
        color: #a2792d
    }

        .client-alerts label i {
            font-size: 1.2em;
            margin-left: 5px
        }

    .client-alerts ul {
        list-style-position: outside;
        list-style: square;
        padding-right: 2rem;
        margin-top: 10px;
        line-height: 1.3
    }

        .client-alerts ul li {
            padding-right: 0;
            color: #000
        }

            .client-alerts ul li i {
                margin: 5px
            }

.client-notes {
    margin: 5px 0;
    padding: 10px 5px
}

h1 {
    margin: 0;
    color: #05ade2;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0 0 10px
}

h2 {
    margin: 0;
    color: #05ade2;
    font-size: 1.4em;
    font-weight: bold;
    padding: 7px 0
}

h3 {
    margin: 0;
    color: #05ade2;
    font-size: 1.3em;
    font-weight: bold;
    padding: 5px 0
}

h4 {
    margin: 0;
    color: #05ade2;
    font-size: 1em;
    font-weight: bold
}

.placeholder, ::-webkit-input-placeholder {
    color: #d3d3d3;
    unicode-bidi: plaintext;
    text-align: right;
    font-weight: normal
}

.filterBox[has-value='true'] ::-webkit-input-placeholder {
    color: #232323
}

.priority [data-id] {
    font-weight: bold;
    position: relative
}

.priority .filterBox > div input, .priority [data-id] {
    text-indent: 20px
}

.abs-wrap {
    position: relative;
    height: auto
}

    .abs-wrap > div {
        height: 100%
    }

.tile-rows.priority span {
    padding-left: 20px
}

.priority [data-temp-text] > div:first-child:before, .priority [data-id] :before, .priority[data-priority] {
    background: #d3d3d3;
    height: 15px;
    width: 15px;
    border-radius: 100%
}

.priority [data-temp-text] > div:first-child:before, .priority [data-id] :before, div.priority[data-priority] {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    margin: 8px
}

span.priority[data-priority] {
    display: inline-block;
    margin: 0;
    margin-left: 5px
}

.tile-rows.priority [data-id] :before {
    margin: 0;
    right: auto;
    left: 0
}

.priority[data-priority] {
    margin: 4px;
    cursor: pointer;
    opacity: .5;
    margin: 5px;
    height: 1em;
    width: 1em
}

.priority .select {
    width: 150px;
    border-radius: 11px;
    right: 1px;
    top: 1px;
    z-index: 2;
    height: 14em
}

.tile-priority {
    padding-right: 1.5rem
}

    .tile-priority .priority {
        height: 1.5em;
        width: 1.5em;
        margin: 5px 0
    }

.card .card-title {
    padding-right: 1.3em
}

    .card .card-title .priority {
        margin: 2px 0
    }

.priority[data-priority]:hover {
    opacity: 1
}

.priority[data-priority]:active .select, .priority[data-priority] .select:hover {
    visibility: visible;
    opacity: 1
}

.priority [data-temp-text] > div:first-child {
    display: none
}

.priority .select .filterBox .list {
    top: 0;
    display: block !important;
    background: none;
    box-shadow: none;
    border: none
}

    .priority .select .filterBox .list li:not([selected]) {
        font-weight: normal
    }

.card-date .priority {
    position: relative;
    margin: .5rem auto;
    height: 2em;
    width: 2em
}

.priority [data-temp-text='מוקפא'] > div:first-child:before, .priority [data-id='-1'] :before, .priority[data-priority='-1'], .priority.p--1 {
    background: rgba(171,229,255,1)
}

.priority [data-temp-text='נמוכה'] > div:first-child:before, .priority [data-id='1'] :before, .priority[data-priority='1'], .priority.p-1 {
    background: rgba(0,200,0,1)
}

.priority [data-temp-text='רגילה'] > div:first-child:before, .priority [data-id='2'] :before, .priority[data-priority='2'], .priority.p-2 {
    background: #ffdc00
}

.priority [data-temp-text='גבוהה'] > div:first-child:before, .priority [data-id='3'] :before, .priority[data-priority='3'], .priority.p-3 {
    background: #ff8200
}

.priority [data-temp-text='דחוף'] > div:first-child:before, .priority [data-id='4'] :before, .priority[data-priority='4'], .priority.p-3 {
    background: red
}

.overlay {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.tooltip {
    position: absolute;
    border-radius: 11px;
    padding: 10px;
    box-shadow: 0 0 15px 0 #bbb;
    background: #fff
}

.ui-autocomplete {
    z-index: 15
}

.ui-widget-content.ui-autocomplete {
    max-height: 200px;
    overflow: auto;
    background-color: #fff;
    padding: 5px
}

    .ui-widget-content.ui-autocomplete .ui-menu-item {
        line-height: 1.5;
        padding: 5px 0;
        cursor: pointer;
        box-sizing: border-box
    }

        .ui-widget-content.ui-autocomplete .ui-menu-item:hover {
            background-color: #05ade2;
            color: #fff
        }

.autocomplete.filterBox {
    padding: 0;
    background: #fff
}

    .autocomplete.filterBox .inner {
        display: flex;
        width: 100%;
        padding: 0;
        align-items: center
    }

        .autocomplete.filterBox .inner input {
            flex: 1;
            background: transparent;
            border: none;
            box-shadow: none;
            cursor: pointer;
            padding-left: 7px !important
        }

        .autocomplete.filterBox .inner .SelectBtn {
            display: inline-block;
            position: relative;
            top: 50%;
            left: 2px
        }

.view-selector .autocomplete.filterBox {
    background: transparent;
    border: none;
    box-shadow: none
}

.autocomplete.filterBox li {
    padding: 5px 10px
}

    .autocomplete.filterBox li[split] {
        color: #d3d3d3
    }

    .autocomplete.filterBox li.empty {
        display: none
    }

        .autocomplete.filterBox li.empty.none {
            font-style: italic
        }

        .autocomplete.filterBox li.empty.add {
            background-color: #05ade2;
            color: #fff;
            margin: 0 3px;
            border-radius: 3px
        }

.autocomplete input[type=hidden].input-validation-error + input[type=text] {
    border: 1px solid red
}

.trans .autocomplete.filterBox .TextBox {
    background: none;
    border: none;
    box-shadow: none
}

.trans .autocomplete.filterBox .SelectBtn {
    background-position: 16px -5px;
    height: 20px;
    width: 20px;
    top: 2px
}

.trans .filterBox [type=text], select.selectbox {
    padding-left: 24px
}

.pvtUi .OuterSelect {
    padding: 7px 2px
}

.pvtUnused, .pvtRows {
    width: 10rem
}

    .pvtUnused .pvtFilteredAttribute {
        font-style: unset !important
    }

.pvtFilteredAttribute .pvtAttr {
    background-color: #05ade2 !important;
    color: #fff
}

.inplace .autocomplete input {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 0;
    width: 8rem;
    cursor: pointer
}

.inplace i {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    display: none;
    cursor: pointer
}

.inplace .history {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    padding: 10px;
    background-color: #f5f5f5;
    z-index: 10;
    border: 1px solid #ccc;
    z-index: 1
}

    .inplace .history.show {
        display: block
    }

    .inplace .history .rows {
        padding: .5rem 0
    }

    .inplace .history .LoadGif {
        margin: 2rem auto
    }

.translate-mode .marked {
    background-color: rgba(255,164,0,.09)
}

.student-tr .inplace:hover i {
    display: block
}

.student-tr .inplace .history:before {
    content: '';
    position: fixed;
    top: 0;
    height: 100%;
    left: 0;
    right: 0;
    background-color: transparent;
    z-index: 0
}

.jstree a[data-id='-2'] {
    background-color: #05ade2;
    color: #fff !important;
    border-radius: 3px;
    padding: 3px 5px
}

    .jstree a[data-id='-2'].disabled {
        color: graytext;
        background-color: #e6e6e6
    }

    .jstree a[data-id='-2']:hover {
        color: #fff
    }

.autocomplete.filterBox li:hover:not(.empty):not([selected]):not([split]) {
    background: #05ade2;
    color: #fff;
    cursor: pointer
}

.autocomplete.filterBox li[selected] {
    background: #f5f5f5
}

.sitesubcontent > h2 {
    padding: 0;
    padding-bottom: 15px
}

.sitesubcontent form:not(.no-overflow), .sitesubcontent .stage-scrl {
    max-height: 67vh;
    overflow-y: auto;
    position: relative
}

.MacName {
    font-family: Magistral-Light;
    font-weight: normal;
    font-style: normal
}

.MacMerge {
    line-height: 1.5
}

.formRow {
    clear: both
}

    .formRow .SiteHeaderClientLogo {
        float: right
    }

    .formRow.emp {
        margin-top: 10px;
        line-height: 2;
        padding: 5px 7px;
        border-top: 1px solid #d3d3d3
    }

        .formRow.emp h4 {
            display: inline-block;
            font-weight: normal;
            margin-left: 5px;
            color: gray
        }

.field-validation-valid {
    display: none
}

.field-validation-error {
    color: red;
    line-height: 15px;
    margin-top: 2px;
    display: block;
    font-weight: initial
}

    .field-validation-error.dn {
        display: none;
        font-size: smaller
    }

    .field-validation-error .autocomplete input, .field-validation-error .CheckZone {
        border-color: red
    }

    .field-validation-error .autocomplete .list {
        color: initial
    }

.validation-summary-valid {
    display: none
}

div.validation-summary-errors span {
    color: red;
    font-size: 1em
}

#LoginForm .datarow .validation-summary-errors {
    position: relative;
    font-size: inherit
}

.datarow[data-required='True'] .fieldlabel > span:first-child:after {
    content: '*';
    color: #05ade2
}

.field-validation-error.datarow[data-required='True'] .fieldlabel > span:first-child:after {
    color: red
}

.header-icon {
    width: 28px;
    height: 28px;
    cursor: pointer;
    margin: 7px;
    cursor: pointer;
    display: inline-block;
    background: repeat scroll 1px 1px transparent
}

.flag {
    background-position: -33px -4px
}

.logout {
    background-position: -347px -77px
}

a {
    text-decoration: none;
    color: inherit
}

select {
    width: 100%;
    height: 20px;
    margin: 0;
    padding-right: 5px
}

    select.selectbox.select2-hidden-accessible {
        filter: alpha(opacity=0);
        background: none repeat scroll 0 0 #fff;
        color: graytext;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        height: 33px;
        cursor: pointer;
        line-height: 33px
    }

    select.selectbox option {
        padding: 5px
    }

#popUpdateUser select {
    border: 1px solid #fff;
    border-radius: 3px;
    box-shadow: 0 0 7px #d1d3d3 inset;
    height: auto;
    margin: 0;
    padding: 7px;
    cursor: pointer
}

.SelectBtn {
    background: repeat scroll -133px -5px rgba(0,0,0,0);
    cursor: pointer;
    height: 25px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 27px
}

.RowDis .SelectBtn {
    background-position: 95px -5px
}

.SelectVal {
    font-weight: bold;
    line-height: 1.4
}

input.SelectVal {
    background: none;
    border: none;
    position: absolute;
    top: 0;
    right: 0
}

.EditabelText .close {
    position: absolute;
    left: 12px;
    top: 8px
}

.TopMenuLink a.current {
    color: #fff !important;
    font-weight: bold;
    text-decoration: none
}

.validation-summary-errors {
    color: red;
    font-size: 1em;
    position: absolute;
    right: 0
}

.validationSummary .validation-summary-errors {
    position: relative
}

.validation-summary-errors ul:before, .validation-summary-errors ul:after {
    display: table;
    line-height: 0;
    content: "";
    clear: both
}

.validation-summary-errors ul li {
    list-style: none;
    float: right;
    margin-left: 5px
}

    .validation-summary-errors ul li:after {
        content: " | "
    }

#UpdateStepForm .field-validation-error {
    font-size: 1em;
    font-weight: bold
}

.filterBox .list {
    display: none;
    position: absolute;
    top: 32px;
    right: 0;
    min-width: 100%;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 15px 0 #bbb;
    -moz-box-shadow: 0 0 15px 0 #bbb;
    -webkit-box-shadow: 0 0 15px 0 #bbb;
    max-height: 200px;
    overflow: auto;
    padding: 8px 0;
    font-weight: normal
}

body .select2-dropdown {
    border: none;
    background-color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 15px 0 #bbb;
    -moz-box-shadow: 0 0 15px 0 #bbb;
    -webkit-box-shadow: 0 0 15px 0 #bbb;
    padding: 8px 0;
    font-weight: normal;
    min-width: 17rem;
    margin-top: 2px
}

body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #05ade2
}

    body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .info {
        color: rgba(255,255,255,.6)
    }

.filterBox.opened .list {
    display: block
}

.filterBox [type=text], select.selectbox {
    box-sizing: border-box;
    padding-left: 30px
}

.filterBox [disabled][type=text], select[disabled].selectbox {
    font-weight: normal
}

.btn-group > .btn:first-child {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    margin-right: 0
}

.btn-group > .btn:last-child, .btn-group > .dropdown-toggle {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px
}

.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
    font-size: 12px
}

.btn-group > .btn {
    border-radius: 0 0 0 0;
    position: relative
}

.bootstrap-select .btn {
    width: 100%
}

.bootstrap-select.btn-group .btn .filter-option {
    font-family: tahoma;
    font-size: 11px;
    right: 12px;
    overflow: hidden;
    position: absolute;
    left: 25px;
    text-align: right
}

.pull-right {
    float: right
}

.btn {
    height: 38px;
    color: graytext;
    -moz-border-bottom-colors: none;
    -moz-border-right-colors: none;
    -moz-border-left-colors: none;
    -moz-border-top-colors: none;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border-color: #ccc #ccc #b3b3b3;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255,255,255,.2) inset,0 1px 2px rgba(0,0,0,.05);
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,.75);
    vertical-align: middle
}

    .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
        color: graytext;
        background-color: #e6e6e6;
        *background-color: #d9d9d9
    }

    .btn:active, .btn.active {
        background-color: #ccc
    }

    .btn:first-child {
        *margin-right: 0
    }

    .btn:hover, .btn:focus {
        color: graytext;
        text-decoration: none;
        background-position: 0 -15px;
        -webkit-transition: background-position .1s linear;
        -moz-transition: background-position .1s linear;
        -o-transition: background-position .1s linear;
        transition: background-position .1s linear
    }

    .btn:focus {
        outline: thin dotted #333;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px
    }

    .btn.active, .btn:active {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);
        box-shadow: inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05)
    }

    .btn.disabled, .btn[disabled] {
        cursor: default;
        background-image: none;
        opacity: .65;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none
    }

.bootstrap-select:not([class*="span"]) {
    width: 220px
}

.bootstrap-select.btn-group, .bootstrap-select.btn-group[class*="span"] {
    display: inline-block;
    float: none;
    margin-bottom: 10px;
    margin-right: 0
}

.btn-group {
    display: inline-block;
    font-size: 0;
    position: relative;
    vertical-align: middle;
    white-space: nowrap
}

.bootstrap-select.btn-group .btn .caret {
    position: absolute;
    left: 1px
}

.btn .caret {
    margin-right: 0;
    margin-top: 2px
}

.caret {
    background: repeat scroll -130px -1px transparent;
    cursor: pointer;
    height: 30px;
    left: 0;
    position: absolute;
    top: 0;
    width: 37px
}

.bootstrap-select.btn-group .dropdown-menu {
    -moz-box-sizing: border-box;
    min-width: 100%
}

.open > .dropdown-menu {
    display: block
}

.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
    font-size: 12px
}

.dropdown-menu {
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    display: none;
    float: right;
    right: 0;
    list-style: none outside none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000
}

.bootstrap-select.btn-group .dropdown-menu li > a {
    cursor: pointer;
    min-height: 20px
}

.dropdown-menu > li > a {
    clear: both;
    display: block;
    font-weight: normal;
    line-height: 20px;
    padding: 3px 20px;
    white-space: nowrap
}

    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
        text-decoration: none;
        color: #fff;
        background-color: #0081c2;
        background-image: -moz-linear-gradient(top,#08c,#0077b3);
        background-image: -o-linear-gradient(top,#08c,#0077b3);
        background-image: linear-gradient(to bottom,#08c,#0077b3);
        background-repeat: repeat-x
    }

.bootstrap-select.btn-group .dropdown-menu li > a {
    cursor: pointer
}

.bootstrap-select.btn-group .dropdown-menu li a i.check-mark {
    display: none
}

.icon-ok {
    background-position: -288px 0
}

[class^="icon-"], [class*=" icon-"] {
    background-image: url("../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    margin-top: 1px;
    vertical-align: text-top;
    width: 14px
}

.btn-icon {
    padding: 5px;
    width: 1em;
    font-size: 1em;
    height: 1em;
    line-height: 1em;
    border-radius: 3px;
    background-color: #fff;
    text-align: center;
    cursor: pointer
}

    .btn-icon:hover {
        background-color: #05ade2;
        color: #fff !important
    }

input[type="checkbox"] {
    margin: 0;
    position: relative
}

    input[type="checkbox"]:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        border: 1px solid #343634;
        border-radius: 2px;
        padding: 1px;
        box-sizing: border-box;
        font-size: 9px;
        cursor: pointer
    }

    input[type="checkbox"]:checked:after {
        content: "";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: #fff
    }

.logo {
    font-size: 24px;
    color: blue;
    border: 1px solid red
}

.clear {
    clear: both
}

.floatfirst {
    float: right
}

.floatlast {
    float: left
}

.align-end {
    text-align: left
}

.BtnDiv {
    text-align: left;
    padding: 5px 0
}

.address-zone {
    color: #bbb;
    position: absolute;
    top: 7px;
    left: 10px;
    font-weight: normal
}

.BorderImg {
    background: #fff;
    border: 1px #d7dfe6 solid;
    margin-left: 5px
}

    .BorderImg img {
        width: 400px;
        height: 300px;
        margin-top: 1px;
        margin-right: 1px;
        margin-bottom: -2px;
        margin-left: 0
    }

.StsIconSmall {
    float: left;
    background: repeat scroll -1px -1px transparent;
    height: 33px;
    width: 33px
}

    .StsIconSmall.Sts-4 {
        background-position: -124px -41px !important
    }

    .StsIconSmall.Sts-3 {
        background-position: -85px -41px !important
    }

    .StsIconSmall.Sts-2 {
        background-position: -46px -41px !important
    }

    .StsIconSmall.Sts-1 {
        background-position: -5px -41px !important
    }

    .StsIconSmall.Sts-5 {
        background-position: -166px -41px !important
    }

.StsIconBig {
    float: left;
    background: repeat scroll -1px -1px transparent;
    height: 42px;
    width: 42px
}

    .StsIconBig.Sts-4 {
        background-position: -208px -252px !important
    }

    .StsIconBig.Sts-3 {
        background-position: -142px -252px !important
    }

    .StsIconBig.Sts-2 {
        background-position: -76px -252px !important
    }

    .StsIconBig.Sts-1 {
        background-position: -10px -252px !important
    }

    .StsIconBig.Sts-5 {
        background-position: -274px -252px !important
    }

.PopFrame {
    background-color: #f5f5f5;
    border: 1px solid #bbb;
    padding: 15px;
    display: none;
    width: 720px;
    position: fixed !important;
    min-height: 400px;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%)
}

.PopMainHead {
    display: flex;
    min-height: 34px
}

    .PopMainHead .rec-icon {
        float: none;
        position: relative;
        left: unset
    }

.PopHead_title {
    color: #05ade2;
    font-size: 1.4em;
    font-weight: bold;
    padding: 7px 0;
    z-index: 2;
    cursor: move;
    flex: 1
}

    .PopHead_title:hover {
        background: #40c1ec1c
    }

.PopCloseButton {
    left: 0;
    z-index: 2;
    right: auto;
    position: absolute;
    top: 0;
    cursor: pointer
}

@media only screen and (min-width:1023px) {
    .PopFrame .side-search {
        display: flex
    }

    .PopFrame .side-search {
        display: flex
    }

        .PopFrame .side-search .searchFields {
            flex: 1 1 20rem;
            margin-left: .5rem
        }

            .PopFrame .side-search .searchFields .VbTabBlockInfo {
                max-height: 540px;
                overflow: auto
            }

        .PopFrame .side-search #pageContent > div {
            max-height: calc(65vh - 10rem);
            overflow: auto
        }

        .PopFrame .side-search > :last-child {
            flex: 1 1 100%
        }

    #popImportFromQuote {
        width: 60rem
    }
}

.ui-dialog-inner-content {
    padding: 10px;
    background-color: #e8e8e8;
    margin: 10px 0
}

.ui-dialog-inner-content-btns {
    text-align: left
}

    .ui-dialog-inner-content-btns input {
        float: none
    }

.PopContent {
    position: relative;
    clear: both;
    margin-top: 15px;
    height: 100%
}

    .PopContent > .LoadGif {
        top: 9rem
    }

.OptionMenu ul li {
    margin: 5px 0
}

#popUpdateReject {
    width: 25rem;
    min-height: 14rem
}

#popAddReturningJob, #popReplaceEquip, #popSelectShippmentob {
    width: 300px;
    min-height: 130px
}

#popStageContent {
    width: 90vw;
    height: 90vh
}

@media(max-device-width:480px) {
    .gannt.tasks th:nth-child(3), .gannt.tasks td:nth-child(3), #popStageContent .times-wrap {
        display: none
    }
}

#popMoveJob {
    width: 300px;
    min-height: 100px
}

#popUpdateUser {
    min-height: 274px
}

#popUpdateMachine {
    width: 680px;
    min-height: 450px
}

#popdrillDown {
    width: 90vw
}

    #popdrillDown .PopContent {
        max-height: 50vh;
        overflow: auto
    }

    #popdrillDown td a {
        color: #05ade2
    }

#popDataList {
    width: 80rem;
    max-width: 90%;
    max-height: 90%
}

    #popDataList td {
        white-space: nowrap
    }

#popPicPreview, #popImgmac-pic {
    width: 95%;
    height: 95%
}

    #popPicPreview .picZone, #popImgmac-pic .picZone {
        max-width: 100%;
        width: inherit
    }

    #popPicPreview .PopHead_title {
        margin-right: 11rem
    }

#popImportFromQuote {
    min-height: 67vh
}

#popUpdateDynamicFields {
    min-height: 250px
}

#popImg, .popImg {
    width: auto;
    min-height: inherit
}

#popUpdateEmployee {
    min-height: 500px
}

#popUpdateCorona {
    min-height: 300px;
    max-width: 30rem
}

#popUpdateCourseStudent {
    width: 40rem;
    min-height: 15rem
}

#popUpdatePurchasePayment {
    width: 345px;
    min-height: 220px
}

#popUpdateEmployeePermision {
    width: 700px;
    min-height: 74vh
}

#popUpdateRefubrish {
    width: 800px;
    min-height: 500px
}

#popUpdateDependency {
    width: 400px;
    min-height: 300px
}

#popUpdateBankField {
    min-height: 250px
}

#popUpdateClient, #popUpdateSupplier {
    min-height: 480px
}

#popUploadDraws .qq-uploader {
    min-height: 300px
}

#file-drop-area.selected .qq-uploader {
    max-height: unset;
    height: 70vh
}

#popUploadDraws .qq-uploader .qq-upload-list {
    max-height: 100%;
    box-shadow: none;
    padding-top: 1.5rem
}

#popUpdateCatalogItemComponent {
    width: 400px;
    min-height: 335px;
    overflow: auto
}

#popJob {
    width: 688px;
    min-height: 625px
}

#popAlert {
    width: 400px
}

#popPurchaseReceival {
    width: 80vw;
    max-width: 900px
}

    #popPurchaseReceival [name*="QuantityReceived"] {
        width: 50px;
        text-align: center
    }

#popUpdateMachinePart {
    width: 688px;
    min-height: 335px
}

#popChangeField, #popChangeGroup {
    width: 688px;
    min-height: 200px
}

#popUpdateQuote {
    min-height: 330px
}

#popUpdateRole {
    width: 350px;
    min-height: 270px
}

#popUpdateJobTaskMaterial {
    width: 550px;
    min-height: 270px
}

#popUpdateLangString {
    width: 20rem;
    max-width: 100%;
    min-height: 22rem
}

#popAttach {
    padding: 15px
}

    #popAttach .tile-rows, #popAttach .attach-div {
        padding: 0;
        margin: 0;
        display: fle
    }

    #popAttach .SideHeaderInfoValue.b {
        font-size: 14px;
        color: GrayText !important;
        margin-bottom: 10px
    }

    #popAttach .files {
        display: flex
    }

        #popAttach .files > * {
            margin-left: 10px;
            margin-top: 0
        }

    #popAttach .attach-div .SideHeaderInfoLabel .delAttach {
        margin: 0;
        margin-right: 8px
    }

    #popAttach .attach-div .SideHeaderInfoLabel.add {
        margin: 5px 0 0;
        padding: 0;
        display: inline-block
    }

    #popAttach .no-result {
        display: none
    }

#popSummary {
    width: auto
}

    #popSummary .tile.frst {
        display: none
    }

    #popSummary .two-col {
        height: auto
    }

    #popSummary .tile.stage {
        width: auto;
        margin: 0
    }

        #popSummary .tile.stage .sitesubcontent {
            box-shadow: none;
            background: none;
            padding: 15px
        }

    #popSummary .PopMainHead {
        position: absolute;
        left: 25px;
        top: 30px
    }

    #popSummary .PopContent {
        margin: 0
    }

.qtip, .qtip {
    position: absolute;
    top: 0;
    display: none;
    min-width: 50px;
    line-height: 1.2
}

    .qtip b {
        font-size: 1.2em
    }

.qtip-content {
    position: relative;
    padding: 1rem;
    overflow: hidden;
    text-align: right;
    word-wrap: break-word
}

.qtip-titlebar {
    position: relative;
    padding: 7px;
    padding-left: 25px;
    overflow: hidden;
    border-bottom: 1px solid #fff;
    font-weight: bold
}

    .qtip-titlebar + .qtip-content {
        border-top-width: 0 !important
    }

.qtip-close {
    position: absolute;
    right: -9px;
    top: -9px;
    cursor: pointer;
    outline: medium none;
    border-width: 1px;
    border-style: solid;
    border-color: transparent
}

.qtip-titlebar .qtip-close {
    right: 4px;
    top: 50%;
    margin-top: -9px
}

* html .qtip-titlebar .qtip-close {
    top: 16px
}

.qtip-titlebar .ui-icon, .qtip-icon .ui-icon {
    display: block;
    text-indent: -1000em;
    direction: ltr
}

.qtip-icon, .qtip-icon .ui-icon {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none
}

    .qtip-icon .ui-icon {
        width: 18px;
        height: 14px;
        text-align: center;
        text-indent: 0;
        font: normal bold 10px/13px Tahoma,sans-serif;
        color: inherit;
        background: transparent none no-repeat -100em -100em
    }

.qtip-default {
    border-width: 1px;
    border-style: solid;
    border-color: #f1d031;
    background-color: #ffffa3;
    color: #555
}

    .qtip-default .qtip-icon {
        border-color: #ccc;
        background: #f1f1f1;
        color: #777
    }

    .qtip-default .qtip-titlebar .qtip-close {
        border-color: #aaa;
        color: #111
    }

.qtip-black {
    background-color: #282a29;
    border: 1px solid #282a29;
    color: #fff;
    font-weight: bold;
    word-wrap: normal
}

    .qtip-black .qtip-titlebar {
        background-color: #d0e9f5
    }

    .qtip-black .qtip-close .qtip-icon {
        background-position: -2px 0
    }

.qtip-notify {
    background-color: #f7ae83;
    border-color: #f7ae83;
    color: inherit;
    font-size: inherit
}

.qtip-red {
    background-color: #f78b83;
    border-color: #f78b83;
    color: #8b0000;
    font-size: inherit
}

.qtip-green {
    background-color: #8fbc8f;
    border-color: #8fbc8f;
    color: #2f4f4f;
    font-size: inherit
}

    .qtip-green .qtip-titlebar {
        color: #577b57;
        border-color: #577b57
    }

.qtip-shadow {
    -webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,.15);
    -moz-box-shadow: 1px 1px 3px 1px rgba(0,0,0,.15);
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,.15)
}

.qtip-rounded, .qtip-tipsy, .qtip-bootstrap {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.qtip-youtube {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 3px #333;
    -moz-box-shadow: 0 0 3px #333;
    box-shadow: 0 0 3px #333;
    color: #fff;
    border-width: 0;
    background: #4a4a4a;
    background-image: -moz-linear-gradient(top,#4a4a4a 0,black 100%);
    background-image: -ms-linear-gradient(top,#4a4a4a 0,black 100%);
    background-image: -o-linear-gradient(top,#4a4a4a 0,black 100%)
}

    .qtip-youtube .qtip-titlebar {
        background-color: #4a4a4a;
        background-color: rgba(0,0,0,0)
    }

    .qtip-youtube .qtip-content {
        padding: .75em;
        font: 12px arial,sans-serif;
        -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);"
    }

    .qtip-youtube .qtip-icon {
        border-color: #222
    }

    .qtip-youtube .qtip-titlebar .ui-state-hover {
        border-color: #303030
    }

.qtip-jtools {
    background: #232323;
    background: rgba(0,0,0,.7);
    background-image: -moz-linear-gradient(top,#717171,#232323);
    background-image: -ms-linear-gradient(top,#717171,#232323);
    background-image: -o-linear-gradient(top,#717171,#232323);
    border: 2px solid #ddd;
    border: 2px solid rgba(241,241,241,1);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 12px #333;
    -moz-box-shadow: 0 0 12px #333;
    box-shadow: 0 0 12px #333
}

    .qtip-jtools .qtip-titlebar {
        background-color: transparent;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)"
    }

    .qtip-jtools .qtip-content {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)"
    }

    .qtip-jtools .qtip-titlebar, .qtip-jtools .qtip-content {
        background: transparent;
        color: #fff;
        border: 0 dashed transparent
    }

    .qtip-jtools .qtip-icon {
        border-color: #555
    }

    .qtip-jtools .qtip-titlebar .ui-state-hover {
        border-color: #333
    }

.qtip-cluetip {
    -webkit-box-shadow: 4px 4px 5px rgba(0,0,0,.4);
    -moz-box-shadow: 4px 4px 5px rgba(0,0,0,.4);
    box-shadow: 4px 4px 5px rgba(0,0,0,.4);
    background-color: #d9d9c2;
    color: #111;
    border: 0 dashed transparent
}

    .qtip-cluetip .qtip-titlebar {
        background-color: #87876a;
        color: #fff;
        border: 0 dashed transparent
    }

    .qtip-cluetip .qtip-icon {
        border-color: #808064
    }

    .qtip-cluetip .qtip-titlebar .ui-state-hover {
        border-color: #696952;
        color: #696952
    }

.qtip-tipsy {
    background: #000;
    background: rgba(0,0,0,.87);
    color: #fff;
    border: 0 solid transparent;
    font-size: 11px;
    font-family: 'Lucida Grande',sans-serif;
    font-weight: bold;
    line-height: 16px;
    text-shadow: 0 1px black
}

    .qtip-tipsy .qtip-titlebar {
        padding: 6px 35px 0 10px;
        background-color: transparent
    }

    .qtip-tipsy .qtip-content {
        padding: 6px 10px
    }

    .qtip-tipsy .qtip-icon {
        border-color: #222;
        text-shadow: none
    }

    .qtip-tipsy .qtip-titlebar .ui-state-hover {
        border-color: #303030
    }

.qtip-tipped {
    border: 3px solid #959fa9;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: #f9f9f9;
    color: #454545;
    font-weight: normal;
    font-family: serif
}

    .qtip-tipped .qtip-titlebar {
        border-bottom-width: 0;
        color: #fff;
        background: #3a79b8;
        background-image: -moz-linear-gradient(top,#3a79b8,#2e629d);
        background-image: -ms-linear-gradient(top,#3a79b8,#2e629d);
        background-image: -o-linear-gradient(top,#3a79b8,#2e629d);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)"
    }

    .qtip-tipped .qtip-icon {
        border: 2px solid #285589;
        background: #285589
    }

        .qtip-tipped .qtip-icon .ui-icon {
            background-color: #fbfbfb;
            color: #555
        }

.qtip-bootstrap {
    font-size: 14px;
    line-height: 20px;
    color: #333;
    padding: 1px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box
}

    .qtip-bootstrap .qtip-titlebar {
        padding: 8px 14px;
        margin: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 18px;
        background-color: #f7f7f7;
        border-bottom: 1px solid #ebebeb;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0
    }

        .qtip-bootstrap .qtip-titlebar .qtip-close {
            right: 11px;
            top: 45%;
            border-style: none
        }

    .qtip-bootstrap .qtip-content {
        padding: 9px 14px
    }

    .qtip-bootstrap .qtip-icon {
        background: transparent
    }

        .qtip-bootstrap .qtip-icon .ui-icon {
            width: auto;
            height: auto;
            float: right;
            font-size: 20px;
            font-weight: bold;
            line-height: 18px;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .2;
            filter: alpha(opacity=20)
        }

            .qtip-bootstrap .qtip-icon .ui-icon:hover {
                color: #000;
                text-decoration: none;
                cursor: pointer;
                opacity: .4;
                filter: alpha(opacity=40)
            }

.qtip:not(.ie9haxors) div.qtip-content, .qtip:not(.ie9haxors) div.qtip-titlebar {
    filter: none;
    -ms-filter: none
}

.qtip .qtip-tip {
    margin: 0 auto;
    overflow: hidden;
    z-index: 10
}

    .qtip .qtip-tip, .qtip .qtip-tip .qtip-vml {
        position: absolute;
        color: #123456;
        background: transparent;
        border: 0 dashed transparent
    }

        .qtip .qtip-tip canvas {
            top: 0;
            left: 0
        }

        .qtip .qtip-tip .qtip-vml {
            behavior: url(#default#VML);
            display: inline-block;
            visibility: visible
        }

#qtip-overlay {
    position: fixed;
    left: -10000em;
    top: -10000em
}

    #qtip-overlay.blurs {
        cursor: pointer
    }

    #qtip-overlay div {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: .7;
        filter: alpha(opacity=70);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"
    }

.qtipmodal-ie6fix {
    position: absolute !important
}

#qtip-growl-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99999999;
    color: #000
}

    #qtip-growl-container .qtip {
        position: static;
        min-height: 0;
        overflow: hidden
    }

.ClientTreeDiv {
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 15px;
    margin-right: 1px;
    padding: 10px 0 15px 2px
}

.TreeMenuSelected {
    font-weight: bold;
    color: #1a73ad !important;
    cursor: default !important
}

.HiddenBlock {
    color: silver !important
}

.TreeStsIcon {
    background: url("/images/sprite/IconsMain.png") repeat scroll -0 -0 transparent;
    width: 11px;
    height: 10px;
    display: inline-block
}

    .TreeStsIcon.Sts-0 {
        background-position: -423px -106px
    }

    .TreeStsIcon.Sts-1 {
        background-position: -444px -106px
    }

    .TreeStsIcon.Sts-2, .TreeStsIcon.Sts-8 {
        background-position: -464px -106px
    }

    .TreeStsIcon.Sts-4 {
        background-position: -484px -106px
    }

    .TreeStsIcon.Sts-5 {
        background-position: -403px -106px
    }

#SiteContent {
    width: 1000px;
    margin-left: auto;
    margin-right: auto
}

.SiteWidth {
    margin-left: auto;
    margin-right: auto;
    max-width: 1010px
}

#SiteBody {
    position: relative;
    margin-top: 100px;
    display: table;
    border-spacing: 3px 0;
    min-height: 80vh
}

@media(min-width:1024px) {
    [data-page="/Admin/JobTask/Summary"] {
        display: block;
        max-width: unset;
        margin: 0
    }

        [data-page="/Admin/JobTask/Summary"] .tiles.two-col {
            width: 100%;
            min-height: 50rem
        }

            [data-page="/Admin/JobTask/Summary"] .tiles.two-col .stage {
                width: calc(100% - 20rem);
                max-width: 100%
            }
}

.summary-tasks {
    display: flex;
    flex-wrap: wrap
}

    .summary-tasks > div {
        flex: 1 1 26vw;
        margin-left: .5rem
    }

#popSummary .summary-tasks {
    max-height: 80vh;
    overflow: auto
}

#popSummary .stage-icons {
    background: none;
    margin-left: 50px
}

@media(max-width:1023px) {
    .summary-tasks > div {
        flex: 1 1 100%;
        margin-left: 0;
        max-width: 100%
    }
}

.mobileMenuBtns i {
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    margin-left: 5px
}

.spiner i {
    transition: all cubic-bezier(.71,.04,.32,.95) .15s;
    visibility: visible;
    opacity: 1
}

    .spiner i[data-id=''] {
        visibility: hidden;
        opacity: 0
    }

.nav-icons {
    padding: 8px 15px;
    float: left
}

    .nav-icons i {
        margin-right: 10px;
        font-size: 1.7em;
        color: #fff
    }

#notifCnt[data-cnt] {
    visibility: visible;
    line-height: 18px;
    position: absolute;
    color: #fff;
    top: -2px;
    left: -2px;
    font-size: 10px;
    background: #d405e2;
    border-radius: 100%;
    text-align: center;
    font-weight: bold;
    width: 18px;
    height: 18px;
    cursor: pointer
}

#notifCnt[data-cnt='0'] {
    visibility: hidden
}

#notif {
    position: relative
}

.notif-pop {
    position: absolute;
    background: #fff;
    padding: 10px;
    width: 300px;
    left: 0;
    top: 2rem;
    z-index: 2;
    min-height: 110px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s linear
}

    .notif-pop:before {
        content: '';
        position: fixed;
        top: 0;
        height: 100%;
        left: 0;
        right: 0;
        background-color: transparent
    }

    .notif-pop.show {
        visibility: visible;
        opacity: 1
    }

    .notif-pop ul {
        max-height: 15rem;
        overflow: auto
    }

    .notif-pop .deleteItem {
        display: none
    }

.media[data-read] {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: .5rem;
    background: transparent;
    transition: background-color .5s
}

.media[data-read='False'] {
    background-color: rgba(5,173,226,.08)
}

.media > div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start
}

    .media > div .img {
        width: 3rem;
        height: 3rem;
        background-size: cover;
        background-position: center;
        vertical-align: middle;
        border-style: none;
        margin-left: .5rem;
        border-radius: 100%
    }

    .media > div .media-body {
        -ms-flex: 1;
        flex: 1;
        line-height: 1.5
    }

        .media > div .media-body b {
            font-size: 1.1em
        }

        .media > div .media-body div {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical
        }

.media .deleteItem {
    padding: 1rem;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s
}

.media:hover .deleteItem {
    visibility: visible;
    opacity: 1
}

.deleteItem.fa {
    font-size: 16px;
    cursor: pointer
}

    .deleteItem.fa:hover {
        color: #05ade2
    }

tr .deleteItem.fa {
    font-size: 1em
}

.admin #SiteBody {
    margin-top: 2rem;
    padding-bottom: 2rem
}

#SiteHeader {
    background: url("/images/BackHeader.png") repeat-x;
    height: 150px
}

.SiteHeaderClientLogo {
    background-color: #fff;
    max-height: 68px;
    padding: 7px 15px;
    float: left
}

    .SiteHeaderClientLogo.corn_3.shadow > img {
        height: 46px;
        margin: 0 auto;
        position: relative
    }

.client-zone .SiteHeaderClientLogo {
    margin-top: 10px
}

.AdminPicDiv {
    padding: 10px
}

#LoginHeader {
    background: url("/images/BackHeaderNotLoged.png") repeat-x;
    height: 127px
}

#SiteHeaderCenter {
    background: url("/images/Header.png");
    height: 130px;
    margin-left: auto;
    margin-right: auto
}

.admin #SiteHeaderCenter {
    background: none;
    padding: 0;
    height: 150px
}

.siteHeaderLogo {
    margin: 15px 0;
    float: right;
    background: url("/images/HMLogo.png") no-repeat;
    height: 56px;
    width: 237px;
    background-size: contain;
}

#SiteHeaderLogos {
    height: 87px
}

.siteHeaderUser {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid gray;
    padding: 10px;
    padding-bottom: 15px;
    height: 10px;
    background-color: #f5f5f5
}

#siteHeaderUser .details {
    float: left
}

#SiteFooter {
    background-repeat: repeat-x;
    height: 206px;
    margin-top: 100px
}

#SiteFooterCenter {
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    max-width: 1220px;
    padding-top: 50px
}

#FootCredit {
    margin-top: 28px
}

#HMCredit {
    float: right;
    font-size: .8em
}

.StgCredit {
    background-repeat: no-repeat;
    width: 200px;
    height: 36px;
    display: block;
    float: left
}

.SiteSideMenu {
    float: right;
    width: 206px;
    margin-left: 20px;
    background: url("/images/BackSideMenu.png") repeat-x scroll 0 0 #161817;
    padding: 5px
}

    .SiteSideMenu > ul > li {
        margin: 5px
    }

    .SiteSideMenu .fields {
        height: 400px;
        overflow: auto;
        margin: 5px
    }

    .SiteSideMenu .srchDiv {
        margin-top: 10px;
        border-top: 1px solid #fff;
        padding: 10px 5px
    }

    .SiteSideMenu .ClientTreeDiv .fieldlabel {
        display: none
    }

    .SiteSideMenu .ClientTreeDiv .fieldvalue {
        display: block
    }

.SideMenuLink a.selected {
    color: #05ade2;
    font-weight: bold
}

.sitesubcontent {
    background: #fff;
    padding: 20px 15px;
    position: relative;
    display: table-cell;
    vertical-align: top;
    width: 100%
}

#SiteBody > .sitesubcontent {
    margin: 0 10px
}

#tabs.sitesubcontent {
    overflow: visible;
    float: right;
    width: 500px;
    margin: 0
}

#siteHeaderUserInfos {
    float: right;
    padding-top: 12px;
    color: #fff
}

#siteHeaderUserLinks {
    float: left;
    margin-right: 5px;
    padding-top: 12px
}

.seperator {
    padding: 0 2px
}

.on-v-seperator:after {
    content: '';
    margin-right: 1rem;
    font-size: 1.4em;
    margin-left: .5rem;
    height: 100%;
    border-right: 1px solid #d0d0d0;
    color: #e8e8e8;
    font-weight: normal
}

#PartsDIv .inner {
    background: #fff;
    padding: 5px;
    margin-top: 10px
}

    #PartsDIv .inner li {
        padding: 5px
    }

#PartsDIv li.CheckZone {
    padding: 2px 5px;
    height: inherit;
    width: inherit;
    font-size: inherit;
    margin: 3px 5px;
    min-height: inherit;
    max-width: inherit;
    color: inherit
}

    #PartsDIv li.CheckZone.exist {
        border-color: #232323
    }

    #PartsDIv li.CheckZone label {
        width: inherit
    }

    #PartsDIv li.CheckZone input {
        display: none
    }

.PageContHeader {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between
}

.stage .PageContHeader h1 {
    margin: 0
}

.PageContHeader .clear {
    display: none
}

.HeaderActions {
    float: left;
    display: flex
}

    .HeaderActions input {
        margin-right: 10px
    }

    .HeaderActions a {
        line-height: 2rem
    }

div:not([data-selected]) > .any-selected {
    display: none
}

#PublishVbReport {
    width: 100%
}

.PageContSrchZone {
    margin-bottom: 10px;
    background-color: #ebeced;
    padding: 15px
}

.tiles {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    height: 60rem;
    overflow: auto;
    min-height: 80vh;
    align-content: center;
    max-height: calc(100vh - 6rem);
    width: 98vw;
    margin: 0 auto 1rem;
    box-sizing: border-box;
    align-items: center
}

    .tile[data-iscardcompleted=False].quote, .tile[data-isdone=False].shipping, .tiles[data-mainId='0'] .tile:not(.stage) {
        opacity: .5
    }

        .tile[data-iscardcompleted=False].quote .link-div, .tile[data-isdone=False].shipping .link-div, .tiles[data-mainId='0'] .attach-div, .tiles[data-mainId='0'] .link-div {
            display: none
        }

    .tiles .tile:not(.stage) {
        cursor: pointer;
        border-top: 3px solid #fff
    }

    .tiles .tile .scrolable {
        max-height: 30vh;
        overflow-y: auto;
        overflow-x: hidden
    }

    .tiles .tile.stage .scrolable {
        max-height: 75vh
    }

    .tiles .tile.no-overflow {
        overflow: visible;
        z-index: 99
    }

    .tiles .tile:not(.stage) .VbTabBlockInfo {
        padding: 2px;
        line-height: 1.5
    }

    .tiles .tile.full-height {
        max-height: inherit;
        overflow: visible
    }

        .tiles .tile.full-height .ForBtnDiv {
            padding: 0
        }

    .tiles .tile:not(.stage), .cards-in-date .index-card {
        transition: transform 200ms ease-out
    }

        .tiles .tile:not(.stage):not(.dont-scale):hover, .cards-in-date .index-card:hover {
            transform: scale(1.02);
            transition: transform 200ms ease-in
        }

.tile #StepsDiv .SiteSideMenu:hover, .tile #StepsDiv .SiteSideMenu:active {
    transform: scale(.98);
    transition: transform 200ms ease-in
}

.tiles .tile:not(.stage), .tiles .sitesubcontent {
    margin: 7px;
    box-shadow: 0 0 8px 0 rgba(148,148,148,.54)
}

.tiles .tile {
    background: #fff;
    padding: 15px;
    width: 15rem;
    min-height: 100px
}

.first-col {
    display: flex;
    flex-direction: column
}

.card-tab.job, .tiles .tile.job.stage h1 {
    background-color: hsl(194,100%,45%)
}

.tiles .tile.job {
    border-color: hsl(194,100%,45%)
}

    .tiles .tile.job a.tile-row:hover, .row-task:hover {
        background-color: hsl(194,100%,90%)
    }

.link-pop tr.job td:first-child {
    background-color: hsl(194,100%,85%)
}

.task-done .card-tab.job {
    border-color: rgba(0,128,0,.8);
    background: rgba(0,128,0,.8)
}

.index-card.quote .index-card-title {
    background-color: hsl(31,100%,90%);
    border-bottom: 1px solid hsl(31,100%,85%)
}

.tiles .tile.quote {
    border-color: hsl(31,100%,45%)
}

    .tiles .tile.quote a.tile-row:hover, .link-pop tr.quote td:first-child {
        background-color: hsl(31,100%,85%)
    }

    .tiles .tile.quote.stage h1, .card-tab.quote {
        background-color: hsl(31,100%,45%)
    }

.index-card.lead .index-card-title {
    background: hsl(52,100%,90%);
    border-bottom: 1px solid hsl(52,100%,50%)
}

.tiles .tile.lead {
    border-color: hsl(52,100%,90%)
}

    .tiles .tile.lead a.tile-row:hover, .link-pop tr.lead td:first-child {
        background-color: hsl(52,100%,85%)
    }

    .tiles .tile.lead.stage h1, .card-tab.lead {
        background-color: hsl(52,100%,45%)
    }

.card-tab.lead {
    color: initial
}

.index-card.shipping .index-card-title {
    background: hsl(265,100%,95%);
    border-bottom: 1px solid hsl(265,100%,90%)
}

.tiles .tile.shipping {
    border-color: hsl(265,100%,45%)
}

    .tiles .tile.shipping a.tile-row:hover, .link-pop tr.shipping td:first-child {
        background-color: hsl(265,100%,90%)
    }

    .tiles .tile.shipping.stage h1, .card-tab.shipping {
        background-color: hsl(265,100%,45%)
    }

.index-card.purchase .index-card-title {
    background: hsl(10,100%,95%);
    border-bottom: 1px solid hsl(10,100%,90%)
}

.tiles .tile.purchase {
    border-color: hsl(10,100%,45%)
}

    .tiles .tile.purchase a.tile-row:hover, .link-pop tr.purchase td:first-child {
        background-color: hsl(10,100%,90%)
    }

    .tiles .tile.purchase.stage h1, .card-tab.purchase {
        background-color: hsl(10,100%,45%)
    }

.index-card.requestQuote .index-card-title {
    background: hsl(10deg 100% 85%);
    border-bottom: 1px solid hsl(10,100%,80%)
}

.tiles .tile.requestQuote {
    border-color: hsl(10,100%,35%)
}

    .tiles .tile.requestQuote a.tile-row:hover, .link-pop tr.requestQuote td:first-child {
        background-color: hsl(10,100%,80%)
    }

    .tiles .tile.requestQuote.stage h1, .card-tab.requestQuote {
        background-color: hsl(10,100%,35%)
    }

.card-tab.order {
    background-color: hsl(120,100%,30%)
}

.tile-header .actions {
    position: absolute;
    left: 0;
    top: 0
}

    .tile-header .actions i {
        font-size: 18px
    }

.tile.job .actions {
    display: none
}

[data-page='/Admin/QuoteVersion/Update'] .tile.job .actions {
    display: block
}

.quote-pic-selector {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(245,245,245,.8);
    margin-right: 10px;
    box-sizing: border-box
}

    .quote-pic-selector.selected {
        background-color: rgba(0,241,68,.5)
    }

.phase3-logo {
    height: 1.5rem;
    position: absolute;
    top: 0;
    left: 0
}

.tile .talks-container {
    min-height: 100px
}

    .tile .talks-container .past {
        overflow: auto;
        max-height: 22vh
    }

    .tile .talks-container .buttondefault {
        min-width: 60px
    }

.tile .tile-rows {
    max-height: 32vh;
    overflow-y: auto;
    overflow-x: hidden
}

.tile-rows {
    margin-right: 5px;
    margin-bottom: 10px;
    color: #000;
    line-height: 1.3
}

    .tile-rows:last-child {
        margin-bottom: 0
    }

    .tile-rows.phase3 {
        font-size: 1.7em;
        font-weight: bold;
        color: #19457c;
        position: absolute;
        top: 0;
        left: 0;
        margin: 10px 15px
    }

    .tile-rows > label {
        color: gray
    }

.tiles .tile .tile-row {
    line-height: 1.5;
    display: block;
    padding: 0 3px;
    position: relative
}

    .tiles .tile .tile-row b {
        color: #05ade2
    }

.tile-row .delete, .tile-rows > ul li .delete {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    margin: 10px;
    z-index: 11;
    display: none;
    cursor: pointer
}

.tile-rows > ul li .delete {
    margin: 5px
}

.tile-rows > ul li button.delete {
    font-size: 1em
}

.tile-row .delete:hover, .tile-rows > ul li .delete:hover {
    color: #05ade2;
    transform: scale(1.1)
}

.tile-row .delete:active, .tile-rows > ul li .delete:active {
    transform: scale(.9)
}

.tile-row:hover .delete, .tile-rows > ul li:hover .delete {
    display: block
}

.tiles .tile.stage {
    width: 45rem;
    height: 100%;
    margin: 7px;
    padding: 0;
    background: none
}

    .tiles .tile.stage h1 {
        background-color: #333;
        display: inline-block;
        padding: 5px 10px;
        color: #fff;
        margin-right: -20px;
        font-size: 18px;
        border: 1px solid #fff
    }

.tiles .tile:not(.stage) h2 {
    background-color: gray;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(255,255,255,.5);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    margin-bottom: 5px;
    padding-top: 0
}

.tiles .tile.stage .sitesubcontent {
    min-width: 42.7rem;
    border-radius: 0
}

.PopContent .sitesubcontent {
    min-width: unset
}

.VbTabBlock .no-result, #search-equips .no-result, .tiles .no-result {
    text-align: center;
    margin: 20px 0;
    color: #d3d3d3
}

.tiles .attach-div .files .SideHeaderInfoLabel {
    margin-bottom: 8px
}

.tiles .SideHeaderInfoLabel:last-child {
    margin-bottom: 0
}

.tiles .link-div {
    margin-top: 20px
}

.tiles .attach-div {
    padding: 0
}

    .tiles .attach-div .SideHeaderInfoValue.b {
        display: none
    }

.tile-group {
    color: gray;
    margin-bottom: 5px;
    background-color: #f5f5f5;
    padding: 5px 10px
}

    .tile-group span {
        font-size: 1.1em
    }

    .tile-group:not(:first-child) {
        margin-top: 1rem
    }

.tile-rows > ul li {
    font-weight: bold;
    margin-right: 10px;
    position: relative
}

.tile-rows ul li .fa {
    margin-left: 5px;
    font-size: 1.2em
}

.two-col {
    width: 64rem
}

.one-col.tiles {
    width: 64rem
}

    .one-col.tiles .tile.stage {
        width: auto;
        box-sizing: border-box
    }

        .one-col.tiles .tile.stage .sitesubcontent {
            width: 100%;
            display: block;
            box-sizing: border-box
        }

@media only screen and (max-width:1600px) and (min-width:1024px) {
    .tiles:not(.two-col), .tiles:not(.one-col) {
        height: 200vh;
        max-height: unset
    }
}

@media only screen and (max-width:1325px) {
    .tiles .tile.frst, .tiles:not(.two-col) .tile.lst {
        order: 1
    }

    .tiles .tile.stage {
        order: 2
    }

    .tiles:not(.two-col) .tile .scrolable {
        max-height: 20vh
    }
}

@media(max-width:1023px) {
    .tiles:not(.two-col), .tiles {
        flex-direction: row;
        width: 100%;
        max-height: unset;
        height: auto;
        min-height: unset
    }

        .tiles .tile:not(.stage) {
            max-height: initial;
            overflow: visible;
            width: 100%
        }

            .tiles .tile:not(.stage).no-overflow {
                width: calc(100% - 44px)
            }

        .tiles .tile.frst:not(.alawys), .tiles .tile.lst {
            order: 2;
            width: 100%
        }

            .tiles .tile.lst[data-after] {
                order: 1
            }

        .tiles .tile.stage {
            order: 1;
            width: 100%
        }

            .tiles .tile.stage .sitesubcontent {
                display: block;
                box-sizing: border-box;
                margin: 0;
                min-width: unset
            }

        .tiles:not(.two-col) .tile .scrolable {
            max-height: 30vh
        }

    .mbl-order-1 {
        order: 1 !important
    }

    .mbl-order-2 {
        order: 2 !important
    }

    .mbl-order-3 {
        order: 3 !important
    }

    .mbl-order-4 {
        order: 4 !important
    }

    .mbl-order-5 {
        order: 5 !important
    }

    .mbl-order-6 {
        order: 6 !important
    }

    .mbl-order-7 {
        order: 7 !important
    }
}

@media only screen and (min-width:1600px) {
    #StepsDiv1 {
        max-height: 75vh
    }
}

.restore-div {
    background-color: #ffbcbf;
    padding: 1rem;
    font-weight: bold;
    font-size: larger;
    margin: 0 -15px;
    top: -20px
}

    .restore-div .restoreItem {
        float: left;
        color: #05ade2;
        display: inline-block;
        vertical-align: middle;
        font-size: 1.1em;
        cursor: pointer
    }

        .restore-div .restoreItem :hover {
            text-decoration: underline
        }

.equip-row {
    background-color: #e8e8e8;
    margin-bottom: 7px;
    display: block
}

    .equip-row:hover, .equip-row.selected {
        background: hsl(194,100%,80%) !important
    }

    .equip-row.current, #popPickEquips .equip-row.selected {
        background-color: #05ade2;
        color: #fff
    }

    .equip-row > div, .index-card-title .title-details > div {
        display: inline-block;
        vertical-align: middle;
        width: calc(100% - 6rem)
    }

        .equip-row .pic, .index-card-title .title-details > div.pic {
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            border-left: 1px solid #fff
        }

    .equip-row .pic {
        width: 100%;
        height: 4.5rem
    }

.tile .equip-row .pic, .index-card-title .title-details > div.pic {
    width: 4.5rem;
    height: 3.6rem
}

.tile .equip-row .details {
    width: calc(100% - 4.8rem);
    display: inline-block
}

.index-card-title .details {
    max-width: 200px
}

.equipParts {
    margin-top: 1rem;
    padding: .5rem 1rem;
    background: #ecf7fb
}

    .equipParts h3 {
        font-size: 1.1em;
        color: #000
    }

    .equipParts li {
        white-space: nowrap;
        margin: 5px 0 5px 1rem;
        width: 6rem
    }

    .equipParts :checked + span {
        font-weight: bold
    }

.equip-row.done .pic {
    border-color: #39c20b
}

.equip-row .details {
    padding: 3px 5px;
    display: block;
    box-sizing: border-box;
    line-height: 1.6;
    width: 100%
}

    .equip-row .details .tc {
        font-weight: bold
    }

    .equip-row .details .small {
        font-size: xx-small;
        font-weight: normal
    }

.tile-rows .equip-row {
    margin-right: 10px
}

.equip-wrapper .equip-title {
    display: flex
}

.tile-rows .equip-title > b {
    margin-left: 5px
}

#popPickEquips {
    width: 300px;
    min-height: 200px
}

    #popPickEquips .equip-row {
        cursor: pointer
    }

.SrchDiv {
    background-color: #fff;
    width: 300px;
    position: relative;
    height: 34px;
    padding: 1px;
    margin: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    behavior: url(../css/corns.htc);
    border: 1px solid #fff;
    -moz-box-shadow: inset 0 0 7px #d1d3d3;
    -webkit-box-shadow: inset 0 0 7px #d1d3d3;
    box-shadow: inset 0 0 7px #d1d3d3
}

    .SrchDiv #SrchBox {
        background-color: transparent;
        width: 230px;
        line-height: 20px;
        padding: 7px;
        margin: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        border: 0 none;
        -moz-box-shadow: inset 0 0 0 #d1d3d3;
        -webkit-box-shadow: inset 0 0 0 #d1d3d3;
        box-shadow: inset 0 0 0 #d1d3d3
    }

    .SrchDiv #SrchBtn {
        left: 3px;
        height: 30px;
        position: absolute;
        top: 3px;
        width: 50px
    }

.layer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .7;
    filter: alpha(opacity=70);
    background: #fff;
    z-index: 0
}

.dataform {
    background: #f5f5f5;
    width: 700px;
    padding: 10px;
    margin: 10px 0
}

.ForBtnDiv {
    padding: 10px 0
}

    .ForBtnDiv.task-btns.details-edit input {
        visibility: hidden
    }

    .ForBtnDiv.task-btns.details-edit:before {
        content: 'לשמירה לחץ מחוץ לתיבה';
        display: inline-block;
        text-align: center;
        border: 1px solid gray;
        padding: 10px;
        margin-right: 50%;
        border-radius: 3px;
        cursor: pointer;
        transform: translateX(50%)
    }

.group-content .ForBtnDiv {
    text-align: left;
    flex: 1 1 100%
}

.datarow {
    border-spacing: 7px 5px;
    padding: 0;
    width: 50%;
    display: table
}

    .datarow > div {
        vertical-align: middle
    }

    .datarow.double {
        width: 600px
    }

    .datarow.single {
        width: 100%
    }

    .datarow.Login {
        width: 100%
    }

    .datarow .plusBtn {
        margin-right: 0
    }

    .datarow.Title {
        border-bottom: 1px solid #fff
    }

    .datarow input.title {
        border: none;
        box-shadow: none;
        right: 0;
        color: #05ade2;
        font-weight: bold;
        width: 16rem;
        max-width: 90vw;
        background: none
    }

    .datarow .fieldlabel.title {
        position: absolute;
        top: 12px;
        right: -5px;
        width: initial !important
    }

.four-cols .formRow {
    width: 48%;
    display: inline-block;
    vertical-align: top
}

    .four-cols .formRow .datarow > div {
        vertical-align: top
    }

.datarow.Title label, .viewing.title {
    /*line-height: 2.5;*/
    color: #05ade2;
    font-weight: bold
}

.fieldlabel {
    width: 125px;
    display: table-cell;
    vertical-align: top;
    line-height: 1.5
}

.IsOk .fieldlabel {
    width: unset
}

.fieldvalue {
    display: table-cell;
    font-weight: bold
}

    .fieldvalue.double {
        width: 555px
    }

.group-content, .groups, #fieldList {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.group {
    flex: 1 1 100%
}

    .group + .group {
        margin-top: 1rem
    }

#fieldList .datarow {
    padding: 2px 5px;
    align-items: flex-end;
    box-sizing: border-box;
    flex: 0 1 calc(50% - 2px);
    margin: 0 1px;
    width: unset;
    display: inline-flex;
    margin-bottom: 10px;
    flex-wrap: wrap;
    position: relative;
    align-items: stretch;
    align-content: flex-end
}

    #fieldList .datarow.field > div {
        display: inline-block;
        flex: 1 1 100%
    }

.addfield span.select2-selection.select2-selection--single.field {
    background-color: #f2fcff;
    min-height: unset
}

#fieldList .datarow > i {
    display: none
}

#fieldList .datarow.IsOk {
    flex: 0 1 calc(25% - 2px)
}

#fieldList .datarow.Integer, #fieldList .datarow.Calc, #fieldList .datarow.Float {
    flex: 1 1 calc(25% - 2px);
    max-width: calc(50% - 2px)
}

#fieldList .datarow.CheckArea.IsOk {
    flex: 0 1 calc(25% - 2px);
    align-content: unset
}

#fieldList .datarow.Integer .fieldlabel, #fieldList .datarow.Calc .fieldlabel, #fieldList .datarow.Float .fieldlabel {
    white-space: nowrap
}

#fieldList .datarow.IsOk:not(.CheckArea) > .fieldlabel {
    flex: 1;
    padding-left: 5px
}

#fieldList .datarow .fieldlabel {
    margin-bottom: 5px
}

#fieldList .datarow.double {
    width: 600px;
    flex: 1 1 600px
}

#fieldList .datarow.single {
    flex: 1 1 100%
}

#fieldList .datarow.Login {
    flex: 1 1 100%
}

#fieldList .datarow.addfield {
    flex: 0 1 calc(25% - 4px)
}

#fieldList .datarow.CheckArea .fieldlabel {
    width: unset;
    display: none
}

#fieldList .CheckZone {
    width: unset;
    color: gray;
    float: none;
    height: 100%
}

#fieldList .datarow .CheckZone label, #fieldList .datarow .fieldlabel {
    width: 100%;
    display: inline-flex;
    vertical-align: middle;
    align-items: center
}

#fieldList .datarow .CheckZone label {
    margin-left: 3px
}

#fieldList .datarow .CheckZone label, #fieldList .datarow .fieldlabel label {
    height: 100%
}

@media(max-device-width:480px) {
    #fieldList .datarow {
        flex: 1 1 auto
    }

        #fieldList .datarow.IsOk.CheckArea, #fieldList .datarow.IsOk {
            flex: 1 1 100%
        }

        #fieldList .datarow.addfield {
            flex: 1 1 100%
        }

        #fieldList .datarow.Integer, #fieldList .datarow.Calc, #fieldList .datarow.Float {
            flex: 1 1 calc(50% - 2px);
            max-width: 100%
        }
}

#fieldList .datarow > div.actions {
    display: none
}

#fieldList .datarow.edit-field > div.actions, #fieldList.edit-fields .datarow > div.actions {
    display: block;
    position: absolute;
    top: -14px;
    border: 1px solid #01b0e6;
    background: #fff;
    left: 5px;
    visibility: hidden
}

#fieldList .datarow.edit-field > div.actions, #fieldList.edit-fields .datarow.edit-field > div.actions {
    visibility: visible;
    padding: 2px
}

#fieldList .datarow.edit-field.group > div.actions {
    top: .5rem;
    left: 3rem
}

#fieldList .datarow.edit-field > .actions i, #fieldList.edit-fields .datarow > .actions i {
    color: #05ade2;
    border-radius: 100%
}

#fieldList .datarow.edit-field > .actions .removeField, #fieldList.edit-fields .datarow > .actions .removeField {
    color: red
}

#fieldList .datarow.edit-field.field, #fieldList.edit-fields .datarow.field {
    box-shadow: 0 2px 5px 0 #bbb;
    background: #f5f5f5
}

    #fieldList.edit-fields .datarow.field.addfield {
        display: none
    }

#fieldList.edit-fields .edit-field .editField {
    display: none
}

#fieldList .datarow.Draw {
    justify-content: center
}

    #fieldList .datarow.Draw img {
        max-height: 40vh;
        max-width: 100%;
        border: 1px solid #cfcfcf;
        box-shadow: 0 0 0 1px white
    }

    #fieldList .datarow.Draw input {
        text-align: left;
        direction: ltr
    }

    #fieldList .datarow.Draw:not(.edit-field) input {
        display: none
    }

#fieldList button.addField {
    height: 3em
}

@media(max-device-width:480px) {
    #UpdateJobTaskForm .group input.title {
        font-size: 16px
    }
}

.has-groups {
    margin: -10px 0
}

#fieldList .group {
    padding: 0;
    margin: 0 -10px;
    border-radius: 3px
}

    #fieldList .group h3 {
        background-color: #e8e8e8;
        width: 100%;
        font-size: 1.2em;
        display: flex;
        align-items: center;
        border-top: 1px solid #fff;
        position: relative;
        border-bottom: 1px solid #cfcfcf;
        color: GrayText;
        padding: 8px 5px;
        border-radius: 3px
    }

        #fieldList .group h3.done {
            background-color: #e1eadd
        }

        #fieldList .group h3:before {
            content: '';
            margin-right: 5px;
            color: #d0d0d0;
            font-family: 'Font Awesome 5 Free'
        }

        #fieldList .group h3.done:before {
            content: '';
            color: inherit
        }

    #fieldList .group > h3 label {
        line-height: 2;
        height: 2em;
        margin-right: 5px;
        display: inline-block
    }

    #fieldList .group > h3 textarea, #fieldList .group > h3 input {
        border: none;
        width: 20rem;
        max-width: 71vw;
        color: inherit;
        line-height: 1;
        height: unset !important
    }

        #fieldList .group > h3 input:disabled {
            padding-right: 3px
        }

    #fieldList .group .group-content {
        border-top: 1px solid #fff;
        padding: 10px;
        min-height: 5em;
        background-color: #efefef;
        width: 100%
    }

    #fieldList .group.hide .group-content {
        display: none
    }

    #fieldList .group.need-check h3 {
        opacity: .5
    }

.stage-icons .fields-actions {
    display: flex;
    align-items: center
}

.stage-icons:not(.edit-fields-mode) .modeBtn.view, .stage-icons.edit-fields-mode .modeBtn.edit, .stage-icons:not(.edit-fields-mode) [class*=" on-"] {
    display: none
}

.fields-actions [disabled] {
    color: #d3d3d3;
    border-color: #efefef;
    cursor: unset
}

.toggleExpandAll {
    width: 1.35rem;
    margin-right: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 1.35rem;
    border: 1px solid #b5b5b5;
    background: #fafafb;
    border-radius: 3px;
    padding: 5px
}

    .toggleExpandAll > i {
        font-size: .9em
    }

#field-selector {
    display: flex
}

    #field-selector > div {
        margin-bottom: 1rem;
        flex: 1 1 100%;
        margin-left: .5rem
    }

        #field-selector > div:first-child {
            flex: 1 1 14rem
        }

    #field-selector .VbTabBlock ul li:not(.selected) {
        background: #fff
    }

    #field-selector .selected {
        background-color: #05ade2;
        color: #fff
    }

        #field-selector .selected label {
            color: #fff
        }

    #field-selector h4 {
        margin: .5rem 0
    }

    #field-selector ul {
        display: flex;
        flex-wrap: wrap;
        max-height: 11rem;
        overflow: auto
    }

        #field-selector ul li {
            border: 1px solid #d3d3d3
        }

        #field-selector ul.content li {
            padding: .5rem;
            flex: 0 1;
            margin: 2px;
            text-align: center;
            white-space: nowrap
        }

    #field-selector .selector ul li {
        padding: 2px 5px;
        align-items: flex-end;
        box-sizing: border-box;
        flex: 1 1 25%;
        min-width: 10rem;
        margin: 2px;
        width: unset;
        display: inline-flex;
        flex-wrap: wrap;
        position: relative;
        align-items: stretch;
        align-content: flex-end;
        border: 1px solid #d3d3d3;
        box-sizing: border-box;
        cursor: pointer;
        user-select: none
    }

    #field-selector ul li:not([data-id]) {
        border-color: #05ade2
    }

        #field-selector ul li:not([data-id]) input {
            margin: .5rem
        }

    #field-selector ul content {
        width: 100%;
        flex: 1 1 100%
    }

    #field-selector #addUnit {
        width: 50px
    }

    #field-selector ul li:not([data-id]) {
        padding: 0
    }

.selector .datarow .fieldlabel, .selector .datarow {
    width: 100%;
    display: block;
    border-spacing: 0
}

    .selector .datarow.field > div, .selector .datarow.field > div > input {
        width: 100%
    }

.selector .form-fieds > .types .datarow {
    margin: 0;
    width: unset;
    display: inline-flex;
    flex-wrap: wrap
}

.selector .datarow.field > div {
    display: block
}

.selector .CheckZone {
    float: none
}

.selector .group {
    margin: 0;
    margin-bottom: 10px
}

    #fieldPreview .group .group-content, .selector .group .group-content {
        display: none
    }

#select-pick > div {
    display: flex
}

#select-pick .form-fieds > div {
    display: block;
    margin-bottom: .5rem;
    padding: 0;
    width: 100%
}

    #select-pick .form-fieds > div > * {
        margin-bottom: 5px;
        display: block
    }

#fieldPreview .form-fieds > div {
    flex-wrap: wrap
}

    #fieldPreview .form-fieds > div > * {
        flex: 1 1 100%
    }

#fieldPreview .form-fieds > div {
    flex-grow: 0
}

@media(max-width:1024px) {
    #field-selector {
        flex-wrap: wrap
    }

        #fieldPreview .form-fieds > div, #select-pick .form-fieds > div, #field-selector > div:first-child {
            flex: 1 1 100%
        }
}

.linktextW a {
    color: #fff
}

.linktextHover:hover {
    color: #05ade2;
    text-decoration: underline;
    cursor: pointer
}

.linktextW:hover {
    text-decoration: none !important
}

.linktext, .linktext a {
    color: #05ade2
}

    .linktext:hover {
        text-decoration: underline;
        cursor: pointer
    }

.close-task {
    font-size: 1.4em;
    cursor: pointer
}

.form-fieds {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px
}

    .form-fieds > div {
        flex: 1 1 50%;
        display: inline-flex;
        align-items: center;
        padding: 5px;
        box-sizing: border-box
    }

        .form-fieds.single > div, .form-fieds h3, .form-fieds > div.single {
            flex: 1 1 100%
        }

        .form-fieds > div label {
            width: 125px
        }

        .form-fieds > div .contorl {
            flex: 1
        }

            .form-fieds > div .contorl .select2-container {
                width: 100% !important
            }

            .form-fieds > div .contorl > p {
                color: #adabab;
                margin-top: 5px;
                margin-bottom: 0
            }

    .form-fieds.single.col-1 > div {
        flex-wrap: wrap
    }

        .form-fieds.single.col-1 > div > * {
            flex: 1 1 100%
        }

        .form-fieds.single.col-1 > div > label {
            margin-bottom: 5px
        }

.VbTabBlockCont .form-fieds {
    padding: 1rem
}

.VbTabBlockCont > .form-fieds {
    margin: 0
}

.side-search .form-fieds {
    margin: 0;
    padding: 0
}

    .side-search .form-fieds > div {
        flex-wrap: wrap
    }

        .side-search .form-fieds > div label {
            flex: 1 1 100%;
            margin-bottom: 5px
        }

#UpdateJobTaskEmployeeForm label {
    display: none
}

#UpdateJobTaskEmployeeForm .ForBtnDiv {
    padding: 10px 1rem 20px;
    background-color: #e8e8e8;
    margin-top: -40px
}

    #UpdateJobTaskEmployeeForm .ForBtnDiv input {
        width: 100%;
        float: none
    }

.text_larger {
    font-size: larger
}

.text_small {
    font-size: .9em
}

.order-link {
    background: rgba(0,153,0,1);
    color: #fff;
    padding: 3px 5px
}

.refubrish-status {
    color: #000
}

.EditLink {
    margin-right: 5px;
    font-weight: normal !important
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis
}

.no-wrap {
    white-space: nowrap
}

.wrap {
    white-space: normal
}

.buttondefault {
    background: linear-gradient(0deg,#1ea4ce 0%,#48c8f1 100%);
    padding: .5em 1.5em;
    cursor: pointer;
    color: #fff
}

    .rect.red, button.red, .buttondefault.red {
        background: linear-gradient(0deg,#d21010 0%,#ff1717 100%);
        color: #fff
    }

    .buttondefault.green {
        background: linear-gradient(0deg,#29b703 0%,#57d51b 100%)
    }

    .buttondefault[disabled] {
        background: #d3d3d3 !important
    }

    .buttondefault.small {
        min-width: inherit;
        padding: 5px 10px
    }

    .buttondefault.full {
        width: 100%
    }

    .buttondefault:hover {
        color: #fff
    }

.ForBtnDiv .buttondefault.red {
    margin-left: 10px
}

.ForBtnDiv .buttondefault {
    font-size: 14px
}

.srchbutton {
    padding: 7px !important
}

.LitBtn {
    width: auto
}

.fieldvalue.btn {
    text-align: left
}

.plusBtn {
    background: repeat scroll -404px -48px transparent;
    cursor: pointer;
    height: 18px;
    margin-right: 10px;
    margin-top: 6px;
    width: 21px
}

.tranlating {
    font-weight: normal;
    color: #05ade2;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    margin: .5rem 10px
}

.hidden {
    visibility: hidden;
    width: 0;
    height: 0
}

.table-text {
    white-space: pre-wrap
}

tr.even.talk {
    height: auto;
    background: #eee;
    box-shadow: 0 2px 5px 0 #bbb;
    -moz-box-shadow: 0 2px 5px 0 #bbb;
    -webkit-box-shadow: 0 2px 5px 0 #bbb
}

tr.even.task {
    background: #eee
}

tr.task .task-time {
    color: #a5b8c1;
    float: left
}

tr.even.hasTalk {
    box-shadow: 0 -2px 5px 0 #bbb;
    -moz-box-shadow: 0 -2px 5px 0 #bbb;
    -webkit-box-shadow: 0 -2px 5px 0 #bbb
}

    tr.even.hasTalk td {
        border-bottom-width: 0
    }

tr.even.talk td {
    border-top-width: 0
}

tr.task-done {
    background-color: #c9ffc9 !important
}

.TableHeaderZone {
    background-color: #eaeaea;
    padding: 5px;
    border: 1px solid #fff
}

.TableHeaderZoneTitle {
    float: right;
    padding: 7px;
    font-size: 1.3em;
    font-weight: bold
}

.TableHeaderActions {
    float: left
}

.PageNum {
    float: right;
    width: 27px !important;
    text-align: center
}

.TableHeaderActionsText {
    float: right;
    padding: 10px
}

.NavigationBtn {
    float: right;
    margin-top: 4px;
    width: 25px;
    height: 29px;
    cursor: pointer;
    background: repeat scroll 1px 1px transparent
}

    .NavigationBtn.PrevBtn {
        background-position: -191px -4px !important
    }

    .NavigationBtn.NextBtn {
        background-position: -164px -4px !important
    }

.OuterSelect.SortBy {
    width: 200px;
    float: left;
    margin-right: 10px
}

.TableZone {
    margin: 15px 0
}

.MachineStsTableZone {
    margin: 15px -7px
}

.machine-index .td-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 40px
}

table {
    width: 100%;
    border-spacing: 0
}

    table.numberd {
        counter-reset: rowNumber
    }

        table.numberd tbody tr {
            counter-increment: rowNumber
        }

            table.numberd tbody tr td:first-child {
                text-align: center
            }

                table.numberd tbody tr td:first-child::before {
                    content: counter(rowNumber)
                }

.table-sticky {
    max-height: 60vh;
    overflow: auto
}

    .table-sticky table {
        position: relative
    }

        .table-sticky table th {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 1
        }

        .table-sticky table tfoot, .table-sticky table tfoot th, .table-sticky table tfoot td {
            position: -webkit-sticky;
            position: sticky;
            bottom: 0;
            z-index: 4;
            box-shadow: -2px 0 5px 2px #bbb
        }

tr, .openOptions:not(.child) {
    background-color: #e2e2e2;
    box-shadow: 0 0 5px 2px #bbb;
    -moz-box-shadow: 0 0 5px 2px #bbb;
    -webkit-box-shadow: 0 0 5px 2px #bbb
}

    .alter-rows tr:nth-child(odd), tr.even {
        background-color: #f3f3f3
    }

    .alter-rows tr, tr.even, tr.odd {
        height: 45px
    }

    tr.group {
        font-weight: bold;
        background: #d3d3d3
    }

    tr.space-tr, tr.space-tr td {
        height: 15px;
        background: none;
        border: none;
        box-shadow: none
    }

        tr.space-tr + tr {
            box-shadow: none
        }

    tr.part {
        height: 30px
    }

        tr.part > td {
            border: 0 none;
            padding-right: 20px;
            font-size: .9em
        }

    tr.RowDis td {
        color: #b6b8bc
    }

    tr.NotesTR td {
        border: 1px solid #fff;
        border-top: 1px solid transparent
    }

    tr.spacer {
        background: none;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none
    }

        tr.spacer td {
            border: none;
            padding: 1px;
            background: none
        }

    tr.options {
        height: auto;
        display: none
    }

        tr.options .formRow .datarow {
            border-spacing: 2px 5px
        }

        tr.options.actions {
            line-height: 2
        }

            tr.options.first .move-row, tr.options.actions.child .move-row.child, tr.options.actions:not(.child) .move-row.root {
                display: none
            }

    tr.openOptions.first .move-row.up, tr.openOptions.last .move-row.down, tr.openOptions.child .move-row.child, tr.openOptions.first .move-row.child, tr.openOptions:not(.child) .move-row.root {
        color: #979595;
        opacity: .3
    }

        tr.openOptions.first .move-row.up:hover, tr.openOptions.last .move-row.down:hover, tr.openOptions.child .move-row.child:hover, tr.openOptions.first .move-row.child:hover, tr.openOptions:not(.child) .move-row.root:hover {
            color: inherit;
            background: inherit
        }

    tr.openOptions {
        cursor: pointer
    }

        tr.openOptions.open, tr.options.open {
            background: #bee8f5
        }

    tr.open.equip {
        display: none
    }

    tr.openOptions .input, tr.openOptions.open .output {
        display: none
    }

    tr.openOptions.open .input, tr.openOptions .output {
        display: block
    }

    tr.openOptions.child td > div, tr.open.child td > div {
        margin-right: 20px
    }

    tr.openOptions.child .money {
        color: #d3d3d3
    }

    tr.openOptions:not(.open):hover .move-row-cont {
        display: block
    }

    tr.add {
        display: table-row
    }

    tr.today {
        background-color: #abdbea
    }

    tr.is-view .editable .view-mode, tr.is-edit .editable .edit-mode {
        display: block;
        width: 100%
    }

        tr.is-view .editable .view-mode .value:hover {
            background: #fff
        }

    tr.is-edit .editable .view-mode, tr.is-view .editable .edit-mode {
        display: none
    }

    tr.is-edit .deleteItem {
        display: none
    }

.gannt {
    width: auto
}

    .gannt.minTimeline .skip {
        display: none
    }

    .gannt [name="task.TaskName"], .gannt [name="TaskName"] {
        width: 13rem;
        padding: 5px;
        max-width: initial
    }

    .gannt [type="text"]:hover, .gannt [type="number"]:hover {
        cursor: pointer
    }

    .gannt [type="text"]:not(:active):not(:focus):not(:hover), .gannt [type="number"]:not(:active):not(:focus):not(:hover) {
        background-color: transparent;
        box-shadow: none;
        border-color: transparent
    }

    .gannt [data-isparent='true'] input, .gannt [data-isparent='true'] td {
        color: #000;
        font-weight: bold
    }

    .gannt h4 {
        font-size: 1.2em
    }

    .gannt .add-row [name="TaskName"] {
        margin-right: 16px
    }

    tr.gannt-row, .gannt tr.add-row, tr.gannt-je {
        background: #fff;
        box-shadow: none;
        height: 2rem
    }

        tr.gannt-row td, .gannt tr.add-row td, tr.gannt-je td {
            padding: 0 5px;
            border: 0 solid #f0f0f0;
            border-bottom-width: 1px
        }

        .gannt tr.add-row input {
            max-width: 10rem
        }

table.gannt {
    border-spacing: 0 !important
}

.wrap-tbody table {
    border-spacing: 0 !important
}

.times-wrap .wrap-tbody > tr > td {
    border: none
}

.times-wrap .gannt-row td.isIn {
    padding: 0
}

.times-wrap .gannt-row td[due] {
    background-color: #fff1f1
}

.gannt-row td.main {
    position: relative;
    white-space: nowrap;
    z-index: 0 !important
}

    .gannt-row td.main > div {
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline
    }

        .gannt-row td.main > div > div {
            flex: 1
        }

        .gannt-row td.main > div > i {
            margin-left: 3px
        }

            .gannt-row td.main > div > i.handle {
                margin-left: 5px
            }

    .gannt-row td .deleteItem, .add-row td i, .add-row td .addTask, .gannt-row td.main i:not(.done), .gannt-row td.main .i-actions {
        visibility: hidden
    }

    .gannt-row td.main .done {
        margin-left: 0
    }

.gannt-row:hover td.main .ctrls, .gannt-row:hover td.main .i-actions, .add-row:hover td i, .add-row:hover td .addTask {
    visibility: visible
}

.gannt-row td.main .helptext {
    font-weight: normal
}

.gannt-row[data-haschilds='False'].gannt-row td.main > div {
    padding-right: 10px
}

.gannt-row td.main .helptext {
    padding-right: 7px;
    margin-bottom: 7px
}

#taskDetails {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 18rem;
    min-height: 30rem;
    width: 31rem;
    max-width: 90vw;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #f5f5f5;
    box-shadow: 0 0 15px 12px rgba(0,0,0,.29);
    z-index: 10
}

    #taskDetails h2 {
        padding: 0
    }

    #taskDetails .tags {
        white-space: normal;
        max-height: 16vh;
        overflow: auto
    }

    #taskDetails h2 {
        flex: 1 1 100%
    }

@media(max-width:480px) {
    #taskDetails {
        top: 5rem;
        right: 50%;
        position: fixed;
        transform: translateX(50%)
    }

        #UpdateTransportForm .form-fieds > div, #taskDetails .form-fieds > div {
            flex-wrap: wrap;
            flex: 1 1 100%
        }

            #UpdateTransportForm .form-fieds > div label, #taskDetails .form-fieds > div label {
                width: 100%
            }
}

td.main .absIcons {
    position: absolute;
    left: -75px;
    padding-right: 3px;
    padding-left: 9px;
    top: 0;
    line-height: 2.5;
    bottom: 0;
    background: linear-gradient(90deg,#eaeaea,#fff);
    box-shadow: -2px 1px 1px 1px rgba(0,0,0,.14);
    display: none
}

td.main:hover .absIcons {
    display: block;
    visibility: visible
}

    td.main .absIcons:hover i, td.main:hover .absIcons i {
        visibility: visible
    }

tr.gannt-row .predcecessor {
    white-space: nowrap;
    margin: 0;
    padding: 0;
    height: unset;
    min-width: 6.7rem;
    color: #05ade2;
    width: 7vw;
    display: inline-block
}

.gannt-row td.openTask div, tr .predcecessor.helptext {
    color: #e5b5b5;
    background: #ff000012;
    padding: 2px;
    cursor: pointer
}

.times-wrap tr.gannt-row .isIn {
    position: relative
}

.times-wrap tr.gannt-row label {
    position: absolute;
    right: 0;
    white-space: nowrap;
    z-index: 1
}

.i-actions {
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: #faebd7;
    padding: 1rem
}

.openScdh {
    white-space: nowrap
}

.tags {
    line-height: 2;
    white-space: nowrap
}

.gannt-tag {
    display: inline-block;
    padding: 0 5px;
    line-height: 1.7;
    margin-left: 3px;
    font-size: .9em;
    border-radius: 3px;
    cursor: pointer;
    font-weight: normal
}

    .gannt-tag.emp {
        border: 1px solid #89c087
    }

.gannt-row .tags {
    overflow: auto;
    max-width: 15rem
}

.isLate.gannt-tag.emp, .isLate .gannt-tag.emp {
    border-color: red
}

.isDone.gannt-tag.emp, .isDone .gannt-tag.emp {
    background: #89c087;
    color: #000
}

.gannt-tag.material {
    background: hsl(265,100%,45%);
    opacity: .5;
    color: #fff;
    white-space: nowrap;
    margin-bottom: 7px
}

    .gannt-tag.material.inStock {
        opacity: 1
    }

.gannt-tag > div {
    margin: 0 -4px 0 5px;
    display: inline-block;
    padding: 0 3px;
    line-height: 1.7;
    background: #f1f1f1;
    color: gray;
    font-size: .9em;
    border-radius: 3px
}

.gannt-tag.material > div {
    color: #000;
    cursor: default
}

.isDone .gannt-tag > div {
    background: #fff;
    color: #000
}

.gannt-row.drop-hover .isIn > div {
    background: #05ade2 !important
}

[data-parent]:not([data-parent='']) td, .tasks [data-depth]:not([data-depth='0']) td {
    background: #fefdfe
}

.tasks [data-depth='1'] td:first-child {
    padding-right: 20px !important
}

.tasks [data-depth='2'] td:first-child {
    padding-right: 40px !important
}

.tasks [data-depth='3'] td:first-child {
    padding-right: 60px !important
}

.tasks [data-depth='4'] td:first-child {
    padding-right: 80px !important
}

.tasks [data-haschilds='False'] .toggle-expand {
    visibility: hidden !important
}

.row-action:hover {
    color: #05ade2;
    cursor: pointer
}

.tasks-wrap table, .times-wrap table {
    border-spacing: 1px;
    border-collapse: initial
}

.tasks-wrap {
    overflow-x: auto
}

.times-wrap {
    overflow-x: auto;
    overflow-y: visible
}

.gannt-row td i, .add-row td i {
    font-size: 14px !important;
    margin-right: 5px
}

.scroller {
    height: 74vh;
    overflow-y: auto;
    scroll-behavior: smooth
}

.tasks-wrap table table td:nth-child(1) {
    min-width: 17rem
}

.tasks-wrap table table td:nth-child(2) {
    min-width: 3rem;
    max-width: 3rem
}

.tasks-wrap table table td:nth-child(3), .tasks-wrap table table td:nth-child(4) {
    min-width: 90px;
    max-width: 90px
}

.tasks-wrap table table td:nth-child(5) {
    min-width: 110px
}

.wrap-tbody > tr > td {
    margin: 0;
    padding: 0
}

.wrap-tbody > tr {
    box-shadow: none
}

.gannt-row td.main:hover .move-row-cont {
    display: block;
    height: auto;
    top: 7px
}

    .gannt-row td.main:hover .move-row-cont .move-row {
        border: none
    }

.gannt-row[data-depth='0'] .move-row.root, tbody tbody > .gannt-row:nth-child(2) .move-row.child, [data-haschilds="True"] + .gannt-row .move-row.child {
    display: none
}

.gannt-row .isIn > div {
    background-color: #e8e8e8;
    margin: 0 0;
    padding: 3px 0;
    top: 4px;
    position: absolute;
    white-space: nowrap;
    color: #000;
    max-width: 6rem;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent
}

    .gannt-row .isIn > div.taskName {
        z-index: 1
    }

.gannt-row.has-inv {
    height: 3rem
}

    .gannt-row.has-inv .isIn > div, .gannt-je[data-isparent='true'] .isIn > div {
        background-color: #343634;
        height: 5px;
        margin-top: 7px;
        line-height: 2.5
    }

.gannt [data-isparent='true'] td.isIn > div {
    border: none;
    border-bottom: 5px solid #343634;
    background-color: transparent;
    border-radius: 0;
    text-align: right;
    top: 0
}

.gannt-row[data-isscdh='True'] .isIn > div {
    background-color: #fff;
    border-color: #89c087
}

.gannt-row[data-islate='True'] .isIn > div {
    border-color: red
}

.gannt-row[data-done='True'] .isIn > div {
    background-color: rgba(0,128,0,.5)
}

.times-wrap .gannt-row td, .times-wrap .gannt-je td {
    border-width: 0 0 1px 1px;
    min-width: 5rem
}

th.skip {
    padding: 0
}

th.skip, td.skip {
    min-width: 2rem !important;
    width: 2rem !important;
    padding: 0 !important;
    border-width: 0 0 1px 1px !important
}

th.weekend {
    color: gray
}

th.today {
    background: #05ade2;
    color: #fff
}

td.weekend {
    background: #fafafa !important
}

.gannt-row .isIn.weekend > div {
    background-image: radial-gradient(#bfbfbf 1px,#efefef 0) !important;
    background-size: 5px 5px
}

td .today {
    background: rgba(5,173,226,.1) !important
}

th.empty, td.empty {
    display: none
}

tbody.sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%
}

    tbody.sortable li {
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        height: 1.5em
    }

    html > body tbody.sortable li {
        height: 1.5em;
        line-height: 1.2em
    }

tbody .ui-state-highlight {
    height: 30px;
    background: rgba(0,176,230,.2)
}

.je-info {
    margin: 5px 0
}

    .je-info .je-pic {
        display: table-cell;
        vertical-align: top;
        width: 3rem;
        padding-left: 5px
    }

        .je-info .je-pic > div {
            border: 1px solid #fff;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 2.2rem
        }

    .je-info .tech-info {
        display: table-cell;
        padding-right: .5rem;
        vertical-align: middle
    }

        .je-info .tech-info > div {
            padding-left: 10px;
            border-left: 1px solid #c5c5c5;
            display: inline-block;
            white-space: nowrap;
            margin-bottom: 5px;
            margin-left: 10px
        }

            .je-info .tech-info > div:last-child {
                border: none
            }

        .je-info .tech-info .label {
            color: rgba(141,141,141,.88);
            font-size: .9em
        }

        .je-info .tech-info > div.main-tech {
            font-weight: bold;
            color: #000
        }

.je-tabs > div {
    display: none
}

    .je-tabs > div.selected {
        display: block
    }

    .je-tabs > div .actions {
        position: absolute;
        left: 0;
        top: 0;
        margin: 5px;
        z-index: 1
    }

.je-fields .field {
    cursor: pointer;
    border: 1px solid;
    margin-bottom: 5px;
    display: inline-block;
    padding: 5px 7px
}

    .je-fields .field:not(.added):hover {
        background-color: #05ade2;
        color: #fff
    }

    .je-fields .field.datarow {
        width: inherit
    }

        .je-fields .field.datarow > div {
            display: inline-block
        }

    .je-fields .field.added {
        color: #bbb
    }

    .je-fields .field.checkArea-label {
        background-color: transparent
    }

.quote-item-title {
    font-weight: bold;
    display: inline-block
}

    .quote-item-title > div {
        display: inline-block;
        vertical-align: middle
    }

        .quote-item-title > div .tc {
            padding-left: 5px
        }

.task [data-copy]:hover, .task .notes:hover {
    background-color: #05ade2 !important;
    color: #fff;
    cursor: pointer
}

.fa.toggle-expand {
    width: 9px;
    text-align: center;
    cursor: pointer;
    display: none
}

[data-isparent='true']:not([data-haschilds='False']) .fa.toggle-expand, .gannt-je .fa.toggle-expand {
    display: inline-block
}

.gannt-je .fa.toggle-expand {
    color: #05ade2;
    font-size: 1.2em;
    margin-left: 5px
}

.gannt-je a {
    display: inline-block
}

.summary.VbTabBlock {
    background-color: #e0f8ff
}

.permision {
    display: flex;
    flex-wrap: wrap
}

    .permision .VbTabBlock {
        flex: 1 1 48%;
        margin-left: 5px;
        margin-bottom: 5px
    }

.page-control {
    padding: 20px 10px 10px;
    text-align: center;
    font-size: larger
}

    .page-control > span:not(.total) {
        color: #05ade2;
        cursor: pointer;
        border-radius: 3px;
        text-align: center;
        padding: 0 4px;
        margin-left: 0
    }

    .page-control > span:not(.current):hover {
        background: #05ade2;
        color: #fff
    }

    .page-control span.current {
        font-weight: bold;
        color: inherit
    }

.move-row-cont {
    position: absolute;
    top: 0;
    left: 0;
    border-spacing: 3px 1px;
    height: 100%;
    display: none;
    background: #e2e2e2;
    opacity: .9
}

    .move-row-cont .move-row {
        padding: 0 2px;
        border: 1px solid;
        text-align: center;
        color: #05ade2;
        cursor: pointer
    }

        .move-row-cont .move-row:hover {
            background: url("/images/BackBtnBlack.png");
            text-decoration: none !important;
            color: #cccdd3
        }

        .move-row-cont .move-row.up {
            margin-bottom: 5px
        }

td {
    border: 1px solid #fff;
    border-right-width: 0
}

th, td {
    padding: 4px 10px;
    margin: 1px;
    text-align: right
}

    td[width='1px'], th[width='1px'] {
        text-align: center
    }

th, tfoot td {
    height: 35px;
    background: url("/images/BackTableHeader.png") repeat-x #1c1d1c;
    color: #05ade2;
    border: 1px solid transparent;
    cursor: pointer
}

tfoot tr.odd td {
    background: inherit
}

tfoot td {
    height: 25px
}

td.LastTd {
    border-left: 1px solid #fff
}

td.FirstTd {
    border-right: 1px solid #fff
}

td.Center {
    text-align: center;
    vertical-align: middle
}

.NotesTD {
    font-size: .9em;
    padding: 5px 10px !important
}

.TableFooterZone {
    background-color: #eaeaea;
    padding: 5px;
    border: 1px solid #fff
}

.SliceLine {
    height: 0;
    width: 100%;
    border-bottom: 1px solid #dadada
}

.ui-accordion .ui-accordion-header, .SideAccordion h4 {
    background: url("/images/MenuAccHeader.png") no-repeat;
    width: 196px;
    height: 26px;
    display: block;
    color: #cccdd3;
    font-weight: bold;
    cursor: pointer;
    padding-top: 8px;
    padding-right: 10px;
    position: relative
}

.ui-accordion .ui-accordion-noicons {
    padding-left: .7em
}

.ui-accordion .ui-accordion-icons .ui-accordion-icons {
    padding-left: 2.2em
}

.ui-state-hover {
    color: #05ade2 !important
}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -13px;
    background: repeat scroll transparent;
    width: 25px;
    height: 25px
}

.ui-icon-triangle-1-e {
    background-position: -62px -4px !important
}

.ui-icon-triangle-1-s {
    background-position: -95px -4px !important
}

.ui-accordion .ui-accordion-content {
    display: none;
    border-top: 0;
    overflow: auto;
    zoom: 1
}

.SiteSideMenu .ui-accordion-header-active {
    color: #05ade2 !important
}

.SideAccordion a {
    text-decoration: none;
    color: #cccdd3 !important
}

    .SideAccordion a:hover {
        color: #05ade2 !important
    }

    .SideAccordion a.current {
        color: #05ade2 !important;
        font-weight: bold
    }

.SideAccordion > div {
    display: none
}

.home-div {
    line-height: 2
}

.SideAccordion ul li {
    font-weight: normal;
    cursor: auto;
    color: #cccdd3 !important;
    margin: 5px;
    margin-right: 17px
}

.SideAccordion ul {
    list-style: none;
    padding: 5px 0
}

.PageContent div:not(.clear), #SettingsDiv ul {
    float: right;
    width: 108px;
    margin-left: 10px;
    padding: 10px
}

#SettingsDiv .plusBtn {
    display: none
}

.PageContent a {
    color: #05ade2 !important
}

.PageContent h4 {
    color: inherit
}

.PageContent ul li {
    margin-right: 0
}

.ui-tabs {
    padding: 0;
    position: relative;
    margin-right: 30px;
    background: none
}

    .ui-tabs .ui-tabs-nav {
        font-size: 1.2em;
        margin: 0;
        padding: 0;
        display: table;
        clear: both;
        line-height: 1.3;
        text-decoration: none
    }

        .ui-tabs .ui-tabs-nav li {
            background-color: #eaeaea;
            border-bottom: 0 none;
            float: right;
            margin-left: 4px;
            padding: 0;
            position: relative;
            top: 0;
            white-space: nowrap;
            list-style: none outside none
        }

            .ui-tabs .ui-tabs-nav li a {
                color: #616875;
                font-weight: bold;
                float: left;
                min-width: 105px;
                text-align: center;
                padding: 7px 17px;
                text-decoration: none;
                cursor: pointer
            }

    .ui-tabs li.ui-tabs-active {
        background-color: #f5f5f5
    }

        .ui-tabs li.ui-tabs-active a {
            color: #05ade2;
            cursor: text
        }

    .ui-tabs .ui-tabs-panel {
        width: 710px;
        background: none repeat scroll 0 0 #f5f5f5;
        border-width: 0;
        display: block;
        padding: 15px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        behavior: url(../css/corns.htc);
        -moz-border-radius-topright: 0;
        -webkit-border-top-right-radius: 0;
        border-top-right-radius: 0
    }

.plusBtn, .ui-datepicker-trigger, .header-icon, .SelectBtn, .caret, .StsIconSmall, .StsIconBig, .NavigationBtn, .ui-accordion.ui-accordion-header.ui-accordion-header-icon, .rec-icon, .SideHeaderIcon, .VbHtmIcon, .VbTabControllerIcon, .VBDetailsDateIcon, .PointValuesArrow, .PointValuesGraph, .marker, .VbhisSts, .spinner > .butn, .SiteSideMenu .icon, .bigIcon, .blckRectangle, .admin.mobileMenuBtns.icon {
    background-image: url("/images/Icons.png?v2") !important
}

.rec-icon {
    background: repeat scroll -1px -1px #fafafb;
    float: left;
    height: 32px;
    width: 32px;
    cursor: pointer;
    margin-right: 7px;
    border: 1px solid #b5b5b5;
    border-radius: 3px
}

    .rec-icon:hover, .stage-icons > .fa:hover, .rect:hover {
        border: 1px solid #05ade2;
        background-color: #bee8f5
    }

    .rec-icon:active, .stage-icons > .fa:active, .rect:active {
        transform: scale(.95,.95)
    }

    .rec-icon.PrintIcon {
        background-position: -376px -128px !important
    }

    .rec-icon.PreviewIcon {
        background-position: -376px -266px !important
    }

    .rec-icon.PdfIcon {
        background-position: -376px -238px !important
    }

    .rec-icon.ExcelIcon {
        background-position: -376px -292px !important
    }

    .rec-icon.EditIcon {
        background-position: -376px -75px !important
    }

    .rec-icon.EmailIcon {
        background-position: -376px -102px !important
    }

    .rec-icon.PopCloseButton, .rec-icon.close, .rec-icon#DeleteJobIcon {
        background-position: -376px -316px
    }

    .rec-icon.rotate.counter {
        background-position: -376px -182px !important
    }

    .rec-icon.rotate.clock {
        background-position: -376px -155px !important
    }

    .rec-icon.crop-icon {
        background-position: -376px -210px !important
    }

.stage-icons > .fa, i.rect, a.rect {
    color: #77777c;
    font-size: 18px;
    margin-right: 7px;
    line-height: 1;
    min-width: 1em;
    display: inline-block;
    height: 1em;
    text-align: center;
    border: 1px solid #b5b5b5;
    background: #fafafb;
    border-radius: 3px;
    padding: 7px;
    cursor: pointer
}

.HeaderActions a.rect {
    font-size: .9em
}

a.linktext .rect {
    background-color: #05ade2;
    color: #fff;
    border: none
}

#popStopJob {
    width: 20rem;
    min-height: 15rem
}

#popFailedJob {
    width: 20rem;
    min-height: 12rem
}

#stop-actions li {
    cursor: pointer;
    background: #eee;
    padding: 10px;
    margin-top: 5px;
    line-height: 1.5
}

    #stop-actions li:hover, #stop-actions li.selected {
        background-color: rgba(5,173,226,.1)
    }

.searchFields .icon.toggle {
    float: right;
    background: url(/images/Icons.png) repeat scroll -1px -1px transparent;
    margin-left: 5px;
    height: 30px;
    width: 30px;
    cursor: pointer
}

.searchFields[data-show="true"] .icon.toggle {
    background-position: -412px -292px !important
}

.searchFields[data-show="false"] .icon.toggle {
    background-position: -133px -3px !important
}

.searchFields[data-show="false"] .VbTabBlockInfo {
    display: none
}

.icon-small {
    background: url(/images/Icons.png) repeat scroll -1px -1px transparent;
    float: right;
    height: 21px;
    width: 21px;
    margin-left: 3px
}

    .icon-small.done {
        background-position: -381px -348px !important
    }

    .icon-small.PrintIcon {
        background-position: -382px -134px !important
    }

.pic-preview {
    width: 100%;
    height: 100%;
    z-index: 94;
    top: 0;
    left: 0;
    position: fixed;
    background-color: #000;
    z-index: 1;
    display: table;
    overflow: hidden;
    vertical-align: middle
}

    .pic-preview > div {
        display: table-row
    }

    .pic-preview .menu {
        height: 0
    }

    .pic-preview .img-container {
        height: 100%;
        vertical-align: middle;
        text-align: center
    }

        .pic-preview .img-container .img-container-inner {
            padding: 5px;
            height: 100%;
            vertical-align: middle;
            display: table-cell
        }

.img-container-inner i {
    font-size: 3.5rem;
    position: fixed;
    top: 46%;
    color: #828487;
    border-radius: 3px;
    background: #fafafb;
    box-shadow: 0 0 17px 1px rgba(0,0,0,.2);
    cursor: pointer;
    opacity: .85
}

    .img-container-inner i.next {
        right: 2rem;
        padding: 0 10px 0 17px
    }

    .img-container-inner i.prev {
        left: 2rem;
        padding: 0 17px 0 10px
    }

    .img-container-inner i:hover {
        background: #05ade2;
        color: #fff;
        opacity: 1
    }

@media only screen and (max-width:480px) {
    .img-container-inner i {
        font-size: 2.5rem
    }

        .img-container-inner i.next {
            right: 1rem;
            padding: 0 10px 0 12px
        }

        .img-container-inner i.prev {
            left: 1rem;
            padding: 0 12px 0 10px
        }
}

.pic-preview .menu .action {
    margin: 10px;
    margin-left: 0;
    float: right
}

    .pic-preview .menu .action.setDefult {
        width: 50px;
        padding: 2px 0;
        line-height: 1;
        text-align: center;
        font-size: 14px;
        border: 1px solid #fff;
        background-color: #fafafb;
        border-radius: 3px
    }

        .pic-preview .menu .action.setDefult:hover {
            background-color: #bee8f5;
            cursor: pointer;
            color: #000
        }

.pic-preview[data-def='true'] .menu .setDefult {
    display: none
}

.pic-preview .menu input {
    width: inherit !important;
    margin-right: 10px;
    margin-top: 12px !important;
    display: none
}

.pic-preview.crop-mode .menu {
    padding: 5px
}

    .pic-preview.crop-mode .menu input {
        display: inline-block
    }

    .pic-preview.crop-mode .menu .action {
        display: none
    }

.pic-preview .picZone {
    max-height: calc(100% - 153px);
    height: 100%;
    width: 100%;
    object-fit: contain
}

.pic-preview .CropBtns {
    padding: 10px;
    display: none
}

.pic-preview .jcrop-holder {
    margin-top: 50px
}

.pic-preview .CropBtns input {
    margin-right: 5px
}

#kwUnit .kwhp {
    display: inline-block;
    width: calc(50% - 3px);
    border-spacing: 0
}

    #kwUnit .kwhp .vals {
        width: 100% !important;
        padding-right: 10px
    }

#kwUnit.field-validation-error {
    margin-top: 0
}

.field-icon {
    margin: 0;
    margin-left: 7px;
    float: none;
    height: 30px;
    width: 30px;
    background-position: -347px -303px
}

    .field-icon.IsOk {
        background-position: -347px -134px !important
    }

    .field-icon.CheckArea {
        background-position: -347px -106px !important
    }

    .field-icon.Integer {
        background-position: -347px -162px !important
    }

    .field-icon.Float, .field-icon.KwHp {
        background-position: -347px -190px !important
    }

    .field-icon.Select {
        background-position: -347px -218px !important
    }

    .field-icon.SelectAndText {
        background-position: -346px -245px !important
    }

    .field-icon.Calc, .field-icon.Text {
        background-position: -347px -275px !important
    }

    .field-icon.TextArea {
        background-position: -347px -303px !important
    }

    .field-icon.Title {
        background-position: -347px -368px !important
    }

    .field-icon.Task {
        background-position: -377px -343px !important
    }

    .field-icon.add {
        background-position: -347px -338px !important;
        background-color: transparent;
        border: 1px solid #fff;
        margin-bottom: 2px;
        margin-top: 2px
    }

#kwUnit .tcMin {
    white-space: nowrap
}

#popPicPreview .PopCloseButton, #popImgmac-pic .PopCloseButton {
    position: fixed;
    top: 11px;
    left: 10px
}

.PopFrame.preview {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    box-sizing: border-box
}

#DeleteJobIcon {
    float: right
}

#LoginForm {
    background: url("/images/LoginBack.png") no-repeat;
    position: relative;
    width: 90%;
    max-width: 616px;
    height: 336px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto
}

#LoginFormHeader {
    padding: 12px 5px;
    text-align: center
}

#LoginForm.emp-login {
    background: #fff
}

    #LoginForm.emp-login #LoginFormHeader {
        padding: 5px
    }

#LoginFormContent {
    padding: 45px 25px;
    display: table
}

.SideHeaderIcon {
    background: repeat scroll -2px -155px transparent;
    height: 80px;
    margin: 0 auto;
    width: 95px
}

.SideHeaderTitle {
    background: url("/images/MenuAccHeader.png") no-repeat scroll 0 0 transparent;
    color: #cccdd3;
    display: block;
    font-weight: bold;
    line-height: 36px;
    position: relative;
    width: 206px;
    text-align: center;
    color: #50d3ff
}

.SideHeaderInfos {
    padding: 10px
}

.SideHeaderInfoLabel {
    color: #50d3ff;
    line-height: 1.1;
    margin-bottom: 8px
}

    .SideHeaderInfoLabel [data-id=DateCombo] {
        display: inline-block;
        width: 130px
    }

.SideHeaderInfoValue {
    color: #cccdd3
}

    .SideHeaderInfoValue.linktext {
        text-decoration: underline
    }

.attach-div {
    padding: 0 10px
}

    .attach-div .SideHeaderInfoLabel {
        padding: 8px;
        margin-top: 5px;
        background-color: #f5f5f5
    }

        .attach-div .SideHeaderInfoLabel a {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            max-width: 90%
        }

        .attach-div .SideHeaderInfoLabel .delAttach {
            float: left;
            cursor: pointer;
            margin: 0 2px;
            color: #000
        }

    .attach-div.single {
        display: flex;
        align-items: center;
        padding: 0;
        font-weight: normal
    }

        .attach-div.single > .SideHeaderInfoValue.b {
            display: none
        }

        .attach-div.single.has-files .extra-upload {
            display: none
        }

.SideHeaderBack {
    text-align: left;
    padding-top: 10px
}

.SiteSideMenu .absIcons {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10
}

#FootHm {
    font-size: 1.3em;
    font-weight: bold;
    color: #cccdd3
}

#FootHmSub {
    font-size: 1.1em;
    font-weight: bold;
    color: #888995
}

.VBReportMikraZone {
    background: url("/images/StsLegendBack.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 80px;
    position: relative;
    width: 724px
}

.VBReportMikraTitle {
    float: right;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 40px;
    margin: 0 20px
}

.VBReportMikraStsDiv {
    display: table;
    float: right;
    height: 40px;
    position: relative;
    margin-left: 1px;
    cursor: pointer
}

.VBReportMikraIcon {
    margin-top: -5px;
    float: right;
    background: url("/images/Icons.png?v2") repeat scroll -1px -87px transparent;
    height: 53px;
    width: 53px;
    margin-right: 2px
}

.IconBig-4 {
    background-position: -206px -87px !important
}

.IconBig-3 {
    background-position: -137px -87px !important
}

.IconBig-2 {
    background-position: -72px -87px !important
}

.IconBig-1 {
    background-position: -5px -87px !important
}

.IconBig-5 {
    background-position: -271px -87px !important
}

.VBReportMikraStatus {
    float: right;
    width: 57px;
    padding-top: 8px;
    font-size: .9em
}

.VBReportStsIcon {
    float: left;
    background: url("/images/Icons.png?v2") repeat scroll -1px -1px transparent;
    height: 33px;
    width: 33px
}

.vb-icon {
    height: 1em;
    width: 1em;
    margin-right: 5px;
    display: inline-block;
    border-radius: 100%
}

.IconSmall-4 {
    background-position: -124px -41px !important
}

.vb-icon-4 {
    background-color: #5deb21
}

.IconSmall-3 {
    background-position: -85px -41px !important
}

.vb-icon-3 {
    background-color: #358e10
}

.IconSmall-2 {
    background-position: -46px -41px !important
}

.vb-icon-2 {
    background-color: #e5dc00
}

.IconSmall-1 {
    background-position: -5px -41px !important
}

.vb-icon-1 {
    background-color: #e82d2e
}

.IconSmall-5, .IconSmall-6 {
    background-position: -165px -39px !important
}

.vb-icon-5, .vb-icon-6 {
    background-color: #d2d2d2
}

td.TdIcon {
    line-height: 30px;
    padding: 5px 10px 5px 5px
}

.vb-icon- {
    background-color: #d3d3d3
}

.openTemplateBtn {
    left: 0;
    margin: 10px;
    position: absolute;
    z-index: 10000
}

#VbHtmInfo {
    padding: 10px;
    background-color: #e3e3e3;
    margin-bottom: 15px
}

#VbHtmInfoFirst {
    float: right;
    width: 88px
}

.VbHtmIcon {
    background: repeat scroll -110px -165px transparent;
    height: 60px;
    margin: 0 auto;
    width: 60px
}

.VbHtmTitle {
    color: #05ade2;
    font-size: 1.5em
}

#VbHtmInfoLast {
    overflow: hidden;
    display: block
}

#VbHtmInfoList .SideHeaderInfoLabel {
    margin-left: 10px
}

.VbHtmInfoListCol {
    float: right;
    width: 200px
}

.VBHtmMikraZone {
    background-color: #fff;
    border: 1px solid #d1d3d3
}

.MacCardDiv {
    background: url("/images/Card_rtl.png") no-repeat;
    width: 362px;
    height: 203px;
    padding: 0;
    margin: 0;
    float: right
}

.MacCardDivInner {
    padding-left: 11px;
    padding-right: 17px;
    padding-top: 15px
}

.MacCardHeader {
    line-height: 30px;
    margin-bottom: 5px;
    position: relative
}

.odd {
    margin-left: 0
}

.MacCardTitle {
    font-size: 1.3em !important;
    float: right
}

.MacCardStsBump {
    position: absolute;
    left: -7px;
    top: -7px;
    background: url("/images/MacCardStsBump.png") no-repeat;
    width: 65px;
    height: 71px
}

.MacCardPic {
    float: right;
    min-height: 100px;
    margin-left: 7px
}

.MacCardInfo {
    float: right;
    width: 172px
}

.MacCardInfoLabel {
    font-weight: bold
}

.AbsStsIcon {
    left: 7px;
    position: absolute;
    top: -1px
}

.SiteSideMenu.MacPage {
    padding: 20px 20px 10px 20px;
    width: 176px
}

.VBMacPage #StepsMenu {
    width: 372px;
    margin-left: 22px
}

    .VBMacPage #StepsMenu > div {
        width: inherit
    }

    .VBMacPage #StepsMenu > .SiteSideMenu {
        box-sizing: border-box
    }

.VBMacPage .SiteSideMenu {
    padding: 15px;
    margin-left: 20px
}

.VBMacPage .MachineImg.Schema {
    background: none;
    margin: 0;
    margin-bottom: 10px;
    float: none
}

.VBMacPage .sitesubcontent {
    width: 566px
}

.VBMacPage #StepsDiv .SiteSideMenu {
    background: url("/images/BackSideMenu.png") repeat-x scroll 0 0 #161817;
    padding: 4px 5px;
    line-height: 17px;
    color: #fff;
    box-sizing: border-box;
    width: inherit
}

.MachinePageSideInfo {
    line-height: 24px;
    padding: 10px 0
}

.MachinePageSideTitle {
    font-size: 1.3em;
    text-decoration: underline;
    color: #05ade2;
    margin-top: 10px;
    font-family: Magistral-Light;
    font-weight: normal;
    font-style: normal
}

#partList {
    max-height: 190px;
    overflow: auto
}

.returning .off {
    display: none
}

.returning.show .on {
    display: none
}

.returning.show .off {
    display: table
}

.MachineImg {
    background: #fff;
    border: 1px #d7dfe6 solid;
    margin-left: 5px;
    padding: 1px
}

    .MachineImg img {
        width: 100%;
        height: 100%;
        display: inherit
    }

    .MachineImg.s1 {
        width: 166px
    }

    .MachineImg.s2 {
        width: 100px
    }

    .MachineImg.Side {
        background: #303332;
        margin: 0
    }

    .MachineImg.CurSts {
        width: 150px;
        margin: 0
    }

    .MachineImg.Schema {
        width: 338px;
        margin: 10px;
        float: right
    }

    .MachineImg .img {
        height: 100px;
        background-position: center;
        background-size: cover
    }

.ImportStep {
    padding: 20px 15px;
    background: none repeat scroll 0 0 #fff;
    margin-bottom: 20px
}

.extra-upload {
    display: inline-block
}

    .extra-upload input {
        width: 100%;
        display: inline-block;
        font-size: 1em !important
    }

.progress-div .qq-upload-list {
    position: relative !important
}

    .progress-div .qq-upload-list li {
        padding: 0 2px
    }



p {
    margin-bottom: 10px
}

.ImportBtnRow {
    margin: 15px 0;
    background-color: #ebeced;
    padding: 15px
}

    .ImportBtnRow select {
        width: 300px;
        float: right;
        margin: 0 10px
    }

    .ImportBtnRow p {
        font-weight: bold
    }

.ImportItemDiv {
    color: #fff;
    font-weight: bold;
    float: right;
    padding: 7px;
    margin-left: 5px;
    margin-bottom: 5px;
    border: 1px solid gray;
    cursor: pointer
}

    .ImportItemDiv.in {
        background: url("/images/BackBtnGreen.png") repeat scroll 0 0 rgba(0,0,0,0)
    }

    .ImportItemDiv.out {
        background: url("/images/BackBtnRed.png") repeat scroll 0 0 rgba(0,0,0,0)
    }

.ItemsDiv {
    max-height: 150px;
    overflow: auto
}

.OrDiv {
    font-size: 14px;
    font-weight: bold;
    margin: 15px 70px;
    float: right
}

.importsubcontent {
    position: relative;
    width: 100%;
    max-width: 1023px;
    overflow: auto
}

.VbTab {
    position: relative
}

.VbTabController {
    position: absolute;
    right: -155px;
    top: 255px;
    width: 165px
}

    .VbTabController .Tab {
        right: 0;
        left: 0;
        min-height: 37px;
        line-height: 37px;
        background: url("/images/MavVBNavMenuBack.png") no-repeat #232323;
        padding-left: 20px;
        margin-bottom: 1px;
        clear: both;
        cursor: pointer
    }

        .VbTabController .Tab.Selected {
            right: -8px;
            left: -8px
        }

        .VbTabController .Tab a {
            color: #fff;
            font-weight: bold;
            margin: 0 3px
        }

        .VbTabController .Tab.Selected a {
            color: #05ade2
        }

.VbTabControllerIcon {
    height: 30px;
    width: 30px;
    margin: 3px;
    background: repeat scroll -1px -1px transparent;
    float: right
}

    .VbTabControllerIcon.MacDetails {
        background-position: -6px -362px !important
    }

    .VbTabControllerIcon.MacPoints {
        background-position: -43px -362px !important
    }

    .VbTabControllerIcon.PointVal {
        background-position: -82px -362px !important
    }

.Tab.Selected .VbTabControllerIcon.MacDetails {
    background-position: -6px -398px !important
}

.Tab.Selected .VbTabControllerIcon.MacPoints {
    background-position: -43px -398px !important
}

.Tab.Selected .VbTabControllerIcon.PointVal {
    background-position: -82px -398px !important
}

.VbTabOutter {
    padding: 10px;
    background-color: #161818;
    padding-bottom: 5px;
    position: relative
}

.VbTabInner {
    padding-left: 10px;
    overflow: auto;
    display: block;
    position: relative
}

.checkArea-label {
    display: inline-block;
    padding: 5px 7px;
    background: #e2f3f8;
    border: 1px solid #e2f3f8;
    margin-left: 5px;
    margin-bottom: 5px
}

    .checkArea-label.zero {
        background: none;
        border: 1px solid #e2f3f8
    }

    .checkArea-label span {
        display: inline-block
    }

.isok {
    color: red
}

    .isok.class {
        color: green
    }

.checkpoint {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0
}

#fieldList .Checkpoint.datarow {
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 1rem
}

    #fieldList .Checkpoint.datarow > div {
        flex: 1 1
    }

        #fieldList .Checkpoint.datarow > div.fieldvalue {
            text-align: left
        }

.flex-container {
    column-count: 3
}

.VbTabBlock {
    background-color: #e8e8e8;
    margin-bottom: 10px
}

    .VbTabBlock.floated {
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        margin: 5px
    }

        .VbTabBlock.floated .datarow {
            float: none
        }

            .VbTabBlock.floated .datarow.notes {
                background-color: #fff;
                width: 100% !important;
                margin-top: 10px;
                padding: 7px 5px;
                box-sizing: border-box
            }

.VbTabBlockInfo {
    padding: 10px
}

.flex-container > a {
    border: 1px solid #e8e8e8
}

    .flex-container > a:hover {
        border-color: #05ade2
    }

.flex-container .VbTabBlock.floated .datarow {
    width: inherit
}

@media only screen and (min-width:480px) {
    .flex-container {
        column-count: 1
    }
}

@media only screen and (min-width:700px) {
    .flex-container {
        column-count: 2
    }
}

@media only screen and (min-width:1023px) {
    .side-search:not(.centerd) {
        padding: 0 5px
    }

    .side-search .SiteWidth.alawys {
        width: 250px;
        vertical-align: top;
        display: inline-block
    }

    .side-search:not(.centerd) .SiteWidth.alawys {
        margin: 0 20px;
        border: 5px solid #fff
    }

    .side-search .SiteWidth.alawys .VbTabBlock {
        margin: 0
    }

    .side-search:not(.centerd) .PageContHeader {
        margin: 0 20px 15px
    }

    .side-search .index-table {
        width: calc(100% - 250px - 54px);
        display: inline-block
    }

    .side-search.centerd .index-table {
        width: calc(100% - 250px - 14px);
        margin-right: 10px
    }

    .side-search .datarow.floatfirst:not(.half) {
        float: none;
        width: 100%
    }

    .side-search .half .fieldlabel {
        white-space: nowrap
    }

    .side-search .datarow .fieldlabel {
        display: block;
        width: inherit;
        margin-bottom: 5px
    }

    .side-search .datarow .fieldvalue {
        display: block;
        width: inherit
    }

    .side-search .icon.toggle {
        display: none
    }
}

.VbTabBlockHeader, #parts.VbTabBlock_acc h4 {
    padding: 10px;
    border-bottom: 1px solid #cfcfcf;
    clear: both;
    line-height: 2
}

#parts.VbTabBlock_acc h4 {
    background: #e8e8e8;
    color: inherit;
    width: inherit;
    height: inherit;
    margin-top: 10px;
    padding: 10px;
    font-size: 1.2em;
    border: none
}

    #parts.VbTabBlock_acc h4[aria-selected=true], #parts.VbTabBlock_acc h4[aria-selected=false]:hover {
        background-color: #cfcfcf
    }

#parts.VbTabBlock_acc .ui-accordion-header-icon {
    margin-top: -13px;
    left: 10px;
    background-position: -414px -262px !important
}

    #parts.VbTabBlock_acc .ui-accordion-header-icon.ui-icon-triangle-1-e {
        background-position: -135px -4px !important
    }

#parts.VbTabBlock_acc > div > .VbTabBlockInfo {
    background: #e8e8e8;
    border: 1px solid #cfcfcf;
    border-top-width: 0
}

#parts.VbTabBlock_acc .VbTabBlockInfo .VbTabBlock {
    margin: 0
}

    #parts.VbTabBlock_acc .VbTabBlockInfo .VbTabBlock .VbTabBlockHeader {
        border: none;
        padding: 5px 0
    }

#parts.VbTabBlock_acc .VbTabBlockInfo .VbTabBlockInfo {
    padding: 0
}

#parts.VbTabBlock_acc .VbTabBlockInfo .WhiteSep {
    display: none
}

#parts.VbTabBlock_acc .BlockHeaderTitle {
    font-size: inherit;
    background: #cfcfcf;
    display: block;
    padding-right: 5px;
    margin-right: 0
}

#parts.VbTabBlock_acc .sub-group-title {
    font-size: inherit;
    background: none
}

.sub-group {
    margin-bottom: 10px
}

.sub-group-title {
    padding: 5px;
    margin-bottom: 5px;
    background: #cfcfcf;
    font-size: larger;
    font-weight: bold
}

.sub-group .sub-group {
    margin-right: 10px
}

.edit-mode #fieldList .datarow:not(.selected):not(.group):hover, #fieldList .group h3:hover, #fieldList .BlockHeaderTitle:hover, #fieldList .sub-group-title:hover {
    background-color: #e0eff6;
    cursor: pointer
}

#fieldList span {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.datarow.selected, .group.selected h3, .VbTabBlock.selected, .sub-group.selected, .sub-group.selected .sub-group-title, .VbTabBlock.selected .sub-group-title {
    background-color: #b0dbee !important
}

.group.selected .group-content {
    background-color: #ddeef5 !important
}

.group.selected .field {
    background-color: #dcf0f9 !important
}

.addFieldDiv {
    border-top: 1px solid #fff;
    padding-top: 15px;
    margin-top: 15px
}

    .addFieldDiv .autocomplete {
        width: 50%
    }

        .addFieldDiv .autocomplete.filterBox li {
            padding: 3px 7px
        }

            .addFieldDiv .autocomplete.filterBox li.empty.add {
                margin: 1px 0;
                border-radius: 0
            }

.BlockHeaderIcon.MacDetails {
    background-position: -6px -328px !important
}

.BlockHeaderIcon.MacPoints {
    background-position: -45px -328px !important
}

.BlockHeaderIcon.PointVal {
    background-position: -83px -328px !important
}

.BlockHeaderTitle {
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 27px
}

    .BlockHeaderTitle + .fl {
        display: flex
    }

.WhiteSep {
    height: 1px;
    background-color: #fff
}

.VbTabBlockCont {
    padding: 0
}

    .VbTabBlockCont .row {
        padding: 10px;
        line-height: 15px
    }

    .VbTabBlockCont .history {
        border-left: 1px solid #dadada;
        max-height: 180px;
        overflow: auto
    }

        .VbTabBlockCont .history > * {
            margin-bottom: .5rem !important;
            line-height: 1.5
        }

.VBDetails {
    float: right;
    width: 280px;
    margin: 10px
}

.VBDetailsDateDiv {
    margin-bottom: 15px
}

.VBDetailsDateIcon {
    background: repeat scroll -315px -5px transparent;
    float: right;
    height: 25px;
    width: 25px;
    margin-right: 2px;
    margin-top: 4px
}

.VBDetailsDateInput {
    float: right
}

.VBDetailsShowReport {
    padding-right: 10px
}

.VBGenralNotesDiv {
    margin-bottom: 15px
}

.VBClientNotesDiv {
    margin-bottom: 10px
}

.VbTabDarkDiv {
    background-color: #d7d7d7;
    color: #606470
}

.OuterSelect.DateCombo {
    width: 200px;
    margin-right: 10px
}

.MacPointsFirst {
    float: right;
    width: 305px;
    margin: 0;
    padding-top: 10px
}

.MacPointsDrop {
    position: relative;
    padding: 0 10px;
    margin-left: 35px
}

.MacPointsScrollOuutter {
    padding-left: 10px
}

.MacPointsScroolInner {
    max-height: 235px;
    overflow: auto;
    padding-top: 10px;
    padding-left: 12px;
    padding-right: 15px;
    padding-bottom: 4px
}

.MacPointsPointListDiv {
    margin-bottom: 3px;
    padding: 4px 6px;
    cursor: pointer;
    background: #f3f3f3
}

.PointListFirst {
    float: right;
    padding: 4px
}

.PointListMid {
    float: left;
    width: 100px
}

.MacPointsLast {
    float: right;
    margin: 0;
    padding: 10px 15px;
    min-height: 245px;
    width: 328px
}

.PointDetails {
    position: relative;
    margin-bottom: 10px
}

.PointPic {
    float: right
}

.BorderImg.Point {
    width: 164px;
    border-color: #cbcbcb
}

    .BorderImg.Point img {
        width: 162px;
        height: 114px;
        margin-top: 1px;
        margin-right: 1px;
        margin-bottom: -2px;
        margin-left: 0
    }

.PointInfo {
    float: right;
    margin-right: 5px;
    font-size: .9em;
    width: 47%
}

.PointInfoRow {
    margin-bottom: 5px
}

.PointValuesScroll {
    max-height: 190px;
    overflow: auto;
    padding-left: 10px
}

.PointValueRow {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #cfcfcf;
    margin: 0;
    padding: 4px;
    font-size: .9em;
    cursor: pointer
}

.PointValuesName {
    font-weight: bold;
    font-size: 1.1em
}

.PointValSep {
    border-top: 1px solid #cfcfcf
}

.PointValueRow .StsIconSmall {
    margin-top: 2px
}

.PointValuesArrow {
    height: 30px;
    width: 30px;
    margin: 3px;
    background: repeat scroll -1px -362px transparent;
    float: right
}

    .PointValuesArrow.Horizontal {
        background-position: -149px -363px !important
    }

    .PointValuesArrow.Vertical {
        background-position: -118px -363px !important
    }

    .PointValuesArrow.Axial {
        background-position: -184px -363px !important
    }

.PointValuesInfo {
    float: right;
    margin: 3px 5px 0
}

.PointValuesGraph {
    background: repeat scroll -230px -367px transparent;
    float: left;
    height: 20px;
    margin: 8px 20px;
    width: 20px
}

.PointValueRow:hover .PointValuesGraph, .PointValueRow.Selected .PointValuesGraph {
    background-position: -230px -331px !important
}

.PointValuesStatus {
    float: left;
    width: 40px
}

.PointValFirst {
    float: right;
    width: 180px;
    padding-left: 20px;
    min-height: 300px
}

.PointChecks {
    padding: 10px
}

.GraphNavigator {
    padding: 2px 0
}

    .GraphNavigator input {
        padding: 2px 0
    }

.PointValDates {
    padding: 10px
}

.PointValLast {
    float: left;
    padding: 10px;
    width: 440px
}

#SpectrumDiv {
    margin-top: 30px
}

.BorderImg.Spectrum {
    width: 172px;
    height: auto;
    margin-left: 0;
    cursor: pointer
}

    .BorderImg.Spectrum img {
        width: 170px;
        height: auto;
        margin-top: 1px;
        margin-right: 1px;
        margin-bottom: -2px;
        margin-left: 0
    }

.legend > table {
    width: auto
}

.legend tr {
    background: none repeat scroll 0 0 transparent;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none
}

.legend td {
    border: medium none;
    padding: 2px
}

.marker {
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    color: #010101;
    background: repeat scroll -1px -1px transparent;
    height: 23px;
    width: 25px;
    text-align: center;
    padding-top: 11px;
    font-size: .9em;
    font-weight: bold
}

    .marker.Sts-4 {
        background-position: -106px -439px !important
    }

    .marker.Sts-3 {
        background-position: -73px -439px !important
    }

    .marker.Sts-2 {
        background-position: -40px -439px !important
    }

    .marker.Sts-1 {
        background-position: -6px -439px !important
    }

    .marker:hover {
        margin-top: 2px
    }

.DefMacDiv, .ClientDiv {
    padding: 5px
}

.ClientCombo {
    width: 300px;
    margin: 10px
}

.DefMacZone {
    border-left: 1px solid #d1d3d3;
    margin-bottom: 15px;
    margin-left: 10px;
    max-height: 320px;
    overflow: auto;
    padding: 10px;
    width: 200px
}

.step-pics {
    overflow: auto;
    white-space: nowrap;
    position: absolute;
    top: 5px;
    right: 187px;
    left: 0;
    padding-right: 10px;
    border-right: 1px solid #cfcfcf
}

    .step-pics .MachineImg {
        display: inline-block;
        vertical-align: top;
        margin-left: 5px;
        cursor: pointer;
        width: inherit
    }

        .step-pics .MachineImg img {
            max-height: 125px;
            width: inherit;
            float: right
        }

.SiteSideMenu .all-pics .step-pics .MachineImg img {
    height: 170px
}

.SiteSideMenu .all-pics #picUploader {
    width: calc(100% - 10px);
    margin: -5px 5px;
    box-sizing: border-box
}

.SiteSideMenu .all-pics[data-haspic=true] #picUploader {
    position: absolute;
    width: 50px;
    bottom: 45%;
    left: -5px;
    z-index: 1000;
    float: right;
    overflow: hidden;
    border-color: #05ade2;
    box-shadow: 0 0 15px 0 #272727;
    -moz-box-shadow: 0 0 15px 0 #272727;
    -webkit-box-shadow: 0 0 15px 0 #272727
}

    .SiteSideMenu .all-pics[data-haspic=true] #picUploader img {
        -moz-transform: scale(1.4);
        -webkit-transform: scale(1.4);
        transform: scale(1.4)
    }

.SiteSideMenu .all-pics {
    border-spacing: 7px 0;
    margin: -18px -15px 15px;
    min-height: 200px
}

@media(min-width:1024px) {
    .SiteSideMenu .all-pics {
        width: 270px
    }

    #popSummary .PopContent {
        width: 1024px
    }
}

@media(max-width:1023px) {
    #popSummary .stage-icons {
        margin-left: 6rem
    }

    #popSummary .PopMainHead {
        top: 15px;
        left: 13px
    }
}

.SiteSideMenu .all-pics .step-pics {
    position: relative;
    right: 0;
    border: 0;
    top: 0;
    padding: 5px
}

    .SiteSideMenu .all-pics .step-pics .MachineImg img {
        box-sizing: border-box;
        height: auto;
        max-height: 190px
    }

.tile .SiteSideMenu {
    float: none;
    width: 100%;
    margin: 0;
    background: none;
    padding: 0
}

.link-pop {
    max-height: 50vh;
    overflow: auto
}

    .link-pop tr {
        height: 45px
    }

        .link-pop tr td:first-child {
            white-space: nowrap;
            width: 1px;
            border: 1px solid #fff
        }

        .link-pop tr td .fa-check {
            font-size: 18px;
            display: none
        }

.all-pics .MachineImg {
    width: initial;
    border: none;
    background: none;
    box-shadow: 0 0 4px 1px rgba(0,0,0,.3)
}

.MachineImg .delete {
    position: absolute;
    top: 3px;
    left: 3px;
    color: #05ade2;
    background: #fff;
    font-weight: bold;
    padding: 3px 5px;
    opacity: .75;
    cursor: pointer;
    z-index: 5
}

.job-pics .MachineImg {
    width: initial
}

    .job-pics .MachineImg img {
        width: initial;
        height: 115px
    }

.job-pics .job-equip-add {
    margin-bottom: 10px;
    background-color: #fff;
    padding: 10px;
    display: inline-block;
    border-radius: 7px;
    margin-left: 10px
}

    .job-pics .job-equip-add .MachineImg {
        margin: 0;
        padding: 0;
        min-width: 106px
    }

        .job-pics .job-equip-add .MachineImg[data-haspic="True"] {
            border: none
        }

        .job-pics .job-equip-add .MachineImg img {
            height: 80px
        }

    .job-pics .job-equip-add .card-title {
        line-height: 1.5;
        box-sizing: border-box;
        color: #000;
        padding: 0;
        vertical-align: top;
        font-size: 14px;
        min-width: 160px
    }

    .job-pics .job-equip-add .actions {
        position: absolute;
        top: 0;
        left: 0;
        margin: 12px;
        z-index: 1
    }

        .job-pics .job-equip-add .actions i {
            margin-right: 10px;
            font-size: 14px
        }

            .job-pics .job-equip-add .actions i:hover {
                cursor: pointer;
                color: #05ade2
            }

    .job-pics .job-equip-add .card-title .equip-title-row > div:first-child {
        flex: 1 1 100%;
        padding-left: 0
    }

    .job-pics .job-equip-add .card-title .tc:not(:first-child) {
        font-weight: normal
    }

    .job-pics .job-equip-add .equip-pic {
        display: inline-block
    }

    .job-pics .job-equip-add .urgent {
        font-weight: normal
    }

    .job-pics .job-equip-add .extra-data > div {
        margin: 10px 0 15px
    }

.return-reason {
    display: none
}

    .return-reason.show, #equip-items.returned .return-reason {
        display: block
    }

#returnInfo li {
    padding: 10px 5px 0
}

.FileUpload {
    display: block
}

.PicMenu, .PicMenu .qq-uploader, .PicMenu .qq-upload-button {
    position: absolute !important;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    z-index: 1
}

[data-haspic=True] .PicMenu {
    display: none
}

[data-haspic=False] .delete, #picUploader .delete {
    display: none
}

[data-haspic=True] img {
    cursor: pointer
}

.qq-uploader:hover {
    background-color: #05ade2;
    opacity: .3
}

#DefSelMac {
    margin-bottom: 15px
}

.PointResualtDiv {
    border-bottom: 1px solid;
    margin-bottom: 3px;
    padding: 5px;
    cursor: pointer
}

.VbhisSts {
    background: repeat scroll -36px -477px transparent;
    height: 32px;
    width: 30px;
    margin: 0 auto
}

    .VbhisSts.posted {
        background-position: -6px -477px !important
    }

.vb-side {
    float: right;
    width: 15rem;
    margin-left: 1.5rem
}

    .vb-side .SiteSideMenu {
        width: 100%;
        direction: ltr
    }

.SiteSideMenu #srch {
    margin-bottom: 5px
}

    .SiteSideMenu #srch::-webkit-input-placeholder {
        text-align: left
    }

.SideMacList {
    max-height: calc(100vh - 400px);
    overflow: auto;
    padding: 5px
}

    .SideMacList a {
        line-height: 1.2;
        display: block;
        box-sizing: border-box;
        margin-bottom: 10px;
        text-align: left
    }

    .SideMacList .linktext.selected {
        font-weight: bold;
        color: #fff
    }

    .SideMacList .linktext.highlight {
        color: #ff0
    }

#popMergeMachines, #popMergeClients, #popMerge {
    width: 600px !important
}

.MergeItemCol, .MergeMacCol {
    float: right;
    width: 270px
}

    .MergeItemCol > h3 {
        margin-top: .5rem;
        color: #000
    }

    .MergeItemCol .ItemList, .MergeMacCol .MacList {
        margin-top: 10px;
        border: 1px solid;
        padding: 10px;
        overflow: auto;
        height: 350px
    }

        .MergeItemCol .ItemList div, .MergeMacCol .MacList div {
            margin-bottom: 5px
        }

.MergeSum {
    margin: 15px 0;
    font-size: 1.2em;
    text-align: center
}

    .MergeSum .b {
        color: #05ade2
    }

.MacName.Selected, .MacMerge.selected, .ClientMerge.selected, .ItemMerge.selected {
    font-size: 1.2em;
    font-weight: bold;
    color: #000
}

#OldText, #OldItems .ItemMerge.selected {
    color: #8b0000;
    text-decoration: line-through
}

#NewText, #NewItems .ItemMerge.selected {
    color: green
}

.MacName.disabled .MacMerge.disabled, .ClientMerge.disabled, .ItemMerge.disabled {
    color: #bfbfbf;
    font-size: 1em;
    font-weight: bold
}

.CheckZone {
    cursor: pointer;
    float: left;
    font-size: 1.2em;
    padding: 1rem 10px;
    text-align: right;
    font-size: inherit;
    box-sizing: border-box;
    width: 127px;
    display: flex;
    align-items: center;
    color: #d7d5d5
}

    .CheckZone label {
        cursor: pointer;
        flex: 1;
        overflow: hidden;
        vertical-align: middle
    }

    .CheckZone:hover {
        border-color: #05ade2;
        color: inherit
    }

.edit-fields .CheckZone:hover {
    border-color: #fff
}

#fieldList:not(.edit-fields) .CheckZone.selected {
    background-color: #05ade2;
    color: #fff
}

.spinner > input {
    font-size: 1em;
    padding: 3px 5px;
    width: 2em;
    text-align: center
}

.spinner:not(:hover) > input:not(:focus) {
    background: none;
    border-color: transparent;
    box-shadow: none;
    color: #fff
}

    .spinner:not(:hover) > input:not(:focus)::-webkit-input-placeholder {
        color: transparent
    }

.check-list label {
    display: table;
    border-spacing: 5px 0;
    vertical-align: top
}

    .check-list label span {
        display: table-cell;
        line-height: 1.5em
    }

@media(max-device-width:480px) {
    .check-list label input {
        margin: 0 5px
    }
}

.ui-datepicker {
    min-width: 17em;
    padding: .2em .2em 0;
    display: none
}

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: .2em 0
    }

    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 2px;
        width: 1.8em;
        height: 1.8em
    }

    .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
        top: 1px
    }

    .ui-datepicker .ui-datepicker-prev {
        left: 2px
    }

    .ui-datepicker .ui-datepicker-next {
        right: 12px
    }

    .ui-datepicker .ui-datepicker-prev-hover {
        left: 1px
    }

    .ui-datepicker .ui-datepicker-next-hover {
        right: 1px
    }

    .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -8px;
        top: 50%;
        margin-top: -8px;
        background-color: #fff
    }

    .ui-datepicker .ui-datepicker-title {
        margin: 0 2.3em;
        line-height: 1.8em;
        text-align: center
    }

        .ui-datepicker .ui-datepicker-title select {
            font-size: 1em;
            margin: 1px 0
        }

    .ui-datepicker select.ui-datepicker-month-year {
        width: 100%
    }

    .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
        width: 49%
    }

    .ui-datepicker table {
        width: 100%;
        margin: 0 0 .4em;
        border-spacing: 2px
    }

    .ui-datepicker tr {
        background: none
    }

    .ui-datepicker th {
        padding: 5px;
        text-align: center;
        font-weight: bold;
        border: 0
    }

    .ui-datepicker td {
        border: 1px solid #d1d3d3;
        padding: 5px 10px
    }

        .ui-datepicker td:hover {
            border-color: #05ade2
        }

        .ui-datepicker td.ui-datepicker-current-day {
            background-color: #05ade2;
            color: #fff;
            font-weight: bold
        }

        .ui-datepicker td span, .ui-datepicker td a {
            display: block;
            padding: .2em;
            text-align: right;
            text-decoration: none
        }

    .ui-datepicker .ui-datepicker-buttonpane {
        background-image: none;
        margin: .7em 0 0 0;
        padding: 0 .2em;
        border-left: 0;
        border-right: 0;
        border-bottom: 0
    }

        .ui-datepicker .ui-datepicker-buttonpane button {
            min-width: initial;
            padding: 5px 10px
        }

            .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
                float: left
            }

    .ui-datepicker.ui-datepicker-multi {
        width: auto
    }

.ui-datepicker-multi .ui-datepicker-group {
    float: left
}

    .ui-datepicker-multi .ui-datepicker-group table {
        width: 95%;
        margin: 0 auto .4em
    }

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
    border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0
}

.ui-datepicker-rtl {
    direction: rtl
}

    .ui-datepicker-rtl .ui-datepicker-prev {
        right: 2px;
        left: auto
    }

    .ui-datepicker-rtl .ui-datepicker-next {
        left: 2px;
        right: auto
    }

    .ui-datepicker-rtl .ui-datepicker-prev:hover {
        right: 1px;
        left: auto
    }

    .ui-datepicker-rtl .ui-datepicker-next:hover {
        left: 1px;
        right: auto
    }

    .ui-datepicker-rtl .ui-datepicker-buttonpane {
        clear: right
    }

        .ui-datepicker-rtl .ui-datepicker-buttonpane button {
            float: left
        }

            .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
                float: right
            }

    .ui-datepicker-rtl .ui-datepicker-group {
        float: right
    }

    .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
        border-right-width: 0;
        border-left-width: 1px
    }

    .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
        border-right-width: 0;
        border-left-width: 1px
    }

.ui-datepicker-cover {
    position: absolute;
    z-index: -1;
    filter: mask();
    top: -4px;
    left: -4px;
    width: 200px;
    height: 200px
}

.pvtUi {
    color: #333
}

    .pvtUi tr {
        background: #eee
    }

table.pvtTable {
    text-align: right;
    border-collapse: collapse
}

    table.pvtTable thead tr th, table.pvtTable tbody tr th {
        border: 1px solid #cdcdcd;
        padding: 5px;
        height: inherit;
        vertical-align: top;
        white-space: nowrap
    }

.pvtAxisLabel {
    width: 1px
}

table.pvtTable .pvtColLabel {
    text-align: center;
    white-space: inherit
}

table.pvtTable .pvtTotalLabel {
    text-align: right
}

.pvtUi {
    border-spacing: 0
}

    .pvtUi tr {
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none
    }

    .pvtUi td {
        border: 1px solid #d1d3d3;
        padding: 5px
    }

.pvtAxisContainer {
    background: #dedede
}

table.pvtTable tbody tr td {
    color: #3d3d3d;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #cdcdcd;
    vertical-align: top;
    text-align: right
}

.pvtTotal, .pvtGrandTotal {
    font-weight: bold
}

.pvtAggregator {
    margin-bottom: 5px
}

.pvtVal {
    cursor: pointer
}

    .pvtVal:hover {
        background-color: #05ade2;
        color: #fff
    }

.pvtAttrDropdown {
    margin-top: 5px
}

td.pvtAxisContainer, td.pvtVals {
    min-width: 120px;
    min-height: 20px
}

    td.pvtVals [role] {
        margin: 20px;
        font-size: 1.2em;
        line-height: 2
    }

.pvtAxisContainer li {
    padding: 5px;
    list-style-type: none;
    cursor: move
}

    .pvtAxisContainer li.pvtPlaceholder {
        -webkit-border-radius: 5px;
        padding: 3px 15px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: 1px dashed #aaa
    }

    .pvtAxisContainer li span.pvtAttr {
        -webkit-text-size-adjust: 100%;
        background: #f3f3f3;
        border: 1px solid #dedede;
        padding: 2px 5px;
        white-space: nowrap;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px
    }

.pvtTriangle {
    cursor: pointer;
    color: grey
}

.pvtHorizList li {
    float: right
}

.pvtVertList {
    vertical-align: top
}

.pvtFilteredAttribute {
    font-style: italic
}

.pvtFilterBox {
    z-index: 100;
    min-width: 150px;
    border: 1px solid gray;
    background-color: #fff;
    position: absolute;
    padding: 20px
}

    .pvtFilterBox h4 {
        margin: 0
    }

    .pvtFilterBox p {
        margin: 1em auto
    }

    .pvtFilterBox label {
        font-weight: normal
    }

    .pvtFilterBox input[type='checkbox'] {
        margin-left: 5px
    }

    .pvtFilterBox button {
        margin: 5px;
        padding: 5px
    }

.pvtCheckContainer {
    overflow: auto;
    width: 100%;
    max-height: 200px
}

    .pvtCheckContainer p {
        margin: 5px
    }

.pvtRendererArea {
    padding: 5px
}

.view-pivot [data-value] {
    text-align: center
}

.view-pivot .pvtUi > tbody > tr:nth-child(1), .view-pivot .pvtUi > tbody > tr:nth-child(2), .view-pivot .pvtUi td:nth-child(1) {
    display: none
}

ul.steps-group {
    margin-bottom: 2px;
    color: #2d302e
}

    ul.steps-group:not(.current) > li {
        display: none
    }

    ul.steps-group > li {
        padding: 3px 0 0
    }

    ul.steps-group lh {
        font-size: 1.1em;
        padding: 4px 0;
        display: flex;
        padding-right: 2px;
        align-items: center
    }

        ul.steps-group li.parent-task a:before, ul.steps-group lh:before {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            content: "";
            display: inline-block;
            margin-left: 5px
        }

        ul.steps-group li.parent-task a.open:before, ul.steps-group lh.open:before {
            content: ""
        }

    ul.steps-group:not(.has-childs) lh:before, ul.steps-group li.parent-task:not(.has-childs) a:before {
        color: transparent
    }

    ul.steps-group lh > .ellipsis {
        font-weight: bold
    }

    ul.steps-group.allDone lh span:first-child {
        background-color: green
    }

    ul.steps-group.allFailed lh span:first-child {
        background-color: red
    }

    ul.steps-group lh span:first-child {
        font-size: .8em;
        border-radius: 50%;
        height: 1.2em;
        width: 1.2em;
        line-height: 1.2em;
        min-width: 1.2em;
        position: relative;
        background-color: #2d302e;
        padding: 2px;
        color: #fff;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin-left: 5px
    }

    ul.steps-group ul {
        margin-right: 22px
    }

        ul.steps-group ul li {
            padding: 6px 4px;
            margin-bottom: 1px
        }

    ul.steps-group li.selected {
        background-color: rgba(5,173,226,.5)
    }

    ul.steps-group li a {
        font-size: 1em;
        display: flex;
        white-space: nowrap;
        align-items: center
    }

        ul.steps-group li a i {
            font-size: 1.2em;
            vertical-align: middle;
            margin-left: 5px
        }

        ul.steps-group li a div {
            display: inline-block;
            width: 85%;
            white-space: unset;
            max-width: 60vw
        }

    ul.steps-group li.parent-task {
        font-weight: bold;
        padding-right: .5rem
    }

    ul.steps-group li.child-task {
        padding-right: 1.5rem
    }

@media(max-device-width:480px) {
    ul.steps-group lh {
        padding: 8px 4px
    }

    ul.steps-group ul li {
        padding: 8px 4px
    }
}

.fa-square.o {
    color: #f3f1f1
}

.fa-file-excel {
    color: #1d6f42 !important
}

li.childs-li {
    padding: 0
}

#gannt-bank li:not(.childs-li) {
    padding: 7px 5px;
    display: flex
}

    #gannt-bank li:not(.childs-li):hover {
        background-color: #92e5ff;
        color: #fff
    }

#gannt-bank li span {
    flex: 1
}

#gannt-bank li i {
    font-size: 1.2em
}

    #gannt-bank li i:hover {
        color: #000
    }

#gannt-bank li:not(:hover) i {
    display: none
}

#gannt-bank li.parent-task {
    font-weight: bold;
    color: #000
}

#gannt-bank .root:before {
    content: ' ';
    display: inline-block;
    min-width: 1rem
}

#gannt-bank .root.parent-task:before {
    content: '+';
    font-weight: bold;
    display: inline-block;
    cursor: pointer
}

#gannt-bank .root.parent-task.open:before {
    content: '-'
}

#gannt-bank ul ul {
    margin-right: 2rem
}

#gannt-bank .root.parent-task:not(.open) + li {
    display: none
}

#gannt-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    direction: ltr
}

    #gannt-wrap > * {
        direction: rtl
    }

    #gannt-wrap .table-sticky {
        max-height: calc(100vh - 200px)
    }

        #gannt-wrap .table-sticky th {
            z-index: 2
        }

.tasks-wrap::-webkit-scrollbar {
    width: 0
}

.gutter {
    cursor: e-resize;
    height: 100%;
    background: #cfcfcf
}

    .gutter:after {
        content: '';
        position: absolute;
        top: 50%;
        right: -3px;
        width: 11px;
        z-index: 2;
        height: 20px;
        background-color: #b3b3b3;
        border-radius: 3px
    }

#StepsDiv {
    margin-top: 30px
}

    #StepsDiv .SiteSideMenu {
        background-position: bottom;
        margin-top: 15px;
        line-height: 35px;
        cursor: pointer
    }

#StepsMenu {
    vertical-align: top;
    display: table-cell
}

    #StepsMenu .SiteSideMenu {
        float: none
    }

.fill.up {
    transition: .3s
}

    .fill.up:not(.selected):hover, .fill.up:not(.selected):focus {
        color: #fff;
        box-shadow: inset 0 -3.25em 0 0 #2d302e
    }

#StepsDiv .SiteSideMenu.selected {
    background: url("/images/BackBtnBlueBig.png") repeat-x scroll 0 0 transparent
}

#StepsDiv .SiteSideMenu:not(.selected):hover {
    color: #05ade2
}

#StepsDiv .SiteSideMenu.nostarted {
    background: none #d1d3d3;
    border: 1px solid graytext
}

.tile #StepsDiv {
    margin: 0
}

    .tile #StepsDiv .SiteSideMenu {
        margin: 3px 0;
        padding: 3px 5px;
        border-radius: 0;
        box-sizing: border-box;
        box-shadow: none;
        background: #232323;
        color: #fff
    }

        .tile #StepsDiv .SiteSideMenu.selected {
            background: #05ade2
        }

        .tile #StepsDiv .SiteSideMenu .SideHeaderInfoValue {
            color: #fff
        }

.nostarted .SideHeaderInfoValue {
    color: inherit
}

.SiteSideMenu .icon, .bigIcon {
    background: repeat scroll 265px -443px transparent;
    width: 33px;
    height: 33px;
    float: right;
    margin-left: 7px
}

    .SiteSideMenu.done .icon, .bigIcon.done {
        background-position: 236px -403px !important
    }

    .bigIcon.done-black {
        background-position: 236px -444px !important
    }

    .bigIcon.done-small {
        background-position: 236px -444px !important
    }

.SiteSideMenu.started.NotDone .icon {
    background-position: 265px -403px !important
}

[data-id=details] .icon {
    background-position: 235px -480px !important
}

[data-id=vb] .icon {
    background-position: 138px -480px !important
}

[data-id=refubrish] .icon {
    background-position: 171px -480px !important
}

[data-id=outside] .icon {
    background-position: 171px -480px !important
}

[data-id=dynamic] .icon {
    background-position: 72px -480px !important
}

[data-id=alignment] .icon {
    background-position: 105px -480px !important
}

[data-id=lipuf] .icon {
    background-position: 203px -480px !important
}

.stepname {
    overflow: hidden;
    font-size: 1.2em !important;
    font-weight: bold
}

.selected .stepname {
    color: #fff
}

#StepsMenu .selctee.done .stepname:hover {
    color: #05ade2
}

.blckRectangle {
    background: repeat scroll 33px -375px rgba(0,0,0,0);
    height: 15px;
    position: absolute;
    right: 10px;
    top: -30px;
    width: 25px
}

#signature {
    background: #fff;
    width: 100%;
    max-width: 400px;
    display: inline-block;
    margin: 10px 0
}

.jSignature {
    height: 200px !important
}

.alignment-size {
    text-align: center;
    padding-top: 20px
}

    .alignment-size > img.motor {
        width: 200px;
        margin-left: 141px
    }

.help-line div {
    float: right
}

.help-line .line {
    width: 100px;
    height: 1px;
    background: #000;
    margin: 5px 0
}

.help-line .arrow {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 6px solid transparent
}

    .help-line .arrow.last {
        border-left: 5px solid #000
    }

    .help-line .arrow.first {
        border-right: 5px solid #000
    }

.size-arrows {
    margin: 0 auto;
    right: -78px;
    margin-top: -98px;
    width: 349px
}

    .size-arrows img {
        width: 349px
    }

    .size-arrows .size {
        position: absolute;
        background: #fff;
        padding: 0 2px;
        color: #000;
        font-size: .9em
    }

        .size-arrows .size.CouplingDiameter {
            right: 289px;
            top: 13px
        }

        .size-arrows .size.SC {
            right: 284px;
            top: 59px
        }

        .size-arrows .size.MMF1 {
            right: 123px;
            top: 106px
        }

        .size-arrows .size.SM {
            right: 235px;
            top: 106px
        }

        .size-arrows .size.MF1MF2 {
            top: 106px;
            right: 50px
        }

.alignment-resualt {
    text-align: center;
    color: #000
}

    .alignment-resualt .h {
        display: inline-block;
        margin: 0 15px
    }

        .alignment-resualt .h h3 {
            color: #000
        }

        .alignment-resualt .h .resualt {
            display: inline-block;
            margin: 10px 15px
        }

        .alignment-resualt .h .unit {
            color: GrayText;
            font-size: small;
            line-height: 1
        }

        .alignment-resualt .h .type {
            position: absolute;
            left: 0;
            right: 0;
            top: 15px
        }

.pdfFooter {
    background: url("/images/footerNew_rtl.png") no-repeat;
    height: 220px
}

    .pdfFooter .contactInfo {
        padding: 74px 0 10px 0;
        width: 680px;
        line-height: 1;
        border-spacing: 0
    }

    .pdfFooter a {
        font-size: larger
    }

.report-header-top {
    position: absolute;
    left: 0;
    right: 0;
    top: -106px;
    font-weight: bold
}

.report-header > div {
    margin-bottom: 5px
}

    .report-header > div > div {
        display: inline-block;
        background: #f3f3f3;
        padding: 8px;
        box-sizing: border-box;
        min-width: 230px
    }

.report-header-bottom {
    position: absolute;
    left: -3px;
    right: 0;
    top: 0;
    line-height: 2
}

.report-header-inner {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #b2e3f4;
    width: 220px;
    padding: 22px 10px 15px;
    color: #fff;
    text-align: center
}

    .report-header-inner[data-page="1"], .report-header-inner:not([data-page]) {
        padding-bottom: 30px
    }

.report-header-bottom .report-header-inner {
    padding-top: 5px;
    padding-bottom: 15px;
    color: #000;
    line-height: 1.2;
    margin: 0 3px
}

    .report-header-bottom .report-header-inner div {
        margin-bottom: 10px
    }

.report-header-inner label {
    font-size: 22px
}

.report-equips {
    max-width: 620px;
    margin-bottom: 2rem
}

.signuture {
    text-align: left;
    padding: 0 60px 30px;
    font-size: larger;
    line-height: 1.5
}

    .signuture .inner {
        text-align: right;
        display: inline-block
    }

    .signuture img {
        max-width: 12rem
    }

[data-sign=true] #signEdit, [data-sign=false] #signView {
    display: none
}

#popUpdateLeadTrack, #popUpdateQuoteTrack {
    width: 600px;
    min-height: 380px
}

    #popUpdateQuoteTrack .absIcons, #popUpdateQuoteTrack #addVersion, .SideHeaderInfos h1 {
        display: none
    }

    #popUpdateLeadTrack .sitesubcontent, #popUpdateQuoteTrack .sitesubcontent {
        background: none;
        width: 600px
    }

    #popUpdateQuoteTrack .tbl.SideHeaderInfoLabel {
        display: none
    }

    #popUpdateQuoteTrack #StepsMenu {
        margin-left: 5px
    }

#ui-datepicker-div {
    width: auto
}

#popListAndUpdate, #popUpdateTaskEmployee {
    width: 300px;
    min-height: 300px
}

.duePassed {
    color: red !important
}

.duePassed-back {
    background-color: red !important;
    color: #fff
}

.dueNear {
    color: #ffa500 !important
}

.dueNear-back {
    background-color: #ff8c00 !important;
    color: #fff
}

[data-status="547"] .date-color {
    color: #d3d3d3
}

[data-status="590"] .date-color {
    color: #32cd32
}

.date-color-gray {
    color: #bdbdbd
}

.talks-container {
    min-height: 300px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden
}

.talk-row .talk-div {
    padding: 8px
}

.talk-div {
    display: inline-block;
    margin: 5px;
    background: #d5f2fb;
    padding: 5px
}

    .talk-div.new {
        display: block;
        background: #fff
    }

    .talk-div #NewMsg {
        background: none
    }

    .talk-div .ForBtnDiv {
        padding: 0
    }

    .talk-div .DatePicker {
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        padding: 0;
        text-indent: 0
    }

    .talk-div .talk-name {
        margin-bottom: 3px
    }

    .talk-div .delete {
        visibility: hidden;
        margin-right: 5px
    }

    .talk-div:hover .delete {
        visibility: visible
    }

#orderAttachmentLink {
    padding: 7px;
    background: #fff;
    display: block;
    margin: 5px 0
}

    #orderAttachmentLink.dn {
        display: none
    }

.ui-menu .ui-menu-item.ui-state-focus a {
    font-size: inherit;
    background: #05ade2;
    color: #fff;
    cursor: pointer
}

    .ui-menu .ui-menu-item.ui-state-focus a span {
        color: #ccc !important
    }

.xdsoft_datetimepicker {
    box-shadow: 0 5px 15px -5px rgba(0,0,0,.506);
    background: #fff;
    border-bottom: 1px solid #bbb;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    color: #333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 8px;
    padding-right: 0;
    padding-top: 2px;
    position: absolute;
    z-index: 9999;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: none
}

    .xdsoft_datetimepicker.xdsoft_rtl {
        padding: 8px 0 8px 8px
    }

    .xdsoft_datetimepicker iframe {
        position: absolute;
        right: 0;
        top: 0;
        width: 75px;
        height: 210px;
        background: transparent;
        border: none
    }

    .xdsoft_datetimepicker button {
        margin-bottom: 8px
    }

.xdsoft_noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

    .xdsoft_noselect::selection {
        background: transparent
    }

    .xdsoft_noselect::-moz-selection {
        background: transparent
    }

.xdsoft_datetimepicker.xdsoft_inline {
    display: inline-block;
    position: static;
    box-shadow: none
}

.xdsoft_datetimepicker * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

.xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker {
    display: none
}

    .xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active {
        display: block
    }

.xdsoft_datetimepicker .xdsoft_datepicker {
    width: 224px;
    float: right;
    margin-right: 8px
}

.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker {
    float: left;
    margin-left: 8px;
    margin-right: 0
}

.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker {
    width: 256px
}

.xdsoft_datetimepicker .xdsoft_timepicker {
    width: 58px;
    float: right;
    text-align: center;
    margin-right: 8px;
    margin-top: 0
}

.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker {
    float: left;
    margin-left: 8px;
    margin-right: 0
}

.xdsoft_datetimepicker .xdsoft_datepicker.active + .xdsoft_timepicker {
    margin-top: 8px;
    margin-bottom: 3px
}

.xdsoft_datetimepicker .xdsoft_mounthpicker {
    position: relative;
    text-align: center
}

.xdsoft_datetimepicker .xdsoft_label i, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_today_button {
    background-image: url('/Content/jquery.datetimepicker.png');
    transform: scaleX(-1)
}

.xdsoft_datetimepicker .xdsoft_label i {
    opacity: .5;
    background-position: -92px -19px;
    display: inline-block;
    width: 9px;
    height: 20px;
    vertical-align: middle
}

.xdsoft_datetimepicker .xdsoft_prev {
    float: right;
    background-position: -20px 0
}

.xdsoft_datetimepicker .xdsoft_today_button {
    float: right;
    background-position: -70px 0;
    margin-right: 5px
}

.xdsoft_datetimepicker .xdsoft_next {
    float: left;
    background-position: 0 0
}

.xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_today_button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    display: block;
    height: 30px;
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    outline: medium none;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-indent: 100%;
    white-space: nowrap;
    width: 20px;
    min-width: 0
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
    float: none;
    background-position: -40px -15px;
    height: 15px;
    width: 30px;
    display: block;
    margin-right: 14px;
    margin-top: 7px
}

.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev, .xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next {
    float: none;
    margin-right: 0;
    margin-left: 14px
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
    background-position: -40px 0;
    margin-bottom: 7px;
    margin-top: 0
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: 151px;
    overflow: hidden;
    border-bottom: 1px solid #ddd
}

    .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
        background: #f5f5f5;
        border-top: 1px solid #ddd;
        color: #666;
        font-size: 12px;
        text-align: center;
        border-collapse: collapse;
        cursor: pointer;
        border-bottom-width: 0;
        height: 25px;
        line-height: 25px
    }

        .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:first-child {
            border-top-width: 0
        }

.xdsoft_datetimepicker .xdsoft_today_button:hover, .xdsoft_datetimepicker .xdsoft_next:hover, .xdsoft_datetimepicker .xdsoft_prev:hover {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.xdsoft_datetimepicker .xdsoft_label {
    display: inline;
    position: relative;
    z-index: 9999;
    padding: 3px;
    font-size: 14px;
    line-height: 30px;
    font-weight: bold;
    background-color: #fff;
    text-align: center;
    cursor: pointer
}

    .xdsoft_datetimepicker .xdsoft_label:hover > span {
        text-decoration: underline
    }

    .xdsoft_datetimepicker .xdsoft_label:hover i {
        opacity: 1
    }

    .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
        border: 1px solid #ccc;
        position: absolute;
        left: 0;
        top: 30px;
        z-index: 101;
        display: none;
        background: #fff;
        max-height: 160px;
        overflow-y: hidden
    }

        .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect {
            left: -7px
        }

        .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect {
            left: 2px
        }

        .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
            color: #fff;
            background: #ff8000
        }

        .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
            padding: 2px 10px 2px 5px;
            text-decoration: none !important
        }

            .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
                background: #3af;
                box-shadow: #178fe5 0 1px 3px 0 inset;
                color: #fff;
                font-weight: 700
            }

.xdsoft_datetimepicker .xdsoft_month {
    width: 100px;
    text-align: left
}

.xdsoft_datetimepicker .xdsoft_calendar {
    clear: both
}

.xdsoft_datetimepicker .xdsoft_year {
    width: 48px;
    margin-right: 5px
}

.xdsoft_datetimepicker .xdsoft_calendar table {
    border-collapse: collapse;
    width: 100%
}

.xdsoft_datetimepicker .xdsoft_calendar td > div {
    padding-left: 5px
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    height: 25px
}

.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th {
    width: 14.2857142%;
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
    font-size: 12px;
    text-align: left;
    vertical-align: middle;
    padding: 0;
    border-collapse: collapse;
    cursor: pointer;
    height: 25px
}

.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td, .xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th {
    width: 12.5%
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    background: #f1f1f1
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
    color: #3af
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default {
    background: #ffe9d2;
    box-shadow: #ffb871 0 1px 4px 0 inset;
    color: #000
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint {
    background: #c1ffc9;
    box-shadow: #00dd1c 0 1px 4px 0 inset;
    color: #000
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
    background: #3af;
    box-shadow: #178fe5 0 1px 3px 0 inset;
    color: #fff;
    font-weight: 700
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled, .xdsoft_datetimepicker .xdsoft_time_box > div > div.xdsoft_disabled {
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    cursor: default
}

    .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled {
        opacity: .2;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"
    }

.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
    color: #fff !important;
    background: #ff8000 !important;
    box-shadow: none !important
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current.xdsoft_disabled:hover {
    background: #3af !important;
    box-shadow: #178fe5 0 1px 3px 0 inset !important;
    color: #fff !important
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_disabled:hover {
    color: inherit !important;
    background: inherit !important;
    box-shadow: inherit !important
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    font-weight: 700;
    text-align: center;
    color: #999;
    cursor: default
}

.xdsoft_datetimepicker .xdsoft_copyleft {
    color: #ccc !important;
    font-size: 10px;
    clear: both;
    float: none;
    margin-right: 8px
}

    .xdsoft_datetimepicker .xdsoft_copyleft a {
        color: #eee !important
    }

        .xdsoft_datetimepicker .xdsoft_copyleft a:hover {
            color: #aaa !important
        }

.xdsoft_time_box {
    position: relative;
    border: 1px solid #ccc
}

.xdsoft_scrollbar > .xdsoft_scroller {
    background: #ccc !important;
    height: 20px;
    border-radius: 3px
}

.xdsoft_scrollbar {
    position: absolute;
    width: 7px;
    left: 0;
    top: 0;
    bottom: 0;
    cursor: pointer
}

.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_scrollbar {
    right: 0;
    left: auto
}

.xdsoft_scroller_box {
    position: relative
}

.xdsoft_datetimepicker.xdsoft_dark {
    box-shadow: 0 5px 15px -5px rgba(255,255,255,.506);
    background: #000;
    border-bottom: 1px solid #444;
    border-right: 1px solid #333;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
    color: #ccc
}

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box {
        border-bottom: 1px solid #222
    }

        .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div {
            background: #0a0a0a;
            border-top: 1px solid #222;
            color: #999
        }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label {
        background-color: #000
    }

        .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select {
            border: 1px solid #333;
            background: #000
        }

            .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
                color: #000;
                background: #007fff
            }

            .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
                background: #c50;
                box-shadow: #b03e00 0 1px 3px 0 inset;
                color: #000
            }

        .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label i, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_prev, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_next, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_today_button {
            background-image: url(data:image/png;base64,iVBORw0KGgorightNSUhEUgAAAGQrighteCAYAAADaW7vzrightGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPrightyJpVFh0WE1MOmNvbS5hZG9iZS54bXrightAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkrightABJRU5ErkJggg==)
        }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
        background: #0a0a0a;
        border: 1px solid #222;
        color: #999
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
        background: #0e0e0e
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today {
        color: #c50
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_default {
        background: #ffe9d2;
        box-shadow: #ffb871 0 1px 4px 0 inset;
        color: #000
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_mint {
        background: #c1ffc9;
        box-shadow: #00dd1c 0 1px 4px 0 inset;
        color: #000
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
        background: #c50;
        box-shadow: #b03e00 0 1px 3px 0 inset;
        color: #000
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
        color: #000 !important;
        background: #007fff !important
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
        color: #666
    }

    .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyleft {
        color: #333 !important
    }

        .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyleft a {
            color: #111 !important
        }

            .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyleft a:hover {
                color: #555 !important
            }

.xdsoft_dark .xdsoft_time_box {
    border: 1px solid #333
}

.xdsoft_dark .xdsoft_scrollbar > .xdsoft_scroller {
    background: #333 !important
}

.xdsoft_datetimepicker .xdsoft_save_selected {
    display: block;
    border: 1px solid #ddd !important;
    margin-top: 5px;
    width: 100%;
    color: #454551;
    font-size: 13px
}

.xdsoft_datetimepicker .blue-gradient-button {
    font-family: "museo-sans","Book Antiqua",sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #82878c;
    height: 28px;
    position: relative;
    padding: 4px 17px 4px 33px;
    border: 1px solid #d7d8da;
    background: -moz-linear-gradient(top,#fff 0%,#f4f8fa 73%);
    background: -o-linear-gradient(top,#fff 0%,#f4f8fa 73%);
    background: -ms-linear-gradient(top,#fff 0%,#f4f8fa 73%);
    background: linear-gradient(to bottom,#fff 0%,#f4f8fa 73%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#f4f8fa',GradientType=0)
}

    .xdsoft_datetimepicker .blue-gradient-button:hover, .xdsoft_datetimepicker .blue-gradient-button:focus, .xdsoft_datetimepicker .blue-gradient-button:hover span, .xdsoft_datetimepicker .blue-gradient-button:focus span {
        color: #454551;
        background: -moz-linear-gradient(top,#f4f8fa 0%,#fff 73%);
        background: -o-linear-gradient(top,#f4f8fa 0%,#fff 73%);
        background: -ms-linear-gradient(top,#f4f8fa 0%,#fff 73%);
        background: linear-gradient(to bottom,#f4f8fa 0%,#fff 73%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f8fa',endColorstr='#FFF',GradientType=0)
    }

.OuterSelect.PointValDatesRow > button {
    background: repeat scroll -314px -3px transparent;
    width: 30px;
    order: 1;
    min-width: unset;
    position: absolute;
    left: 0
}

.body .cke_editable {
    height: 130px;
    overflow: auto;
    color: #000
}

.cke_editable {
    line-height: 1.6;
    background-color: #fff;
    color: #000
}

    .cke_editable p {
        margin: 0
    }

    .cke_editable ol, .cke_editable ul {
        padding: 0;
        padding-right: 30px
    }

    .cke_editable ol {
        list-style-type: decimal
    }

        .cke_editable ol > li:before {
            margin-left: 1rem
        }

    .cke_editable ul {
        list-style-type: disc
    }

        .cke_editable ol li, .cke_editable ul li {
            padding: 0;
            text-indent: 0;
            padding-right: 5px;
            list-style-position: outside
        }

.mobileMenuBtns {
    display: none
}

.admin .mobileMenuBtns {
    display: block;
    right: -0
}

#equip-search {
    display: none
}

.VbTabBlockHeader.tabs {
    padding: 0;
    background-color: #fff
}

.tabs {
    margin-top: 20px;
    font-size: larger
}

    .tabs span {
        border: 1px solid #e8e8e8;
        padding: 12px 15px;
        line-height: 3;
        margin-left: 0
    }

        .tabs span:not(.selected) {
            cursor: pointer
        }

        .tabs span.selected {
            font-weight: bold;
            background: #e8e8e8
        }

.job-row {
    margin-bottom: 1rem;
    padding-right: 10px
}

    .job-row > div {
        vertical-align: middle
    }

    .job-row .title {
        margin-bottom: .5rem;
        color: #000;
        line-height: 1.5
    }

    .job-row .items {
        margin: 0 10px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center
    }

        .job-row .items > div {
            margin-bottom: 1rem;
            margin-left: 1rem
        }

    .job-row .sts {
        padding: 5px 10px;
        width: 130px;
        background-color: #fff;
        min-height: inherit;
        color: #000;
        line-height: 1.5;
        border-top: 2px solid #232323
    }

        .job-row .sts.Quote {
            border-color: rgba(255,153,0,1)
        }

        .job-row .sts.JE {
            border-color: hsl(194,100%,45%)
        }

    .job-row .dif {
        min-width: 26px;
        border-width: 1px 0;
        padding: 3px 5px 12px;
        margin: 0;
        text-align: center;
        height: 5px
    }

        .job-row .dif:before {
            content: '';
            border-top: 1px dashed;
            width: 100%;
            height: 1px;
            display: inline-block
        }

        .job-row .dif span {
            background-color: #d9d9d9;
            position: absolute;
            padding: 0 8px;
            top: 5px;
            right: calc(50% - 11px)
        }

        .job-row .dif[data-days='0'] {
            padding: 0
        }

#userDiv {
    max-height: 180px;
    overflow: auto
}

.TopHeaderActions {
    vertical-align: top
}

    .TopHeaderActions input {
        margin-right: 5px
    }

    .TopHeaderActions ul.actions {
        display: none;
        position: absolute;
        top: 35px;
        left: 0;
        width: 200px;
        padding: 10px;
        background-color: #f5f5f5;
        z-index: 10;
        border: 1px solid #ccc
    }

        .TopHeaderActions ul.actions li {
            padding: 10px 5px;
            font-size: 14px;
            color: #05ade2;
            cursor: pointer;
            margin: 1px
        }

            .TopHeaderActions ul.actions li:hover {
                background-color: #000;
                color: #fff
            }

            .TopHeaderActions ul.actions li a {
                display: block;
                width: 100%
            }

            .TopHeaderActions ul.actions[data-iscardcompleted='False'] li.need-complete, .TopHeaderActions ul.actions li.need-complete[disabled] {
                color: gray
            }

.table-wrapper.table-sticky table thead th:first-child {
    right: 0;
    z-index: 6
}

td.tbody-title:first-child {
    right: 0;
    position: sticky;
    top: 0;
    cursor: pointer;
    z-index: 1;
    min-width: unset;
    border-width: 1px 0 0
}

td.tbody-title + td {
    border-right: none
}

.table-wrapper.table-sticky table tbody th:first-child {
    right: 0;
    top: unset;
    font-size: 12px
}

.table-sticky.first-col-sticky table tbody td:nth-child(2) {
    right: 0;
    top: unset;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1
}

.table-sticky.first-col-sticky table th:first-child, .table-sticky.first-col-sticky table td:first-child {
    right: 0;
    position: -webkit-sticky;
    position: sticky;
    border-left: 1px solid #d9d9d9
}

.table-sticky.first-col-sticky table td:first-child {
    z-index: 3 !important;
    background-color: #fff
}

.table-sticky.first-col-sticky table th:first-child {
    z-index: 4 !important
}

.table-wrapper.table-sticky {
    max-height: calc(80vh)
}

.close-scdh, .expand-calendar {
    display: none
}

.scdh #pageContent .scdh-menu .status-div h3 {
    background: linear-gradient(to bottom,rgba(0,0,0,.4) 0%,#fff 100%);
    color: #000
}

.scdh #pageContent .status-div[group-status='Reception'] h3 {
    background: linear-gradient(to bottom,rgba(157,0,0,.4) 0%,#fff 100%)
}

.scdh #pageContent .status-div[group-status*='Disassembly'] h3 {
    background: linear-gradient(to bottom,rgba(147,85,0,.4) 0%,#fff 100%)
}

.scdh #pageContent .status-div[group-status*='Repair-'] h3 {
    background: linear-gradient(to bottom,rgba(0,9,181,.4) 0%,#fff 100%)
}

@media(min-device-width:480px) {
    .scdh #pageContent {
        overflow: hidden
    }

        .scdh #pageContent .scdh-wrap {
            box-sizing: border-box;
            padding: 1rem 0;
            height: calc(100vh - 4.5rem);
            display: flex
        }

        .scdh #pageContent:not(.only-calendar) .scdh-table {
            flex: 1
        }

    .scdh .scdh-table .scdh-table-content {
        box-shadow: 3px 3px 15px rgba(0,0,0,.5);
        padding: 1rem;
        background: #fff;
        width: 100%;
        z-index: 2;
        box-sizing: border-box;
        height: 100%;
        display: flex;
        flex-direction: column
    }

    .table-wrapper.table-sticky {
        max-height: unset
    }

    .scdh #pageContent[data-layout^='calendar'] .scdh-table {
        visibility: visible
    }

        .scdh #pageContent[data-layout^='calendar'] .scdh-table .scdh-table {
            top: 0
        }

    .scdh #pageContent[data-layout$='-min'] .card:not(:hover) .dueTime, .scdh #pageContent[data-layout$='-min'] .card:not(:hover) .equip-title-row {
        display: none
    }

    .scdh #pageContent[data-layout$='-min'] .card:not(:hover) .pic {
        height: 1.2rem
    }

    .scdh #pageContent[data-layout$='-min'] .card:not(:hover) .details .b {
        width: 100%;
        max-width: 100%
    }

    .scdh #pageContent[data-layout$='-min'] .card.note:not(:hover) {
        min-height: unset;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        justify-content: start
    }

    .scdh #pageContent[data-layout$='-min'] .scdh-table tr td {
        height: unset
    }

    .scdh #pageContent[data-layout$='-min'] .scdh-table tr th:first-child {
        white-space: nowrap;
        height: 1.5rem
    }

    .scdh #pageContent[data-layout^="full"] .table-wrapper {
        width: 100%
    }

    .scdh #pageContent:not(.only-calendar) .scdh-menu {
        display: inline-flex;
        max-width: 90vw;
        width: auto;
        height: unset;
        flex-wrap: nowrap;
        background: none;
        margin: 0;
        z-index: 1;
        padding-left: 1rem;
        flex-direction: column
    }

        .scdh #pageContent:not(.only-calendar) .scdh-menu > .scrl {
            display: flex;
            flex-direction: row;
            flex-flow: wrap;
            align-items: flex-start;
            padding-left: 1vw;
            overflow: visible;
            margin-top: .5rem;
            width: 100%;
            box-sizing: border-box
        }

    .scdh #pageContent:not(.only-calendar)[data-layout^='calendar'] .scdh-menu > .scrl {
        width: 14.4rem;
        display: inline-block;
        overflow: auto;
        overflow-x: hidden
    }

        .scdh #pageContent:not(.only-calendar)[data-layout^='calendar'] .scdh-menu > .scrl .status-div .inner {
            overflow: visible;
            max-height: inherit
        }

    .scdh #pageContent:not(.only-calendar) .scdh-menu .status-div {
        display: inline-block;
        margin-left: 1rem;
        vertical-align: top;
        flex: 1;
        min-width: 13.7rem;
        max-width: 20rem;
        box-sizing: border-box
    }

        .scdh #pageContent:not(.only-calendar) .scdh-menu .status-div .inner {
            max-height: 40vh;
            overflow: auto
        }

    .close-scdh, .expand-calendar {
        display: inline-block
    }

        .expand-calendar i, .close-scdh i {
            font-size: 2em;
            cursor: pointer;
            padding: 0 .5rem;
            color: #05ade2
        }

        .expand-calendar i {
            padding-left: 1.5rem
        }

        .close-scdh .close, [data-layout^='calendar'] .close-scdh .open {
            display: none
        }

        [data-layout^='calendar'] .close-scdh .close, .close-scdh .open {
            display: inline-block
        }

    #pageContent[data-layout^='full'] {
        overflow: visible !important
    }

        #pageContent[data-layout^='full'] .scdh-wrap {
            width: unset !important
        }

        #pageContent[data-layout^='full'] .scdh-menu {
            display: none !important
        }

        #pageContent[data-layout^='full'] .scdh-table {
            width: calc(100vw - 4rem) !important
        }

        #pageContent[data-layout^='full'] .close-scdh {
            display: none
        }
}

.admin #SiteHeaderCenter, #SiteHeader {
    background-color: transparent;
    height: 60px;
    width: 100%
}

.admin #SiteHeader {
    background: url(/images/BackSideMenu.png) repeat-x scroll 0 -50px #161817;
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 1px 5px rgba(0,0,0,.4)
}

@media(max-device-width:800px) {
    body {
        font-size: 16px;
        line-height: 1.5em
    }
}

@media(max-device-width:1280px) {
    #SiteBody {
        display: table;
        width: 100%
    }

    h1 {
        font-size: 1.3em
    }

    .ForBtnDiv {
        padding: 10px
    }

    .buttondefault:active {
        transform: scale(.8,.8)
    }

    #SiteHeaderCenter {
        background: none
    }

    #SiteHeaderLogos {
        display: none
    }

    #SiteFooterCenter {
        padding-top: 32px
    }

    #appVersion {
        position: absolute;
        top: 2px;
        left: 8px;
        color: #189200
    }

    .SiteWidth {
        width: 100%
    }

    .sitesubcontent, .SiteSideMenu {
        display: table-cell;
        vertical-align: top
    }

    .SiteSideMenu {
        margin: 0 25px
    }

    .sitesubcontent {
        min-width: 714px;
        width: 100%;
        float: none
    }

    #StepsDiv .SiteSideMenu {
        display: block;
        font-size: smaller
    }

    [type="text"], [type="search"], [type="email"], [type="number"], [type="tel"], [type="password"], textarea, .autocomplete.filterBox, .OuterSelect, .select2 .field, .select2-container--default .select2-search--dropdown .select2-search__field, body .select2-container--default .select2-selection--multiple, .cke_textarea_inline {
        text-indent: 4px
    }

        .OuterSelect.PointValDatesRow {
            line-height: 22px
        }

        .autocomplete.filterBox .inner .SelectBtn, .SelectBtn {
            left: 4px;
            top: 50%
        }

    .ui-datepicker-trigger {
        left: 1px;
        top: 3px
    }
}

.admin .mobileMenuBtns {
    display: table;
    width: 100%;
    border-spacing: 15px 18px;
    float: right
}

    .admin .mobileMenuBtns .icon {
        display: inline-block;
        background: repeat scroll -1px -1px transparent;
        height: 25px;
        width: 25px;
        cursor: pointer
    }

        .admin .mobileMenuBtns .icon.menu {
            background-position: -281px -330px !important
        }

        .admin .mobileMenuBtns .icon.back {
            background-position: -314px -330px !important
        }

    .admin .mobileMenuBtns h1 {
        color: #fff;
        padding: 0
    }

.circle-div {
    display: inline-block;
    margin: 5px;
    border: 1px solid #fff;
    background-color: #fff;
    border-radius: 100px;
    text-align: center;
    width: 60px;
    height: 60px;
    padding: 15px;
    white-space: normal
}

    .circle-div div {
        display: inline-table;
        text-align: center;
        width: 10px
    }

    .circle-div label {
        display: block;
        padding-bottom: 5px;
        font-size: 20px;
        font-weight: bold;
        color: red
    }

@media(max-device-width:1024px) {
    body {
        background-color: #fff;
        -webkit-touch-callout: none;
        -webkit-font-smoothing: antialiased;
        font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        text-size-adjust: none;
        text-rendering: optimizeLegibility;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-drag: none
    }

    .sitesubcontent h1:first-child:not(.red) {
        display: none
    }

    #SiteBody, .admin #SiteBody {
        margin-top: 5px;
        display: block
    }

    .admin #SiteHeaderCenter, .admin #SiteHeader {
        height: 50px;
        padding: 0
    }

    .admin .mobileMenuBtns {
        right: 0
    }

    .sitesubcontent {
        display: table;
        min-width: inherit;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        padding: 0
    }

        .sitesubcontent.shadow {
            box-shadow: none;
            -moz-box-shadow: none;
            -webkit-box-shadow: none
        }

    #menu-mask {
        opacity: .5
    }

    .TopHeaderActions:not(.stage-icons) {
        top: 8px
    }

    #RefubrishSideMenu.SiteSideMenu, .MacPage.SiteSideMenu {
        display: table-cell
    }

    .SiteSideMenu.MacPage {
        width: auto
    }

    #SiteBody > .SiteSideMenu, #StepsMenu {
        display: block;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        top: 10px;
        margin-left: 0;
        overflow-y: auto;
        max-height: 250px;
        float: none;
        width: 100%;
        margin-bottom: 20px;
        box-sizing: border-box
    }

    .SiteSideMenu {
        width: 100%;
        margin: 10px
    }

        .SiteSideMenu:not(.MacPage) .SiteSideMenu:not(#RefubrishSideMenu) {
            position: fixed;
            right: -15px;
            top: 10px;
            z-index: 100
        }

    #navigator {
        position: absolute
    }

    #StepsDiv .SiteSideMenu {
        display: block;
        width: 97%;
        position: relative;
        box-sizing: border-box;
        margin: 10px 5px
    }

    #siteHeaderUser .details {
        margin-left: 10px
    }

    #siteHeaderUserInfos {
        display: none
    }

    .ui-accordion .ui-accordion-header {
        margin-bottom: 2px
    }

    .step-pics .MachineImg .delete {
        padding: 6px 8px
    }

    .siteHeaderLogo {
        margin: 0 5px;
        margin-top: -6px
    }
}

@media(min-device-width:480px) {
    .scdh-menu > .desc {
        display: none
    }

    #scdh-form-wrap {
        display: inline-block
    }
}

@media(max-device-width:480px) {
    html, body {
        height: 100%
    }

    .card .card-pic i.fa {
        display: block;
        font-size: 24px
    }

    .rec-icon.ExcelIcon {
        background-position: -374px -291px !important;
        height: 34px;
        width: 34px
    }

    .admin .mobileMenuBtns {
        border-spacing: 15px 13px
    }

    th, td {
        padding: 0 5px
    }

    .PageContent div:not(.clear) {
        width: inherit;
        margin-left: 25px;
        padding: 10px 5px
    }

    .sitesubcontent {
        display: block;
        padding: 10px 5px;
        box-sizing: border-box
    }

    #SiteBody > .sitesubcontent {
        margin: 0
    }

    .SiteSideMenu {
        margin: 0;
        display: block
    }

    #pageContent {
        overflow: auto;
        max-width: 100%
    }

        #pageContent > table td {
            white-space: nowrap
        }

    .card, .index-card {
        width: inherit;
        box-sizing: border-box;
        display: block;
        margin: 1rem 10px
    }

    #search-equips .card {
        width: 100%;
        margin: 0 0 1rem;
        padding-left: 0
    }

    .mobileMenuBtns h1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        max-width: 160px
    }

    .job-details .extra-info {
        text-align: right;
        float: none;
        display: block
    }

    td.pic {
        padding: 0 35px
    }

    .job-details .pic {
        width: 65px;
        height: 45px;
        margin-top: 5px
    }

    .largeBtn {
        width: 100%
    }

    .all-pics {
        overflow: auto;
        display: block
    }

    .SiteSideMenu .all-pics #picUploader {
        width: inherit
    }

    .SiteSideMenu .all-pics[data-haspic=true] #picUploader {
        left: 5px;
        bottom: 35%
    }

    .step-pics {
        right: 142px;
        top: 0
    }

        .step-pics .MachineImg img {
            height: 114px
        }

    .pic-preview .picZone {
        height: initial
    }

    #siteHeaderUserLinks span:not(:last-child) {
        display: none
    }

    #SiteFooter {
        display: none
    }

    .VbTabBlockInfo:not(.keep-tow-col) .datarow {
        width: 100%;
        float: none
    }

        .VbTabBlockInfo:not(.keep-tow-col) .datarow:not(.IsOk) {
            border-spacing: 0 9px
        }

    .datarow:not(.IsOk) > div:not(.MachineImg):not(.editing):not(.tcFirst) {
        display: block;
        width: inherit;
        line-height: 2
    }

    .select2-container {
        width: 100% !important
    }

    #fieldList .datarow.single.addfield .HtmlValue {
        max-width: unset
    }

    .datarow > .fieldlabel {
        margin-bottom: 5px
    }

    .keep-tow-col .fieldvalue, .keep-tow-col .tbl {
        width: 100% !important
    }

    .keep-tow-col .fieldlabel {
        white-space: nowrap
    }

    .keep-tow-col #kwUnit {
        width: 100%
    }

        .keep-tow-col #kwUnit .kwhp {
            width: calc(50% - 4px)
        }

            .keep-tow-col #kwUnit .kwhp .vals {
                padding: 5px 0 0;
                display: block
            }

    .job-pics > div {
        margin-bottom: 5px
    }

    .filterBox {
        transition: .7s;
        -webkit-transition: .7s
    }

        .filterBox.opened {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100vh;
            overflow: auto;
            background-color: #f2f2f2;
            padding: 10px;
            z-index: 10000;
            box-sizing: border-box
        }

            .filterBox.opened .list {
                position: relative;
                top: 0;
                margin-right: 5px;
                z-index: 999;
                background: #f2f2f2;
                border: none;
                box-shadow: none;
                max-height: initial;
                overflow: visible;
                padding: 8px 0;
                font-weight: normal
            }

        .filterBox .list {
            max-width: 100%
        }

    .PopFrame {
        position: fixed !important;
        width: inherit !important;
        top: 7px !important;
        height: unset !important;
        min-height: inherit !important;
        bottom: 7px;
        min-width: inherit !important;
        margin: 4px;
        left: 7px !important;
        right: 7px !important;
        padding: 0;
        box-sizing: border-box;
        overflow: auto;
        border: none;
        transform: unset
    }

        .PopFrame input[type="submit"], .PopFrame input[type="button"] {
            float: none;
            width: 100%;
            margin-top: 3px
        }

    #popPicPreview, #popImgmac-pic {
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important
    }

    #LoginForm {
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none
    }

    .RefubrishFieldsSet .VbTabBlockInfo {
        padding: 10px 3px
    }

    .tile-rows > ul li {
        line-height: 1.5
    }

        .tile-rows > ul li .delete {
            display: block
        }

    .scdh-zone .equip-row.card .extra {
        font-size: 12px
    }

    #LoginForm img {
        display: none
    }

    #LoginFormContent > div {
        float: none !important
    }

    #LoginForm #LoginFormContent {
        padding: 10px;
        margin: 0
    }

    .pic-preview .CropBtns input {
        margin-right: 0
    }

    .addFieldDiv .autocomplete {
        width: inherit
    }

    [data-page="/Admin/Refubrish"] #AddItemBtn {
        display: none
    }

    .searchFields[data-show="false"] .icon.toggle {
        background-position: -412px -292px !important
    }

    .searchFields {
        margin: 5px
    }

        .searchFields[data-show="true"] .icon.toggle {
            background-position: -133px -3px !important
        }

        .searchFields[data-show="true"] .VbTabBlockInfo, .searchFields[data-show="true"] .WhiteSep, .searchFields[data-show="true"] .HeaderActions {
            display: none
        }

        .searchFields[data-show="false"] .VbTabBlockInfo {
            display: block
        }

        .searchFields .HeaderActions {
            margin: 0
        }

    #StepsMenu .alert-div {
        margin: 0 8px 10px !important
    }

    .flex-container {
        column-count: 1
    }

        .flex-container .VbTabBlock.floated {
            display: block;
            width: auto;
            line-height: 2
        }

    .cards-in-date {
        margin-right: 0;
        display: block;
        text-align: center;
        box-sizing: border-box
    }

        .cards-in-date .card {
            margin: 15px 10px
        }

    .card {
        text-align: right;
        display: block;
        width: inherit;
        box-sizing: border-box
    }

    .card-title {
        font-size: larger
    }

    .card-date {
        margin-right: 0;
        width: auto;
        padding: 5px;
        font-size: 14px;
        margin-bottom: 5px;
        position: relative
    }

        .card-date .b {
            font-size: 16px
        }

    .PageContHeaderTitle > h1 {
        display: none
    }

    .HeaderActions {
        margin: 10px 0
    }

    .SiteWidth.alawys {
        width: inherit !important
    }

    .job-pics .job-equip-add {
        display: block;
        padding: 10px
    }

        .job-pics .job-equip-add .card-title {
            display: block;
            height: inherit;
            border-bottom-right-radius: 0;
            border-top-left-radius: 7px;
            margin-bottom: 10px;
            padding: 0
        }

            .job-pics .job-equip-add .card-title .tc:first-child {
                display: table-cell
            }

            .job-pics .job-equip-add .card-title i.fa {
                position: absolute;
                top: 0;
                left: 0;
                margin: 3px;
                font-size: 16px
            }

        .job-pics .job-equip-add .equip-pic .MachineImg {
            margin-left: 5px
        }

        .job-pics .job-equip-add .equip-pic:last-child .MachineImg, .job-pics .job-equip-add .equip-pic:last-child .MachineImg img {
            border-radius: 0
        }

    .MachineImg .delete {
        font-size: 14px
    }

    .scdh-zone .VbTabBlockHeader {
        display: none
    }

    .scdh #pageContent .scdh-menu {
        width: 100%;
        height: inherit;
        overflow: visible;
        margin: 0
    }

        .scdh #pageContent .scdh-menu .status-div h3 {
            font-size: 16px
        }

    .group h3:after, .status-div h3:after {
        content: ""
    }

    .group.toggle h3:after, .status-div.toggle h3:after {
        content: ""
    }

    .scdh #pageContent .scdh-menu .status-div .inner {
        overflow-x: auto
    }

    .scdh #pageContent .scdh-menu .status-div .status-div-cards {
        width: 100000px;
        padding: 10px 5px;
        display: none
    }

    .scdh #pageContent .scdh-menu .scrl {
        height: auto
    }

    .scdh #pageContent .scdh-menu .status-div.toggle .status-div-cards {
        display: block
    }

    .scdh #pageContent .scdh-menu .status-div .status-div-cards .equip-row {
        display: inline-block;
        width: 83vw;
        margin: 0
    }

    .scdh #pageContent .scdh-table, .scdh #pageContent .table-wrapper {
        width: 100% !important
    }

    .scdh #pageContent .scdh-table {
        margin-top: 1.5rem
    }

        .scdh #pageContent .scdh-table .time-picker .tc.b {
            font-size: .9em
        }

    .scdh-table table thead tr th:first-child {
        width: 89px
    }

    .scdh-table .card {
        font-size: 13px
    }

    .scdh-form.show {
        display: block
    }

    #scdh-table-top {
        background: #fff;
        align-items: unset;
        padding: 10px
    }

        #scdh-table-top #toggleLegend {
            position: absolute;
            top: 5px;
            left: 0;
            margin: 1rem;
            z-index: 1
        }

        #scdh-table-top .min-cards {
            display: none
        }

        #scdh-table-top .searchFields {
            padding-left: 5rem
        }

        #scdh-table-top .scnd-line {
            order: 2
        }

        #scdh-table-top .time-picker > div > div:not(.scnd-line):not(.searchFields) {
            width: 20%;
            text-align: center;
            margin: 10px 0
        }

    .legend {
        flex-wrap: wrap;
        background-color: #fff;
        padding: 10px;
        text-align: right
    }

        .legend > .label {
            width: 40%;
            margin-bottom: .5rem;
            text-align: right;
            white-space: nowrap;
            margin-left: 10px
        }

        .legend > :not(.label) {
            display: none !important
        }
}

.scdh-wrap .equip-row.card .menu {
    position: absolute;
    top: -.7rem;
    padding: 0;
    width: 100%;
    right: 0;
    display: block;
    display: flex
}

    .scdh-wrap .equip-row.card .menu span {
        transition: transform .4s ease-in-out;
        transition-delay: .4s;
        transform: scale(0);
        background: #05ade2;
        width: 2.5em;
        flex: 0 0 2.5em;
        font-weight: normal;
        font-size: .9em;
        height: 2.5em;
        line-height: 2.5em;
        text-align: center;
        display: inline-block;
        color: #fff;
        border-radius: 100%;
        margin-left: 5px;
        border: 1px solid transparent;
        box-shadow: 0 0 5px 3px rgba(0,0,0,.5)
    }

.scdh-wrap .equip-row.card:not(.ui-sortable-helper):hover .menu span, .scdh-wrap .equip-row.card:not(.ui-sortable-helper) .menu:hover span {
    transform: scale(1)
}

.scdh-wrap .equip-row.card .menu span:hover {
    border-color: #fff
}

.scdh-table .equip-row.card .menu span.delete-scdh {
    background: red
}

.scdh-menu .equip-row.card .menu span.delete-scdh {
    display: none
}

.scdh-wrap .equip-row.card .menu span.green {
    background: green
}

.perspective {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box
}

.perspective {
    position: relative
}

    .perspective.animate {
        background: #6b6d70 !important
    }

.container {
    background: #d9d9d9;
    min-height: 100%;
    position: relative;
    outline: 1px solid rgba(0,0,0,0);
    z-index: 10;
    -webkit-transform: translateZ(0) translateX(0) rotateY(0deg);
    transform: translateZ(0) translateX(0) rotateY(0deg)
}

    .container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        opacity: 0;
        background: rgba(0,0,0,.2);
        -webkit-transition: opacity .4s,height 0s .4s;
        transition: opacity .4s,height 0s .4s
    }

.menu-header {
    height: 130px;
    background: 0 -13px #161817;
    background-size: cover;
    display: none
}

    .menu-header .autocomplete {
        width: 6rem;
        padding-left: 5px;
        color: #000;
        background: none;
        margin-left: .5rem;
        box-shadow: none;
        display: inline-block;
        border: none
    }

        .menu-header .autocomplete.filterBox .inner:after {
            content: 'ˇ';
            position: absolute;
            left: 0;
            color: #fff;
            top: .5rem;
            font-size: 1.5rem
        }

        .menu-header .autocomplete.filterBox .inner .SelectBtn {
            display: none
        }

        .menu-header .autocomplete.filterBox .inner input::placeholder {
            color: #fff
        }

        .menu-header .autocomplete.filterBox .inner input .buttondefault {
            padding: 5px
        }

        .menu-header .autocomplete .list li {
            line-height: 2.5 !important;
            z-index: 10000
        }

.wrapper {
    position: relative
}

.component {
    margin: 0 auto;
    width: 60%;
    text-align: justify
}

.perspective.modalview {
    position: fixed;
    -webkit-perspective: 1500px;
    perspective: 1500px
}

    .perspective.modalview .menu-header {
        display: block
    }

.modalview .container {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.modalview .wrapper {
    -webkit-transform: translateZ(-1px)
}

.animate .container::after {
    opacity: 1;
    height: 101%;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.emp-div {
    position: absolute;
    top: 10%;
    right: 15%
}

a.plusBtn {
    display: inline-block;
    right: -2rem;
    top: 7px;
    position: absolute;
    margin: 0
}

.alert-div {
    background-color: #ffd1d1;
    border: 1px solid red;
    padding: 10px
}

    .alert-div ul {
        list-style: initial;
        padding-right: 20px
    }

#StepsMenu .alert-div {
    margin-bottom: 10px;
    margin-left: 20px
}

.edit-mode {
    overflow: auto;
    max-height: calc(100vh - 100px)
}

.stage-icons {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.edit-mode .toggle.edit, .edit-mode:not(.done-mode) .viewing, .view-mode .toggle.view, .view-mode .Step[data-id="-2"], .view-mode .editing, .done-mode .HeaderActions, .done-mode .editing {
    display: none !important
}

.done-mode.sitesubcontent {
    border: 3px solid green
}

.done-mode.failed.sitesubcontent {
    border: 3px solid red
}

.done-mode .PageContHeaderTitle h2 {
    color: green
}

.done-mode.failed .PageContHeaderTitle h2 {
    color: red
}

[data-canedit='False'] .tile-rows > ul li .delete:not(.can) {
    display: none
}

.PageContHeader.tbl {
    border-spacing: 0;
    min-height: 50px;
    margin: 0
}

.PageContHeaderTitle.editing {
    float: none
}

    .PageContHeaderTitle.editing input {
        font-size: large;
        color: #05ade2;
        width: 100%;
        display: inline
    }

        .PageContHeaderTitle.editing input::-webkit-input-placeholder {
            color: #d3d3d3;
            unicode-bidi: plaintext
        }

    .PageContHeaderTitle.editing .field-validation-error {
        position: absolute;
        top: 12px;
        left: 5px;
        font-size: inherit
    }

@media screen and (max-width:77em) {
    .outer-nav.top {
        top: 15%
    }

    .outer-nav.bottom {
        bottom: 15%
    }
}

@media screen and (max-width:36.625em),screen and (max-height:41.75em) {
    .anim.menu-header {
        height: 120px
    }

        .anim.menu-header .siteHeaderLogo {
            display: none
        }

    .outer-nav.top {
        top: 5%
    }

    .outer-nav.bottom {
        bottom: 5%
    }

    .outer-nav.horizontal a {
        display: block;
        text-align: center;
        margin: 0
    }
}

@media screen and (max-height:31.6em) {
    .anim {
        margin-bottom: 20px
    }
}

.handle {
    color: #d3d3d3;
    cursor: move
}

[data-transaction], #TransactionTypeID[value] + input {
    white-space: nowrap
}

    [data-transaction]:before, #TransactionTypeID[value] + input:before {
        content: '';
        display: inline-block;
        margin-left: 5px;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent
    }

[data-transaction="1730"]:before, #TransactionTypeID[value="1730"] + input:before {
    border-bottom: 9px solid green;
    color: #fff
}

[data-transaction="1730"] {
    color: green
}

[data-transaction="1731"]:before, #TransactionTypeID[value="1731"] + input:before {
    border-top: 9px solid #8b0000;
    color: #fff
}

[data-transaction="1731"] {
    color: #8b0000
}

[data-transaction="1732"]:before, #TransactionTypeID[value="1732"] + input:before {
    border-top: 9px solid red;
    color: #fff
}

[data-transaction="1732"] {
    color: red
}

#stock {
    display: none
}

[data-type='1731'] #stock, [data-type='1732'] #stock {
    display: block
}

.hasInventoryId[data-type='1730'] .inventoryItems, .hasInventoryId[data-type='0'] .inventoryItems, [data-type]:not(.hasInventoryId) .inventoryItems, .hasInventoryId[data-type='1731'] .inventoryItemField, .hasInventoryId[data-type='1732'] .inventoryItemField {
    display: none
}

#purchase-tile {
    background: #fff;
    padding: 10px;
    display: none
}

    #purchase-tile .tile-row {
        line-height: 1.5;
        display: block;
        padding: 0 3px;
        position: relative
    }

.searchFields .hasValue, .select2-box.hasValue + span .field {
    background-color: #cce6f1 !important
}

.searchFields hr {
    background-color: #fff
}

.in-edit {
    color: transparent
}

body.touch input, body.touch input[name] + input, body.touch .select2-selection, body.touch textarea {
    font-size: 1.2em;
    padding: 10px
}

body.touch [type="button"] {
    font-size: 1.2em;
    padding: 1em
}

bod.touch .spinner > input {
    padding: 5px
}

body.touch .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 6px;
    left: 2px
}

bod.touch .datarow {
    margin-bottom: 10px
}

bod.touch .filterBox .list ul li {
    line-height: 3.5;
    padding: 0 10px;
    font-size: 1.2em
}

bod.touch .select2-results__option {
    padding: 1rem 7px
}

bod.touch .switch-container label {
    padding: 12px 0
}

#dashboard *:hover {
    text-decoration: none
}

#dashboard > div:first-child {
    position: sticky;
    top: 60px;
    z-index: 1000;
    background: #d9d9d9;
    padding: 10px 20px;
    margin: 0 -30px
}

#dashboard .nav-menu {
    display: flex;
    align-items: center
}

    #dashboard .nav-menu li {
        color: #05ade2;
        cursor: pointer;
        padding: 5px
    }

        #dashboard .nav-menu li > span {
            font-size: 1.2em
        }

        #dashboard .nav-menu li.selected {
            font-weight: bold;
            border-bottom: 3px solid
        }

#dashboard .d-group {
    margin-top: 1rem
}

    #dashboard .d-group h3 {
        color: #a7a7a7;
        margin-right: .5rem;
        margin-bottom: .5rem
    }

#dashboard .flex-container {
    display: flex;
    flex-wrap: wrap;
    column-count: unset;
    min-height: 6rem;
    margin-right: -.5rem;
    margin-left: -.5rem
}

    #dashboard .flex-container:empty:after {
        content: 'גרור אריחים לכאן';
        text-align: center;
        display: block;
        width: 100%;
        padding: 2rem;
        color: #a7a7a7
    }

#dashboard.editable .flex-container {
    border: 1px dashed rgba(167,167,167,.8);
    border-radius: 3px;
    min-height: 15rem
}

#dashboard .col {
    flex: 1 1 33%;
    max-width: 100%;
    padding: 0;
    margin: 0
}

#dashboard .nav-menu button {
    padding: 3px 5px;
    min-width: unset;
    width: unset
}

#dashboard:not(.editable) .nav-menu button {
    display: none
}

#dashboard .ui-state-highlight, #dashboard .col .tile {
    background: #fff;
    box-shadow: 0 6px 0 0 rgba(0,0,0,.01),0 15px 32px 0 rgba(0,0,0,.06);
    border-radius: 3px;
    min-height: 15rem;
    margin: .5rem
}

#dashboard .ui-state-highlight {
    background: rgba(167,167,167,.2);
    height: 24rem;
    box-shadow: inset 0 0 8px 8px rgba(0,0,0,.05),0 15px 32px 0 rgba(0,0,0,.05)
}

#dashboard .ui-sortable-helper {
    border: none
}

#dashboard .VbTabBlockHeader {
    border: none;
    padding-bottom: 0
}

#dashboard .BlockHeaderTitle {
    font-size: 1.5em
}

#dashboard .VbTabBlockHeader {
    line-height: 1.2
}

    #dashboard .VbTabBlockHeader p {
        padding-left: 2rem
    }

#dashboard .pvtUi tr {
    background-color: transparent
}

#dashboard .pvtUi td {
    border: none
}

#dashboard #OpenRefubrishByStatus {
    width: 100%
}

#QuoteTrackBehind .tile {
    overflow: auto
}

#dashboard h5 {
    font-size: 3.5rem;
    font-weight: normal;
    line-height: 1
}

#dashboard label {
    display: block;
    font-size: 1.3rem;
    font-weight: bold
}

#dashboard .tile {
    display: flex;
    flex-direction: column;
    height: calc(100% - 1rem)
}

    #dashboard .tile .inner, #dashboard .tile .loader-wrap {
        height: 100% !important
    }

#TaskBehind {
    padding: .5rem;
    overflow: hidden;
    flex: 1 1 50%
}

    #TaskBehind .VbTabBlockInfo {
        display: flex
    }

    #TaskBehind .lastes {
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        max-height: 20rem;
        height: 100%;
        flex: 1
    }

        #TaskBehind .lastes > div {
            margin-left: 1rem;
            flex: 1;
            min-width: 12rem;
            display: inline-flex;
            flex-wrap: wrap;
            align-content: flex-start
        }

.je-late {
    padding-left: 1rem;
    flex: 1 1 12rem
}

#TaskBehind .totals {
    display: flex;
    margin-left: 1rem;
    flex-direction: column;
    align-content: stretch
}

    #TaskBehind .totals h2 {
        color: red
    }

#TaskBehind .je-late > div {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px
}

    #TaskBehind .je-late > div > a {
        margin-left: .5rem;
        background: #ffebeb;
        padding: 3px;
        margin-top: 5px;
        border-radius: 3px
    }

#TaskBehind .je-late h4 {
    display: block;
    flex: 1 1 100%
}

#TaskBehind h3 {
    color: #000;
    flex: 1 1 100%;
    margin-bottom: 5px
}

.level {
    margin: 5px;
    padding: .5rem;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 6px 0 0 rgba(0,0,0,.01),0 15px 32px 0 rgba(0,0,0,.06)
}

    .level > div {
        box-sizing: border-box
    }

        .level > div:first-child {
            flex: 1 1 100%
        }

    .level.l1 {
        background: #efefef
    }

        .level.l1 h2 {
            font-size: 1.5rem
        }

    .level.l2 {
        background: #e0e0e0
    }

        .level.l2 h2 {
            font-size: 1.3rem
        }

    .level.l3 {
        background: #d2d2d2
    }

        .level.l3 h2 {
            font-size: 1.2rem
        }

    .level h3 {
        font-size: 1em;
        color: gray;
        padding: 1rem 1rem 0;
        text-align: right
    }

@media(max-device-width:480px) {
    .level.l2, .level.l3 {
        flex: 1 1 100% !important
    }

    .level.l2 {
        margin-bottom: 1rem
    }

    .flex-container.row > .col {
        max-height: unset
    }
}

.slow {
    color: #ff9800
}

.offline {
    background: #e91e63;
    color: #fff
}

.online {
    background: #4caf50;
    color: #fff
}

#SupplyThisMonth, #JobsInOutMon {
    overflow: hidden
}

    #JobsInOutMon .tile {
        position: unset
    }

    #JobsInOutMon .inner {
        overflow: hidden
    }

#vi {
    font-size: 8vh;
    position: absolute;
    left: -22px;
    bottom: -9px;
    opacity: .15
}

.center-gauge {
    margin: 0 auto;
    position: absolute;
    right: 50%;
    transform: translate(50%,-50%);
    top: 55%;
    font-size: 2em;
    text-align: center;
    display: flex;
    align-items: center
}

    .center-gauge > i {
        margin: 0 .5rem
    }

.side-gauge {
    position: absolute;
    display: flex;
    bottom: 0;
    width: 50rem;
    right: 50%;
    transform: translateX(50%);
    font-size: 2rem;
    justify-content: space-evenly
}

#OTD .bottom-info, #SupplyThisMonth .bottom-info {
    text-align: center;
    font-size: 1.5em;
    margin: 1rem 0;
    display: flex;
    justify-content: center
}

    #OTD .bottom-info > *, #SupplyThisMonth .bottom-info > * {
        margin: 0 .25rem
    }

#StatusTimeline {
    flex: 1 1 100%
}

    #StatusTimeline .VbTabBlockInfo {
        display: flex;
        flex-wrap: wrap
    }

    #StatusTimeline .canvas-wrap {
        height: 2rem;
        width: 4rem;
        position: absolute;
        bottom: .5rem;
        left: .5rem
    }

.sts-bottom {
    margin-top: 1rem;
    text-align: right;
    padding: 10px;
    position: relative
}

#StatusTimeline {
    max-height: unset !important
}

    #StatusTimeline [data-status] {
        padding-top: 10px;
        flex: 1 1 100%;
        text-align: center
    }

        #StatusTimeline [data-status] > * {
            color: #fff
        }

        #StatusTimeline [data-status] h5 {
            font-size: 3rem;
            margin-bottom: 5px
        }

    #StatusTimeline h4 small {
        font-size: 1.2rem
    }

    #StatusTimeline .agg {
        font-size: 1rem
    }

    #StatusTimeline [data-status='473'] {
        background-color: #00b0e6
    }

    #StatusTimeline [data-status='541'] {
        background-color: hsl(31,100%,45%)
    }

    #StatusTimeline [data-status='544'] {
        background-color: gray
    }

    #StatusTimeline [data-status='480'] {
        background-color: #00b0e6
    }

    #StatusTimeline [data-status='1000'] {
        background-color: hsl(265,100%,45%)
    }

.canvas-legend {
    text-align: center;
    margin: 1rem 0
}

    .canvas-legend > span {
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle
    }

    .canvas-legend .box {
        display: inline-block;
        vertical-align: middle;
        padding: 5px 15px;
        margin-left: 5px
    }

#dashboard .col[data-size='full'], #dashboard .col[data-size='c2-3'], #dashboard .col[data-size='c1-3'] {
    flex: 1 1 100%
}

@media(max-device-width:1024px) {
    .content-wrapper {
        padding: 0 15px !important
    }

    #TaskBehind {
        max-height: 90vh !important
    }

        #TaskBehind .VbTabBlockInfo {
            display: block
        }

        #TaskBehind .je-late > div {
            max-width: unset
        }
}

@media(min-device-width:786px) {
    #dashboard .col[data-size='c1-3'] {
        flex: 1 1 33%
    }

    #dashboard.in-drag .col[data-size='c1-3'] {
        max-width: calc(33% - 2px)
    }

    #dashboard .col[data-size='c2-3'] {
        flex: 1 1 66%
    }

    #dashboard.in-drag .col[data-size='c2-3'] {
        max-width: calc(66% - 2px)
    }

    #OpenTasksByStation .tile, #dashboard .col[data-size='c1-3'] .tile {
        min-height: 24rem
    }

    #JobsBySize {
        max-width: 31%
    }

    #StatusTimeline [data-status] {
        flex: 1 1 20%;
        min-width: 12rem
    }

    #StatusTimeline .VbTabBlockInfo {
        flex-wrap: nowrap
    }
}

@media(max-device-width:480px) {
    .content-wrapper {
        padding: 10px !important
    }

    #dashboard {
        margin: 0
    }

        #dashboard .col {
            flex-basis: 100%;
            max-height: 80vh
        }

        #dashboard .BlockHeaderTitle {
            font-size: 20px
        }

        #dashboard #OpenRefubrishByStatus, #dashboard #OpenRefubrishByStatus .tile {
            height: unset;
            max-height: unset
        }
}

#dashboard #LastNotifications .lastes {
    overflow: auto;
    max-height: 20rem
}

    #dashboard #LastNotifications .lastes + div {
        padding: 1rem .5rem
    }

    #dashboard #LastNotifications .lastes .media {
        padding: .5rem 0
    }

.grid.header {
    font-weight: bold
}

.file-name {
    display: flex;
    align-items: center
}

    .file-name:hover, .file-name > a:hover {
        color: #05ade2
    }

    .file-name > * {
        margin-left: .5rem
    }

.grid {
    display: grid;
    grid-template-columns: auto 3rem 5rem 10rem;
    column-gap: 1rem;
    margin-bottom: .5rem;
    align-items: center
}

.checkin-row label {
    display: none
}

.checkin-row {
    margin-top: 1rem
}