.icon-Workforce:before {
    content: "\78";
}

.prefix_color {
    color: #BEBEBE !important;
}

.wrap-notes {
    word-wrap: break-word;
}

.box-size-b {
    box-sizing: border-box;
}

.saved-price-block {
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    z-index: 5;
}

    .saved-price-block span:not(.ignore) {
        background-color: #808080;
        padding: 1px 10px;
        color: #fff;
        font-size: 40px;
        font-weight: 100;
        display: block;
    }

.saved-price-block {
    right: 3%;
    top: 10px;
}

.cost-item-price-block {
    position: absolute;
    text-align: center;
    z-index: 5;
    right: 0px;
    top: 10px;
    min-width: 100px;
}

    .cost-item-price-block.invoiced-top {
        top: 54px;
    }

    .cost-item-price-block span {
        background-color: #808080;
        padding: 1px 10px;
        color: #fff;
        font-size: 40px;
        font-weight: 100;
        display: block;
    }

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

.new-job-template-customer {
    display: none;
}

@font-face {
    font-family: 'proxima-nova';
    src: url('mark_simonson_-_proxima_nova_regular_0-webfont.eot');
    src: url('mark_simonson_-_proxima_nova_regular_0-webfont.eot?#iefix') format('embedded-opentype'), url('mark_simonson_-_proxima_nova_regular_0-webfont.woff2') format('woff2'), url('mark_simonson_-_proxima_nova_regular_0-webfont.woff') format('woff'), url('mark_simonson_-_proxima_nova_regular_0-webfont.ttf') format('truetype'), url('mark_simonson_-_proxima_nova_regular_0-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'proxima-nova';
    src: url('light-webfont.ttf');
    src: url('light-webfont.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'proxima-nova-thin';
    src: url('mark_simonson_-_proxima_nova_thin-webfont.ttf');
    src: url('mark_simonson_-_proxima_nova_thin-webfont.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'proxima-nova-bold';
    src: url('proxima_nova_bold.otf');
    src: url('proxima_nova_bold.otf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

html, body {
    width: 100%;
    min-width: 320px;
    float: left;
    position: relative;
    background-color: #fff;
    font-family: 'proxima-nova', helvetica;
    font-weight: 300;
    font-size: 15px;
    -webkit-font-smoothing: subpixel-antialiased;
}

    body.browser-ios {
        font-weight: normal;
    }

a {
    text-decoration: none;
    color: inherit;
    font-family: 'proxima-nova', helvetica;
}

ul {
    list-style: none;
}

select {
    font-family: 'proxima-nova', helvetica;
    cursor: pointer;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    font-size: 1px;
}

input {
    font-family: 'proxima-nova', helvetica;
    font-size: 15px;
}

textarea {
    font-family: 'proxima-nova', helvetica;
    font-size: 15px;
    resize: vertical;
}

button {
    cursor: pointer;
    font-size: 15px;
    font-family: "proxima-nova",sans-serif;
}

img {
    background-color: transparent;
}

i, span {
    background-color: transparent;
}

.global-disable-selecting, .bricks-panel, .schedulable-brick, .markerLabel, .white_content, .retouchable-trigger, .skill-tag {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

[contentEditable="true"] {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

    [contentEditable="true"]:empty:before {
        content: attr(data-phold);
    }

.pos-rel {
    position: relative;
}

.pos-abs {
    position: absolute;
}

.full99line {
    height: 1px;
    float: left;
    background-color: #e6e6e6;
    width: 100%;
}

.full99lineBlack {
    height: 1px;
    float: left;
    background-color: #000000;
    width: 100%;
}

.white-butt, .gray-butt, .orange-butt, .red-butt, .green-butt, .grey-connect-disable-butt {
    padding: 9px 40px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.small-butt {
    padding: 2px 5px;
    font-size: 12px;
}

.red {
    color: #ff0000;
}

.grey-connect-disable-butt {
    background-color: #b3b3b3
}

.green-butt {
    background-color: #8cc63e;
    position: relative;
}

    .green-butt .active-check {
        position: absolute;
        top: -24px;
        left: 0;
        width: 100%;
    }

.orange-butt.tiny {
    padding: 9px 20px;
}

.orange-butt.extratiny {
    padding: 5px 10px;
}

.gray-butt.tiny {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.white-butt {
    background-color: #fff;
    color: #808080;
}

    .white-butt.fontf6 {
        color: #f16522;
    }

.gray-butt {
    background-color: #999999;
}

.orange-butt {
    background-color: #f16522;
}

.red-butt {
    background-color: #ff1d25 !important;
}

.red-border {
    border-color: red !important;
}

.orange-butt.white-o {
    background-color: transparent;
    color: #f16522;
}

    .orange-butt.white-o.ff4 {
        color: #999;
    }

.all-inherit {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: inherit;
}

.gr-br-sec {
    width: 72px;
    height: 30px;
    border: 1px solid #d9d9d9;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    background-color: #fff;
    overflow: hidden;
}

    .gr-br-sec i {
        pointer-events: none;
        font-size: 9px;
        top: 11px;
        right: 5px;
        color: #666666;
        position: absolute;
    }

    .gr-br-sec select {
        width: 100%;
        height: 30px;
        padding-left: 6px;
        float: left;
        border: none;
        font-size: 15px;
    }

        .gr-br-sec select:disabled {
            background-color: lightgrey;
        }

            .gr-br-sec select:disabled + i {
                background-color: lightgrey;
            }

.wrapall {
    word-wrap: break-word;
}

.full-wrap {
    width: 1024px;
    margin: 0px auto;
    float: none;
}

.full-width {
    width: 100%;
    float: left;
    position: relative;
}

.half-width {
    width: 50% !important;
}

.inner-half {
    width: 48%;
}

.fleft {
    float: left;
}

.fright {
    float: right;
}

.fnone {
    float: left;
}

.dis-block {
    display: block;
}

.dis-iblock {
    display: inline-block;
}

.dis-iflex {
    display: inline-flex;
}

.dis-inline {
    display: inline;
}

.dis-no {
    display: none;
}

.no-padding {
    padding: 0;
}

.no-bottom-padding {
    padding-bottom: 0 !important;
}

.mt1 {
    margin-top: 1px;
}

.mt11 {
    margin-top: 11px;
}

.mt12 {
    margin-top: 12px;
}

.mt14 {
    margin-top: 14px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt90 {
    margin-top: 90px;
}

.mt20 {
    margin-top: 20px;
}

.mt25 {
    margin-top: 25px;
}

.ml8 {
    margin-left: 8px;
}

.ml15 {
    margin-left: 15px;
}

.ml28 {
    margin-left: 28px;
}

.ml25 {
    margin-left: 25px;
}

.ml24 {
    margin-left: 24px;
}

.ml34 {
    margin-left: 34px;
}

.ml115 {
    margin-left: 115px;
}

.ml116 {
    margin-left: 116px;
}

.ml117 {
    margin-left: 117px;
}

.ml120 {
    margin-left: 120px;
}

.ml3 {
    margin-left: 3px;
}

.mb12 {
    margin-bottom: 12px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb16 {
    margin-bottom: 16px;
}

.mt16 {
    margin-top: 16px;
}

.mt22 {
    margin-top: 22px;
}

.mt14 {
    margin-top: 14px;
}

.mb22 {
    margin-bottom: 22px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mr10 {
    margin-right: 10px;
}

.mr14 {
    margin-right: 14px;
}

.mr8 {
    margin-right: 8px;
}

.mr2 {
    margin-right: 2px;
}

.mr4 {
    margin-right: 4px;
}

.mr5 {
    margin-right: 5px;
}

.mr16 {
    margin-right: 16px;
}

.mr13 {
    margin-right: 13px;
}

.mr20 {
    margin-right: 20px;
}

.mr24 {
    margin-right: 24px;
}

.mr30 {
    margin-right: 30px;
}

.mr35 {
    margin-right: 35px;
}

.mr40 {
    margin-right: 40px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb8 {
    margin-bottom: 8px;
}

.mt5 {
    margin-top: 5px;
}

.mt45 {
    margin-top: 45px;
}

.mt6 {
    margin-top: 6px;
}

.mt7 {
    margin-top: 7px;
}

.mt10 {
    margin-top: 10px;
}

.mt50 {
    margin-top: 50px;
}

.mt80 {
    margin-top: 80px;
}

.mt100 {
    margin-top: 100px;
}

.ml-25 {
    margin-left: -25px;
}

.ml3 {
    margin-left: 3px;
}

.ml12 {
    margin-left: 12px;
}

.ml14 {
    margin-left: 14px;
}

.ml11 {
    margin-left: 11px;
}

.ml10 {
    margin-left: 10px;
}

.ml16 {
    margin-left: 16px;
}

.ml5 {
    margin-left: 5px;
}

.ml6 {
    margin-left: 6px;
}

.ml60 {
    margin-left: 60px;
}

.ml20 {
    margin-left: 20px;
}

.ml25 {
    margin-left: 25px;
}

.ml30 {
    margin-left: 30px;
}

.mt2 {
    margin-top: 2px;
}

.mt3 {
    margin-top: 3px;
}

.mb3 {
    margin-bottom: 3px;
}

.mt0 {
    margin-top: 0 !important;
}

.pt5 {
    padding-top: 5px;
}

.pt10 {
    padding-top: 10px;
}

.pt15 {
    padding-top: 15px;
}

.pt20 {
    padding-top: 20px;
}

.annul-pt {
    padding-top: 0 !important;
}

.annul-pb {
    padding-bottom: 0 !important;
}

.mb-4 {
    position: relative;
    bottom: -4px;
}

.mb-9 {
    position: relative;
    bottom: -9px;
}

.mb-14 {
    position: relative;
    bottom: -14px;
}

.mb-2 {
    position: relative;
    bottom: -2px;
}

.mb-3 {
    position: relative;
    bottom: -3px;
}

.mt-2 {
    position: relative;
    top: -2px;
}

.mt-9 {
    position: relative;
    top: -9px;
}

.mt-11 {
    position: relative;
    top: -11px;
}

.v-middle {
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.ph12 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.full-width.vp4p {
    width: 92%;
    padding-left: 4%;
    padding-right: 4%;
}

.min160 {
    min-width: 160px;
    display: inline-block;
}

.min125 {
    min-width: 125px;
    display: inline-block;
}

.min130 {
    min-width: 130px;
    display: inline-block;
}

.min100, .min102 {
    min-width: 102px;
    display: inline-block;
}

.min90 {
    min-width: 82px;
    display: inline-block;
}

.purple-sq, .blue-sq, .green-sq, .orange-sq, .red-sq, .gray-sq, .brown-sq, .white-sq, .yellow-sq, .aqua-sq {
    display: block;
    width: 20px;
    height: 10px;
}

.purple-sq {
    background-color: #a5409f;
}

.blue-sq {
    background-color: #3fa9f5;
}

.green-sq {
    background-color: #42be5c;
}

.orange-sq {
    background-color: #f7931e;
}

.red-sq {
    background-color: #ff0000;
}

.gray-sq {
    background-color: #a8a8a8;
}

.brown-sq {
    background-color: #875019;
}

.white-sq {
    background-color: transparent;
}

.yellow-sq {
    background-color: #f7e037;
}

.aqua-sq {
    background-color: #008AE6;
}

.pending-cr, .scheduled-cr, .in-progress-cr, .completed-cr, .cancelled-cr, .gray-cr, .travelling-cr, .on-route-cr, .attention-cr, .on-hold-cr, .orange-cr, .purple-cr, .yellow-cr, .green-cr, .red-cr, .gray-cr, .blue-cr, .aqua-cr, .brown-cr, .white-cr {
    width: 14px;
    height: 14px;
    display: block;
    border-radius: 15px;
}

.status-bubble {
    width: 14px;
    height: 14px;
    display: block;
    border-radius: 15px;
}

.orange-cr {
    background-color: #f9a326;
}

.purple-cr {
    background-color: #be4a9b;
}

.yellow-cr {
    background-color: #f7e037;
}

.green-cr {
    background-color: #9ccd50;
}

.red-cr {
    background-color: #ff2600;
}

.gray-cr {
    background-color: #999999;
}

.blue-cr {
    background-color: #000080;
}

.aqua-cr {
    background-color: #008AE6;
}

.brown-cr {
    background-color: #875019;
}

.white-cr {
    background-color: transparent;
}

.scheduled-cr {
    background-color: #f9a326;
}

.pending-cr {
    background-color: #875019;
}

.in-progress-cr {
    background-color: #be4a9b;
}

.completed-cr {
    background-color: #9ccd50;
}

.cancelled-cr {
    background-color: #ff2600;
}

.gray-cr {
    background-color: #999999;
}

.on-route-cr, .travelling-cr {
    background-color: #008AE6;
}

.attention-cr {
    background-color: #f7e037;
}

.on-hold-cr {
    background-color: #999999;
}

.yell-warning {
    padding-left: 25px;
    background: url('../assests/images/highq/error-pic.svg') left top no-repeat;
}

.red-dang {
    color: #ff0000;
    background: url('../assests/images/highq/red-dang.svg') center right no-repeat;
    padding-right: 20px;
}

    .red-dang.red-dang-job {
        background-position: center left;
        background-repeat: no-repeat;
        padding-left: 20px;
    }

.red-dang-reminder {
    color: #ff0000;
    background: url('../assests/images/highq/overdue_reminder_tick.svg') center no-repeat;
    padding-right: 55px;
}

@media screen and (max-width:767px) {
    .red-dang-reminder {
        padding-right: 0;
    }
}

.red-dang-reminder-font {
    color: #ff0000;
}

#menu-bar ul li {
    position: relative;
}

.red-dang-reminder-menu {
    color: #fff;
    background: url('../assests/images/overdue_reminder.png') center left no-repeat;
    background-size: cover;
    text-align: center;
    width: 19px !important;
    height: 18px;
    position: absolute;
    top: 3px;
    right: 18px;
    margin-right: 5px;
    font-size: 10px;
    font-weight: 600;
    line-height: 20px;
}

.red-dang-stock-menu {
    color: #fff;
    background: url('../assests/images/highq/overdue_reminder.svg') center left no-repeat;
    background-size: cover;
    text-align: center;
    width: 19px !important;
    height: 18px;
    position: absolute;
    top: 7px;
    right: 18px;
    margin-right: 5px;
    font-size: 10px;
    font-weight: 600;
    line-height: 20px;
}

.red-dang-work-menu {
    color: #fff;
    background: url('../assests/images/highq/overdue_reminder.svg') center left no-repeat;
    background-size: cover;
    text-align: center;
    width: 19px !important;
    height: 18px;
    float: right;
    font-size: 10px;
    font-weight: 600;
    line-height: 20px;
    margin-right: 13px;
    margin-top: 5px;
}

.red-dang-stock-work-menu {
    color: #fff;
    background: url('../assests/images/highq/overdue_reminder.svg') center left no-repeat;
    background-size: cover;
    text-align: center;
    width: 19px !important;
    height: 18px;
    float: left;
    right: 18px;
    font-size: 10px;
    font-weight: 600;
    line-height: 20px;
    margin-top: -11px;
    margin-left: -20px;
}

.red-dang-reminder-menu-3 {
    width: 21px !important;
    height: 20px;
    line-height: 22px;
}

.red-dang-reminder-menu-4 {
    width: 26px !important;
    height: 25px;
    line-height: 27px;
    font-size: 9px;
    top: 0px;
    right: 14px;
}

#menu-bar ul li:hover .red-dang-reminder-menu {
    right: 17px;
}

#menu-bar ul li:hover .red-dang-stock-work-menu {
    right: 17px;
}

#menu-bar ul li:hover .red-dang-stock-menu {
    right: 17px;
}

#menu-bar ul li:hover .red-dang-reminder-menu-3 {
    right: 17px;
}

#menu-bar ul li:hover .red-dang-reminder-menu-4 {
    top: 0px;
    right: 13px;
}

.red-dang.rdl {
    color: #000;
    background-position: center left;
    padding-left: 20px;
}

.re-button {
    width: 15px;
    height: 18px;
    background: url('../assests/images/highq/re-icon.svg') center center no-repeat;
}

.x-butt {
    width: 21px;
    height: 21px;
    background: url('../assests/images/highq/x-icon.svg') center center no-repeat;
    cursor: pointer;
}

.minus-icon {
    width: 15px;
    height: 15px;
    background: url('../assests/images/highq/minus-icon.svg') center center no-repeat;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    margin-left: 5px;
}

.plus-icon {
    width: 15px;
    height: 15px;
    background: url('../assests/images/highq/plus-icon.svg') center center no-repeat;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    margin-left: 5px;
}

    .plus-icon.static {
        position: relative;
        display: inline-block;
        margin-top: 0;
        margin-bottom: -2px;
    }

.minus-icon.ftable {
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -9px;
}

.bordered {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.width60 {
    width: 60px;
}

.width54 {
    width: 54px;
}

.font-upper {
    text-transform: uppercase;
}

.font-bold {
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
}

.font-semi-bold {
    font-weight: 500;
}

.font-400 {
    font-weight: 400;
}

.font-thin {
    font-weight: 100;
}

.font80 {
    color: #808080;
}

.font88 {
    color: #888888;
}

.font4d {
    color: #4d4d4d;
}

.font00 {
    color: #000000;
}

.font66 {
    color: #666666;
}

.fontf6 {
    color: #f16522;
}

.font-ok {
    color: #51ef56;
}

.fontb3 {
    color: #b3b3b3;
}

.fontd3 {
    color: #d3d3d3;
}

.fontff {
    color: #ff0000;
}

.font99 {
    color: #999;
}

.fontwh {
    color: #fff;
}

.center-text {
    text-align: center;
}

.right-text {
    text-align: right;
}

.left-text {
    text-align: left !important;
}

.justify-text {
    text-align: justify;
}

.italic {
    font-style: italic;
}

.font15 {
    font-size: 15px;
}

.font14 {
    font-size: 15px;
}

.font14s {
    font-size: 14px;
}

.font13 {
    font-size: 13px;
}

.font12 {
    font-size: 12px;
}

.font11 {
    font-size: 11px;
}

.font10 {
    font-size: 10px;
}

.font17 {
    font-size: 17px;
}

.font16 {
    font-size: 15px;
}

.font16s {
    font-size: 16px;
}

.font18 {
    font-size: 18px;
}

.font20 {
    font-size: 20px;
}

.font22 {
    font-size: 22px;
}

.font25 {
    font-size: 25px;
}

.font31 {
    font-size: 31px;
}

.font35 {
    font-size: 35px;
}

.font28 {
    font-size: 28px;
}

.font77 {
    font-size: 77px;
    line-height: 64px;
}

.font-initial {
    font-size: initial;
}

.big-fp {
    font-size: 28px;
    color: #4d4d4d;
}

.fontf0 {
    color: #ff0000;
}

.font-italic {
    font-style: italic;
}

.font-normal {
    font-weight: 300;
}

.lh19 {
    line-height: 21px;
}

.font-proxima {
    font-family: 'proxima-nova', helvetica;
}

.actual-h2 {
    font-size: 25px;
    color: #4d4d4d;
    font-weight: 300;
}

    .actual-h2 b {
        font-size: 25px;
        color: #4d4d4d;
        font-weight: 300;
    }

input.actual-h2 {
    font-size: 22px;
}

.little-big-font {
    font-size: 30px;
    font-weight: 300;
    color: #4d4d4d;
}

#header {
    background-color: #f2f2f2;
    padding: 0px 0 5px 0px;
    height: 55px;
}

#logo {
    margin-left: 20px;
    display: block;
    margin-top: 13px;
}

    #logo img {
        float: left;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        max-width: 80px;
        max-height: 48px;
    }

    #logo div {
        font-size: 20px;
        color: #4d4d4d;
        font-family: 'proxima-nova', helvetica;
        margin-top: 9px;
        float: left;
    }

.top-left-corner-logo {
    width: 96px;
    background-color: #C7C6C6;
    height: 60px;
    float: left;
    top: 0;
    left: 0;
}

    .top-left-corner-logo img {
        max-height: 22px;
        max-width: 55px;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        position: relative;
    }

.top-left-corner-logo-big {
    background-color: #C7C6C6;
    height: 60px;
    float: left;
    top: 0;
    left: 0;
}

    .top-left-corner-logo-big img {
        max-height: 48px;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        position: relative;
    }

.top-left-corner-portal-logo {
    height: 88px;
}

@media screen and (max-width:868px) {
    #logo div {
        display: none;
    }
}

#top-q-mark {
    width: 24px;
    height: 24px;
    display: block;
    margin-top: 0px;
    padding-top: 17px;
    margin-right: 0px;
    padding-right: 50px;
    float: right;
    position: relative;
    top: 0px;
    text-align: right;
    font-size: 24px;
    color: #666666;
}

a#question-mark {
    display: none !important;
}

#top-q-mark > a#question-mark {
    width: 24px;
    height: 24px;
    display: block;
    position: relative;
    z-index: 10010 !important;
}

#top-q-mark:hover a#question-mark {
    top: -24px;
    display: block !important;
    color: #ffffff;
}

#top-q-mark:hover .black-upper-dropdowns {
    display: block;
}

.user-tr {
    margin-right: 0px;
    padding-right: 30px;
    color: #666;
    font-size: 15px;
    margin-top: 0px;
    padding-top: 7px;
    position: relative;
    top: 0px;
}

    .user-tr > .just-tr-inner {
        padding-right: 20px;
        background: url('../assests/images/highq/down-arrow.svg') right center no-repeat;
        float: left;
        position: relative;
        z-index: 10010 !important;
        cursor: pointer;
    }

    .user-tr .just-tr-inner img {
        border-radius: 50% !important;
        width: 45px;
        height: 45px;
    }

    .user-tr:hover > .just-tr-inner {
        background-image: url('../assests/images/highq/white-arrow-top.svg');
    }

    .user-tr > .just-tr-inner > div.fright a {
        color: #333;
    }

    .user-tr > .just-tr-inner > div.fright {
        margin-right: 12px;
        margin-top: 6px;
    }

        .user-tr > .just-tr-inner > div.fright > a:first-child {
            font-size: 15px;
        }

        .user-tr > .just-tr-inner > div.fright > a:last-child {
            font-size: 13px;
        }

    .user-tr:hover > .just-tr-inner > div.fright a {
        color: #fff;
    }

    .user-tr:hover > .black-upper-dropdowns {
        display: block;
    }

#under-main {
    background-color: #4d4d4d;
}

#menu-bar {
    background-color: #4d4d4d;
    width: 96px;
    padding-top: 46px;
}

    #menu-bar:after {
        content: ' ';
        width: 96px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        background: #4d4d4d;
        z-index: -1;
    }

.menu-switch {
    float: left;
    display: block;
    height: 35px;
    width: 37px;
    background: transparent;
    background: url('../assests/images/highq/hamburger-menu-gray.svg') center center no-repeat #4d4d4d;
    background-size: 70%;
    display: none;
}

#menu-bar li {
    width: 100%;
    float: left;
}

    #menu-bar li a {
        display: block;
        width: 90%;
        text-align: center;
        color: #e6e6e6;
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 15px;
        margin-left: 5%;
        margin-right: 5%;
    }

#menu-bar .separator {
    margin-top: 40px;
}

    #menu-bar .separator a {
        border-top: 2px solid #808080;
    }

#menu-bar li:hover:not(.app-version), #menu-bar li.active {
    background-color: #808080;
}

#menu-bar li:hover:not(.app-version), #menu-bar li .active {
    background-color: #808080;
    width: 95px !important;
    margin-left: 0px !important;
}

#menu-bar li a img {
    display: inline-block;
    max-width: 100%;
}

#menu-bar li a span {
    display: block;
    width: 100%;
}

#main-page {
    width: calc(100% - 96px);
    background-color: #fff;
    padding-bottom: 50px;
    min-height: 100vh;
}

    #main-page.fleft.full-width {
        width: 100%;
    }

.login-halfs-wrapper {
    width: 750px;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.login-halfs {
    width: 100%;
    max-width: 360px;
    border: 1px solid #b3b3b3;
    margin: 10px auto;
    border-radius: 8px;
    padding: 40px 4%;
    min-height: 432px;
    box-sizing: border-box;
}

    .login-halfs * {
        box-sizing: border-box;
    }

#top-menu-site {
    height: 35px;
}

    #top-menu-site li.menu-site-li {
        float: left;
        display: block;
        height: 35px;
        background-color: #4d4d4d;
    }

        #top-menu-site li.menu-site-li:not(:first-child) {
            margin-left: 10px;
        }

        #top-menu-site li.menu-site-li a {
            display: block;
            font-size: 15px;
            padding: 10px 30px 7px;
            color: #fff;
        }


            #top-menu-site li.menu-site-li a:hover, #top-menu-site li.menu-site-li a.active {
                background-color: #f16522;
                color: #fff;
            }

.tab-pane-site {
    margin-top: 10px;
}

#top-menu {
    background-color: #f16522;
    height: 35px;
}

    #top-menu li {
        position: relative;
        float: left;
        display: block;
        height: 35px;
    }

        #top-menu li a {
            display: block;
            margin: 5px 5px 0;
            font-size: 15px;
            padding: 5px 30px 7px;
            color: #fff;
        }

    #top-menu ul {
        padding-left: 60px;
    }


    #top-menu li a:hover, #top-menu li a.active {
        background-color: #fff;
        color: #f16522;
        padding-bottom: 11px;
    }

.addit-menu, .addit-menu-1 {
    width: 190px;
    margin-left: 26px;
}

    .addit-menu h2 {
        padding-left: 24px;
        margin-left: 20px;
        background: url('../assests/images/highq/head-left-arrow.svg') left center no-repeat;
    }

    .addit-menu-1 h2 {
        padding-left: 24px;
        margin-left: 20px;
    }

    .addit-menu li, .addit-menu-1 li, .custom-popup-menu li {
        width: 100%;
        float: left;
    }

        .addit-menu li a, .addit-menu-1 li a, .custom-popup-menu li a {
            display: block;
            border-bottom: 1px solid #e6e6e6;
            padding: 12px 0 12px 10px;
            color: #000;
        }

        .custom-popup-menu li a {
            padding-right: 10px;
        }

        .addit-menu li:first-child a, .addit-menu-1 li:first-child a, .custom-popup-menu li:first-child a {
            margin-top: 14px;
            border-top: 1px solid #e6e6e6;
        }

        .addit-menu li a:hover, .addit-menu li a.active, .addit-menu-1 li a:hover, .addit-menu-1 li a.active {
            background-color: #f2f2f2;
        }

        .custom-popup-menu li a:hover, .custom-popup-menu li a.active {
            background-color: #808080;
            border-color: #808080;
            color: #fff;
        }

.main-min {
    width: 600px;
}

    .main-min.bigger {
        width: 800px;
    }

.thead {
    border-bottom: 1px solid #999999;
    padding-bottom: 4px;
}

.tbody {
    border-bottom: 1px solid #e6e6e6;
    padding: 10px 0;
}

.w37 {
    width: 37%;
}

.w36 {
    width: 36%;
}

.w40 {
    width: 40%;
}

.w55 {
    width: 55%;
}

.w100 { /*1 elm width*/
    width: 100%;
}

.w50 { /*2 elm width*/
    width: 50%;
}

.w33 { /*3 elm width*/
    width: 33%;
}

.w25 { /*4 elm width*/
    width: 24.5%;
}

.w20 { /*5 elm width*/
    width: 19.5%;
}

.w16 { /*6 elm width*/
    width: 16%;
}

.w60 {
    width: 60%;
}

.w65 {
    width: 64%;
}

.w75 {
    width: 75%;
}

.w57 {
    width: 57%;
}

.w76 {
    width: 76%;
}

.w35 {
    width: 34%;
}

.w30 {
    width: 30%;
}

.w27 {
    width: 27%;
}

.w21 {
    width: 21%;
}

.w18 {
    width: 18%;
}

.w19 {
    width: 19%;
}

.w17 {
    width: 17%;
}

.w15 {
    width: 15%;
}

.w14 {
    width: 14%;
}

.w13 {
    width: 13%;
}

.w12 {
    width: 12%;
}

.w10 {
    width: 10%;
}

.w7 {
    width: 7%;
}

.w5 {
    width: 5%;
}

.w1 {
    width: 1%;
}

.w30 {
    width: 31.3%;
    padding-right: 2%;
}

.customer-nvc .tbody, .customer-nvc-sub .tbody {
    padding: 18px 0;
}

.customer-nvc .thead, .customer-nvc-sub .thead {
    padding-bottom: 8px;
}

.customer-nvc .w37 {
    width: 34%;
}

.customer-nvc .w15 {
    width: 18%;
}

.customer-nvc-sub .w37 {
    width: 32%;
}

.customer-nvc-sub .w21 {
    width: 26%;
}

.pound-symbol {
    position: relative;
}

    .pound-symbol:after {
        content: "£";
        color: #333;
        position: absolute;
        top: 3px;
        bottom: 1px;
        left: 1px;
        background-color: transparent;
        border-radius: 4px;
        font-size: 15px;
        font-weight: 600;
        padding: 4px 8px 0 8px;
        pointer-events: none;
    }

    .pound-symbol input {
        padding-left: 26px !important;
    }

.add-button {
    width: calc(94% - 2px);
    margin: 20px 3% 0 3%;
    border: 1px solid #cccccc;
    border-radius: 6px;
    background-color: #e6e6e6;
    font-weight: 600;
    padding: 10px 0;
    cursor: pointer;
}

    .add-button.full {
        width: 100%;
        margin: 14px 0 0 0;
    }

.total {
    background-color: #808080;
    color: #fff;
    padding: 6px 30px;
    font-size: 34px;
}

    .total span {
        font-size: 18px;
        position: relative;
        top: -5px;
        margin-right: 5px;
    }

.nvc-drop {
    background: url('../assests/images/highq/white-arrow-down.svg') center right 20px no-repeat #f16522;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

    .nvc-drop.active {
        background-image: url('../assests/images/highq/white-arrow-top.svg');
    }

.invoice-dropable {
    width: calc(94% - 2px);
    border: 1px solid #b3b3b3;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 20px 3%;
    position: relative;
    top: -4px;
}

.down-arrow {
    padding-right: 17px;
    background: url('../assests/images/down-arrow.png') no-repeat 98% 50%;
}

.top-bott-arr {
    padding-right: 17px;
    background: url('../assests/images/highq/top-down-arrow.svg') right center no-repeat;
}

    .top-bott-arr.loopd {
        background: url('../assests/images/highq/search-loop.svg') right center no-repeat;
    }

    .top-bott-arr.orange {
        background-image: url('../assests/images/highq/top-bott-orange.svg');
    }

.calendar-field {
    background: url('../assests/images/highq/calendar-icon.svg') right center no-repeat;
}

.red-left-arrow {
    background: url('../assests/images/highq/red-arrow.svg') left center no-repeat;
    padding-left: 14px;
}



.looped-field {
    background: url('../assests/images/highq/search-loop.svg') right 14px center no-repeat;
    width: calc(95% - 14px) !important;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .looped-field.makeme-fully {
        width: calc(100% - 52px) !important;
        padding-right: 40px;
        padding-left: 10px;
        margin-left: 0;
        margin-right: 0;
    }

.search-container {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

    .search-container .search-btn {
        position: absolute;
        top: 7px;
        right: 8px;
        cursor: pointer;
    }

    .search-container .looped-field {
        background: none;
    }

.gr-br-field {
    border: 1px solid #d9d9d9;
    /*overflow:hidden;*/
    border-radius: 4px;
    height: 34px;
    width: 140px;
    padding-left: 5px;
    padding-right: 5px;
}

.gr-br-field-con {
    border: 1px solid #d9d9d9;
    /*overflow:hidden;*/
    border-radius: 4px;
    height: 34px;
    width: 140px;
    padding-left: 5px;
    padding-right: 5px;
}

.gr-br-field-con-sel {
    border: 1px solid #d9d9d9;
    /*overflow:hidden;*/
    border-radius: 4px;
    height: 34px;
    width: 140px;
    padding-left: 5px;
    padding-right: 5px;
}

.gr-br-field.post_billing_quote_time {
    border: none;
}

.gr-br-field.post_billing_customer_number {
    border: none;
}

.gr-br-field#category-template-name {
    width: 30%;
}

.gr-br-field#new-category-name {
    width: 96%;
}

input[type="text"].gr-br-field {
    padding-left: 9px;
    text-overflow: ellipsis;
    padding-right: 9px;
    box-sizing: border-box;
}

.permis input {
    cursor: pointer;
}

input[type="text"].gr-br-field-con {
    padding-left: 9px;
    padding-right: 9px;
}

input[type="text"].gr-br-field-con-sel {
    padding-left: 9px;
    padding-right: 9px;
}


.gr-br-field.is-full {
    width: calc(100% - 12px);
}

.gr-br-field.smally {
    height: 28px;
    border-width: 1px;
    font-weight: 600;
}

.gr-br-field.top-bott-arr {
    background-position: center right 10px;
}

textarea.gr-br-field {
    padding-top: 6px;
    padding-bottom: 6px;
    resize: vertical;
}

.gr-br-field-con.smally {
    height: 28px;
    border-width: 1px;
    font-weight: 600;
}

.gr-br-field-con.top-bott-arr {
    background-position: center right 10px;
}

textarea.gr-br-field-con {
    padding-top: 6px;
    padding-bottom: 6px;
}


.gr-br-field-con-sel.smally {
    height: 28px;
    border-width: 1px;
    font-weight: 600;
}

.gr-br-field-con-sel.top-bott-arr {
    background-position: center right 10px;
}

textarea.gr-br-field-con-sel {
    padding-top: 6px;
    padding-bottom: 6px;
}

.invoice-dropable .gr-br-sec {
    border-width: 1px;
    border-color: #e6e6e6;
    display: inline-block;
    width: 90px;
}

.top-min {
    position: relative;
    top: -10px;
}

.top-min-less {
    position: relative;
    top: -3px;
}

.add-file {
    height: 36px;
    padding: 5px 26px 5px 50px;
    color: #fff;
    display: block;
    border-radius: 6px;
    cursor: pointer;
}

    .add-file#import-csv-btn {
        display: inline-block;
    }

.spec-note {
    width: calc(96% - 2px);
    border: 1px solid #d9d9d9;
    padding: 10px 2%;
    border-radius: 6px;
}

.package-module * {
    box-sizing: border-box;
}

.package-module .gr-br-sec {
    width: 100%;
}

.adv-popup, .adv-popup-con, .adv-popup-con-sel, .adv-big-popup {
    max-width: 500px;
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    top: calc(100% + 2px);
    left: 0;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    background-color: #fff;
    z-index: 12;
    padding-bottom: 10px;
}

    .adv-big-popup.bit-small {
        width: 505px;
    }

.adv-big-popup {
    padding: 10px 14px;
    width: 580px;
}

.adv-popup.template-dropdown, .adv-popup.customer-dropdown, .adv-popup.contract-dropdown, .adv-popup-con.template-dropdown, .adv-popup-con.customer-dropdown, .adv-popup-con-sel.template-dropdown, .adv-popup-con-sel.customer-dropdown {
    width: 308px;
}

.adv-popup-con.service-item-dropdown, .adv-popup-con-sel.service-item-dropdown {
    width: 273px;
}

.gr-br-field.cost_item {
    width: calc(100% - 20px);
}

.pop-inner {
    width: 100%;
    float: left;
    padding: 6px 4%;
    cursor: default;
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .pop-inner .italic {
        font-weight: 600;
        font-size: 12px;
    }

    .pop-inner:hover {
        background-color: #808080;
        color: #fff;
    }

.see-map {
    background: url('../assests/images/highq/gray-pointer.svg') left center no-repeat;
    padding-left: 19px;
    min-height: 19px;
    position: relative;
    float: right;
    top: -20px;
    margin-bottom: 10px;
}

.job-list-wrap {
    width: 1190px;
    float: left;
    margin-left: 30px;
}

.job-list-anchors {
    width: 100%;
    float: left;
}

    .job-list-anchors.full {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

.job-per-anchor {
    padding: 6px 8px;
    border-radius: 6px;
    margin-right: 5px;
}

.job-list-anchors.full .job-per-anchor {
    padding: 8px 8px;
    border-radius: 6px;
    margin-right: 16px;
    margin-bottom: 8px;
}

.job-per-anchor:hover, .job-per-anchor.active {
    box-shadow: 0 0 0 1px #e6e6e6;
}

.job-search-tools {
    width: 98%;
    padding: 8px 1% 8px 1%;
    background-color: #e6e6e6;
    height: 35px;
}

    .job-search-tools .gray-butt {
        padding: 8px 32px;
        height: 35px;
    }

    .job-search-tools .add-file {
        padding-top: 8px;
        padding-bottom: 8px;
        height: 35px;
    }

    .job-search-tools .looped-field {
        margin: 0;
        background-color: #fff;
        border-color: #cccccc;
        height: 33px;
        width: 220px !important;
    }

.jw-table {
    font-size: 15px;
    width: 98%;
    padding: 10px 1%;
    border-top: 1px solid #dcdede;
}

.job-status-list-item {
    width: 71%;
    padding: 10px 1%;
}

.quote-status-list-item {
    width: 71%;
    padding: 10px 1%;
}

.job-status-list-item-portal {
    padding: 9px 1%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.quote-status-list-item-portal {
    padding: 9px 1%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.job-status-list-item-portal > * {
    box-sizing: border-box;
}

.quote-status-list-item-portal > * {
    box-sizing: border-box;
}

.job-status-list-item .status-container {
    width: 85%;
}

.quote-status-list-item .status-container {
    width: 85%;
}

.job-status-list-item-portal .status-container {
    width: auto;
}

.quote-status-list-item-portal .status-container {
    width: auto;
}

.job-status-list-item .status-container .icon-Jobs-status, .job-status-list-item-portal .status-container .icon-Jobs-status {
    height: 13px;
    width: 13px;
    position: relative;
    border-radius: 15px;
    box-sizing: border-box;
}

.quote-status-list-item .status-container .icon-Jobs-status, .quote-status-list-item-portal .status-container .icon-Jobs-status {
    height: 13px;
    width: 13px;
    border-radius: 15px;
    box-sizing: border-box;
    position: relative;
}

.job-status-list-item .status-container .icon-Jobs-status:hover, .job-status-list-item-portal .status-container .icon-Jobs-status:hover {
    cursor: pointer;
}

.quote-status-list-item .status-container .icon-Jobs-status:hover, .quote-status-list-item-portal .status-container .icon-Jobs-status:hover {
    cursor: pointer;
}

i#settingsColorPicker:before {
    content: '';
}

.icon-Jobs-status .status-color-picker {
    width: 100%;
    height: 100%;
    opacity: 0;
    top: 2px;
    left: 2px;
    position: absolute;
    cursor: pointer;
}

.job-status-list-item .status-container .gr-br-field {
    width: 75%;
}

.quote-status-list-item .status-container .gr-br-field {
    width: 75%;
}

.job-status-list-item .status-container .status-description {
    font-size: 12px;
    padding-right: 14%;
    float: right;
    padding-top: 3px;
}

.quote-status-list-item .status-container .status-description {
    font-size: 12px;
    padding-right: 14%;
    float: right;
    padding-top: 3px;
}

.retouchable-area .job-status-list-item:hover {
    background-color: #EBEFEE;
}

.retouchable-area .quote-status-list-item:hover {
    background-color: #EBEFEE;
}

.save-job-statuses {
    padding-right: 65px;
    padding-top: 5px;
}

.save-quote-statuses {
    padding-right: 65px;
    padding-top: 5px;
}

.jheading {
    border-top: none;
    font-size: 13px;
}

.jw-table:not(.jheading) {
    font-size: 15px;
}

    .jw-table:not(.jheading):hover {
        background-color: #ebf0ef;
    }

.jw2-1, .jw2-2, .jw2-3, .jw2-4, .jw2-5, .jw2-6, .jw2-7, .jw2-8, .jw2-9 {
    padding-left: 0.3%;
    padding-right: 0.3%;
}

.jw1 {
    width: 2%;
    min-height: 1px;
}

.jw2 {
    width: 96%;
    min-height: 1px;
}

.jw2-1 {
    width: 13%;
    min-height: 1px;
}

.jw2-2 {
    width: 2%;
    min-height: 1px;
}

.jw2-3 {
    width: 8%;
    min-height: 1px;
}

.jw2-4 {
    width: 8%;
    min-height: 1px;
}

.jw2-5 {
    width: 15%;
    min-height: 1px;
}

.jw2-6 {
    width: 15%;
    min-height: 1px;
}

.jw2-7 {
    width: 14%;
    min-height: 1px;
}

.jw2-8 {
    width: 12%;
    min-height: 1px;
}

.jw2-9 {
    width: 7%;
    min-height: 1px;
}

    .jw2-9.cus-job {
        width: 6%;
    }

.jw2-1.cus-job {
    width: 21.8%;
}

.jw2-300 {
    width: 32%;
}

.jw9 .orange-butt {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.jws-10 {
    width: 10%;
    height: 100%;
}

.jws-13 {
    width: 13%;
    height: 100%;
}

.jws-15 {
    width: 15%;
    height: 100%;
}

.jws-20 {
    width: 20%;
    height: 100%;
}

.jws-22 {
    width: 22%;
    height: 100%;
}

.jws-25 {
    width: 26%;
    padding-right: 1%;
    height: 100%;
}

.jws-24 {
    width: 24%;
    padding-right: 1%;
    height: 100%;
}

.jws-30 {
    width: 34%;
    padding-right: 1%;
    height: 100%;
}

.jws-45 {
    width: 44%;
    padding-right: 4%;
    height: 100%;
}

.jws-50 {
    width: 50%;
    padding-right: 1%;
    height: 100%;
}

.jws-55 {
    width: 54%;
    padding-right: 4%;
    height: 100%;
}

.jws-75 {
    width: 70%;
    padding-right: 1%;
    height: 100%;
}

.jws-24.right-moveme {
    padding-right: 4%;
}

.right-moveme {
    min-height: 20px;
}

.jw-table:hover .right-moveme {
    background: url('../assests/images/highq/movement-cross.svg') right center no-repeat;
}

.trspr-dropdown {
    width: 80px;
    height: 24px;
    display: inline-block;
    position: relative;
}

    .trspr-dropdown.fontf6 select {
        color: #f16522;
    }

    .trspr-dropdown select {
        font-size: 15px;
        width: 100%;
        height: 24px;
        -moz-appearance: none;
        -webkit-appearance: none;
        -o-appearance: none;
        -ms-appearance: none;
        appearance: none;
        padding-top: 2px;
    }

    .trspr-dropdown i {
        width: 18px;
        height: 24px;
        background: url('../assests/images/highq/top-bott-orange.svg') center center no-repeat #fff;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
    }

.sec-menu-additional {
    display: none;
    margin-top: 5px;
}

.dropdown-items {
    border: 1px solid #f6f6f6;
    width: 100%;
    margin-top: 2px;
    border-radius: 6px;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    display: none;
    background-color: #fff;
    z-index: 14;
}

.letdrop {
    width: 92%;
    margin-left: 4%;
    margin-right: 4%;
    float: left;
    height: 1px;
    background-color: #f6f6f6;
}

.then-half {
    width: 100%;
    float: left;
}

    .then-half.none {
        display: none;
    }

.very-small-font {
    font-size: 11px;
}

.nonenone {
    display: none;
}

.jw2-9 .orange-butt {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.sending-buttons.gray {
    background-color: #999;
}

.clean-plus {
    width: 24px;
    height: 24px;
    font-size: 23px;
    display: inline-block;
    float: left;
    margin-left: 14px;
}

.accepted-icon-white {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url('../assests/images/button-accepted.png') center center no-repeat;
    float: left;
    margin-left: 14px;
}

.rejected-icon-white {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url('../assests/images/button-rejected.png') center center no-repeat;
    float: left;
    margin-left: 14px;
}

.check-marker {
    width: 21px;
    height: 21px;
    background: url('../assests/images/highq/check-marker.svg') center center no-repeat;
    display: inline-block;
}

.check-note {
    cursor: pointer;
}

    .check-note .check-marker {
        display: none;
    }

    .check-note.active .check-marker {
        width: 18px;
        height: 18px;
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
        right: -25px;
        display: inline-block;
    }

.edited-objects {
    float: none;
    display: inline-block;
    width: 100px;
    margin-right: 10px !important;
}

.editable-obj, .edited-objects {
    position: relative;
}

    .editable-obj .check-marker, .edited-objects .check-marker {
        position: absolute;
        top: 5px;
        right: 7px;
        display: none;
        cursor: pointer;
        z-index: 12;
    }

    .editable-obj.dimed.let-edit .check-marker {
        display: block;
    }

    .edited-objects .check-marker {
        display: block;
        background: url('../assests/images/highq/white-x.svg') center center no-repeat #999;
        border-radius: 10px;
    }

.photo_detail {
    width: 100px;
    float: left;
    margin-right: 10px;
    height: 130px;
    margin-bottom: 10px;
    overflow: hidden;
}

    .photo_detail .photo_img_content {
        height: 100px;
        overflow: hidden;
        text-align: center;
        background-size: cover;
        background-position: 50% 0% !important;
        background-repeat: no-repeat;
        width: 100px;
    }

        .photo_detail .photo_img_content img {
            max-width: 100px;
            max-height: 100px;
            display: none;
        }

    .photo_detail .object-date {
        display: none;
    }

.clean-download {
    width: 19px;
    height: 22px;
    background: url('../assests/images/highq/clean-download.svg') center center no-repeat;
    display: inline-block;
    float: left;
    margin-left: 14px;
    position: relative;
    bottom: -1px;
}

.clean-upload {
    width: 18px;
    height: 23px;
    background: url('../assests/images/highq/clean-upload.svg') center center no-repeat;
    display: inline-block;
    float: left;
    margin-left: 14px;
}

.clean-send {
    width: 30px;
    height: 24px;
    background: url('../assests/images/highq/clean-send.svg') center bottom no-repeat;
    display: inline-block;
    float: left;
    margin-left: 14px;
    position: relative;
    bottom: -2px;
}

.little-top {
    display: inline-block;
    position: relative;
    bottom: -3px;
    float: left;
    margin-left: 14px;
}

    .little-top.ml24 {
        margin-left: 24px;
    }

    .little-top.fnope {
        margin-left: 6px;
    }

        .little-top.fnope.ml24 {
            margin-left: 17px;
        }

.buttons-separator-line {
    width: 90%;
    margin-left: 5%;
    height: 1px;
    background-color: #bcbcbc;
    float: left;
    margin-top: 14px;
    margin-bottom: 6px;
}

    .buttons-separator-line.bold {
        height: 1px;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

.bold-border-text {
    height: auto !important;
}

.bold-border-textarea {
    border: 1px solid #bcbcbc;
    border-radius: 4px;
    width: calc(96% - 4px);
    padding: 8px 2%;
    height: 60px;
}

    .bold-border-textarea.fleft.dis-block.mt5 {
        width: 96%;
        margin-left: 0px;
    }

    .bold-border-textarea.tiny {
        border-width: 1px;
        width: calc(96% - 2px);
        border-color: #ccc;
        box-sizing: border-box;
    }

.right-slide-out {
    width: 200px;
    position: fixed;
    right: -200px;
    top: 88px;
    background: #f2f2f2;
    padding-bottom: 12px;
    padding-top: 4px;
    border-bottom-left-radius: 8px;
}

#right-plus {
    width: 35px;
    height: 36px;
    background: url('../assests/images/right-plus.png') center right 16px no-repeat #f2f2f2;
    position: fixed;
    right: 0;
    top: 120px;
    z-index: 20;
    padding: 36px;
    border-radius: 8px 0 0 8px;
    display: block;
    cursor: pointer;
}

.block-switcher-reminder {
    width: 70px;
    height: 34px;
    background: red;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

    .block-switcher-reminder.active {
        background-color: #7DCD00;
    }

        .block-switcher-reminder.active span {
            margin-Left: 35px;
        }

    .block-switcher-reminder span {
        width: 50%;
        height: 34px;
        display: block;
        background-color: #fff;
        border-radius: 3px;
    }

.block-switcher {
    width: 70px;
    height: 34px;
    background: #ccc;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

    .block-switcher.active {
        background-color: #ed1c24;
    }

    .block-switcher span {
        width: 50%;
        height: 34px;
        display: block;
        background-color: #fff;
        border-radius: 3px;
    }

.acc-pagenum, .acc-pagenav, .acc-pagesize {
    display: inline-block;
    list-style: none;
}

.acc-pagenum {
    border: 1px solid #b3b3b3;
    border-radius: 4px;
}

.acc-pagenav, .acc-pagesize {
    margin-left: 40px;
}

    .acc-pagenum li, .acc-pagenav li, .acc-pagesize li {
        display: block;
        float: left;
        cursor: pointer;
    }

        .acc-pagenum li a, .acc-pagenav li a, .acc-pagesize li a {
            padding: 8px 16px;
            color: #808080;
            display: block;
        }

        .acc-pagenum li a {
            border-right: 1px solid #b3b3b3;
        }

        .acc-pagenum li:last-child a {
            border-right: 0;
        }

        .acc-pagenav li a, .acc-pagesize li a {
            border: 1px solid #b3b3b3;
            border-radius: 4px;
            margin-right: 8px;
        }

            .acc-pagenum li a:hover, .acc-pagenav li a:hover, .acc-pagenav li a.active, .acc-pagesize a:hover, .acc-pagesize li a.active {
                background: #b3b3b3;
                color: #fff;
            }

.customer-nvc .rmvbl, .customer-nvc-sub .rmvbl {
    display: none;
    width: 31%;
    float: left;
}

.dropable-page {
    display: none;
}

.nvc-popupable-wrap {
    position: relative;
    cursor: default;
}

    .nvc-popupable-wrap.work_company_name {
        cursor: pointer;
        display: block;
        margin-bottom: -10px;
    }

.nvc-popupable {
    background-color: #fff;
    width: 170px;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    border-radius: 5px;
    border: 1px solid #d9d9d9;
    font-weight: 300;
    padding-bottom: 8px;
    display: none;
}
    /*.nvc-popupable.sub-sub{top:0;left:100%}*/
    .nvc-popupable.active {
        display: block;
    }

.halfbl-f.none {
    display: none;
}

.line-appearable {
    display: none;
}

.w-fsml {
    width: 340px;
}

.styled-radio {
    width: 7px;
    height: 7px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #333;
    background-color: #fff;
    border-radius: 7px;
}

    .styled-radio.checked {
        background-color: #333;
    }

    .styled-radio input {
        display: none;
    }

.alfbt {
    font-size: 18px;
    padding: 11px 11px 9px 11px;
}

    .alfbt:hover {
        background-color: #ddd;
    }

    .alfbt.active {
        color: #f16522;
    }

.formitable {
    margin-top: -2px;
    display: none;
}

.j-files {
    width: 95px;
    margin-right: 5px;
}

    .j-files > p {
        overflow: hidden;
    }

    .j-files img {
        max-width: 100%;
        height: auto;
    }

    .j-files.dimed:before {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background: rgba(0,0,0,0.2);
        z-index: 10;
    }

    .j-files.dimed > p {
        text-shadow: 0 0 0 #000;
    }

.upload-popup-full-big {
    width: 85%;
}

.upload-popup-big {
    width: 60%;
}

.upload-popup-small {
    width: 40%;
}

.upload-popup-50 {
    width: 50%;
}

.upload-popup-35 {
    width: 35%;
}

.upload-popup-15 {
    width: 15%;
}

.private-checkbox {
    text-align: center;
    padding-top: 10px;
}

.upload-popup-wrapper .deleter {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: url('../assests/images/highq/white-x.svg') center center no-repeat #999;
    margin-top: 7px;
    cursor: pointer;
}

.upload-popup-image {
    width: 36px;
    height: 36px;
    overflow: hidden;
}

    .upload-popup-image img {
        width: auto;
        max-width: 100%;
        height: auto;
    }

.upload-popup-name-holder {
    width: 120px;
    word-break: break-all;
}

/** scheduler **/

.scheduler-wrap {
    width: calc(100% - 40px);
    padding-left: 30px;
}


#google-map-canvas {
    height: 400px;
}

#mapZoom {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 20;
}

#mapZoomOut, #mapZoomIn, #mapZoomToFit {
    background: url('../assests/images/highq/zoom-in-plus.svg') center center no-repeat #f16522;
    margin-bottom: 1px;
    display: block;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

#mapZoomOut {
    background-image: url('../assests/images/highq/zoom-out-minus.svg');
}

#mapSelect, #mapStartScheduling, #trafficLines {
    position: absolute;
    z-index: 20;
    top: 12px;
    right: 12px;
    padding: 9px 14px;
    background: #f16522;
    color: #fff;
    font-size: 15px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 300 !important;
}

#mapStartScheduling {
    top: 57px;
    display: none;
}

    #mapStartScheduling.active {
        display: block;
    }

.gmnoprint {
    opacity: 0.4;
}

.markerLabel {
    opacity: 1 !important;
    overflow: visible !important;
    font-family: 'proxima-nova', helvetica !important;
}

.scheduled, .schedulable {
    position: absolute;
    width: 46px;
    text-align: center;
    height: 30px;
    background-color: #4d4d4d;
    box-shadow: 0 0 1px 1px #fff, 0 0 6px -2px #000;
    left: -5px;
    top: -48px;
    border-radius: 3px;
}

.schedulable {
    background-color: #fff;
    box-shadow: 0 0 1px 1px #4d4d4d;
}

    .scheduled .mapMarkerNum, .schedulable .mapMarkerNum {
        font-size: 15px;
        font-weight: 600;
        margin-top: 7px;
        color: #fff;
    }

    .schedulable .mapMarkerNum {
        margin-top: 5px;
        color: #4d4d4d;
        line-height: 11px;
    }

    .schedulable .mapMarkerNumEmpty {
        margin-top: 10px;
    }

    .schedulable .mapMarkerDec {
        font-size: 9px;
        margin-top: 1px;
    }

    .scheduled:before, .schedulable:before {
        content: ' ';
        width: 21px;
        height: 20px;
        position: absolute;
        left: 13px;
        bottom: -20px;
        background: url('../assests/images/highq/markerBlackArrow.svg') center center no-repeat;
    }

    .schedulable:before {
        width: 21px;
        height: 20px;
        background-image: url('../assests/images/highq/markerWhiteArrow.svg');
        bottom: -20px;
        left: 6px;
    }

    .schedulable.batch-process.active:before {
        background-image: url('../assests/images/highq/markerWhiteArrow-active.svg');
    }

.person {
    width: 46px;
    height: 46px;
    position: absolute;
    left: -6px;
    top: -63px;
}

    .person > .mapMarkerImg {
        width: 44px;
        height: 34px;
        border: 1px solid #fff;
        border-radius: 22px;
        display: block;
        background-position: center center;
        background-repeat: no-repeat;
        position: relative;
        z-index: 200;
        box-shadow: -4px 0 10px -8px #000;
        color: #fff;
        font-size: 20px;
        padding-top: 10px;
        font-family: 'proxima-nova', helvetica;
        font-weight: 300;
        text-align: center;
    }

    .person > .mapMarkerName {
        position: absolute;
        left: 23px;
        top: 4px;
        padding: 0 7px 0 26px;
        height: 36px;
        background-color: #fff;
        box-shadow: 0 0 7px -5px #000;
    }

.mapMarkerFirstname, .mapMarkerLasttname {
    display: block;
    font-size: 12px;
    color: #4d4d4d;
    font-weight: 600;
    padding: 1px 2px;
    white-space: nowrap;
    line-height: 12px;
}

.mapMarkerFirstname {
    margin-top: 4px;
}

.person:before {
    content: ' ';
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: 20px solid #fff;
    position: absolute;
    bottom: -25px;
    left: 16px;
    -webkit-filter: drop-shadow(0 0 3px rgba(0,0,0,0.3));
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.3));
}

#scheduler-canvas {
    overflow: visible !important;
    border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    width: calc(100% - 2px);
    overflow: hidden;
}

.anulize {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}

.dhx_cal_navline {
    background-color: #e6e6e6;
    width: 98% !important;
    height: auto !important;
    padding: 10px 1% !important;
    float: left;
    bottom: -1px !important;
}

.dhx_cal_date {
    float: left;
    font-family: 'proxima-nova', helvetica !important;
    color: #666666;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 30px;
    bottom: -2px !important;
    width: auto !important;
    padding-right: 10px;
    text-align: left !important;
    cursor: pointer;
    display: inline-flex;
    margin-top: -10px;
}

    .dhx_cal_date > div {
        position: relative;
        top: -6px;
        display: inline-block;
        margin-top: 8px;
    }

        .dhx_cal_date > div > small {
            position: relative;
            top: -14px;
            font-size: 14px !important;
            color: #999999;
        }

        .dhx_cal_date > div:first-child {
            margin-right: 8px;
        }

        .dhx_cal_date > div:last-child {
            margin-left: 8px;
        }

.dhx_cal_tab, .dhx_cal_prev_button, .dhx_cal_next_button, .dhx_cal_today_button {
    position: relative;
}

.dhx_cal_tab, .dhx_cal_prev_button, .dhx_cal_next_button, .dhx_cal_today_button {
    background-color: #fff;
    color: #666666;
    font-family: 'proxima-nova', helvetica !important;
    border-color: #cccccc;
    font-weight: 300 !important;
    padding-top: 1px !important;
    font-size: 15px !important;
}

    .dhx_cal_tab.active, .dhx_cal_prev_button.active, .dhx_cal_next_button.active, .dhx_cal_today_button.active {
        background-color: #f16522;
        color: #fff;
        text-shadow: none;
    }

    .dhx_cal_tab[name="timeline_tab"] {
        border-right-width: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        width: 62px;
        padding-left: 0;
        padding-right: 0;
    }

    .dhx_cal_tab[name="month_tab"] {
        border-left-width: 0;
        width: 62px;
    }

.dhx_cal_prev_button, .dhx_cal_next_button {
    border-radius: 5px;
}

.dhx_cal_prev_button {
    margin-right: 4px;
}

.dhx_cal_next_button {
    margin-left: 4px;
}

.dhx_month_body {
    height: 70px !important;
}

    .dhx_month_body .dhx_marked_timespan {
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        height: auto !important;
    }

.dhx_cal_event_clear.dhx_cal_event_line_start.dhx_cal_event_line_end h3, .dhx_cal_event_line.dhx_cal_event_line_start h3 {
    padding-top: 0;
    line-height: 18px;
}

.dhx_scheduler_workweek .dhx_cal_data > table > tbody > tr > td:nth-child(2) .job-event,
.dhx_scheduler_workweek .dhx_cal_data > table > tbody > tr > td:nth-child(2) .just-event {
    height: 52px !important;
}

.job-event, just-event {
    min-height: 20px !important; 
}

/*.dhx_cal_data > table > tbody > tr > td {position:relative}*/
/*.dhx_cal_data > table > tbody > tr > td .dhx_month_head{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    padding-top:31px;
    color:#f16522;
    font-size:30px;
    font-family:'proxima-nova', helvetica;
    text-align:center;
    vertical-align:middle
}*/
.sche-past-marker {
    background-color: #adabab;
    opacity: 0.4;
}

.sche-weekend-marker {
    background-color: #f16522;
    opacity: 0.2;
}

.sche-closed-marker {
    background-color: #e8f1fa;
    opacity: 0.2;
    font-family: 'proxima-nova', helvetica;
    font-weight: 300;
    text-align: center;
    display: grid;
    vertical-align: middle;
}

.sche-employee-time-off-marker {
    background-color: #e8f1fa;
    opacity: 0.9;
    font-family: 'proxima-nova', helvetica;
    font-weight: 300;
    text-align: center;
    display: grid;
    vertical-align: middle;
    z-index: 1;
}

    .sche-employee-time-off-marker > div {
        margin: auto;
        font-size: 13px !important;
    }

.sche-current-time-marker {
    background-color: #ff0000;
}

.dhx_row_folder .sche-current-time-marker {
    opacity: 0;
}

.scheduler-hours-range, .scheduler-timeline-days {
    color: #666666;
    font-family: 'proxima-nova', helvetica;
}

.scheduler-hours-dropdown {
    margin-left: 5px;
    width: 86px;
    height: 33px;
    font-weight: 300;
    font-size: 15px !important;
    font-family: 'proxima-nova', helvetica;
    text-align-last: center;
    direction: rtl;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px !important;
    border: 1px solid rgb(204, 204, 204);
    color: #666666;
}

.scheduler-timeline-days-dropdown {
    margin-left: 5px;
    width: 74px;
    height: 33px;
    font-weight: 300;
    font-size: 15px !important;
    font-family: 'proxima-nova', helvetica;
    text-align-last: center;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px !important;
    border: 1px solid rgb(204, 204, 204);
    color: #666666;
}

.dhx_cal_event_line {
    z-index: 10;
}

.dhx_scale_holder_now {
    background-image: url('../dhtml/codebase/imgs_dhx_terrace/databg.svg');
}

.dhx_scheduler_month .dhx_marked_timespan {
    display: block;
}

.scheduler-bricks-wrap {
    width: 100%;
    float: left;
    max-height: 122px;
    padding-top: 7px;
    overflow-x: hidden;
    overflow-y: auto;
}

.nicescroll-rails {
    opacity: 1 !important;
    display: block !important;
    width: 6px !important;
}

    .nicescroll-rails > div {
        background-color: #999999 !important;
        width: 6px !important;
        border: none !important;
    }

.schedulable-brick {
    /*width:160px;*/
    height: 40px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    float: left;
    margin-right: 6px;
    padding: 3px 8px;
    white-space: nowrap;
    position: relative;
    vertical-align: bottom;
    margin-top: 9px;
    margin-bottom: 7px;
    background-color: #fff;
    cursor: pointer;
}

    .schedulable-brick.cloned {
        position: absolute;
        margin-top: 0;
    }

    /*.schedulable-brick:after {
        content: ' ';
        width: 18px;
        height: 16px;
        background: url('../assests/images/highq/dragme.svg') center right no-repeat #fff;
        position: absolute;
        top: 6px;
        right: 5px;
    }*/


    .schedulable-brick > h3 {
        width: calc(100% - 13px);
        color: #4d4d4d;
        font-size: 15px;
        font-weight: 600;
        height: 22px;
        line-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .schedulable-brick > h3.red-dang {
            color: #ff0000;
            background-image: none;
        }

            .schedulable-brick > h3.red-dang:after {
                content: ' ';
                width: 14px;
                height: 13px;
                display: inline-block;
                margin-left: 5px;
                background: url('../assests/images/highq/red-dang.svg') center right no-repeat;
                position: relative;
                bottom: -2px;
            }

        .schedulable-brick > h3 > span {
            height: 22px;
            margin-right: 4px;
        }

    .schedulable-brick > div {
        color: #f16522;
        font-size: 13px;
        height: 18px;
        line-height: 18px;
        overflow: hidden;
    }

        .schedulable-brick > div > span {
            height: 18px;
            line-height: 18px;
            font-weight: 600;
            font-size: 12px;
            margin-right: 10px;
        }

.schedulable-brick--red {
    border-color: #ff000032;
}

.scheduler-bricks {
    width: 4px;
    background-color: #cccccc;
    height: 56px;
    float: left;
    margin-right: 8px;
    margin-left: 2px;
    position: relative;
}

    .scheduler-bricks:first-child, .scheduler-bricks.rem-line {
        width: 0;
        margin-right: 0;
        margin-left: 0;
    }

    .scheduler-bricks > span {
        position: absolute;
        white-space: nowrap;
        font-size: 10px;
        color: #666666;
        left: 20px;
        top: -5px;
        font-weight: 300;
    }

    .scheduler-bricks:first-child > span {
        left: 10px;
    }

.timeline_section {
    color: #666666;
    height: 100%;
    width: 93%;
    padding-left: 5%;
    padding-right: 2%;
    margin-top: 7px;
}

    .timeline_section > figure {
        width: 46px;
        height: 35px;
        display: block;
        float: left;
        margin-right: 7px;
        border-radius: 23px;
        color: #fff;
        font-size: 20px;
        padding-top: 11px;
        font-family: 'proxima-nova', helvetica;
        font-weight: 300;
    }

    .timeline_section.for-popup {
        height: 40px;
    }

        .timeline_section.for-popup > figure {
            font-size: 18px;
            width: 35px;
            height: 35px;
            padding-top: 0;
            position: relative;
        }

            .timeline_section.for-popup > figure > span {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

        .timeline_section.for-popup > div {
            margin-top: 9px;
            font-weight: 500;
        }

    .timeline_section > div {
        width: calc(100% - 54px);
        float: left;
        white-space: nowrap;
        margin-top: 5px;
    }

        .timeline_section > div > div {
            width: 100%;
            text-align: left;
            font-size: 15px;
            line-height: 18px;
            font-family: 'proxima-nova', helvetica !important;
            font-weight: 500;
        }

.dhx_matrix_scell.item .dhx_scell_name {
    padding-left: 0px !important;
}

.dhx_scell_level0 {
    padding-left: 0px !important;
}

.dhx_scell_level1 {
    padding-left: 0px !important;
}

.dhx_scell_level2 {
    padding-left: 20px !important;
}

.folder .dhx_scell_level1 .dhx_scell_name {
    padding-left: 45px !important;
}

.folder .dhx_scell_level1 .dhx_scell_expand {
    padding-left: 55px !important;
}

.last-folder .dhx_scell_name {
    left: 10px !important;
}

.folder .dhx_scell_name {
    font-size: 15px;
    font-weight: 300;
    line-height: 18px;
    font-family: 'proxima-nova', helvetica;
    padding-top: 2px;
    color: #666666;
    display: inline-flex;
    z-index: 1;
    position: absolute;
    left: 30px;
}

.dhx_scell_expand {
    font-size: 24px;
    font-weight: 600;
    line-height: 19px;
    font-family: 'proxima-nova', helvetica;
    padding-left: 10px !important;
    padding-right: 10px !important;
    color: #888;
    padding-top: 1px;
    z-index: 1;
}

.level0-folder td {
    background-color: #807d7d !important;
    overflow: visible;
}

.level0-folder .dhx_scell_name {
    color: white !important;
    white-space: nowrap;
}

.level1-folder td {
    background-color: #EFEFEF !important;
    overflow: visible;
}

.level1-folder .dhx_scell_name {
    color: #202020 !important;
    white-space: nowrap;
}

.scheduler-teams-arrow-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid white;
    margin-bottom: 1px;
}

.level1-folder .scheduler-teams-arrow-right {
    border-left: 6px solid #202020;
}

.scheduler-teams-arrow-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
    margin-bottom: 3px;
}

.level1-folder .scheduler-teams-arrow-down {
    border-top: 6px solid #202020;
}

.dhx_cal_header div div, .dhx_cal_header, .dhx_matrix_cell, .dhx_matrix_scell, .dhx_cal_data,
#scheduler-canvas[data-mode="timeline"] .dhx_scale_holder, #scheduler-canvas[data-mode="workweek"] .dhx_scale_holder {
    border-color: #e5e5e5;
}

    .dhx_scale_bar.dhx_second_scale_bar:not(:first-child),
    .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(5),
    .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(9),
    .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(13),
    .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(17),
    .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(21),
    .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(25),
    .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(29),
    .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(33),
    .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(37),
    .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(41),
    .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(45) {
        border-left-color: #afafaf;
    }

#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(4),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(7),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(10),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(13),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(16),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(19),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(22),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(25),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(28),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(31),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(34) {
    border-left-color: #afafaf;
}

#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(5),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(9),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(13),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(17),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(21),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(25),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(29),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(33),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(37),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(41),
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:nth-child(2) > div:nth-child(45) {
    border-left-color: #CECECE;
}


#scheduler-canvas[data-mode="timeline"] .dhx_matrix_line .dhx_matrix_cell:nth-child(4n):not(:last-child) {
    border-right-color: #afafaf;
}

#scheduler-canvas[data-mode="workweek"] .dhx_matrix_line .dhx_matrix_cell:nth-child(3n):not(:last-child) {
    border-right-color: #afafaf;
}

#scheduler-canvas[data-mode="week"] .dhx_matrix_line .dhx_matrix_cell:nth-child(4n):not(:last-child),
#scheduler-canvas[data-mode="week"] .dhx_scale_holder,
#scheduler-canvas[data-mode="week"] .dhx_scale_holder_now,
#scheduler-canvas[data-mode="timeline"] .dhx_scale_bar, #scheduler-canvas[data-mode="workweek"] .dhx_scale_bar {
    border-right-color: #808080;
}


#scheduler-canvas[data-mode="week"] .dhx_cal_header .dhx_scale_bar:not(:first-child) {
    border-left-color: #808080;
}

#scheduler-canvas[data-mode="week"] .dhx_cal_data > div:nth-child(7),
#scheduler-canvas[data-mode="week"] .dhx_cal_data > div:last-child {
    border-right-color: #e5e5e5 !important;
}

.dhx_scale_holder .dhx_scale_hour:not(:last-child) {
    border-bottom-color: #cacaca;
}

#scheduler-canvas[data-mode="month"] .dhx_scale_bar,
#scheduler-canvas[data-mode="month"] .dhx_month_head,
#scheduler-canvas[data-mode="month"] .dhx_month_body,
.sche-weekend-marker, .sche-closed-marker, .sche-employee-time-off-marker {
    border-color: #d9d9d9;
}

.dhx_cal_event_line, .dhx_cal_event .dhx_body, .dhx_cal_event .dhx_footer, .dhx_cal_event .dhx_header, .dhx_cal_event .dhx_title {
    background-color: #4d4d4d;
    border-color: #fff !important;
}

    .dhx_cal_event_line.just-event, .dhx_cal_event.just-event .dhx_body, .dhx_cal_event.just-event .dhx_footer, .dhx_cal_event.just-event .dhx_header, .dhx_cal_event.just-event .dhx_title {
        background-color: #934cab;
    }

.dhx_event_resize {
    opacity: 0.1;
}

.dhx_cal_event_line > div, .dhx_body > div {
    width: calc(100% - 6px);
    float: left;
}

    .dhx_cal_event_line > div > h3, .dhx_body > div > h3 {
        width: 100%;
        font-size: 15px;
        font-weight: 600;
        line-height: 19px;
        white-space: nowrap;
        font-family: 'proxima-nova', helvetica;
        font-weight: 600;
    }

        .dhx_cal_event_line > div > h3 > span, .dhx_body > div > h3 > span {
            margin-right: 5px;
            display: inline-block;
        }

    .dhx_body > div > h3 {
        white-space: normal;
    }
    /*#scheduler-canvas[data-mode="week"] .dhx_body {position:relative}
#scheduler-canvas[data-mode="week"] .dhx_event_move.dhx_title{opacity:0}*/
    .dhx_cal_event_line > div > div, .dhx_body > div > div {
        width: 100%;
        font-size: 13px;
        font-weight: 300;
        line-height: 17px;
        white-space: nowrap;
        font-family: 'proxima-nova', helvetica;
        font-weight: 300;
    }

        .dhx_cal_event_line > div > div > span, .dhx_body > div > div > span {
            margin-right: 7px;
            display: inline-block;
            position: relative;
        }

    .dhx_body > div > div {
        white-space: normal;
    }

        .dhx_body > div > div > span {
            float: left;
        }

#scheduler-canvas[data-mode="week"] .dhx_cal_select_menu {
    display: none !important;
}

#scheduler-canvas[data-mode="month"] .dhx_cal_data table > tbody > tr > td {
    position: relative;
}

    #scheduler-canvas[data-mode="month"] .dhx_cal_data table > tbody > tr > td.dhx_before .fullable-month,
    #scheduler-canvas[data-mode="month"] .dhx_cal_data table > tbody > tr > td.dhx_after .fullable-month {
        opacity: 0.3;
    }

    #scheduler-canvas[data-mode="month"] .dhx_cal_data table > tbody > tr > td > .dhx_month_head > .fullable-month {
        font-size: 33px;
        font-family: 'proxima-nova', helvetica;
        font-weight: lighter;
        text-align: center;
        color: #f16522;
        padding-top: 36px;
        z-index: 5;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        cursor: pointer;
    }

.right-orange-arr {
    background: url('../assests/images/highq/down-orange-arrow.svg') center left no-repeat;
    padding-left: 18px;
}

.up-orange-arr {
    background: url('../assests/images/up-orange-arrow.png') center left no-repeat;
    padding-left: 18px;
}

.dhx_scale_bar {
    color: #4d4d4d;
    font-size: 12px;
}

#scheduler-canvas[data-mode="timeline"] .dhx_cal_header.dhx_second_cal_header > div:last-child > div,
#scheduler-canvas[data-mode="workweek"] .dhx_cal_header.dhx_second_cal_header > div:last-child > div {
    color: #999999;
    font-size: 9px;
}

.scheduler-top-filter-bar {
    background-color: #f2f2f2;
}

    .scheduler-top-filter-bar .filter-button {
        background: url('../assests/images/highq/white-arrow-down.svg') right 8px center no-repeat #f16522;
        color: #fff;
        font-size: 15px;
        padding: 5px 24px 5px 9px;
        margin-right: 20px;
        cursor: pointer;
    }

    .scheduler-top-filter-bar .filter-button-selected {
        color: #fff;
        cursor: pointer;
        padding: 5px 9px 5px 9px;
        border-radius: 5px;
    }

    .scheduler-top-filter-bar .filter-button-no-selected {
        cursor: pointer;
        padding: 5px 9px 5px 9px;
    }

.scheduler-view-dropdown {
    cursor: pointer;
    width: 135px;
}

    .scheduler-view-dropdown.trspr-dropdown i {
        background-image: none;
        cursor: pointer;
    }

    .scheduler-view-dropdown.trspr-dropdown select {
        cursor: pointer;
        font-weight: 300;
    }

.scheduler-minimize-bricks {
    /*background: url('../assests/images/highq/minimize-orange.svg') right center no-repeat;*/
    /*padding-right: 26px;*/
    background-color: transparent;
    cursor: pointer;
    font-weight: 300;
}

#remove-workforce {
    width: 18px;
    height: 18px;
    background: url('../assests/images/highq/gray-xross.svg') center center no-repeat;
    cursor: pointer;
    margin-left: 10px;
    display: inline;
    vertical-align: middle;
    margin-bottom: 5px;
    position: relative;
    bottom: -2px;
}

#show-hide-map {
    font-size: 15px;
    line-height: 17px;
    font-weight: 300;
    padding: 6px 19px 6px 19px;
    color: #666666;
    border: 1px solid #CECECE;
    background-color: #fff;
}

    #show-hide-map.active {
        color: #fff;
        border-color: #f16522;
        background-color: #f16522;
    }

.pop-inner > .removeme {
    position: absolute;
    right: 12px;
    top: 6px;
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url('../assests/images/highq/gray-xross.svg') center center no-repeat;
    cursor: pointer;
}

.no-hover-gray .pop-inner:hover {
    background-color: transparent;
    color: #000;
}

.adv-popup.custom, .adv-popup-con.custo, .adv-popup-con-sel.custom {
    width: 380px;
    padding-left: 10px;
    padding-right: 10px;
}


.iblock-crs .dis-iblock {
    display: inline-block;
}

.gray-separator {
    height: 1px;
    background-color: #bfbfbf;
}

.light-gray-separator {
    height: 1px;
    background-color: #f6f6f6;
}

.custom-popup-per-tab {
    display: none;
}

    .custom-popup-per-tab .search-box-filter {
        padding-right: 22px;
        box-sizing: border-box;
    }

    .custom-popup-per-tab.active {
        display: block;
    }

.filter-box-holder {
    padding-right: 20px;
    position: relative;
}

    .filter-box-holder input {
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
        padding-left: 9px !important;
        padding-right: 33px !important;
        width: 100% !important;
    }

    .filter-box-holder span {
        position: absolute;
        right: 29px !important;
        top: 4px;
    }

        .filter-box-holder span.icon-Search {
            font-size: 18px;
        }

.inline-block {
    display: inline-block;
}

.search-box-holder {
    display: inline-block;
    position: relative;
}

    .search-box-holder input {
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
        padding-left: 9px !important;
        padding-right: 33px !important;
        width: 100% !important;
    }

    .search-box-holder span {
        position: absolute;
        right: 10px !important;
        font-size: 18px;
        top: 4px;
    }

.scheduler-event-creator, .event-edit-popup, .person-popup {
    width: 250px;
    padding: 17px 0;
    background-color: #f2f2f2;
    border: 2px solid #fff;
    border-radius: 5px;
    position: absolute;
    top: 600px;
    left: 600px;
    z-index: 30;
    box-shadow: 0 0 16px -7px #000;
    display: none;
}

.person-popup {
    width: 300px;
}

.event-edit-popup, .person-popup {
    background-color: #fff;
}

    .scheduler-event-creator:before, .event-edit-popup:before, .person-popup:before {
        content: ' ';
        border: 9px solid transparent;
        border-bottom: 20px solid #fff;
        position: absolute;
        top: -30px;
        left: 50%;
        margin-left: -10px;
        z-index: 0;
        -webkit-filter: drop-shadow(0 -3px 3px rgba(0,0,0,0.1));
        filter: drop-shadow(0 -3px 3px rgba(0,0,0,0.1));
    }

.event-by-click-been, .event-by-click-been {
    width: 100%;
    float: left;
    height: 290px;
    overflow: hidden;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .event-by-click-been .schedulable-brick {
        width: calc(100% - 24px);
        padding-right: 8px;
        border: 0;
        margin: 0 8px 5px 8px;
        border-bottom: 1px solid #d9d9d9;
        padding: 0 0 5px 0;
        border-radius: 0;
    }

        .event-by-click-been .schedulable-brick:after {
            display: none;
        }

        .event-by-click-been .schedulable-brick > h3 {
            background-image: none;
        }

    .event-by-click-been .scheduler-bricks {
        width: 100%;
        height: auto;
        background-color: transparent;
        margin-bottom: 5px;
        display: none !important;
    }

        .event-by-click-been .scheduler-bricks > span {
            position: relative;
            margin: 0 0 0 10px;
            left: auto;
            top: auto;
        }

.hide-strongly {
    display: none !important;
}

#ascrail2000-hr, #ascrail2001-hr {
    display: none !important;
}

.addit-menu.inside-popup {
    width: 100%;
    padding: 0;
    margin-left: 0;
    margin-bottom: 20px;
}

.main-popup-in .editBtn {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    box-sizing: border-box;
    margin: 15px;
}

    .main-popup-in .editBtn:hover {
        color: #f2f2f2;
    }

.addit-menu.inside-popup ul, .addit-menu.inside-popup h2 {
    display: inline-block;
    float: none;
}

.addit-menu.inside-popup h2 {
    margin-right: 30px;
    position: relative;
    bottom: -6px;
}

.addit-menu.inside-popup li {
    width: auto;
    float: none;
    display: inline-block;
}

    .addit-menu.inside-popup li a {
        border-top: none !important;
        padding-right: 12px;
    }

.addit-menu-1.inside-popup {
    width: 94%;
    padding: 0;
    margin-left: 0;
    margin-bottom: 20px;
}

    .addit-menu-1.inside-popup ul, .addit-menu.inside-popup h2 {
        width: auto;
        display: inline-block;
        float: none;
    }

    .addit-menu-1.inside-popup h2 {
        margin-right: 30px;
        position: relative;
        bottom: -6px;
    }

    .addit-menu-1.inside-popup li {
        width: auto;
        float: none;
        display: inline-block;
    }

        .addit-menu-1.inside-popup li a {
            border-top: none !important;
            padding-right: 12px;
        }

#scheduler-canvas[data-mode="month"] .dhx_now .dhx_month_body, #scheduler-canvas[data-mode="month"] .dhx_now .dhx_month_head {
    background: #f16522 !important;
}

#scheduler-canvas[data-mode="month"] .dhx_now .fullable-month {
    color: #fff !important;
}

.fullable-month-jobs {
    color: #939292 !important;
    font-size: 13px;
    font-weight: 400;
    position: absolute;
    right: 10px;
    top: 2px;
}

#scheduler-canvas[data-mode="month"] .dhx_now .fullable-month-jobs {
    color: #fff !important;
}

.bricks-panel {
    width: 205px;
    height: 285px;
    max-height: 285px !important;
    padding: 15px;
    border: 1px solid #d9d9d9;
    background: #fff;
    border-radius: 6px;
    position: fixed;
    right: 6px;
    top: 50px;
    z-index: 30;
    overflow: hidden;
    cursor: move;
}

    .bricks-panel > .full-width:first-child {
        margin-top: 0;
        margin-bottom: 3px;
    }

    .bricks-panel > .full-width:last-child {
        overflow: hidden;
        height: 213px;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .bricks-panel > .full-width > span {
        font-size: 15px;
        color: #333333;
    }

        .bricks-panel > .full-width > span:first-child {
            font-weight: 600;
            margin-right: 3px;
            margin-left: 0;
        }

    .bricks-panel .scheduler-minimize-bricks {
        display: none;
    }

    .bricks-panel .additional-cancel-panel {
        display: block;
        position: absolute;
        top: -6px;
        right: 0px;
        cursor: pointer !important;
    }

    .bricks-panel .scheduler-bricks {
        display: block;
        width: 100% !important;
        float: left !important;
        height: auto !important;
        background-color: transparent !important;
        margin: 0 !important;
    }

        .bricks-panel .scheduler-bricks span {
            position: relative !important;
            left: auto !important;
            bottom: auto !important;
            top: auto !important;
        }

    .bricks-panel .schedulable-brick {
        margin: 0 0 7px 0;
    }

    .bricks-panel .scheduler-view-dropdown {
        margin: 10px 0 0 0;
    }

    .bricks-panel > .top-part * {
        cursor: auto;
    }

    .bricks-panel > .full-width:last-child {
        cursor: auto;
    }

.markerDraggable.batch-process.active {
    box-shadow: 0 0 1px 1px #f16522, 0 0 1px 1px #fff;
}

.just-event-been {
    background-color: #fff;
}

.two-times, .four-times {
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding-left: 1px;
    padding-right: 1px;
    overflow: hidden;
    position: relative;
    bottom: -2px;
}

.four-times {
}

#event-staff-drpdwn {
    width: 140px;
}

.holdcolor-times {
    cursor: pointer;
}

    .holdcolor-times:hover, .holdcolor-times:focus, .holdcolor-times.highlighted {
        background-color: #e5e5e5;
    }

.scheduler-event-creator *::selection, .event-edit-popup *::selection, .person-popup *::selection {
    background: #e5e5e5;
}

.scheduler-event-creator *::-moz-selection, .event-edit-popup *::-moz-selection, .person-popup *::selection {
    background: #e5e5e5;
}

.right-side-dropdw {
    position: absolute;
    top: 50%;
    left: calc(100% + 15px);
    top: -80px;
    width: 150px;
    height: 212px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 9px -1px #ccc;
    z-index: 10;
    padding: 0 5px 0 10px;
    display: none;
}

    .right-side-dropdw > div {
        margin: 6px 0 6px 0;
        height: 200px;
        width: 100%;
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .right-side-dropdw a {
        font-size: 15px;
        color: #000;
        display: block;
        margin-top: 4px;
        margin-bottom: 4px;
    }

        .right-side-dropdw a:hover, .right-side-dropdw a.active {
            color: #f16522;
        }

#event-staff-drpdwn {
    cursor: pointer;
}

    #event-staff-drpdwn.active .right-side-dropdw {
        display: block;
    }

.bind-filters-scrollable {
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}

.scheduler-menu-top {
    width: calc(100% - 50px) !important;
}

    .scheduler-menu-top li, .scheduler-menu-top li:hover {
        background-color: #fff;
        border-radius: 4px !important;
        height: 32px !important;
        margin: 7px 5px 0 0 !important;
        float: right !important;
        display: inline-block !important;
        overflow: hidden;
    }

        .scheduler-menu-top li a, .scheduler-menu-top li a:hover {
            color: #666666 !important;
            display: block !important;
            padding: 7px 16px 6px 16px !important;
            margin: 0 !important;
        }

        .scheduler-menu-top li.sche-next, .scheduler-menu-top li.sche-today {
            margin-right: 2px !important;
        }

        .scheduler-menu-top li.sche-prev a {
            padding: 16px 26px !important;
            background: url('../dhtml/codebase/imgs_dhx_terrace/arrow_right.svg') center center no-repeat;
        }

        .scheduler-menu-top li.sche-next a {
            padding: 16px 26px !important;
            background: url('../dhtml/codebase/imgs_dhx_terrace/arrow_left.svg') center center no-repeat;
        }

        .scheduler-menu-top li.sche-time, .scheduler-menu-top li.sche-time:hover {
            float: left !important;
            background-color: transparent !important;
        }

            .scheduler-menu-top li.sche-time a, .scheduler-menu-top li.sche-time a:hover {
                font-size: 15px !important;
                color: #fff !important;
                background-color: transparent !important;
            }

.jobs-evnts-mobile-blocks {
    background-color: #f2f2f2;
    margin-top: 3px;
}

#mobile-scheduled .scheduled-part {
    width: 94%;
    float: left;
    margin-left: 3%;
}

    #mobile-scheduled .scheduled-part .timeline_section {
        width: 100%;
        float: left;
        padding: 0;
        color: #666666;
        font-size: 15px;
        margin-top: 18px;
    }

        #mobile-scheduled .scheduled-part .timeline_section > div {
            margin-top: 14px;
        }

    #mobile-scheduled .scheduled-part .event-clickable-inner {
        width: calc(100% - 26px);
        float: left;
        padding: 0;
        background-color: #4d4d4d;
        color: #fff;
        padding: 7px 13px;
        border-radius: 5px;
        margin-top: 6px;
    }

        #mobile-scheduled .scheduled-part .event-clickable-inner h3 {
            width: 100%;
            font-size: 15px;
            margin-bottom: 4px;
        }

            #mobile-scheduled .scheduled-part .event-clickable-inner h3 span {
                margin-right: 5px;
            }

        #mobile-scheduled .scheduled-part .event-clickable-inner div {
            width: 100%;
            font-size: 15px;
            font-size: 15px;
        }

            #mobile-scheduled .scheduled-part .event-clickable-inner div span {
                display: inline-block;
                position: relative;
                bottom: -2px;
                float: left;
                margin-right: 7px;
            }

    #mobile-scheduled .scheduled-part .event-clickable-inner1 {
        width: calc(100% - 26px);
        float: left;
        padding: 0;
        background-color: #934cab;
        color: #fff;
        padding: 7px 13px;
        border-radius: 5px;
        margin-top: 6px;
    }

        #mobile-scheduled .scheduled-part .event-clickable-inner1 h3 {
            width: 100%;
            font-size: 15px;
            margin-bottom: 4px;
        }

            #mobile-scheduled .scheduled-part .event-clickable-inner1 h3 span {
                margin-right: 5px;
            }

        #mobile-scheduled .scheduled-part .event-clickable-inner1 div {
            width: 100%;
            font-size: 15px;
            font-size: 15px;
        }

            #mobile-scheduled .scheduled-part .event-clickable-inner1 div span {
                display: inline-block;
                position: relative;
                bottom: -2px;
                float: left;
                margin-right: 7px;
            }

.times-separator-sign {
    position: relative;
    top: -2px;
}

.img-edit-label {
    width: 70px;
    height: 70px;
    display: inline-block;
    background-color: #f16522;
    border-radius: 35px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}

    .img-edit-label .pure-text {
        padding-top: 14px;
        display: inline-block;
    }

.choose-image-position-wrap {
    position: relative;
    overflow: hidden;
    height: 260px;
}

.choose-image-position-wrap-replace {
    position: relative;
    overflow: hidden;
    height: 260px;
}

    .choose-image-position-wrap-replace img {
        margin-top: 40px;
        /*object-fit:cover;*/
    }

.choose-image-position {
    width: 180px;
    height: 180px;
    background: transparent;
    position: absolute;
    top: 15%;
    left: 25%;
    /*margin-top:-35px;
    margin-left:-35px;*/
    box-shadow: 0 0 0 9000px rgba(0,0,0,0.5);
    border-radius: 50%;
    cursor: pointer;
    max-height: 100%;
    max-width: 100%;
}

.choose-image-position-wrap img {
    cursor: move;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
}

.choose-image-zoom {
    width: 200px;
    height: 6px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    bottom: 12px;
    z-index: 5;
}

    .choose-image-zoom > div {
        width: 14px;
        height: 14px;
        border: 2px solid #fff;
        background-color: #f16522;
        position: absolute;
        top: -6px;
        left: 100px;
        border-radius: 50%;
        cursor: pointer;
    }

#my-been {
    position: absolute;
    left: -44px;
    top: 0px;
    width: 44px;
    height: 44px;
    background: url('../assests/images/highq/head-left-arrow.svg') center center no-repeat #e6e6e6;
}

.shortcodes-been {
    background-color: #e6e6e6;
    position: fixed;
    right: 0;
    width: 280px;
    padding-top: 20px;
    padding-bottom: 20px;
}

    .shortcodes-been > .full-width {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 100%;
        width: 200px;
        padding-right: 40px;
        margin-right: 10px;
        padding-left: 30px;
    }

    .shortcodes-been.active #my-been {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .shortcodes-been > .full-width > ul {
        overflow: hidden;
    }

        .shortcodes-been > .full-width > ul > li {
            display: block;
            margin: 5px 0;
        }

            .shortcodes-been > .full-width > ul > li > a {
                color: #666;
                padding-left: 20px;
                position: relative;
            }

                .shortcodes-been > .full-width > ul > li > a:before {
                    content: ' ';
                    width: 10px;
                    height: 14px;
                    background: url('../assests/images/highq/orange-right-arrow.svg') center center no-repeat;
                    position: absolute;
                    top: 1px;
                    left: 2px;
                    -webkit-transition: transform 0.2s;
                    -moz-transition: transform 0.2s;
                    -ms-transition: transform 0.2s;
                    transition: transform 0.2s;
                }

            .shortcodes-been > .full-width > ul > li.active > a:before {
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                transform: rotate(90deg);
            }

            .shortcodes-been > .full-width > ul > li > ul {
                padding: 8px 0;
                display: none;
            }

            .shortcodes-been > .full-width > ul > li.active ul {
                display: block;
            }

            .shortcodes-been > .full-width > ul > li > ul > li {
                display: block;
                margin: 3px 0;
                padding-left: 30px;
            }

                .shortcodes-been > .full-width > ul > li > ul > li > a {
                    display: block;
                    background-color: #4d4d4d;
                    color: #fff;
                    width: 130px;
                    padding: 6px 10px;
                    display: inline-block;
                    text-align: left;
                    border-radius: 4px;
                }

.log-results-line {
    width: 96%;
    float: left;
    border-bottom: 2px solid #e5e5e5;
    padding: 10px 2%;
}

.logs-search-result .log-results-line:first-child {
    border-top: 2px solid #e5e5e5;
}

.black-upper-dropdowns {
    width: 100%;
    padding: 70px 20px 20px 20px;
    background-color: rgba(0,0,0,0.8);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 10000 !important;
}

.user-tr .black-upper-dropdowns {
    right: 0px;
}

.retouchable-trigger {
    cursor: move;
}

.retouchable-brick.dragging {
    position: absolute;
    z-index: 2;
    background-color: #ebf0ef;
}

.accordion-trigger.warrow {
    padding-left: 24px;
    position: relative;
}

    .accordion-trigger.warrow:before {
        content: ' ';
        width: 10px;
        height: 14px;
        background: url('../assests/images/highq/orange-right-arrow.svg') center center no-repeat;
        position: absolute;
        top: 50%;
        margin-top: -7px;
        left: 0;
        -webkit-transition: transform 0.2s;
        -moz-transition: transform 0.2s;
        -ms-transition: transform 0.2s;
        transition: transform 0.2s;
    }

.accordion-out.active .accordion-trigger.warrow:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.appear-service-item-popup .appear-service-item-popup {
    cursor: pointer;
}

/**** temp styles ****/

.white_content {
    display: none;
    position: fixed;
    left: 50%;
    width: 380px;
    height: auto;
    padding: 16px;
    border: none;
    background-color: white;
    z-index: 10025;
    overflow: auto;
    margin-left: -190px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.user-permissions-table {
    border-collapse: separate;
    border-spacing: 26px 18px;
}

    .user-permissions-table tr > td {
        vertical-align: top;
    }

        .user-permissions-table tr > td:not(:first-child) {
            text-align: center;
        }

.permissions-table th {
    font-weight: 500;
}

.permissions-table tr td:first-child {
    padding-right: 15px;
}

.permissions-table tr td:not(:first-child) {
    text-align: center;
}

.permissions-table td {
    padding-top: 15px;
}

.group-edit-popup {
    width: 260px;
    padding: 14px 30px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -160px;
    z-index: 100;
}

/**** temp styles ****/

.orange38-button {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    display: inline-block;
    background-color: #f16522;
    position: relative;
    cursor: pointer;
}

    .orange38-button.minus:before, .orange38-button.plus:before {
        content: '';
        width: 21px;
        height: 5px;
        position: absolute;
        top: 17px;
        left: 9px;
        display: block;
        background-color: #fff;
    }

    .orange38-button.plus:after {
        content: '';
        width: 5px;
        height: 21px;
        position: absolute;
        top: 9px;
        left: 17px;
        display: block;
        background-color: #fff;
    }

.plus-minus-button {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

    .plus-minus-button.minus:before, .plus-minus-button.plus:before {
        content: '';
        width: 16px;
        height: 4px;
        position: absolute;
        top: 12px;
        left: 6px;
        display: block;
        background-color: #fff;
    }

    .plus-minus-button.plus:after {
        content: '';
        width: 4px;
        height: 16px;
        position: absolute;
        top: 6px;
        left: 12px;
        display: block;
        background-color: #fff;
    }

#bo-bricks {
    clear: both;
}

    #bo-bricks > div, #bo-bricks > button {
        padding: 3px 14px;
        color: #fff;
        font-size: 24px !important;
        text-align: center;
        min-width: 180px;
    }

        #bo-bricks > div > .cur, #bo-bricks > div > .price {
            font-size: 40px;
        }

    #bo-bricks > button {
        margin-top: 6px;
        padding-top: 11px;
        padding-bottom: 11px;
        border-radius: 4px;
        display: block;
        font: inherit;
        width: calc(100%);
        cursor: pointer;
    }

.gray-radio {
    padding-left: 20px;
    position: relative;
    cursor: pointer;
}

    .gray-radio input {
        display: none;
    }

        .gray-radio input + span {
            display: block;
            width: 8px;
            height: 8px;
            position: absolute;
            top: 2px;
            left: 0;
            box-shadow: 0 0 0 1px #666;
            border: 3px solid #fff;
            border-radius: 50%;
        }

        .gray-radio input:checked + span {
            background-color: #666;
        }

#users-qty-buttons-been {
    position: absolute;
    right: 0;
    bottom: 5px;
}

/*** gray slideup ***/

.gray-slideup {
    position: fixed;
    left: 50px;
    bottom: 0;
    box-sizing: border-box;
    background: #808080;
    border-top-right-radius: 4px;
    color: #fff;
    z-index: 10030;
    width: 300px;
    padding-top: 12px;
}

    .gray-slideup > .wrap-tab {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 20px 10px 20px;
        float: left;
        display: none;
    }

    .gray-slideup > .button-closer {
        display: block;
        width: 12px;
        height: 11px;
        background: url('../assests/images/highq/gray-tab-closer.svg') center center no-repeat;
        position: absolute;
        right: 14px;
        top: 12px;
        cursor: pointer;
    }

    .gray-slideup > .button-toggler {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background: #808080;
        position: absolute;
        top: -30px;
        left: 0;
        line-height: 26px;
        font-size: 16px;
        padding-left: 20px;
        padding-right: 60px;
        font-weight: 400;
        color: inherit;
        box-sizing: border-box;
        padding-top: 4px;
        cursor: pointer;
    }

        .gray-slideup > .button-toggler:after {
            content: '';
            width: 14px;
            height: 15px;
            background: url('../assests/images/highq/gray-tab-opener-img-down.svg') center center no-repeat;
            position: absolute;
            top: 8px;
            right: 20px;
        }

    .gray-slideup.active > .button-toggler:after {
        background-image: url('../assests/images/highq/gray-tab-opener-img-down.svg');
    }

    .gray-slideup > .wrap-tab .the-header {
        font-size: 20px;
        font-weight: 400;
    }

    .gray-slideup > .wrap-tab .list-inside {
        display: block;
        list-style: none;
        width: 100%;
        float: left;
        margin-top: 10px;
    }

        .gray-slideup > .wrap-tab .list-inside > li {
            display: block;
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding-left: 40px;
            position: relative;
        }

            .gray-slideup > .wrap-tab .list-inside > li:before {
                content: attr(data-index);
                background: #f16522;
                width: 30px;
                height: 30px;
                line-height: 30px;
                border-radius: 50%;
                color: inherit;
                font-size: 17px;
                font-weight: 400;
                position: absolute;
                top: 5px;
                left: 0;
                text-align: center;
                z-index: 3;
            }

            .gray-slideup > .wrap-tab .list-inside > li.passed:before {
                content: '';
                background-color: #33cc00;
            }

            .gray-slideup > .wrap-tab .list-inside > li.passed:after {
                content: '';
                width: 13px;
                height: 16px;
                background: url('../assests/images/highq/white-tick-midd.svg') center center no-repeat;
                position: absolute;
                top: 11px;
                left: 9px;
                z-index: 4;
            }

            .gray-slideup > .wrap-tab .list-inside > li > a {
                display: block;
                font-size: 16px;
                line-height: 22px;
                min-height: 30px;
                font-weight: 400;
                color: inherit;
                padding: 9px 0;
                box-sizing: border-box;
            }

            .gray-slideup > .wrap-tab .list-inside > li.passed > a {
                color: #64d83d;
            }

.watch-video-button {
    display: block;
    background-color: #fff;
    border-radius: 4px;
    line-height: 40px;
    color: #666666;
    font-size: 16px;
    font-weight: 400;
    padding-left: 14px;
    padding-right: 50px;
    position: relative;
    cursor: pointer;
}

    .watch-video-button:after {
        content: '';
        display: block;
        width: 23px;
        height: 24px;
        position: absolute;
        right: 12px;
        top: 50%;
        margin-top: -12px;
        background: url('../assests/images/watch-video-bg.png') center center no-repeat;
    }

/*** gray slideup ***/

.jwlooped::-webkit-input-placeholder, .stl-plhdl::-webkit-input-placeholder {
    font-style: italic;
    font-weight: 300;
}

.jwlooped:-moz-placeholder, .stl-plhdl:-moz-placeholder {
    font-style: italic;
    font-weight: 300;
}

.jwlooped::-moz-placeholder, .stl-plhdl::-moz-placeholder {
    font-style: italic;
    font-weight: 300;
}

.jwlooped:-ms-input-placeholder, .stl-plhdl:-ms-input-placeholder {
    font-style: italic;
    font-weight: 300;
}

.spec-phlf::-webkit-input-placeholder {
    color: #4d4d4d !important;
    font-weight: 600 !important;
}

.spec-phlf:-moz-placeholder {
    color: #4d4d4d !important;
    font-weight: 600 !important;
}

.spec-phlf::-moz-placeholder {
    color: #4d4d4d !important;
    font-weight: 600 !important;
}

.spec-phlf:-ms-input-placeholder {
    color: #4d4d4d !important;
    font-weight: 600 !important;
}

.normal-plh input::-webkit-input-placeholder {
    font-weight: 300;
}

.normal-plh input:-moz-placeholder {
    font-weight: 300;
}

.normal-plh input::-moz-placeholder {
    font-weight: 300;
}

.normal-plh input:-ms-input-placeholder {
    font-weight: 300;
}

.roundedImage {
    border-radius: 50% !important;
    /*object-fit:cover;*/
}

.cust-table .roundedImage {
    float: left;
    /*object-fit: contain; */
}

.roundedImageContractor {
    border-radius: 50% !important;
    background-size: 112px 112px !important;
}

.daterangepicker, .xdsoft_datetimepicker {
    z-index: 11001 !important;
}

.overflowhd {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.image-profile-shadow {
    /*-webkit-box-shadow: inset 0px 0px 20px 0px rgba(184, 74, 74, 1) !important;
    -moz-box-shadow: inset 0px 0px 20px 0px rgba(184, 74, 74, 1)  !important;
    box-shadow: inset 0px 0px 20px 0px rgba(184, 74, 74, 1)  !important;*/
}

.file-upload > input {
    display: none;
}

.blockOverlay {
    background-color: #fff !important;
}

.blockMsg {
    background-color: transparent !important;
    border: 0px !important;
}

.spinner {
    margin: 0 auto;
    width: 70px;
    height: 70px;
    text-align: center;
    font-size: 10px;
}

    .spinner > div {
        background-color: #333;
        height: 100%;
        width: 10px;
        margin-right: 2px;
        display: inline-block;
        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .spinner .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .spinner .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .spinner .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1.0);
    }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

.stripe_checkout_app {
    z-index: 10700 !important;
}

.pac-container {
    z-index: 10600 !important;
}

.beacon-wrapper .article {
    max-height: 450px !important;
}

.recurrence-parent-job-row {
    border-bottom: 2px solid #a2a2a2;
    padding: 10px 0;
}

.recurrence-job-title {
    width: 100%;
    text-align: center;
    padding: 10px 0;
}

    .recurrence-job-title.recurrences {
        margin-top: 130px;
    }

.w21-important {
    width: 21% !important;
}

.multi-job-invoice-popup {
    width: 600px;
    margin-left: -280px;
}

.recurring-box {
    background-color: #eee;
    padding: 15px 15px;
}

#current-setup {
    width: 95%;
}

.schedule-collision {
    margin-top: 21px;
}

    .schedule-collision > h2 {
        font-family: sans-serif;
    }

.popUp-header-text {
    font-size: 27px;
    margin-bottom: 20px;
}

    .popUp-header-text.small {
        font-size: 22px;
    }

    .popUp-header-text.small16 {
        font-size: 16px;
    }

.popUp-description-text {
    font-family: "proxima nova", helvetica;
}

.bold-600 {
    font-weight: 600;
}

.required {
    font-weight: 600;
}

.service-popup-content .recurrence-error-message {
    height: 40px;
    border: 1px solid red;
    border-radius: 3px;
    padding: 5px;
    -moz-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

.in-body-remove-recurrent-warning, .center-text {
    text-align: center;
}

.anchor-link {
    color: #808080;
    cursor: pointer;
    margin-left: 10px;
}

    .anchor-link:hover {
        text-decoration: underline;
    }

.pointer {
    cursor: pointer;
}

.grayout {
    background-color: lightgray;
    opacity: 0.3;
}

button.uneditable-job {
    padding: 9px 20px;
    cursor: default;
}

.main-popup.recurrence-changing-popup {
    width: 475px;
}

.main-popup.recurrence-changing-popup-on-drag {
    width: 475px;
}

.msgWeek > div > input:not(:first-child) {
    margin-left: 15px;
}

.msgYear > div > input:not(:first-child) {
    margin-left: 15px;
}

#excelude-weekends, #recurring-show {
    padding-left: 25px;
}

.table-view {
    display: table;
}

    .table-view .table-row-view {
        display: table;
    }

        .table-view .table-row-view .table-cell-view {
            display: table-cell;
            float: none;
            vertical-align: middle;
            padding: 0 1%;
        }

.service-or-item-tax-rate-value {
    font-family: 'proxima-nova', helvetica;
    font-size: 15px;
    font-weight: bold;
    color: #878787;
}

.link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.invoice-settings-checkbox {
    position: absolute;
    top: 3px;
    margin-left: 7px;
}

.invoice-settings-bottom-field {
    box-sizing: border-box;
    width: 90%;
    min-width: 90%;
    max-width: 90%;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding: 5px 5px;
}


ul#document_notes_holder li, ul.revisit-notes li {
    padding: 20px 0;
    border-bottom: 1px solid #e6e6e6;
    transition: 1s;
}

    ul#document_notes_holder li > div, ul.revisit-notes li > div {
        display: inline-block;
        width: 100%;
    }

ul#job_activity_holder li {
    padding: 20px 0;
    border-bottom: 1px solid #e6e6e6;
    transition: 0.25s;
}

    ul#job_activity_holder li > div {
        display: inline-block;
        width: 100%;
    }

.private-note-bg {
    background-color: #FFFDE4;
    position: relative;
}

.portal-note-bg {
    background-color: #E4F3FF;
    position: relative;
}

.internal-note {
    position: absolute;
    top: 0px;
    left: 0px;
}

.internal-note-fix {
    margin-bottom: 0px;
}

.internal-note span {
    background-color: #4d4d4d;
    color: #fff;
    font-size: 10px;
    line-height: 10px;
    padding: 5px 10px 3px 10px;
}

.main-popup-closer-pay :hover {
    cursor: pointer;
}

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.reset-statuses-popup .main-popup-biggin .full-width .white-o {
    padding-left: 5px;
}

.log-out-button {
    padding: 15px 50px;
}

.contact-us-link {
    border-bottom: 1px solid #B3B3B3;
}

#invoice-popUp .main-popup-biggin .clickInvoice .canCreate .full-width .gr-br-sec {
    width: 125px;
}

.multi-job-invoice-popup .main-popup-biggin .full-width .gr-br-sec {
    width: 125px;
}

.delete-job-from-invoice {
    cursor: pointer;
}

.new-item-cost:disabled {
    cursor: default;
}

.status-inner > .font-bold {
    width: 80%;
}

.white-butt.move-left {
    padding-left: 5px;
}

.tax-rate-payment {
    width: 44.5%;
    float: right;
}

    .tax-rate-payment select {
        font-size: 15px;
        height: 36px;
        padding-left: 9px;
        width: 100%;
    }

#add-change-log-btn {
    margin-right: 118px;
}

.reports-tools select {
    width: 160px;
}

.reports-tools .gr-br-sec.mr10.fleft {
    width: 160px;
}

#app-version {
    position: relative;
    padding-top: 20px;
    bottom: 10px;
    left: 25px;
    margin: 0px;
}

#app-version-mobile {
    padding: 25px;
}

/*Responsive*/
@media only screen and (max-width:1330px) {
    .job-list-wrap {
        width: 96%;
        padding-left: 2%;
        padding-right: 2%;
        margin-left: 0;
    }
}

@media only screen and (max-width:1190px) {
    .job-list-wrap {
        width: 96%;
        padding-left: 2%;
        padding-right: 2%;
        margin-left: 0;
    }
    /*.jw2-3,.jw2-4,.jw2-5,.jw2-6,.jw2-7,.jw2-8,.jw2-9{}*/
    .job-list-anchors {
        margin-left: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }

    .status-drp {
        float: right;
        width: 60px;
        margin-right: 0 !important;
    }

        .status-drp span {
            width: 100%;
            position: static;
        }

        .status-drp div {
            width: 100% !important;
        }

    .main-min.bigger {
        width: 600px;
    }

    .job-search-tools .looped-field.w1132 {
        width: 136px !important;
    }
}

@media only screen and (max-width:960px) {
    #menu-bar:after {
        display: none;
    }

    #menu-bar {
        padding-top: 0;
        position: absolute;
        top: 35px;
        left: 0;
        z-index: 10;
        display: none;
    }

        #menu-bar.sec-switch {
            top: 0;
        }

        #menu-bar.active {
            display: block;
        }

    .menu-switch {
        display: block;
    }

    #main-page {
        width: 100%;
    }

    .jw1 {
        width: 4%;
    }

    .jw1 {
        position: relative;
        bottom: -3px;
    }

    .jw2 {
        width: 96%;
    }

    .jw2-1, .jw2-5, .jw2-6, .jw2-7, .jw2-8, .jw2-9 {
        width: 99.4% !important;
        margin-top: 10px;
    }

    .nonenone {
        display: inline-block;
        margin-right: 8px;
    }

    .jb-nvc {
        float: none;
        display: inline-block;
        margin-left: 0;
        position: relative;
        bottom: -1px;
    }

    .then-right {
        float: none;
        display: inline-block;
    }

    .jw2-9 .orange-butt {
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
    }

    .jw2-1:not(.cus-job) {
        margin-top: 0;
    }

    .jw2-1 .font-bold {
        font-size: 18px;
    }

    .jw2-9 {
        text-align: left;
        margin-top: 22px;
        padding-bottom: 11px;
    }

    .jw2-2 {
        float: right;
        width: 54%;
        padding-left: 5%;
        padding-top: 7px;
        margin-top: 10px;
        text-align: left;
    }

    .jw2-3 {
        float: right;
        width: 19%;
        margin-top: 10px;
        padding-top: 5px;
        text-align: center;
    }

    .jw2-4 {
        float: left;
        width: 12%;
        margin-top: 10px;
        font-size: 24px;
        color: #333;
    }

    .then-half {
        width: 85%;
        padding-left: 1%;
    }

        .then-half.none, .jw2-3.cus-job-hfbl {
            display: block;
            width: 14%;
            padding-left: 0;
            padding-right: 0;
            float: left;
        }

    .jw2-3.cus-job-hfbl {
        margin-top: 0;
        padding-top: 0;
        text-align: left;
    }

    .jw2-5.cus-job-hfbl {
        width: 86% !important;
        padding-left: 0;
        padding-right: 0;
        float: left;
        margin-top: 0;
    }

    .jheading {
        display: none;
    }

    .jw-table {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .cust-table .then-half:not(.none) .jf-that {
        font-weight: 300 !important;
        color: #000 !important;
    }

    #app-version {
        display: none;
    }

    #app-version-mobile {
        display: block !important;
    }
}

@media only screen and (max-width:810px) {
    .hide810 {
        display: none !important;
    }
}

@media only screen and (max-width:467px) {
    .status-to-reassign .status-arrow {
        display: none !important;
    }
}

@media only screen and (max-width:870px) {
    .sending-buttons:not(.non-wrapable) {
        width: 30.3%;
        margin-right: 2%;
        margin-left: 0;
        float: none;
        display: inline-block;
    }

    .sending-buttons:not(.non-wrapable) {
        max-height: 36px;
    }

        .sending-buttons:not(.non-wrapable) i + .little-top {
            float: none;
            top: -6px;
            margin-left: 8px;
        }

        .sending-buttons:not(.non-wrapable) i {
            float: none;
            margin-left: 0;
        }

        .sending-buttons:not(.non-wrapable).gray {
            margin-bottom: 5px;
        }

    .butts-res-center-text {
        text-align: center;
    }

    .buttons-separator-line {
        display: none;
    }

    .status-drp {
        display: none;
    }

    .addit-menu {
        width: 94%;
        padding: 10px 3%;
        margin-left: 0;
        margin-bottom: 20px;
    }

        .addit-menu ul, .addit-menu h2 {
            width: auto;
            display: inline-block;
            float: none;
        }

        .addit-menu h2 {
            margin-right: 30px;
            position: relative;
            bottom: -6px;
        }

        .addit-menu li {
            width: auto;
            float: none;
            display: inline-block;
        }

            .addit-menu li a {
                border-top: none !important;
                padding-right: 12px;
            }

    .addit-menu-1 {
        width: 94%;
        padding: 10px 3%;
        margin-left: 0;
        margin-bottom: 20px;
    }

        .addit-menu-1 ul, .addit-menu-1 h2 {
            width: auto;
            display: inline-block;
            float: none;
        }

        .addit-menu-1 h2 {
            margin-right: 30px;
            position: relative;
            bottom: -6px;
        }

        .addit-menu-1 li {
            width: auto;
            float: none;
            display: inline-block;
        }

            .addit-menu-1 li a {
                border-top: none !important;
                padding-right: 12px;
            }

    .main-min, .main-min.bigger {
        width: 94%;
        padding: 10px 3%;
        margin-left: 0;
    }

    .job-per-anchor {
        display: none;
    }

    .status-popup {
        display: block;
    }

    .add-file:not(.nondisable) {
        display: none;
    }

    .formitable {
        float: left;
        background: none;
        display: block;
    }

    .right-slide-out {
        display: none;
    }

    .job-search-tools .looped-field.w1132 {
        width: 150px !important;
    }

    .cost-item-price-block {
        right: 0px;
    }

    .colorpicker-right:before {
        left: 0px !important;
        right: auto !important;
    }

    .colorpicker-right:after {
        left: 0px !important;
        right: auto !important;
    }

    .colorpicker.dropdown-menu {
        margin: 2px 145px 0;
    }
}

@media only screen and (max-width:770px) {
    .login-halfs-wrapper {
        width: 100%;
    }

    .then-mobile {
        margin-top: 5px;
    }

    .addit-menu {
        margin-bottom: 0;
        padding-bottom: 0;
    }

        .addit-menu .actual-h2, .then-mobile-head {
            font-size: 18px;
            margin-left: 0;
        }

        .addit-menu .actual-h2 {
            margin-bottom: 15px;
        }

        .addit-menu ul li a {
            margin-top: 0 !important;
        }

    .addit-menu-1 {
        margin-bottom: 0;
        padding-bottom: 0;
    }

        .addit-menu-1 .actual-h2, .then-mobile-head {
            font-size: 18px;
            margin-left: 0;
        }

        .addit-menu-1 .actual-h2 {
            margin-bottom: 15px;
        }

        .addit-menu-1 ul li a {
            margin-top: 0 !important;
        }
}

@media only screen and (max-width:750px) {
    #top-menu > ul a {
        margin-left: 10px;
        margin-right: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .make-it-inline {
        display: none;
    }

    .then-half {
        width: 79%;
        padding-left: 1%;
    }

        .then-half.none, .jw2-3.cus-job-hfbl {
            display: block;
            width: 20%;
            padding-left: 0;
            padding-right: 0;
        }

    .jw2-5.cus-job-hfbl {
        width: 80% !important;
    }

    .adv-big-popup {
        width: calc(96% - 2px) !important;
        padding-left: 2% !important;
        padding-right: 2% !important;
    }

    .inner-half {
        width: 100%;
    }
}

@media only screen and (max-width:640px) {
    .job-status-list-item {
        width: 100%;
    }

        .job-status-list-item .status-container .status-description {
            padding-right: 13%;
        }

    .quote-status-list-item {
        width: 100%;
    }

        .quote-status-list-item .status-container .status-description {
            padding-right: 13%;
        }
}

@media only screen and (max-width:590px) {
    .saved-price-block {
        width: 100%;
        position: relative;
        right: auto;
        top: auto;
        float: left;
        margin-bottom: 20px;
    }

    #logo {
        margin-left: 10px;
        width: 112px;
        margin-top: 18px;
    }

        #logo img {
            width: 100%;
        }

    .sending-buttons:not(.non-wrapable) {
        text-align: center;
    }

    .sending-buttons:not(.non-wrapable) {
        max-height: 300px;
    }

        .sending-buttons:not(.non-wrapable) .little-top, .sending-buttons:not(.non-wrapable) .clean-send, .sending-buttons:not(.non-wrapable) .clean-plus {
            width: 100%;
            float: left !important;
            margin-left: 0 !important;
            margin-right: 0;
        }

        .sending-buttons:not(.non-wrapable) .little-top {
            top: 0 !important;
        }

        .sending-buttons:not(.non-wrapable) .snd-removable {
            display: none;
        }

    .jw1 {
        width: 7%;
    }

    .jw2 {
        width: 93%;
    }

    .jw2-2 {
        float: right;
        width: 20%;
        padding-right: 10%;
        padding-top: 7px;
        margin-top: 10px;
        text-align: center;
    }

    .jw2-3 {
        float: right;
        width: 42%;
        margin-top: 10px;
        padding-top: 5px;
        text-align: center;
    }

    .jw2-4 {
        float: left;
        width: 18%;
        margin-top: 10px;
        font-size: 24px;
        color: #333;
    }

    .then-half {
        width: 65%;
        padding-left: 1%;
    }

        .then-half.none, .jw2-3.cus-job-hfbl {
            display: block;
            width: 34%;
            padding-left: 0;
            padding-right: 0;
        }

    .jw2-5.cus-job-hfbl {
        width: 66% !important;
    }

    .plus-icon, .minus-icon {
        position: static;
        top: auto;
        margin-top: 3px;
        margin-left: 2px;
    }

    #main-page {
        width: 100%;
    }

    .invoice-dropable > .full-width > .top-min {
        top: 0;
    }

    .invoice-dropable > .full-width {
        margin-bottom: 14px;
        float: left;
    }

        .invoice-dropable > .full-width > span:first-child:not(.top-bott-arr),
        .invoice-dropable > .full-width > label {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            display: block;
        }

    .nvc-table .mob-removable, .img-nvc-removable {
        display: none;
    }

    .w37 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 6px;
    }

        .w37 .ml12 {
            margin-left: 0;
        }

    .w27 {
        width: 45%;
        margin-left: 0;
        margin-right: 0;
    }

    .w21 {
        width: 35%;
        margin-left: 0;
        margin-right: 0;
    }

    .w15 {
        width: 20%;
        margin-left: 0;
        margin-right: 0;
    }

    .invoice-dropable > .full-width input[type="text"] {
        width: calc(94% - 2px) !important;
        margin-left: 0;
        margin-right: 0;
        padding-left: 3%;
        padding-right: 3%;
    }

    .invoice-dropable > .full-width .gr-br-sec {
        width: calc(100% - 2px) !important;
        margin-left: 0;
        margin-right: 0;
    }

    .new-job-fields input[type="text"]:not(.looped-field), .new-job-fields .gr-br-sec, .new-job-fields .min100:not(.no-mobres), .new-job-fields .mob-full {
        width: calc(98% - 4px) !important;
        padding-left: 1% !important;
        padding-right: 1% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left;
    }

    .new-job-fields .top-min {
        top: 0;
    }

    .new-job-fields > div:not(.no-wrplb) {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .new-job-fields .mob-none {
        bottom: -4px !important;
        float: none;
    }

    .adv-popup, .adv-popup-con, .adv-popup-con-sel {
        width: calc(100% - 2px);
        box-sizing: border-box;
        max-width: none;
        min-width: 0;
    }

        .adv-popup .looped-field, .adv-popup-con .looped-field, .adv-popup-con-sel .looped-field {
            width: calc(92% - 4px);
            margin-left: 2%;
            margin-right: 2%;
            padding-left: 2%;
            padding-right: 2%;
        }

    label .no-mobres {
        text-align: left;
    }

    .main-popup, .main-popup.bit-small, .main-popup.bit-big, .main-popup.so-small, .main-popup.very-small {
        box-sizing: border-box;
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
        top: 50px;
        left: 0;
    }

        .main-popup.bit-small .objs-wrapper {
            width: 100%;
            padding: 0;
        }

    #top-menu ul {
        width: 100%;
        padding: 0;
        display: flex;
        justify-content: flex-start;
    }

        #top-menu ul.menuPortal {
            width: auto;
        }

    #top-menu > ul:not(.scheduler-menu-top) li {
        margin-left: 2% !important;
        margin-right: 2%;
        position: relative;
    }

    .red-dang-work-menu {
        color: #fff;
        background: url('../assests/images/highq/overdue_reminder.svg') center left no-repeat;
        background-size: cover;
        text-align: center;
        width: 19px !important;
        height: 18px;
        float: right;
        font-size: 10px;
        margin-right: 0;
        font-weight: 600;
        line-height: 20px;
        position: absolute;
        right: 0;
        margin-top: 5px;
    }

    #top-menu > ul:not(.scheduler-menu-top) a {
        margin-left: 0 !important;
        margin-right: 0;
        padding-left: 18px;
        padding-right: 18px;
    }

    .menu-switch {
        display: none;
    }

    #header {
        text-align: center;
        padding: 4px 0;
    }

    .user-tr > .just-tr-inner > div.fright {
        display: none;
    }

    .user-tr {
        padding-left: 2%;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
    }

        .user-tr > .just-tr-inner {
            margin-right: 10px;
        }

        .user-tr img {
            max-width: 100%;
        }


    .sec-menu-additional {
        display: block;
        margin-left: 3%;
    }

        .sec-menu-additional .menu-switch.sec-switch {
            width: 31px;
            height: 21px;
            background: url('../assests/images/highq/hamburger-menu-black.svg') center center no-repeat;
            display: inline-block;
            float: left;
            margin-top: 12px;
            margin-right: 21px;
        }

        .sec-menu-additional .search-loop-black {
            width: 28px;
            height: 28px;
            background: url('../assests/images/highq/search-loop-black.svg') center center no-repeat;
            display: inline-block;
            float: left;
            margin-top: 8px;
        }

    .search-loop-black-toggle {
        width: calc(100% - 60px) !important;
        margin: 0;
        padding: 4px 43px 4px 15px;
    }

    .job-list-wrap .make-it-full {
        display: none;
    }

    .job-search-tools {
        display: none;
    }

    .mob-make-center {
        text-align: center;
    }

    .dropable-page {
        display: block;
    }

    .customer-nvc {
        margin-top: 0;
    }

        .customer-nvc .tbody, .customer-nvc-sub .tbody {
            padding: 8px 0;
        }

    .nvc-table.customer-nvc .w37, .nvc-table.customer-nvc-sub .w37,
    .nvc-table.customer-nvc .w15, .nvc-table.customer-nvc-sub .w15,
    .nvc-table.customer-nvc .w21, .nvc-table.customer-nvc-sub .w21,
    .nvc-table.customer-nvc .w27, .nvc-table.customer-nvc-sub .w27 {
        width: 94%;
        padding: 5px 3%;
    }

        .nvc-table.customer-nvc-sub .w27 span.ml12 {
            margin-left: 0;
        }

        .nvc-table.customer-nvc .w37 input[type="checkbox"] {
            display: none;
        }

    .customer-nvc .rmvbl, .customer-nvc-sub .rmvbl {
        display: block;
    }

    .customer-nvc .halfbl, .customer-nvc-sub .halfbl {
        width: 69%;
        float: left;
    }

    .acc-pagenav {
        margin: 10px 0;
    }

    .customer-nvc-sub {
        margin-top: 0;
    }

    .job-search-tools.nonhideable {
        display: block;
        background: transparent;
        padding: 0;
        margin-top: 20px;
    }

        .job-search-tools.nonhideable .hhidable {
            display: none;
        }

        .job-search-tools.nonhideable .aapearable {
            display: block !important;
            margin-left: 3%;
        }

    .fulbl-u {
        width: 100%;
    }

    .make-full-aw {
        width: calc(96% - 2px) !important;
        padding-left: 2% !important;
        padding-right: 2% !important;
    }

        .make-full-aw.full {
            width: calc(100% - 2px) !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

    .halfbl-f {
        width: 22%;
        margin-left: 0;
        margin-right: 0;
        display: block !important;
        float: left;
        text-align: right;
        margin-right: 8%;
        font-size: 15px;
    }

        .halfbl-f * {
            display: inline-block;
            float: none;
        }

    .halfbl-s {
        width: 70%;
        margin-left: 0;
        margin-right: 0;
        display: block;
        float: left;
    }

    .add-padd-dd {
        padding-left: 6%;
    }

    .line-appearable {
        width: 100%;
        height: 1px;
        background-color: #d4d4d4;
        display: block;
        float: left;
        margin-top: 18px;
    }

    .login-halfs-wrapper .login-halfs {
        padding-top: 20px;
        padding-bottom: 20px;
        height: auto;
    }

        .login-halfs-wrapper .login-halfs:last-child {
            padding-top: 50px;
            padding-bottom: 50px;
        }

            .login-halfs-wrapper .login-halfs:last-child h2 {
                margin-top: 0;
            }

    .scheduler-menu-top {
        width: 100% !important;
    }

    .user-tr .black-upper-dropdowns {
        right: 0;
    }

    .none590 {
        display: none;
    }

    .payment-process-popup .w30 {
        width: 100%;
    }

    .tbody.payment .w30 .title, .tbody.payment .w30 .value, .payment-tabs-trigger {
        display: block;
        width: 49%;
        float: left;
        margin: 0;
        margin: 5px 0;
    }

    .tbody.payment .w30 .title {
        padding-right: 2%;
    }

    .payment-process-popup .payment-butts-been {
        text-align: center;
    }

    .payment-process-popup .orange-butt {
        float: none;
        display: inline-block;
        margin-bottom: 10px;
    }

    .cost-item-price-block {
        width: 100%;
        position: inherit;
    }

    .sending-buttons:not(.non-wrapable) {
        width: 100%;
    }
}

@media only screen and (max-width:540px) {
    .upload-popup-header {
        display: none;
    }

    .upload-popup-wrapper {
        margin-top: 12px;
    }

        .upload-popup-wrapper .upload-popup-name-holder {
            width: calc(100% - 50px) !important;
        }

        .upload-popup-wrapper .upload-popup-small, .upload-popup-wrapper .upload-popup-big {
            width: 100%;
        }

        .upload-popup-wrapper .upload-popup-big {
            margin-top: 5px;
        }

            .upload-popup-wrapper .upload-popup-big input.gr-br-field {
                width: calc(85% - 2px) !important;
            }

    .main-popup.upload .upload-popup-buttons {
        text-align: center;
        width: 100%;
    }

        .main-popup.upload .upload-popup-buttons a, .main-popup.upload .upload-popup-buttons button {
            float: none;
            display: inline-block;
            margin-top: 12px !important;
        }

        .main-popup.upload .upload-popup-buttons a {
            position: relative;
            top: -3px;
        }

    .adv-popup.custom, .adv-popup-con.custom {
        width: calc(100% - 22px);
    }

    .reset-statuses-container {
        width: 100% !important;
    }

    #reset-job-statuses {
        margin-bottom: 20px;
    }

    #reset-quote-statuses {
        margin-bottom: 20px;
    }

    #reset-system-statuses-names {
        margin-bottom: 20px;
    }

    .save-job-statuses {
        float: left;
    }

    .save-quote-statuses {
        float: left;
    }
}

@media only screen and (max-width:490px) {
    #prices-been {
        width: 100%;
        margin-bottom: 20px;
    }

    .no-text-images img {
        width: 100%;
    }

    #download-example-csv {
        width: 100%;
        margin-top: 10px;
        float: left;
        margin-left: 0;
    }
}

@media only screen and (max-width:361px) {
    .main-popup.upload .upload-popup-buttons button {
        margin-right: 0;
    }
}

@media only screen and (max-width:321px) {
    .main-popup.upload .upload-popup-buttons button {
        margin-right: 0;
    }

    .status-popup .priority {
        width: 76% !important;
    }
}

@media only screen and (max-width:400px) {
    #top-menu > ul li {
        margin-left: 1.1% !important;
        margin-right: 1.1%;
    }

    .login-popup {
        width: calc(86% - 2px);
        left: 3%;
        padding: 30px 4%;
        margin-left: 0;
    }

    .dd-statuses-container {
        width: 80%;
        margin-bottom: 20px;
    }

    .dd-priorities-container {
        width: 81%;
        margin-left: 0;
    }

    .status-popup .priority {
        width: 79%;
    }

        .status-popup .priority .priority-item {
            width: 100%;
        }
}
/*END of responsive*/

/*Categories section*/
#import-csv-btn {
    position: relative;
    overflow: hidden;
    padding: 9px 20px 9px 40px;
    height: 18px;
}

    #import-csv-btn span {
        padding-left: 15px;
    }

    #import-csv-btn input.upload {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }

.template-import .dis-iblock {
    vertical-align: top;
    padding-top: 10px;
}

.categories-container .category {
    margin: -3px;
    box-sizing: border-box;
    border: 1px solid #D4D4D4;
    margin-right: 2px;
}

    .categories-container .category.root-category {
        margin-right: -1px;
    }

.category-items-container {
    min-height: 250px;
    max-height: 221px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 13px;
}

.root-category .category-items-container :nth-child(2) .category-item-name:after {
    content: "*";
}

.category-header {
    height: 25px;
    background-color: #E6E6E6;
}

.category-btn {
    height: inherit;
    width: 15px;
    font-size: 24px;
    margin-top: -2px;
    background: none;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;
}

    .category-btn:active:focus {
        color: #4d4d4d;
    }

.all-item {
    width: auto;
    margin-top: 3px;
    margin-left: 5px;
}

.minus-btn {
    margin-top: -4px;
}

.category-item {
    width: 97%;
    margin-top: 5px;
    height: 25px;
    position: relative;
    padding-left: 5px;
    padding-top: 9px;
    cursor: pointer;
}

    .category-item.active .category-item-name[contenteditable="true"] {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 1px 0 5px #9ecaed;
    }

.category.root-category .category-item.active {
    color: #fff;
    background-color: #f16522;
}

.category .category-item.active {
    color: #fff;
    background-color: #666666;
}

.category-item:hover {
    color: #fff;
    background-color: #D4D4D4;
}

.category-item-name {
    white-space: nowrap;
    width: 60%;
}

    .category-item-name.short {
        width: 60%;
    }

.expand-category {
    text-align: center;
}

.category-preset {
    font-weight: bold;
    font-size: 16px;
    width: 60%;
}

.template-container {
    /*width: 55%;*/
    margin-top: 15px;
}

    .template-container .font12 {
        width: 10%;
    }

.categories-section .category-templates .looped-field {
    width: calc(95% - 19px) !important;
}

.categories-section .category.adv-popup, .categories-section .category.adv-popup-con.adv-popup-con-sel {
    width: 264px;
}

.categories-section .category .looped-field {
    width: calc(95% - 20px) !important;
}

.categories-section .pop-inner span {
    white-space: nowrap;
    width: 77%;
}

.categories-section .category .pop-inner > span {
    position: absolute;
    margin-left: 5px;
}

.categories-section .category-name {
    width: 230px;
    padding-right: 25px;
}

.categories-section .category-selection-category {
    width: 284px;
}

.categories-section-filters .category-name {
    width: 100%;
    box-sizing: border-box;
}

.categories-section-filters .category-selection-category {
    width: 100%;
    box-sizing: border-box;
}

.categories-section .workers-section #filter_workers {
    margin-left: 0;
    margin-top: 0;
}

.categories-section .workers-section #search-slots-btn {
    background-color: #4d4d4d;
    padding: 6px 15px;
}

.categories-section .workers-section #start-date {
    width: 60%;
}

.categories-section .workers-section .looped-field {
    height: 28px;
    margin-bottom: 0;
}

.categories-section .workers-section table th {
    font-size: 13px;
    text-align: left;
    color: #4d4d4d;
}

.categories-section .workers-section table tr {
    vertical-align: top;
}

    .categories-section .workers-section table tr td {
        font-weight: bold;
        padding: 7px 0;
    }

.categories-section .workers-section table th > span {
    margin-left: 10px;
    content: url(../assests/images/top-down-arrow.png);
}

#workers-table {
    border-collapse: collapse;
}

    #workers-table tr td:not(:last-child) {
        padding-right: 10px;
    }

.worker.selected.underlined {
    border-bottom: 2px solid #DFDFDF;
}

.categories-section #clear-filters {
    margin-top: -28px;
    margin-right: 10px;
}

.categories-preview .preset-preview .pop-inner:hover {
    background-color: transparent;
    color: black;
}

.categories-preview {
    background-color: #F2F2F2;
}

    .categories-preview > div {
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .categories-preview > div > div {
            color: black;
        }

        .categories-preview > div:not(:last-child) {
            border-right: 2px solid #DFDFDF;
        }

        .categories-preview > div:last-child {
            border-left: 2px solid #DFDFDF;
            margin-left: -2px;
        }

        .categories-preview > div:nth-child(4) {
            border-right: none;
            border-left: 2px solid #DFDFDF;
            margin-left: -2px;
        }

.active-preset:before {
    position: absolute;
    content: "▸";
    margin-left: -15px;
    margin-top: -0.5%;
}

span.active-preset {
    margin-left: 5px;
}

.payment-form-holder .form-control {
    display: block;
    background: #fff;
    width: 100%;
}

    .payment-form-holder .form-control.savecard {
        padding-left: 55px;
    }

.payment-form-holder .saved-card-holder {
    position: relative;
}

    .payment-form-holder .saved-card-holder:before {
        content: '';
        display: block;
        bottom: 6px;
        left: 8px;
        width: 35px;
        height: 22px;
        position: absolute;
        background-image: url('themes/base/images/mc-logo.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

.payment-form-holder input.check-save-card {
    position: absolute;
    opacity: 0;
}

    .payment-form-holder input.check-save-card + label {
        position: relative;
        cursor: pointer;
        padding-left: 25px;
        color: #999;
    }

        .payment-form-holder input.check-save-card + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 1em;
            height: 1em;
            border: 1px solid #ccc;
            background: #fff;
            border-radius: 4px;
        }

    .payment-form-holder input.check-save-card:checked + label:after {
        content: '✔';
        position: absolute;
        top: .2em;
        left: .1em;
        font-size: 1.1em;
        line-height: 0.8;
        color: #f16522;
        transition: all .2s;
    }

.payment-form-holder .input-row.checkbox-holder {
    width: 100%;
}

    .payment-form-holder .input-row.checkbox-holder .logo-holder {
        text-align: right;
    }

    .payment-form-holder .input-row.checkbox-holder .checkbox-group {
        padding-top: 3px;
    }

    .payment-form-holder .input-row.checkbox-holder .logo-holder img {
        width: 50%;
    }

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

.red-link {
    color: #f16522;
    font-size: 12px;
}

.black {
    color: black;
}

.underlined {
    text-decoration: underline;
}

.payment-form-holder {
    padding-right: 15px !important;
}

    .payment-form-holder .input-row {
        width: 84%;
        margin-top: 10px;
    }

@media only screen and (max-width:450px) {
    .payment-form-holder .input-row {
        width: 87%;
        margin-top: 10px;
    }
}

@media only screen and (max-width:360px) {
    .payment-form-holder .input-row {
        width: 99%;
        margin-top: 10px;
    }
}

.payment-form-holder .input-row.card-num-holder {
    width: 75%;
    margin-top: 10px;
}

.payment-form-holder .input-group {
    float: left;
    width: 50%;
}

    .payment-form-holder .input-group input {
        width: 84% !important;
    }

@media only screen and (max-width:450px) {
    .payment-form-holder .input-group input {
        width: 79% !important;
    }
}

@media only screen and (max-width:360px) {
    .payment-form-holder .input-group input {
        width: 73% !important;
    }
}

.payment-form-holder .input-group + .input-group {
}

.payment-form-holder a.delete-card-btn {
    float: right;
    color: #f16522;
}

@media only screen and (max-width:870px) {
    .categories-section {
        width: 90% !important;
    }
}

@media only screen and (max-width:590px) {
    .alfbt {
        font-size: 18px;
        padding: 10px 9px 9px 9px;
    }

    .category {
        margin-bottom: -2px;
        width: 40%;
    }

        .category:nth-child(2n) {
            border-right: 1px solid #D4D4D4;
        }

    .gr-br-field#category-template-name {
        width: 65%;
    }

    .category-preset {
        width: 70%;
    }

    .template-container {
        width: 100%;
    }

        .template-container .font12 {
            width: 15%;
        }

    .categories-section .clear-filters {
        margin-top: 30px;
    }

    .categories-section #start-date {
        width: 60% !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
        margin-right: 10px !important;
    }
}

@media only screen and (max-width:490px) {
    #download-example-csv {
        width: 100%;
        margin-top: 10px;
        float: left;
        margin-left: 0;
    }
}

@media only screen and (min-width:401px) {
    .categories-preview {
        display: flex;
    }

    .preset-preview {
        flex: 1;
    }
}

@media only screen and (max-width:400px) {
    .category {
        margin-bottom: -2px;
        width: 80%;
        border-right: 2px solid #D4D4D4;
    }

    .categories-preview {
        padding-right: 20px;
        padding-left: 20px;
    }

        .categories-preview > div:not(:last-child) {
            border-right: none;
        }

        .categories-preview > div {
            width: 80%;
        }

            .categories-preview > div:not(:first-child) {
                width: 80%;
                border-top: 2px solid #DFDFDF;
                border-left: none;
            }
}

/*Categories section end*/

.min180 {
    min-width: 180px;
}

.ui-autocomplete {
    z-index: 100;
}

.add-file {
    background-image: none !important;
    position: relative;
    padding-left: 40px;
}

    .add-file:before {
        display: inline-block;
        position: absolute;
        left: 10px;
        font-size: 23px;
        line-height: 1;
        top: 5px;
    }

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    border-radius: 5px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ADD361;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 32px;
        width: 53%;
        left: 1px;
        bottom: 1px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 3px;
        /* outline: 2px; */
        /* outline-color: gray; */
    }

input:checked + .slider {
    background-color: #F3332D;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.status-checkbox {
    margin-top: 7px !important;
    position: absolute;
    margin-left: 11px !important;
}

body {
    display: none;
}
/*.addAvatar{
    width:46px;
    height:46px;
    border-radius:46px;
    display:block;
    overflow:hidden;
}
.image-profile-shadow{
    width:auto;
    height:46px;
    border-radius:0;
}*/
.clearfix::after {
    content: '';
    clear: both;
    display: table;
}

.job-status-wrapper-left {
    padding-left: 28px;
}

.quote-status-wrapper-left {
    padding-left: 28px;
}

.job-status-wrapper-left, .job-status-wrapper-right {
    width: 800px;
    padding-left: 15px;
    float: left;
    padding-right: 15px;
}

.quote-status-wrapper-left, .job-status-wrapper-right {
    width: 800px;
    padding-left: 15px;
    float: left;
    padding-right: 15px;
}

.row-flex.jobstatus {
    display: flex;
    flex-direction: row;
    width: calc(100% - 216px);
}

.row-flex.quotestatus {
    display: flex;
    flex-direction: row;
    width: calc(100% - 216px);
}

@media screen and (max-width:870px) {
    .row-flex.jobstatus {
        width: 100%;
        flex-grow: 1;
    }

    .row-flex.quotestatus {
        width: 100%;
        flex-grow: 1;
    }
}

.table-holder {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

.table-job-naming {
    width: 55%;
}

.table-quote-naming {
    width: 55%;
}

@media screen and (max-width:870px) {

    .table-job-naming {
        width: 56%;
    }

    .table-quote-naming {
        width: 56%;
    }
}

.table-job-status {
    width: 33.333%;
}

.table-quote-status {
    width: 33.333%;
}

.portal-mapping {
    width: 143px;
}

.flex-heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.job-status-list-item {
    position: relative;
}

.quote-status-list-item {
    position: relative;
}

.job-status-list-item > i {
    position: absolute;
    right: -26px;
    top: 17px;
    margin: 0px 15px;
}

.quote-status-list-item > i {
    position: absolute;
    right: -26px;
    top: 17px;
    margin: 0px 15px;
}
/*.job-status-list-item .status-container{
        width:90%;
    }*/
.nondefault .status-container {
    width: 90%;
}

.webapp-job-statuses {
    width: 100%;
}

.webapp-quote-statuses {
    width: 100%;
}

.nondefault-container {
    margin-right: -26px;
}

.nonfirst {
    max-width: 140px;
}


.first-col {
    width: auto;
}

    .first-col .delete-status-button {
        position: absolute;
        right: -17px;
        top: 8px;
    }

    .first-col:hover .delete-status-button {
        display: none;
    }

.flex-heading h4 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.default-view a {
    position: absolute;
    margin-left: 194px;
}

.default-view div {
    width: 182px !important;
}

.repeated-status-input {
    width: 140px;
}



.requested-color {
    color: #DA70D6;
}

.on-hold-color {
    color: #da00e7;
}

.rejected-color {
    color: #fb021e;
}

.rejected-by-customer-color {
    color: #660000;
}

.accepted-color {
    color: #6ac034;
}

.sent-color {
    color: #1c94d8;
}

.draft-completed-color {
    color: #009f46;
}

.draft-color {
    color: #f19407;
}

.job-title {
    padding-right: 22px;
    position: relative;
    box-sizing: border-box;
}
/*.job-title i{
        position:absolute;
        right:5px;
        color:gray;
        font-size:18px;
    }*/ .job-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.workforceIcon {
    font-size: 102px;
    float: right;
    margin-top: -49px;
    margin-right: 42px;
    color: #dcdcdc;
    opacity: 0.5;
}

.poweredByLabel {
    font-size: 10px;
    color: white;
    float: right;
    opacity: 0.3;
    margin-top: 2px;
    margin-right: 82px;
}

@media only screen and (max-width:590px) {
    .workforceIcon {
        margin-right: 5px;
    }

    .poweredByLabel {
        margin-right: 45px;
    }
}

.search {
    position: relative;
}

    .search input {
        text-indent: 30px;
    }

    .search .icon-Search {
        position: absolute;
        top: 3px;
        font-size: 23px;
        z-index: 100;
        float: right;
        left: 75%;
    }

.search-input {
    width: calc(100% - 52px) !important
}

.icon-Search {
    cursor: pointer;
}

.menuPortal {
    margin-top: -20px;
}

.users-and-permissions {
    float: left;
    margin-bottom: 25px;
}

#contactCustomer > label:hover {
    cursor: pointer;
}

.customers-portal-logo {
    height: 61px !important;
    margin-top: -1px !important;
}

.speech-bubble {
    /*position: fixed;
    background: #4d4d4d;
    border-radius: .4em;
    width: 280px;
    padding: 10px;
    font-size: 90%;*/
    background: #4d4d4d;
    border-radius: .4em;
    width: 280px;
    padding: 10px;
    font-size: 90%;
    padding: 18px 18px;
}

    .speech-bubble:after {
        content: '';
        position: absolute;
        top: 0;
        left: 30%;
        width: 0;
        height: 0;
        border: 27px solid transparent;
        border-bottom-color: #4d4d4d;
        border-top: 0;
        border-left: 0;
        margin-left: -25.5px;
        margin-top: -27px;
        /*content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 0;
        border: 51px solid transparent;
        border-bottom-color: #feeacb;
        border-top: 0;
        border-left: 0;
        margin-left: -25.5px;
        margin-top: -51px;*/
    }

.pos-rel .notes-bubble-wrap {
    /*position: absolute;*/
    height: 18px;
    width: 18px;
    /*right: 1px;*/
    /*left: -20px;
    top: 0;*/
    /*float: right;
    margin-right: 0px;*/
    color: rgb(70,70,70);
    /* margin-top: -17px; */
    /*margin-top: 0;*/
}

.notes-bubble-wrap {
    /*position: absolute;*/
    height: 17px;
    width: 17px;
    /*right: 2px;
    top: 0;*/
    color: rgb(70,70,70);
    /*float: right;
    margin-right: 15px;
    margin-top: -17px;*/
}

/* bubble-block */
.bubble-block {
    width: 23px;
    float: left;
    min-height: 1px;
}
/* bubble-block */

.notes-bubble-icon {
    z-index: 11; /*100*/
}

.speech-bubble-wrap {
    display: none;
    z-index: 5000;
    top: 20px;
    left: 60px;
    position: absolute;
    padding-top: 22px;
    transform: translate(-39%, 0);
}

    .speech-bubble-wrap .speech-bubble {
        position: relative;
    }

    .notes-bubble-icon:hover + .speech-bubble-wrap,
    .notes-bubble-icon:hover + .speech-bubble-wrap > .speech-bubble,
    .speech-bubble-wrap:hover {
        display: block;
    }

.status-popup.for-quote {
    display: block;
    border: none;
    width: 100%;
    padding: 0;
    margin-bottom: 0;
}

    .status-popup.for-quote .anchor {
        border: 0;
    }

.quote-status {
    width: 40%;
}

.quote-status-name-dropdown {
    width: unset !important;
}

.non-dropdown-column {
    display: inline-flex;
    height: 30px;
}

.settings-portal-circle {
    height: 26px;
    width: 131px !important;
    margin-left: 8px;
}

.portalUsersForm {
    margin-left: 12px;
}
/*@-moz-document url-prefix() {
    .notes-bubble-wrap {
        position: relative;
        float: right;
        margin-right: 0px;
    }
}*/

.job-description-text {
    overflow: hidden;
}

/*.job-title {
    overflow: hidden;
}*/
.location-textarea {
    width: 100% !important;
    height: 100px;
    border-width: 1px;
    resize: vertical;
    box-sizing: border-box;
}

.location-name input {
    width: 100%;
    box-sizing: border-box;
}

.invoice-date-col {
    width: 10%;
}

@media screen and (max-width:960px) {
    .invoice-date-col {
        width: 100% !important;
    }
}

.adv-popup.category-templates {
    max-width: none;
    width: 100%;
    min-width: 0;
}

.filter-box-holder.cost-items {
    margin: 15px;
}

.customer-dropdown .contract-dropdown .filter-box-holder, .items-dropdown .filter-box-holder {
    margin: 10px;
    padding-right: 0;
}

    .customer-dropdown .contract-dropdown .filter-box-holder span, .items-dropdown .filter-box-holder span {
        right: 15px !important;
    }

.role-select-holder {
    width: 24%;
    height: 100%;
    position: relative;
    padding-right: 20px;
}

@media screen and (max-width:575px) {
    .role-select-holder {
        width: 100%;
        float: none;
        margin-top: 5px;
    }
}

@media screen and (max-width:575px) {
    .jobs-category-list > .job-per-anchor {
        display: none;
    }
}

.role-select-holder .cross-delete {
    position: absolute;
    right: 0;
    top: 8px;
}

.date-holder {
    background: #f2f2f2;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.custom-field-popup .filter-box-holder {
    padding-right: 20px;
    padding-left: 20px;
    position: relative;
    margin-top: 10px;
}

.custom-field-popup .dropable-field .adv-popup {
    margin-left: 20px;
}

.service-item-dropdown .filter-box-holder {
    margin: 9px;
}

.template-dropdown .filter-box-holder, .addresses-customer .filter-box-holder,
.categories-section-filters .filter-box-holder {
    margin: 10px;
}

.wraping-word {
    word-break: break-word;
}

.overflow-h {
    overflow: hidden;
}

.email-template textarea, .tab-pane textarea {
    width: 100%;
    max-width: 414px;
}

.invoice-btn {
    background-color: #808080;
    width: 100%;
    padding: 5px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.adv-popup-сustom-fields label {
    padding-left: 10px;
}

.adv-popup-сustom-fields .drops-item-label {
    padding-left: 25px;
}

.adv-popup-сustom-fields .section-title {
    color: #808080;
}

.new-job-holder {
    display: flex;
    padding-top: 25px;
    padding-bottom: 25px;
    position: relative;
    padding-right: 50px;
    border-bottom: 1px solid #e6e6e6;
}

    .new-job-holder.base-gray {
        background: #f2f2f2;
        border: none;
    }

.filter-row {
    width: 100%;
}

    .filter-row .filter-select-holder {
        display: inline-block;
        max-width: 250px;
        width: 100%;
        box-sizing: border-box;
        vertical-align: middle;
    }

.filter-row {
    margin-bottom: 25px;
    padding-left: 35px;
    vertical-align: middle;
    display: inline-block;
}

    .filter-row label {
        padding-right: 10px;
    }

    .filter-row .filter-select-holder .filter-select {
        width: 100%;
    }

    .filter-row .gray-butt {
        padding: 6px 15px;
        box-sizing: border-box;
    }

.new-job-holder .filter-drop {
    position: absolute;
    right: 0;
    height: 38px;
    width: 38px;
    color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    top: 0;
    cursor: pointer;
    margin: 20px;
    background: #0e5370;
}

    .new-job-holder .filter-drop .anchor {
        box-sizing: border-box;
        padding: 11px;
    }

.popup-jdesc {
    word-break: break-word;
}

.checkbox-holder {
    margin: 10px;
}

.filter-drop .dropdown-items {
    color: #000;
    width: 111px;
    right: 0;
    border-radius: 3px;
    left: auto;
    top: 100%;
    margin-top: 0;
    padding: 10px 0 !important;
}

.filter-drop .status-anchor {
    height: 100%;
}

.filter-drop .item-inner {
    padding-left: 15px !important;
    box-sizing: border-box;
}

.statuses {
    width: 100%;
    padding: 0 !important;
}

    .statuses .inside-mustivisit-item {
        width: 100%;
        box-sizing: border-box;
    }

.pl-40 {
    padding-left: 40px;
}

.multiDropList {
    padding: 4px 4%;
    width: 100%;
    padding-left: 15px !important;
    box-sizing: border-box;
    float: left;
    cursor: pointer;
}

.multiHoverOuter {
    padding: 0 !important;
}

.multiHoverInner {
    padding-left: 15px !important;
    padding: 4px 4%;
    display: block;
    float: none;
}

    .multiHoverInner:hover {
        background: #808080;
        color: #ffffff;
    }

.arrowIconOffset {
    font-size: 12px;
    padding-left: 2px;
}

.a-user-holder {
    display: inline-flex;
    flex-wrap: wrap;
}

.a-user {
    padding-left: 5px;
    padding-right: 5px;
}

button.multivisit span:first-child {
    font-size: 24px;
    margin-right: 5px;
}

.flex-btn-holder {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.multivisit-extend {
    position: absolute;
    top: 50%;
    margin-top: 2px;
    left: 13px;
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid;
    background-image: none;
    transition: 0.3s;
    border-left-color: red;
}

.multivisit-transform {
    transform: rotate(90deg);
}

.dueDate {
    margin-bottom: 18px;
}

.jw2-1DueDate {
    width: 8% !important;
}

.jw1-Jobs-DueDate {
    width: 2% !important;
}

.jw2-Jobs-DueDate {
    width: 98% !important;
}

.jw2-1-Jobs-DueDate {
    width: 10% !important;
}

.jw2-3-Jobs-DueDate {
    width: 6% !important;
}

.jw2-4-Jobs-DueDate {
    width: 9% !important;
}

.jw2-6-Jobs-DueDate {
    width: 11% !important;
}

.jw2-8-Jobs-DueDate {
    width: 8% !important;
}

.jw2-9-Jobs-DueDate {
    width: 7% !important;
}

.icon-Add {
    color: #808080;
    font-size: 18px;
    background-color: transparent;
    margin-left: 5px;
}

.icon-Remove {
    font-size: 18px;
    background-color: transparent;
    margin-left: 5px;
}

.add-remove-icon-color {
    color: rgb(15, 198, 233);
}

.dueDateView {
    margin-top: 11px;
}

.visitLine {
    width: 5px;
    height: 80px;
    margin-right: 5px;
    opacity: 0.2;
}

.visitPrice {
    position: relative;
    left: -15px;
}

.visitPriceDueDate {
    position: relative;
    left: -12px;
}

.visitCustomer {
    position: relative;
    left: -13px;
}

.visitCustomerDueDate {
    position: relative;
    left: -9px;
}

.visitSite {
    position: relative;
    left: -9px;
}

.visitSiteDueDate {
    position: relative;
    left: -2px;
}

.visitDueDate {
    position: relative;
    left: 4px;
}

.visitScheduleTime {
    position: relative;
    left: -6px;
}

.visitScheduleTimeDueDate {
    position: relative;
    left: 10px;
}

.visitAssignee {
    position: relative;
    left: -3px;
}

.visitAssigneeDueDate {
    position: relative;
    left: 18px;
}

.m10 {
    margin: 10PX;
}

.visitButton {
    float: right;
    position: relative;
    left: 3px;
    top: -18px;
}

.visitButtonDueDate {
    float: right;
    position: relative;
    left: 31px;
    top: -18px;
}

.systemTransparentBackground {
    background-color: transparent !important;
}

.activityHolder {
    width: 390px;
    height: 700px;
    display: inline-flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: space-between;
}

    .activityHolder .list-group {
        max-height: 650px;
        overflow: auto;
    }

    .activityHolder .activity-bth-holder .btn-activity {
        margin-right: 20px;
        color: #fff;
    }

#activityMapOuter {
    height: 700px;
    min-width: 700px;
    position: absolute;
    display: inline-block;
    /*margin-left: 40px;*/
}

@media (max-width: 1500px) {
    #activityMapOuter {
        min-width: 600px;
    }
}

@media (max-width: 1400px) {
    #activityMapOuter {
        min-width: 550px;
    }
}

@media (max-width: 1340px) {
    #activityMapOuter {
        min-width: 450px;
    }
}

@media (max-width: 1200px) {
    #activityMapOuter {
        position: relative;
        width: 100%;
    }
}

#activityMapHolder {
    height: 700px;
    z-index: 1;
}

.activitySelect {
    cursor: pointer;
}

    .activitySelect:hover {
        background-color: rgba(128,128,128, 0.2);
    }

.revisit-line {
    width: 572px;
    margin-left: 28px;
}

.tooltip-btn {
    position: relative;
    display: inline-block;
    margin-left: 25px;
}

    .tooltip-btn i {
        font-size: 19px;
        color: #f16522;
        cursor: pointer;
    }

    .tooltip-btn .tooltip {
        position: absolute;
        z-index: 9845;
        width: 282px;
        right: 50%;
        left: 50%;
        margin-left: -142px;
    }

        .tooltip-btn .tooltip .content {
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            vertical-align: top;
            color: #333;
        }

            .tooltip-btn .tooltip .content.content-bottom {
                text-align: center;
                vertical-align: top;
            }

            .tooltip-btn .tooltip .content .panel {
                color: #808080;
                display: inline-block;
                min-width: 250px;
                margin-bottom: 0;
                position: relative;
                text-align: left;
                margin-left: 3px;
                margin-right: 3px;
                margin-bottom: 2px;
                border-radius: 3px;
                border: 1px solid #ddd;
                background-color: #fff;
                padding: 5px;
            }

            .tooltip-btn .tooltip .content.content-bottom .panel {
                margin-top: 15px;
                box-shadow: none;
            }

                .tooltip-btn .tooltip .content.content-bottom .panel .panel-content {
                    padding: 5px;
                }

        .tooltip-btn .tooltip p {
            margin: 0;
            margin-bottom: 15px;
            line-height: 1.6em;
            font-size: 14px;
            border: none;
            background: none;
            box-shadow: none;
        }

        .tooltip-btn .tooltip .content .panel .panel-content-actions .appcues-actions-left {
            text-align: left;
            font-size: 13px;
            padding-left: 5px;
        }


        .tooltip-btn .tooltip .content .panel:before {
            bottom: 100%;
            left: 50%;
            position: absolute;
            height: 0;
            width: 0;
            content: "";
            z-index: 2;
            border-bottom: 10px solid #ddd;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            margin-left: -10px;
        }

#hidePrefixTooltip:hover {
    border-bottom: solid;
    border-bottom-width: 1px;
}

.activityAddressHolder {
    width: 300px;
    height: 50px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    opacity: 0.7;
    z-index: 2;
}

.activityAddressHolderInner {
    color: white;
    font-size: 15px;
    padding-left: 20px;
    padding-top: 7px;
}

.activityAddressHolderInnerLocationUnknown {
    color: white;
    font-size: 15px;
    text-align: center;
    padding-left: 0px;
    padding-top: 0px;
}

.activityAddressPanelLocationUnknown {
    line-height: 50px;
    vertical-align: middle;
}

.iconSize {
    font-size: 17px;
    margin-top: -1px;
}

.messageIcon {
    /*margin-top: 1px !important;
    position: fixed;
    margin-left: -22px;
    margin-right: 16px;*/
    top: 1px !important;
    position: relative;
    margin-left: -22px;
    margin-right: 7px;
    overflow: unset !important;
    left: 8px !important;
}

.redIcon {
    position: absolute;
    top: -12px;
    /*left: -3px;*/
    right: 0;
}

button.add-file.icon-Add-long-button span {
    font-family: "proxima-nova",sans-serif !important;
}

div.add-file.icon-Add-long-button span {
    font-family: "proxima-nova",sans-serif !important;
}

.alert-gray {
    background-color: #4d4d4d;
    padding: 10px;
    display: inline-block;
    color: white;
}

.synced-with-xero-rate {
    text-transform: uppercase;
    color: greenyellow;
    font-size: 12px;
    display: block;
}

.word-wrap-text {
    word-wrap: break-word;
}

.deploy-alert {
    text-align: center;
    display: flow-root;
    background-color: #9E005D;
    padding: 10px;
    color: white;
}

.table {
    display: table;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

    .table td, .table th {
        padding: .5rem;
    }

.relative {
    position: relative;
}

.hidden {
    display: none;
}

.flex {
    display: flex;
}

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

.flex-row {
    flex-direction: row;
}

.items-start {
    align-items: flex-start
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.content-between {
    align-content: space-between;
}

.flex-no-shrink {
    flex-shrink: 0;
}

.flex-grow {
    flex-grow: 1;
}

.w-32 {
    width: 8rem
}

.w-48 {
    width: 12rem
}

.w-1\/3 {
    width: 33.33333%
}

.w-2\/3 {
    width: 66.66667%
}

.w-1\/2 {
    width: 50%
}

.w-4\/5 {
    width: 80%
}

.w-full {
    width: 100%;
}

.m-0 {
    margin: 0;
}

.m-1 {
    margin: 0.25rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-3 {
    margin: 0.75rem;
}

.m-4 {
    margin: 1rem;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mr-8 {
    margin-right: 2rem;
}


.my-1 {
    margin-top: .25rem;
    margin-bottom: .25rem
}

.mx-1 {
    margin-left: .25rem;
    margin-right: .25rem
}

.my-2 {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.mx-2 {
    margin-left: .5rem;
    margin-right: .5rem
}

.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: 0.25rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0
}

.py-0-important {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.px-0 {
    padding-left: 0;
    padding-right: 0
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.px-1 {
    padding-left: .25rem;
    padding-right: .25rem
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem
}

.hover\:bg-light-grey:hover {
    background-color: #ebf0ef;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-help {
    cursor: help;
}

@media screen and (min-width:574px) {
    .md\:hidden {
        display: none;
    }

    .md\:block {
        display: block;
    }

    .md\:flex {
        display: flex;
    }

    .md\:flex-column {
        flex-direction: column;
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:w-auto {
        width: auto;
    }

    .md\:w13 {
        width: 13%;
    }

    .md\:w14 {
        width: 14%;
    }

    .md\:w15 {
        width: 15%;
    }

    .md\:w16 {
        width: 16%;
    }

    .md\:w17 {
        width: 17%;
    }

    .md\:mt0 {
        margin-top: 0px;
    }
}

.bg-grey {
    background-color: #808080;
}

.border-t {
    border-top: 1px;
}

.text-white {
    color: #ffffff;
}

.border-r {
    border-right: 1px;
}

.border-l {
    border-left: 1px;
}

.border-b {
    border-bottom: 1px;
}

.border {
    border: 1px;
}

.border-solid {
    border-style: solid;
}

.border-grey {
    border-color: #808080;
}

.border-dark-grey {
    border-color: #8795a1;
}

.text-dark-grey {
    color: #8795a1;
}

.errors-list li {
    list-style: square;
    margin-left: 1rem;
}

.xero-button {
    background-color: #00B7E2;
}


.wf-modal-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: start;
    z-index: 9999;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: scroll;
}

    .wf-modal-backdrop::-webkit-scrollbar {
        width: 0 !important
    }

.wf-modal {
    background: #FFFFFF;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    margin-top: 10rem;
}

.wf-modal-header,
.wf-modal-footer {
    padding: 15px;
    display: flex;
}

.wf-modal-header {
    border-bottom: 1px solid #eeeeee;
    color: #4AAE9B;
    justify-content: space-between;
}

.wf-modal-footer {
    border-top: 1px solid #eeeeee;
    justify-content: flex-end;
}

.wf-modal-body {
    position: relative;
    padding: 20px 10px;
}

.wf-modal-fade-enter,
.wf-modal-fade-leave-active {
    opacity: 0;
}

.wf-modal-fade-enter-active,
.wf-modal-fade-leave-active {
    transition: opacity .3s ease
}

.popup-modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: table;
    transition: opacity 0.3s ease;
}

.popup-modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.popup-modal-container {
    width: 300px;
    margin: 0px auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
    transition: all 0.3s ease;
    font-family: Helvetica, Arial, sans-serif;
}

.popup-modal-header h3 {
    margin-top: 0;
    color: #F16522;
}

.popup-modal-body {
    margin: 15px 0;
}

.popup-modal-default-button {
    float: inherit;
}

.popup-modal-enter {
    opacity: 0;
}

.popup-modal-leave-active {
    opacity: 0;
}

    .popup-modal-enter .popup-modal-container,
    .popup-modal-leave-active .popup-modal-container {
        -webkit-transform: scale(2);
        transform: scale(2);
    }

.fade-enter,
.fade-leave-active {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .3s ease
}

.wf-btn {
    box-sizing: border-box;
    background-color: #ffffff;
    text-align: center;
    color: #f16522;
    font-size: 15px;
    font-family: 'proxima-nova', helvetica;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    min-width: 5rem;
    border: solid 1px #f16522;
    display: inline-block;
}

    .wf-btn.primary {
        background-color: #f16522;
        color: #fff;
    }

    .wf-btn.default {
        color: #22292f;
        border: none;
    }

    .wf-btn.grey {
        color: #FFFFFF !important;
        background-color: #828282 !important;
        border: solid 1px #828282 !important;
    }

    .wf-btn.grey-light {
        color: #6F6F6F;
        background-color: #FFFFFF;
        border: solid 1px #CCCCCC;
    }

@media only screen and (max-width: 760px) {
    .small-screen-visible {
        display: block !important;
    }
}

.alert-box {
    width: 100%;
    float: left;
    position: relative;
    border: 4px solid #aaa;
    border-radius: 5px;
    padding: 30px;
    text-align: center;
    background-color: #f5f5f5;
    font-size: 16px;
    font-weight: bold;
    color: #202020;
    margin-bottom: 20px;
    margin-top: 10px;
}

.btn-flat {
    background-color: #f0f0f0;
    border: 1px solid #d0d0d0;
    padding: 7px;
    text-transform: uppercase;
    font-size: 13px;
    color: #333;
}

.lightgray-container {
    background-color: #F2F2F2;
    border-radius: 5px;
    padding: 15px 10px;
}

.btn-flat:hover {
    background-color: #d0d0d0 !important;
}

.sorting-header {
    cursor: pointer;
}

.orange-link {
    color: #F06522;
    font-weight: bold;
}

.parent-triangle {
    font-size: 10px;
    margin-top: 4px;
    vertical-align: top;
    display: inline-block;
}

@media only screen and (max-width:590px) {

    .job-search-tools {
        display: block !important;
    }

        .job-search-tools .actions-container {
            display: none !important;
        }

        .job-search-tools .fright {
            display: block !important;
        }

    .search-loop-black {
        display: none !important;
    }
}

.bg-shadow {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.container-small {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: white;
    border: 1px solid #d0d0d0;
    display: flex;
}

.rounded {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.ml40 {
    margin-left: 40px;
}

.container-group {
    margin: 3px;
}

    .container-group label {
        font-weight: bold;
        display: inline-block;
        width: 100px;
    }

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.big-popup {
    min-width: 1000px !important;
    margin-left: -500px !important;
}

.clear-filter {
    width: 18px;
    height: 18px;
    background: url('/assests/css/images/gray-xross.png') center center no-repeat;
    cursor: pointer;
    margin-left: 10px;
    display: inline;
    vertical-align: middle;
    margin-bottom: 5px;
    position: absolute;
    bottom: -2px;
    margin-top: 5px;
    right: 5px;
}

.reports-filter .clear-filter {
    left: 0px;
    background-position-x: left;
    text-align: right;
    width: 60px;
    bottom: 0px;
    position: relative;
    margin: 10px 0px 0px 0px;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.cancel-subscription-panel {
    background-color: lightgray;
    padding: 20px;
    padding-bottom: 40px;
}

    .cancel-subscription-panel > p {
        padding-top: 20px;
        padding-bottom: 20px;
    }

.cancel-subscription-button {
    background-color: gray;
    color: white;
    padding: 10px 20px;
}

.subscription-users .plus-minus-button {
    vertical-align: middle;
}

.form-control:disabled {
    background-color: #e6e6e6;
}

.remove-filter-btn-container {
    position: absolute;
    top: 3px;
    right: 5px;
}

.ddlist-container {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.tbody {
    padding-bottom: 20px;
    padding-top: 15px;
}

.cost-item-legend {
    padding: 10px;
    width: 260px;
    display: block;
    position: relative;
    clear: right;
    float: right
}

    .cost-item-legend .item {
        margin-bottom: 15px;
    }

        .cost-item-legend .item > div:nth-of-type(1) {
            color: #000000;
            float: left;
            font-size: 15px;
            text-align: right;
            width: 140px;
        }

        .cost-item-legend .item > div:nth-of-type(2) {
            color: #000000;
            margin-left: 140px;
            text-align: right;
        }

    .cost-item-legend > hr {
        border-bottom: 1px solid #e6e6e6;
        margin-bottom: 10px;
    }

.expense-item-price {
    color: #EB5757 !important;
    font-weight: bold;
}

.profit-item-price {
    color: #60BF00 !important;
    font-weight: bold;
}

.cost-item-section-header {
    color: #4D4D4D;
    font-size: 18px;
}

.cost-item-popup {
    left: 50%;
    margin-left: -300px;
    margin-top: 20px;
    overflow-y: auto;
    position: absolute;
    top: 0;
    width: 600px;
    z-index: 999998;
    overflow: auto;
}

    .cost-item-popup .item-body {
        background-color: white;
        border: 1px solid #d0d0d0;
        border-radius: 5px;
        display: block;
        padding: 25px;
        position: relative;
        z-index: 100;
    }

.item-body .title {
    color: #4D4D4D;
    font-size: 25px;
    font-weight: 200;
}

.item-row {
    font-size: 0;
    margin-top: 10px;
    padding: 0;
}

    .item-row > label {
        font-size: 15px;
        padding-left: 5px;
        color: #202020;
    }

.item-control {
    box-sizing: border-box;
    display: inline-block;
    font-size: 15px;
    padding: 5px;
    padding-right: 10px;
    vertical-align: bottom;
}

    .item-control .inner {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 4px;
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        font-size: 0;
        height: 35px;
        padding: 5px 15px 5px 15px;
        position: relative;
    }

        .item-control .inner.padded {
            padding-left: 30px !important;
        }

        .item-control .inner > select {
            border: none;
            color: #4D4D4D;
            display: block;
            font-size: 15px;
            font-weight: bold;
            min-height: 20px;
            width: 100%;
        }

        .item-control .inner > textarea {
            border: none;
            color: #4D4D4D;
            display: block;
            display: block;
            font-size: 15px;
            font-weight: bold;
            max-width: 1000px;
            width: 100%;
        }

        .item-control .inner > input[type='text'] {
            border: none;
            color: #4D4D4D;
            display: block;
            display: block;
            font-size: 15px;
            font-weight: bold;
            min-height: 23px;
            width: 100%;
        }

            .item-control .inner > input[type='text']:disabled {
                background-color: white;
            }

.inner .caret {
    position: absolute;
    right: 15px;
    top: 12px;
}

.item-control > label {
    color: #4D4D4D;
    display: block;
    font-size: 15px;
    padding-left: 10px;
}

.item-row .separator {
    background-color: #C4C4C4;
    border-bottom: 1px solid #E6E6E6;
}

    .item-row .separator.wider {
        background-color: #C4C4C4;
        border-bottom: 3px solid #E6E6E6;
    }

.cost-head > div {
    padding-left: 7px;
    padding-right: 7px;
    box-sizing: border-box;
}

.cost-row > div {
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
}

.horizontal-item {
    display: inline-block;
    box-sizing: border-box;
    font-size: 0;
}

    .horizontal-item > div:first-child:not(.item-control) {
        display: inline-block;
        width: 100px;
        font-size: 15px;
        text-align: right;
        vertical-align: top;
    }

    .horizontal-item .item-control {
        display: inline-block;
        width: 230px;
        font-size: 15px;
        margin-left: 15px;
        vertical-align: top;
    }

        .horizontal-item .item-control .control {
            width: 100%;
            padding: 5px;
            padding-right: 10px;
            padding-left: 10px;
            border: 1px solid #d0d0d0;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            height: auto;
            overflow-y: auto;
            overflow-x: hidden;
        }

.control .droppable-sign {
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
    font-size: 9px;
}

.control:not(.assets-selection.horizontal-item.item-control.control):hover {
    transition: background-color 0.5s ease;
    background-color: #f0f0f0;
}

.control .selected-items {
    width: 100%;
    background-color: transparent;
    padding-right: 25px;
    position: relative;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.control .droppable-area {
    position: relative;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: transparent;
    z-index: 2;
}

.droppable-area > input[type='text'] {
    border: 1px solid #d0d0d0;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    font-size: 15px;
    width: 85%;
    margin-bottom: 7px
}

.droppable-area hr {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #f0f0f0;
}

.droppable-area > div[data-target='checkable-items'] label {
    display: block;
    line-height: 20px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.control .footer {
    display: block;
    text-align: center;
    padding-right: 5px;
    min-height: 20px;
    width: 100%;
    font-size: 14px;
    margin-top: 5px;
}

.workhours-table td {
    border-bottom: 1px solid #eee;
    padding: 10px 0px;
}

.workhours-table .closed td:not(:last-child) {
    opacity: 0.5;
}

.stripe-invoices td, .teams-table td {
    border-bottom: 1px solid #eee;
    padding: 10px 10px;
}

.stripe-invoices, .workhours-table, .teams-table {
    border-spacing: 0px;
    border-collapse: separate;
}

    .teams-table td {
        vertical-align: top;
    }

.medium-row-padding {
    padding-top: 10px;
    padding-bottom: 30px;
    border-bottom: 1px solid #dcdede;
}



.skill-tag {
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 0px 10px;
    cursor: pointer;
}

    .skill-tag span:first-child {
        font-size: 13px;
        line-height: 16px;
        color: #808080;
        vertical-align: text-top;
    }

    .skill-tag span:last-child > button {
        background-color: transparent;
        height: 25px;
        margin-left: 5px
    }

.skill-assigned > span {
    color: white !important;
}

div.sort-level-1 {
    background-color: #807d7d !important;
    color: white;
    padding: 5px;
    margin-top: 10px;
}

.sort-level-1 > li {
    margin: 5px 0px 3px 10px;
    cursor: pointer;
}

div.sort-level-2 {
    margin: 10px 0px 5px 10px;
    background-color: #EFEFEF !important;
    color: #202020 !important;
    padding: 5px;
}

.sort-level-2 > li {
    margin: 5px 0px 3px 20px;
    cursor: pointer;
}

.dragged {
    font-weight: 500;
    border-bottom: 2px solid;
}

.sort-level-1.closed > li,
.sort-level-2.closed > li {
    display: none;
}

.collapsible-team {
    cursor: pointer;
}

    .collapsible-team div {
        margin-right: 10px;
        margin-left: 5px;
    }

.sort-level-2.collapsible-team .scheduler-teams-arrow-right {
    border-left: 6px solid #202020;
}

.sort-level-2.collapsible-team .scheduler-teams-arrow-down {
    border-top: 6px solid #202020;
}

.inline-search-holder {
    position: absolute;
    right: 0;
    top: 0;
    padding: 2px
}

    .inline-search-holder ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        min-width: 265px
    }

        .inline-search-holder ul li {
            float: left;
            display: inline-block;
        }

            .inline-search-holder ul li .search-btn {
                position: absolute;
                right: 15px;
                top: 8px
            }

            .inline-search-holder ul li select {
                width: 120px;
                font-size: 13px;
                min-height: 33px;
                border: 1px solid #d0d0d0;
                border-left: 0;
                padding: 3px;
                margin-left: 0;
                padding-left: 5px;
                background-color: #f5f5f5
            }

            .inline-search-holder ul li i.icon-Flip-down {
                position: absolute;
                right: 20px;
                top: 13px;
                font-size: 12px;
                cursor: pointer;
            }

.inline-search-holder-wide {
    width: 530px;
}

.white-background {
    background-color: white;
}

/* The container */
.custom-checkbox-container {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .custom-checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
custom-checkbox-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
}

/* On mouse-over, add a grey background color */
.custom-checkbox-container:hover input ~ .checkmark {
    background-color: white;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox-container input:checked ~ .checkmark {
    background-color: white;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox-container .checkmark:after {
    left: 4px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.inline-search-holder-wide {
    width: 530px;
}

.white-background {
    background-color: white;
}

/* The container */
.custom-checkbox-container {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .custom-checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
custom-checkbox-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
}

/* On mouse-over, add a grey background color */
.custom-checkbox-container:hover input ~ .checkmark {
    background-color: white;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox-container input:checked ~ .checkmark {
    background-color: white;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox-container .checkmark:after {
    left: 4px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.bg-not-started {
    background-color: #686868;
}

.bg-in-progress {
    background-color: #F2AE00;
}

.bg-completed {
    background-color: #8AB73B;
}

.module-brick {
    color: white;
    width: 132px;
    height: 72px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: inline-block;
    cursor: pointer;
}

.module-brick-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 130px;
    height: 65px;
    padding: 0px 16px;
}

.module-brick.module-brick-not-selected {
    color: inherit;
    background-color: white;
    border: 1px solid #aaa;
    width: 130px;
    height: 70px;
}

.module-brick > .module-brick-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: white;
    position: relative;
    top: -62px;
    left: 108px;
}

    .module-brick > .module-brick-circle > i {
        font-size: 12px;
        font-weight: 100;
        padding: 0px 3px;
    }

.module-brick-upgrade {
    background-color: #8AB73B;
    color: white;
}

.module-brick.module-brick-upgrade > .module-brick-circle {
    background-color: #8AB73B;
    color: white;
}

.module-upgrade-brick,
.module-activity-brick {
    position: absolute;
    left: -100px;
    bottom: 80px;
    padding: 20px;
}

    .module-upgrade-brick > div,
    .module-activity-brick > div {
        padding: 0px;
        position: relative;
    }

        .module-upgrade-brick > div > div,
        .module-activity-brick > div > div {
            color: #808080;
            width: 250px;
            background: white;
            border: 1px solid white;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 1px 10px 30px rgba(0, 0, 0, 0.2);
        }

            .module-upgrade-brick > div > div :after,
            .module-activity-brick > div > div :after {
                content: '';
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                margin: 0 auto;
                width: 0;
                height: 0;
                border-top: solid 20px white;
                border-left: solid 20px transparent;
                border-right: solid 20px transparent;
            }

            .module-upgrade-brick > div > div a {
                background-color: #8AB73B;
                width: 70px;
            }

            .module-activity-brick > div > div a {
                width: 70px;
            }

.revisit_schedule_date, .revisit_until_date {
    width: 225px;
    margin-bottom: 5px;
}

.due-date-control {
    width: 230px;
}

.due-time-control {
    width: 90px;
}

.shedule-date-control {
    width: 230px;
}

.until-date-control {
    width: 230px;
}

.job-view-custom-fields br {
    display: none;
}

.admin-filter-select {
    margin-bottom: 0px;
    line-height: initial;
}

.person-pop-avatar {
    width: 45px;
    height: 45px;
}

.person-pop-statuses-table tbody {
    overflow-y: auto;
    display: block;
    max-height: 170px;
}

.clickable {
    cursor: pointer;
}

.draggable {
    cursor: grab;
}

.bold-on-hover:hover {
    font-weight: bold;
}

.scroll-y-osx-fix::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.scroll-y-osx-fix::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

.person-pop-address, .person-pop-email, person-pop-phone {
    max-width: 240px;
    float: left;
}

.asset-warranty-label {
    display: inline-block;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 13px;
    color: white;
}

    .asset-warranty-label.blue {
        background: #2D9CDB;
    }

    .asset-warranty-label.red {
        background: #db2d2d;
    }

.all-day-badge {
    display: inline-block;
    padding: 2px 4px;
    background: #808080;
    color: white;
    font-size: small;
}

.all-day-badge-alter {
    display: inline-block;
    padding: 2px 4px;
    color: #4d4d4d;
    background: white;
    font-size: small;
    line-height: 12px;
    height: 12px;
}

.view-site-history-link {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    width: 168px;
    margin-right: 100px;
}

.site-jobs-search-block {
    background: #F2F2F2;
    border-radius: 4px;
    padding: 10px;
}

.horizontal-gallery-container {
    height: 128px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

    .horizontal-gallery-container img {
        height: 100px;
        margin-right: 20px;
    }

.wide-input {
    width: 271px;
}

.job-site-map {
    width: 168px;
    border-radius: 3px;
    margin-right: 70px;
    margin-bottom: 3px;
}

.fieldworker-app-settings-container {
    max-width: 430px;
    line-height: 25px;
}

.site-map-marker {
    position: relative;
    width: 16px;
    right: -96px;
    top: -49px;
}

@media screen and (max-width:767px) {
    .site-map-marker {
        right: 145px;
        top: 53px;
    }
}

.align-vertial-top {
    vertical-align: top;
}

.site-map-table .map-column {
    width: 60%;
    text-align: right;
}

.checkbox-label-wrapped {
    margin-left: 20px;
    position: absolute;
    top: -35px;
}

.calendar-toggler {
    color: #4D4D4D;
    font-size: 25px;
    line-height: 30px;
}

    .calendar-toggler:hover {
        text-decoration: none;
    }

.calendar-view-type div {
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    display: inline-block;
    font-size: 15px;
    line-height: 18px;
    margin: 0;
    padding: 9px 20px 9px 20px;
    text-align: center;
}

    .calendar-view-type div:first-child {
        border-radius: 5px 0px 0px 5px;
    }

    .calendar-view-type div:nth-child(2) {
        border-radius: 0px 5px 5px 0px;
        margin-left: -5px;
    }

    .calendar-view-type div.active {
        background-color: #828282;
        color: white;
    }

.calendar-date-navigation div {
    align-items: center;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    box-sizing: border-box;
    color: #737373;
    cursor: pointer;
    display: flex;
    display: inline-block;
    margin: 0;
    padding: 9px 20px 9px 20px;
    text-align: center;
    text-align: center;
}

    .calendar-date-navigation div:hover {
        background-color: #f0f0f0;
    }

.dropdown-nav {
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.15), 0px 0px 10px rgba(0, 0, 0, 0.14);
    display: none;
    left: 0;
    padding: 10px 0 10px 0;
    position: absolute;
    top: 100%;
    z-index: 9;
}

    .dropdown-nav.open {
        display: block;
    }

    .dropdown-nav .menu {
        list-style-type: none;
        margin: 0;
        width: auto;
        width: 150px;
    }

        .dropdown-nav .menu li {
            color: #000000;
            cursor: pointer;
            display: block;
            font-size: 15px;
            line-height: 18px;
            padding: 7px 15px 7px 15px;
            font-weight: 500;
        }

            .dropdown-nav .menu li span.clear {
                position: absolute;
                right: 30px;
                top: 17px;
                color: #d0d0d0;
            }

            .dropdown-nav .menu li:hover {
                background: rgba(0, 0, 0, 0.1);
            }

            .dropdown-nav .menu li p {
                max-width: 150px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 11px;
                margin: 0;
                font-weight: normal;
            }

.wf-table {
    border-collapse: collapse;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

    .wf-table th, td {
        text-align: left;
        vertical-align: middle;
        position: relative;
    }

.timesheet.wf-table th, .timesheet.wf-table td {
    border-bottom: 1px solid #ddd;
    padding: 8px;
}

.wf-table th {
    color: #808080;
    font-size: 13px;
    line-height: 16px;
    word-wrap: break-word;
}

.wf-table td {
    border-bottom: 1px solid #CDCDCD;
    color: #202020;
    font-weight: 500;
    max-width: 200px;
    padding-bottom: 6px;
    padding-top: 7px;
    word-wrap: break-word;
}

.wf-table tfoot td {
    background-color: #F3F3F3;
    color: #4D4D4D;
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: bold;
}

.summary-list {
    list-style-type: none;
    margin: 0;
}

    .summary-list li {
        padding: 10px 30px 10px 30px;
        float: left;
    }

        .summary-list li:not(:last-child) {
            border-right: 1px solid #BBBBBB;
        }

        .summary-list li .title {
            font-size: 15px;
            color: #A9A9A9;
            display: block;
            line-height: 18px;
        }

        .summary-list li .calculation {
            font-size: 30px;
            line-height: 37px;
            color: #4D4D4D;
            display: block;
        }

.time-sheet-status {
    height: 12px;
    margin-right: 5px;
    top: 3px;
    width: 12px;
}

.user-profile-figure {
    background-size: 46px 46px;
    height: 50px;
    width: 50px;
}

.status-icon {
    top: 3px;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

.gray-lighter {
    font-weight: normal !important;
    color: #d5d5d5 !important;
}

.calendar-holder {
    position: absolute;
    left: 0;
    top: 100%;
    padding: 10px;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.15), 0px 0px 10px rgba(0, 0, 0, 0.14);
    min-width: 240px;
    z-index: 100;
}

.filters-holder {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 500px;
    padding: 10px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    z-index: 100;
    margin-top: 2px;
    background-color: white;
}

hr.separator {
    border-bottom: 1px solid #f0f0f0;
    display: block;
    clear: both;
    margin-top: 5px;
    margin-bottom: 15px;
}

.calendar-toggler {
    padding: 5px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 5px;
}

    .calendar-toggler:hover {
        background-color: #f9f9f9;
    }

    .calendar-toggler.open {
        border: 1px solid #f0f0f0;
        background-color: #f9f9f9;
    }

.filters-holder {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 500px;
    padding: 10px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    z-index: 100;
    margin-top: 2px;
    background-color: white;
}

hr.separator {
    border-bottom: 1px solid #f0f0f0;
    display: block;
    clear: both;
    margin-top: 5px;
    margin-bottom: 15px;
}

.day-navigation {
    padding: 0;
    margin: 0;
    background-color: #f3f3f3;
    display: block;
    position: relative;
    clear: both;
}

    .day-navigation:after {
        content: " ";
        display: block;
        clear: both;
    }

    .day-navigation ul {
        display: block;
        margin-left: 500px;
        padding: 0;
        list-style-type: none;
        width: 700px;
    }

        .day-navigation ul li {
            float: left;
            font-size: 14px;
            color: #4d4d4d;
            font-weight: 500;
            min-width: 50px;
            text-align: center;
            padding: 15px 20px 15px 20px;
            cursor: pointer;
        }

            .day-navigation ul li.active, .day-navigation ul li:hover {
                background-color: #828282;
                color: white;
            }

            .day-navigation ul li:hover {
                background-color: rgba(130, 130, 130, 0.2) !important;
                color: #4D4D4D !important;
            }

.worker-selector {
    display: inline-block;
    color: #4D4D4D;
    font-weight: 500;
}

    .worker-selector span {
        text-align: center;
        margin-left: 10px;
        margin-right: 25px;
    }

    .worker-selector i {
        cursor: pointer;
    }

    .worker-selector .down {
        position: absolute;
        right: 30px;
        top: 12px;
        font-size: 13px;
        cursor: pointer;
    }

.worker-holder {
    width: auto;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.15), 0px 0px 10px rgba(0, 0, 0, 0.14);
    z-index: 9999;
    display: none;
    padding-top: 5px;
    padding-bottom: 5px;
    max-height: 300px;
    overflow-y: auto;
}

    .worker-holder.open {
        display: block;
    }

    .worker-holder .menu {
        list-style-type: none;
        margin: 0;
        min-width: 150px;
    }

        .worker-holder .menu li {
            color: #000000;
            cursor: pointer;
            display: block;
            font-size: 15px;
            line-height: 18px;
            padding: 7px 15px 7px 15px;
        }

            .worker-holder .menu li:hover {
                background: rgba(0, 0, 0, 0.1);
            }

            .worker-holder .menu li.active {
                background: rgba(0, 0, 0, 0.1);
            }

.timesheet-actions-bar {
    position: absolute;
    top: -49px;
    left: 320px;
}

.approval-action-bar {
    position: absolute;
    top: -49px;
    left: 290px;
    padding: 2px;
    background-color: #4F4F4F;
    border-radius: 4px;
    color: white;
    font-size: 15px;
    font-weight: 500;
    padding-top: 9px;
    padding-bottom: 10px;
    cursor: pointer;
    min-width: 120px;
    padding-left: 20px;
    width: 110px;
}

    .approval-action-bar.active {
        background-color: #8AB73B !important;
        padding-left: 10px;
        text-align: center;
    }

    .approval-action-bar > span {
        position: absolute;
        right: 10px;
        top: 11px;
        font-size: 15px;
        display: inline-block;
    }

.wf-table tr.gray th, .wf-table tr.gray td {
    background-color: #f3f3f3;
}

.wf-table tr.dates th {
    font-size: 14px;
    color: #4d4d4d;
    font-weight: 500;
    min-width: 50px;
    text-align: center;
    padding: 15px 20px 15px 20px;
    cursor: pointer;
}

    .wf-table tr.dates th.active {
        background-color: #828282 !important;
        color: white !important;
    }

    .wf-table tr.dates th:hover:not(:first-child):not(:last-child):not(:nth-child(9)) {
        background-color: rgba(130, 130, 130, 0.2) !important;
        color: #4D4D4D !important;
    }

.wf-table tr.details td {
    padding-top: 10px;
    padding-bottom: 10px;
}

    .wf-table tr.details td:not(:first-child) {
        cursor: pointer;
    }

.wf-table tr.details.standalone td {
    height: 35px;
}

.wf-table tr.details td p.name {
    font-weight: 700;
    font-size: 15px;
    color: #202020
}

.wf-table tr.details td p.reference {
    font-weight: normal;
    font-size: 15px;
    color: #202020
}

.wf-table tr.details td:not(:first-child) {
    text-align: center;
}

.wf-table tfoot tr td:not(:first-child) {
    text-align: center;
    font-weight: normal;
}

.wf-table tfoot tr.approved td {
    color: #8AB73B;
}

.wf-table tbody tr td.approved {
    color: #8AB73B;
}


.wf-table tr.details td:hover::after {
    display: block;
    background-color: orange !important;
    content: '\00a0';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}

tr.t-left td {
    text-align: left !important;
}

.wf-popup {
    left: 50%;
    margin-left: -300px;
    margin-top: 20px;
    overflow-y: auto;
    position: absolute;
    top: 0;
    width: 600px;
    z-index: 10;
    overflow: auto;
}

    .wf-popup .wf-p-body {
        background-color: white;
        border: 1px solid #d0d0d0;
        border-radius: 5px;
        display: block;
        padding: 25px;
        position: relative;
        z-index: 1;
    }

.wf-p-body .title {
    color: #4D4D4D;
    font-size: 25px;
    font-weight: 400;
}

.item-row {
    font-size: 0;
    margin-top: 10px;
    padding: 0;
}

    .item-row > label {
        font-size: 15px;
        padding-left: 5px;
    }

.item-control {
    box-sizing: border-box;
    display: inline-block;
    font-size: 15px;
    padding: 5px;
    padding-right: 10px;
    vertical-align: bottom;
}

    .item-control .inner {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 4px;
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        font-size: 0;
        height: 35px;
        padding: 5px 15px 5px 15px;
        position: relative;
    }

        .item-control .inner.padded {
            padding-left: 35px;
        }

        .item-control .inner > select {
            border: none;
            color: #4D4D4D;
            display: block;
            font-size: 15px;
            font-weight: bold;
            min-height: 20px;
            width: 100%;
        }

        .item-control .inner > textarea {
            border: none;
            color: #4D4D4D;
            display: block;
            display: block;
            font-size: 15px;
            font-weight: bold;
            max-width: 1000px;
            width: 100%;
        }

        .item-control .inner > input[type='text'] {
            border: none;
            color: #4D4D4D;
            display: block;
            display: block;
            font-size: 15px;
            font-weight: bold;
            min-height: 20px;
            width: 100%;
        }

.inner .caret {
    position: absolute;
    right: 15px;
    top: 12px;
}

.inner .symbol {
    font-size: 15px;
    position: absolute;
    right: 5px;
    top: 8px;
}

.inner .symbol-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 27px;
    padding-top: 7px;
    border-right: 1px solid #d0d0d0;
    text-align: center;
    font-size: 15px;
}

.item-control > label {
    color: #4D4D4D;
    display: block;
    font-size: 15px;
    padding-left: 10px;
}

.item-row .separator {
    background-color: #C4C4C4;
    border-bottom: 1px solid #E6E6E6;
}

.time-calculation-area {
    background-color: #f0f0f0 !important;
    border-radius: 2px !important;
    text-align: center !important;
    font-size: 15px !important;
    color: #202020 !important;
    font-weight: bold !important;
    padding: 5px !important;
    border: none !important;
    padding: 7px 5px 5px 5px !important;
}

.total-row td {
    border-top: 2px solid #CDCDCD;
    border-bottom: 0px;
}

.timehseet-unlock-container {
    position: absolute;
    left: 90%;
    top: 25px;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.15), 0px 0px 10px rgba(0, 0, 0, 0.14);
    min-width: 150px;
    z-index: 100;
    padding-top: 2px;
    padding-bottom: 2px;
}

    .timehseet-unlock-container span {
        font-size: 14px;
        display: block;
        cursor: pointer;
        color: #333;
        text-align: left;
        padding: 5px;
        padding-left: 15px;
    }

        .timehseet-unlock-container span:hover {
            background-color: #f0f0f0;
        }

div.timelog-categories-dropdown {
    margin-left: -16px;
    display: block;
    position: fixed;
    width: 221px;
    height: 200px;
    overflow: auto;
    background-color: white;
    border: 1px solid #D7D7D7;
    border-radius: 3px;
    padding: 5px 18px;
    z-index: 10025;
    font-size: 15px;
}

    div.timelog-categories-dropdown div {
        background-color: white;
    }

.timelog-categories-dropdown label {
    cursor: pointer;
    font-weight: 400;
}

.timelog-categories-textbox {
    font-size: 15px;
    height: 34px;
    margin: 0px;
    margin-top: -6px;
    padding-top: 7px;
}

.time-log-category-option {
    margin-left: -18px;
    margin-right: -18px;
    padding: 4px 40px;
}

    .time-log-category-option:hover {
        background-color: #bbb;
        color: white;
    }

.price-container {
    padding: 7px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    display: inline-block;
    width: 180px;
    box-sizing: border-box;
    position: relative;
}

.price-container-symbol {
    position: absolute;
    top: 0;
    left: 0;
    padding: 7px;
    text-align: center;
    border-right: 1px solid #d0d0d0;
    min-width: 16px;
    font-size: 15px;
    color: #4D4D4D;
    font-weight: 600;
}

.price-container .title {
    position: absolute;
    top: 7px;
    left: -47px;
    width: 100px
}

.p1 {
    padding: 1px;
}

.text-black {
     color: black !important;
}

.copy-job-name-title-for-reminder {
    margin-left: -75px;
}

.service-reminder-email-input,
.service-reminder-mobile-input,
.service-reminder-subject,
.service-reminder-body,
.service-reminder-msg-for-reminder-title {
    margin-left: -35px;
    width: 212px;
}

.reminder-description-input {
    width: 440px !important;
    max-width: 440px !important;
}

@media only screen and (max-width: 960px) {
    .then-half.none,
    .quote-no-column,
    .quote-name-column,
    .job-view-btn-column,
    .job-name-column {
        width: 100% !important;
    }

    .po-status-column {
        width: 110px !important;
    }
}

.view-site-static-map {
    width: 355px;
    border-radius: 6px;
}

.overflow-visible {
    overflow: visible !important;
}

.site-edit-input-title {
    width: 120px;
}

.site-edit-input {
    width: 256px;
}
.view-butt {
    width: 85px !important;
    padding: 9px;
}

.dropdown-editable {
    position: relative;
    width: 200px;
}

    .dropdown-editable select {
        width: calc(100% - 10px);
    }


        .dropdown-editable select option {
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            height: 34px;
            width: 140px;
            padding-left: 5px;
            padding-right: 5px;
            font-size: 14px;
        }

    .dropdown-editable > * {
        box-sizing: border-box;
    }

    .dropdown-editable select option {
        cursor: pointer;
    }

    .dropdown-editable input {
        position: absolute;
        width: 100%;
        right: 35px;
    }

    .dropdown-editable .icon-Flip-down {
        position: absolute;
        right: 18px;
        top: 11px;
        font-size: 8px;
        pointer-events: none;
    }


.previous-reminder-msg-block {
    background-color: #F7F7F7;
    border: 1px solid #CCCCCC;
    max-width: 477px;
    border-radius: 4px;
    padding: 20px;
}

.btn-narrow {
    max-width: 110px;
}

.fright-important {
    float: right !important;
}

.contacts-container {
    max-height: 520px;
    overflow-y: auto;
}

.no-items-panel {
    width: 1190px;
}

.no-items-panel-container {
    width: 98%;
    padding: 1%;
    margin-left: 30px;
}

.no-items-panel-block {
    display: inline-block;
}

@media only screen and (max-width: 1330px) {
    .no-items-panel {
        width: 100%;
    }

    .no-items-panel-container {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
        padding: 0px;
    }

    .no-items-panel-block {
        display: block;
        margin:auto!important;
        padding: 30px;
    }
}

.upscope-code {
    color: lightgrey;
}

.portal-logo-login {
    max-height: 25px;
    margin-top: 10px;
}

.logo-powered-by {
    max-height: 20px;
    float: right;
    margin-right: 63px;
    fill: white;
    margin-top: -7px;
}

.event-clickable-inner-container {
    display: inline-block;
    margin-top: 5px;
}

.scheduler-person-name-lastname {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 120px;
}

.non-clickable {
    pointer-events: none;
    cursor: none !important;
}

.dhx_timeline_label_row {
    line-height: initial !important;
}

.pre-line {
    white-space: pre-line;
}

a.inactive {
    cursor: default;
    opacity: 0.5;
}

.vs__actions {
    cursor: pointer;
}

#BtnNotesFileUpload a {
    color: white !important;
}

.w-auto {
    width: auto;
}

#switch-to-new-ui-btn {
    padding: 8px 16px;
    gap: 6px;
    position: absolute;
    width: 220px;
    height: 32px;
    left: calc(50% - 220px/2 - 102.5px);
    top: 13px;
    background: #1C2D37;
    border: 1px solid #D2D5D7;
    color: #FFFFFF;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    text-transform: capitalize;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#can-send-email-issue {
    color: red;
}

.costItemSelect {
    font-size: 14px;
}

.w800 {
    width: 800px;
}

.page-description {
    color: #778187;
    font-family: DM Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 23.8px */
}

.logo-block .logo-preview {
    width: 210px;
    height: 66px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--granite, #D2D5D7);
    background: var(--white, #FFF);
    display: inline-block;
    vertical-align: middle;
    margin-right: 9px;
    text-align: center;
    padding: 10px;
    display: inline-block;
}

.logo-preview-no-logo-container {
    display: inline-block;
    margin-top: 14px;
}

.logo-preview-container {
    margin-top: 8px;
}

.logo-preview img {
    max-width: 100%;
    height: 100%;
}

.footer-pdf-logos-container .list-group {
    margin-top: 45px;
}

.footer-pdf-logo-row {
    border-bottom: 1px solid #E8EAEB;
    padding-bottom: 12px;
    padding-top: 12px;
    cursor: grab;
}

    .footer-pdf-logo-row .logo-container {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        border: 1px solid var(--granite, #D2D5D7);
        background: var(--white, #FFF);
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .footer-pdf-logo-row .logo-container img {
            max-width: 48px;
            max-height: 48px;
            align-self: center;
        }

        .footer-pdf-logo-row .icon{
            vertical-align: middle;
        }

    .footer-pdf-logo-row .view-icon,
    .footer-pdf-logo-row .delete-icon {
        margin-top: 16px;
    }

    .trash-icon-new-ui {
        vertical-align: middle;
    }

.color-picker-vue {
    width: 132px;
    height: 40px;
    flex-shrink: 0;
}

.color-preview {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.color-picker-wrapper-dropdown {
    position: relative;
    color: #2e2e2e;
    outline: none;
    cursor: pointer;
    background: var(--fog, #F6F7F7);
}

    .color-picker-wrapper-dropdown > span {
        width: 100%;
        display: block;
        padding: 8px 12px;
    }

        .color-picker-wrapper-dropdown > span > span {
            padding: 0 12px;
            margin-right: 5px;
        }

        .color-picker-wrapper-dropdown > span:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            right: 16px;
            top: calc(50% + 4px);
            margin-top: -6px;
            border-width: 6px 6px 0 6px;
            border-style: solid;
            border-color: #2e2e2e transparent;
        }

    .color-picker-wrapper-dropdown .dropdown {
        position: absolute;
        z-index: 10;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        font-weight: normal;
        list-style-type: none;
        padding-left: 0;
        margin: 0;
        border: 1px solid #ababab;
    }

        .color-picker-wrapper-dropdown .dropdown li {
            display: block;
            text-decoration: none;
            color: #2e2e2e;
            padding: 5px;
            cursor: pointer;
        }

            .color-picker-wrapper-dropdown .dropdown li > span {
                padding: 0 12px;
                margin-right: 5px;
            }

            .color-picker-wrapper-dropdown .dropdown li:hover {
                background: #eee;
                cursor: pointer;
            }


.branding-invoice-preview-container {
    width: 49%;
    text-align: center;
    vertical-align: top;
    display: inline-block;
}

.branding-pdf-template-options-container {
    width: 49%;
    display: inline-block;
}

.branding-pdf-preview {
    width: 175px;
    height: 247px;
    padding: 30px;
    background-color: grey;
    border-radius: 5px;
}

.branding-template-tab-table {
    border-collapse: collapse;
    display: inline-table;
    margin-top: 24px;
}

    .branding-template-tab-table td {
        border-width: 0;
        border-bottom: 1px solid #D2D5D7;
        padding-bottom: 14px;
        cursor: pointer;
    }

    .branding-template-tab-table .empty-cell {
        width: 24px;
        cursor: default;
    }

.branding-template-tab-table .active {
    border-bottom: 3px solid #00AFEB;
}

.pdf-reports-settings-tabs-container {
    margin-top: 24px;
}


.mt18 {
    margin-top: 18px;
}
.mt24 {
    margin-top: 24px;
}

.wf-link {
    color: #006EAC;
}

.lg-outer .lg-img-wrap,
.lg-backdrop {
    background-color: black;
}

.capitalized-first-letter-each-word {
    text-transform: capitalize;
}

.lower-case {
    text-transform: lowercase;
}

.placeholder-text-transform-none::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}

.placeholder-text-transform-none:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

.placeholder-text-transform-none::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}

.placeholder-text-transform-none:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}

.placeholder-text-transform-none::placeholder { /* Recent browsers */
    text-transform: none;
}


.child-jobs-list .assigned-to-col-portal {
    margin-left: 30px;
}

.child-jobs-list .job-view-btn-column.portal {
}

.job-title-col {
    width: 10%;
}

    .job-title-col.invoices-disabled.due-enabled {
        width: 10%;
    }

        .job-title-col.invoices-disabled.due-enabled.portal {
            width: 13%;
        }

    .job-title-col.invoices-disabled.due-disabled {
        width: 13%;
    }
    .job-title-col.invoices-disabled.due-disabled.portal {
        width: 13%;
    }

    .job-title-col.invoices-enabled.due-disabled {
        width: 13%;
    }
        .job-title-col.invoices-enabled.due-disabled.portal {
            width: 13%;
        }

    .job-title-col.invoices-enabled.due-enabled.portal {
        width: 13%;
    }


.job-view-btn-column.invoices-disabled.due-enabled.portal {
}

.visit-assignee {
    position: relative;
    left: 18px;
    padding-left: 0;
    padding-right: 1.2%;
    margin-left: -0.3%;
}

    .visit-assignee.invoices-enabled.due-enabled {
        width: 7.8%;
    }
    .visit-assignee.invoices-disabled.due-enabled {
        width: 9.2%;
    }
    .visit-assignee.invoices-enabled.due-disabled {
        left: 0px;
        padding-right: 0.7%;
    }
    .visit-assignee.invoices-disabled.due-disabled {
        left: 0px;
        padding-right: 0.9%;
    }

.slide-enter-active {
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}

.slide-leave-active {
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slide-enter-to, .slide-leave {
    max-height: 100px;
    overflow: hidden;
}

.slide-enter, .slide-leave-to {
    overflow: hidden;
    max-height: 0;
}

.change-list-async {
    cursor: pointer;
}