html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}


body {
  padding: 0;
  margin: 0;
  font-family: "Inter";
  font-size: 16px;
  line-height: 1.5;
  background-color: #F8F7FA;
  color: #222;
}


input, select, textarea {
  font-family: "Inter";
}

img {
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

.page-wrapper {
  width: 100%;
  max-width: 1920px;
  display: flex;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
}

.content {
  padding: 30px;
  width: 100%;
  max-width: 1710px;
  height: calc(100vh - 66px);
  overflow-x: scroll;
}

/* Style the scrollbar track */
::-webkit-scrollbar {
  width: 8px;
  /* Set the width of the scrollbar */
  height: 10px;
}

/* Style the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: #FEB435;
  /* Change scrollbar color */
  border-radius: 6px;
  /* Round the edges */
  border: 3px solid #e5e7eb;
  /* Add padding around the scrollbar thumb */
}

/* Style the scrollbar track */
::-webkit-scrollbar-track {
  background-color: transparent;
  /* Change the background of the scrollbar track */
  border-radius: 10px;
  /* Round the edges of the track */
}

/* On hover, change the scrollbar color */
::-webkit-scrollbar-thumb:hover {
  background-color: #f5a317;
}

/* Hide scrollbar if content fits within the container */
:has(> table):not(:has(> table > *:last-child))::-webkit-scrollbar {
  display: none;
}

.checkbox-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #C5C4CF;
  margin-left: auto;
  margin-right: auto;
}

.checkbox-label img {
  display: none;
}

.checkbox-label.selected {
  border-color: transparent;
}

.checkbox-label.selected img {
  display: block;
  min-width: 16px;
  height: 16px;
}

.checkbox-input {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid red;
  display: none;
}


.badge {
  padding: 4px;
  /* Adjust padding for size */
  font-size: 10px;
  /* Smaller font for a badge look */
  font-weight: bold;
  /* Make the text bold */
  line-height: 1;
  color: white;
  /* Text color */
  background-color: #535260;
  /* Background color (blue) */
  border-radius: 12px;
  /* Rounded corners */
  white-space: nowrap;
  /* Prevent the badge from breaking lines */
  height: 18px;
  min-width: 18px;
  /* Align with surrounding text or content */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}

.badge-blue {
  background-color: #2196F3;
  /* Green color for success */
}

.badge-success {
  background-color: #28a745;
  /* Green color for success */
}

.badge-border-success {
  background-color: #fff;
  /* Green color for success */
  border-color: #28a745;
  color: #28a745;
}

.badge-danger {
  background-color: #dc3545;
  /* Red color for danger */
}

.badge-warning {
  background-color: #ffc107;
  /* Yellow color for warning */
}

.badge-planned {
  background-color: #8C8B98;
}