﻿html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smooth: always;
    font-weight: 400;
}

/**
 * Firefox specific rule
 */

@-moz-document url-prefix() {
    body {
        font-weight: lighter !important;
    }
}



.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;
    /*min-width: 100px;*/
}

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

    .cost-item-price-block span {
        background-color: #63727B;
        padding: 12px 12px;
        color: #fff;
        font-weight: 500;
        font-size: 20px;
        line-height: 24px;
        display: block;
    }

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

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

@font-face {
    font-family: "DM Sans", sans-serif !important;
    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: "DM Sans", sans-serif !important;
    src: url('light-webfont.ttf');
    src: url('light-webfont.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "DM Sans", sans-serif !important;
    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: "DM Sans", sans-serif !important;
    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: "DM Sans", sans-serif !important;
}

ul {
    list-style: none;
}

select {
    font-family: "DM Sans", sans-serif !important;
    cursor: pointer;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    font-size: 15px;
}

input {
    font-family: "DM Sans", sans-serif !important;
    font-size: 15px;
}

textarea {
    font-family: "DM Sans", sans-serif !important;
    font-size: 15px;
    resize: vertical;
}

button {
    cursor: pointer;
    font-size: 15px;
    font-family: "DM Sans", sans-serif !important;
}

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: 0px;
    float: left;
    border-bottom: 1px solid #E8EAEB;
    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: 6px 16px !important;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    line-height: 20px;
    font-size: 15px !important;
}

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

.red {
    color: #ff0000;
}

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

.orange-butt {
    background-color: #F46F22;
    position: relative;
}

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

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

.orange-butt.tiny {
    padding: 4px 8px !important;
    font-weight: 500;
    font-size: 13px !important;
    line-height: 16px;
    color: #FFFFFF;
}

.wf-button.tiny {
    padding: 4px 8px !important;
    font-weight: 500;
    font-size: 13px !important;
    line-height: 16px;
    color: #FFFFFF;
}

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

.tiny {
    padding: 4px 8px !important;
    font-weight: 500;
    font-size: 13px !important;
    line-height: 16px;
}

.gray-butt.tiny {
    padding: 4px 8px !important;
    font-weight: 500;
    font-size: 13px !important;
    line-height: 16px;
    color: #FFFFFF;
}

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

    .white-butt.fontf6 {
        color: #006EAC;
    }

.gray-butt {
    background-color: #63727B;
}

.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;
    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-weight: 500;
        font-size: 15px;
        line-height: 16px;
        color: #1C2D37;
        padding: 0 20px 0 10px !important;
        -webkit-padding-end: 20px !important;
        -webkit-padding-start: 10px !important;
    }

        .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;
}

.full-width-force {
    width: 100% !important;
    float: left;
    position: relative;
    margin-left: 0 !important;
}

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

.inner-half {
    width: 48%;
}

.fleft {
    float: left;
}

.fright {
    float: right;
}

.fnone {
    float: left;
}

.fnone-force {
    float: none !important;
}

.dis-block {
    display: block;
}

    .dis-block.force {
        display: block !important;
    }


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

.dis-inline {
    display: inline;
}

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

.dis-contents {
    display: contents;
}

.dis-no {
    display: none;
}

    .dis-no.force {
        display: none !important;
    }

.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;
}

.mt16 {
    margin-top: 16px;
}

.mt18 {
    margin-top: 18px;
}

.mt24 {
    margin-top: 24px;
}

.mt30 {
    margin-top: 30px;
}

.mt32 {
    margin-top: 32px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.mt80 {
    margin-top: 80px;
}

.mt90 {
    margin-top: 90px;
}

.mt15 {
    margin-top: 15px;
}

.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;
}

.ml22 {
    margin-left: 22px;
}

.ml34 {
    margin-left: 34px;
}

.ml115 {
    margin-left: 115px;
}

.ml116 {
    margin-left: 116px;
}

.ml117 {
    margin-left: 117px;
}

.ml120 {
    margin-left: 120px;
}

.ml3 {
    margin-left: 3px;
}

.mb4 {
    margin-bottom: 4px;
}

.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;
}

.mb24 {
    margin-bottom: 24px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb32 {
    margin-bottom: 32px;
}

.mb40 {
    margin-bottom: 40px;
}

.mr10 {
    margin-right: 10px;
}

.mr14 {
    margin-right: 14px;
}

.mr15 {
    margin-right: 15px;
}

.mr8 {
    margin-right: 8px;
}

.mr2 {
    margin-right: 2px;
}

.mr4 {
    margin-right: 4px;
}

.mr5 {
    margin-right: 5px;
}

.mr6 {
    margin-right: 6px;
}

.mr12 {
    margin-right: 12px;
}

.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;
}

.mt4 {
    margin-top: 4px;
}

.mt5 {
    margin-top: 5px;
}

.mt45 {
    margin-top: 45px;
}

.mt6 {
    margin-top: 6px;
}

.mt7 {
    margin-top: 7px;
}

.mt8 {
    margin-top: 8px;
}

.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;
}

.ml28 {
    margin-left: 28px;
}

.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;
}

.pt7 {
    padding-top: 7px;
}

.pt10 {
    padding-top: 10px;
}

.pt15 {
    padding-top: 15px;
}

.pt20 {
    padding-top: 20px;
}

.pt50 {
    padding-top: 50px;
}

.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-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: 109px;
    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: 13px;
    height: 13px;
    border-radius: 50%;
    top: 2px;
    position: relative;
    left: 3px;
}

.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 {
    background: url('../assests/images/icons/alert-icon.svg') center right no-repeat !important;
    margin-left: 4px;
    width: 17px;
    height: 16px;
}

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

    .red-dang.unscheduled-job,
    .red-dang.scheduled-job {
        display: inline-block;
    }

.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-700 {
    font-weight: 700;
}

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

.font-bold {
    font-weight: 500;
    /*    text-overflow: ellipsis;
    overflow: hidden;*/
}

label > div, label > span {
    overflow: hidden;
}

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

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

.font-weight-initial {
    font-weight: initial !important;
}

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

.font80 {
    color: #63727B;
    font-size: 14px;
    line-height: 16px;
}

.font88 {
    color: #888888;
}

.font4d {
    color: #4d4d4d;
}

.font00 {
    color: #000000;
}

.font66 {
    color: #666666;
}

.fontf6 {
    color: #006EAC;
}

.fontf6-important {
    color: #006EAC !important;
}

.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: "DM Sans", sans-serif !important;
}

.actual-h2 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
}

    .actual-h2 b {
        font-size: 24px;
        line-height: 24px;
        font-weight: 500;
    }

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

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

#header {
    background-color: #F6F8FB;
    padding: 0px;
    height: 64px;
    border-bottom: 1px solid #E8EAEB;
}

#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: "DM Sans", sans-serif !important;
        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 {
        width: 34px;
        height: 34px;
        margin: 3px;
    }

.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-logo a {
    width: 40px;
    height: 40px;
    margin: auto;
    margin-left: auto;
    background-color: #32424b;
    float: left;
    border-radius: 4px;
    transition: margin 0.5s ease-in-out;
}

.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: #1C2D37;
}

.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 .separator {
    margin-top: 40px;
}

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

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


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

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

.login-page-container {
    background-color: #F6F8FB !important;
}

    .login-page-container .sign-in-title {
        font-weight: 500;
        font-size: 24px;
        line-height: 24px;
        color: #1C2D37;
        margin-top: 23px;
    }

    .login-page-container .please-sign-in-title {
        font-weight: 400;
        font-size: 15px;
        line-height: 24px;
        color: #778187;
        margin-top: 8px;
    }

    .login-page-container .email-input-container,
    .login-page-container .password-input-container {
        font-weight: 500;
        font-size: 15px;
        line-height: 16px;
        color: #1C2D37;
    }

    .login-page-container .email-input-container {
        margin-top: 40px;
    }

    .login-page-container .password-input-container {
        margin-top: 17px;
    }

    .login-page-container .email-input,
    .login-page-container .password-input {
        width: 100%;
        padding: 12px 0 12px 16px !important;
        font-weight: 500;
        font-size: 15px;
        line-height: 16px;
        color: #1C2D37;
        background-color: #F6F7F7;
    }

    .login-page-container input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #F6F7F7 inset;
    }

    .login-page-container .stay-signed-in {
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #1C2D37;
    }

    .login-page-container #login-reset-pass {
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        text-align: right;
    }

    .login-page-container button {
        height: 40px;
        margin-top: 16px;
    }

    .login-page-container input[type=checkbox]:checked:after {
        background-image: url(../assests/images/icons/checkbox-checked-orange.svg) !important;
    }

    .login-page-container .portal-logo {
        max-height: 120px;
        max-width: 300px;
        margin-top: -14px;
        margin-bottom: 12px;
        float: left;
    }

.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: 552px;
    margin: calc(30vh - 225px) auto;
    padding: 67px 79px 80px 81px;
    min-height: 639px;
    box-sizing: border-box;
    background: white;
}

    .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: 40px;
    margin-bottom: 18px;
}

    .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 0px;
        }

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

        .addit-menu li:first-child a, .addit-menu-1 li:first-child a, .custom-popup-menu li:first-child a {
            /*margin-top: 12px;
            border-top: 1px solid #E8EAEB;*/
        }

        .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;*/
        }

        .cost-item-legend .item > div:nth-of-type(1)
        .custom-popup-menu li a:hover,
        .custom-popup-menu li a:hover {
            background-color: rgba(0, 175, 235, 0.08);
            border-color: rgba(0, 175, 235, 0.08);
            color: #1C2D37;
        }

        .custom-popup-menu li a.active {
            color: #F46F22;
            padding-left: 10px;
        }

.custom-popup-menu li {
    cursor: pointer;
}

.main-min {
    width: 600px;
}

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

#post_job_form {
    width: inherit;
}

.thead {
    border-top: 1px solid #E8EAEB;
    border-bottom: 1px solid #E8EAEB;
    padding-bottom: 12px;
    padding-top: 12px;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    text-transform: uppercase;
    color: #1C2D37;
}

.tbody {
    border-bottom: 1px solid #E8EAEB;
    padding: 12px 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #1C2D37;
}

.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%;
}

.w3 {
    width: 3%;
}

.w1 {
    width: 1%;
}

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

.w45 {
    width: 45%;
}

.w1000 {
    width: 1000px;
}

.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;
        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;
    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.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;
    }

.search-btn svg {
    cursor: pointer;
}

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

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

.gr-br-field-con-sel {
    border: 1px solid #d9d9d9;
    /*overflow:hidden;*/
    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,
input[type="number"].gr-br-field,
input[type="password"].gr-br-field {
    padding-left: 9px;
    text-overflow: ellipsis;
    padding-right: 9px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #212121;
    line-height: 20px;
}

input.gr-br-field::placeholder,
input.vs__search::placeholder {
    color: #778187;
    font-weight: 500;
}

.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: 34px;
    border-width: 1px;
    font-weight: 500;
}

.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 {
    color: #fff;
    display: block;
    cursor: pointer;
}

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

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

.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;
    background-color: #fff;
    z-index: 12;
    padding-bottom: 10px;
}

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

    .adv-popup .period-popup {
        margin-left: 152px;
        width: 170px;
    }

.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 10px;
    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: rgba(0, 175, 235, 0.08);
    }

.see-map {
    background: url('../assests/images/icons/map-marker-icon.svg') left center no-repeat;
    padding-left: 24px;
    min-height: 16px;
    position: relative;
    float: right;
    top: -20px;
    margin-bottom: 10px;
    color: #006EAC;
}

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

.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, .letter-for-filter:hover {
    box-shadow: 0 0 0 1px #e6e6e6;
    background-color: #e8e8e8;
}

.job-search-tools {
    width: calc(100% - 34px);
    padding: 8px 16px 8px 16px;
    background-color: #F6F8FB;
    height: 32px;
    border: 1px solid #E8EAEB;
}

    .job-search-tools .looped-field {
        margin: 0;
        background-color: #fff;
        border-color: #E8EAEB;
        height: 30px;
        width: 218px !important;
    }

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

    .jw-table .jw-table {
        padding: 10px 1%;
        width: 100%;
        background-color: transparent;
        left: -1%;
    }

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

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

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

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

.portal-mapping {
    height: 34px !important;
}

.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: 85%;
}

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

.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;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
    padding-top: 15px !important;
    padding-bottom: 12px !important;
}

.jw-table:not(.jheading) {
    font-size: 14px;
    line-height: 16px;
    min-height: 30px;
    padding-top: 16px !important;
}

    .jw-table:not(.jheading):hover {
        background: rgba(0, 175, 235, 0.08);
    }

.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: 11%;
    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: 20%;
}

.jw2-300 {
    width: 32%;
}

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

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

.jws-5 {
    width: 5%;
    height: 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-28 {
    width: 28%;
    height: 100%;
}

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

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

.jws-50 {
    width: 49%;
    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;
    cursor: grab;
}

.jw-table:hover .right-moveme,
.retouchable-brick:hover .right-moveme {
    background: url('../assests/images/icons/drag-six-dots.svg') right center no-repeat;
}

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

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

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

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

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

.dropdown-items {
    width: 100%;
    margin-top: 2px;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    display: none;
    background-color: #fff;
    z-index: 14;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);
}

.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;
    }


#file-details-popup .photo_detail {
    width: 100%;
    float: left;
    margin-right: 0px;
    height: 320px;
    margin-bottom: 10px;
    overflow: hidden;
}

.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: 20px;
    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;
        bottom: initial;
    }

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

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

.buttons-separator-line {
    width: 100%;
    margin-left: 0%;
    height: 1px;
    background-color: #e6e6e6;
    float: left;
    margin-top: 16px;
    margin-bottom: 16px;
}

    .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;
    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;
    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;
    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: 0px solid #b3b3b3;
}

.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;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            text-align: center;
            color: #1C2D37;
            display: block;
        }

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

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

        .acc-pagenav li a, .acc-pagesize li a {
            border: 0px solid #A7AFB4;
            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: #A7AFB4;
                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: 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: 58%;
}

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

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

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

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

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

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

.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% - 55px);
    padding-left: 24px;
    margin-top: 19px;
    font-family: "DM Sans", sans-serif !important;
}

    .scheduler-wrap .scheduler-top-filter-bar {
        padding-top: 0px;
        margin-bottom: 7px;
    }

    .scheduler-wrap .filter-button {
        margin-top: 0px !important;
    }

    .scheduler-wrap .filter-display-item {
        margin-top: 0px;
    }

.dhx_cal_container {
    font-family: "DM Sans", sans-serif !important;
    margin-bottom: 10px;
}

#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: "DM Sans", sans-serif !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: 12px;
        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;
    }

    .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: "DM Sans", sans-serif !important;
        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: 0;
    border-right: 0;
    width: calc(100% - 15px);
    overflow: hidden;
}

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

.dhx_cal_navline {
    border: 0px;
    width: 98% !important;
    height: auto !important;
    padding: 10px 1% !important;
    float: left;
    bottom: -1px !important;
}

.dhx_cal_date {
    float: left;
    font-family: "DM Sans", sans-serif !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;
    margin-left: 15px;
    margin-right: 17px;
}

    .dhx_cal_date > div {
        position: relative;
        top: 0px;
        display: inline-block;
        font-weight: 500;
        font-size: 18px;
        line-height: 16px;
    }

.dhx_cal_navline .dhx_cal_date {
    color: #006EAC;
    border-bottom: 1.5px solid #006EAC;
    font-style: normal;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 16px;
    margin-top: 0px;
    padding-bottom: 5px;
}

.dhx_cal_date > div > small {
    position: relative;
}

.dhx_cal_date > div:first-child:nth-last-child(2) {
    margin-right: 8px;
}

.dhx_cal_date > div > br {
    display: none;
}

.dhx_cal_date > div:nth-child(even) {
    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 {
    background-color: #fff;
    color: #666666;
    font-family: "DM Sans", sans-serif !important;
}

.dhx_cal_prev_button, .dhx_cal_next_button {
    border: 0px;
    border-radius: 0px;
    text-align: center;
    padding-top: 9px !important;
    padding-bottom: 4px !important;
    top: -7px !important;
}

.dhx_cal_today_button {
    border: 0px;
    border-radius: 0px;
    font-weight: 500;
    font-size: 15px;
    border-bottom: 1px solid #63727B;
    width: auto;
    margin-left: 10px;
    height: 26px;
    top: -2px !important;
}

.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"], .dhx_cal_tab[name="week_tab"] {
    width: 66px;
    border: 1px solid #D2D5D7;
    box-sizing: border-box;
    border-radius: 20px;
    font-style: normal;
    font-weight: 500 !important;
    font-size: 14px !important;
    height: 26px;
    line-height: 16px;
    padding-top: 4px;
    color: #63727B !important;
}

.dhx_cal_tab[name="month_tab"] {
    margin-left: 5px;
}

.scheduler-settings .icon-Settings {
    font-size: 28px;
    line-height: 20px;
    color: #63727B;
}

.dhx_cal_prev_button {
    margin-right: 4px;
}

.dhx_cal_next_button {
    margin-left: 4px;
}

.dhx_month_body {
    cursor: pointer;
}

    .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_cal_event_clear {
    color: white;
}

.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;
}

.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: "DM Sans", sans-serif !important;
    font-weight: 300;
    text-align: center;
    display: grid;
    vertical-align: middle;
}

.sche-employee-time-off-marker {
    background-color: #e8f1fa;
    opacity: 0.9;
    font-family: "DM Sans", sans-serif !important;
    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: "DM Sans", sans-serif !important;
}

.scheduler-hours-dropdown {
    height: 26px;
    font-family: "DM Sans", sans-serif !important;
    font-style: normal;
    font-weight: 500;
    font-size: 14px !important;
    line-height: 16px;
    text-align-last: center;
    direction: rtl;
    padding-right: 10px;
    padding-left: 10px;
    color: #63727B;
    border: 1px solid #D2D5D7;
    border-radius: 20px;
}


.scheduler-days-number-dropdown {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #F46F22;
    box-sizing: border-box;
    border-radius: 20px;
    height: 26px;
    padding: 0 10px 0 10px;
    text-align: center;
    width: 91px;
}


.scheduler-timeline-days-dropdown,
.weather-widget-preferences-dropdown {
    margin-left: 5px;
    font-weight: 500;
    font-family: "DM Sans", sans-serif !important;
    font-style: normal;
    font-size: 14px;
    line-height: 16px;
    border-radius: 20px;
    border: 1px solid #D2D5D7;
    color: #63727B;
    height: 26px;
    padding-right: 21px;
    padding-left: 12px;
}

.scheduler-timeline-days .icon-Flip-down {
    position: absolute;
    right: 11px;
    top: 11px;
    width: 16px;
    height: 6px;
}

.dhx_cal_event_line, .dhx_cal_event_clear {
    z-index: 0;
}

.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: 158px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 5px;
}

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

    .nicescroll-rails > div {
        background-color: #808a8f !important;
        width: 7px !important;
        border: none !important;
    }

.schedulable-brick {
    height: 55px;
    border: 1px solid #A7AFB4;
    float: left;
    margin-right: 15px;
    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 > h3 {
        color: #4d4d4d;
        font-size: 16px;
        font-weight: 500;
        height: 22px;
        line-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 5px;
        margin-right: 80px;
    }

    .schedulable-brick .job-length {
        position: absolute;
        top: 11px;
        right: 34px;
        z-index: 1;
        background-color: white;
        padding-left: 5px;
        color: #63727B;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        letter-spacing: 0em;
    }

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

    .schedulable-brick .schedulable-job-drag {
        position: absolute;
        right: 11px;
        top: 9px;
    }

    .schedulable-brick .schedulable-job-title-span {
        width: 200px;
        display: inline-block;
    }

    .schedulable-brick > h3 > span {
        height: 22px;
        margin-right: 4px;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: #1A1E41;
    }

    .schedulable-brick > div {
        color: #63727B !important;
        font-size: 14px;
        height: 20px;
        line-height: 16px;
        overflow: hidden;
        margin-top: 3px;
    }

        .schedulable-brick > div > span {
            height: 18px;
            line-height: 18px;
            font-weight: 600;
            font-size: 10px;
            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;
    }

.job-timelog-record-avatar {
    width: 30px;
    height: 21px;
    display: block;
    float: left;
    margin-right: 10px;
    border-radius: 23px;
    color: #fff;
    font-size: 12px;
    line-height: 14px;
    padding-top: 8px;
    font-family: "DM Sans", sans-serif !important;
    font-weight: 700;
}

    .job-timelog-record-avatar .fieldworker-initials {
        display: block;
        position: relative;
        font-size: 10px;
    }

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

    .timeline_section > figure {
        width: 30px;
        height: 21px;
        display: block;
        float: left;
        margin-right: 10px;
        border-radius: 23px;
        color: #fff;
        font-size: 12px;
        line-height: 14px;
        padding-top: 8px;
        font-family: "DM Sans", sans-serif !important;
        font-weight: 700;
    }

    .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;
            color: #212121;
            font-family: 'DM Sans';
            font-style: normal;
            font-weight: 500;
            font-size: 13px;
            line-height: 14px;
        }

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

.dhx_matrix_scell {
    border-left: 1px solid #D2D5D7;
}

.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: 168px !important;
}

.folder .dhx_scell_level1 .dhx_scell_expand {
    padding-left: 180px !important;
    position: absolute;
}

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

.folder .dhx_scell_name {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    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: "DM Sans", sans-serif !important;
    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: white !important;
    white-space: nowrap;
}

.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_scheduler_week .dhx_cal_header .dhx_scale_bar:first-child {
    left: 1.5px !important;
}

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

.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_scale_bar,
#scheduler-canvas[data-mode="workweek"] .dhx_scale_bar {
    border-right-color: #808080;
}

#scheduler-canvas[data-mode="workweek"] .dhx_scale_bar {
    border-left-color: #e7e7e7;
}

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

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

.dhx_scale_holder {
    border-right-color: #cacaca;
}

#scheduler-canvas[data-mode="week"] .dhx_cal_data {
    width: calc(100% + 1px) !important;
}

#scheduler-canvas[data-mode="month"] .dhx_cal_data {
    border-left: 1px solid #e5e5e5;
    left: -1px !important;
}

.dhx_scale_hour {
    width: 51px !important;
}

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

#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;
}

.go-to-scheduler-day {
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    width: fit-content;
}

.dhx_multi_day {
    border-left: 1px solid #e5e5e5 !important;
    border-right: 1px solid #e5e5e5 !important;
}

#scheduler-canvas[data-mode="week"] .dhx_multi_day {
    width: calc(100% - 1px) !important;
    left: -1px !important;
}

.dhx_timeline_label_wrapper, .dhx_scale_hour {
    border-left: 1px solid #e5e5e5 !important;
}

.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, .dhx_cal_event_clear.just-event {
        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: "DM Sans", sans-serif !important;
        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: "DM Sans", sans-serif !important;
        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: "DM Sans", sans-serif !important;
        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 {
}

    .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;
    }

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

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

    .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;
    color: #666666;
    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: #E8EAEB;
}

.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: 8px;
    }

        .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%;
    }

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

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

.fieldworkers-selector {
    width: 272px;
}

.worker-title {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #A4ABAF;
}

.status-anchor .icon-Flip-down {
    margin-lefT: 5px;
    margin-top: 2px;
}

.scheduler-event-creator, .event-edit-popup {
    background-color: white;
    width: 320px;
}

.scheduler-event-creator {
    height: 193px;
}

    .scheduler-event-creator hr {
        border-bottom: 1px solid #E8EAEB;
        float: left;
        width: 101%;
        margin-bottom: 12px;
        margin-top: 12px;
        margin-left: -1px;
    }

        .scheduler-event-creator hr.bottom-ruler {
            border-bottom: 1px solid #E8EAEB;
            width: 101%;
            margin-bottom: 12px;
            margin-top: 12px;
            margin-left: -1px;
            position: absolute;
            bottom: 45px;
        }

    .scheduler-event-creator .add-new-title {
        margin-left: 24px;
        margin-bottom: 18px;
        margin-top: 3px;
    }

    .scheduler-event-creator .cross-16-icon {
        position: absolute;
        right: 22px;
        top: 9px;
    }

.add-new-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
}

.add-event-by-click, .add-just-event, .new-job {
    font-weight: 400;
    font-size: 15px;
    line-height: 16px;
    color: #1C2D37;
    width: 75.5%;
    float: left;
    position: relative;
    padding: 8px 17px;
    margin-left: 23px;
    cursor: pointer;
}

    .new-job.multivisit.new-job {
        color: white;
        width: auto;
        font-weight: 500;
        line-height: inherit;
        margin-left: 0;
    }

        .new-job.multivisit.new-job.left-menu-button {
            width: 100%;
        }

    .new-job.multivisit.orange-butt.new-job:hover {
        background-color: #F46F22;
    }

    .new-job.multivisit.new-job.left-menu-button:hover {
        background-color: #006EAC;
    }

.add-event-by-click {
    margin-top: 5px;
}

    .add-event-by-click:hover, .add-just-event:hover, .new-job:hover {
        background-color: rgba(0, 175, 235, 0.08);
    }

.add-new-pop-unscheduled-job-ruler {
    border-bottom: 1px solid #E8EAEB;
    float: left;
    width: 272px;
    margin-left: 24px;
    margin-bottom: 16px;
    margin-top: 16px;
}

    .add-new-pop-unscheduled-job-ruler.lower {
        margin-bottom: 22px;
    }

.add-new-pop-unscheduled-descr {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #49575F;
    margin-left: 30px;
    margin-top: 16px;
    margin-bottom: 12px;
}

.add-new-pop-unscheduled-job-ruler-block {
    height: 20px;
    background-color: red;
    width: 100px;
}

.add-new-pop-unscheduled-job-header {
    display: none;
}

.event-creator-cancel {
    position: absolute;
    background: #63727B;
    padding: 8px 16px;
    color: white;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    bottom: 15px;
    right: 0px;
    margin-right: 24px;
}

.dhx_minical_popup {
    box-shadow: 0 0 16px -7px #000;
}

.person-popup, .view-more-month-day-popup {
    width: 300px;
}

.view-more-month-day-popup {
    padding-left: 24px;
}

.event-edit-popup, .person-popup, .view-more-month-day-popup {
    background-color: #fff;
}

    .event-edit-popup .dropdown-items {
        top: calc(100% + -60px);
        left: 8px;
    }

    .event-edit-popup .ev-pop-dt-title {
        margin-right: 5px;
    }


    .event-edit-popup .two-times,
    .event-edit-popup .four-times {
        top: 3px;
    }

    .event-edit-popup .times-separator-sign {
        top: 0;
    }

    .event-edit-popup .evpop-big-desc {
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #49575F;
    }

    .event-edit-popup .evpop-start-end-dt {
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #A4ABAF;
    }

    .event-edit-popup .two-times,
    .event-edit-popup .four-times {
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #1C2D37;
    }

    .scheduler-event-creator:before, .event-edit-popup:before, .person-popup:before, .view-more-month-day-popup:before, .push-notification-popup:before {
        content: ' ';
        border: 8px solid transparent;
        border-bottom: 8px solid #fff;
        position: absolute;
        top: -16px;
        left: 50%;
        margin-left: -10px;
        z-index: 0;
        -webkit-filter: drop-shadow(0 -7px 3px rgba(0,0,0,0.1));
        filter: drop-shadow(0 -7px 3px rgba(0,0,0,0.1));
    }

    .event-edit-popup .job-status-name {
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #1C2D37;
        line-height: 20px;
    }

.event-by-click-been, .event-by-click-been {
    width: 272px;
    margin-left: 25px;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #F6F8FB;
}

    .event-by-click-been .schedulable-brick {
        width: 238px;
        height: 54px;
        border: 0;
        margin: 0 11px 5px 11px;
        margin-top: 0;
        margin-right: 11px;
        margin-bottom: 5px;
        margin-left: 11px;
        margin-top: 0;
        margin-bottom: 5px;
        padding: 0 7px 6px 5px;
        border-radius: 0;
        background: #FFFFFF;
        border: 1px solid #A7AFB4;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    }

        .event-by-click-been .schedulable-brick .schedulable-job-drag {
            margin-left: 10px;
            position: absolute;
            right: 0px;
        }

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

        .event-by-click-been .schedulable-brick > h3 {
            background-image: none;
            margin-right: 0px;
            margin-left: 3px;
            margin-top: 9px;
            font-weight: 500;
            font-size: 14px;
            line-height: 16px;
            color: #1A1E41;
        }

    .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;
        }

    .event-by-click-been .schedulable-brick .job-length {
        left: 6px;
        top: 36px;
        color: #63727B;
        font-weight: 700;
        font-size: 13px;
        line-height: 16px;
        background: transparent;
    }

    .event-by-click-been .schedulable-brick > div {
        margin-left: 65px;
        margin-top: 5px;
        font-weight: 400;
        font-size: 13px;
        line-height: 16px;
    }

    .event-by-click-been i {
        margin-bottom: -4px;
    }

.unscheduled-jobs-container {
    width: 319px;
    height: 211px;
}

#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;
        margin-right: 12px;
    }

.addit-menu-1.inside-popup ul {
    border-top: none !important;
}

.inside-popup.addit-menu li a,
.inside-popup.addit-menu-1 li a {
    border-bottom: 0px;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #778187;
    text-decoration: none !important;
}

    .inside-popup.addit-menu li a.active-tab-inside-popup,
    .inside-popup.addit-menu-1 li a.active {
        color: #1C2D37;
        border-bottom: 3px solid #00AFEB;
        margin-bottom: -2px;
    }

.inside-popup.addit-menu ul,
.inside-popup.addit-menu-1 ul {
    border-bottom: 1px solid #e6e6e6;
    width: 100% !important;
}

.addit-menu-1.inside-popup {
    width: 100%;
    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;
            margin-right: 12px;
        }

.dhx_now .dhx_month_head, .dhx_now .dhx_month_body {
    background: rgba(0, 175, 235, 0.08) !important;
    color: white;
}

.dhx_month_head.dhx_year_event {
    background-color: #00AFEB !important;
    color: white;
}

#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: -3px;
}

.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;
    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: 520px;
    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;
        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;
        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;
        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;
                }

.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;
    padding: 10px 10px;
}

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

    .accordion-trigger.warrow:before {
        content: ' ';
        width: 10px;
        height: 14px;
        background: url('../assests/images/icons/black-arrow-right-big-icon.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;
}

.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;
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -160px;
    z-index: 100;
}

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

.orange38-button {
    width: 38px;
    height: 38px;
    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;
    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;
        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;
    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;
}

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

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

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

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

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

.popUp-description-text {
    font-family: "DM Sans", sans-serif;
}

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

.required {
    font-weight: 600;
}

.service-popup-content .recurrence-error-message {
    height: 40px;
    border: 1px solid red;
    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;
}

.msg-week-year {
    width: 60px;
}

#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: "DM Sans", sans-serif !important;
    font-size: 15px;
    font-weight: bold;
    color: #878787;
}

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

.invoice-settings-bottom-field {
    box-sizing: border-box;
    width: 90%;
    min-width: 90%;
    max-width: 90%;
    border: 1px solid #d9d9d9;
    padding: 13px 8px;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}



.private-note-bg {
    background: #FFFDE4;
    padding-left: 8px;
}


ul#document_notes_holder li, ul.revisit-notes li {
    padding: 12px 0 12px 8px;
    border-bottom: 1px solid #E8EAEB;
}

    ul#document_notes_holder li > div, ul.revisit-notes li > div {
        display: inline-block;
        width: 100%;
    }

ul#job_activity_holder li {
    padding: 12px 0;
    border-bottom: 1px dashed #E8EAEB;
    transition: 0.25s;
}

    ul#job_activity_holder li > div {
        display: inline-block;
        width: 100%;
    }

.internal-note {
    padding: 0;
    width: 200px !important;
}

    .internal-note.internal-note-portal span {
        background: #fff4ee;
        color: #F46F22;
    }

    .internal-note.internal-note-internal span {
        background: #f2f1ff;
        color: #5D4FFB;
    }

    .internal-note span {
        background-color: #4d4d4d;
        color: #fff;
        font-size: 10px;
        line-height: 10px;
        padding: 5px 10px 3px 10px;
    }

.note-by {
    margin-top: 8px;
}

    .note-by p {
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: #A4ABAF;
    }

.note-content {
    width: 90% !important;
}

    .note-content.short {
        width: 80% !important;
    }

.popup-scrollable-inner-container .note-content {
    width: 80% !important;
}

.note-content p span {
    font-weight: 400;
}

.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;
}

.half-opacity {
    opacity: 0.5;
}

.status-anchor .status-inner > .status-name {
    max-width: 60%;
    width: auto;
}

.status-inner > .status-name {
    max-width: 70%;
    width: auto;
}

.white-butt.move-left {
    padding-left: 5px;
}

.tax-rate-payment, .tax-rate-deposit {
    width: 44.5%;
    float: right;
}

    .tax-rate-payment select,
    .tax-rate-deposit 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;
}

.ccpp {
    width: 200px;
    display: block;
}

#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:1440px) {
    .job-list-wrap {
        width: 96%;
        padding-left: 2%;
        padding-right: 2%;
        margin-left: 0;
    }
}

@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.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%;
        width: 31px;
    }

        .sec-menu-additional .menu-switch.sec-switch {
            width: 24px;
            height: 24px;
            background: url('../assests/images/highq/hamburger-menu-black.svg') center center no-repeat;
            display: inline-block;
            float: left;
            margin-top: 16px;
            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 th {
        text-align: left;
        font-weight: 600;
    }

        #workers-table th:first-child {
            padding-left: 29px;
        }

    #workers-table tr td:not(:last-child) {
        padding-right: 10px;
    }

.worker.selected.underlined {
    border-bottom: 1px solid #DFDFDF;
    height: 34px;
}

.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;
        }

    .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;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    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: 830px;
}

.row-flex.quotestatus {
    display: flex;
    flex-direction: row;
    width: 830px;
}

@media screen and (max-width:870px) {
    .row-flex.jobstatus {
        width: 100%;
        min-width: flex-grow: 1;
    }

    .row-flex.quotestatus {
        width: 100%;
        flex-grow: 1;
    }
}

.table-holder {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

.job-status-wrapper-left .table-holder,
.quote-status-wrapper-left .table-holder {
    min-width: 715px;
}

.table-job-naming {
    width: 55%;
}

.table-quote-naming {
    width: 55%;
}

@media screen and (max-width:870px) {

    .table-job-naming {
        width: 55%;
    }

    .table-quote-naming {
        width: 55%;
    }

    .statuses-settings-footer {
        width: 80%
    }
}

@media screen and (max-width:764px) {
    .statuses-settings-footer {
        width: 55%
    }
}


.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;
}

    .quote-status-list-item > i,
    .job-status-list-item > i {
        position: absolute;
        right: -40px;
        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: 180px;
}

    .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: 40px;
    left: 110px;
    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;
    }

.message-bubble-quotes {
    top: 22px;
    left: 78px;
}

.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;
}

/*@-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 .filter-box-holder {
    margin: 10px;
}

.adv-popup .filter-box-holder span.icon-Search {
    top: 9px;
}

.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: 29px;
}

.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%;
}

.invoice-btn {
    background-color: #63727B;
    width: 100%;
    padding: 5px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    margin-bottom: 20px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
}

.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;
    position: relative;
    padding: 24px;
    border-bottom: 1px solid #E8EAEB;
}

    .new-job-holder.base-gray {
        background: #F6F7F7;
        border: none;
    }

    .new-job-holder .item-name-content {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #1C2D37;
        margin-bottom: 0px;
        position: relative;
        top: -4px;
        left: 3px;
        display: contents;
    }

.filter-row {
    width: calc(100% - 50px);
    padding: 8px 24px 8px 24px;
    background-color: #F6F8FB;
    height: 32px;
    border: 1px solid #E8EAEB;
    vertical-align: middle;
    display: inline-block;
}

    .filter-row .filter-select-holder {
        display: inline-block;
        max-width: 250px;
        width: 100%;
        vertical-align: middle;
    }

    .filter-row label {
        position: relative;
        top: 6px;
    }

    .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;
    top: 0;
    cursor: pointer;
    margin: 20px;
}

    .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: 200px;
    right: 0;
    left: auto;
    top: 100%;
    margin-top: 0;
    padding: 4px 0 !important;
}

.filter-drop .status-anchor {
    height: 100%;
}

.filter-drop .item-inner {
    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;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #1C2D37;
}

.multiHoverOuter {
    padding: 0 !important;
}

.multiHoverInner {
    padding: 8px 16px;
    display: block;
    float: none;
}

    .multiHoverInner:hover {
        background: rgba(0, 175, 235, 0.08);
    }

.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: 12% !important;
}

.jw2-3-Jobs-DueDate {
    width: 7% !important;
}

.jw2-3-Jobs-InvoiceStatus {
    width: 8% !important;
}

.jw2-4-Jobs-DueDate {
    width: 8% !important;
}

.jw2-6-Jobs-DueDate {
    width: 11% !important;
}

.jw2-8-Jobs-DueDate {
    width: 10% !important;
}

.jw2-9-Jobs-DueDate {
    width: 6% !important;
}

.icon-Add {
    color: #00AFEB;
    font-size: 18px;
    background-color: transparent;
    margin-left: 5px;
}

.icon-Remove {
    font-size: 18px;
    background-color: transparent;
    margin-left: 5px;
    color: #00AFEB !important;
}

.fa-minus-circle {
    color: #00AFEB !important;
}

.add-remove-icon-color {
    color: rgb(15, 198, 233);
}

.dueDateView {
    margin-top: 11px;
}

.visitLine {
    width: 5px;
    height: 80px;
    margin-right: 17px;
    background: rgba(0, 175, 235, 0.08);
}

.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: 430px;
    height: 700px;
    margin-top: 32px;
    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(0, 175, 235, 0.08);
    }

    .activitySelect div:first-child {
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: #1C2D37;
    }

    .activitySelect div:last-child {
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #778187;
    }

.revisit-line {
    width: 572px;
    margin-left: 28px;
}

.tooltip-btn {
    position: relative;
    display: inline-block;
    margin-left: 25px;
}

    .tooltip-btn i {
        font-size: 19px;
        color: #A7AFB4;
        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: 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;
    z-index: 2;
    background: #012060;
    opacity: 0.66;
}

.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: "DM Sans", sans-serif !important;
}

div.add-file.icon-Add-long-button span {
    font-family: "DM Sans", 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: #1C2D37;
    opacity: 0.9;
    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;
    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;
    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 {
    background-color: #006EAC;
    color: #fff;
    float: left;
    font-family: "DM Sans", sans-serif !important;
    font-size: 15px;
    margin: 8px 0 0 0%;
    padding: 6px 16px;
    text-align: center;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}

#tab_job_forms .wf-btn,
.popup-job-forms .wf-btn {
    background-color: white;
    color: #006EAC;
    border: solid 1px #006EAC !important;
}

.popup-job-forms .control-btn {
    color: white !important;
    background-color: #63727B !important;
    border-color: #63727B !important;
    margin-right: 5px;
    width: auto !important;
}

    .popup-job-forms .control-btn.last {
        margin-right: 0;
    }

.control-btn.full-width {
    width: -webkit-fill-available;
}

#tab_job_forms .wf-btn.primary,
.popup-job-forms .wf-btn.primary {
    background-color: #006EAC;
    color: #fff;
}

#tab_job_forms .wf-btn.default,
.popup-job-forms .wf-btn.default {
    color: #22292f;
    border: none;
}

#tab_job_forms .wf-btn.grey,
.popup-job-forms .wf-btn.grey {
    color: #FFFFFF !important;
    background-color: #63727B !important;
    border: solid 1px #63727B !important;
}

#tab_job_forms .wf-btn.grey-light,
.popup-job-forms .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;
    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;
    padding: 15px 10px;
}

.btn-flat:hover {
    background-color: #d0d0d0 !important;
}

.sorting-header {
    cursor: pointer;
}

.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: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.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 {
    background: none;
}

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

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

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

.justify-content-center {
    justify-content: center;
}

.align-self-center {
    align-self: 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: #F6F8FB;
}

.ddlist-container {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.cost-item-legend {
    padding: 10px 0px;
    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) {
            float: left;
            font-size: 14px;
            text-align: right;
            width: 150px;
        }

        .cost-item-legend .item > div:nth-of-type(2) {
            margin-left: 140px;
            text-align: right;
        }

    .cost-item-legend > hr {
        border-bottom: 1px solid #e6e6e6;
        margin-bottom: 10px;
    }

.expense-item-price {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #F94439;
}

.profit-item-price {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #0BC683;
}

.cost-item-section-header {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #1C2D37;
}

.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;
        display: block;
        padding: 25px;
        position: relative;
        z-index: 100;
    }

.item-body .title {
    color: #4D4D4D;
    font-size: 25px;
    font-weight: 200;
}

.item-row {
    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;
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        font-size: 0;
        height: 35px;
        padding: 5px 15px 5px 15px;
        position: relative;
    }

    .item-control select {
        padding-right: 20px;
    }

    .item-control .inner.padded {
        padding-left: 30px !important;
    }

    .item-control .hour-minute {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        .item-control .hour-minute input {
            text-align: center;
        }

    .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;
        max-width: 1000px;
        width: 100%;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #212121;
    }

    .item-control .inner > input[type='text'] {
        border: none;
        display: block;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #212121;
        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: #1C2D37;
    display: block;
    font-size: 15px;
    line-height: 16px;
}

.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 {
    box-sizing: border-box;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    color: #1C2D37;
    text-transform: none;
}

.cost-row > div {
    box-sizing: border-box;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
}

.cost-row .cost_name {
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    color: #1C2D37;
}

.cost-row .cost_quantity_description, .cost-row .cost-item-tax-rate,
.cost-row cost-item-discount-rate, .cost-row .cost-total-value {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #1C2D37;
}

.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;
            cursor: pointer;
            position: relative;
            min-height: 22px;
            overflow-y: auto;
            overflow-x: hidden;
            font-weight: 500;
            font-size: 15px;
            line-height: 16px;
            color: #1C2D37;
        }

.control .droppable-sign {
    display: block;
    position: absolute;
    right: 10px;
    top: 9px;
    z-index: 1;
    font-size: 9px;
}

/*.control:not(.assets-selection):hover {
    transition: background-color 0.5s ease;
    background-color: #f0f0f0;
}*/

.control .selected-items {
    width: 95%;
    background-color: transparent;
    padding-right: 25px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    top: 4px;
}

.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;
    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: 24px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assets-selection .droppable-area input[type=text] {
    width: 90%;
    margin-top: 12px;
}

.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 {
    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;
    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;
    background-color: #63727B;
    color: white;
}

    .collapsible-team div {
        margin-right: 10px;
        margin-left: 5px;
        display: inline-block;
    }

.inline-search-holder {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0px
}

    .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: 7px
            }

            .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: 560px;
}

.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: 550px;
}

.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: black;
    width: 200px;
    display: inline-block;
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    margin-right: 48px;
    margin-bottom: 18px;
}

.module-checkbox {
    margin-right: 8px;
}

.features-management-description {
    font-weight: 400;
    font-size: 15px;
    line-height: 170%;
    color: #1C2D37;
    margin-bottom: 36px;
}

    .features-management-description.not-available-features {
        margin-bottom: 17px;
    }

.features-management-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 12px;
}

.available-modules-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 9px;
}

.modules-activated-by-admin-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 9px;
    margin-top: 25px;
}

.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: -35px;
    bottom: 15px;
    padding: 20px;
    z-index: 1000;
}

    .module-upgrade-brick > div,
    .module-activity-brick > div {
        padding: 0px;
        position: relative;
    }

        .module-upgrade-brick > div > div,
        .module-activity-brick > div > div {
            color: #1C2D37;
            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: -160px;
                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: 100px;
}

.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;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.5) #A7AFB4;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
    right: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

::-webkit-scrollbar-track {
    background: #A7AFB4;
    border-left: 2px solid #F6F8FB;
    border-right: 2px solid #F6F8FB;
}

#mainElement {
    margin-right: 5px;
}

.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);
}

.scroll-y-scheduler-unscheduled-jobs::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

.scroll-y-scheduler-unscheduled-jobs::-webkit-scrollbar-thumb {
    height: 28px;
    background-color: #006EAC;
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    background-clip: content-box;
    border-radius: 50px;
}

.scroll-y-scheduler-unscheduled-jobs::-webkit-scrollbar-track {
    background: #A7AFB4;
    border-left: 2px solid #F6F8FB;
    border-right: 2px solid #F6F8FB;
}

#month-day-popup-items-list::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

#month-day-popup-items-list::-webkit-scrollbar-thumb {
    border-radius: 3.5px;
    background-color: #808a8f;
}

.person-pop-address, .person-pop-email, person-pop-phone {
    max-width: 256px;
    float: left;
}

.person-pop-address, person-pop-phone {
    max-width: 128px;
}

#person-pop-address {
    padding-bottom: 10px;
}

.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-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #006EAC;
    width: 168px;
    margin-right: 100px;
}

.site-jobs-search-block {
    background: #F2F2F2;
    padding: 2px 10px 6px 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: 200px;
}

.fieldworker-app-settings-container {
    max-width: 450px;
    line-height: 25px;
}

.site-map-marker {
    position: absolute;
    width: 16px;
    margin-top: 36px;
    margin-left: 92px;
}

.align-vertial-top {
    vertical-align: top;
}

.site-map-table .map-column {
    width: 60%;
    text-align: right;
}

.checkbox-label-wrapped {
    margin-left: 30px;
    position: absolute;
    top: -42px;
}

.checkbox-label-wrapped-other {
    margin-left: 30px;
    position: absolute;
    top: -37px;
}

.fieldworker-app-settings-container label {
    cursor: pointer;
}

.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;
    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;
    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;
    }

.person-address-table td,
.person-pop-statuses-table td {
    vertical-align: top;
}

#person-pop-avatar {
    margin-right: 8px;
}

.timesheet.wf-table th, .timesheet.wf-table td {
    border-bottom: 1px solid #ddd;
    padding: 8px;
}

th {
    font-weight: normal;
}

.wf-table th {
    line-height: 16px;
    word-wrap: break-word;
    text-transform: uppercase;
    font-size: 13px;
    color: #1C2D37;
    font-weight: 500;
}

.wf-table td {
    border-bottom: 1px solid #CDCDCD;
    color: #1C2D37;
    font-weight: 500;
    max-width: 200px;
    padding-bottom: 6px;
    padding-top: 7px;
    word-wrap: break-word;
    font-size: 14px;
    line-height: 16px;
}

.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: 13px;
    margin-right: 5px;
    top: 3px;
    width: 13px;
    border-radius: 50%;
}

.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;
    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;
    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;
}

    .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;
    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;
    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: -56px;
    left: 620px;
}

.approval-action-bar {
    position: absolute;
    top: -49px;
    left: 290px;
    padding: 2px;
    background-color: #4F4F4F;
    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: 500;
    font-size: 16px;
    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;
        display: block;
        padding: 25px;
        position: relative;
        z-index: 1;
    }

.wf-p-body .title {
    color: #4D4D4D;
    font-size: 25px;
    font-weight: 400;
}

.item-row {
    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;
        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;
            display: block;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #212121;
            min-height: 20px;
            width: 100%;
        }

        .item-control .inner > textarea {
            border: none;
            display: block;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #212121;
            max-width: 1000px;
            width: 100%;
        }

        .item-control .inner > input[type='text'] {
            border: none;
            display: block;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #212121;
            min-height: 20px;
            width: 100%;
        }

        .item-control .inner > input[type='number'] {
            width: 100%;
            font-weight: 500;
            font-size: 14px;
            color: #212121;
            min-height: 20px;
            width: 100%;
        }

.more-options-cost-item {
    position: absolute;
    right: 7px;
    top: 44px;
}

.inner .caret {
    position: absolute;
    right: 15px;
    top: 8px;
    pointer-events: none;
}

.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-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;
    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;
    margin-top: -4px !important;
    display: block;
    position: fixed;
    width: 221px;
    height: 200px;
    overflow: auto;
    background-color: white;
    border: 1px solid #63727B;
    padding: 5px 18px;
    z-index: 10025;
    font-size: 15px;
    max-height: 200px;
    overflow: auto;
}

    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: -9px;
    padding-top: 7px;
    line-height: 29px;
}

    .timelog-categories-textbox .icon-Flip-down {
        float: right;
        margin-top: 5px;
        margin-right: -8px;
    }

.time-element .icon-Flip-down {
    top: 3px;
    right: 43px;
    position: relative;
    z-index: -1;
}


.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;
    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;
    display: block;
}

.overflow-visible {
    overflow: visible !important;
}

.site-edit-input-title {
    width: 120px;
}

.site-edit-input {
    width: 256px;
}

.dropdown-editable {
    position: relative;
    width: 200px;
}

    .dropdown-editable select {
        width: calc(100% - 10px);
        color: transparent;
    }

        .dropdown-editable select option {
            border: 1px solid #d9d9d9;
            height: 34px;
            width: 140px;
            padding-left: 5px;
            padding-right: 5px;
            font-size: 14px;
            color: black;
        }

    .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: 15px;
        top: 10px;
        font-size: 8px;
        pointer-events: none;
    }


.previous-reminder-msg-block {
    background-color: #F7F7F7;
    border: 1px solid #CCCCCC;
    max-width: 477px;
    padding: 20px;
}

.btn-narrow {
    max-width: 110px;
}

.auto-width {
    width: auto;
}

.fright-important {
    float: right !important;
}

.contacts-container {
    max-height: 520px;
    overflow-y: auto;
}

.no-items-panel {
    width: 1190px;
}

.no-items-panel-container {
}

.no-items-panel-block {
    display: inline-block;
    width: 416px;
    float: left;
    margin-left: 24px;
}

    .no-items-panel-block.no-video-on-the-right {
        float: initial
    }

.no-video {
    margin-left: 250px;
}

.empty-state-title {
    font-weight: 700;
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    color: #1C2D37;
    margin: auto;
    margin-top: 40px;
}

.no-video .empty-state-title {
    width: 700px;
}

.empty-state-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #49575F;
    width: 360px;
    margin: auto;
    margin-top: 28px;
}

.no-video .empty-state-text {
    width: 650px;
}

.primary-text {
    color: #F46F22;
}

.primary-background {
    background-color: #F46F22 !important;
}

.no-items-buttons-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    column-gap: 16px;
    row-gap: 10px
}

.empty-state-add-button {
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    min-width: 200px;
    color: #FFFFFF;
    background: #F46F22;
    border: 1px solid #F46F22;
    height: 40px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 16px;
}

.empty-state-add-test-button {
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    min-width: 200px;
    color: #F46F22;
    background: #FFFFFF;
    border: 1px solid #F46F22;
    display: inline-block;
    height: 40px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 16px;
}

.empty-state-video iframe {
    border: 1px solid white;
    border-radius: 20px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 300px) {
    .empty-state-add-test-button, .empty-state-add-button {
        margin-left: 0px;
    }
}


@media only screen and (max-width: 500px) {
    .empty-state-add-test-button, .empty-state-add-button {
    }

    .no-items-panel-block {
        width: 100% !important;
        float: initial;
    }
}

.empty-state-video {
    margin-left: 20px;
}


@media only screen and (max-width: 1330px) {
    .empty-state-video > div,
    .no-items-panel-block {
        padding-left: 0;
        padding-right: 0;
        float: initial;
    }

    .empty-state-video {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        width: 100%;
    }

        .empty-state-video iframe,
        .empty-state-video object,
        .empty-state-video embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    .no-items-video-block-container {
        padding: 0;
    }
}

@media only screen and (max-width: 1330px) {
    .empty-state-video {
        width: 70%;
        margin-left: 15%;
    }
}

@media only screen and (max-width: 1330px) {
    .no-items-panel {
        width: 100%;
    }

    .no-items-panel-container {
    }

    .no-items-panel-block {
        width: 100% !important;
        margin-left: 0px;
        float: initial;
    }
}

.upscope-code {
    color: lightgrey;
}

.grey-font-force {
    color: grey !important;
}

.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;
    padding-top: 1px;
}

    .event-clickable-inner-container h3 {
        font-weight: 500;
    }

.dhx_multi_day .event-clickable-inner-container {
    margin-top: 0px;
}

.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;
    background: #F6F8FB;
    border-bottom: 1px solid #D2D5D7;
    border-right: 1px solid #D2D5D7;
}

.level0-folder, .level1-folder {
    border: 0;
}

.pre-line {
    white-space: pre-line;
}

a.inactive {
    cursor: default;
    opacity: 0.5;
}

#month-day-popup-items-list {
    max-height: 390px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: 2px;
    margin-top: 8px;
}

.month-day-popup-item {
    color: white;
    margin-top: 5px;
    padding: 3px;
    cursor: pointer;
    width: 270px;
}

.dhx_month_link {
    text-align: center;
}

    .dhx_month_link a {
        color: black;
        display: block;
        background: lightgrey;
        height: 14px;
        font-weight: bold;
        padding: 3px 0 3px;
        margin-right: 4px;
    }

        .dhx_month_link a:hover {
            color: #012060;
            text-decoration-color: #1c2d37;
        }

.vs__actions {
    cursor: pointer;
}


/************ MENU ************/

#header {
    width: 100%;
}

.we-menu-collapsed {
    width: 72px !important;
    background-color: #1C2D37;
}

.we-menu-expanded {
    width: 220px !important;
    background-color: #1C2D37;
}

.menu-expander {
    position: fixed;
    float: left;
    bottom: 0px;
    height: 72px;
    background-color: #1C2D37;
}

    .menu-expander svg {
        bottom: 24px;
        position: fixed;
        left: 24px;
    }

.menu-item-tooltip {
    position: absolute;
    left: 86px;
    height: 16px;
    background: #1C2D37;
    border-radius: 8px;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 16px 24px;
    z-index: 20001;
}

    .menu-item-tooltip > div {
        width: 16px;
        height: 16px;
        left: -27px;
        top: -16px;
        position: relative;
        background: #1C2D37;
        transform: rotate(45deg);
        z-index: 20000;
    }

.left-side-logo {
    background-color: transparent;
    width: 100%;
    float: left;
    padding: 0px;
    height: auto;
    display: block;
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: 16px;
}

#menu-bar {
    font-family: "DM Sans", serif;
    overflow-x: hidden;
    overflow-y: auto;
}

    #menu-bar li a:not(.active) span {
        color: #FFFFFF;
        opacity: 0.4;
    }

    #menu-bar li a {
        display: block;
        text-align: center;
        color: #e6e6e6;
        text-align: left;
        padding: 12px 24px;
        padding-right: 0px;
        font-family: "DM Sans", serif;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0em;
        text-align: left;
    }

    #menu-bar ul {
        padding-bottom: 70px;
    }

    #menu-bar li {
        white-space: nowrap;
    }

        #menu-bar li.sub-menu a {
            font-size: 14px;
            padding: 4px 24px;
            padding-right: 0px;
        }

        #menu-bar li a div {
            height: 24px;
        }

        #menu-bar li a svg {
            display: inline-block;
        }

        #menu-bar li a span {
            display: inline-block;
            height: 24px;
            padding: 0px 24px;
            padding-right: 0px;
            vertical-align: super;
        }

/*If the browser supports proper/true/real/non-emulated hovering (e.g. has a mouse-like 
        primary input device), then apply this style when buttons are hovered over */
@media (hover: hover) {

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

    #menu-bar li:not(last):hover svg:first-child {
        opacity: 1 !important;
    }

    #menu-bar li:not(last):hover a span {
        color: #FFFFFF;
        opacity: 1 !important;
    }
}

#menu-bar.we-menu-collapsed li a span {
    display: none !important;
}

.menu-main-switch-expanded svg:last-child {
    transform: rotateZ(180deg);
}

.menu-counter-badge {
    padding: 1px 3px !important;
    opacity: 1 !important;
    position: relative;
    top: -26px;
    left: 23px;
    width: 19px !important;
    display: block !important;
    background-color: #f00;
    border-radius: 4px;
    height: 16px !important;
    font-size: 10px;
    font-weight: 100;
    text-align: center;
}

.menu-counter-badge-main {
    padding: 1px 3px !important;
    opacity: 1 !important;
    position: relative;
    top: -25px;
    left: 142px;
    width: fit-content !important;
    min-width: 18px;
    display: block !important;
    background-color: #f00;
    border-radius: 4px;
    height: 16px !important;
    font-size: 10px;
    font-weight: 100;
    text-align: center;
}

.menu-counter-badge-main-mini {
    padding: 1px 3px !important;
    opacity: 1 !important;
    position: relative;
    top: -29px;
    left: -2px;
    width: 2px;
    display: none;
    background-color: #f00;
    border-radius: 50%;
    height: 6px !important;
    font-size: 10px;
    font-weight: 100;
    text-align: center;
}

#menu-bar-shadow {
    display: none;
}

#menu-bar, .we-header, .menu-expander, .we-layout main {
    transition: width 300ms ease-out;
}

.we-header {
    transition: margin-left 300ms ease-out;
}

.we-page {
    position: relative;
    display: inline-block;
    padding-bottom: 40vh;
    width: 100%;
}

@media only screen and (max-width:590px) {
    #menu-bar {
        position: absolute;
        z-index: 90000;
        background-color: #1C2D37;
        display: none;
        height: 100%;
    }

        #menu-bar ul {
            padding-bottom: 200px;
        }

    #header, #main-page {
        width: 100% !important;
    }

    #menu-bar-shadow.active {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        background: #1C2D37;
        z-index: 10000;
        right: 0;
        opacity: 0.9;
        display: block;
    }
}

body {
    font-family: "DM Sans", sans-serif !important;
    color: #1C2D37;
}

#menu-bar {
    flex-shrink: 0;
}

#under-main {
    position: fixed;
}

#main-page {
    position: relative;
}

.top-right-header-icon {
    cursor: pointer;
}

.top-right-header-context-menu {
    position: fixed;
    background: #fefefe;
    border-radius: 8px;
    display: none;
    padding: 16px;
    border: 1px solid #63727B;
    width: 200px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}

    .top-right-header-context-menu li a:not(.active) span {
        color: #49575F;
    }

    .top-right-header-context-menu li a {
        display: block;
        text-align: center;
        color: #49575F;
        text-align: left;
        padding: 8px 0px;
        font-family: "DM Sans", serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 0em;
        text-align: left;
    }

    .top-right-header-context-menu li {
        white-space: nowrap;
    }

        .top-right-header-context-menu li a div {
            height: 16px;
        }

        .top-right-header-context-menu li a svg {
            display: inline-block;
        }

        .top-right-header-context-menu li a span {
            display: inline-block;
            height: 16px;
            padding: 0px 12px;
            padding-right: 0px;
            vertical-align: super;
        }

        .top-right-header-context-menu li:not(last):hover svg:first-child {
            opacity: 1 !important;
        }

        .top-right-header-context-menu li:not(last):hover a span {
            opacity: 1 !important;
        }

.menu-connector {
    background-color: white;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 190px;
    top: -9px;
    transform: rotate(45deg);
    border: 1px solid #63727B;
    border-bottom: 0px;
    border-right: 0px;
}

.header-company-name {
    height: 32px;
    margin: 0px 28px;
    margin-top: -58px;
    position: relative;
    top: -10px;
    line-height: 32px;
    color: #63727B;
    font-size: 16px;
    font-weight: 500;
    border-left: 1.5px solid #D2D5D7;
    padding-left: 14px;
}

@media (max-width: 780px) {
    .header-company-name, .top-right-header-icon.help-icon {
        display: none;
    }
}

.settings-description {
    font-size: 15px;
    line-height: 24px;
    margin-right: 20%;
}

.settings-tile {
    width: 280px;
    display: inline-block;
    text-align: center;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 40px;
    margin: 24px 24px 0px 0px;
}

.settings-tile-title {
    margin-top: 24px;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    text-transform: capitalize;
}

.settings-tile-content {
    margin-top: 16px;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #778187;
}

.left-menu-header {
    font-weight: 600;
    font-size: 15px;
    line-height: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E8EAEB;
}

    .left-menu-header svg {
        margin-right: 8px;
    }

    .left-menu-header span {
        position: relative;
        top: -2px;
    }

.left-menu-back-link {
    display: block;
    margin-bottom: 24px;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    cursor: pointer;
}

    .left-menu-back-link svg {
        margin-right: 8px;
    }

    .left-menu-back-link span {
        position: relative;
        top: -2px;
    }

.search-reset {
    color: #006EAC;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    text-transform: uppercase;
    margin-right: 12px !important;
    cursor: pointer;
}

.search-phrase {
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 16px !important;
    color: #1C2D37;
    padding: 7px 12px;
    height: 32px;
    border: 1px solid #E8EAEB;
    width: 207px !important;
    position: relative;
}

.job-search-tools select {
    color: #63727B;
    font-weight: 500;
}

.job-search-tools .icon-Flip-down {
    position: relative;
    top: -23px;
    left: 120px;
}

    .job-search-tools .icon-Flip-down.long {
        left: 280px;
    }

.job-list-wrap .font80:not(select),
.jheading .font80:not(select),
.thead.img-nvc-removable .font80:not(select) {
    font-size: 13px;
    color: #1C2D37;
}

.job-list-wrap .fontf6 {
    color: #006EAC;
}

.scheduler-wrap .fontf6 {
    color: #006EAC;
}

.view-butt {
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    background-color: transparent;
    color: #012060;
    border: 0px;
    border-bottom: 1px solid #1C2D37;
    padding: 2px 2px;
}

a.view-butt {
    padding-bottom: 0;
    line-height: 20px;
}

.delete-butt {
    margin-top: 2px;
    cursor: pointer;
    margin-left: 10px;
}

.letter-for-filter > .not-active {
    color: #CCCCCC !important;
}

a.status-href {
    display: inline-block;
    margin: 8px 4px 0px 0px;
    padding: 5px 12px;
    border-radius: 16px;
}

    a.status-href[status-id='All'] {
        border: 3px solid #E8EAEB !important;
    }

    a.status-href.active[status-id='All'], a.status-href.active[status-id='00000000-0000-0000-0000-000000000000'] {
        border: 3px solid #F46F22 !important;
    }

    a.status-href div {
        display: inline-block;
    }

        a.status-href div:first-child {
            font-weight: 500;
            font-size: 14px;
            line-height: 16px;
            color: #1C2D37;
        }

            a.status-href div:first-child:not(:last-child) {
                padding-right: 8px;
                border-right: 1px solid #D2D5D7;
                margin-right: 4px;
            }

        a.status-href div:last-child:not(:first-child) {
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #778187;
        }

    a.status-href.active {
        background-color: #F46F22;
        color: white !important;
        box-shadow: none !important;
        border: 1px solid #F46F22;
    }

        a.status-href.active div {
            color: white !important;
            border-color: white;
        }

            a.status-href.active div:first-child:not(:last-child) {
                border-right: 1px solid white;
            }


.dhx_cal_event_clear {
    font-size: 16px;
}

    .dhx_cal_event_clear b {
        font-weight: 500;
    }

.event-clickable-inner {
    font-size: 16px;
    font-weight: 500;
}

input[type=checkbox]:before {
    position: relative;
    display: block;
    width: 11px;
    height: 11px;
    border: 0px solid #808080;
    content: "";
    background-image: url('../assests/images/icons/checkbox-empty.svg');
}

input[type=checkbox]:after {
    position: relative;
    display: block;
    left: 0px;
    top: -11px;
    width: 7px;
    height: 7px;
    border-width: 0px;
    border-style: solid;
    border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
    content: "";
    background-color: white;
    background-image: url('../assests/images/icons/checkbox-empty.svg');
    background-repeat: no-repeat;
    background-position: center;
}

input[type=checkbox]:checked:after {
    background-image: url('../assests/images/icons/checkbox-checked.svg');
}

input[type=checkbox]:disabled:after {
    -webkit-filter: opacity(0.4);
}

input[type=checkbox]:not(:disabled):checked:hover:after {
    background-image: url('../assests/images/icons/checkbox-checked.svg');
}

input[type=checkbox]:not(:disabled):hover:after {
    background-image: url('../assests/images/icons/checkbox-empty.svg');
    border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

input[type=checkbox]:not(:disabled):hover:before {
    border-color: #3D7591;
}

input[type="checkbox"] {
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    vertical-align: middle;
}

    input[type="checkbox"]:before {
        width: 20px;
        height: 20px;
        top: -2px;
    }

    input[type="checkbox"]:after {
        top: -22px;
        width: 20px;
        height: 20px;
        left: 0px;
    }

.statuses-toggle {
    margin-top: 24px;
    margin-bottom: 20px;
    float: left;
    margin-left: 2px;
}

    .statuses-toggle span {
        display: inline-block;
    }

        .statuses-toggle span:nth-child(1) {
            font-weight: 400;
            font-size: 20px;
            line-height: 16px;
            color: #000000;
        }

        .statuses-toggle span:nth-child(2) {
            margin-right: 1px;
        }

        .statuses-toggle span:nth-child(3) {
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #1C2D37;
            position: relative;
            top: -2px;
        }

.filter-button-vuejs {
    background-color: #63727B !important;
    height: 34px;
    width: 87px;
    font-size: 14px !important;
    line-height: 16px;
    margin-right: 8px !important;
}

.filter-tile {
    padding: 8px 12px;
    background: #F6F8FB;
    border-radius: 8px;
    font-size: 14px;
    max-height: 32px;
    margin-bottom: 8px;
}

.x-icon-filter {
    height: 9px;
    margin-left: 7px;
}

.number-of-unscheduled-jobs {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    background: #00AFEB;
    border-radius: 100px;
    color: white;
    padding: 2px 15px 0px 15px;
    height: 26px;
}

.background-grey {
    background: #F6F8FB;
}

.bricks-top-part {
    padding: 17px 15px 5px 15px;
    width: calc(100% - 46px);
}

.scheduler-view-dropdown {
    position: absolute;
    right: 5px;
    right: 26px;
}

    .scheduler-view-dropdown select {
        font-weight: 500;
    }


.scheduler-view-dropdown-title {
    position: absolute;
    right: 234px;
    top: 23px;
}

.scheduler-show-hide-checkboxes {
    right: 0px;
    top: 36px;
    position: absolute;
    width: 178px;
    height: 129px;
    background: #FFFFFF;
    border-radius: 8px;
    padding-left: 22px;
    border: 1px solid #ababab;
    z-index: 5;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #49575F;
}

.scheduler-show-hide-unscheduled-jobs-filter-dropdown {
    right: 45px;
    top: 54px;
    position: absolute;
    width: 151px;
    height: 146px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 15px 0 0 22px;
    border: 1px solid #ababab;
    z-index: 5;
}

.add-item-popup {
    right: -58px;
    top: 42px !important;
    position: absolute;
    width: 200px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 17px 12px 12px 12px;
    border: 1px solid #ababab;
    z-index: 15;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #49575F;
    cursor: default;
}

    .add-item-popup.no-round-corners {
        border-radius: 0px;
    }


    .add-item-popup .menu-connector {
        left: 143px;
        top: -9px !important;
        position: absolute;
    }

    .add-item-popup div {
        position: relative;
        display: table;
        white-space: normal;
        top: 0px;
    }

    .add-item-popup .add-job-line {
        margin-bottom: 15px;
        cursor: pointer;
    }

    .add-item-popup .add-event-line {
        cursor: pointer;
    }

    .add-item-popup img {
        margin-right: 16px;
        margin-left: 11px;
        display: table-cell;
    }

    .add-item-popup .scheduler-add-job-event-hint {
        padding: 20px 10px 8px 12px;
        background: #F6F8FB;
        border-radius: 4px;
        width: 176px;
        margin-bottom: 0px;
        margin-top: 17px;
    }

        .add-item-popup .scheduler-add-job-event-hint .scheduler-close-hint {
            position: absolute;
            right: 5px;
            top: 8px;
            cursor: pointer;
        }

    .add-item-popup .add-job-event-buttons-container {
        display: table;
    }

.timesheets-add-log-expense-popup {
    left: 0;
    padding: 15px;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #49575F;
}

    .timesheets-add-log-expense-popup .menu-connector {
        left: 20px;
    }

    .timesheets-add-log-expense-popup .pop-list-item {
        margin-left: 16px;
        display: inline-block;
    }

.add-job-event-buttons-container span {
    display: table-cell;
    vertical-align: middle;
}

.popup-arrow-top {
    background: #FFFFFF;
    transform: matrix(0.71, 1.36, -0.37, 0.71, 0, 0);
}

.drop-item {
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: #49575F;
    height: 28px;
}

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

.filter-display-item {
    display: inline-block;
    padding: 3px 12px 9px 12px;
    height: 16px;
    background: #FFFFFF;
    border: 1px solid #D2D5D7;
    border-radius: 8px;
    margin-left: 8px;
}

    .filter-display-item.hide {
        display: none;
    }

    .filter-display-item.show-more {
        cursor: pointer;
    }

    .filter-display-item span:first-child {
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: #A4ABAF;
        display: inline-block;
    }

    .filter-display-item span:nth-child(2) {
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: #1C2D37;
        text-overflow: ellipsis;
        max-width: 180px;
        overflow: hidden;
        display: inline-block;
        white-space: nowrap;
        top: 3px;
        position: relative;
    }

    .filter-display-item span:nth-child(3) {
        display: inline-block;
        background-image: url('../assests/images/icons/close-filter.svg');
        height: 14px;
        width: 14px;
        position: relative;
        top: 1px;
        cursor: pointer;
    }

.scheduler-top-filter-bar .filter-button:after {
    content: '';
    background-image: url('../assests/images/icons/white-arrow-down.svg');
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
    top: -16px;
    left: 52px;
}

.scheduler-top-filter-bar {
    padding: 8px 0px 8px 0px;
    background: #F6F8FB;
}

    .scheduler-top-filter-bar .filter-button {
        background: #63727B;
        font-weight: 500;
        font-size: 16px;
        line-height: 16px;
        color: #FFFFFF;
        padding: 7px 12px;
        margin: 8px 8px;
        cursor: pointer;
        height: 32px;
        width: 87px;
        text-align: left;
    }

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

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

.main-scheduler .filter-button {
    margin-left: 0;
}

.remove-filter-btn-container {
    display: inline-block;
    vertical-align: middle;
}

    .remove-filter-btn-container button {
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: #63727B;
        border-bottom: 1px solid #63727B;
        background: transparent;
        position: relative;
        top: -4px;
        margin-left: 16px;
        padding-bottom: 4px;
    }

.scheduler-hide-display-btn {
    position: absolute;
    right: 17px;
    width: 120px;
    background: #F6F8FB;
    font-size: 14px;
    line-height: 16px;
    padding: 7px 0 0 15px;
    height: 24px;
    font-weight: 500;
    border: none;
    margin-left: 10px;
    margin-right: 23px;
    cursor: pointer;
    display: inline-block;
}

    .scheduler-hide-display-btn i {
        pointer-events: none;
        font-size: 9px;
        top: 11px;
        right: 5px;
        color: #666666;
        position: absolute;
    }

.nav.nav-tabs.no-section {
    top: -8px;
    border-top: 1px solid #E8EAEB;
    margin-top: 8px;
}

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


.scheduler-wrap .scheduler-top-filter-bar {
    background: white;
}

.scheduler-wrap .filter-display-item {
    background: #F6F8FB;
    border: 0px;
    height: 27px;
    padding: 5px 10px 0 10px !important;
}

.we-page-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 24px;
    color: #1C2D37;
    margin-bottom: 8px;
    width: 100%;
    position: relative;
    float: left;
}

.we-page-description-title {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #1C2D37;
    margin-bottom: 8px;
}

.we-page-description {
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #49575F;
    margin-bottom: 24px;
    word-wrap: break-word;
}

.we-edit-page-label {
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #1C2D37;
}

.we-edit-page-section-label {
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #778187;
}

.we-page-section-title {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #778187;
}

.we-page-label {
    font-weight: 400;
    font-size: 15px;
    line-height: 16px;
    color: #A4ABAF;
    display: inline-block;
    margin-right: 8px;
}

    .we-page-label.padded {
        width: 140px;
    }

.we-page-label-value {
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #1C2D37;
    display: inline-block;
}

    .we-page-label-value.address {
        font-weight: 400;
        line-height: 20px;
    }

    .we-page-label-value.contact {
        font-weight: 400;
        color: #778187;
        margin-bottom: 8px;
    }

.we-page-panel-title {
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #1C2D37;
    position: relative;
    top: -2px;
}

.details-setup-panel {
    clear: both;
    background: #F6F7F7;
    padding: 16px;
    padding-bottom: 28px;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #49575F;
}

.we-icon-close-popup {
    content: '';
    background-image: url('../assests/images/icons/close-popup-icon.svg');
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
    margin-right: 8px;
}

.we-icon-calendar {
    content: '';
    background-image: url('../assests/images/icons/calendar-icon.svg');
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
}

.we-icon-time {
    content: '';
    background-image: url('../assests/images/icons/time-icon.svg');
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
}

    .we-icon-time.blue {
        background-image: url('../assests/images/icons/time-icon-blue.svg');
    }

.we-icon-white-arrow-down {
    content: '';
    background-image: url('../assests/images/icons/white-arrow-down.svg');
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
}

.we-icon-table-edit {
    content: '';
    background-image: url('../assests/images/icons/table-icon-edit.svg');
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
}

.we-icon-table-delete {
    content: '';
    background-image: url('../assests/images/icons/table-icon-delete.svg');
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
    background-repeat: no-repeat;
}

.we-icon-dots {
    content: '';
    background-image: url('../assests/images/icons/dots-icon.svg');
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
}

.schedulable-job-drag {
    content: '';
    background-image: url('../assests/images/icons/schedulable-job-drag.svg');
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
}

.job-icon {
    content: '';
    background-image: url('../assests/images/icons/job-icon.svg');
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
}

.event-icon {
    content: '';
    background-image: url('../assests/images/icons/event-icon.svg');
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
}

.cross-8-icon {
    content: '';
    background-image: url('../assests/images/icons/cross-8-icon.svg');
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
    cursor: pointer;
}

.cross-16-icon {
    content: '';
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
    cursor: pointer;
    background-color: #A4ABAF;
    -webkit-mask: url('../assests/images/icons/cross-16-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/cross-16-icon.svg') no-repeat center;
}

.cross-14-icon-black {
    content: '';
    height: 14px;
    width: 14px;
    position: relative;
    display: block;
    cursor: pointer;
    background-color: black;
    -webkit-mask: url('../assests/images/icons/cross-14-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/cross-14-icon.svg') no-repeat center;
}

.cross-14-icon-grey {
    content: '';
    height: 14px;
    width: 14px;
    position: relative;
    display: block;
    cursor: pointer;
    background-color: #778187;
    -webkit-mask: url('../assests/images/icons/cross-14-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/cross-14-icon.svg') no-repeat center;
}

.check-icon {
    content: '';
    height: 12px;
    width: 16px;
    position: relative;
    display: block;
    cursor: pointer;
    background-color: #F46F22;
    -webkit-mask: url('../assests/images/icons/check-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/check-icon.svg') no-repeat center;
}

.onboarding-role-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-bottom: 4px;
}

.onboardin-role-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.onboarding-roles-table {
    width: 700px;
}

    .onboarding-roles-table .check-cross-cell {
        vertical-align: middle;
    }

    .onboarding-roles-table .cross-14-icon-grey,
    .onboarding-roles-table .check-icon {
        display: inline-block;
    }

    .onboarding-roles-table td {
        height: 63px;
    }

.onboarding-arrow-right {
    content: '';
    position: relative;
    display: block;
    cursor: pointer;
    background-color: white;
    -webkit-mask: url(../assests/images/icons/arrow-right-full-white.svg) no-repeat center;
    mask: url(../assests/images/icons/arrow-right-full-white.svg) no-repeat center;
    position: absolute;
    right: 39px;
    top: 21px;
    height: 14px;
    width: 17px;
    pointer-events: none;
}

    .onboarding-arrow-right.responsive {
        right: 12px;
        top: 13px;
        position: absolute;
    }

.onboarding-arrow-left {
    content: '';
    display: block;
    cursor: pointer;
    background-color: white;
    -webkit-mask: url(../assests/images/icons/arrow-left-full-white.svg) no-repeat center;
    mask: url(../assests/images/icons/arrow-left-full-white.svg) no-repeat center;
    position: absolute;
    top: 13px;
    height: 14px;
    width: 17px;
    left: 16px;
    pointer-events: none;
}

.extra-small-checkbox {
    content: '';
    position: relative;
    display: block;
    cursor: pointer;
    background-color: white;
    background: url(../assests/images/icons/extra-small-checkbox.svg) no-repeat center;
    height: 14px;
    width: 17px;
}

.onboarding-module-brick-circle .extra-small-checkbox {
    top: 13px;
    left: 15px;
    position: absolute;
}

.radio-button-circle {
    content: '';
    position: relative;
    display: block;
    cursor: pointer;
    background-color: #D2D5D7;
    -webkit-mask: url(../assests/images/icons/radio-button-circle.svg) no-repeat center;
    mask: url(../assests/images/icons/radio-button-circle.svg) no-repeat center;
    position: absolute;
    top: 13px;
    height: 16px;
    width: 16px;
    left: 15px;
}

.radio-button-circle-red {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url(../assests/images/icons/radio-button-circle-red.svg) center center no-repeat;
}

.scheduler-settings-popup .cross-16-icon {
    margin-right: -13px;
    margin-top: 1px;
}

.person-popup .cross-16-icon {
    margin-right: 10px;
    margin-top: 9px;
}

.add-item-popup .job-icon, .add-item-popup .event-icon {
    margin-left: 12px;
    margin-right: 16px;
}

.scheduler-add-job-event-hint .cross-icon {
    margin-right: 14px;
    margin-top: 3px;
}

.dhx_mini_calendar .dhx_cal_prev_button {
    content: '';
    background-image: url('../assests/images/icons/direction-left-black-small.svg');
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
    margin-left: 13px;
}

.dhx_mini_calendar .dhx_cal_next_button {
    content: '';
    background-image: url('../assests/images/icons/direction-right-black-small.svg');
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
    margin-right: 13px;
}

.document-icon-small {
    content: '';
    background-image: url('../assests/images/icons/document-icon-small.svg');
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    position: relative;
}

.drag-icon {
    content: '';
    background-image: url('../assests/images/icons/drag.svg');
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
    cursor: grab;
}

.ellipsis-icon {
    content: '';
    background-image: url('../assests/images/icons/ellipsis.svg');
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    position: relative;
    display: block;
}

#activityCount {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #A4ABAF;
}

.remider-details-toggle {
    cursor: pointer;
}

.remider-details-toggle-indicator.expanded svg {
    transform: rotate(180deg);
}

.dropdown-items .item-inner.status-inner span:nth-child(3) {
    display: none !important;
}

.vertical-status-priority {
    position: absolute;
    right: 60px;
    width: 200px;
}

.imageJob .object-name, .imageJob .object-date {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    color: #1C2D37;
    margin-top: 4px;
}

.we-page-section-title-dark-bold {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #1C2D37;
}

.wrap-notes li {
    font-weight: 400;
    font-size: 15px;
    line-height: 16px;
    color: #1C2D37;
}

.add-note-textarea {
    border: 1px solid #E8EAEB;
    height: 96px;
    max-width: 100% !important;
    width: calc(100% - 32px) !important;
    padding: 16px;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #212121;
    margin-top: 8px;
}

.scheduler-drag-hint {
    color: #63727B;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    display: inline-table;
    margin-left: 100px;
}

    .scheduler-drag-hint span {
        display: table-cell;
        vertical-align: middle;
    }

    .scheduler-drag-hint img {
        display: table-cell;
        vertical-align: middle;
    }

    .scheduler-drag-hint .icon-scheduler-drag-and-drop {
        margin-bottom: -5px;
        margin-right: 9px;
    }

.dhx_cal_header {
    border-top: 0px;
    margin-left: -1px;
}

.dhx_scale_bar {
    border-top: 1px solid #e5e5e5;
}

.dhx_minical_icon {
    float: left;
}

.minical-date {
    margin-right: 10px;
}

.scheduler-reset-to-business-hours {
    margin-left: 10px;
}

.scheduler-week-month-vertical-separator {
    border-left: 1px solid #D2D5D7;
    left: -9px;
    top: -7px !important;
    height: 38px;
}

.big-plus-round-button {
    cursor: pointer;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    padding-right: 4px;
    padding-bottom: 3px;
    display: inline-block;
    margin-top: -19px;
    margin-left: 13px;
}

.icon-Recurring, .icon-Recurring-black {
    background-image: url('../assests/images/icons/recurring-icon.svg');
    width: 16px;
    height: 16px;
    display: inline-block;
}

.icon-unlock {
    background-image: url('../assests/images/icons/unlock-icon.svg');
    width: 14px;
    height: 16px;
    display: inline-block;
}

.module-brick .icon-unlock {
    margin-right: 9px;
}

.icon-Recurring-white {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: white;
    -webkit-mask: url('../assests/images/icons/recurring-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/recurring-icon.svg') no-repeat center;
}

.icon-Recurring-yellow {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: #FFAE34;
    -webkit-mask: url('../assests/images/icons/recurring-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/recurring-icon.svg') no-repeat center;
}

.icon-Revisit-white {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: white;
    -webkit-mask: url('../assests/images/icons/revisit-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/revisit-icon.svg') no-repeat center;
}

.icon-Multi-visit-white {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: white;
    -webkit-mask: url('../assests/images/icons/multivisit-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/multivisit-icon.svg') no-repeat center;
}

.icon-Revisit-black {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: black;
    -webkit-mask: url('../assests/images/icons/revisit-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/revisit-icon.svg') no-repeat center;
}

.icon-Revisit-yellow {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: #FFAE34;
    -webkit-mask: url('../assests/images/icons/revisit-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/revisit-icon.svg') no-repeat center;
}

.icon-Multi-visit-black {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: black;
    -webkit-mask: url('../assests/images/icons/multivisit-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/multivisit-icon.svg') no-repeat center;
}

.icon-Multi-visit-yellow {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: #FFAE34;
    -webkit-mask: url('../assests/images/icons/multivisit-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/multivisit-icon.svg') no-repeat center;
}

.icon-onboarding-step {
    display: inline-block;
    -webkit-mask: url('../assests/images/icons/step-onboarding-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/step-onboarding-icon.svg') no-repeat center;
    width: 180px;
    height: 14px;
    background-color: #D2D5D7;
    margin-top: 13px;
}

.icon-onboarding-step-long {
    display: inline-block;
    -webkit-mask: url('../assests/images/icons/step-onboarding-long-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/step-onboarding-long-icon.svg') no-repeat center;
    width: 345.5px;
    height: 14px;
    background-color: #D2D5D7;
}


@media (max-width: 767px) {
    .icon-onboarding-step-long.responsive {
        width: 42%;
    }
}


.icon-envelope-small {
    display: inline-block;
    -webkit-mask: url('../assests/images/icons/envelope-small-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/envelope-small-icon.svg') no-repeat center;
    width: 16px;
    height: 14px;
    background-color: black;
}

.person-popup .icon-envelope-small {
    background-color: #006EAC;
}

.person-popup .icon-envelope-small,
.person-popup .icon-house-small,
.person-popup .icon-phone-small {
    margin-right: 13px;
}

.person-popup .icon-envelope-small {
    vertical-align: text-bottom;
    margin-top: 8px;
}

.person-popup .icon-phone-small {
    margin-top: 8px;
}

.person-pop-phone {
    vertical-align: -webkit-baseline-middle
}

.person-pop-email {
    color: #006EAC;
    padding-top: 7px;
}

.icon-phone-small {
    display: inline-block;
    -webkit-mask: url('../assests/images/icons/phone-small-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/phone-small-icon.svg') no-repeat center;
    width: 16px;
    height: 16px;
    background-color: #63727B;
}

.icon-house-small {
    display: inline-block;
    -webkit-mask: url('../assests/images/icons/house-small-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/house-small-icon.svg') no-repeat center;
    width: 14px;
    height: 16px;
    background-color: #63727B;
}

.icon-onboarding-step-long.active,
.icon-onboarding-step.active {
    background-color: #00AFEB;
}

.icon-import-your-data {
    background-image: url('../assests/images/icons/import-your-data-icon.svg');
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 28px;
    height: 38px;
}

.icon-staff-members {
    background-image: url('../assests/images/icons/staff-members-icon.svg');
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 33px;
    height: 37px;
}

.icon-Help {
    background-image: url('../assests/images/icons/help-icon.svg');
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.icon-expense {
    -webkit-mask: url('../assests/images/icons/expense-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/expense-icon.svg') no-repeat center;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: #63727B;
}

.icon-travel-time {
    -webkit-mask: url('../assests/images/icons/travel-time-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/travel-time-icon.svg') no-repeat center;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: #63727B;
}

.icon-job-timelog {
    -webkit-mask: url('../assests/images/icons/job-timelog-icon.svg') no-repeat center;
    mask: url('../assests/images/icons/job-timelog-icon.svg') no-repeat center;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: #63727B;
}

job-timelog-add-option:hover {
    background-color: green;
}

.icon-company-details {
    background-image: url('../assests/images/icons/company-details-icon.svg');
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 32px;
    height: 36px;
}

.icon-select-modules {
    background-image: url('../assests/images/icons/select-modules-icon.svg');
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 26px;
    height: 38px;
}

.icon-trash {
    background-image: url(../assests/images/icons/trash.svg);
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 16px;
    height: 35px;
    cursor: pointer;
}

.icon-drag-six-dots {
    -webkit-mask: url('../assests/images/icons/drag-six-dots.svg') no-repeat center;
    mask: url('../assests/images/icons/drag-six-dots.svg') no-repeat center;
    background-repeat: no-repeat;
    position: relative;
    display: none;
    width: 16px;
    height: 16px;
    cursor: grab;
    color: red;
    content: '';
    background-color: #A4ABAF;
}

.icon-features-management {
    background-image: url('../assests/images/icons/features-management.svg');
    width: 16px;
    height: 16px;
    display: inline-block;
}

.icon-question-grey-hint {
    background-image: url('../assests/images/icons/question-grey-hint.svg');
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
}


.icon-Search {
    background-image: url('../assests/images/icons/search-icon.svg');
    width: 16px;
    height: 16px;
    display: inline-block;
}


.icon-Flip-down, .vs__open-indicator {
    background: url('../assests/images/icons/black-arrow-down-icon.svg') no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
    pointer-events: none;
}

.icon-Flip-up {
    background: url('../assests/images/icons/black-arrow-up-icon.svg') no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
}

.icon-Flip-down-grey-big {
    background-image: url(../assests/images/icons/grey-arrow-down-big-icon.svg);
    width: 12px;
    height: 8px;
    display: inline-block;
    margin-right: 11px;
    cursor: pointer;
}

.icon-Flip-down-grey-small {
    background-image: url(../assests/images/icons/grey-arrow-down-small-icon.svg);
    width: 10px;
    height: 7px;
    display: inline-block;
    margin-right: 8px;
    cursor: pointer;
    pointer-events: none;
}

.icon-black-arrow-left-big {
    background-image: url(../assests/images/icons/black-arrow-left-big-icon.svg);
    width: 9px;
    height: 13px;
    display: inline-block;
    cursor: pointer;
}

.icon-black-arrow-right-big {
    background-image: url(../assests/images/icons/black-arrow-right-big-icon.svg);
    width: 9px;
    height: 13px;
    display: inline-block;
    cursor: pointer;
}

.icon-scheduler-drag-and-drop {
    background-image: url(../assests/images/icons/scheduler-drag-and-drop-icon.svg);
    width: 22px;
    height: 22px;
    display: inline-block;
}



.scheduler-timeline-days .icon-Flip-down-grey-small {
    position: absolute;
    right: 2px;
    top: 10px;
    cursor: pointer;
}

.scheduler-hide-display-btn > .icon-Flip-down {
    top: 8px;
}

.gr-br-sec i.icon-Flip-down {
    top: 7px;
}

.account-types-container {
    position: relative;
    width: 175px;
    background: white;
}

    .account-types-container i.icon-Flip-down {
        top: 9px;
        position: absolute;
    }

    .account-types-container select {
        width: 100%;
    }


.icon-menu-back {
    background-image: url('../assests/images/icons/menu-back-icon.svg');
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 6px;
}

.action-link {
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #006EAC;
    cursor: pointer;
}

textarea {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
    max-height: 90px;
}

.blue-arrow-down {
    position: relative;
    top: 2px;
}

.expanded .blue-arrow-down {
    transform: rotate(180deg);
}

.big-plus-round-button svg {
    width: 33px;
    height: 33px;
}

.dhx_data_table.folder .dhx_matrix_cell, .dhx_matrix_scell.folder {
    background-color: #63727B;
}

.dhx_scell_level1 {
    color: white;
}

.scheduler-teams-arrow-right {
    background-image: url(../assests/images/icons/arrow-right.svg) !important;
    width: 9px;
    height: 10px !important;
}




.note-edit-remove-buttons {
    position: absolute;
    left: 750px;
    width: 50px !important;
    z-index: 1;
}

    .note-edit-remove-buttons.spa {
        left: 495px;
    }


.service-popup-content .note-edit-remove-buttons,
.popup-scrollable-inner-container .note-edit-remove-buttons {
    left: 670px;
}

.job-templates .note-edit-remove-buttons {
    left: 550px;
    z-index: 1;
}

.xdsoft_datetimepicker .xdsoft_month > span {
    /*color: #00AFEB !important;*/
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today > div {
    background: #00AFEB !important;
}

.xdsoft_datetimepicker .xdsoft_label {
    color: #000000 !important;
}

.forms-header h2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 24px;
    color: #1C2D37;
    margin-bottom: 32px;
}

.forms-type-name {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #778187;
    margin-bottom: 24px;
}

.forms-type-no-forms {
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #1C2D37;
    margin-bottom: 12px;
}

.forms-item-edit {
    margin-right: 12px;
}

.forms-item-completion {
    margin-right: 64px;
}

.forms-items {
    font-weight: 400;
    font-size: 15px;
    line-height: 16px;
    color: #1C2D37;
    margin-bottom: 12px;
}

.forms-item-edit {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

    .forms-item-edit img {
        width: 16px;
        height: 16px;
    }

#tab_job_forms .forms-add-form-button,
.popup-job-forms .forms-add-form-button {
    background: #63727B;
    width: 240px;
}

.forms-add-button {
    padding: 3px;
    width: 100px;
    margin-right: 16px;
}

.forms-close-button {
    width: 100px;
}

.hours-range-separator {
    color: #D2D5D7;
}

.dhx_matrix_scell.folder .dhx_scell_name {
    font-weight: 500 !important;
}

.event-clickable-inner .icon-Recurring {
    margin-bottom: -2px;
}

#person-pop-name, #person-pop-lastname {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
}

#person-pop-role {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #1C2D37;
}

#person-pop-last-seen-today-container {
    font-size: 12px;
}

#person-pop-total-time-scheduled-today {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
}

.person-pop-total-time-title, #person-pop-last-statuses-list {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #778187;
}

#person-pop-last-statuses-list {
    width: calc(100% + 12px);
}

.person-pop-total-time-title {
    margin-top: 4px;
    padding-bottom: 0.5rem;
}

#person-pop-address, #person-pop-phone, #person-pop-email {
    font-size: 13px;
}

#person-pop-address, #person-pop-phone {
    color: #49575F;
}

.person-pop-status-name {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #1C2D37;
}

.person-pop-job-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #1C2D37;
}

.person-pop-status-update-dt {
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    margin-top: 5px;
    margin-bottom: 12px;
    color: #778187;
}

.show-unscheduled-jobs-label {
    font-weight: 500;
    font-size: 12px;
    text-decoration-line: underline;
    color: #63727B;
}

#show-unscheduled-jobs-chbx {
    margin-right: 10px;
}

    #show-unscheduled-jobs-chbx:before {
        background-image: url(../assests/images/icons/checkbox-empty-dark.svg);
    }

    #show-unscheduled-jobs-chbx:after {
        background-image: url(../assests/images/icons/checkbox-empty-dark.svg);
    }

    #show-unscheduled-jobs-chbx:checked:after {
        background-image: url(../assests/images/icons/checkbox-checked.svg);
    }

.show-unscheduled-jobs-container {
    margin-bottom: 10px;
}

.mapboxgl-map, .dhx_cal_data, .dhx_cal_event_clear, .dhx_cal_event_line {
    font-family: 'DM Sans' !important;
    margin-left: -1px;
}

    .dhx_cal_event_line .job-event {
        padding-top: 2px;
    }

.dhx_cal_event .dhx_body, .dhx_cal_event.dhx_cal_select_menu .dhx_body,
.dhx_cal_event .dhx_title,
.dhx_cal_event_line_end,
.dhx_cal_event_line_start {
    border-radius: 0px;
}

.dhx_scheduler_month .month-item-prefix,
.dhx_scheduler_month .month-item-numj,
.dhx_scheduler_month .month-item-content-header,
.dhx_scheduler_month .icon-Recurring-white,
.dhx_scheduler_month .icon-Revisit-white,
.dhx_scheduler_month .icon-Multi-visit-white,
.dhx_scheduler_month .icon-Jobs-status,
.dhx_scheduler_month .dhx_cal_event_clear b, .event-clickable-inner {
    display: inline-flex;
}

.icon-Jobs-status {
    line-height: inherit;
}

.dhx_scheduler_month .dhx_cal_event_clear,
.dhx_scheduler_month .dhx_cal_event_line {
    display: flex;
    align-items: center;
    height: 21px;
    white-space: nowrap;
}

.dhx_scheduler_month .icon-Jobs-status {
    margin-right: 3px;
    margin-top: 3px;
}

.dhx_scheduler_month .dhx_cal_event_line .icon-Jobs-status {
    margin-top: 1px;
}


.dhx_scheduler_month .icon-Recurring-white {
    margin-top: 2px;
}

.month-item-numj, .month-item-content-header, .month-item-prefix, .dhx_scheduler_month .event-clickable-inner {
    margin-left: 3px;
    margin-right: 3px;
}

.dhx_timeline_table_wrapper .scheduler-item-content-description {
    position: absolute;
    top: 28px;
}

.dhx_multi_day_icon {
    background: url('../assests/images/icons/multi-day-icon.svg') center center no-repeat !important;
    margin-top: -1px;
}

.dhx_multi_day_icon_small {
    background: url(../assests/images/icons/multi-day-icon-small.svg) center 2px no-repeat !important;
}

.dhx_scale_hour,
.dhx_multi_day_icon,
.dhx_multi_day_icon_small {
    width: 51px !important;
}

.dhx_scale_holder:last-child {
    width: 52px !important;
}

.vs__open-indicator path {
    display: none;
}

.vs--unsearchable .vs__dropdown-toggle {
    border-radius: 0;
    border: 1px solid #D2D5D7;
    color: #63727B;
    transform: rotate(0deg);
}

.customize-fields-btn {
    width: 185px;
}

.save-booking-settings-btn {
    width: 80px;
}

.vs__dropdown-menu {
    border-radius: 0 !important;
    border: 1px solid #63727B !important;
}

.vs--single.vs--open .vs__selected {
    opacity: 1 !important;
}

.vs--open .vs__open-indicator {
    transform: rotate(0deg) !important;
}

.onboarding-steps-container {
    margin-bottom: 40px;
}

.portal-link {
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #1C2D37;
    min-width: 480px;
}

.copy-link-portal {
    background-color: #006EAC !important;
}

#portalLogo {
    width: 48px;
    height: 48px;
    left: 540px;
    top: 552px;
    background: #FFFFFF;
    border: 1px solid #D2D5D7;
    border-radius: 8px;
}

.settings-portal-circle {
    height: 24px;
    width: 24px !important;
    margin-left: 12px;
    margin-top: 8px;
    margin-right: 8px;
}

.portalUsersForm {
    margin-left: 12px;
}

.multiselect-list.control {
    width: 100%;
    padding: 5px;
    padding-right: 5px;
    padding-left: 5px;
    padding-right: 10px;
    padding-left: 10px;
    border: 1px solid #d0d0d0;
    cursor: pointer;
    position: relative;
    min-height: 22px;
    overflow-y: auto;
    overflow-x: hidden;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #1C2D37;
}

#scheduler-canvas[data-mode="week"] .event-clickable-first-row,
#scheduler-canvas[data-mode="week"] .event-clickable-first-row .special-icon,
.icon-Jobs-status,
.event-clickable-first-row,
.event-clickable-description-container {
    display: inline-block;
}

.event-clickable-description-container {
    margin-left: 5px;
}

#scheduler-canvas[data-mode="week"] .event-clickable-description-container {
    display: inline;
}

#scheduler-canvas[data-mode="timeline"] .event-clickable-first-row {
    display: flex;
}

    #scheduler-canvas[data-mode="timeline"] .event-clickable-first-row .special-icon {
        display: inline-flex;
        vertical-align: top;
        padding-right: 15px;
        inline-size: fit-content;
    }

.icon-Multi-visit-white.special-icon {
    margin-right: 4px;
}

.event-clickable-inner {
    display: inline-block;
}

#scheduler-canvas[data-mode="week"] .event-clickable-inner-container h3 {
    display: inline;
}

.table-column-long-text {
    width: 95%;
    text-overflow: ellipsis;
}

.icon-asset-status {
    width: 13px;
    height: 13px;
    border-radius: 50%;
}

#BtnNotesFileUpload a {
    color: white !important;
}

.popup-bigger {
    width: 760px !important;
}

.popup-biggest {
    width: 960px !important;
}

.popup-super-big {
    width: 1150px !important;
}

.event-edit-popup {
    font-family: 'DM Sans';
    font-style: normal;
}

    .event-edit-popup .gray-separator {
        margin-left: 24px;
        width: calc(100% - 48px);
        margin-bottom: 16px;
        margin-top: 16px;
    }

.evpop-category {
    padding-left: 24px;
    width: 220px;
}

#evpop-header {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    width: 80%;
}

#evpop-id {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #1C2D37;
    margin-top: 4px;
}

#evpop-company-name {
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    color: #1C2D37;
    margin-top: 16px;
}

#evpop-description {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #49575F;
    margin-top: 4px;
}

#evpop-desc {
    width: 80%;
}

.evpop-header {
    padding-left: 24px;
    padding-left: 24px;
}


.event-edit-popup .icon-Revisit-yellow,
.event-edit-popup .icon-Recurring-yellow {
    position: absolute;
    top: 2px;
}

.event-edit-popup .job-type-name {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #1C2D37;
    margin-left: 23px;
}

.event-edit-popup .job-start-date,
.event-edit-popup .job-end-date,
.event-edit-popup .job-due-date {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #A4ABAF;
}

.event-edit-popup .job-start-date {
    margin-right: 35px;
}

.event-edit-popup .job-end-date {
    margin-right: 42px;
}

.event-edit-popup .job-due-date {
    margin-right: 6px;
}

.event-edit-popup .job-type-container,
.event-edit-popup .evpop-time-been,
.event-edit-popup #evpop-big-desc,
.event-edit-popup .due-date-block {
    margin-left: 24px;
    width: 85%;
}

.event-edit-popup .for-scheduler {
    padding-left: 24px;
}


.event-edit-popup .timeline_section {
    margin-top: 0px;
}

.event-edit-popup .event-edit-popup-closer {
    right: 22px;
    top: 26px;
    position: absolute;
    z-index: 1000;
}

.event-edit-popup .timeline_section {
    margin-left: 24px;
    padding-left: 0;
}

.grey-button {
    padding: 8px 16px;
    background: #63727B;
    color: white;
    margin-right: 4px;
    width: initial;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    display: inline-block;
}

.orange-button {
    padding: 8px 16px;
    background: #F46F22;
    color: white;
    margin-right: 4px;
    width: initial;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    display: inline-block;
}

.view-more-popup-closer {
    margin-right: 22px;
    margin-top: 8px;
}

.on-boarding-step-container {
    margin-left: 13px;
    width: 100%;
    margin-top: 45px;
    float: left;
}

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

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

.industry-selection-title {
    font-weight: 500;
    margin-top: 46px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #1C2D37;
}

.onboarding-dropdown {
    width: 735px !important;
    height: 54.48px !important;
    background: #F6F7F7 !important;
    margin-bottom: 16px;
    border: 0 !important;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500 !important;
    font-size: 15px;
}

.onboarding-flip-down {
    position: absolute;
    margin-top: 19px;
    right: 32px;
}

.onboarding-you-can-switch {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #49575F;
    display: inline-block;
    margin-top: 11px;
    max-width: 422px;
    min-width: 315px;
    width: 87%;
}

.onboarding-modules-parent-container {
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
}

.onboarding-modules-container {
    text-align: center;
    height: 200px;
    overflow-y: auto;
    margin-top: 10px;
    max-width: 488px;
    display: inline-block;
}

.onboarding-select-all-modules {
    font-family: DM Sans;
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    color: #00AFEB;
    margin-top: 21px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-right: 7px;
}

    .onboarding-select-all-modules.small {
        margin-top: 11px;
    }

.onboarding-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 32px;
    text-align: center;
    color: #1C2D37;
    margin-top: 28px;
    margin-bottom: 16px;
    display: inline-block;
}

.onboarding-description {
    width: 100%;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.onboarding-input {
    font-weight: 500;
    background: #F6F7F7 !important;
    font-size: 16px;
    line-height: 19px;
    padding: 8px 16px;
    height: 38px;
}

.onboarding-how-to-enter-data {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #1C2D37;
}

.onboarding-input.full-width {
    width: 690px;
}

.onboarding-input.one-third-width {
    width: 205px;
    display: inline-block;
    margin-top: 16px;
    position: relative;
}

.onboarding-input input,
.onboarding-input select {
    background: transparent !important;
    display: block;
    border: 0;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
}

.onboarding-input select {
    background: transparent !important;
    padding: 0;
    height: 18px;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
}

.onboarding-input label {
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    color: #778187;
}


.onboarding-company-details-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.onboarding-input .icon-Flip-down {
    position: absolute;
    right: 20px;
    top: 30px;
}

.add-new-fieldworker-button {
    padding: 4px 8px;
    gap: 8px;
    position: relative;
    width: 70px;
    height: 24px;
    background: #63727B;
    color: white;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
}

.onboarding-roles-column-title {
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    color: #1C2D37;
}

.onboarding-roles-column-subtitle {
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: #1C2D37;
    margin-bottom: 8px;
}

.icon-manually-enter-your-data-later {
    display: inline-block;
    background: url('../assests/images/icons/manually-enter-your-data-later-icon.svg') center right no-repeat !important;
    width: 64px;
    height: 64px;
    background-color: #778187;
}

.icon-connect-with-xero {
    display: inline-block;
    background: url('../assests/images/icons/connect-with-xero-icon.svg') center right no-repeat !important;
    width: 64px;
    height: 64px;
}

.icon-connect-with-xero-big {
    display: inline-block;
    background: url('../assests/images/icons/connect-with-xero-icon-big.svg') center right no-repeat !important;
    width: 80px;
    height: 80px;
}

.icon-add-dummy-data {
    display: inline-block;
    background: url('../assests/images/icons/add-dummy-data-icon.svg') center right no-repeat !important;
    width: 64px;
    height: 64px;
}

.icon-import-data-with-excel {
    display: inline-block;
    background: url('../assests/images/icons/import-data-with-excel-icon.svg') center right no-repeat !important;
    width: 64px;
    height: 64px;
}

.icon-connect-with-qb {
    display: inline-block;
    background: url('../assests/images/icons/connect-with-qb-icon.svg') center right no-repeat !important;
    width: 64px;
    height: 64px;
}

.icon-connect-with-qb-big {
    display: inline-block;
    background: url('../assests/images/icons/connect-with-qb-icon-big.svg') center right no-repeat !important;
    width: 80px;
    height: 80px;
}

.checkbox-blue-icon {
    display: inline-block;
    background: url('../assests/images/icons/checkbox-blue-icon.svg') center right no-repeat !important;
    width: 16px;
    height: 16px;
}

.checkbox-blue-big-icon {
    background: url('../assests/images/icons/checkbox-blue-big-icon.svg') center right no-repeat !important;
    width: 24px;
    height: 24px;
    position: absolute;
    /* do not set display property here otherwise it can affect visibility of the icon in the onboarding component */
}

.onboarding-steps-container .checkbox-blue-big-icon {
    margin-left: -11px;
    margin-top: -11px;
}

.onboarding-entry-method .icon-connect-with-xero {
    position: absolute;
    left: 54px;
    top: 22px;
}

.onboarding-entry-method .icon-connect-with-qb {
    position: absolute;
    left: 46px;
    top: 23px;
}

.onboarding-entry-method .icon-manually-enter-your-data-later {
    position: absolute;
    left: 50px;
    top: 22px;
}

.onboarding-entry-method .icon-import-data-with-excel {
    position: absolute;
    left: 50px;
    top: 22px;
}

.onboarding-entry-method .icon-import-data-with-excel {
    position: absolute;
    left: 50px;
    top: 22px;
}

.onboarding-entry-method .icon-add-dummy-data {
    position: absolute;
    left: 50px;
    top: 22px;
}

.onboarding-entry-method:last-child {
    margin-top: 12px;
}

.onboarding-entry-method .checkbox-blue-icon {
    display: inline-block;
    top: 8px;
    right: 8px;
    position: absolute;
}

.onboarding-integration-connect-container {
    background: #F6F7F7;
    display: inline-block;
    padding-bottom: 24px;
    width: calc(100% - 4px);
    margin-top: 16px;
    margin-left: -2px;
}

.onboarding-import-your-data-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #1C2D37;
}

.onboarding-what-would-you-like-to-do {
}

.settings-menu-item-title {
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #1C2D37;
}

.raven {
    color: #1C2D37;
}

.settings-menu-item-title {
    width: 134px;
    display: inline-block;
    margin-right: 9px;
}

    .settings-menu-item-title.for-dd {
        margin-right: 13px;
    }

.settings-cp-container {
    text-align: center;
}

    .settings-cp-container .wfswitch {
        margin-left: -15px;
    }

    .settings-cp-container .cp-checkbox-label {
        display: inline-block;
        margin-top: 16px;
        position: absolute;
    }


.button-splitter {
    width: 30px;
    display: inline-block;
}

.time-element input[type="text"].gr-br-field {
    background: transparent;
}

.job-sheets-settings-container .package-checkbox {
    margin-right: 4px;
}

.service-item-popup label {
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    color: #1C2D37;
}

.show-more-link-container .icon-Flip-down,
.show-more-link-container .icon-Flip-up {
    display: inline-block;
    position: absolute;
    margin-left: -19px;
    margin-top: 1px;
}

.show-more-link {
    background: transparent;
}

.main-popup .inner {
    margin-top: 5px;
}

.cost-item-popup .wfswitch {
    margin-left: 6px;
}

.stock-locations-heading {
    padding-left: 5px;
    margin-top: 10px;
}

.adv-popup-customers .customerSelect {
    float: unset;
}

.page-subtitle {
    font-weight: 500;
    font-size: 24px;
    line-height: 24px;
    color: #000000;
    margin-bottom: 12px;
    width: 100%;
}

.page-title {
    font-weight: 500;
    font-size: 26px;
    line-height: 24px;
    color: #1A1E41;
    margin-left: 24px;
    margin-top: 19px;
    line-height: 24px;
    display: inline-block;
}

.page-title-small {
    display: inline-block;
    color: #000;
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    line-height: 24px;
    margin-top: 40px;
    margin-bottom: 24px;
    font-style: normal;
    font-weight: 500;
}

.width-initial {
    width: initial;
}

.search-input-container {
    padding-right: 7px;
    position: absolute;
    right: 5px;
    margin-top: 1px;
}

.orange-link {
    color: #F46F22;
}

.vuejs-new-customer-popover {
    left: -371px;
    top: -1px;
    position: absolute;
    border-color: #d4d4d4;
    width: 468px;
}

.add-new-customer-cancel-btn {
    position: absolute;
    right: 16px;
    top: 12px;
    cursor: pointer;
}

.add-new-customer-text-input {
    width: 250px;
}

/* always hide spinner buttons for numeric inputs. Needed to center text inside of numeric elements */
input[type='number'].hide-spinner::-webkit-inner-spin-button,
input[type='number'].hide-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.company-settings-days-ahead {
    width: 50px;
    float: left;
    margin-top: -20px;
    margin-right: 5px;
    text-align: center;
}

.company-settings-integrations-link,
.company-settings-job-options-link {
    color: #006EAC;
}

.fit-content-height {
    height: fit-content;
}

.fit-content-width {
    width: fit-content;
}

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

.create-labour-cost-item-label {
    width: auto;
}

.available-on-container {
    border-top: 1px solid black;
}

.portal-default-field .we-icon-table-delete {
    display: inline-block;
    top: 3px;
}

.status-selector-container {
    width: 39%;
    margin-top: -3px;
    float: left;
    margin-left: 17px;
}

.reassigning-status-name {
    margin-left: 0px;
    vertical-align: middle;
    line-height: 17px;
}

.auto-assign-job-id-label {
    width: auto !important;
    font-size: 14px;
}

.reports-buttons-container {
    width: 660px;
    margin-top: 40px;
    margin-bottom: 16px;
    float: right;
    display: inline-block;
    text-align: right;
}

.cost-item-modal-container-parent .popup-inner-scrollable-container {
    margin-top: -3px;
    width: 550px;
    height: 438px;
}

.cost-item-modal-container-parent .we-edit-page-label {
    font-weight: normal;
}

.cost-item-modal-container-parent .adv-popup {
    width: 555px;
}

.cost-item-modal-container-parent .radiomark {
    top: -6px;
}

.cost-item-modal-container-parent .form__input,
.cost-item-modal-container-parent .form__label,
.cost-item-modal-container-parent .input.flex {
    position: relative;
    display: inline-block;
}

/* disable spinners for numeric controls */
.cost-item-modal-container-parent input[type='number'] {
    -moz-appearance: textfield;
}

/* disable spinners for numeric controls */
.cost-item-modal-container-parent input::-webkit-outer-spin-button,
.cost-item-modal-container-parent input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.popup-inner-scrollable-container {
    height: 53vh;
    width: 560px;
    overflow-y: auto !important;
    padding-right: 10px;
}

.add-new-cost-vuejs-btn {
    position: absolute;
    left: 985px;
    margin-top: -25px;
}

.remove-cost-vuejs-btn {
    right: -8px;
    top: 22px;
    position: absolute;
}

.w290 {
    width: 290px;
}

.customer-selector {
    width: 290px;
}

.customer-selector-popover-link {
    position: absolute;
    top: 30px;
    left: 305px;
}

.cost-item-section-header .wf-btn {
    margin: 0 !important;
}

.quote-templates-document-pane .add-file {
    position: absolute;
    left: 40px;
    width: 190px;
    top: 241px;
}

.status-container .anchor-link {
    margin-left: 6px;
}

.switch-container {
    height: 8px;
}

.forms-editor-back-button {
    margin-left: 8px !important;
    width: 168px !important;
}

.workhours-table td {
    vertical-align: middle;
}

.vuejs-new-customer-popover .gr-br-field {
    width: 250px !important;
}

.sort-alphabetically {
    margin: 5px 0px 0 26px;
    display: inline-block;
}

.remove-scheduler-prefix-btn {
    padding: 2px 5px !important;
    font-size: 12px !important;
    border-radius: 6px;
    margin-left: 5px;
}

.delete-icon-container {
    vertical-align: middle;
    display: inline-grid;
    padding-left: 4px;
}

.left-menu-buttons-container {
    margin-top: 16px;
    display: inline-block;
    width: 100%;
}

.email-input-spa {
    width: 238px;
}

.w250 {
    width: 250px;
}

.w260 {
    width: 260px;
}

.w130 {
    width: 130px;
}

.email-input-spa {
    width: 248px;
}

.select-site-input {
    margin-left: 124px;
    width: 260px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #212121;
}

.plus-minus-contact-detail-element {
    margin-top: 0.6rem;
    right: 0;
    top: 0;
    position: absolute;
    margin-right: 195px;
}

.vertical-status-priority .item-inner.status-inner {
    width: unset !important;
}

.vertical-status-priority .dd-statuses-container {
    min-width: unset !important;
    float: right;
    margin-right: 50px;
}

    .vertical-status-priority .dd-statuses-container > div {
        width: unset !important;
    }

        .vertical-status-priority .dd-statuses-container > div > div {
            width: 131px !important;
        }

.vertical-status-priority .dropdown-items.statuses {
    width: 150px !important;
}

.vertical-status-priority .dd-priorities-container {
    float: right !important;
    margin-right: 67px !important;
    min-width: 167px;
    margin-top: 10px;
}

    .vertical-status-priority .dd-priorities-container .status-popup.for-scheduler {
        min-width: unset !important;
        width: unset !important;
        float: right !important;
    }


#address_selector .icon-Flip-down {
    pointer-events: none;
    display: inline-block;
    position: absolute;
    margin-left: -19px;
    margin-top: 1px;
}

.vs__search {
    z-index: 0 !important;
}

.form-control-buttons-container .orange-butt,
.form-control-buttons-container .wf-btn {
    display: inline-block;
    margin-top: 0 !important;
}

.wrap-container-flex {
    display: flex;
    flex-wrap: wrap;
}

.scrollable-container-200 {
    max-height: 200px;
    overflow-y: auto;
    display: inline-block;
}

.colorpicker-visible {
    z-index: 10025 !important;
}

#accountcode_select, .selectPreset {
    text-overflow: ellipsis;
    padding-right: 20px !important;
}

.gr-br-field.down-arr {
    padding-right: 22px !important;
    background-position: right -15px top 8px;
}

.settings-menu-item-title.dis-block {
    display: block !important;
}

.customer-dropdown {
    z-index: 10025;
}

.b-bottom-none {
    border-bottom: none;
}

.costs-panel {
    margin-top: 20px;
}

.view-col {
    position: absolute;
    right: 10px;
}

.cost-item-discount-markup-label {
    margin-left: 5px;
    display: inline-block;
    margin-bottom: 12px;
    font-weight: 700;
}

.vue-popover-theme.open {
    z-index: 10025;
}

.info-popover-container {
    position: absolute;
    top: 20px;
    margin-left: 4px;
    display: inline-block;
}

.money-input-label {
    margin-top: -24px;
    margin-right: 20px;
}

.money-input-label-container {
    width: 101px;
}

.money-input-inner-container {
    padding-left: 40px !important;
    width: 150px;
}

.percent-input-container {
    width: 160px
}

.percent-input-inner-container {
    padding-left: 40px !important;
}

.profit-loss-cost-item-summary {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 40px 10px 40px;
    border: 1px solid #d0d0d0;
}

.profit-loss-indicator-currency {
    font-size: 19px;
    text-align: center;
    font-weight: bold;
}

.dhx_timeline_label_row {
    display: table;
    vertical-align: middle;
}

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

    .dhx_matrix_scell.folder, .dhx_timeline_label_row.dhx_row_folder {
        height: 29px !important;
    }

.deleteRecurring .we-icon-table-delete {
    margin-top: 3px;
}

.status-inner .icon-Jobs-status {
    display: block;
    position: relative;
    margin-top: -1px;
}

.iblock-crs .icon-Jobs-status {
    margin-top: -1px;
}

.addresses-customer.job-quote-popup,
.addresses-customer.job-template {
    margin-left: 123px;
}

.addresses-customer.job-quote-popup {
    width: 281px;
}

.addresses-customer.job-template {
    width: 290px;
}

.job-quote-popup.customer-section {
    margin-left: 114px
}

.job-view-files-and-notes {
    position: relative;
}

#service-reminder-details {
    width: 620px;
}

#reminder-copy-name, #reminder-copy-description {
    position: absolute;
    left: -162px;
    top: 26px;
}

.quick-edit-popup .icon-Quotes-status {
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 10px;
}

.quick-edit-popup .buttons-container {
    width: 293px;
}

    .quick-edit-popup .buttons-container a {
        margin-right: 8px !important;
    }

#revisit_popUp .adv-popup.active {
    overflow: auto !important;
}

.upload-popup-wrapper {
    width: 560px;
}

#new_file_attach {
    display: inline-block;
}

.dhx_data_table.folder .dhx_timeline_data_cell {
    width: 100% !important;
}

.form-hover:hover {
    color: #F46F22;
}

.cost_description {
    color: #778187;
}

.xdsoft_mounthpicker .xdsoft_next {
    background: url(../assests/images/calendar/cal_next.svg) center center no-repeat !important;
}



.xdsoft_mounthpicker .xdsoft_prev {
    background: url(../assests/images/calendar/cal_prev.svg) center center no-repeat !important;
}

.xdsoft_timepicker .xdsoft_next {
    background: url(../assests/images/calendar/cal_time_next.svg) center center no-repeat !important;
}



.xdsoft_timepicker .xdsoft_prev {
    background: url(../assests/images/calendar/cal_time_prev.svg) center center no-repeat !important;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
    background: #ff8000;
    box-shadow: unset !important;
    color: #fff;
    font-weight: 700;
}

.control-date,
.control-date-cf,
.control-date-time-cf,
.contract-date-field,
.due-date-control,
#start-date,
#recurring-from,
#service-reminder-date,
#blank-from,
#blank-until,
#nvc-due-datte,
#nvc-datte {
    background: url(../assests/images/icons/calendar-icon.svg) right center no-repeat !important;
    background-position-x: calc(100% - 8px) !important;
}

.control-time, .due-time-control {
    background: url(../assests/images/icons/time-icon.svg) right center no-repeat !important;
    background-position-x: calc(100% - 8px) !important;
}


#tab_site_contracts .job-list-wrap {
    margin-left: 0 !important;
}

.dont-have-account-yet {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #1C2D37;
    margin-top: 17px;
}

.stay-signed-in-container {
    margin-top: 19px;
    float: left;
    width: 100%;
}

.accordion-out.active .then-half {
    margin-bottom: 10px !important;
}


.add-job-line > div.job-icon {
    background-image: none;
}


.add-job-line:hover {
    color: #F46F22;
}

    .add-job-line:hover svg {
        fill: #F46F22;
    }

.add-event-line > div.event-icon {
    background-image: none;
}


.add-event-line:hover {
    color: #F46F22;
}

    .add-event-line:hover svg {
        fill: #F46F22;
    }


#menu-bar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f5f5f5;
}

#menu-bar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
}

#menu-bar::-webkit-scrollbar-thumb {
    background-color: #1c2d378f;
}

.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;
}

.top-right-header-context-menu li:hover a span {
    color: #F46F22;
}

.input-validation-error {
    /* the styles were moved not so long ago. We don't use jquery validation, so disable it to avoid unnecessary red borders around inputs */
    /*border-color: red !important;*/
}

.validation-summary-errors {
    /* the styles were moved not so long ago. We don't use jquery validation, so disable it to avoid unnecessary red borders around inputs*/
    /*color: red;*/
}

.add-job-event-buttons-container > div:hover {
    color: #F46F22;
}

.scheduler-top-filter-bar .filter-button {
    background-image: none !important;
}

.status-popup .anchor {
    background-image: none !important;
}

.status-container-padding-top {
    padding-top: 8px !important;
}

.status-container-padding-bottom {
    padding-bottom: 8px !important;
}

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

.switch-to-new-ui-link-block {
    margin: 50px 0 0 24px;
    width: 100%;
    display: inline-block;
}

.lg-outer * {
    background: black;
}



pre {
    /*word-break: break-all;*/ /* webkit */
    word-wrap: break-word;
    white-space: pre;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    white-space: pre\9;
    word-break: keep-all;
    font-family: "DM Sans", sans-serif !important;
}


.top-message {
    background-color: white;
}


#scheduler-canvas.dhx_cal_container.dhx_scheduler_timeline > .dhx_cal_navline > div.cal-container {
    min-width: 270px;
}

#scheduler-canvas.dhx_cal_container.dhx_scheduler_week > .dhx_cal_navline > div.cal-container {
    width: 450px;
}

#scheduler-canvas.dhx_cal_container.dhx_scheduler_workweek > .dhx_cal_navline > div.cal-container {
    width: 500px;
}

#scheduler-canvas.dhx_cal_container.dhx_scheduler_month > .dhx_cal_navline > div.cal-container {
    width: 200px;
}

.costItemSelect {
    font-size: 14px;
}

.w800 {
    width: 800px;
}

.icon-Add:before {
    vertical-align: middle;
}

.email-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16ch;
}

.timelog-job-block {
    width: 100%;
}

.timelog-job-block-date {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    display: inline-block;
}

.timelog-job-block-internals {
    background-color: #F6F7F7;
    padding: 16px;
    position: relative;
}

.logged-hours-block, .logged-cost-block {
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    padding: 4px 6px;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    padding: 4px 6px;
    gap: 8px;
    width: 94px;
    color: white;
    text-align: center;
    display: inline-block;
    float: right;
    margin-right: 29px;
    cursor: pointer;
}

.logged-hours-block {
    background-color: #0BC683;
}

.logged-cost-block {
    background-color: rgba(255, 174, 52, 0.9);
}

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

.job-timelog-record-avatar {
    background-size: 100%;
    width: 24px;
    height: 18px;
    margin-right: 4px;
    position: relative;
    padding-left: 1px;
    padding-top: 6px;
}

.job-timelog-description {
    font-weight: 400;
    font-size: 14px;
    line-height: 12px;
    color: #63727B;
    margin-left: 28px;
    white-space: pre-line;
}

.job-timelog-from-until {
    font-weight: 400;
    font-size: 14px;
    line-height: 3px;
    margin-left: 28px;
    white-space: pre-line;
}

.timelog-job-block .we-icon-table-edit {
    display: inline-block;
    float: right;
    margin-right: 4px;
    margin-top: 4px;
    cursor: pointer;
}

.timelog-job-block .summary-costs,
.timelog-job-block .summary-hours {
    float: right;
    display: inline-block;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    margin-top: 3px;
}

.timelog-job-block .summary-costs {
    color: #FFAE34;
    margin-left: 16px;
}

.timelog-job-block .summary-hours {
    color: #0BC683;
    padding-right: 16px;
    border-right: 2px solid #D2D5D7;
}

.timelog-expense-document {
    float: right;
    display: inline-block;
    margin-right: 17px;
    margin-top: 4px;
}

.special-span > span {
    margin-bottom: 8px;
}

.job-timesheets-container {
    display: block;
    margin-top: 60px;
}

.job-timelogs-calendar-row-container {
    display: block;
}

textarea.no-max-size {
    max-height: unset !important;
}

.basic-jobs-invoiced-col {
    width: 8.5%;
    float: left;
}

.emailActivity-results > .no-items-panel {
    width: 800px !important;
}

.full-screen-white {
    margin-left: -50% !important;
    width: 101% !important;
    height: 100vh;
    top: 0px !important;
    left: 50%;
    width: 560px;
    position: absolute;
    background-color: #fff;
    z-index: 10025;
    overflow-y: auto;
    overflow-x: hidden;
}

    .full-screen-white .on-boarding-step-container {
        margin-left: 0px;
    }

    .full-screen-white .onboarding-modules-container {
        width: 90%;
        margin-left: 5%;
    }

    .full-screen-white .onboarding-buttons-container {
        top: 500px;
    }

    .full-screen-white .onboarding-select-all-modules {
        margin-right: 30px;
    }

    .full-screen-white .onboarding-validation-box.features {
        right: 35px;
    }

.onboarding-buttons-container {
    position: absolute;
    bottom: 0px;
    height: 80px;
    width: 100%;
}

.onboarding-back-button {
    float: right;
    margin-right: 111px;
    margin-top: 7px;
    position: relative;
    padding: 9px 16px 9px 40px !important;
}

.onboarding-validation-box {
    padding: 18px 20px 18px 20px;
    background: #42414D;
    color: white;
    position: absolute;
    width: max-content;
    display: inline-block;
    right: 0;
    top: 14px;
    border-radius: 8px;
    z-index: 1;
    font-weight: 600;
}

    .onboarding-validation-box.features {
        top: 168px;
        right: 15px;
    }

.onboarding-validation-invalid-input {
    background: rgba(228, 64, 42, 0.08) !important;
    border: 1px solid #E4402A !important;
}

.timelog-template-row {
    background: #F6F7F7;
    padding: 16px 16px 0px 16px;
    width: 96%;
}

.timelog-expense-row {
    display: inline-block;
    width: 96%;
    padding: 16px;
    padding-bottom: 16px;
    position: relative;
    margin-top: 16px;
}

.timelog-template-row:last-child {
    padding-bottom: 16px;
}

.job-timelog-templates-container {
    display: revert;
    margin-top: 24px;
}

    .job-timelog-templates-container .scheduled-block {
        color: #1C2D37;
        display: inline-block;
        float: right;
    }


    .job-timelog-templates-container .tracked-block {
        color: #1C2D37;
        display: inline-block;
        float: right;
    }

    .job-timelog-templates-container .summary-tracked,
    .job-timelog-templates-container .summary-scheduled {
        background-color: #63727B;
        color: white;
        /* height: 24px; */
        width: 94px;
        border-radius: 0px;
        padding: 4px 6px 4px 6px;
        float: right;
        font-family: DM Sans;
        font-size: 13px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0em;
        text-align: center;
        cursor: pointer;
    }

    .job-timelog-templates-container .summary-tracked {
        margin-right: 29px;
        margin-left: 15px;
    }

    .job-timelog-templates-container .summary-scheduled {
        margin-right: 75px;
        margin-left: 15px;
    }

.timelog-job-block .we-icon-table-edit {
}

.job-timelogs-calendar-row-container .calendar-toggler {
    padding-left: 0;
    padding-right: 0;
    margin-left: -1px;
    margin-right: 5px;
}

    .job-timelogs-calendar-row-container .calendar-toggler:hover {
        background-color: transparent;
    }

.job-log-template-staff-name {
    margin-top: 3px;
}

.job-log-row-staff-name {
    top: 18px;
    position: absolute;
}

.tracked-block .tracked-label,
.scheduled-block .scheduled-label {
    margin-top: 3px;
}

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

.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: 118px;
    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-flex;
    align-items: center;
    justify-content: center;
}

.logo-preview-no-logo-container {
    display: inline-block;
    margin-top: 14px;
}

.logo-preview-container {
    margin-top: 8px;
}

.logo-preview img {
    max-width: 119px;
    max-height: 84px;
    width: auto;
    height: auto;
}

.footer-pdf-logos-container .list-group {
    margin-top: 18px;
}

.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 .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 {
    text-align: center;
    vertical-align: top;
    display: inline-block;
}

.branding-pdf-template-options-container {
    width: 49%;
    display: inline-block;
    padding-right: 66px;
}

.branding-pdf-preview {
    width: 175px;
    height: 247px;
    background-color: #63727B;
    border-radius: 5px;
    padding: 38px 31px 38.108px 30px;
    margin-top: 30px;
}

.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;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
    }

.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;
}

.center-document-pager {
    width: 1190px;
}

@media (max-width: 1330px) {
    .center-document-pager {
        width: 96%;
    }
}

@media (max-width: 767px) {
    .activate-subscription-button {
        display: inline-block !important;
        float: none !important;
        margin-right: 0 !important;
        margin-top: 5px;
        margin-left: 5px;
    }
}

@media screen and (max-width:767px) {
    .no-items-skeleton {
        display: none;
    }

    .job-list-wrap, .no-items-panel-container, .vue-app-container {
        margin-top: 0px;
        margin-left: 0px;
    }
}

.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;
}

.branding-page-subsection-title {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.branding-pdf-template-options-title {
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 106.667% */
}

.branding-page-dropdown-container {
    margin-top: 5px;
    width: 100%;
    max-width: 290px;
}

.brangin-logo-input {
    margin-top: 8px;
}

.branding-page-dropdown-container.short {
    width: 132px;
}


.branding-preview-link {
    color: #002C60;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-decoration-line: underline;
}

.branding-add-logo-button {
    padding: 4px 8px 4px 8px !important;
    font-size: 13px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-top: 2px;
}

.template-content-title {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.checkbox-right {
    margin-left: 6px;
}

.checkbox-left {
    margin-right: 6px;
}

.branding-save-btn {
    padding: 12px 16px;
}

.bottom-part-left-right-checkbox-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.invoice-last-number-input {
    width: 290px;
    display: block;
}

.we-menu-collapsed .timesheets-menu-item-container {
    display: block !important;
}

.link {
    color: blue;
    text-decoration: underline;
}

.cost-items-pdf-visibility-settings-container {
    max-width: 70%;
    padding-top: 10px;
    position: absolute;
}

    .cost-items-pdf-visibility-settings-container label {
        font-size: 14px;
        margin-right: 15px;
    }

    .cost-items-pdf-visibility-settings-container .title {
        margin-bottom: 20px;
        font-size: 16px;
    }

.player .vp-video-wrapper .vp-preview {
    border-radius: 20px !important;
}

.dashboard-permissions-description {
    color: #778187;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
}

.available-widgets-title {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.allow-office-admins-view-dashboard {
    color: #000;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    max-width: 305px;
}

.dashboard-permissions-widget-name {
    color: #1C2D37;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.dashboard-permissions-item-text {
    display: inline-block;
    vertical-align: middle;
}

.dashboard-permissions-chbx-group-container input[type=checkbox]:before {
    top: 0px;
}

.dashboard-permissions-chbx-group-container input[type=checkbox]:after {
    top: -20px;
}

.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%;
    }

.top-fieldworkers.empty-state,
.top-fieldworkers.no-data {
    padding-left: 23px;
}

.widget-title.no-data {
    opacity: 0.25;
}

.dashboard-widget {
    overflow: hidden;
    padding: 23px;
    height: -webkit-fill-available;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
    flex: 1;
    max-width: 100%;
    max-height: 100%;
    overflow: visible;
}

    .dashboard-widget.no-shadow {
        box-shadow: none;
        border: none;
    }

    .dashboard-widget.no-border {
        box-shadow: none;
        border: none;
    }

    .dashboard-widget.no-paddings {
        padding: 23px 0 0 0;
    }

    .dashboard-widget .widget-title {
        color: var(--Gray-900, #101828);
        font-family: "DM Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        width: auto !important;
        white-space: nowrap;
        max-width: 295px;
    }

    .dashboard-widget .total-count {
        font-size: 40px;
        font-weight: bold;
        margin-top: 24px;
        position: relative;
        z-index: 10000;
        line-height: 44px;
    }

    .dashboard-widget .percent-vs-last-period {
        font-size: 14px;
        color: #667085;
        margin-top: 16px;
        line-height: 20px;
    }

        .dashboard-widget .percent-vs-last-period img {
            height: 15px;
            padding-bottom: 2px;
            vertical-align: middle;
        }

    .dashboard-widget .percent-negative {
        color: #B42318 !important;
    }

    .dashboard-widget .percent-neutral {
        color: #3655A4 !important;
    }

    .dashboard-widget .percent-positive {
        color: #027A48 !important;
    }

    .dashboard-widget .arrow-icon {
        vertical-align: text-top;
        margin-right: 4px;
    }

.dashboard-top-panel {
    width: 100%;
    max-width: 1066px;
    margin: 24px 24px 6px 24px;
}

    .dashboard-top-panel .welcome-block {
        height: 40px;
    }

    .dashboard-top-panel .welcome-name {
        font-size: 30px;
        font-weight: 500;
        height: 40px;
        display: inline-block;
    }

    .dashboard-top-panel .widgets-selection-menu {
        width: 275px;
        height: auto;
        padding: 16px;
        border: 1px solid #f1f1f1;
        float: right;
        border-radius: 8px;
        position: absolute;
        right: 0px;
        z-index: 1;
        background: white;
        top: 5px;
    }

.widgets-selection-menu label {
    display: block;
    margin-top: 8px;
    white-space: nowrap;
}

    .widgets-selection-menu label:first-child {
        margin-top: 0px;
    }

.widgets-settings-icon {
    float: right;
    padding: 3px;
    color: #63727b;
    border-radius: 8px;
    font-size: 28px;
    height: 32px;
    width: 32px;
    cursor: pointer;
    border: 1px solid #d0d5dd;
    text-align: center;
}

.dashboard-widget .percent-chart {
    width: 125px;
    position: absolute;
    right: 23px;
    top: 85px;
}

.dashboard-widget .status-name {
    margin-left: 10px;
    vertical-align: middle;
}

.dashboard-widget .money-value {
    float: right;
    vertical-align: middle;
    margin-top: 6px;
}

.dashboard-widget .status-sum-row {
    border-bottom: 1px solid #dddddd;
    padding-top: 3px;
    padding-bottom: 3px;
}

    .dashboard-widget .status-sum-row:first-child {
        border-top: 1px solid #dddddd;
    }

    .dashboard-widget .status-sum-row .number-of-items-with-status {
        font-size: 25px;
        vertical-align: middle;
        font-weight: 600;
    }

.dashboard-toggle-label {
    color: #000;
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.dashboard-widget .status-counter-container {
    margin-top: 22px;
    vertical-align: middle;
    overflow-y: auto;
    max-height: 178px;
}

.dashboard-widget .top-5-container {
    margin-top: 22px;
    vertical-align: middle;
    overflow-y: auto;
    max-height: 201px;
    overflow-x: hidden;
}


.dashboard-widget .total-count.invoice-revenue {
    float: none;
    margin-top: 24px;
    display: block;
}

.dashboard-widget .linear-graph-colored-line {
    background-color: rgb(224, 242, 254);
    display: inline-block;
    width: 150px;
    position: absolute;
    height: 30px;
    right: 23px;
}

.status-counter-container .money-value {
    margin-right: 8px;
}

.fieldworkers-table {
    margin-top: 20px;
}

    .fieldworkers-table header {
        font-size: 12px;
        font-style: normal;
        font-weight: 500 !important;
        line-height: 20px;
    }

    .fieldworkers-table header, .row {
        border-bottom: 1px solid #F1F5F9;
    }

    .fieldworkers-table .row {
        margin-left: 8px;
    }

    .fieldworkers-table header {
        color: #94a3b8;
        cursor: pointer;
        font-size: 12px;
        padding: 8px 12px;
    }

    .fieldworkers-table .col {
        display: inline-block;
        vertical-align: middle;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .fieldworkers-table header .col {
        padding: 0;
    }

    .fieldworkers-table .row.jobs {
        width: 95px;
        text-align: center;
    }

    .fieldworkers-table .col.jobs {
        width: 95px;
        text-align: center;
    }

    .fieldworkers-table .col.revenue {
        width: 145px;
        text-align: center;
    }

    .fieldworkers-table .col.revenue-invoiced {
        width: 105px;
        text-align: center;
    }

    .fieldworkers-table .col.active {
        color: #101828;
    }

    .fieldworkers-table .money-value {
        float: none;
    }

    .fieldworkers-table .roundedImage {
        width: 34px;
        vertical-align: middle;
        margin-right: 10px;
    }

    .fieldworkers-table .fieldworker-name {
        width: 275px;
    }

        .fieldworkers-table .fieldworker-name.sm {
            white-space: nowrap;
            max-width: 75px !important;
            text-overflow: ellipsis;
            min-width: 0;
            overflow: hidden;
        }

    .fieldworkers-table .revenue.sm {
        width: 128px;
        vertical-align: bottom;
    }

    .fieldworkers-table .revenue-invoiced.sm {
        width: 138px;
        vertical-align: bottom;
    }

    .fieldworkers-table .jobs.sm {
        width: 55px;
    }

    .fieldworkers-table header {
        background-color: #f8fafc;
    }

        .fieldworkers-table header.empty-state,
        .fieldworkers-table header.no-data {
            background-color: #f8fafc;
            width: 631px;
            margin-left: 23px;
        }

    .fieldworkers-table .jobs-number {
        color: #475569;
        width: 55px;
    }

    .fieldworkers-table .job-revenue-dropdown {
        display: inline-block;
        position: relative;
        top: 4px;
        left: 4px;
    }

.linear-graph-row {
    margin-bottom: 4px;
}

    .linear-graph-row .counter-val {
        float: right;
        font-size: 17px;
        font-weight: 500;
        margin-top: 4px;
        position: absolute;
        right: 8px;
    }

    .linear-graph-row .name-block {
        display: inline-block;
        position: relative;
        text-overflow: ellipsis;
        max-width: 155px;
        white-space: nowrap;
        overflow: hidden;
        height: 25px;
        padding-top: 5px;
    }

        .linear-graph-row .name-block span {
            width: 93%;
            text-decoration: none;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

.no-dates-or-assignments-label {
    color: #667085;
    margin-top: 16px;
}

.total-sum-container {
    margin-top: 23px;
    overflow-wrap: anywhere;
    width: fit-content;
}

    .total-sum-container .money-value {
        margin: 0;
        float: none;
        vertical-align: baseline;
    }

    .total-sum-container .number-of {
        color: #667085;
    }

.number-of {
    white-space: nowrap;
}

.dashboard-container {
    width: 1101px;
    margin-left: 6px;
    margin-top: 6px;
}

    .dashboard-container.sm {
        margin-top: 101px;
    }

    .dashboard-container .vue-grid-item.vue-grid-placeholder {
        background: green;
    }

.weather-cur-location.sm, .weather-cur-location.md {
    display: none;
}

.weather-cur-location-data-block {
    vertical-align: super;
    display: inline-block;
    cursor: pointer;
    margin-top: 3px;
    font-size: 12px;
}

    .weather-cur-location-data-block.sm {
        margin-top: 6px;
    }

.vue-grid-item {
    background-color: white;
    border-radius: 9px;
    display: flex;
}

.welcome-name.sm {
    display: block;
}

.widgets-settings-icon.sm, .widgets-settings-icon.md {
    display: none;
}

.dashboard-container.md {
    margin-top: 31px;
}

.dashboard-period-buttons {
    float: right;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    display: table;
    margin-right: 14px;
    display: inline-block;
    float: right;
}

    .dashboard-period-buttons.sm {
        margin-top: 14px;
    }

    .dashboard-period-buttons.sm, .dashboard-period-buttons.md {
        display: block;
        float: left;
    }

    .dashboard-period-buttons span {
        display: table-cell;
        padding: 9px 15px;
        vertical-align: middle;
        cursor: pointer;
    }

        .dashboard-period-buttons span.left {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        .dashboard-period-buttons span.right {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .dashboard-period-buttons span.active {
            background-color: #f6f8fb;
            font-weight: 500;
        }

    .dashboard-period-buttons .border-right {
        border-right: 1px solid #d0d5dd;
    }


.track-manage-forecast {
    color: #667085;
    position: absolute;
    top: 69px;
}

    .track-manage-forecast.sm {
        position: relative;
        width: 95%;
        top: 0;
        margin-top: 4px;
    }

.widgets-selection-menu input[type="checkbox"] {
    height: 18px;
}

.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;
}

.filter-settings-warning-popup {
    padding: 32px 16px 16px;
    background-color: #fff;
    position: absolute;
    z-index: 30;
    display: block;
    position: absolute;
    top: 51px;
    left: auto;
    right: 0px;
    width: 220px;
    /* max-height: 245px; */
    flex-shrink: 0;
    fill: var(--White, #FFF);
    stroke-width: 1px;
    stroke: #778187;
    filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.10));
    border-radius: 10px;
}

    .filter-settings-warning-popup::before {
        content: ' ';
        border: 8px solid transparent;
        border-bottom: 8px solid #fff;
        position: absolute;
        top: -15px;
        z-index: 0;
        right: 22px;
    }

.filter-settings-warning-popup-text-container {
    color: var(--Atomic, #49575F);
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
}

.go-to-company-settings-link {
    color: #006EAC;
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.go-to-company-settings-block {
    height: 58px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #F6F8FB;
    color: #212121;
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    padding: 8px;
    margin-top: 16px;
    vertical-align: middle;
    display: table-cell;
}

.filter-settings-info-icon {
    position: absolute;
    right: 20px;
    cursor: pointer;
}

.revenue-column-selection-popup {
    position: absolute;
    right: 0px;
    top: 40px;
    background: white;
    height: fit-content;
    padding: 10px;
    border: 1px solid #ebebeb;
}

    .revenue-column-selection-popup div {
        text-align: center;
        font-weight: 500;
        color: #49575F;
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 10px;
    }

        .revenue-column-selection-popup div:last-child {
            padding-top: 10px;
            border-bottom: 0;
            padding-bottom: 0;
        }


.top-fieldworkers-no-fieldworkers-image {
    height: 263px;
    margin-top: -2px;
    margin-left: -1px;
}



.top-fieldworkers-no-fieldworkers-round-background {
    position: absolute;
    z-index: -1;
    top: 0px;
    margin-left: 0px;
}

.top-fieldworkers-no-fieldworkers-star1 {
    position: absolute;
    right: 145px;
    top: 9px;
}

.top-fieldworkers-no-fieldworkers-star2 {
    position: absolute;
    right: 29px;
    top: 9px;
}

.top-fieldworkers-no-fieldworkers-star3 {
    position: absolute;
    right: 14px;
    top: 141px;
}

.top-fieldworkers-no-fieldworkers-star-small-widget-1 {
    position: absolute;
    right: 125px;
    top: 25px;
}

.top-fieldworkers-no-fieldworkers-star-small-widget-2 {
    position: absolute;
    right: 9px;
    top: 25px;
    z-index: -1;
}

.top-fieldworkers-who-is-your-best-worker {
    position: absolute;
    right: 15px;
    top: 82px;
    color: #000;
    text-align: center;
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    width: 203px;
    height: 75px;
}

    .top-fieldworkers-who-is-your-best-worker.small {
        top: 21px;
        left: 50px;
        width: 250px;
    }


.who-is-your-best-worker-container {
    height: 166px;
    position: relative;
    background-color: white;
    margin-top: -148px;
    z-index: 10000;
}

.empty-state-widget-text {
    color: #535353;
    text-align: center;
    font-family: "DM Sans", sans-serif !important;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: inline-block;
}

    .empty-state-widget-text.smaller {
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 142.857% */
    }

    .empty-state-widget-text.quotes {
        margin-top: 26px;
    }

    .empty-state-widget-text.jobs {
        margin-top: 10px;
    }

    .empty-state-widget-text.invoices {
        margin-top: 10px;
        width: 268px;
    }

    .empty-state-widget-text.non-invoiced-jobs,
    .empty-state-widget-text.invoiced-jobs {
        display: inline-block;
        width: 185px;
        position: relative;
    }

    .empty-state-widget-text.non-invoiced-jobs {
        top: -1px;
        left: 9px;
    }

    .empty-state-widget-text.invoiced-jobs {
        top: -30px;
        left: 11px;
    }

    .empty-state-widget-text.first-time-fix-rate {
        width: 200px;
        top: -30px;
        left: 3px;
        position: relative;
    }

    .empty-state-widget-text.total-non-scheduled-jobs {
        width: 200px;
        position: relative;
        top: -20px;
        left: -2px;
    }

    .empty-state-widget-text.total-outstanding-invoice-amount {
        width: 200px;
        position: relative;
        top: -21px;
    }

    .empty-state-widget-text.top-5-customers-by-jobs {
        position: relative;
        top: -16px;
        width: 100%;
        margin-top: 30px;
    }

    .empty-state-widget-text.top-5-customers-by-revenue {
        position: relative;
        top: 11px;
        left: 7px;
        width: 268px;
    }

    .empty-state-widget-text.largest-overdue-accounts {
        position: relative;
        top: 5px;
        width: 242px;
    }

    .empty-state-widget-text.top-5-customers-by-jobs div,
    .empty-state-widget-text.top-5-customers-by-revenue div
    .empty-state-widget-text. largest-overdue-accounts div {
        width: 268px;
    }

.empty-state-widget-container {
    text-align: center;
}

.empty-state-button {
    border-radius: 4px;
    background: #F16522;
    display: inline-flex;
    padding: 8px 19px;
    justify-content: center;
    align-items: center;
    color: var(--App-White, #FFF);
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    font-family: 'proxima-nova', helvetica !important;
}

    .empty-state-button.add-quote-empty-state-button,
    .empty-state-button.add-job-empty-state-button {
        margin-top: 14px;
    }

    .empty-state-button.top-fieldworkers-go-to-staff-button {
        position: absolute;
        right: 54px;
        top: 165px;
    }

        .empty-state-button.top-fieldworkers-go-to-staff-button.small {
            right: 113px;
            top: 118px;
        }

.ellipse-bg {
    position: absolute;
    z-index: -1;
    border-radius: 10px;
}

    .ellipse-bg.top-5-customers-by-jobs {
        margin-left: -319px;
        top: 1px;
    }

    .ellipse-bg.largest-overdue-accounts {
        margin-left: -292px;
        top: 1px;
    }

    .ellipse-bg.top-customers-by-revenue {
        margin-left: -305px;
        top: -1px;
    }

    .ellipse-bg.invoiced-jobs {
        margin-left: -308px;
        top: 0px;
    }

    .ellipse-bg.first-time-fix-rate {
        margin-left: -317px;
        top: 0px;
    }

    .ellipse-bg.total-non-scheduled-jobs {
        margin-left: -318px;
        top: 0px;
    }

    .ellipse-bg.total-outstanding-invoice-amount {
        margin-left: -314px;
        top: 1px;
    }

    .ellipse-bg.top-fieldworkers-no-fieldworkers.small {
        margin-top: -48px;
        position: absolute;
        z-index: -1;
        border-radius: 8px;
        right: -1px;
    }

.widget-close {
    position: absolute;
    right: 14px;
    top: 11px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.vue-grid-item.vue-grid-placeholder {
    background: #F6F8FB !important;
    opacity: 1 !important;
}

.no-data-info-block {
    position: relative;
    display: inline-block;
}

    .no-data-info-block.total-widget {
        margin-top: 74px;
    }

    .no-data-info-block.top-data-widget {
        margin-top: 22px;
    }

    .no-data-info-block.completed-jobs,
    .no-data-info-block.first-time-fix-rate,
    .total-outstanding-invoice-amount,
    .total-non-scheduled-jobs {
        margin-top: 0px;
    }


    .no-data-info-block.top-fieldworkers.sm {
        margin-top: 74px;
    }

    .no-data-info-block.top-fieldworkers {
          margin-top: 17px
    }

.weather-block {
    display: inline-block;
    height: 42px;
}

@media (max-width: 830px) {
    .weather-block {
        display: none;
    }
}

.weather-icon-cur-weather {
    height: 32px;
    width: 32px;
    margin-right: 8px;
    margin-top: 6px;
}

    .weather-icon-cur-weather.sm,
    .weather-icon-cur-weather.md {
        margin-top: 0;
        height: 21px;
        width: 21px;
    }

.today-cur-temp {
    color: #000;
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
}

.today-min-max-temp {
    color: #B7B7B7;
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
    display: inline-block;
    margin-left: 5px;
}

.weather-cur-location {
    color: #000;
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    font-size: 12px;
}

.weather-details-popup .weather-cur-location {
    color: #000;
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.weather-details-popup .today-min-max-temp {
    line-height: 20px;
    font-size: 16px;
    margin-top: 10px;
}

.weather-cur-location-settings {
    float: left;
    display: inline-block;
    margin-right: 16px;
    margin-top: -3px;
    margin-bottom: 14px;
    color: #000;
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.weather-details-popup {
    max-width: 286px;
    width: 90vw;
    height: 300px;
    position: absolute;
    top: 46px;
    background: white;
    border-radius: 10px;
    border: 1px solid #778187;
    padding: 23px;
    z-index: 1;
    margin-left: -62px;
}

    .weather-details-popup.sm,
    .weather-details-popup.md {
        margin-left: 0px;
        margin-top: -6px;
    }

.weather-settings-popup {
    width: 400px;
    height: 420px;
    position: absolute;
    left: 0px;
    top: 48px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e1e1e1;
    padding: 20px;
}

.weather-details-popup .weather-icon-cur-weather {
    margin-right: 0px;
    width: 40px;
    height: 40px;
    vertical-align: top;
}
.weather-details-popup .weather-details-container {
    width: 250px;
    height: 59px;
    display: inline-block;
    margin-top: 13px;
}

.weather-details-popup .weather-conditions-container {
    width: 100%;
    height: 68px;
    display: inline-block;
    margin-top: 13px;
    color: #000;
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.weather-conditions-container .column{
    display: inline-block;
    width: 50%;
}

    .weather-conditions-container .column .column-content-left,
    .weather-conditions-container .column .column-content-right {
        display: inline-block;
        width: 100%;
    }
    .weather-conditions-container .column .column-content-left {
        text-align: left;
    }
    .weather-conditions-container .column .column-content-right {
        text-align: right;
    }

.weather-details-container .weather-icon {
    margin-top: 4px;
    margin-left: 1px;
    display: inline-block;
    vertical-align: top;
}

.weather-details-container .today-cur-temp {
    display: inline-block;
    width: 50%;
    font-size: 24px;
    margin-bottom: -4px;
}

.weather-details-container .weather-icon-cur-weather {
    height: 32px;
    width: 32px;
    margin-right: 13px;
    margin-top: 4px;
}
.weather-details-container .temperature-details {
    display: inline-block;
    width: 100px;
    text-align: left;
    color: #000;
    font-family: "DM Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 0px;
    text-align: center;
    margin-top: 8px;
}

.forecast-days-container{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
}

.forecast-day {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    width: 33.3%;
}

.weather-details-popup .edit-weather-settings {
    margin-top: 15px;
    float: right;
}

.weather-details-popup .close-weather-settings {
    margin-top: 10px;
    float: right;
}

.cur-temp-container {
    line-height: 12px;
    font-size: 12px;
}

    .cur-temp-container.md {
        margin-top: 14px;
    }

.weather-widget-period-buttons-container {
    float: right;
    display: inline-block;
}

    .weather-widget-period-buttons-container.sm, .weather-widget-period-buttons-container.md {
        float: left;
        display: block;
        width: 100%;
    }

.weather-settings-title {
    font-size: 18px;
    font-weight: 500;
}

    .weather-settings-title.preferences {
        margin-top: 4px;
        margin-bottom: 10px;
    }

.temp-settings-line {
    margin-top: 8px;
    color: #000;
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.weather-widget-preferences-dropdown {
    text-align: center;
    padding-left: 7px;
    padding-right: 7px;
    height: 19px;
}

.weather-widget {
    display: inline-block;
    float: left;
    margin-right: 40px;
    position: relative;
}

    .weather-widget.md {
        display: block;
        margin-right: 30px;
        float: left;
        width: 100%;
    }

    .weather-widget.sm {
        margin-top: 3px;
        width: 100%;
    }

.weather-precipitation,
.weather-wind-speed {
    margin-top: 9px;
}

.forecast-temp {
    color: #000;
    text-align: center;
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 3px;
}

.weather-location-reset-link {
    margin-top: -3px;
}

.weather-widget .wf-link {
    color: #006EAC;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.weather-widget-period-buttons-container .dashboard-period-buttons.md{
    display: none;
}

.dashboard-period-buttons.for-tablets-only {
    display: none;
}

    .dashboard-period-buttons.for-tablets-only.md {
        display: block;
        position: absolute;
        left: 448px;
    }

.welcome-name.md{
    float: left;
}

.dashboard-unscheduled-jobs-checkbox {
    border-top: 1px solid #E9EAEB;
    padding-top: 8px;
    margin-top: 8px !important;
    width: 100%;
}

.widget-info-icon {
    position: absolute;
    right: 0px;
    cursor: pointer;
    top: 2px;
}

.widget-info-popup {
    position: absolute;
    right: -16px;
    top: 28px;
    background: #FFFFFF;
    border-radius: 8px;
    z-index: 100000;
    color: var(--Atomic, #49575F);
    -webkit-text-stroke-width: 1;
    -webkit-text-stroke-color: #F2F4F7;
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    cursor: default;
    width: 220px;
    padding: 16px 16px 18px 16px;
    fill: var(--White, #FFF);
    stroke-width: 1px;
    stroke: #F2F4F7;
    filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.10));
}

    .widget-info-popup .hint {
        background: #F6F8FB;
        border-radius: 4px;
        width: auto;
        height: 38px;
        margin-bottom: 0px;
        margin-top: 16px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: var(--New-System-Text-Black, #212121);
        -webkit-text-stroke-width: 1;
        -webkit-text-stroke-color: #F2F4F7;
        font-family: "DM Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }

.widget-menu-connector {
    background-color: white;
    width: 8px;
    height: 8px;
    position: absolute;
    right: 21px;
    top: -4px;
    transform: rotate(45deg);
    border-bottom: 0px;
    border-right: 0px;
}

.timesheets-show-revisits-chbx {
    margin-top: 10px;
    margin-left: 30px;
}

.timesheets-revisit-row {
    float: left;
    position: relative;
    background: #F6F7F7;
    padding: 16px 16px 0px 16px;
    width: 96%;
}

    .timesheets-revisit-row .summary-scheduled {
        margin-right: 29px;
    }

.job-timelog-templates-container .timesheets-revisit-row:last-child {
    padding-bottom: 16px !important;
}

.job-timelog-templates-container .timesheets-revisit-row:first-child {
    margin-top: 0;
}

.stock-items-popup-container .item-control {
    padding: 0;

}
    .stock-items-popup-container .item-control input, .stock-items-popup-container .item-control .inner > select {
        min-height: 23px !important;
    }

    .stock-items-popup-container .item-row {
        margin-top: 16px;
    }

        .stock-items-popup-container .item-row:last-child {
            margin-bottom: 16px;
        }

.stock-items-popup-container .two-col {
    width: calc(50% - 2px);
}

    .stock-items-popup-container .two-col:first-child {
        padding-right: 12px;
    }

.service-item-popup .two-col {
    width: calc(50% - 2px);
}

    .service-item-popup .two-col:first-child {
        padding-right: 12px;
    }

.stock-barcode-container-title {
    color: #778187;
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 24px;
}

.stock-barcode-container .we-icon-table-delete {
    position: absolute;
    top: 15px;
    margin-left: 16px;
    cursor: pointer;
}

.existing-barcode-block {
    position: relative;
}

.no-barcode-block {
    color: #1C2D37;
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.btn-action-plus {
    height: 35px;
    display: flex;
    align-items: center;
}

.stock-items-popup-container .icon-Remove {
    color: #ff0000 !important;
    width: 18px;
    height: 18px;
}

.stock-items-popup-container .icon-Add {
    width: 18px;
    height: 18px;
}

    .stock-items-popup-container .icon-Add:before {
        vertical-align: initial;
    }

.stock-items-popup-container .inner {
    margin-top: 8px;
}
.stock-items-popup-container .wfswitch__label:after {
    top: 0px;
}

.stock-items-popup-container .wfswitch__label:before {
    top: -2px;
}

table.job-po, table.job-po-info {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    display: inline-block;
}

    table.job-po td, th {
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        text-align: left;
        padding: 16px;
        padding-right: 0px;
    }

    table.job-po th {
        color: var(--Raven, #1C2D37);
        font-family: "DM Sans";
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: 16px; /* 123.077% */
        padding-top: 12px;
        padding-bottom: 12px;
        padding-right: 0px;
    }

.job-po-info-row td {
    background-color: #F6F7F7;
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
    vertical-align: top;
    padding-right: 0px;
}

    .job-po-info-row td:first-child {
        padding-left: 30px;
    }

.job-po-info-row {
    display:none;
}

.job-po-number, .job-po-sum, .job-po-cost-name {
    color: #1C2D37;
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    cursor: pointer;
}

    .job-po-number, .job-po.sum{
        font-size: 15px;
    }

    .job-po-cost-name {
        font-size: 14px;
    }

.job-po-number{
    width: 100px;
}

.job-po-supplier {
    width: 120px;
}

.job-po-order-date {
    width: 90px;
}

.job-po-delivery-date {
    width: 90px;
}

.job-po-status {
    width: 114px;
}

.job-po-sum {
    width: 128px;
    padding-left: 24px !important;
}

.job-po-sum-open {
    padding-left: 24px !important;
}

.show-hide-inv {
    padding-left: 0px !important;
    padding-right: 16px !important;
    min-width: 54px;
}

.job-po-info-row.header td {
    color: #1C2D37 !important;
    font-family: "DM Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 123.077% */
}

.job-po-cost-desc, .job-po-cost-price {
    padding-top: 8px;
    color: #778187;
}

.job-po-unlink-btn{
    display: inline-block;
    margin-left: 2px;
}

#job-po-related-costs-description ul {
    color: var(--Raven, #1C2D37);
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    list-style: disc;
    margin-left: 24px;
    margin-top: 32px;
}

#add-po-to-job-costs-chbx{
/*    margin-top: 26px;
    margin-bottom: 26px;*/
}

.add-po-to-job-costs-container {
    margin-bottom: 24px;
}

.add-po-to-job-desc {
    color: #1C2D37;
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
}

.add-po-to-job-popup-options{
    margin-top: 26px;
}

.non-billable-costs-option {
    margin-top: 20px;
}

.add-po-to-job-popup-options div {
    margin-top: 20px;
    color: #1C2D37;
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 106.667% */
}

.add-po-to-job-option {
    margin-top: 20px;
}

    .add-po-to-job-option:first-child {
        margin-top: 26px;
    }

.po-cost-bg-color {
    background: #F6F7F7;
}

.purchase-order-cost-item-for-job-container {
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    color: #F46F22;
    background: #f6ede7;
    width: fit-content;
    flex-shrink: 0;
    padding: 4px 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.link-po-to-job-popup-btn-popup {
    max-width: 130px;
    margin-bottom: 16px !important;
    margin-top: 0px !important;
}

.no-po-linked-to-job-label {
    color: #1C2D37;
    text-align: center;
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-top: 30px;
}

.reminder-page .dropdown-editable {
    width: 273px;
}

.reminder-page .service-reminder-email-input {
    width: 247px; 
    right: 26px;
}

.reminder-page .reminder-email-dropdown {
    width: 269px;
}

.reminder-page .phoneContact {
    width: 270px
}

.customerName {
    cursor: pointer;
    width: fit-content;
    display: inline-block;
    font-weight: 500;
}

.contact-billing-block {
    width: fit-content;
    margin-right: 10px;
    text-align: center;
}

#tab_job_purchase_orders {
    width: 800px;
}

#po-to-unlink-number {
    font-weight: 700;
}
.job-po-cell{
    font-size: 14px;
}

.costs-error-msg {
    background-color: rgba(255, 0, 0, 0.10);
    border: 1px solid #F00;
    padding: 12px 16px;
    border-radius: 5px;
    color: #1C2D37;
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 24px;
}

.po-delete-number, .po-unlink-job-ref {
    font-weight: 700;
}

.po-view-job-reference{
    cursor: pointer;
}

.linked-job-invoiced {
    color: #F00;
    font-family: "DM Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 123.077% */
    margin-top: 4px;
}

#reset-due-date-popup-btn {
    margin-top: 1px;
}

.live-chat-permission-item {
    line-height: 24px;
    color: #000;
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

    .live-chat-permission-item .wfswitch__label:after,
    .live-chat-permission-item .wfswitch__label:before {
        margin-top: 2px;
    }

.staff-live-chat-permissions {
    margin-top: -22px;
}

.form-editor-text-area {
    width: 98%;
    height: calc(100vh - 20rem);
    max-height: none;
    min-height: 20vh;
    border: 1px solid #1C2D37;
    border-radius: 5px;
}

.asset-id-col {
    width: 6%;
}