@import url('charts.css');


/*==============================================
    GENERAL  STYLES    
    =============================================*/
body {
    font-family: 'Open Sans', sans-serif;
}

hr {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

    hr.dashed {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        /*padding-bottom: 10px !important;*/
        height: 5px;
        color: #ffffff;
        border-bottom: 1px dashed #dddddd;
        border-top: 1px dashed #ffffff;
        clear: both;
    }

    hr.slim {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }

.margin-right-half {
    width: calc(100% - 7.5px);
    margin-right: 7.5px;
}

.margin-left-half {
    width: calc(100% - 7.5px);
    margin-left: 7.5px;
}

.margin-right-half.margin-left-half {
    width: calc(100% - 15px);
}

#wrapper {
    width: 100%;
    /*background:#202020;*/
}

#page-wrapper {
    padding: 15px 15px;
    min-height: 600px;
    background: #fcfcfc;
}

#page-wrapper-login, .page-wrapper-basic {
    margin-top: 50px;
    padding: 0px 15px 0 15px;
    /*background-image: url("/Content/img/ITAS-BLUE.png");
    background-repeat: no-repeat;
    background-position: center top;*/
}

    .page-wrapper-basic div.error {
        max-width: 800px;
        margin: 0 auto;
        position: relative;
        padding-top: 0px;
    }

        .page-wrapper-basic div.error img {
            width:100%;
        }

        .page-wrapper-basic div.error h1 {
            font-size:56px;
            font-weight:bold;
        }

        #page-wrapper-login div.center-block,
        .page-wrapper-basic div.center-block {
            max-width: 480px;
            margin: 0 auto;
            position: relative;
            padding-top: 357px;
        }

        #page-wrapper-login div.center-block img,
        .page-wrapper-basic div.center-block img {
            position: absolute;
            top: 0;
            left: 50%;
            margin: 0 0 0 -150px;
            width: 300px;
        }

    #page-wrapper-login #loginForm,
    .page-wrapper-basic > section {
        max-width: 480px;
        margin: 0 auto;
    }

#page-inner {
    width: 100%;
    margin: 10px 20px 10px 0px;
    /*background-color:#fff!important;*/
    /*padding:10px;*/
    min-height: 1200px;
}

#AdminFrame {
    width: 100%;
    min-height: 100%;
}

div.panel.margin-bottom {
    margin-bottom: 60px;
}

.margin-bottom-0, .mb-0 {
    margin-bottom: 0 !important;
}

div.row.submit-button {
    position: absolute;
    top: auto;
    left: auto;
    margin-top: 15px;
}

#ui-datepicker-div {
    z-index: 1000 !important;
}

ul.dropdown-menu {
    left: auto !important;
    right: 15px !important;
}

.dashboard-options ul.dropdown-menu {
    right: 0 !important;
    top: 36px;
    min-width: 210px;
}

    .dashboard-options ul.dropdown-menu li a,
    .dashboard-options ul.dropdown-menu li a:hover,
    .dashboard-options ul.dropdown-menu li a:active,
    .dashboard-options ul.dropdown-menu li a:visited,
    .dashboard-options ul.dropdown-menu li a:focus {
        color: #333333 !important;
        outline: none !important;
        text-decoration: none !important;
    }

.secondary-menu i {
    display: inline-block;
    width: 18px;
}

.co2-wrapper {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 225px;
    height: 60px;
    border: 3px solid #689f38;
    border-radius: 4px;
    background-color: #ffffff !important;
    background-image: url('/Content/img/tree.png');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 60px;
    z-index: 100000;
    opacity: 0.95;
    font-size: 10px;
    font-weight: bold;
}

    .co2-wrapper div.heading {
        font-weight: bold;
        font-size: 10px;
        color: #689f38;
        text-transform: uppercase;
        margin-top: 3px;
        margin-bottom: 5px;
    }

    .co2-wrapper a.toggle-co2-chart {
        position: absolute;
        bottom: 5px;
        right: 5px;
        padding: 3px 6px !important;
        background-color: #689f38;
        border-color: #689f38;
    }

.co2-chart-wrapper {
    width: 450px;
    border: 3px solid #689f38;
    border-radius: 4px;
    padding: 20px;
    position: fixed;
    bottom: 15px;
    right: 250px;
    z-index: 100000;
    background-color: #ffffff !important;
    opacity: 0.95;
}

    .co2-chart-wrapper .heading {
        font-weight: bold;
        font-size: 12px;
        line-height: 24px;
        color: #689f38;
        text-transform: uppercase;
        margin-top: 3px;
        margin-bottom: 5px;
        background-position: top left;
        background-repeat: no-repeat;
        background-image: url('/Content/img/tree.png');
        background-size: contain;
        padding-left: 30px;
    }

.nav-tabs.vertical {
    width: 20%;
    float: left;
    display: block;
}

.nav-tabs-wrapper.width-33 {
    width: 33%;
    float: left;
    background-color: #ffffff;
    /*border-right:1px solid #dddddd !important*/
}

    .nav-tabs-wrapper.width-33 ul.nav-tabs.vertical {
        width: 100%;
    }

.nav-tabs-wrapper div.shim {
    float: left;
    width: 100%;
    border-right: 1px solid #dddddd !important;
}

.nav-tabs.vertical ul {
    display: block;
}

.nav-tabs.vertical > li {
    display: block;
    float: unset !important;
    background-color: #ffffff;
}

    .nav-tabs.vertical > li.active {
        background-color: #f5f5f5;
    }



.nav-tabs.vertical li a {
    width: 100%;
    display: block;
    border: 1px solid #dddddd !important;
    border-left: none !important;
    border-radius: 0;
}

.nav-tabs-wrapper .nav-tabs.vertical li a {
    /* border-right: none !important;*/
}

.nav-tabs.vertical li:first-child a {
    border-top: none !important;
}

.nav-tabs.vertical > li.active a {
    border-right-color: #f5f5f5 !important;
}

.nav-tabs.vertical > li.disabled a:hover {
    font-weight: normal !important;
    background-color: #ffffff !important;
}

.nav-top, .nav-page-heading {
    display: block;
    width: calc(100% + 60px);
    background-color: #333;
    margin: -10px -30px 0 -30px;
    padding: 30px;
}

    .nav-top > div {
        margin-top: -10px;
    }

    .nav-top a.btn-primary {
        min-width: 160px;
        margin-right: 10px
    }

        .nav-top a.btn-primary div {
            /*text-align: center;*/
        }

.nav-page-heading {
    background-color: #fcfcfc;
}

    .nav-page-heading h2 {
        margin: 0;
        color: #ff466d;
    }

/*.nav-top nav ul {
    list-style: none;
}

.nav-top nav ul li {
    float: left;
}

    .nav-top nav ul li a {
        color: #ffffff;
        font-size: 0.8em;
    }

.nav-top nav ul li a i {
    display: block;
    float: left;
    margin-right: 10px;
    margin-top: 5px;
}

.nav-top nav ul li a div {
    float: left;
}*/
.tab-content.vertical {
    width: 80%;
    float: left;
    display: block;
    /*border-top:1px solid #dddddd !important;*/
    border: none !important;
}

    .tab-content.vertical.width-66 {
        width: 66%;
        padding-bottom: 0;
        margin-bottom: 0;
    }

#BodyshopOptionTabs li a {
    border: 1px solid #e9e9e9;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}

    /*#BodyshopOptionTabs li a:hover {

}*/

    #BodyshopOptionTabs li.active a, #BodyshopOptionTabs li a:hover {
        border-color: #dddddd;
    }

.bodyshop-option {
    margin-bottom: 10px;
}

    .bodyshop-option.highlight {
        border-top: 1px dotted #333333;
        border-bottom: 1px dotted #333333;
        background-color: #ffffff;
        padding-top: 10px;
        padding-bottom: 10px;
    }

        .bodyshop-option.highlight hr {
            display: none !important;
        }

.notificationWrapper.vertical {
    background-color: #f5f5f5;
    border: 1px solid #dddddd !important;
    border-radius: 3px;
}

.nav-identity > div {
    bottom: -15px !important;
}

.nav-identity span, .nav-identity a {
    display: inline-block;
    white-space: nowrap;
    margin: 3px;
}

    .nav-identity a.profile {
        margin-right: 0;
        padding-right: 5px;
        border-right: 1px solid #eeeeee;
    }

.navbar-toggle {
    margin-top: 50px;
}

.nav-admin-options {
    margin-right: 15px;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

    .nav-admin-options > div.heading {
        padding: 10px;
        font-weight: bold;
        line-height: 24px;
        display: block;
        background-color: #f5f5f5;
        border-bottom: 1px solid #dddddd;
    }

    .nav-admin-options li {
        border-bottom: 1px solid #dddddd !important;
        margin: 0px !important;
    }

        .nav-admin-options li:last-child {
            border-bottom: none !important;
        }

        .nav-admin-options li a {
            border-radius: 0 !important;
            color: #333333;
        }

            .nav-admin-options li a.icon-right span {
                display: block;
                width: calc(100% - 25px);
                float: left;
            }

            .nav-admin-options li a.icon-right i {
                display: block;
                float: left;
            }

    .nav-admin-options .popover {
        width: 300px;
        color: #000000;
        font-size: 12px;
    }

.nav-tooltip {
    margin-right: 0 !important;
}

.job-details-well {
    border: 1px solid #e3e3e3 !important;
}

    .job-details-well .ui-accordion-header {
        border: none !important;
        border-bottom: 1px solid #eeeeee !important;
        line-height: 48px;
        background-color: #f5f5f5;
        color: #333333 !important;
        font-weight: bold;
        font-size: 14px;
    }

        .job-details-well .ui-accordion-header span.ui-accordion-header-icon {
            background-image: url(/Content/themes/base/images/ui-icons_222222_256x240.png);
        }

    .job-details-well .ui-accordion-content {
        border: none !important;
        padding: 15px 0 !important;
        background-color: #f5f5f5;
    }

    .job-details-well a {
        color: #3276b1 !important;
    }

        .job-details-well a:hover {
            border-bottom: 1px dotted #3276b1;
        }

        .job-details-well a.black {
            color: #333333 !important;
        }

.auto-complete-wrapper {
    position: relative;
}

    .auto-complete-wrapper i {
        position: absolute;
        top: 7px;
        right: 7px;
    }

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear {
    clear: both;
    font-size: 1px;
    height: 1px;
    width: 100% !important;
}

.block {
    display: block;
}

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

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

.text_normal, .text-normal {
    font-weight: normal !important;
}

.text_bold, .text-bold {
    font-weight: bold;
}

.border-dotted {
    border: 1px dotted #e3e3e3;
    border-radius: 4px;
}

.no-boder {
    border: 1px solid #f3f3f3;
}

.no-scrollbar {
    overflow: hidden !important;
}

div.shroud {
    position: absolute;
    top: 0;
    left: 0;
    width: 10000px;
    height: 100000px;
    background-color: white;
    z-index: 10000;
    opacity: 0.4;
}

.semi-ghost {
    opacity: 0.7;
}

.ghost {
    opacity: 0.3;
}

a.ghost:hover {
    color: #428bca;
    cursor: default;
}



h2 {
    color: #f00;
}

h4 {
    padding-top: 10px;
}

.square-btn-adjust {
    border: 0px solid transparent;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

p {
    /*font-size:16px;
    line-height:25px;
    padding-top:20px;*/
    font-size: 1em;
    line-height: 1.5em;
    padding: 0;
}

    p.smaller, .smaller {
        font-size: 0.75em;
        line-height: 1.125em;
    }

.smallest {
    font-size: 0.5em;
}

p.medium, .medium {
    font-size: 0.85em;
}

pre.full-height {
    max-height: 80vh;
    overflow: auto;
}

pre.half-height {
    max-height: 40vh;
    overflow: auto;
}

/* Custom Styling */

.text-danger.field-validation-error {
    display: inline-block;
}

.validation-summary {
    display: none;
}

    .validation-summary strong {
        position: relative;
        top: -1em;
    }

    .validation-summary li {
        line-height: 2em;
    }

.validation-summary-login {
    position: static !important;
    display: block;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.input-group-dropdown {
    margin: 0 !important;
}

    .input-group-dropdown select {
        width: 50% !important;
        font-size: 0.95em;
        padding-left: 5px;
        padding-right: 5px;
    }

    .input-group-dropdown input {
        width: 50% !important;
        text-align: center;
        font-size: 0.95em;
        padding-left: 2px;
        padding-right: 2px;
    }

.report-filter .dropdown {
    width: 200px;
    float: right;
}

.report-filter .dropdown-wide {
    width: 450px;
}

.report-filter > * {
    margin-left: 10px !important;
}

.owners-sla .input-group-dropdown select {
    width: 70% !important;
}

.owners-sla .input-group-dropdown input {
    width: 30% !important;
}

input.text-mini {
    min-width: 40px !important;
    width: 40px;
    float: left;
    margin-right: 10px;
    font-size: 0.95em;
}

input.text-center {
    text-align: center !important;
}

a:hover {
    text-decoration: none;
}

    a:hover.workshop-status {
        color: #2a6496 !important;
    }

a.pull-right.margin-left, a.pull-right.margin-left {
    margin-left: 0.5em;
}

a.pull-right.margin-right, a.pull-left.margin-right {
    margin-right: 0.5em;
}

.tiny {
    font-size: 0.75em;
    line-height: 1.625em;
}

.no-gutter > [class*='col-'], .no-gutter {
    padding-right: 0;
    padding-left: 0;
}

.progress-status div.timer {
    width: 4em;
    float: left;
}

.progress-status div.dates {
    width: calc(100% - 4em);
    float: left;
}

.progress-status {
    border-width: 5px;
}

    .progress-status.green {
        border-color: green;
    }

        .progress-status.green i {
            color: green;
        }

    .progress-status.orange {
        border-color: orange;
    }

        .progress-status.orange i {
            color: orange;
        }

    .progress-status.red {
        border-color: red;
    }

        .progress-status.red i {
            color: red;
        }

.progress {
    margin-bottom: 0;
}

#NoteProgressBar {
    margin: 0 !important;
}

.progress.photos, .progress.estimate {
    margin: -10px -15px 10px -15px;
    border-radius: 0;
    box-shadow: none !important;
}

.progress.organisationupload {
    margin: -15px -15px 10px -15px;
    border-radius: 0;
    box-shadow: none !important;
}

.progress-status {
    text-align: right !important;
}
/*.progress.estimate {
        margin: 10px -34px 10px -34px;
        border-radius:0;
        box-shadow: none !important;
        background-color: #ffffff;
    }*/

#ExamplePhotosModal img {
    width: 100%;
    margin-bottom: 15px;
}

.btn {
    font-family: 'Open Sans', sans-serif;
}

    .btn.removeOpening {
        padding: 1px 6px;
        float: right;
    }

.btn-file {
    position: relative;
    overflow: hidden;
    /*border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;*/
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: left;
        opacity: 0;
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }

.btn-footer {
    border: 1px solid #e3e3e3;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: 15px;
    background-color: #f5f5f5;
}

    .btn-footer + .well.border-square-top {
        border-top: 0px !important;
    }

    .btn-footer textarea {
        max-width: 100%;
        min-width: 100%;
    }

.btn-checkbox, .btn-radio {
    position: relative;
    padding: 3px;
    text-align: left;
}

.panel-heading .btn-checkbox, .panel-heading .btn-radio {
    margin-top: 5px;
}

    .panel-heading .btn-checkbox span.small, .panel-heading .btn-radio span.small {
        font-weight: bold;
    }


.small ul {
    padding-left: 15px;
}

.btn-radio div.well.bg-white {
    color: #333333 !important;
}

.btn-checkbox {
    cursor: pointer;
}

    .btn-checkbox.full-width {
        display: block;
    }

.btn-radio {
    display: block;
    cursor: default;
}

    /*.btn-radio textarea {
    width:100%;
}*/

    .btn-radio label.radiobutton,
    .btn-radio label.checkbutton,
    .btn-checkbox label.checkbutton {
        display: block;
        margin: 10px;
        cursor: pointer;
    }

    .btn-checkbox:before,
    .btn-checkbox.full-width label:before,
    .btn-radio label:before {
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 40px;
    }

    .btn-checkbox.small:before,
    .btn-checkbox.full-width.small label:before,
    .btn-radio.small label:before {
        font-size: 20px !important;
    }

.btn-checkbox.full-width:before {
    display: none;
}

.btn-checkbox.unchecked:before,
.btn-checkbox.full-width label.unchecked:before,
.btn-radio label.unchecked:before {
    content: "\f096";
}

.btn-checkbox.checked:before,
.btn-checkbox.full-width label.checked:before,
.btn-radio label.checked:before {
    content: "\f046";
}

.btn-checkbox.unchecked.smaller:before,
.btn-checkbox.full-width.smaller label.unchecked:before,
.btn-radio.smaller label.unchecked:before,
.btn-checkbox.checked.smaller:before,
.btn-checkbox.full-width.smaller label.checked:before,
.btn-radio.smaller label.checked:before {
    font-size: 14px;
}

.btn-checkbox input[type=checkbox], .btn-radio input[type=radio] {
    visibility: hidden;
    margin: 0;
    position: absolute;
    top: -10px;
    left: -10px;
}

.btn-checkbox.disabled, .checkbutton.disabled {
    cursor: not-allowed !important;
    opacity: 0.5;
}

.btn-radiobutton span,
.btn-checkbox span,
.btn-checkbox.full-width label span .btn-radio label span {
    position: relative;
    top: -10px;
    font-size: 14px;
    font-weight: bold;
    padding: 0 10px 0 6px;
    text-align: left;
}

.btn-radiobutton.text-normal span,
.btn-checkbox.text-normal span {
    font-weight: normal;
}

.btn-radiobutton span.small,
.btn-checkbox span.small,
.btn-checkbox.full-width label span .btn-radio label span.small {
    font-size: 100%;
}

.btn-checkbox.smaller span {
    top: -2px;
}

.btn-checkbox.small span {
    top: -3px;
}

.btn-checkbox.smaller {
    font-size: 100%;
    margin-bottom: 0px;
}

    .btn-checkbox.smaller span {
        font-weight: normal !important;
        font-size: 1em !important;
        line-height: 1.5em;
    }

.btn-checkbox label span, .btn-radio label span {
    padding-left: 6px;
}

.btn-checkbox .checked span, .btn-radio label.checked span {
    padding-left: 0 !important;
}

.btn-checkbox .input-group-addon, .btn-radio .input-group-addon {
    position: static;
    padding: 6px 12px;
}

.btn-checkbox + small {
    display: block;
    margin-top: -18px;
    margin-left: 45px;
    opacity: 0.8;
}

.btn-checkbox.small + small {
    margin-left: 27px;
    margin-top: -10px;
    width: 50%;
}

    .btn-checkbox.small + small.full-width {
        width: 100%;
    }

.btn-checkbox.has-error {
    color: #a94442 !important;
}


.btn-checkbox span.field-validation-error {
    margin-top: 5px;
    margin-left: 35px;
}

.btn-radio .well, .btn-checkbox .well {
    margin: 5px 5px 5px 5px;
}

.btn-featured {
    display: block;
    text-align: left;
    white-space: normal;
}

    .btn-featured .fa {
        /*float:left;
    display:block;
    width:15%;*/
        width: 48px;
        display: block;
        float: left;
        /*margin-right:12px;*/
    }

    .btn-featured a {
        float: left;
        display: block;
        width: calc(100% - 90px);
        color: #ffffff;
        text-align: left;
        /*height:3.5em;*/
        padding-top: 0.5em;
        padding-left: 20px;
    }

    .btn-featured strong, .btn-featured small {
        padding-left: 20px;
    }

    .btn-featured a strong, .btn-featured a small {
        padding-left: 0;
    }

.btn .well {
    white-space: normal;
}

.btn.small {
    padding: 3px 6px;
    font-size: 7px;
}

.btn-teal {
    color: #ffffff;
    background-color: #4bc0c0;
}

    .btn-teal:hover {
        color: #ffffff;
        background-color: #388f8f;
    }



.well.has-error {
    background-color: #ffb0b0;
}

    .well.has-error hr {
        border-color: #000000;
    }

.well.well-notification {
    min-height: 550px;
}

.well-notification.btn-radio-group {
    padding: 0 0 20px 0;
}

.well-notification .btn-radio {
    padding: 0;
    border-radius: 0;
    box-shadow: unset !important;
    /* background-color: #f5f5f5; */
    /* border-color: #dddddd; */
}

    .well-notification .btn-radio.inactive {
        opacity: 0.5;
        /* background-color: #2a6496; */
    }

    .well-notification .btn-radio:first-child {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

/*    .well-notification .btn-radio:nth-child(2) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }*/

.alert {
    position: fixed;
    bottom: 30px;
    right: 30px;
    left: 30px !important;
    z-index: 10000;
    opacity: 0.95;
    margin: 0;
    line-height: 3em;
    padding-top: 5px;
    padding-bottom: 5px;
    border-width: 5px;
}

    .alert.position-static {
        position: static;
        display: inline-block;
    }

    .alert span {
        position: relative;
        top: -0.5em;
        padding-left: 10px;
    }

.vehicle-recalls-wrapper.alert {
    position: static;
    margin: 15px 0;
}

    .vehicle-recalls-wrapper.alert ul {
        padding: 0 0 15px 10px;
        margin: 0;
    }

        .vehicle-recalls-wrapper.alert ul li {
            font-size: 85%;
            line-height: 1.5em;
            color: #333333;
        }

    .vehicle-recalls-wrapper.alert p {
        color: #333333;
    }

    .vehicle-recalls-wrapper.alert span.small {
        font-weight: normal;
        line-height: 1.5em;
    }

.has-error button.btn {
    background-color: #d2322d;
    border-color: #ac2925;
}

.panel-footer.has-error {
    background-color: #ffb0b0;
}

    .panel-footer.has-error label.btn {
        background-color: #d2322d !important;
        border-color: #ac2925 !important;
    }

.panel-footer.no-padding {
    padding: 0 !important;
}

.has-error .form-control[disabled] {
    border-color: #cccccc !important;
}

.row-pad-top, .row-pad-top-mobile {
    padding-top: 15px;
}

.row-2x-pad-top-mobile {
    padding-top: 30px;
}


.row-pad-bottom, .row-pad-bottom-mobile {
    padding-bottom: 15px;
}

.row-2x-pad-bottom-mobile {
    padding-bottom: 30px;
}

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

.remove-padding-top {
    padding-top: 0 !important;
}

.remove-padding-left {
    padding-left: 0 !important;
}

.remove-padding-right {
    padding-right: 0 !important;
}

.remove-margin-bottom {
    margin-bottom: 0 !important;
}

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

.remove-margin-left {
    margin-left: 0 !important;
}

.remove-margin-right {
    margin-right: 0 !important;
}

.margin-left {
    margin-left: 15px;
}

.col-pad-left, .row-pad-left {
    padding-left: 15px !important;
}

.col-pad-right, .row-pad-right {
    padding-right: 15px !important;
}

.col-margin-left, .row-margin-left {
    margin-left: 15px !important;
}

.col-margin-right, .row-margin-right {
    margin-right: 15px !important;
}

.full-width-with-scroll {
    width: 100%;
    overflow-x: scroll;
}

.full-width-with-btn div.input {
    width: calc(100% - 45px) !important;
    float: left;
}

.full-width-with-btn div.btn {
    width: 45px !important;
    padding: 0;
    border: 0px solid #ffffff !important;
    float: left;
}

.full-width-with-btn div.input input {
    width: 100%;
}

.full-width-with-btn div.btn button {
    float: right;
    display: block;
}

icon-loading {
    position: relative;
}

.icon-loading img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px -25px;
}

.icon-bodyshop {
    display: block;
    background-image: url(../img/icon-bodyshop-black.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 16px;
}

.no-records {
    text-align: center;
    padding: 0.5em 0;
    font-weight: bold;
}

.text-danger.field-validation-error {
    font-size: 0.85em;
    /*;*/
    font-weight: bold;
}

#uploaded, .layout-columns {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}

.uploader {
    overflow: hidden;
}

.img-menu, .email-preview, .job-query-preview {
    width: 100%;
    display: block;
    position: relative;
    margin-bottom: 10px;
}

.img-menu {
    /*height:410px;*/
}

.email-preview, .job-query-preview {
    text-align: center;
    height: 550px;
    width: calc(100% + 30px);
    margin: 0;
    border-radius: 4px;
    border: 1px dotted #979797;
    position: relative;
}

.job-query-preview {
    width: 100%;
}

    .job-query-preview.no-border {
        border: none !important;
    }

.email-preview-wrapper .email-preview {
    width: 100%;
}

.email-preview .placeholder,
.email-preview .loading,
.email-preview .error,
.job-query-preview .placeholder,
.job-query-preview .loading,
.job-query-preview .error {
    font-size: 80px;
    color: #979797;
    line-height: 550px;
}

.email-preview .loading,
.job-query-preview .loading {
    font-size: 30px;
}

    .email-preview .placeholder span,
    .email-preview .loading span,
    .email-preview .error span,
    .job-query-preview .placeholder span,
    .job-query-preview .loading span,
    .job-query-preview .error span {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        margin-top: 40px;
    }


.email-preview .img-target,
.job-query-preview .img-target {
    max-height: 468px;
    padding: 0;
    border: none;
    overflow-y: auto;
}

.job-query-preview .target {
    text-align: left;
}

.email-preview .img-menu,
.job-query-preview .img-menu {
    margin-bottom: 0 !important;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 20px 20px 60px 20px;
}

    .email-preview .img-menu .menu,
    .job-query-preview .img-menu .menu {
        padding: 0 10px;
        height: 40px;
        background-color: #f5f5f5;
    }

        .email-preview .img-menu .menu a,
        .job-query-preview .img-menu .menu a {
            margin-top: 6px;
        }

            .email-preview .img-menu .menu a i,
            .job-query-preview .img-menu .menu a i {
                color: #979797 !important;
            }
/*.email-preview .loading {*/
/*position: absolute;
        top: calc(50% - 30px);*/
/*width: 350px;
            padding: 190px 0;*/
/*left: 0;*/
/*text-align: center;
        }*/
/*.email-preview .error {
        padding-top: calc(50% - 30px);
        width: 350px;
        height: 350px;
        border: 1px dotted #e3e3e3;
        border-radius: 5px;
    }*/
.col-md-4.img-menu {
    width: 33% !important;
}

.col-md-6.img-menu {
    width: 50% !important;
}

/*.img-menu:after {
  padding-top: 75%;

  display: block;
  content: '';
}*/

/*.img-menu div.wrapper {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}*/

.img-menu div.menu {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 10px 25px;
    text-align: right;
}

.img-menu.customer-photo i.customer-photo {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffffff;
    cursor: pointer;
}

.img-menu.customer-photo img.img-thumbnail {
    image-orientation: none !important;
}

.img-menu div.waiting {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background-color: #ffffff;
    opacity: 0.8;
}

    .img-menu div.waiting img {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -16px;
        margin-left: -16px;
    }

.img-menu div.menu a {
    /*position:absolute;
    bottom:7px;
    right:22px;*/
    opacity: 0.1;
    display: inline-block;
    width: auto;
    position: static;
    margin-left: 10px;
}

.img-menu:hover div.menu a {
    opacity: 0.6;
}

.img-menu div.menu a:hover {
    opacity: 1;
}

.fa-15x {
    font-size: 1.5em;
}

.email-template-image-wrapper {
    /*height:200px;*/
}

.email-template-image-inner-wrapper {
    border: 1px solid #e3e3e3;
    background-color: #f5f5f5;
    border-radius: 5px;
    height: 170px;
    padding: 10px;
}

.email-template-image {
    height: 150px;
    overflow: hidden;
}

.email-template-image-inner-wrapper span {
    line-height: 150px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    display: block;
}

.email-template-image-inner-wrapper img {
    display: block;
    width: 100%;
}

table {
    /*background-color:#ffffff;*/
    font-size: 0.75em;
    color: #333333 !important;
    width: 100% !important;
}

    table.no-margin {
        margin: 0 !important;
    }

    /*table.max-height-250 {
        table-layout: fixed;
        border-collapse: collapse;
    }*/

    table.rounded th:first-child {
        border-top-left-radius: 3px !important;
    }

    table.rounded th:last-child {
        border-top-right-radius: 3px !important;
    }

    table.scroll {
        background-color: #ffffff;
    }

        table.scroll th,
        table.scroll td {
            display: block;
            float: left;
        }

        table.scroll tr {
            width: 100%;
            display: block;
            float: left;
        }

        table.scroll thead tr,
        table.scroll tfoot tr {
            width: calc(100% - 16px);
        }

        table.scroll tbody {
            display: block;
            overflow-y: scroll;
            width: 100%;
        }
    /*table.max-height-250 thead td {
            display:table-cell;
        }*/
    table.max-height-100 tbody {
        max-height: 100px;
    }

    table.max-height-150 tbody {
        max-height: 150px;
    }

    table.max-height-200 tbody {
        max-height: 200px;
    }

    table.max-height-250 tbody {
        max-height: 250px;
    }

    table.max-height-300 tbody {
        max-height: 300px;
    }

/*table.tfoot-top tfoot {
    display: table-row-group !important;
}*/

.dashboard table {
    margin-bottom: 0;
    font-size: 0.7em;
}

    .dashboard table td:last-child a {
        float: right;
    }

.all-users-wrapper {
    overflow-x: scroll !important;
}

.data-table-searchable .dataTables_filter label {
    position: relative;
    min-height: 30px !important;
}

.data-table-searchable .dataTables_filter label {
    visibility: hidden;
}

    .data-table-searchable .dataTables_filter label input {
        visibility: visible !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
    }

.data-table-ajax-alternate .search input {
    width: 250px;
}

.data-table-searchable th:first-child:before {
    background: none !important;
}

.data-table-searchable .dataTables_filter label input::-webkit-input-placeholder,
.data-table-ajax-alternate .search input::-webkit-input-placeholder {
    font-size: 10px !important;
}

.data-table-searchable .dataTables_filter label input::-moz-placeholder,
.data-table-ajax-alternate .search input:-moz-placeholder {
    font-size: 10px !important;
}

.data-table-searchable .dataTables_filter label input:-ms-input-placeholder,
.data-table-ajax-alternate .search input:-ms-input-placeholder {
    font-size: 10px !important;
}

.data-table-searchable .dataTables_filter label input:-moz-placeholder,
.data-table-ajax-alternate .search input:-moz-placeholder {
    font-size: 10px !important;
}

.data-table-searchable .dataTables_filter label input::placeholder,
.data-table-ajax-alternate .search input::placeholder {
    font-size: 10px !important;
}

.data-table-ajax-all-jobs table, table.data-table-ajax-alternate {
    margin-bottom: 15px;
}

.data-table-heading .content {
    float: left;
    width: calc(100% - 120px);
}

.data-table-heading .toggle {
    float: right;
    width: 40px;
    text-align: right;
}

.data-table-heading div.dropdown {
    float: left;
    width: 80px;
}

.data-table-heading .content + div.toggle {
    width: 120px !important;
}

.data-table-heading ul.dropdown-menu {
    /*left: auto !important;*/
    right: 0 !important;
    top: 35px !important;
    width: 250px;
}

    .data-table-heading ul.dropdown-menu li label {
        padding: 0 !important;
        margin: 0 !important;
    }

        .data-table-heading ul.dropdown-menu li label:before {
            font-size: 14px !important;
        }

        .data-table-heading ul.dropdown-menu li label span {
            font-size: 80%;
        }

.data-table-heading .toggle a {
    color: #ffffff;
}

.data-table-ajax-alternate.noti-box {
    overflow: visible !important;
    /*padding-right:40px !important;*/
    margin-right: 20px;
}

table.table-child th, table.table-child td {
    font-size: 10.5px !important;
    background: unset !important;
}

table.table-child td {
    border-top: 1px dotted #333333 !important;
}

table tfoot {
    display: table-row-group;
}

table select.filter {
    width: calc(100% - 2px);
    border-width: 1px;
}

table td, table th {
    border: none !important;
    background-color: #ffffff;
}

table.table-transparent th,
table.table-transparent td {
    background: none !important;
}

table.table-fixed-sized-font {
    font-size: 9px !important;
}

table th.sorting, table th.sorting_asc, table th.sorting_desc {
    padding-left: 16px !important;
    white-space: nowrap;
}

table th.sorting,
table th.sorting_asc,
table th.sorting_desc {
    position: relative;
    z-index: 1;
}

    table th.sorting:before,
    table th.sorting_asc:before,
    table th.sorting_desc:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .4;
        z-index: -1;
        background-image: url(../png/bullet_arrow_up_down.png);
        background-repeat: no-repeat;
        background-position: left center;
    }

    table th.sorting_asc:before {
        background-image: url(../png/bullet_arrow_up.png);
    }

    table th.sorting_desc:before {
        background-image: url(../png/bullet_arrow_down.png);
    }

    table th.sorting_asc[data-orderable="false"]:before {
        background-image: none !important;
    }

    table th.sorting:hover:before,
    table th.sorting_asc:hover:before,
    table th.sorting_desc:hover:before {
        opacity: 1 !important;
    }


table td.details, table th.details, table td.bg-color-grey {
    background: #f9f9f9 !important;
}



table strong .days, table strong .hours, table strong .minutes {
    font-weight: bold;
    font-size: 1.1em;
}

table div.smaller .days, table div.smaller .hours, table div.smaller .minutes {
    font-size: 0.9em;
    /*white-space:nowrap;*/
}

table tr {
    cursor: pointer;
}

table td div.icon-loading {
    text-align: center;
    padding: 20px;
    color: #dddddd;
}

table.data-table-ajax td {
    padding: 8px 4px 8px 16px !important;
}

    table.data-table-ajax td:last-child {
        padding: 8px !important;
    }

div.search, div.filter, div.filter-no-data {
    width: 50%;
    float: left;
}

div.filter, div.filter-no-data {
    float: right;
}

    div.filter label, div.filter-no-data label {
        float: right;
    }

.dataTables_info, .dataTables_length, .dataTables_paginate, .dt-length, .dt-paging, .dt-info {
    width: 33%;
    float: left;
}

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

.dt-length select {
    margin-right:12px;
}

    .dt-paging ul.pagination {
        margin:0 !important;
        float:right;
    }

    .dataTables_info {
        text-align: center;
    }

.dataTables_paginate ul {
    float: right;
    margin-top: 0;
}

.data-table-ajax-alternate .dataTables_wrapper {
    width: calc(100vw - 161px);
    overflow: auto;
}

.ui-autocomplete {
    max-height: 400px;
    overflow-y: auto;
}

    .ui-autocomplete li.ui-menu-item {
        padding: 10px 10px 0 10px;
        border: none !important;
        margin: 0;
    }

        .ui-autocomplete li.ui-menu-item:hover {
            background-color: #f5f5f5;
        }

    .ui-autocomplete div.image {
        width: 15%;
        padding: 0;
        float: left;
        margin: 0;
        background-size: cover;
        background-position: center center;
        border: none !important;
        position: static;
    }

        .ui-autocomplete div.image:after {
            content: "";
            display: block;
            padding-bottom: 45%;
        }

    .ui-autocomplete div.description {
        width: 100%;
        border: none !important;
        background: none;
        margin: 0;
        float: left;
        color: #333333;
        padding: 0;
    }

        .ui-autocomplete div.description span {
            display: block;
            font-size: 0.75em;
        }

    .ui-autocomplete hr {
        border: 0;
        padding: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid #eeeeee !important;
        background: none;
    }

        .ui-autocomplete hr.ui-state-active {
            border: 0;
            border-bottom: 1px solid #eeeeee !important;
        }

    .ui-autocomplete div.clear {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: none;
    }

    .ui-autocomplete li.ui-menu-item:hover {
    }

        .ui-autocomplete li.ui-menu-item:hover div, .ui-autocomplete li.ui-menu-item:hover span {
        }

div.auto-complete-wrapper div.selected {
    bottom: 10px;
    margin-top: -10px;
}

.popover {
    max-width: 500px;
}

    .popover div.arrow {
        width: auto !important;
    }

.popover-content-ajax {
    padding: 5px;
    min-width: 450px;
}

    .popover-content-ajax .well {
        padding: 5px;
    }

.popover-content .icon-loading {
    width: 150px;
    height: 150px;
}

    .popover-content .icon-loading img {
        margin-top: 0;
    }

/* Job history */
div.row.job-history {
    position: relative;
}

    div.row.job-history > i {
        width: 28px;
        display: block;
        float: left;
    }

.mobile div.row.job-history > i {
    font-size: 80% !important;
    width: 14px;
}

div.row.job-history div.buttons i.job-status {
    margin-top: 1px;
    margin-left: 0.5em;
    cursor: pointer;
}

div.row.job-history.popover-content > span {
    width: 60px;
    display: block;
    float: left;
}

div.row.job-history .job-history-info {
    /*width: calc(100% - 38px);*/
    width: 100%;
    display: block;
    float: left;
}

.mobile div.row.job-history .job-history-info {
    width: calc(100% - 20px);
}

div.row.job-history .job-history-info div {
    /*position:relative;*/
    display: block;
    width: calc(100% - 60px);
    float: left;
}

    div.row.job-history .job-history-info div.full-width {
        width: 100% !important;
    }

    div.row.job-history .job-history-info div.well {
        /*margin-top: 10px;*/
        /*margin-left: -28px;
        width: calc(100% + 20px);*/
        width: 100%;
    }

.mobile div.row.job-history .job-history-info div.well {
    margin-left: -17px;
}



div.row.job-history div.well.noti-box span.icon-box + div,
div.row.job-history div.well.noti-box span.icon-box + div {
    width: 100% !important;
    float: left;
}

div.row.job-history.popover-content .job-history-info {
    width: calc(100% - 75px);
    margin-right: 0;
    display: block;
    float: left;
}

div.row.job-history .job-history-info div.info,
#CustomerInteraction div.text-info > div {
    font-size: 0.75em;
    width: 100%;
    color: #333333;
}

#CustomerInteraction div.text-info {
    width: calc(100% + 30px) !important;
}

    #CustomerInteraction div.text-info.width-100 {
        width: 100% !important;
    }

    #CustomerInteraction div.text-info > div.panel {
        width: calc(33% - 10px);
        color: #ffffff !important;
        float: left;
        margin: 15px 15px 0 0;
        padding: 15px;
    }

        #CustomerInteraction div.text-info > div.panel.small {
            padding: 5px;
            text-align: center;
        }


        #CustomerInteraction div.text-info > div.panel.last {
            margin-right: 0 !important;
        }


        #CustomerInteraction div.text-info > div.panel.disabled {
            opacity: 0.5 !important;
            cursor: not-allowed;
        }

    #CustomerInteraction div.text-info a.btn {
        display: inline-block !important;
        color: #ffffff;
        width: auto;
        position: static;
        font-size: 1em !important;
    }

    #CustomerInteraction div.text-info a.btn-default {
        color: #333333;
    }

#CustomerInteraction tbody {
    display: block;
    max-height: 300px;
    overflow-y: scroll;
}

    #CustomerInteraction thead,
    #CustomerInteraction tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #CustomerInteraction tbody td.recipient {
        overflow: hidden;
    }

#ResendEmailModal div.image, #ContactUsEmailModal div.image {
    width: 33%;
    min-width: 33%;
    display: block;
    float: left;
    font-size: 1px;
    background-image: url('/img/loading.gif');
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 130px;
}

#ResendEmailModal img#ResendEmailImage, #ContactUsEmailModal img#ContactUsEmailImage {
    display: block;
    width: 100%;
}

#ResendEmailModal div.info, #ContactUsEmailModal div.info {
    width: calc(66% - 15px);
    margin-left: 15px;
    display: block;
    float: left;
}

div .row.job-history .job-history-info span {
    display: block;
    font-size: 0.75em;
}

    div.row.job-history .job-history-info span.padding-top {
        padding-top: 0.25em;
        margin-top: 0.5em;
        border-top: 1px dashed #eeeeee;
    }

    div.row.job-history .job-history-info span.bold {
        font-weight: bold;
    }

    div.row.job-history .job-history-info span.icon-box {
        font-size: 2.5em;
    }

div.row.job-history .buttons {
    /*position: absolute;
        top: 0;
        right: 0;
        padding-top:5px*/
    padding-top: 5px;
    width: 60px !important;
    float: left;
}

    div.row.job-history .buttons a {
        display: block;
    }

div.job-history form.form-change-workshop-progress {
    padding-left: 75px !important;
}

.mobile div.row.job-history .buttons i {
    font-size: 150% !important;
}

.arrow-right {
    background-image: url(/Content/img/arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 150px;
    text-align: center;
    line-height: 3em;
    font-size: 2em;
}

/* Colours */
.white {
    color: #ffffff;
}

.bg-white {
    background-color: #ffffff;
}

.black {
    color: #333333;
}

.bg-black {
    color: #333333;
}

.bg-darkgrey {
    background-color: #585858;
}

.green {
    color: #5cb85c;
}

.bg-green {
    background-color: #5cb85c;
}

.Late {
    color: #db0630 !important;
}

.Ontrack {
    color: #5cb85c !important;
}

.Duetoday {
    color: #f0ad4e !important;
}


.border-square-bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.border-square-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-control.small {
    padding: 3px 6px;
    height: 20px;
    font-size: 0.75em;
}

.datepicker.form-control,
.datepicker-nomindate.form-control,
.datetimepicker.form-control,
.datetimepicker-nomindate.form-control,
.datetimepicker-nobuttons.form-control,
.timepicker.form-control {
    width: calc(100% - 32px);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    float: left;
}

    .datepicker.form-control.small,
    .datepicker-nomindate.form-control.small,
    .datetimepicker.form-control.small,
    .datetimepicker-nomindate.form-control.small,
    .datetimepicker-nobuttons.form-control.small,
    .timepicker.form-control.small {
        width: calc(100% - 20px);
    }

    .datepicker.form-control + button.ui-datepicker-trigger,
    .datepicker-nomindate.form-control + button.ui-datepicker-trigger,
    .datetimepicker.form-control + button.ui-datepicker-trigger,
    .datetimepicker-nomindate.form-control + button.ui-datepicker-trigger,
    .datetimepicker-nobuttons.form-control + button.ui-datepicker-trigger,
    .timepicker.form-control + button.ui-datepicker-trigger {
        width: 32px;
        float: left;
        padding: 6px 6px;
        position: static;
        margin: 0;
        border: 1px solid #cccccc;
        border-radius: 4px;
        border-left: 0 none;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        background-color: #eeeeee;
        color: #eeeeee;
        overflow: hidden;
        height: 34px;
    }

    .datepicker.form-control.small + button.ui-datepicker-trigger,
    .datepicker-nomindate.form-control.small + button.ui-datepicker-trigger,
    .datetimepicker.form-control.small + button.ui-datepicker-trigger,
    .datetimepicker-nomindate.form-control.small + button.ui-datepicker-trigger,
    .datetimepicker-nobuttons.form-control.small + button.ui-datepicker-trigger,
    .timepicker.form-control.small + button.ui-datepicker-trigger {
        height: 20px;
        font-size: 0.75em;
        padding: 3px;
        width: 20px;
    }

.has-error .datepicker.form-control + button.ui-datepicker-trigger,
.has-error .datepicker-nomindate.form-control + button.ui-datepicker-trigger,
.has-error .datetimepicker.form-control + button.ui-datepicker-trigger,
.has-error .datetimepicker-nomindate.form-control + button.ui-datepicker-trigger,
.has-error .datetimepicker-nobuttons.form-control + button.ui-datepicker-trigger,
.has-error .timepicker.form-control + button.ui-datepicker-trigger {
    background-color: #d2322d !important;
    border-color: #a94442;
    color: #d2322d;
}

.datepicker.form-control + button.ui-datepicker-trigger:before,
.datepicker-nomindate.form-control + button.ui-datepicker-trigger:before,
.datetimepicker.form-control + button.ui-datepicker-trigger:before,
.datetimepicker-nomindate.form-control + button.ui-datepicker-trigger:before,
.datetimepicker-nobuttons.form-control + button.ui-datepicker-trigger:before,
.timepicker.form-control + button.ui-datepicker-trigger:before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 20px;
    color: #555555;
    content: "\f073";
}

.datepicker.form-control.small + button.ui-datepicker-trigger:before,
.datepicker-nomindate.form-control.small + button.ui-datepicker-trigger:before,
.datetimepicker.form-control.small + button.ui-datepicker-trigger:before,
.datetimepicker-nomindate.form-control.small + button.ui-datepicker-trigger:before,
.datetimepicker-nobuttons.form-control.small + button.ui-datepicker-trigger:before,
.timepicker.form-control.small + button.ui-datepicker-trigger:before {
    font-size: 12px;
}

.timepicker.form-control + button.ui-datepicker-trigger:before {
    content: "\f017";
}

.has-error .datepicker.form-control + button.ui-datepicker-trigger:before,
.has-error .datepicker-nomindate.form-control + button.ui-datepicker-trigger:before,
.has-error .datetimepicker.form-control + button.ui-datepicker-trigger:before,
.has-error .datetimepicker-nomindate.form-control + button.ui-datepicker-trigger:before,
.has-error .datetimepicker-nobuttons.form-control + button.ui-datepicker-trigger:before,
.has-error .timepicker.form-control + button.ui-datepicker-trigger:before {
    color: #ffffff;
}

/*.datetimepicker-nobuttons .ui-datepicker-buttonpane {
    display: none !important;
}*/

.text-info {
    display: inline-block;
    float: left;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ui-text-info {
    display: inline-block !important;
    float: left;
    padding: 6px 6px;
    position: static;
    margin: 0;
    border: 1px solid #cccccc;
    border-radius: 4px;
    border-left: 0 none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    background-color: #eeeeee;
    /*color: #eeeeee;*/
    height: 34px;
    font-weight: normal;
    font-size: 0.8em;
    line-height: 22px;
}

.popover-title {
    font-weight: bold;
    white-space: nowrap;
}

/* CUSTOM ELEMENT SPECIFIC STYLING */
.estimate.panel {
    background-color: #f5f5f5;
}

.working-hours {
    width: 60px;
}

input.working-hours::-webkit-outer-spin-button,
input.working-hours::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

#VehicleDetails {
    min-height: 190px;
}

/* Tab styling */
.tab-content {
    padding: 15px;
    border: 1px solid #dddddd;
    border-top: none !important;
    background-color: #f5f5f5;
    margin-bottom: 15px;
}

    .tab-content.bg-white {
        background-color: #ffffff !important;
    }

.nav-tabs > li.active > a, .nav-tabs > li > a:hover {
    background-color: #f5f5f5 !important;
    font-weight: bold;
}

    .nav-tabs > li.active > a.bg-white, .nav-tabs > li > a:hover.bg-white {
        background-color: #ffffff !important;
    }

.nav-tabs > li > a.bg-white {
    border: 1px solid #dddddd;
    outline: 0;
}

.nav-tabs > li.active > a.bg-white, .nav-tabs > li > a:active, .nav-tabs > li > a:focus {
    border: 1px solid #dddddd;
    border-bottom-color: #ffffff;
}

/* Job notes */
#UnReadNotes {
    background-color: #d9534f;
    color: #ffffff;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    line-height: 20px;
    display: inline-block;
    text-align: center;
}

#JobNotes .exsisting-notes {
    /*max-height:400px;
    overflow-y:auto;*/
    /*margin-bottom:15px;*/
    padding: 0 !important;
    border: none !important;
    padding-right: 10px
}

    #JobNotes .exsisting-notes .scrollable {
        max-height: 400px;
        overflow-y: auto;
    }

        #JobNotes .exsisting-notes .scrollable + .footer {
            border: 1px solid #ddd;
            border-top: 0px;
            padding: 5px;
        }

            #JobNotes .exsisting-notes .scrollable + .footer a.download-selected-documents {
                float: right;
                display: block;
            }



#JobNotes .footer .btn-checkbox.smaller {
    font-size: 75%;
}

#JobNotes table.table-bordered {
    margin-bottom: 0px;
}

    #JobNotes table.table-bordered tr {
        cursor: default !important;
    }

        #JobNotes table.table-bordered tr td:last-child {
            padding-right: 15px;
        }

#JobNoteDateWrapper div.row div:first-child {
    text-align: right !important;
}

.add-job-note {
    position: relative;
    padding: 0;
}

    .add-job-note textarea.form-control {
        border-bottom: none !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }

        .add-job-note textarea.form-control:focus {
            outline: solid;
            outline-style: none;
            box-shadow: none;
            border-color: #cccccc;
        }

    .add-job-note > div {
        border-radius: 0px;
        border-left: 1px solid #cccccc !important;
        border-right: 1px solid #cccccc !important;
        border-top: 0px;
        border-bottom: 0px;
        background-color: #ffffff;
    }

    .add-job-note div.waiting {
        position: absolute;
        left: 3px;
        right: 3px;
        top: 3px;
        bottom: 3px;
        background-color: #ffffff;
        border: none !important;
        opacity: 0.8;
        z-index: 1000000;
    }



        .add-job-note div.waiting img {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -16px;
            margin-left: -16px;
        }


    .add-job-note div#JobNoteAssets, .add-job-note div#JobNoteDateWrapper {
        border-top: 1px solid #f5f5f5 !important;
    }

    .add-job-note div#JobNoteDateWrapper {
        padding: 5px;
    }

.job-note-field-name {
    font-size: 75%;
}

.add-job-note div.footer {
    border: 1px solid #cccccc;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 1px solid #f5f5f5;
    background-color: #ffffff;
    padding: 0 5px 5px 5px;
}

    .add-job-note div.footer a.button {
        float: right;
        border: none !important;
        background-color: #ffffff;
        opacity: 0.7;
        position: relative;
        overflow: hidden;
        display: block;
        width: 20px;
        color: #333333;
    }

        .add-job-note div.footer a.button:hover {
            opacity: 1;
        }

        .add-job-note div.footer a.button input[type="file"] {
            position: absolute;
            width: 100px;
            height: 100px;
            top: -10px;
            left: -20px;
            opacity: 0;
            cursor: pointer;
        }

.add-job-note #JobNoteAssets select, select#NoteType {
    font-size: 0.75em;
    padding: 1px 6px !important;
    line-height: 1.5em;
    height: auto;
    margin: 0px;
}

.add-job-note #JobNoteAssets > div {
    padding: 5px 0;
}

.view-job-notes {
    font-size: 0.75em !important;
}

    .view-job-notes .panel-footer {
        padding: 5px 10px;
    }

    .view-job-notes a {
        color: #333333;
    }

.notificationWrapper {
    /*-moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;*/
}

    .notificationWrapper .notificationContent {
        break-inside: avoid-column;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }

        .notificationWrapper .notificationContent .notification {
            position: relative;
        }

        .notificationWrapper .notificationContent a.api-user {
            position: absolute;
            top: 16px;
            right: 0;
        }

        .notificationWrapper .notificationContent div.api-user {
            position: absolute;
            top: 54px;
            right: 0;
            width: 400px;
            z-index: 100;
            display: none;
            padding: 25px;
        }

            .notificationWrapper .notificationContent div.api-user input {
                margin: 5px 0;
            }

        .notificationWrapper .notificationContent .api-user input {
            padding: 3px 6px;
            font-size: 12px;
            height: 32px;
        }

    .notificationWrapper .nav-tabs li a {
        font-size: 10px !important;
    }

#ViewRequest .modal-dialog {
    width: 90vw;
}

#ViewRequest iframe {
    width: 100%;
    height: 100%;
}

#ViewResponse .modal-dialog {
    width: 50vw;
}
/*==============================================
   DASHBOARD STYLES    
   =============================================*/
.panel.btn {
    display: block;
}

    .panel.btn.bg-color-blue {
        border: 2px solid #A95DF0;
    }

        .panel.btn.bg-color-blue:hover {
            color: #A95DF0;
            background-color: #ffffff;
        }

.dropdown .panel.btn + .dropdown-menu {
    right: 0;
    left: auto;
    width: 450px;
    margin-top: -5px
}

.panel.btn.bg-color-blue + .dropdown-menu {
    border-color: #A95DF0;
    border-width: 2px;
    padding: 15px 0 0 0;
    z-index: 99 !important;
}

.dropdown .panel.btn.bg-color-blue + .dropdown-menu.bottom .arrow {
    border-bottom-color: #A95DF0;
}

.dropdown .panel.btn + .dropdown-menu.bottom .waiting {
    position: absolute;
    top: auto;
    left: 50%;
    width: 56px;
    color: #dddddd;
    text-align: center;
    margin-left: -28px;
    margin-top: 15px;
}

.dropdown .panel.btn + .dropdown-menu.bottom .waiting-placeholder {
    min-height: 85px;
}

#ActiveJobsChart {
    max-height: 300px;
}

.panel-back {
    /* background-color: #F8F8F8;*/
    background-color: #f2f2f2;
}

.panel-back-red {
    background-color: #c90000;
}

.noti-box {
    min-height: 100px;
    padding: 20px;
    overflow-x: auto;
}

    .noti-box.padding-10 {
        padding: 10px;
    }

    .noti-box.no-min-height {
        min-height: unset;
    }

    .noti-box .icon-box {
        display: block;
        float: left;
        margin: 0 15px 10px 0;
        width: 60px;
        height: 60px;
        line-height: 60px;
        vertical-align: middle;
        text-align: center;
        font-size: 35px;
    }

.well.noti-box .icon-box {
    margin-bottom: 0;
}

.text-box p {
    margin: 0 0 3px;
}

.main-text {
    font-size: 20px;
    font-weight: 600;
}

.main-text-medium {
    font-size: 30px;
}

.main-text-large {
    font-size: 45px;
}

.notify .description {
    /*text-align:center;*/
    font-size: 1.1em;
    text-transform: uppercase;
}

.set-icon {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.bg-color-green {
    /*background-color: #3c763d;*/
    background-color: #21b324;
    color: #fff;
}

.color-green {
    color: #21b324;
}

.bg-color-teal {
    background-color: #4bc0c0;
    color: #fff;
}

.color-teal {
    color: #4bc0c0;
}

.bg-color-blue {
    background-color: #37a2eb;
    color: #fff;
}

.color-blue {
    color: #37a2eb;
}

.bg-color-purple {
    background-color: #A95DF0;
    color: #fff;
}

.btn-primary.bg-color-purple {
    background-color: #A95DF0 !important;
    border-color: #A95DF0 !important;
    color: #fff;
    opacity: 1;
}

    .btn-primary.bg-color-purple:hover {
        background-color: #A95DF0 !important;
        border-color: #A95DF0 !important;
        opacity: 0.8;
    }

.btn-primary.bg-color-teal {
    background-color: #4bc0c0 !important;
    border-color: #4bc0c0 !important;
    color: #fff;
    opacity: 1;
}

    .btn-primary.bg-color-teal:hover {
        background-color: #4bc0c0 !important;
        border-color: #4bc0c0 !important;
        opacity: 0.8;
    }

.btn-primary.bg-color-orange {
    background-color: #ff9f40 !important;
    border-color: #ff9f40 !important;
    color: #fff;
    opacity: 1;
}

    .btn-primary.bg-color-orange:hover {
        background-color: #ff9f40 !important;
        border-color: #ff9f40 !important;
        opacity: 0.8;
    }

.btn-primary.bg-color-red {
    background-color: #ff466d !important;
    border-color: #ff466d !important;
    color: #fff;
    opacity: 1;
}

    .btn-primary.bg-color-red:hover {
        background-color: #ff466d !important;
        border-color: #ff466d !important;
        opacity: 0.8;
    }

.btn-primary.bg-color-green {
    background-color: #21b324 !important;
    border-color: #21b324 !important;
    color: #fff;
    opacity: 1;
}

    .btn-primary.bg-color-green:hover {
        background-color: #21b324 !important;
        border-color: #21b324 !important;
        opacity: 0.8;
    }


.color-purple {
    color: #A95DF0;
}

.bg-color-orange {
    background-color: #ff9f40;
    color: #ffffff;
}

.color-orange {
    color: #ff9f40;
}

.bg-color-yellow {
    background-color: #f0e031;
    color: #ffffff;
}

.color-yellow {
    color: #f0e031;
}

.bg-color-red {
    /*background-color: #a94442;*/
    background-color: #ff466d;
    color: #fff;
}

.color-red {
    color: #ff466d;
}

.bg-color-brown {
    background-color: #B94A00;
    color: #fff;
}

.color-brown {
    color: #B94A00;
}

.bg-color-lime {
    background-color: #b7e868;
    color: #ffffff;
}

.color-lime {
    color: #b7e868;
}

.bg-color-pink {
    background-color: #de78ca;
    color: #ffffff;
}

.color-pink {
    color: #de78ca;
}

.bg-color-camo {
    background-color: #9c9975;
    color: #ffffff;
}

.color-camo {
    color: #9c9975;
}

.bg-color-grey {
    background-color: #8e8e8c;
    color: #ffffff;
}

    .bg-color-grey.color-black {
        color: #333333;
    }

.color-grey {
    color: #8e8e8c;
}

.panel-clickable:hover {
    cursor: pointer;
}

.panel-clickable.bg-color-green:hover {
    background-color: #18821a;
}

.panel-clickable.bg-color-teal:hover {
    background-color: #388f8f;
}

.panel-clickable.bg-color-blue:hover {
    background-color: #2a7cb4;
}

.panel-clickable.bg-color-purple:hover {
    background-color: #693a95;
}

.panel-clickable.bg-color-orange:hover {
    background-color: #c27931;
}

.panel-clickable.bg-color-yellow:hover {
    background-color: #a49921;
}

.panel-clickable.bg-color-red:hover {
    background-color: #bb3350;
}

.panel-clickable.bg-color-brown:hover {
    background-color: #903a00;
}

.panel-btn.noti-box {
    min-height: unset !important;
}

.panel-btn {
    font-size: 12px;
}

    .panel-btn i {
        display: block !important;
        float: left;
        width: 36px;
    }

    .panel-btn div {
        float: left;
        padding-left: 10px;
        width: calc(100% - 46px);
        text-align: left;
    }

.btn-reports + div.dropdown ul.dropdown-menu {
    left: 0px !important;
    min-width: 260px !important;
}

    .btn-reports + div.dropdown ul.dropdown-menu li span.label {
        color: #333333;
        padding-top: 15px;
    }

    .btn-reports + div.dropdown ul.dropdown-menu li span {
        font-size: 12px;
    }

.icon-box-right {
    display: block;
    float: right;
    margin: 0 15px 10px 0;
    width: 70px;
    height: 70px;
    line-height: 75px;
    vertical-align: middle;
    text-align: center;
    font-size: 40px;
}

.main-temp-back {
    background: #8702A8;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
}

    .main-temp-back .text-temp {
        font-size: 40px;
    }

.back-dash {
    padding: 20px;
    font-size: 20px;
    font-weight: 500;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color: #2EA7EB;
    color: #fff;
}

    .back-dash p {
        padding-top: 16px;
        font-size: 13px;
        color: #fff;
        line-height: 25px;
        text-align: justify;
    }

.back-footer-green {
    background-color: #009B50;
    border-top: 0px solid #fff;
}

.back-footer-red {
    background-color: #AF0000;
    border-top: 0px solid #fff;
}

.color-bottom-txt {
    color: #000;
    font-size: 16px;
    line-height: 30px;
}

.customer-details.hidden {
    display: block !important;
    position: absolute;
    top: -1000000px;
    left: -1000000px;
}

/*CHAT PANEL*/
.chat-panel .panel-body {
    height: 450px;
    overflow-y: scroll;
}

.chat-box {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .chat-box li {
        margin-bottom: 15px;
        padding-bottom: 5px;
        border-bottom: 1px dotted #808080;
    }

        .chat-box li.left .chat-body {
            margin-left: 90px;
        }

        .chat-box li .chat-body p {
            margin: 0;
            color: #8d8888;
        }

.chat-img > img {
    margin-left: 20px;
}

/* JQUERY UI CUSTOM STYLING */

.header.ui-accordion-header-collapsed {
}

.header.ui-accordion-header-active {
    background-color: #3f3838;
    border-color: #202020;
}




/*==============================================
    MENU STYLES    
    =============================================*/


.user-image {
    margin: 25px 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    float: left;
    background-image: url(/Content/img/find_user.png);
    background-position: center center;
    background-size: cover;
}

.navbar {
    position: relative;
    border-bottom: 4px solid #333333 !important;
    background-color: rgba(255,255,255,0.97) !important;
}

.navbar-cls-top .navbar-brand {
    margin-top: 0;
    height: 105px;
    display: block;
    width: 100%;
}

    .navbar-cls-top .navbar-brand div.logo {
        margin-left: -75px !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: contain;
        width: 150px;
        height: calc(100% - 10px);
        position: absolute;
        top: 0;
        left: 50%;
    }

        .navbar-cls-top .navbar-brand div.logo.default {
            height: calc(100% - 15px);
            margin: 7px 0 10px 7px;
        }

            .navbar-cls-top .navbar-brand div.logo.default a {
                display: block;
                width: 100%;
                height: 100%;
                opacity: 0;
            }



.navbar-toggle[type=button] {
    position: absolute;
    top: 0;
    right: 0;
}

.nav-identity {
    font-size: 0.6em;
    margin: 0;
    display: inline-block;
    float: right;
    text-indent: 0;
    color: #5e5e5e;
    text-align: right;
    height: 100%;
    position: relative;
}

    .nav-identity > div {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 5px;
    }

    .nav-identity a {
        font-weight: bold;
    }

.navbar-brand .toolbar {
    display: inline-block;
    float: left;
    height: calc(100% - 5px);
    padding-right: 20px;
    margin-bottom: 5px;
    position: relative;
}

    .navbar-brand .toolbar .dropdown {
        position: absolute;
        bottom: 0%;
    }


        .navbar-brand .toolbar .dropdown.aidememoire a {
            color: #428bca;
            padding: 0;
            font-size: 2em;
        }

            .navbar-brand .toolbar .dropdown.aidememoire a:hover {
                color: #2a6496;
            }



        .navbar-brand .toolbar .dropdown.empty {
            opacity: 0.3 !important;
            cursor: default;
        }

            .navbar-brand .toolbar .dropdown.empty .dropdown-menu.bottom {
                display: none;
            }

        .navbar-brand .toolbar .dropdown .dropdown-menu {
            background-color: rgba(255,255,255,0.97) !important;
        }

        .navbar-brand .toolbar .dropdown a {
            cursor: pointer;
            color: #ffffff;
            /*border: 1px solid #eeeeee;*/
            padding: 10px;
            border-radius: 5px;
            font-size: 0.8em;
            display: inline-block;
        }

        .navbar-brand .toolbar .dropdown pre a {
            color: #428bca;
            padding: 0;
            font-size: 9.5px;
        }

        .navbar-brand .toolbar .dropdown a.blue {
            color: #428bca;
            padding: 0;
            font-size: 9.5px;
        }

        .navbar-brand .toolbar .dropdown pre a:hover {
            color: #2a6496;
        }

        .navbar-brand .toolbar .dropdown a:hover {
        }

        .navbar-brand .toolbar .dropdown.empty a:hover {
            background-color: #428bca;
        }

        .navbar-brand .toolbar .dropdown .dropdown-menu {
            margin-top: 15px;
            right: auto;
            left: 0;
        }

            .navbar-brand .toolbar .dropdown .dropdown-menu ul {
                margin: 0;
                padding: 0;
                list-style: none;
                font-size: 0.85em;
            }

                .navbar-brand .toolbar .dropdown .dropdown-menu ul.items {
                    max-height: 400px;
                    overflow: hidden;
                }

                .navbar-brand .toolbar .dropdown .dropdown-menu ul li {
                    border-bottom: 1px solid #eeeeee;
                    padding: 5px 10px;
                }

                    .navbar-brand .toolbar .dropdown .dropdown-menu ul li span.pill {
                        padding: 2px 8px 3px 8px;
                        border-radius: 10px;
                        font-size: 0.75em;
                    }

                        .navbar-brand .toolbar .dropdown .dropdown-menu ul li span.pill.outline.bg-color-red {
                            border: 1px solid #ff466d;
                            color: #ff466d;
                            background: none !important;
                        }

                        .navbar-brand .toolbar .dropdown .dropdown-menu ul li span.pill.outline.bg-color-green {
                            border: 1px solid #21b324;
                            color: #21b324;
                            background: none !important;
                        }

                        .navbar-brand .toolbar .dropdown .dropdown-menu ul li span.pill.outline.bg-color-grey {
                            border: 1px solid #8e8e8c;
                            color: #8e8e8c;
                            background: none !important;
                        }

                    .navbar-brand .toolbar .dropdown .dropdown-menu ul li.Read {
                        opacity: 0.6;
                    }

                    .navbar-brand .toolbar .dropdown .dropdown-menu ul li.Unread {
                        background-color: rgba(238,238,238,0.4);
                    }

                        .navbar-brand .toolbar .dropdown .dropdown-menu ul li.Unread.new {
                            background-color: rgba(66,139,202,0.2);
                        }

                    .navbar-brand .toolbar .dropdown .dropdown-menu ul li:last-child {
                        border: 0;
                    }

                    .navbar-brand .toolbar .dropdown .dropdown-menu ul li.menu {
                        background-color: rgba(255,255,255,1) !important;
                    }

                        .navbar-brand .toolbar .dropdown .dropdown-menu ul li.menu a,
                        .navbar-brand .toolbar .dropdown .dropdown-menu ul li div.menu a {
                            padding: 0 5px;
                            margin: 0 5px;
                            float: right;
                            border: 0;
                            color: #428bca;
                        }

                            .navbar-brand .toolbar .dropdown .dropdown-menu ul li.menu a:hover,
                            .navbar-brand .toolbar .dropdown .dropdown-menu ul li div.menu a:hover {
                                color: #2a6496;
                            }



                    .navbar-brand .toolbar .dropdown .dropdown-menu ul li span.subject {
                        font-weight: bold;
                        display: inline-block;
                    }

                    .navbar-brand .toolbar .dropdown .dropdown-menu ul li span.jobno {
                        display: inline-block;
                        float: right;
                        font-size: 0.8em;
                        font-weight: bold;
                    }

                    .navbar-brand .toolbar .dropdown .dropdown-menu ul li span.message {
                    }

            .navbar-brand .toolbar .dropdown .dropdown-menu .arrow,
            .navbar-brand .toolbar .dropdown .dropdown-menu .arrow:after,
            .dropdown .panel.btn + .dropdown-menu .arrow,
            .dropdown .panel.btn + .dropdown-menu .arrow:after {
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
            }

            .navbar-brand .toolbar .dropdown .dropdown-menu .arrow,
            .dropdown .panel.btn + .dropdown-menu .arrow {
                border-width: 11px;
            }

                .navbar-brand .toolbar .dropdown .dropdown-menu .arrow:after,
                .dropdown .panel.btn + .dropdown-menu.bottom .arrow:after {
                    border-width: 10px;
                    content: "";
                }



            .navbar-brand .toolbar .dropdown .dropdown-menu.bottom .arrow {
                top: -11px;
                left: 22px;
                margin-left: -10px;
                border-bottom-color: #999999;
                border-bottom-color: rgba(0, 0, 0, 0.25);
                border-top-width: 0;
            }

.dropdown .panel.btn + .dropdown-menu.bottom .arrow {
    top: -10px;
    right: 44px;
    margin-left: -10px;
    border-bottom-color: #999999;
    border-bottom-color: rgba(0, 0, 0, 0.25);
    border-top-width: 0;
}

    .navbar-brand .toolbar .dropdown .dropdown-menu.bottom .arrow:after,
    .dropdown .panel.btn + .dropdown-menu.bottom .arrow:after {
        top: 1px;
        margin-left: -10px;
        border-bottom-color: #ffffff;
        border-top-width: 0;
        content: " ";
    }

.sidebar-collapse li > a {
    display: block;
}

    .sidebar-collapse li > a:hover {
        background-color: #000000;
    }

.active-menu {
    background-color: #C90000 !important;
}

.arrow {
    float: right;
}

.fa.arrow:before {
    content: "\f104";
}

.active > a > .fa.arrow:before {
    content: "\f107";
}


.nav-second-level li,
.nav-third-level li {
    border-bottom: none !important;
}

    .nav-second-level li a {
        padding-left: 37px;
    }

    .nav-third-level li a {
        padding-left: 55px;
    }

.sidebar-collapse, .sidebar-collapse .nav {
    background: none;
}

    .sidebar-collapse .nav {
        padding: 0;
    }

        .sidebar-collapse .nav > li > a {
            color: #fff;
            background: #202020;
            text-shadow: none;
        }

    .sidebar-collapse > .nav li a {
        padding: 15px 10px;
        color: #ffffff;
    }

    .sidebar-collapse > .nav > li {
        border-bottom: 1px solid rgba(107, 108, 109, 0.19);
    }

        .sidebar-collapse > .nav > li ul {
            padding: 0;
        }

    /*.sidebar-collapse > .nav > li > ul > li > a {
        color:#ffffff;
        padding: 15px 10px;
    }*/

    .sidebar-collapse .nav > li a:hover {
        /*background: #0A0A0A;*/
        outline: 0;
    }

.nav-second-level > li > a:before,
.nav-third-level > li > a:before {
    content: "";
    display: block;
    position: absolute;
    left: 20px;
    width: 15px;
    height: 1px;
    background: #ff0000;
    top: 20px;
}

.nav-second-level > li > a:after,
.nav-third-level > li > a:after {
    content: "";
    display: block;
    position: absolute;
    left: 20px;
    width: 1px;
    height: 100%;
    background: #ff0000;
    top: 0px;
    z-index: 10;
}

.nav-second-level > li:last-child > a:after,
.nav-third-level > li:last-child > a:after {
    height: 50%;
}

.nav-third-level > li > a:after,
.nav-third-level > li > a:before {
    left: 40px;
}

.navbar-side {
    border: none;
    background-color: #202020;
}

.navbar-cls-top {
    background: #4D4D4D;
    border-bottom: none;
}

.navbar-default {
    border: 0px solid black;
}

.navbar-header {
    display: block;
    width: 100%;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    /*background-color: #B40101;*/
}

.nav > li a i {
    margin-right: 10px;
}

.nav ul.sub-level {
    display: none;
}

.nav li.sub-level-activator:hover ul.sub-level, .nav li.sub-level-activator:hover {
    display: block;
    background-color: #000000 !important;
}

.nav ul.sub-level {
}

    .nav ul.sub-level a {
        padding-left: 30px !important;
        padding: 5px;
    }

        .nav ul.sub-level a span {
            line-height: 1.5em !important;
            font-size: 12px;
            margin-top: -2px;
        }

.nav-toolbar {
    /*position: absolute;*/
    bottom: 0;
    right: 0;
    text-align: right;
}

.sidebar-right {
    position: fixed;
    right: 0;
    width: 0px;
    /*background-color:#333333;*/
    background: none !important;
    border-right: 4px solid #333333;
    padding-left: 15px;
    z-index: 1001;
}

    .sidebar-right div.handle {
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 75px;
        background-color: #333333;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
        cursor: pointer;
    }

        .sidebar-right div.handle i {
            margin-top: 30px;
            margin-left: 2px;
            opacity: 0.5;
            font-size: 16px;
        }

        .sidebar-right div.handle:hover i {
            opacity: 0.7;
        }

    .sidebar-right div.sidebar-content {
        background-color: #333333;
        height: inherit;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 15px;
        right: 0;
        bottom: 0;
        z-index: 1000 !important
    }

    .sidebar-right.expanded div.sidebar-content {
        overflow-y: auto;
    }

    .sidebar-right .margin-left {
        margin-left: 15px !important;
    }

    .sidebar-right h3 {
        font-weight: bold;
        padding-bottom: 15px;
        display: block;
        border-bottom: 1px dotted #ffffff;
        opacity: 0.5;
        font-size: 20px;
    }

.panel-small .description {
    font-size: 0.7em;
}

.panel-small {
    padding: 10px;
    min-height: 50px;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active {
    z-index: unset !important;
}
/*==============================================
    UI ELEMENTS STYLES     
    =============================================*/
.btn-circle {
    width: 50px;
    height: 50px;
    padding: 6px 0;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    text-align: center;
    font-size: 12px;
    line-height: 1.428571429;
}

/* JQUERY UI Timepicker styling */
.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
}

.ui-timepicker-div dl {
    text-align: left;
}

    .ui-timepicker-div dl dt {
        float: left;
        clear: left;
        padding: 0 0 0 5px;
    }

    .ui-timepicker-div dl dd {
        margin: 0 10px 10px 40%;
    }

.ui-timepicker-div td {
    font-size: 90%;
}

.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.ui-timepicker-div .ui_tpicker_unit_hide {
    display: none;
}

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
    background: none;
    color: inherit;
    border: none;
    outline: none;
    border-bottom: solid 1px #555;
    width: 95%;
}

    .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus {
        border-bottom-color: #aaa;
    }

.ui-timepicker-rtl {
    direction: rtl;
}

    .ui-timepicker-rtl dl {
        text-align: right;
        padding: 0 5px 0 0;
    }

        .ui-timepicker-rtl dl dt {
            float: right;
            clear: right;
        }

        .ui-timepicker-rtl dl dd {
            margin: 0 40% 10px 10px;
        }

/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine {
    padding-right: 2px;
}

    .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
    .ui-timepicker-div.ui-timepicker-oneLine dt {
        display: none;
    }

    .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
        display: block;
        padding-top: 2px;
    }

    .ui-timepicker-div.ui-timepicker-oneLine dl {
        text-align: right;
    }

        .ui-timepicker-div.ui-timepicker-oneLine dl dd,
        .ui-timepicker-div.ui-timepicker-oneLine dl dd > div {
            display: inline-block;
            margin: 0;
        }

            .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
            .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before {
                content: ':';
                display: inline-block;
            }

            .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
            .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before {
                content: '.';
                display: inline-block;
            }

    .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
    .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before {
        display: none;
    }


/* JQuery UI Sprtable styling*/
ul.sortable {
    list-style: none;
    padding: 0;
    margin: 0;
}

    ul.sortable li {
        cursor: pointer;
        position: relative;
    }

        ul.sortable li div.sorter {
            position: absolute;
            top: 50%;
            left: 4.15%;
            margin-left: -8px;
            margin-top: -24px;
        }

            ul.sortable li div.sorter i {
                opacity: 0.5;
            }

                ul.sortable li div.sorter i:hover {
                    opacity: 1;
                }

        ul.sortable li p.text-edit {
            position: absolute;
            bottom: 5px;
            right: 10px;
            opacity: 0;
            margin: 0;
        }

        ul.sortable li:hover p.text-edit {
            opacity: 0.4;
        }

        ul.sortable li div.delete {
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -28px;
            width: 8.33%;
            text-align: right;
        }

.fstSingleMode, .fstMultipleMode {
    border-radius: 5px;
    display: block;
}

    .fstSingleMode .fstToggleBtn {
        padding: 6px 30px 6px 12px;
        height: 34px;
        font-size: 14px;
    }

        .fstSingleMode .fstToggleBtn:after {
        }

    .fstSingleMode.fstActive .fstControls {
        margin-top: 3px;
    }

    .fstSingleMode .fstQueryInput {
        padding: 6px 12px;
        font-size: 12px;
    }

.fstResultItem {
    font-size: 12px;
    padding: 3px 12px;
}

.fstChoiceItem {
    padding: 3px 12px 3px 18px;
    font-size: 12px;
}

.fstMultipleMode .fstQueryInput {
    font-size: 12px;
}

.fstMultipleMode .fstControls {
    width: auto;
}

.fstNoResults {
    font-size: 12px;
    padding: 3px 12px;
}

.fstMultipleMode .fstControls {
    max-height: 200px !important;
    overflow: auto;
}

#EstimateTarget {
    display: block;
    width: 80%;
    margin: 0 auto;
}

.estimate-loading {
    height: 250px;
    width: 100%;
    position: relative;
}

    .estimate-loading i {
        position: absolute;
        top: 50%;
        left: 50%;
    }

td.yes-no {
    padding-top: 15px !important;
}

    td.yes-no i {
        font-size: 16px;
    }

td.star {
    min-width: 96px;
}

td.no-wrap {
    width: 1%;
    white-space: nowrap;
}

div.stars-wrapper {
    display: inline-block;
    width: 25%;
    position: absolute;
    top: 13px;
    right: 10px;
}

div.star:before {
    content: '★';
    font-size: 1.8em;
    float: left;
    width: 16px;
}

div.star.small:before {
    font-size: 1em;
    width: 20%;
    text-align: center;
}

div.star.large:before {
    font-size: 2.8em;
    width: 20%;
    text-align: center;
}

div.star.hollow:before {
    content: '☆';
    font-size: 1.8em;
}

div.star.hollow.small:before {
    font-size: 1em;
}

div.star.hollow.large:before {
    font-size: 2.8em;
}

div.survey-answer span.yes-no-icon-box {
    margin: 0 auto !important;
    float: none;
}

div.stars i, div.stars-inactive i {
    font-size: 20px;
    /*text-shadow: 0px 0px 2px #333333;*/
}

div.stars-inactive i {
    opacity: 0.15;
}

div.stars-inactive span {
}

ul.chart-key {
    padding: 0;
    margin: 30px 0 0 0;
    list-style: none;
}

    ul.chart-key li {
        display: block;
        padding: 0 0 5px 0;
        font-size: 12px;
        line-height: 20px;
    }

        ul.chart-key li div {
            width: 20px;
            height: 20px;
            display: inline-block;
        }


/*
            BMS Styling

        */

div.bms-logo {
    position: absolute !important;
    top: 10px !important;
    left: 20px;
    width: 50px !important;
    height: 50px !important;
    background-repeat: no-repeat;
    background-size: contain;
}


.bms-layout #page-wrapper {
    margin-top: 70px !important;
}

.deployment-map-target {
    padding: 66% 0 0 0;
}

.google-map-info-window {
    width: 500px;
}

    .google-map-info-window table {
        line-height: 1.5em;
        font-size: 1em;
    }


.addresses-wrapper .radio-wrapper {
    height:120px;
    overflow-y:auto;
}

.addresses-wrapper .radio-wrapper .cr i:before {
    content:unset !important;
}

/*==============================================
    MEDIA QUERIES     
    =============================================*/
@media(min-width:768px) {
    .navbar-default .navbar-toggle {
        border-color: #fff;
    }

        .navbar-default .navbar-toggle .icon-bar {
            background-color: #FFF;
        }

    .navbar-cls-top .navbar-brand div.logo {
        margin: 5px 0px 10px 5px !important;
        background-position: 0px center !important;
        position: static;
        float: left;
    }

    #wrapper {
        padding-left: 50px;
    }


    div#wrapper.bms-layout {
        padding: 0px 20px 20px 20px;
    }

    #page-wrapper {
        margin: 0;
        padding: 119px 30px 15px 30px;
        min-height: 1200px;
    }



    div.bms-layout #page-wrapper {
        padding: 30px;
        border: 1px solid #e3e3e3;
        border-radius: 5px;
    }

    .navbar {
        position: fixed;
        /*opacity: 0.97;*/
        width: 100%;
        /*background-color: #ffffff;*/
        z-index: 1001;
    }

    .navbar-header {
        height: 115px;
    }

    .navbar-cls-top .navbar-brand {
        height: 100%;
        margin: 0;
        padding: 0;
        background-position: 10px center !important;
        /*background-size: contain;*/
    }

    .navbar-side {
        z-index: 2;
        position: fixed;
        width: 50px;
        opacity: 0.97;
        overflow-x: hidden;
        margin-top: 119px;
        /*overflow-y:auto !important;*/
    }

    .sidebar-right {
        width: 15px;
    }

    .navbar-side .user-container {
        position: relative;
    }



        .navbar-side .user-container div.image {
            display: block;
            width: 50px;
            float: left;
        }

        .navbar-side .user-container div.content {
            display: block;
            width: 200px;
            position: absolute;
            top: 0;
            left: 50px;
            margin: 25px 0 0 0;
            padding: 0;
            color: #ffffff;
            text-align: left;
        }

            .navbar-side .user-container div.content small {
                font-size: 0.9em;
            }

            .navbar-side .user-container div.content a {
                margin: 0;
                padding: 0;
                color: #ffffff;
                border-bottom: 1px dotted #ffffff;
                display: inline;
                font-size: 0.75em;
                background: none !important;
            }

                .navbar-side .user-container div.content a:hover {
                    border-bottom: 1px solid #ffffff;
                }

    .navbar-side li a {
        display: block;
        width: 250px;
    }

        .navbar-side li a span {
            /*display:none;*/
            opacity: 0;
            line-height: 2em;
            float: left;
        }

        .navbar-side li a.sub-menu {
            padding: 0px 20px;
        }

            .navbar-side li a.sub-menu i {
                padding-top: 5px;
            }

            .navbar-side li a.sub-menu span {
                font-size: 0.8em;
            }

    .navbar-side li span.label {
        padding-top: 1em;
        display: block;
        text-align: left;
        opacity: 0;
    }

    .navbar-side li a i {
        display: block;
        float: left;
    }

    .navbar-side li.user-image img {
        width: 40px;
        height: 40px;
    }

    .navbar-default.navbar-side {
        margin-left: -50px;
    }

    .navbar {
        border-radius: 0px;
        margin-left: -50px;
    }

    .navbar-brand .toolbar .dropdown .dropdown-menu {
        right: 0;
        left: auto;
        width: 450px;
    }

    .navbar-brand .toolbar .dropdown.queries .dropdown-menu {
        right: unset;
    }

    .navbar-brand .toolbar .dropdown.aidememoire .dropdown-menu.bottom .arrow {
        right: 22px;
        left: auto;
    }

    .navbar-brand .toolbar .dropdown .dropdown-menu.bottom .arrow {
        right: 66px;
        left: auto;
    }

    .navbar-brand .toolbar .dropdown.queries .dropdown-menu.bottom .arrow {
        right: unset;
        left: 66px;
    }

    .navbar-brand .toolbar .dropdown .dropdown-menu .ui-accordion-content {
        padding: 10px;
    }

    .nav-identity {
        /*margin: 9px;*/
        margin-right: 16px;
        display: block;
    }

        .nav-identity span, .nav-identity a {
            display: inline-block;
            white-space: nowrap;
        }

        .nav-identity div div {
            white-space: nowrap;
        }

        .nav-identity span {
            margin-right: 0;
            padding-right: 5px;
            border-right: 1px solid #eeeeee;
        }

        .nav-identity > div {
            /*bottom: 0 !important;*/
            padding-top: 62px;
            position: static;
        }

    .navbar-brand .toolbar {
        float: right;
    }

    div.row.job-history div.well.noti-box span.icon-box + div {
        width: calc(100% - 80px) !important;
    }

    .alert {
        left: auto !important;
    }

    #uploaded, .layout-columns {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
    }

    .navbar-brand .toolbar .dropdown.notifications {
        padding-top: 70px;
        position: static;
        float: right;
        margin: 0 10px;
    }

    .navbar-brand .toolbar .notifications-onscreen-wrapper {
        float: right !important;
    }

    .navbar-brand .toolbar .dropdown.queries {
        /*right: unset !important;*/
    }

    .search label {
        width: 40%;
    }

    #ContactsTarget {
        columns: 2;
    }

        #ContactsTarget .contact-wrapper, #ContactsTarget div {
            -webkit-column-break-inside: avoid; /* Chrome, Safari */
            page-break-inside: avoid; /* Theoretically FF 20+ */
            break-inside: avoid-column; /* IE 11 */
            display: table; /* Actually FF 20+ */
        }

    div.auto-content-position {
        position: absolute;
    }
}

@media(min-width:992px) {

    .row-pad-bottom-mobile, .row-2x-pad-bottom-mobile {
        padding-bottom: 0;
    }

    .row-pad-bottom {
        padding-bottom: 15px;
    }

    .row-pad-bottom-10 {
        padding-bottom: 10px;
    }

    .row-pad-bottom-5 {
        padding-bottom: 5px;
    }

    .row-pad-top-mobile, .row-2x-pad-top-mobile {
        padding-top: 0;
    }

    .row-pad-top {
        padding-top: 15px;
    }

    .search label {
        width: 50%;
    }
}