@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;800;900&display=swap");
/* @import url("../font/Trebuchet-MS-Italic.ttf"); */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap");

:root {
  /* Font Families */
  --Poppins: "Poppins", sans-serif;
  --Inter: "Inter", sans-serif;
  --Montserrat: "Montserrat", sans-serif;
  --Trebuchet: "Trebuchet MS", sans-serif;
  --Roboto: "Roboto", sans-serif;
  /* Color's */
  --clr-white: #fff;
  --clr-black: #000;
  --clr-purpleHeart: #7c34ff;
  --clr-laPalma: #16aa25;
  --clr-RedicalRed: #f93055d4;
  --clr-RedRibbon: #f31629;
  --clr-MineShaft: #383838;
  --clr-FuelYellow: #efa433;
  --clr-AzureRadiance: #097de9;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

@media only screen and (max-width: 1370px) {
  html {
    font-size: 15px;
  }
}

@media only screen and (max-width: 992px) {
  html {
    font-size: 14px;
  }
}

@media only screen and (max-width: 768px) {
  html {
    font-size: 13px;
  }
}

@media only screen and (max-width: 576px) {
  html {
    font-size: 12px;
  }
}

body {
  font-family: var(--Poppins);
  font-weight: 400;
  /* color: #383838; */
}

.max-width {
  max-width: 1820px;
  margin: auto;
}
.max-width-2 {
  max-width: 1320px;
  margin: auto;
}
/* Custom Tag */
.Label {
  font-size: 0.85rem;
  display: inline-block;
}
.Textarea,
.Select {
  background: #ffffffb2;
  border-radius: 16px;
  border: none;
  resize: none;
}
.Textarea:focus-visible,
.Select:focus-visible {
  outline: none;
}
.Input {
  background: #ffffffb2;
  border-radius: 16px;
  border: none;
}
.Input:focus,
.Textarea:focus {
  outline: none;
  box-shadow: none;
}
.Input::placeholder,
.Textarea::placeholder {
  color: #38383866;
}
.Button {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}
.Button:focus {
  outline: none;
}
a {
  text-decoration: none;
}
input[type="checkbox"] {
  width: 14px; /* Adjust the size of the pseudo-element */
  height: 14px;
  border: 1px solid rgba(169, 169, 169, 0.704);
  border-radius: 4px;
  accent-color: var(--clr-purpleHeart);
}
input[type="checkbox"]:focus {
  box-shadow: none;
}

/* Custom Class */
.main-wrapper {
  background: #ffffff7a;
  border: 1px solid #7c34ff1a;
  padding: 1.5rem 2rem;
  border-radius: 20px;
}
.wrapper {
  background: rgba(255, 255, 255, 0.6);
  padding: 1rem;
  border-radius: 16px;
}
.BorderBottom {
  border-bottom: 0.91px solid #a9a9a933;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.test-ellipsis {
  white-space: nowrap;
  overflow: hidden; 
  text-overflow: ellipsis; 
  width: 220px;
}
.ellipsis-two-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis-three-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
/******************** Scroll Bar Design ******************/
.DataTableWrap .dt-layout-full::-webkit-scrollbar {
  height: 6px;
}

.mainWrapper::-webkit-scrollbar,
.showConflictDetails::-webkit-scrollbar,
.EngagementStages::-webkit-scrollbar {
  width: 6px;
}
.EngagementStages::-webkit-scrollbar {
  height: 4px;
}
.StepStageWrapMain::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.DataTableWrap .dt-layout-full::-webkit-scrollbar-track,
.showConflictDetails::-webkit-scrollbar-track,
.mainWrapper::-webkit-scrollbar-track,
.StepStageWrapMain::-webkit-scrollbar-track,
.EngagementStages::-webkit-scrollbar-track {
  background: transparent;
}
.DataTableWrap .dt-layout-full::-webkit-scrollbar-thumb,
.mainWrapper::-webkit-scrollbar-thumb,
.StepStageWrapMain::-webkit-scrollbar-thumb,
.EngagementStages::-webkit-scrollbar-thumb {
  background: #dee2e670;
  border-radius: 8px;
}
.DataTableWrap .dt-layout-full::-webkit-scrollbar-thumb:hover,
.mainWrapper::-webkit-scrollbar-thumb:hover,
.StepStageWrapMain::-webkit-scrollbar-thumb:hover,
.EngagementStages::-webkit-scrollbar-thumb:hover {
  background: #dee2e670;
}

/* Modal Scrollbar */
.showConflictDetails::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: #abafb170;
}
.showConflictDetails::-webkit-scrollbar-thumb:hover {
  background: #abafb170;
}