@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&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');


.form-control {
  display: block;
  width: 100%;
  padding: 0.475rem 0.75rem !important;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  appearance: none;
  background-color: transparent;
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}

.requiredIcon:after {
  content: ' *';
  color: red;
}

.wrap-text {
  word-wrap: break-word;
  white-space: normal;
  width: 100px;
  /* Example width */
}

.progress-bar {
  background-color: var(--bs-theme) !important;
}

a.disabled {
  pointer-events: none;
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

/*-----Preloader---*/
#loader {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 999999;
  overflow: visible;
  background: #fff url('/public/assets/images/loading.gif') no-repeat center center;
}

.z-index-9 {
  z-index: 9 !important;
}

.bg-light-gray {
  background-color: rgba(var(--bs-inverse-rgb), 0.1);
}

.app-theme-panel .app-theme-panel-container {
  width: 30rem !important;

}

.app-theme-panel {
  right: -30rem !important;
}

.app-theme-panel.active {
  right: 0px !important;
}

.app-theme-panel .app-theme-panel-content {
  width: 100% !important;
}

.table-bordered> :not(caption)>* {
  border-width: 1px !important;
}

table.dataTable.table-bordered tr:last-child th,
table.dataTable.table-bordered tr:last-child td {
  border-bottom-width: 1px !important;
}

.app-sidebar .app-sidebar-content .menu .menu-item .menu-link .menu-icon {
  margin-right: 0.30rem !important;
}

.app-sidebar .app-sidebar-content .menu .menu-item .menu-submenu .menu-item {
  padding-left: 1.0rem !important;
}

.modal-right .modal-dialog {
  position: absolute !important;
  right: 0px !important;
  margin: 0px !important;
  height: 100% !important;
}

.modal-right .modal-content {
  height: 100% !important;
  overflow-y: scroll !important;
}

.modal-backdrop {
  --bs-backdrop-opacity: 0.40 !important;
}

.col-hover-shadow:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.p-organizationchart-node-content {
  border: 0 !important;
}