.bpm-modal-expired .modal-content {
		background: none !important;
}


/*======================================= Client Pop-up & Number Pop-up CSS & Add product Pop-up==========================*/

.modal-dialog:has(.client-popup),
.modal-dialog:has(.number-popup) {
    margin-right: 10px;
    margin-top: 10px !important;
    max-width: 768px !important;
}

.modal-content:has(.client-popup),
.modal-content:has(.number-popup),
.modal-content:has(.add-custom-product) {
    border: none !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

.modal-content:has(.client-popup) .modal-body:first-child,
.modal-content:has(.number-popup) .modal-body:first-child,
.modal-content:has(.add-custom-product) .modal-body:first-child {
    padding: 0 !important;
}

/*======================================= Client Pop-up CSS==========================*/

.client-popup .side-panel-figma {
    display: flex !important;
    flex-direction: column !important;
    background: var(--grey-white) !important;
    height: calc(100vh - 40px) !important;
    font-family: var(--font-main) !important;
}

.client-popup .panel-header {
    flex-shrink: 0 !important;
    padding: 22px 24px !important;
    border-bottom: 1px solid var(--grey-g200) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: var(--grey-white) !important;
}

.client-popup .panel-body {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

.client-popup .panel-footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 24px !important;
    gap: 16px !important;
    background: var(--grey-white) !important;
    border-top: 1px solid var(--grey-g200) !important;
    flex-shrink: 0 !important;
}

.client-popup .section-row {
    padding: 24px !important;
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.client-popup .section-row.flex-column {
    flex-direction: column !important;
    gap: 24px !important;
}

.client-popup .no-top-padding {
    padding-top: 0 !important;
}

.client-popup .client .border-bottom {
    border-bottom: 1px solid var(--grey-g200) !important;
}

.client-popup .data-columns-wrapper {
    display: flex !important;
    width: 100% !important;
    gap: 48px !important;
}

.client-popup .data-column {
    flex: 1 1 50% !important;
    max-width: 50% !important;
}

.client-popup .data-column-full,
.client-popup .table-full-width-wrapper {
    width: 100% !important;
}

.client-popup .panel-title-text {
    font-size: 24px !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: 0.72px !important;
    color: var(--grey-black) !important;
}

.client-popup .group-title {
    font-size: 20px !important;
    font-weight: var(--fw-bold) !important;
    color: var(--grey-black) !important;
    line-height: 24px !important;
    letter-spacing: 0.60px !important;
}

.client-popup .info-grid {
    display: grid !important;
    width: 100% !important;
}

.client-popup .info-grid-2-col {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 48px !important;
}

.client-popup .info-line {
    display: grid !important;
    grid-template-columns: 100px 1fr !important;
    gap: 16px !important; 
    align-items: flex-start !important;
    margin-bottom: 12px !important;
}

.client-popup .info-line span {
    font-size: 14px !important;
    font-weight: var(--fw-medium) !important;
    color: var(--gray-black) !important;
    line-height: 21px;
    letter-spacing: 0.49px;
    word-wrap: break-word;
}

.client-popup .info-line strong {
    font-size: 14px !important;
    font-weight: var(--fw-bold) !important;
    color: var(--grey-black) !important;
    text-align: left !important;
}

.client-popup .section-header-title {
    padding: 24px !important;
}

.client-popup .pl-24 {
    padding-left: 24px !important;
}

.client-popup .pr-24 {
    padding-right: 24px !important;
}

.client-popup .btn-figma-secondary {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 20px !important;
    gap: 8px !important;
    background: var(--grey-white) !important;
    border-radius: 999px !important;
    border: none !important;
    outline: 1px solid var(--grey-g400) !important;
    outline-offset: -1px !important;
    color: var(--grey-black) !important;
    font-weight: var(--fw-bold) !important;
    font-size: 14px !important;
    height: 44px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.client-popup .btn-figma-secondary:hover {
    background: var(--grey-g100) !important;
    outline-color: var(--grey-black) !important;
}

.client-popup .btn-round-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid var(--grey-g200) !important;
    background: var(--grey-white) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.client-popup .status-badge-blue {
    background: var(--blue-primary) !important;
    color: var(--grey-white) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: var(--fw-bold) !important;
    text-transform: uppercase !important;
}

.client-popup .repeater-item-dashed {
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

.client-popup .repeater-item-dashed:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.client-popup .status-timeline-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.client-popup .step {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.client-popup .dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--grey-g300) !important;
}

.client-popup .step.active .dot {
    background: var(--status-ready) !important;
}

.client-popup .timeline-text {
    font-size: 14px !important;
    font-weight: var(--fw-bold) !important;
}

.client-popup .btn-figma-primary {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 16px 20px !important;
    gap: 6px !important;
    background: var(--btn-primary) !important;
    border-radius: 999px !important;
    border: none !important;
    color: var(--grey-white) !important;
    font-weight: var(--fw-bold) !important;
    font-size: 14px !important;
    line-height: 16px !important;
    letter-spacing: 0.42px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.client-popup .btn-figma-primary:hover {
    background: var(--btn-primary-hov) !important;
    text-decoration: none !important;
}

.client-popup .btn-figma-primary:disabled {
    opacity: 0.50 !important;
    cursor: not-allowed !important;
}

.client-popup .side-panel-figma .custom-control-label::before {
    width: 18px !important;
    height: 18px !important;
    background-color: var(--grey-white) !important;
    border: 1px solid var(--grey-g400) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: all 0.3s ease-in-out;
}

.client-popup .side-panel-figma .custom-control-label:hover::before {
    background-color: var(--grey-g200) !important;
    border: 1px solid var(--grey-black) !important;
}

.client-popup .side-panel-figma .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--blue-primary) !important;
    border-color: var(--blue-primary) !important;
}

.client-popup .side-panel-figma .custom-control-input:checked:hover ~ .custom-control-label::before {
    background-color: var(--blue-primary-hov) !important;
    border-color: var(--blue-primary-hov) !important;
}

.client-popup .side-panel-figma .custom-control-input:checked ~ .custom-control-label::after {
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 20px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.client-popup .side-panel-figma .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none !important;
    border-color: var(--grey-g400) !important;
}

.client-popup .side-panel-figma .custom-control-input:focus:checked ~ .custom-control-label::before {
    border-color: var(--blue-primary) !important;
}

.client-popup .table-icons {
    width: 16px;
    height: 16px;
    margin-right: 6px !important;
}

.client-popup .download-link {
    color: var(--grey-black);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--fw-medium);
    line-height: 150%;
    letter-spacing: 0.49px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.client-popup a.download-link:hover {
    color: var(--grey-black) !important;
}

/*==================Number Popup =========================*/

.number-popup .table-vert-center tbody tr:last-child td {
    border-bottom: 1px solid var(--grey-g200) !important;
}

.number-popup .table-vert-center {
    border-collapse: collapse !important;
}

.number-popup .side-panel-figma {
    display: flex !important;
    flex-direction: column !important;
    background: var(--grey-white) !important;
    height: calc(100vh - 40px) !important;
}

.number-popup .panel-header {
    flex-shrink: 0 !important;
    padding: 22px 24px !important;
    border-bottom: 1px solid var(--grey-g200) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: var(--grey-white) !important;
}

.number-popup .panel-body {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

.number-popup .panel-footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 24px !important;
    background: var(--grey-white) !important;
    border-top: 1px solid var(--grey-g200) !important;
    width: 100%;
    box-sizing: border-box;
}

.number-popup .section-row {
    padding: 24px !important;
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.number-popup .figma-section {
    padding: 24px 0 !important;
}

.number-popup .section-row.flex-column {
    flex-direction: column !important;
    gap: 16px !important;
}

.number-popup .no-top-padding {
    padding-top: 0 !important;
}

.number-popup .border-top {
    border-top: 1px solid var(--grey-g200) !important;
}

.number-popup .data-columns-wrapper {
    display: flex !important;
    width: 100% !important;
    gap: 48px !important;
}

.number-popup .data-column {
    flex: 1 1 50% !important;
    max-width: 50% !important;
}

.number-popup .data-column-full,
.number-popup .table-full-width-wrapper {
    width: 100% !important;
}

.number-popup .panel-title-text {
    font-size: 24px !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: 0.72px !important;
    color: var(--grey-black) !important;
}

.number-popup .group-title {
    font-size: 20px !important;
    font-weight: var(--fw-bold) !important;
    color: var(--grey-black) !important;
    line-height: 24px !important;
    letter-spacing: 0.60px !important;
}

.number-popup .info-grid {
    display: grid !important;
    width: 100% !important;
}

.number-popup .info-grid-2-col {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 48px !important;
}

.number-popup .info-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
}

.number-popup .info-line span {
    font-size: 14px !important;
    font-weight: var(--fw-medium) !important;
    color: var(--gray-black) !important;
    line-height: 21px;
    letter-spacing: 0.49px;
    word-wrap: break-word;
}

.number-popup .info-line strong {
    font-size: 14px !important;
    font-weight: var(--fw-bold) !important;
    color: var(--grey-black) !important;
    text-align: right !important;
}

.number-popup .section-header-title {
    padding: 24px !important;
}

.number-popup .btn-figma-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 20px !important;
    border-radius: 999px !important;
    background: var(--grey-white) !important;
    border: 1px solid var(--grey-g400) !important;
    color: var(--grey-black) !important;
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 16px;
    letter-spacing: 0.42px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.number-popup .btn-figma-secondary:hover {
    background: var(--grey-g100) !important;
}

.number-popup .btn-figma-secondary i {
    font-size: 16px;
}

.number-popup .btn-round-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid var(--grey-g200) !important;
    background: var(--grey-white) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.number-popup .status-badge-blue {
    background: var(--blue-primary) !important;
    color: var(--grey-white) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: var(--fw-bold) !important;
    text-transform: uppercase !important;
}

.number-popup .repeater-item-dashed {
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

.number-popup .repeater-item-dashed:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.number-popup .status-timeline-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.number-popup .step {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.number-popup .dot {
    width: 8px !important;
    height: 8px !important;
    aspect-ratio: 1/1;
    border-radius: 1000px !important;
    background: var(--status-ready) !important;
    border: none;
    margin-top: 0.25rem !important;
}

.number-popup .step.active .dot {
    width: 16px !important;
    height: 16px !important;
    aspect-ratio: 1 / 1;
    border-radius: 1000px !important;
    background: var(--blue-primary) !important;
    border: none;
}

.number-popup .timeline-text {
    font-size: 14px !important;
    font-weight: var(--fw-bold) !important;
}

.number-popup .download-link {
    color: var(--grey-black);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--fw-medium);
    line-height: 150%;
    letter-spacing: 0.49px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.number-popup a.download-link:hover {
    color: var(--grey-black) !important;
}

.number-popup .status-text-custom {
    color: var(--brand-grey);
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 16px !important;
    font-style: normal;
    font-weight: var(--fw-bold) !important;
    line-height: 120%;
    letter-spacing: 0.48px;
}

.number-popup .status-text-done-custom {
    color: var(--green-g700);
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 16px;
    font-style: normal;
    font-weight: var(--fw-bold);
    line-height: 120%;
    letter-spacing: 0.48px;
}

.number-popup .status-text-active-custom {
    color: var(--grey-black);
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 16px;
    font-style: normal;
    font-weight: var(--fw-bold);
    line-height: 120%;
    letter-spacing: 0.48px;
}

.number-popup .status-timeline-vertical .dot {
    width: 14px !important;
    height: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
    position: relative;
    background: transparent !important;
    border: none !important;
}

.number-popup .status-timeline-vertical .step .dot::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: var(--status-ready) !important;
    border-radius: 50%;
    display: block;
}

.number-popup .status-timeline-vertical .step.active .dot {
    background-color: var(--blue-active-step) !important;
    background-image: none !important;
}

.number-popup .status-timeline-vertical .step.active .dot::before {
    display: none !important;
}

.number-popup .status-timeline-vertical .step::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 22px;
    width: 2px;
    height: auto !important;
    background: var(--grey-border);
    bottom: -13px;
}

.number-popup .status-timeline-vertical .step:last-child::after {
    display: none;
}

.table-icons-statuses {
    width: 24px;
    height: 24px;
    vertical-align: top;
}

/* === EXTRACTED INLINE STYLES FOR NUMBER POPUP === */

.icon-24 {
    width: 24px; 
    height: 24px;
}

.flex-between-center {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.mb-3px {
    margin: 0 0 3px 0;
}

.mb-4px {
    margin: 0 0 4px 0;
}

.mb-24 {
    margin-bottom: 24px;
}

.mt-24 {
    margin-top: 24px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mr-16 {
    margin: 0 16px 0 0 !important;
}

.badge-blue-pill {
    height: 100%; 
    padding: 4px 8px 6px 8px; 
    background: var(--blue-primary); 
    border-radius: 999px; 
    justify-content: center; 
    align-items: center; 
    gap: 8px; 
    display: inline-flex;
}

.badge-text {
    justify-content: center; 
    display: flex; 
    flex-direction: column; 
    color: var(--grey-white); 
    font-size: 14px; 
    font-family: var(--font-segoe); 
    font-weight: var(--fw-bold); 
    line-height: 16px; 
    word-wrap: break-word;
}

.dot-stretch {
    align-self: stretch;
}

.flex-1-start {
    flex: 1 0 0; 
    align-items: flex-start;
}

.timeline-desc-text {
    align-self: stretch; 
    color: var(--grey-black); 
    font-size: 16px; 
    font-style: normal; 
    font-weight: var(--fw-medium); 
    line-height: 150%; 
    letter-spacing: 0.48px; 
    margin-bottom: 0px;
}

.status-info-box {
    width: 100%; 
    height: 100%; 
    padding: 24px; 
    overflow: hidden; 
    border-radius: 16px; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 16px; 
    display: flex; 
}

.status-info-box.blue-box {
    background: var(--blue-primary-alpha-05); 
    outline: 1px solid var(--blue-primary); 
    outline-offset: -1px; 
}

.status-info-box.orange-box {
    background: var(--orange-light-bg); 
    outline: 1px solid var(--orange-primary); 
    outline-offset: -1px; 
    display: inline-flex;
}

.info-box-inner {
    align-self: stretch; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 16px; 
    display: inline-flex;
}

.icon-wrapper-24 {
    width: 24px; 
    height: 24px; 
    position: relative; 
    overflow: hidden;
}

.info-text-col {
    flex: 1 1 0; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 4px; 
    display: inline-flex;
}

.info-title {
    align-self: stretch; 
    color: var(--grey-black); 
    font-size: 17px; 
    font-weight: var(--fw-bold); 
    line-height: 20.40px; 
    letter-spacing: 0.51px; 
    word-wrap: break-word;
}

.info-subtitle {
    align-self: stretch; 
    color: var(--grey-black); 
    font-size: 16px; 
    font-weight: var(--fw-medium); 
    line-height: 24px; 
    letter-spacing: 0.48px; 
    word-wrap: break-word;
}

.info-subtitle-wrapper {
    align-self: stretch;
}

.link-blue-underline {
    color: var(--blue-primary); 
    font-size: 16px; 
    font-weight: var(--fw-medium); 
    text-decoration: underline; 
    line-height: 24px; 
    letter-spacing: 0.48px; 
    word-wrap: break-word;
}

.font-neue {
    font-family: var(--font-main);
}

/*========================POPUP MESSAGE CSS===========================*/

.modal-content:has(.fa-info-circle.text-info) {
    background: var(--blue-primary-hov) !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: none !important;
    width: max-content !important;
    box-shadow: var(--shadow-dark-15) !important;
    position: fixed !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 9999 !important;
}

.modal-content:has(.fa-info-circle.text-info) .fa-info-circle {
    display: none !important;
}

.modal-content:has(.fa-info-circle.text-info) .modal-body {
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
}

.modal-content:has(.fa-info-circle.text-info) .flex-fill {
    color: var(--grey-white) !important;
    font-family: var(--font-main) !important;
    font-size: 14px !important;
    font-weight: var(--fw-medium) !important;
    line-height: 21px !important;
    padding-left: 0 !important;
    margin-right: 48px !important;
}

.modal-content:has(.fa-info-circle.text-info) .flex-fill strong {
    font-weight: var(--fw-bolder) !important;
}

.modal-content:has(.fa-info-circle.text-info) .modal-footer {
    padding: 0 !important;
    border-top: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
}

.modal-content:has(.fa-info-circle.text-info) .btn-primary {
    background: transparent !important;
    border: none !important;
    color: transparent !important;
    font-family: var(--font-main) !important;
    font-size: 0 !important;
    font-weight: var(--fw-bold) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    text-transform: capitalize !important;
    transition: background-color 0.2s ease !important;
    background-color: transparent !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
}

.modal-content:has(.fa-info-circle.text-info) .btn-primary:hover,
.modal-content:has(.fa-info-circle.text-info) .btn-primary:focus {
    background: var(--white-alpha-10) !important;
    outline: none !important;
    background-color: var(--white-alpha-15) !important;
}

div[ng-controller="resetPasswordController"] .modal-title {
    color: var(--clr-text);
    font-weight: var(--fw-bolder);
}

div[ng-controller="resetPasswordController"] .modal-footer .btn-primary {
    padding-left: 1rem;
    padding-right: 1rem;
}

div[ng-controller="resetPasswordController"] .form-control {
    height: 52px;
    font-size: 16px;
    border-radius: 12px;
    padding: 10px 16px;
    background-color: var(--input-bg-blue) !important;
    border: 1px solid var(--input-border-blue) !important;
    color: var(--text-dark-333);
    margin-bottom: 10px;
}

div[ng-controller="resetPasswordController"] .btn-primary {
    color: var(--grey-white) !important;
    background-color: var(--btn-primary) !important;
    border-color: var(--btn-primary) !important;
    border-radius: 999px !important;
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 16px;
    letter-spacing: 0.42px;
    padding: 16px 20px;
    box-shadow: none !important;
    transition: all 0.1s ease-in-out;
    width: 100%;
    margin-bottom: 12px;
}

div[ng-controller="resetPasswordController"] .modal-title {
    color: var(--grey-black);
    font-size: 48px;
    font-style: normal;
    font-weight: var(--fw-bold);
    line-height: 130%;
}

div[ng-controller="resetPasswordController"].login-content {
    border: none !important;
    border-radius: unset !important;
}

div[ng-controller="resetPasswordController"].shadow {
    box-shadow: none !important;
}

div[ng-controller="resetPasswordController"] .modal-header {
    border-bottom: none;
}

div[ng-controller="resetPasswordController"] .modal-footer>* {
    margin: .25rem;
    width: 100%;
}

/* === PAYMENT SETTINGS === */

.modal-content:has(.payment-wrapper) {
	border: none;
	border-radius: 15px;
}

.modal-content:has(.payment-wrapper) .modal-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 22px 32px !important;
	background: var(--grey-white) !important;
	border-bottom: 1px solid var(--grey-g200) !important;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	font-weight: var(--fw-bold);
	font-size: 24px;
	line-height: 28.8px;
	letter-spacing: 0.72px;
	color: var(--grey-black);
}

.modal-content:has(.payment-wrapper) .modal-header .close {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	outline: 1px solid var(--grey-g200) !important;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.modal-content:has(.payment-wrapper) .modal-header .close-btn {
	width: 40px !important;
	height: 40px !important;
	padding: 6px !important;
	background: var(--grey-white) !important;
	border-radius: 999px !important;
	outline: 1px solid var(--grey-g200) !important;
	outline-offset: -1px;
	border: none !important;
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 2px !important;
	cursor: pointer;
	overflow: hidden !important;
}

.modal-content:has(.payment-wrapper) .modal-header .close-btn i,
.modal-content:has(.payment-wrapper) .modal-header .close-btn svg {
	width: 24px !important;
	height: 24px !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	color: var(--grey-black) !important;
}

.payment-wrapper {
	display: flex !important;
	width: 100%;
	padding: 48px 0;
	flex-direction: column !important;
	align-items: center !important;
}

.payment-container {
	width: 926px;
}

.payment-heading {
	text-align: left;
	margin-bottom: 24px;
}

.payment-heading-text {
	color: var(--grey-black);
	font-size: 28px;
	font-weight: var(--fw-bold);
	line-height: 33.60px;
	letter-spacing: 0.84px;
	word-wrap: break-word;
}

.jumbotron-arggo-invoice-settings {
	display: flex;
	width: 926px;
	padding: 40px 40px 56px 40px;
	flex-direction: column;
	border-radius: 16px;
	border: 1px solid var(--grey-be);
	background: var(--grey-white);
	margin-left: auto !important;
	margin-right: auto !important;
}

.payment-wrapper .invoice-setting {
	margin-bottom: 24px;
}

.payment-wrapper .label-primary {
	color: var(--grey-black);
	font-size: 16px;
	font-weight: var(--fw-bold);
	line-height: 20.80px;
	letter-spacing: 0.56px;
	word-wrap: break-word;
}

.payment-wrapper .label-secondary {
	color: var(--grey-black);
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: 18.20px;
	letter-spacing: 0.49px;
	word-wrap: break-word;
}

.payment-wrapper .custom-input {
	padding: 12px;
	height: 48px;
	border: 1px solid var(--grey-g400);
	border-radius: 12px;
	color: var(--grey-black);
	transition: all 0.3s ease-in-out;
}


.payment-wrapper .row-spacing {
	margin-top: 32px;
}

.payment-wrapper .finance-dep-link {
	color: var(--blue-primary);
	font-size: 14px;
	font-weight: var(--fw-medium);
	text-decoration: underline;
	line-height: 18.20px;
	letter-spacing: 0.49px;
	word-wrap: break-word;
	cursor: pointer;
}

.payment-wrapper .info-message-box {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	align-self: stretch;
	gap: 16px;
	margin-top: 8px;
	padding: 24px;
	background: var(--blue-primary-alpha-05);
	border-radius: 16px;
	outline: 1px solid var(--blue-primary);
	outline-offset: -1px;
	overflow: hidden;
}

.payment-wrapper .info-message-content {
	display: inline-flex;
	justify-content: flex-start;
	align-items: flex-start;
	align-self: stretch;
	gap: 16px;
}

.payment-wrapper .info-message-icon {
	position: relative;
	width: 24px;
	height: 24px;
	overflow: hidden;
}

.payment-wrapper .info-message-text-group {
	display: inline-flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 4px;
}

.payment-wrapper .info-message-title {
	align-self: stretch;
	color: var(--grey-black);
	font-size: 17px;
	font-weight: var(--fw-bold);
	line-height: 20.40px;
	letter-spacing: 0.51px;
	word-wrap: break-word;
}

.payment-wrapper .info-message-description {
	align-self: stretch;
	color: var(--grey-black);
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 24px;
	letter-spacing: 0.48px;
	word-wrap: break-word;
}

/* === VOUCHER CODE OTP === */

.modal-content:has(.voucher-code-panel) {
	border-radius: 15px;
	border: 0;
}

.modal-content:has(.voucher-code-panel) .modal-header {
	border-bottom: 1px solid var(--grey-g200);
	padding: 24px;
}

.modal-content:has(.voucher-code-panel) .code-footer {
	border-top: 1px solid var(--grey-g200);
}

.voucher-code-panel .otp-input-wrapper {
	max-width: 500px;
}

.voucher-code-panel .instruction-text {
	font-weight: var(--fw-medium);
	font-size: 14px;
	line-height: 150%;
	letter-spacing: 0.035em;
	color: var(--grey-black);
}

.voucher-code-panel .otp-field {
	width: 14%;
	height: 70px;
	border-radius: 12px;
	border: 1px solid var(--grey-g400);
	text-align: center;
	font-size: 24px;
	font-weight: var(--fw-bold);
	color: var(--grey-black);
	transition: all 0.3s ease-in-out;
}

.voucher-code-panel .otp-field.active {
	border: 1px solid var(--grey-black);
}

.voucher-code-panel .otp-field:hover {
	border: 1px solid var(--grey-black);
	background: var(--grey-g200) !important;
}

.voucher-code-panel .otp-field:focus {
	outline: none;
	border: 1px solid var(--grey-black) !important;
	box-shadow: none;
}

.voucher-code-panel .otp-filled {
	border: 2px solid var(--blue-primary-hov) !important;
}

.voucher-code-panel .btn-cancel {
	padding: 16px 20px;
	color: var(--grey-black);
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	border-radius: 999px;
	border: none;
	background: transparent;
	outline: 1px solid var(--grey-g400);
	outline-offset: -1px;
	justify-content: center;
	align-items: center;
	gap: 6px;
	display: inline-flex;
	margin-right: 16px;
	transition: all 0.3s ease-in-out;
}

.voucher-code-panel .btn-cancel:hover {
	background: var(--grey-g200);
	outline: 1px solid var(--grey-black) !important;
}

.voucher-code-panel .btn-voucher {
	padding: 16px 20px;
	background: var(--btn-primary);
	overflow: hidden;
	border: none;
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	gap: 6px;
	display: inline-flex;
	color: var(--grey-white);
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	transition: all 0.3s ease-in-out;
}

.voucher-code-panel .btn-voucher:hover {
	background: var(--btn-primary-active);
}

.modal-content:has(.voucher-code-panel) .modal-title {
	color: var(--grey-black);
	font-size: 24px;
	font-weight: var(--fw-bold);
	line-height: 28.8px;
	letter-spacing: 0.72px;
	margin: 0;
}

.voucher-code-panel{
	padding: 24px;
}

/* === DELETE CONFIRMATION POPUP === */

.modal-dialog:has(.delete-popup-title) {
	margin-left: 45rem;
}

.modal-content:has(.delete-popup-title) {
	border-radius: 16px;
	width: 608px !important;
	height: 194px !important;
	padding: 24px;
	border: none;
}


.delete-popup-title {
	color: var(--grey-black);
	font-size: 24px;
	font-weight: var(--fw-bold);
	line-height: 28.8px;
	letter-spacing: 0.72px;
	word-wrap: break-word;
	margin-bottom: 16px;
}

.delete-popup-text {
	color: var(--gray-black);
	font-family: var(--font-segoe);
	font-size: 16px;
	font-weight: var(--fw-regular); 
	line-height: 22.4px;
	word-wrap: break-word;
}

.delete-popup-button-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-top: 24px;
	gap: 16px;
}


.btn-delete-cancel {
	display: inline-flex;
	padding: 16px 20px;
	justify-content: center;
	align-items: center;
	background: var(--grey-white);
	border-radius: 999px;
	border: 1px solid var(--grey-g400);
	color: var(--grey-black);
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.btn-delete-cancel:hover {
	background-color: var(--grey-g200);
	border-color: var(--grey-black);
}

.btn-delete-confirm {
	display: inline-flex;
	padding: 16px 20px;
	justify-content: center;
	align-items: center;
	background: var(--btn-primary);
	border-radius: 999px;
	border: none;
	color: var(--grey-white);
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.btn-delete-confirm:hover {
	background: var(--btn-primary-active);
}

/* === REMAKE CONFIRMATION MODAL === */


.modal-content:has(.remake-confirm-modal) {
	border-radius: 16px !important; 
	padding: 24px;
	border: none;
}

.remake-confirm-modal {
	background: var(--grey-white);
	margin: 0 auto;
}

.remake-confirm-content {
	padding: 0px 0px 0px 24px;
}

.remake-confirm-title {
	display: flex;
	justify-content: space-between;
	align-items: center; 
	font-size: 24px;
	font-weight: var(--fw-bold);
	line-height: 28.8px;
	letter-spacing: 0.72px;
	color: var(--grey-black);
	margin-bottom: 16px !important;
	padding-left: 0;
	padding-right: 0;
}

.remake-confirm-message {
	font-family: var(--font-segoe);
	font-size: 16px;
	font-weight: var(--fw-regular);
	line-height: 22.4px;
	color: var(--gray-black);
	margin-bottom: 24px !important;
	padding-left: 0;
	padding-right: 0;
}

.remake-confirm-actions {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-left: 0;
	padding-right: 0;
}

.btn-remake-cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 20px !important;
	border-radius: 999px !important;
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	background-color: var(--grey-white);
	border: 1px solid var(--grey-g400) !important;
	color: var(--grey-black) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.btn-remake-cancel:hover {
	background-color: var(--grey-g200);
	border-color: var(--grey-black) !important;
}

.btn-remake-confirm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 20px !important;
	border-radius: 999px !important;
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	background-color: var(--btn-primary) !important;
	border: none !important;
	color: var(--grey-white) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.btn-remake-confirm:hover {
	background-color: var(--btn-primary-active) !important;
}

/* === REQUEST LOCATION MODAL === */

.modal-content:has(.request-location-modal) {
	border-radius: 16px !important;
	padding: 0 !important;
	border: none;
	overflow: hidden;
}

.request-location-modal {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	background: var(--grey-white);
}

.request-location-header {
	align-self: stretch;
	padding: 16px 24px 24px 24px;
	background: var(--grey-white);
	border-bottom: 1px solid var(--grey-g200);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.request-location-title-wrap {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.request-location-title {
	color: var(--grey-black);
	font-size: 24px;
	font-weight: var(--fw-bold);
	line-height: 28.80px;
	letter-spacing: 0.72px;
	word-wrap: break-word;
	margin: 0;
}

.request-location-close-wrap {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0;
}

.request-location-modal .btn-round-close {
	border-radius: 50%;
	border: 1px solid var(--grey-g200) !important;
	width: 36px;
	height: 36px;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--grey-white);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.request-location-modal .btn-round-close:hover {
	background-color: var(--grey-g200) !important;
	border-color: var(--grey-black) !important;
}

.request-location-modal .icon-24 {
	width: 24px;
	height: 24px;
}

.request-location-body {
	align-self: stretch;
	padding: 16px 24px;
	background: var(--grey-white);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 16px;
}

.request-location-text {
	align-self: stretch;
	color: var(--grey-black);
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: 21px;
	letter-spacing: 0.49px;
	word-wrap: break-word;
	margin: 0;
}

.request-location-footer {
	align-self: stretch;
	padding: 16px 24px;
	background: var(--grey-white);
	border-top: 1px solid var(--grey-g200);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 24px;
}

.request-location-actions {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 8px;
}

.request-location-modal .btn-req-cancel,
.request-location-modal .btn-req-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 20px !important;
	border-radius: 999px !important;
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	height: auto;
	box-shadow: none !important;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.request-location-modal .btn-req-cancel {
	background-color: var(--grey-white);
	border: 1px solid var(--grey-g400) !important;
	color: var(--grey-black) !important;
}

.request-location-modal .btn-req-cancel:hover {
	background-color: var(--grey-g200);
	border-color: var(--grey-black) !important;
}

.request-location-modal .btn-req-submit {
	background-color: var(--btn-primary) !important;
	border: none !important;
	color: var(--grey-white) !important;
}

.request-location-modal .btn-req-submit:hover {
	background-color: var(--btn-primary-active) !important;
}

/* === ADD PRODUCT / ADD CLIENT ON PRODUCTS === */

/* 1. Modal / Container Overrides */
.modal-content:has(.add-custom-product) {
	padding: 0px 24px 0px 24px !important;
}

.modal-body:has(.add-custom-product) .panel-footer {
	padding: 24px 0 !important;
}

.add-custom-product .side-panel-figma {
	display: flex !important;
	flex-direction: column !important;
	background: var(--grey-white) !important;
	height: calc(90vh - 40px) !important;
	font-family: var(--font-main) !important;
}

/* 2. Layout Structure */
.add-custom-product .panel-header {
	flex-shrink: 0 !important;
	padding: 24px 0px !important;
	border-bottom: 1px solid var(--grey-g200) !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	background: var(--grey-white) !important;
}

.add-custom-product .panel-body {
	flex-grow: 1 !important;
	overflow-y: auto !important;
	padding: 0 !important;
}

.add-custom-product .panel-footer {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 16px !important;
	background: var(--grey-white) !important;
	border-top: 1px solid var(--grey-g200) !important;
	flex-shrink: 0 !important;
}

.add-custom-product .flex-row-custom {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

.add-custom-product .input-wrapper-half {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* 3. Typography & Icons */
.add-custom-product .panel-title-text {
	color: var(--grey-black);
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: 24px;
	font-style: normal;
	font-weight: var(--fw-bold);
	line-height: 120%;
	letter-spacing: 0.72px;
}

.add-custom-product .client-title-row {
	margin-bottom: 12px;
	color: var(--grey-black);
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	word-wrap: break-word;
}

.add-custom-product .icon-24 {
	width: 24px;
	height: 24px;
}

.add-custom-product .icon-white {
	filter: brightness(0) invert(1);
}

.add-custom-product .icon-black {
	filter: brightness(0);
}

/* 4. Inputs & Forms */
.add-custom-product .custom-input {
	width: 100%;
	padding: 12px 12px 12px 16px;
	border: 1px solid var(--grey-g400);
	border-radius: 12px;
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s ease-in-out;
	height: 48px;
	background: var(--grey-white);
	font-weight: var(--fw-medium, 500);
	letter-spacing: 0.42px;
}

.add-custom-product .custom-input::placeholder {
	color: var(--grey-g500);
}

.add-custom-product .custom-input:focus {
	border-color: var(--blue-input);
}

.add-custom-product .custom-input.has-error {
	border-color: var(--clr-pink-45) !important;
}

/* 5. Alerts / Info Boxes */
.add-custom-product .info-alert-box {
	padding: 24px;
	background: var(--blue-primary-alpha-05);
	border-radius: 16px;
	outline: 1px solid var(--blue-primary);
	outline-offset: -1px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 24px 0px;
}

.add-custom-product .info-alert-icon-wrap {
	width: 24px;
	height: 24px;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

.add-custom-product .info-alert-content {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.add-custom-product .info-alert-title {
	color: var(--grey-black);
	font-size: 17px;
	font-weight: var(--fw-bold);
	line-height: 20.40px;
	letter-spacing: 0.51px;
	word-wrap: break-word;
}

.add-custom-product .info-alert-desc {
	color: var(--grey-black);
	font-size: 16px;
	font-weight: var(--fw-medium, 500);
	line-height: 24px;
	letter-spacing: 0.48px;
	word-wrap: break-word;
}

/* 6. Buttons */
.add-custom-product .btn-round-close {
	border-radius: 50%;
	border: 1px solid var(--grey-g400, rgba(52,58,64,0.38));
	width: 36px;
	height: 36px;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--grey-white);
	cursor: pointer;
	transition: all 0.3s ease;
}

.add-custom-product .btn-round-close:hover {
	background: var(--grey-g200);
}

.add-custom-product .btn-back-arrow {
	display: flex;
	padding: 6px;
	justify-content: center;
	align-items: center;
	border-radius: 999px;
	border: 1px solid var(--grey-g200);
	background: var(--grey-white);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.add-custom-product .btn-back-arrow:hover {
	background: var(--grey-g200);
}

.add-custom-product .btn-panel-secondary,
.add-custom-product .btn-panel-primary {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 14px 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.add-custom-product .btn-panel-secondary {
	background: var(--grey-white);
	border: 1px solid var(--grey-g400);
	color: var(--grey-black);
}

.add-custom-product .btn-panel-secondary:hover {
	background: var(--grey-g200);
	border-color: var(--grey-black);
}

.add-custom-product .btn-panel-primary {
	background: var(--btn-primary);
	border: none;
	color: var(--grey-white);
}

.add-custom-product .btn-panel-primary:hover {
	background: var(--btn-primary-active);
}

.add-custom-product .section-row {
	padding: 24px !important;
	display: flex !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.add-custom-product .section-row.flex-column {
	flex-direction: column !important;
	gap: 24px !important;
}

.add-custom-product .no-top-padding {
	padding-top: 0 !important;
}

.add-custom-product .client .border-bottom {
	border-bottom: 1px solid var(--grey-g200) !important;
}

.add-custom-product .btn-round-icon {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	border: 1px solid var(--grey-g200) !important;
	background: var(--grey-white) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
}

.add-custom-product .selector-container-selected-product {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	background-color: var(--grey-white);
}

/* === EMPLOYEE DETAILS MODAL === */

/* 1. Global Modal & Dialog  */
.modal-dialog.modal-lg:has(.employee-details-wrapper) {
	max-width: 620px !important;
}

.modal-content:has(.employee-details-wrapper) {
	border: none;
	padding: 0.3rem;
	border-radius: 15px;
}

.modal-content:has(.employee-details-wrapper) .modal-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 24px !important;
	background: var(--grey-white) !important;
	border-bottom: 1px solid var(--grey-g200) !important;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	font-weight: var(--fw-bold);
	font-size: 24px;
	line-height: 28.8px;
	letter-spacing: 0.72px;
	color: var(--grey-black);
}

.modal-content:has(.employee-details-wrapper) .modal-header .close {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	outline: 1px solid var(--grey-g200) !important;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.modal-content:has(.employee-details-wrapper) .modal-header .close-btn {
	width: 40px !important;
	height: 40px !important;
	padding: 6px !important;
	background: var(--grey-white) !important;
	border-radius: 999px !important;
	outline: 1px solid var(--grey-g200) !important;
	outline-offset: -1px;
	border: none !important;
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 2px !important;
	cursor: pointer;
	overflow: hidden !important;
}

.modal-content:has(.employee-details-wrapper) .modal-header .close-btn i,
.modal-content:has(.employee-details-wrapper) .modal-header .close-btn svg {
	width: 24px !important;
	height: 24px !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	color: var(--grey-black) !important;
}

/* 2. Main Container & Layout */
.employee-details-wrapper .employee-details-container {
	background-color: transparent;
	padding: 24px 24px 0px 24px;
}

.employee-details-wrapper .detail-section {
	margin-bottom: 24px;
}

.employee-details-wrapper .footer-actions {
	margin-top: 0 !important;
	padding: 24px !important;
	border-top: 1px solid var(--grey-g200);
	align-items: center;
}

/* 3. Typography */
.employee-details-wrapper .detail-label {
	color: var(--gray-black, black);
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	word-wrap: break-word;
	margin-bottom: 12px;
}

/* 4. Inputs & Dropdowns */
.employee-details-wrapper .employee-input {
	width: 100%;
	height: 100%;
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
	padding: 12px 12px 12px 16px;
	border-radius: 12px;
	overflow: hidden;
	box-sizing: border-box;
	cursor: text;
	color: var(--grey-black);
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: 24px;
	letter-spacing: 0.42px;
	word-wrap: break-word;
	background: var(--grey-white) !important;
	border: 1px solid var(--grey-g300, #E0E0E1);
}

.employee-details-wrapper .employee-select {
	text-indent: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('dropdown-arrow.svg');
	background-repeat: no-repeat;
	background-position: right 20px center;
	border: none;
	outline: 1px solid var(--grey-g300, #E0E0E1);
	padding: 10px;
}

.employee-details-wrapper .form-control.form-control-sm > div.ss-single-selected {
	border: none !important;
}

.employee-details-wrapper .ss-main .ss-single-selected .ss-deselect {
	position: absolute;
	right: 2.75em !important;
	top: 22% !important;
	bottom: 20%;
	height: 60%;
	background-color: var(--grey-white);
	margin: 0;
	padding: .25em;
}

.employee-details-wrapper .ss-main .ss-single-selected .placeholder .ss-disabled {
	color: var(--grey-g600);
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: 14px;
	font-style: normal;
	font-weight: var(--fw-medium);
	line-height: 24px;
	letter-spacing: 0.42px;
}

/* 5. Buttons */
.employee-details-wrapper .btn-close-details {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: auto;
	padding: 16px 20px;
	background-color: var(--grey-white);
	border-radius: 999px;
	outline: 1px solid var(--grey-g400);
	outline-offset: -1px;
	color: var(--grey-black);
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	text-align: center;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.employee-details-wrapper .btn-close-details:hover {
	background: var(--grey-g200);
	outline: 1px solid var(--grey-black) !important;
}

.employee-details-wrapper .btn-save-details {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: auto;
	padding: 16px 20px;
	background-color: var(--btn-primary);
	border-radius: 999px;
	border: none;
	outline: none;
	color: var(--grey-white);
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	margin-left: 16px;
}

.employee-details-wrapper .btn-save-details:hover {
	background-color: var(--btn-primary-active) !important;
}

/* 6. Status Pills */
.employee-details-wrapper .badge-pill-blue {
	height: 100%;
	padding: 4px 8px 6px 8px;
	background: var(--blue-primary);
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	display: inline-flex;
}

.employee-details-wrapper .badge-pill-text {
	justify-content: center;
	display: flex;
	flex-direction: column;
	color: var(--grey-white);
	font-size: 14px;
	font-family: var(--font-segoe);
	font-weight: var(--fw-bold);
	line-height: 16px;
	word-wrap: break-word;
}

/* === SEARCH PRODUCTS MODAL (STRICTLY SCOPED) === */

/* 1. Global Modal Overrides (Safely Sandboxed) */
.modal-content:has(.search-products-wrapper) {
	border-radius: 15px;
	border: none;
}

.modal-content:has(.search-products-wrapper) .modal-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 24px !important;
	background: var(--grey-white) !important;
	border-bottom: 1px solid var(--grey-g200) !important;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	font-weight: var(--fw-bold);
	font-size: 24px;
	line-height: 28.8px;
	letter-spacing: 0.72px;
	color: var(--grey-black);
}

.modal-content:has(.search-products-wrapper) .modal-header .close,
.modal-content:has(.search-products-wrapper) .modal-header .close-btn {
	width: 40px !important;
	height: 40px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 999px !important;
	outline: 1px solid var(--grey-g200) !important;
	background: transparent;
	border: none !important;
	padding: 0 !important;
	margin: 0;
	cursor: pointer;
}

.modal-content:has(.search-products-wrapper) .modal-header .close-btn i,
.modal-content:has(.search-products-wrapper) .modal-header .close-btn svg {
	width: 24px !important;
	height: 24px !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	color: var(--grey-black) !important;
}

/* 2. Layout & Typography */
.search-products-wrapper .scroll-box-custom {
	display: flex !important;
	flex-direction: column !important;
	padding: 24px;
	padding-bottom: 0px !important;
}

.search-products-wrapper .row-section {
	margin-bottom: 24px;
}

.search-products-wrapper .universal-title {
	font-size: 20px;
	font-weight: var(--fw-bold);
	line-height: 24px;
	letter-spacing: 0.60px;
	word-wrap: break-word;
	color: var(--grey-black);
	margin-bottom: 16px;
}

/* 3. Inputs & Selects */
.search-products-wrapper .search-combo-box {
	gap: 16px;
	height: 50px;
	background: var(--grey-white);
	border: 1px solid var(--grey-g400) !important;
	border-radius: 12px;
	padding: 12px 10px;
	width: 100%;
	color: var(--grey-black);
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0.42px;
}

.search-products-wrapper .select-product-input .ss-single-selected .placeholder {
	overflow: unset !important;
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: 24px;
	letter-spacing: 0.42px;
	word-wrap: break-word;
	color: var(--grey-black);
}

.search-products-wrapper .select-product-input .ss-main .ss-single-selected {
	border: none !important;
}

/* 4. Footer & Buttons */
.search-products-wrapper .footer-actions {
	margin-top: 0 !important;
	padding: 24px 0 !important;
	border-top: 1px solid var(--grey-g200);
	display: flex !important;
	justify-content: flex-end !important;
	gap: 16px !important;
}

.search-products-wrapper .btn-search-secondary,
.search-products-wrapper .btn-search-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 20px !important;
	border-radius: 999px !important;
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.search-products-wrapper .btn-search-secondary {
	background: var(--grey-white) !important;
	border: 1px solid var(--grey-g400) !important;
	color: var(--grey-black) !important;
}

.search-products-wrapper .btn-search-secondary:hover {
	background: var(--grey-g100) !important;
	border-color: var(--grey-black) !important;
}

.search-products-wrapper .btn-search-primary {
	background: var(--btn-primary) !important;
	border: none !important;
	color: var(--grey-white) !important;
}

.search-products-wrapper .btn-search-primary:hover {
	background: var(--btn-primary-active) !important;
}

.search-products-wrapper .icon-white {
	filter: brightness(0) invert(1);
}

/* ======================================== IMPORT ORDERS ================================= */

.modal-lg:has(.import-orders) {
	max-width: 608px !important;
}

.modal-content:has(.import-orders) {
	border-radius: 15px;
	border: none;
}

:has(.import-orders) > .modal-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 24px !important;
	background: var(--grey-white) !important;
	border-bottom: 1px solid var(--grey-g200) !important;
	font-weight: var(--fw-bold);
	font-size: 24px;
	line-height: 28.8px;
	letter-spacing: 0.72px;
	color: var(--grey-black);
}

.import-orders.scroll-box-custom {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	padding: 24px !important;
	background: var(--grey-white);
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.import-orders .row-section {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.import-orders .info-label {
	font-size: 14px;
	color: var(--grey-black);
	font-weight: var(--fw-medium);
	margin-bottom: 16px;
	display: block;
	line-height: 21px;
	letter-spacing: 0.49px;
}

.import-orders .steps-container {
	display: flex;
	flex-direction: column;
	gap: 0px !important;
	margin-bottom: 16px;
}

.import-orders .info-label-step {
	font-size: 14px;
	color: var(--grey-black);
	font-weight: var(--fw-medium);
	line-height: 21px;
	letter-spacing: 0.49px;
	margin-left: 10px !important;
	margin-bottom: 2px;
}

.import-orders .download-container {
	margin-top: 8px;
}

.import-orders .btn-download {
	color: var(--blue-primary) !important;
	font-size: 14px;
	font-weight: var(--fw-bold);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	letter-spacing: 0.49px;
}

.import-orders .btn-download i {
	font-size: 16px;
}

.import-orders .section-title {
	width: 100% !important;
	font-size: 14px !important;
	font-weight: var(--fw-bold) !important;
	color: var(--gray-black) !important;
	margin-bottom: 12px !important;
	letter-spacing: 0.42px;
}

.import-orders .uploadImport {
	padding: 12px 12px 12px 16px;
	gap: 16px;
	height: 48px;
	background: var(--grey-white);
	border: 1px solid var(--grey-g400);
	border-radius: 25px;
	width: 560px;
}

.import-orders .custom-file-label {
	font-style: normal;
	font-weight: var(--fw-bold);
	font-size: 14px;
	letter-spacing: 0.03em;
	color: var(--grey-black);
	border-radius: 25px;
	padding-left: 20px;
}

.import-orders .custom-file-label::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: block;
	height: auto;
	padding: .375rem .75rem !important;
	line-height: 37px;
	color: var(--grey-black);
	content: "Upload file";
	background-color: var(--grey-white);
	border-radius: 0 .25rem .25rem 0;
}

.import-orders .custom-file-sm .custom-file-label {
	height: calc(2.713rem + 2px);
	padding: .25rem .5rem;
	border-bottom: none;
	border-top: none;
	border-right: none;
	line-height: 37px;
}

.import-orders .custom-file-sm .custom-file-label::after {
	height: 2.813rem;
	padding: .25rem .5rem;
}

.import-orders .custom-upload-group {
	display: flex;
	align-items: center;
	width: 100%;
	border: 1px solid var(--grey-g400);
	border-radius: 999px;
	overflow: hidden;
	height: 48px;
	background: var(--grey-white);
}

.import-orders .file-placeholder {
	flex: 1;
	padding-left: 16px;
	color: var(--grey-g600);
	font-size: 14px;
	font-weight: var(--fw-medium);
}

.import-orders .btn-file-upload {
	background: var(--grey-white);
	border: none;
	border-left: 1px solid var(--grey-g400);
	padding: 0 20px;
	height: 100%;
	font-weight: var(--fw-bold);
	font-size: 14px;
	color: var(--grey-black);
	cursor: pointer;
	transition: background 0.2s;
}

.import-orders .btn-file-upload:hover {
	background: var(--grey-g100);
}

.import-orders .footer-actions {
	margin-top: 0 !important;
	padding: 24px 0 0 0 !important;
	border-top: 1px solid var(--grey-g200);
	display: flex !important;
	justify-content: flex-end !important;
	gap: 16px !important;
}

.import-orders .btn-export-secondary {
	padding: 16px 20px;
	border-radius: 999px;
	border: 1px solid var(--grey-g400);
	background: var(--grey-white);
	font-weight: var(--fw-bold);
	font-size: 14px;
	color: var(--grey-black);
	cursor: pointer;
	line-height: 16px;
	letter-spacing: 0.42px;
	height: 48px;
	transition: all 0.3s ease-in-out;
}

.import-orders .btn-export-secondary:hover {
	background: var(--grey-g200); 
	border: 1px solid var(--grey-black) !important;
}

.import-orders .btn-export-primary {
	padding: 16px 20px;
	border-radius: 999px;
	border: none;
	background: var(--btn-primary) !important;
	font-weight: var(--fw-bold);
	font-size: 14px;
	color: var(--grey-white) !important;
	cursor: pointer;
	line-height: 16px;
	height: 48px;
	transition: all 0.3s ease-in-out;
}

.import-orders .btn-export-primary:hover {
	background-color: var(--btn-primary-active) !important;
}


/* ==================================== EXPORT ORDERS =============================== */

.export-orders.scroll-box-custom {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	padding-bottom: 0 !important;
	padding: 24px;
}

.export-orders .section-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--grey-black);
	margin-bottom: 8px !important;
	width: 100% !important;
}

.export-orders .info-label {
	font-size: 14px;
	color: var(--grey-black);
	font-weight: 500;
	margin-bottom: 8px;
	display: block;
	line-height: 18.20px;
	letter-spacing: 0.49px;
}

.export-orders .input-custom {
	width: 100%;
	padding: 8px 8px;
	border-radius: 12px;
	border: 1px solid var(--grey-g400);
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0.42px;
	color: var(--grey-black);
	background: var(--grey-white);
}

.export-orders .ss-main .ss-single-selected {
	border: none !important;
}

.export-orders .input-group-custom {
	display: flex;
	gap: 12px;
	width: 100%;
}

.export-orders .footer-actions {
	margin-top: 0 !important;
	padding: 24px 0 24px 0 !important;
	border-top: 1px solid var(--grey-g200);
	display: flex !important;
	justify-content: flex-end !important;
	gap: 16px !important;
}

.export-orders .btn-export-secondary {
	padding: 16px 24px;
	border-radius: 999px;
	border: 1px solid var(--grey-g400);
	background: var(--grey-white);
	font-weight: 600;
	font-size: 14px;
	color: var(--grey-black);
	transition: all 0.3s ease-in-out;
}

.export-orders .btn-export-secondary:hover {
	background: var(--grey-g200);
	border: 1px solid var(--grey-black) !important;
}

.export-orders .btn-export-primary {
	padding: 16px 24px;
	border-radius: 999px;
	border: none;
	background: var(--btn-primary) !important;
	font-weight: 600;
	font-size: 14px;
	color: var(--grey-white);
	transition: all 0.3s ease-in-out;
}

.export-orders .btn-export-primary:hover {
	background-color: var(--btn-primary-active) !important;
}

.export-orders .radio-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}

.modal-lg:has(.export-orders) {
	max-width: 608px !important;
}

.export-orders .label.radio-inline {
	display: inline-block;
	margin-bottom: 12px !important;
}

.modal-content:has(.export-orders) {
	border-radius: 15px;
	border: none;
}

:has(.export-orders) > .modal-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 24px !important;
	background: var(--grey-white) !important;
	border-bottom: 1px solid var(--grey-g200) !important;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	font-weight: 600;
	font-size: 24px;
	line-height: 28.8px;
	letter-spacing: 0.72px;
	color: var(--grey-black);
}


.export-orders .modal-header .close-btn i,
.export-orders .modal-header .close-btn svg {
	width: 24px !important;
	height: 24px !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	color: var(--grey-black) !important;
}

.export-orders .row-section {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.export-orders hr {
	margin-top: 0 !important;
	margin-bottom: 24px !important;
	border: 0;
	border-top: 1px solid var(--grey-g200);
}

.export-orders label.radio-inline {
	display: inline-flex !important;
	align-items: center !important;
	margin-right: 24px !important;
	margin-bottom: 0 !important;
	vertical-align: middle !important;
	color: var(--grey-g600);
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: var(--font-main);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.42px;
}

.export-orders label.radio-inline input[type="radio"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	border: 1px solid var(--grey-g400) !important;
	border-radius: 50% !important;
	background: var(--grey-white) !important;
	margin: 0 8px 0 0 !important;
	position: relative !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	outline: none !important;
	transition: all 0.3s ease-in-out;
}

.export-orders label.radio-inline:last-of-type {
	margin-right: 24px !important;
}

.export-orders label.radio-inline input[type="radio"]:hover {
	background-color: var(--grey-g200) !important;
	border: 1px solid var(--grey-black) !important;
}

.export-orders label.radio-inline input[type="radio"]:checked {
	background-color: var(--blue-primary) !important;
	border-color: var(--blue-primary) !important;
}

.export-orders label.radio-inline input[type="radio"]:checked:hover {
	background-color: var(--blue-primary-hov) !important;
	border-color: var(--blue-primary-hov) !important;
}

.export-orders label.radio-inline:has(input:checked) {
	color: var(--grey-black) !important;
}

.export-orders label.radio-inline input[type="radio"]:checked::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 9px !important;
	height: 5px !important;
	border-left: 2px solid var(--grey-white) !important;
	border-bottom: 2px solid var(--grey-white) !important;
	transform: translate(-50%, -65%) rotate(-45deg) !important;
	display: block !important;
}

.export-orders .ss-content .ss-list .ss-option {
	padding: 8px 16px;
	cursor: pointer;
	user-select: none;
	font-weight: 400;
	line-height: 16px;
	font-family: var(--font-segoe);
	font-size: 14px;
}

.export-orders .ss-main .ss-single-selected .placeholder,
.export-orders .ss-main .ss-single-selected .placeholder * {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
	font-family: var(--font-main);
	line-height: 24px;
	letter-spacing: 0.42px;
	word-wrap: break-word;
}

.export-orders .input-custom,
.export-orders .input-custom .ss-single-selected {
	transition: all 0.3s ease-in-out !important;
}

.export-orders .input-custom:hover {
	background-color: var(--grey-g200) !important;
	border-color: var(--grey-black) !important;
}

.export-orders .input-custom .ss-single-selected,
.export-orders .input-custom:hover .ss-single-selected {
	background-color: transparent !important;
}

.export-orders .input-custom:has(.ss-open-below),
.export-orders .input-custom:has(.ss-open-above),
.export-orders .input-custom:has(.ss-open) {
	border-color: var(--grey-black) !important;
	box-shadow: unset !important;
}

/* ========================================= PRICE CALCULATOR ============================================= */

.modal-dialog:has(.price-calculator-container) {
	margin-right: 10px;
}

.modal-content:has(.price-calculator-container) {
	padding: 0px 24px 0px 24px;
	border-radius: 15px;
	max-height: 93vh;
}

.price-calculator-container .custom-input {
	width: 100%;
	padding: 12px 12px 12px 16px;
	border: 1px solid var(--grey-g400);
	border-radius: 12px;
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s;
	gap: 16px;
	height: 48px;
	background: var(--grey-white);
	font-weight: 500;
	letter-spacing: 0.42px;
}

.price-calculator-container .custom-input::placeholder {
	color: var(--grey-g500);
}

.price-calculator-container .custom-input:focus {
	border-color: var(--blue-input);
}

.price-calculator-container .custom-prices-labels {
	color: var(--grey-black);
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
	letter-spacing: 0.48px;
}

.price-calculator-container .custom-prices {
	color: var(--brand-grey);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: 0.48px;
}

.price-calculator-container .custom-prices-total {
	color: var(--grey-black);
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
	letter-spacing: 0.72px;
}

.price-calculator-container {
	height: calc(83vh - 55px);
	overflow-y: auto;
	overflow-x: hidden;
}

.modal-content:has(.price-calculator-container) .modal-header {
	border-bottom: 1px solid var(--grey-e0) !important;
}

.price-calculator-container .mt-40 {
	margin-top: 40px !important;
}

.price-calculator-container .selector-title.mb-10 {
	margin-bottom: 10px !important;
}

.price-calculator-container .selector-section.mt-40 {
	margin: 40px 0 0 0 !important;
}

.price-calculator-container .alert-box {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 16px;
	outline-offset: -1px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 16px;
	display: inline-flex;
}

.price-calculator-container .alert-success {
	padding: 16px 24px;
	background: rgba(0, 170.30, 100.46, 0.05);
	outline: 1px #00995A solid;
}

.price-calculator-container .alert-info {
	padding: 24px;
	background: var(--blue-primary-alpha-05);
	outline: 1px var(--blue-primary) solid;
}

.price-calculator-container .alert-content-wrapper {
	align-self: stretch;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 16px;
	display: inline-flex;
}

.price-calculator-container .alert-icon {
	width: 24px;
	height: 24px;
	position: relative;
	overflow: hidden;
}

.price-calculator-container .alert-text-wrapper {
	flex: 1 1 0;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 4px;
	display: inline-flex;
}

.price-calculator-container .alert-title {
	align-self: stretch;
	color: var(--grey-black);
	font-size: 17px;
	font-weight: var(--fw-bold);
	line-height: 20.40px;
	letter-spacing: 0.51px;
	word-wrap: break-word;
}

.price-calculator-container .alert-text {
	align-self: stretch;
	color: var(--grey-black);
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 24px;
	letter-spacing: 0.48px;
	word-wrap: break-word;
}

.price-calculator-container .price-row-first {
	margin-bottom: 12px;
	margin-top: 40px;
}

.price-calculator-container .price-row-standard {
	margin-bottom: 12px;
}

.price-calculator-container .price-row-total {
	margin-bottom: 24px;
}

.price-calculator-container .actions-grid {
	gap: 16px;
	display: grid;
	margin-top: 24px;
}

.price-calculator-container .btn-calc-primary {
	display: flex;
	padding: 16px 20px;
	justify-content: center;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	background: var(--btn-primary);
}

.price-calculator-container .btn-calc-primary:hover {
	background: var(--btn-primary-hov);
}

.price-calculator-container .btn-calc-primary span {
	color: #FFF;
	text-align: center;
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: 14px;
	font-style: normal;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
}

.price-calculator-container .btn-calc-primary .btn-icon-white {
	filter: brightness(0) invert(1);
}

.price-calculator-container .btn-calc-secondary {
	display: flex;
	padding: 16px 20px;
	justify-content: center;
	align-items: center;
	gap: 6px;
	align-self: stretch;
	border-radius: 999px;
	border: 1px solid var(--grey-g400); 
	background: #FFF;
	margin-bottom: 40px;
}

.price-calculator-container .btn-calc-secondary:hover{
	background: var(--grey-g200);
  border: 1px solid var(--grey-black) !important;
}

.price-calculator-container .btn-calc-secondary span {
	color: var(--grey-black);
	text-align: center;
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: 14px;
	font-style: normal;
	font-weight: var(--fw-bold);
	line-height: 16px;
	letter-spacing: 0.42px;
}

/* ========================================= ADD PRODUCT ============================================= */

.add-product {
	font-family: var(--font-main);
	color: var(--grey-black);
}

.modal-content:has(.add-product) {
	border-radius: 16px;
	border: none;
	padding: 24px !important;
}

.modal-body:has(.add-product) {
	max-height: calc(90vh - 140px);
	overflow-y: auto;
	overflow-x: visible;
}

.add-product .side-panel-figma {
	display: flex !important;
	flex-direction: column !important;
	background: var(--grey-white) !important;
}

.add-product .panel-header {
	flex-shrink: 0 !important;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--grey-g200) !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	background: var(--grey-white) !important;
}

.add-product .panel-title-text {
	font-weight: 600;
	font-size: 24px;
	line-height: 120%;
	letter-spacing: 0.72px;
}

.add-product .panel-body {
	padding: 0 !important;
	overflow: visible !important;
}

.add-product .panel-footer {
	flex-shrink: 0 !important;
	padding-top: 24px;
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 16px !important;
	background: var(--grey-white) !important;
	border-top: 1px solid var(--grey-g200) !important;
}

.add-product .icon-24 {
	width: 24px;
	height: 24px;
}

.add-product .icon-16 {
	width: 16px;
	height: 16px;
}

.add-product .btn-round-close,
.add-product .btn-round-back {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--grey-white);
	border: 1px solid var(--grey-g200);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

.add-product .header-title-col-custom {
	display: flex;
	align-items: center;
	gap: 12px;
}

.add-product .row-section {
	padding: 24px 0;
}

.add-product .universal-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.60px;
	margin: 0 0 12px 0;
}

.add-product .btn-figma-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 20px !important;
	border-radius: 999px !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.42px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	background: var(--grey-white) !important;
	border: 1px solid var(--grey-g400) !important;
	color: var(--grey-black) !important;
}

.add-product .btn-figma-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 20px !important;
	border-radius: 999px !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.42px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	background: var(--btn-primary) !important;
	border: none !important;
	color: var(--grey-white) !important;
}

.add-product .btn-figma-secondary:hover {
	background: var(--grey-g200) !important;
	border-color: var(--grey-black) !important;
}

.add-product .btn-figma-secondary--with-icon img,
.add-product .btn-figma-primary--with-icon img {
	flex: 0 0 auto;
}

.add-product .product-card-body {
	padding: 24px;
	gap: 24px;
	border-top: 1px solid var(--grey-g200);
}

.add-product .product-card-image {
	width: 128px;
	height: 128px;
	background-color: var(--grey-g100);
	object-fit: cover;
	border-radius: 12px;
}

.add-product .product-card-title {
	font-weight: 600;
	font-size: 20px;
	color: var(--grey-black);
	line-height: 24px;
	letter-spacing: 0.6px;
}

.add-product .qty-selector-group {
	gap: 8px;
}

.add-product .btn-qty {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--grey-white);
	border: 1px solid var(--grey-g200);
}

.add-product .btn-qty i {
	font-size: 12px;
	color: var(--grey-black);
}

.add-product .qty-display {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	border: 1px solid var(--grey-g400);
	background: var(--grey-white);
	text-align: center;
}

.add-product .select-universal-product-input {
	width: 100%;
}

.add-product .select-universal-product-input select.combobox-figma {
	height: 48px;
}

.add-product .select-universal-product-input .ss-main {
	width: 100% !important;
}

.add-product .select-universal-product-input .ss-single-selected {
	height: 48px !important;
	min-height: 48px !important;
	border: 1px solid var(--grey-g400) !important;
	border-radius: 12px !important;
	background: var(--grey-white) !important;
	display: flex !important;
	align-items: center !important;
	padding: 12px 44px 12px 12px !important;
	box-sizing: border-box !important;
}

.add-product .select-universal-product-input .ss-single-selected .placeholder {
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.42px;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.add-product .select-universal-product-input .ss-deselect,
.add-product .select-universal-product-input .ss-arrow {
	flex: 0 0 auto !important;
}

.add-product .select-universal-product-input .ss-deselect i,
.add-product .select-universal-product-input .ss-deselect svg {
	color: var(--grey-black) !important;
	opacity: 0.7;
}

.add-product .select-universal-product-input .ss-content {
	position: fixed !important;
	z-index: 9999 !important;
	border-radius: 8px;
}

.add-product .select-universal-product-input .ss-content .ss-list .ss-option {
	color: var(--grey-black);
}

.add-product .select-universal-product-input .ss-content .ss-list .ss-option:hover,
.add-product .select-universal-product-input .ss-content .ss-list .ss-option.ss-highlighted {
	color: var(--grey-black);
	background-color: var(--grey-bg);
}

.add-product .select-universal-product-input .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
	color: var(--grey-black);
	background-color: var(--input-bg-blue);
}

.add-product .select-universal-product-input .ss-main .ss-single-selected .placeholder .ss-disabled {
	color: var(--grey-g600);
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: var(--font-main);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.42px;
}

.add-product .select-universal-product-input .placeholder {
	order: 1;
	flex: 1;
}

.add-product .select-universal-product-input .ss-deselect {
	order: 2;
}

.add-product .select-universal-product-input .ss-arrow {
	order: 3;
}