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


body {
    font-family: "Plus Jakarta Sans", sans-serif !important;
}

p,
span,
h1,
h2,
h3,
h4,
h5,
strong {
    font-family: "Plus Jakarta Sans", sans-serif !important;

}

.list-search-bar {
    width: 25em;
}

.logo-img {
    object-fit: contain;
    width: 100%;
    height: 3em;
}

/* Fixes start */
.sidebar-close-icon {
    top: 25px !important;
}

.common-upload-img-preview {
    height: 3em;
}

/* Fixes end */


/* common css */

.common-count-badge {
    background-color: #3B82F6;
    color: white;
    border-radius: 0.3em;
    padding: 5px 8px;
    font-size: 15px;
    font-weight: 700;
    margin-left: 2px;
}

.common-title-highlight {
    background-color: #35c169;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
}

/* common css */


/* login page css starts from here */
.main-login-body {
    background-image: url("../../admin-assets/images/Login.svg");
    background-color: #4444E0;
    /* height: 100vh; */
    width: 100%;
    background-size: cover;
    /* background: linear-gradient(to right bottom, #4444E0 40%, grey 60.3%); */
}

.main-login-section {
    height: 100vh;
    display: flex;
    justify-content: center;
}

.login-note-message {
    color: #17CB96;
}

.login-btn {
    background-color: #4444E0 !important;
    color: white !important;
}

/* login page css ends here */


/* chat message css starts from here */
.chat-ticket-sec {
    background-color: #1C84EE0D;
    border-radius: 5px;
    padding: 12px;
    border: 1px dashed #1C84EE;
}


.chat-custom-header {
    background-color: #171F3D !important;
    border-top-right-radius: 10px !important;
    padding-top: 20px !important;
    border-top-left-radius: 10px !important;
    border: none !important;
}

.chat-custom-header a {
    color: #ffffff !important;
}

.chat-ticket-id {
    color: #1C84EE;
}

.chat-box-sec {
    /* background-color: #; */
    background: #3056b0;


    /* overflow: scroll; */
}

.chat-box-image-sec {
    /* border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px; */
}

.chat-conversation-text::after {
    content: none !important;
}

.chat-conversation-list li .chat-conversation-text:first-child::before {
    content: none !important;
}

.chat-message-list {
    background-color: white;
    padding: 8px;
    border-radius: 5px;
    /* margin-top: 2px; */
}

.chat-message-list p {
    font-size: 16px;
    color: black;
}

.chat-message-list-right {
    background-color: #1C84EE;
    color: white;
    padding: 8px;
    border-radius: 5px;
    margin-top: 2px;
    font-size: 16px;
    margin-right: 8px;

}

.chat-box-image-sec img {
    object-fit: cover;
    border-radius: 6px;
}

.chat-message-info-right {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    color: #9EA0A4;
    text-align: end;
    margin-right: 8px;
}

.chat-message-info {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    color: #9EA0A4;
    text-align: end;
}

.chat-message-info-title {
    margin-top: 3px;
    font-size: 14px;
    font-weight: 500;
    color: #101010;
    font-weight: bold;
}

.chat-message-info-title-right {
    margin-top: 3px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0;
}

.divider-with-text {
    display: flex;
    align-items: center;
    text-align: center;
    color: #0000001A;
    font-size: 14px;
    font-weight: 500;
}

.divider-with-text::before,
.divider-with-text::after {
    content: "";
    flex: 1;
    border-bottom: 1px dashed #dee2e6;
}

.divider-with-text:not(:empty)::before {
    margin-right: 0.75rem;
}

.divider-with-text:not(:empty)::after {
    margin-left: 0.75rem;
}

.chat-image-gallery-main {
    display: flex;
    justify-content: end;
}


.chat-image-gallery {
    padding: 10px 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #fff;
    margin-top: 10PX;
    border-radius: 5px;
    justify-content: start;
}

.chat-image-gallery_member {
    padding: 10px 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #fff;
    margin-top: 10PX;
    border-radius: 5px;
    border-top-left-radius: 0;
    justify-content: end;
}

.chat-img-sec {
    /* border: 1px solid rgb(199, 194, 194);
    padding: 15px; */
    border-radius: 8px;
    position: relative;
    display: inline-block;
}

.chat-img-sec {
    position: relative;
    display: inline-block;
}

.overlay-count {

    width: 135px;
    height: 135px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
}

.overlay-count:hover {
    background-color: #000000D9;

}


.chat-img-sec {
    position: relative;
    display: inline-block;
    width: 135px;
    height: 135px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-img-chat img {
    width: 25px !important;
}

.chat-img-sec img {
    width: 120px;
    height: 120px;
    background-size: contain;
    border-radius: 12px;

}

.chat-img-sec:hover {
    background-color: #000000D9;
}

.chat-img-sec:hover img {
    opacity: 0.7;
}

.chat-img-sec:hover .icon-section-chat {
    display: block;
}

.chat-img-sec .icon-section-chat {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background-color: #e9e9fddc; */
    border-radius: 10px;
    gap: 10px;
    padding: 5px 10px;
    cursor: pointer;
    display: none;
}

.highlight-link {
    background-color: yellow;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
    text-decoration: none;
}

.custom-chat-body {
    background: #EEF6FF;

}


.chat-spinner-main {
    height: 190px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(255, 255, 255, 0.9);
    border-top: 6px solid #1c84ee;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* chat message css ends here */

/* View Merchant KYC Document screen css starts from here */

.merchant-view-heading {
    border-bottom: 2px solid #0000000D;
}

.merchant-sub-table .merchant-sub-list {
    display: flex;
    justify-content: space-between;
    padding: 13px 22px;
    position: relative;
    /* border-bottom: 1px solid #0000000D; */
}

.merchant-sub-table .merchant-sub-list::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15px;
    width: 93%;
    height: 1px;
    background-color: #0000000D;
}

.merchant-sub-table .merchant-sub-list:last-child::after {
    content: none;
}

.merchnat-front-document {
    border-right: 1px solid #0000000D;
}

.merchant-sub-table .merchant-sub-list .merchant-sub-list-label {
    font-weight: 600;
    font-size: 14px;
    /* color: #5d7186; */
    color: black;
}

.merchant-sub-table .merchant-sub-list .merchant-sub-list-value {
    font-weight: 500;
    font-size: 14px;
    color: #5d7186;

}

.merchant-documents-heading {
    background-color: #F2F2F2;
}

/* View Merchant KYC Document screen css ends here */

/* view profile page css starts from here */
.copy-icon-btn {
    /* background-color: #e9f3ff;
    border-radius: 8px;
    padding: 6px 8px;
    display: inline-block;
    cursor: pointer; */
}

.profile-copy-icon {
    background-color: #1C84EE1A;
    border-radius: 6px;
    padding: 6px;
    padding-top: 3px;

}

.profile-copy-icon:hover {
    background-color: #1b71c71a;
}

.profile-heading-section {
    background-color: white;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.profile-middle-section {
    background: #F4F2FB;
    /* padding: 20px; */
}

.profile-last-section {
    background-color: white;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}



/* view profile page css ends here */


/* view merchant detail css code starts from here */
.view-merchant-card-custom {
    background-color: #0f1a37;
    color: #fff;
    border-radius: 6px;
}

.view-merchant-profile-img {
    width: 230px !important;
    height: 230px !important;
    object-fit: cover;
    border-radius: 10px;
}

.view-merchant-image-sec {
    width: 230px !important;
    height: 230px !important;

}

.view-merchant-profile-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.custom-badge-warning {
    border: 1px solid #FF9C04;
    color: #FF9C04;
    background-color: #FF9C0433;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
}

.custom-badge-info {
    border: 1px solid #44C6E0;
    color: #44C6E0;
    background-color: #44c6e029;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
}

.custom-badge-info-light {
    /* border: 1px solid #FF9C04; */
    color: white;
    background-color: #FFFFFF1A;
    border-radius: 4px;
    padding: 6px 12px;
    font-weight: 500;
    font-size: 12px;
}

.custom-badge-success {
    color: #17CB96 !important;
    border: 1px solid #17CB96;
    background-color: #CDF3EA;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
}

.custom-badge-danger {
    color: #FF6F66;
    border: 1px solid #FF6F66;
    background-color: #FBE0E0;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
}

.custom-badge-primary {
    color: #3B82F6;
    border: 1px solid #3B82F6;
    background-color: #E7EFFE;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
}

.custom-badge-grey {
    color: #7C7C7C;
    border: 1px solid #ddd;
    background-color: #F8F8F8;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
}

.custom-badge-purple {
    color: #7F56DA;
    border: 1px solid #7F56DA;
    background-color: #F3EFFC;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
}

.custom-badge-pink {
    color: #FF39A5;
    border: 1px solid #FF39A5;
    background-color: #FFECF6;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
}

.custom-badge-orange {
    color: #FF6C2F;
    border: 1px solid #FF6C2F;
    background-color: #FFF1EB;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
}

.custom-badge-success-kyc {
    color: #17CB96 !important;
    border: 1px solid #17CB96;
    background-color: #CDF3EA;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: auto;
    gap: 2px;

}

.custom-badge-orange-kyc {
    color: #FF6C2F !important;
    border: 1px solid #FF6C2F;
    background-color: #FFF1EB;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: auto;
    gap: 2px;

}

.custom-badge-purple-kyc {
    color: #7F56DA !important;
    border: 1px solid #7F56DA;
    background-color: #F3EFFC;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: auto;
    gap: 2px;

}

.custom-badge-primary-kyc {
    color: #3B82F6;
    border: 1px solid #3B82F6;
    background-color: #E7EFFE;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: auto;
    gap: 2px;
}

.custom-badge-primary-payment {
    color: #3B82F6;
    border: 1px solid #3B82F6;
    background-color: #E7EFFE;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 2px;
}

.custom-badge-danger-kyc {
    color: #FF6F66;
    border: 1px solid #FF6F66;
    background-color: #FBE0E0;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: auto;
    gap: 2px;
}

.custom-badge-warning-kyc {
    border: 1px solid #FF9C04;
    color: #FF9C04;
    background-color: #FF9C0433;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: auto;
    gap: 2px;

}

.custom-badge-info-kyc {
    border: 1px solid #44C6E0;
    color: #34b4ab;
    background-color: #EDFAFC;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: auto;
    gap: 2px;
}

.card-header-custom-merchant {
    background-color: #0f1a37;
    color: white;
    /* margin: 8px; */
    font-weight: 500;
    padding: 14px 20px !important;
    border-radius: 4px 4px 0 0;
}

/* .badge-approved {
      background-color: #d1f7ec;
      color: #0f9d58;
      font-weight: 500;
    } */
.support-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e0f0ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 10px;
}

.support-avatar img {
    width: 34px;
    border-radius: 50%;
    background-size: cover;
}

@media screen and (max-width:576px) {
    .view-merchant-main-profile {
        flex-wrap: wrap;
    }

}

/* view merchant detail css code ends here */

/* delete modal style starts from here */
.delete-custom-modal {
    border-radius: 20px;
    border: none;
    text-align: center;
}


.delete-modal-header {
    background-color: #fedcde !important;
    padding-bottom: 20px !important;
}

.delete-modal-icon-container {
    width: 60px;
    height: 60px;
    background-color: #ff485b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.delete-icon-modal {
    font-size: 24px;
    color: #dc3545;
}

.delete-modal-title {
    font-weight: 600;
    font-size: 1.25rem;
}

.delete-modal-body p {
    color: #555;
    margin-bottom: 1.5rem;
}

.delete-modal-footer {
    border-top: none;
    justify-content: center;
    gap: 1rem;
    display: flex;
}

.delete-modal-footer button {
    width: 100%;
}

.delete-btn-cancel {
    background-color: #f7f7f7cd;
    color: #000;
    border-radius: 4px;
    padding: 0.6rem 2rem;
    border: none;
    font-size: 13px;
    font-weight: 500;
}

.del-btn-close {
    padding: 5px !important;
    border-radius: 50% !important;
    color: white !important;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    z-index: 99;
}

.delete-btn-close {
    background-color: #fff !important;
    padding: 5px !important;
    border-radius: 50% !important;
    color: white !important;
    display: flex;
    align-items: center;
    cursor: pointer !important;
    z-index: 99;
    position: relative;
}

.delete-btn-close:hover {
    background-color: #ddd !important;

}


.del-btn-close:hover {
    background-color: #eeeeee !important;

}

.delete-btn-cancel:hover {
    background-color: #eeeeeee0;

}

.delete-btn-confirm {
    background-color: #ff485b;
    color: white;
    border-radius: 4px;
    padding: 0.6rem 2rem;
    border: none;
    font-size: 13px;
    font-weight: 500;
}

.delete-btn-confirm-link {
    background-color: #ff485b;
    color: white;
    border-radius: 4px;
    padding: 0.695rem 2rem;
    border: none;
    font-size: 13px;
    font-weight: 500;
}

.delete-btn-confirm-link:hover {
    background-color: #c82333;

}

.delete-btn-confirm:hover {
    background-color: #c82333;
}

/* delete modal style ends here */

/* SUCCESS modal style starts from here */
.success-custom-modal {
    border-radius: 20px;
    border: none;
    /* padding: 1.5rem; */
    text-align: center;
}

.modal-body-main {
    padding: 1.5rem;
    margin-top: -55px;
}

.success-modal-header {
    background-color: #d7f3e1 !important;
    /* background-color: #7fbeff !important; */
    padding-bottom: 20px !important;
}

.success-modal-icon-container {
    width: 60px;
    height: 60px;
    background-color: #35c169;
    /* background-color: #257fdc !important; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.success-icon-modal {
    font-size: 24px;
    color: #eefff7;
}

.success-modal-title {
    font-weight: 600;
    font-size: 1.25rem;
}

.success-modal-body p {
    color: #555;
    margin-bottom: 1.5rem;
}

.success-modal-footer {
    border-top: none;
    justify-content: center;
    gap: 1rem;
    display: flex;
    width: 100%;
}

.success-modal-footer button {
    width: 100%;
}

.success-btn-cancel {
    background-color: #f7f7f7cd;
    color: #000;
    border-radius: 4px;
    padding: 0.6rem 2rem;
    border: none;
    font-size: 13px;
    font-weight: 500;
}

.success-btn-close {
    background-color: #fff !important;
    padding: 5px !important;
    border-radius: 50% !important;
    color: white !important;
    display: flex;
    align-items: center;
    cursor: pointer !important;
    z-index: 99;
    position: relative;
}

.success-btn-close:hover {
    background-color: #ddd !important;
    /* background-color: #257fdc !important; */

}

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

.success-btn-confirm {
    background-color: #35c169;
    color: white;
    border-radius: 4px;
    padding: 0.6rem 2rem;
    border: none;
    font-size: 13px;
    font-weight: 500;
}

.success-btn-confirm:hover {
    background-color: #55b990;
}



.primary-btn-confirm {
    background-color: #257fdc !important;
    color: white;
    border-radius: 4px;
    padding: 0.6rem 2rem;
    border: none;
    font-size: 13px;
    font-weight: 500;
}

.primary-btn-confirm:hover {
    background-color: #1d72c7 !important;
}


.custom-modal-header {
    font-size: 1.2em;
    font-weight: 600;
    background-color: #257fdc !important;
    margin: 10px;
    margin-bottom: 0;
    border-radius: 15px !important;
}

.custom-modal-header h5 {

    font-size: 1em;
    font-weight: 600;
    margin: 0;
}

.border-radius-small {
    border-radius: 10px !important;
    padding: 1em 2em !important;
    font-size: 1em !important;
    font-weight: 600 !important;
}


.custom-btn-close-modal {
    padding: 5px !important;
    border-radius: 50% !important;
    color: white !important;
    display: flex;
    align-items: center;
}

.custom-btn-close-modal:hover {
    color: #cccccc;

}

/* success modal style ends here */


/* primary modal style starts from here */
.primary-modal-header {
    background-color: #7fbeff !important;
    padding-bottom: 20px !important;
}


.primary-modal-icon-container {
    width: 60px;
    height: 60px;
    background-color: #257fdc !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.primary-btn-confirm {
    background-color: #257fdc;
    color: white;
    border-radius: 4px;
    padding: 0.6rem 2rem;
    border: none;
    font-size: 13px;
    font-weight: 500;
}

/* primary modal style ends here */

/* View Merchant KYC Documents design css */
.view-merchant-card-header {
    background-color: #0f1a37;
    color: white;
    /* margin: 8px; */
    font-weight: 500;
    padding: 14px 20px !important;
    border-radius: 4px 4px 0 0;
}

.view-merchant-card {
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
    /* padding:0 15px; */
    margin-bottom: 20px
}

.view-merchant-status {
    background-color: #d4f8e8;
    color: #1a7f5a;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
}

.view-merchant-doc-box {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAD1BMVEUAAAD///8AAAAAAAAAAAD/AACvjzyvAAAAAXRSTlMAQObYZgAAAC1JREFUGNNjYMAFo2BggAEBbJgZWRhYGxgZGBiYGBkZmhkYmRgYmBhYGBQDwDAOw0vPf2HgAAAAABJRU5ErkJggg==');
    background-repeat: repeat;
    height: 200px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.view-merchant-btn {
    width: 100%;
    margin-top: 10px;
}

.view-merchant-kyc-document-line {
    width: 100%;
    border-bottom: 1px dashed #171F3D26;
    margin: 10px 0;
    margin-bottom: 20px;
}

.primary-custom-card {
    background-color: #0039FF0D;
    border: 2px dashed #EAEDF1;
    border-radius: 10px;
    margin: 2px;
    width: 100%;
    padding: 10px;
}


.card-merchant-custom {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

@media screen and (max-width:768px) {
    .card-merchant-custom {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
    }
}

.view-merchant-custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #efefef;
    border-radius: 10px;
    overflow: hidden;
}

.view-merchant-custom-table-head {
    background-color: #F2F5FF;
}


.view-merchant-custom-table tbody td {
    border-bottom: 1px solid #efefef;
    padding: 14px;
}

.view-merchant-custom-table tbody tr:last-child td {
    border-bottom: none !important;
}


.view-merchant-custom-table th {
    padding: 13px;
    font-weight: bold;
}

.image-placeholder-kyc {
    width: 100%;
    height: 200px;
    background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
        linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
    background-color: #f8f9fa;
    border-radius: 10px;
}

.image-placeholder-kyc img {
    border-radius: 10px !important;
}


/* View Merchant KYC Documents design css */


/* view compliance new design */


.view-merchant-address-section {
    background-color: #F5F7FF;
    border: 1px dashed #B8C7FF80;
    border-radius: 6px;
    padding: 10px;
    margin: 16px;
    min-height: 279px;
}

.profile-head-section-complinace {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
    background-color: #0f1a37;
    color: #fff;
    border-radius: 4px 4px 0 0;
    padding: 1.25rem;
}

.compliance-profile-img {
    border-radius: 8px;
    width: 180px;
    height: 180px;
    object-fit: cover;
}

.custom-badge-light {
    color: #ffffff;
    background-color: #FFFFFF1A;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
}

.card-compliance-custom {
    display: grid;
    gap: 16px;
    padding: 24px 16px;
    grid-template-columns: 2fr 2fr 2fr;
}

@media screen and (max-width:768px) {
    .card-compliance-custom {
        display: grid;
        gap: 16px;
        padding: 24px 16px;
        grid-template-columns: 2fr 2fr;
    }
}

@media screen and (max-width:480px) {
    .card-compliance-custom {
        display: grid;
        gap: 16px;
        padding: 24px 16px;
        grid-template-columns: 2fr;
    }
}

/* view compliance new design */

/* modal payment type css starts from here */
.payment-type-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5em;
    margin-bottom: 1em;
}

.payment-type-card {
    /* width: 30%; */
    border: 2px solid #d7e2eb;
    border-radius: 4px;
}

.payment-type-card:has(input[type="checkbox"]:checked) {
    border: 2px solid #257fdc !important;
}

.payment-type-card:has(input[type="checkbox"]:checked) .payment-card-input {
    background-color: #257fdc !important;

}

.payment-card-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #7fbeff !important;
    padding: 10px;
    height: 45px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.payment-card-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

.payment-card-img img {
    width: 10em;
    height: 6em;
    background-size: cover;
    object-fit: contain;
}

.payment-select {
    display: none;
}

.custom-check-input {
    width: 25px;
    height: 25px;
    display: none;
}

.payment-type-card:has(input[type="checkbox"]:checked) .custom-check-input {
    display: block;
}

@media screen and (max-width:900px) {
    .payment-type-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 480px) {
    .payment-type-wrapper {
        grid-template-columns: 1fr;
    }
}

/* new chat section css starts from here */

.chat-box-main-left {
    max-width: 650px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.chat-box-main-right {
    max-width: 650px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.chat_media-wrap {
    background-color: #7fbeff !important;
    padding: 0.8em;
    border-radius: 8px;
    position: relative;
    width: fit-content;
    margin-top: 0.5em;
}

.chat_media-layout_two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5em;
    place-items: center;
}

.chat_media-layout_one {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.5em;
    place-items: center;
}

.cha_img-wrap {
    width: 13em;
    height: 100%;
}

.chat_media-img {
    width: 100%;
    height: 8em;
    object-fit: contain;
    border-radius: 12px;
    background-color: #fff;
    padding: 0.1em;
}

.overlay-count-chat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(19, 19, 19, 0.5);
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.chat-document-media-layout {
    display: inline-block;
    background: #7fbeff !important;
    padding: 0.8em;
    border-radius: 8px;
    width: fit-content;
    position: relative;
    margin: 8px 0;
}

.chat-document-card {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(2, 1fr);
}

.chat-document-card_one {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(1, 1fr);
}

.audio-card {
    display: grid;
    align-items: center;
    justify-content: space-between;
    background: #fefefe;
    border-radius: 8px;
    padding: 1em;
    grid-template-columns: 230px auto;
    gap: 1em;
}

.audio-card-file {
    display: grid;
    grid-template-columns: 50px auto;
    align-items: center;
}

.user-chat-info span {
    color: var(--gray-color);
    font-size: .7em;
    font-weight: 400;
}

.document-file-name {
    font-size: 13px;
    font-weight: 500;
    color: #101010;
    font-weight: bold;

}

.audio-file-name p {
    color: var(--gray-color);
    font-size: 0.8em;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 0;
}

.audio-btn-sec {
    display: flex;
}

.audio-icon {
    border: 1px solid lightgrey;
    border-radius: 10px;
    height: 2.5em;
    width: 2.5em;
    font-size: 1em !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}

.audio-btn {
    height: 2.5em;
    width: 2.5em;
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border: 1px solid lightgrey !important;
    background: #7fbeff !important;
    border-radius: 10px !important;
}

.chat_media-video {
    width: 100%;
    height: 9em;
    background-color: #101010;
    object-fit: cover;
    border-radius: 2px;
}

/* new chat section css ends here */

/* modal payment type css ends here */


/* view static page styles starts from here */
.view-page-main-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.view-page-main-label {
    padding-bottom: 8px;
}


.view-page-main-grid {
    border-right: 2px dashed #B8C7FF80;
    margin-right: 2rem;
}

.view-page-main-grid:last-child {
    border-right: none;
}

/* view static page styles ends here */


/* view white-list ip style */
.view-whitelist-main-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.view-whitelist-main-label {
    padding-bottom: 8px;
}

.view-whitelist-main-grid {
    border-right: 2px dashed #B8C7FF80;
    margin-right: 2rem;
}

.view-whitelist-main-grid:last-child {
    border-right: none;
}

@media screen and (max-width:768px) {
    .view-whitelist-main-section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .view-whitelist-main-grid {
        padding-bottom: 1em;

    }
}

@media screen and (max-width:560px) {
    .view-whitelist-main-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .view-whitelist-main-grid {
        padding-bottom: 1em;
        border-right: none;


    }
}

/* view white-list ip style */


/* view merchant main */
.view-page-main-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.view-page-main-label {
    padding-bottom: 12px;
}

.view-static-main-description {
    background-color: #F5F7FF;
    border: 1px dashed #B8C7FF80;
    border-radius: 6px;
    padding: 10px;
    margin-top: 15px;
    min-height: 284px;
    gap: 1rem;
}

.view-page-main-grid {
    border-right: 2px dashed #B8C7FF80;
    margin-right: 2rem;
}

.view-page-main-grid:last-child {
    border-right: none;
}

/* view merchant main */
/* view static page styles starts from here */
.view-merchant-main-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.view-merchant-main-label {
    padding-bottom: 12px;
}

.view-merchant-main-section_four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}



.view-merchant-main-grid {
    border-right: 2px dashed #B8C7FF80;
    margin-right: 2rem;
}

.view-merchant-main-grid:last-child {
    border-right: none;
}

/* view static page styles ends here */
/* view merchant main */


/* business type view styles */
.business-type-main {
    display: grid;
    grid-template-columns: 2fr 2fr;
    padding: 0 12px;
    /* padding-bottom: 10px; */
    border-bottom: 1px dashed #B8C7FF80;
}

.business-type-main-rigth {
    display: grid;
    grid-template-columns: 2fr;
    padding: 0 12px;
    /* padding-bottom: 10px; */
    border-bottom: 1px dashed #B8C7FF80;
}

.business-type-main-rigth:last-child {
    border-bottom: none;

}

.business-type-main:last-child {
    border-bottom: none;
}

.business-type-list {
    padding: 20px 0;
}

.business-type-list-mid {
    padding: 16px 0;
}

.view-business-label {
    padding-bottom: 12px;
}

.bussiness-type-copy-icon {
    padding: 0.5rem;
    background-color: white;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-left: auto;
    border: none;
    font-size: 14px;
    display: flex;
    gap: 3px;
    color: #5d7186;
    align-items: center;
}

.bussiness-type-copy-icon:hover {
    background-color: white;
}



/* business type view styles */


.view-merchant-address-section-kyc {

    background-color: #F5F7FF;
    border: 1px dashed #B8C7FF80;
    border-radius: 6px;
    padding: 10px;
    margin: 16px;
    min-height: 384px;
}

.business-category-kyc-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Action canvas design start*/

.action-canvas li a {
    background: #eef2f7;
    padding: 0.5em 1em;
    border-radius: 0.375rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-bottom: 1em;
}

.action-canvas li:last-child {
    margin-bottom: 0;
}

.action-canvas li a:hover {
    color: #2798f4 !important;
}


/* Action canvas design end*/

/* Search bar drop down style */

.search_select {
    min-width: 17em;

}

.search_select input[type="search"] {

    display: none !important;
}

/* callback url style */
.callback-url-main {
    display: grid;
    grid-template-columns: 2fr 2fr;
    padding: 0 12px;
    /* padding-bottom: 10px; */
    border-bottom: 1px dashed #B8C7FF80;

}

.callback-url-main:last-child {
    border-bottom: none;

}

.callback-url-main-three {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    border-bottom: 1px dashed #B8C7FF80;

    padding: 0 12px;
    /* padding-bottom: 10px; */
}

@media screen and (max-width:650px) {
    .callback-url-main-three {
        grid-template-columns: 2fr 2fr
    }
}

.callback-url-main-three:last-child {
    border-bottom: none;

}

.callback-section-copy {
    background-color: #f2faf7;
}

.success-section-copy {
    background-color: #DCF7EF4D;
}

.warning-section-copy {
    background-color: #FDE1A026;
}

.danger-section-copy {
    background-color: #F9B7B31A;
}

.copy-icon-main-section {
    background-color: #ddf1e9;
    color: #549f82;
}

.copy-success-icon-main-section {
    background-color: #17CB9626;
    color: #17CB96;
}

.copy-warning-icon-main-section {
    background-color: #FEF1CD;
    color: #FABB05;
}

.copy-danger-icon-main-section {
    background-color: #FF797226;
    color: #FF7972;
}

/* callback url style */





/* view ticket messages styles */

.tab-content-attachment {
    height: 310px;
    overflow-y: scroll;
}

/* .tab-content-attachment::-webkit-scrollbar {
    display: none;
} */

.view-attachment-images-sec {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;



}

.view-attachment-images-list {
    width: 9rem;
    height: 9rem;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.view-attachment-images-list img {
    width: 9rem;
    height: 9rem;
    border-radius: 6px;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.view-attachment-images-list .chat-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    pointer-events: none;
}

.view-attachment-images-list img {
    opacity: 0.9;
}


.view-ticket-description {
    background-color: #F5F7FF;
    border: 1px dashed #B8C7FF80;
    border-radius: 6px;
    padding: 10px;
    margin-top: 15px;
    min-height: 325px;
}

.view-attachment-video-sec {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}


.attachment-document-card {
    display: grid;
    align-items: center;
    justify-content: space-between;
    background: #F8F9F8;
    border-radius: 10px;
    padding: 1em;
    grid-template-columns: 210px auto;
    gap: 1em;
}

.attachment-document-file {
    display: grid;
    grid-template-columns: 50px auto;
    align-items: center;
}


.attachment-document-icon {
    border: 1px solid lightgrey;
    border-radius: 10px;
    height: 2.5em;
    width: 2.5em;
    font-size: 1em !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.attachment-document-name {
    color: black;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 0em;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
}

.view-attachment-document-sec {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}


.attachment-document-btn {
    height: 2.5em;
    width: 2.5em;
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    /* border: 1px solid lightgrey !important; */
    background: #7fbeff !important;
    border-radius: 10px !important;
}

/* view ticket messages styles */

/* modal form style start */

.member_modal_input {
    border-radius: 10px !important;
    padding-left: 16px !important;
    font-size: 0.9375rem !important;
    height: 50px !important;
    background-color: #e2dfdf14 !important;
    border: 1px solid rgb(226, 224, 224) !important;
}

.member_modal_text {

    border-radius: 10px !important;
    padding-left: 16px;
    font-size: 0.95em;
    background-color: #e2dfdf14 !important;
    border: 1px solid rgb(226, 224, 224);
}

.member_modal_close {

    width: 3em;
    height: 3em;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* modal form style end */


/* payment btn css starts from here */


.payment-btn-main-layout {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr;
    padding: 0 12px;
    /* padding-bottom: 10px; */
    border-bottom: 1px dashed #B8C7FF80;
}

@media screen and (max-width:876px) {

    .payment-btn-main-layout {
        grid-template-columns: 2fr 2fr 2fr;
    }
}

@media screen and (max-width:576px) {

    .payment-btn-main-layout {
        grid-template-columns: 2fr 2fr;
    }
}

@media screen and (max-width:480px) {

    .payment-btn-main-layout {
        grid-template-columns: 2fr;
    }
}

.payment-btn-main-layout:last-child {
    border-bottom: none;
}


/* payment btn css ends from here */