.position-relative{ position: relative; }
.position-absolute{ position: absolute; }

.no-bg{
    background: #fff0;
}

.no-bordered-input{
    background: #fff!important;
    border: none!important;
    border-bottom: 1px solid #cccccc!important;
    border-radius: 0!important;
    cursor: pointer!important;
}

.no-bordered-input:active, .no-bordered-input:focus{
    outline: none;
}

.no-bordered-input::-webkit-input-placeholder {
    color: #989898;
    font-weight: normal;
    text-decoration: underline;
}
.no-bordered-input::-moz-placeholder {
    color: #989898;
    font-weight: normal;
    text-decoration: underline;
}
.no-bordered-input:-moz-placeholder {   /* Older versions of Firefox */
    color: #989898;
    font-weight: normal;
    text-decoration: underline;
}
.no-bordered-input:-ms-input-placeholder {
    color: #989898;
    font-weight: normal;
    text-decoration: underline;
}

select.no-bordered-input{
    background: initial!important;
}


.no-bordered-input[disabled],.no-bordered-input[readonly]{
    cursor: not-allowed!important;
    background-color: #f9f9f9!important;
}

.no-border-btn{
    border-top: 0!important;
    border-left: 0!important;
    border-right: 0!important;
    border-radius: 0!important;
    box-shadow: none!important;
}

.no-border-btn:focus, .no-border-btn:active{
    outline: none!important;
    box-shadow: none!important;
}

.color-input-rounded{
    border-radius: 45px;
    width: 33px;
    padding: 16px;
}

.has-error .form-control.no-bordered-input{
    box-shadow: none;
}

.form-error{
    color: #a94442;
}

.bg-white.btn-info, .open .bg-white.btn-info{
    color: #4cc0c1!important;
}

.bg-white.btn-success, .open .bg-white.btn-success{
    color: #8ec165!important;
}
.bg-white.btn-primary, .open .bg-white.btn-primary{
    color: #53b567!important;
}
.bg-white.btn-danger, .open .bg-white.btn-danger{
    color: #fa5542!important;
}
.bg-white.btn-warning, .open .bg-white.btn-warning{
    color: #ffbc1a!important;
}

#brand-color .btn-primary.bg-white{
    background-color: #fff!important;
}

.bg-white.btn-primary:hover, .bg-white.btn-primary:focus, .bg-white.btn-primary:active, .bg-white.btn-primary.active,
.open .bg-white.dropdown-toggle.btn-primary, .active>.bg-white.btn-primary{
    background: #aaddb83b!important;
    font-weight: 700;
    box-shadow: none;
    color: #53b567!important;
}

/* TWA-6983: Override .btn-group .btn.active (main.css, specificity 0,3,0) which sets white text on active bg-white buttons */
.btn-group .bg-white.btn-primary.active {
    color: #53b567!important;
}

.bg-white.btn-success:hover, .bg-white.btn-success:focus, .bg-white.btn-success:active, .bg-white.btn-success.active, .open .bg-white.dropdown-toggle.btn-success, .active>.bg-white.btn-success{
    background: #9eba532e!important;
    font-weight: 700;
    box-shadow: none;
}

.bg-white.btn-info:hover, .bg-white.btn-info:focus, .bg-white.btn-info:active, .bg-white.btn-info.active, .open .bg-white.dropdown-toggle.btn-info, .active>.bg-white.btn-info{
    background: #aaddff54!important;
    font-weight: 700;
    box-shadow: none;
}

.bg-white.btn-warning:hover, .bg-white.btn-warning:focus, .bg-white.btn-warning:active, .bg-white.btn-warning.active, .open .bg-white.dropdown-toggle.btn-warning, .active>.bg-white.btn-warning{
    background: #ffbc1a24!important;
    font-weight: 700;
    box-shadow: none;
}

.bg-white.btn-danger:hover, .bg-white.btn-danger:focus, .bg-white.btn-danger:active, .bg-white.btn-danger.active, .open .bg-white.dropdown-toggle.btn-danger, .active>.bg-white.btn-danger{
    background: #fa554236!important;
    font-weight: 700;
    box-shadow: none;
}

.primary-hover:hover i .warning-hover:hover i{ text-shadow: 0px 0px #ffaa4b; }
.info-hover{}
.info-hover:hover, .info-hover.active, .active>.info-hover{
    background: #aaddff54!important;
    color: #4cc0c1!important;
}

.danger-hover{}
.danger-hover:hover, .danger-hover.active, .active>.danger-hover{
    background: #fa554236!important;
    color: #fa5542!important;
}

.warning-hover{}
.warning-hover:hover, .warning-hover.active, .active>.warning-hover{
    background: #ffbc1a24!important;
    color: #ffbc1a!important;
}

.primary-hover{}
.primary-hover:hover, .primary-hover.active, .active>.primary-hover{
    background: #16914838!important;
    color: #53b567!important;
}

.border-0{
    border: 0!important;
}

.border-bottom{
    border-top: 0!important;
    border-right: 0!important;
    border-left: 0!important;
}

.br-radius-0{
    border-radius: 0px!important;
}

.br-radius-5{
    border-radius: 5px!important;
}

.br-radius-10{
     border-radius: 10px!important;
}

.br-radius-15{
    border-radius: 15px!important;
}

.br-radius-50{
    border-radius: 50px!important;
}

.extra-status-logic-container .fa-square-o:before{
    color: #8ec165;
}
.extra-status-logic-container .disabled.fa-square-o:before{
    color: #9ac92e66!important;
}

.mycolorpicker:disabled{
    background-color: #ebebeb!important;
    background-image: url("/assets/img/glyphicons-halflings.png") !important;
    background-repeat: no-repeat;
    background-size: 500px;
    background-position: -222px -94px;
    cursor: not-allowed!important;
}

.midle-btn{
    font-size: 17px;
}

.no-outline{

}
.no-outline:hover, .no-outline:focus, .no-outline:active{
    outline: none!important;
}

.br-left-none{
    border-left: none!important;
}

.br-right-none{
    border-right: none!important;
}

.br-top-none{
    border-top: none!important;
}

.br-bottom-none{
    border-bottom: none!important;
}

.p-right-1{
    padding-right: 1px;
}

.p-right-1{
    padding-right: 1px;
}

.panel-default>.disabled{
    background-color: #e8e8e86b!important;
    color: #ccc!important;
}

.panel-heading.error{
    background: #fff6f6!important;
    border: 1px solid red!important;
    color: red;
}

.sticky-right.stick {
    position: fixed!important;
    top: 0!important;
    right: 26px!important;
    margin: 50px 0 0;
}

#estimateForm.sticky-right.stick {
    right: 24px!important;
}

.width-auto{
    width: auto!important;
}

.height-auto{
    height: auto!important;
}

.font-weight-bold{
    font-weight: 700!important;
}
.font-weight-normal{
    font-weight: 400!important;
}
.font-weight-light{
    font-weight: 300!important;
}

.blur-preloader{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    backdrop-filter: blur(3px);
    z-index: 5;
}

.v-align-middle{
    vertical-align: middle!important;
}

.loading-blur{
    pointer-events: none;
    filter: blur(2px);
}

/* ---------------------------------------------------------------------------
   Toggle switch (CWT-2191)
   Reusable version of the crew-jobs toggle, which was scoped to one wrapper id.
   Markup:
     <label class="arb-switch">
       <input type="checkbox" ...><span class="arb-slider"></span>
     </label>
   --------------------------------------------------------------------------- */
.arb-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
    flex: 0 0 40px;
}

.arb-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.arb-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    border-radius: 20px;
    transition: background-color .2s;
}

.arb-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform .2s;
}

.arb-switch input:checked + .arb-slider {
    background-color: #169148;
}

.arb-switch input:checked + .arb-slider:before {
    transform: translateX(20px);
}

.arb-switch input:disabled + .arb-slider {
    opacity: .45;
    cursor: not-allowed;
}

.arb-switch input:disabled {
    cursor: not-allowed;
}

/* A labelled toggle row: text on the left, switch on the right. */
.arb-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
}

.arb-switch-row .arb-switch-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: normal;
    margin: 0;
    line-height: 1.3;
}

.arb-switch-row.is-disabled .arb-switch-label {
    color: #999;
}

/* The little "?" that opens the explanatory popover. */
.arb-switch-help {
    color: #999;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.arb-switch-help:hover,
.arb-switch-help:focus {
    color: #169148;
    text-decoration: none;
}

.loading-block{
    touch-action: none;
    pointer-events: none;
    opacity: 0.6;
    background-image: url('/assets/img/loading.gif');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 34px;
}

.yellow-background{
    background: #fff6be96!important;
}

.no-marging-container{
    padding-right: 15px!important;
    padding-left: 15px!important;
    margin-left: -15px;
    margin-right: -15px;
}

.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.overflow-hidden{
    overflow:hidden;
}

.elipsis{
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
}

.min-col-1{
    min-width: 8.33333333%;
}

.min-col-2{
    min-width: 16.66666667%;
}

.min-col-3{
    min-width: 25%;
}

.min-col-4{
    min-width: 33.33333333%;
}

.min-col-5{
    min-width: 41.66666667%;
}

.min-col-6{
    min-width: 50%;
}

.min-col-7{
    min-width: 58.33333333%;
}

.min-col-8{
    min-width: 66.66666667%;
}

.min-col-9{
    min-width: 75%;
}

.min-col-10{
    min-width: 83.33333333%;
}

.min-col-11{
    min-width: 91.66666667%;
}

.min-col-12{
    min-width: 100%;
}

.max-col-1{
    max-width: 8.33333333%;
}

.max-col-2{
    max-width: 16.66666667%;
}

.max-col-3{
    max-width: 25%;
}

.max-col-4{
    max-width: 33.33333333%;
}

.max-col-5{
    max-width: 41.66666667%;
}

.max-col-6{
    max-width: 50%;
}

.max-col-7{
    max-width: 58.33333333%;
}

.max-col-8{
    max-width: 66.66666667%;
}

.max-col-9{
    max-width: 75%;
}

.max-col-10{
    max-width: 83.33333333%;
}

.max-col-11{
    max-width: 91.66666667%;
}

.max-col-12{
    max-width: 100%;
}

.max-w-40{
    max-width: 40%;
}

.text-bold { font-weight: bold!important; }
/* Large devices (≥1200px) */
@media (min-width: 1200px) {
    .max-col-lg-1 {
        max-width: 8.33%;
    }
    .max-col-lg-2 {
        max-width: 16.66%;
    }
    .max-col-lg-3 {
        max-width: 25%;
    }
    .max-col-lg-4 {
        max-width: 33.33%;
    }
    .max-col-lg-5 {
        max-width: 41.66%;
    }
    .max-col-lg-6 {
        max-width: 50%;
    }
    .max-col-lg-7 {
        max-width: 58.33%;
    }
    .max-col-lg-8 {
        max-width: 66.66%;
    }
    .max-col-lg-9 {
        max-width: 75%;
    }
    .max-col-lg-10 {
        max-width: 83.33%;
    }
    .max-col-lg-11 {
        max-width: 91.66%;
    }
    .max-col-lg-12 {
        max-width: 100%;
    }
}

/* Medium devices (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .max-col-md-1 {
        max-width: 8.33%;
    }

    .max-col-md-2 {
        max-width: 16.66%;
        flex-basis: 16.66%;
    }

    .max-col-md-3 {
        max-width: 25%;
    }

    .max-col-md-4 {
        max-width: 33.33%;
    }

    .max-col-md-5 {
        max-width: 41.66%;
    }

    .max-col-md-6 {
        max-width: 50%;
        flex-basis: 50%;
    }

    .max-col-md-7 {
        max-width: 58.33%;
    }

    .max-col-md-8 {
        max-width: 66.66%;
    }

    .max-col-md-9 {
        max-width: 75%;
    }

    .max-col-md-10 {
        max-width: 83.33%;
    }

    .max-col-md-11 {
        max-width: 83.33%;
    }

    .max-col-md-12 {
        max-width: 100%;
    }
}

/* Small devices (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {
    .max-col-sm-1 {
        max-width: 8.33%;
    }
    .max-col-sm-2 {
        max-width: 16.66%;
        flex-basis: 16.66%;
    }
    .max-col-sm-3 {
        max-width: 25%;
    }
    .max-col-sm-4 {
        max-width: 33.33%;
    }
    .max-col-sm-5 {
        max-width: 41.66%;
    }
    .max-col-sm-6 {
        max-width: 50%;
        flex-basis: 50%;
    }
    .max-col-sm-7 {
        max-width: 58.33%;
    }
    .max-col-sm-8 {
        max-width: 66.66%;
    }
    .max-col-sm-9 {
        max-width: 75%;
    }
    .max-col-sm-10 {
        max-width: 83.33%;
    }
    .max-col-sm-11 {
        max-width: 91.66%;
    }
    .max-col-sm-12 {
        max-width: 100%;
    }
}

/* Extra small devices (<768px) */
@media (max-width: 767px) {
    .max-col-xs-1 {
        max-width: 8.33%;
    }

    .max-col-xs-2 {
        max-width: 16.66%;
        flex-basis: 16.66%;
    }

    .max-col-xs-3 {
        max-width: 25%;
    }

    .max-col-xs-4 {
        max-width: 33.33%;
    }

    .max-col-xs-5 {
        max-width: 41.66%;
    }

    .max-col-xs-6 {
        max-width: 50%;
        flex-basis: 50%;
    }

    .max-col-xs-7 {
        max-width: 58.33%;
    }

    .max-col-xs-8 {
        max-width: 66.66%;
    }

    .max-col-xs-9 {
        max-width: 75%;
    }

    .max-col-xs-10 {
        max-width: 83.33%;
    }

    .max-col-xs-11 {
        max-width: 91.66%;
    }

    .max-col-xs-12 {
        max-width: 100%;
    }
}

.max-h-auto{
    max-height: fit-content;
}

.vertical-btn:active, .vertical-btn:focus{
    outline: 0!important;
}

.vertical-btn {
    display: inline-block;
    text-align: center;
    padding: 10px 10px 10px 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    outline: 0;
}

.vertical-btn span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.text-decoration-line-through {
    text-decoration: line-through !important;
}

.text-decoration-none {
    text-decoration: none !important;
}

.service-tag {
    margin: 0;
    border: 1px solid var(--neutral-85);
    box-shadow: none;
    padding: 3px 5px 3px 18px;
    position: relative;
    line-height: 13px;
    color: var(--neutral-20);
    cursor: default;
    border-radius: var(--border-radius-3);
    user-select: none;
    background-color: var(--gray-light-col);
    float: left;
    list-style: none;
    margin: 4px 0px 0 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.service-tag > svg.feather,
.service-tag > i.feather {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.service-tag a{
    left: 3px;
}

/*
 * TWA-6290 F4a/F5a + QA 92257 Issue 1 — In the SPB editors the field (#selectedServicesResult)
 * carries `.p-n` (no padding). A `.service-tag` chip only has a 4px TOP margin (see above), so a
 * wrapped or last-row chip sits flush against the field's bottom edge. Re-add a matching bottom
 * margin, scoped to the affected editor containers only so the shared chip elsewhere
 * (estimates / sales / KPI / newsletters filters) is left untouched. Containers:
 *   #groupForm = Groups editor · #bundle-modal / #bundle-modal-new = Bundle editor ·
 *   #lead-services-view = Lead profile + Create Lead · #schedule-map-services-view = Crew Schedule ·
 *   #save-marker-form = Tree Inventory marker (wraps #marker-services-view).
 */
#groupForm .service-tag,
#bundle-modal .service-tag,
#bundle-modal-new .service-tag,
#lead-services-view .service-tag,
#schedule-map-services-view .service-tag,
#save-marker-form .service-tag {
    margin-bottom: 4px;
}

mark{
    color: var(--brand-col) !important;
    background: none;
}

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

.m-left-5 {
    margin-left: 5px;
}
/* Layered-settings "Currently applied" box. Mirrors the invoice Overdue info box
   (#invoice-overdue-settings-modal .js-inv-info-box) so every settings screen reads the same. */
.settings-info-box {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    color: #2e7d32;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 12px;
    margin-bottom: 30px;
}

/* Layered-settings help trigger — same rich popover the user Permissions screen uses
   (bootstrap popover with a bold title + body), so the help affordance reads the same
   everywhere. The trigger itself is a muted inline icon. */
.settings-help {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--neutral-50, #6a7077);
    cursor: pointer;
    vertical-align: middle;
}
.settings-help:hover,
.settings-help:focus {
    color: var(--neutral-20, #34383d);
    outline: none;
}
.popover-content > p:last-child { margin: 0; }