/* ---------------------------- [ Font Families ] --------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

/* -------------------------- [Global CSS Classes] -------------------------- */


/* ----- Table Req No Tags ----- */
.no_tag {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 5px;
  width: 4.5rem;
  padding: 1px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.inactive.no_tag {
  background-color: #dfdfdf;
  color: #808080;
}

.open.no_tag {
  background-color: #e4ecff;
  color: #3448ad;
}

.in_review.no_tag {
  background-color: #fff0c4;
  color: #e0a823;
}

.complete.no_tag {
  background-color: #cbf7e5;
  color: #3b979b;
}

/* ----- Cases Tags ----- */
.case_tag {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 5px;
  max-width: 5rem;
  padding: 2px 10px;
  font-weight: 600;
  font-size: 0.8rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.case_tag.Draft,
.case_tag.draft {
  background-color: #dfdfdf;
  color: #808080;
}

.case_tag.Active,
.case_tag.active {
  background-color: #e4ecff;
  color: #3448ad;
}

.case_tag.Archived,
.case_tag.archived {
  background-color: #fff0c4;
  color: #e0a823;
}

/* ----- Requests Tags ----- */
.req_tag {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 5px;
  max-width: 5rem;
  padding: 2px 10px;
  font-weight: 600;
  font-size: 0.8rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.req_tag.Open,
.req_tag.open {
  background-color: #e4ecff;
  color: #3448ad;
}

.req_tag.Inactive,
.req_tag.inactive {
  background-color: #dfdfdf;
  color: #808080;
}

.req_tag.Review,
.req_tag.review,
.req_tag.in_review {
  background-color: #fff0c4;
  color: #e0a823;
}

.req_tag.Complete,
.req_tag.complete {
  background-color: #cbf7e5;
  color: #3b979b;
}

/* ----- Dashboard Inc Dec Tags ----- */
.Increase {
  background-color: #d8f3e8;
  color: #3b979b;
  fill: #3b979b;
}

.Decrease {
  background-color: #fddad8;
  color: #cb322a;
  fill: #cb322a;
}

/* ----- Queries Table Tags ----- */
.queries_cont .answered,
.queries_cont .pending,
.queries_cont .closed,
.queries_cont .Answered,
.queries_cont .Pending,
.queries_cont .Closed {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 4px;
  /* width: 4rem; */
  padding: 2px 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 0.6rem;
  text-transform: uppercase;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.queries_cont .answered,
.queries_cont .Answered {
  color: #ffffff;
  background-color: #2e69f0;
}

.queries_cont .pending,
.queries_cont .Pending {
  color: #ffffff;
  background-color: #6e737d;
}

.queries_cont .closed,
.queries_cont .Closed {
  color: #ffffff;
  background-color: #3e8255;
}

.queries_cont .prevent-collapse:focus {
  outline: none;
  box-shadow: none;
}

/* ----- Teams Role Tags ----- */
.admin.role,
.role {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 2px solid #e0a823;
  border-radius: 5px;
  /* width: 4rem; */
  padding: 4px 10px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.dataTable tbody tr td p.admin.role {
  background-color: #e0a823;
  color: #000000;
}

.dataTable tbody tr td p.role {
  border-color: #e0a823;
  color: #e0a823;
}


/* .dataTable tbody tr td p.Open,
p.Open,
p.open,
.open,
.Draft,
.draft {
  background-color: #e4ecff;
  color: #3448ad;
} */

/* .dataTable tbody tr td p.Review,
p.Review,
p.review,
.in_review,
.review,
.Archived,
.archived {
  background-color: #fff0c4;
  color: #e0a823;
} */

/* .dataTable tbody tr td p.Complete,
p.Complete,
p.complete,
.complete,
.Active,
.active,
.Answered {
  background-color: #cbf7e5;
  color: #3b979b;
} */


/* .dataTable tbody tr td p.Inactive,
p.Inactive,
p.inactive,
.inactive,
.Inactive,
.inactive {
  background-color: #dfdfdf;
  color: #808080;
} */

/* .dataTable tbody tr td p.Open,
p.Open,
p.open,
.open,
.Draft,
.draft {
  background-color: #e4ecff;
  color: #3448ad;
} */

/* .dataTable tbody tr td p.Review,
p.Review,
p.review,
.in_review,
.review,
.Archived,
.archived {
  background-color: #fff0c4;
  color: #e0a823;
} */

/* .dataTable tbody tr td p.Complete,
p.Complete,
p.complete,
.complete,
.Active,
.active,
.Answered {
  background-color: #cbf7e5;
  color: #3b979b;
} */

/* .dataTable tbody tr td p.Returned,
p.Returned,
p.returned,
.returned,
.Returned,
.returned,
.Not-Answered {
  background-color: #fddad8;
  color: #cb322a;
} */


/* .Draft,
.Archived,
.Active,
.draft,
.archived,
.active,
.status_tag,
.in_review,
.Answered,
.Not-Answered,
.Admin.role,
.role { */
/* display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 5px; */
/* width: 4rem; */
/* padding: 2px 10px;
  font-weight: 600;
  font-size: 0.8rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */
/* } */

/* .dataTable tbody tr td p.Assigned {
  color: #5848ad;
} */

/* .dataTable tbody tr td p.Overdue {
  color: #e0a823;
} */

/* .dataTable tbody tr td p.Returned {
  color: #ff0000;
} */



/* .dataTable tbody tr td p.Inactive,
.dataTable tbody tr td p.inactive,
.dataTable tbody tr td p.Open,
.dataTable tbody tr td p.open,
.dataTable tbody tr td p.Review,
.dataTable tbody tr td p.review,
.dataTable tbody tr td p.Complete,
.dataTable tbody tr td p.complete,
.Inactive,
.inactive,
.Open,
.open,
.Review,
.review,
.in_review,
.Complete,
.complete,
.Returned,
.returned {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 5px;
  width: 4.5rem;
  padding: 1px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
} */




/* ------------------------------------------------ [ Global CSS ] ---------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  text-decoration: none;
  font-family: "Manrope", sans-serif;
}

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

*>img {
  user-select: none;
  pointer-events: none;
  display: inline-block;
}

*,
*:focus,
*:active {
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
  display: inline-block;
}

li {
  list-style: none;
}

body {
  overflow-x: hidden !important;
  /* overflow: hidden !important; */
  scroll-behavior: smooth;
}

/* Hide scrollbar */
.hide-scrollbar {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Horizontal Scrollbar Style */

.horizontal_scroll_style::-webkit-scrollbar-track {
  border-radius: 1rem;
  background-color: var(--color-scrollbar-track);
}

.horizontal_scroll_style::-webkit-scrollbar {
  width: 0.7rem;
  height: 1.4rem;
  background-color: transparent;
}

.horizontal_scroll_style::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background-color: var(--color-scrollbar-thumb);
}

/* Vertical Scrollbar Style */

.vertical_scroll_style_1::-webkit-scrollbar-track {
  border-radius: 0 1rem 1rem 0;
  background-color: var(--color-ghostwhite);
}

.vertical_scroll_style_1::-webkit-scrollbar {
  width: 1.4rem;
  height: 0.7rem;
  background-color: transparent;
}

.vertical_scroll_style_1::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background-color: var(--color-ashes);
}


/* ----------------------- [ Pages & Components CSS ] ----------------------- */

/* ---------- Login & Signup page ---------- */

/* input floating-label */
.floating-label {
  transform: translateY(0);
  transition: all 0.2s ease-in-out;
}

input:focus~.floating-label,
input:not(:placeholder-shown)~.floating-label {
  transform: translateY(-1.25rem);
  font-size: 0.75rem;
  color: #10b981;
  /* bg-green-500 */
}

/* ---------- Excel-Preview-Style ---------- */

/* Excel Viewer CSS */
#excel-table {
  border-collapse: collapse;
  width: 10rem;
  font-family: Arial, sans-serif;
  overflow: scroll;
}

#excel-table th {
  min-width: 2rem;
  padding: 8px;
  text-align: center;
}

#excel-table td {
  min-width: 10rem;
  padding: 8px;
  text-align: start;
  font-size: 1rem;
}

#excel-table .row-header {
  font-weight: bold;
}

#excel-table .col-header {
  font-weight: bold;
}

#excel-table .empty-cell {}

/* ---------- Settings page ---------- */
#theme-selector {
  width: 10rem;
}

#theme-selector::-webkit-scrollbar {
  width: 10px;
}

#theme-selector::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

/* Custom radio buttons */
#settings [type="radio"]:checked,
#settings [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

#settings [type="radio"]:checked+label,
#settings [type="radio"]:not(:checked)+label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
}

#settings [type="radio"]:checked+label:before,
#settings [type="radio"]:not(:checked)+label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid black;
  border-radius: 100%;
  background: #fff;
}

#settings [type="radio"]:checked+label:after,
#settings [type="radio"]:not(:checked)+label:after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: black;
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#settings [type="radio"]:not(:checked)+label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

#settings [type="radio"]:checked+label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* ---------- DataTables CSS ---------- */

/* ----- Common CSS ----- */
.main_datatable_container {
  position: relative !important;
}

/* Table Wrapper CSS */
.dataTables_wrapper {
  /* *----- CCD-16 - ORG OLD CODE -----* */
  /* margin-top: 2.5rem; */
  width: 100%;
  overflow-x: auto;
}

/* *----- CCD-16 - ORG NEW CODE -----* */
#draft_datatable_wrapper,
#active_datatable_wrapper,
/* #archived_datatable_wrapper, */
#all_requests_datatable_wrapper,
#client_datatable_wrapper,
#teams_datatable_wrapper {
  margin-top: 1.5rem;
}

#request_datatable_wrapper {
  margin-top: 1.5rem;
  padding-top: 3.5rem;
}

.dataTables_wrapper::-webkit-scrollbar-track {
  border-radius: 1rem;
  background-color: var(--color-scrollbar-track);
}

.dataTables_wrapper::-webkit-scrollbar {
  width: 0.7rem;
  height: 1.4rem;
  background-color: transparent;
}

.dataTables_wrapper::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background-color: var(--color-scrollbar-thumb);
}

/* Table Search Filter CSS */
#draft_datatable_filter,
#active_datatable_filter,
/* #archived_datatable_filter, */
#all_requests_datatable_filter,
#client_datatable_filter {
  width: 20%;
  position: absolute;
  top: 0px;
  right: 0rem;
}

/* *----- CCD-16 - ORG NEW CODE -----* */
#request_datatable_filter {
  width: 25rem;
  position: absolute;
  top: 0.1rem;
  left: 0;
}

#teams_datatable_filter {
  width: 25rem;
}

/* *----- CCD-16 - ORG NEW CODE -----* */
@media (max-width: 638px) {
  #request_datatable_filter {
    width: 100%;
    position: absolute;
    top: 4.5rem;
  }

  #teams_datatable_filter {
    width: 100%;
  }
}

.dataTables_filter label {
  width: 100% !important;
}

.dataTables_filter input {
  width: 100% !important;
  text-align: start;
  background-color: transparent;
  width: 20rem;
  padding: 10px 15px;
  border-radius: 6px;
}

.dataTables_filter input::placeholder {
  font-size: 14px;
}

.dataTables_filter input::-webkit-outer-spin-button,
.dataTables_filter input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dataTables_filter input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

/* *----- CCD-16 - ORG OLD CODE -----* */
/* #request_datatable_filter {
  right: 3rem;
} */

/* Table CSS */
.dataTable {
  width: 100% !important;
  height: 10rem;
  overflow-x: auto !important;
  white-space: nowrap;
  /* *----- CCD-16 - ORG NEW CODE -----* */
  margin-top: 1.5rem;
}


.dataTable tbody tr:hover {
  cursor: pointer;
}

/* Individual Column */
*[aria-label*="Name"] {
  max-width: 40rem !important;
  min-width: 15rem !important;
}


/* thead */
.dataTable thead tr th {
  padding: 20px 16px !important;
  text-align: start;
  font-size: 14px;
  font-weight: 500;
}

/* tbody */
.dataTable tbody tr td {
  padding: 20px 16px !important;
  text-align: start;
  font-size: 13px;
  font-weight: 500;
}

/* Table length, info, paginate CSS */
.dataTables_length {
  position: absolute;
  left: 0;
  z-index: 1;
  bottom: -60px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.dataTables_length select {
  margin-left: 5px;
  border-radius: 6px;
  padding: 5px;
}

.dataTables_info {
  position: absolute;
  bottom: -95px;
  width: 100%;
  height: 4rem;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: top;
  gap: 0.2rem;
  font-size: 14px;
  font-weight: 500;
}

.dataTables_paginate {
  position: absolute;
  bottom: -60px;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.dataTables_paginate .paginate_button.previous {
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  padding: 7px 18px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

.dataTables_paginate .paginate_button.previous::before {
  content: "\f060";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  position: relative;
  top: 1.5px;
}

.dataTables_paginate .paginate_button.next {
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  padding: 7px 18px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

.paginate_button.next::after {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  position: relative;
  top: 1.5px;
}

/* Table empty */
.dataTables_empty {
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* ----- Column Status column css ----- */

.dataTable tbody tr td.name_td p:nth-child(2) {
  font-size: 12px;
  color: #808080;
  max-width: 30rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- Responsiveness ----- */

@media (max-width: 1200px) {
  .main_datatable_container {
    position: none !important;
  }

  .datatable_rel_cont {
    position: relative !important;
  }

  /* *----- CCD-16 - ORG OLD CODE -----* */
  /* .dataTable {
    margin-top: 4.5rem;
  } */

  /* *----- CCD-16 - ORG NEW CODE -----* */
  #draft_datatable,
  #active_datatable,
  /* #archived_datatable, */
  #all_requests_datatable,
  #client_datatable {
    margin-top: 4.5rem;
  }

  /* *----- CCD-16 - ORG OLD CODE -----* */
  /* .dataTables_filter {
    width: 100%;
  } */

  /* *----- CCD-16 - ORG NEW CODE -----* */
  #draft_datatable_filter,
  #active_datatable_filter,
  /* #archived_datatable_filter, */
  #all_requests_datatable_filter,
  #client_datatable_filter {
    width: 100%;
  }

  /* *----- CCD-16 - ORG OLD CODE -----* */
  /* #request_datatable_filter {
    right: 0rem;
  } */
}

@media (max-width: 880px) {
  .dataTables_length {
    width: 100%;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2;
  }

  .dataTables_info {
    bottom: -135px;
  }

  .dataTables_paginate {
    right: initial;
    bottom: -100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}

@media (max-width: 400px) {
  .dataTables_length {
    flex-direction: column;
    bottom: -95px;
  }

  .dataTables_info {
    bottom: -185px;
    left: 55%;
    transform: translateX(-50%);
  }

  .dataTables_paginate {
    right: initial;
    bottom: -150px;
  }
}