@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
  font-family: 'Geist';
  src: url('./node_modules/geist/dist/fonts/geist-sans/Geist-Regular.ttf') format('truetype'); /* Path to your font file */
}

* {
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--white);
  /*padding-block: 2rem;*/
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /*padding-bottom: 50rem;*/
}

:root {
  --primary: #2046B0;
  --background: #f8fcff;
  --muted-foreground: var(--gray);
  --dark-blue: #10153F;
  --light-blue: #DDE6FF;
  --lighter-blue: #F0F4FF;
  --white: #FFFFFF;
  --black: rgb(9, 9, 11);
  --gray: rgb(113, 113, 122);
  --green: #4DBFA3;
  --light-green:#EBF8EC;
  --red: #DB7575;
  --yellow: #F5CA3F;
  --input: 240 5.9% 90%;

  --blue-start: #312D58
  --blue-end: #203277;

  --radius: 0.5rem;

  --sm-font-size: 0.875rem; /* 14px */
  --sm-line-height: 1.25rem; /* 20px */
}

h1 {
  scroll-margin: 5rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

h2 {
  scroll-margin: 5rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -.025em;
}

h3 {
  scroll-margin: 5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -.025em;
}

h4 {
  scroll-margin: 5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -.025em;
}

p {
  line-height: 1.75rem;

}

p.lead {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--muted-foreground)
}

p.large {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

small {
  font-size: .875rem;
  line-height: 1;
  font-weight: 500;
}

p.small {
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

p.muted {
  font-size: .875rem;
  line-height: 1.25rem;
  color: var(--muted-foreground)
}

.font-medium {
  font-weight: 500;
}

th {
  font-weight: 700;
}

.flex-vertical {
  display: flex;
  flex-direction: column;
  gap: 20px
}


.flex-horizontal {
  display: flex;
  flex-direction: row !important;
  gap: 32px;
}

.component {
  display: flex;
  gap: 1rem;
  margin-top: 16px;
  margin-left: 1rem;
}

.component-vert {
  flex-direction: column;
}

.components {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.btn {
  display: flex;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  padding-inline: 1rem;
  padding-block: 0.5rem;

  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  white-space: nowrap;

  border-width: 1px;
  border-radius: calc(var(--radius) - 2px);

  cursor: pointer;

  transition-property: opacity, color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;

}

.btn:hover {
  opacity: 0.9;
}

.btn--primary {
  color: var(--white);
  background-color: var(--primary);
}

.btn--secondary {
  color: var(--primary);
  background-color: var(--light-blue);
  border: none;
}

.btn--tertiary {
  color: var(--white);
  background-color: var(--green);
  border-width: 0px;
}

.btn--outline {
  color: var(--primary);
  background-color: var(--white);
  border-color: var(--primary);
}

.btn--outline:not(:disabled):hover {
  background-color: var(--light-blue);
  border-width: 1px;
  border-color: var(--primary);
}


.btn--icon {
  width: 2rem;
  height: 2rem;
  padding: 0;

  position: relative;
  color: var(--dark-blue);
  background-color: var(--white);
}

.btn.btn--icon svg {
  margin: 0;
}

.btn--icon:focus-visible {
  outline: none;
}

.btn--icon--paging {
  /* border-color: hsl(var(--input)); */
  border-color: var(--lighter-blue);
}

.btn--icon:not(:disabled):hover {
  background-color: var(--light-blue);
  border-width: 1px;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn--destructive {
  color: var(--white);
  background-color: var(--red);
  border-width: 0px;
}

.btn--loading {
  opacity: .5;
  pointer-events: none;

}

.btn svg {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
}

.btn--loading svg {
  animation: spin 1s linear infinite;
}


@keyframes spin {
  100% {
    transform: rotate(1turn);
  }
}

.input {
  display: flex;
  height: 2.5rem;
  width: 100%;
  /*max-width: 20rem;*/

  border-radius: calc(var(--radius) - 2px);
  border-width: 1px;
  border-color: hsl(var(--input));

  background-color: var(--white);

  padding-inline: 0.75rem;
  padding-block: 0.5rem;

  font-size: .875rem;
  line-height: 1.25rem;

  transition: border-color, box-shadow;
  transition-duration: .15s;
}


.input:focus-visible {
  outline: none;
  outline: 2px solid transparent;
  outline-offset: 2px;

  --tw-ring-inset: ;
  --tw-ring-color: var(--primary);
  --tw-ring-offset-width: 2px;
  --tw-ring-shadow: 0 0 var(--light-blue);
  --tw-ring-offset-color: var(--white);
  --tw-shadow: 0 0 #000;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.input:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.input--error {
  outline: none;
  outline: 2px solid transparent;
  outline-offset: 2px;

  --tw-ring-inset: ;
  --tw-ring-color: var(--red);
  --tw-ring-offset-width: 2px;
  --tw-ring-shadow: 0 0 var(--light-blue);
  --tw-ring-offset-color: var(--white);
  --tw-shadow: 0 0 #000;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


.search-component {
  display: flex;
  position: relative;
  min-width: 20rem;
}

.search-component svg {
  width: 1rem;
  height: 1rem;
  color: #2c2c2c;
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
}

.input--search {
  display: flex;
  height: 2.5rem;
  width: 100%;

  padding-left: 2.2rem;
  padding-right: 0.75rem;
  padding-block: 0.25rem;

  border-radius: 999px;
  border-width: 1px;
  border-color: #2c2c2c;
  box-shadow: 1px 4px var(--muted-foreground), 1.2px 5.2px #2c2c2c;

  transition: border-color, box-shadow;
  transition-duration: .3s;
}

.input--search:focus-visible {
  outline: none;
  outline: 2px solid transparent;
  outline-offset: 2px;

  border-color: var(--dark-blue);
  box-shadow: 1px 5px var(--primary), 1.2px 6.2px #2c2c2c;
}

.dashboard-plant-container {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.dropdown-component {
  display: flex;
  position: relative;
  max-width: 10rem;
}


.dropdown-component svg {
  width: 1rem;
  height: 1rem;
  color: #2c2c2c;
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
}



.input--dropdown {
  display: flex;
  height: 2.5rem;
  width: 100%;

  padding-right: 2.2rem;
  padding-left: 0.75rem;
  padding-block: 0.25rem;

  border-radius: 0.8rem;
  border-width: 1px;
  border-color: #2c2c2c;
  box-shadow: 3px 4px var(--muted-foreground), 4px 5.5px #2c2c2c;

  transition: border-color, box-shadow;
  transition-duration: .3s;
}


.input--dropdown:focus-visible {
  outline: none;
  outline: 2px solid transparent;
  outline-offset: 2px;

  border-color: var(--dark-blue);
  box-shadow: 3.2px 5px var(--primary), 4px 6.2px #2c2c2c;
}

.form-item-message {

  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem* calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem* var(--tw-space-y-reverse));

  --tw-text-opacity: 1;
  color: var(--red);
}


/* Style for the radio button label */
.label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

/* Style for the individual radio buttons */
.radio-input {
  margin-right: 10px;
  /* Increase the size of the radio circle */
  transform: scale(1.5);
}

/* Style for the checked radio button */
.radio-input:checked {
  /* Change the color of the radio circle */
  accent-color: var(--primary); /* Change this to the desired color */
}

/* CARD */
.card-component {

  width: 350px;
}

.card-groups {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.card {
  min-width: 450px;
  max-width: 450px;
  border-radius: calc(var(--radius) + 4px);
  border-width: 1px;
  background-color: var(--white);

  --tw-shadow-color: ;
  /* --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); */
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  --tw-ring-offset-shadow: 0 0 #000;
  --tw-ring-shadow: 0 0 #000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}


.card--emphasis {
  flex-grow: 1;
  min-width: 0; /* Ensure flex item can shrink */
  max-width: 300px; /* Set maximum width */
  width: 0; /* Allow the flex item to shrink */
  border-radius: 0.8rem;
  border-width: 1px;
  border-color: #2c2c2c;
  box-shadow: 6px 7px var(--muted-foreground), 7px 8.7px #2c2c2c;
}

.card--emphasis i::before {
  border-radius: 8px;
  padding: 4px;
}

.card--total i::before {
  background-color: #00EBB7;
}

.card--permanent i::before {
  background-color: #CEC5FF;
}


.card--outsource i::before {
  background-color: #E8D5B5;
}


.card--transparent {
  background: transparent;
}

.card--no-shadow {
  border: none;
  box-shadow: none;
}

.card-header {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.card-header--staging {
  padding-bottom: 0.5rem;
}

.header-create-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.header-create-container h3 {
  align-self: end;
}

.card-header_title {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.025em;
}


.card-header-title--staging {
  font-size: var(--sm-font-size);
  line-height: var(--sm-font-size);
  letter-spacing: -.025em;
}

.card-content {
  padding: 1.5rem;
  padding-top: 0;
}


.card-form-inputs {
  display: grid;
  width: 100%;
  align-items: center;
  gap: 1rem;
}
.card-form-inputs__horizontal {

  display: grid;
  width: 100%;
  align-items: center;
  gap: 1rem;
}

.card-form-input__layout {
  display: flex;
  flex-direction: column;
}

.card-form-input__layout label {
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
}

.card-form-input__layout input {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem* calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem* var(--tw-space-y-reverse));
}

.card-form-input__layout-horizontal {
  flex: 1 0 50%; /* Each item takes up half of the available space */
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* Add some margin between pairs */
}

.card-form-input__layout-horizontal label {

  font-size: .875rem;
  font-weight: 500;
  line-height: 1;

  flex: 0 0 20%; /* Labels take up 30% of the space */
  text-align: right;
  margin-right: 10px; /* Add some space between label and input */
}

.card-form-input__layout-horizontal .input {
  flex: 1; /* Inputs take up the remaining space */
}


.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  padding-top: 0;
}

.card-footer--end {

  display: flex;
  align-items: center;
  justify-content: end;
  padding: 1.5rem;
  padding-top: 0;
  gap: 0.5rem;
}

/* END CARD */

/* TABLE */
.table-components {
  display: flex;
  gap: 0.5rem;
  justify-content: space-around;
}

.table-component {
  min-width: 800px;
}

.table-border {
  width: 100%;
  border-radius: calc(var(--radius) - 2px);
  border-width: 1px;
  border: none;
  padding-bottom: 1rem;
  /* --tw-space-y-reverse: 0;
  margin-top: calc(1rem* calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem* var(--tw-space-y-reverse)); */
}
.table-container {
  position: relative;
  width: 100%;
  /* max-height: 400px;  */
  overflow-y: auto;
}
table {
  width: 100%;
  caption-side: bottom;
  font-size: .875rem;
  line-height: 1.25rem;
  background-color: var(--white);
  border-collapse: collapse;
}

.table-bordered tr {
  border-inline-width: 1px;
}

.table-bordered .card-footer {
  padding: 0 !important;
}

/* Set fixed width for the last column */
th:last-child,
td:last-child {
    width: 150px; /* You can adjust the width as per your requirement */
}

table thead th {
  position: sticky;
  top: 0;
  z-index: 99;
  height: 2.5rem;
  padding-inline: 0.5rem;
  padding-block: 1rem;
  text-align: center;
  vertical-align: middle;
  font-weight: 500;
  /*color: var(--white);*/

  border-bottom-width: 1px;
}

table thead tr:first-child th {
  /*background-color: var(--primary);*/
}

table thead tr:first-child th:first-child{
  border-top-left-radius: calc(var(--radius) - 2px);
}

table thead tr:first-child th:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);;
}

table tbody tr {
  border-bottom-width: 1px;

  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

table tbody tr:hover {
  /* background-color: hsl(240 4.8% 97%) ; */
 background-color: var(--lighter-blue);
}

table tbody td {
  padding: 0.5rem;
  vertical-align: middle;
  border-bottom-width: 1px;
}

.table-row-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.table-row-action button {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  border-radius: calc(var(--radius) - 2px);

  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  background-color: transparent;

  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;

  position: relative;
}


.sr-only {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  background-color: var(--black);
  color: #fff;
  text-align: center;
  border-radius: calc(var(--radius) - 2px);
  padding-block: 0.375rem;
  padding-inline: 0.75rem;
  position: absolute;
  z-index: 100;
  bottom: 105%;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 500;
  transition: opacity 0.3s, transform 0.1s ease-in-out;
}

.table-row-action button:hover {
  background-color: var(--light-blue);
  z-index: 100;
}

.table-row-action button:hover .sr-only {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.table-row-action button:hover path {
  fill: var(--primary);
}

.table-row-action button svg {
  width: 1rem;
  height: 1rem;
  display: block;
  vertical-align: middle;
}

.table-row-action button svg path {
  fill: var(--dark-blue);
}


/* END TABLE */

.pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 2rem;
  /* --tw-space-y-reverse: 0;
  padding-top: calc(1rem* calc(1 - var(--tw-space-y-reverse)));; */
}

.pagination-buttons {

  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.5rem;

  --tw-space-y-reverse: 0;
  /* margin-top: calc(1rem* calc(1 - var(--tw-space-y-reverse))); */
  margin-bottom: calc(1rem* var(--tw-space-y-reverse));
}

.row-picker-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.row-picker-container button {
  display: flex;
  width: 70px;
  height: 2rem;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  font-size: .875rem;
  line-height: 1.25rem;
  padding-inline: 0.5rem;
  padding-block: 0.75rem;
}
.row-picker-container button svg {
  margin: 0;
}


/*
.pagination button:hover .sr-only {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
} */
.main-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
}

.side-nav {
  background-image: linear-gradient(to right bottom, #312d58, #2e2b59, #2b295a, #28275a, #25255b, #24255e, #232660, #212663, #212968, #212c6d, #212f72, #203277);
}

.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dashboard-child-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.space-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}



/* TOPNAV */
.topnav {
  display: flex;
  justify-content: space-between;
  padding-right: 2rem;
  overflow: hidden;
}

.topnav--child {
  display: flex;
  gap: 4px;
}

.separator {
  flex-grow: 0;
  flex-shrink: 0;
  height: 1px; /* Set the height of the separator */
  border-bottom: 1px solid var(--muted-foreground); /* Set the border to dashed style */
}

dialog {
	margin: auto;
}
/*.animate-repeat {
    transition: all 0.5s ease-in-out;
}
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
    display: block;
}
.animate-repeat.ng-enter {
    opacity: 0;
    transform: translateY(-10px);
}
.animate-repeat.ng-enter-active {
    opacity: 1;
    transform: translateY(0);
}
.animate-repeat.ng-leave {
    opacity: 1;
    transform: translateY(0);
}
.animate-repeat.ng-leave-active {
    opacity: 0;
    transform: translateY(-10px);
}*/


.tr-loader .td-loader .shimmer-loader {
  background-color: var(--grey-lighter);
  height: 18px;
  border-radius: 7px;
  width: 100%;
  background: linear-gradient(100deg,
  rgba(255, 255, 255, 0) 40%,
  rgba(255, 255, 255, .5) 50%,
  rgba(255, 255, 255, 0) 60%) #ededed;
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
}


.shim-loader {
  background-color: var(--grey-lighter);
  height: 18px;
  border-radius: 7px;
  width: 100%;
  background: linear-gradient(100deg,
  rgba(255, 255, 255, 0) 40%,
  rgba(255, 255, 255, .5) 50%,
  rgba(255, 255, 255, 0) 60%) #ededed;
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
  to {
      background-position-x: -30%;
  }
}