.action-btn{
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
/* .choose-files {
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 15px;
    max-width: 155px !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
} */



/* Logo set */

.setting-logo {
    justify-content: center;
    height: 40px;
    width: 100%;
    margin: 30px 0px;
    /* text-align: left !important; */
}


.choose-files div {
    color: #fff;
    /* background: #584ED2 !important; */
    border: none;
    border-radius: 10px;
    padding: 8px 6px;
    max-width: 155px !important;
    font-size: 12px;
    font-weight: 500;
}

.file {
    position: relative !important;
    left: 0;
    opacity: 0;
    top: 0;
    bottom: 0;
    width: 80%;
    border: none;
    padding: 0;
    margin: 0;
    /* cursor: pointer; */
}

.nowrap {
    white-space: nowrap;
}


/* end logo  */


.dash-sidebar .main-logo {
    justify-content: center;
    width: 100%;
}

.dash-sidebar .main-logo a img {
    object-fit: contain;
    width: auto !important;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* .custom_color_radio_button
{
    box-shadow: 0px 0px 0px 1px #000000;
} */


.lang-dropdown option {
    background-color: #fff;
    color: #000;
    text-align: center;
}




/* Star Rating */

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}
.rate:not(:checked)>label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 23px;
    color: #ccc;
}
.rate:not(:checked)>label:before {
    content: '★ ';
}
.rate>input:checked~label {
    color: #FFC700;
}
.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: #DEB217;
}
.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: #C59B08;
}

/* End star rating */

/**job application show **/
.text-right {
    text-align: right !important;
}
.rating-stars ul {
    list-style-type: none;
    padding: 0;
}


.rating-stars ul > li.star {
    display: inline-block;
}

.rating-stars ul > li.star.selected > i.fa {
    color: #FF912C;
}

.rating-stars ul > li.star > i.fa {
    font-size: 1.5em;
    color: #ccc;
}

.rating-stars ul > li.star.hover > i.fa {
    color: #FFCC36;
}
.rating-stars ul > li.star.selected > i.fa {
    color: #FF912C;
}
.static-rating .voted {
    color: #ffcc00;
}
.static-rating-sm .star {
    font-size: 0.75rem;
}
/** job application show**/

/* plan */

.price-card {
    text-align: center;
    position: relative;
    margin-top: 30px;
}
.price-card.price-2 {
    color: #fff;
}
.price-card.price-2 .price-badge {
    color: #fff;
    background: #1C232F;
}
.price-card .p-price {
    font-size: 40px;
}
.price-card .price-badge {
    color: #fff;
    padding: 7px 24px;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}
.price-card .list-unstyled {
    display: inline-block;
}
.price-card .list-unstyled li {
    display: flex;
    align-items: center;
}
.price-card .list-unstyled li + li {
    margin-top: 8px;
}
.price-card .list-unstyled .theme-avtar {
    display: inline-flex;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #fff;
    margin-right: 15px;
}
/*plan */

#card-element {
    border: 1px solid #a3afbb !important;
    border-radius: 10px !important;
    padding: 10px !important;
}

/*** setting***/

.faq .accordion .accordion-item {
    border-radius: 10px;
    overflow: hidden;
    border: none;
    margin-bottom: 10px;
}

.faq .accordion .accordion-item .accordion-button {
    font-weight: 700 !important;
    padding: 1.3rem 1.25rem;
}

.faq .accordion .accordion-item .accordion-button span > i {
    font-size: 20px;
    margin-right: 8px;
}

.faq .accordion .accordion-item .accordion-button:not(.collapsed) {
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
}

.faq .accordion .accordion-item .accordion-body {
    padding: 2.3rem 2.3rem 2.3rem 3rem;
}

#card-element {
    border: 1px solid #a3afbb !important;
    border-radius: 10px !important;
    padding: 10px !important;
}

.active_color {
    border: 2px solid #000 !important;
}

/* chat counter */
.message-counter {
    position: absolute;
    top: 3px;
    right: 4px !important;
    border-radius: 50%;
    font-size: 10px;
width: 15px !important;
    text-align: center !important;
    color: #fff !important;
}
.dash-card{
    height: 200px !important;
}

.timesheet-card{
    height: 84px !important;
}
.emp-card{
    height: 193px !important;
}
.set-card{
     height: 300px !important;
}
.status-badge{
    width: 71px !important;

}
.status-badde3{
    width: 66px !important;

}
.ticket-card{
    height: 239px !important;

}
.status-badde4{
    width: 67px !important;
}
.status-badge5{
    width: 80px !important;

}
.status-badge6{
    width: 92px !important;
}
.status-badge7{
    width: 101px !important;

}
.em-card{
    min-height: 506px !important;
}
.job-card{
    /* height: 567px !important; */

}
.job2-card{
    height: 509px !important;

}
.mon-card{
    height: 86px !important;
}
.card-635 {
    height: 741px !important;
}
.comp-card{
    height: 142px !important;

}
.drp-language .dropdown-toggle{
    color: #525B69;
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 0.7rem;
    margin: 0 7.5px;
    border-radius: 4px;
    position: relative;
    font-weight: 500;
    border-radius: 12px;
    border: 1px solid rgba(206, 206, 206, 0.2);
}
/* chat counter */
.choose-files {
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 15px;
    max-width: 155px !important;
    font-size: 12px;
    font-weight: 500;
    /* cursor: pointer; */
}

.table.modal-table td,
.table.modal-table th {
    white-space: normal;
}

.support-user{
    height: 40px;
    width: 40px;
}

.seo_image{
    height: 200px;
    width: 360px
}

.disabledCookie {
    pointer-events: none;
    opacity: 0.4;
}

/* Payment Settings css */
.setting-accordion .accordion-item {
    border: 1px solid #E0E6EF !important;
    border-radius: 7px;
}

.setting-accordion .accordion-header {
    background: #F8F8F8;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.setting-accordion .accordion-header .accordion-button {
    background: #F8F8F8 !important;
    display: flex;
    justify-content: space-between;
    border-radius: 7px;
    box-shadow: none;
    border-bottom: 1px solid transparent;
}

.setting-accordion .accordion-header .accordion-button:not(.collapsed) {
    border-color: #E0E6EF;
}

.setting-accordion .accordion-header .accordion-button span {
    flex: 1;
}

.setting-accordion .accordion-header .accordion-button::after {
    margin: 0 0 0 5px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath opacity='0.4' d='M12 22.4146C17.5228 22.4146 22 17.9374 22 12.4146C22 6.8917 17.5228 2.41455 12 2.41455C6.47715 2.41455 2 6.8917 2 12.4146C2 17.9374 6.47715 22.4146 12 22.4146Z' fill='%2325314C'/%3E%3Cpath d='M15.5301 12.8845C15.2371 12.5915 14.762 12.5915 14.469 12.8845L12.749 14.6045V8.41455C12.749 8.00055 12.413 7.66455 11.999 7.66455C11.585 7.66455 11.249 8.00055 11.249 8.41455L11.249 14.6035L9.52908 12.8835C9.23608 12.5905 8.76104 12.5905 8.46804 12.8835C8.17504 13.1765 8.17504 13.6516 8.46804 13.9446L11.468 16.9446C11.537 17.0136 11.62 17.0684 11.711 17.1064C11.802 17.1444 11.9001 17.1646 11.9981 17.1646C12.0961 17.1646 12.1929 17.1444 12.2849 17.1064C12.3769 17.0684 12.4591 17.0136 12.5281 16.9446L15.5281 13.9446C15.8231 13.6516 15.8231 13.1775 15.5301 12.8845Z' fill='%2325314C'/%3E%3C/svg%3E");
    background-size: 24px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.setting-accordion .accordion-item:not(:last-of-type) {
    margin-bottom: 15px;
}

/* Job Stage Start */
.theme-detail-card {
    padding: 15px;
    border: 1px solid #DAE8F9;
    border-radius: 14.7699px;
    -webkit-border-radius: 14.7699px;
    -moz-border-radius: 14.7699px;
    -ms-border-radius: 14.7699px;
    -o-border-radius: 14.7699px;
}

.theme-detail-card .setting-block {
    padding: 15px;
    border: 1px dashed #DAE8F9;
    border-radius: 14.7699px;
    -webkit-border-radius: 14.7699px;
    -moz-border-radius: 14.7699px;
    -ms-border-radius: 14.7699px;
    -o-border-radius: 14.7699px;
}

/* JOB PAGE START */
.job-wrapper .navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.job-banner {
    position: relative;
    background-color: unset;
}

.job-banner .job-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.job-banner .job-banner-bg img {
    width: 100%;
    height: 100%;
}

.job-banner .job-banner-content {
    padding: 5.9% 0;
    max-width: 360px;
    width: 100%;
    margin: auto;
}

.placedjob-section .section-title {
    padding: 35px 25px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    margin-top: -20px;
    text-align: center;
}

.job-card-body {
    padding: 15px;
    border-radius: 15px;
    background: linear-gradient(277.29deg, rgba(111, 217, 67, 0.09) 0.99%, rgba(111, 217, 67, 0) 100.89%);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border: 1px solid #6FD943;
}

.placedjob-section {
    padding-bottom: 80px;
    background-color: unset;

}

.job-content .container {
    max-width: 1540px;
}

@media screen and (max-width:767px) {
    .job-banner .job-banner-content {
        padding: 10% 0;
    }
}

@media screen and (max-width:575px) {
    .job-banner .job-banner-content {
        padding: 21% 0;
    }
}

.job-card{
    display: flex;
    flex-wrap: wrap;
}
.job-card .job-card-body{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.job-card .job-card-body h5{
    flex: 1;
}

/* JOB PAGE END */


/* apply job section */

.apply-job-section {
    padding-bottom: 80px;
    background-color: unset;

}

.apply-job-section .apply-job-wrapper{
    padding: 35px 25px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    /* margin-top: -20px; */
}

@media screen and (max-width:767px) {
    .job-banner .job-banner-content {
        padding: 10% 0;
    }
    .apply-job-section .apply-job-wrapper{
        padding: 35px 15px;
    }
}

@media screen and (max-width:575px) {
    .job-banner .job-banner-content {
        padding: 26% 0;
    }
}

/* apply job section */

/* create button icon */
a > i.ti-plus{
    color: #FFFFFF;
}

/* a > i.icon_desc {
    color:#51459d;
} */

/* custom dark-mode && rtl css */

[dir="rtl"] .dash-sidebar {
    left: auto !important;
}

[dir="rtl"] .dash-header {
    left: 0;
    right: 280px;
}
[dir="rtl"] .dash-header:not(.transprent-bg) .header-wrapper {
    padding: 0 0 0 30px;
}

[dir="rtl"] .dash-header:not(.transprent-bg):not(.dash-mob-header)~.dash-container {
    margin-left: 0px;
}

[dir="rtl"] .me-auto.dash-mob-drp {
    margin-right: 10px !important;
}

[dir="rtl"] .me-auto {
    margin-left: 10px !important;
}


[dir="rtl"] .header-wrapper .ms-auto {
    margin-left: 0 !important;
}

/* header mobile view issue */
/* [dir="rtl"] .dash-header {
    left: 0 !important;
    right: 280px !important;
} */

[dir="rtl"] .list-group-flush>.list-group-item .float-end {
    float: left !important;
}

/*  custom End dark-mode && rtl css  */

.fc .fc-toolbar-title {
    font-size: 1.25em;
    margin: 0;
}

/* mobile view */
/* .ps--active-y  {
    height: 100vh !important;
} */

/*date:19-jun-2023*/
body.no-scroll{
    overflow: hidden;
    position: relative;
}

.auth-wrapper .navbar .navbar-brand{
    display: block;
    width: 100%;
    max-width: 150px;
}
.auth-wrapper .navbar .navbar-brand img{
    width: 100%;
}
@media (max-width: 1024px) {
    .ps {
        height: 100vh !important;
    }
}

.ps {
    overflow: hidden !important;
    overflow-anchor: none;
    touch-action: auto;
}

/* Nav scroller */
.dash-sidebar .navbar-content{
    height: calc(100vh - 70px);
}
/* Auth Mobile responsive */
@media screen and (max-width:767px){
    .auth-wrapper{
        align-items: flex-start !important;
    }
    .auth-wrapper .auth-content{
        min-height: unset !important;
    }
    .auth-wrapper .auth-content .card{
        min-height: calc(100vh - 110px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .auth-wrapper .auth-content .card .card-body{
        flex: unset;
    }
}

/* seo image */
.img_setting {
    filter: drop-shadow(2px 3px 7px #011C4B);
}

/* Ai selected text */
@media screen and (max-width:400px) {
    .selected_text{
        margin-top: 2px;
    }
}

.simplebar-content{
    text-align: initial;
}

/* theme customize */
.color-wrp .color-picker-wrp input[type="color"] {
    background-color: #fff;
    height: 55px;
    cursor: pointer;
    border-radius: 3px;
    margin: 0px;
    padding: 0px;
    border: 0;
    margin-bottom: 5px;
    margin-left: 5px;
}

.color-wrp{
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.color-wrp .theme-color{
    margin: 0;
    width: 200px;
}
.color-wrp .color-picker-wrp{
    width: 70px;
}

/* google recapcha  */

.grecaptcha-badge{
    z-index: 2;
 }.border-grey {
    border: 1px solid #CBCBCB
 !important;
 }
 .upgrade-line hr {
    flex: 1;
 }

  /* border-color */

  body.theme-1 .border-primary {
    border-color: #0CAF60 !important;
}

body.theme-2 .border-primary {
    border-color: #584ED2 !important;
}

body.theme-3 .border-primary {
    border-color: #6FD943 !important;
}

body.theme-4 .border-primary {
    border-color: #145388 !important;
}

body.theme-5 .border-primary {
    border-color: #B9406B !important;
}

body.theme-6 .border-primary {
    border-color: var(--zapta-accent, #0865FF) !important;
}

body.theme-7 .border-primary {
    border-color: #922C88 !important;
}

body.theme-8 .border-primary {
    border-color: #C0A145 !important;
}

body.theme-9 .border-primary {
    border-color: #48494B !important;
}

body.theme-10 .border-primary {
    border-color: #0C7785 !important;
}

body.theme-1 .btn-addnew-project {
    border-color: var(--theme1-color);
}
body.theme-2 .btn-addnew-project {
    border-color: var(--theme2-color);
}
body.theme-3 .btn-addnew-project {
    border-color: var(--theme3-color);
}
body.theme-4 .btn-addnew-project {
    border-color: var(--theme4-color);
}
body.theme-5 .btn-addnew-project {
    border-color: var(--theme5-color);
}
body.theme-6 .btn-addnew-project {
    border-color: var(--theme6-color);
}
body.theme-7 .btn-addnew-project {
    border-color: var(--theme7-color);
}
body.theme-8 .btn-addnew-project {
    border-color: var(--theme8-color);
}
body.theme-9 .btn-addnew-project {
    border-color: var(--theme9-color);
}
body.theme-10 .btn-addnew-project {
    border-color: var(--theme10-color);
}
body.custom-color .btn-addnew-project {
    border-color: var(--color-customColor);
}

body.custom-color .border-primary {
    border-color: var(--color-customColor) !important;
}

/*  all Cancel button background change*/

.modal-footer .btn.btn-light,
.btn.custom-cancel-btn {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

/* All model close button css */

.btn-close:focus,
.btn-close:hover {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(81, 69, 157, 0.25);
    opacity: 1;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
}

/* All model close button css */

/* Dashboard set link css */

.card.stats-wrapper {
    margin-bottom: 24px;
}

.dash-info-card .card-body.stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dash-info-card .card-body.stats .text-muted {
    text-align: left;
}

.dash-info-card .card-body.stats h6 a,
.dash-info-card.appoint-dash .stats h5 a {
    color: #000;
}

/* Dashboard set link css */

/* templates css */

.invoice-row {
    gap: 20px 0;
}
.language-sidebar .list-group-item {
    padding: 10px 25px;
}

/* templates css */

/* All buttons css */

.dt-buttons a span i{
    padding: 9px !important;
    background: #3ec9d6 !important;
    color: #ffff !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    display: flex;
    align-items: center;
}
.dt-buttons a span i.ti-eye,
.dt-buttons a span i.ti-key,
.dt-buttons a span i.fa-comment {
    background: #ffa21d !important;
    color: #ffff !important;
}
.dt-buttons a span i.ti-pencil {
    background: #3ec9d6 !important;
    color: #ffff !important;
}
.dt-buttons a span i.ti-trash {
    background: #ff3a6e !important;
    color: #ffff !important;
}
.dt-buttons a span i.ti-caret-right,
.dt-buttons a span i.ti-copy,
.dt-buttons a span i.ti-arrow-back-up,
.dt-buttons a span i.ti-download {
    background: #6fd943 !important;
    color: #ffff !important;
}
.dt-buttons a span i.ti-arrows-right-left {
    background: #1c232f !important;
    color: #ffff !important;
}
.dt-buttons a span i.ti-crosshair {
    background: #6c757d !important;
    color: #ffff !important;
}

/* All buttons css */

/* Ticket prority and status css */

.ticket-set{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding: 0.5rem !important;
    width: 90%;
}

/* Ticket prority and status css */

/* BADGE RADIUS — REMOVED 16 Aug 2026 (ONE PILL SYSTEM).
   This was `.badge { border-radius: 4px !important }`, a global override that
   defeated the canonical pill on radius: !important beats a normal declaration
   whatever the specificity or load order, so every Bootstrap badge rendered as
   a 4px square no matter what zapta-theme.css asked for. It also flattened
   `.theme-avtar` (the 45x45 identity tile, radius 17.36px) for the same reason,
   which is why those tiles read as squares. Badge shape now comes from the
   canonical pill rule in zapta-theme.css; avatars keep their own radius. */

/* TOOLTIP OVERRIDE — REMOVED 16 Aug 2026 (ONE TOOLTIP SYSTEM).
   This was `.tooltip-inner { border-radius: 4px !important; text-transform:
   capitalize; }`. The radius pin beat the 6px the theme layer asks for, and
   the capitalize silently Title-Cased EVERY Bootstrap tooltip in the app —
   "Copy to clipboard" rendered as "Copy To Clipboard". That is content being
   rewritten by a stylesheet, not a styling choice.

   Tooltips are now the canonical `.zapta-tip` (zapta-components.css), which
   `zapta-list.js` adopts every `title` and `data-bs-toggle="tooltip"` element
   into, so `.tooltip-inner` should no longer render at all. The rule is
   deleted rather than corrected: leaving it would quietly restyle any
   Bootstrap tooltip that ever escapes adoption, instead of making it obvious. */
.dt-custom-toolbar{
    margin-top: 12px;
    padding-left: 13px;
    padding-right: 13px;
}

.loading {
    pointer-events: none;
    cursor: not-allowed !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 0;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-decoration: none !important;
}

.loading > *,
.loading i,
.loading span,
.loading svg,
.loading .btn-text {
    opacity: 0 !important;
    visibility: hidden !important;
}

.loading::before {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    content: "";
    opacity: 1;
    border-radius: 50%;
    width: 18px !important;
    height: 18px !important;
    margin: 0;
    transform: translate(-50%, -50%);
    animation: btn-loading-spin 0.8s linear infinite;
    border: 2px solid !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: #000 !important;
    border-bottom-color: #000 !important;
}

.action-btn.loading::before,
.action-btn .loading::before {
    width: 14px !important;
    height: 14px !important;
    border-top-color: #fff !important;
    border-bottom-color: #fff !important;
}

.btn-primary.loading::before,
.btn-danger.loading::before,
.btn-success.loading::before,
.zapta-btn-primary.loading::before,
.zapta-confirm-actions .zapta-btn-primary.loading::before {
    border-top-color: var(--zapta-on-brand, #fff) !important;
    border-bottom-color: var(--zapta-on-brand, #fff) !important;
}


.action-btn > a,
.action-btn > form > a,
.action-btn > form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.action-btn.loading,
.action-btn > a.loading,
.action-btn > form > a.loading {
    width: 100%;
    height: 100%;
}

@keyframes btn-loading-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

/* SECTION LOADER — now an ALIAS of the canonical region overlay (17 Aug 2026).
   The rules that stood here drew their ring as `border: 5px solid #000000`
   over an `rgba(0,0,0,.1)` scrim: a BLACK RING and a black wash, neither of
   which can follow the theme, on a class used by 13 call sites. The shape is
   `.zapta-loading` in zapta-components.css now; this alias is kept so not one
   of those call sites had to change, and so `custom.css` — which loads BEFORE
   the components layer — cannot win the cascade with a stale copy.
   New work should use `.zapta-loading` directly. */
.section-loader {
    position: relative;
    pointer-events: none;
    cursor: progress;
}

.section-loader::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    user-select: none;
    pointer-events: none;
    background: var(--zapta-surface, #fff);
    opacity: .55;
    border-radius: inherit;
}

.section-loader::before {
    content: "";
    position: absolute;
    top: calc(50% - (var(--zapta-loading-size, 32px) / 2));
    left: calc(50% - (var(--zapta-loading-size, 32px) / 2));
    width: var(--zapta-loading-size, 32px);
    height: var(--zapta-loading-size, 32px);
    z-index: 5;
    border: 3px solid var(--zapta-field, #dbe2ea);
    border-right-color: var(--zapta-brand, #0865ff);
    border-radius: 50%;
    animation: .8s linear infinite rotate;
}

/* ═══════════════════════════════════════════════
   FINAL OVERRIDE — beats all previous dt-buttons rules
   ═══════════════════════════════════════════════ */

/* Strip ALL icon backgrounds/padding from dt-buttons */
.dt-buttons a span i,
.dt-buttons a span i.ti-eye,
.dt-buttons a span i.ti-key,
.dt-buttons a span i.fa-comment,
.dt-buttons a span i.ti-pencil,
.dt-buttons a span i.ti-trash,
.dt-buttons a span i.ti-caret-right,
.dt-buttons a span i.ti-copy,
.dt-buttons a span i.ti-arrow-back-up,
.dt-buttons a span i.ti-download,
.dt-buttons a span i.ti-arrows-right-left,
.dt-buttons a span i.ti-crosshair {
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    color: inherit !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* action-btn: flat icon button */
.action-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background-color: rgba(var(--zapta-brand-rgb, 8, 101, 255), .07) !important;
    color: rgba(var(--zapta-brand-rgb, 8, 101, 255), .72) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background-color .15s !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 16px !important;
    border: none !important;
}
.action-btn:hover { background-color: rgba(var(--zapta-brand-rgb, 8, 101, 255), .14) !important; }

.action-btn a,
.action-btn > a,
.action-btn form a,
.action-btn > form > a,
.action-btn > form > button {
    color: rgba(var(--zapta-brand-rgb, 8, 101, 255), .72) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
}

.action-btn i,
.action-btn a i,
.action-btn span i,
.action-btn a span i,
.action-btn form a i,
.action-btn form a span i,
.action-btn > a > span > i,
.action-btn > form > a > span > i {
    color: inherit !important;
    font-size: 16px !important;
    background: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
}

.action-btn span,
.action-btn a span,
.action-btn form a span {
    color: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    padding: 0 !important;
}

/* bg-danger stays red */
.action-btn.bg-danger {
    background-color: rgba(var(--zapta-danger-rgb, 231, 23, 90), .07) !important;
    color: rgba(var(--zapta-danger-rgb, 231, 23, 90), .78) !important;
}
.action-btn.bg-danger a,
.action-btn.bg-danger > a,
.action-btn.bg-danger form a,
.action-btn.bg-danger > form > a { color: rgba(var(--zapta-danger-rgb, 231, 23, 90), .78) !important; }
.action-btn.bg-danger:hover { background-color: rgba(var(--zapta-danger-rgb, 231, 23, 90), .14) !important; }

/* All other bg-* → blue */
.action-btn.bg-primary,
.action-btn.bg-secondary,
.action-btn.bg-success,
.action-btn.bg-warning,
.action-btn.bg-info,
.action-btn.bg-dark {
    background-color: rgba(var(--zapta-brand-rgb, 8, 101, 255), .07) !important;
    color: rgba(var(--zapta-brand-rgb, 8, 101, 255), .72) !important;
}
.action-btn.bg-primary:hover,
.action-btn.bg-secondary:hover,
.action-btn.bg-success:hover,
.action-btn.bg-warning:hover,
.action-btn.bg-info:hover,
.action-btn.bg-dark:hover { background-color: rgba(var(--zapta-brand-rgb, 8, 101, 255), .14) !important; }

/* dt-buttons row layout */
.dt-buttons,
.dt-buttons span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ONE BUTTON SYSTEM, 16 Aug 2026.
   `font-size: 14px !important` was REMOVED from this rule. It was redundant —
   14px is already the served Bootstrap default (--bs-btn-font-size: 0.875rem
   in assets/css/style.css) — so it changed nothing, while its !important made
   the canonical 13px unreachable no matter what zapta-theme.css declared.
   Button size now comes from the --bs-btn-* token bridge in zapta-theme.css.

   The height floor STAYS: it is what keeps a button the same height as the
   field beside it in a toolbar. It is the token now rather than a literal, and
   no longer !important, so `.btn-sm` can finally be smaller than it. Deleting
   it outright would drop every Bootstrap button to ~34px and break that
   alignment app-wide. */
.btn {
    min-height: var(--zapta-control-h, 42px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* `.btn.btn-secondary` used to hard-code #fff / #beb9b9 / #5a5858, all three
   !important, which beat this file's own tokenised .btn-secondary in
   zapta-theme.css — 58 elements rendering in a grey that belongs to no palette
   and could never follow dark mode. Deleting the block RESTORES the intended
   styling; nothing replaces it. */
.offcanvas.show{
    z-index: 999999;
}



/* 07 Aug 2026 — "Choose file here" rendered on THREE lines wherever this pill
   appears (Business Settings logo cards, imports, job application): the 155px
   cap plus the inline icon wrapped the label mid-phrase. One centred line,
   sized by its own text. Scoped to the .bg-primary PILL only — the sibling
   "Drop file here or click to browse" body is meant to wrap. */
.choose-files label > div.bg-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    width: -moz-max-content;
    width: max-content;
    max-width: none !important;
}