@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */
@font-face {
    font-display: auto;
    font-family: "aicubix-icon";
    font-style: normal;
    font-weight: 400;
    src: url("../webfonts/iconly.eot?1745996046229");
    src: url("../webfonts/iconly.eot?#iefix") format("embedded-opentype"), url("../webfonts/iconly.woff2?1745996046229") format("woff2"), url("../webfonts/iconly.woff?1745996046229") format("woff"), url("../webfonts/iconly.ttf?1745996046229") format("truetype"), url("../webfonts/iconly.svg?1745996046229#aicubix-icon") format("svg");
  }
  
  [class="aicubix-icon"], [class^="aicubix-icon-"], [class*=" aicubix-icon-"] {
    display: inline-block;
    font-family: "aicubix-icon" !important;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }
  
  .aicubix-icon-view-solid:before {
    content: "\e000";
  }
  
  .aicubix-icon-tick-solid:before {
    content: "\e001";
  }
  
  .aicubix-icon-sort-outline:before {
    content: "\e002";
  }
  
  .aicubix-icon-slot-outline:before {
    content: "\e003";
  }
  
  .aicubix-icon-send-solid:before {
    content: "\e004";
  }
  
  .aicubix-icon-search-outline:before {
    content: "\e005";
  }
  
  .aicubix-icon-review-solid:before {
    content: "\e006";
  }
  
  .aicubix-icon-review-outline:before {
    content: "\e007";
  }
  
  .aicubix-icon-request-solid:before {
    content: "\e008";
  }
  
  .aicubix-icon-request-outline:before {
    content: "\e009";
  }
  
  .aicubix-icon-report-solid:before {
    content: "\e00a";
  }
  
  .aicubix-icon-report-outline:before {
    content: "\e00b";
  }
  
  .aicubix-icon-patients-solid:before {
    content: "\e00c";
  }
  
  .aicubix-icon-patients-outline:before {
    content: "\e00d";
  }
  
  .aicubix-icon-logout-solid:before {
    content: "\e00e";
  }
  
  .aicubix-icon-logout-outline:before {
    content: "\e00f";
  }
  
  .aicubix-icon-lock-solid:before {
    content: "\e010";
  }
  
  .aicubix-icon-lock-outline:before {
    content: "\e011";
  }
  
  .aicubix-icon-home-solid:before {
    content: "\e012";
  }
  
  .aicubix-icon-home-outline:before {
    content: "\e013";
  }
  
  .aicubix-icon-edit-solid:before {
    content: "\e014";
  }
  
  .aicubix-icon-delete-solid:before {
    content: "\e015";
  }
  
  .aicubix-icon-dashboard-solid:before {
    content: "\e016";
  }
  
  .aicubix-icon-dashboard-outline:before {
    content: "\e017";
  }
  
  .aicubix-icon-cross-solid:before {
    content: "\e018";
  }
  
  .aicubix-icon-calendar-outline:before {
    content: "\e019";
  }
  
  .aicubix-icon-arrow-outline:before {
    content: "\e01a";
  }
  
  .aicubix-icon-appointment-solid:before {
    content: "\e01b";
  }
  
  .aicubix-icon-appointment-outline:before {
    content: "\e01c";
  }
  
  .aicubix-icon-reschedule-outline:before {
    content: "\e01d";
  }
  
 .aicubix-icon-bell:before {
    content: "\e01e";
  }
  
  .aicubix-icon-arrow-right:before {
    content: "\e01f";
  }
  
  .aicubix-icon-arrow-left:before {
    content: "\e020";
  }
  .aicubix-icon-standard-member:before {
    content: "\e021";
  }
  
  .aicubix-icon-premium-member:before {
    content: "\e022";
  }
  .aicubix-icon-completed-outline:before {
    content: "\e023";
  }
  .aicubix-icon-grow-arrow:before {
    content: "\e024";
  }

:root {
    --border-color: #eee;
    --blue-color: #178FDB;
    --darkblue-color: #0085B8;
    --darkland-color: #142659;
    --black-color: #1e1e1e;
    --black333-color: #333333;
    --black444-color: #444444;
    --black555-color: #444444;
    --f1f1f1-color: #fafafa;
    --white-color: #ffffff;
    --transition: all 300ms ease-in-out;
}

*,
::after,
::before {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--black444-color);
    background-color: #E8F2F6;
}

/* .font-sans {
    font-family: 'Plus Jakarta Sans', sans-serif;
} */

a,
button,
input,
select,
textarea {
    text-decoration: none;
    outline: none;
    transition: var(--transition);
}

input,
select,
textarea {
    width: 100%;
    outline: none;
    transition: var(--transition);
}

input[type="radio"],
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    box-shadow: none;
    outline: none;
    accent-color: var(--blue-color);
}

input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='rgb(0, 152, 134)' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-color: transparent;
    border-color: var(--blue-color);
}

.focus\:ring-indigo-500:focus {
    box-shadow: none;
    outline: none;
}

input[type=checkbox]:checked:hover,
input[type=checkbox]:checked:focus,
input[type=radio]:checked:hover,
input[type=radio]:checked:focus {
    border-color: var(--blue-color);
    background-color: transparent;
}

img {
    max-width: 100%;
    transition: var(--transition);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 400;
    color: inherit;
}

p {
    font-size: 14px;
    line-height: 140%;
}

p:last-child {
    margin-bottom: 0;
}

.cursor-pointer {
    cursor: pointer;
}

.alert-success {
    border-color: var(--darkblue-color);
    background-color: var(--darkblue-color);
}

.alert-danger {
    border-color: #ff6060;
    background-color: #ff6060;
}

.alert .close {
    color: var(--white-color);
    font-size: 18px;
    top: 50%;
    right: 1.5rem;
}

.alert-dismissible {
    padding-right: 2.5rem;
}

.alert .close:hover {
    color: var(--white-color) !important;
}

.comn-form-group {
    margin-bottom: 24px;
}

.comn-form-group.mb-0 {
    margin-bottom: 0;
}

.comn-form-label,
.form-control-label {
    color: var(--black444-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-transform: capitalize;
    margin-bottom: 5px;
    width: 100%;
}

.info-note-text,
.comn-form-label .info-note-text {
    display: block;
    width: 100%;
    color: var(--black555-color);
    font-size: 12px;
    line-height: 125%;
    text-transform: none;
    margin-top: 3px;
}

.comn-form-control,
.form-control,
.custom-select,
.form-control-alternative,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    width: 100%;
    height: 50px;
    padding: 10px 20px;
    color: var(--black-color);
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    border-radius: 8px;
    border: 1px solid #f1f1f1;
    background-color: #f8f8f8;
    resize: none;
    box-shadow: none;
}

.comn-form-control:disabled {
    background-color: rgb(20 38 89 / 05%);
}

textarea.comn-form-control {
    height: auto;
}

select.comn-form-control{
    appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 12px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    border: 0;
    margin-top: -6px;
}

input[type="file"].comn-form-control {
    padding: 0px 15px 0px 0px;
}

input[type="file"].comn-form-control::-webkit-file-upload-button {
    padding: 0px 20px;
    height: 100%;
    border: none;
    background-color: rgb(0 76 67 / 10%);
    margin-right: 10px;
    color: var(--darkblue-color);
}

.comn-form-control::placeholder {
    opacity: .5;
}

.comn-form-control:focus {
    border-color: var(--darkblue-color);
    box-shadow: none;
    outline: none;
}
.custom-select {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 30px;
}
.custom-select-sm {
    font-size: 14px;
    height: calc(1.8125rem + 2px);
    padding-top: .375rem;
    padding-bottom: .375rem;
}

.select2-dropdown {
    z-index: 999999;
    border-color: transparent;
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    padding: 10px;
    color: var(--black555-color);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgb(0 76 67 / 5%);
    color: var(--darkblue-color);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgb(0 76 67 / 5%);
    color: var(--darkblue-color);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #dbdfe9;
    border-radius: 5px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    width: 40px;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 50px;
    height: auto;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgb(0 152 134 / 5%);
    border-color: var(--blue-color);
    padding: 2px 8px;
    color: var(--black333-color);
    margin: 0;
    border-radius: 5px;
}

.select2-container--default .select2-selection--single .select2-selection__choice__remove,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--white-color);
    line-height: 0.9;
    margin-top: -3px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    background-color: var(--darkblue-color);
    border-radius: 3px;
    font-size: 8px;
    margin-right: 6px;
}

.select2-container--default .select2-selection--single .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: var(--blue-color);
    color: var(--white-color);
}

.coming-soon-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 30%);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--black-color);
    z-index: 999;
}

input[type=checkbox].failedCheckbox,
input[type=checkbox].readCheckbox,
input[type=checkbox].deliveryCheckbox,
input[type=checkbox].itemCheckbox,
input[type=checkbox].comn-input-box {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid #DDDDDD;
    margin: 0;
    background-image: url("data:image/svg+xml,<svg width='512' height='369' viewBox='0 0 512 369' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M500.103 11.8931C484.262 -3.96937 458.538 -3.95937 442.675 11.8931L184.211 270.368L69.3345 155.492C53.4721 139.63 27.7593 139.63 11.8968 155.492C-3.96562 171.355 -3.96562 197.068 11.8968 212.93L155.486 356.519C163.412 364.445 173.806 368.419 184.2 368.419C194.594 368.419 204.998 364.455 212.924 356.519L500.103 69.3298C515.966 53.4783 515.966 27.7546 500.103 11.8931Z' fill='rgb(0, 152, 134)'/></svg>");
    background-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    transition: all 300ms ease-in-out;
}

input[type=checkbox].failedCheckbox:checked,
input[type=checkbox].readCheckbox:checked,
input[type=checkbox].deliveryCheckbox:checked,
input[type=checkbox].itemCheckbox:checked,
input[type=checkbox].comn-input-box:checked {
    background-size: 50%;
    border-color: var(--blue-color);
}

.login-row {
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
    background-color: var(--white-color);
}

.login-leftside {
    width: calc(100% - 650px);
    background-color: #F2FAF9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

.logo-box {
    position: absolute;
    top: 30px;
    left: 30px;
}

.logo-box img {
    height: 50px;
}

.login-leftside-data {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    max-width: 700px;
    justify-content: center;
    gap: 40px;
}

.login-leftside-data>aside {
    color: var(--black-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 1px;
}

.login-rightside {
    width: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    height: 100vh;
    overflow-y: auto;
    padding-block: 40px;
}

.login-rightside-data {
    max-width: 390px;
    width: 100%;
}

.login-title-row {
    color: var(--darkblue-color);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 25px;
}

.login-title-row>span {
    display: block;
    color: var(--black555-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 17.6px;
    letter-spacing: 0.131px;
    text-transform: capitalize;
}

.remember-forgot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 25px;
}

.remember-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.remember-text span {
    color: var(--black-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.131px;
}

.forgot-text {
    color: var(--blue-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0.438px;
}

.comn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--blue-color);
    padding: 8px 15px;
    border-radius: 6px;
    color: var(--white-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 136%;
    text-transform: capitalize;
    letter-spacing: 0;
    border: 1px solid var(--blue-color);
    cursor: pointer;
    outline: none !important;
    transition: var(--transition);
}

#chatMessages .comn-btn {
    text-transform: none!important;
}

.comn-btn-border {
    background-color: transparent;
    border-color: var(--darkblue-color);
    color: var(--darkblue-color);
}

.comn-btn:hover {
    background-color: var(--darkblue-color);
    border-color: var(--darkblue-color);
    color: var(--white-color);
}

.nav-link:hover {
    color: var(--blue-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgb(0 152 134 / 10%);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--blue-color);
}

.login-rightside-data .comn-btn {
    min-height: 44px;
    font-size: 16px;
    margin-bottom: 25px;
}

.login-create-text {
    color: var(--black333-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

.login-create-text span {
    color: var(--blue-color);
    letter-spacing: 0.438px;
    text-decoration: none;
}

.navbar-vertical.navbar-expand-md.aicubix-sidebar,
.aicubix-sidebar {
    background-color: var(--white-color);
    max-width: 300px;
    padding-top: 15px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 20px;
    
}

.tabs-body::-webkit-scrollbar-track,
.chat-accordion .card-body::-webkit-scrollbar-track,
.aicubix-chat-user::-webkit-scrollbar-track,
.aicubix-profile-body::-webkit-scrollbar-track,
.aicubix-sidebar::-webkit-scrollbar-track {
    background-color: transparent;
}

.tabs-body::-webkit-scrollbar,
.chat-accordion .card-body::-webkit-scrollbar,
.aicubix-chat-user::-webkit-scrollbar,
.aicubix-profile-body::-webkit-scrollbar,
.aicubix-sidebar::-webkit-scrollbar {
    width: 5px;
}

.tabs-body::-webkit-scrollbar-thumb,
.chat-accordion .card-body::-webkit-scrollbar-thumb,
.aicubix-chat-user::-webkit-scrollbar-thumb,
.aicubix-profile-body::-webkit-scrollbar-thumb {
    background-color: #dddddd;
}

.aicubix-sidebar::-webkit-scrollbar-thumb {
    background-color: #ccc;
}

.navbar-vertical.navbar-expand-md.aicubix-sidebar .navbar-brand {
    width: 100%;    
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 0px 40px;
    border-bottom: 1px solid #00000014;
    margin-bottom: 15px;
}

.navbar-vertical.navbar-expand-md.aicubix-sidebar .navbar-brand .navbar-brand-img {
    max-height: 80px;
}

.navbar-vertical.aicubix-sidebar .navbar-collapse,
.navbar-vertical.aicubix-sidebar .navbar-nav {
    padding: 0;
    margin: 0;
}

.navbar-vertical.aicubix-sidebar .navbar-collapse:before {
    display: none;
}

.navbar-vertical.aicubix-sidebar .navbar-nav .nav-item {
    margin-bottom: 2px;
}

.navbar-vertical.aicubix-sidebar .navbar-nav .nav-link {
    flex-direction: row;
    color: var(--black444-color);
    font-size: 16px;
    /* line-height: 140%; */
    text-transform: capitalize;
    /* margin-bottom: 0; */
    /* text-align: center; */
    gap: 10px;
    height: 60px;
    padding: 18px 20px 18px 20px;
    /* border-bottom: 1px solid rgba(223, 229, 239, 0.15); */
    border-bottom: none;
    /* text-align: left; */
    position: relative;
    opacity: .6;
    transition: var(--transition);
}
.navbar-vertical.aicubix-sidebar .navbar-nav .nav-link:hover {
    color: var(--blue-color);
    transform: translateX(10px);
    opacity: 1;
}
.navbar-vertical.aicubix-sidebar .navbar-nav .nav-link[data-toggle="collapse"]{
    padding-right: 30px;
}
.navbar-vertical.aicubix-sidebar .navbar-nav .nav-link[data-toggle="collapse"]::before {
    content: "\f107";
    font-family: 'FontAwesome';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: var(--transition);
}
.navbar-vertical.aicubix-sidebar .navbar-nav .nav-link[data-toggle="collapse"][aria-expanded="true"]::before {
    transform: translateY(-50%) rotate(180deg);
}

.navbar-vertical.aicubix-sidebar .navbar-nav .nav {
    padding-bottom: 0px;
}

.navbar-vertical.aicubix-sidebar .navbar-nav .nav .nav-link {
    padding-left: 30px;
    border-bottom: none;
    /* padding-bottom: 0px; */
}
.navbar-vertical.aicubix-sidebar .navbar-nav .nav .nav-link.active {
    transform: translateX(10px);
    background-color: transparent;    
    color: var(--blue-color) !important;
}

.aicubix-sidebar .navbar-nav .nav-link.active,
.aicubix-sidebar .navbar-nav .nav-link[aria-expanded="true"] {
    background-color: var(--blue-color);
    color: var(--white-color);
    border-radius: 10px;
    /* height: 60px; */
    padding: 18px 20px 18px 30px;
    opacity: 1;
}

.aicubix-sidebar .navbar-nav .nav-link.active:hover,
.aicubix-sidebar .navbar-nav .nav-link[aria-expanded="true"]:hover {
    transform: translateX(0px);
    color: var(--white-color) !important;
}

.navbar-vertical.aicubix-sidebar .navbar-nav .nav-link.active:before {
    display: none;
}

.aicubix-sidebar .navbar-nav .nav-link>i {
    min-width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 0;
    line-height: 1;
    transition: none;
    max-width: 20px;
    max-height: 20px;
}

.aicubix-sidebar .navbar-nav .nav-link>i[class^="fa-"] {
    font-size: 20px;
}

.aicibix-main-content,
.navbar-vertical.navbar-expand-md.fixed-left+.main-content.aicibix-main-content {
    margin-left: 300px;
    padding: 20px 20px 20px 35px;
}

.main-content .aicubix-header {
    display: flex;
    align-items: center;
    position: initial;
    padding: 0;
}
.navbar-nav .nav-link {
    color: var(--black444-color);
    padding: 0;
}

.main-content .aicubix_body .container-fluid,
.main-content .aicubix-header .container-fluid {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.nav-link.notification {
    width: 45px;
    height: 45px;
    background-color: var(--blue-color);
    color: var(--white-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 50%;
}
.new-notification {
    position: absolute;
    top: 8px;
    right: 10px;
    background-color: #ff0000;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}
.notification-menu .dropdown-menu {
    max-width: 400px;
    width: 400px;
    padding: 20px;
}
.notification-header {
    margin-bottom: 15px;
}
.notification-header * {
    color: var(--black444-color);
}
.notification-menu .dropdown-menu .list-unstyled {
    max-height: 300px;
    overflow: auto;
}
.notification-menu .dropdown-menu .list-unstyled li {
    border-top: 1px solid #d1d9dd;
    padding-block: 15px;
}
.notification-menu .dropdown-menu .list-unstyled li.noti-unread {
    background-color: #e8f2f6;
    padding-inline: 15px;
}
.notification-menu .dropdown-menu .dropdown-item {
    white-space: normal;
    font-size: 14px;
    padding: 0;
    background: none;
}
.noti-date {
    font-size: 12px;
}
.mark-all-read {
    font-size: 12px;
}
.aicubix-header .avatar-sm {
    width: 45px;
    height: 45px;
}
.complete-profile-main {    
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px 15px 20px;   
    border: 1px solid var(--blue-color);
    color: var(--blue-color);
    text-align: center;
    margin-top: 50px;
}
.pro-avtar {
    position: relative;
    z-index: 1;
    background-color: var(--blue-color);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -45px auto 0;
    /* outline: 1px solid var(--blue-color);
    outline-offset: 3px; */
}
.pro-avtar:after, .pro-avtar:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;    
    background-color: var(--blue-color);
    border-radius: 50%;
    border: 1px solid var(--blue-color);
}
.pro-avtar:after {
    background-color: #fff;
    left: -3px;
    top: -3px;
    right: -3px;
    bottom: -3px;
    z-index: -2;
}
.complete-profile-main p {
    margin: 0;
}
.complete-profile-main .progress {
    height: 10px;
    background-color: transparent;
    padding: 1px;
    border: 1px solid var(--blue-color);
}
.complete-profile-main  .progress-bar {
    border-radius: 100px;
}

.aicubix-header .avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.member-badge {
    background: var(--blue-color);
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    padding: 10px 14px;   
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    text-transform: capitalize;
    color: var(--white-color);
}
.premium-member {
    background: linear-gradient(92.54deg, #CAA51C -1.78%, #E5C342 98.95%);
}
.standard-member {
    background: linear-gradient(92.95deg, #4D8FA8 0.06%, #73B9D4 98.92%);
}
.member-badge i {
    font-size: 20px;
}
.upgrade-to-premium {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid #24A8DB80;
    background-color: #FFFFFF0D;    
    border-radius: 10px;
    padding: 60px 30px;
    position: absolute;
    z-index: 1;
    left: 35px;
    bottom: 20px;
    right: 20px;
}
.upgrade-to-premium-inner {
    max-width: 290px;
    display: grid;
    justify-content: center;
    text-align: center;
    gap: 20px;
    margin: auto;
}
.upgrade-to-premium p {
    font-size: 18px;
    line-height: 140%;
    text-transform: capitalize;
    margin: 0;
}
.upgrade-to-premium .aicubix-icon-lock-outline {
    font-size: 50px;
    color: var(--blue-color);
}
.unlock-premium-btn, .unlock-premium-btn:hover {
    background: linear-gradient(92.54deg, #CAA51C -1.78%, #E5C342 98.95%);
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    text-transform: capitalize;
    padding: 11px 18px;
    color: var(--white-color);
    margin: auto;
}

.comn-page-title {
    color: var(--black333-color);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    text-transform: capitalize;
    margin-bottom: 0;
}

.aicubix_body {
    padding: 0;
    padding-top: 20px;
    max-width: 100%;
    margin: 0px auto;
}
.dashboard-card, .patients-card {   
    justify-content: space-between;
    border-radius: 15px;
    padding: 20px;
    background-color: #fff;
    color: #444;
    margin-bottom: 20px;
    height: calc(100% - 20px);
}
.card-title {
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    text-transform: capitalize;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.card-title i {
    font-size: 28px;
}
.number-row {
    align-items: center;
}
.number-row h1 {
    font-size: 40px;
    font-weight: 700;
}
.number-row h3 {
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.number-row h1 .fa-solid.fa-star {
    color: #C19E19;
    font-size: 24px;
    vertical-align: 6px;
}
.text-green {
    color: #55C855 !important;
}
.text-red {
    color: #FF0000 !important;
}
.text-blue {
    color: var(--blue-color) !important;
}
.text-24 {
    font-size: 24px !important;
}
.progress {
    height: 20px;
    margin-bottom: 0;
    border-radius: 100px;
    box-shadow: none;
    background-color: #24A8DB40;
}
.progress-row {
    margin-top: 30px;
}
.bg-primary {
    background-color: var(--blue-color) !important;
}
.dashboard-card.appointments-card {
    background-color: var(--blue-color);
    color: var(--white-color);
}
.dashboard-card.appointments-card .progress {   
    background-color: #FFFFFF40;
}
.dashboard-card.appointments-card .progress .bg-primary,
.dashboard-card.appointments-card .progress-bar {
    background-color: var(--white-color) !important;
}
.dashboard-card.appointments-card .border-top {
    border-top: 1px solid #FFFFFF26 !important;
}
.dashboard-card.appointments-card .text-green,
.dashboard-card.appointments-card .text-red {
    color: #fff !important;
}
.text-red .aicubix-icon-grow-arrow {
    -webkit-transform: scaleY(-1) translateY(-3px);
    transform: scaleY(-1) translateY(-3px);
}
.chart-tile {
    font-size: 16px;
    line-height: 125%;
    font-weight: 600;
}
.chart-tile-position {
    position: absolute;
    left: 40px;
    top: 25px;
}
.chart-tile i {
    font-size: 24px;
    color: var(--blue-color);
}
.patients-card {
    border-bottom-right-radius: 30px;
}
.patients-card:hover {
    background-color: var(--blue-color);
    color: var(--white-color);
    border-bottom-right-radius: 30px;
}
.more-arrow-corner {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 28px 0px 28px 0px;
    background: #E8F2F6;
    position: absolute;
    bottom: -1px;
    right: -1px;
    z-index: 2;
}
.more-arrow-corner:before {
    content: "";
    position: absolute;
    right: -1px;
    top: -19px;
    background: url(../images/default/top-right-corner.svg) no-repeat;
    width: 26px;
    height: 36px;
    z-index: -1;
}
.more-arrow-corner:after {
    content: "";
    position: absolute;
    left: -19px;
    bottom: -1px;
    background: url(../images/default/bottom-left-corner.svg) no-repeat;
    width: 37px;
    height: 25px;
    z-index: -1;
}
.more-arrow {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background-color: var(--blue-color);
    color: var(--white-color);
    font-size: 20px;
}
.more-arrow:hover {    
    background-color: var(--darkblue-color);
    color: var(--white-color);
}
.main-content .aicubix_body>.container-fluid {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.row-gap-20 {
    margin-right: -10px;
    margin-left: -10px;
}
.row-gap-20>* {
    padding-left: 10px;
    padding-right: 10px;
}
.white-box {
    border-radius: 15px;
    padding: 20px;
    background-color: #fff;
}
.mb-20 {
    margin-bottom: 20px !important;
}
#appointmentCalendar .fc-toolbar-chunk:nth-child(2) {
    margin-right: auto;
}
#appointmentCalendar .fc-toolbar-title {
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
}
#appointmentCalendar.fc .fc-button {
    background-color: transparent !important;
    border: 0 !important;
    color: var(--blue-color);
}
.chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.monthly-div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 7px;
    position: relative;
    z-index: 2;
}
.number-patients:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--blue-color);
    border-radius: 100%;
    margin-right: 8px;
}
.review-leftside, .review-single-card {
    border: 1px solid #FFFFFF;
    background-color: var(--white-color);
    padding: 20px;
    border-radius: 15px;
}
.review-single-card {
    margin-bottom: 10px;
}
.form-check {
    padding-left: 1.55rem;
}
.form-check-input {
    margin-top: 2px;
    margin-left: -1.55rem;
}
.sort-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.list-rating li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.list-rating li:last-child {    
    margin-bottom: 0;
}
.rating-count {
    background: rgba(26, 158, 209, 0.1);   
    border-radius: 5px;
    padding: 3px 10px;    
    color: var(--blue-color);
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    text-align: center;
}
.review-middle {
    /* display: flex;
    flex-direction: column;
    gap: 10px; */
}
.review-avatar {
    width: 48px;
    height: 48px;
    background-color: #4a90e2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 50%;
}
.review-user-detail {   
    display: flex;
    width: 100%;
    gap: 15px;
}
.review-user-detail h6 {
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    text-transform: capitalize;
}
.review-user-detail p {
    font-size: 16px;    
}
.rating-star-grp {
    color: #C19E19;
}
.comment-main {
    margin-top: 20px;
}
.comment-title {
    font-size: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.comment-text-main.comment-text-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}
.comment-text-locked .comment-text {
    white-space: nowrap;
    width: calc(100% - 30px);
    overflow: hidden;
    -webkit-filter: blur(4px);
    filter: blur(4px);
}
.lock {
    display: none;
}
.comment-text-locked .lock {
    display: block;
    font-size: 18px;
    color: var(--blue-color);
}
.review-rightside .dashboard-card {
    margin-bottom: 10px;
    height: calc(100% - 10px);
}

.row-gap-12 {
    margin-right: -6px;
    margin-left: -6px;
}

.row-gap-12>* {
    padding-right: 6px;
    padding-left: 6px;
}

.row-gap-24 {
    margin-right: -12px;
    margin-left: -12px;
}

.row-gap-24>* {
    padding-right: 12px;
    padding-left: 12px;
}

.comn-aicubix-box {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    padding: 20px 25px;
}

.comn-aicubix-box-2 {
    padding: 30px;
}

.text-12px {
    color: var(--black333-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    text-transform: capitalize;
}

.text-14px {
    color: var(--black-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-transform: capitalize;
}

.text-16px {
    color: var(--black444-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-transform: capitalize;
}

.text-12px.color-555,
.text-14px.color-555,
.text-16px.color-555 {
    color: var(--black555-color);
}

.comn-aicubix-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.comn-aicubix-title .text-16px {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comn-aicubix-title .text-16px>img {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.version-row {
    margin-top: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(223, 229, 239, 0.30);
}

.version-row h6 {
    width: 100%;
    color: var(--white-color);
    font-size: 10px;
    margin-bottom: 0;
}

.version-row h6 .badge {
    display: table;
    margin: 0px auto 2px;
    background-color: var(--white-color);
    color: var(--blue-color);
    border-radius: 10px;
    font-weight: bold;
    font-size: 8px;
    padding: 2px 5px;
}

.whatsapp_api_box {
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    margin-bottom: 20px;
}

.card-header {
    padding: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.comn_badge {
    color: var(--white-color);
    font-size: 10px;
    font-weight: 500;
    line-height: 140%;
    text-transform: capitalize;
    border-radius: 30px;
    background-color: #00AD6F;
    padding: 2px 10px;
}

.whatsapp_api_box .card-body {
    padding: 0;
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.whatsapp_api_box .card-body>* {
    width: 100%;
}

.whatsapp_api_box .card-body>ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.whatsapp_api_box .card-body>ul li {
    color: var(--black555-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    margin-bottom: 5px;
}

.whatsapp_api_box .card-body>ul li:last-child {
    margin-bottom: 0px;
}

.whatsapp_api_box .alert {
    padding: 10px;
    margin-bottom: 0;
    color: var(--black333-color);
}

.whatsapp_api_box .alert-danger {
    background-color: rgb(255 0 0 / 5%);
    border-color: #ff7b7b;
}

.whatsapp_api_box .alert-success {
    border-color: #62dba7;
    background-color: rgb(0 205 117 / 5%);
}

#navbar-contactMenu {
    border-bottom: 1px solid rgba(223, 229, 239, 0.30);
    border-bottom: none;
    /* border-top: 1px solid rgba(223, 229, 239, 0.30); */
    margin-bottom: 0px;
    padding-top: 0;
}

.gy-2 {
    row-gap: 10px;
}

.gap_5px {
    gap: 5px;
}

.comn-table-aicubix {
    border-radius: 15px;
    background-color: var(--white-color);
    margin-bottom: 0;
    padding: 20px;
}

.comn-table-aicubix .table th,
.comn-table-aicubix .table td {
    border-bottom: 1px solid #4444440D;
    border-top: 0;
    background-color: var(--white-color);
    height: 60px;
    padding: 10px 20px;
    vertical-align: middle;
    color: var(--black555-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

.comn-table-aicubix .table th {
    text-transform: capitalize;
    color: var(--white-color);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0px;
    border-top: none;
    border-bottom: 0;
    background-color:var(--blue-color);
    height: auto;
}
.comn-table-aicubix .table th:first-child {
    border-radius: 10px 0 0 10px;
}
.comn-table-aicubix .table th:last-child {
    border-radius: 0 10px 10px 0;
}

.plan-table-aicubix .table th,
.plan-table-aicubix .table td {
    text-align: center;
    border-left: 1px solid var(--border-color);
}

.plan-table-aicubix .table th:first-child,
.plan-table-aicubix .table td:first-child {
    border-left: none;
}

.plan-table-aicubix .table th {
    background-color: var(--white-color);
}

.plan-table-aicubix .table .plan-header-box {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 40px 0;
    background-color: var(--darkblue-color);
}

.plan-table-aicubix .table .plan-header-box>* {
    width: 100%;
    padding: 0;
}

.plan-header-box aside {
    color: var(--black-color);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}
.plan-card-box .plan-header-box aside{
    display: table;
    width: auto;
    padding: 4px 15px;
    background-color: rgba(0, 76, 67, 0.05);
    color: #004C43;
    border-radius: 100px;
    letter-spacing: 0px;
    font-weight: 600;
}

.plan-table-aicubix .table .plan-detail-title {
    background-color: var(--darkblue-color);
    color: var(--white-color);
    border-color: transparent;
    text-align: left;
}

.plan-table-aicubix .table th.plan-detail-title {
    font-size: 30px;
    border-bottom-color: var(--border-color);
}

.plan-table-aicubix .pricing-price-text {
    color: var(--white-color);
}

.comn-table-aicubix .table td {
    white-space: normal;
}
.comn-table-aicubix .table .date-row td {    
    background-color: #1A9ED10F;
    border-radius: 10px 10px 0 0;
    height: 40px;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    text-transform: capitalize;
    color: #157EA7;
    border: 0;
}
.comn-table-aicubix .table .blank-row td {
    height: 10px;
    padding: 0;
    line-height: 0;
    border: 0;
}

/* .comn-table-aicubix .table tr:nth-child(even) td {
    background-color: #FBFBFB;
} */

.comn-table-aicubix .table td .badge {
    display: inline-flex;
    align-items: center;
}

.comn-table-aicubix .table th.table-check-box,
.comn-table-aicubix .table td.table-check-box {
    width: 50px;
}

.comn-table-check {
    width: 18px;
    height: 18px;
    border: 1px solid #DDDDDD;
    appearance: none;
    border-radius: 3.5px;
}

.comn-table-check:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='rgb(0, 152, 134)' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-color: transparent;
    border-color: var(--blue-color);
}

.comn-table-check:focus {
    outline: none;
    box-shadow: none;
}

.action-column {
    width: 200px;
}

.action-btn-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 14px;
    border-radius: 50%;
    border: 0;
    /* border: 1px solid currentColor; */
    transition: var(--transition);
    cursor: pointer;
}
.action-btn-text {
    width: auto;
    height: auto;
    padding: 5px 15px;
    border-radius: 5px;
}

.action-btn:hover {
    color: var(--white-color);
}

.chat-action-btn {
    color: #1b84ff;
    background-color: rgb(27 132 255 / 8%);
}

.chat-action-btn:hover {
    background-color: #1b84ff;
    border-color: #1b84ff;
}

.reschedule-action-btn {
    color: #F8CC30;
    background-color: rgba(248, 204, 48, 0.1);
}

.reschedule-action-btn:hover {
    background-color: #F8CC30;
    border-color: #F8CC30;
}

.edit-action-btn {
    color: var(--blue-color);
    background-color: rgba(36, 168, 219, 0.08);
}

.edit-action-btn:hover {
    background-color: var(--blue-color);
    border-color: var(--blue-color);
}

.delete-action-btn {    
    background: #FF5E5E14;
    color: #FF5E5E;
}

.delete-action-btn:hover {
    background-color: #FF5E5E;
    border-color: #FF5E5E;
}

.preview-action-btn {
    color: #4151A5;
    background-color: #F5F6F9;
}

.preview-action-btn:hover {
    background-color: #4151A5;
    border-color: #4151A5;
}

.complete-action-btn {
    color: #1aae6f;
    background-color: rgb(26 174 111 / 10%);
}

.complete-action-btn:hover {
    background-color: #1aae6f;
    border-color: #1aae6f;
}

.hide-choose-btn::file-selector-button {
    visibility: hidden;
}

.aicubix-breadcrumb {
    background-color: var(--white-color);
}

.bg-gradient-green,
.bg-gradient-info {
    background: linear-gradient(87deg, #663993 0, #b469ff 100%) !important;
}

.custom-toggle {
    width: 45px;
}

.custom-toggle-slider {
    background-color: #dddddd;
    border-color: transparent;
}

.custom-toggle-slider:before {
    background-color: var(--white-color);
}

.custom-toggle input:checked+.custom-toggle-slider:before {
    transform: translateX(21px);
    background-color: var(--white-color);
}

.custom-toggle input:checked+.custom-toggle-slider {
    border-color: var(--blue-color);
    background-color: var(--blue-color);
}

#chatList {
    padding: 0px !important;
    margin: 0px !important;
}

.aicubix-chat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    height: calc(100vh - 111px);
    overflow: hidden;
}

.aicubix-empty-chat-message {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 362px);
    background-color: var(--white-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    height: 100%;
}

.empty-chat-message-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.empty-chat-message-box>aside {
    margin-top: 10px;
    font-size: 18px;
    color: var(--black-color);
    font-weight: 600;
    line-height: 100%;
}

.empty-chat-message-box>p {
    line-height: 100%;
    font-size: 14px;
}

.aicubix-chat-user,
.aicubix-chat-profile {
    width: 350px;
    background-color: var(--white-color);
    border-radius: 8px;
    height: 100%;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.aicubix-chat-profile .card-header {
    gap: 15px;
    border-radius: 0px;
}

.search-row {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 0 0;
}

.search-row>i {
    position: absolute;
    left: 10px;
    font-size: 14px;
}

.search-row .comn-form-control {
    padding: 10px 10px 10px 30px;
    height: auto;
}

.aicubix-profile-body {
    /* height: calc(100% - 73px); */
    overflow: auto;
    height: calc(100% - 53px);
    overflow: hidden;
}

.aicubix-profile-box.bg-active {
    background-color: #F2FAF9;
}

.aicubix-profile-box-flex {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.aicubix-profile-box-flex .avatar,
.aicubix-message-profile-row .avatar {
    width: 40px;
    height: 40px;
    font-size: 18px;
    font-weight: 500;
    background-color: var(--darkblue-color) !important;
    background-image: none !important;
    min-width: auto !important;
}

.profile-data-box {
    width: calc(100% - 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-data-box .text-14px {
    width: calc(100% - 100px);
}

.profile-data-box .text-14px span {
    display: block;
    color: var(--black555-color);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    margin-top: 1px;
    text-transform: none;
    white-space: nowrap;
}

.profile-time-text {
    color: var(--black333-color);
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
}

.aicubix-chat-message {
    width: calc(100% - 724px);
    border-radius: 8px;
    height: 100%;
    border: 1px solid var(--border-color);
    background-color: #EAE5DF;
    position: relative;
    z-index: 1;
}

.new-preview-design::before,
.aicubix-chat-message::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../uploads/default/whatsapp-bg-image.png);
    background-size: contain;
    z-index: -1;
    opacity: 0.04;
}

.new-preview-design::before {
    z-index: 0;
    opacity: .1;
    background-size: auto;
}

.aicubix-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* flex-wrap: nowrap; */
    gap: 8px;
    background-color: var(--blue-color);
    border-radius: 8px 8px 0px 0px;
    padding: 12px;
    /* overflow: auto; */
}

.aicubix-message-header>* {
    flex-shrink: 0;
}

.aicubix-message-profile-row {
    display: flex;
    align-items: center;
}

.aicubix-message-profile-row .flag-icon {
    border-color: var(--blue-color);
}

.profile-picture-container {
    display: inline-block;
}

.aicubix-message-profile-text .text-12px {
    color: white;
    margin-bottom: 0px;
}

.aicubix-message-profile-text .badge {
    background-color: rgb(255 255 255 / 15%);
    color: var(--white-color);
    text-transform: none;
    font-size: 10px;
    line-height: 1;
    margin-top: 2px;
    font-weight: 400;
    letter-spacing: 0.2px;
    padding: 4px 8px;
}

.chat-header-button-row {
    display: flex;
    gap: 5px;
}

.chat-header-button-row .comn-btn {
    background-color: var(--white-color);
    color: var(--darkblue-color);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    box-shadow: none;
}

.chat-header-button-row .dropdown {
    display: flex;
    align-items: center;
    line-height: 1;
}

.chat-header-button-row .dropdown .btn {
    box-shadow: none;
    background-color: var(--darkblue-color) !important;
    border-color: var(--darkblue-color) !important;
}

.aicubix-message-chat-box {
    padding: 12px;
    height: calc(100% - 190px);
    overflow: auto;
}

.aicubix-message-chat-box.chat-intervene {
    height: calc(100% - 120px);
}

.aicubix-history-message .aicubix-message-chat-box {
    height: calc(100% - 120px);
}

.aicubix-message-chat-box::-webkit-scrollbar-track {
    background-color: #EAE5DF;
}

.aicubix-message-chat-box::-webkit-scrollbar {
    width: 5px;
    background-color: #EAE5DF;
}

.aicubix-message-chat-box::-webkit-scrollbar-thumb {
    background-color: #c6c6c3;
}

.message-time-row {
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}

.message-time-row::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: #fffaf4;
}

.message-time-row .badge {
    background-color: var(--white-color);
    position: relative;
    border: 1px solid #DFE5EF;
    border-radius: 40px;
    text-transform: none;
    padding-inline: 10px;
}

.chat-text-box {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

.chat-text-box:last-child {
    margin-bottom: 0;
}

.message-chat-design {
    max-width: 336px;
    padding: 10px 15px;
    border-radius: 8px 8px 8px 0px;
    background-color: var(--white-color);
    position: relative;
    margin-left: 6px;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.message-chat-design::before {
    content: "";
    position: absolute;
    left: -8px;
    bottom: 0;
    border-bottom: 13px solid var(--white-color);
    border-left: 8px solid transparent;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.chat-text-right {
    justify-content: flex-end;
}

.chat-text-right .message-chat-design {
    border-radius: 8px 8px 0px 8px;
    background-color: #f0ffed;
    margin-left: 0;
    margin-right: 6px;
}

.chat-text-right .message-chat-design::before {
    left: auto;
    right: -8px;
    bottom: 0;
    border-left: none;
    border-bottom: 13px solid #f0ffed;
    border-right: 8px solid transparent;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.message-chat-design .inChatImage {
    width: 100% !important;
}

.message-chat-design .text-14px {
    text-transform: none;
    font-weight: 400;
    color: var(--black333-color);
}

.message-chat-design .text-14px a {
    color: var(--blue-color);
}

.message-chat-design .comn-btn {
    width: 100%;
    margin-top: 5px;
}

.chat-reply-container {
    padding: 10px;
}

.chat-reply-row {
    border-radius: 6px;
    border: 1px solid var(--darkblue-color);
    background-color: var(--white-color);
}

.aicubix-history-message .chat-reply-row {
    padding: 8px 10px;
    text-align: center;
    color: var(--black-color);
    font-weight: 500;
}

.chat-reply-row .form-control {
    padding: 10px 8px 25px;
    border: none;
}

.chat-reply-button-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    background-color: #F2FAF9;
    padding: 15px 8px;
    border-radius: 0px 0px 10px 10px;
}

.chat-reply-button-leftside {
    display: flex;
    align-items: center;
    gap: 15px;
}

.chat-reply-button-row button {
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    font-size: 16px;
    color: var(--darkblue-color);
    text-transform: capitalize;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.chat-reply-button-row button:focus {
    outline: none;
    box-shadow: none;
}

#modal-templates .modal-header,
#modal-templates .modal-footer,
#modal-replies .modal-header,
#modal-replies .modal-footer,
#modal-create-payment .modal-header,
#modal-create-payment .modal-footer {
    padding: 10px 15px;
}

#modal-templates .modal-body,
#modal-replies .modal-body,
#modal-create-payment .modal-body {
    padding: 15px;
}

#modal-templates .modal-header,
#modal-replies .modal-header,
#modal-create-payment .modal-header {
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

#modal-templates .modal-header .modal-title,
#modal-replies .modal-header .modal-title,
#modal-create-payment .modal-header .modal-title {
    color: var(--black-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-transform: capitalize;
}

#modal-templates .close,
#modal-replies .close,
#modal-create-payment .close {
    padding: 0;
    margin: 0;
}

#modal-templates .modal-footer,
#modal-replies .modal-footer,
#modal-create-payment .modal-footer {
    border-top: 1px solid var(--border-color);
}

.aicubix-chat-user {
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.aicubix-chat-user .top-row {
    text-align: center;
    width: 100%;
}

.aicubix-chat-user .top-row .user-image {
    display: inline-flex;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    background-color: var(--darkblue-color);
    border-radius: 50%;
    font-size: 22px;
    color: var(--white-color);
    margin-bottom: 6px;
}

.aicubix-chat-user .top-row>aside p {
    margin-top: 5px;
    margin-bottom: 0;
}

.user-data-box {
    padding: 10px;
    background-color: #F2FAF9;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.user-data-box>* {
    width: 100%;
}

.user-data-box>p {
    font-size: 11px;
    line-height: 13px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 0px;
    text-transform: capitalize;
    font-weight: 600;
    color: var(--black-color);
}

.user-data-box>p>span {
    color: var(--black333-color);
    font-weight: 400;
    width: 140px;
    flex-shrink: 0;
}

.user-collapse-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-collapse-box {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.user-collapse-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    background-color: transparent;
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-transform: capitalize;
    border: none;
    box-shadow: none;
    outline: none !important;
    color: var(--black-color);
    cursor: pointer;
}

.user-collapse-btn i {
    color: var(--black555-color);
    transition: var(--transition);
}

.user-collapse-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.user-collapse-data {
    border-top: 1px solid var(--border-color);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.user-collapse .user-data-box {
    border: none;
    padding: 0;
    background-color: transparent;
}

.user-collapse .comn-btn {
    padding: 5px 12px;
    font-size: 12px;
}

.collapse-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    color: var(--black-color);
    text-transform: capitalize;
    margin-bottom: -5px;
}

.collapse-title>span {
    flex: 1 0 100px;
    background-color: var(--border-color);
    height: 1px;
}

.tags-btn-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tags-btn-row>p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.tags-btn-row>p button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: #E46068;
    color: var(--white-color);
    font-size: 8px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}

.tags-btn-row>p button:hover {
    background-color: var(--darkblue-color);
}

.select-tag-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.select-tag-row .comn-form-control {
    height: 40px;
}

.create-add-btn {
    color: var(--darkblue-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    text-transform: capitalize;
}

.custor-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    padding-bottom: 30px;
    position: relative;
}

.custor-box:last-child {
    padding-bottom: 0;
}

.custor-box:last-child>.circle::before {
    display: none;
}

.custor-box>.circle {
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid var(--darkblue-color);
    flex-shrink: 0;
    border-radius: 50%;
    margin-top: 4px;
}

.custor-box>.circle::before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 1px;
    height: calc(100% - 18px);
    background-color: rgba(0, 76, 67, 0.2);
}

.custor-box>.circle.fill {
    background-color: var(--darkblue-color);
}

.custor-box>.circle.fill::before {
    background-color: var(--darkblue-color);
}

.custor-box>.circle.stroke {
    background-color: transparent;
}

.custor-box>div {
    width: calc(100% - 18px);
    font-size: 10px;
    font-weight: 600;
    line-height: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--black555-color);
}

.custor-box>div>span {
    padding: 3px 6px;
    border-radius: 5px;
    display: inline-block;
    border-radius: 5px;
    font-size: 10px;
    line-height: 10px;
    text-transform: capitalize;
    font-weight: bold;
}

.custor-box>div>span.colorBlue {
    background-color: #ECF1FF;
    color: #4151A5;
}

.custor-box>div>span.colorOrange {
    background-color: #FAF6E1;
    color: #C8A12B;
}

.custor-box>div>p {
    font-size: 10px;
    line-height: 10px;
    width: 100%;
    opacity: .5;
}

.dashboard-box .text-success {
    font-weight: 500;
    color: var(--purple-color) !important;
}

.aicubix-alert {
    color: #f75676;
    border-color: #f75676;
    background-color: #fffbfc;
    padding: 15px 72px 15px 15px;
}

.aicubix-alert .alert-icon {
    display: inline-flex;
    margin-right: 10px;
}

.aicubix-alert .alert-icon .btn-secondary {
    color: var(--white-color);
    border-color: #f85e76;
    background-color: #f85e76;
}

.aicubix-alert .alert-text {
    font-weight: 500;
}

.aicubix-alert .close>span:not(.sr-only) {
    width: auto;
    height: 23px;
}

.aicubix-alert.alert-dismissible .close>span:not(.sr-only) {
    color: rgba(0, 0, 0, .6);
}

.aicubix-alert.alert-dismissible .close {
    color: rgba(255, 255, 255, .6);
}

.aicubix-alert.alert-dismissible .close:hover>span:not(.sr-only),
.aicubix-alert.alert-dismissible .close:focus>span:not(.sr-only) {
    color: var(--black-color);
}

.comn-badge {
    white-space: nowrap;
    color: var(--white-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    text-transform: capitalize;
    padding: 2px 10px;
    border-radius: 100px;
}

.active-badge {
    background-color: #08CF65;
}

.non-active-badge {
    background-color: #aaaaaa;
}

.landing-page-box {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: var(--black-color);
    border: 1px solid var(--border-color);
}

.landing-page-box:hover {
    background-color: var(--blue-color);
    border-color: var(--blue-color);
    color: var(--white-color);
}

.landing-page-box>i {
    font-size: 14px;
    color: var(--black555-color);
    transform: rotate(-45deg);
    transition: var(--transition);
}

.landing-page-box:hover>i {
    transform: rotate(0deg);
    color: var(--white-color);
}

.image-w-100px {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.text-4-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 79px;
    font-weight: 400;
}

.apps-card .btn-outline-success {
    color: #38a738;
    border-color: currentColor;
}

.apps-card .btn-outline-success:hover {
    border-color: #38a738;
    background-color: #38a738;
    color: var(--white-color);
}

.comn-tab-content {
    border: 1px solid var(--darkblue-color);
    border-radius: 8px;
    padding: 15px;
}

.comn-tab-row {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0px 24px;
}

.comn-tab-row .nav-item {
    padding-right: 0 !important;
    margin-bottom: 0;
}

.comn-tab-row .nav-link {
    border-radius: 8px 8px 0px 0px;
    border: 1px solid rgba(0, 56, 87, 0.50);
    border-bottom: none;
    background-color: #E9E9E9;
    color: var(--black555-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
    box-shadow: none;
}

.comn-tab-row .nav-link::before {
    content: "";
    bottom: -1px;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #f1f1f1;
    opacity: 0;
}

.comn-tab-row .nav-link:hover {
    color: var(--darkblue-color);
}

.comn-tab-row .nav-link.active {
    background-color: transparent;
    border-color: var(--darkblue-color);
    color: var(--darkblue-color);
}

.comn-tab-row .nav-link.active::before {
    opacity: 1;
}

.comn-tab-content>.tab-pane {
    background-color: var(--white-color);
    border-radius: 8px;
    padding: 15px;
}

nav.translation-header {
    background-color: var(--blue-color);
    background-image: none;
    padding: 0px 20px;
    justify-content: space-between;
}

.translation-header .logo {
    max-width: 150px;
}

.translation-panel {
    box-shadow: none;
    background-color: transparent;
    border-radius: 0px;
    margin: 0;
}

.translation-panel .panel-header {
    border: none;
    padding: 0 0 12px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}

.translation-panel .table-responsive {
    display: block;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.translation-panel .panel-body table {
    width: 100%;
    table-layout: inherit;
}

.translation-panel .panel-body td textarea {
    background-color: transparent;
    width: 250px;
    height: 50px;
}

.translation-panel .comn-table-aicubix .table th {
    white-space: nowrap;
}

.search-input.comn-form-control {
    padding-left: 40px;
    background-size: 25px;
    background-position: left 8px center;
    height: auto;
}

.translation-panel .search {
    max-width: 300px;
    margin: 0;
}

.translation-panel .select-group select.comn-form-control {
    appearance: none;
    -moz-appearance: none;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.panel-header-right-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.panel-header-right-row .select-group {
    margin: 0;
}

.edit-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    border-color: var(--blue-color);
    background-color: var(--blue-color);
}


/* .campaign-body {
    padding: 20px 30px;
    max-width: 1460px;
    margin: auto;
} */

.campaign-tabs {
    position: sticky;
    top: 0px;
    z-index: 99;
}

.campaign-tabs>.nav {
    width: 100%;
    background-color: rgb(255 255 255 / 85%);
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    gap: 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    backdrop-filter: blur(5px);
}

.campaign-tabs>.nav .nav-item {
    flex: 1 0 0;
}

.campaign-tabs>.nav .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 15px;
    font-size: 14px;
    font-weight: 500;
    line-height: 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--black555-color);
    text-transform: capitalize;
    background-color: transparent;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
}

.campaign-tabs>.nav .nav-link:hover {
    background-color: rgba(0, 76, 67, 0.05);
}

.campaign-tabs>.nav .overview-link.active {
    background-color: #F7F9FF;
    border-color: #5D87FF;
}

.overview-link i,
.campaign-tabs>.nav .overview-link i {
    color: #5D87FF;
}

.campaign-tabs>.nav .sent-link.active {
    background-color: #FFFBF2;
    border-color: #FFB300;
}

.sent-link i,
.campaign-tabs>.nav .sent-link i {
    color: #FFB300;
}

.campaign-tabs>.nav .delivered-link.active {
    background-color: #F3FCFB;
    border-color: #08C5AE;
}

.delivered-link i,
.campaign-tabs>.nav .delivered-link i {
    color: #08C5AE;
}

.campaign-tabs>.nav .read-link.active {
    background-color: #F3FDF7;
    border-color: #08CF65;
}

.read-link i,
.campaign-tabs>.nav .read-link i {
    color: #08CF65;
}

.campaign-tabs>.nav .clicked-link.active {
    background-color: #FAF9FD;
    border-color: #A48ED2;
}

.clicked-link i,
.campaign-tabs>.nav .clicked-link i {
    color: #A48ED2;
}

.campaign-tabs>.nav .replied-link.active {
    background-color: #F6FCFE;
    border-color: #53BDEB;
}

.replied-link i,
.campaign-tabs>.nav .replied-link i {
    color: #53BDEB;
}

.campaign-tabs>.nav .failed-link.active {
    background-color: #FFF9F6;
    border-color: #F78154;
}

.failed-link i,
.campaign-tabs>.nav .failed-link i {
    color: #F78154;
}

.campaign-tabs>.nav .nav-link>span {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: var(--black-color);
}

.campaign-data-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.campaign-leftside {
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campaign-rightside {
    width: calc(100% - 272px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campaign-list {
    padding: 15px;
    list-style-type: none;
    background-color: var(--white-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 0px;
}

.campaign-list li {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    font-size: 10px;
    font-weight: 500;
    line-height: 13px;
    color: var(--black555-color);
}

.campaign-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.campaign-list li>span {
    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    margin-top: 5px;
    color: var(--black-color);
}

.comn-campaign-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 12px;
}

.comn-campaign-row-2 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 6px;
}

.comn-campaign-row-3 {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.comn-campaign-box {
    padding: 20px;
    background-color: var(--white-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.comn-campaign-row-2 .comn-campaign-box {
    padding: 10px;
    border-radius: 4px;
}

.comn-campaign-box>span {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    line-height: 125%;
    color: var(--black555-color);
    text-transform: capitalize;
}

.comn-campaign-row-2 .comn-campaign-box>span {
    font-size: 10px;
}

.comn-campaign-box>p {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    line-height: 125%;
    margin-top: 5px;
    color: var(--black333-color);
}

.comn-campaign-row-2 .comn-campaign-box>p {
    font-size: 14px;
}

.campaign-body .apexcharts-yaxis-label {
    font-weight: 500;
    fill: var(--black-color);
    color: var(--black-color);
    font-size: 8px;
}

.campaign-apex-chart {
    margin-left: -25px;
    margin-bottom: -15px;
}

.campaign-body .apexcharts-xaxis-label {
    font-weight: bold;
    fill: var(--black-color);
    color: var(--black-color);
    font-size: 10px;
}

.campaign-body .apexcharts-legend {
    gap: 6px;
}

.campaign-body .apexcharts-legend-series {
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin: 0 !important;
}

.campaign-body .apexcharts-legend-series .apexcharts-legend-text {
    font-size: 8px !important;
    font-weight: 500 !important;
    line-height: 10px;
    color: var(--black333-color);
    text-transform: capitalize;
}

.campaign-body svg,
.campaign-body svg foreignObject {
    overflow: visible;
}

.campaign-divide {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #DFE5EF;
    margin: 30px 0px;
}

.campaign-body .apexcharts-tooltip.apexcharts-theme-light {
    border-color: var(--darkblue-color);
    background-color: var(--white-color);
}

.campaign-body .apexcharts-tooltip {
    box-shadow: 0px 4px 10px #00000030;
}

.campaign-body .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background-color: var(--darkblue-color);
    border-color: var(--darkblue-color);
    color: var(--white-color);
    font-weight: 600;
    margin-bottom: 0;
    padding: 4px 10px;
}

.campaign-body .apexcharts-tooltip-series-group {
    padding: 6px 10px !important;
}

.campaign-body .apexcharts-tooltip-marker {
    width: 6px;
    height: 6px;
    margin-right: 5px;
}

.campaign-body .apexcharts-tooltip-y-group {
    padding: 0;
}

.campaign-body.apexcharts-tooltip-text-y-value {
    margin-left: 3px;
    font-weight: bold;
    color: var(--black-color);
}

.campaign-table-top-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.table-top-btn-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.campaign-message-text {
    font-size: 14px;
    line-height: 18px;
    color: var(--black555-color);
}

.campaign-check-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 12px;
    margin-bottom: 20px;
}

.campaign-check-row>aside {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: var(--black333-color);
    text-transform: capitalize;
}

.campaign-check-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.campaign-check-box>label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--black333-color);
    padding-right: 12px;
    border-right: 1px solid var(--border-color);
    text-transform: capitalize;
}

.campaign-check-box>label:last-child {
    border-right: none;
    padding-right: 0;
}

.campaign-check-flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.campaign-check-flex-row>* {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.campaign-badge {
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    text-transform: capitalize;
    padding: 4px 8px;
    border-radius: 8px;
    background-color: #00000010;
    color: var(--white-color);
}
.entries-badge {
    display: inline-flex;
    width: 12px;
    height: 12px;
    padding: 0;
    vertical-align: middle;
    margin-right: 10px;
}
.sent-badge {
    background-color: #FFB300;
}

.delivered-badge {
    background-color: #08C5AE;
}

.read-badge {
    background-color: var(--blue-color);
}

.clicked-badge {
    background-color: #A48ED2;
}

.replied-badge {
    background-color: #53BDEB;
}

.failed-badge {
    background-color: #F78154;
}

.comn-search-btns-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.comn-search-box {
    width: 350px;
    position: relative;
    background-color: var(--white-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 15px;
    border: 1px solid var(--border-color);
}

.comn-search-box>input {
    border: none;
    align-self: stretch;
    background-color: transparent;
    outline: none;
    color: var(--black-color);
    font-size: 14px;
    font-weight: 400;
}

.search-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background-color: var(--blue-color);
    color: var(--white-color);
    font-size: 12px;
    border-radius: 6px;
    outline: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.search-icon-btn:hover {
    background-color: var(--darkblue-color);
}
.search-field {
    background: url(../images/default/search-icon.svg) no-repeat center right 15px;
    background-size: 18px;
    width: 300px;
}

.comn-btns-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-top-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 30px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}

.dashboard-top-box {
    flex: 1 0 100px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 3px;
    border-right: 1px solid var(--border-color);
}

.dashboard-top-box:last-child {
    border-right: none;
}

.dashboard-top-box>span {
    font-size: 14px;
    line-height: 15px;
    color: var(--black555-color);
    text-transform: capitalize;
}

.dashboard-top-box>p {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    color: var(--black-color);
    text-transform: capitalize;
}

.dashboard-badge {
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    padding: 2px 10px;
    background-color: var(--blue-color);
    border-radius: 100px;
    color: var(--white-color);
}

.quality-badge {
    background-color: var(--darkblue-color);
}

.owner-dashboard-row {
    /* background-color: var(--white-color);
    border-radius: 8px; */
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(33.33%, 1fr)); */
    grid-template-columns: repeat(3, 1fr);
    /* outline: 1px solid var(--border-color); */
    /* outline-offset: -1px; */
    overflow: hidden;
    gap: 30px;
}

.superadmin-dashboard-row {
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
}

.owner-dashboard-box {
    padding: 30px;    
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}

.superadmin-dashboard-row .owner-dashboard-box {
    padding: 25px;
}

.owner-dashboard-data {
    width: calc(100% - 60px);
}

.owner-dashboard-data>span,
.open-chats span {
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    margin-bottom: 6px;
    color: var(--black555-color);
    text-transform: capitalize;
    display: block;
}

.owner-dashboard-data>aside,
.open-chats aside {
    font-size: 20px;
    font-weight: 600;
    line-height: 125%;
    color: var(--black-color);
    text-transform: capitalize;
}

.owner-dashboard-data>aside,
.open-chats aside {
    font-size: 26px;
}

.owner-dashboard-data>p {
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    color: var(--black555-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 0;
    margin-top: 30px;
    text-transform: capitalize;
}

.owner-dashboard-data>p>span {
    font-weight: 500;
}

.owner-dashboard-color-box-1 .owner-dashboard-data>p>span {
    color: #61D459;
}

.owner-dashboard-color-box-2 .owner-dashboard-data>p>span {
    color: #EC5740;
}

.owner-dashboard-color-box-3 .owner-dashboard-data>p>span {
    color: #F5B849;
}

.owner-dashboard-color-box-4 .owner-dashboard-data>p>span {
    color: #5D87FF;
}

.owner-dashboard-color-box-5 .owner-dashboard-data>p>span {
    color: #845ADF;
}

.owner-dashboard-color-box-6 .owner-dashboard-data>p>span {
    color: #415FCC;
}

.owner-dashboard-color-box-7 .owner-dashboard-data>p>span {
    color: #BF6CCD;
}

.owner-dashboard-color-box-8 .owner-dashboard-data>p>span {
    color: #64C7CD;
}

.owner-dashboard-color-box-9 .owner-dashboard-data>p>span {
    color: #FF8267;
}

.owner-dashboard-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background-color: #00000010;
}

.superadmin-dashboard-row .owner-dashboard-icon {
    width: 44px;
    height: 44px;
}

.owner-dashboard-color-box-1 .owner-dashboard-icon {
    background-color: rgb(97 212 89 / 10%);
}
.owner-dashboard-icon>i {
    font-size: 30px;
    color: #61D459;
}

.owner-dashboard-color-box-2 .owner-dashboard-icon {
    background-color: rgb(236 87 64 / 10%);
}
.owner-dashboard-color-box-2 .owner-dashboard-icon>i {
    color: #EC5740;
}

.owner-dashboard-color-box-3 .owner-dashboard-icon {
    background-color: rgb(245 184 73 / 10%);
}
.owner-dashboard-color-box-3 .owner-dashboard-icon>i {
    color: #F5B849;
}

.owner-dashboard-color-box-4 .owner-dashboard-icon {
    background-color: rgb(93 135 255 / 10%);
}
.owner-dashboard-color-box-4 .owner-dashboard-icon>i {
    color: #5D87FF;
}

.owner-dashboard-color-box-5 .owner-dashboard-icon {
    background-color: rgb(132 90 223 / 10%);
}
.owner-dashboard-color-box-5 .owner-dashboard-icon>i {
    color: #845ADF;
}

.owner-dashboard-color-box-6 .owner-dashboard-icon {
    background-color: rgb(65 95 204 / 10%);
}
.owner-dashboard-color-box-6 .owner-dashboard-icon>i {
    color: #415FCC;
}

.owner-dashboard-color-box-7 .owner-dashboard-icon {
    background-color: rgb(191 108 205 / 10%);
}
.owner-dashboard-color-box-7 .owner-dashboard-icon>i {
    color: #BF6CCD;
}

.owner-dashboard-color-box-8 .owner-dashboard-icon {
    background-color: #64C7CD1a;
}
.owner-dashboard-color-box-8 .owner-dashboard-icon>i {
    color: #64C7CD;
}

.owner-dashboard-color-box-9 .owner-dashboard-icon {
    background-color: #FF82671a;
}
.owner-dashboard-color-box-9 .owner-dashboard-icon>i {
    color: #FF8267;
}

/* .owner-dashboard-icon>i {
    font-size: 30px;
    color: var(--white-color);
} */

.superadmin-dashboard-row .owner-dashboard-icon>i {
    font-size: 24px;
}

.new-campaign-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.new-campaign-data {
    width: calc(100% - 364px);
}

.new-campaign-preview {
    width: 340px;
}

.sticky-new-campaign-preview {
    position: sticky;
    top: 10px;
}

.new-grid-campaign-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 0px 12px;
}

.campaign-schedule-row .form-group {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.campaign-schedule-row .form-group .form-control-label {
    width: auto;
}

.new-preview-design {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    position: relative;
    padding: 15px;
    background-color: #EAE5DF;
}

.preview-whatsapp {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    color: #00d918;
    font-size: 15px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-preview-body {
    overflow: hidden;
    border-radius: 8px;
}

.new-preview-body #previewElement {
    border: none;
    border-radius: 0px;
}

.new-preview-body>.card {
    border-radius: 0px;
    border: none;
    border-bottom: 1px solid var(--border-color);
}

.new-preview-body #previewElement .card-body {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.preview-btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--blue-color);
}

.aicubix-footer {
    padding: 0px;
    margin-top: 30px;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.campaign-body {
    width: 100%;
}

.pagination,
.comn-pagination {
    margin: 0;
    gap: 5px;
}

.comn-pagination .page-item.disabled .page-link,
.comn-pagination .page-link,
.page-item.disabled .page-link, .page-link {
    color: var(--blue-color);
    border: transparent;
    background-color: transparent;
    margin: 0;
    border-radius: 50% !important;
    width: 30px;
    height: 30px;
}

.comn-pagination .page-item.disabled .page-link,
.page-item.disabled .page-link {
    opacity: .5;
}

.comn-pagination .page-link:hover {
    color: var(--darkblue-color);
    border-color: var(--darkblue-color);
    background-color: rgb(0 76 67 / 20%);
}

.comn-pagination .page-item.active .page-link,
.page-item.active .page-link {
    box-shadow: none;
    background-color: var(--blue-color);
    border-color: var(--blue-color);
    color: var(--white-color);
}

.comn-header {
    border: 0;
    border-radius: 15px !important;
    background-color: var(--white-color);
    margin-bottom: 20px;
    padding: 20px;
}
.comn-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
    text-transform: capitalize;
}
.comn-header h3 i {
    font-size: 28px;
    color: var(--blue-color);
}

.comn-filters-row {
    /* border-top: 1px solid var(--border-color); */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    margin-bottom: 20px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}

.comn-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-gap: 12px;
    align-items: flex-end;
    margin: 0;
}

.comn-filter-grid>* {
    flex-basis: 100%;
    max-width: 100%;
    margin-bottom: 0;
    padding: 0;
}

.comn-filter-btn-row {
    display: grid;
    grid-gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

.comn-filter-btn-row .comn-btn {
    gap: 6px;
    padding: 15px 5px;
    font-size: 12px;
    line-height: 1;
}

.comn-filter-grid .comn-form-control {
    height: 44px;
}

.table-profile-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    font-size: 18px;
    color: var(--white-color);
    margin-right: 10px;
    vertical-align: middle;
}

.table-profile-image>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comn-modal .modal-dialog {
    max-width: 600px;
}

.small-comn-modal .modal-dialog {
    max-width: 500px;
}

.add-contact-modal .modal-dialog {
    max-width: 1300px;
}

.filter-contact-modal .modal-dialog {
    max-width: 900px;
}

.comn-modal .modal-content {
    border-radius: 16px;
}

.modal-backdrop.show {
    opacity: .6;
}

.comn-modal .modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

.comn-modal .modal-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 128%;
    color: var(--black-color);
    /* text-transform: capitalize; */
}

.comn-modal .close {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;   
    opacity: 1;
    font-size: 18px;
}

.comn-modal .close:hover {
    color: var(--darkblue-color) !important;
    opacity: 1 !important;
}

.comn-modal .modal-body {
    padding: 20px;
}

.comn-modal .modal-footer {
    padding: 12px 20px 20px;
    border-top: 1px solid var(--border-color);
}

.modal-body-row {
    display: flex;
    flex-direction: column;
    padding-left: 30%;
    position: relative;
    min-height: 280px;
}

.modal-body-row .comn-upload-image-row {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(30% - 24px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgb(0 76 67 / 5%);
    border-radius: 8px;
}

.modal-body-row .comn-upload-image-row .form-group {
    padding: 0;
    max-width: 100%;
    margin: 0;
    flex: 0 0 auto;
}

.modal-body-row>.form-group,
.modal-body-row>.comn-form-group {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
    /* margin-bottom: 12px; */
}

.modal-body-row>.form-group:last-child,
.modal-body-row>.comn-form-group:last-child {
    margin-bottom: 0;
}

.modal-body-row .img-thumbnail {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--white-color);
    box-shadow: none;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body-row .img-thumbnail::before {
    content: "\f03e";
    position: absolute;
    font-family: 'Font Awesome 6 Free';
    color: var(--border-color);
    font-size: 6vw;
    opacity: 1;
    z-index: -1;
}

.modal-body-row .fileinput-exists .img-thumbnail::before {
    opacity: 0;
}

.campaign-preview-box {
    width: 100%;
    background-color: var(--white-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.campaign-preview-body {
    padding: 15px;
}

.campaign-preview-body>img {
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
}

.campaign-preview-body>p {
    font-size: 12px;
    color: var(--black555-color);
    line-height: 140%;
    margin: 0;
}

.campaign-preview-btn {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    color: var(--darkblue-color);
    border-top: 1px solid currentColor;
    padding: 10px 5px;
    text-transform: capitalize;
}

.contact-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.course-modal .modal-dialog{
    max-width: 400px;
}

.course-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.course-list>aside {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--darkblue-color);
    /* text-transform: capitalize; */
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
}
.course-list>aside>i{
    font-size: 24px;
}
.course-list>aside>p{
    display: flex;
    gap: 3px;
    flex-direction: column;
    width: calc(100% - 34px);
    font-weight: 500;
    color: var(--black-color);
}
.course-list>aside>p>span{
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    opacity: .75;
}

.api-row .comn-aicubix-box {
    height: calc(100% - 30px);
}

.token-text {
    word-break: break-all;
    padding-inline: 0px;
}

.form-group>small {
    display: block;
}

.chat-accordion>.card {
    border-radius: 0px;
    border: none;
}

.chat-accordion .card-header {
    padding: 0;
    border: none;
}

.chataccordion-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    text-transform: capitalize;
    color: var(--black555-color);
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--darkblue-color);
    padding: 20px 12px;
}

.chataccordion-btn:focus {
    outline: none;
}

.chataccordion-btn>span {
    font-size: 10px;
    line-height: 100%;
    color: var(--darkblue-color);
    padding: 2px 10px;
    background-color: rgba(0, 76, 67, 0.1);
    border-radius: 30px;
    font-weight: 600;
}

.chataccordion-btn>i {
    margin-left: auto;
    opacity: .5;
    font-size: 12px;
    transition: var(--transition);
}

.chataccordion-btn[aria-expanded="true"]>i {
    transform: rotate(90deg);
    opacity: 1;
}

.chat-accordion .card-body {
    padding: 0;
    height: calc(100vh - 352px);
    overflow-y: auto;
    border-bottom: 1px solid var(--border-color);
}

.template-add-button-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.template-add-button-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.template-add-button-row-last-0:last-child {
    margin-bottom: 24px;
}

.template-add-button-row>* {
    flex: 1 0 160px;
    margin: 0;
}

.template-add-button-row>* .select2-container {
    width: 100% !important;
}

.template-row-delete-btn {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border: 1px solid currentColor;
    color: #E46068;
    background-color: #FFF7F7;
    border-radius: 10px;
    font-size: 16px;
    padding: 0;
    cursor: pointer;
}

.template-row-delete-btn:hover {
    background-color: #E46068;
    color: #ffffff;
}

.campaign-variable-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.campaign-variable-row>* {
    flex: 1 0 100px;
}

.campaign-variable-row .comn-form-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.campaign-variable-row>*:last-child {
    flex: 0 0 auto;
}

.campaign-variable-row .form-group>label,
.campaign-variable-row .comn-form-group>label {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0px;
}

.campaign-variable-row .comn-form-group>.input-group {
    display: none;
}

.campaign-variable-row .form-group select.comn-form-control,
.campaign-variable-row .comn-form-group select.comn-form-control {
    padding-right: 40px;
}

.comn-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--black333-color);
    text-transform: capitalize;
    margin: 0;
}

.dataTables_length label .form-control {
    padding: 7px 37px 7px 15px;
    height: auto;
    background-color: transparent;
    border: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--black444-color);
}

.dataTables_empty {
    text-align: center;
}

.extra-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.extra-filter-row>* {
    flex: 1 0 100px;
    margin: 0;
}

.extra-filter-row .delete-div-btn,
.extra-filter-row .add-div-btn {
    flex: 0 0 50px;
    height: 50px;
}

.extra-filter-row .delete-div-btn .comn-btn,
.extra-filter-row .add-div-btn .comn-btn {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extra-filter-row .add-div-btn .comn-btn {
    background-color: rgb(0 152 134 / 10%) !important;
    border: 0;
    color: #2592d5 !important;
}

.extra-filter-row .delete-div-btn .comn-btn {
    background-color: rgb(228 96 104 / 10%) !important;
    color: #E46068 !important;
    border: 0;
}

.extra-filter-row .delete-div-btn .comn-btn:hover {
    background-color: #E46068 !important;
    color: var(--white-color) !important;
    /* border-color: #E46068; */
}

.comn-limit-row {
    position: relative;
}

.comn-limit-row .comn-form-control {
    padding-bottom: 25px;
}

.comn-limit-text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    font-size: 10px;
    color: var(--black555-color);
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0px 20px;
}

.comn-limit-text>*:first-child {
    margin-right: auto;
}

.current-plan-btn {
    pointer-events: none;
    background-color: #eeeeee;
}

.comn-radio-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    min-height: 50px;
}

.comn-radio-row .custom-radio .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--blue-color);
    border-color: var(--blue-color);
}

.plan-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 30px;
}

.plan-card-box {
    text-align: left    ;
    flex: 1 0 200px;
    background-color: var(--white-color);
    border-radius: 8px;
    padding: 30px;
    border: 1px solid transparent;
    position: relative;
    z-index: 1;
}
.plan-card-box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    z-index: -1;
}
.plan-card-box.active {
    border: 1px solid var(--darkblue-color);
}

.plan-card-box .plan-header-box {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
}

.plan-card-box .plan-header-box>* {
    width: 100%;
    padding: 0;
}

.plan-card-box .plan-header-box .pricing-price-text {
    color: var(--black-color);
    flex-wrap: wrap;
}

.plan-card-box ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.plan-card-box ul li {
    /* height: 60px; */
    padding: 10px 0px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    /* border-top: 1px solid var(--border-color); */
    color: var(--black555-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 125%;
    text-transform: capitalize;
    position: relative;
}
.plan-card-box ul li:first-child{
    padding-top: 0; 
}
.plan-card-box ul li:last-child{
    padding-bottom: 0;
}
.plan-card-box ul li::before{
    content: "\f00c";
    font-family: 'FontAwesome';
    font-size: 12px;
    color: var(--blue-color);
}
.plan-btn-card{
    margin-block: 30px;
}
.card-payment-row {
    display: flex;
    background-color: var(--white-color);
    align-items: center;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 40px auto 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.card-payment-row-leftside,
.card-payment-row-rightside {
    width: 50%;
}

.card-payment-row-leftside {
    padding: 40px;
    background-image: url(../uploads/default/card-bg.png);
    background-size: cover;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.credit-card-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.credit-card-box {
    width: 315px;
    height: 200px;
    background-image: url(../uploads/default/credit-card-bg.svg);
    background-size: cover;
    padding: 25px 20px;
    border-radius: 15px;
}

.credit-card-box-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.card-number-text {
    font-size: 18px;
    color: var(--white-color);
    margin-bottom: 25px;
    font-weight: 700;
    line-height: 125%;
    display: flex;
    gap: 10px;
    align-items: center;
}

.credit-card-box-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.credit-card-box-bottom>aside {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    color: var(--white-color);
    line-height: 130%;
    font-weight: 400;
    text-transform: capitalize;
}

.credit-card-box-bottom>aside span {
    font-size: 16px;
    font-weight: 700;
    margin-top: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 180px;
    overflow: hidden;
}

.credit-back-card-box {
    margin-left: auto;
    padding-inline: 0px;
}

.credit-back-card-box .credit-card-box-top {
    margin-bottom: 15px;
    width: 100%;
    height: 46px;
    background-color: var(--black333-color);
}

.card-cvv-text {
    width: calc(100% - 20px);
    margin: auto;
    background-color: #225B55;
    border-radius: 3px;
    padding: 5px 15px;
    color: var(--white-color);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.card-cvv-text>span {
    font-weight: bold;
    font-size: 16px;
}

.card-payment-row-rightside {
    padding: 40px;
}

.card-plan-title {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
}

.profile-time-message-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.profile-time-message-row .badge {
    padding: 2px 8px;
    background-color: var(--blue-color);
    color: var(--white-color);
    font-size: 10px;
    line-height: 100%;
    border-radius: 100px;
}

/* .chat-tabs-row .nav {
    background-color: var(--blue-color);
} */

.chat-tabs-row .nav .nav-item {
    padding: 0;
    margin: 0;
}

.chat-tabs-row .nav .nav-link {
    background-color: transparent;
    box-shadow: none;
    color: var(--black333-color);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 12px;
    padding: 15px 2px;
    border-bottom: 3px solid transparent;
    border-radius: 0px;
}

.chat-tabs-row .nav .nav-link.active {
    border-color: var(--blue-color);
    color: var(--blue-color);
}

.tabs-body {
    height: calc(100vh - 226px);
    overflow: auto;
}

.setup-row .comn-aicubix-box {
    height: calc(100% - 20px);
}

.option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.option-row>aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 125%;
    color: var(--black333-color);
}

.option-tags-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0px;
}

.option-tags-container .tags-btn-row>p {
    font-size: 14px;
    line-height: 18px;
}

.option-tags-container .comn-form-control {
    width: 130px;
    padding: 0px 15px;
    height: 40px;
}

.configure-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.configure-row-leftside,
.configure-row-rightside {
    width: calc(50% - 6px);
}

.option-toggle-btn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.configure-row-rightside .new-preview-design,
.configure-row-rightside>p {
    background-color: transparent;
    max-width: 300px;
    margin: 0 auto;
}

.configure-row-rightside .new-preview-design {
    padding: 20px;
}

.configure-row-rightside .new-preview-design::before {
    display: none;
}

.configure-row-rightside .new-preview-design .new-preview-body {
    border-radius: 0;
    overflow: initial;
}

.configure-row-rightside>p {
    text-align: center;
    margin-top: 12px;
}

.option-modal .modal-dialog {
    max-width: 950px;
}

.modal-configure-row {
    margin-top: 40px;
    gap: 24px;
}

.modal-configure-row .configure-row-leftside,
.modal-configure-row .configure-row-rightside {
    width: calc(50% - 12px);
}

.comn-header h3.text-16px {
    font-size: 18px;
    line-height: 125%;
}

.btn-sm.btn-dark {
    border: 1px solid;
}

.btn-sm.btn-dark,
.add-variable-btn,
.comn-search-btns-row .comn-btns-row .comn-btn,
.comn-header .contact-btn-row .comn-btn,
.comn-header .row>*>.comn-btn,
.comn-header .row>.comn-btn {
    /* background-color: var(--blue-color); */
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 8px;
    /* border-color: var(--blue-color); */
}

.btn-sm.btn-dark,
.add-variable-btn {
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-sm.btn-dark:hover,
.add-variable-btn:hover,
.comn-search-btns-row .comn-btns-row .comn-btn:hover,
.comn-header .contact-btn-row .comn-btn:hover,
.comn-header .row>*>.comn-btn:hover,
.comn-header .row>.comn-btn:hover {
    border-color: var(--darkblue-color);
    background-color: var(--darkblue-color);
    color: var(--white-color);
}

.comn-header .comn-btn.comn-btn-border {
    background-color: transparent;
    color: #1b1b1b;
}

.tabs-body {
    position: relative;
}

.chat-loader-row {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white-color);
}

.myuihub-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    transform-style: preserve-3d;
    animation: myuihubLoader 2s infinite ease;
}

.myuihub-loader span {
    height: 100%;
    width: 100%;
    position: absolute;
    border: 1px solid #ffffff;
    background-color: rgb(0, 152, 134, 0.2);
}

.myuihub-loader span:nth-of-type(1) {
    transform: translateZ(-20px) rotateY(180deg);
}

.myuihub-loader span:nth-of-type(2) {
    transform: rotateY(-270deg) translateX(50%);
    transform-origin: top right;
}

.myuihub-loader span:nth-of-type(3) {
    transform: rotateY(270deg) translateX(-50%);
    transform-origin: center left;
}

.myuihub-loader span:nth-of-type(4) {
    transform: rotateX(90deg) translateY(-50%);
    transform-origin: top center;
}

.myuihub-loader span:nth-of-type(5) {
    transform: rotateX(-90deg) translateY(50%);
    transform-origin: bottom center;
}

.myuihub-loader span:nth-of-type(6) {
    transform: translateZ(20px);
}

@keyframes myuihubLoader {
    0% {
        transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
    }
    50% {
        transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
    }
    100% {
        transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
    }
}

.new-campaign-data>.text-16px:first-child {
    padding-top: 20px;
}

.new-campaign-data>.text-16px {
    font-size: 24px;
    line-height: 125%;
    font-weight: 600;
}
.connect-cat-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}
.connect-cat-box {
    width: 100%;
    background-color: var(--white-color);
    padding: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}
.connect-cat-box>* {
    flex: 1 0 400px;
}
.connect-cat-data>aside,
.connect-cat-content>aside{
font-size: 16px;
font-weight: 500;
line-height: 120%;
color: var(--black-color);
margin-bottom: 5px;
text-transform: capitalize;
}
.connect-cat-data>aside{
    color: var(--black333-color);
}
.connect-cat-content>p{
font-size: 14px;
font-weight: 400;
line-height: 140%;
color: var(--black555-color);
}
.connect-cat-data {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.connect-cat-data .form-group{
    margin-bottom: 0;
    min-width: 500px;
}
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.template-card{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}
.template-image{
    width: 44px;
    height: 44px;
}
.template-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.template-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: -8px;
}
.image-badge{
    background-color: #ECE5CA;
    color: #534000;
}
.share-badge{
    background-color: #DFDFDF;
    color: #777777;
    padding-block: 3.5px;
    font-size: 10px;
}
.template-title{
font-size: 14px;
font-weight: 500;
line-height: 125%;
text-transform: capitalize;
margin-bottom: -14px;
color: var(--black-color);
}
.template-card>p{
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    display: -webkit-box;
font-size: 12px;
line-height: 150%;
color: var(--black555-color);
margin: 0;
width: 100%;
}
.template-btn-row{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
}
.template-btn-row .comn-btn{
    background-color: transparent;
    color: var(--blue-color);
    border-color: var(--blue-color);
    padding-block: 2.5px;
}
.template-btn-row .comn-btn-border{
    border-color: var(--darkblue-color);
    color: var(--darkblue-color);
}
.template-btn-row .comn-btn:hover{
    background-color: var(--blue-color);
    color: var(--white-color);
}
.template-btn-row .comn-btn-border:hover{
    background-color: var(--darkblue-color);
}
.template-sticky {
    position: sticky;
    top: 20px;
    padding: 15px;
    border-radius: 8px;
    gap: 10px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}
.template-sticky a{
    color: var(--black555-color);
    font-size: 13px;
    font-weight: 500;
    line-height: 125%;
    padding: 10px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.template-sticky a.active{
    border-color: var(--blue-color);
    background-color: var(--blue-color);
    color: var(--white-color);
}
.temp-icon-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
}
.temp-icon-card input{
    display: none;
}
.temp-icon-card .icon-label{
    width: 100%;
    height: 100%;
    border: 1px solid #dddddd;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}
.temp-icon-card .icon-label::before {
    content: "\f00c";
    font-family: 'fontawesome';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 76, 67, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: var(--white-color);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.temp-icon-card input:checked + .icon-label{
    border-color: #004C43;
}
.temp-icon-card input:checked + .icon-label::before{
    opacity: 1;
    visibility: visible;
}
.temp-icon-card .icon-label img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.select-icon-card{
    width: 100%;
    padding: 15px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    background-color: #f5f5f5;
    margin-top: 20px;
}
.select-icon-card img{
    width: 100%;
    height: 120px;
    object-fit: scale-down;
    background-color: var(--white-color);
    padding: 0;
    box-shadow: none;
}
.select-icon-card .comn-btn{
    width: 100%;
    margin-top: 10px;
}
.switch-wrapper {
    position: relative;
    display: inline-flex;
    padding: 4px;
    border: 1px solid lightgrey;
    margin-bottom: 20px;
    border-radius: 30px;
    background: var(--white-color);
  }

  .switch-wrapper [type="radio"] {
    position: absolute;
    left: -9999px;
  }

  .switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"],
  .switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"] {
    color: var(--white-color);
  }

  .switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"]:hover,
  .switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"]:hover {
    background: transparent;
  }

  .switch-wrapper
    [type="radio"]:checked#monthly
    + label[for="yearly"]
    ~ .highlighter {
    transform: none;
  }

  .switch-wrapper
    [type="radio"]:checked#yearly
    + label[for="monthly"]
    ~ .highlighter {
    transform: translateX(100%);
  }

  .switch-wrapper label {
    font-size: 16px;
    z-index: 1;
    min-width: 100px;
    line-height: 40px;
    cursor: pointer;
    border-radius: 30px;
    transition: color 0.25s ease-in-out;
    margin: 0;
    text-align: center;
  }

  .switch-wrapper label:hover {
    background: var(--f1f1f1-color);
  }

  .switch-wrapper .highlighter {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: 30px;
    background: var(--darkblue-color);
    transition: transform 0.25s ease-in-out;
  }

.appointment-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    color: var(--black-color);
    margin: 0;
}

.next-prev-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.next-prev-row .comn-btn {
    gap: 8px;
}

.slot-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.slot-leftside {
    width: 230px;
    background-color: var(--white-color);
    padding: 15px;
    border-radius: 15px;        
}

.slot-leftside .campaign-tabs {
    position: initial;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.slot-leftside .campaign-tabs>.nav {
    padding: 0;
    border-radius: 0;
    border: none;
}

.slot-leftside .campaign-tabs>.nav .nav-link.active {
    background-color: #F2F5F7;
    color: var(--blue-color);
    border-color: currentColor;
}

.slot-rightside {
    width: calc(100% - 260px);
}

.slot-week-row {
    background-color: var(--white-color);
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.slot-week-row>* {
    width: 100%;
}

.slot-week-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.open-close-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.open-close-row>span {
    font-size: 14px;
    text-transform: capitalize;
    color: var(--black-color);
}

.slot-week-box {
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.slot-week-box>aside {
    color: var(--black555-color);
}

.slot-week-group-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.slot-week-group-row>* {
    flex: 1 0 120px;
    margin: 0;
}

.pdetail-count-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 50px;
    overflow: hidden;
    border-radius: 100px;
    border: 1px solid #DDDDDD;
    padding: 10px 20px;
    color: var(--black-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #f7fcfb;
}

.pdetail-count-box>p {
    cursor: pointer;
    margin: 0;
}

.pdetail-count-box>p:hover {
    color: var(--blue-color);
}

.pdetail-count-box>input {
    text-align: center;
    background-color: transparent;
    border: none;
}

.template-form .carousel-template-section .carousel-card {
    border: 1px dashed var(--black555-color);
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 25px;
}
.new-preview-body .carousel-control-next-icon,
.new-preview-body .carousel-control-prev-icon {
    background-color: #666;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-size: 16px;
}

.template-preview-modal .modal-content button.close {
    position: absolute;
    z-index: 1;
    right: -5px;
    top: -5px;
}
.chat-pay-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.chat-pay-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.chat-pay-box>aside,
    .chat-pay-box>p{
    font-size: 12px;
    color: var(--black555-color);
    margin: 0;

}
.chat-pay-box>aside{
    text-transform: capitalize;
    color: var(--black-color);
    cursor: default;
}
.order-column{
    flex: 1 0 10px;
    cursor: pointer;
}
.amount-column{
    flex: 0 0 60px;
    cursor: pointer;
}
.status-column{
    flex: 0 0 70px;
    cursor: pointer;
}
.chat-pay-inner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.chat-pay-inner-head h3{
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.chat-course-box {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.chat-course-box:first-child{
    padding-top: 20px;
    border-top: 1px solid var(--border-color);

}
.chat-course-box>p {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
}
.chat-course-box>span {
    font-size: 12px;
    margin: 0;
    display: block;
}
.chat-total-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;
}
.chat-total-list li{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 12px;
    color: var(--black555-color);
}
.chat-total-list li.total-li-box{
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 500;
    color: var(--black-color);
}
.chat-total-list li span {
    flex: 0 0 70px;
    font-weight: 500;
    color: var(--black333-color);
    text-align: right;
}
.chat-pay-modal .modal-dialog{
max-width: 1200px;
}
.chat-pay-body {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}
#create-contact-payment-form{
    width: calc(100% - 380px);
}
#chat-order-message-preview{
    width: 350px;
}
.template-row-delete-btn.plus{
    background-color: rgba(0, 76, 67, 0.05);
    color: var(--darkblue-color);
}
.payment-setting-icon {
    color: #777;
    font-size: 24px;
    margin-right: 15px;
    vertical-align: -4px;
}

/*For scroll*/
.aicubix_body ::-webkit-scrollbar, span.select2-dropdown.select2-dropdown--below ::-webkit-scrollbar {
    width: 5px; 
    height: 5px;
  }
  .aicubix_body ::-webkit-scrollbar-thumb, span.select2-dropdown.select2-dropdown--below ::-webkit-scrollbar-thumb{
    background-color: #444;
    outline: 0px solid #fff;
  }
  .aicubix_body ::-webkit-scrollbar-track, span.select2-dropdown.select2-dropdown--below ::-webkit-scrollbar-track {
      background-color: #ccc;
    /*box-shadow: inset 0 0 2px rgba(0,0,0,0.2);*/
  }
  
  @-moz-document url-prefix() {
    .aicubix_body *, span.select2-dropdown.select2-dropdown--below * {
      scrollbar-width: thin;
      scrollbar-color: #1e202a;
    }
  }
 


/* ------------------------- Media CSS start here ------------------------- */

@media screen and (width <=1599px) {
    .aicubix-message-profile-text .text-12px {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 165px;
    }
}

@media screen and (width <=1499px) {
    .message-chat-design {
        max-width: 350px;
    }
}

@media screen and (width <=1399px) {
    .login-leftside {
        width: calc(100% - 550px);
    }
    .login-rightside {
        width: 550px;
    }
    #chatList {
        padding: 0px !important;
    }
    .aicubix-chat-row {
        height: calc(100vh - 91px);
    }
    .aicubix-chat-user,
    .aicubix-chat-profile {
        width: 300px;
    }
    .aicubix-chat-user {
        padding: 6px;
    }
    .aicubix-chat-message {
        width: calc(100% - 624px);
    }
    .comn-campaign-row {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
    .comn-campaign-row-2 {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    .campaign-body .apexcharts-legend-series .apexcharts-legend-text {
        font-size: 0.45vw !important;
    }
    .owner-dashboard-row {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
    .superadmin-dashboard-row {
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    }
    .owner-dashboard-box {
        padding: 20px;
    }
    .owner-dashboard-data>aside {
        font-size: 18px;
    }
    .owner-dashboard-icon {
        width: 40px;
        height: 40px;
    }
    .owner-dashboard-icon>i {
        font-size: 24px;
    }
    .dashboard-top-box {
        gap: 5px;
    }
    .dashboard-top-box>span {
        font-size: 10px;
    }
    .dashboard-top-box>p {
        font-size: 14px;
    }
    .dashboard-badge {
        font-size: 10px;
    }
    .new-grid-campaign-row {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    .chat-accordion .card-body {
        height: calc(100vh - 331px);
    }
    .aicubix-empty-chat-message {
        width: calc(100% - 312px);
    }
    .tabs-body {
        height: calc(100vh - 203px);
    }
    .chat-tabs-row .nav .nav-link {
        font-size: 10px;
    }
}

@media screen and (width <=1199px) {
    .login-leftside {
        width: calc(100% - 450px);
    }
    .login-leftside-data {
        max-width: 480px;
    }
    .login-rightside {
        width: 450px;
    }
    .login-rightside-data {
        max-width: 350px;
    }
    .aicubix-chat-profile {
        width: 300px;
    }
    .aicubix-chat-message {
        width: calc(100% - 312px);
    }
    .aicubix-chat-row {
        overflow-y: auto;
    }
    .aicubix-empty-chat-message,
    .aicubix-chat-user,
    .aicubix-chat-profile {
        width: calc(50% - 6px);
    }
    .aicubix-chat-message {
        width: 100%;
        order: 1;
    }
    .campaign-leftside {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .campaign-list {
        width: calc(100% - 272px);
    }
    .campaign-preview-box {
        width: 260px;
    }
    .campaign-rightside {
        width: 100%;
    }
    .campaign-body .apexcharts-legend-series .apexcharts-legend-text {
        font-size: 6px !important;
    }
    .comn-campaign-box {
        padding: 15px;
    }
    .comn-campaign-box>span {
        font-size: 10px;
    }
    .comn-campaign-box>p {
        font-size: 16px;
    }
    .dashboard-top-box {
        padding: 15px 0px;
    }
    .plan-card-box ul li {
        font-size: 12px;
    }
    .card-payment-row-leftside {
        padding: 40px 20px;
    }
    .comn-search-box {
        width: calc(50% - 5px);       
    }
}

@media screen and (width <=991px) {
    .login-row {
        height: auto;
    }
    .login-leftside,
    .login-rightside {
        width: 100%;
        height: auto;
        padding: 30px 20px;
    }
    .logo-box {
        position: initial;
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }
    .logo-box>a {
        display: inline-block;
    }
    .login-leftside-data>img {
        height: 220px;
    }
    .aicubix-chat-profile {
        width: 100%;
        height: 400px;
    }
    .aicubix-chat-message {
        width: 100%;
    }
    .aicubix-message-profile-row .flag-icon {
        left: -18px;
        top: 18px;
    }
    .aicubix-message-chat-box {
        height: calc(100% - 605px);
    }
    .comn-tab-row {
        overflow-x: auto;
        margin: 0px 15px;
        padding: 0;
    }
    .comn-tab-row .nav-link {
        white-space: nowrap;
    }
    .comn-tab-row .nav-link::before {
        display: none;
    }
    .aicubix-chat-user,
    .aicubix-chat-profile,
    .aicubix-chat-message {
        width: 100%;
        height: 60vh;
    }
    .aicubix-empty-chat-message {
        display: none;
    }
    .aicubix-message-chat-box {
        height: calc(100% - 18.8vh);
    }
    /* .campaign-body {
        padding: 20px;
    } */
    .campaign-body .apexcharts-legend-series {
        padding: 2px 8px;
        border-radius: 3px;
    }
    .campaign-list,
    .campaign-preview-box {
        width: calc(50% - 6px);
    }
    .comn-campaign-row {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        grid-gap: 6px;
    }
    .comn-campaign-row-2 {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    .comn-campaign-box {
        padding: 10px;
        border-radius: 4px;
    }
    .comn-campaign-box>span {
        font-size: 8px;
    }
    .comn-campaign-box>p {
        font-size: 14px;
        margin-top: 2px;
    }
    .comn-campaign-row-2 .comn-campaign-box>span {
        font-size: 8px;
    }
    .comn-campaign-row-2 .comn-campaign-box>p {
        font-size: 12px;
    }
    .dashboard-top-row {
        gap: 15px;
        padding: 15px;
    }
    .dashboard-top-box {
        padding: 0px 0px 15px;
        flex-basis: 100%;
        border-bottom: 1px solid var(--border-color);
        border-right: none;
    }
    .dashboard-top-box:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .superadmin-dashboard-row {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }
    .comn-filter-btn-row .comn-btn {
        padding: 12px 5px;
        font-size: 14px;
    }
    .add-contact-modal .modal-dialog {
        max-width: 95%;
    }
    .new-campaign-data,
    .new-campaign-preview {
        width: 100%;
    }
    .chat-accordion .card-body {
        height: calc(100vh - 650px);
    }
    .modal-body-row {
        padding-left: 40%;
    }
    .modal-body-row .comn-upload-image-row {
        width: calc(40% - 24px);
    }
    .plan-card-row {
        background-color: transparent;
        border: none;
        gap: 30px;
        overflow: initial;
    }
    .plan-card-box {
        flex-basis: 100%;
        border: none;
        background-color: var(--white-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
    }
    .plan-card-box ul li {
        font-size: 14px;
        height: auto;
        min-height: 50px;
    }
    .card-payment-row-leftside,
    .card-payment-row-rightside {
        width: 100%;
    }
    .tabs-body {
        height: calc(100vh - 522px);
    }
    .modal-configure-row .configure-row-leftside,
    .modal-configure-row .configure-row-rightside,
    .configure-row-leftside,
    .configure-row-rightside {
        width: 100%;
    }
    .configure-row-rightside .new-preview-design,
    .configure-row-rightside>p {
        max-width: none;
    }
    .comn-aicubix-box-2 {
        padding: 15px;
    }
    .comn-search-leftside, .comn-search-box {
        width: 100%;
    }
}

@media screen and (width <=767px) {
    .login-leftside-data {
        gap: 20px;
    }
    .login-leftside-data>aside {
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 0px;
    }
    .navbar-vertical.navbar-expand-md.aicubix-sidebar,
    .aicubix-sidebar {
        max-width: 100%;
        padding: 15px;
    }
    .navbar-vertical.navbar-expand-md.aicubix-sidebar .navbar-brand {
        width: auto;
        height: auto;
        border: none;
        margin-bottom: 0;
        padding: 0;
    }
    .navbar-vertical.navbar-expand-md.aicubix-sidebar .navbar-brand .navbar-brand-img {
        max-height: 50px;
    }
    .navbar-light.aicubix-sidebar .navbar-toggler-icon {
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox=\'0 0 30 30\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath stroke=\'rgba(26, 158, 209, 1)\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 7h22M4 15h22M4 23h22\'/%3E%3C/svg%3E');
    }
    .navbar-light .navbar-toggler {       
        padding: 0;
    }
    .navbar-vertical.aicubix-sidebar .navbar-collapse {
        width: 100%;
        padding: 0px 15px;
    }    
    .navbar-collapse .navbar-collapse-header {
        border-bottom: 1px solid rgb(255 255 255 / 10%);
        margin-bottom: 0px;
        padding-top: 10px;
    }
    .aicubix-sidebar .navbar-nav .nav-link.active {
        color: var(--white-color) !important;
    }
    .navbar-collapse .navbar-toggler span {
        background-color: var(--black444-color);
    }
    .aicibix-main-content,
    .navbar-vertical.navbar-expand-md.fixed-left+.main-content.aicibix-main-content {
        margin-left: 0;
        padding: 20px 0 0;
    }
    .aicubix_body {
        padding: 15px;
    }
    .main-content .aicubix-header .container-fluid {
        justify-content: center;
    }
    .main-content .aicubix-header {
        padding: 0px 10px !important;
        min-height: auto;
    }
    .main-content .aicubix-header .comn-page-title {
        text-align: center;
        line-height: 32px;
    }
    .aicubix-chat-row {
        height: calc(100vh - 95px);
    }
    .aicubix-chat-profile {
        height: 100%;
    }
    .aicubix-chat-message {
        height: 600px;
    }
    .aicubix-message-chat-box {
        height: calc(100% - 245px);
    }
    .message-chat-design {
        max-width: 80%;
    }
    .message-chat-design .inChatImage {
        width: 150px !important;
    }
    .search-input.comn-form-control {
        width: 260px;
    }
    nav.translation-header {
        padding: 10px 10px;
        gap: 10px;
        height: auto;
    }
    .translation-header .logo {
        max-width: 100px;
        flex-shrink: 0;
    }
    .translation-header>ul {
        flex-wrap: wrap;
        padding-left: 0;
        width: auto;
        display: inline-flex;
        gap: 12px;
    }
    .translation-header>ul li {
        padding: 0;
    }
    .aicubix-chat-message {
        order: initial;
    }
    .aicubix-message-chat-box {
        height: calc(100% - 53vh);
    }
    .aicubix-chat-user,
    .aicubix-chat-profile,
    .aicubix-chat-message {
        height: 100vh;
    }
    .chat-accordion .card-body {
        height: calc(100vh - 240px);
    }
    .aicubix-message-header {
        flex-wrap: nowrap;
        padding-inline: 4px;
    }
    .aicubix-message-profile-row,
    .chat-header-button-row {
        flex-shrink: 0;
    }
    .aicubix-message-profile-row .flag-icon {
        left: -14px;
        top: 19px;
        width: 14px !important;
        height: 14px !important;
        border-width: 2px;
    }
    .aicubix-message-profile-row .avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .chat-header-button-row .comn-btn {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    .chat-header-button-row .dropdown .btn {
        font-size: 8px;
        padding: 2px 5px;
    }
    .aicubix-message-profile-text .text-12px {
        font-size: 10px;
    }
    .aicubix-message-profile-text .badge {
        font-size: 8px;
    }
    .modal-body-row {
        padding-left: 0;
    }
    .modal-body-row .comn-upload-image-row {
        position: initial;
        margin-bottom: 15px;
        width: 100%;
        padding: 15px 0px;
    }
    .tabs-body {
        height: calc(100vh - 112px);
    }
    .connect-cat-box>* {
        flex-basis: 100%;
    }    
    

}

@media screen and (width <=575px) {
    .text-4-ellipsis {
        min-height: auto;
    }
    .aicubix-chat-user,
    .aicubix-chat-profile,
    .aicubix-chat-message {
        height: 80vh;
    }
    .aicubix-message-chat-box {
        height: calc(100% - 30vh);
    }
    /* .campaign-body {
        padding: 10px;
    } */
    .campaign-list,
    .campaign-preview-box {
        width: 100%;
    }
    .campaign-apex-chart {
        margin-left: -15px;
    }
    .campaign-body .apexcharts-yaxis-label,
    .campaign-body .apexcharts-xaxis-label {
        font-size: 5px;
    }
    .campaign-body .apexcharts-legend-series .apexcharts-legend-text {
        font-size: 4px !important;
    }
    .campaign-body .apexcharts-legend-series {
        padding: 0px 5px;
        border-radius: 2px;
    }
    .campaign-body .apexcharts-legend {
        gap: 4px;
    }
    .campaign-body .apexcharts-legend-marker {
        width: 3px !important;
        height: 3px !important;
        top: -1px !important;
    }
    .comn-filter-btn-row .comn-btn {
        font-size: 12px;
    }
    .action-column {
        width: auto;
    }
    .chat-accordion .card-body {
        height: calc(100vh - 368px);
    }
    .plan-card-box .plan-header-box {
        padding: 30px 0;
    }
    .credit-card-box {
        width: 100%;
    }
    .card-payment-row-rightside {
        padding: 30px 20px;
    }
    .tabs-body {
        height: calc(100vh - 240px);
    }
    .connect-cat-data .form-group {
        min-width: auto;
        width: 100%;
    }
}

@media screen and (max-width: 1199px) {
    .next-prev-row .comn-btn {
        padding-block: 5px;
    }
}

@media screen and (max-width: 991px) {
    .next-prev-row .comn-btn {
        padding: 3px 10px;
    }
    .next-prev-row {
        gap: 5px;
    }
    .slot-rightside,
    .slot-leftside {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .next-prev-row .comn-btn {
        gap: 4px;
    }
    .slot-week-row,
    .slot-week-box {
        padding: 15px;
        gap: 15px;
    }
    .slot-week-group-row>* {
        flex-basis: 170px;
    }
}

/* ------------------------- Media CSS end here ------------------------- */


/* ------------------------- landing page CSS start here ------------------------- */

body.landing-page {
    font-family: 'Poppins', sans-serif;
    line-height: 0;
    background-color: var(--white-color);
}

.collapse {
    visibility: visible;
}

.land-comn-padding {
    padding: 100px 0px;
}

.land-comn-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    background-color: var(--blue-color);
    padding: 10px 30px;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-transform: capitalize;
    border: 1px solid transparent;
}

.land-comn-border-btn {
    color: var(--blue-color);
    border-color: currentColor;
    background-color: transparent;
}

.land-comn-btn:hover {
    background-color: var(--darkland-color);
    border-color: var(--darkland-color);
    color: var(--white-color);
}

.land-comn-title {
    color: var(--darkland-color);
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    line-height: 150%;
    text-transform: capitalize;
    margin-bottom: 60px;
}

.landing-header {
    background-color: var(--white-color);
    padding: 20px 0px;
}

.landing-header .navbar .navbar-nav {
    gap: 32px;
}

.landing-header .navbar .navbar-collapse {
    justify-content: space-between;
}

.landing-header .navbar .navbar-nav .nav-link {
    color: var(--black333-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    padding: 0;
}

.landing-header .navbar .navbar-nav .nav-link:hover,
.header-language-row .text-16px:hover {
    color: var(--blue-color);
}

.text-16px.dropdown-item:hover {
    background-color: rgb(93 135 255 / 10%);
    border-radius: 5px;
}

.header-login-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-language-row .space-y-2>:not([hidden])~:not([hidden]) {
    margin-top: 0;
}

.land-banner {
    background-color: #F6F9FF;
}

.banner-small-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--blue-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    padding: 10px 20px;
    border-radius: 100px;
    background-color: var(--white-color);
    margin-bottom: 20px;
}

.banner-title {
    color: var(--darkland-color);
    font-size: 50px;
    font-weight: 700;
    line-height: 140%;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.banner-title>span {
    display: block;
    color: var(--blue-color);
}

.banner-para {
    color: var(--black333-color);
    font-size: 20px;
    line-height: 140%;
    margin-bottom: 30px;
}

.banner-image-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.company-image {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(51, 51, 51, 0.1);
}

.company-image>img {
    max-height: 60px;
}

.associates-splide .company-image>img {
    max-height: 80px;
}

.associates-splide,
.company-splide {
    outline: 1px solid var(--white-color);
    outline-offset: -1px;
    position: relative;
}

.associates-splide::before,
.associates-splide::after,
.company-splide::before,
.company-splide::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--white-color);
    z-index: 1;
}

.associates-splide::after,
.company-splide::after {
    top: auto;
    bottom: 0;
}

.campaign-row {
    margin-left: -30px;
    margin-right: -30px;
}

.campaign-row>* {
    padding-left: 30px;
    padding-right: 30px;
}

.campaign-small-title {
    color: var(--blue-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-transform: capitalize;
    display: table;
    margin-bottom: 10px;
}

.campaign-title {
    color: var(--darkland-color);
    font-size: 33px;
    font-weight: 700;
    line-height: 150%;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.campaign-para-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.campaign-para-row>* {
    width: 100%;
    text-transform: none;
    color: var(--darkland-color);
}

.campaign-para-row p {
    margin-bottom: 0;
}

.land-pricing {
    background-color: #EFF9FF;
}

.pricing-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 15px;
}

.pricing-box {
    border-radius: 10px;
    background-color: var(--white-color);
    box-shadow: 0px 25px 50px 0px rgba(81, 181, 240, 0.05);
    overflow: hidden;
}

.price-plan-text {
    color: var(--white-color);
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-transform: capitalize;
    padding: 30px 5px;
}

.pricing-color-box-1 .price-plan-text {
    background-color: #51B5F0;
}

.pricing-color-box-2 .price-plan-text {
    background-color: #778AEE;
}

.pricing-color-box-3 .price-plan-text {
    background-color: #E8A02D;
}

.pricing-data {
    padding: 15px;
}

.pricing-price-text {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    padding: 30px 10px;
    color: #51B5F0;
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    line-height: 100%;
    text-transform: capitalize;
    border-radius: 5px;
    margin-bottom: 15px;
}
.plan-card-box .pricing-price-text{
    font-size: 34px;
    gap: 2px 7px;
}

.pricing-color-box-1 .pricing-price-text {
    color: #51B5F0;
    background-color: rgba(81, 181, 240, 0.05);
}

.pricing-color-box-2 .pricing-price-text {
    color: #778AEE;
    background-color: rgba(119, 138, 238, 0.05);
}

.pricing-color-box-3 .pricing-price-text {
    color: #E8A02D;
    background-color: rgba(232, 160, 45, 0.05);
}

.pricing-price-text i,
.pricing-price-text span {
    font-size: 18px;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 0px;
    text-align: left;
    opacity: .7;
}

.pricing-price-text .pricing-gst-text {
    text-transform: none;
    font-size: 13px;
}

.pricing-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.pricing-list>li {
    padding: 15px;
    color: var(--black333-color);
    font-size: 16px;
    line-height: 150%;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pricing-list>li:last-child {
    border-bottom: none;
}

.pricing-list>li>i {
    font-size: 18px;
    color: #FF3838;
}

.pricing-color-box-1 .pricing-list>li>i.fa-circle-check {
    color: #51B5F0;
}

.pricing-color-box-2 .pricing-list>li>i.fa-circle-check {
    color: #778AEE;
}

.pricing-color-box-3 .pricing-list>li>i.fa-circle-check {
    color: #E8A02D;
}

.pricing-btn-row {
    text-align: center;
    padding: 30px 10px 15px;
}

.pricing-color-box-1 .pricing-btn-row .land-comn-btn {
    background-color: #51B5F0;
}

.pricing-color-box-2 .pricing-btn-row .land-comn-btn {
    background-color: #778AEE;
}

.pricing-color-box-3 .pricing-btn-row .land-comn-btn {
    background-color: #E8A02D;
}

.pricing-btn-row .land-comn-btn:hover {
    background-color: var(--darkland-color);
}

.land-divide {
    width: 100%;
    height: 1px;
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.land-testimonial {
    background-image: linear-gradient(180deg, #EFF9FF 0%, rgba(239, 249, 255, 0.00) 68%);
}

.testi-box {
    border-radius: 12px;
    border: 1px solid rgba(51, 51, 51, 0.07);
    background-color: var(--white-color);
    padding: 24px;
    position: relative;
}

.testi-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid #F3F4F6;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.testi-header>img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 0;
}

.testi-header>aside {
    width: calc(100% - 60px);
    color: #4B5563;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
}

.testi-header>aside>span {
    color: var(--black555-color);
    font-size: 14px;
    line-height: 20px;
    margin-top: 4px;
}

.testi-box .text-14px {
    font-weight: 400;
    color: var(--black333-color);
    text-transform: none;
    margin-bottom: 0;
    line-height: 21px;
}

.land-faq {
    position: relative;
}

.faq-bg-image {
    position: absolute;
    top: -224px;
    left: 0;
    width: 100%;
    z-index: -1;
    opacity: 0.5;
}

.faq-box {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.10);
}

.faq-box.active {
    background-color: rgba(20, 38, 89, 0.07);
    backdrop-filter: blur(2px);
}

.faq-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--darkland-color);
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    text-transform: capitalize;
    margin-bottom: 0;
    cursor: pointer;
}

.faq-title>i {
    transition: var(--transition);
}

.faq-box.active .faq-title>i {
    transform: rotate(180deg);
}

.faq-box .text-16px {
    color: var(--darkland-color);
    font-weight: 400;
    line-height: 140%;
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 0;
    text-transform: none;
    border-top: 1px solid rgba(51, 51, 51, 0.10);
}

.landing-footer {
    background-color: var(--darkland-color);
    padding: 30px 0px;
}

.footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-leftside,
.footer-rightside {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-line {
    align-self: stretch;
    width: 1px;
    background-color: #999999;
    display: block;
}

.logo-text {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 0;
}

.footer-leftside .text-14px {
    color: var(--white-color);
    font-weight: 400;
}

.footer-list {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.footer-list li a {
    color: var(--white-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

.footer-list li a:hover {
    color: var(--blue-color);
}

.social-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.social-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.20);
    font-size: 16px;
    color: var(--white-color);
}

.social-list li a:hover {
    background-color: var(--white-color);
    color: var(--darkland-color);
}

.whatsapp-aicubix-box {
    padding: 24px;
}

.colorPicker-form-control {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 15px;
}

.colorPicker-form-control input,
.colorPicker-form-control input::-webkit-color-swatch-wrapper,
.colorPicker-form-control input::-webkit-color-swatch {
    border-radius: 5px;
}

.whatsapp-preview-btn-box {
    margin-bottom: 30px;
}

.whatsapp-preview-btn-box>p {
    margin-bottom: 5px;
}

.whatsapp-check-box {
    min-height: 50px;
}

.wp-code-box {
    margin-top: 24px;
}

.wp-code-box .comn-form-control {
    word-break: break-all;
}

.whatsapp-widget-preview-box {
    max-width: 350px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.whatsapp-widget-preview-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background-color: #fbffc8;
}

.whatsapp-widget-preview-header>img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
}

.whatsapp-widget-preview-header>aside {
    font-weight: 600;
    font-size: 16px;
    color: var(--black333-color);
    width: calc(100% - 50px);
    line-height: 100%;
}


/* .whatsapp-widget-preview-header>aside span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #4F4F4F;
    margin-top: 5px;
} */

.whatsapp-widget-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #4F4F4F;
    margin-top: 5px;
}

.whatsapp-widget-preview-body {
    background-color: #EAE5DF;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.whatsapp-widget-preview-body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.06;
    background-image: url(../uploads/default/whatsapp-bg-image.png);
    background-size: cover;
}

.whatsapp-widget-preview-chat-box {
    width: max-content;
}

.whatsapp-widget-preview-chat-box>span {
    display: block;
    width: 100%;
    line-height: 100%;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--black-color);
}

.whatsapp-widget-preview-footer {
    padding: 20px;
    text-align: center;
}

.whatsapp-widget-btn {
    display: inline-flex;
    padding: 10px 20px;
    background-color: #1a1a1a;
    color: var(--white-color);
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    /* text-transform: capitalize; */
}

.open-chats-main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-right: 12%;
}

.fs-36 {
    font-size: 36px;
}

@media screen and (width <=1199px) {
    .land-comn-padding {
        padding: 80px 0px;
    }
    .land-comn-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    .banner-title {
        font-size: 40px;
    }
    .banner-para {
        font-size: 16px;
    }
    .banner-small-text {
        font-size: 14px;
        line-height: 20px;
    }
    .campaign-small-title {
        font-size: 16px;
    }
    .campaign-title {
        font-size: 24px;
    }
    .campaign-para-row p {
        font-size: 14px;
    }
    .pricing-row {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    .price-plan-text {
        font-size: 22px;
        padding: 25px 5px;
    }
    .pricing-price-text {
        font-size: 34px;
        margin-bottom: 10px;
    }
    .pricing-price-text i,
    .pricing-price-text span {
        font-size: 14px;
    }
    .pricing-data {
        padding: 10px;
    }
    .pricing-list>li {
        padding: 15px 10px;
        font-size: 14px;
        gap: 8px;
    }
    .pricing-list>li>i {
        font-size: 14px;
        color: #FF3838;
    }
    .pricing-box .land-comn-btn {
        padding: 6px 24px;
        font-size: 14px;
        line-height: 20px;
    }
    .footer-leftside,
    .footer-rightside {
        gap: 20px;
    }
    .footer-list {
        gap: 12px;
    }
    .footer-list li a {
        font-size: 12px;
        line-height: 18px;
    }
    .social-list {
        gap: 5px;
    }
    .footer-leftside .text-14px {
        font-size: 10px;
    }
    .faq-bg-image {
        display: none;
    }
}

@media screen and (width <=991px) {
    .land-comn-padding {
        padding: 60px 0px;
    }
    .land-comn-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
    .landing-header {
        padding: 0px;
    }
    .landing-header .navbar-brand {
        order: -2;
    }
    .landing-header .header-login-row {
        order: -1;
        margin-left: auto;
        margin-right: 12px;
    }
    .landing-header .navbar-toggler {
        padding-block: 6px;
    }
    .landing-header .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }
    .landing-header .navbar .navbar-nav {
        gap: 15px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
    .banner-content-box {
        text-align: center;
        margin-bottom: 30px;
    }
    .banner-title {
        line-height: 120%;
    }
    .banner-small-text {
        margin-bottom: 10px;
    }
    .campaign-data {
        text-align: center;
        margin-top: 20px;
    }
    .campaign-small-title {
        font-size: 16px;
        margin: 0px auto 10px;
    }
    .pricing-row {
        grid-template-columns: 100%;
        max-width: 65%;
        margin: auto;
    }
    .landing-footer {
        padding: 20px 0px;
    }
    .footer-row {
        justify-content: center;
    }
    .footer-leftside,
    .footer-rightside {
        width: 100%;
        justify-content: center;
    }
    .logo-text {
        width: 100%;
        text-align: center;
    }
    .footer-line {
        width: 100%;
        height: 1px;
    }
    .campaign-image {
        text-align: center;
    }
    .campaign-image>img {
        max-width: 500px;
        width: 100%;
        display: inline-block;
    }
}

@media screen and (width <=767px) {
    .land-comn-padding {
        padding: 40px 0px;
    }
    .landing-header .navbar-brand {
        max-width: 140px;
    }
    .landing-header .header-login-row {
        margin-right: 6px;
        gap: 6px;
    }
    .landing-header .header-login-row .land-comn-btn {
        padding: 2px 10px;
        font-size: 10px;
    }
    .landing-header .navbar-toggler {
        padding: 2px 8px;
    }
    .landing-header .navbar-toggler span {
        width: 20px;
        height: 20px;
    }
    .banner-title {
        font-size: 30px;
        margin-bottom: 15px;
    }
    .land-comn-title {
        font-size: 24px;
    }
    .campaign-row {
        margin-left: -12px;
        margin-right: -12px;
    }
    .campaign-row>* {
        padding-left: 12px;
        padding-right: 12px;
    }
    .company-image>img {
        max-height: 45px;
        max-width: 120px;
    }
    .company-image {
        height: 100px;
    }
    .campaign-para-row {
        gap: 10px;
    }
    .pricing-row {
        max-width: 80%;
    }
    .faq-box {
        padding: 15px;
        margin-bottom: 15px;
    }
    .faq-title {
        font-size: 14px;
        line-height: 24px;
        gap: 10px;
    }
    .faq-box .text-16px {
        font-size: 14px;
    }
}

@media screen and (width <=575px) {
    .associates-splide::before,
    .associates-splide::after,
    .company-splide::before,
    .company-splide::after {
        height: 3px;
    }
    .associates-splide::before,
    .company-splide::before {
        top: -1px;
    }
    .landing-header .navbar-brand {
        max-width: 120px;
    }
    .banner-small-text {
        font-size: 12px;
    }
    .company-image>img {
        max-height: 35px;
        max-width: 90px;
    }
    .pricing-row {
        max-width: 100%;
    }
    .whatsapp-aicubix-box {
        padding: 15px;
    }
}

.wa-chat-order-preview-box .wa-chat-order-preview-detail-box {
    padding: 10px;
}
.wa-chat-order-preview-box .wa-chat-order-preview-box-inner {
    background: rgb(245, 246, 246);
    padding: 5px;
    border-radius: 5px;
}
.wa-chat-order-preview-box .wa-chat-order-preview-box-inner .wa-chat-order-inner {
    padding: 10px;
}
.wa-chat-order-preview-box .wa-chat-order-preview-box-inner .wa-chat-order-inner:not(:last-child) {
    border-bottom: 1px dashed rgb(221, 223, 223);
}
.wa-chat-order-preview-box .wa-chat-order-preview-body {
    padding: 10px;
}
.wa-chat-order-preview-box .wa-chat-order-preview-body .wa-chat-order-time {
    float: right;
    font-size: 10px;
    color: #999999;
}
.wa-chat-order-preview-box .wa-chat-order-preview-btn {
    border-top: 1px solid rgb(221, 223, 223);
    padding: 15px;
    text-align: center;
    color: var(--blue-color);
    font-weight: 800;
}
.wa-order-detail-preview {
    margin-top: 50px;
    background: #ffffff;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 0px 0px 0px, rgba(60, 64, 67, 0.15) -0.5px 1.5px 0px 0px;
    filter: drop-shadow(0px 0.5px 0px rgba(60, 64, 67, 0.3)) drop-shadow(1px 1px 2px rgba(60, 64, 67, 0.15));
    height: max-content;
}
.wa-order-detail-preview .wa-order-detail-preview-title {
    background-color: rgb(0, 128, 105);
    color: #fff;
    padding: 10px;
}
.wa-order-detail-preview .wa-order-detail-preview-body-header-img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 1px solid black;
    margin: 25px auto 0 auto;
}
.wa-order-detail-preview .wa-order-detail-preview-body-header-title  {
    margin-top: 5px;
    font-size: 12px;
    letter-spacing: 1.5px;
}
.wa-order-detail-preview .wa-order-detail-preview-body-header-badge {
    margin-top: 8px;
    padding: 4px 12px;
    font-size: 12px;
    background: rgb(243, 243, 243);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wa-order-detail-preview .wa-order-detail-preview-body-product {
    margin: 12px 0px;
    border-bottom: 2px dotted rgb(243, 243, 243);
    border-top: 2px dotted rgb(243, 243, 243);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wa-order-detail-preview-body-product-icon {
    width: 40px;
    height: 40px;
    background: rgb(243, 243, 243);
    margin-right: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wa-order-detail-preview-btn {
    border-bottom: 1px solid rgb(241, 242, 242);
    border-top: 1px solid rgb(241, 242, 242);
    padding: 8px;
    color: white;
    font-weight: 600;
    border-radius: 20px;
    background: rgb(0, 128, 105);
    margin-top: 8px;
}
.wa-order-detail-preview .wa-order-subtotal-section, 
.wa-order-detail-preview .wa-order-discount-section,
.wa-order-detail-preview .wa-order-shipping-section,
.wa-order-detail-preview .wa-order-tax-section {
    padding: 0 12px;
}
.wa-order-detail-footer {
    padding: 0 12px;
}
.font-12 {
    font-size: 12px !important;
}
/* ------------------------- landing page CSS end here ------------------------- */

.widget-header {
    padding: 4px 0;
}

.widget-header .navbar-expand-lg {
    padding: 0;
}

.widget-header .navbar-brand {
    max-width: 150px;
}

.widget-header .navbar .navbar-nav {
    gap: 0;
}

.widget-header .navbar .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.free-trial-btn,
.widget-header .navbar .navbar-nav .nav-link {
    padding: 14px 25px;
    color: #0A102F;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.free-trial-btn {
    display: inline-block;
    border: 2px solid #085b53;
    border-radius: 5px;
}

.widget-header .navbar .navbar-nav .nav-link:hover {
    color: #0A102F;
}

.widget-header .navbar .dropdown .nav-link {
    padding-right: 40px;
}

.widget-header .navbar .nav-item .dropdown-menu {
    box-shadow: 0 10.5px 20px rgb(0 0 0 / 9%);
    background-color: #ffffff;
    text-align: left;
    margin: 0;
    padding: 12px 0;
    min-width: 300px;
    border-radius: 6px;
    border: none;
}

.widget-header .dropdown-item {
    padding: 9px 21px;
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #0A102F;
    line-height: 1.5;
}

.widget-header .dropdown-item:hover {
    background-color: transparent;
}

.widget-header .navbar .navbar-nav {
    border-top: none;
    margin: 0;
    padding: 0;
}

.widget-footer {
    background-color: #CBF2E4;
    font-family: "Inter", sans-serif;
}

.widget-footer-row {
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 1140px;
    margin-inline: auto;
}

.widget-footer-box {
    width: 23.33%;
    padding: 10px;
    padding-left: 32px;
}

.widget-footer-box.wf-logo {
    width: 30%;
    padding-left: 10px;
}

.wf-logo .navbar-brand {
    max-width: 150px;
    display: inline-block;
    margin-bottom: 20px;
}

.wf-logo>p {
    font-size: 16px;
    color: #0A102F;
    line-height: 1.5;
}

.wf-title {
    color: #0A102F;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

.wf-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.wf-list li a {
    padding-top: 10px;
    display: inline-block;
    color: #0a102f;
    font-size: 15.6px;
    line-height: 1.5;
}

.wf-list li a:hover {
    color: #47854f;
}

.wf-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.wf-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #004C3D;
    color: #cbf2e4;
    font-size: 16px;
    border-radius: 10%;
}

.wf-social li a:hover {
    opacity: .9;
    color: #fff;
}

.wf-bottom {
    background-color: #004c3d;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wf-bottom p {
    font-size: 15.2px;
    color: white;
    text-align: center;
}

@media all and (min-width: 1192px) {
    .widget-header .navbar .nav-item .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        margin-top: 0;
    }
    .widget-header .navbar .dropdown-menu.fade-up {
        top: calc(100% + 20px);
    }
    .widget-header .navbar .nav-item:hover .dropdown-menu {
        transition: .3s;
        opacity: 1;
        visibility: visible;
        top: calc(100% - 2px);
        transform: rotateX(0deg);
    }
}

@media screen and (max-width: 1199px) {
    .widget-header .navbar-toggler {
        width: 40px;
        height: 40px;
        background-color: #47854f;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 5px;
        box-shadow: none;
        z-index: 1000;
    }
    .widget-header .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255 255 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        width: 30px;
        height: 30px;
    }
    .widget-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 329.269 329" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M194.8 164.77 323.013 36.555c8.343-8.34 8.343-21.825 0-30.164-8.34-8.34-21.825-8.34-30.164 0L164.633 134.605 36.422 6.391c-8.344-8.34-21.824-8.34-30.164 0-8.344 8.34-8.344 21.824 0 30.164l128.21 128.215L6.259 292.984c-8.344 8.34-8.344 21.825 0 30.164a21.266 21.266 0 0 0 15.082 6.25c5.46 0 10.922-2.09 15.082-6.25l128.21-128.214 128.216 128.214a21.273 21.273 0 0 0 15.082 6.25c5.46 0 10.922-2.09 15.082-6.25 8.343-8.34 8.343-21.824 0-30.164zm0 0" fill="%23ffffff" opacity="1" data-original="%23000000" class=""></path></g></svg>');
        width: 20px;
        height: 25px;
    }
    .widget-header .navbar-collapse {
        z-index: 999;
        position: fixed;
        top: 0;
        margin: 0;
        overflow: auto;
        display: block;
        width: 100%;
        max-width: 420px;
        background-color: #47854f;
        height: 100%;
        left: -100%;
        padding-top: 80px;
        padding-left: 0px;
        padding-bottom: 0px;
        padding-right: 0px;
        transition: all 300ms ease-in-out;
    }
    .widget-header .navbar-collapse.show {
        left: 0;
    }
    .free-trial-btn,
    .widget-header .navbar .navbar-nav .nav-link {
        width: 100%;
        padding: 8px 20px;
        color: white;
        border: none;
        border-radius: 0px;
    }
    .widget-header .navbar .nav-item .dropdown-menu {
        min-width: auto;
        width: 100%;
        background-color: transparent;
        padding: 0;
        box-shadow: none;
    }
    .widget-header .navbar .navbar-nav .nav-link:hover {
        color: #ffffff;
    }
    .widget-header .dropdown-item {
        padding: 10.25px 42px;
        color: #ffffff;
        font-size: 13px;
    }
    .widget-header .navbar .dropdown .nav-link {
        padding-right: 40px;
    }
    .widget-header .navbar .dropdown .nav-link.active {
        background-color: #0a102f;
    }
    .widget-header .navbar .dropdown .nav-link::before {
        content: "▼";
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        font-size: 15px;
    }
    .widget-header .navbar .dropdown .nav-link[aria-expanded="true"]::before {
        content: "▲";
    }
}

@media screen and (max-width: 767px) {
    .widget-header {
        padding-block: 16px;
    }
    .widget-header .navbar-brand {
        max-width: 115px;
    }
    .widget-footer-box.wf-logo,
    .widget-footer-box {
        width: 100%;
        padding-left: 32px;
    }
    .wf-logo>p,
    .wf-list {
        margin-bottom: 16px;
    }
}

.comn-btn.btn-danger {
    border-color: #F78154;
    background-color: #F78154;
}

.comn-btn.btn-success {
    border-color: #08CF65;
    background-color: #08CF65;
}

.flatpickr-calendar.open {
    z-index: 100001 !important;
}

.aicubix-top-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 30px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}

.aicubix-top-card-left {
    max-width: 850px;
    width: 100%;
    padding-block: 15px;
}

.aicubix-top-card-list {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px 50px;
}

.aicubix-top-card-list a {
    font-size: 14px;
    color: var(--blue-color);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.aicubix-top-card-list a:hover {
    color: var(--darkblue-color);
}
.alert-success-btn,
.alert-danger-btn {
    text-decoration: underline;
    text-decoration-style: dashed;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}
.alert-success-btn {
    color: black;
}
.alert-danger-btn {
    color: black;
}
.appoinment-list-card{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.appoinment-list-card  p{
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
 }
.appoinment-list-card  p span{
    font-weight: 500;
}

.fc .fc-button.fc-today-button {
    background-color: var(--blue-color);
    border-color: var(--blue-color);
}

.fc .fc-button.fc-button-active {
    background-color: var(--blue-color) !important;
    border-color: var(--blue-color) !important;
    color: var(--white-color) !important;
}

.fc .fc-toolbar-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    color: var(--black-color);
    margin: 0;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border: 1px solid var(--border-color);
}

.fc .fc-daygrid-day-top {
    flex-direction: row;
}

.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number {
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    padding: 12px;
    color: var(--black-color);
}
.fc a.fc-col-header-cell-cushion:not([href]):not([tabindex]),
.fc .fc-col-header-cell-cushion {
    width: 100%;
    background-color: var(--blue-color); 
    color: var(--white-color);
    text-align: left;
}

.fc-event.event {
    border: none;
    padding-inline: 4px;
}

.fc-event.event.green {
    background-color: #00A81C;
    color: var(--white-color);
}

.fc-event.event.orange {
    color: var(--white-color);
    background-color: #ff9800;
}

.fc-event.event.blue {
    color: var(--white-color);
    background-color: #53BDEB;
}

.fc-event.event.purple {
    color: var(--white-color);
    background-color: #A48ED2;
}
.fc-event {
    cursor: pointer;
}
.fc-event-time,
.fc-daygrid-event-dot {
    display: none;
}

.fc-timegrid-event .fc-event-main {
    padding: 0;
}

.fc .fc-timegrid-col.fc-day-today,
.fc .fc-daygrid-day.fc-day-today {
    background-color: rgb(0 152 134 / 5%);
}

.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus,
.fc .fc-button:focus,
.fc .fc-button-primary:focus {
    box-shadow: none;
}

.fc .fc-toolbar.fc-header-toolbar {
    flex-wrap: wrap;
}

.fc .fc-daygrid-event-harness:not(:last-child) {
    margin-bottom: 3px;
}
#appointmentCalendar.fc .fc-scrollgrid-liquid,
#appointmentCalendar.fc-theme-standard td, #appointmentCalendar.fc-theme-standard th {
    border: 0;
} 
#appointmentCalendar.fc a.fc-col-header-cell-cushion:not([href]):not([tabindex]),
#appointmentCalendar.fc .fc-col-header-cell-cushion {
    width: 100%;
    background-color:transparent; 
    color: var(--black444-color);
    text-align: left;
}
#appointmentCalendar.fc .fc-col-header-cell-cushion,
#appointmentCalendar.fc .fc-daygrid-day-number {
    font-size: 14px;
    font-weight: 600;
    line-height: 140%;
    padding: 12px;
    color: var(--black-color);
}
#appointmentCalendar.fc .fc-daygrid-day-number {
    font-size: 16px;
    font-weight: 400;
    padding: 6px;
    width: 35px;
    height: 35px;
}
#appointmentCalendar.fc .fc-daygrid-day-top {
    justify-content: center;
    text-align: center;
}
#appointmentCalendar.fc .fc-timegrid-col.fc-day-today, #appointmentCalendar.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--blue-color);
    border-radius: 5px;
}
#appointmentCalendar.fc .fc-daygrid-day.fc-day-today * {
    color: var(--white-color);
}
#appointmentCalendar .fc-view-harness.fc-view-harness-active {
    height: 340px !important;
}
#appointmentCalendar.fc .fc-button-group > .fc-button{
    padding: 0;
}
#calendar.fc .fc-button-primary {
    background-color: transparent;
    border-color: var(--blue-color);
    color: var(--blue-color);
}
#calendar.fc .fc-button.fc-button-active,
#calendar.fc .fc-button:disabled {
    background-color: var(--blue-color);
    border-color: var(--blue-color);
    color: var(--white-color);
}
.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {
    gap: 10px;
}
.tooltip-inner {
    font-size: 12px;
    font-weight: 500;
}
.comn-search-leftside {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.flatpickr-icon{
    background-image: url(../images/default/calendar-icon.svg);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: left center;
    padding-inline: 25px;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{
    background-color: var(--blue-color);
}
.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    background-color: #e6f6f4;
    border-color: transparent;
}
.flatpickr-day.inRange {
    box-shadow: -5px 0 0 #e6f6f4,5px 0 0 #e6f6f4;
}
.fc .fc-button-group{
    gap: 5px;
}
.fc .fc-button-group > .fc-button{
    border-radius: 4px !important;
    text-transform: capitalize;
}
.fc .fc-button.fc-today-button{
    text-transform: capitalize;
}
.entries-tabs-row .nav{
    margin-bottom: 10px;
}
.entries-tabs-row .nav .nav-link{
    padding-inline: 20px;
    border-top: none;
    border-inline: none;
    font-size: 14px;
    border-radius: 0px;
    cursor: pointer;
}
.entries-tabs-row .nav .nav-link:focus{
    outline: none;
}
.form-control:disabled, .form-control[readonly] {
    background-color: transparent;
}
.entries-td-nowrap .table td:first-child{
    white-space: nowrap;
}
.appointment-footer{
    gap: 5px;
}
.appointment-footer *{
    margin: 0 !important;
}
/* .appointment-footer .action-btn{
    width: auto;
    height: auto;
    padding: 8px 16px;
} */
.app-date-close-btn {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 16px;
    color: var(--blue-color);
    cursor: pointer;
}
.app-date-close-btn:focus {
    outline: none;
}
    .app-date-close-btn:hover {
    color: var(--darkblue-color);
}
.reshedule-btn{
    background-color: transparent;
    padding: 0;
    border: none;
    color: blue;
    cursor: pointer;
}
.reshedule-btn:focus{
    outline: none;
}
.reshedule-btn:hover{
    text-decoration: underline;
}
.adv-date-filter>.comn-form-label {
    margin-left: 20px;
    padding-inline: 10px;
    background-color: var(--white-color);
    display: table;
    width: auto;
    position: relative;
}
.adv-date-filter-card{
    padding: 25px 20px 20px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-top: -14px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.adv-radio-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.adv-radio>input{
    display: none;
}
.adv-radio>label{
    font-size: 14px;
    font-weight: 500;
    line-height: 125%;
    color: var(--black555-color);
    padding: 4px 15px;
    border: 1px solid var(--border-color);
    border-radius: 100px;
    background-color: rgb(0 152 134 / 5%);
    transition: var(--transition);
    cursor: pointer;
    margin: 0;
}
.adv-radio>input:checked~label{
    background-color: var(--blue-color);
    color: var(--white-color);
    border-color: var(--blue-color);
}
.adv-date-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.adv-date-icon {
    width: 40px;
    height: 40px;
    background-image: url('data:image/svg+xml,<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_41_8888" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="41" height="41"><path d="M40.583 0.660156H0.583008V40.6602H40.583V0.660156Z" fill="white"/></mask><g mask="url(%23mask0_41_8888)"><path d="M19.0463 31.4414H22.1189M28.283 31.4414H31.3557M9.82754 31.4414H12.9002M19.0463 22.2227H22.1189M28.283 22.2227H31.3557M9.82754 22.2227H12.9002M2.14551 14.5148H39.0377M29.8189 9.90547V2.22266M11.3643 9.90547V2.22266M8.30879 39.0977H32.8744C34.509 39.0977 36.0767 38.4483 37.2325 37.2925C38.3884 36.1366 39.0377 34.569 39.0377 32.9344V11.4594C39.0375 9.82483 38.3881 8.2573 37.2323 7.10151C36.0765 5.94571 34.509 5.2963 32.8744 5.29609H8.30879C6.67411 5.2963 5.10646 5.94582 3.95064 7.10178C2.79483 8.25775 2.14551 9.82548 2.14551 11.4602V32.9344C2.14551 34.569 2.79485 36.1366 3.95069 37.2925C5.10653 38.4483 6.67419 39.0977 8.30879 39.0977Z" stroke="%23004C43" stroke-width="2.0009" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}
.adv-date-row>aside {
    width: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 0;
}
.adv-date-row>aside>span {
    font-size: 14px;
    line-height: 125%;
    color: var(--black555-color);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.adv-date-row>aside>input {
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 125%;
    color: var(--darkblue-color);
    border: none;
    background-image: none;
    padding-top: 20px;
    background-color: transparent;
}
.adv-date-row .clear-date-filter-btn{
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--darkblue-color);
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.adv-date-row .clear-date-filter-btn:focus{
    outline: none;
}
@media screen and (max-width: 575px) {
    .adv-date-icon {
        width: 30px;
        height: 30px;
    }
    .adv-date-row>aside {
        width: calc(100% - 45px);
    }
}
.followup-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.followup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
}
.followup-header>* {
    cursor: pointer;
}
.followup-header input{
    accent-color: var(--darkblue-color);
}
.followup-header label{
    margin-bottom: 0;
}
.followup-control {
    display: flex;
    align-items: center;
    gap: 10px;
}
.followup-control>.comn-form-label{
    width: auto;
    font-weight: 400;
}
.followup-control .weekinput + .select2-container--default .select2-selection--single{
    padding-right: 40px;
}
.followup-control .comn-form-control, .followup-control .select2-selection{
    border: 1px solid darkgray;
}
#calendar .fc-daygrid-day {
    cursor: pointer;
}
.text-white-space-pre {
    white-space: pre;
}

.comn-form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

input.form-check-input.permission-checkbox {
    accent-color: red;
}
.notification-bell-box .badge {
    top: -6px;
    left: -5px;
    background: #f00;
    color: #fff;
    border-radius: 50%;
    padding: 4px;
    font-size: 11px;
}
.notification-bell-icon {
    color: var(--blue-color);
}

#appointmentCalendar.fc .fc-daygrid-body-balanced .fc-daygrid-day-events {
    bottom: 0 !important;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--blue-color);
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--blue-color);
}

.custom-control-input:active ~ .custom-control-label::before {
    background-color: var(--blue-color);
}
/*022*/