.lightMode .sidebar
{
  background-color: var(--t-primary-50);
  border:1px solid var(--t-primary-200);
}
.lightMode .header
{
  background-color: var(--t-primary-50);
  border:1px solid var(--t-primary-200);
}
.lightMode .right-sidebar
{
  background-color: var(--t-primary-50);
  border:1px solid var(--t-primary-200);
}
.lightMode .record-content
{
  background-color: var(--t-primary-50);
  border:1px solid var(--t-primary-200);
}
.lightMode .main-content
{
  background-color: var(--t-primary-50);
}

.lightMode .mainformcontainer
{
  background-color: var(--t-primary-50);
}
.lightMode #topList
{
  background-color: var(--t-primary-50);
}
.lightMode #centerList
{
  background-color: var(--t-primary-50);
}
.lightMode #rightList
{
  background-color: var(--t-primary-50);
}
.lightMode #leftList
{
  background-color: var(--t-primary-50);
}

.lightMode .child-app-container
{
  background-color: var(--t-primary-100);
}
.lightMode .shortkey 
{
  background-color: var(--t-primary-700);
  color:  var(--t-primary-50);
}
.lightMode .comment-box
{
  background-color: var(--t-primary-100);
}

.lightMode h4.activity-title { 
  background-color: var(--t-primary-700);
  color:  var(--t-primary-50);
}
.lightMode .activity-container
{
  background-color: var(--t-primary-100);
}
.lightMode .column 
{
  background-color: var(--t-primary-100);
}
.lightMode li.viewli {
  border:1px solid var(--t-primary-200);
}
.lightMode .headerbrancumes
{
  border-right:1px solid var(--t-primary-200);
  border-bottom:1px solid var(--t-primary-200);
}
.lightMode .filterboxwithname {
  border: 1px solid var(--t-primary-300);
}

.lightMode .p-breadcrumb {
  background: var(--t-primary-50);;
 
}

.lightMode  .notificationli
{
  background: var(--t-primary-100) ;
}

.lightMode .openchatfullvew  {
   background:var(--t-primary-100) ;
   border-bottom: 1px solid var(--t-primary-300);
 }
 
.lightMode .fullviewchat li.userlistli {
 background:var(--t-primary-100);
  border-bottom: 1px solid var(--t-primary-300);
}

.lightMode .fullviewchat li.selected {
  background: var(--t-primary-800);
  color: var(--t-primary-50);
   border-bottom: 1px solid var(--t-primary-300);
 }
 .lightMode .user-list { 
  border-right: 1px solid var(--t-primary-300);
  
}
.darkMode .systemapps-actions {
  border-top-color:var(--t-primary-300)!important;
}

.lightMode .chatmain-container{ 
  border: 1px solid var(--t-primary-300);
 
}
.lightMode .input-container{ 
  border-top: 1px solid var(--t-primary-300);
 
}
.lightMode .messageheader{ 
  border-bottom: 1px solid var(--t-primary-300);
 
}
.lightMode .systemapps-actions {
  border-color:var(--t-primary-300);
}

.lightMode ::-webkit-scrollbar-track {
  background: var(--t-primary-300);
}

.lightMode ::-webkit-scrollbar-thumb {
 background: var(--t-primary-100);
 &:hover {
   background: var(--t-primary-300);
 }
}
.lightMode *:not(.p-scrollpanel) {
 scrollbar-color: var(--t-primary-300) var(--t-primary-500);
}

.lightMode .custom-scroll {

 ::-webkit-scrollbar-thumb {
   background: var(--t-primary-300);
   &:hover {
     background:var(--t-primary-300);
   }
 }
 scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.lightMode .date-label {
  background: var(--t-primary-300);
  color: #666;
  
}

.lightMode .date-header::before {
  background: var(--t-primary-300);
  
}



.lightMode .mention-dropdown { 
  background: white;
  border: 1px solid var(--t-primary-300);  
}

.lightMode .mention-item {
  color: var(--t-surface-900); 
  &:hover, &.selected { 
    background: var(--t-primary-100); 
  }
}

.lightMode .mention-header {
  background: var(--t-surface-50);
  color: var(--t-surface-600);
  border-bottom: 1px solid var(--t-surface-200);
}

.lightMode :global(.mention) {
  background: var(--t-primary-100); 
  color: var(--t-primary-700); 
  &.mention-me { 
    background: var(--t-warning-100); 
    color: var(--t-warning-700); 
  }
}







.darkMode .sidebar
{
  background-color: var(--t-surface-900);
  border-right:1px solid var(--t-surface-800);
}
.darkMode .header
{
  background-color: var(--t-surface-900);
  border-bottom:1px solid var(--t-surface-800);
}
.darkMode .right-sidebar
{
  background-color: var(--t-surface-900);
  border-left:1px solid var(--t-surface-800);
}
.darkMode .record-content
{
  background-color: var(--t-surface-900);
  border:1px solid var(--t-surface-800);
}
.darkMode .main-content
{
  background-color: var(--t-surface-950);
}

.darkMode .mainformcontainer
{
  background-color: var(--t-surface-950);
}
.darkMode #topList
{
  background-color: var(--t-surface-900);
}
.darkMode #centerList
{
  background-color: var(--t-surface-900);
}
.darkMode #rightList
{
  background-color: var(--t-surface-900);
}
.darkMode #leftList
{
  background-color: var(--t-surface-900);
}

.darkMode .child-app-container
{
  background-color: var(--t-surface-800);
}
.darkMode .shortkey 
{
  background-color:var(--t-surface-700);
  color:  var(--t-primary-50);
}
.darkMode .comment-box
{
  background-color: var(--t-surface-800);;
}

.darkMode h4.activity-title { 
  background-color:var(--t-surface-700);
  color:  var(--t-primary-50);
}
.darkMode .activity-container
{
  background-color:var(--t-surface-950);
}
.darkMode .column 
{
  background-color:var(--t-surface-900);
}
.darkMode .scrumboard .record-content
{
  background-color:var(--t-surface-800);
}
.darkMode li.viewli {
  border:1px solid var(--t-surface-700);
}
.darkMode .headerbrancumes
{
  border-right:1px solid var(--t-surface-700);
  border-bottom:1px solid var(--t-surface-700);
}
.darkMode .filterboxwithname {
  border: 1px solid var(--t-surface-700);
}
.darkMode .module-box
{
background-color: var(--t-surface-800);
color: var(--t-surface-400);
}
.darkMode .p-breadcrumb {
  background: var(--t-surface-950);
 
}
.darkMode  .notificationli
{
  background: var(--t-surface-800);
}
.darkMode *:not(i):not(.pi):not(li):not(button):not(.p-button-label) {
  color: var(--t-surface-300);
}
.darkMode .openchatfullvew  {
   background: var(--t-surface-950);
   border-bottom: 1px solid var(--t-surface-800);
 }
 
.darkMode .fullviewchat li.userlistli {
 background: var(--t-surface-900);
  border-bottom: 1px solid var(--t-surface-800);
}

.darkMode .fullviewchat li.selected {
  background: var(--t-surface-950);
   border-bottom: 1px solid var(--t-surface-600);
 }
 
 .darkMode .user-list { 
  border-right: 1px solid var(--t-surface-600);
  
}

.darkMode .chatmain-container{ 
  border: 1px solid var(--t-surface-600);
 
}
.darkMode .input-container{ 
  border-top: 1px solid var(--t-surface-600);
 
}
.darkMode .messageheader{ 
  border-bottom: 1px solid var(--t-surface-600);
 
}
.darkMode .systemapps-actions {
  border-top-color:var(--t-surface-950)!important;
}




.darkMode ::-webkit-scrollbar-track {
   background: var(--t-surface-600);
}

.darkMode ::-webkit-scrollbar-thumb {
  background: var(--t-surface-400);
  &:hover {
    background: var(--t-surface-600);
  }
}
.darkMode *:not(.p-scrollpanel) {
  scrollbar-color: var(--t-surface-500) var(--t-surface-900);
}

.darkMode .custom-scroll {
 
  ::-webkit-scrollbar-thumb {
    background: var(--t-surface-600);
    &:hover {
      background:var(--t-surface-600);
    }
  }
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.darkMode .date-label {
  background: var(--t-surface-600);
  color: #666;  
}
.darkMode .date-header::before {
  background: var(--t-surface-600);
  
}




.darkMode .mention-dropdown { 
  background: var(--t-surface-700);
  border: 1px solid var(--t-surface-600);  
}

.darkMode .mention-item {
  color: var(--t-surface-100); 
  &:hover, &.selected { 
    background: var(--t-surface-600); 
  }
}

.darkMode .mention-header {
  background: var(--t-surface-600);
  color: var(--t-surface-200);
  border-bottom: 1px solid var(--t-surface-500);
}

.darkMode :global(.mention) {
  background: var(--t-primary-600); 
  color: var(--t-surface-100);  
  &.mention-me { 
    background: var(--t-warning-600); 
    color: var(--t-surface-100); 
  }
}


















 .fullwidth label {
  margin-bottom: -11px !important;
  display: block;
}
img.logo {
  position: absolute;
  bottom: 20px;
}
.headerbrancumes {
  float: left;
  padding: 7px 10px 8px 10px;
}

body {
  font-family: "Roboto", sans-serif;
  padding: 0px;
  margin: 0px;
}
ul.manue {
  list-style: none;
  padding: 0;
  margin: 10px;
}
li.menuli {
  padding: 12px 12px;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  margin-top: 10px; 
  margin-bottom: 10px;
}
li.menuli:hover {
 background-color: var(--t-primary-400);
 color:var(--t-surface-900);
}
li.active {
  background-color: var(--t-primary-400);
  color:var(--t-surface-900);
 }
.menuli i.pi {
  font-size: 18px;

}


.bg {
  height: 100vh;
  overflow: hidden;
  background-image: url('../../images/bg2.jpg');
}

.page-container {
  padding-left: 70px;
  padding-top: 70px;
  padding-right: 70px;
  height: 100vh;
  position: fixed;
  width: 100%;
}
.header {
  height: 70px;
 
  position: fixed;
  width: 100%;
  z-index: 1;
  box-shadow: var(--card-box-shadow);
  padding: 0px 70px;
  z-index: 100000;
}
.sidebar {
  width: 70px;
 
  height: 100%;

  box-shadow: var(--shadow-2);
  position: fixed;
  overflow-y: auto;
  z-index: 1000000;
  box-shadow: var(--card-box-shadow);
}
.right-sidebar {
  width: 70px;

  height: 100%;
  overflow-y: auto;
  position: fixed;
  right: 0;
  box-shadow: var(--card-box-shadow);
  z-index: 100000000000;
}
.footer {
  height: 50px;

  position: fixed;
  align-items: center;
  justify-content: center;
  width: 100%;
  bottom: 0;
}
.footer p {
  text-align: center;
}
.sidemenu .p-menu {
  border: 0px !important;
  min-width: 0px !important ;
}
.sidemenu .p-menu-item {
  padding: 12px 10px;
  font-size: 20px;
}
.sidemenu .pi {
  font-size: 18px;
}
.closeButton {
  margin-left: -48px;
  margin-top: -3px;
  
  z-index: 1;
  position: fixed;
  border-radius: 25px 0px 0px 23px;
  width: 28px;
}
.closeButton:hover {
  margin-left: -48px;
  margin-top: -3px;

  z-index: 1;
  position: fixed;
  border-radius: 25px 0px 0px 23px;
  width: 28px;
}
.closeButton .p-button-text.p-button-secondary {
  margin-left: -5px;
}
.p-drawer-header {
  display: flex;
  align-items: center;
  position: absolute;
}
a {
  text-decoration: none;
}
nav.p-breadcrumb.p-component {
  padding: 0px !important;
}
.text-center {
  text-align: center;
}
.p-paginator {
  justify-content: flex-end !important;
}

.closeButton .p-button-text.p-button-secondary:not(:disabled):hover {
  background: transparent;
  border-color: transparent;
}

.header_box {
  width: 20%;
  float: left;
  display: block;
  border: 0px solid;
}

.page-header {
  display: block;
  width: 100%;
}

.header_box.hedericons {
  text-align: right;
}
.inner-container {
  padding: 0px 20px;
}
.hedericons p-button {
  margin-left: 10px;
}
.submitbutton {
  text-align: center;
  padding: 20px;
}
.table-container {
  width: 100%;
  overflow-x: auto;
}

.custom-table .p-datatable-table-container {
  overflow: unset !important;
}

body .p-drawer-content {
  padding: 0 !important;
}
p-password {
  width: 100% !important;
  display: block !important;
}
.p-password {
  width: 100% !important;
}
.p-password input.p-input {
  width: 100% !important;
}
p-button.login-button {
  width: 100% !important;
}
.login-button button.p-ripple.p-button.p-component {
  width: 100% !important;
}
.p-card {
  padding: 10px !important;
}
.user-header .p-chip {
  background: none !important;
}

.record-content {
  display: block;
  width: 100%; /* Ensures full width */
  justify-content: space-between;
  padding: 5px;

  border-radius: 5px;
  margin-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
  height: 40px;
}


.record-field {
  flex: 1; /* ✅ Equal width distribution */
  text-align: left; /* ✅ Center the text */

  white-space: nowrap; /* ✅ Prevents text wrapping */
  font-size: 14px;
 
}

.record-actions {
  flex: 0.5; /* ✅ Actions column takes less space */
  text-align: right;
  padding-right: 20px;
}

.loading-spinner {
  text-align: center;
  width: 100px;
  margin: 0 auto;
}

.record-header {
  display: flex;
  width: 100%; /* Ensures full width */
  justify-content: space-between;
  padding: 5px;
  font-weight: bold;
  border-radius: 8px;
}

.header-item {
  flex: 1; /* ✅ Equal width distribution */
  text-align: left; /* ✅ Center the text */
  padding: 10px;
  white-space: nowrap; /* ✅ Prevents text wrapping */
  font-size: 13px;
}

.actions-header {
  flex: 0.5; /* ✅ Actions column takes less space */
  text-align: right;
}
.p-progressspinner-spin {
  height: 72% !important;
  width: 44% !important;
}
.estimationlist,
.estimationlist .p-button {
  border-radius: 5px 0px 0px 5px;
}
.estimationpluse,
.estimationpluse .p-button {
  border-radius: 0px 5px 5px 0px;
}
app-timo {
  width: 280px;
  display: flex;
}

.child-app-container {
  padding: 10px;
  border-radius: 10px;
}


.record-field {
  padding: 6px 8px 2px 6px;
}

.no-records.ng-star-inserted {
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  margin-top: 15px;
}


.p-scrollpanel {
  width: 100%!important;
}
.p-drawer-right {
  right: 70px!important;
 
}

/* Global scrollbar styles */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
  &:hover {
    background: #555;
  }
}

/* Firefox scrollbar */
*:not(.p-scrollpanel) {
  scrollbar-width: none;
  scrollbar-color: #888 var(--t-surface-900);
}
.p-scrollpanel,.scrumboard
{
  scrollbar-width: thin!important;
}
/* Optional: For specific containers that need custom scrollbar */
.custom-scroll {
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    &:hover {
      background: rgba(0, 0, 0, 0.3);
    }
  }

  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.p-drawer-content {
  overflow-x: hidden;
}



/* toopbar and bottombar of layoutes userfiledradiusselct */
.userfiledradiusselct {
  border: 0px!important ;
  background: none!important;
  width: auto!important;
  margin-left: 17px;
}
.userfiledradiusselct .p-chip-label{
  width: 26px;
  overflow: hidden;
} 
.userfiledradiusselct .p-multiselect-label-container {
  display: none;
}
.userbox{
  float: left;
  margin-right: -12px;
}
.userfiledradiusselct .p-multiselect-dropdown {
  padding: 5px;
  border: 1px solid;
  border-radius: 100%;
  width: 20px;
  height: 20px;
}

.userbox  p-avatar.p-avatar.p-component {
  width: 20px;
  height: 20px;
}

.idicatores .p-select-dropdown {
  display: none;
}
.idicatores span.p-select-label.ng-star-inserted {
  padding: 0px 3px;
}


.userindicatoresstatus p-avatar.p-avatar.p-component {
  display: block;
  width: 18px;
  height: 18px;
  float: left;
  text-align: center;
  padding: 0px;
}
p-avatar.userindicatornames {
  padding: 3px !important;
}
.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  float: left;
  margin-top: 3px;
  margin-right: 5px;
}
.idicatores .p-select-dropdown {
  display: none;
}
.idicatores p-select {
  text-align: center;
  padding: 0px;
  width: 20px;
  height: 20px;
  float: left; 
  border-radius: 100%;
  
}
/* userfiledradiusselct */
/* bootombar and selectbox css */
.common-actions{
  float: right;
  padding: 5px 5px;
  /* background: #31333a; */
  border-radius: 10px;
}
.common-actions i {
  font-size: 14px;
  margin-right: 5px;
}

.record-actions-users {
  float: right;
  padding-top:7px;
}

/* bootombar and selectbox css */
.sbrec {
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
  display: block;
}
.sbrec .status {
  display: inline-block;         /* Prevent character-by-character break */
  word-break: normal;
  overflow-wrap: break-word;     /* Break only if absolutely needed */
  white-space: normal;
}
.d-none{
  display: none;
}
.subappaddion {
  float: right;
  margin-top: -50px;
  margin-right: -10px;
}

button.startstoptime {
  margin-top: 0px;
  border-radius: 5px 0px 0px 5px;
  display: block;
  float: left;

}
button.timeshow  {
  margin-top: 0px;
  border-radius: 0px;
  font-size: 16px;
  float: left;
}
button.savetime  {
 
  margin-top: 0px;
  border-radius: 0px 5px 5px 0px;
  display: block;
  float: left;

}
.trakerstart {  
  border-radius: 0px 5px 5px 0px!important;
}

.record-cards p-accordion-header {
  padding: 0px;
}
.record-cards p-accordion-panel.p-accordionpanel {
  border: 0px;
}
.record-cards .p-accordioncontent-content {
  padding-bottom: 0px!important;
  padding-right: 0px!important; 
}

.d-none{
  display: none!important;
}
.p-drawer {
  margin-top: 70px!important;
  height: calc(100vh - 70px)!important;
  border: 0px!important;
}
body .p-toast-detail {
  color:rgb(5, 173, 75)!important;
}
body .p-toast-message-error .p-toast-detail {
  color:red!important;
}

.readonly {
 
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.5;
}
p-stepper {
  display: grid!important;
}

.p-steppanel-content{
  display: grid!important;
}
.ql-editor::before {
  font-style: italic;
  opacity: 0.6;
}
.p-popover {
  z-index: 1000000000000000000000000 !important;
}
.p-menu-overlay {
  box-shadow: var(--t-menu-shadow);
  z-index: 10000000000000000000 !important;
}


p-toast {
  z-index: 100000000000000000 !important;
  position: absolute;
}
.errorcolor
{
  color: red;
}


.signup-button .p-button
{
  height: 50px;
  background-color: #007bff; 
  color: #fff!important;
}
.signup-button .p-button:hover
{
  height: 50px;
  background-color: #489cf6!important; 
  color: #fff!important;
}
.bg input
{
  border: 0px!important;
  background-color: #e1e0e0!important;
  color: #2a2626!important;
}
.rightlogin .p-button
{
 
  background-color: #007bff; 
  color: #fff!important;
  border-color: #007bff;
}
.rightlogin .p-button:hover
{ 
  background-color: #489cf6!important; 
  color: #fff!important;
  border-color: #007bff!important;
}
.comment-box img {
  max-width: 100%!important;
} 
.capsule  p-multiselect {
  border-radius: 40px;
  border: 0px;
  min-width: 108px;
}
.capsule .p-multiselect-chip {
  border-radius: 40px;
}
.followdata .p-datepicker,.followtime .p-datepicker {    
  width: 100%!important;
}
.checklist-container .p-accordionpanel
{
  border: 1px solid var(--t-surface-800)!important;
}
p-button.readallnot {
  font-size: 10px !important;
  float: right;
  /* height: 29px; */
}
.readallnot .p-button {
  font-size: 11px;
  padding: 6px;
  margin-top: -6px;
  margin-right: -8px;
}
.p-tooltip
{
  z-index: 10000000000000000!important;
} 

.hedericons button.p-ripple.p-button {
  width: 30px;
  height: 30px;
  font-size: 10px;
}
.header_box  {
  justify-content: left!important;
}
.searchbox {
  justify-content: right!important;
  width: 230px;
}
.searchbox button.p-togglebutton {
  height: 30px;
  margin-right: 10px;
  font-weight: 200;
  padding: 13px;
  border-radius: 100px;
}

.searchbox input.p-inputtext {
  border-radius: 100px;
}
.hedericons button.p-ripple.p-button  span.pi {
  font-size: 12px;
}
.filterboxwithname {

  border-radius: 100px;
  padding: 5px;
}

.common-actions.timo,.common-actions.etimo {
  margin-left: 5px;
  border-radius: 35px;
  font-size: 12px;
  margin-top: 4px;
}
.common-actions.timo i , .common-actions.etimo i
{
font-size: 10px!important;
}
body .p-toast {
  z-index: 10000000000000000 !important;
}


p-dialog {
  z-index: 9999999999999999999 !important;
  position: fixed;
}
.p-overlaypanel {
  z-index: 99999999999999 !important;
}
p-overlay { 
  z-index: 99999999999999999999999999999999999999 !important;
}
.p-dialog
{
  overflow: auto!important;
  display: block!important;
}
.statastic {
  display: flex  ;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.addgroup button  {
  height: 25px!important;
  width: 25px!important;
  float: right!important;
}
.p-dialog-header {
  padding: 0px 11px!important;
  font-size: 15px;
}

.profile-header {
  position: relative;
  
  flex-direction: column;
  align-items: center;
}

.profile-image {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid #007ad9;
  display: block;
  margin: 0 auto;
}

.upload-btn {
  bottom: 10px!important;
  right: 129px!important;
  background: white!important;
  border: 2px solid #007ad9!important;
  color: #007ad9!important;
  width: 39px!important;
  top: 0px!important;
  position: absolute!important;
}
.addgroup button .pi {
  font-size: 11px!important;
}

.p-overlay {
 
  z-index: 99999999999999999999 !important;
}



















img.logo {
  position: absolute;
  bottom: 20px;
}
.headerbrancumes {
  float: left;
  padding: 7px 10px 8px 10px;
}

body {
  font-family: "Roboto", sans-serif;
  padding: 0px;
  margin: 0px;
}
ul.manue {
  list-style: none;
  padding: 0;
  margin: 10px;
}
li.menuli {
  padding: 12px 12px;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  margin-top: 10px; 
  margin-bottom: 10px;
}
li.menuli:hover {
 background-color: var(--t-primary-400);
 color:var(--t-surface-900);
}
li.active {
  background-color: var(--t-primary-400);
  color:var(--t-surface-900);
 }
.menuli i.pi {
  font-size: 18px;

}


.bg {
  height: 100vh;
  overflow: hidden;
  background-image: url('../../images/bg2.jpg');
}

.page-container {
  padding-left: 70px;
  padding-top: 70px;
  padding-right: 70px;
  height: 100vh;
  position: fixed;
  width: 100%;
}
.header {
  height: 70px;
 
  position: fixed;
  width: 100%;
  z-index: 1;
  box-shadow: var(--card-box-shadow);
  padding: 0px 70px;
  z-index: 100000;
}
.sidebar {
  width: 70px;
 
  height: 100%;

  box-shadow: var(--shadow-2);
  position: fixed;
  overflow-y: auto;
  z-index: 1000000;
  box-shadow: var(--card-box-shadow);
}
.right-sidebar {
  width: 70px;

  height: 100%;
  overflow-y: auto;
  position: fixed;
  right: 0;
  box-shadow: var(--card-box-shadow);
  z-index: 100000000000;
}
.footer {
  height: 50px;

  position: fixed;
  align-items: center;
  justify-content: center;
  width: 100%;
  bottom: 0;
}
.footer p {
  text-align: center;
}
.sidemenu .p-menu {
  border: 0px !important;
  min-width: 0px !important ;
}
.sidemenu .p-menu-item {
  padding: 12px 10px;
  font-size: 20px;
}
.sidemenu .pi {
  font-size: 18px;
}
.closeButton {
  margin-left: -48px;
  margin-top: -3px;
  
  z-index: 1;
  position: fixed;
  border-radius: 25px 0px 0px 23px;
  width: 28px;
}
.closeButton:hover {
  margin-left: -48px;
  margin-top: -3px;

  z-index: 1;
  position: fixed;
  border-radius: 25px 0px 0px 23px;
  width: 28px;
}
.closeButton .p-button-text.p-button-secondary {
  margin-left: -5px;
}
.p-drawer-header {
  display: flex;
  align-items: center;
  position: absolute;
}
a {
  text-decoration: none;
}
nav.p-breadcrumb.p-component {
  padding: 0px !important;
}
.text-center {
  text-align: center;
}
.p-paginator {
  justify-content: flex-end !important;
}

.closeButton .p-button-text.p-button-secondary:not(:disabled):hover {
  background: transparent;
  border-color: transparent;
}

.header_box {
  width: 20%;
  float: left;
  display: block;
  border: 0px solid;
}

.page-header {
  display: block;
  width: 100%;
}

.header_box.hedericons {
  text-align: right;
}
.inner-container {
  padding: 0px 20px;
}
.hedericons p-button {
  margin-left: 10px;
}
.submitbutton {
  text-align: center;
  padding: 20px;
}
.table-container {
  width: 100%;
  overflow-x: auto;
}

.custom-table .p-datatable-table-container {
  overflow: unset !important;
}

body .p-drawer-content {
  padding: 0 !important;
}
p-password {
  width: 100% !important;
  display: block !important;
}
.p-password {
  width: 100% !important;
}
.p-password input.p-input {
  width: 100% !important;
}
p-button.login-button {
  width: 100% !important;
}
.login-button button.p-ripple.p-button.p-component {
  width: 100% !important;
}
.p-card {
  padding: 10px !important;
}
.user-header .p-chip {
  background: none !important;
}

.record-content {
  display: block;
  width: 100%; /* Ensures full width */
  justify-content: space-between;
  padding: 5px;

  border-radius: 5px;
  margin-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
  height: 40px;
}


.record-field {
  flex: 1; /* ✅ Equal width distribution */
  text-align: left; /* ✅ Center the text */

  white-space: nowrap; /* ✅ Prevents text wrapping */
  font-size: 14px;
 
}

.record-actions {
  flex: 0.5; /* ✅ Actions column takes less space */
  text-align: right;
  padding-right: 20px;
}

.loading-spinner {
  text-align: center;
  width: 100px;
  margin: 0 auto;
}

.record-header {
  display: flex;
  width: 100%; /* Ensures full width */
  justify-content: space-between;
  padding: 5px;
  font-weight: bold;
  border-radius: 8px;
}

.header-item {
  flex: 1; /* ✅ Equal width distribution */
  text-align: left; /* ✅ Center the text */
  padding: 10px;
  white-space: nowrap; /* ✅ Prevents text wrapping */
  font-size: 13px;
}

.actions-header {
  flex: 0.5; /* ✅ Actions column takes less space */
  text-align: right;
}
.p-progressspinner-spin {
  height: 72% !important;
  width: 44% !important;
}
.estimationlist,
.estimationlist .p-button {
  border-radius: 5px 0px 0px 5px;
}
.estimationpluse,
.estimationpluse .p-button {
  border-radius: 0px 5px 5px 0px;
}
app-timo {
  width: 280px;
  display: flex;
}

.child-app-container {
  padding: 10px;
  border-radius: 10px;
}


.record-field {
  padding: 6px 8px 2px 6px;
}

.no-records.ng-star-inserted {
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  margin-top: 15px;
}


.p-scrollpanel {
  width: 100%!important;
}
.p-drawer-right {
  right: 70px!important;
 
}

/* Global scrollbar styles */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
  &:hover {
    background: #555;
  }
}

/* Firefox scrollbar */
* {
  scrollbar-width: none;
  scrollbar-color: #888 var(--t-surface-900);
}

/* Optional: For specific containers that need custom scrollbar */
.custom-scroll {
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    &:hover {
      background: rgba(0, 0, 0, 0.3);
    }
  }

  scrollbar-width: none;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.p-drawer-content {
  overflow-x: hidden;
}



/* toopbar and bottombar of layoutes userfiledradiusselct */
.userfiledradiusselct {
  border: 0px!important ;
  background: none!important;
  width: auto!important;
  margin-left: 17px;
}
.userfiledradiusselct .p-chip-label{
  width: 26px;
  overflow: hidden;
} 
.userfiledradiusselct .p-multiselect-label-container {
  display: none;
}
.userbox{
  float: left;
  margin-right: -12px;
}
.userfiledradiusselct .p-multiselect-dropdown {
  padding: 5px;
  border: 1px solid;
  border-radius: 100%;
  width: 20px;
  height: 20px;
}

.userbox  p-avatar.p-avatar.p-component {
  width: 20px;
  height: 20px;
}

.idicatores .p-select-dropdown {
  display: none;
}
.idicatores span.p-select-label.ng-star-inserted {
  padding: 0px 3px;
}


.userindicatoresstatus p-avatar.p-avatar.p-component {
  display: block;
  width: 18px;
  height: 18px;
  float: left;
  text-align: center;
  padding: 0px;
}
p-avatar.userindicatornames {
  padding: 3px !important;
}
.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  float: left;
  margin-top: 3px;
  margin-right: 5px;
}
.idicatores .p-select-dropdown {
  display: none;
}
.idicatores p-select {
  text-align: center;
  padding: 0px;
  width: 20px;
  height: 20px;
  float: left; 
  border-radius: 100%;
  
}
/* userfiledradiusselct */
/* bootombar and selectbox css */
.common-actions{
  float: right;
  padding: 5px 5px;
  /* background: #31333a; */
  border-radius: 10px;
}
.common-actions i {
  font-size: 14px;
  margin-right: 5px;
}

.record-actions-users {
  float: right;
  padding-top:7px;
}

/* bootombar and selectbox css */
.sbrec {
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
  display: block;
}
.sbrec .status {
  display: inline-block;         /* Prevent character-by-character break */
  word-break: normal;
  overflow-wrap: break-word;     /* Break only if absolutely needed */
  white-space: normal;
}
.d-none{
  display: none;
}
.subappaddion {
  float: right;
  margin-top: -50px;
  margin-right: -10px;
}

button.startstoptime {
  margin-top: 0px;
  border-radius: 5px 0px 0px 5px;
  display: block;
  float: left;

}
button.timeshow  {
  margin-top: 0px;
  border-radius: 0px;
  font-size: 16px;
  float: left;
}
button.savetime  {
 
  margin-top: 0px;
  border-radius: 0px 5px 5px 0px;
  display: block;
  float: left;

}
.trakerstart {  
  border-radius: 0px 5px 5px 0px!important;
}

.record-cards p-accordion-header {
  padding: 0px;
}
.record-cards p-accordion-panel.p-accordionpanel {
  border: 0px;
}
.record-cards .p-accordioncontent-content {
  padding-bottom: 0px!important;
  padding-right: 0px!important; 
}

.d-none{
  display: none!important;
}
.p-drawer {
  margin-top: 70px!important;
  height: calc(100vh - 70px)!important;
  border: 0px!important;
}
body .p-toast-detail {
  color:rgb(5, 173, 75)!important;
}
body .p-toast-message-error .p-toast-detail {
  color:red!important;
}

.readonly {
 
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.5;
}
p-stepper {
  display: grid!important;
}

.p-steppanel-content{
  display: grid!important;
}
.ql-editor::before {
  font-style: italic;
  opacity: 0.6;
}
.p-popover {
  z-index: 1000000000000000000000000 !important;
}
.p-menu-overlay {
  box-shadow: var(--t-menu-shadow);
  z-index: 10000000000000000000 !important;
}


p-toast {
  z-index: 100000000000000000 !important;
  position: absolute;
}
.errorcolor
{
  color: red;
}


.signup-button .p-button
{
  height: 50px;
  background-color: #007bff; 
  color: #fff!important;
}
.signup-button .p-button:hover
{
  height: 50px;
  background-color: #489cf6!important; 
  color: #fff!important;
}
.bg input
{
  border: 0px!important;
  background-color: #e1e0e0!important;
  color: #2a2626!important;
}
.rightlogin .p-button
{
 
  background-color: #007bff; 
  color: #fff!important;
  border-color: #007bff;
}
.rightlogin .p-button:hover
{ 
  background-color: #489cf6!important; 
  color: #fff!important;
  border-color: #007bff!important;
}
.comment-box img {
  max-width: 100%!important;
} 
.capsule  p-multiselect {
  border-radius: 40px;
  border: 0px;
  min-width: 108px;
}
.capsule .p-multiselect-chip {
  border-radius: 40px;
}
.followdata .p-datepicker,.followtime .p-datepicker {    
  width: 100%!important;
}
.checklist-container .p-accordionpanel
{
  border: 1px solid var(--t-surface-800)!important;
}
p-button.readallnot {
  font-size: 10px !important;
  float: right;
  /* height: 29px; */
}
.readallnot .p-button {
  font-size: 11px;
  padding: 6px;
  margin-top: -6px;
  margin-right: -8px;
}
.p-tooltip
{
  z-index: 10000000000000000!important;
} 

.hedericons button.p-ripple.p-button {
  width: 30px;
  height: 30px;
  font-size: 10px;
}
.header_box  {
  justify-content: left!important;
}
.searchbox {
  justify-content: right!important;
  width: 230px;
}
.searchbox button.p-togglebutton {
  height: 30px;
  margin-right: 10px;
  font-weight: 200;
  padding: 13px;
  border-radius: 100px;
}

.searchbox input.p-inputtext {
  border-radius: 100px;
}
.hedericons button.p-ripple.p-button  span.pi {
  font-size: 12px;
}
.filterboxwithname {

  border-radius: 100px;
  padding: 5px;
}

.common-actions.timo,.common-actions.etimo {
  margin-left: 5px;
  border-radius: 35px;
  font-size: 12px;
  margin-top: 4px;
}
.common-actions.timo i , .common-actions.etimo i
{
font-size: 10px!important;
}
body .p-toast {
  z-index: 10000000000000000 !important;
}


p-dialog {
  z-index: 9999999999999999999 !important;
  position: fixed;
}
.p-overlaypanel {
  z-index: 99999999999999 !important;
}
p-overlay { 
  z-index: 99999999999999999999999999999999999999 !important;
}
.p-dialog
{
  overflow: auto!important;
  display: block!important;
}
.statastic {
  display: flex  ;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.addgroup button  {
  height: 25px!important;
  width: 25px!important;
  float: right!important;
}
.p-dialog-header {
  padding: 0px 11px!important;
  font-size: 15px;
}

.profile-header {
  position: relative;
  
  flex-direction: column;
  align-items: center;
}

.profile-image {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid #007ad9;
  display: block;
  margin: 0 auto;
}

.upload-btn {
  bottom: 10px!important;
  right: 129px!important;
  background: white!important;
  border: 2px solid #007ad9!important;
  color: #007ad9!important;
  width: 39px!important;
  top: 0px!important;
  position: absolute!important;
}
.addgroup button .pi {
  font-size: 11px!important;
}

.p-overlay {
 
  z-index: 99999999999999999999 !important;
}






.p-drawer {
  width: 70%; /* Default width for larger screens */
}

/* Media query for tablet screens */
@media (max-width: 1400px) {
  .p-drawer {
    width: 85%; /* Set to 90% width on tablets */
  }
  .subappinput {
    width: 92%!important;   
}
.appchatusers { 
  width: 85%!important;

}
.chatmain-container { 
  margin: 10px auto 0 2%!important;
  height: 70vh!important;
  width: 96%!important;
}
.appchatusers .closechat {
 
  right: 85%!important;
}
}

@media (max-width: 950px) { 
  .chatmain-container {
    margin: 10px auto 0 2%!important;
    height: 70vh!important;
    width: 96%!important;
}
.appchatusers {
  width: 85%!important;
 
}
.appchatusers .closechat {
 
  right: 85%!important;
}
}