body{ padding:0px; margin:0px; font-size:13px; line-height:18px; font-family: "IBM Plex Sans", sans-serif; color: #606c76; background-color:#e8eaf1; letter-spacing: initial;}
*{ box-sizing:border-box; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
}

/* For Firefox */
body, html {
    scrollbar-width: thin;  /* Thin scrollbar */
    scrollbar-color: #888 #f1f1f1;  /* Scrollbar thumb and track colors */
}


a, a:hover, a:focus{ text-decoration:none; }
b,
strong {
  font-weight:bold
} 
p {
  margin-top:0
}
h1,
h2,
h3,
h4,
h5,
h6 { font-weight:400; margin-bottom:15px; margin-top:0 }
h1 { font-size:32px; line-height:36px  }
h2 { font-size:30px; line-height:34px  }
h3 { font-size:28px; line-height:32px }
h4 { font-size:2.2rem;  line-height:1.35 }
h5 { font-size:1.8rem;   line-height:1.5 }
h6 { font-size:1.6rem;  line-height:1.4 }
img { max-width:100% }


.main-content hr{ margin: 10px 0; }

.clearfix:after { clear:both; content:' '; display:table }
.float-left { float:left }
.float-right { float:right }
.login-section{ display:flex; width:100%; height:100vh; min-height:600px; justify-content:center; align-items:center; padding:16px;  }
.login-wraper{ width:100%; max-width:600px;  display:flex; justify-content: center; align-items: center; flex-direction: column;}
.login-wraper .login-box{ width:100%; border: 1px solid #ccc; padding: 16px; border-radius: 4px; background-color:#fff; }

.input{ display:block; width:100%; }
.input label{ display: block; font-size: 16px; font-weight: 600; margin-bottom: 5px; }
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='week'],
input:not([type]),
textarea,
select {
  -webkit-appearance:none;
  background-color:transparent;
  border:1px solid #d1d1d1;
  border-radius:4px;
  box-shadow:none;
  box-sizing:inherit;
  height: 42px;
  padding: 6px 12px;
  width:100%; margin-bottom: 15px;
}
input[type='color']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
input[type='week']:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
  border-color:#9b4dca;
  outline:0
}
select {
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>') center right no-repeat;
  padding-right:16px;
}
select:focus {
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%239b4dca" d="M0,0l6,8l6-8"/></svg>')
}
select[multiple] {
  background:none;
  height:auto
}
textarea {
  min-height:4rem
}
label,
legend {
  display:block;
  font-size:16px;
  font-weight:600;
  margin-bottom:.5px
}



.searchmodal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 99; /* Ensure modal appears on top */
}

.searchmodal .modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.searchmodal .close {
    width: 25px;
    height: 25px;
    background-color: transparent; /* Match the background with modal */
    border: none;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; /* Ensure proper scaling */
    background-image: url('../images/close.png');
    transition: transform 0.2s ease-in-out; /* Add a hover effect */
}

.searchmodal .close:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

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

.searchmodal .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold; /* Highlight labels for better readability */
    color: #333;
}

.searchmodal .form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px; /* Consistent input font size */
    color: #333; /* Match text color with modal theme */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    transition: border-color 0.2s ease-in-out; /* Add focus effect */
}

.searchmodal .form-group input:focus {
    border-color: #007BFF; /* Highlight border on focus */
    outline: none; /* Remove default outline */
}


td .truncate-text {
    display: inline-block;
    max-width: 100px; 
    white-space: nowrap;  
    overflow: hidden;
    text-overflow: ellipsis; 
    vertical-align: middle;
}

.lead-nav-section{ display: flex; flex-direction: row; height:34px; width:100%; background-color:#efefef; margin-bottom:16px; }
.lead-nav-section > div{  display: flex; flex:1; height:100%; justify-content:start; align-items:center; }
.lead-nav-section > div.right{ justify-content:end;  }
.lead-nav-section > div.center{ justify-content:right; }
.lead-nav-section > div.center{ justify-content:center; }
.lead-nav-section .action-section{ display: flex; flex-wrap: wrap; height:100%; justify-content:center; align-items:center; }
.lead-nav-section .action-section a{ padding:6px 12px; display:flex; background-color:#fff; color:#111; border-radius:0px; margin-right:1px;  }
.lead-nav-section .action-section a:hover{ background-color:#d33c43; color:#fff; }
.lead-nav-section .action-section #leadStatus{background-color: #fff;   height: 30px;   margin: 0px;   padding: 5px 0px 5px 12px;   border: 0px;   border-radius: 0px;   cursor: pointer;}
.lead-nav-section .action-section #disposition{background-color: #fff;   height: 30px;   margin: 0px;   padding: 5px 0px 5px 12px;   border: 0px;   border-radius: 0px;   cursor: pointer;}

.btn-small{background-color:#232323;border:1px solid #000;color: #fff;border-radius: 4px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;height:20px;letter-spacing: 0.06rem;word-spacing: .2rem;padding:4px 8px;text-align:center;text-decoration:none;text-transform:uppercase;border-radius: 4px;}

.button,button,input[type='button'],input[type='reset'],input[type='submit'] {
  background-color:#d33c43;
  border:1px solid #d33c43;
  border-radius: 4px;
  color:#fff;
  cursor:pointer;
  display:inline-block;
  font-size:16px;
  font-weight:500;
  height:42px;
  letter-spacing:.1rem;
  padding:0 16px;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
  display: inline-flex;   justify-content: center;   align-items: center; border-radius: 4px;
}

.button.button-black{
  background-color:#000;
  border:1px solid #000;
  border-radius: 4px;
  color:#fff;
  cursor:pointer;
  display:inline-block;
  font-size:16px;
  font-weight:500;
  height:42px;
  letter-spacing:.1rem;
  padding:0 16px;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
  display: inline-flex;   justify-content: center;   align-items: center; border-radius: 4px;
}

.button.button-green{
  background-color:#04AA6D;
  border:1px solid #04AA6D;
  border-radius: 4px;
  color:#fff;
  cursor:pointer;
  display:inline-block;
  font-size:16px;
  font-weight:500;
  height:42px;
  letter-spacing:.1rem;
  padding:0 16px;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
  display: inline-flex;   justify-content: center;   align-items: center; border-radius: 4px;
}

.button:focus,
.button:hover,
button:focus,
button:hover,
input[type='button']:focus,
input[type='button']:hover,
input[type='reset']:focus,
input[type='reset']:hover,
input[type='submit']:focus,
input[type='submit']:hover {
  background-color:#606c76;
  border-color:#606c76;
  color:#fff;
  outline:0
}
.button[disabled],
button[disabled],
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
  cursor:default;
  opacity:.5
}
.button[disabled]:focus,
.button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type='button'][disabled]:focus,
input[type='button'][disabled]:hover,
input[type='reset'][disabled]:focus,
input[type='reset'][disabled]:hover,
input[type='submit'][disabled]:focus,
input[type='submit'][disabled]:hover {
  background-color:#9b4dca;
  border-color:#9b4dca
}
.button.button-outline,
button.button-outline,
input[type='button'].button-outline,
input[type='reset'].button-outline,
input[type='submit'].button-outline {
  background-color:transparent;
  color:#9b4dca
}
.button.button-outline:focus,
.button.button-outline:hover,
button.button-outline:focus,
button.button-outline:hover,
input[type='button'].button-outline:focus,
input[type='button'].button-outline:hover,
input[type='reset'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='submit'].button-outline:focus,
input[type='submit'].button-outline:hover {
  background-color:transparent;
  border-color:#606c76;
  color:#606c76
}
.button.button-outline[disabled]:focus,
.button.button-outline[disabled]:hover,
button.button-outline[disabled]:focus,
button.button-outline[disabled]:hover,
input[type='button'].button-outline[disabled]:focus,
input[type='button'].button-outline[disabled]:hover,
input[type='reset'].button-outline[disabled]:focus,
input[type='reset'].button-outline[disabled]:hover,
input[type='submit'].button-outline[disabled]:focus,
input[type='submit'].button-outline[disabled]:hover {
  border-color:inherit;
  color:#9b4dca
}
.button.button-clear,
button.button-clear,
input[type='button'].button-clear,
input[type='reset'].button-clear,
input[type='submit'].button-clear {
  background-color:transparent;
  border-color:transparent;
  color:#9b4dca
}
.button.button-clear:focus,
.button.button-clear:hover,
button.button-clear:focus,
button.button-clear:hover,
input[type='button'].button-clear:focus,
input[type='button'].button-clear:hover,
input[type='reset'].button-clear:focus,
input[type='reset'].button-clear:hover,
input[type='submit'].button-clear:focus,
input[type='submit'].button-clear:hover {
  background-color:transparent;
  border-color:transparent;
  color:#606c76
}
.button.button-clear[disabled]:focus,
.button.button-clear[disabled]:hover,
button.button-clear[disabled]:focus,
button.button-clear[disabled]:hover,
input[type='button'].button-clear[disabled]:focus,
input[type='button'].button-clear[disabled]:hover,
input[type='reset'].button-clear[disabled]:focus,
input[type='reset'].button-clear[disabled]:hover,
input[type='submit'].button-clear[disabled]:focus,
input[type='submit'].button-clear[disabled]:hover {  color:#9b4dca; }

.message{ width:100%; padding:8px 12px; border:1px solid #fff; background-color: #fff; display: flex; align-items: center; border-radius: 4px; color: #666;}
.message.error{ border:1px solid #f8dcdc; background-color: #f4e9e9; color: #d33c43;}
.message.success{background-color: #d4edda;  color: #155724; border:1px solid #155724;}

.dash-section{ display:flex; width:100%; flex-direction:column; padding: 0px; margin: 0px; height: 100vh; min-height: 600px; }
.dash-section header{ display:flex; width:100%; flex-direction:row; height: 42px; border-bottom: 1px solid #ccc; background-color: #fff;}
.dash-section header .logo{ height:41px; display:flex; align-items: center; font-size: 20px; font-weight: 700; color: #000; padding-left:16px; padding-right:16px; }
.dash-section header .logo span{  color:#d33c43; }
.dash-section header .logout{ height:41px; width: 41px; display:flex; align-items: center; font-size: 20px; font-weight: 700; color: #000; padding-left:16px; padding-right:16px;  background-image:url(../images/log-out.png); background-position:center center; background-size:60%; background-repeat:no-repeat; }
.col.flex-right{display:flex; justify-content:flex-end; }
.col.flex-center{ display:flex; justify-content:center; align-items:center;  }
.col.flex-center.nav{ gap:16px; }
.col.flex-center.nav a{ font-size:16px; line-height:18px; color:#323232; }
.dash-section .main-content{ display:block; width:100%; padding:16px 16px 0px; height:calc(100vh - 42px); min-height:calc(600px - 42px); overflow: auto;}




.uploadSection {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%; 
    flex-direction: column;
}
.uploadSection .message{ max-width:500px; margin-bottom:15px; } 

.upload-Box {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 100%;
    max-width: 500px;
    text-align: center;
}

.upload-Box h3 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.upload-Box label {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    color: #666;
}

.upload-Box input[type="file"] {
    display: block;
    width: 100%;
    margin: 0 auto 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px; 
    box-sizing: border-box;
    height: 54px; cursor: pointer;
}

.upload-Box button {  
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.upload-Box button:hover {
    background-color: #000;
}

.error-message, .success-message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
}

.success-message {
    background-color: #d4edda;
    color: #155724;
}



.filters-section {
    padding: 0px;  
    display: flex;
    justify-content: center;
}

.filters-section form {
    display: flex; 
    gap: 10px; width: 100%;
}

.filter-col {
    display: flex;
    align-items: center;
}

.filter-col input[type="text"] {  margin: 0px; background-color: #fff !important; min-width:220px; }
.filter-col select { margin: 0px;  background-color: #fff !important; min-width:200px; }
.filter-col .button { margin: 0px; }
.filter-col .button:hover { background-color: #0056b3; }
.table tr td a, .table tr th a{ color:#242424; }
.table tr td a:hover, .table tr th a:hover;{ color:#000000; }

.paginator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px 0;
    border-top: 1px solid #ddd;
}

.paginator div {
    font-size: 14px;
    color: #555;
}

.pagination {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.pagination li {
    margin: 0 5px;
}

.pagination li a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: #000;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f8f9fa;
}

.pagination li.active a,
.pagination li a:hover {
    background-color: #d33c43;
    color: #fff;
    border-color: #d33c43;
}

.pagination li.disabled a {
    color: #ccc;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

.add-edit-lead{
    display: flex;
    justify-content: center;
    align-items: start;
    height: 100%;
    min-width: 100%; 
    overflow: auto;
    flex-direction: column;
}

.heading{ font-size: 28px;
  line-height: 36px;
  display: flex;
  gap: 15px;
  align-items: center; }
.heading .btn-small{ height:28px; line-height:16px; }

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px; 
    transition: transform 0.3s, box-shadow 0.3s;
}



.main-content:has(.horizontal-scroll) {
    padding: 0;
}

.horizontal-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden; /* Hide vertical scrollbar */
    padding: 10px;
    white-space: nowrap; /* Prevent line breaks */
    gap: 10px; /* Space between items */
    height: 100%;
}

.horizontal-scroll::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.horizontal-scroll-item {
    flex: 0 0 auto; /* Prevent items from shrinking or growing */
    background-color: #f8f9fa;
    padding: 0px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.horizontal-scroll-item.lead-info{ width: 100%; max-width:40%; overflow:hidden; } 

.horizontal-scroll-item .item-header{ height:42px; display:flex; justify-content:start; align-items:center; padding:4px 20px; border-bottom:1px solid #ccc; font-size:16px; font-weight:800; }
.horizontal-scroll-item .item-header span{ display:flex; flex:1; align-items:center; }
.horizontal-scroll-item .item-header span:last-child{justify-content: end;}
.horizontal-scroll-item .item-content{ height:calc(100% - 42px); display:block; padding: 20px; overflow:auto; }

.skeleton-wrapper { width: 300px; margin: 20px; }
.skeleton { background-color: #e3e3e3; border-radius: 4px; margin: 2px 0; animation: loading 1.5s infinite linear; }
.skeleton-image{ width:100%; padding-bottom:56%; }
.skeleton-text { height: 20px; width: 100%; }
.skeleton-name { width: 70%; }
.skeleton-email { width: 90%; }
.skeleton-contact { width: 60%; }

@keyframes loading {
  0% {
    background-color: #e3e3e3;
  }
  50% {
    background-color: #f0f0f0;
  }
  100% {
    background-color: #e3e3e3;
  }
}

/* Wrapper for the table loader */
.skeleton-table-wrapper {
    width: 100%;
    margin: 20px 0;
}

.skeleton-table {
    display: flex;
    flex-direction: column;
}

/* Skeleton row styling */
.skeleton-table-wrapper .skeleton-row {
    display: grid;
    grid-template-columns: repeat(17, 1fr); /* Adjust for the number of columns */
    gap: 10px;
    margin: 5px 0;align-items: center;
}

/* Skeleton element for each column */
.skeleton-table-wrapper .skeleton {
    background-color: #e3e3e3;
    border-radius: 4px;
    animation: skeletonLoading 1.5s infinite linear;
}

.leadSummaryBox .skeleton-wrapper .skeleton-h3{ width: 100%; height: 23px;  }
.leadSummaryBox .skeleton-wrapper .skeleton-p-l{width: 100%; height: 18px;}
.leadSummaryBox .skeleton-wrapper .skeleton-p-m{width: 80%; height: 16px;}
.leadSummaryBox .skeleton-wrapper .skeleton-p-s{width: 60%; height: 16px;}
.leadSummaryBox .skeleton-wrapper{ width:100%; margin:20px 0px; }

/* Different column sizes */
.skeleton-table-wrapper .skeleton-image { padding-bottom: 100%; border-radius: 50%; } /* Adjust as per image ratio */
.skeleton-table-wrapper .skeleton-address { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-type { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-distance { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-year { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-bed { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-bath { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-living { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-lot { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-listed-price { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-sale-price { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-listed-date { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-closing-date { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-status { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-days-market { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-months-market { width: 100%; height: 20px; }
.skeleton-table-wrapper .skeleton-kpi { width: 100%; height: 20px; }



/* Animation for the skeleton loader */
@keyframes skeletonLoading {
    0% {
        background-color: #e3e3e3;
    }
    50% {
        background-color: #f0f0f0;
    }
    100% {
        background-color: #e3e3e3;
    }
}


.dashBox .text-center .skeleton {
  width: 70%; margin: auto;
}
.dashBox .skeleton-image{ width:80px; height:70px; padding: 0px;}


.propertySubDetails{ width:100%; display:flex; width:100%; flex-direction:row; }
.propertySubDetails .col{ flex:1; padding:10px; }
.propertySubDetails .col.image{ max-width:100px; max-height:85px; overflow:hidden;  }
.propertySubDetails .col.image img{ max-width:100%; }
.propertySubDetails .col h3{ margin:0px 0px 4px; font-size:14px; font-weight:600; line-height:16px; letter-spacing: 0.1pt;}
.propertySubDetails .col p{ margin:0px 0px 4px; font-size:13px; font-weight:400; line-height:14px; letter-spacing: 0.1pt;}

.leadViewSection{ display:flex; flex-wrap: wrap; flex-direction:column; height:calc(100vh - 58px); width:100%; min-height: 600px;}
.leadViewSection .leadViewHeader{ display:flex; flex:1; max-height: 100px; width: 100%; flex-direction: row; gap: 10px; padding: 0px;}
.leadViewSection .leadViewHeader .header-col{ flex:1;}
.leadViewSection .leadViewHeader .header-col.header-prop{ min-width:440px; }
.leadViewSection .leadViewHeader .header-col .dashBox{ display:flex; justify-content:center; align-items:center; width:100%; border-radius:6px; background-color:#fff; height: 100%;}
.leadViewSection .leadViewHeader .header-col .dashBox .value{ font-size:24px; text-align:center; font-weight:800; line-height:32px; }
.leadViewSection .leadViewHeader .header-col .dashBox label{ font-size:14px; text-align:center; font-weight:600; line-height:18px; }

.mainLeadViewSection{ display:flex; flex:1; width: 100%; height: calc(100% - 151px); flex-direction:row; padding: 15px 0px 0px; gap: 10px; }
.leadViewSection .question-box{ display:none; flex:1; max-width:0px; flex-direction: column;border-radius: 6px; overflow: hidden;}
.leadViewSection .question-box.active{ display:flex; flex:1; max-width:700px; }
.leadViewSection .question-box .question-header{width: 100%;
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 42px;
  max-height: 42px;
  border-bottom: 1px solid #efefef; background-color: #fff; position: relative;}
.leadViewSection .question-box .question-header .question-title{ transform: none;   writing-mode: inherit;   display: flex;   flex: 1;   padding: 3px 12px;   font-size: 16px;   letter-spacing: 0.6px;   align-items: center;   justify-content: start;   height: 42px; }

.leadViewSection .question-box .question-header .question-icon{position: absolute;
  right: 0px;
  top: 0px;
  width: 42px;
  height: 42px;
  display: flex; cursor: pointer;
  justify-content: center;
  align-items: center;
  background-image: url('../images/close.png');
  background-size: 50%;
  background-position: center center;
  background-repeat: no-repeat;}
.leadViewSection .leadViewContent{ display:flex; flex:1; overflow-x: auto; width: 100%; height: 100%; flex-direction:row; gap: 10px;}
.tab-wraper{ display:flex; flex:1; height:100%; max-width:42px; min-width:42px; transition: max-width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);}
.tab-wraper .tab-view{ display:block; width: 100%; height:100%; background-color: #fff; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);}
.tab-wraper .tab-view .tab-header{ position: relative; max-height:100%;  flex-direction: column-reverse; cursor: pointer; }
.tab-wraper .tab-view .tab-header .tab-title{ display: flex; flex:1;  font-size: 16px; color: #000; font-weight: 600; letter-spacing: 0.6px; width: 100%; height:calc(100% - 42px); justify-content:center; align-items:center; }
.tab-wraper .tab-view .tab-header .tab-icon{ display:block; position: absolute; top: 0px; right: 0px; height: 42px; width: 100%; background-image:url('../images/zoom-out.png'); background-size:50%; background-position:center center; background-repeat:no-repeat; }
.tab-wraper .tab-view .tab-content{ display:none; opacity: 0; transition: opacity 0.5s ease-in-out;}
.tab-wraper.active{ max-width:inherit; width:100%; }
.tab-wraper.active .tab-view{ display:block; width: 100%; height:100%; background-color: #fff; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; }
.tab-wraper.active .tab-view .tab-header{ width:100%;  display:flex; flex-direction:row; flex: 1; min-height: 42px; max-height: 42px; border-bottom: 1px solid #efefef;}
.tab-wraper.active .tab-view .tab-header .tab-title{writing-mode: inherit; display:flex; flex:1; padding:3px 12px; font-size: 16px; letter-spacing: 0.6px; align-items:center; justify-content:start; height: 42px;}
.tab-wraper.active .tab-view .tab-header .tab-icon{ position: absolute; right: 0px; top: 0px;  width:42px; height: 42px; justify-content:center; align-items:center; background-image:url('../images/collapse.png'); background-size:50%; background-position:center center; background-repeat:no-repeat; }
.tab-wraper.active .tab-view .tab-content{ display:block; opacity: 1; padding:10px; overflow-y: auto; height: 100%; max-height: 100%;  overflow-x: hidden; }
 
.tab-wraper {
    display: flex;
    flex: 1;
    height: 100%;
    max-width: 42px;
    min-width: 42px;
    transition: max-width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tab-wraper .tab-view {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tab-wraper .tab-view .tab-header {
    position: relative;
    max-height: 100%;
    flex-direction: column-reverse;
    cursor: pointer;
    height: 100%;
}

.tab-wraper .tab-view .tab-header .tab-title {
    display: flex;
    flex: 1;
    /* Use transform for rotation instead of writing-mode */
    transform: rotate(-90deg);  /* Rotate the text 90 degrees */
    font-size: 16px;
    color: #000;
    font-weight: 600;
    letter-spacing: 0.6px;
    width: 100%;
    height: calc(100% - 42px);
    justify-content: center;
    align-items: center;
    white-space: nowrap; /* Prevent text from wrapping */
}

.tab-wraper .tab-view .tab-header .tab-icon {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 42px;
    width: 100%;
    background-image: url('../images/zoom-out.png');
    background-size: 50%;
    background-position: center center;
    background-repeat: no-repeat;
}

.tab-wraper .tab-view .tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.tab-wraper.active {
    max-width: inherit;
    width: 100%;
}

.tab-wraper.active .tab-view {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
}

.tab-wraper.active .tab-view .tab-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 42px;
    max-height: 42px;
    border-bottom: 1px solid #efefef;
}

.tab-wraper.active .tab-view .tab-header .tab-title {
    /* Remove the rotation and inherit writing-mode for the active state */
    transform: none;
    writing-mode: inherit;
    display: flex;
    flex: 1;
    padding: 3px 12px;
    font-size: 16px;
    letter-spacing: 0.6px;
    align-items: center;
    justify-content: start;
    height: 42px;
}

.tab-wraper.active .tab-view .tab-header .tab-icon {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 42px;
    height: 42px;
    justify-content: center;
    align-items: center;
    background-image: url('../images/collapse.png');
    background-size: 50%;
    background-position: center center;
    background-repeat: no-repeat;
}

.tab-wraper.active .tab-view .tab-content {
    display: block;
    opacity: 1;
    padding: 10px;
    overflow-y: auto;
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
}

 
.tab-wraper.lead-view.active{ min-width:400px; max-width:400px; } 
.tab-wraper.contact-view.active{  min-width:400px; max-width:400px;} 
.tab-wraper.coll-notes-view.active{  min-width:600px; max-width:600px;}
.tab-wraper.coll-lead-notes-view.active{  min-width:600px; max-width:600px;}
.tab-wraper.coll-transcript-view.active{  min-width:600px; max-width:600px;}
.tab-wraper.coll-uploads-view.active{  min-width:600px; max-width:600px;}
.tab-wraper.coll-manalysis-view.active{  min-width:800px; max-width:800px;}

.tab-wraper.coll-emails-view.active{  min-width:600px; max-width:600px;}
.tab-wraper.coll-summary-view.active{  min-width:600px; max-width:600px;}
.tab-wraper.coll-ask-me-view.active{  min-width:600px; max-width:800px;}
.tab-wraper.coll-chart-view.active{  min-width:600px; max-width:800px;}

.tab-wraper.property-view.active{ min-width:600px; max-width: 600px;} 
.tab-wraper.comparison-view.active{ min-width:1600px;} 

.tab-wraper.comparison-view.active .tab-view .tab-content{ display:flex; flex-direction:row; gap:10px; }
.tab-wraper.comparison-view .col{ display:block; flex:1; height:100%; overflow:auto; }
.tab-wraper.comparison-view aside.col { display: none; max-width: 220px; padding-right: 10px; }
.tab-wraper.comparison-view aside.col.active { display:block; }
.filters-section{ display:block; width:100%; padding:10px 0px; }

.filters-section input[type="text"], .filters-section select{ padding:6px 12px; height:32px; }
.filters-section .button{ height:32px;  }

@keyframes rotateBackground {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


.filterToggle{ display:inline-block; margin-left: 10px; width:28px; height:28px; background-image:url('../images/filter.png'); background-size:80%; background-position:center center; background-repeat:no-repeat;}
.contact-view .contactsRefresh{ display:none;}
.contact-view.active .contactsRefresh{ display:inline-block; margin-left: 10px; width:28px; height:28px; background-image:url('../images/reload.png'); background-size:80%; background-position:center center; background-repeat:no-repeat;background-color: #fff !important;
  border-color: #fff !important;}
.contact-view.active .contactsRefresh:hover{background-color: #fff !important;
  border-color: #fff !important; }
.contact-view.active .contactsRefresh.rotate{animation: rotateBackground 2s linear infinite;}
.mapToggle{ display:none; margin-left: 10px; width:28px; height:28px; 
    background-image:url('../images/maps.png'); 
    background-size:80%; 
    background-position:center center; 
    background-repeat:no-repeat;
    background-color: transparent !important;
    border-radius: 0px;
    border: 0px;
}
.mapToggle:hove, .mapToggle:active, .mapToggle:focus{ background-color:transparent !important; border:0px; }

.tab-wraper.active .mapToggle{ display:inline-block; }

.img-thumb{ max-width:200px; }

.property-view h2{ font-size:20px; font-weight:600; line-height:26px; margin-top:0px; margin-bottom:5px; }
.property-view p{ margin-top:0px; font-size:14px; line-height:20px; margin-bottom:5px; }
.property-view p strong{ font-weight:600; }
.property-view p strong span{ font-weight:800; }
.property-view h3{ font-size:18px; font-weight:600; line-height:24px; margin-top:0px; margin-bottom:10px; }
.property-view h4{ font-size:16px; font-weight:600; line-height:20px; margin-top:0px; margin-bottom:10px; }
.property-view h5{ font-size:16px; font-weight:600; line-height:20px; margin-top:0px; margin-bottom:10px; }
.property-view .section-title{ background-color:#efefef; padding-top: 6px; padding-bottom: 6px; font-size:18px; line-height: 20px;}
.question-card {
    display: flex;
    width: 100%;
    height: 100%;
    flex: 1;  
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    background-color: #fff;
    overflow: hidden;
    padding: 0px;
}

.left-section {
  width: 30%;
  background-color: #37474F;
  color: #fff;
  padding: 10px;
  border-right: 2px solid #cfd8dc;
  flex: 1;
  max-width: 200px;
}

.question-list {
    list-style-type: none;
    padding: 0px; margin: 0px;
} 

.question-item {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    background-color: #455A64;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.question-item:hover, .question-item.selected {
    background-color: #546E7A;
}

.right-section {
  padding: 20px;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
}

.question-card .questionBox {
    padding: 16px;
    margin-bottom: 20px;
    background-color: #EBE7E4;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.question-card .questionBox h3 {
    margin-bottom: 15px;
  font-weight: bold;
  color: #000;
  font-size: 16px;
  line-height: 16px;
}



.options label {
    display: block;
    margin-bottom: 10px;
}

input[type="text"], select {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #B0BEC5;
    margin-top: 10px;
}

input[type="radio"], input[type="checkbox"] {
    margin-right: 8px;
}

input:focus, select:focus {
    outline: none;
    border-color: #00796B;
}

.view-images-btn{ width:62px; height:62px; border-radius:50%; background-size:cover; background-position:center center; background-repeat:no-repeat; padding:0px; }


th.sortable{ position:relative; vertical-align: top;} 
    th.sortable::before { position:absolute;
        content: "▲"; 
        display: block;
        font-size: 10px; 
        color: #efefef; 
        top:0px;
        right:0px;
        width:10px;
    }
    
    th.sortable::after {position:absolute;
        content: "▼"; 
        display: block;
        font-size: 10px; 
        color: #efefef;  
        bottom:0px;
        right:0px;
        width:10px;
        
    }
    
    th.sortable.asc::after{color: #999; }
    th.sortable.desc::before{color: #999; }

    #wnatInputValue { text-align:center; width:100%; border-width:0px; height:32px; border:1px solid #efefef; margin:0px auto; max-width:80%; }
    #wnatInputValue:hover, #wnatInputValue:active{ border-width:1px; }

    .nodesBox{ height:100%;  }
      .nodesBox textarea{ height:100%; }


.contact-info-card {
    max-width: 600px;
    margin-bottom: 10px;
    border: 1px solid #e3e3e3;
    padding: 16px;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.contact-info-card .card-header {
    margin-bottom: 10px;
}

.contact-info-card .card-header h3 {
    margin: 0;
    font-size: 20px;
    color: #333;
}

.contact-info-card .card-header p {
    margin: 5px 0;
    color: #666;
}

.contact-info-card .card-body p {
    margin: 5px 0;
    color: #555;
}

.contact-info-card .status-change {
    margin-top: 15px;
}

.contact-info-card .status-change label {
    font-weight: bold;
}

.contact-info-card .status-change select {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: 10px;
    font-size: 14px;
}


.questionBox .input-box{ display:block; width:100%; padding:8px 16px; background-color:#fff; margin-bottom:15px; border-radius:6px; }
.questionBox .input-box:last-child{ margin-bottom:0px; }
.questionBox .input-box label{ font-size:16px; margin-bottom: 3px;}
.questionBox .input-box .options{ font-size:14px; padding-top:5px; }
.questionBox .input-box .options label{ font-size:14px; font-weight:normal; }

#note-editor-container {
    height: 100%; /* Set to any specific height or adjust to your needs */
}
 

/* Full page animation wrapper */
.animation-wrapper {
  width: 100vw;
  height: 100vh; 
  justify-content: center;
  align-items: center;
  background-color: #282c34;
  overflow: hidden;
  position: fixed;
  z-index: 999;
  left: 0px;
  top: 0px;
  flex-direction: column;
  display: none;
}

/* Box to contain circles */
.animation-wrapper .box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

/* Box data with specific size */
.animation-wrapper .box-data {
  width: 160px;
  height: 160px;
  position: relative; /* To allow absolute positioning of the circles inside */
}

/* Circle animation */
.animation-wrapper .circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff6f61, #ffbf00);
  animation: expand 1.5s ease-in-out infinite;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%); /* Center the circle in the box */
}

.animation-wrapper .circle:nth-child(1) {
  width: 60px;
  height: 60px;
  animation-delay: 0s;
}

.animation-wrapper .circle:nth-child(2) {
  width: 80px;
  height: 80px;
  animation-delay: 0.3s;
}

.animation-wrapper .circle:nth-child(3) {
  width: 100px;
  height: 100px;
  animation-delay: 0.6s;
}

/* Progress Bar */
.animation-wrapper .loading-bar {
  width: 300px;
  height: 10px;
  background-color: #444;
  border-radius: 10px;
  margin-top: 10px;
  overflow: hidden;
}

.animation-wrapper .progress {
  width: 0%;
  height: 100%;
  background-color: #ffbf00;
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* Loading Text */
.animation-wrapper .loading-text {
  color: #fff;
  margin-top: 20px;
  font-size: 18px;
}

/* Animation keyframes */
@keyframes expand {
  0%, 100% {
    transform: translateX(-50%) translateY(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(-50%) scale(1.5);
    opacity: 0.5;
  }
}


#filterColoumn input[type="color"], #filterColoumn input[type="date"], #filterColoumn input[type="datetime"], #filterColoumn input[type="datetime-local"], #filterColoumn input[type="email"], #filterColoumn input[type="month"], #filterColoumn input[type="number"], #filterColoumn input[type="password"], #filterColoumn input[type="search"], #filterColoumn input[type="tel"], #filterColoumn input[type="text"], #filterColoumn input[type="url"], #filterColoumn input[type="week"], #filterColoumn input:not([type]), #filterColoumn textarea, #filterColoumn select {
    height: 32px;
}
#filterColoumn label{ font-size:14px; }
.filter-box.checkbox-group label{ margin-bottom:2px; cursor: pointer;}

.dell-mark{ display:flex; width:100%; font-size: 12px; justify-content: center; align-items: center; gap:5px; }

/* Base class for the span */
.dell-mark .datala {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}

/* Up triangle (green) */
.dell-mark .datala.up::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid green;
    margin-right: 5px;
}

/* Down triangle (red) */
.dell-mark .datala.down::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 8px solid red;
    margin-right: 5px;
}
.dell-mark .datala.same { width:10px; height:10px; display:block; background-color:#b5b5b5; }

.dell-mark .datala.only {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-color: #efefef;

}

#sortableTable th{ cursor:pointer; }

.question-box .sub-question{ background-color:#fcfcfc; margin-left: 15px; width: calc(100% - 15px);}

.questionBox .input-box:last-child{ margin-bottom:0px; }
.questionBox input, .questionBox textarea{ background-color:#fff; }



.composer-box {  width: 600px;  position: fixed; bottom: 20px; right: 20px; border: 1px solid #ccc; border-radius: 8px; background-color: white; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
z-index: 1000; font-family: Arial, sans-serif; }
.composer-box-header {display: flex;justify-content: start; align-items: center;padding: 4px 12px;background-color: #f1f3f4;border-bottom: 1px solid #ccc; position: relative; height: 48px;}
.composer-box-header h3 {margin: 0;font-size: 14px;line-height: 18px;font-weight: 600;color: #000;}
.composer-box-header .close-btn {cursor: pointer;background: none;border: none;font-size: 20px;color: #5f6368;height: 46px;width: 46px; right: 0px; top: 0px; position: absolute;}
.composer-box input[type="text"], .composer-box textarea {width: 100%;padding: 10px;margin-bottom: 10px;border: none;border-bottom: 1px solid #ddd;outline: none;font-size: 14px;}
.composer-box textarea {resize: none;height: 100px; border: 0px;}
.composer-box .composer-box-footer {display: flex;justify-content: space-between;align-items: center;padding: 10px;background-color: #f1f3f4;border-top: 1px solid #ccc;}
.composer-box .send-btn { color: white;padding: 6px 16px;border: none;border-radius: 4px;cursor: pointer;font-size: 14px; line-height: 14px; font-weight: 600;height: 32px;}
.composer-box .send-btn:hover { background-color: #000; }

.composer-box-header select.templateSelect{ height:26px; margin: 0px; padding: 4px 8px; background-position-x: right -12px;
  background-position-y: 8px; margin-left: 10px; max-width: 200px; font-size: 12px;}

#emailForm{ display:flex; flex-direction:column; }
#emailForm > div{ flex:1; width:100%; }
#emailForm > div.section-to{ max-height: 36px;  width:100%; display:flex; flex-direction:row; gap:2px; border-bottom:1px solid #ccc;}
#emailForm > div.subject{ max-height: 36px; width:100%; display:flex; flex-direction:row; gap:2px; border-bottom:1px solid #ccc;  }
#emailForm .section-to span{ flex:1; height: 36px; max-width:64px; display:flex; justify-content:start; align-items:center; padding-left:12px; }
#emailForm .section-to input[type="text"]{ flex:1; height: 36px; border:0px; padding: 0px; margin: 0px;}
#emailForm .subject span{  flex:1; height: 36px; max-width:64px; display:flex; justify-content:start; align-items:center; padding-left:12px; }
#emailForm .subject input[type="text"]{ flex:1; height: 36px; border:0px; padding: 6px 12px 6px 0px; margin: 0px;}
#emailForm .text-body textarea{ margin:0px; width:100%; height:400px; border-radius:0px;  padding: 6px 12px;}
#emailForm .composer-box-footer{ display:flex; flex-direction: row;}
#emailForm .composer-box-footer > div{ display:flex; flex:1;  }
#emailForm .composer-box-footer > div.right{ justify-content:right; }
#emailForm .composer-box-footer > div.right button.icon-btn{ background-image:url("../images/attach-file.png"); background-size:cover; background-position:center center; background-size:90%; width:26px; height:26px; background-color:#fff; border:0px; background-color:transparent; padding: 0px; }
#emailForm .file-attachment { margin-bottom: 10px; }

#emailForm .file-attachment input[type="file"] { padding: 10px; width: 100%; border: 1px solid #ddd; border-radius: 4px; background-color: #f9f9f9; }
#emailForm .file-attachment{ display:flex; width:100%; position:relative; }
#emailForm .file-attachment .file-names{display:flex; flex-direction: column; position:absolute; right:0px; bottom:0px; width: 100%; max-width: 60%; }
#emailForm .file-attachment .file-names div{ display: flex; flex-direction: row;  padding: 4px 0px 4px 8px;   border: 1px solid #ccc;   margin-bottom: 3px;   border-radius: 8px;   font-size: 12px;   line-height: 12px;   background-color: #fff;   justify-content: space-between;   align-items: center; }

.tox-promotion{ display:none !important; }


.emailDisplayBox {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    border-radius: 5px;
}
.emailDisplayBox.reply{ margin-left:15px;  }

.emailDisplayHeader {
    background-color: #f7f4f4;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: left; 
    font-weight: bold;
    flex-direction: column;
}

.emailDisplayHeader h4 {
    margin: 0;
    font-size: 14px; line-height: 16px; letter-spacing: normal; font-weight: 600; margin-bottom: 4px;
}
.emailDisplayHeader p {
    margin: 0; font-weight: 400;
    font-size: 12px; line-height: 13px; letter-spacing: normal;
}

.emailDisplayBody,
.emailAttachments {
    display: none;  /* Hidden by default */
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #ccc;
}

.emailDisplayBox.active .emailDisplayBody,
.emailDisplayBox.active .emailAttachments {
    display: block;  /* Show body content when the box is active */
}

.coll-summary-view h4{ font-size:16px; font-weight:600; letter-spacing: normal;}
#call-audio{ display:block; width:100%; max-width:100%; }


/* Modal window styling */
.orr-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}
.orr-modal h2{ margin-bottom:0px; margin-top:0px; }

/* Modal content box */
.orr-modal-content {
    position: relative;
    margin: auto;
    background-color: #fff;
    width: 900px;
    max-width: 90%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

/* Header */
.orr-modal-header {
    padding: 15px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
}

/* Close button */
.orr-close {
    position: absolute;
    right: 20px;
    top: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.orr-close:hover,
.orr-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Modal body (TinyMCE Editor area) */
.orr-modal-body {
    padding: 20px;
    flex: 1;
    overflow: auto;
}

/* Modal footer */
.orr-modal-footer {
    padding: 10px;
  text-align: center;
  background-color: #f1f1f1;
  border-top: 1px solid #e5e5e5;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* Full height for the editor */
#offerLetterEditor {
    width: 100%;
    height: calc(100vh - 180px); /* Adjust height for header and footer */
}

.orr-modal-footer .button{ font-size: 13px !important; }

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

.recorder {
    height: auto; 
    background-color: #222;
    display: flex;
    flex-wrap: wrap; 
    flex-direction: row;
    border-radius: 4px;
    overflow: hidden;
    gap: 5px;
    max-width: 100%; 
}

.recorder > div {
    height: 32px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex: 0 auto; 
}

.recorder > div.btns {
    display: flex;
    flex-wrap: wrap; 
    flex-direction: row; 
}

.recorder > div.btns button {
    width: 32px;
    height: 32px;
    border: 0px;
    padding: 4px;
    background-color: #ee3030;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0px;
}
.recorder > div.btns button#recordingStart{ width: auto; color: #fff; flex-direction: row; gap: 5px; font-size: 13px; text-transform:none; padding-left: 12px;  padding-right: 12px;}
.recorder > div.btns button#recordingStart img{ width:18px; }
.recorder > div.btns button#recordingStop{ background-color:#b10b0b; }
.recorder > div.btns button#recordingPause{ background-color:#158b15; }

.recorder > div.btns button img {
    max-width: 80%;
}

.recorder canvas {
    height: 32px;
    display: block;
    max-width: 100%;
}
.recorder > div.visualizerWraper{ max-width:100px; }
.recorder > div.recordingTimer {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    flex: 0 auto; 
}


.notification {
    position: fixed;
    top: 20px;
    right: -400px; /* Initially hidden off-screen */
    background-color: #ffcc00;
    color: #333;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    width: 350px;
    transition: right 0.5s ease-in-out; /* Smooth sliding effect */
    z-index: 9999; /* Make sure it's on top of other content */
    cursor: pointer;
}

.notification.show {
    right: 20px; /* Slide it into view */
}

.notification p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.notification h3 {font-size: 18px;  line-height: inherit;  font-weight: 600; text-align: center; margin-bottom: 8px;}

/* Optional styling for close button */
.notification .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #333;
}




.callRecordingSection{ display:block; width:100%; border:1px solid #ccc; background-color:#fff; border-radius:4px; margin-bottom:12px;  }
.callRecordingSection .callRecordingTitle{ display:flex; flex-direction:row; cursor:pointer; }
.callRecordingSection .callRecordingTitle:hover, .callRecordingSection .callRecordingTitle.active{ background-color:#f2f6e1; }
 
.callRecordingSection .callRecordingTitle input[type=checkbox]{ margin-left:12px; margin-right:0px; }
.callRecordingSection .callRecordingTitle span{ flex: 1; padding:8px 12px; display:flex; align-items:center; }
.callRecordingSection .callRecordingTitle span.date{ text-align:right; font-size:13px; justify-content: flex-end;}
.callRecordingSection .callRecordingTitle span.tab-title{ font-size:16px; font-weight:600; }
.callRecordingSection .callRecordingTitle span.createTranscript, .callRecordingSection .callRecordingTitle span.deleteTranscript{ max-width:30px; transition: transform 0.3s ease; display:flex; justify-content:center; align-items:center; padding:0px; }
.callRecordingSection .callRecordingTitle span.createTranscript img, .callRecordingSection .callRecordingTitle span.deleteTranscript img{ max-width:20px; transition: transform 0.3s ease; }
.callRecordingSection .callRecordingTitle span.createTranscript.active img, .callRecordingSection .callRecordingTitle span.deleteTranscript.active img{ animation: rotate 1s linear infinite; }
.callRecordingSection .callRecordingDetails{ display:block; width:100%;  }
.callRecordingSection .callRecordingDetails .callRecordingMedia{ padding:6px 12px; border-top:1px solid #ccc; width:100%; }
.callRecordingSection .callRecordingDetails .callRecordingMedia audio{ width:100%; }
.callRecordingSection .callRecordingDetails .callRecordingTranscript{ display:block; width:100%; padding:6px 12px; }
.callRecordingSection .callRecordingDetails .callRecordingTranscript button{ margin: auto; clear: both; float: none; display: block; }

.uploadSection{ display:block; width:100%; padding:10px; margin-bottom:15px; border:1px solid #afafaf; background-color:#fefefe; }


.uploadSection {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: #f8f9fa;
    border: 2px dashed #ddd;
    border-radius: 10px;
    position: relative;
    font-family: Arial, sans-serif;
    flex-direction: column;
    margin: auto;
    max-width: 600px;
}

.uploadSection .up{ text-align:center; width:100%; display: none;}
.uploadSection .up h5{ font-size:16px; letter-spacing:normal; text-align:center; width:100%; }

/* Hidden file input */
#fileUpload {
    display: none;
}

/* Upload button styling */
#uploadRecordingFile {
    background-color: #5bc0eb;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

#uploadRecordingFile:hover {
    background-color: #3a9ccf;
}

/* Change button text and appearance once a file is selected */
.uploadSection.uploading #uploadRecordingFile {
    background-color: #28a745;
    cursor: not-allowed;
}

.uploadSection.uploading #uploadRecordingFile::after {
    content: 'Uploading...';
}

/* Centered label prompting file selection */
.uploadSection label {
    color: #888;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.uploadSection.uploading label {
    display: none;
}





.savingRecordingLoading{ display:flex; justify-content:center; align-items:center; }
.savingRecordingLoading .loaderX{ margin:0px 10px 0px; }
#savingRecordingAction{ display:none; }







.processingScreen{ display:none; position:fixed; left:0px; top:0px; justify-content:center; align-items:center; right:0px; bottom:0px; background-color: rgba(66, 66, 66, 0.8); z-index:99999999; }
.processingScreen.active{ display:flex; }
.processingScreen .logo{ height:64px; display:flex; align-items: center; font-size: 42px; font-weight: 700; color: #000; padding-left:16px; padding-right:16px; justify-content: center;}
.processingScreen .logo span{  color:#d33c43; }
.processingScreen .processingScreenBox{ background-color:#f9f9f9fc; border-radius: 8px; box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,rgba(17, 17, 26, 0.1) 0px 0px 8px; margin: auto; width:100%; max-width:360px; padding:25px; display:flex; justify-content:center; flex-direction:column; }
.processingScreen .processingScreenBox h3{ font-size: 18px; font-weight: 400; text-align: center; color: #636363; margin-bottom: 0px; margin-top: 2px;}

 
.update-loader { max-width: 70px; margin: 15px auto;
  --s: 28px;
  height: var(--s);
  aspect-ratio: 2.5;
  --_g: #000 90%,#0000;
  --_g0: no-repeat radial-gradient(farthest-side          ,var(--_g));
  --_g1: no-repeat radial-gradient(farthest-side at top   ,var(--_g));
  --_g2: no-repeat radial-gradient(farthest-side at bottom,var(--_g));
  background: var(--_g0), var(--_g1), var(--_g2), var(--_g0), var(--_g1), var(--_g2);
  background-size: 20% 50%,20% 25%,20% 25%;
  animation: l45 1s infinite; 
}
@keyframes l45 {
  0%   {background-position:calc(0*100%/3) 50%,calc(1*100%/3) calc(50% + calc(var(--s)/8)),calc(1*100%/3) calc(50% - calc(var(--s)/8)), calc(3*100%/3) 50%,calc(2*100%/3) calc(50% + calc(var(--s)/8)),calc(2*100%/3) calc(50% - calc(var(--s)/8))}
  33%  {background-position:calc(0*100%/3) 50%,calc(1*100%/3) 100%           ,calc(1*100%/3) 0              , calc(3*100%/3) 50%,calc(2*100%/3) 100%           ,calc(2*100%/3) 0              }
  66%  {background-position:calc(1*100%/3) 50%,calc(0*100%/3) 100%           ,calc(0*100%/3) 0              , calc(2*100%/3) 50%,calc(3*100%/3) 100%           ,calc(3*100%/3) 0              }
  90%,
  100% {background-position:calc(1*100%/3) 50%,calc(0*100%/3) calc(50% + calc(var(--s)/8)),calc(0*100%/3) calc(50% - calc(var(--s)/8)), calc(2*100%/3) 50%,calc(3*100%/3) calc(50% + calc(var(--s)/8)),calc(3*100%/3) calc(50% - calc(var(--s)/8))}
}

 
.loaderX {
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}
@keyframes l5 {
    0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
    33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
    66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
    100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
}

.reportHead{ display:flex; width:100%; margin:0px 0px 15px; justify-content:space-between;  }
.reportHead button{ font-size: 13px;  font-weight: 500; height: 32px; }
.reportHead .working{ display:block; width: 32px; height: 32px; opacity:0; transition: transform 0.3s ease; }
.reportHead .working img{ max-width:80%; transition: transform 0.3s ease; }
.reportHead.active .working { opacity:1; }
.reportHead.active .working img{animation: rotate 1s linear infinite;}

button{ cursor:pointer; }


.reply .dots::after {
    content: '.';
    animation: dots 1s steps(5, end) infinite;
}
.send-btn .dots::after {
    content: '.';
    animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

#soundClips > h3{ font-size:18px; font-weight:600; }

.removeAttachments{ display:flex; justify-content:center; align-items:center; width:24px; height:24px; padding: 0px; margin: 0px; background-color: transparent; border-color: transparent; color: #000;}
.removeAttachments img{ max-width:16px;  }

.bestiaQA{ display:flex; height:100%; flex-direction:column; background-color:#fefefe; }
.bestiaQA > div{ flex: 1; display:flex; }
.bestiaQA > div.chatsList{ flex-direction:column; overflow-y:auto; overflow-x:hidden; padding:15px 16px; }
.bestiaQA > div.chatsInput{ flex-direction:row; max-height: 80px; position:relative; padding:10px 0px; border-top:1px solid #ccc; background-color:#fff; }
.bestiaQA > div.chatsInput textarea{ width:100%; height:100%; resize:none; padding:6px 52px 6px 12px; background-color:#fff; }
.bestiaQA > div.chatsInput button{ width:42px; height:42px; background-color:#000; border:1px solid #000; color:#fff; padding: 0px; position:absolute; right:5px; top:15px; }
.bestiaQA > div.chatsInput button img{ max-width:60%; }
.bestiaQA .chatMessage{ display:block; background-color:#fff; padding:6px 12px; border-radius:6px; margin-bottom:15px; clear:both; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

.leadSummaryBox h2{ font-size:20px; line-height:26px; margin-top: 0px; margin-bottom: 12px;}
.leadSummaryBox h3{ font-size:16px; line-height:20px;   margin-top: 0px; margin-bottom: 12px;}
.leadSummaryBox h4{ font-size:14px; line-height:18px;   margin-top: 0px; margin-bottom: 12px;}
.leadSummaryBox p{ font-size:14px; line-height:18px;   margin-top: 0px; margin-bottom: 12px;}
.leadSummaryBox li{ font-size:14px; line-height:18px;   margin-top: 0px; margin-bottom: 12px;}

.progress-bar-container {
    width: 100%;
    background-color: #f3f3f3;
    margin-top: 10px;
}

.progress-bar {
    height: 5px;
    width: 0;
    background-color: #4CAF50;
}

.pageTitle { display: flex;   align-items: center;   gap: 5px;   height: 42px; }
.pageTitle .btn-small{ height: 32px;   display: flex;   justify-content: center;   align-items: center; }

.leads-section{ display:flex; min-height:calc(100vh - 42px); flex-direction:row;}
.leads-section .leads-aside{ width:100%; flex:1; display:block; max-width:200px; background-color:#fff; border-right:1px solid #efefef; padding:15px;  }
.leads-section .leads-content{ width:100%; flex:1; display:block; padding: 15px;}
.leads-section .leads-aside .asideNav{ list-style-type:none; padding:0px; margin:0px; }
.leads-section .leads-aside .asideNav li{ display:block; padding:0px; margin:0px; width:100%; }
.leads-section .leads-aside .asideNav li a{ display:flex; width:100%; font-size:14px; justify-content:start; align-items:center; padding:6px 12px; height:32px; background-color:#fff; color:#000; height:32px; border-radius:6px;  }
.leads-section .leads-aside .asideNav > li.active > a, .leads-section .leads-aside .asideNav li:hover > a{ background-color: #d33c43; color:#fff; }
.leads-section .leads-aside .asideNav > li > ul{ display:none; padding: 0px; margin: 0px;}
.leads-section .leads-aside .asideNav > li > ul > li{ padding:0px; margin:0px; }
.leads-section .leads-aside .asideNav > li > ul > li a{ font-size:13px; border-radius:6px;}
.leads-section .leads-aside .asideNav > li.active > ul, .leads-section .leads-aside .asideNav > li:hover > ul{ display:block; }

.leads-section .leads-aside .asideNav > li.active > ul > li.active a, .leads-section .leads-aside .asideNav > li:hover > ul > li:hover a{ background-color:#e2e1e1; color:#000; font-size:13px; }

 



.offerSection{ display:flex; flex-direction:row; position:relative; height: calc(100vh - 41px); }
.offerSection .offerAside{ flex:1; background-color:#fff; border-right:1px solid #ccc; max-width: 360px; justify-content: center; padding: 15px; overflow-y: auto;}
.offerSection .offerContent{ flex:1; display:flex; flex-direction:column; padding:0px; }
.offerSection .offerContent .dockTab{ display:flex; justify-content:center; position:relative; }
.offerSection .tabNav{ display:flex; margin: 0px auto; list-style-type:none; padding: 0px; border-collapse: collapse; padding-top: 10px; padding-bottom: 10px;}
.offerSection .tabNav li{ display:flex; height:32px; padding:6px 12px; background-color:#fff; display: flex; border:1px solid #ccc; border-collapse: collapse; cursor:pointer; justify-content:center; align-items:center; cursor:pointer; }
.offerSection .tabNav li.active{ background-color:#d33c43; color:#fff; border:1px solid #bd272e;}
.offerSection .tabNav li:first-child{ border-radius: 6px 0px 0px 6px; }
.offerSection .tabNav li:last-child{ border-radius: 0px 6px 6px 0px; }

.offerSection .offerContent .dockTab .saveOffer{ position:absolute; right:15px; }


.offerSection .offerAside .inputBox{ display:block; margin-bottom:8px; }
.offerSection .offerAside .inputBox label{ font-size:13px; line-height:16px; margin-bottom:4px; }
.offerSection .offerAside .inputBox input[type='text'], .offerSection .offerAside .inputBox input[type='number']{ width:100%; height:32px; margin: 0px 0px; padding:6px 12px; } 
.offerSection .offerAside .inputBox select{ width:100%; height:32px; margin: 0px 0px; padding:6px 8px 6px 12px; }

.offerSection .offerContent .dockArea{ width:100%; display:flex; justify-content:start; flex-direction:column; gap:20px; padding-top: 15px; height: calc(100vh - 83px); overflow: auto; align-items: center;}

.offerSection .offerContent .dockArea .page { display: block; margin-bottom: 15px; padding: 15mm; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); width: 210mm; min-height: 298mm; background-color:#fff; border:1px solid #ccc; }

.page *{ color:#000; }
.page h1 { font-family: Arial, sans-serif; font-size: 18.67px; line-height: 24.67px; text-align: center; margin-bottom: 25px; margin-top: 0px; }
.page table{ width:100%; border:0px; margin:0px; border:0px; margin-bottom:5px;}
.page table tr{ border:0px; margin:0px; border:0px; }
.page table tr td{ border:0px; padding:0px; vertical-align:top; font-size: 12px; line-height:20px; }
.page table tr td.left-auto{ white-space: nowrap; }
.page table tr td.right-auto{ white-space: nowrap; }
.page table tr td.border-bottom{ border-bottom: 1px solid #ccc; width:100%; text-align:center; }
.page table tr td.auto{ width:100%; }
.page table tr td.border-bottom.w-100{ width:200px;}
.page table tr td.border-bottom.w-120{ min-width:120px;}
.page ul.base{ list-style-type:none; display:block; padding:0px; margin:0px; }
.page ul.base li{ display:flex;align-items: center; padding:0px; margin:0px; list-style-type:none; }
.page ul.base li:before, ul.base li:after{ content:''; display:table; clear:both; }
.page span.price-box{ display:inline-block; width:130px;  border-bottom: 1px solid #ccc; text-align:center; }
.page .m-left-20{ margin-left:20px !important;}
.page .p-left-20{ padding-left:22px !important;}
.page strong{ font-weight:600;}
.page .mb-20{ margin-bottom:20px;}
.page .mt-30{ margin-top:30px;}
.page .mt-20{ margin-top:20px;}
.page .mt-10{ margin-top:10px;}
.page .sap{ display:block; width:100%; height:20px;}
.page ul.base li{display: flex;  flex-direction: revert; align-items: center;}
.page .checkbox-item {  cursor: pointer;  user-select: none; display: flex; align-items: center;  }         
.page .checkbox-item .checkbox { display:inline-block;  font-size: 20px;  margin-right: 10px; color: black;  }
.page .checkbox-item.checked .checkbox { color: green; }
.page table.tb_bottom tr td{ height:28px; vertical-align:bottom;}

.pageSet{ display:none; }
.pageSet.pageSet-1.active{ display:block; }
.pageSet.pageSet-2.active{ display:block; }
.pageSet.pageSet-3.active{ display:block; }

.offerForm{ display:none; }
.offerForm.offerForm-1.active{ display:block; }
.offerForm.offerForm-2.active{ display:block; }
.offerForm.offerForm-3.active{ display:block; }

.page span.checkbox-item{ display:inline-block; margin:0px !important; text-align: center; text-align: center; }
.page span.checkbox-item .checkbox{ margin:0px !important; }

h3.signing-title{ font-size:18px; margin-top:0px; margin-bottom:20px; text-align:center; font-weight: 600; color: #000;}
.signingBoxes{ display:block; width:100%; list-style-type:none; padding:0px; margin:0px; }
.signingBoxes li{ display:block; width:100%; padding:0px; margin:0px;  }
.signingBoxes li h4{ font-size:14px; margin-top: 0px; margin-bottom: 4px; color: #000;}
.signingBoxes li .signature-pad{ display:block; width:100%;   }
.signingBoxes li .signature-pad canvas{ display:block; width: 100%; max-width: 100%; height:100px; border: 1px solid #ccc; margin-top: 5px; padding: 0px;}

.signingBoxes li .pab-btns{ display:flex; justify-content:space-between; align-items:center; }
.signingBoxes li .pab-btns span{ display:flex; padding: 6px 12px; border-radius: 4px; justify-content:center; align-items:center; font-size:14px; background-color:#000; color:#fff; cursor:pointer; height:32px; }

.dockTab{ position:relative; }
.dockTab .offerEditNav{ position:absolute; right:15px; top:10px; display:inline-block;  }
.dockTab .offerEditNav a {
  display: inline-flex;
  height: 32px;
  padding: 6px 12px;
  background-color: #fff; 
  border: 1px solid #ccc;
  border-collapse: collapse;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  cursor: pointer; background-color: #000; border: 1px solid #000; color: #fff; border-radius: 4px;
}
 

.offerAside{ position:relative; padding-bottom:45px !important; }
.offerAside .editAddOfferBtn{ position:fixed; left:0px; bottom:0px; width: 360px; padding:10px; background-color:#fff; }
.offerAside .editAddOfferBtn button{ height: 32px; font-size:14px; width:100%;  }

.coll-lead-notes-view .filterToggle{ background-image:url('../images/add.png'); }
.leadNotesList{ display:block; list-style:none; padding:0px; margin:0px; width:100%; }

.leadNotesList article{ display:block; width:100%; padding:0px; margin:0px 0px 5px;}
.leadNotesList article:last-child{ margin:0px;  }
.leadNotesList article .notesTitle{ display:flex; width:100%; cursor: pointer; border:1px solid #ccc; background-color: #efefef; color: #111; border-radius: 4px; padding:9px 12px; align-items:center; justify-content:space-between; position:relative; z-index:99; }
.leadNotesList article .notesTitle h3{ font-size:14px; line-height:14px; margin:0px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.leadNotesList article .notesContent{ display:none; width:100%; border:1px solid #ccc; padding:6px 12px; position:relative; z-index:1; margin-top: -1px;}
.leadNotesList article.active .notesContent{ display:block; }
.notesTools{ display:flex; margin-left: -12px; margin-right: -12px; margin-bottom: -6px; border:1px solid #ccc; border-radius:4px; padding:0px; justify-content:space-between; align-items:center; }
.notesTools button{padding: 0px; background-color: #efefef; color: #000; border-color: #cfcfcf; display: flex; flex:1; justify-content: center; align-items: center; font-size: 14px; width: auto; height: 36px; border-radius: 0px;}
.notesTools button:hover,.notesTools button:focus, .notesTools button.active{ background-color: #000; color: #fff; border-color: #000;}
.leadNotesList .tabs {
    margin-top: 20px;
    display: none;
}
.leadNotesList .tabs.active { display:block; }

.leadNotesList .tabs h4 { 
    font-weight: bold;
    font-size:14px; margin-top:0px; margin-bottom:10px; 
}

.leadNotesList .tabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.leadNotesList .tabs ul li {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.leadNotesList .inputSection {
  flex-direction: row;
  max-height: 80px;
  position: relative;
  padding: 6px 12px;
  border-top: 1px solid #ccc;
  background-color: #fff;
  margin: 6px -12px -6px;
}

.leadNotesList select.form-control { margin:0px !important; }

.leadNotesList .inputSection textarea {
    width: 100%;
  height: 100%;
  resize: none;
  padding: 6px 52px 6px 12px;
  background-color: #fff; margin: 0px;
}

.leadNotesList .inputSection button {
    width: 42px;
  height: 42px;
  background-color: #000;
  border: 1px solid #000;
  color: #fff;
  padding: 0px;
  position: absolute;
  right: 20px;
  top: 15px
}

.leadNotesList .inputSection button:hover {
    background-color: #218838;
}

.leadNotesList .userDropdown {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}

.leadNotesList .assignedUsers {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.leadNotesList .assignedUsers li {
    margin-bottom: 5px;
    font-size: 14px;
}




.assignedUsers {
    list-style: none;
    padding: 0;
    margin: 0;
}

.assignedUsers li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.assignedUsers .user-item {
    display: flex;   justify-content: start;   align-items: center; width: 100%;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #999;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-right: 10px;
    overflow: hidden;
    position: relative;
}

.avatar .initials {
    display: flex;
    position: absolute;
}

.avatar[style*="url('https://www.gravatar.com/avatar/")"]:not([style*="?d=404"]) .initials {
    display: none;
}

.avatar[style*="?d=404"] .initials {
    display: flex;
}

.assignedUsers .user-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}