.block {
    display: block;
}

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

.mdi-spin:before {
    -webkit-animation: mdi-spin 2s infinite linear;
    animation: mdi-spin 2s infinite linear;
}

/* Preferred Vendor Page */
.preferred-vendor-title {
    font-size: 1.5em;
    font-weight: 600;
}

.preferred-vendor-subtitle {
    font-size: 1.1em;
    margin-left: 20px;
    width: 185px;
}

.preferred-vendor-comment {
    text-align: center;
    width: 50px;
}

.preferred-vendor-supplier {
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    margin-right: 15px;
    padding: 5px 10px;
}

.preferred-vendor-supplier.primary {
    background-color: #21CE9E1A;
    color: #21CE9E;
}

.preferred-vendor-supplier.secondary {
    background-color: #0EA5E81A;
    color: #0EA5E8;
}

/* Login */
.fade-in {
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-name: fadeInDown;
}

.login-panel {
    background-color: #FFF;
    border-radius: 15px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    margin: 100px auto 0 auto;
    max-width: 400px;
    padding: 20px;
}

.login-panel img {
    height: 100px;
    margin: auto;
}

.login-panel .welcome-message {
    color: #676A6C;
    font-size: 24px;
    font-weight: bold;
    margin: 30px auto;
}

.login-panel .forgotten-password-description {
    margin: -10px 30px 30px 30px;
    text-align: center;
}

.login-panel .form-label {
    font-size: 14px;
    margin-bottom: 2px;
}

.login-panel .input-group {
    margin-bottom: 15px;
    position: relative;
}

.login-panel .input-group i {
    color: #A5A5A5;
    font-size: 20px;
    left: 7px;
    position: absolute;
    top: 2px;
    z-index: 5;
}

.login-panel input {
    background: #F5F5F5;
    border: 1px solid #F5F5F5;
    border-radius: 8px !important;
    padding-left: 45px;
}

.login-panel input:focus {
    border-color: #1AB394;
}

.login-panel a.btn {
    height: 45px;
    line-height: 32px;
}

.login-panel a.link {
    margin: 5px auto 20px auto;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -ms-transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(
                0
        );
        -webkit-transform: translateY(
                0
        );
        transform: translateY(
                0
        );
    }
}

/* Date Selector */
.date-selector {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 10px;
}

.date-selector .date-header {
    border-left: none;
    border-radius: 0px;
    border-right: none;
}

.date-selector .left-arrow, .date-selector .right-arrow {
    align-items: center;
    background-color: #EAEAEA;
    display: flex;
    padding: 0 10px;
}

.date-selector .left-arrow:hover, .date-selector .right-arrow:hover {
    background-color: #D9D9D9;
    color: inherit;
}

.date-selector .left-arrow {
    border-radius: 10px 0 0 10px;
}

.date-selector .right-arrow {
    border-radius: 0 10px 10px 0;
}

/* Topbar */
.oneclick-topbar {
    align-items: center;
    background-color: #2C9781;
    color: #E2EEF3;
    display: flex;
    margin: 0 -15px;
    padding: 15px 25px;
}

.oneclick-topbar .title {
    font-size: 20px;
}

.oneclick-topbar .title:hover {
    color: #E2EEF3;
}

.oneclick-topbar .oneclick-topbar-left {
    align-items: center;
    display: flex;
    justify-content: start;
}

.oneclick-topbar .oneclick-topbar-right {
    align-items: center;
    display: flex;
    justify-content: end;
    margin-left: auto;
}

.oneclick-topbar .user {
    align-items: center;
    display: flex;
    font-size: 14px;
    margin-left: 20px;
}

.oneclick-topbar .business-selector:hover, .oneclick-topbar .user:hover {
    cursor: pointer;
}

.oneclick-topbar .topbar-icon {
    position: relative;
}

.oneclick-topbar .topbar-icon i {
    color: #E2EEF3;
}

.oneclick-topbar .topbar-icon i:hover {
    color: #FFF;
}

.oneclick-topbar .badge {
    position: absolute;
    right: 5px;
    top: -5px;
}

.oneclick-topbar .ui-menu {
    border: none;
    border-radius: 0px;
    font-size: 14px;
    padding: 0px;
    width: 100%;
}

.oneclick-topbar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
    border: none;
    color: #676A6C;
    margin: 0;
    padding: 15px 20px;
}

.oneclick-topbar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover {
    background: none;
    background-color: #F3F3F4;
    border: none;
    color: #676A6C;
}

.oneclick-topbar .ui-menu.ui-widget .ui-menuitem-link .ui-menuitem-icon {
    margin-left: 0;
    margin-right: 5px;
}

.oneclick-topbar .ui-overlaypanel {
    background-color: #2C9781;
    border: none;
    border-radius: 20px;
    box-shadow: none;
    margin-top: 30px;
}

.oneclick-topbar .ui-overlaypanel .business-item {
    color: #676A6C;
}

.oneclick-topbar .ui-overlaypanel .ui-overlaypanel-content {
    padding: 0;
}

.oneclick-topbar .user img {
    border-radius: 50%;
    margin-right: 15px;
    width: 40px;
}

.oneclick-topbar .quick-link-button {
    align-items: center;
    background-color: #FFFFFF3B;
    border-radius: 20px;
    color: #E2EEF3 !important;
    display: flex;
    height: 40px;
    margin-right: 15px;
    padding: 2px 11px 0 11px;
}

.oneclick-topbar .quick-link-button i {
    font-size: 1.5em;
}

.oneclick-topbar .quick-link-button .text {
    font-weight: bold;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
    width: 0px;
}

.oneclick-topbar .quick-link-button:hover .text {
    padding-left: 10px;
    width: 120px;
}

/* A quick link with a count on its corner, e.g. today's errors */
.oneclick-topbar .topbar-alert {
    position: relative;
}

.oneclick-topbar .topbar-alert-count {
    align-items: center;
    background-color: #D9534F;
    border-radius: 10px;
    color: #FFFFFF;
    display: flex;
    font-size: 11px;
    font-weight: bold;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding: 0 5px;
    pointer-events: none;
    position: absolute;
    right: 6px;
    top: -6px;
}

.oneclick-topbar .navbar-toggle {
    align-items: center;
    background-color: #FFFFFF3B;
    border-radius: 20px;
    color: #E2EEF3;
    display: none;
    height: 40px;
    margin: 0 15px 0 0;
    padding: 13px;
}

body.body-small .oneclick-topbar .navbar-toggle {
    display: flex;
}

/* Font */
body {
    font-family: "Nunito Sans", "Open Sans", "Karla", "Sans Serif",
    "Arial" !important;
}

.gray-bg {
    background-color: #F0F0F5;
}

.modal-content {
    border-radius: 20px;
}

/* Ibox */
.md-skin .ibox, .ibox {
    background-color: #FFF;
    border-radius: 15px;
    padding: 15px;
}

.ibox .ibox-title {
    padding: 0;
}

.ibox .ibox-content {
    padding: 0 0 15px 0;
}

.ibox .ibox-footer {
    padding: 15px 0 0 0;
}

/* Well */
.well {
    border-radius: 10px;
}

/* Flex Box */
.flex {
    align-items: start;
    display: flex;
}

.flex-right {
    margin-left: auto !important;
}

.flex-left {
    margin-right: auto !important;
}

.flex-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.flex-top {
    align-items: start !important;
}

.flex-middle {
    align-items: center !important;
}

.flex-bottom {
    align-items: end !important;
}

.top-navigation .wrapper.wrapper-content {
    padding: 30px 10px 200px 10px;
}

/* Select Many Button */
body .ui-selectmanybutton, body .ui-selectonebutton {
    border-radius: 10px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    padding: 0;
}

body .ui-selectmanybutton .ui-button, body .ui-selectonebutton .ui-button {
    background-color: #F3F3F4;
    border: none;
    box-shadow: none;
    font-weight: normal;
    padding: 5px;
}

body .ui-selectmanybutton .ui-button:first-child, body .ui-selectonebutton .ui-button:first-child {
    border-left: none;
    border-radius: 10px 0 0 10px;
}

body .ui-selectmanybutton .ui-button:last-child, body .ui-selectonebutton .ui-button:last-child {
    border-left: none;
    border-radius: 0 10px 10px 0;
}

body .ui-selectmanybutton .ui-button span, body .ui-selectonebutton .ui-button span {
    text-shadow: none;
}

body .ui-selectmanybutton .ui-button.ui-state-active, body .ui-selectonebutton .ui-button.ui-state-active {
    background-color: #1AB394;
    color: #FFF;
}

body .ui-selectmanybutton .ui-button.ui-state-hover, body .ui-selectonebutton .ui-button.ui-state-hover {
    background-color: #E3E3E3;
}

body .ui-selectmanybutton .ui-button.ui-state-active:hover, body .ui-selectonebutton .ui-button.ui-state-active:hover {
    background-color: #14977D;
    color: #FFF;
}

/* Essentials Quote */
.essential-quote-tab {
    background-color: #FFF;
    border-bottom: 5px solid #E2E2E2;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    display: inline-block;
    margin: 0 10px 25px 10px;
    padding: 20px 30px 15px 30px;
    width: fit-content;
}

.essential-quote-tab.active {
    border-bottom: 5px solid #1AB394;
}

.essential-quote-tab:hover {
    background-color: #F6F6F6;
    cursor: pointer;
}

.essential-quote-tab h3 {
    margin: 0px;
}

/* Project Prospect Chart */
.project-prospect-chart-wrapper {
    font-size: 0px;
    padding: 20px 40px 20px 40px;
}

.project-prospect-chart-wrapper .section {
    cursor: pointer;
    display: inline-block;
    height: 100px;
}

.unvalidated {
    background-color: #87D0FF;
}

.unvalidated:hover {
    background-color: #70B9E7;
}

.validated {
    background-color: #1C84C6;
}

.validated:hover {
    background-color: #1072B1;
}

.thirty {
    background-color: #D9534F;
}

.thirty:hover {
    background-color: #C13F3B;
}

.sixty {
    background-color: #F79703;
}

.sixty:hover {
    background-color: #E28A02;
}

.ninety {
    background-color: #8CE0CF;
}

.ninety:hover {
    background-color: #79CCBB;
}

.converted {
    background-color: #1AB394;
}

.converted:hover {
    background-color: #129B7F;
}

/* Current Location Menu */
.current-location-menu.ui-menu {
    border: none;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    max-height: 500px;
    overflow-y: auto;
    padding: 0px;
    width: fit-content;
}

.current-location-menu.ui-menu.ui-widget .ui-menu-list .ui-widget-header {
    background-color: #EEE;
    margin: 0px;
    padding: 10px;
}

.current-location-menu.ui-menu.ui-widget .ui-menu-list .ui-widget-header h3 {
    margin: 0px;
    padding: 0px;
}

.current-location-menu.ui-menu.ui-widget .ui-menu-list .ui-menuitem,
.current-location-menu.ui-menu.ui-widget .ui-menu-list .ui-menuitem .ui-menuitem-text {
    margin: 0px;
    padding: 0px;
}

.current-location-menu.ui-menu.ui-widget .ui-menu-list .ui-menuitem a {
    margin: 0px;
    padding: 5px 10px;
}

.current-location-menu.ui-menu.ui-widget .ui-menu-list .ui-menuitem a.ui-state-hover {
    background: #1AB394;
}

/* Save Conflict */
.save-conflict-popup.ui-dialog.ui-widget-content {
    min-width: 600px;
}

.save-conflict-popup.ui-dialog.ui-widget-content .ui-dialog-title {
    font-size: 16px;
}

/* Business */
.business-panel {
    display: flex;
    justify-content: end;
    margin-right: 15px;
    margin-top: 15px;
}

.sub-business-panel {
    display: flex;
    justify-content: end;
    margin-bottom: 15px;
}

.business-item:hover {
    background-color: #EDEDED;
    border-color: #A1A1A1;
}

.business-item img {
    line-height: 50px;
}

.business-item i.fa-globe {
    font-size: 3.5em;
    margin: 0 10px;
}

.business-item {
    background-color: #E7E7E7;
    border: none;
    border-radius: 15px;
    box-shadow: none;
    height: 70px;
    margin: 0 5px;
    padding: 10px 15px 5px 15px;
    text-align: center;
}

.business-item:hover {
    background-color: #CDCDCD;
    border-bottom-color: #CDCDCD;
}

.sub-business-panel .business-item {
    border-radius: 10px;
    height: 55px;
}

.sub-business-panel .business-item img {
    height: 28px;
}

.sub-business-panel .business-item i {
    font-size: 30px;
}

@media screen and (max-width: 896px) {
    .business-panel, .sub-business-panel {
        margin-right: 5px;
    }

    .business-panel .business-item {
        height: 45px !important;
    }

    .business-panel .business-item img {
        height: 25px;
    }

    .business-panel .business-item i.fa-globe {
        font-size: 1.8em;
    }

    .sub-business-panel .business-item {
        height: 35px !important;
    }

    .sub-business-panel .business-item img {
        height: 20px;
    }

    .sub-business-panel .business-item i.fa-globe {
        font-size: 1.5em;
    }

    #businessForm {
        padding-top: 35px;
    }
}

/* Group Forecast */
.forecast-red {
    background-color: #FF9497;
    border-bottom: #FF9497 !important;
    border-top: #FF9497 !important;
    color: #676A6C;
}

.forecast-pink {
    background-color: #FCE4D6;
    border-bottom: #FCE4D6 !important;
    border-top: #FCE4D6 !important;
    color: #676A6C;
}

.forecast-yellow {
    background-color: #FFF2CC;
    border-bottom: #FFF2CC !important;
    border-top: #FFF2CC !important;
    color: #676A6C;
}

.forecast-purple {
    background-color: #D9E1F2;
    border-bottom: #D9E1F2 !important;
    border-top: #D9E1F2 !important;
    color: #676A6C;
}

.forecast-grey {
    background-color: #D9D9D9;
    border-bottom: #D9D9D9 !important;
    border-top: #D9D9D9 !important;
    color: #676A6C;
}

.forecast-white {
    background-color: #FFF;
    border-bottom: #FFF !important;
    border-top: #FFF !important;
    color: #676A6C;
}

.forecast-blue td {
    background-color: #DDEBF7 !important;
    border-bottom: #DDEBF7 !important;
    border-top: #DDEBF7 !important;
    color: #676A6C !important;
}

.forecast-green td {
    background-color: #E2EFDA !important;
    border-bottom: #E2EFDA !important;
    border-top: #E2EFDA !important;
    color: #676A6C !important;
}

/* Primefaces Rating */
.ui-widget-content .ui-rating.ui-state-disabled {
    background-color: inherit;
    opacity: 1;
}

/* Primefaces Tooltip */
body .ui-tooltip .ui-tooltip-text {
    background-color: #1AB394;
    border-radius: 8px;
    color: #FFF;
    opacity: 1;
    padding: 8px 15px;
}

body .ui-tooltip.ui-tooltip-right .ui-tooltip-arrow {
    border-right-color: #1AB394;
}

body .ui-tooltip.ui-tooltip-left .ui-tooltip-arrow {
    border-left-color: #1AB394;
}

body .ui-tooltip.ui-tooltip-top .ui-tooltip-arrow {
    border-top-color: #1AB394;
}

body .ui-tooltip.ui-tooltip-bottom .ui-tooltip-arrow {
    border-bottom-color: #1AB394;
}

/* New Call */
.new-call .equipment-description {
    font-size: 18px;
    max-width: 1200px;
}

.new-call .asset-serial {
    border-top: 2px solid #868686;
    margin: auto;
    margin-top: 8px;
    padding-top: 5px;
    width: fit-content;
}

.new-call .warranty-label {
    border: 2px solid #1AB394;
    border-radius: 50%;
    color: #1AB394;
    font-size: 14px;
    font-weight: bold;
    height: 115px;
    margin: auto;
    padding: 15px;
    text-align: center;
    width: 115px;
}

.new-call .warranty-label i {
    font-size: 2.5em;
    margin-bottom: 10px;
}

/* Quote Picker */
.quote-picker {
    background-color: #1AB394;
    border-radius: 20px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    height: 40px;
    margin: auto;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    width: 260px;
}

.quote-picker .left {
    color: #FFF;
    font-size: 2.7em;
    left: 10px;
    position: absolute;
    top: 4px;
}

.quote-picker .right {
    color: #FFF;
    font-size: 2.7em;
    position: absolute;
    right: 10px;
    top: 4px;
}

.quote-picker .title {
    color: #FFF;
    font-size: 16px;
    margin: auto;
    text-align: center;
}

.quote-picker .subtitle {
    color: #FFF;
    font-size: 12px;
    margin: auto;
    text-align: center;
}

.two-man-job-number {
    color: #FFF;
    font-size: 14px;
    left: 2px;
    top: 11px;
}

.activatable {
    padding-top: 35px;
    position: relative;
}

.activatable .active-label {
    background-color: #1AB394;
    color: #FFF;
    display: none;
    left: 0;
    padding: 4px 8px;
    position: absolute;
    top: 0;
}

.activatable.active {
    border: 2px solid #1AB394 !important;
}

.activatable.active .active-label {
    display: block;
}

.test-banner {
    background-color: #ED5565;
    color: #FFF;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 -15px;
    padding: 5px;
    text-align: center;
}

/* System banner - the same bar as above, recoloured by priority */
.system-banner-low {
    background-color: #1C84C6;
}

.system-banner-medium {
    background-color: #F8AC59;
    color: #2F343B;
}

.system-banner-high {
    background-color: #ED5565;
}

.system-banner-title {
    font-weight: bold;
    margin-right: 8px;
}

.system-banner-text {
    font-weight: normal;
}

.system-banner-dismiss {
    float: right;
    color: inherit !important;
    opacity: 0.8;
    margin-right: 10px;
}

.system-banner-dismiss:hover {
    opacity: 1;
}

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

/* Navbar */
.navbar {
    min-height: inherit;
}

.navbar-nav {
    margin: 0px;
}

.md-skin .navbar-fixed-top, .md-skin .navbar-static-top {
    background-color: #FFF;
    box-shadow: none;
}

.navbar-wrapper {
    background-color: #FFF;
    border-bottom: none;
    box-shadow: 0 .125rem .25rem #0000000D;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
}

.navbar-wrapper a, .md-skin .nav > li > a {
    font-size: 13px;
    padding: 15px;
}

.md-skin .nav > li > a:hover {
    color: #000 !important;
}

.navbar-wrapper a {
    color: #727272 !important;
}

.navbar-wrapper a:hover {
    color: #000 !important;
}

.navbar-wrapper a .flex {
    align-items: center;
}

.navbar-wrapper a i.mdi-chevron-down {
    font-size: 18px;
    margin-left: 5px;
    margin-right: 0;
}

.navbar-wrapper a i.icon {
    color: #ADADAD;
    font-size: 18px;
    margin-right: 5px;
}

.navbar-wrapper a i.fa-fw {
    color: #ADADAD;
    font-size: 14px;
    margin-right: 15px;
}

.navbar-wrapper a:hover i.icon, .navbar-wrapper a:hover i.fa-fw {
    color: #000;
}

.top-navigation .navbar-nav .dropdown-menu {
    border: none;
    border-radius: 0 0 20px 20px;
    border-top: 4px solid #1AB394;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.top-navigation .navbar-nav .dropdown-menu li:last-child a {
    border-radius: 0 0 20px 20px;
}

/* Mobile Size Navbar */
body.body-small .navbar-wrapper {
    padding-left: 0px;
}

body.body-small.top-navigation .navbar-nav .dropdown-menu {
    border-radius: 0;
    box-shadow: none;
}

body.body-small.top-navigation .navbar-nav .dropdown-menu a {
    padding-left: 30px;
}

body.body-small .navbar .dropdown {
    border-left: 4px solid transparent;
}

body.body-small .navbar .dropdown.open {
    border-left: 4px solid #1AB394;
}

body.body-small .navbar-nav .dropdown-menu {
    border-top: none;
}

body.body-small .navbar-collapse {
    padding: 0;
}

/* Supplier Portal */
.supplier-rate-schedule {
    margin-bottom: 30px;
    width: 100%;
}

.supplier-rate-schedule .day {
    display: table;
    height: 40px;
    margin-bottom: 5px;
    width: 100%;
}

.supplier-rate-schedule .day-name {
    display: table-cell;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    width: 100px;
}

.supplier-rate-schedule .zones {
    display: table-cell;
    font-weight: bold;
    height: 40px;
    text-align: center;
    width: auto;
}

.supplier-rate-schedule .zone-wrapper {
    display: table;
    height: 40px;
    width: 100%;
}

.supplier-rate-schedule .zone {
    border-right: 2px solid #FFF;
    color: #FFF;
    display: table-cell;
    height: 40px;
    line-height: 40px;
    max-width: 0;
    overflow: hidden;
    padding: 0px 5px;
    text-align: center;
    text-overflow: ellipsis;
    transition: all 0.4s;
    white-space: nowrap;
}

.supplier-rate-schedule .zone:hover {
    cursor: pointer;
}

.supplier-rate-schedule .zone.cheapest-rate {
    background-color: #1AB394;
}

.supplier-rate-schedule .zone.cheapest-rate:hover {
    background-color: #14967C;
}

.supplier-rate-schedule .zone.middle-rate {
    background-color: #F79703;
}

.supplier-rate-schedule .zone.middle-rate:hover {
    background-color: #CC7C02;
}

.supplier-rate-schedule .zone.most-expensive-rate {
    background-color: #D9534F;
}

.supplier-rate-schedule .zone.most-expensive-rate:hover {
    background-color: #B33C38;
}

.supplier-rate-schedule .heading-wrapper {
    display: table;
    height: 25px;
    width: 100%;
}

.supplier-rate-schedule .heading-buffer {
    display: table-cell;
    height: 25px;
    width: 100px;
}

.supplier-rate-schedule .headings {
    display: table-cell;
    font-size: 1.4em;
    font-weight: bold;
    position: relative;
    width: auto;
}

.supplier-rate-schedule .headings .heading {
    position: absolute;
}

.supplier-rate-schedule .headings .start-day {
    left: -4px;
}

.supplier-rate-schedule .headings .start-work {
    left: 37.6%;
}

.supplier-rate-schedule .headings .end-work {
    left: 70.3%;
}

.supplier-rate-schedule .headings .end-day {
    right: -8px;
}

.supplier-portal-total {
    background-color: #1AB394;
    color: #FFF;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 30px;
    padding: 15px;
    text-align: center;
}

.supplier-portal-total-red {
    background-color: #D9534F;
}

.supplier-portal-total h2 {
    margin: 0;
}

.supplier-portal-warning {
    background-color: #F5F5F5;
    color: #D9534F;
    margin-left: -15px;
    margin-right: -15px;
    padding: 15px;
    text-align: center;
}

.query-chat {
    background-color: #F3F3F4;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
    padding: 15px 20px;
    vertical-align: top;
    width: fit-content;
}

.query-chat small {
    float: right;
    font-style: italic;
}

.query-icon {
    display: inline-block;
    width: 160px;
}

.query-icon p {
    font-weight: bold;
    line-height: 48px;
    margin: 0;
}

.query-opened {
    background-color: #ED5565;
    border-radius: 4px;
    color: #FFF;
    margin-left: 162px;
    padding: 10px 20px;
    width: fit-content;
}

.query-closed {
    background-color: #1AB394;
    border-radius: 4px;
    color: #FFF;
    margin-left: 162px;
    padding: 10px 20px;
    width: fit-content;
}

.query-status {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
    color: #FFF !important;
    font-size: 0.9em;
    font-weight: bold;
    height: 20px;
    padding-left: 17px;
    padding-right: 8px;
    padding-top: 2px;
    position: absolute;
    right: 0px;
    text-align: right;
    top: 0px;
    width: fit-content;
}

.query-status.green {
    background-color: #1AB394;
}

.query-status.red {
    background-color: #ED5565;
}

/* General */
.timeline-item .content.col-xs-8 {
    min-height: 85px;
    width: 66.6%;
}

.timeline-item .date.col-xs-4 {
    width: 33.3%;
}

.green-border {
    border-color: #1AB394 !important;
}

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

body, ui-widget {
    -webkit-font-smoothing: antialiased !important;
    overflow-x: visible;
}

.btn-inline-link {
    color: #1AB394;
    padding: 0px;
}

.top-navigation.body-small .wrapper.wrapper-content, .body-small .top-navigation .wrapper.wrapper-content {
    padding: 40px 0 200px 0px;
}

.no-wrap, .no-wrap td, td.no-wrap {
    white-space: nowrap !important;
}

.hide, .hidden {
    display: none !important;
}

#wrapper {
    overflow-x: visible;
}

a:focus {
    outline: -webkit-focus-ring-color auto 0px !important;
}

a:focus {
    color: inherit;
}

a:hover {
    color: #1AB394;
}

textarea {
    resize: none;
}

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

.vertical-align i, .vertical-align span {
    vertical-align: middle;
}

.required, span.ui-calendar.form-control.required input {
    border: 1px solid #1AB394;
}

.ui-state-error, .validationError, span.validationError input {
    border-color: #B94A48 !important;
}

table.ui-selectoneradio.validationError {
    border: 1px solid #B94A48 !important;
}

span.datePicker.validationError input {
    border: 1px solid #B94A48 !important;
}

/* Panels (CVI) */
.panel {
    border-radius: 20px;
}

.panel .panel-heading {
    border-radius: 20px 20px 0 0;
}

/* adds additional padding around radio buttons when validation red border is show */
.radio-button table.validationError > tbody > tr > td > div, table.ui-selectoneradio.ui-widget.validationError.validationError > tbody > tr > td > div {
    margin-right: 10px;
    padding-left: 10px;
}

.radio-button table.validationError > tbody > tr > td > label, table.ui-selectoneradio.ui-widget.validationError.validationError > tbody > tr > td > label {
    margin-right: 10px;
}

.well {
    background-color: #E7E7E7;
    border: 1px solid #E7E7E7;
    box-shadow: none;
}

.well-green-border {
    border: 1px solid #1AB394;
}

.ui-input-invalid {
    border: 1px solid #D9534F;
}

.ui-icon {
    background-repeat: no-repeat;
    display: inline-block;
    font-size: 1em;
    height: 1em;
    margin: 0;
    margin-top: 0;
    overflow: visible;
    position: static;
    text-indent: 0;
    vertical-align: baseline;
    width: 1em;
}

a {
    color: inherit;
}

a.link {
    color: #1AB394;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.green, .success {
    color: #1AB394;
}

.green-background {
    background-color: #1AB394;
}

.well.green-background {
    color: #FFF;
}

.yellow-background {
    background-color: #F79703;
}

.red, .danger {
    color: #D9534F;
}

.red-background {
    background-color: #D9534F;
}

.blue, .info {
    color: #1C84C6;
}

.blue-background {
    background-color: #1C84C6;
}

.orange, .warning {
    color: #F79703;
}

.grey {
    color: #B9B9B9 !important;
}

.grey-background {
    background-color: #B9B9B9;
}

.dark-grey {
    color: #676A6C;
}

.label {
    border-radius: 8px;
    font-family: inherit;
    font-weight: normal;
}

.label-grey {
    background-color: #676A6C;
    color: #FFF;
}

.label-soft-grey {
    background-color: #676A6C1A;
    color: #676A6C;
}

.label-green {
    background-color: #1AB394;
    color: #FFF;
}

.label-primary.faded {
    background-color: #87E2D0;
}

.label-danger.faded {
    background-color: #EAAAB0;
}

.label-full-project {
    background-color: #1AB394;
    color: #FFF;
}

.label-one-off-project {
    background-color: #51B6DC;
    color: #FFF;
}

.label-cvi {
    background-color: #D9534F;
    color: #FFF;
}

.label-green,
.label-primary,
.label-success {
    background-color: #21CE9E1A;
    color: #21CE9E;
}

.label-blue,
.label-info,
.label-caterquotes {
    background-color: #0EA5E81A;
    color: #0EA5E8;
}

.label-warning {
    background-color: #E0A2181F;
    color: #D69508;
}

.label-red,
.label-danger,
.label-internal-catalogue {
    background-color: #FB42421A;
    color: #FB4242;
}

.more-info-link,
.more-info-link:hover,
.more-info-link:focus {
    margin-left: 6px;
    color: #1AB394;
}

.cost-item-subtitle {
    font-size: 0.85em;
    color: #676A6C;
}

.label-stock-project {
    background-color: #676A6C;
    color: #FFF;
}

.label-lg {
    font-size: 1em;
    font-weight: normal;
}

.form-group.form-group-condensed {
    margin-bottom: 5px;
}

.project-stage-column div {
    border-radius: 18px;
    float: left;
    height: 18px;
    margin-right: 5px;
    width: 18px;
}

.ui-state-highlight td.project-stage-column div.green-background {
    border: 2px solid #FFF;
}

.well-white {
    background-color: #FFF;
}

.well-green {
    background-color: #1AB394;
    color: #FFF;
}

.well-red {
    background-color: #D9534F !important;
    color: #FFF;
}

.well-yellow {
    background-color: #F79703;
    color: #FFF;
}

.well-selectitem-placeholder {
    background-color: #FFF;
    border-radius: 0px;
    box-shadow: none;
    font-size: 14px;
    margin: 0px;
    padding: 4px 12px;
}

td .checkbox {
    margin: 2px 0px 0px 0px;
}

/* Growl */
.ui-growl.ui-widget {
    color: #FFF;
    z-index: 5000 !important;
}

.ui-growl-item-container.ui-state-highlight {
    background: #1AB394;
}

.ui-growl-image {
    background: none;
    position: relative;
}

.ui-growl-image:before {
    font-family: FontAwesome;
    font-size: 32px;
    position: absolute;
    top: 0;
}

.ui-growl-image-error:before {
    color: #EF5352;
    content: "\f00d";
}

.ui-growl-image-info:before {
    color: #FFF;
    content: "\f00c";
}

/* UI-Messages */
.ui-messages div {
    background-color: #F3F3F4;
    border: none;
    border-left: 5px solid #676A6C;
    margin: 20px 0;
    padding: 10px;
}

.ui-messages.white-background div {
    background-color: #FFF;
}

.ui-messages div.ui-messages-error {
    border-left: 5px solid #D9534F;
}

.ui-messages div.ui-messages-info {
    border-left: 5px solid #1AB394;
}

.ui-messages div ul li span {
    line-height: 24px;
}

.ui-messages div ul li span.ui-messages-error-summary, .ui-messages div ul li span.ui-messages-error-detail {
    color: #D9534F;
}

.ui-messages div ul li span.ui-messages-info-summary, .ui-messages div ul li span.ui-messages-info-detail {
    color: #1AB394;
}

.ui-messages span {
    background: none;
    position: relative;
}

.ui-messages span.ui-icon.ui-icon-close {
    background-image: none;
    height: 24px;
    text-indent: 0px;
    width: 24px;
}

.ui-messages span:before {
    font-family: FontAwesome;
    font-size: 20px;
    position: absolute;
    top: 0;
}

.ui-messages span.ui-icon-close:before {
    font-size: 15px;
}

.ui-messages .ui-icon-close:before {
    color: #676A6C;
    content: "\f00d";
}

.ui-messages .ui-messages-error-icon:before {
    color: #D9534F;
    content: "\f00d";
}

.ui-messages .ui-messages-info-icon:before {
    color: #1AB394;
    content: "\f00c";
}

span.ui-messages-info-summary, span.ui-messages-warn-summary, span.ui-messages-error-summary,
span.ui-message-info-summary, span.ui-message-warn-summary, span.ui-message-error-summary {
    margin-left: 0px;
}

div.ui-messages-error li {
    margin-left: 10px;
}

/* Circle Nav Bar */
.process-step .btn:focus {
    outline: none;
}

.process {
    display: table;
    position: relative;
    width: 100%;
}

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

.process-step button[disabled] {
    filter: alpha(opacity=100) !important;
    opacity: 1 !important;
}

.process-row:before {
    background-color: #CCC;
    bottom: 0;
    content: " ";
    height: 1px;
    position: absolute;
    top: 52px;
    width: 100%;
    z-index: 0;
}

.process-advantage .process-row:before {
    background-color: #CCC;
    bottom: 0;
    content: " ";
    height: 1px;
    position: absolute;
    top: 37px;
    width: 100%;
    z-index: 0;
}

.process-step {
    display: table-cell;
    position: relative;
    text-align: center;
    width: 16.6%;
}

.process-step p {
    margin-top: 4px;
}

.btn-circle {
    border-radius: 50% !important;
    font-size: 12px;
    text-align: center;
}

.process-step p {
    margin-bottom: 0px;
}

@media ( max-width: 610px) {
    .process-row:before {
        top: 25px;
    }

    .btn-circle {
        height: 40px;
        width: 40px;
    }

    .btn-circle.btn-lg {
        border-radius: 25px;
        font-size: 18px;
        height: 50px;
        line-height: 1.33;
        padding: 10px 16px;
        width: 50px;
    }

    .process-step a {
        line-height: 30px;
    }

    .process-step a i.fa, .process-step a i.mdi {
        font-size: 1.5em;
        line-height: 1em;
    }

    .process-step p {
        font-size: 10px;
    }
}

@media ( min-width: 611px) {
    .btn-circle {
        height: 70px;
        padding: 5px 10px;
        width: 70px;
    }

    .process-step a {
        line-height: 70px;
    }

    .process-step a i.fa, .process-step a i.mdi {
        font-size: 2.5em;
        line-height: 1em;
    }

    .process-step p {
        font-size: inherit;
    }

    .btn-circle.btn-lg {
        border-radius: 50px;
        font-size: 24px;
        height: 100px;
        line-height: 1.33;
        padding: 20px 20px;
        width: 100px;
    }
}

.btn-configure {
    color: #1CBF9E;
    font-size: 0.9em;
    font-style: italic;
}

.btn-configure:hover {
    text-decoration: underline;
}

.btn-remove {
    color: #ED5565;
    font-size: 0.9em;
    font-style: italic;
}

.btn-remove:hover {
    color: #ED5565;
    text-decoration: underline;
}

.btn-default {
    background-color: #C2C2C2;
    border-color: #C2C2C2;
    color: #FFF;
}

.btn-default.blue-background {
    background-color: #1C84C6;
    border-color: #1C84C6;
}

.btn-default.red-background {
    background-color: #D9534F;
    border-color: #D9534F;
}

.btn-default.green-background {
    background-color: #1AB394;
    border-color: #1AB394;
}

.btn-default.yellow-background {
    background-color: #F79703;
    border-color: #F79703;
}

.btn-default.btn-circle:hover, .btn-default.btn-circle:focus,
.btn-default.btn-circle:active, .btn-default.active.btn-circle, .open .dropdown-toggle.btn-default.btn-circle {
    background-color: #B9B9B9;
    border-color: #B9B9B9;
    color: #FFF;
}

.btn-default.blue-background:hover, .btn-default.blue-background:focus,
.btn-default.blue-background:active, .btn-default.active.blue-background,
.open .dropdown-toggle.btn-default.blue-background {
    background-color: #1877B2;
    border-color: #1877B2;
    color: #FFF;
}

.btn-default.red-background:hover, .btn-default.red-background:focus,
.btn-default.red-background:active, .btn-default.active.red-background,
.open .dropdown-toggle.btn-default.red-background {
    background-color: #C64B49;
    border-color: #C64B49;
    color: #FFF;
}

.btn-default.green-background:hover, .btn-default.green-background:focus,
.btn-default.green-background:active, .btn-default.active.green-background,
.open .dropdown-toggle.btn-default.green-background {
    background-color: #179E80;
    border-color: #179E80;
    color: #FFF;
}

.btn-white {
    color: inherit;
}

a.no-hover:hover {
    color: inherit;
}

/* Page Divider */
.page-divider {
    height: 100px;
    padding: 0 90px;
}

.page-divider .wrapper {
    padding: 0px;
    position: relative;
    text-align: center;
}

.page-divider .title {
    background-color: #F3F3F4;
    font-size: 1.9em;
    font-weight: bold;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 10px;
    width: fit-content;
    z-index: 2;
}

.page-divider hr {
    border-top: 1px solid #BABABA;
    position: absolute;
    top: 19px;
    width: 100%;
}

/* Ibox Callouts */
.border-left {
    border-left: 6px solid #A0A0A0;
}

.border-left.grey-border {
    border-left-color: #A0A0A0;
}

.border-left.blue-border {
    border-left-color: #1C84C6;
}

.border-left.yellow-border {
    border-left-color: #F79703;
}

.border-left.green-border {
    border-left-color: #1AB394;
}

.border-left.red-border {
    border-left-color: #D9534F;
}

/* Bootstrap Callouts */
.bs-callout {
    background-color: #F3F3F4;
    border: none;
    border-left: 4px solid #676A6C;
    margin: 20px 0;
    padding: 20px;
}

.bs-callout + .bs-callout {
    margin-top: -5px;
}

.bs-callout-grey {
    border-left-color: #676A6C;
    color: #676A6C;
}

.bs-callout-info {
    background-color: #eef6fb;
    border-left-color: #5BC0DE;
    color: #31708f;
}

.bs-callout-success,
.bs-callout-primary {
    background-color: #e8f7f4;
    border-left-color: #1ab394;
    color: #138a72;
}

.bs-callout-warning {
    background-color: #fcf8e3;
    border-left-color: #F0AD4E;
    color: #8a6d3b;
}

.bs-callout-success-cancelled, .bs-callout-warning-cancelled,
.bs-callout-danger {
    background-color: #f2dede;
    border-left-color: #D9534F;
    color: #a94442;
}

.bs-callout.white-background {
    background-color: #FFF;
}

/* Costing page nav (internal/inserts/costingTabsContent.xhtml): the tabView's left tabs as pills, the panel as a card */
.ui-tabs.costing-nav {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    border: none;
    background: none;
    /* Changing tab scrolls back up to here (onTabShow), leaving the same gap the sticky pills keep */
    scroll-margin-top: 16px;
}

/* PrimeFaces adds a clearfix after left-hand tabs. In a flex row it becomes a third item, leaving a gap on the right */
.ui-tabs.costing-nav::after {
    display: none;
}

/* Sticky, so the pills stay in view while a long tab scrolls */
.ui-tabs.costing-nav > .ui-tabs-nav {
    position: sticky;
    top: 16px;
    flex: 0 0 230px;
    width: 230px;
    float: none;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.ui-tabs.costing-nav > .ui-tabs-nav > li.ui-tabs-header {
    --pill-border: #dcdcdc;
    --pill-fill: #ffffff;
    --pill-fill-hover: #f5f5f5;
    --pill-text: #8a8a8a;
    float: none;
    width: 100%;
    margin: 0 0 6px 0;
    padding: 0;
    border: 1px solid var(--pill-border);
    border-radius: 999px;
    background-color: var(--pill-fill);
    overflow: hidden;
}

.ui-tabs.costing-nav > .ui-tabs-nav > li.ui-tabs-header.ui-state-hover {
    background-color: var(--pill-fill-hover);
}

.ui-tabs.costing-nav > .ui-tabs-nav > li.ui-tabs-header.ui-state-active {
    --pill-border: #b8e6dc;
    --pill-fill: #e8f7f4;
    --pill-fill-hover: #d3f0ea;
    --pill-text: #138a72;
}

.ui-tabs.costing-nav > .ui-tabs-nav > li.ui-tabs-header > a,
.ui-tabs.costing-nav > .ui-tabs-nav > li.ui-tabs-header.ui-state-active > a,
.ui-tabs.costing-nav > .ui-tabs-nav.ui-widget-header > li.ui-state-hover > a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 14px;
    border: none;
    background: none;
    color: var(--pill-text);
}

.costing-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pill-text);
}

.costing-pill > i {
    font-size: 18px;
    line-height: 1;
    color: inherit;
}

.costing-pill-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.costing-pill-count {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.costing-pill-count-complete {
    color: #1AB394;
}

.costing-pill-count-incomplete {
    color: #D9534F;
}

.ui-tabs.costing-nav > .ui-tabs-panels {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    float: none;
    margin: 0;
    border: none;
    background: none;
}

.ui-tabs.costing-nav > .ui-tabs-panels > .ui-tabs-panel {
    padding: 20px;
    border: 1px solid #E7EAEC;
    border-radius: 6px;
    background-color: #FFFFFF;
}

/* A tab that holds several cards (costSummaryTabContent.xhtml): the panel steps aside and each .costing-card is a card, styled as the panel was */
.ui-tabs.costing-nav > .ui-tabs-panels > .ui-tabs-panel:has(.costing-card-stack) {
    padding: 0;
    border: none;
    background: none;
}

.costing-card {
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid #E7EAEC;
    border-radius: 6px;
    background-color: #FFFFFF;
}

@media (max-width: 767px) {
    .ui-tabs.costing-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .ui-tabs.costing-nav > .ui-tabs-nav {
        position: static;
        flex-basis: auto;
        width: 100%;
    }
}

/* AutoQuotes import/export card (internal/inserts/costingTabsContent.xhtml, equipment tab) */
.autoquotes-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border: 1px solid rgba(0, 97, 171, 0.2);
    border-radius: 6px;
    background-color: rgba(0, 97, 171, 0.05);
}

.autoquotes-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.autoquotes-body {
    flex: 1 1 260px;
    min-width: 0;
}

.autoquotes-title {
    font-size: 15px;
    font-weight: 600;
}

.autoquotes-help {
    font-size: 12px;
    color: #999C9E;
}

.autoquotes-actions {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.autoquotes-actions .btn > i {
    margin-right: 4px;
}

.autoquotes-upload.ui-fileupload div.ui-fileupload-buttonbar {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}

.autoquotes-upload.ui-fileupload div.ui-fileupload-content {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}

.autoquotes-upload.ui-fileupload div.ui-fileupload-buttonbar span.ui-fileupload-choose {
    margin: 0;
    border-radius: 3px;
    background-color: #1AB394;
    color: #FFFFFF;
}

.autoquotes-upload.ui-fileupload div.ui-fileupload-buttonbar span.ui-fileupload-choose .ui-button-text {
    padding: 5px 10px 5px 30px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.autoquotes-upload.ui-fileupload div.ui-fileupload-buttonbar span.ui-fileupload-choose span.ui-icon-plusthick:before {
    content: "\f093";
    color: inherit;
    font-size: 12px;
}

.autoquotes-upload.ui-fileupload div.ui-fileupload-buttonbar span.ui-fileupload-choose.ui-state-hover {
    background-color: #18A689;
}

/* Read-only costs warning (inserts/costing-locked-content.xhtml) */
.bs-callout.costing-locked {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 0;
}

.costing-locked > i {
    font-size: 26px;
    width: 26px;
    text-align: center;
    color: #5CB85C;
}

.costing-locked h4 {
    margin-top: 0;
}

/* Supplier quote status (inserts/quoteStatusContent.xhtml), inside a bs-callout */
.quote-status {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.quote-status-body {
    flex: 1 1 auto;
    min-width: 0;
}

.quote-status-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

h3.quote-status-supplier {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

/* The available suppliers list is longer and denser than the quote status cards */
h3.quote-status-supplier-sm {
    font-size: 15px;
}

.quote-status-ref {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 2px;
}

.quote-status-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.quote-status-step {
    flex: 0 1 190px;
    padding: 6px 10px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.6);
}

.quote-status-step-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.75;
}

.quote-status-step-label > i {
    width: 12px;
    margin-right: 2px;
}

.quote-status-step-value {
    display: block;
    font-weight: 600;
}

.quote-status-step-sub {
    font-size: 12px;
    opacity: 0.75;
}

.quote-status-comment {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    font-style: italic;
}

.quote-status-comment > i {
    margin-top: 3px;
}

.quote-status-comment-label {
    font-style: normal;
    font-weight: 600;
    margin-right: 4px;
}

.quote-status-comment-label:after {
    content: ":";
}

.quote-status-reinstated {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.6);
}

.quote-status-address {
    margin-top: 4px;
}

.quote-status-address > i {
    width: 12px;
    margin-right: 4px;
    text-align: center;
    color: #999C9E;
}

.quote-status-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 6px;
}

.quote-status-callout {
    margin-top: 10px;
}

.supplier-rating {
    display: inline-flex;
    gap: 2px;
    font-size: 13px;
    color: #D1D5DB;
}

.supplier-rating .on {
    color: #F5A623;
}

.quote-status-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.quote-status-value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}

.quote-status-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.quote-status-actions:empty {
    display: none;
}

@media (max-width: 767px) {
    .quote-status {
        flex-wrap: wrap;
    }

    .quote-status-side {
        flex-basis: 100%;
        align-items: flex-start;
    }
}

.unauthorized-banner {
    background-color: #FFF;
}

.unauthorized-banner i.fa {
    float: left;
    font-size: 4.5em;
    margin-left: 15px;
}

.unauthorized-banner h3 {
    margin-left: 100px;
}

.unauthorized-banner p {
    margin-bottom: 5px;
    margin-left: 100px;
}

/* Select menus */
select.form-control.multiple-selector {
    overflow-y: auto;
    padding: 0px;
}

select.form-control.multiple-selector option {
    padding: 4px 12px;
}

option {
    font-family: inherit;
    font-size: inherit;
    padding: 6px 12px;
}

/* Primefaces colour picker */
.ui-colorpicker button {
    background: none;
    border: none;
    box-shadow: none;
}

.ui-colorpicker button span.ui-button-text {
    padding: 0;
}

.ui-colorpicker button span.ui-button-text span {
    border: 1px solid #CCC !important;
    box-shadow: none;
    height: 30px !important;
    text-indent: 100px !important;
    width: 100px !important;
}

/* Primefaces Pick List */
.ui-picklist .ui-picklist-filter-container .ui-icon {
    top: 8px;
}

.ui-picklist.ui-picklist-responsive .ui-picklist-list-wrapper {
    width: 45%;
}

.ui-picklist .ui-picklist-list-wrapper .ui-picklist-caption {
    background: #F3F3F4;
    border: 1px solid #F3F3F4;
    box-shadow: none;
}

.ui-picklist .ui-picklist-list-wrapper .ui-picklist-list {
    border: 1px solid #E5E6E7;
}

.ui-picklist .ui-picklist-list-wrapper .ui-picklist-list li.ui-state-highlight {
    background: #E5E6E7;
    color: inherit;
}

.ui-picklist .ui-picklist-buttons-cell button {
    background: #FFF;
    border: 1px solid #E5E6E7;
}

.ui-picklist .ui-picklist-buttons-cell button:hover {
    background: #E5E6E7;
    border: 1px solid #1AB394;
    box-shadow: none;
}

.ui-picklist-filter {
    background-color: #FFF;
    background-image: none;
    border: 1px solid #E5E6E7;
    border-radius: 1px;
    box-shadow: none;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    padding: 6px 12px;
}

.ui-picklist-filter.ui-state-focus {
    border: 1px solid #1AB394;
}

.fake-picklist-filter {
    position: relative;
    width: 45%;
}

.fake-picklist-filter input {
    padding-right: 30px;
    position: absolute;
    top: 0;
}

.fake-picklist-filter i {
    position: absolute;
    right: 10px;
    top: 10px;
}

.ui-picklist.hidden-source-filter .ui-picklist-list-wrapper:first-child {
    padding-top: 34px;
}

.ui-picklist-caption {
    background-color: #F3F3F4;
}

.ui-icon.ui-icon-search {
    background: none;
}

.ui-picklist-filter-container:before {
    content: "\f002";
    font-family: FontAwesome;
    font-size: 1em;
    position: absolute;
    right: 10px;
    top: 8px;
    transform: rotate(90deg);
}

/* File Uploader */
div.ui-fileupload-buttonbar {
    background-color: #F3F3F4;
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 10px 15px;
}

div.ui-fileupload-content {
    border: 1px solid #EBEBEB;
    border-radius: 0 0 10px 10px;
    border-top: none;
}

div.ui-fileupload-buttonbar span.ui-fileupload-choose {
    background: #FFF;
    border-color: #1AB394;
    box-shadow: none;
    color: #1AB394;
    text-shadow: none;
    transition: all .5s;
}

div.ui-fileupload-buttonbar span.ui-fileupload-choose span.ui-icon-plusthick {
    background: none;
}

div.ui-fileupload-buttonbar span.ui-fileupload-choose span.ui-icon-plusthick:before {
    color: #1AB394;
    content: "\f067";
    font-family: FontAwesome;
    font-size: 14px;
    margin-left: -7px;
    margin-top: 2px;
    position: absolute;
    text-indent: 0px;
    text-shadow: none;
    top: 0;
}

div.ui-fileupload-buttonbar span.ui-fileupload-choose.ui-state-hover {
    background: #1AB394;
    color: #FFF;
}

div.ui-fileupload-buttonbar span.ui-fileupload-choose.ui-state-hover span.ui-icon-plusthick:before {
    color: #FFF;
}

/* Buttons */
.btn-md {
    padding: 3px 6px;
}

.ui-selectonebutton.ui-buttonset.btn-xs {
    height: 24px;
}

.ui-selectonebutton.ui-buttonset.btn-xs div.ui-button {
    font-size: 12px;
    height: 24px;
    line-height: 1.5;
    padding: 1px 5px;
}

.ui-selectonebutton.ui-buttonset.btn-xs div.ui-button span.ui-button-text {
    line-height: 22px;;
}

.btn.pull-right ~ .btn.pull-right {
    margin-right: 10px;
}

.btn.pull-left ~ .btn.pull-left {
    margin-left: 10px;
}

.open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
    background-color: #1AB394;
    border: 1px solid #1AB394;
}

.dropdown-menu > li > span.ui-state-disabled {
    display: block;
    line-height: 25px;
    padding: 7px 20px;
}

.dropdown-menu .divider {
    margin: 7px 25px
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    -moz-border-radius: 0 6px 6px 6px;
    -webkit-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
    left: 100%;
    margin-left: -1px;
    margin-top: -6px;
    top: 0;
}

.dropdown-submenu > a:after {
    border-color: transparent;
    border-left-color: #CCC;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    content: " ";
    display: block;
    float: right;
    height: 0;
    margin-right: -10px;
    margin-top: 5px;
    width: 0;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #555;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    -moz-border-radius: 6px 0 6px 6px;
    -webkit-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
    left: -100%;
    margin-left: 10px;
}

/* Radio Buttons */
table.ui-selectoneradio label {
    margin-left: 15px;
}

.ui-icon-bullet {
    background-position: -81px -145px;
}

.ui-radiobutton .ui-radiobutton-box {
    box-shadow: none;
    height: 18px;
    text-shadow: none;
    width: 17px;
}

.well table.ui-selectoneradio label.ui-state-disabled, .well table.ui-selectoneradio div.ui-radiobutton-box.ui-state-disabled {
    background: inherit;
    opacity: .80;
}

.ui-selectoneradio.ui-grid label {
    font-weight: inherit;
    margin-left: 20px;
    max-width: 90%;
}

.ui-selectoneradio.ui-grid .ui-radiobutton .ui-radiobutton-box {
    background-color: #FFF;
    border-color: #1AB394;
}

/* Primefaces InputNumber & Primefaces Calendar inputs & Primefaces autocomplete & Primefaces spinner */
span.ui-inputnumber.form-control, span.ui-calendar.form-control, span.ui-autocomplete.form-control,
span.ui-spinner.form-control {
    background-color: inherit;
    border: none;
    padding: 0px;
}

span.ui-inputnumber.form-control.required input, span.ui-autocomplete.form-control.required input,
span.ui-calendar.form-control.required input, span.ui-spinner.form-control.required input {
    border: 1px solid #1AB394;
}

span.ui-inputnumber.form-control input, span.ui-calendar.form-control input,
span.ui-autocomplete.form-control input, span.ui-spinner.form-control input,
textarea.form-control.ui-inputfield, .ui-widget-content textarea.form-control.ui-inputfield {
    background-color: #FFF;
    border: 1px solid #E5E6E7;
    border-radius: 8px;
    box-shadow: none;
    display: block;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    height: 34px;
    line-height: 1.42857143;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}

span.ui-inputnumber.form-control input:focus, span.ui-calendar.form-control input:focus,
span.ui-autocomplete.form-control input:focus, span.ui-spinner.form-control input:focus {
    border-color: #1AB394;
    box-shadow: none;
}

/* Primefaces Spinner */
.ui-spinner-button {
    background-color: #FFF;
    border: none;
    border-left: 1px solid #E5E6E7;
    border-radius: 0px;
    box-shadow: none;
    margin-right: 1px;
}

.ui-spinner-button.ui-spinner-up {
    margin-top: 1px;
}

.ui-spinner-button.ui-spinner-down {
    border-top: 1px solid #E5E6E7;
    margin-bottom: 1px;
}

.ui-icon-triangle-1-n {
    background-position: 0px -16px;
}

span.ui-spinner.form-control input {
    padding-right: 28px;
    text-align: inherit;
}

/* Primefaces Autocomplete list drop-down */
.ui-autocomplete-panel {
    z-index: 10000 !important;
}

.ui-autocomplete-items.ui-autocomplete-list {
    padding: 0px;
}

.ui-autocomplete-item.ui-autocomplete-list-item {
    font-family: inherit;
    font-size: inherit;
    font-weight: normal;
    padding: 5px 8px;
}

.ui-autocomplete-item.ui-autocomplete-list-item.ui-state-highlight {
    background-color: #E4E5E6;
    color: inherit;
}

.ui-autocomplete-panel table.ui-autocomplete-items tr.ui-state-highlight {
    background: #F5F5F5;
    color: inherit;
}

.ui-autocomplete-panel table.ui-autocomplete-items td {
    border-left: none;
    border-right: none;
}

.ui-autocomplete-panel table.ui-autocomplete-items tr.ui-state-highlight i.green {
    color: #1AB394;
}

/* Primefaces Calendar pop-out */
body .p-datepicker {
    min-width: 15em;
}

.ui-datepicker {
    border: 1px solid #1AB394;
    color: inherit;
    padding: 0px;
    z-index: 10000 !important;
}

.ui-datepicker .ui-datepicker-header {
    background-color: #FFF;
    border-bottom: 1px solid #E5E6E7;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    border: 1px solid #E5E6E7;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
}

.ui-datepicker select.ui-datepicker-month:focus, .ui-datepicker select.ui-datepicker-year:focus {
    border-color: #1AB394;
    box-shadow: none;
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px;
    top: 2px;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px;
    top: 2px;
}

.ui-datepicker .ui-datepicker-calendar td {
    background-color: #FFF;
}

.ui-datepicker .ui-datepicker-calendar td a {
    background-color: #FFF;
    border: 1px solid #E5E6E7;
    border-radius: 1px;
    box-shadow: none;
    font-family: inherit;
    font-weight: inherit;
}

.ui-datepicker .ui-datepicker-calendar td a:hover {
    background-color: #E4E5E6;
}

.ui-datepicker .ui-datepicker-calendar td a.ui-state-active {
    border: 1px solid #1AB394;
    border-radius: 1px;
    color: #1AB394;
    font-weight: bold;
}

.ui-datepicker .ui-datepicker-calendar td a.ui-state-highlight {
    border: 1px solid #676A6C;
}

/* Other */
.caterquotes-file-download {
    margin: auto;
    padding: 10px 0px;
    width: 220px;
}

.caterquotes-file-download:hover {
    color: #1AB394;
}

.draggable-line-item .ui-datagrid-content {
    border: none;
}

.draggable-line-item .ui-draggable {
    border: 1px solid #E5E6E7;
    cursor: pointer;
}

.group-drop-area {
    border: 1px solid #E5E6E7;
    margin: 8px;
    padding: 10px;
}

.well.ui-droppable.ui-state-highlight {
    background-color: #F5F5F5;
    border: 3px dashed #E5E6E7;
    color: inherit;
    margin: 5px;
}

.well.ui-droppable.ui-state-highlight.ui-droppable-hover {
    border: 3px dashed #1AB394;
}

.draggable-line-item .ui-draggable-dragging {
    border: 2px solid #1AB394;
}

.draggable-line-item .ui-draggable-handle {
    padding-bottom: 2px;
}

/* Export */
.export-icon {
    color: #1AB394;
    font-size: 2em;
}

.export-icon:hover {
    color: #16967A;
    cursor: pointer;
}

.vertical-alignment-helper {
    display: table;
    height: 100%;
    pointer-events: none;
    width: 100%;
    /* This makes sure that we can still click outside of the modal to close it */
}

.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    pointer-events: none;
    vertical-align: middle;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    height: inherit;
    margin: 0 auto;
    /* To center horizontally */
    pointer-events: all;
    width: inherit;
}

/* Ajax loading indicator (#bsModalSpinner) */
.modal-spinner {
    background: #ffffff;
    border: none;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 26px 20px 20px;
    text-align: center;
    width: 150px;
}

.loading-dots {
    align-items: center;
    display: flex;
    gap: 9px;
    height: 28px;
    justify-content: center;
}

.loading-dots span {
    animation: loadingDotBounce 1.1s ease-in-out infinite;
    background: #1AB394;
    border-radius: 50%;
    height: 12px;
    width: 12px;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

.loading-label {
    color: #8a8a8a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-top: 12px;
    text-transform: uppercase;
}

@keyframes loadingDotBounce {
    0%, 70%, 100% {
        opacity: 0.35;
        transform: translateY(0) scale(0.8);
    }
    35% {
        opacity: 1;
        transform: translateY(-9px) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-dots span {
        animation-name: loadingDotFade;
    }
}

@keyframes loadingDotFade {
    0%, 70%, 100% {
        opacity: 0.35;
    }
    35% {
        opacity: 1;
    }
}

.attachment-download img {
    height: 32px;
}

.attachment-download div.image-wrapper {
    float: left;
    height: 32px;
    text-align: center;
    width: 32px;
}

.attachment-download span {
    float: left;
    margin-left: 15px;
}

/* Buttons */
.btn {
    border-radius: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.btn.btn-link {
    box-shadow: none;
}

.btn-outline {
    border: 1px solid;
}

.ui-state-highlight a.btn-danger.btn-outline {
    color: #ED5565;
}

/*Nav-bar Alerts */
.md-skin.top-navigation .nav.navbar-right > li > a.count-info {
    line-height: 12px;
    padding: 11px 5px;
}

ul.nav li a.count-info span.label {
    border-radius: 8px;
    right: 2px;
    top: 8px;
}

.badge {
    font-weight: normal;
    padding-bottom: 3px;
}

.badge.slack {
    font-size: inherit;
    font-weight: inherit;
}

/* Primefaces Progress Bar */
.ui-progressbar.ui-widget-content {
    background-color: #939394;
    background-image: none;
    box-shadow: none;
    color: #FFF;
    margin-top: 7px;
}

.ui-progressbar.ui-widget-content .ui-progressbar-value {
    background-image: none;
    box-shadow: none;
}

.ui-progressbar.ui-widget-content .ui-progressbar-label {
    box-shadow: none;
}

.ui-progressbar.ui-widget-content.status1 .ui-progressbar-value {
    background-color: #676A6C;
}

.ui-progressbar.ui-widget-content.status2 .ui-progressbar-value {
    background-color: #1C84C6;
}

.ui-progressbar.ui-widget-content.status3 .ui-progressbar-value {
    background-color: #1AB394;
}

.ui-progressbar.ui-widget-content.status4 .ui-progressbar-value {
    background-color: #F1991C;
}

.ui-progressbar.ui-widget-content.status5 .ui-progressbar-value {
    background-color: #D9534F;
}

.project-exporter-button {
    border: 1px solid #E5E6E7;
    padding: 9px 9px 9px 6px;
}

.project-exporter-button:hover {
    background-color: #E4E5E6;
}

/* Full width inputs. Used for project team content on template management page */
.full-width-inputs div.col-md-4, .full-width-inputs div.col-sm-6 {
    width: 75% !important;
}

div.no-padding-tabs {
    padding: 15px 0px 0px 0px;
}

div.no-padding-tabs div.ui-tabs-panel {
    border-bottom: none;
    border-left: none;
    border-right: none;
}

div.no-padding-tabs > div.ui-tabs.ui-tabs-top {
    padding-left: 0px;
    padding-right: 0px;
}

div.no-padding-tabs > div.ui-tabs.ui-tabs-top ul {
    padding-left: 15px;
    padding-right: 15px;
}

div.no-padding-tabs div.ui-datatable.ui-widget {
    margin-bottom: 0px;
}

div.no-padding-tabs > ul.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all {
    padding-left: 15px;
    padding-right: 15px;
}

div.no-padding-tabs > div.ui-tabs-panels > div.ui-tabs-panel.ui-widget-content.ui-corner-bottom {
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

div.no-padding-tabs.grey ul.ui-tabs-nav.ui-widget-header li a {
    background-color: #F3F3F3;
    padding-top: 15px;
}

div.no-padding-tabs.grey ul.ui-tabs-nav.ui-widget-header li.ui-state-active a {
    background-color: #FFF;
}

.ui-tabs.ui-tabs-top > .ui-tabs-nav li {
    top: 0;
}

body .ui-tabs.ui-tabs-top .ui-tabs-nav .ui-tabs-header {
    border: none;
    border-bottom: 4px solid #E5E5E5;
    border-bottom-color: transparent;
}

body .ui-tabs.ui-tabs-top .ui-tabs-nav .ui-tabs-header a {
    border: none;
}

body .ui-tabs.ui-tabs-top .ui-tabs-nav .ui-tabs-header:first-child {
    border-top-left-radius: 10px;
}

body .ui-tabs.ui-tabs-top .ui-tabs-nav .ui-tabs-header:last-child {
    border-top-right-radius: 10px;
}

body .ui-tabs.ui-tabs-top .ui-tabs-nav .ui-tabs-header:hover {
    background-color: #FFF;
    border-bottom: 4px solid #E5E5E5;
}

body .ui-tabs.ui-tabs-top .ui-tabs-nav .ui-tabs-header.ui-state-active {
    border: none;
    border-bottom: 4px solid #1AB394;
    font-weight: bold;
}

div.no-border div.ui-widget-content {
    border: none;
}

table.no-border tr, table.no-border td, table.no-border.ui-panelgrid td.ui-panelgrid-cell {
    border: none;
}

.wrappable, .wrappable td {
    white-space: normal !important;
    word-wrap: break-word !important;
}

.unwrappable, .unwrappable td {
    white-space: nowrap !important;
}

.table tfoot tr td {
    line-height: 2em;
}

.h3 .small, .h3 small, h3 .small, h3 small {
    font-size: 85%;
    font-weight: normal;
}

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

.fa-25x {
    font-size: 2.5em;
}

.media-left {
    vertical-align: middle;
}

.media-left, .media-right, .media-body {
    display: table-cell;
}

.media-body {
    padding-left: 15px;
    vertical-align: middle;
    width: 100%;
}

.bs-callout {
    border-radius: 6px;
    padding: 15px;
}

.media-body h2, .media-body h3, .media-body h4, .media-body h5 {
    margin-top: 0px;
    padding-top: 0px;
}

.media-body p {
    margin-bottom: 0px;
}

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

.ui-selectmanycheckbox label {
    margin-left: 8px;
}

.ui-picklist.picklist-tall .ui-picklist-list {
    height: 800px;
}

/* Primefaces selectonemenu */
.ui-selectonemenu.form-control {
    background: #FFF;
    border: 1px solid #E5E6E7;
    box-shadow: none;
}

.ui-selectonemenu.form-control label {
    box-shadow: none;
    padding: 0px;
}

.ui-selectonemenu.form-control .ui-selectonemenu-trigger {
    background: #FFF;
    border: none;
    box-shadow: none;
    padding: 0px;
}

.ui-selectonemenu.form-control .ui-selectonemenu-trigger span {
    margin-left: -5px;
    margin-top: 8px;
}

.ui-selectonemenu-filter-container {
    width: 100%;
}

.ui-selectonemenu-filter-container input {
    background: #FFF;
    border-radius: 1px;
    font-weight: normal;
    text-shadow: none;
}

.ui-selectonemenu-items-wrapper td {
    text-shadow: none;
}

div.timeline-event {
    border-radius: 5px !important;
    color: white !important;
}

div.timeline-event-content {
    padding: 5px;
    text-shadow: none;
}

div.timeline-event.timeline-event-box.ui-widget.ui-state-default.docket-in-progress,
div.timeline-event.timeline-event-range.ui-widget.ui-state-default.docket-in-progress {
    background-color: #FFAF3E;
    border-color: #FFAF3E;
    color: #FFF;
    font-weight: normal;
}

div.timeline-event.timeline-event-box.ui-widget.ui-state-default.docket-complete,
div.timeline-event.timeline-event-range.ui-widget.ui-state-default.docket-complete {
    background-color: #1EDBB2;
    border-color: #1EDBB2;
    color: #FFF;
    font-weight: normal;
}

div.timeline-event.timeline-event-box.ui-widget.ui-state-default.docket-new,
div.timeline-event.timeline-event-range.ui-widget.ui-state-default.docket-new {
    background-color: #CCC;
    border-color: #CCC;
    color: #333;
    font-weight: normal;
}

/* primefaces menubutton */
.ui-menubutton span.ui-button-text {
    color: #1AB394;
    line-height: 1.42;
    padding: 6px 12px 6px 32px;
}

.ui-menubutton button {
    background-color: #FFF;
    border: none;
    border-radius: 1px;
    box-shadow: none;
    text-shadow: none;
}

.ui-menubutton {
    background-color: #FFF;
    border: 1px solid #1AB394;
}

.ui-menubutton:focus {
    outline-color: #1AB394;
}

.menu-wide.ui-menu.ui-widget {
    min-width: 300px;
}

.ui-menu.ui-widget {
    min-width: 200px;
}

.ui-menu .ui-separator {
    width: 100%;
}

.ui-menu.ui-widget .ui-separator {
    border: 1px solid #DDD;
}

/* primefaces */
.ui-selectlistbox-list td {
    padding: 4px;
}

.form-control {
    border-radius: 8px;
}

.form-control.form-control-condensed {
    padding-left: 4px;
    padding-right: 4px;
}

.subheader {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    color: #FFF;
    padding: 5px 25px 10px 25px;
}

.subheader.goods-in {
    background-image: url('/OneClick/resources/static/img/goods-in.png');
    background-position: center center;
    background-size: 100%;
}

.subheader.goods-out {
    background-image: url('/OneClick/resources/static/img/goods-in.png');
    background-position: center center;
    background-size: 100%;
}

.subheader.purchase-return {
    background-image: url('/OneClick/resources/static/img/goods-in.png');
    background-position: center center;
    background-size: 100%;
}

.subheader.purchase-order, .subheader.sales-invoice {
    background-image: url('/OneClick/resources/static/img/purchase-order.png');
    background-position: center center;
    background-size: 100%;
    margin-top: -1px;
}

.subheader.costing {
    background-image: url('/OneClick/resources/static/img/costing-bg.png');
    background-position: center center;
    background-size: 100%;
    margin-top: -1px;
}

.subheader.reporting {
    background-image: url('/OneClick/resources/static/img/costing-bg.png');
    background-position: center center;
    background-size: 100%;
    margin-top: -1px;
}

.subheader.quote {
    background-image: url('/OneClick/resources/static/img/suppliers-bg.png');
    background-position: center center;
    background-size: 100%;
    margin-top: -1px;
}

.subheader.supplier {
    background-image: url('/OneClick/resources/static/img/suppliers-bg.png');
    background-position: center center;
    background-size: 100%;
    margin-top: -1px;
}

body.body-small .subheader {
    background-position: left center;
    background-size: initial;
    padding-left: 15px;
}

.requested, .ordered, .confirmed, .in-progress {
    background-color: #FFDEB3; /* Orange Background*/
}

.cancelled {
    background-color: #FFC4C4; /* Red */
}

.invoiced, .credited, .complete {
    background-color: #E0FCE7 !important; /* Green Background*/
}

.pending {
    background-color: #D5EAFF; /* Blue Background*/
}

.draft {
    background-color: #EEE; /* Grey */
    background-image: url('/OneClick/resources/static/img/draft-watermark.png');
    background-position: center;
    background-size: contain;
}

div.well.disabled .yellow-bg {
    background-color: #FFDEB3;
}

div.well.disabled .blue-bg {
    background-color: #D5EAFF;
}

div.well.disabled .red-bg {
    background-color: #F1A9B1;
}

/* Omnisearch */
.omni-searchbar {
    margin: auto;
    margin-bottom: 20px;
    max-width: 500px;
    position: relative;
}

.omni-searchbar input.form-control.omni-searchbox {
    border: 1px solid #DDD;
    border-radius: 23px;
    font-size: 15px;
    height: 46px;
    line-height: 1.3333333;
    padding: 10px 60px;
    width: 100%;
}

.omni-searchbar.omnibox-red input.form-control.omni-searchbox {
    border: 1px solid #DDD;
    border-radius: 23px;
    font-size: 18px;
    height: 46px;
    line-height: 1.3333333;
    padding: 10px 60px;
    width: 100%;
}

.omni-searchbar input.form-control.omni-searchbox:focus {
    border: 2px solid #406E7E;
    box-shadow: none !important;
    outline: none;
}

.omni-searchbar.omnibox-red input.form-control.omni-searchbox,
.omni-searchbar.omnibox-red input.form-control.omni-searchbox:focus {
    border-color: #ED5565;
}

.omni-searchbar.search-button input.form-control.omni-searchbox {
    padding: 10px 60px 10px 30px;
}

.omni-searchbar i.omni-search-icon {
    font-size: 1.5em;
    left: 20px;
    position: absolute;
    top: 14px;
}

.omni-searchbar i.omni-search-icon-button {
    background-color: #1AB394;
    border: none;
    border-radius: 50%;
    color: #FFF;
    font-size: 1.5em;
    left: 0px;
    padding: 13px;
    position: absolute;
    top: 0px;
}

.omni-searchbar i.omni-cancel-icon {
    color: #ED5565;
    font-size: 1.5em;
    position: absolute;
    right: 16px;
    top: 14px;
}

.omni-searchbar i.omni-search-button {
    background: #1AB394;
    border-radius: 50%;
    color: #FFF;
    font-size: 1.7em;
    height: 46px;
    padding: 8px 13px 13px 12px;
    padding-top: 11px;
    position: absolute;
    right: 0px;
    top: 0px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    width: 46px;
}

.omni-searchbar i.omni-search-icon-button:hover {
    background-color: #109D80;
}

.omni-searchbar i.omni-cancel-icon:hover {
    color: #D7394A !important;
    cursor: pointer;
}

/* centering of documents */
.documentPanel {
    margin: auto;
    text-align: center;
}

.documentListPanelOuter {
    display: table;
    margin: 0px auto;
    text-align: center;
}

.documentListPanel {
    display: inline-block;
    padding: 0px 5px 0px 5px;
    position: relative;
    text-align: center;
}

/* Bootstrap media object */
.media-left.middle {
    padding-right: 15px;
    vertical-align: middle;
}

/* Primefaces Tree */
.ui-tree {
    border: none;
    width: 100%;
}

.ui-tree div {
    width: 100%;
}

.ui-tree div.tree-node-label {
    padding: 4px 8px;
}

.ui-tree div.tree-node-label i {
    margin-right: 8px;
}

.ui-tree-toggler {
    margin-right: 5px;
}

/* Font awesome */
a .fa-fw {
    color: #7F8284;
    margin-right: 10px;
}

/* Contract Terms */
.contract-terms .ui-accordion-header {
    background-color: #F3F3F4;
    border: 1px solid #F3F3F4 !important;
    box-shadow: none;
    font-weight: inherit;
    margin-bottom: 20px !important;
    padding: 19px;
}

.contract-terms.default-terms .ui-accordion-header {
    background-color: #FCF8E3;
}

.contract-terms .ui-accordion-header.ui-state-active {
    color: inherit;
    margin-bottom: 0px !important;
}

.contract-terms .ui-accordion-content {
    background-color: #F3F3F4;
    border: 1px solid #F3F3F4 !important;
    border-top-color: #E7EAEC !important;
    box-shadow: none;
    margin-bottom: 20px !important;
    padding: 19px !important;
}

.contract-terms.default-terms .ui-accordion-content {
    background-color: #FCF8E3;
}

/* Contract Progress Bar */
.contract-progress {
    background-color: #E0E0E0 !important;
    border: none;
    margin: auto;
    width: 300px;
}

.contract-progress.contract-progress-small {
    width: 150px;
}

.contract-progress.green .ui-progressbar-value {
    background-color: #1AB394;
}

.contract-progress.yellow .ui-progressbar-value {
    background-color: #F79703;
}

.contract-progress.red .ui-progressbar-value {
    background-color: #D9534F;
}

/* call summary */
.call-summary .media-left {
    text-align: center;
    width: 100px;
}

/* advantage statuses for first choice purchasing */
.table.table-clear .ui-datatable-tablewrapper table tbody tr.ui-datatable-even.adv-po-matched,
.adv-po-matched, .table.table-clear .ui-datatable-tablewrapper table tbody tr.ui-datatable-even.adv-po-return,
.adv-po-return, .table.table-clear .ui-datatable-tablewrapper table tbody tr.ui-datatable-even.adv-po-van-stock,
.adv-po-van-stock {
    /* pale green */
    background-color: #D4EDDA;
    border-color: #C3E6CB;
}

.table.table-clear .ui-datatable-tablewrapper table tbody tr.ui-datatable-even.adv-po-used,
.adv-po-used {
    background-color: #FFF3CD;
    border-color: #FFEEBA;
}

.table.table-clear .ui-datatable-tablewrapper table tbody tr.ui-datatable-even.adv-po-invoiced,
.adv-po-invoiced {
    /* pale blue */
    background-color: #D1ECF1;
    border-color: #BEE5EB;
}

.table.table-clear .ui-datatable-tablewrapper table tbody tr.ui-datatable-even.adv-po-ordered,
.adv-po-ordered {
    background-color: #F8D7DA;
    border-color: #F5C6CB;
}

.ui-toggleswitch-slider:before {
    background: #FFF;
}

.ui-toggleswitch-slider {
    background: #BBB;
}

@media ( min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

@media ( min-width: 1200px) {
    .modal-lg {
        width: 1000px;
    }
}

@media ( min-width: 1400px) {
    .modal-lg {
        width: 1200px;
    }
}
/* Shown only when a test deployment is pointed at the live database - see EnvironmentBean */
.live-db-warning {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    background-color: #c62828;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
}

.live-db-warning i {
    margin-right: 8px;
}

/* Project summary card */
.project-summary-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.project-summary-header .id-pill {
    margin-top: 2px;
}

.project-summary-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Id pill: the project id in the summary card, and the id at the start of a table row (click copies it) */
.id-pill {
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    font-family: monospace;
    font-size: 12px;
    padding: 2px 8px;
    border: 1px solid #e7eaec;
    border-radius: 4px;
    color: #676a6c;
}

/* Cancelled CVI row on the project CVIs tab */
.cvi-row-cancelled td,
.cvi-row-cancelled td .id-pill,
.cvi-row-cancelled td .text-muted,
.cvi-row-cancelled td .red,
.cvi-row-cancelled td .green {
    color: #b8bbbd;
}

h3.project-summary-name {
    margin: 0;
}

.project-summary-copy {
    color: #999c9e;
}

.project-summary-customer {
    color: #999c9e;
    margin: 4px 0 12px 0;
}

.project-summary-callout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    border-left: 4px solid transparent;
    clear: both;
}

.project-summary-tiles ~ .project-summary-callout {
    margin-top: 12px;
}

.project-summary-tiles ~ .project-summary-callout + .project-summary-callout {
    margin-top: 8px;
}

.project-summary-callout-body {
    flex: 1;
}

.project-summary-callout-warning {
    background-color: #fcf8e3;
    border-left-color: #F0AD4E;
    color: #8a6d3b;
}

.project-summary-callout-danger {
    background-color: #f2dede;
    border-left-color: #D9534F;
    color: #a94442;
}

.project-summary-callout-success {
    background-color: #dff0d8;
    border-left-color: #5CB85C;
    color: #3c763d;
}

.project-summary-callout-info {
    background-color: #eef6fb;
    border-left-color: #5BC0DE;
    color: #31708f;
}

.project-summary-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.project-summary-tile {
    flex: 1 1 180px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    background-color: #f3f3f4;
}

.project-summary-tile > i {
    font-size: 24px;
    width: 26px;
    text-align: center;
    margin-top: 2px;
    color: #1ab394;
}

.project-summary-tile-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8f94;
}

.project-summary-tile-value {
    font-size: 15px;
    font-weight: 600;
}

.project-summary-tile-sub {
    font-size: 12px;
    color: #999c9e;
}

/* Button on the right of a tile, e.g. the PDF download on the purchase order Sent tile */
.project-summary-tile-action {
    margin-left: auto;
    align-self: center;
}

.project-summary-overdue {
    color: #ed5565;
}

.project-summary-more .dropdown-menu > li > a,
.project-summary-more .dropdown-menu > li > span {
    display: block;
    padding: 6px 16px;
    white-space: nowrap;
}

.project-summary-more .dropdown-menu > li > a > i,
.project-summary-more .dropdown-menu > li > span > i {
    margin-right: 6px;
}

.project-summary-more .dropdown-menu > li.danger > a,
.project-summary-more .dropdown-menu > li.danger > a > i {
    color: #ed5565;
}

.project-summary-more .dropdown-menu > li.disabled > span {
    color: #999c9e;
    cursor: not-allowed;
}

/* Notes timeline (inserts/po-internal-notes-content.xhtml): the author's initials in a circle and a connecting line down the left, each note in a grey
   bubble, and the new note box underneath */
.note-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
}

.note-timeline-item:before {
    content: "";
    position: absolute;
    left: 17px;
    top: 38px;
    bottom: 2px;
    width: 2px;
    background-color: #e7eaec;
}

.note-timeline-item:last-child:before {
    display: none;
}

.note-timeline-avatar {
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border: 1px solid #b8e6dc;
    border-radius: 50%;
    background-color: #e8f7f4;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #138a72;
}

.note-timeline-body {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: #f3f3f4;
}

.note-timeline-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
}

.note-timeline-author {
    font-weight: 600;
}

.note-timeline-date {
    font-size: 12px;
    color: #999c9e;
}

/* Notes are typed as plain text, so the line breaks in them are kept */
.note-timeline-text {
    white-space: pre-line;
}

.note-timeline-new {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #e7eaec;
}

.note-timeline-new textarea {
    flex: 1;
}

.note-timeline-new .btn {
    white-space: nowrap;
}

/* Purchase order change log (inserts/po-changelog-content.xhtml): a grey summary bar per revision with the counts, values and net change, and
   under it the removed and added lines, each group with a red or green left edge */
.po-changelog-rev {
    margin-bottom: 16px;
}

.po-changelog-rev:last-child {
    margin-bottom: 0;
}

.po-changelog-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    background-color: #f3f3f4;
}

details > .po-changelog-summary {
    cursor: pointer;
    list-style: none;
}

details > .po-changelog-summary::-webkit-details-marker {
    display: none;
}

.po-changelog-toggle {
    font-size: 18px;
    line-height: 1;
    color: #aeb3b8;
    transition: transform 0.15s;
}

details[open] > .po-changelog-summary .po-changelog-toggle {
    transform: rotate(90deg);
}

.po-changelog-title {
    font-size: 14px;
    font-weight: 600;
}

.po-changelog-date {
    margin-right: 6px;
    font-size: 12px;
    color: #999c9e;
}

.po-changelog-net {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
}

.po-changelog-net-label {
    margin-right: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #999c9e;
}

.po-changelog-group {
    margin: 14px 0 0 8px;
    padding-left: 14px;
    border-left: 3px solid #e7eaec;
}

.po-changelog-removed {
    border-left-color: #f1c7c5;
}

.po-changelog-added {
    border-left-color: #b8e6dc;
}

.po-changelog-group-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.po-changelog-removed .po-changelog-group-title {
    color: #c9302c;
}

.po-changelog-added .po-changelog-group-title {
    color: #138a72;
}

div.table.po-changelog-table {
    margin-bottom: 0;
}

div.table.po-changelog-table table {
    table-layout: fixed;
}

.po-changelog-col-id {
    width: 100px;
}

.po-changelog-col-ref {
    width: 90px;
}

.po-changelog-col-qty {
    width: 60px;
}

.po-changelog-col-cost {
    width: 110px;
}

.po-changelog-col-action {
    width: 170px;
}

/* Outline buttons: tinted background with coloured text, matching the project summary callouts */
.btn.btn-outline.btn-primary {
    background-color: #e8f7f4;
    border-color: #b8e6dc;
    color: #138a72;
}

.btn.btn-outline.btn-primary i {
    color: #138a72;
}

.btn.btn-outline.btn-primary:hover,
.btn.btn-outline.btn-primary:focus,
.btn.btn-outline.btn-primary:active,
.btn.btn-outline.btn-primary.active {
    background-color: #d3f0e9;
    border-color: #1ab394;
    color: #138a72;
}

.btn.btn-outline.btn-primary:hover i {
    color: #138a72;
}

.btn.btn-outline.btn-success {
    background-color: #eef6fb;
    border-color: #c9e2f0;
    color: #31708f;
}

.btn.btn-outline.btn-success i {
    color: #31708f;
}

.btn.btn-outline.btn-success:hover,
.btn.btn-outline.btn-success:focus,
.btn.btn-outline.btn-success:active,
.btn.btn-outline.btn-success.active {
    background-color: #dcecf7;
    border-color: #1c84c6;
    color: #31708f;
}

.btn.btn-outline.btn-success:hover i {
    color: #31708f;
}

.btn.btn-outline.btn-info {
    background-color: #e9f9f9;
    border-color: #b5ebec;
    color: #1a9597;
}

.btn.btn-outline.btn-info i {
    color: #1a9597;
}

.btn.btn-outline.btn-info:hover,
.btn.btn-outline.btn-info:focus,
.btn.btn-outline.btn-info:active,
.btn.btn-outline.btn-info.active {
    background-color: #d4f3f4;
    border-color: #23c6c8;
    color: #1a9597;
}

.btn.btn-outline.btn-info:hover i {
    color: #1a9597;
}

.btn.btn-outline.btn-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

.btn.btn-outline.btn-warning i {
    color: #8a6d3b;
}

.btn.btn-outline.btn-warning:hover,
.btn.btn-outline.btn-warning:focus,
.btn.btn-outline.btn-warning:active,
.btn.btn-outline.btn-warning.active {
    background-color: #f8efc9;
    border-color: #f8ac59;
    color: #8a6d3b;
}

.btn.btn-outline.btn-warning:hover i {
    color: #8a6d3b;
}

.btn.btn-outline.btn-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

.btn.btn-outline.btn-danger i {
    color: #a94442;
}

.btn.btn-outline.btn-danger:hover,
.btn.btn-outline.btn-danger:focus,
.btn.btn-outline.btn-danger:active,
.btn.btn-outline.btn-danger.active {
    background-color: #ebcccc;
    border-color: #ed5565;
    color: #a94442;
}

.btn.btn-outline.btn-danger:hover i {
    color: #a94442;
}

/* Project stage wizard: chevron steps on the page background.
   The step's own background is the border colour; ::before paints the tinted fill 1px inside it. */
.project-wizard {
    display: flex;
    margin-bottom: 20px;
}

.project-wizard-step {
    --wizard-border: #dcdcdc;
    --wizard-fill: #ffffff;
    --wizard-fill-hover: #f5f5f5;
    --wizard-text: #8a8a8a;
    --wizard-solid: #8f8f8f;
    --wizard-notch: 14px;
    --wizard-shape: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, var(--wizard-notch) 50%);
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 64px;
    margin-left: -10px;
    padding: 0 22px 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 13px;
    background-color: var(--wizard-border);
    color: var(--wizard-text);
    clip-path: var(--wizard-shape);
}

.project-wizard-step::before {
    content: "";
    position: absolute;
    inset: 1px;
    background-color: var(--wizard-fill);
    clip-path: var(--wizard-shape);
}

.project-wizard-step:first-child {
    --wizard-notch: 0px;
    margin-left: 0;
    padding-left: 16px;
}

.project-wizard-step > * {
    position: relative;
}

.project-wizard-step i {
    font-size: 22px;
    line-height: 1;
}

.project-wizard-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-wizard-step:hover,
.project-wizard-step:focus {
    color: var(--wizard-text);
    text-decoration: none;
    outline: none;
}

.project-wizard-step:hover::before {
    background-color: var(--wizard-fill-hover);
}

.project-wizard-locked {
    cursor: not-allowed;
}

.project-wizard-green-background {
    --wizard-border: #b8e6dc;
    --wizard-fill: #e8f7f4;
    --wizard-fill-hover: #d3f0ea;
    --wizard-text: #138a72;
    --wizard-solid: #1AB394;
}

.project-wizard-blue-background {
    --wizard-border: #b9d8ee;
    --wizard-fill: #eaf3fa;
    --wizard-fill-hover: #d6e8f5;
    --wizard-text: #1c6ea4;
    --wizard-solid: #1C84C6;
}

.project-wizard-red-background {
    --wizard-border: #ebccd1;
    --wizard-fill: #f2dede;
    --wizard-fill-hover: #ebcdcd;
    --wizard-text: #a94442;
    --wizard-solid: #D9534F;
}

.project-wizard-viewers {
    margin: -8px 0 20px;
}

.project-summary-task + .project-summary-task {
    margin-top: 6px;
}

.project-summary-task-age {
    white-space: nowrap;
    font-size: 12px;
    opacity: 0.85;
}

/* Project details form: section cards with stacked labels */
.pd-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.pd-card {
    border: 1px solid #dfe3e6;
    border-radius: 8px;
    padding: 14px 16px 16px;
    margin-bottom: 16px;
    background-color: #f8f9fa;
}

body:not(.dark-mode) .pd-card .form-control {
    background-color: #ffffff;
}

.pd-pair > .pd-card {
    margin-bottom: 0;
}

.pd-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #676d73;
    margin-bottom: 14px;
}

.pd-card-header > i {
    font-size: 18px;
    width: 20px;
    text-align: center;
    color: #aeb3b8;
}

.pd-card-header-badge {
    display: flex;
    align-items: center;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
}

.pd-card-header-aside {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 400;
}

.costing-summary-tiles {
    margin: 0 0 16px;
}

/* Pricing summary (inserts/pricingReviewSummaryContent.xhtml): the tiles keep their own width and sit on the right, under the price columns */
.pricing-summary-tiles {
    justify-content: flex-end;
}

.pricing-summary-tiles .project-summary-tile {
    flex: 0 0 auto;
    min-width: 200px;
}

.pricing-summary-tiles .project-summary-tile > div {
    flex: 1;
    text-align: right;
}

/* The account manager's changes go on the left; Total Cost, the first tile in the page, starts the totals on the right */
.pricing-summary-tiles .pricing-summary-tile-start {
    order: -1;
}

.pricing-summary-tiles .project-summary-tile:first-child {
    margin-left: auto;
}

/* Tile labels in the same small caps as the table's column headings */
.costing-summary-tiles .project-summary-tile-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8f94;
}

/* The Items Complete tile takes the colour of the matching status pill */
.costing-summary-tiles .costing-tile-yes {
    background-color: #e8f7f4;
}

.costing-summary-tiles .costing-tile-yes > i,
.costing-summary-tiles .costing-tile-yes .project-summary-tile-value {
    color: #138a72;
}

.costing-summary-tiles .costing-tile-unknown {
    background-color: #fcf8e3;
}

.costing-summary-tiles .costing-tile-unknown > i,
.costing-summary-tiles .costing-tile-unknown .project-summary-tile-value {
    color: #8a6d3b;
}

.costing-summary-tiles .costing-tile-no {
    background-color: #fcebea;
}

.costing-summary-tiles .costing-tile-no > i,
.costing-summary-tiles .costing-tile-no .project-summary-tile-value {
    color: #c9302c;
}

/* Every status pill is the same width, wide enough for "1234 / 1234": icon on the left, count on the right */
.costing-status-pill {
    justify-content: space-between;
    width: 124px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Costing summary tab: rows like the finance summary table, left edge in the row's status colour */
div.table.asset-table.costing-summary-table tbody > tr > td {
    padding: 12px;
    border: none;
    border-top: 8px solid #ffffff;
    background-color: #f5f7f8;
    font-size: 14px;
    color: #2f4050;
}

div.table.asset-table.costing-summary-table tbody > tr:first-child > td {
    border-top: none;
}

div.table.asset-table.costing-summary-table tbody > tr > td:first-child {
    box-shadow: inset 3px 0 0 #b4b9be;
}

div.table.asset-table.costing-summary-table tbody > tr.costing-row-yes > td:first-child {
    box-shadow: inset 3px 0 0 #1ab394;
}

div.table.asset-table.costing-summary-table tbody > tr.costing-row-unknown > td:first-child {
    box-shadow: inset 3px 0 0 #f0ad4e;
}

div.table.asset-table.costing-summary-table tbody > tr.costing-row-no > td:first-child {
    box-shadow: inset 3px 0 0 #d9534f;
}

div.table.asset-table.costing-summary-table td.text-right {
    font-variant-numeric: tabular-nums;
}

/* "| 12" after a card's title: how many of the thing the card lists */
.pd-card-header-count {
    font-weight: 400;
    color: #8a8f94;
}

/* Order summary: lighter grey for the summary tile labels and the header counts */
.order-summary-page .project-summary-tile-label,
.order-summary-page .pd-card-header-count {
    color: #b3b7bb;
}

/* A card whose header comes after its body in the page (the header shows a count that is only known once the body's
   table has been drawn) and is moved back to the top here */
.pd-card-reorder {
    display: flex;
    flex-direction: column;
}

.pd-card-reorder > .pd-card-header {
    order: -1;
}

/* A table with nothing in it is replaced by the callout that follows it */
.pd-empty-host:has(.pd-empty-callout) .ui-datatable {
    display: none;
}

/* A card whose table has nothing in it is hidden altogether */
.project-nav-card:has(.pd-empty-hide-card) {
    display: none;
}

/* Search box in the middle of a card's title bar. It filters the table below it */
.pd-card-header {
    position: relative;
}

.pd-card-header-search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: 45%;
    font-weight: 400;
}

.pd-card-header-search > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    color: #1ab394;
    pointer-events: none;
}

/* Clears the search. Only shown once something has been typed */
.pd-card-header-search > i.pd-card-header-search-clear {
    left: auto;
    right: 10px;
    color: #999c9e;
    cursor: pointer;
    pointer-events: auto;
}

.pd-card-header-search > i.pd-card-header-search-clear:hover {
    color: #ed5565;
}

.pd-card-header-search input:placeholder-shown + i.pd-card-header-search-clear {
    display: none;
}

.pd-card-header-search input {
    width: 100%;
    height: 30px;
    padding: 4px 30px 4px 32px;
    border: 1px solid #e7eaec;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: none;
    outline: none;
    background-color: #fff;
}

.pd-card-header-search input:focus {
    border-color: #1ab394;
}

/* No room to sit in the middle on a narrow screen, so it drops onto its own line */
@media (max-width: 991px) {
    .pd-card-header {
        flex-wrap: wrap;
    }

    .pd-card-header-search {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        order: 3;
        width: 100%;
        max-width: none;
    }
}

.pd-card-footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
}

.pd-card-footer-end {
    justify-content: flex-end;
}

.pd-contact-callout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-left: 4px solid #1c84c6;
    border-radius: 4px;
    background-color: #e8f2fa;
    color: #2f4050;
}

.pd-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    word-break: break-word;
}

.pd-contact-row > i {
    width: 18px;
    text-align: center;
    color: #1a6fa8;
}

.pd-contact-name {
    font-weight: 600;
    font-size: 15px;
}

.pd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 16px;
}

.pd-pair .pd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pd-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
}

.pd-grid-3:empty {
    display: none;
}

.pd-field textarea.form-control.ui-inputfield {
    height: auto;
    resize: vertical;
}

.pd-span-2 {
    grid-column: span 2;
}

.pd-span-all {
    grid-column: 1 / -1;
}

.pd-contents {
    display: contents;
}

.pd-field {
    min-width: 0;
}

.pd-field > label,
.pd-section-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #4a4f55;
}

.pd-section-label {
    margin: 6px 0 -6px;
    padding-top: 10px;
    border-top: 1px solid #dfe3e6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}

.pd-field .form-control,
.pd-field .ui-calendar,
.pd-field .ui-calendar .ui-inputfield,
.pd-field .ui-autocomplete {
    width: 100%;
}

.pd-value {
    min-height: 34px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pd-muted {
    color: #999c9e;
    font-style: italic;
}

.pd-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-inline > :first-child {
    flex: 1;
    min-width: 0;
}

.pd-inline-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.pd-badges {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.pd-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding: 4px 0;
}

.pd-checks .ui-chkbox-label,
.pd-value .ui-chkbox-label {
    margin-left: 6px;
    cursor: pointer;
}

.pd-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pd-callout {
    margin-bottom: 16px;
}

.pd-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.pd-status-yes {
    background-color: #e8f7f4;
    border-color: #b8e6dc;
    color: #138a72;
}

.pd-status-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

.pd-site-search {
    margin-bottom: 14px;
}

.pd-site {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.pd-site-name {
    font-size: 15px;
    font-weight: 600;
}

.pd-site-address {
    color: #4a4f55;
    margin-top: 2px;
}

.pd-note-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.pd-card .pd-note-tile {
    display: block;
    background-color: #eceef0;
}

.pd-note-text {
    margin-top: 2px;
    white-space: pre-line;
}

.pd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 14px;
}

.pd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #d5d9dd;
    background-color: #eceef0;
    color: #4a4f55;
    font-size: 12px;
}

.pd-chip-yes {
    background-color: #e8f7f4;
    border-color: #b8e6dc;
    color: #138a72;
}

.pd-chip-no {
    background-color: #fcebea;
    border-color: #f1c7c5;
    color: #c9302c;
}

/* An uploaded file waiting to be saved: a larger green outlined pill with a remove button on the end */
.pd-chip-file {
    gap: 8px;
    padding: 6px 8px 6px 14px;
    border-color: #1ab394;
    background-color: #e8f7f4;
    color: #138a72;
    font-size: 14px;
    font-weight: 600;
}

a.pd-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: inherit;
    font-size: 16px;
}

a.pd-chip-remove:hover {
    background-color: #fcebea;
    color: #c9302c;
}

/* Call contact on the site card: free text, so the pill may wrap */
.pd-site-contact {
    margin-top: 8px;
}

.pd-site-contact > .pd-chip {
    flex-wrap: wrap;
    border-radius: 12px;
    background-color: #f8f9fa;
}

.pd-site-contact > .pd-chip > b {
    font-weight: 600;
    color: #8a9097;
}

.pd-chip-unknown {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

.pd-chip-info {
    background-color: #eef6fb;
    border-color: #c9e2f0;
    color: #31708f;
}

.pd-page-title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 600;
}

/* On the page background the cards are white and lifted instead of grey */
.pd-page .pd-card {
    background-color: #ffffff;
    border-color: #e3e6e9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pd-page .pd-card .pd-note-tile {
    background-color: #f3f3f4;
}

.pd-page-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.pd-card .pd-page-actions {
    margin: 14px 0 0;
}

@media (max-width: 991px) {
    .pd-site {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .pd-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-span-2 {
        grid-column: 1 / -1;
    }

    .pd-site-search {
        flex-wrap: wrap;
    }
}

/* Project detail nav (internal/project/project-detail.xhtml): the tabView's tabs as a row of narrow pills on the page background, each panel's content in its own card */
.ui-tabs.project-nav {
    padding: 0;
    border: none;
    background: none;
}

.ui-tabs.project-nav > .ui-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    border: none;
    background: none;
}

.ui-tabs.project-nav > .ui-tabs-nav::before,
.ui-tabs.project-nav > .ui-tabs-nav::after {
    display: none;
}

.ui-tabs.project-nav > .ui-tabs-nav > li.ui-tabs-header {
    --pill-border: #dcdcdc;
    --pill-fill: #ffffff;
    --pill-fill-hover: #f5f5f5;
    --pill-text: #8a8a8a;
    display: flex;
    flex: 0 0 88px;
    width: 88px;
    float: none;
    position: static;
    top: auto;
    margin: 0;
    padding: 0;
    border: 1px solid var(--pill-border);
    border-radius: 14px;
    background-color: var(--pill-fill);
    white-space: normal;
    overflow: hidden;
}

/* Wider pills for longer names that should stay on one line (internal/projects.xhtml) */
.ui-tabs.project-nav.project-nav-wide > .ui-tabs-nav > li.ui-tabs-header {
    flex-basis: 124px;
    width: 124px;
    white-space: nowrap;
}

.ui-tabs.project-nav > .ui-tabs-nav > li.ui-tabs-header.ui-state-hover {
    background-color: var(--pill-fill-hover);
}

.ui-tabs.project-nav > .ui-tabs-nav > li.ui-tabs-header.ui-state-active {
    --pill-border: #b8e6dc;
    --pill-fill: #e8f7f4;
    --pill-fill-hover: #d3f0ea;
    --pill-text: #138a72;
}

/* Beats the global top tab rules (4px bottom border, square corners) so the pills look the same in light and dark mode */
body .ui-tabs.ui-tabs-top.project-nav > .ui-tabs-nav > li.ui-tabs-header,
body .ui-tabs.ui-tabs-top.project-nav > .ui-tabs-nav > li.ui-tabs-header:hover,
body .ui-tabs.ui-tabs-top.project-nav > .ui-tabs-nav > li.ui-tabs-header.ui-state-active {
    border: 1px solid var(--pill-border);
    border-radius: 14px;
    background-color: var(--pill-fill);
    font-weight: 600;
}

body .ui-tabs.ui-tabs-top.project-nav > .ui-tabs-nav > li.ui-tabs-header:hover {
    background-color: var(--pill-fill-hover);
}

.ui-tabs.project-nav > .ui-tabs-nav > li.ui-tabs-header > a,
.ui-tabs.project-nav > .ui-tabs-nav > li.ui-tabs-header.ui-state-active > a,
.ui-tabs.project-nav > .ui-tabs-nav.ui-widget-header > li.ui-state-hover > a {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 8px 4px;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pill-text);
}

.ui-tabs.project-nav > .ui-tabs-nav > li.ui-tabs-header > a i {
    font-size: 22px;
    line-height: 1;
    color: inherit;
}

/* Docket count in place of the icon on the my work / all work task pills. It takes the pill's text colour, so it follows dark mode */
.ui-tabs.project-nav > .ui-tabs-nav > li.ui-tabs-header > a .work-nav-count {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Task names on the my work / all work pills are long, so these pills are a little wider than the project page ones */
.ui-tabs.project-nav.work-nav > .ui-tabs-nav > li.ui-tabs-header {
    flex-basis: 108px;
    width: 108px;
}

.ui-tabs.project-nav > .ui-tabs-panels,
.ui-tabs.project-nav > .ui-tabs-panels > .ui-tabs-panel {
    padding: 0;
    border: none;
    background: none;
}

.project-nav-card {
    border: 1px solid #e3e6e9;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.project-nav-footer {
    margin-bottom: 20px;
}

/* Work item history on the project timeline tab scrolls inside its card */
.project-history-scroll {
    max-height: 520px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Project brief and attachment upload rows (internal/inserts/projectBriefContent.xhtml, projectAttachmentsContent.xhtml): help text with the AutoQuotes style upload button */
.project-brief-upload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* The upload button under the brief table sits on the right */
.project-brief-upload:not(.bs-callout) {
    justify-content: flex-end;
}

.bs-callout.project-brief-upload h4 {
    margin-top: 0;
}

.bs-callout.project-brief-upload p {
    margin-bottom: 0;
}

/* Outline variant of the compact upload button */
.autoquotes-upload.autoquotes-upload-outline.ui-fileupload div.ui-fileupload-buttonbar span.ui-fileupload-choose {
    border: 1px solid #b8e6dc;
    border-radius: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    background-color: #e8f7f4;
    color: #138a72;
}

.autoquotes-upload.autoquotes-upload-outline.ui-fileupload div.ui-fileupload-buttonbar span.ui-fileupload-choose.ui-state-hover {
    border-color: #1ab394;
    background-color: #d3f0e9;
    color: #138a72;
}

/* Change Active Revision button at the bottom right of a drawing card */
/* Checked cell on the drawing revisions table: the checked-by pill and Undo Check, centred and close together */
.drawing-checked-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.project-drawing-actions {
    gap: 8px;
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* Health and safety document status pills (internal/inserts/projectHealthAndSafetyContent.xhtml): green when the document type is uploaded, red when missing */
.hs-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.hs-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    font-size: 15px;
    border: 1px solid;
    border-radius: 999px;
    font-weight: 600;
}

.hs-pill > i {
    font-size: 22px;
    line-height: 1;
    color: inherit;
}

.hs-pill-yes {
    border-color: #b8e6dc;
    background-color: #e8f7f4;
    color: #138a72;
}

.hs-pill-no {
    border-color: #f1c4c2;
    background-color: #fdeeee;
    color: #c0392b;
}

/* Project asset list (internal/inserts/assetDetailsContent.xhtml): each asset row starts a group, its line items sit indented beneath it */
.asset-header {
    margin-bottom: 4px;
}

.pd-card-header-aside .btn > i {
    margin-right: 4px;
}

.asset-help {
    margin: 0 0 14px 28px;
    font-size: 12px;
    color: #999C9E;
}

.project-nav-card div.table thead th,
.project-nav-card table.table > thead > tr > th,
div.table.asset-table thead th,
div.table.po-line-item-table thead th,
div.table.projects-table thead th {
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid #dfe3e6;
    background: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8f94;
}

/* a little air between the column headings and the first row */
div.table.asset-table tbody:before,
table.finance-summary-table > tbody:before {
    content: "";
    display: block;
    height: 6px;
}

div.table.asset-table tbody td {
    padding: 8px 10px;
    border: none;
    vertical-align: middle;
}

div.table.asset-table tr.oc-block td {
    border-top: 8px solid #ffffff;
    background-color: #f5f7f8;
    color: #2f4050;
}

div.table.asset-table tr.oc-block td:first-child {
    box-shadow: inset 3px 0 0 #1ab394;
}

/* Works planning checklist (internal/project/works-planning.xhtml): the left edge of an action and the rows under it. Grey when nothing has been
   raised or it has all expired, green when everything raised is complete, amber while anything is outstanding */
div.table.asset-table tr.wpc-none td:first-child {
    box-shadow: inset 3px 0 0 #b4b9be;
}

div.table.asset-table tr.wpc-done td:first-child {
    box-shadow: inset 3px 0 0 #1ab394;
}

div.table.asset-table tr.wpc-outstanding td:first-child {
    box-shadow: inset 3px 0 0 #f0ad4e;
}

div.table.asset-table tr.oc-blocklineitem td {
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: none;
    border-bottom: 1px solid #f0f2f3;
    background-color: #ffffff;
    font-size: 12px;
    color: #7a7f85;
}

.asset-thumb-cell {
    width: 84px;
    text-align: center;
}

.asset-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 48px;
    margin: 0 auto;
    border: 1px solid #e3e6e9;
    border-radius: 6px;
    background-color: #ffffff;
    overflow: hidden;
}

.asset-thumb img {
    max-width: 100%;
    max-height: 100%;
}

.asset-thumb-empty > i {
    font-size: 22px;
    color: #c5c9cd;
}

.asset-connector {
    font-size: 18px;
    color: #c5c9cd;
}

.asset-ref {
    display: inline-block;
    min-width: 34px;
    padding: 2px 8px;
    border: 1px solid #b8e6dc;
    border-radius: 999px;
    background-color: #e8f7f4;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: #138a72;
}

div.table.asset-table tr.oc-block td.asset-model-cell {
    font-weight: 600;
}

div.table.asset-table td.asset-code-cell,
div.table.po-line-item-table td.asset-code-cell {
    font-family: Menlo, Consolas, monospace;
    font-size: 12px;
}

.asset-doc-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #b8e6dc;
    border-radius: 8px;
    background-color: #e8f7f4;
    color: #138a72;
}

.asset-doc-link:hover,
.asset-doc-link:focus {
    border-color: #1ab394;
    background-color: #d3f0e9;
    color: #138a72;
}

.asset-doc-link > i {
    font-size: 18px;
    line-height: 1;
    color: inherit;
}

/* CVI status labels on the project CVI tab (internal/inserts/projectCVIsContent.xhtml) */
.label.cvi-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.label.cvi-status > i {
    font-size: 15px;
    line-height: 1;
    color: inherit;
}

/* Items not migrated to Advantage (internal/inserts/projectAdvantageMigrationContent.xhtml): the left border and the ref in warning colours */
div.table.asset-table tr.oc-block.migration-unmigrated td:first-child {
    box-shadow: inset 3px 0 0 #F0AD4E;
}

/* On a line item row: the ref of the block it belongs to, in grey so it doesn't read as a block of its own */
.asset-ref.asset-ref-host {
    border-color: #e1e4e6;
    background-color: #f3f3f4;
    font-weight: 400;
    color: #676a6c;
}

tr.migration-unmigrated .asset-ref {
    border-color: #f3d9a4;
    background-color: #fdf3d8;
    color: #8a6d3b;
}

/* Migration Complete callout: tick and text on the left, who migrated it and when in a summary style tile on the right */
.bs-callout.migration-complete {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.migration-complete-body {
    flex: 1 1 260px;
    min-width: 0;
}

/* Site and Installation cards side by side on the Advantage tab before migration */
.pd-pair > .project-nav-card {
    margin-bottom: 0;
}

.migration-help {
    margin: 4px 0 0;
    font-size: 12px;
    color: #999C9E;
}

/* Proposal tiles on the project finance tab (internal/inserts/projectInvoiceContent.xhtml): PDF download on the left, value in the middle */
.proposal-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.proposal-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid #e3e6e9;
    border-radius: 8px;
    background-color: #f8f9fa;
}

.proposal-tile.proposal-tile-current {
    border-color: #b8e6dc;
    background-color: #e8f7f4;
}

.proposal-tile-pdf {
    flex-shrink: 0;
}

.proposal-tile-body {
    flex: 1;
    min-width: 0;
}

.proposal-tile-label {
    font-size: 12px;
    font-weight: 600;
    color: #4a4f55;
}

.proposal-tile-value {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #2f4050;
}

.proposal-tile-current .proposal-tile-value {
    color: #138a72;
}

.proposal-tile-meta {
    font-size: 12px;
    color: #8a8f94;
}

/* Show Old Proposals sits on the left of the Current Proposal card's button row */
.project-drawing-actions > .old-proposals-show {
    margin-right: auto;
}

/* Finance summary on the project finance tab: the same look as the asset tables */
table.finance-summary-table {
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}

table.finance-summary-table > thead > tr > th {
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #dfe3e6;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8f94;
}

table.finance-summary-table > tbody > tr > td {
    padding: 12px;
    border: none;
    border-top: 8px solid #ffffff;
    vertical-align: middle;
    background-color: #f5f7f8;
    font-size: 14px;
    color: #2f4050;
}

table.finance-summary-table > tbody > tr > td:first-child {
    box-shadow: inset 3px 0 0 #1ab394;
}

table.finance-summary-table > tbody > tr.finance-summary-converted > td:first-child {
    box-shadow: inset 3px 0 0 #b4b9be;
}

/* A marshalling check that still needs something doing */
table.finance-summary-table > tbody > tr.finance-summary-incomplete > td:first-child {
    box-shadow: inset 3px 0 0 #d9534f;
}

/* How many items a marshalling check still has outstanding: a larger red pill with the count picked out */
.pd-chip.marshalling-outstanding {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.pd-chip.marshalling-outstanding > b {
    font-size: 16px;
    line-height: 1;
}

/* tables.css gives the last row of every .table a bottom border, which shows as a white line under the last row */
.table.finance-summary-table tbody > tr:last-child > td {
    border-bottom: none;
}

table.finance-summary-table > tbody > tr > td:last-child {
    width: 90px;
    text-align: right;
}

table.finance-summary-table > tbody > tr.finance-summary-difference > td {
    background-color: #ffffff;
    border: none;
    color: #7a7f85;
}

table.finance-summary-table > tbody > tr.finance-summary-difference > td:first-child {
    box-shadow: none;
}

/* Invoiced so far on the project finance tab: amount, target and a progress bar */
.invoiced-summary {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #e3e6e9;
    border-radius: 8px;
    background-color: #f8f9fa;
}

.invoiced-summary-figures {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.invoiced-summary-value {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #2f4050;
}

.invoiced-summary-of {
    font-size: 13px;
    color: #8a8f94;
}

.invoiced-summary-percent {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    color: #4a4f55;
}

.invoiced-summary-bar {
    height: 6px;
    border-radius: 3px;
    background-color: #e3e6e9;
    overflow: hidden;
}

.invoiced-summary-bar > div {
    height: 100%;
    border-radius: 3px;
    background-color: #f0ad4e;
}

.invoiced-summary-complete {
    border-color: #b8e6dc;
    background-color: #e8f7f4;
}

.invoiced-summary-complete .invoiced-summary-value,
.invoiced-summary-complete .invoiced-summary-percent {
    color: #138a72;
}

.invoiced-summary-complete .invoiced-summary-bar > div {
    background-color: #1ab394;
}

/* Progress bar inside a summary tile, e.g. what the project will be invoiced to after this invoice */
.project-summary-tile-body {
    flex: 1;
    min-width: 0;
}

.project-summary-tile .invoiced-summary-bar {
    margin-top: 8px;
}

.invoiced-summary-bar.invoiced-summary-bar-complete > div {
    background-color: #1ab394;
}

/* Sales invoice / credit callouts on the project finance tab: PDF, then amount, then who created it on the right */
.bs-callout.finance-doc {
    display: flex;
    background-color: #f8f9fa;
    align-items: center;
    gap: 16px;
}

.finance-doc-pdf {
    flex-shrink: 0;
}

.finance-doc-body {
    flex: 1;
    min-width: 0;
}

.finance-doc-label {
    font-size: 12px;
    font-weight: 600;
    color: #4a4f55;
}

.finance-doc-value {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #2f4050;
}

.finance-doc-comments {
    margin-top: 2px;
    font-size: 13px;
    color: #676a6c;
}

.finance-doc-action {
    margin-top: 8px;
}

.finance-doc-meta {
    flex-shrink: 0;
    text-align: right;
    font-size: 13px;
    color: #676a6c;
}

.finance-doc-date {
    font-size: 12px;
    color: #8a8f94;
}

/* Margin and discount figures in the finance summary: green good, red bad, amber for discount given */
table.finance-summary-table > tbody > tr > td.fin-good {
    font-weight: 600;
    color: #138a72;
}

table.finance-summary-table > tbody > tr > td.fin-bad {
    font-weight: 600;
    color: #c9302c;
}

table.finance-summary-table > tbody > tr > td.fin-warn {
    font-weight: 600;
    color: #b7791f;
}

/* Spec tab (internal/inserts/projectSpecContent.xhtml) and the equipment blocks listed on it */
.spec-text {
    white-space: pre-line;
}

.spec-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    gap: 12px;
}

.spec-item {
    display: flex;
    gap: 14px;
    padding: 12px;
    border: 1px solid #dfe3e6;
    border-radius: 8px;
    background-color: #f8f9fa;
}

/* The maker's logo above the product photo, both on white as most are supplied with a white background */
.spec-item-media {
    display: flex;
    flex: 0 0 140px;
    flex-direction: column;
    align-self: flex-start;
    width: 140px;
    border: 1px solid #e7eaec;
    border-radius: 6px;
    background-color: #fff;
    overflow: hidden;
}

.spec-item-logo,
.spec-item-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.spec-item-logo {
    height: 44px;
    border-bottom: 1px solid #e7eaec;
}

.spec-item-photo {
    height: 120px;
}

.spec-item-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.spec-item-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.spec-item-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.spec-item-heading {
    flex: 1;
    min-width: 0;
}

.spec-item-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 15px;
    font-weight: 600;
    color: #2f4050;
}

.spec-item-maker {
    font-weight: 400;
    color: #8a8f94;
}

.spec-item-title .pd-chip {
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}

.spec-item-desc {
    margin-top: 2px;
    font-size: 12px;
    color: #676a6c;
}

.spec-item-lines {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.spec-item-lines > li {
    display: flex;
    gap: 6px;
    padding: 2px 0;
}

.spec-item-line-qty {
    flex: 0 0 30px;
    text-align: right;
    font-weight: 600;
    color: #8a8f94;
}

.spec-item-services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.spec-item-services:empty {
    display: none;
}

.spec-item-services .pd-chip {
    background-color: #fff;
}

.spec-item-services .pd-chip img {
    height: 16px;
}

a.spec-item-specsheet,
a.spec-item-specsheet:focus {
    color: #c9302c;
    text-decoration: none;
}

a.spec-item-specsheet:hover {
    border-color: #c9302c;
    color: #c9302c;
    text-decoration: none;
}

.spec-item-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #e7eaec;
}

.spec-item-qty {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    white-space: nowrap;
}

.spec-item-qty b {
    font-weight: 700;
}

/* Editable quantity: the input sits inside the pill */
.spec-item-qty input {
    width: 34px;
    height: 18px;
    padding: 0 2px;
    border: 1px solid #c5cacf;
    border-radius: 4px;
    background-color: #fff;
    font-weight: 700;
    text-align: center;
    color: inherit;
    outline: none;
}

.spec-item-qty input:focus {
    border-color: #1ab394;
}

.spec-item-actions {
    display: inline-flex;
    gap: 6px;
}

@media (max-width: 600px) {
    .spec-items {
        grid-template-columns: minmax(0, 1fr);
    }

    .spec-item {
        flex-direction: column;
    }
}

/* Drop down filter above a table */
.filter-select {
    display: inline-flex;
    align-items: stretch;
    height: 34px;
    border: 1px solid #e1e4e6;
    border-radius: 6px;
    background-color: #fff;
    vertical-align: middle;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-select:hover {
    border-color: #c5cacf;
}

.filter-select:focus-within {
    border-color: #1ab394;
    box-shadow: 0 0 0 3px rgba(26, 179, 148, 0.15);
}

.filter-select .ui-selectonemenu {
    display: block;
    box-sizing: border-box;
    width: 180px !important;
    min-width: 0;
    padding: 0 28px 0 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.filter-select .ui-selectonemenu label.ui-selectonemenu-label {
    height: 32px;
    padding: 0 0 0 10px;
    border: none;
    background: transparent;
    box-shadow: none;
    font-weight: 600;
    line-height: 32px;
    color: #2f4050;
}

.filter-select .ui-selectonemenu .ui-selectonemenu-trigger {
    width: 28px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.filter-select .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    position: static;
    width: 28px;
    height: 32px;
    margin: 0;
    background-image: none;
    text-align: center;
    text-indent: 0;
    line-height: 32px;
    color: #9aa0a6;
}

.filter-select .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon:before {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 16px;
}

.ui-selectonemenu-panel.filter-select-panel {
    margin-top: 4px;
    padding: 4px 0;
    border: 1px solid #e1e4e6;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* The panel has the border, so the list inside it must not draw the theme's one as well */
.ui-selectonemenu-panel.filter-select-panel .ui-selectonemenu-items-wrapper,
.ui-selectonemenu-panel.filter-select-panel .ui-selectonemenu-list {
    border: none;
    scrollbar-width: thin;
}

/* PrimeFaces puts a 200px max-height inline on the wrapper, which is one row short of the projects status list */
.ui-selectonemenu-panel.filter-select-panel .ui-selectonemenu-items-wrapper {
    max-height: 320px !important;
}

.ui-selectonemenu-panel.filter-select-panel .ui-selectonemenu-item {
    margin: 0;
    padding: 6px 12px;
    border: none;
    border-radius: 0;
}

.ui-selectonemenu-panel.filter-select-panel .ui-selectonemenu-item.ui-state-highlight {
    background: #1ab394;
    color: #fff;
}

/* Projects list filter row: filters on the left, the search centred, the buttons on the right */
.projects-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.projects-toolbar-side {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.projects-toolbar-actions {
    justify-content: flex-end;
}

/* Call queues: the call-number-only search under the main search bar */
.call-quick-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin: 10px 0;
}

.call-quick-search input.ui-inputtext {
    width: 180px;
}

.call-quick-search a.btn {
    margin-left: 12px;
}

.projects-toolbar-search {
    flex: 0 1 380px;
    min-width: 220px;
}

/* The omnisearch shrunk to the height of the buttons beside it */
.projects-toolbar-search .omni-searchbar {
    max-width: none;
    margin: 0;
}

.projects-toolbar-search .omni-searchbar input.form-control.omni-searchbox {
    height: 34px;
    padding: 6px 36px 6px 40px;
    border-radius: 17px;
    font-size: 14px;
}

.projects-toolbar-search .omni-searchbar i.omni-search-icon-button {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 15px;
    line-height: 34px;
    text-align: center;
}

.projects-toolbar-search .omni-searchbar i.omni-cancel-icon {
    top: 8px;
    right: 12px;
    font-size: 18px;
}

@media (max-width: 1199px) {
    .projects-toolbar-search {
        flex: 1 1 100%;
        order: 3;
    }
}

/* Projects list (internal/projects.xhtml): tighter rows, with a muted second line under the main value */
div.ui-datatable.projects-table .ui-datatable-tablewrapper th.ui-state-default {
    padding: 8px 10px;
    white-space: nowrap;
}

div.ui-datatable.projects-table .ui-datatable-data > tr > td {
    padding: 6px 10px;
    line-height: 1.35;
    vertical-align: middle;
}

div.ui-datatable.projects-table .ui-datatable-data > tr > td.text-right {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

div.ui-datatable.projects-table .ui-datatable-data > tr > td.projects-table-flag {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/* At risk / opportunity marker beside the project stage. The reason is in its title */
.projects-table-flag-icon {
    font-size: 17px;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
}

.projects-table-flag-icon.at-risk {
    color: #D9534F;
}

.projects-table-flag-icon.opportunity {
    color: #1AB394;
}

/* Project status pill on the projects list. 30, 60, 90 and Converted fill one to four steps of the five step meter.
   Every pill is the same width, with the meter or icon on the left and the name on the right */
.project-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid #e1e4e6;
    border-radius: 999px;
    background-color: #f8f9fa;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: #676a6c;
    justify-content: space-between;
    width: 126px;
    min-height: 22px;
}

.project-status > i {
    font-size: 14px;
    line-height: 1;
}

.project-status-steps {
    display: inline-flex;
    gap: 2px;
}

.project-status-steps > i {
    width: 6px;
    height: 10px;
    border-radius: 2px;
    background-color: #d5d9dc;
}

.project-status-30 .project-status-steps > i:nth-child(-n+1) {
    background-color: #ed5565;
}

.project-status-60 .project-status-steps > i:nth-child(-n+2) {
    background-color: #f0ad4e;
}

.project-status-90 .project-status-steps > i:nth-child(-n+3) {
    background-color: #1c84c6;
}

.project-status-converted .project-status-steps > i:nth-child(-n+4) {
    background-color: #1ab394;
}

.project-status-complete {
    border-color: #b8e6dc;
    background-color: #e8f7f4;
    color: #138a72;
}

.project-status-lost {
    border-color: #f1c7c5;
    background-color: #fcebea;
    color: #c9302c;
}

/* Docket priority on my work / all work: the status pill with a three step meter, low green, normal amber, high red */
.project-status.docket-priority {
    width: 86px;
}

.docket-priority-low .project-status-steps > i:nth-child(-n+1) {
    background-color: #1ab394;
}

.docket-priority-normal .project-status-steps > i:nth-child(-n+2) {
    background-color: #f0ad4e;
}

.docket-priority-high .project-status-steps > i:nth-child(-n+3) {
    background-color: #ed5565;
}

/* Spans rather than divs: a PrimeFaces row only selects when the click lands on the cell or a span */
.projects-table-sub {
    display: block;
}

.projects-table-role {
    display: block;
    white-space: nowrap;
}

.projects-table .project-status i {
    pointer-events: none;
}

.projects-table-role > span {
    display: inline-block;
    min-width: 22px;
    font-size: 10px;
    font-weight: 600;
    color: #999c9e;
}

/* Cost summary tables: line items get a paler edge, rows with a problem (or no cost yet) go red, existing rows go grey */
div.table.asset-table tr.oc-block.problem td,
div.table.asset-table tr.oc-block.red td {
    background-color: #fcebea;
    color: #c9302c;
}

div.table.asset-table tr.oc-blocklineitem.problem td,
div.table.asset-table tr.oc-blocklineitem.red td {
    background-color: #fff5f5;
    color: #c9302c;
}

div.table.asset-table tr.oc-block.problem td:first-child,
div.table.asset-table tr.oc-block.red td:first-child {
    box-shadow: inset 3px 0 0 #d9534f;
}

/* Pricing line items with no central price yet (pricingPvrliTableContent.xhtml): a red left edge and a red id, the rest of the row is left alone */
div.table tr.pvrli-incomplete > td:first-child {
    box-shadow: inset 3px 0 0 #d9534f;
}

tr.problem .asset-ref,
tr.red .asset-ref,
tr.problem .id-pill,
tr.red .id-pill,
tr.pvrli-incomplete .id-pill {
    border-color: #f1c7c5;
    background-color: #fcebea;
    color: #c9302c;
}

tr.problem .asset-connector,
tr.red .asset-connector {
    color: #d9534f;
}

div.table.asset-table tr.oc-block.existing td:first-child {
    box-shadow: inset 3px 0 0 #b4b9be;
}

tr.existing .asset-ref {
    border-color: #e1e4e6;
    background-color: #f3f3f4;
    color: #8a8f94;
}

/* Additional costs table: plain row edit icons drawn with Material Design Icons: grey pencil, green tick, red cross. Display is left alone because the theme hides the tick and cross until the row is being edited */
.costing-editable-table .ui-row-editor .ui-icon {
    width: 24px;
    height: 24px;
    background-image: none;
    font-size: 0;
    line-height: 24px;
    text-align: center;
    text-indent: 0;
    color: #9aa0a6;
    cursor: pointer;
    transition: color 0.15s;
}

.costing-editable-table .ui-row-editor .ui-icon:before {
    display: inline-block;
    font-family: "Material Design Icons";
    font-size: 20px;
    line-height: 24px;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
}

.costing-editable-table .ui-row-editor .ui-icon-pencil:before {
    content: "\F03EB";
}

.costing-editable-table .ui-row-editor .ui-icon-check:before {
    content: "\F012C";
}

.costing-editable-table .ui-row-editor .ui-icon-close:before {
    content: "\F0156";
}

.costing-editable-table .ui-row-editor .ui-icon-pencil:hover {
    color: #2f4050;
}

.costing-editable-table .ui-row-editor .ui-icon-check {
    color: #1ab394;
}

.costing-editable-table .ui-row-editor .ui-icon-check:hover {
    color: #138a72;
}

.costing-editable-table .ui-row-editor .ui-icon-close {
    color: #d9534f;
}

.costing-editable-table .ui-row-editor .ui-icon-close:hover {
    color: #c9302c;
}

/* No deleting a cost while its row is open for editing */
.costing-editable-table tr.ui-row-editing .costing-row-delete {
    display: none;
}

/* Existing / by others table: grey rather than green, as nothing here is being costed */
div.table.asset-table tr.oc-block.costing-existing-row td:first-child {
    box-shadow: inset 3px 0 0 #b4b9be;
}

tr.costing-existing-row .asset-ref {
    border-color: #e1e4e6;
    background-color: #f3f3f4;
    color: #8a8f94;
}

/* Supplier pill on the cost summary line items table: tick or icon, then the supplier's name, cut short with an ellipsis when it is long */
.costing-supplier-pill {
    max-width: 200px;
}

.costing-supplier-pill > i {
    flex: 0 0 auto;
}

.costing-supplier-pill-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

tr.problem .costing-supplier-pill {
    border-color: #f1c7c5;
    background-color: #fcebea;
    color: #c9302c;
}

.ui-icon-check {
    background-position: -65px -146px;
}

.checkbox-label {
    line-height: 22px;
    margin-left: 5px;
    vertical-align: top;
}

.form-horizontal .radio,
.form-horizontal .checkbox {
    padding-left: 0px;
    padding-top: 5px;
}

/* Checkboxes: larger, rounded, with a drawn check. Dark mode counterpart is in oneClick-dark-mode.css */
div.ui-chkbox div.ui-chkbox-box.ui-widget {
    height: 22px;
    width: 22px;
}

div.ui-chkbox div.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default {
    background-color: #FFF;
    border: 2px solid #C5CBD0;
    border-radius: 6px;
    box-sizing: border-box;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

div.ui-chkbox div.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default:hover {
    border-color: #1AB394;
}

div.ui-chkbox div.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-focus {
    border-color: #1AB394;
    box-shadow: 0 0 0 3px rgba(26, 179, 148, 0.25);
}

div.ui-chkbox div.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-active {
    background-color: #1AB394;
    border-color: #1AB394;
    box-shadow: none;
}

div.ui-chkbox div.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-active.ui-state-focus {
    box-shadow: 0 0 0 3px rgba(26, 179, 148, 0.25);
}

div.ui-chkbox div.ui-chkbox-box.ui-widget.ui-corner-all > span.ui-chkbox-icon,
div.ui-chkbox div.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-active > span.ui-chkbox-icon {
    background-color: transparent;
    background-image: none;
    border: 0;
    height: 100%;
    margin: 0;
    width: 100%;
}

div.ui-chkbox div.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-active > span.ui-chkbox-icon.ui-icon-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
}

/* Request quote dialog (popups/quote-request-confirmation.xhtml) */
@media (min-width: 768px) {
    .quote-request-modal .modal-dialog {
        width: 640px;
    }
}

.quote-request-modal .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 22, 0.06), 0 12px 32px rgba(16, 24, 22, 0.10);
    color: #18201E;
}

.quote-request-modal .modal-header {
    border-bottom: 0;
    padding: 24px 28px 20px;
}

.quote-request-modal .modal-header .modal-title {
    color: #18201E;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.quote-request-modal .modal-header .close {
    border-radius: 10px;
    color: #5B6663;
    font-size: 18px;
    height: 40px;
    margin: -6px -10px 0 0;
    opacity: 1;
    text-shadow: none;
    width: 40px;
}

.quote-request-modal .modal-header .close:hover {
    background: #F1F4F3;
}

.quote-request-modal .qr-subtitle {
    color: #5B6663;
    font-size: 14px;
    margin: 4px 0 0;
}

.quote-request-modal .modal-body {
    padding: 0 28px 24px;
}

.quote-request-modal .qr-supplier {
    align-items: center;
    background: #F7F9F8;
    border: 1px solid #E3E7E6;
    border-radius: 12px;
    display: flex;
    gap: 14px;
    padding: 16px;
}

.quote-request-modal .qr-avatar {
    align-items: center;
    background: #0B7366;
    border-radius: 10px;
    color: #FFF;
    display: flex;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.quote-request-modal .qr-supplier-text {
    flex-grow: 1;
    min-width: 0;
}

.quote-request-modal .qr-supplier-name {
    font-size: 15px;
    font-weight: 600;
}

.quote-request-modal .qr-supplier-email {
    color: #5B6663;
    font-size: 13px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quote-request-modal .qr-pill {
    background: #E2F2EF;
    border-radius: 999px;
    color: #0B7366;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    white-space: nowrap;
}

.quote-request-modal .qr-options {
    padding: 20px 0 4px;
}

.quote-request-modal .qr-section-title {
    color: #5B6663;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
    text-transform: uppercase;
}

.quote-request-modal .qr-option {
    border-bottom: 1px solid #EEF1F0;
}

.quote-request-modal .qr-option:last-child {
    border-bottom: 0;
}

.quote-request-modal .qr-option-row {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 12px 0;
}

.quote-request-modal .qr-option-title {
    font-size: 14px;
    font-weight: 600;
}

.quote-request-modal .qr-option-hint {
    color: #5B6663;
    font-size: 13px;
    margin: 2px 0 0;
}

.quote-request-modal .qr-option-extra {
    padding-bottom: 12px;
}

.quote-request-modal .qr-option-extra .ui-selectmanycheckbox {
    margin-top: 8px;
}

.quote-request-modal .qr-deadline {
    align-items: center;
    display: flex;
    gap: 12px;
}

.quote-request-modal .qr-field-label {
    color: #3A4542;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    width: 92px;
}

.quote-request-modal .qr-deadline .ui-inputfield {
    background-color: #FFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6663' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-position: 12px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    border: 1px solid #CFD6D4;
    border-radius: 8px;
    box-shadow: none;
    color: #18201E;
    font-size: 14px;
    height: 40px;
    padding: 0 12px 0 36px;
    width: 220px;
}

.quote-request-modal .qr-deadline .ui-inputfield:focus,
.quote-request-modal .qr-extra .form-control:focus {
    border-color: #0B7366;
    box-shadow: 0 0 0 3px rgba(11, 115, 102, 0.15);
}

/* Request quote dialog: toggle switches */
.quote-request-modal .ui-toggleswitch {
    flex-shrink: 0;
    height: 26px;
    width: 44px;
}

.quote-request-modal .ui-toggleswitch .ui-toggleswitch-slider {
    background: #C9D1CF;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    transition: background 0.15s;
}

.quote-request-modal .ui-toggleswitch .ui-toggleswitch-slider:before {
    background: #FFF;
    border-radius: 50%;
    bottom: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    height: 20px;
    left: 3px;
    top: 3px;
    transform: none;
    transition: left 0.15s;
    width: 20px;
}

.quote-request-modal .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
    background: #0B7366;
}

.quote-request-modal .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider:before {
    left: 21px;
    transform: none;
}

.quote-request-modal .ui-toggleswitch.ui-toggleswitch-focus .ui-toggleswitch-slider {
    box-shadow: 0 0 0 3px rgba(11, 115, 102, 0.25);
}

.quote-request-modal div.ui-chkbox div.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-active {
    background-color: #0B7366;
    border-color: #0B7366;
}

/* Request quote dialog: supplier questions, attachment and message */
.quote-request-modal .qr-extra {
    padding-top: 12px;
}

.quote-request-modal .qr-extra > br {
    display: none;
}

.quote-request-modal .qr-extra .form-horizontal .form-group {
    margin: 0 0 18px;
}

.quote-request-modal .qr-extra .form-horizontal [class*="col-sm-"] {
    float: none;
    padding: 0;
    width: 100%;
}

.quote-request-modal .qr-extra .form-horizontal .control-label,
.quote-request-modal .qr-extra .supplier-comment-label {
    color: #18201E;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 0 0 8px;
    text-align: left;
}

.quote-request-modal .qr-extra .supplier-comment-optional {
    color: #5B6663;
    font-weight: 500;
}

.quote-request-modal .qr-extra .form-horizontal .text-center {
    text-align: left;
}

.quote-request-modal .qr-extra .form-horizontal .text-center a {
    display: inline-block;
    margin-top: 8px;
}

.quote-request-modal .qr-extra .form-control {
    border: 1px solid #CFD6D4;
    border-radius: 8px;
    box-shadow: none;
    font-size: 14px;
}

.quote-request-modal .qr-extra textarea.form-control {
    min-height: 84px;
    padding: 10px 12px;
    resize: vertical;
    width: 100%;
}

/* Dashed drop area for a file upload: set the dropzone attribute of oneclick:fileUpload (resources/components/fileUpload.xhtml), or put
   upload-dropzone on a p:fileUpload. The button and its hint sit on the left, in line with the progress rows and messages beneath them */
.ui-fileupload.upload-dropzone {
    background: #FAFBFB;
    border: 1.5px dashed #C3CCC9;
    border-radius: 10px;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-buttonbar {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #3A4542;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 6px 5px;
    justify-content: flex-start;
    min-height: 53px;
    padding: 10px 16px;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-buttonbar:after {
    content: "or drag it here";
}

.ui-fileupload.upload-dropzone.upload-dropzone-multiple div.ui-fileupload-buttonbar:after {
    content: "or drag them here";
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content {
    background: transparent;
    border: 0;
    padding: 0;
}

/* The choose button keeps the green outline of every other upload button, with an upload icon */
.ui-fileupload.upload-dropzone div.ui-fileupload-buttonbar span.ui-fileupload-choose {
    margin: 0 4px 0 0;
    border: 1px solid #1ab394;
    background-color: #e8f7f4;
    color: #138a72;
    font-weight: 600;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-buttonbar span.ui-fileupload-choose.ui-state-hover {
    background-color: #d3f0e9;
    color: #138a72;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-buttonbar span.ui-fileupload-choose span.ui-icon-plusthick:before {
    content: "\f093";
    color: inherit;
}

/* While a file uploads it gets a row along the bottom of the drop area: its name and size, a green bar the rest of the way across, and cancel */
.ui-fileupload.upload-dropzone div.ui-fileupload-files,
.ui-fileupload.upload-dropzone div.ui-fileupload-files > div {
    display: block;
    margin: 0;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 12px;
    font-size: 13px;
    color: #4a4f55;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-row > div {
    display: block;
    flex: none;
    max-width: 40%;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-row > div.ui-fileupload-preview,
.ui-fileupload.upload-dropzone div.ui-fileupload-row > div.ui-widget-content {
    display: none;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-row > div.ui-fileupload-progress {
    flex: 1;
    max-width: none;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-progressbar {
    top: 0;
    width: 100%;
    height: 8px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background-color: #dfe3e6;
    overflow: hidden;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-progressbar .ui-progressbar-value {
    margin: 0;
    border: 0;
    border-radius: 999px;
    background-color: #1AB394;
}

/* A refused or failed upload: the PrimeFaces message drawn like .project-summary-callout-danger */
.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-messages {
    margin: 0 16px 12px;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-messages div.ui-messages-error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
    border: none;
    border-left: 4px solid #D9534F;
    border-radius: 6px;
    background-color: #f2dede;
    color: #a94442;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-messages span.ui-messages-error-icon {
    flex: none;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    line-height: 1;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-messages span.ui-messages-error-icon:before {
    position: static;
    content: "\f071";
    font-size: 14px;
    color: inherit;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-messages div.ui-messages-error ul {
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-messages div.ui-messages-error li {
    margin: 0;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-messages div.ui-messages-error li span {
    line-height: inherit;
    color: inherit;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-messages div.ui-messages-error li span.ui-messages-error-summary {
    font-weight: 600;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-messages div.ui-messages-error li span.ui-messages-error-detail {
    margin-left: 4px;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-messages a.ui-messages-close {
    flex: none;
    float: none;
    order: 3;
    margin: 0;
    color: inherit;
}

.ui-fileupload.upload-dropzone div.ui-fileupload-content .ui-messages a.ui-messages-close span.ui-icon-close:before {
    color: inherit;
}

/* Request quote dialog: footer */
.quote-request-modal .modal-footer {
    background: #FAFBFB;
    border-radius: 0 0 16px 16px;
    border-top: 1px solid #EEF1F0;
    padding: 16px 28px;
}

.quote-request-modal .qr-footer {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.quote-request-modal .modal-footer a.qr-btn {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    height: 44px;
    margin: 0;
    padding: 0 18px;
}

.quote-request-modal .modal-footer a.qr-btn-cancel {
    background: #FFF;
    border: 1px solid #CFD6D4;
    color: #3A4542;
}

.quote-request-modal .modal-footer a.qr-btn-cancel:hover {
    background: #F1F4F3;
}

.quote-request-modal .modal-footer a.qr-btn-primary {
    background: #0B7366;
    border: 1px solid #0B7366;
    color: #FFF;
    padding: 0 20px;
}

.quote-request-modal .modal-footer a.qr-btn-primary:hover {
    background: #075A50;
    border-color: #075A50;
}

/* The confirm button of a dialog that declines or cancels something (popups/quote-decline-confirmation.xhtml) */
.quote-request-modal .modal-footer a.qr-btn-danger {
    background: #B42318;
    border: 1px solid #B42318;
    color: #FFF;
    padding: 0 20px;
}

.quote-request-modal .modal-footer a.qr-btn-danger:hover {
    background: #912018;
    border-color: #912018;
}

/* Configure block dialog (popups/partpicker-configuration.xhtml) */
@media (min-width: 992px) {
    .quote-request-modal .modal-dialog.modal-lg {
        width: 900px;
    }
}

.quote-request-modal .qr-block {
    margin-bottom: 16px;
}

.quote-request-modal .qr-block-image {
    border-radius: 8px;
    flex-shrink: 0;
    max-height: 72px;
    max-width: 120px;
}

.quote-request-modal .qr-block-logo {
    flex-shrink: 0;
    max-height: 40px;
    max-width: 140px;
}

.quote-request-modal .qr-line-item {
    align-items: center;
    border-bottom: 1px solid #EEF1F0;
    display: flex;
    gap: 12px;
    padding: 6px 0;
}

.quote-request-modal .qr-line-item:last-child {
    border-bottom: 0;
}

.quote-request-modal .qr-line-item > span {
    flex: 1;
    min-width: 0;
}

/* The description under an option's make and model, in the radio labels and the quantity rows */
.quote-request-modal .pd-card span.qr-option-hint {
    display: block;
    font-weight: 400;
}

/* Pick-one option rows: same layout as .qr-line-item, with the radio centred in the 48px column the quantity box uses */
.quote-request-modal .pd-card .ui-selectoneradio .ui-g {
    border-bottom: 1px solid #EEF1F0;
}

.quote-request-modal .pd-card .ui-selectoneradio .ui-g:last-child {
    border-bottom: 0;
}

.quote-request-modal .pd-card .ui-selectoneradio .ui-g > div {
    align-items: center;
    display: flex;
    gap: 12px;
    padding: 6px 0;
}

.quote-request-modal .pd-card .ui-selectoneradio .ui-radiobutton {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    width: 48px;
}

.quote-request-modal .pd-card .ui-selectoneradio label {
    flex: 1;
    margin: 0;
    max-width: none;
    min-width: 0;
}

/* Radio buttons in the restyled dialogs: a drawn round dot in place of the theme's sprite bullet */

.quote-request-modal .ui-selectoneradio .ui-radiobutton div.ui-radiobutton-box {
    align-items: center;
    background: #FFF;
    border: 2px solid #C3CCC9;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.quote-request-modal .ui-selectoneradio .ui-radiobutton div.ui-radiobutton-box.ui-state-active {
    border-color: #0B7366;
}

.quote-request-modal .ui-selectoneradio .ui-radiobutton span.ui-radiobutton-icon.ui-icon {
    background-color: transparent;
    background-image: none;
    border-radius: 50%;
    display: block;
    height: 8px;
    margin: 0;
    position: static;
    width: 8px;
}

.quote-request-modal .ui-selectoneradio .ui-radiobutton .ui-state-active span.ui-radiobutton-icon.ui-icon {
    background-color: #0B7366;
}

.quote-request-modal .qr-line-item .form-control {
    flex-shrink: 0;
    padding: 6px 4px;
    text-align: center;
    width: 48px;
}

/* Choose replaced equipment dialog (popups/choose-replaced-sd-equipment.xhtml): the equipment list */
.quote-request-modal .qr-listbox.ui-selectonelistbox {
    background: #FFF;
    border: 1px solid #CFD6D4;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.quote-request-modal .qr-listbox .ui-selectlistbox-list {
    width: 100%;
}

.quote-request-modal .qr-listbox .ui-selectlistbox-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #EEF1F0;
    border-radius: 0;
    color: #18201E;
    margin: 0;
}

.quote-request-modal .qr-listbox .ui-selectlistbox-item > td {
    padding: 8px 12px;
}

.quote-request-modal .qr-listbox .ui-selectlistbox-item.ui-state-hover {
    background: #F1F4F3;
}

.quote-request-modal .qr-listbox .ui-selectlistbox-item.ui-state-highlight {
    background: #E2F2EF;
    color: #0B7366;
    font-weight: 600;
}

/* A disabled p:commandLink renders as a span, so the a.qr-btn rules above miss it */
.quote-request-modal .modal-footer span.qr-btn.ui-state-disabled {
    align-items: center;
    background: #C9D1CF;
    border: 1px solid #C9D1CF;
    border-radius: 10px;
    color: #FFF;
    cursor: not-allowed;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    height: 44px;
    margin: 0;
    opacity: 1;
    padding: 0 20px;
}

/* Docket gantt on the project page's Timeline tab (internal/inserts/projectTimelineContent.xhtml, js/docket-timeline.js):
   a row per task, with the task's work items as the bars */
.dkt-timeline {
    position: relative;
}

.dkt-scroll {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid #e7eaec;
    border-radius: 8px;
}

.dkt-canvas {
    position: relative;
}

.dkt-head {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    height: 52px;
    background-color: #fafbfc;
    border-bottom: 1px solid #e3e6e9;
}

.dkt-corner {
    position: sticky;
    left: 0;
    z-index: 5;
    flex: 0 0 220px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    padding: 0 12px 7px;
    background-color: #fafbfc;
    border-right: 1px solid #e3e6e9;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8f94;
}

.dkt-axis {
    position: relative;
    flex: 0 0 auto;
}

.dkt-axis-tier {
    position: relative;
    height: 26px;
}

.dkt-axis-cell {
    position: absolute;
    top: 0;
    box-sizing: border-box;
    height: 26px;
    padding: 0 6px;
    overflow: hidden;
    line-height: 26px;
    white-space: nowrap;
    font-size: 11px;
    color: #8a8f94;
    border-left: 1px solid #eceef0;
}

.dkt-axis-top .dkt-axis-cell {
    font-weight: 600;
    color: #4d5359;
    border-left-color: #dfe3e6;
}

.dkt-axis-bottom .dkt-axis-cell {
    padding: 0;
    text-align: center;
}

.dkt-today-tag {
    position: absolute;
    bottom: 3px;
    z-index: 1;
    padding: 1px 6px;
    transform: translateX(-50%);
    border-radius: 8px;
    background-color: #ed5565;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    color: #fff;
}

.dkt-body {
    position: relative;
}

.dkt-grid {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.dkt-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border-left: 1px solid #f1f3f4;
}

.dkt-gridline-major {
    border-left-color: #e3e6e9;
}

.dkt-weekend {
    background-color: rgba(138, 143, 148, 0.07);
}

.dkt-today {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    border-left: 2px solid #ed5565;
}

.dkt-row {
    position: relative;
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px solid #eef0f2;
}

.dkt-row:hover .dkt-track {
    background-color: rgba(26, 179, 148, 0.04);
}

.dkt-label {
    position: sticky;
    left: 0;
    z-index: 3;
    flex: 0 0 220px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 0 12px;
    background-color: #fff;
    border-right: 1px solid #e3e6e9;
}

.dkt-label-text {
    flex: 1;
    min-width: 0;
}

.dkt-label-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: #3a3f44;
}

.dkt-label-person {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: #8a8f94;
}

.dkt-label-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 9px;
    background-color: #eef0f2;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: #676d73;
}

.dkt-task-dot {
    flex: 0 0 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #c9ced3;
}

.dkt-task-dot.dkt-task-active {
    background-color: #3b82f6;
}

.dkt-task-dot.dkt-task-complete {
    background-color: #1ab394;
}

.dkt-task-dot.dkt-task-overdue {
    background-color: #ed5565;
}

.dkt-track {
    position: relative;
    flex: 0 0 auto;
}

/* The task's own start and end dates, behind its work items */
.dkt-plan {
    position: absolute;
    top: 4px;
    bottom: 4px;
    box-sizing: border-box;
    border: 1px dashed #cfd5da;
    border-radius: 6px;
    background-color: rgba(138, 143, 148, 0.06);
}

.dkt-milestone {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    transform: rotate(45deg);
    box-sizing: border-box;
    border: 1px dashed #b3bac1;
    background-color: rgba(138, 143, 148, 0.1);
}

.dkt-bar {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    height: 22px;
    overflow: hidden;
    border-radius: 3px;
    background-color: #1ab394;
    font-size: 11px;
    font-weight: 600;
    line-height: 22px;
    color: #fff;
    cursor: default;
    transition: box-shadow 0.12s, filter 0.12s;
}

.dkt-bar:hover,
.dkt-bar.dkt-bar-linked {
    z-index: 2;
    filter: brightness(1.06);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(58, 63, 68, 0.35);
}

.dkt-bar.dkt-bar-labelled {
    padding: 0 7px;
    border-radius: 6px;
}

.dkt-bar-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dkt-new {
    background-color: #f5a623;
    color: #4a3200;
}

.dkt-progress {
    background-color: #3b82f6;
    color: #fff;
}

.dkt-complete {
    background-color: #1ab394;
    color: #fff;
}

.dkt-obsolete {
    background-color: #c3c9cf;
    color: #5b6167;
}

/* Still open, so the bar runs up to now */
.dkt-bar.dkt-open {
    border-radius: 6px 0 0 6px;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0.22) 6px, transparent 6px, transparent 12px);
}

.dkt-bar.dkt-late {
    border-right: 4px solid #ed5565;
}

/* Curves from a work item to the one that raised it */
.dkt-flow {
    position: absolute;
    top: 0;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}

.dkt-flow path {
    fill: none;
    stroke: #7b8794;
    stroke-width: 1.5;
    stroke-opacity: 0.45;
}

.dkt-flow path.dkt-flow-hot {
    stroke: #2f3a45;
    stroke-width: 2.5;
    stroke-opacity: 1;
}

.dkt-empty {
    padding: 28px 12px;
    text-align: center;
    font-size: 13px;
    color: #8a8f94;
}

.dkt-zoom {
    display: inline-flex;
    padding: 2px;
    border-radius: 8px;
    background-color: #eef0f2;
}

.dkt-zoom button,
.dkt-toggle {
    padding: 4px 11px;
    border: none;
    border-radius: 6px;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: #676d73;
    cursor: pointer;
}

.dkt-zoom button.active {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    color: #1ab394;
}

.dkt-toggle {
    border: 1px solid #e3e6e9;
}

.dkt-toggle.active {
    border-color: #1ab394;
    color: #1ab394;
}

.dkt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 12px;
    font-size: 12px;
    color: #676d73;
}

.dkt-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dkt-key {
    display: inline-block;
    box-sizing: border-box;
    width: 18px;
    height: 10px;
    border-radius: 3px;
}

.dkt-key-late {
    border-right: 4px solid #ed5565;
    background-color: #c3c9cf;
}

.dkt-key-plan {
    border: 1px dashed #b3bac1;
    background-color: rgba(138, 143, 148, 0.06);
}

.dkt-tip {
    position: fixed;
    z-index: 10000;
    display: none;
    max-width: 340px;
    padding: 10px 12px;
    border-radius: 8px;
    background-color: #22272c;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    font-size: 12px;
    line-height: 1.5;
    color: #e6e9ec;
    pointer-events: none;
}

.dkt-tip-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.dkt-tip-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.dkt-tip-status {
    flex: 0 0 auto;
    padding: 0 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

.dkt-tip-label {
    display: inline-block;
    width: 82px;
    color: #9aa3ac;
}

.dkt-tip-comment {
    margin-top: 6px;
    padding-left: 8px;
    border-left: 2px solid #5b6570;
    font-style: italic;
    color: #c9d0d6;
    word-wrap: break-word;
}

.dkt-tip-comment-out {
    border-left-color: #1ab394;
}

/* Error pages (/errorpages, laid out by errorLayout.xhtml) */
.error-page {
    display: flex;
    justify-content: center;
    padding: 40px 15px 30px;
}

.error-page-card {
    width: 100%;
    max-width: 720px;
    padding: 40px 44px 36px;
    border: 1px solid #e7eaec;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.error-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    border-radius: 50%;
    font-size: 36px;
    line-height: 1;
}

.error-page-icon-neutral {
    background-color: #e8f7f4;
    color: #138a72;
}

.error-page-icon-warning {
    background-color: #fdf3e1;
    color: #b7791f;
}

.error-page-icon-danger {
    background-color: #f9e4e3;
    color: #c9413d;
}

.error-page-code {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #9aa3ac;
}

h1.error-page-title {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 600;
    color: #2f4050;
}

.error-page-text {
    max-width: 520px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.6;
    color: #676a6c;
}

.error-page-text p {
    margin-bottom: 8px;
}

.error-page-path {
    display: inline-block;
    max-width: 100%;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    background-color: #f3f3f4;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 12px;
    word-break: break-all;
}

.error-page-actions .btn {
    margin: 22px 4px 0;
}

.error-page-ref {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin-top: 28px;
    padding: 8px 14px;
    border: 1px solid #e7eaec;
    border-radius: 6px;
    background-color: #f9fafb;
}

.error-page-ref-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9aa3ac;
}

.error-page-ref code {
    padding: 0;
    background: none;
    font-size: 13px;
    color: #2f4050;
    word-break: break-all;
    user-select: all;
}

.error-page-details {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid #e7eaec;
    text-align: left;
}

.error-page-details summary {
    display: list-item;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #8a8a8a;
    outline: none;
}

.error-page-details summary:hover {
    color: #138a72;
}

.error-page-details dl {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 6px 12px;
    margin: 14px 0 0;
    font-size: 12px;
}

.error-page-details dt {
    font-weight: 600;
    color: #8a8a8a;
}

.error-page-details dd {
    margin: 0;
    word-break: break-word;
}

.error-page-trace {
    margin-top: 20px;
    text-align: left;
}

.error-page-trace-title {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #8a8a8a;
}

.error-page-trace pre {
    max-height: 420px;
    margin: 0;
    overflow: auto;
    border: 1px solid #e7eaec;
    border-radius: 6px;
    background-color: #f9fafb;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre;
}

.error-page-trace pre code {
    white-space: inherit;
}

@media (max-width: 600px) {
    .error-page-card {
        padding: 28px 20px 24px;
    }

    .error-page-details dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .error-page-details dd {
        margin-bottom: 8px;
    }
}

/* Footer: release version, kept faint */
.footer .app-version {
    margin: 4px 0 0;
    font-size: 11px;
    color: #BBBBBB;
}