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

/* drop down */

#itemNumber {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  width: 70%;
  z-index: 1000;
}

.bg-invoices-head-color {
  background-color: #156082;
  color: #fff;
}

.bg-invoices-body-color {
  background-color: #ccd2d8;
  color: #000;
}

#loading-spinner .spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10500; 
}

#loading-spinner .spinner-border {
  width: 3rem;
  height: 3rem;
}


.dropdown-menu- {
  background-color: #f9f9f9;
  position: absolute;
  width: 50%;
  z-index: 1000;
}

/* Style each dropdown item */
.dropdown-item {
  padding: 8px 16px;  /* Padding inside each dropdown item */
  cursor: pointer;  /* Change cursor to pointer for interaction */
  color: #333;  /* Text color */
}

.dropdown-item:hover {
  background-color: #f1f1f1;  /* Highlight item on hover */
}


.top-left-logo {
  position: absolute;
  top: 20px;
  left: 20px;
}

.custom-rounded-container {
  max-width: 50%;
  border-radius: 20px; /* Adjust this value for more or less roundness */
  background-color: #2c2c2c; 
  max-width: 400px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(231, 0, 0, 0.197);
}
.custom-rounded-container2 {
  border-radius: 20px; /* Adjust this value for more or less roundness */
  background-color: #2c2c2c; 
  padding: 20px;
}
  /* For drag and drop */

/* Drag overlay style */
.drag-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

#confirmation_update_password{
  z-index: 100001;
}


.small-reverse-sign {
  font-size: 1.5rem; 
  color: rgb(255, 201, 101);
  top: calc(100% - 11px); 
}

.form-control-plaintext-pass {
  padding: 0.375rem 0;
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: transparent;
  border: solid transparent;
  border-width: var(--bs-border-width) 0;
}

.form-control-plaintext-pass:focus {
  outline: 0;
}
.form-control-plaintext-pass.form-control-sm, .form-control-plaintext-pass.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

#plus-sign{
  display: none; 
  color: rgb(192, 255, 97);
}
.dropzone {
  background-color: #f9f9f9;
  border-radius: 5px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.dropzone.dragging {
  background-color: #e9e9e9;
  border-color: #007bff;
}

/* For invalid po number */
.is-invalid {
  border-color: red;
}

.invalid-feedback {
  color: red;
  display: none;
}

.pointer{
  cursor: pointer !important;
}

#admin_part_number_by_client_table_loader{
  width: 1500px;
}

#app_content {
    padding: 50px;
    display: flex;
    justify-content: center;
}
.main-container {
    display: flex;
    height: 100vh;
}

/* .main-content {
    width: 150%;
    padding: 20px;
} */

.event-type-cell{
  width: 300px !important;
}

.table-container{
  height: 65% !important;
  overflow-y: scroll;
  width: 150%;
}

.table-invoices{
  max-height: 320px !important;
  overflow-y: scroll;
}

.table_wrapper {
  max-height: 430px;
  overflow-y: scroll;
}

.bg-main-color {
  background-color: #44546a !important;
  color: #ffffff !important;
}

.table-primary{
  background-color: #44546a !important;
  color: #ffffff;
}

#checkbox_remember_me {
  accent-color: #dc3545;
}

.bg-dark-input {
  background-color: #3f4044 !important;
  color: #e6e7ea !important;
}

.bg-dark-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.border-dark-input {
  border-color: #3f4044 !important;
}

.text-login {
  color: rgba(255, 255, 255, 0.5) !important;
}
.modal-backdrop-custom {
  background-color: rgba(0, 0, 0, 0.407);
  z-index: 1001;
}

.second-modal-backdrop-custom {
  background-color: rgba(0, 0, 0, 0.8);
}

.cursor-pointer {
  cursor: pointer;
}

.text-roboto {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-style: normal;
}


.custom_table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
}


/* ============================== Sidebar ============================================ */

.sidebar {
  z-index: 2000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  width: 80px;
  background-color: #44546a !important;
  transition: width 0.3s;
}

.sidebar:hover {
  width: 200px;
}

.sidebar .nav-item {
  width: 100%;
}

.sidebar .nav-link {
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 15px;
}

.sidebar a:hover {
  background-color: #ffffff;
  color: #44546a !important;
}

.sidebar a {
  cursor: pointer;
}

.sidebar .nav-link i {
  font-size: 40px;
  margin-right: 10px;
}

.sidebar .nav-link span {
  font-size: 20px;
  display: none;
  transition: display 0.5s, opacity 0.5s, transform 0.5s;
}

.sidebar img {
  display: none;
  transition: display 0.5s, opacity 0.5s, transform 0.5s;
}

.sidebar:hover img {
  display: inline;
  transform: translateY(0);
}

.sidebar:hover .nav-link span {
  display: inline;
  transform: translateY(0);
}


/* Scroll Tables */
.purchase-order-number {
  width: 700px;
  height: 300px;
  overflow-y: scroll;
}