:root {
    /* Font Families */
    --font-Inter: "Inter", sans-serif;
    --font-cabin: "Cabin", sans-serif;
    --font-ipmplex: "IBM Plex Sans", sans-serif;
    --font-ipmplex-mono: "IBM Plex Mono", monospace;

    /* Font size */
    --fs-32: 2rem;
    /* 32px */
    --fs-30: 1.875rem;
    /* 30px */
    --fs-28: 1.75rem;
    /* 28px */
    --fs-26: 1.625rem;
    /* 26px */
    --fs-24: 1.5rem;
    /* 24px */
    --fs-22: 1.375rem;
    /* 22px */
    --fs-20: 1.25rem;
    /* 20px */
    --fs-18: 1.125rem;
    /* 18px */
    --fs-17: 1.0625rem;
    /* 17px */
    --fs-16: 1rem;
    /* 16px */
    --fs-15: 0.9375rem;
    /* 15px */
    --fs-14: 0.875rem;
    /* 14px */
    --fs-13: 0.8125rem;
    /* 13px */
    --fs-12: 0.75rem;
    /* 12px */
    --fs-11: 0.6875rem;
    /* 11px */
    --fs-10: 0.625rem;
    /* 10px */
    --fs-9: 0.5625rem;
    /* 9px  */
    --fs-8: 0.5rem;
    /* 8px  */

    /* Font weight */
    --fw-800: 800;
    --fw-700: 700;
    --fw-600: 600;
    --fw-500: 500;
    --fw-400: 400;
    --fw-300: 300;
    --fw-200: 200;

    /* background color */

    --top-header-height: 4.875rem;
    --top-header-nav-height: 5.6rem;
    --primary-bg-color: #F9FAFD;
    --transaction-bg-color: #080F14;
    --settlement-bg-color: linear-gradient(180deg, #09140E 2.4%, #08110C 37.98%, rgba(8, 17, 12, 0.13) 100%);
    --refund-bg-color: #080D11;
    --bg-color: #010101;
    --header-bg-color: rgba(3, 9, 13, 0.95);
    --header-bg-color: rgba(1, 1, 1, 0.95);

    /* button bg  */
    --primary-btn-bg:#FECE00;
    --disable-btn-bg: #1D4E5C;
    --button-bg-color:#FECE00;
    --kyc-bg-color: #151515;
    --kyc-btn-bg-color: #232323;

    /* form bg */
    --form-bg-color: rgb(102, 102, 102, 0.09);
    --form-stepper-bg: #0F171C;
    --inner-form-bg: #090909;

    /* table bg  */
    --table-head-bg:#F4F4F4;
    /* description bg  */
    --description-bg: #191919;

    /* kyc bg  */
    --kyc-bg-color: #151515;
    --kyc-btn-bg-color: #232323;

    /* card bg  */
    --card-bg: #0D0D0DD9;
    --card-body-bg: #212222;
    /* text color  */

    /* button  */
    --primary-btn-text: #12262E;
    --disable-btn-text: #77A1AA;
    --tab-hover-bg:#FFFEC133;

    /* text  */

    --onboard-primary-text: #DBE8ED;
    --primary-text: #FFFFFF;
    --secondary-text: #888888;
    --primary-active-text:#FECE00;

    --active-text: #ffffff;
    --inactive-text: #9C9C9C;

    --text-color: #9C9C9C;
    --text-color-user-name:#3E91DD;
    --dropdown-light-yellow: #FFFA86;

    --disabled-button-text: #77A1AA;
    --button-text-color: #12262E;

    /* table text  */

    --text-table-text: #9C9C9C;
    --table-head-text: #000;
    --pagination-disable-color: #676767;
    --table-filter-hoverblur-color: #181818;
    --dropdown-background-color: #0C0C0D;

    --headlbl-txt-color: #ACACAC;
    --headlbl-txt-color: #ACACAC;
    --headlbl-subtxt-color: #38E1E2;

    --transaction-card-icon-width: 2.625rem;
    --line-separator: #3E3E3E;
    --notassigned-color: #cccccc;
    --nested-table-headcolor: #011620;

    --paystatus-label-text: #D2D2D2;
    --upcome-settle-text: #7DAD81;

    --button-activetext-color: #161618;
    --text-payment-failed: #B3261E;

    --light-black: #505050;
    --required-color: #FF4242;
    --tab-button-text: #161618;
    --success-transaction: #61C614;
    --failed-transcation: #C61914;

    --input-username-active: #F5F5F5;
    --signin-btn-color: #12262E;
    --input-username-placeholder: #9C9C9C80;
    --sidebar-label-color: #575757;
    --sidebar-label-inactive: #9C9C9C;

    --text-disabled-under-review: #FF8A00;
    --text-verified-success: #00A65C;
    --text-verified-success-alter: #06C626;
    --text-yet-to-submit: #0D8BFF;
    --rejected-error-text: #E02C2C;

    --status-under-review: #FF8A00;
    --status-yet-to-submit: #0D8BFF;
    --status-verified: #00A65C;
    --status-rejected: #E02C2C;
    --status-bypassed: #FECE00;
    --status-not-assigned: #9CA3AF;
    --primary-button-disable:#FECE00;

    --color-white: #ffffff;
    --color-black: #000000;
    --secondary-black: #333333;
    --primary-grey: #0C0C0C;
    --secondary-grey: #191919;
    --color-black: #161618;
    --text-active-link: #18B0C2;
    --radio-text-color: #E3E3E3;


    --color-error: #FF4242;
    --color-success: #00A65C;
    --color-failed: #E02C2C;

    /* hover color */
    --dropdown-hover: #73E1E2;


    --table-row-hover: #232938;
    --table-row-hover-color: #101010;


    --sidebar-border-color: #282e3d87;
    --table-border-primarycolor: #E4E4E4;
    --table-border-secondcolor: #111A24;
    --tab-border: #282E3D;
    --form-border-color: #002C33;
    --radio-checked-border: #00A65C;
    --radio-unchecked-border: #ffffff;
    --radio-disable-border: #1D313E;
    --border-bottom-active:#FECE00;
    --data-card-border: #74E3EC;
    --default-border-color: #202020;
    --dafault-border: #363636;


    --input-placeholder-color: #555555;
    --form-stepper-bg: #0F171C;


    /* Sidebar Widths */
    --sidebar-width-collapsed: 70px;
    --sidebar-width-expanded: 256px;


    /* spacing  */

    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;

    --top-header-height: 4.875rem;

    --btn-icon-size: 1.25rem;

    --dash-log-activity: #E0E0E0;
    --dash-table-border-bottom: #2E2E33;
    
}

@media (max-width: 1300px) {
  :root {
    --sidebar-width-expanded: 220px;
  }
}


.custom_close_icon {
    position: absolute;
    background: url(/assets/images/payment/close.svg) no-repeat center center;
    background-size: contain;
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: block;
    top: 26px;
    right: 20px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.custom_close_icon:hover {
  transform: scale(1.3) rotate(8deg);
  filter: drop-shadow(0 0 4px rgb(255, 10, 10)); /* subtle red glow */
}
.custom_close_icon:active {
    opacity: 0.8;
}
.zi_popup_overlay, 
.logout-modal {
    background: #393939bf;
    backdrop-filter: blur(5px);
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    inset: 0;
    z-index: 1001;
    transition: opacity 0.3s ease;
}

.zi_popup_container {
    background-color: #fff;
    width: 100%;
    border-radius: 8px;
    padding: 24px;
    --sidebar-width-collapsed: 4.375rem;
    --sidebar-width-expanded: 15rem;
    transition: opacity 0.3s ease, transform 0.3s ease;

}

/* .custom_close_icon {
    position: absolute;
    background: url(/assets/images/payment/close.svg) no-repeat center center;
    background-size: contain;
    width: 17px;
    height: 17px;
    cursor: pointer;
    display: block;
    top: 26px;
    right: 20px;
} 

.zi_popup_overlay {
    background: #7f7f7f3d;
    backdrop-filter: blur(2px);
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    inset: 0;
    z-index: 1001;
}

.zi_popup_container {
    background-color: var(--bg-color);
    width: 100%;
    border-radius: 8px;
    padding: 24px;
    --sidebar-width-collapsed: 4.375rem;
    --sidebar-width-expanded: 15rem;
} */

#toast-container {
    position: absolute;
    z-index: 999999;
    pointer-events: none;
    /* background: #c8e9ff1a; */
    border: 0.5px solid #545454;
    backdrop-filter: blur(12px);
    padding: 3px;
    border-radius: 4px;
    margin: 20px;
    width: min-content !important;
}

#toast-container:has(.toast-success) {
    border: #28a745 !important;
    background: #255e32 !important;
    box-shadow:none !important;
}

#toast-container:has(.toast-error) {
    background: linear-gradient(to right, #bc3f3c, #515456) !important;
    box-shadow: none !important;
}

#toast-container .toast {
    width: 326px !important;
    margin: unset !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.toast-top-right {
    top: 12px;
    right: 12px;
}

#toast-container>.toast-success {
    background-image: url('/assets/images/toaster/toaster_success.svg') !important;
}

#toast-container>.toast-error {
    background-image: url('/assets/images/toaster/toaster_error.png') !important;
}

.toast-success,
.toast-error {
    background: #0F0F0F !important;
}

#toast-container>div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    padding: 15px 15px 15px 40px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 2px;
    background-position: 15px center !important;
    background-repeat: no-repeat !important;
    opacity: .8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
}

.toast-message {
    font-weight: var(--fw-400);
    font-size: var(--fs-16);
    font-family: var(--font-ipmplex);
    color: var(--primary-text)
}

.toast {
    transition: opacity 0.5s ease !important;
    opacity: 1;
}

#toast-container>div.toast {
    width: 326px !important;
    margin: unset !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

#toast-container .toaster_back_closeIcon {
    display: flex;
    align-items: center;
    top: 0px !important;
    right: 0px !important;
}

input::placeholder{
    color: var(--input-placeholder-color) !important;
}

.error-text{
    display: inline-block;
    font-size: 14px;
    color: var(--required-color);
    margin-top: 5px;
}
.custom_close_icon.zi_popup_close{
    display: block !important;
}
.input_clear {
  display: none;
}
#crudTable_custom_search:not(:placeholder-shown) ~ .custom_close_icon.input_clear {
  display: inline-block;
  width: 14px;
  height: 14px;
  top:15px;
  right: 10px;
}
input#crudTable_custom_search{
  padding-right:30px;
}
.section-area__right .form_input:not(:placeholder-shown) ~ .custom_close_icon.input_clear{
  display: inline-block;
  width: 14px;
  height: 14px;
  top:15px
}
input::placeholder {
  text-transform: capitalize;
}
.lazy-img {
  filter: blur(5px);
  transition: filter 0.3s;
}
.lazy-img:not([data-src]) {
  filter: blur(0);
}