@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

table.dataTable tbody tr {
    background-color: transparent !important;
}

:root {
    --background-color: #1F2128;
    --button-color: #066579;
    --text-color: #1E293B;
}

body {
    font-family: 'Public Sans', sans-serif !important;
    width: 100%;
    height: 100vh;
    background-color: var(--background-color);
    color: var(--text-color);
}

input:focus {
    outline: none !important;
    font-family: 'Public Sans', sans-serif !important;
}

label {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

li.nav-item a:focus {
    color: #fff !important;
}

i.bi.bi-eye {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

h5,
.forgot-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-color);
    line-height: normal;
    margin-bottom: 5px !important;
}

.btn {
    border: none !important;
    font-family: 'Public Sans', sans-serif !important;
}

p {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.authButton {
    background-color: var(--button-color) !important;
    color: #fff !important;
    border: none;
    padding: 11.5px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    touch-action: manipulation;
    line-height: 100%;
}

.registerForm {
    max-height: 800px;
    overflow-y: auto;
    padding-right: 15px !important;
}

.addressinput {
    width: 100% !important;
    resize: none !important;
    overflow: hidden;
}

.registerForm::-webkit-scrollbar-track {
    -webkit-box-shadow: inset transparent;
    background-color: transparent;
}

.registerForm::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

.registerForm::-webkit-scrollbar-thumb {
    background-color: #066579;
    border-radius: 8px;
}

.authButton:hover,
.authButton:focus {
    background-color: var(--button-color) !important;
    color: #fff !important;
}

.downloadPdfBtn {
    padding: 12px 17px !important;
    width: auto;
    display: flex !important;
    align-items: center;
    line-height: normal;
    gap: 5px;
    font-size: 14px;
    font-weight: 500 !important;
    margin-top: 0 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
}

ul.nav.nav-pills.flex-column.mb-auto.sidebarul li a svg {
    width: 20px;
    height: 20px;
}

#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

#loader-overlay.hide {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

#loader-spinner-bg {
    background: transparent;
    border-radius: 50%;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Custom Loader Spinner */
.loader_logo {
    position: relative;
    right: 0;
    left: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100vh;
    width: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

@keyframes ldio-czlpr310cd4 {
    0% {
        top: 96px;
        left: 96px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 18px;
        left: 18px;
        width: 156px;
        height: 156px;
        opacity: 0;
    }
}

.ldio-czlpr310cd4 div:nth-child(1) {
    border-color: #7830BE;
    animation-delay: 0s
}

.ldio-czlpr310cd4 div:nth-child(2) {
    border-color: #066579;
    animation-delay: -0.5s
}

/* Arc spinner to match provided design */
.loadingio-spinner-ripple-fsmgtw2hwcu {
    width: 90px;
    height: 90px;
    display: inline-block;
    overflow: hidden;
    background: none;
}

.ldio-czlpr310cd4 {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
}

.ldio-czlpr310cd4::before,
.ldio-czlpr310cd4::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #066579;
    border-right-color: #066579;
    animation: arc-rotate 1s linear infinite;
    transform-origin: 50% 50%;
}

.ldio-czlpr310cd4::after {
    inset: 12px;
    animation: arc-rotate-rev 1.25s linear infinite;
}

.ldio-czlpr310cd4 div:nth-child(1) {
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #066579;
    border-right-color: #066579;
    animation: arc-rotate 1.5s linear infinite;
    transform-origin: 50% 50%;
}

.ldio-czlpr310cd4 div:nth-child(2) {
    display: none;
}

@keyframes arc-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes arc-rotate-rev {
    to {
        transform: rotate(-360deg);
    }
}

button.multiselect.dropdown-toggle.custom-select.text-center {
    border-radius: 7px;
}

.login-container {
    background-image: url('../images/authBg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.login-form {
    background: #fff;
    max-width: 501px;
    width: 100%;
    box-shadow: 0px 4px 24px 0px #E4F1F933;
    border-radius: 20px;
    padding: 40px 30px 20px;
}

.loginHead p {
    color: #64748B;
}

.loginHead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.loginHead img {
    margin-bottom: 30px;
    width: 149px;
    height: 118px;
}

.loginTitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

form {
    width: 100%;
}

.loginForm {
    width: 100%;
    font-size: 14px;
    color: var(--text-color);
    max-width: 100%;
}

.loginForm input::placeholder {
    color: #94A3B8;
}



.form-control,
.dataTables_filter input,
.form-group.address-input-wrap textarea {
    padding: 11.5px 11px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    border-radius: 6px !important;
    border: 1px solid #E2E8F0 !important;
    line-height: normal;
    font-family: 'Public Sans', sans-serif !important;
}

.dataTables_filter input::placeholder {
    color: #94A3B8 !important;
}

/* Ensure password input specifically gets border-radius */
input[type="password"].form-control,
input[type="text"].form-control {
    border-radius: 6px !important;
}

/* Override any Bootstrap input-group styles */
.input-group .form-control {
    border-radius: 6px !important;
}

.form-control::placeholder {
    color: #94A3B8;
    font-size: 14px;
}

.form-control:focus {
    box-shadow: none;
    border: 1px solid #E2E8F0;
}

.form-check {
    margin: 0 !important;
}

.mb-3.form-check label {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
}

.bi-eye::before {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.3248 14.925L11.6998 12.3375C11.2623 12.475 10.8186 12.5781 10.3686 12.6469C9.91856 12.7156 9.46231 12.75 8.99981 12.75C7.3248 12.75 5.79355 12.3 4.40605 11.4C3.01855 10.5 1.93105 9.31251 1.14355 7.83751C1.08105 7.72501 1.03418 7.60939 1.00293 7.49064C0.97168 7.37189 0.956055 7.25001 0.956055 7.12501C0.956055 7.00001 0.97168 6.87814 1.00293 6.75939C1.03418 6.64064 1.08105 6.52501 1.14355 6.41251C1.41855 5.92501 1.7123 5.45001 2.0248 4.98751C2.3373 4.52501 2.6998 4.11251 3.1123 3.75001L1.55605 2.17501C1.41855 2.03751 1.3498 1.86564 1.3498 1.65939C1.3498 1.45314 1.4248 1.27501 1.5748 1.12501C1.7123 0.987512 1.8873 0.918762 2.0998 0.918762C2.3123 0.918762 2.4873 0.987512 2.6248 1.12501L15.3748 13.875C15.5123 14.0125 15.5842 14.1844 15.5904 14.3906C15.5967 14.5969 15.5248 14.775 15.3748 14.925C15.2373 15.0625 15.0623 15.1313 14.8498 15.1313C14.6373 15.1313 14.4623 15.0625 14.3248 14.925ZM8.99981 10.5C9.13731 10.5 9.26856 10.4938 9.39356 10.4813C9.51856 10.4688 9.64356 10.4438 9.76856 10.4063L5.71855 6.35626C5.68105 6.48126 5.65605 6.60626 5.64355 6.73126C5.63105 6.85626 5.6248 6.98751 5.6248 7.12501C5.6248 8.06251 5.95293 8.85939 6.60918 9.51564C7.26543 10.1719 8.0623 10.5 8.99981 10.5ZM8.99981 1.50001C10.6748 1.50001 12.2092 1.95314 13.6029 2.85939C14.9967 3.76564 16.0873 4.95626 16.8748 6.43126C16.9373 6.53126 16.9842 6.64064 17.0154 6.75939C17.0467 6.87814 17.0623 7.00001 17.0623 7.12501C17.0623 7.25001 17.0498 7.37189 17.0248 7.49064C16.9998 7.60939 16.9561 7.71876 16.8936 7.81876C16.6561 8.28126 16.3904 8.71876 16.0967 9.13126C15.8029 9.54376 15.4748 9.93126 15.1123 10.2938C14.9373 10.4688 14.7311 10.55 14.4936 10.5375C14.2561 10.525 14.0498 10.4313 13.8748 10.2563L12.3748 8.75626C12.2873 8.66876 12.2311 8.56564 12.2061 8.44689C12.1811 8.32814 12.1873 8.20626 12.2248 8.08126C12.2748 7.91876 12.3123 7.76251 12.3373 7.61251C12.3623 7.46251 12.3748 7.30001 12.3748 7.12501C12.3748 6.18751 12.0467 5.39064 11.3904 4.73439C10.7342 4.07814 9.93731 3.75001 8.99981 3.75001C8.82481 3.75001 8.6623 3.76251 8.5123 3.78751C8.3623 3.81251 8.20605 3.85001 8.04355 3.90001C7.91855 3.93751 7.79355 3.94376 7.66855 3.91876C7.54355 3.89376 7.4373 3.83751 7.3498 3.75001L6.73105 3.13126C6.49355 2.89376 6.41543 2.61876 6.49668 2.30626C6.57793 1.99376 6.7748 1.79376 7.0873 1.70626C7.3998 1.64376 7.71543 1.59376 8.03418 1.55626C8.35293 1.51876 8.6748 1.50001 8.99981 1.50001ZM10.4811 5.73751C10.6186 5.90001 10.7342 6.07814 10.8279 6.27189C10.9217 6.46564 10.9811 6.66876 11.0061 6.88126C11.0186 6.98126 10.9811 7.05001 10.8936 7.08751C10.8061 7.12501 10.7248 7.10626 10.6498 7.03126L9.11231 5.49376C9.03731 5.41876 9.02168 5.33751 9.06543 5.25001C9.10918 5.16251 9.18106 5.11876 9.28106 5.11876C9.51856 5.14376 9.73731 5.20939 9.93731 5.31564C10.1373 5.42189 10.3186 5.56251 10.4811 5.73751Z' fill='%231E293B'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

input.form-control.form-control {
    width: 100%;
}

.input-group .btn {
    position: absolute;
    z-index: 2;
    border: none;
    padding: 0;
    right: 14px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: none;
}

.bi-eye-slash::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.0002 9.14998C8.8752 9.14998 9.61895 8.84373 10.2314 8.23123C10.8439 7.61873 11.1502 6.87498 11.1502 5.99998C11.1502 5.12498 10.8439 4.38123 10.2314 3.76873C9.61895 3.15623 8.8752 2.84998 8.0002 2.84998C7.1252 2.84998 6.38145 3.15623 5.76895 3.76873C5.15645 4.38123 4.8502 5.12498 4.8502 5.99998C4.8502 6.87498 5.15645 7.61873 5.76895 8.23123C6.38145 8.84373 7.1252 9.14998 8.0002 9.14998ZM8.0002 7.79998C7.5002 7.79998 7.0752 7.62498 6.7252 7.27498C6.3752 6.92498 6.2002 6.49998 6.2002 5.99998C6.2002 5.49998 6.3752 5.07498 6.7252 4.72498C7.0752 4.37498 7.5002 4.19998 8.0002 4.19998C8.5002 4.19998 8.9252 4.37498 9.2752 4.72498C9.6252 5.07498 9.8002 5.49998 9.8002 5.99998C9.8002 6.49998 9.6252 6.92498 9.2752 7.27498C8.9252 7.62498 8.5002 7.79998 8.0002 7.79998ZM8.0002 11.4C6.3752 11.4 4.88145 10.9656 3.51895 10.0969C2.15645 9.2281 1.0752 8.08123 0.275195 6.65623C0.212695 6.55623 0.168945 6.45141 0.143945 6.34179C0.118945 6.23216 0.106445 6.11966 0.106445 6.00429C0.106445 5.88891 0.118945 5.77498 0.143945 5.66248C0.168945 5.54998 0.212695 5.44373 0.275195 5.34373C1.0752 3.91873 2.15645 2.77185 3.51895 1.9031C4.88145 1.03435 6.3752 0.599976 8.0002 0.599976C9.6252 0.599976 11.1189 1.03435 12.4814 1.9031C13.8439 2.77185 14.9252 3.91873 15.7252 5.34373C15.7877 5.44373 15.8314 5.54854 15.8564 5.65816C15.8814 5.76779 15.8939 5.88029 15.8939 5.99566C15.8939 6.11104 15.8814 6.22498 15.8564 6.33748C15.8314 6.44998 15.7877 6.55623 15.7252 6.65623C14.9252 8.08123 13.8439 9.2281 12.4814 10.0969C11.1189 10.9656 9.6252 11.4 8.0002 11.4Z' fill='%231E293B'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

i#eyeIcon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn:active,
.btn:focus-visible {
    background-color: transparent;
    box-shadow: none;
    border: none;
}

/* Ensure the eye icon button stays visible when input is focused */
.input-group:focus-within .btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure the button has higher z-index when input is focused */
.input-group:focus-within .btn {
    z-index: 10;
}

/* Additional styles to ensure icon visibility */
.input-group .btn:hover,
.input-group .btn:focus,
.input-group .btn:active {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    visibility: visible !important;
}

.remmberForgotwrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.modal-box {
    position: relative;
}

a.fogotPass {
    text-decoration: none;
    color: var(--text-color);
}

.form-check .form-check-input {
    border-radius: 2px;
    cursor: pointer;
}

.form-check .form-check-input {
    border-color: #E2E8F0;
    box-shadow: none;
}

span.toggle-eye1 svg {
    position: absolute;
    TOP: 50%;
    RIGHT: 10PX;
}

/* Style for checked checkbox */
.form-check .form-check-input:checked {
    background-color: #066579 !important;
    border-color: #066579 !important;
    box-shadow: none !important;
}

.mb-3.input-mb-3 {
    margin-bottom: 20px !important;
    position: relative;
}

.inputContWrap {
    display: flex;
    flex-direction: column;
    position: relative;
}

.loginForm .authButton {
    width: 100%;
}

.forgotForm {
    display: flex;
    gap: 40px;
    flex-direction: column;
}

.error {
    position: absolute;
    font-size: 12px;
    font-weight: 500;
    color: red;
}

.form-error {
    position: absolute;
}

/* Style for checkbox focus state */
.form-check .form-check-input:focus {
    border-color: #066579 !important;
    box-shadow: 0 0 0 0.2rem rgba(6, 101, 121, 0.25) !important;
}

.loginBottom p,
.loginBottom a {
    font-size: 16px;
    font-weight: 400;
    color: #64748B !important;
}

span.tooltipSpan svg {
    width: 15px;
    height: 15px;
    margin-top: 5px;
}

.tooltipSpan {
    position: absolute;
    right: 0;
    cursor: pointer;
    z-index: 1050;
}

.toast-close-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

button.sidebar-toggle-btn.collapsed svg {
    transform: rotate(180deg);
}

#toast-container {
    top: 60px !important;
}

#toast-container.toast-top-right {
    top: 60px !important;
    right: 12px !important;
}

#toast-container.toast-top-left {
    top: 60px !important;
    left: 12px !important;
}

#toast-container.toast-top-center {
    top: 60px !important;
}

#toast-container>.toast {
    border-radius: 8px !important;
    padding: 15px 15px 15px 36px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    align-items: center !important;
    margin: 10px !important;
    text-align: left;
    position: relative;
    background-image: none !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 90vw !important;
    min-width: 0 !important;
    opacity: 1 !important;
    word-break: break-word;
    white-space: pre-line;
    box-sizing: border-box;
}

span#calendarLabel {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 767px) {
    #toast-container {
        top: 60px !important;
    }

    #toast-container.toast-top-right {
        top: 60px !important;
    }

    #toast-container.toast-top-left {
        top: 60px !important;
    }

    #toast-container.toast-top-center {
        top: 60px !important;
    }

    #toast-container>.toast {
        font-size: 14px !important;
        padding: 10px 8px 10px 28px !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }
}

@media (max-width: 480px) {
    #toast-container {
        top: 60px !important;
    }

    span.avatar img {
        height: 100% !important;
    }

    #toast-container.toast-top-right {
        top: 60px !important;
    }

    #toast-container.toast-top-left {
        top: 60px !important;
    }

    #toast-container.toast-top-center {
        top: 60px !important;
    }

    #toast-container>.toast {
        font-size: 12px !important;
        padding: 8px 8px 8px 30px !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }

    #toast-container>.toast::before {
        left: 8px !important;
    }
}

.toast-success .toast-message {
    color: #249782 !important;
}

button.toast-close-button {
    display: none !important;
}

#toast-container>.toast-error {
    background-color: rgba(250, 10, 10, 0.301) !important;
    border: 1px solid #ef444457 !important;
    color: #EF4444 !important;
}

.toast.toast-success {
    background: #24978233 !important;
    border: 1px solid #24978233;
    color: #249782 !important;
}

.toast.toast-warning {
    background: #EAB30833;
    border: 1px solid #EAB30833;
    color: #EAB308 !important;
}

.toast-progress {
    background-color: transparent !important;
    display: none !important;
}

#toast-container>.toast::before {
    content: "";
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.99967 10.8333C7.18856 10.8333 7.3469 10.7694 7.47467 10.6417C7.60245 10.5139 7.66634 10.3556 7.66634 10.1667V7.5C7.66634 7.31111 7.60245 7.15278 7.47467 7.025C7.3469 6.89722 7.18856 6.83334 6.99967 6.83334C6.81079 6.83334 6.65245 6.89722 6.52467 7.025C6.3969 7.15278 6.33301 7.31111 6.33301 7.5V10.1667C6.33301 10.3556 6.3969 10.5139 6.52467 10.6417C6.65245 10.7694 6.81079 10.8333 6.99967 10.8333ZM6.99967 5.5C7.18856 5.5 7.3469 5.43611 7.47467 5.30834C7.60245 5.18056 7.66634 5.02222 7.66634 4.83334C7.66634 4.64445 7.60245 4.48611 7.47467 4.35834C7.3469 4.23056 7.18856 4.16667 6.99967 4.16667C6.81079 4.16667 6.65245 4.23056 6.52467 4.35834C6.3969 4.48611 6.33301 4.64445 6.33301 4.83334C6.33301 5.02222 6.3969 5.18056 6.52467 5.30834C6.65245 5.43611 6.81079 5.5 6.99967 5.5ZM6.99967 14.1667C6.07745 14.1667 5.21079 13.9917 4.39967 13.6417C3.58856 13.2917 2.88301 12.8167 2.28301 12.2167C1.68301 11.6167 1.20801 10.9111 0.858008 10.1C0.508008 9.28889 0.333008 8.42222 0.333008 7.5C0.333008 6.57778 0.508008 5.71111 0.858008 4.9C1.20801 4.08889 1.68301 3.38334 2.28301 2.78334C2.88301 2.18334 3.58856 1.70834 4.39967 1.35834C5.21079 1.00834 6.07745 0.833336 6.99967 0.833336C7.9219 0.833336 8.78856 1.00834 9.59967 1.35834C10.4108 1.70834 11.1163 2.18334 11.7163 2.78334C12.3163 3.38334 12.7913 4.08889 13.1413 4.9C13.4913 5.71111 13.6663 6.57778 13.6663 7.5C13.6663 8.42222 13.4913 9.28889 13.1413 10.1C12.7913 10.9111 12.3163 11.6167 11.7163 12.2167C11.1163 12.8167 10.4108 13.2917 9.59967 13.6417C8.78856 13.9917 7.9219 14.1667 6.99967 14.1667ZM6.99967 12.8333C8.48856 12.8333 9.74967 12.3167 10.783 11.2833C11.8163 10.25 12.333 8.98889 12.333 7.5C12.333 6.01111 11.8163 4.75 10.783 3.71667C9.74967 2.68334 8.48856 2.16667 6.99967 2.16667C5.51079 2.16667 4.24967 2.68334 3.21634 3.71667C2.18301 4.75 1.66634 6.01111 1.66634 7.5C1.66634 8.98889 2.18301 10.25 3.21634 11.2833C4.24967 12.3167 5.51079 12.8333 6.99967 12.8333Z' fill='%23EF4444'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
}

#toast-container>.toast-success::before {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.99967 10.8333C7.18856 10.8333 7.3469 10.7694 7.47467 10.6417C7.60245 10.5139 7.66634 10.3556 7.66634 10.1667V7.5C7.66634 7.31111 7.60245 7.15278 7.47467 7.025C7.3469 6.89722 7.18856 6.83334 6.99967 6.83334C6.81079 6.83334 6.65245 6.89722 6.52467 7.025C6.3969 7.15278 6.33301 7.31111 6.33301 7.5V10.1667C6.33301 10.3556 6.3969 10.5139 6.52467 10.6417C6.65245 10.7694 6.81079 10.8333 6.99967 10.8333ZM6.99967 5.5C7.18856 5.5 7.3469 5.43611 7.47467 5.30834C7.60245 5.18056 7.66634 5.02222 7.66634 4.83334C7.66634 4.64445 7.60245 4.48611 7.47467 4.35834C7.3469 4.23056 7.18856 4.16667 6.99967 4.16667C6.81079 4.16667 6.65245 4.23056 6.52467 4.35834C6.3969 4.48611 6.33301 4.64445 6.33301 4.83334C6.33301 5.02222 6.3969 5.18056 6.52467 5.30834C6.65245 5.43611 6.81079 5.5 6.99967 5.5ZM6.99967 14.1667C6.07745 14.1667 5.21079 13.9917 4.39967 13.6417C3.58856 13.2917 2.88301 12.8167 2.28301 12.2167C1.68301 11.6167 1.20801 10.9111 0.858008 10.1C0.508008 9.28889 0.333008 8.42222 0.333008 7.5C0.333008 6.57778 0.508008 5.71111 0.858008 4.9C1.20801 4.08889 1.68301 3.38334 2.28301 2.78334C2.88301 2.18334 3.58856 1.70834 4.39967 1.35834C5.21079 1.00834 6.07745 0.833336 6.99967 0.833336C7.9219 0.833336 8.78856 1.00834 9.59967 1.35834C10.4108 1.70834 11.1163 2.18334 11.7163 2.78334C12.3163 3.38334 12.7913 4.08889 13.1413 4.9C13.4913 5.71111 13.6663 6.57778 13.6663 7.5C13.6663 8.42222 13.4913 9.28889 13.1413 10.1C12.7913 10.9111 12.3163 11.6167 11.7163 12.2167C11.1163 12.8167 10.4108 13.2917 9.59967 13.6417C8.78856 13.9917 7.9219 14.1667 6.99967 14.1667ZM6.99967 12.8333C8.48856 12.8333 9.74967 12.3167 10.783 11.2833C11.8163 10.25 12.333 8.98889 12.333 7.5C12.333 6.01111 11.8163 4.75 10.783 3.71667C9.74967 2.68334 8.48856 2.16667 6.99967 2.16667C5.51079 2.16667 4.24967 2.68334 3.21634 3.71667C2.18301 4.75 1.66634 6.01111 1.66634 7.5C1.66634 8.98889 2.18301 10.25 3.21634 11.2833C4.24967 12.3167 5.51079 12.8333 6.99967 12.8333Z' fill='%23249782'/%3E%3C/svg%3E");
}

#toast-container>.toast-warning::before {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.99967 10.8333C7.18856 10.8333 7.3469 10.7694 7.47467 10.6417C7.60245 10.5139 7.66634 10.3556 7.66634 10.1667V7.5C7.66634 7.31111 7.60245 7.15278 7.47467 7.025C7.3469 6.89722 7.18856 6.83334 6.99967 6.83334C6.81079 6.83334 6.65245 6.89722 6.52467 7.025C6.3969 7.15278 6.33301 7.31111 6.33301 7.5V10.1667C6.33301 10.3556 6.3969 10.5139 6.52467 10.6417C6.65245 10.7694 6.81079 10.8333 6.99967 10.8333ZM6.99967 5.5C7.18856 5.5 7.3469 5.43611 7.47467 5.30834C7.60245 5.18056 7.66634 5.02222 7.66634 4.83334C7.66634 4.64445 7.60245 4.48611 7.47467 4.35834C7.3469 4.23056 7.18856 4.16667 6.99967 4.16667C6.81079 4.16667 6.65245 4.23056 6.52467 4.35834C6.3969 4.48611 6.33301 4.64445 6.33301 4.83334C6.33301 5.02222 6.3969 5.18056 6.52467 5.30834C6.65245 5.43611 6.81079 5.5 6.99967 5.5ZM6.99967 14.1667C6.07745 14.1667 5.21079 13.9917 4.39967 13.6417C3.58856 13.2917 2.88301 12.8167 2.28301 12.2167C1.68301 11.6167 1.20801 10.9111 0.858008 10.1C0.508008 9.28889 0.333008 8.42222 0.333008 7.5C0.333008 6.57778 0.508008 5.71111 0.858008 4.9C1.20801 4.08889 1.68301 3.38334 2.28301 2.78334C2.88301 2.18334 3.58856 1.70834 4.39967 1.35834C5.21079 1.00834 6.07745 0.833336 6.99967 0.833336C7.9219 0.833336 8.78856 1.00834 9.59967 1.35834C10.4108 1.70834 11.1163 2.18334 11.7163 2.78334C12.3163 3.38334 12.7913 4.08889 13.1413 4.9C13.4913 5.71111 13.6663 6.57778 13.6663 7.5C13.6663 8.42222 13.4913 9.28889 13.1413 10.1C12.7913 10.9111 12.3163 11.6167 11.7163 12.2167C11.1163 12.8167 10.4108 13.2917 9.59967 13.6417C8.78856 13.9917 7.9219 14.1667 6.99967 14.1667ZM6.99967 12.8333C8.48856 12.8333 9.74967 12.3167 10.783 11.2833C11.8163 10.25 12.333 8.98889 12.333 7.5C12.333 6.01111 11.8163 4.75 10.783 3.71667C9.74967 2.68334 8.48856 2.16667 6.99967 2.16667C5.51079 2.16667 4.24967 2.68334 3.21634 3.71667C2.18301 4.75 1.66634 6.01111 1.66634 7.5C1.66634 8.98889 2.18301 10.25 3.21634 11.2833C4.24967 12.3167 5.51079 12.8333 6.99967 12.8333Z' fill='%23EAB308'/%3E%3C/svg%3E");
}

button.forgot-submit.authButton.resetBtn {
    margin-top: 40px;
}

.createAccountTitle {
    width: 100%;
}

.status {
    width: 90px;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.form-row .mb-3.input-mb-3 {
    width: 100%;
}

.registerTitle {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 5px;
}

.input-Warpper {
    display: flex;
    gap: 15px;
    align-items: end;
}

.input-Warpper .mb-3.input-mb-3 {
    width: 100%;
    gap: 15px;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    padding-right: 8px !important;
}

a.headChangeLink {
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: #066579 !important;
    text-decoration: none;
    margin: 0 !important;
    line-height: normal !important;
}

a.headChangeLink::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: #066579;
    border-radius: 1px;
}

.mb-3.input-mb-3.verify-input-wrap {
    display: flex;
    gap: 10px;
}

.mb-3.input-mb-3.verify-input-wrap input {
    text-align: center !important;
}

.forgotPassSubmitBtn {
    margin-bottom: 60px;
}

.rightBar {
    background: #F1F5F9;
    padding: 0;
    width: calc(100% - 60px);
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.sidebar {
    width: 259px;
    min-width: 259px;
    max-width: 259px;
    transition: width 0.3s, min-width 0.3s;
    font-family: 'Public Sans', sans-serif !important;
    z-index: 1050 !important;
}

.main-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background: var(--background-color);
}

.sidebar.collapsed {
    width: 60px !important;
    min-width: 60px !important;
}

.sidebar.collapsed .main-logo img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.sidebar.collapsed .sidebarul {
    padding: 6px 10px;
}

.sidebarul li a span {
    display: inline-block;
    white-space: nowrap;
    transition: display 0.3s ease, max-width 0.3s ease;
    opacity: 1;
    overflow: hidden;
}

.sidebar.collapsed .sidebarul li a span {
    display: none;
}

.rightbar {
    flex: 1 1 0;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: calc(100% - 240px);
}

.sidebar.collapsed~.rightbar {
    width: 100%;
}

.leftBar {
    background: var(--background-color) !important;
    width: 259px;
    padding: 0 !important;
}

.row {
    width: 100%;
    --bs-gutter-x: 0;
}

.main-logo img {
    width: 121px;
    height: 101px;
}

.main-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0px;
    min-height: 133px;
}

.main-header {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-top-right-radius: 15px;
}

button.sidebar-toggle-btn {
    border: none;
    background: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

.sidebarul {
    padding: 10px;
    gap: 10px;
}
li.nav-item a {
    width: 100%;
}

.sidebarul li a {
    padding: 10px !important;
    display: flex;
    gap: 10px;
    color: #fff;
    border-radius: 6px !important;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0px;
    text-decoration: none;
    align-items: center;
}

.sidebarul li a:hover {
    color: #fff !important;
}

li.logoutBtn {
    padding: 10px;
}

li.nav-item.active a {
    background: #066579;
}

.logoutBtn button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    gap: 10px;
    font-family: 'Public Sans', sans-serif !important;
    cursor: pointer;
    align-items: center;
}

.rightContainer h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #1E293B;
}

.dashboard-stats-charts {
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

.dashboard-stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.dashboard-stat-card {
    background: #f8fafc;
    border-radius: 6px;
    flex: 1 1 220px;
    min-width: 200px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0px 4px 24px 0px #E4F1F933;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.stat-value {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: #94A3B8;
    font-weight: 400;
}

.dashboard-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.dashboard-box {
    background: #ffffff;
    padding: 26px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(50% - 10px);
    align-items: center;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: bold;
}

.stat-label {
    font-size: 0.9rem;
    color: #94A3B8;
}

.chart-label {
    font-weight: 600;
    font-size: 1rem;
    color: #1E293B;
}

img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.dashboard-ul {
    margin-top: 1rem;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    justify-content: center;
}

.invoice-box svg,
.issuance-breakout svg {
    width: 100%;
    height: 100%;
}

.dashboard-ul li {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.dashboard-ul svg {
    margin-right: 0.5rem;
}

.dashboard-box.issuance-breakout {
    flex-grow: 1;
}

.profile-header {
    display: flex;
    background: #f8fafc;
    padding: 20px 20px 0px 20px;
    border-radius: 6px;
    width: 100%;
    flex-direction: column;
    gap: 40px;
    box-shadow: 0px 4px 24px 0px #E4F1F933;
}

.tab-header {
    display: flex;
    gap: 10px;
}

.tab-link.active {
    border-bottom: 2px solid #066579;
    color: #066579;
}

.form-container {
    padding: 20px;
    background: #fff;
    border-radius: 6px;
}

.form-container h3 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 20px;
}

.form-actions button {
    font-size: 15px;
    font-weight: 500 !important;
}

button.update {
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    background: #066579;
    box-shadow: 0px 4px 24px 0px #E4F1F933;
}

button.update:hover {
    background: #066579;
    color: #fff;
}

button.cancel {
    color: #EF4444;
    background: transparent;
    border: none;
}

.form-actions {
    grid-column: span 3;
    display: flex;
    justify-content: flex-end;
    gap: 23px;
    margin: 0;
}

.form-container .form-group label {
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 14px;
}

.form-container .form-control {
    font-weight: 500;
}

.tab-link {
    background: none;
    border: none;
    padding: 0px 10px 10px 10px;
    font-weight: 400;
    outline: none;
    border-bottom: 1px solid #f8fafc;
    transition: border 0.2s;
    font-size: 14px;
    color: #64748B;
    font-family: 'Public Sans', sans-serif !important;
    cursor: pointer;
}

.profile-avatar-container {
    position: relative;
    width: 113px;
    height: 113px;
    margin-right: 24px;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.profile-header-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
}

#error_avatar {
    bottom: -18px;
}

.camera-icon {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.profile-name {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
}

form#passwordUpdateForm .form-group {
    position: relative;
    margin-bottom: 10px;
}

.text-danger.small.mb-2.error.pass-error {
    bottom: -27px;
    font-size: 13px;
}

.dataTables_wrapper .dataTables_filter {
    float: left !important;
    text-align: right;
    padding-left: 20px;
    padding-bottom: 20px;
}

table.dataTable>thead>tr>th,
table.dataTable>thead>tr>td {
    padding: 10px;
    border-top: 1px solid #E2E8F0;
    color: #64748B !important;
    font-size: 14px;
    font-weight: 400 !important;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 5px 10px !important;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: none !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border: none !important;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border: none !important;
}

.signout-btn,
.status {
    background: #066579;
    color: #fff !important;
    border: none;
    padding: 8px;
    border-radius: 5px;
    font-weight: 400;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    text-align: center !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-family: 'Public Sans', sans-serif !important
}

.dataTables_scrollBody td:last-child {
    text-align: right;
    width: 90px;
    white-space: nowrap;
}

div#users-table_wrapper .dataTables_scrollBody td:last-child,
div#history-table_wrapper td:last-child {
    width: auto !important;
}

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

.table-Container {
    background: #fff;
    padding: 20px 0px 0 !important;
    width: 100%;
    max-width: 100%;
    position: relative;
    box-shadow: 0px 4px 24px 0px #E4F1F933;
    border-radius: 6px;
}

button#signout-all {
    position: absolute;
    right: 20px;
    font-size: 13px;
    background: #F1F5F9;
    padding: 11.5px 12px;
    line-height: 10px;
    z-index: 1050;
    top: 20px;
    cursor: pointer;
    color: #1E293B;
}

.dataTables_filter input {
    padding-left: 30px !important;
    background-image: none !important;
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    position: relative;
    height: 33px;
    width: 251px;
}

.dataTables_filter input:focus {
    outline: none !important;
}

/* Inline search icon for DataTable filter */
.dataTables_filter label {
    position: relative;
}

.dataTables_filter label::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5.83333' cy='5.83333' r='5.33333' stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5001 12.5001L9.6333 9.6333' stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

td.text-center.sorting_1 {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

thead,
tr,
th {
    background: #EFF5F9 !important;
}

/* Remove unnecessary spacing from table thead */
table thead tr,
table.dataTable thead tr,
thead tr,
.table thead tr {
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    height: auto !important;
    min-height: 0 !important;
    border-spacing: 0 !important;
}

table thead,
table.dataTable thead,
thead,
.table thead {
    margin: 0 !important;
    padding: 0 !important;
    border-spacing: 0 !important;
}

/* Ensure all tables have no border-spacing */
table,
table.dataTable,
.table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

table.dataTable th.sorting:after,
table.dataTable th.sorting_asc:after,
table.dataTable th.sorting_desc:after,
table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:before {
    display: none !important;
}

tr td:nth-child(3) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.dataTables_paginate {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 !important;
}

.bottom {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 100%;
}

.text-center {
    text-align: left !important;
}

.table td,
.table th {
    vertical-align: middle;
    padding: 12px 15px;
}

.table td div {
    line-height: 1.4;
}

a.paginate_button {
    padding: 3px 12px !important;
    line-height: normal !important;
    border: 1px solid #E2E8F0 !important;
    color: #64748B;
    background: transparent;
    font-weight: 400;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #066579 !important;
    background: #F7F5FF;
    border: 1px solid #F7F5FF !important;
}

a#history-table_previous span {
    font-size: 14px;
    font-weight: 400;
    color: #64748B;
    margin-left: 5px;
    line-height: normal;
}

a.paginate_button span {
    color: #64748B;
    font-size: 14px;
    font-weight: 400;
    margin-right: 5px;
    line-height: normal;
}

.grid.main-page {
    box-shadow: 0px 4px 24px 0px #E4F1F933;
    width: 65%;
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding-right: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    flex-direction: row;
}

input.field-value.form-control {
    background: #E2E8F066;
    border: 1px solid #E2E8F0;
    box-shadow: 0px 4px 24px 0px #E4F1F933;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.field label {
    margin-bottom: .5rem;
    font-size: 14px;
    font-weight: 400;
    color: #1E293B;
    line-height: normal;
}

.grid-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

.image-gallery img {
    width: calc(50% - 5px);
    min-height: 133px;
    border: 1px solid #E2E8F0;
    max-height: 133px;
}

.map {
    height: 220px;
    width: 100%;
    background-color: #e5e5e5;
    border-radius: 6px;
    object-fit: cover;
}

.map img {
    width: 100%;
    height: 100%;
}

.field {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.image-gallery {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.invoiceBtnWrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-notification-page {
    width: 100% !important;
    overflow: auto;
    max-height: 100vh;
}

.innerNotificationWrap {
    padding: 20px;
    background: #fff;
    border-radius: 6px;
}

.main-notification-page::-webkit-scrollbar-track {
    -webkit-box-shadow: inset transparent;
    background-color: transparent;
}

.main-notification-page::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

.main-notification-page::-webkit-scrollbar-thumb {
    background-color: #066579;
    border-radius: 8px;
}

.notification-item {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(226, 232, 240);
    border-image: initial;
    box-shadow: 0px 4px 24px 0px #E4F1F933;
    padding: 15px;
    border-radius: 6px;
}

.notification-item strong {
    color: #64748B;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.notificarionRightWrap strong {
    text-align: right;
}

.notification-item p {
    color: #1E293B;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    line-height: normal;
}

.notification-item {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(226, 232, 240);
    border-image: initial;
    box-shadow: 0px 4px 24px 0px #E4F1F933;
    padding: 15px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
}

.notification-time {
    font-size: 14px;
    font-weight: 400;
    display: flex;
    gap: 5px;
    align-items: center;
}

.notification-time img {
    width: 14px;
    height: 14px;
}

.notificarionRightWrap,
.notificationLeftWrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
}

.calendar-btn.date-range {
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    background-color: var(--light-gray-bg);
    transition: box-shadow 0.2s ease;
    border: 1px solid var(--gray-border);
    font-size: 13px;
    font-weight: 400;
    background: #F1F5F9;
    border-radius: 6px;
    color: #1E293B;
}

.calendar-btn.date-range input {
    width: 0;
    padding: 0;
    margin: 0 !important;
    visibility: hidden !important;
    font-size: 0 !important;
    border: 0;
    position: absolute !important;
}

tr td:last-child {
    display: flex;
    gap: 10px;
}

.notification-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}

.filter-dropdown {
    position: absolute;
    right: 20px;
    z-index: 1050;
}

.filter-Wrap {
    position: absolute;
    z-index: 999;
    right: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.filteramount {
    padding-left: 30px !important;
    background-image: url(../images/SearchIcon.svg) !important;
    background-position: 8px center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px;
    position: relative;
    height: 40px;
    width: 150px;
}

a.paginate_button span {
    padding-left: 5px;
}

.dropdown-btn {
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    color: #1E293B;
    padding: 10px 15px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dropdown-btn svg {
    transition: transform 0.3s ease;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 124px;
    z-index: 10;
    padding: 0;
    top: 30px;
}

.flatpickr-calendar.rangeMode.animate.arrowTop.arrowLeft.rightMost.open,
.flatpickr-calendar.rangeMode.animate.arrowTop.arrowLeft.open {
    right: 30px !important;
    top: 200px !important;
}

#yourDropdown {
    position: absolute;
    top: 250px;
    left: 130px;
    z-index: 9999;
}

.dropdown-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu li button {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--text-color);
    padding: 5px 10px;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s ease;
    line-height: normal;
    width: 100%;
    text-align: left;
}

.dropdown-menu li:last-child {
    border-bottom: none;
}

.dropdown-menu li button:hover {
    background-color: #f1f5f9;
}

.view-icon-link {
    text-decoration: none;
    padding: 7px;
    background: #E2E8F066;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
input.numInput.cur-year {
    background-image: none !important;
    padding: 0 !important;
    font-size: 14px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
input.numInput:hover,
.cur-year:hover {
    background: transparent !important;
}

button.flatpickr-cancel-btn {
    background: #066579 !important;
    color: #fff;
}

.image-preview svg,
div#imagePreview img,
.profile-avatar {
    width: 113px;
    height: 113px;
    cursor: pointer;
}

.profile-avatar {
    object-fit: cover;
}

.dataTables_filter label {
    margin: 0 !important;
}

.grid.main-page.main-notification-page {
    padding: 0px 20px 0px 0px;
    border-radius: 0px !important;
}

/*
 * Logout Popup Styles
 * --------------------------------------------------
 */

/* The main overlay that covers the screen */
.logout-popup-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #0F172A66;
    z-index: 10000 !important;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

.logout-popup-overlay[style*="flex"],
.logout-popup-overlay[style*="display: flex"],
.logout-popup-overlay.show {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: row !important;
}

.logout-popup-overlay[style*="flex"] .logout-popup-box,
.logout-popup-overlay[style*="display: flex"] .logout-popup-box,
.logout-popup-overlay.show .logout-popup-box {
    position: relative !important;
    margin: 0 auto !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}

.logout-popup-box {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    width: auto;
    min-width: 400px;
    max-width: 624px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.logout-popup-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
}

.logout-popup-close-btn:hover {
    color: #343a40;
}

.logout-popup-content {
    text-align: left;
}

.logout-popup-title {
    font-size: 16px;
    font-weight: 400;
    color: #1E293B;
    padding: 22.5px 20px;
    border-bottom: 1px solid #E2E8F0;
    margin: 0;
}

.subcontent {
    padding: 20px;
}

.logout-popup-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #1E293B;
    line-height: normal;
    margin-bottom: 10px;
}

.logout-popup-text {
    font-size: 16px;
    color: #64748B;
    font-weight: 400;
    line-height: normal;
}

.logout-popup-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 20px 20px;
}

.logout-popup-actions button {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 11.5px 17px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    background: #066579 !important;
    box-shadow: 0px 4px 24px 0px #E4F1F933;
}

button.btn-cancel {
    color: #EF4444;
    background: transparent !important;
}

.btn-cancel {
    background-color: #ffffff;
    color: #212529;
    border-color: #ced4da;
    margin-right: 12px;
}

.btn-cancel:hover {
    background-color: #f8f9fa;
}

.btn-logout {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
}

.btn-logout:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

table.table.dataTable.no-footer {
    width: 100% !important;
}

.toggle-eye::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 16px;
    background-repeat: no-repeat;
}

.toggle-eye.active {
    display: inline-block;
    width: 16px;
    height: 11px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'><path fill='%231E293B' d='M8.0002 8.64998C8.8752 8.64998 9.61895 8.34373 10.2314 7.73123C10.8439 7.11873 11.1502 6.37498 11.1502 5.49998C11.1502 4.62498 10.8439 3.88123 10.2314 3.26873C9.61895 2.65623 8.8752 2.34998 8.0002 2.34998C7.1252 2.34998 6.38145 2.65623 5.76895 3.26873C5.15645 3.88123 4.8502 4.62498 4.8502 5.49998C4.8502 6.37498 5.15645 7.11873 5.76895 7.73123C6.38145 8.34373 7.1252 8.64998 8.0002 8.64998ZM8.0002 7.29998C7.5002 7.29998 7.0752 7.12498 6.7252 6.77498C6.3752 6.42498 6.2002 5.99998 6.2002 5.49998C6.2002 4.99998 6.3752 4.57498 6.7252 4.22498C7.0752 3.87498 7.5002 3.69998 8.0002 3.69998C8.5002 3.69998 8.9252 3.87498 9.2752 4.22498C9.6252 4.57498 9.8002 4.99998 9.8002 5.49998C9.8002 5.99998 9.6252 6.42498 9.2752 6.77498C8.9252 7.12498 8.5002 7.29998 8.0002 7.29998ZM8.0002 10.9C6.3752 10.9 4.88145 10.4656 3.51895 9.59685C2.15645 8.7281 1.0752 7.58123 0.275195 6.15623C0.212695 6.05623 0.168945 5.95141 0.143945 5.84179C0.118945 5.73216 0.106445 5.61966 0.106445 5.50429C0.106445 5.38891 0.118945 5.27498 0.143945 5.16248C0.168945 5.04998 0.212695 4.94373 0.275195 4.84373C1.0752 3.41873 2.15645 2.27185 3.51895 1.4031C4.88145 0.534351 6.3752 0.0999756 8.0002 0.0999756C9.6252 0.0999756 11.1189 0.534351 12.4814 1.4031C13.8439 2.27185 14.9252 3.41873 15.7252 4.84373C15.7877 4.94373 15.8314 5.04854 15.8564 5.15816C15.8814 5.26779 15.8939 5.38029 15.8939 5.49566C15.8939 5.61104 15.8814 5.72498 15.8564 5.83748C15.8314 5.94998 15.7877 6.05623 15.7252 6.15623C14.9252 7.58123 13.8439 8.7281 12.4814 9.59685C11.1189 10.4656 9.6252 10.9 8.0002 10.9Z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}

.toggle-eye.active~.toggle-eye::before {
    background-image: none !important;
}

span.avatar {
    width: 38px;
    height: 38px;
}

.logout-popup-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
}

.logout-popup-close-btn:hover {
    color: #343a40;
}

.logout-popup-content {
    text-align: left;
}

.logout-popup-title {
    font-size: 16px;
    font-weight: 400;
    color: #1E293B;
    padding: 22.5px 20px;
    border-bottom: 1px solid #E2E8F0;
    margin: 0;
}

.subcontent {
    padding: 20px;
}

.logout-popup-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #1E293B;
    line-height: normal;
    margin-bottom: 10px;
}

.logout-popup-text {
    font-size: 16px;
    color: #64748B;
    font-weight: 400;
    line-height: normal;
}

.logout-popup-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 20px 20px;
}

.logout-popup-actions button {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 11.5px 17px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    background: #066579 !important;
    box-shadow: 0px 4px 24px 0px #E4F1F933;
}

button.btn-cancel {
    color: #EF4444;
    background: transparent !important;
}

.btn-cancel {
    background-color: #ffffff;
    color: #212529;
    border-color: #ced4da;
    margin-right: 12px;
}

.btn-cancel:hover {
    background-color: #f8f9fa;
}

.btn-logout {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
}

.btn-logout:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

table.table.dataTable.no-footer {
    width: 100% !important;
}

/* Apply to the last column (both header and cells) */
table th:last-child,
table td:last-child {
    width: 5%;
    text-align: right;
    padding-right: 16px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: transparent !important;
    color: #64748B !important;
}

.dashboard-box.invoice-box,
.dashboard-box.issuance-breakout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    height: 320px;
}

.dashboard-box.invoice-box canvas,
.dashboard-box.issuance-breakout canvas {
    width: 100% !important;
    height: 250px !important;
}

input#amountFilterInput {
    background: transparent;
    border: 1px solid #E2E8F0;
    width: 155px;
}

input#amountFilterInput::placeholder {
    color: #94A3B8;
}

form#passwordUpdateForm {
    row-gap: 0px !important;
}

.inner-notification-main {
    width: 100%;
}

.login-form.forgotEmailWrap {
    padding: 40px 30px 99px;
}

.login-form.verifyOtp {
    padding: 40px 30px;
}

.phoneNUmberWrap {
    display: flex;
    gap: 10px;
}

.phoneNUmberWrap span {
    width: auto;
    background: transparent;
}

.lableTooltip {
    display: flex;
    justify-content: space-between;
}

.image-preview-wrapper {
    margin-top: 40px;
}

button.submit-btn.btn.btn-primary.w-100.authButton {
    margin-top: 20px;
}

a.text-success.ml-2.signout-btn,
.view-icon-link {
    width: 35px !important;
    height: 35px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.toggle-eye1 svg {
    cursor: pointer;
}

.input-password-wrapper {
    position: relative;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
    height: 34px;
    width: 34px;
    padding: 0 !important;
}

span.flatpickr-weekday {
    color: #1E293B !important;
}

.rangeMode .flatpickr-day {
    margin-top: 1px;
    font-size: 11px;
}

.resendWrap {
    font-weight: 400 !important;
    font-size: 14px;
    text-align: center;
    color: #94A3B8;
    margin-top: 15px;
}

#users-table td.dataTables_empty,
#history-table td.dataTables_empty {
    display: none !important;
}

#users-table_wrapper,
#history-table_wrapper {
    position: relative;
}

#users-table_wrapper .dt-empty-overlay,
#history-table_wrapper .dt-empty-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 13px;
    pointer-events: none;
}

.mb-3.captchaWrap {
    margin-bottom: 15px !important;
}

img.graphImg {
    width: unset;
}

.filter-Wrap img {
    width: auto;
}

.rightContainer {
    padding: 20px;
}

.registerFormmain {
    padding-right: 15px !important;
}

.main-notification-page::-webkit-scrollbar-track {
    -webkit-box-shadow: inset transparent;
    background-color: transparent;
}

.main-notification-page::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

.main-notification-page::-webkit-scrollbar-thumb {
    background-color: #066579;
    border-radius: 8px;
}

.searchTextIdWrap {
    position: absolute;
    right: 6px;
    width: 28px;
    height: 28px;
    background-color: #066579;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
    top: 50%;
    transform: translateY(-50%);
}

.searchTextIdWrap:hover {
    background-color: #055566;
}

.searchTextIdWrap svg {
    width: 18px;
    height: 18px;
}

.text-id-wrap {
    position: relative;
}

.economic-code-inner-wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.economic-code-inner-wrap .mb-3 {
    margin-bottom: 0px !important;
}

.economic-code-inner-wrap .form-label {
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 8px;
    display: block;
}

.economic-code-inner-wrap input[readonly] {
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #1E293B;
    cursor: default;
    width: 100%;
}

.copy-icon-wrap {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
    z-index: 5;
}

.copy-icon-wrap:hover {
    background-color: #E2E8F0;
}

.copy-icon-wrap svg {
    width: 20px;
    height: 20px;
}



.form-group.address-input-wrap textarea {
    width: 100% !important;
    resize: none !important;
    height: 41px !important;
    overflow: hidden;
}

.form-group.address-input-wrap textarea:focus {
    outline: none;
}

/* Economic Activity Popup Styles */
.economic-activity-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 12px !important;
    outline: 0;
}

.economic-activity-modal-content .modal-header {
    padding: 21.5px 20px !important;
    align-items: center !important;
    border-bottom: 1px solid #F1F5F9 !important;
    display: flex !important;
    justify-content: space-between !important;
    float: none !important;
    width: 100% !important;
    position: relative !important;
}

.economic-activity-modal-content .modal-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    margin: 0 !important;
}

.economic-activity-modal-content .close-popup {
    cursor: pointer !important;
    transition: opacity 0.2s !important;
    position: relative !important;
    z-index: 100000 !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.economic-activity-modal-content .close-popup:hover {
    opacity: 0.7 !important;
}

.economic-activity-modal-content .modal-body {
    padding: 24px !important;
}

.company-name-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    letter-spacing: 0.025em !important;
}


/* economiy modal styles */
.economic-activity-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-height: 227px !important;
    overflow-y: auto !important;
    padding-right: 10px !important;
}

/* Custom Scrollbar for Navigation Column */
.economic-activity-list::-webkit-scrollbar {
    width: 4px;
}

.economic-activity-list::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    background: transparent !important;
    border: none !important;
}

.economic-activity-list::-webkit-scrollbar-track {
    background: transparent;
}

.economic-activity-list::-webkit-scrollbar-thumb {
    background: #066579;
    border-radius: 2px;
}

.economic-activity-list::-webkit-scrollbar-thumb:hover {
    background: #055066;
}

.economic-activity-modal-content .modal-footer.border-0.p-4 {
    padding: 0px 20px 20px 20px !important;
}

/* Firefox Scrollbar */
.economic-activity-list {
    scrollbar-width: thin;
    scrollbar-color: #066579 transparent;
}

.activity-option-item {
    width: 100% !important;
}

.activity-radio-container {
    display: flex !important;
    align-items: center !important;
    padding: 16px !important;
    background: #F8FAFF !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    border: 1px solid transparent !important;
    position: relative !important;
    margin: 0 !important;
}

.activity-radio-container:hover {
    background: #F1F5FF !important;
}

.activity-radio-container input {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

.custom-radio-checkmark {
    height: 22px !important;
    width: 22px !important;
    border: 2px solid #CBD5E1 !important;
    border-radius: 50% !important;
    margin-right: 16px !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: all 0.2s !important;
}

.activity-radio-container input:checked~.custom-radio-checkmark {
    border-color: #066579 !important;
}

.custom-radio-checkmark:after {
    content: "" !important;
    position: absolute !important;
    display: none !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #066579 !important;
}

.activity-radio-container input:checked~.custom-radio-checkmark:after {
    display: block !important;
}

.activity-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.activity-name {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1E293B !important;
    line-height: 1.4 !important;
    margin-bottom: 2px !important;
}

.activity-code {
    font-size: 13px !important;
    color: #94A3B8 !important;
}

.submit-activity-btn {
    width: 100% !important;
    background: #066579 !important;
    border: none !important;
    padding: 14px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: white !important;
    transition: all 0.2s !important;
    margin-top: 10px !important;
}

.submit-activity-btn:hover {
    background: #055061 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.economicCodeModalWrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: none !important;
}

.economicCodeModalWrap[style*="display: flex"],
.economicCodeModalWrap.show {
    display: flex !important;
}

.economicCodeModalWrap .modal-dialog {
    max-width: 500px !important;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 100000 !important;
}

.economicCodeModalWrap .modal-content {
    position: relative !important;
    z-index: 100001 !important;
}

textarea.form-control.addressinput {
    height: 54px !important;
}

select.form-control.tipo-select {
    width: 100%;
}

/* Large Desktop (1200px and up) */
@media (max-width: 1540px) {

    .main-layout,
    .rightbar {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .economic-activity-modal-content .modal-header {
        padding: 15px !important;
    }

    .economic-activity-modal-content .modal-title {
        font-size: 14px !important;
    }

    .economic-activity-modal-content .modal-body {
        padding: 15px 8px 15px 15px !important;
    }

    .company-name-label {
        font-size: 12px !important;
        margin-bottom: 15px !important;
    }

    .economic-activity-list {
        max-height: 190px !important;
        gap: 8px !important;
        padding-right: 8px !important;
    }

    .activity-radio-container {
        padding: 8px !important;
        border-radius: 8px !important;
    }

    .custom-radio-checkmark {
        height: 18px !important;
        width: 18px !important;
        margin-right: 12px !important;
    }

    .custom-radio-checkmark:after {
        width: 8px !important;
        height: 8px !important;
    }

    .activity-name {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    .activity-code {
        font-size: 12px !important;
    }

    .economic-activity-modal-content .submit-activity-btn {
        padding: 10px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    .economicCodeModalWrap .modal-dialog {
        max-width: 500px !important;
    }

    .economic-activity-modal-content .modal-footer.border-0.p-4 {
        padding: 0px 15px 15px 15px !important;
    }

    .economic-code-inner-wrap .lebal_column label {
        font-size: 14px !important;
        margin-bottom: 4px !important;

    }

    .economic-code-inner-wrap input {
        padding: 9px 10px !important;
        font-size: 12px !important;
        border-radius: 4px !important;
    }


    button.search-btn svg {
        width: 14px;
        height: 14px;
    }

    .searchTextIdWrap {
        width: 20px;
        height: 20px;
        right: 4px;
    }

    .searchTextIdWrap svg {
        width: 14px;
        height: 14px;
    }

    .registerForm {
        max-height: 500px;

    }

    .form-group.address-input-wrap textarea {
        height: 30px !important;
    }

    .blank-div {
        height: 20px;
    }

    .mb-3.input-mb-3 {
        margin-bottom: 15px !important;
    }

    #toast-container {
        top: 40px !important;
    }

    #toast-container.toast-top-right {
        top: 40px !important;
    }

    #toast-container.toast-top-left {
        top: 40px !important;
    }

    #toast-container.toast-top-center {
        top: 40px !important;
    }

    #toast-container>.toast {
        font-size: 10px !important;
    }

    .resendWrap,
    a.headChangeLink {
        font-size: 11px !important;
    }

    .flatpickr-current-month .flatpickr-monthDropdown-months,
    input.numInput.cur-year {
        font-size: 11px !important;
    }

    img.graphImg {
        height: 310px;
    }

    button.flatpickr-cancel-btn {
        font-size: 11px !important;
        height: 25px !important;
        display: flex;
        align-items: center;
    }

    .image-preview-wrapper {
        margin-top: 15px;
    }

    .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    button.submit-btn.btn.btn-primary.w-100.authButton {
        margin-top: 15px;
    }

    .error {
        font-size: 9px;
    }

    h5,
    .forgot-title {
        font-size: 15px;
        margin-bottom: 3px !important;
    }

    .main-notification-page::-webkit-scrollbar {
        width: 4px;
    }

    button.sidebar-toggle-btn svg {
        width: 9px;
        height: 9px;
    }

    a.text-success.ml-2.signout-btn,
    .view-icon-link {
        width: 24px !important;
        height: 24px !important;
    }

    span.avatar {
        width: 25px;
        height: 25px;
    }

    span.toggle-eye1 svg {
        width: 12px;
        height: 12px;
    }

    .login-form.verifyOtp {
        padding: 28px 30px;
    }

    .view-icon-link {
        height: 20px;
    }

    label {
        font-size: 10px !important;
    }

    .form-container h3 {
        font-size: 11px;
        margin-bottom: 14px;
    }

    .login-form.forgotEmailWrap {
        padding: 41px 30px 70px;
    }

    .form-container .form-group label {
        font-size: 10px;
    }

    .login-form.verifyOtp .loginHead {
        gap: 15px;
    }

    .lableTooltip svg {
        width: 11px !important;
        height: 11px !important;
    }

    .header-actions {
        gap: 15px;
    }

    .main-header {
        padding: 10px 15px;
        height: 49px;
        z-index: 1000;
        border-top-right-radius: 10px;
    }

    h5,
    .forgot-title {
        margin-bottom: 5px;
    }

    p {
        font-size: 12px;
        line-height: normal;
    }

    p.forgot-subtitle strong {
        font-weight: 400;
    }

    .text-danger.small.mb-2.error.pass-error {
        bottom: -15px;
        font-size: 10px;
    }

    .login-form {
        max-width: 359px;
        padding: 45px 30px 10px;
        border-radius: 15px;
    }

    .notification-item {
        padding: 8px 11px;
        border-radius: 4px;
    }

    .tab-header {
        gap: 5px;
    }

    .loginHead {
        gap: 34.3px;
    }

    a.fogotPass {
        text-decoration: none;
        color: var(--text-color);
        font-size: 10px;
    }

    .authButton {
        padding: 8px 20px;
        border-radius: 5px;
        font-size: 10px;
        font-weight: 100;
    }

    .loginHead img {
        margin-bottom: 15px;
        width: 105px;
        height: 92px;
        object-fit: cover;
    }

    .remmberForgotwrap {
        margin-bottom: 25px;
    }

    .dropdown-btn img,
    .calendar-btn.date-range img {
        width: 9px;
        height: 7px;
    }

    .form-control,
    .dataTables_filter input,
    .form-group.address-input-wrap textarea {
        padding: 5.5px 8px;
        font-size: 10px;
        background-size: 11px 12px;
        background-position: 7px center;
        line-height: 100%;
        height: 27px;
        border-radius: 4px !important;
        border: 0.5px solid #E2E8F0 !important;
        width: 176px;
    }

    .form-control::placeholder,
    .dataTables_filter input::placeholder {
        font-size: 10px !important;
    }

    .dataTables_filter input {
        padding-left: 23px !important;
    }

    span.icon svg {
        width: 20px;
    }

    .form-control::placeholder {
        font-size: 13px;
    }

    .loginBottom p,
    .loginBottom a {
        font-size: 11px;
    }

    .bi-eye::before,
    .bi-eye-slash::before {
        width: 12px;
        height: 12px;
    }

    .login-error,
    .usernameerror {
        bottom: -22px;
    }

    .form-check {
        margin: 0 !important;
        align-items: center;
        height: auto !important;
        min-height: auto;
        display: flex;
        gap: 5px;
        font-size: 10px;
    }

    .input-group .btn {
        right: 8px;
        top: 1px;
    }

    span.pending-success {
        background: #006B041A !important;
        color: #006B04 !important;
    }

    .tab-container input {
        height: 30px;
        padding: 8px !important;
        font-weight: 300 !important;
    }

    #history-table_filter input {
        padding-left: 23px !important;
    }

    .form-group {
        margin-bottom: 15px !important;
    }

    input[type="password"].form-control,
    input[type="text"].form-control {
        border-radius: 4px !important;
    }

    .form-actions button {
        font-size: 9px;
        font-weight: 200 !important;
    }

    button.update {
        padding: 7px 12px;
        border-radius: 5px;
    }

    li.logoutBtn {
        padding: 7.5px 8px;
    }

    span.info-icon svg {
        width: 100%;
        height: 100%;
    }

    span.info-icon {
        width: 11px;
        height: 13px;
        display: flex;
    }

    span.toggle-eye svg {
        width: 13px;
        height: 13px;
    }

    form {
        gap: 15px !important;
    }

    .tab-container input::placeholder {
        font-size: 10px;
        font-weight: 300;
    }

    #toast-container>.toast {
        padding: 8px 15px 8px 36px !important;
    }

    .container.table-Container {
        background: #fff;
        padding: 15px 0px 0 !important;
    }

    .dataTables_wrapper .dataTables_filter {
        float: left !important;
        text-align: right;
        padding-left: 12px;
        padding-bottom: 14px;
    }

    .forgotForm {
        gap: 20px;
    }

    button.forgot-submit.authButton.resetBtn {
        margin-top: 20px;
    }

    .profile-image-icon {
        width: 90px;
        height: 90px;
    }

    label.upload-btn svg {
        width: 70px;
        height: 70px;
    }

    .headChangeLink {
        font-size: 14px;
    }

    a.headChangeLink {
        font-size: 12px;
    }

    .stat-icon {
        width: 39px;
        height: 39px;
        margin-bottom: 12px;
    }

    .stat-value {
        font-size: 13px;
        margin-bottom: 2px;
        font-weight: 500;
    }

    .stat-label {
        font-size: 10px;
    }

    .dashboard-stat-card {
        padding: 20px;
    }

    .dashboard-chart-card {
        padding: 16px;
    }

    .dashboard-ul {
        margin-top: 15px;
    }

    .chart-label {
        font-size: 11px;
        font-weight: 500;
    }

    .profile-avatar-container {
        position: relative;
        width: 80px;
        height: 80px;
        margin-right: 15px;
    }

    span.camera-icon svg {
        width: 27px;
        height: 27px;
    }

    .profile-name {
        font-size: 14px;
    }

    .tab-content {
        padding: 16px 0 0px;
    }

    .profile-header {
        gap: 15px;
        padding: 15px 15px 0px 15px;
        border-radius: 4px;
    }

    .form-container {
        padding: 14px;
        border-radius: 4px;
    }

    .rightContainer {
        padding: 13px 12px;
        max-height: calc(100vh - 49px);
        overflow: auto;
    }

    .rightContainer h4 {
        margin-bottom: 13px;
        font-size: 11.5px;
    }

    table.dataTable tbody th,
    table.dataTable tbody td {
        font-size: 10px;
    }

    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        width: 25px !important;
        height: 25px !important;
    }

    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        width: 12px !important;
        height: 12px !important;
    }

    .flatpickr-current-month {
        margin-top: -4px;
    }

    span.flatpickr-weekday {
        font-size: 11px !important;
        font-weight: 500 !important;
    }

    .sidebarul {
        gap: 7px;
        padding: 6px 10px;
    }

    .sidebarul li a {
        padding: 7.5px 8px !important;
        font-size: 10px;
        gap: 7px;
        font-weight: 100;
        border-radius: 4px !important;
    }

    .logoutBtn button {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 10px;
        font-weight: 100;
        display: flex;
        gap: 7px;
    }

    .grid.main-page {
        gap: 13px;
        width: 50%;
        padding: 15px 14px;
        border-radius: 6px;
        padding-right: 12px;
    }

    .grid-inner {
        gap: 12px;
    }

    input.field-value.form-control {
        font-size: 10px;
        padding: 7px 6px;
        border-radius: 4px !important;
        padding-left: 6px !important;
    }

    .image-gallery img {
        min-height: 80px;
        height: 80px;
        max-height: 80px;
    }

    .map {
        height: 157px;
    }

    .downloadPdfBtn {
        padding: 8px 11px !important;
        font-size: 9px;
        border-radius: 4px !important;
        font-weight: 200 !important;
        gap: 4px;
    }

    .downloadPdfBtn svg {
        width: 13px;
        height: 12px;
    }

    .invoiceBtnWrap {
        gap: 8px;
    }

    .notification-item p {
        font-size: 13px;
    }

    .notification-item strong {
        font-size: 10px;
        font-weight: 400;
    }

    .notification-time {
        font-size: 10px;
    }

    .innerNotificationWrap {
        padding: 14px;
    }

    .notification-box {
        gap: 15px;
    }

    .flatpickr-calendar.rangeMode.animate.arrowTop.arrowLeft.rightMost.open,
    .flatpickr-calendar.rangeMode.animate.arrowTop.arrowLeft.open {
        top: 136px !important;
        right: 26px !important;
    }

    .filter-Wrap {
        gap: 14px;
        right: 14px;
        top: 14px;
    }

    .image-preview svg,
    div#imagePreview img,
    .profile-avatar {
        width: 80px;
        height: 80px;
    }

    table.dataTable>thead>tr>th,
    table.dataTable>thead>tr>td {
        padding: 5px 10px;
        font-size: 10px;
        font-weight: 300 !important;
    }

    /* Remove unnecessary spacing from table thead */
    table.dataTable thead tr,
    table thead tr,
    .table thead tr {
        margin: 0 !important;
        padding: 0 !important;
        line-height: normal !important;
        height: auto !important;
        min-height: 0 !important;
    }

    table.dataTable thead,
    table thead,
    .table thead {
        margin: 0 !important;
        padding: 0 !important;
        border-spacing: 0 !important;
    }

    .sidebar {
        width: 184px;
        min-width: 190px;
    }

    .main-logo img {
        width: auto;
        height: 72px;
    }

    .grid.main-page.main-notification-page {
        padding: 0px 14px 0px 0px;
    }

    .logout-popup-title {
        font-size: 12px;
        padding: 15px 15px;
    }

    button.logout-popup-close-btn svg {
        width: 18px;
        height: 18px;
    }

    .logout-popup-close-btn {
        top: 12px;
    }

    .subcontent {
        padding: 15px 15px;
    }

    .logout-popup-subtitle {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .logout-popup-text {
        font-size: 11.5px;
    }

    .logout-popup-box {
        max-width: 444px !important;
        border-radius: 5px !important;
    }

    /* Custom Confirm Modal - 100% width on mobile */
    .custom-modal {
        padding: 0 !important;
    }

    .custom-modal .modal-overlay {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .logout-popup-actions button {
        border: 1px solid transparent;
        border-radius: 4px;
        padding: 4.5px 10px;
        font-size: 11px;
        font-weight: 200;
    }

    .logout-popup-actions {
        padding: 0px 15px 15px;
    }

    span.toggle-eye1 svg {
        position: absolute;
        top: 61%;
        right: 5px;
    }

    .dashboard-box {
        padding: 12px 15px;
        border-radius: 6px;
    }

    .signout-btn,
    .status {
        background: #066579;
        color: #fff !important;
        border: none;
        padding: 7px;
        border-radius: 3px;
        font-weight: 200;
        font-size: 8px;
        text-decoration: none;
        line-height: normal !important;
        display: flex;
        align-items: center;
        height: 20px;
    }

    .dropdown-btn,
    .calendar-btn.date-range {
        padding: 3px 7px;
        gap: 4px;
        height: 27px;
        font-size: 10px;
        border-radius: 5px;
    }

    ul.nav.nav-pills.flex-column.mb-auto.sidebarul li a svg {
        width: 14px;
        height: 14px;
    }

    .main-logo {
        padding: 14px 0px;
        min-height: 100px;
    }

    .text-center a svg {
        width: 10px;
        height: 8px;
    }

    .status {
        width: 65px;
    }

    .bottom {
        padding: 12px;
    }

    a.paginate_button span {
        font-size: 10px !important;
        margin-right: 3px;
    }

    button#signout-all {
        position: absolute;
        right: 14px;
        font-size: 10px;
        background: #F1F5F9;
        padding: 9.5px 10px;
        line-height: 10px;
        z-index: 99;
        top: 15px;
    }

    a.paginate_button.previous {
        margin-left: 3px !important;
        margin-right: 0 !important;
    }

    a.paginate_button svg {
        width: 8px;
        height: 8px;
    }

    a.paginate_button {
        font-size: 10px !important;
    }

    .table-Container {
        padding: 14px 0px 0px !important;
    }

    .dropdown-menu {
        min-width: 105px !important;
    }

    .dropdown-menu li button {
        font-size: 10px;
    }

    .dashboard-grid {
        gap: 14px;
    }

    input#amountFilterInput {
        width: 120px;
    }

    .filteramount {
        background-size: 12px 10px !important;
        padding-left: 25px !important;
    }

    .notification-time img {
        width: 10px;
        height: 12px;
    }

    .tab-link {
        font-size: 12px;
        padding: 0px 7px 3px 7px;
    }

    /* div#history-table_filter input { padding-left: 25px !important; } */
    .tab-link.active {
        border-bottom: 1px solid #066579;
    }

    span#calendarLabel {
        gap: 4px;
    }
}

@media (max-width: 768px) {

    /* Mobile Hamburger Menu Styles */
    .desktop-toggle {
        display: none !important;
    }

    .mobile-hamburger-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
        cursor: pointer;
        margin-right: auto;
    }

    .mobile-hamburger-btn svg {
        width: 24px;
        height: 24px;
    }

    /* Sidebar Mobile Styles */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        background: var(--background-color);
        will-change: transform;
        overflow: visible !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    .sidebar:not(.mobile-open) {
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Mobile Sidebar Overlay */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        will-change: opacity;
    }

    body.sidebar-open::before {
        opacity: 1;
        pointer-events: auto;
    }

    /* Mobile Close Button */
    .mobile-sidebar-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 8px;
        z-index: 1001;
    }

    .mobile-sidebar-close-btn svg {
        width: 24px;
        height: 24px;
    }

    /* Rightbar full width on mobile */
    .rightBar,
    .rightbar {
        width: 100% !important;
    }

    /* Ensure sidebar shows text and full width when mobile-open */
    .sidebar.mobile-open .sidebarul li a span,
    .sidebar.mobile-open .logoutBtn button span {
        display: inline-block !important;
    }

    .sidebar.mobile-open .sidebarul li a {
        justify-content: flex-start;
        gap: 10px;
        width: 90% !important;
    }

    .sidebar.mobile-open .main-logo {
        padding: 16px 0px;
        min-height: 133px;
    }

    .sidebar.mobile-open .main-logo img {
        width: 150px !important;
        height: 70px !important;
    }

    .sidebar.mobile-open .sidebarul {
        padding: 10px;
        gap: 10px;
    }

    .profile-avatar-container {
        width: 80px;
        height: 80px;
        max-width: 40vw;
        max-height: 40vw;
    }

    .dataTables_wrapper .dataTables_filter {
        margin-top: .5em;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .dashboard-box {
        width: 100%;
    }

    /* Dashboard Mobile Responsive */
    .rightContainer {
        padding: 12px 10px !important;
        max-height: calc(100vh - 49px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .rightContainer h4 {
        font-size: 14px !important;
        margin-bottom: 15px !important;
        font-weight: 500;
    }

    .dashboard-grid {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
    }

    .dashboard-box {
        width: 100% !important;
        padding: 15px 12px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    .dashboard-box .stat-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 12px !important;
    }

    .dashboard-box .stat-icon svg {
        width: 40px !important;
        height: 40px !important;
    }

    .dashboard-box .stat-value {
        font-size: 16px !important;
        font-weight: 500 !important;
        margin-bottom: 4px !important;
    }

    .dashboard-box .stat-label {
        font-size: 11px !important;
        color: #94A3B8;
    }

    .chart-label {
        font-size: 12px !important;
        font-weight: 500 !important;
        margin-bottom: 10px !important;
    }

    .dashboard-box.invoice-box,
    .dashboard-box.issuance-breakout {
        height: auto !important;
        min-height: 250px !important;
        padding: 15px 12px !important;
    }

    .dashboard-box.invoice-box canvas,
    .dashboard-box.issuance-breakout canvas {
        width: 100% !important;
        height: 200px !important;
        max-height: 200px !important;
    }

    .dashboard-stat-card {
        width: 100% !important;
        min-width: 100% !important;
        padding: 15px !important;
        margin-bottom: 12px;
    }

    .dashboard-stat-card .stat-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 12px !important;
    }

    .dashboard-stat-card .stat-value {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .dashboard-stat-card .stat-label {
        font-size: 11px !important;
    }



    .sidebar.mobile-open {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }

    .leftBar {
        width: 40px !important;
    }

    .main-logo {
        padding: 10px 0px;
        min-height: 70px;
    }

    .main-logo img {
        width: 45px !important;
        height: 45px !important;
        object-fit: contain;
    }

    .sidebarul {
        padding: 6px 4px;
        gap: 6px;
    }

    .sidebarul li a {
        padding: 10px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        border-radius: 6px !important;
    }

    .sidebarul li a span {
        display: none !important;
    }

    .sidebarul li a svg {
        width: 20px !important;
        height: 20px !important;
    }

    li.logoutBtn {
        padding: 6px 4px;
        display: flex;
        justify-content: center;
    }

    .logoutBtn button {
        padding: 10px !important;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .logoutBtn button span {
        display: none !important;
    }

    .logoutBtn button svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Ensure active and hover states work on mobile */
    li.nav-item.active a {
        background: #066579 !important;
    }

    .sidebarul li a:hover {
        color: #fff !important;
        background: rgba(6, 101, 121, 0.2) !important;
    }

    .sidebar.collapsed .sidebarul li span,
    .sidebar.collapsed .sidebarul li button span,
    .sidebar.collapsed .sidebarul li a {
        width: auto !important;
    }

    /* Dashboard Mobile Responsive */
    .rightContainer {
        padding: 12px 10px !important;
        max-height: calc(100vh - 49px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .rightContainer h4 {
        font-size: 14px !important;
        margin-bottom: 15px !important;
        font-weight: 500;
    }

    .dashboard-grid {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
    }

    .dashboard-box {
        width: 100% !important;
        padding: 15px 12px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    .dashboard-box .stat-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 12px !important;
    }

    .dashboard-box .stat-icon svg {
        width: 40px !important;
        height: 40px !important;
    }

    .dashboard-box .stat-value {
        font-size: 16px !important;
        font-weight: 500 !important;
        margin-bottom: 4px !important;
    }

    .dashboard-box .stat-label {
        font-size: 11px !important;
        color: #94A3B8;
    }

    .chart-label {
        font-size: 12px !important;
        font-weight: 500 !important;
        margin-bottom: 10px !important;
    }

    .dashboard-box.invoice-box,
    .dashboard-box.issuance-breakout {
        height: auto !important;
        min-height: 250px !important;
        padding: 15px 12px !important;
    }

    .dashboard-box.invoice-box canvas,
    .dashboard-box.issuance-breakout canvas {
        width: 100% !important;
        height: 200px !important;
        max-height: 200px !important;
    }

    .dashboard-stat-card {
        width: 100% !important;
        min-width: 100% !important;
        padding: 15px !important;
        margin-bottom: 12px;
    }

    .dashboard-stat-card .stat-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 12px !important;
    }

    .dashboard-stat-card .stat-value {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .dashboard-stat-card .stat-label {
        font-size: 11px !important;
    }

    /* Transaction Validation Page Mobile Responsive */
    .tableWrap {
        width: 100%;
        overflow-x: auto;
    }

    .table-Container {
        padding: 15px 10px 0 !important;
        overflow-x: auto;
    }

    .filter-Wrap {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        gap: 10px !important;
        align-items: stretch !important;
        margin-bottom: 15px;
        display: flex !important;
    }

    .dropdown-btn,
    .calendar-btn.date-range {
        width: fit-content !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        justify-content: space-between !important;
        height: auto !important;
        min-height: 40px;
        position: relative;
    }

    .dataTables_scrollBody {
        max-height: calc(-370px + 100vh) !important;
        height: calc(-370px + 100vh) !important;
    }

    .dropdown-btn img,
    .calendar-btn.date-range img {
        width: 12px !important;
        height: 12px !important;
    }

    button#statusFilterBtn {
        width: 50% !important;
        position: relative !important;
    }

    div#calendarTrigger {
        flex: 1;
    }

    .transaction-validation-date-range {
        width: 50% !important;
    }

    .transaction-validation-date-range div#calendarTrigger {
        width: 100% !important;
    }

    .dropdown-container.dropdownrealtive {
        width: 50%;
        position: relative;
    }

    span#calendarLabel {
        justify-content: space-between;
        width: 100%;
    }

    div#users-table_filter {
        margin: 0;
    }



    /* Position dropdown below button */
    .filter-Wrap button#statusFilterBtn {
        position: relative !important;
    }

    .filter-Wrap #statusDropdown {
        position: absolute !important;
        top: calc(100% + 5px) !important;
        left: 0 !important;
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
        margin-top: 0 !important;
        z-index: 1000 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* When dropdown is shown */
    #statusDropdown[style*="display: block"],
    #statusDropdown.show,
    #statusDropdown:not([style*="display: none"]) {
        position: absolute !important;
        top: calc(100% + 5px) !important;
        left: 0 !important;
        width: 50% !important;
    }

    .dropdown-menu {
        position: absolute !important;
        top: calc(100% + 5px) !important;
        left: 0 !important;
        width: 100% !important;
        margin-top: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 1000 !important;
    }

    .dropdown-menu li button {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    #calendarLabel {
        font-size: 13px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* .dataTables_scrollHead,
    .dataTables_scrollBody {
        overflow-x: auto !important;
    } */

    table.dataTable {
        width: 100% !important;
        min-width: 600px;
    }

    table.dataTable thead th,
    table.dataTable tbody td {
        font-size: 11px !important;
        /* padding: 8px 6px !important; */
        white-space: nowrap;
    }

    /* Remove unnecessary spacing from table thead on mobile */
    table.dataTable thead tr,
    table thead tr,
    .table thead tr {
        margin: 0 !important;
        padding: 0 !important;
        line-height: normal !important;
        height: auto !important;
        min-height: 0 !important;
    }

    table.dataTable thead,
    table thead,
    .table thead {
        margin: 0 !important;
        padding: 0 !important;
        border-spacing: 0 !important;
    }

    .dataTables_filter {
        padding-left: 10px !important;
        padding-bottom: 15px !important;
    }

    .dataTables_filter input {
        width: 100% !important;
        font-size: 12px !important;
    }

    .dataTables_paginate {
        padding: 10px !important;
        flex-wrap: wrap;
        justify-content: center !important;
    }

    .flatpickr-calendar.rangeMode.animate.arrowTop.arrowLeft.rightMost.open,
    .flatpickr-calendar.rangeMode.animate.arrowTop.arrowLeft.open {
        right: 8px !important;
        left: auto !important;
    }

    /* Table Action Buttons Mobile */
    tr td:last-child {
        display: flex !important;
        gap: 6px !important;
    }

    .dataTables_scrollBody td:last-child {
        width: auto !important;
        text-align: center !important;
    }

    .view-icon-link,
    a.text-success.ml-2.signout-btn {
        width: 28px !important;
        height: 28px !important;
        padding: 6px !important;
        min-width: 28px;
    }

    .view-icon-link svg,
    a.text-success.ml-2.signout-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    .signout-btn,
    .status {
        font-size: 10px !important;
        padding: 6px 8px !important;
        height: 28px !important;
        min-width: auto;
    }

    /* Empty Overlay Mobile */
    #users-table_wrapper .dt-empty-overlay,
    #history-table_wrapper .dt-empty-overlay {
        font-size: 12px !important;
        padding: 20px;
    }

    /* Logout Modal - 100% width on mobile */
    .logout-popup-box {
        max-width: 95% !important;
        width: 95% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        min-width: 95% !important;
    }

    /* Custom Confirm Modal - 100% width on mobile */
    .custom-modal {
        padding: 0 !important;
    }

    .custom-modal .modal-overlay {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* Desktop Styles - Hide mobile elements, show desktop toggle */
@media (min-width: 769px) {
    .mobile-sidebar-close-btn {
        display: none !important;
    }

    .mobile-hamburger-btn {
        display: none !important;
    }


    .sidebar {
        position: relative !important;
        transform: translateX(0) !important;
        height: auto !important;
    }

    body.sidebar-open::before {
        display: none !important;
    }

    /* Desktop Logout Modal - Proper centered styling */
    .logout-popup-box {
        border-radius: 8px !important;
        margin: 0 auto !important;
    }

    /* Desktop Custom Modal - Proper centered styling */
    .custom-modal {
        padding: 20px !important;
    }

    .custom-modal .modal-overlay {
        width: 464px !important;
        max-width: 464px !important;
        margin: 0 auto !important;
        border-radius: 8px !important;
    }
    ul.nav.nav-pills.sidebarul {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    li.nav-item {
        display: flex;
    }
}

@media (max-width: 480px) {
    .profile-avatar-container {
        width: 60px;
        height: 60px;
        max-width: 50vw;
        max-height: 50vw;
    }

    ul.nav.nav-pills.sidebarul {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    li.nav-item {
        display: flex;
    }
    .leftBar {
        width: 40px !important;
    }

    .main-logo {
        padding: 8px 0px;
        min-height: 60px;
    }

    .main-logo img {
        width: 30px !important;
        height: 30px !important;
    }

    .sidebarul {
        padding: 5px 3px !important;
        gap: 5px;
    }

    .sidebarul li a {
        padding: 8px !important;
        border-radius: 5px !important;
    }

    .sidebarul li a svg {
        width: 18px !important;
        height: 18px !important;
    }

    li.logoutBtn {
        padding: 5px 3px;
    }

    .logoutBtn button {
        padding: 8px !important;
    }

    .logoutBtn button svg {
        width: 18px !important;
        height: 18px !important;
    }

    .rightbar {
        width: calc(100% - 40px) !important;
    }

    /* Ensure active and hover states work on small mobile */
    li.nav-item.active a {
        background: #066579 !important;
    }

    .sidebarul li a:hover {
        color: #fff !important;
        background: rgba(6, 101, 121, 0.2) !important;
    }

    /* Dashboard Small Mobile Responsive */
    .rightContainer {
        padding: 10px 8px !important;
    }

    /* Transaction Validation Page - Right Container Small Mobile */
    .rightContainer h4 {
        font-size: 13px !important;
        margin-bottom: 10px !important;
        padding: 0 3px;
    }

    .rightContainer .tableWrap {
        overflow-x: auto;
    }

    .rightContainer h4 {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    .dashboard-grid {
        gap: 10px !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .dashboard-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 10px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }

    .dashboard-box .stat-icon {
        width: 35px !important;
        height: 35px !important;
        margin-bottom: 10px !important;
    }

    .dashboard-box .stat-icon svg {
        width: 35px !important;
        height: 35px !important;
    }

    .dashboard-box .stat-value {
        font-size: 14px !important;
        margin-bottom: 3px !important;
    }

    .dashboard-box .stat-label {
        font-size: 10px !important;
    }

    .chart-label {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .dashboard-box.invoice-box,
    .dashboard-box.issuance-breakout {
        min-height: 220px !important;
        padding: 12px 10px !important;
    }

    .dashboard-box.invoice-box canvas,
    .dashboard-box.issuance-breakout canvas {
        height: 180px !important;
        max-height: 180px !important;
    }

    .dashboard-stat-card {
        padding: 12px !important;
    }

    .dashboard-stat-card .stat-icon {
        width: 35px !important;
        height: 35px !important;
        margin-bottom: 10px !important;
    }

    .dashboard-stat-card .stat-value {
        font-size: 14px !important;
    }

    .dashboard-stat-card .stat-label {
        font-size: 10px !important;
    }

    /* Transaction Validation Page Small Mobile Responsive */
    .table-Container {
        padding: 12px 8px 0 !important;
    }

    .filter-Wrap {
        gap: 8px !important;
        margin-bottom: 12px;
    }

    .dropdown-btn,
    .calendar-btn.date-range {
        padding: 8px 10px !important;
        font-size: 12px !important;
        min-height: 36px;
    }

    .dropdown-btn img,
    .calendar-btn.date-range img {
        width: 10px !important;
        height: 10px !important;
    }

    /* Dropdown Menu Small Mobile - Open Below */
    .filter-Wrap #statusDropdown {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 0 !important;
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
        margin-top: 0 !important;
        z-index: 1000 !important;
    }

    /* When dropdown is shown */
    #statusDropdown[style*="display: block"],
    #statusDropdown.show,
    #statusDropdown:not([style*="display: none"]) {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 0 !important;
        width: 50% !important;
    }

    .dropdown-menu {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 0 !important;
        width: 100% !important;
        margin-top: 0 !important;
        z-index: 1000 !important;
    }

    .dropdown-menu li button {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }

    #calendarLabel {
        font-size: 12px !important;
    }

    table.dataTable {
        min-width: 500px;
    }

    table.dataTable thead th,
    table.dataTable tbody td {
        font-size: 10px !important;
        /* padding: 6px 4px !important; */
    }

    /* Remove unnecessary spacing from table thead on small mobile */
    table.dataTable thead tr,
    table thead tr,
    .table thead tr {
        margin: 0 !important;
        padding: 0 !important;
        line-height: normal !important;
        height: auto !important;
        min-height: 0 !important;
    }

    table.dataTable thead,
    table thead,
    .table thead {
        margin: 0 !important;
        padding: 0 !important;
        border-spacing: 0 !important;
    }

    .dataTables_filter {
        padding-left: 8px !important;
        padding-bottom: 12px !important;
    }

    .dataTables_filter input {
        width: 100% !important;
        font-size: 11px !important;
    }

    .dataTables_paginate {
        padding: 0px !important;
        gap: 6px !important;
    }

    a.paginate_button {
        padding: 2px 8px !important;
        font-size: 10px !important;
        height: 22px !important;
    }


    /* Table Action Buttons Small Mobile */
    tr td:last-child {
        gap: 5px !important;
    }

    .view-icon-link,
    a.text-success.ml-2.signout-btn {
        width: 26px !important;
        height: 26px !important;
        padding: 5px !important;
        min-width: 26px;
    }

    .view-icon-link svg,
    a.text-success.ml-2.signout-btn svg {
        width: 12px !important;
        height: 12px !important;
    }

    .signout-btn,
    .status {
        font-size: 9px !important;
        padding: 5px 6px !important;
        height: 26px !important;
    }

    /* Empty Overlay Small Mobile */
    #users-table_wrapper .dt-empty-overlay,
    #history-table_wrapper .dt-empty-overlay {
        font-size: 11px !important;
        padding: 15px;
    }

    /* Logout Modal - 100% width on small mobile */
    .logout-popup-box {
        max-width: 95% !important;
        width: 95% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        min-width: 95% !important;
    }

    /* Custom Confirm Modal - 100% width on small mobile */
    .custom-modal {
        padding: 0 !important;
    }

    .custom-modal .modal-overlay {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .login-form {
        max-width: 500px;
    }
}

/* Tablet Sidebar - Icon Only */
@media (max-width: 991px) and (min-width: 769px) {
    .sidebar {
        width: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
    }

    .leftBar {
        width: 65px !important;
    }

    .main-logo {
        padding: 12px 0px;
        min-height: 80px;
    }

    .main-logo img {
        width: 50px !important;
        height: 50px !important;
        object-fit: contain;
    }

    .sidebarul {
        padding: 7px 5px;
        gap: 7px;
    }

    .sidebarul li a {
        padding: 11px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        border-radius: 7px !important;
    }

    .sidebarul li a span {
        display: none !important;
    }

    .sidebarul li a svg {
        width: 21px !important;
        height: 21px !important;
        margin: 0 auto;
    }

    li.logoutBtn {
        padding: 7px 5px;
        display: flex;
        justify-content: center;
    }

    .logoutBtn button {
        padding: 11px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 100%;
    }

    .logoutBtn button span {
        display: none !important;
    }

    .logoutBtn button svg {
        width: 21px !important;
        height: 21px !important;
        margin: 0 auto;
    }

    .rightbar {
        width: calc(100% - 65px) !important;
    }

    .rightBar {
        width: calc(100% - 65px) !important;
    }

    /* Ensure active and hover states work on tablet */
    li.nav-item.active a {
        background: #066579 !important;
    }

    .sidebarul li a:hover {
        color: #fff !important;
        background: rgba(6, 101, 121, 0.2) !important;
    }

    /* Dashboard Tablet Responsive */
    .rightContainer {
        padding: 15px 12px !important;
    }

    .rightContainer h4 {
        font-size: 15px !important;
        margin-bottom: 18px !important;
    }

    .dashboard-grid {
        flex-direction: column !important;
        gap: 15px !important;
        flex-wrap: nowrap !important;
    }

    .dashboard-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 15px !important;
        box-sizing: border-box !important;
    }

    .dashboard-box .stat-icon {
        width: 42px !important;
        height: 42px !important;
        margin-bottom: 14px !important;
    }

    .dashboard-box .stat-icon svg {
        width: 42px !important;
        height: 42px !important;
    }

    .dashboard-box .stat-value {
        font-size: 17px !important;
        margin-bottom: 5px !important;
    }

    .dashboard-box .stat-label {
        font-size: 12px !important;
    }

    .chart-label {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    .dashboard-box.invoice-box,
    .dashboard-box.issuance-breakout {
        min-height: 280px !important;
        padding: 18px 15px !important;
    }

    .dashboard-box.invoice-box canvas,
    .dashboard-box.issuance-breakout canvas {
        height: 220px !important;
        max-height: 220px !important;
    }

    .dashboard-stat-card {
        width: 100% !important;
        padding: 18px !important;
    }

    .dashboard-stat-card .stat-icon {
        width: 42px !important;
        height: 42px !important;
        margin-bottom: 14px !important;
    }

    .dashboard-stat-card .stat-value {
        font-size: 17px !important;
    }

    .dashboard-stat-card .stat-label {
        font-size: 12px !important;
    }
}

/* Mobile Large (576px to 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .login-container {
        padding: 15px;
        align-items: flex-start;
        padding-top: 50px;
    }

    .login-form {
        max-width: 300px;
        width: 100%;
        padding: 25px 20px;
        border-radius: 10px;
    }

    .loginHead {
        gap: 25px;
    }

    .loginHead img {
        margin-bottom: 10px;
        width: 70px;
        height: 55px;
        object-fit: contain;
    }

    h5,
    .forgot-title {
        font-size: 15px;
    }

    .loginTitle p {
        font-size: 12px;
    }

    .form-control,
    .dataTables_filter input {
        padding: 10px 12px;
        font-size: 14px;
    }

    .remmberForgotwrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 25px;
    }

    .authButton {
        padding: 10px 18px;
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    .form-check .form-check-input {
       
        margin-left: -15px;
    }
    .login-container {
        padding: 15px;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        min-height: 100vh;
        display: flex;
    }

    a.headChangeLink {
        font-size: 12px;
    }

    .loginBottom p,
    .loginBottom a {
        font-size: 12px;
    }

    .login-form {
        width: 95%;
        padding: 40px 15px 15px;
        border-radius: 12px;
        margin: 0;
    }

    .loginHead {
        gap: 20px;
    }

    .loginHead img {
        margin-bottom: 8px;
        width: 100px;
        height: 80px;
        object-fit: contain;
    }

    h5,
    .forgot-title {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .loginTitle p {
        font-size: 11px;
        line-height: 1.4;
    }

    .form-label {
        font-size: 12px;
        margin-bottom: 6px;
    }

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

    .remmberForgotwrap {
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }

    .form-check .form-check-label {
        font-size: 12px;
    }

    .fogotPass {
        font-size: 12px;
    }

    .authButton {
        padding: 6px 8px !important;
        font-size: 10px;
        border-radius: 8px;
    }


    .bi-eye::before,
    .bi-eye-slash::before {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 375px) {
    .login-container {
        padding: 10px;
        padding-top: 15px;
    }

    .login-form {
        max-width: 95%;
        padding: 18px 25px;
        border-radius: 8px;
    }

    .loginHead {
        gap: 15px;
    }

    .loginHead img {
        width: 45px;
        height: 35px;
        object-fit: contain;
    }

    h5,
    .forgot-title {
        font-size: 13px;
    }

    .loginTitle p {
        font-size: 10px;
    }

    .form-control,
    .dataTables_filter input {
        padding: 8px 10px;
        font-size: 12px;
    }

    .authButton {
        padding: 8px 14px;
        font-size: 12px;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .login-container {
        padding-top: 10px;
        align-items: center;
    }

    .login-form {
        padding: 20px 25px;
    }

    .loginHead {
        gap: 20px;
    }

    .loginHead img {
        margin-bottom: 10px;
        width: 45px;
        height: 35px;
        object-fit: contain;
    }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .loginHead img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

@media (prefers-reduced-motion: reduce) {

    .authButton,
    .form-control,
    #loader-overlay {
        transition: none;
    }
}

@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here if needed */
}

@media print {
    .login-container {
        background: white !important;
    }

    .login-form {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

.input-group {
    position: relative;
}

.register-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #181e25 url('/public/images/authBg.png') repeat;
}

.register-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 2.5rem 2rem 2rem 2rem;
    max-width: 400px;
    width: 100%;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.register-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #222f3e;
    text-align: center;
}

.register-subtitle {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 0px;
    text-align: center;
}

.register-form {
    width: 100%;
}

.profile-image-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.profile-image-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0.3rem;
}

.profile-image-icon {
    background: #f1f5f9;
    border-radius: 8px;
    margin-bottom: 0.2rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.2s, height 0.2s;
}

@media (max-width: 991px) {
    .profile-image-icon {
        width: 90px;
        height: 90px;
        max-width: 25vw;
        max-height: 25vw;
    }
}

@media (max-width: 575px) {
    .profile-image-icon {
        width: 70px;
        height: 70px;
        max-width: 40vw;
        max-height: 40vw;
    }
}

.sidebar.collapsed .sidebarul li span,
.sidebar.collapsed .sidebarul li button span,
.sidebar.collapsed .sidebarul li a {
    font-size: 0 !important;
    width: 40px;
}

.sidebar.collapsed .sidebarul li a svg {
    font-size: 20px !important;
    margin: 0 auto;
    display: block;
}

.sidebar.collapsed li.logoutBtn {
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar.collapsed li.logoutBtn span {
    display: none;
}

@media (max-width: 1200px) {
    .error {
        font-size: 8px !important;
    }
}

/* Language Switcher Styles */
.language-switcher {
    display: inline-block;
    background: #F1F5F9;
    border-radius: 9px;
}

.language-switch-buttons {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}

.language-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    background: #F1F5F9;
    color: #64748B;
    border-radius: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.language-btn:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.language-btn:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.language-btn.active {
    background: #066579;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

.language-btn.active .language-text {
    color: #FFFFFF !important;
}



.flag-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px !important;
    height: 14px !important;
    line-height: 1;
}

.flag-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 0 !important;
}

.language-text {
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    color: #171717;
}

select#tipo:focus-visible {
    outline: none !important;
}

/* Responsive adjustments for language switcher */
@media (max-width: 1540px) {
    .language-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .flag-icon {
        width: 18px;
        height: 18px;
    }

    .language-text {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .language-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    .grid.main-page{
        width: 100% !important;
    }
    .authButton{
        padding: 6px 8px !important;
        font-size: 10px;
    }
    button#logoutBtn svg {
        width: 18px;
        height: 18px;
    }
    .toast.toast-success {
        background-color: rgba(36, 151, 130, 0.4) !important;
    }

    .toast-success .toast-message {
        color: #249782 !important;
    }

    span.avatar img {
        height: 100% !important;
    }

    .filter-Wrap {
        z-index: 99 !important;
    }

    form.form-edit-profile-form {
        gap: 0 !important;
    }

    .form-group {
        margin-bottom: 12px !important;
    }

    .error {
        font-size: 10px !important;
    }

    .text-danger.small.mb-2.error.pass-error {
        bottom: -11px !important;
    }

    .flag-icon {
        width: 16px;
        height: 16px;
    }

    .language-text {
        font-size: 11px;
    }
}

/* Fix iOS password dots too large - use small-caption font */
@media screen and (max-width: 768px) {
    input[type="password"],
    input[type="password"].form-control {
        font-family: small-caption !important;
        font-size: 14px !important;
    }
}