:root {
  --clr-accent: #a20d0d; /* Deep Red */

  --clr-accent-light: #ba3131;

  --clr-accent-lighter: #f0b2b2;

  --clr-accent-lightest: #f9e5e5;

  --clr-accent-dark: #7b0b0b;

  --clr-accent-darker: #4e0505;

  --clr-primary: #313131; /* Dark Gray */

  --clr-primary-light: #464646;

  --clr-primary-lightest: #eaeaea;

  --clr-primary-dark: #2c2c2c;

  --clr-primary-darker: #050505;

  --clr-secondary: #53b9c8; /* Beige */

  --clr-secondary-light: #98d5de;

  --clr-secondary-lighter: #eef8fa;

  --clr-secondary-dark: #4294a0;

  --clr-secondary-darker: #081214;

  --text-clr-gray-300: #7e90a1;

  --text-clr-gray-500: #4c5b69;

  --clr-offset: #03c988;

  --text-clr-gray-300: #7e90a1;

  --text-clr-gray-500: #4c5b69;

  --clr-gray-100: #f7f7f7;

  --clr-gray-200: #e7e7e7;

  --clr-gray-300: #dbdbdb;

  --clr-gray-400: #cfcfcf;

  --clr-gray-500: #c4c4c4;

  --clr-gray-600: #b8b8b8;

  --clr-gray-700: #acacac;

  --clr-gray-800: #a0a0a0;

  --clr-gray-900: #949494;

  --clr-gray-d100: #888888;

  --clr-gray-d200: #7a7a7a;

  --clr-gray-d300: #6d6d6d;

  --clr-gray-d400: #525252;

  --clr-gray-d500: #292929;

  --radius-100: 0.3rem;

  --radius-200: 0.5rem;

  --radius-400: 0.7rem;

  --radius-600: 0.9rem;

  --radius-800: 1.2rem;

  --radius-c100: 2rem;

  --radius-half: 50%;

  --font-primary: "Outfit", sans-serif;
}

* {
  scrollbar-color: #555 #fff;

  scrollbar-width: thin;
}

*,
*::after,
*::before {
  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

html {
  font-size: 62.5%;

  scroll-behavior: smooth;
}

input,
button {
  font: inherit;

  display: inline-block;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48;

  opacity: 0;

  visibility: hidden;

  transition: all 300ms ease-in-out;
}

.material-symbols-outlined.show {
  opacity: 1;

  visibility: visible;
}

.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48;

  opacity: 0;

  visibility: hidden;

  transition: all 300ms ease-in-out;
}

a {
  display: inline-block;

  text-decoration: none;

  width: max-content;
}

img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;
}

h1,
h2,
h3 {
  max-width: 100%;

  letter-spacing: 0.1rem;

  color: var(--clr-primary-darker);

  width: max-content;

  font-weight: 4=600;
}

h4 {
  color: var(--clr-gray-d400);
}

p {
  font-size: 1.5rem;

  /* font-weight: 500; */

  color: var(--clr-gray-d300);

  line-height: 1.6;
}

li {
  color: var(--clr-gray-d300);
}

div {
  font-weight: 400;

  color: var(--text-clr-gray-500);
}

ul {
  list-style: none;

  font-size: 1.5rem;

  color: var(--clr-gray-d500);

  line-height: 1.6;
}

.cta {
  width: 15rem;

  min-height: 3.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  background-color: var(--clr-primary-lightest);

  color: var(--clr-primary);

  font-size: 1.6rem;

  position: relative;

  border-radius: var(--radius-c100);

  z-index: 1;

  overflow: hidden;

  transition: all 300ms ease-in-out;
}

.cta:hover {
  background-color: var(--clr-primary);

  color: white;
}

.cta-alt {
  min-width: 15rem;

  min-height: 3.5rem;

  padding: 0.4rem;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  border: 0.2rem solid var(--clr-accent-lightest);

  color: var(--clr-accent);

  font-size: 1.6rem;

  position: relative;

  border-radius: var(--radius-c100);

  z-index: 1;

  overflow: hidden;

  transition: all 300ms ease-in-out;
}

.cta-alt:hover {
  background-color: var(--clr-accent);

  color: white;
}

.note {
  display: flex;

  align-items: center;

  align-items: center;

  gap: 1rem;
}

.note.warning {
  color: #eb8317;
}

.note.success {
  color: #22a699;
}

.note.error {
  color: rgb(255, 0, 51);
}

.wrapper {
  width: 100%;

  display: flex;

  align-items: flex-start;
}

.back-btn {
  min-width: 15rem;

  min-height: 4rem;

  background-color: var(--clr-accent);

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.7rem;

  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;

  border-radius: var(--radius-400);

  transition: all 200ms ease-in-out;
}

.back-btn:hover {
  transform: translateY(-4%);
}

.clr-green {
  color: #59ce8f;
}

.clr-gray {
  color: var(--clr-gray-900);
}

.clr-red {
  color: #d4094d;
}

.clr-warning {
  color: #ff9100;
}

.bg-green {
  background-color: #59ce8f;
}

.bg-gray {
  background-color: var(--clr-gray-900);
}

.bg-red {
  background-color: #d4094d;
}

.m-1 {
  margin: 1rem;
}

.m-2 {
  margin: 2rem;
}

.m-3 {
  margin: 3rem;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.mv-1 {
  margin: 1rem 0;
}

.mv-2 {
  margin: 2rem 0;
}

.mv-3 {
  margin: 3rem 0;
}

.mh-1 {
  margin: 0 1rem;
}

.mh-2 {
  margin: 0 2rem;
}

.mh-3 {
  margin: 0 3rem;
}

.b-d2 {
  border-color: var(--clr-gray-400);
}

.w-50 {
  width: 50% !important;
}

.w-60 {
  width: 60% !important;
}

.w-70 {
  width: 70% !important;
}

.w-80 {
  width: 80% !important;
}

.heading {
  width: 100%;

  min-height: 6rem;

  border-radius: var(--radius-400);

  padding: 1rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background-color: var(--clr-gray-100);
}

.heading .links {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 1rem;
}

.heading .link {
  min-width: 10rem;

  height: 4rem;

  border: 0.1rem solid var(--clr-accent-darkest);

  color: var(--clr-accent-darkest);

  gap: 1rem;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 1rem;

  border-radius: 2rem;

  transition: all 300ms ease-in-out;

  border: 0.1rem solid var(--clr-gray-700);

  color: var(--text-clr-gray-500);
}

.heading .link:hover {
  background-color: var(--clr-accent-darker);

  color: white;
}

.spinner {
  width: 56px;

  height: 56px;

  border-radius: 50%;

  border: 9px solid;

  border-color: #f1f1fe;

  border-right-color: #ff6600;

  animation: spinner-d3wgkg 1s infinite linear;
}

@keyframes spinner-d3wgkg {
  to {
    transform: rotate(1turn);
  }
}

section {
  width: 100%;

  margin: 0 auto;

  min-height: 40vh;

  display: flex;

  align-items: center;

  padding: 6rem;
}

body {
  height: 100vh;

  font-family: var(--font-primary);

  font-size: 1.4rem;

  font-weight: 400;
}

body.modal-open {
  overflow: hidden;
}

form {
  width: 100%;

  max-width: 45rem;

  display: flex;

  flex-direction: column;

  gap: 1rem;

  /* z-index: 1; */

  padding: 2.5rem 4rem;

  position: relative;

  border-radius: var(--radius-400);

  /* box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; */

  position: relative;

  background-color: white;

  align-items: flex-start;
}

form .form-heading {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 1rem;

  margin-bottom: 2rem;
}

form .form-heading a {
  color: #3fa2f6;
}

form .form-heading a:hover {
  text-decoration: underline;
}

form .form-heading .row {
  width: 100%;

  display: flex;

  gap: 1rem;

  padding: 1rem;

  background-color: var(--clr-gray-100);

  border-radius: var(--radius-600);
}

form .form-heading .column {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;
}

form .form-heading .column div {
  display: flex;

  align-items: center;
}

form .form-heading .column div span:first-child {
  width: 7rem;

  font-weight: 600;
}

form .input-cluster {
  width: 95%;

  display: flex;

  flex-direction: column;

  align-self: flex-end;

  gap: 1.5rem;

  border-radius: var(--radius-200);

  background-color: #fbfbfb;
}

form .cluster-heading {
  width: 100%;

  height: 4rem;

  display: flex;

  align-items: center;

  color: #133e87;

  background-color: white;

  padding: 0 2rem;

  font-weight: 700;
}

form .form-group {
  width: 100%;

  display: flex;

  gap: 1rem;
}

form .input-group {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  position: relative;

  gap: 0.5rem;
}

form .input-group > label {
  color: var(--text-clr-gray-500);

  font-size: 1.5rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;
}

form .input-group label::first-letter {
  text-transform: uppercase;
}

form .input-group p {
  font-size: 1.3rem;

  padding-left: 1rem;
}

form .input-group .input-error {
  font-size: 1.3rem;

  color: #e72929;
}

form .input-group input,
form .input-group select,
form .input-group textarea {
  width: 100%;

  height: 4rem;

  border: 0.15rem solid var(--clr-gray-500);

  outline: 0.2rem solid transparent;

  padding: 0 1rem;

  transition: all 300ms ease-in-out;

  border-radius: var(--radius-200);

  font-size: 1.4rem;

  background-color: transparent;

  color: var(--text-clr-gray-500);
}

form .input-group input:hover,
form .input-group select:hover,
form .input-group textarea:hover {
  border-color: rgb(157, 193, 246);

  outline-color: rgb(216, 232, 255);
}

form .input-group input:focus,
form .input-group select:focus,
form .input-group textarea:focus {
  border-color: rgb(60, 133, 244);

  outline-color: rgb(186, 212, 248);
}

form .input-group input::placeholder {
  color: var(--clr-gray-700);
}

form .input-group input.error-border,
form .input-group select.error-border,
form .input-group textarea.error-border {
  border-color: #fc54a2;

  outline-color: #fee6f1;
}

form .input-group input.success-border,
form .input-group select.success-border,
form .input-group textarea.success-border {
  border-color: #77d970;
}

form .input-group input:read-only {
  border: none;

  outline: none;

  background-color: var(--clr-gray-200);
}

form .input-group textarea {
  max-width: 100%;

  min-height: 10rem;

  max-height: 30rem;
}

form .input-group input[type="file"]::file-selector-button {
  margin-right: 20px;

  border: none;

  margin-top: 0.8rem;

  background: var(--text-clr-gray-300);

  padding: 5px 10px;

  color: #fff;

  cursor: pointer;

  transition: background 0.2s ease-in-out;

  border-radius: var(--radius-200);

  font-size: 1.3rem;

  font-family: inherit;
}

form .input-group input[type="file"]::file-selector-button:hover {
  background: #0d45a5;
}

form .btn-group {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 1rem;
}

form .nice-select {
  width: 100%;

  height: 4rem !important;

  border-radius: var(--radius-200);

  border: 0.1rem solid var(--clr-gray-300);

  display: flex;

  align-items: center;
}

form button {
  width: 100%;

  height: 4rem;

  background-color: #133e87;

  border: none;

  outline: none;

  color: white;

  transition: all 300ms ease-in-out;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 2rem;

  border-radius: 2rem;

  margin: 2rem 0;

  position: relative;
}

form button:hover {
  opacity: 0.9;
}

button .btn-text {
  color: white;
}

button .btn-spinner {
  width: 2.6rem;

  height: 2.6rem;

  border-width: 0.4rem;

  position: absolute;

  right: 2rem;

  top: 0.8rem;

  display: none;
}

button .btn-spinner.show {
  display: flex;
}

.form-alt-link {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  color: var(--clr-accent);
}

form .show-password,
form .show-password-repeat {
  font-size: 1.4rem;

  text-transform: uppercase;

  color: #005899;

  cursor: pointer;
}

form .show-password:hover,
form .show-password-repeat:hover {
  text-decoration: underline;
}

/* IMAGE PREVIEWS */

.img-previews {
  width: 100%;

  height: 10rem;

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;

  overflow: auto;

  padding: 0.5rem;

  border-radius: var(--radius-600);
}

.img-previews .note {
  border-radius: var(--radius-600);
}

.img-previews .note.hide {
  display: none;
}

.img-previews .preview {
  width: 9rem;

  height: 9rem;

  border-radius: var(--radius-200);

  overflow: hidden;

  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

/* DATA FILTER TAB AND BUTTON */

.header-group {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 1.5rem;
}

/* .filter {

  align-self: flex-start;

  position: relative;

}



.filter-btn {

  width: 13rem;

  height: 3.5rem;

  border-radius: var(--radius-c100);

  background-color: var(--clr-primary);

  display: flex;

  align-items: center;

  justify-content: center;



  gap: 1rem;

  color: white;

  margin-left: 3rem;

  cursor: pointer;

  transition: all 300ms ease-in-out;

}



.filter-btn:hover {

  background-color: var(--clr-primary-dark);

}



.filter .filter-form {

  position: absolute;

  bottom: 0%;

  right: 0;

  transform: translate(100%, calc(100% - 3rem));

  visibility: hidden;

  opacity: 0;

  width: 27rem;

  background-color: white;

  transition: all 300ms ease-in-out;

  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,

    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

}



.filter .filter-form.open {

  transform: translate(100%, 100%);

  visibility: visible;

  opacity: 1;

} */

/* TABLES */

.table-container {
  max-width: 100%;

  border-radius: var(--radius-400);

  display: flex;

  flex-direction: column;

  gap: 2rem;
}

.table-container .table-heading {
  width: 100%;

  color: var(--clr-primary);

  min-height: 4rem;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  text-align: center;

  /* background-color: var(--clr-gray-100); */

  font-size: clamp(1.8rem, 4vw, 2.3rem);

  font-weight: 500;
}

.table-container table {
  width: 100%;

  height: auto;

  /* border-spacing: 0 0.7rem; */

  border-collapse: collapse;

  margin: 0 auto;

  text-align: left;
}

.table-container table caption {
  min-height: 4rem;

  text-align: left;

  font-weight: 700;

  line-height: 4rem;
}

.table-container table td {
  width: fit-content;

  color: var(--text-clr-gray-500);

  /* font-family: var(--font-primary); */

  font-size: 1.4rem;
}

.table-container table th {
  word-wrap: break-word;
  color: var(--clr-secondary-dark);
}

.table-container table td,
.table-container table td span,
.table-container table th {
  padding: 0.9rem;
  font-size: 1.3rem;
}

.table-container table td {
  font-weight: 400;
  color: var(--text-clr-gray-500);
}

.table-container table tr.spanned {
  padding: 1.5rem 0;

  background-color: #fbfbfb;
}

.table-container table tr.total-order-cost {
  border-bottom: none !important;
}

.table-container table tr.spanned td div {
  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 3rem;
}

.table-container table tr td .td-content {
  display: flex;

  align-items: center;

  gap: 1rem;
}

.table-container table tr td a.confirm-received {
  width: 15rem;

  height: 3rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #16c47f;

  color: white;

  transition: all 300ms ease;
}

.table-container table tr td a.confirm-received:hover {
  background-color: #06a364;
}

.table-container table thead tr:first-child {
  background-color: #eef3ff;
}

table input {
  width: 30rem !important;

  border: none;

  outline: none;

  height: 4rem;

  border: 0.1rem solid var(--clr-gray-300);

  padding: 0 1rem;

  transition: all 300ms ease-in-out;

  border-radius: var(--radius-400);

  margin: 1rem 0;
}

table input:hover {
  border-color: var(--clr-primary-lighter);
}

table input:focus {
  border-color: var(--clr-primary-light);
}

.table-container .img {
  width: 4rem;

  height: 4rem;

  border-radius: var(--radius-200);

  overflow: hidden;

  cursor: pointer;
}

.table-container table tr td a {
  padding: 0.5rem 1rem;

  text-align: center;

  line-height: 1.4rem;

  display: flex;

  align-items: center;

  gap: 1rem;

  margin: 0.3rem 0;

  font-size: 1.4rem;

  border-radius: var(--radius-100);

  transition: all 300ms ease-in-out;
}

.table-container table tr td a > span {
  font-size: 1.6rem;
}

.table-container table tr td a:hover {
  transform: translateY(-5%);
}

.table-container .table-actions {
  width: 10rem;

  height: 3rem;

  position: relative;

  /* z-index: 10; */
}

.table-container .table-actions .label {
  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-evenly;

  color: rgb(90, 88, 88);

  background-color: white;

  border-radius: 1.2rem;

  border: 0.1rem solid var(--clr-gray-400);

  cursor: pointer;
}

.table-container .table-actions .expand {
  font-size: 1.4rem;

  transition: all 300ms ease-in-out;

  transform: rotate(180deg);
}

.table-container .table-actions .expand.turn {
  color: var(--clr-primary-light);

  transform: rotate(0);
}

.table-container .table-actions .drop-down {
  position: absolute;

  left: 00%;

  top: 0;

  transform: translate(-50%, calc(-100% + 0.5rem));

  opacity: 0;

  visibility: hidden;

  width: calc(100% + 13rem);

  min-height: 5rem;

  border: 0.2rem solid var(--clr-gray-100);

  background-color: white;

  display: flex;

  flex-direction: column;

  padding: 0.5rem;

  border-radius: 1rem;

  gap: 0.5rem;

  z-index: 900;

  transition: all 300ms ease-in-out;

  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.table-container .table-actions .drop-down.dropped {
  transform: translate(-50%, calc(-100%));

  opacity: 1;

  visibility: visible;
}

.table-container .table-actions .drop-down a {
  width: 100%;

  height: 3.5rem;

  border-radius: var(--radius-200);

  display: flex;

  justify-content: flex-start;

  text-align: left;

  gap: 0.5rem;

  color: var(--text-clr-gray-500);

  font-weight: 400;
}

.table-container .table-actions .drop-down a:hover {
  background-color: var(--clr-gray-300);
}

.table-container .table-actions .drop-down a span {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

.table-container td .status {
  min-width: 7rem;

  height: 3rem;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-200);

  font-weight: 500;
}

.table-container td .delivered {
  background-color: rgb(228, 252, 228);

  color: rgb(6, 186, 69);
}

.table-container td .pending {
  background-color: rgb(253, 246, 215);

  color: rgb(225, 114, 11);
}

.table-container td .back-order {
  background-color: rgb(234, 230, 230);

  color: rgb(53, 52, 52);
}

.table-container td .order-placed {
  background-color: #ebf3fb;

  color: #3d90d7;
}

.table-container .active {
  color: #00c897;

  background-color: #d1f7ed;
}

.table-container .inactive {
  color: #3a3b3a;

  background-color: #dad7d7;
}

.table-container .status.archived {
  background-color: #e9e9e9;

  color: var(--text-clr-gray-300);
}

.table-container .status.unarchived {
  background-color: #d6fbf7;

  color: #219c90;
}

.table-container .action-view {
  color: #005899;
}

.table-container .action-view span {
  transform: rotate(-45deg);

  transition: all 300ms ease-in-out;
}

.table-container .action-view:hover span {
  transform: rotate(0deg);
}

.table-container table td.pag {
  display: flex;

  align-items: center;
}

/* POPUP */

.popup {
  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100vh;

  background-color: rgba(0, 0, 0, 0.829);

  -webkit-backdrop-filter: blur(0.5rem);

  backdrop-filter: blur(0.5rem);

  display: flex;

  flex-direction: column;

  align-items: center;

  z-index: 1001;

  opacity: 0;

  visibility: hidden;

  transition: all 100ms ease-in-out;

  overflow: auto;
}

.popup.show {
  opacity: 1;

  visibility: visible;
}

.popup .close-popup-btn {
  position: absolute;

  right: 1rem;

  top: 1rem;

  width: 3rem;

  height: 3rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: rgb(218, 12, 53);

  color: white;

  transition: all 300ms ease-in-out;

  font-size: 2rem;

  cursor: pointer;

  border-radius: var(--radius-half);
}

.popup .popup-container {
  width: 100%;

  max-width: 50rem;

  display: flex;

  flex-direction: column;

  background-color: white;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-400);

  padding: 2rem;

  gap: 2rem;

  transform: translateY(-1rem);

  opacity: 0;

  visibility: hidden;

  margin-top: 6rem;
}

.popup.show .popup-container {
  transform: translateY(0rem);

  opacity: 1;

  visibility: visible;

  transition: 100ms all 300ms ease-in-out;
}

.popup .close-popup-btn:hover {
  background-color: rgb(183, 7, 43);
}

.popup .popup-heading {
  height: 4rem;

  font-size: 2rem;

  display: flex;

  align-items: center;

  font-weight: 700;
}

.popup .popup-heading {
  width: 100%;

  height: 6rem;

  border-bottom: 0.1rem solid var(--clr-gray-200);
}

.popup .popup-content {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

  color: var(--text-clr-gray-500);
}

.popup .popup-btn-group {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 2rem;
}

.popup .popup-img {
  width: 100%;

  height: 80%;
}

.popup .popup-img img {
  object-fit: contain;
}

.popup .popup-btn-group a {
  min-width: 7rem;

  height: 3rem;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.4rem;

  color: white;

  border-radius: var(--radius-200);

  transition: all 300ms ease-in-out;

  padding: 0 1rem;
}

.popup .popup-btn-group a.cancel {
  border: 0.1rem solid var(--text-clr-gray-300);

  color: var(--text-clr-gray-300);
}

.popup .popup-btn-group a.cancel:hover {
  background-color: var(--text-clr-gray-300);

  color: white;
}

.popup .popup-btn-group a.accept {
  background-color: var(--text-clr-gray-300);

  color: white;
}

.popup .popup-btn-group a.accept:hover {
  background-color: var(--text-clr-gray-500);

  color: white;
}

/* SIDE NAVIGATION */

.sidenav {
  width: 25rem;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  position: fixed;

  left: 0;

  top: 0;

  transition: all 300ms ease-in-out;

  background-color: white;

  overflow-y: auto;

  border-right: 0.2rem solid var(--clr-gray-100);

  scrollbar-gutter: stable;
}

.sidenav::-webkit-scrollbar-thumb {
  background-color: var(--clr-gray-300);

  border-radius: var(--radius-800);
}

.close-sidenav {
  width: 4rem;

  height: 4rem;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-100);

  color: var(--clr-accent);

  background-color: white;

  position: absolute;

  right: 0;

  top: 0;

  display: none;

  font-size: 2rem;

  transition: all 400ms ease-in-out;

  cursor: pointer;
}

.close-sidenav:hover {
  background-color: var(--clr-accent);

  animation: jello;

  animation-duration: 1.5s;

  color: white;
}

.sidenav.close {
  transform: translateX(-100%);
}

.sidenav .logo {
  width: 70%;

  height: 6rem;
}

.sidenav .logo img {
  object-fit: contain;
}

.nav-list {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

  list-style: none;

  margin-top: 2rem;
}

.list-item {
  width: 90%;

  transition: all 300ms ease-in;

  position: relative;

  min-height: 4.5rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  border-radius: var(--radius-c100);
}

.list-item:hover {
  background-color: var(--clr-gray-300);
}

.list-item .link {
  width: 90%;

  height: 100%;

  display: flex;

  align-items: center;

  font-size: 1.5rem;

  color: var(--clr-gray-d300);

  font-weight: 500;

  padding: 0 1rem;

  position: relative;

  overflow: hidden;
}

.list-item:hover .link {
  color: var(--text-clr-gray-500);
}

.list-item .link span {
  width: 3rem;

  font-size: 1.8rem;

  color: var(--clr-gray-d300);
}

.list-item:hover .link span {
  color: var(--text-clr-gray-500);
}

/* DROP DOWN */

.list-item.drop-btn .expand {
  width: unset;

  position: absolute;

  top: 50%;

  right: 1%;

  transform: translateY(-50%) rotate(0);

  transition: all 300ms ease-in-out;

  font-size: 1.4rem;
}

.list-item.drop-btn .expand.turn {
  color: #005899;

  transform: translateY(-50%) rotate(180deg);
}

.list-item.drop-btn .link {
  height: 4rem;

  font-size: 1.5rem;
}

.list-item.drop-btn .drop-down {
  width: 90%;

  align-self: flex-end;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 1rem;

  margin-right: 1rem;

  max-height: 0rem;

  visibility: hidden;

  transition: all 300ms linear;
}

.list-item.drop-btn .drop-down.dropped {
  margin-top: 1rem;

  max-height: 20rem;

  visibility: visible;

  margin-bottom: 1rem;
}

.list-item.drop-btn .drop-down:not(.dropped) li {
  visibility: hidden;

  transition: all 100ms linear;
}

.list-item.drop-btn .drop-down li {
  width: 100%;

  height: 4rem;

  display: flex;

  align-items: center;

  visibility: hidden;

  opacity: 0;

  transform: translateY(-1%);

  transition: all 300ms ease-in;

  background-color: var(--clr-accent-lightest);

  border-radius: var(--radius-c100);
}

.list-item.drop-btn .drop-down.dropped li {
  visibility: visible;

  opacity: 1;

  transform: translateY(0);
}

.list-item.drop-btn .drop-down li a {
  font-size: 1.4rem;

  font-weight: 600;

  padding: 0 1rem;

  display: flex;

  align-items: center;

  gap: 1rem;

  color: var(--clr-gray-d500);
}

.list-item.drop-btn .drop-down li span {
  font-size: 1.4rem;
}

.list-item.drop-btn .drop-down li:hover {
  background-color: var(--clr-gray-d500);
}

.list-item.drop-btn .drop-down li:hover a {
  color: white;
}

.topnav {
  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  height: 6rem;

  padding: 0 4rem;

  background-color: white;

  border-radius: var(--radius-400);
}

.burger {
  background-color: white;

  font-size: 2rem;

  width: 4rem;

  height: 4rem;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: var(--radius-100);

  cursor: pointer;

  transition: all 200ms ease-in-out;

  padding: 0.6rem;

  color: var(--clr-primary-darker);
}

.burger span {
  font-size: 2.5rem;
}

.topnav .start {
  display: flex;

  align-items: center;

  gap: 2rem;
}

.topnav .logo {
  color: #d91656;

  font-weight: 700;
}

.link-container {
  display: flex;

  align-items: center;

  gap: 2rem;
}

.link-container a {
  color: white;
}

.topnav .edge {
  display: flex;

  align-items: center;

  margin-right: 2rem;

  gap: 1.5rem;
}

.topnav .links {
  display: flex;

  align-items: center;

  gap: 0.5rem;
}

.topnav .links a {
  width: 3rem;

  height: 3rem;

  border-radius: var(--radius-half);

  color: var(--clr-primary-light);

  /* box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; */

  display: flex;

  align-items: center;

  justify-content: center;
}

.topnav .links a span {
  font-size: 2.3rem;
}

.topnav .user-profile {
  display: flex;

  align-items: center;

  gap: 0.5rem;

  /* border: 0.1rem solid var(--clr-gray-300); */

  /* background-color: var(--clr-primary-lightest); */

  padding: 0.3rem;

  cursor: pointer;

  transition: all 300ms ease-in;

  position: relative;
}

.topnav .profile-btn {
  display: flex;

  align-items: center;

  gap: 1rem;
}

.topnav .profile-img {
  width: 2rem;

  height: 2rem;

  border-radius: var(--radius-half);

  overflow: hidden;
}

.topnav .profile-img img {
  width: 4rem;

  height: 4rem;

  object-fit: cover;
}

.topnav .profile-name {
  color: var(--clr-accent);

  font-size: 1.6rem;
}

.topnav .profile-name::first-letter {
  text-transform: uppercase;
}

.topnav .user-profile .expand {
  font-size: 1.6rem;

  color: var(--clr-gray-900);

  transition: all 300ms ease-in-out;
}

.topnav .user-profile .expand.turn {
  transform: rotate(180deg);
}

.topnav .user-profile .drop-down {
  width: 14rem;

  min-height: 12rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 01rem;

  justify-content: center;

  position: absolute;

  left: 50%;

  bottom: 0;

  transform: translate(-50%, 50%);

  opacity: 0;

  visibility: hidden;

  background-color: white;

  z-index: 100;

  border-radius: var(--radius-600);

  overflow: hidden;

  padding: 1rem;

  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

  margin-right: 3rem;

  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.topnav .user-profile .drop-down.dropped {
  transform: translate(-50%, 107%);

  opacity: 1;

  visibility: visible;
}

.topnav .user-profile .drop-down a {
  width: 100%;

  height: 3rem;

  color: var(--clr-accent-dark);

  color: var(--clr-accent);

  border: 0.1rem solid var(--clr-accent-lighter);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  transition: all 300ms ease-in-out;

  border-radius: var(--radius-400);
}

.topnav .user-profile .drop-down a:hover {
  background-color: var(--clr-accent);

  color: white;
}

.topnav .user-profile .drop-down a span {
  font-size: 1.5rem;

  transition: all 300ms ease-in-out;

  transform: rotate(-45deg);
}

.topnav .user-profile .drop-down a:hover span {
  visibility: visible;

  opacity: 1;

  display: block;

  transform: rotate(0deg);

  margin-left: 1rem;

  color: white;
}

.topnav .menu-container {
  width: 4rem;

  height: 4rem;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;
}

.topnav .menu-btn {
  width: 2.5rem;

  height: 2.5rem;

  cursor: pointer;
}

.topnav .menu {
  width: 20rem;

  display: flex;

  flex-direction: column;

  padding: 1rem;

  border-radius: var(--radius-400);

  position: absolute;

  left: 0;

  bottom: 0;

  transform: translate(0, calc(100% - 1rem));

  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

  z-index: 998;

  background-color: white;

  gap: 1rem;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: all 300ms ease-in-out;
}

.topnav .menu .logo {
  display: none;
}

.topnav .menu.show {
  opacity: 1;

  visibility: visible;

  transform: translate(0, calc(100%));

  pointer-events: all;
}

.topnav .menu a {
  width: 100%;

  height: 3rem;

  padding: 0 1rem;

  display: flex;

  align-items: center;

  gap: 1rem;

  transition: all 300ms ease-in-out;

  border-radius: var(--radius-200);

  color: var(--text-clr-gray-500);
}

.topnav .menu a:hover {
  background-color: var(--clr-gray-100);
}

.topnav .menu a span {
  font-size: 1.8rem;
}

.topnav .menu a.logout {
  background-color: #d91656;

  justify-content: center;

  color: white;
}

.topnav .menu a.logout:hover {
  background-color: #b50841;
}

/* MAIN CONTENT CONTAINER */

.main-content-container {
  width: calc(100% - 25rem);

  margin-left: 25rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  transition: all 300ms ease-in-out;

  padding: 3rem;

  background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}

.main-content-container.expand {
  width: 100%;

  margin-left: 0;
}

.main-content-container .main-content {
  display: flex;

  align-items: center;

  gap: 1rem;

  width: 100%;

  padding: 2rem 0rem;

  height: calc(min-100vh);

  position: relative;
}

@media (max-width: 900px) {
  .table-container {
    width: 100%;

    overflow-x: auto;
  }
}

@media (max-width: 800px) {
  .main-content-container {
    padding: 0;
  }

  .topnav {
    border-radius: 0;
  }

  .main-content-container .main-content {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .w-50,
  .w-60,
  .w-70,
  .w-80 {
    width: 100% !important;
  }

  .popup .popup-container {
    width: 95%;
  }

  .table-container table tr td a {
    margin: 0.5rem;
  }

  .sidenav {
    transform: translateX(-100%);

    z-index: 999;

    background-color: white;
  }

  .main-content-container .main-content {
    padding: 1rem;
  }

  form {
    width: 75%;
  }

  .close-sidenav {
    display: flex;
  }

  .sidenav.close {
    transform: translateX(0%);
  }

  .main-content-container {
    width: 100%;

    margin-left: 0;
  }

  .main-content-container.expand {
    width: 100%;

    margin-left: 0;
  }

  .popup .close-popup-btn {
    top: 1rem;

    right: 1rem;
  }
}

@media (max-width: 500px) {
  form {
    width: 100%;

    padding: 1rem;
  }

  form .form-group {
    flex-direction: column;
  }

  .sidenav {
    width: 30rem;
  }

  .heading {
    flex-direction: column;

    gap: 1rem;

    align-items: flex-start;
  }

  .heading .back-btn {
    align-self: flex-end;
  }

  .inline-nav {
    flex-direction: column;
  }

  .inline-nav .nav-link {
    min-width: 100%;

    justify-content: flex-start;
  }
}