/* List Of Color */
/* #1C3879 - Navy (Primary Color) */
/* #607EAA - Blue (Secondary Color) */

/* Relate to Primary Color */
/* #EAE3D2 - Beige */
/* #F9F5EB - Winter */
/* #F24C4C - Red */
/* #293462 - Navy */
/* #F7D716 - Yellow */
/* #256D85 - Link */

:root {
  --text-label-light: #979797;
}

#dashboard-chart-container {
  width: 1000px;
  height: 500px;
  margin: 0px auto;
  border: 1px solid white;
}

#bar-chart-container {
  width: 1000px;
  height: 500px;
  margin: 0px auto;
  border: 1px solid white;
}

#summary-chart-container {
  width: 1000px;
  height: 500px;
  margin: 0px auto;
  border: 1px solid white;
}

.width-developer {
  width: 50%;
}

.rectangle-preview {
  width: 23px;
  height: 30px;
  border-radius: 5px;
}

.custom-font-size {
  font-size: 12px;
}

.custom-popover {
  max-width: 800px;
  --cui-popover-border-color: var(--cui-primary);
  --cui-popover-header-bg: var(--cui-primary);
  --cui-popover-header-color: var(--cui-white);
}

.bg-white-smoke {
  background-color: #eeeeee;
}

.bg-khaki {
  background-color: #fffd95;
}

.bg-paleturquoise {
  background-color: #b4e4ff;
}

.bg-darkseagreen {
  background-color: #9dc08b;
}

.bg-medium-seagreen {
  background-color: #609966;
}

/* stepper css */

.progress-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  max-width: 80%;
  position: relative;
  width: 100%;
}

.progress-container::before {
  background-color: #e0e0e0;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.progress {
  background-color: #3498db;
  height: 4px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.4s ease;
  width: 0%;
}

.circle {
  align-items: center;
  background-color: #fff;
  border: 3px solid #e0e0e0;
  border-radius: 50%;
  color: #999;
  display: flex;
  height: 30px;
  justify-content: center;
  transition: 0.4 ease;
  width: 30px;
  z-index: 1;
}

.circle.active {
  border-color: #3498db;
}

hr {
  --cui-hr-color: rgb(189, 189, 189);
}

.dot {
  display: block;
  width: 4px;
  height: 4px;
  background: #8a8a8a;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}

.top-bar-info {
  font-size: 14px;
  color: var(--text-label-light);
}

#top-bar-notification .time-notification {
  font-size: 13px;
  color: rgb(67, 125, 201);
  font-weight: 500;
}

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

.h-fit {
  height: fit-content;
}

.text-label-light-gray {
  color: var(--text-label-light);
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.fs-7 {
  font-size: 0.8rem !important;
}

.list-none {
  list-style-type: none !important;
}