@charset "UTF-8";
[hidden] {
  display: none !important;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body, html {
  color: #090909;
  width: 100%;
  height: 100%;
  font-size: 16px;
  background: #d9d9d9;
}

body {
  background-size: cover;
}

div.ui {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
div.ui main {
  background: rgba(217, 217, 217, 0.75);
  flex: 1;
  padding: 20px;
  overflow: auto;
  position: relative;
  min-width: 1400px;
}
div.ui main > div {
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 rgba(9, 9, 9, 0);
  height: 0%;
  opacity: 0;
  transition: height 500ms ease, box-shadow 800ms ease, opacity 500ms ease;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
div.ui main > div > div.header {
  padding: 20px 30px;
  font-size: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
div.ui main > div > div.header img {
  height: 40px;
  margin-right: 20px;
}
div.ui main > div > div.content {
  flex: 1 1 auto;
  margin: 0 30px;
}
div.ui main div.module-expanded {
  height: 100% !important;
  box-shadow: inset 0 0 7px rgba(9, 9, 9, 0.5);
  opacity: 1;
}

nav {
  width: 250px;
  min-width: 250px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px;
  overflow: auto;
}
nav > img {
  width: 75%;
  display: block;
  margin-bottom: 40px;
  filter: drop-shadow(0 0 4px rgba(9, 9, 9, 0.5));
}
nav div.nav-options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 20px;
}
nav div.nav-options button.nav-option, nav div.nav-options button.nav-log-out {
  height: 34px;
  width: 100%;
  border-radius: 10px;
  background: none;
  font-size: 16px;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition-duration: 150ms;
}
nav div.nav-options button.nav-option div.img-container, nav div.nav-options button.nav-log-out div.img-container {
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}
nav div.nav-options button.nav-option div.img-container img, nav div.nav-options button.nav-log-out div.img-container img {
  height: 24px;
  width: 24px;
}
nav div.nav-options button.nav-option div.text, nav div.nav-options button.nav-log-out div.text {
  padding-left: 15px;
  color: #090909;
  padding-right: 15px;
}
nav div.nav-options button.nav-option-selected {
  border: 2px solid #ffffff;
  color: #090909;
  box-shadow: 0 0 6px white;
  background: #D9D9D9;
  background: linear-gradient(100deg, #d9d9d9 30%, white 100%);
}
nav div.nav-options button.nav-option-selected div.text {
  color: #090909;
  font-weight: 500;
}
nav div.nav-tools-section {
  height: 0;
  transition: 300ms;
  overflow: hidden;
}
nav div.nav-tools-section div.nav-tools-group {
  margin-bottom: 5px;
}
nav div.nav-tools-section div.nav-tools-group div.nav-tool {
  position: relative;
  margin-left: 18px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid #090909;
  cursor: pointer;
}
nav div.nav-tools-section div.nav-tools-group div.nav-tool-selected {
  font-weight: 700;
}
nav div.nav-tools-section div.nav-tools-group div.nav-tool-selected::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #090909;
  border-radius: 50%;
}
nav div.nav-calendar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
nav div.nav-calendar div.nav-calendar-month-container div.nav-calendar-month-container-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.25);
  margin-bottom: 5px;
  font-weight: 500;
}
nav div.nav-calendar div.nav-calendar-month-container div.nav-calendar-week-container {
  display: flex;
}
nav div.nav-calendar div.nav-calendar-month-container div.nav-calendar-week-container div.nav-calendar-week-number-container {
  width: 12.5%;
  margin: 3px 0;
  font-weight: 500;
}
nav div.nav-calendar div.nav-calendar-month-container div.nav-calendar-week-container div.nav-calendar-day-container {
  width: 12.5%;
  text-align: center;
  padding: 3px 0;
}
nav div.nav-calendar div.nav-calendar-month-container div.nav-calendar-week-container div.nav-calendar-day-today {
  border-radius: 6px;
  background: #090909;
  color: #d9d9d9;
  font-weight: 600;
}
nav div.nav-calendar div.nav-calendar-month-container div.nav-calendar-week-container div.nav-calendar-day-weekend {
  color: rgba(9, 9, 9, 0.5);
}

div.prod-dashboard div.content {
  margin-bottom: 20px !important;
  display: flex;
  height: 100%;
  overflow: auto;
}
div.prod-dashboard div.content div.statistics-column {
  width: 25%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
div.prod-dashboard div.content div.statistics-column div.completion {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-dashboard div.content div.statistics-column div.completion > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-dashboard div.content div.statistics-column div.completion div.box-content {
  margin-top: 15px;
  display: flex;
  align-items: baseline;
}
div.prod-dashboard div.content div.statistics-column div.completion div.box-content div.tasks-counter {
  font-size: 64px;
}
div.prod-dashboard div.content div.statistics-column div.completion div.box-content div.tasks-desc {
  margin: 0 10px;
}
div.prod-dashboard div.content div.statistics-column div.completion div.box-content div.tasks-trend {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
  padding: 5px 15px;
  font-weight: 500;
}
div.prod-dashboard div.content div.statistics-column div.completion div.box-content div.tasks-trend-negative {
  color: #951009;
  text-shadow: 0 0 2px rgba(149, 16, 9, 0.75);
}
div.prod-dashboard div.content div.statistics-column div.completion div.box-content div.tasks-trend-positive {
  color: #147534;
  text-shadow: 0 0 2px rgba(20, 117, 52, 0.75);
}
div.prod-dashboard div.content div.statistics-column div.report {
  border: 2px solid #090909;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-dashboard div.content div.statistics-column div.report > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-dashboard div.content div.statistics-column div.report {
  padding: 10px 30px;
  cursor: pointer;
}
div.prod-dashboard div.content div.statistics-column div.pie-chart {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-dashboard div.content div.statistics-column div.pie-chart > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-dashboard div.content div.statistics-column div.pie-chart div.box-content {
  width: 100%;
  height: 300px;
}
div.prod-dashboard div.content div.statistics-column div.trend {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-dashboard div.content div.statistics-column div.trend > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-dashboard div.content div.statistics-column div.trend div.box-content {
  margin-top: 15px;
  display: flex;
  align-items: baseline;
}
div.prod-dashboard div.content div.statistics-column div.trend div.box-content div.tasks-counter {
  font-size: 64px;
}
div.prod-dashboard div.content div.statistics-column div.trend div.box-content div.tasks-desc {
  margin: 0 10px;
}
div.prod-dashboard div.content div.statistics-column div.trend div.box-content div.tasks-trend {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
  padding: 5px 15px;
  font-weight: 500;
}
div.prod-dashboard div.content div.statistics-column div.trend div.box-content div.tasks-trend-negative {
  color: #951009;
  text-shadow: 0 0 2px rgba(149, 16, 9, 0.75);
}
div.prod-dashboard div.content div.statistics-column div.trend div.box-content div.tasks-trend-positive {
  color: #147534;
  text-shadow: 0 0 2px rgba(20, 117, 52, 0.75);
}
div.prod-dashboard div.content div.tasks-column {
  width: 25%;
  padding: 10px;
  height: 100%;
}
div.prod-dashboard div.content div.tasks-column div.tasks {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-dashboard div.content div.tasks-column div.tasks > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-dashboard div.content div.tasks-column div.tasks {
  height: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
  min-height: 600px;
}
div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-numbers, div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-indicators {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 7px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-numbers div.tasks-numbers-number, div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-numbers div.tasks-indicators-indicator, div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-indicators div.tasks-numbers-number, div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-indicators div.tasks-indicators-indicator {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-numbers div.tasks-numbers-number div.number, div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-numbers div.tasks-indicators-indicator div.number, div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-indicators div.tasks-numbers-number div.number, div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-indicators div.tasks-indicators-indicator div.number {
  font-weight: 500;
  font-size: 20px;
}
div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-numbers div.tasks-numbers-number div.caption, div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-numbers div.tasks-indicators-indicator div.caption, div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-indicators div.tasks-numbers-number div.caption, div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-indicators div.tasks-indicators-indicator div.caption {
  opacity: 0.5;
}
div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: auto;
}
div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-content div.task {
  border: 2px solid #090909;
  border-radius: 7px;
  padding: 10px 20px;
}
div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-content div.task div.project-name {
  font-size: 14px;
}
div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-content div.task div.task-title {
  margin: 5px 0;
  font-weight: 500;
}
div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-content div.task div.date {
  display: flex;
  align-items: baseline;
}
div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-content div.task div.date span {
  margin-left: 5px;
}
div.prod-dashboard div.content div.tasks-column div.tasks div.tasks-content div.task div.date div.overdue-tag {
  border: 2px solid #951009;
  border-radius: 6px;
  padding: 2px 5px;
  margin-left: 20px;
  font-size: 14px;
  color: #951009;
  font-weight: 500;
}
div.prod-dashboard div.content div.projects-column {
  padding: 10px;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart {
  height: 40%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content {
  margin-top: 15px;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  min-height: 0;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-axis {
  width: 100%;
  display: flex;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-axis div.header-tick {
  width: 3.7037%;
  text-align: center;
  position: relative;
  font-size: 14px;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-axis div.header-tick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 10px;
  background-color: #090909;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column-reverse;
  padding-bottom: 10px;
  overflow: auto;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-content div.project-activity-bar {
  margin-top: 6px;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-content div.project-activity-bar div.project-name {
  font-weight: 500;
  font-size: 14px;
  position: relative;
  transform: translateX(10px);
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-content div.project-activity-bar div.project-gantt {
  margin-top: 2px;
  height: 20px;
  display: flex;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-content div.project-activity-bar div.project-gantt div {
  height: 100%;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-content div.project-activity-bar div.project-gantt div.dashboard-project-activity-gantt-1 {
  background-color: rgba(20, 117, 52, 0.75);
  border: 1px solid #147534;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-content div.project-activity-bar div.project-gantt div.dashboard-project-activity-gantt-2 {
  background-color: rgba(157, 118, 24, 0.75);
  border: 1px solid #9d7618;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-content div.project-activity-bar div.project-gantt div.dashboard-project-activity-gantt-3 {
  background-color: rgba(170, 97, 23, 0.75);
  border: 1px solid #aa6117;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-content div.project-activity-bar div.project-gantt div.dashboard-project-activity-gantt-4 {
  background-color: rgba(149, 16, 9, 0.75);
  border: 1px solid #951009;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-content div.project-activity-bar div.project-gantt div.dashboard-project-activity-corner-radius-front {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-chart-content div.project-activity-bar div.project-gantt div.dashboard-project-activity-corner-radius-back {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
div.prod-dashboard div.content div.projects-column div.projects-activity-chart div.box-content div.projects-activity-current-week-indicator {
  position: absolute;
  left: 14.8148%;
  top: 0;
  width: 3.7037%;
  height: 100%;
  z-index: 100;
  background-color: rgba(9, 9, 9, 0.1);
  outline-offset: -1px;
  border-radius: 8px;
}
div.prod-dashboard div.content div.projects-column div.projects-map {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-dashboard div.content div.projects-column div.projects-map > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-dashboard div.content div.projects-column div.projects-map {
  height: 60%;
  min-height: 400px;
  position: relative;
}
div.prod-dashboard div.content div.projects-column div.projects-map div.title {
  position: absolute;
  z-index: 1000;
  top: 20px;
  left: 30px;
  text-shadow: 0 0 4px white;
}
div.prod-dashboard div.content div.projects-column div.projects-map div.projects-map-info {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  transition-duration: 350ms;
  height: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
div.prod-dashboard div.content div.projects-column div.projects-map div.projects-map-info div.content-box {
  flex: 1 1 auto;
  background-color: rgba(255, 255, 255, 0.75);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
  backdrop-filter: blur(3px);
  margin: 20px;
  overflow: scroll;
}
div.prod-dashboard div.content div.projects-column div.projects-map div.projects-map-info div.content-box div.projects-map-info-label {
  border-left: 4px solid rgba(9, 9, 9, 0.5);
  padding-left: 10px;
  margin-bottom: 10px;
}
div.prod-dashboard div.content div.projects-column div.projects-map div.projects-map-info div.content-box div.projects-map-info-label div.label-title {
  font-size: 16px;
  margin-bottom: 3px;
}
div.prod-dashboard div.content div.projects-column div.projects-map div.projects-map-info div.content-box div.projects-map-info-label div.label-content {
  font-size: 16px;
  font-weight: 500;
}
div.prod-dashboard div.content div.projects-column div.projects-map div.projects-map-info div.content-box div.projects-map-info-label div.label-content div.label-list-el {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 3px;
  margin-bottom: 3px;
}
div.prod-dashboard div.content div.projects-column div.projects-map div.projects-map-info div.content-box div.projects-map-info-label div.label-content div.label-list-el div.img-container {
  height: 34px;
  width: 34px;
  padding: 4px;
  border-radius: 8px;
  background-color: rgba(217, 217, 217, 0.75);
  margin-right: 10px;
}
div.prod-dashboard div.content div.projects-column div.projects-map div.projects-map-info div.content-box div.projects-map-info-label div.label-content div.label-list-el div.img-container img {
  height: 100%;
  width: 100%;
}

div.prod-projects div.content {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
div.prod-projects div.content div.backlog-column {
  width: 25%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
div.prod-projects div.content div.backlog-column div.backlog-container {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-projects div.content div.backlog-column div.backlog-container > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-projects div.content div.backlog-column div.backlog-container {
  height: 70%;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}
div.prod-projects div.content div.backlog-column div.backlog-container div.backlog-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  margin: 10px 0;
}
div.prod-projects div.content div.backlog-column div.backlog-container div.backlog-content div.backlog {
  display: flex;
  padding: 5px;
  overflow: hidden;
  transition-duration: 400ms;
}
div.prod-projects div.content div.backlog-column div.backlog-container div.backlog-content div.backlog div.backlog-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
div.prod-projects div.content div.backlog-column div.backlog-container div.backlog-content div.backlog div.backlog-icon img {
  height: 34px;
  width: 34px;
}
div.prod-projects div.content div.backlog-column div.backlog-container div.backlog-content div.backlog div.backlog-text {
  flex: 1 1 auto;
  padding: 0 10px;
}
div.prod-projects div.content div.backlog-column div.backlog-container div.backlog-content div.backlog div.backlog-text textarea {
  width: 100%;
  padding: 5px;
  font-size: 16px;
  background: none;
  border: none;
  outline: none;
  resize: none;
  font-weight: 500;
}
div.prod-projects div.content div.backlog-column div.backlog-container div.backlog-content div.backlog div.backlog-text div.backlog-date {
  padding: 0 10px;
  font-size: 16px;
}
div.prod-projects div.content div.backlog-column div.backlog-container div.backlog-content div.backlog div.backlog-delete {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
div.prod-projects div.content div.backlog-column div.backlog-container div.backlog-content div.backlog div.backlog-delete img {
  height: 24px;
  width: 24px;
}
div.prod-projects div.content div.backlog-column div.backlog-container div.backlog-content div.backlog:has(textarea:focus) {
  outline: 2px solid #aa6117;
  outline-offset: -2px;
  border-radius: 10px;
  transition-duration: 250ms;
}
div.prod-projects div.content div.backlog-column div.new-project-container {
  border: 2px solid #090909;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-projects div.content div.backlog-column div.new-project-container > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-projects div.content div.backlog-column div.new-project-container {
  cursor: pointer;
}
div.prod-projects div.content div.active-projects-column, div.prod-projects div.content div.inactive-projects-column, div.prod-projects div.content div.finished-projects-column {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
div.prod-projects div.content div.projects-column-title {
  border-bottom: 3px solid #090909;
  padding-bottom: 5px;
  font-size: 20px;
  font-weight: 500;
  margin: 10px;
}
div.prod-projects div.content div.projects-column-content {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px;
}
div.prod-projects div.content div.projects-column-content div.project-tile {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-projects div.content div.projects-column-content div.project-tile > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-projects div.content div.projects-column-content div.project-tile {
  padding: 20px;
  margin-bottom: 10px;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-icons {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  margin-bottom: 12px;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-icons > * {
  flex-shrink: 0;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-icons div.project-phase {
  height: 30px;
  border-radius: 6px;
  padding: 3px 10px;
  background-color: rgba(217, 217, 217, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-icons div.img-container {
  height: 30px;
  border-radius: 6px;
  width: 30px;
  padding: 3px;
  background-color: rgba(217, 217, 217, 0.75);
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-icons div.img-container img {
  width: 100%;
  height: 100%;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-name {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 6px;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-code {
  display: inline-block;
  border-radius: 6px;
  font-size: 14px;
  padding: 2px 15px;
  border: 2px solid #090909;
  width: auto;
  margin-bottom: 12px;
  font-weight: 500;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-phase-description {
  display: flex;
  align-items: center;
  color: rgba(9, 9, 9, 0.75);
  margin-bottom: 12px;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-phase-description div.icon {
  margin-right: 15px;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-options {
  border-top: none;
  height: 0px;
  opacity: 0;
  overflow: hidden;
  transition-duration: 300ms;
  display: flex;
  justify-content: space-between;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-options div.left-options {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  height: 34px;
  align-items: center;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-options div.left-options div.img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.75;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-options div.left-options div.img-container:hover {
  opacity: 1;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-options div.right-options {
  margin-top: 6px;
  display: flex;
  align-items: center;
}
div.prod-projects div.content div.projects-column-content div.project-tile div.project-options div.right-options div.img-container {
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.prod-projects div.content div.projects-column-content div.project-tile:hover div.project-options {
  border-top: 1px dashed #090909;
  height: 34px;
  opacity: 1;
}

div.prod-project-settings {
  position: relative;
}

div.prod-project-settings:has(div.content-blur:not([hidden])) div.content {
  overflow: hidden;
}

div.prod-project-settings div.content {
  padding-bottom: 50px;
}
div.prod-project-settings div.content div.project-settings-buttons {
  width: 500px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #d9d9d9;
  border-top-left-radius: 15px;
  padding: 10px 10px;
  display: flex;
  gap: 20px;
}
div.prod-project-settings div.content div.project-settings-buttons::after, div.prod-project-settings div.content div.project-settings-buttons::before {
  position: absolute;
  border-bottom-right-radius: 15px;
  height: 30px;
  width: 30px;
  content: "";
  background: transparent;
  box-shadow: 5px 5px 0 #d9d9d9;
}
div.prod-project-settings div.content div.project-settings-buttons::after {
  left: -30px;
  bottom: 0;
}
div.prod-project-settings div.content div.project-settings-buttons::before {
  top: -30px;
  right: 0;
}
div.prod-project-settings div.content div.project-info-container {
  padding: 10px;
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}
div.prod-project-settings div.content div.project-info-container div.project-info-basics {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-project-settings div.content div.project-info-container div.project-info-basics > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-project-settings div.content div.project-info-container div.project-info-basics {
  width: 25%;
}
div.prod-project-settings div.content div.project-info-container div.project-info-basics div.title {
  margin-bottom: 20px;
}
div.prod-project-settings div.content div.project-info-container div.project-info-content {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-project-settings div.content div.project-info-container div.project-info-content > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-project-settings div.content div.project-info-container div.project-info-content {
  width: 25%;
}
div.prod-project-settings div.content div.project-info-container div.project-info-content div.title {
  margin-bottom: 20px;
}
div.prod-project-settings div.content div.project-info-container div.project-info-content label.project-settings-content-option {
  border: 2px solid rgba(170, 97, 23, 0);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 4px;
  transition-duration: 300ms;
}
div.prod-project-settings div.content div.project-info-container div.project-info-content label.project-settings-content-option div.img-container {
  width: 32px;
  height: 32px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: #d9d9d9;
  border-radius: 4px;
  margin-right: 20px;
}
div.prod-project-settings div.content div.project-info-container div.project-info-content label.project-settings-content-option div.img-container img {
  height: 24px;
  width: 24px;
}
div.prod-project-settings div.content div.project-info-container div.project-info-content label.project-settings-content-option div.option-name {
  display: flex;
  align-items: center;
}
div.prod-project-settings div.content div.project-info-container div.project-info-content label.project-settings-content-option:has(input:checked) {
  border: 2px solid #aa6117;
}
div.prod-project-settings div.content div.project-info-container div.project-info-content label.project-settings-content-option:has(input:checked) div.option-name {
  font-weight: 500;
}
div.prod-project-settings div.content div.project-info-container div.project-info-activity {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-project-settings div.content div.project-info-container div.project-info-activity > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-project-settings div.content div.project-info-container div.project-info-activity {
  width: 50%;
  display: flex;
  flex-direction: column;
}
div.prod-project-settings div.content div.project-info-container div.project-info-activity div.title {
  margin-bottom: 20px;
}
div.prod-project-settings div.content div.project-info-container div.project-info-activity div.project-into-activity-chart {
  flex: 1 1 auto;
}
div.prod-project-settings div.content div.project-phase-container {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-project-settings div.content div.project-phase-container > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-project-settings div.content div.project-phase-container {
  margin: 10px;
}
div.prod-project-settings div.content div.project-phase-container div.title {
  margin-bottom: 20px;
}
div.prod-project-settings div.content div.project-phase-container div.project-phase-content {
  margin: 0 50px;
  display: flex;
}
div.prod-project-settings div.content div.project-phase-container div.project-phase-content label.project-phase-option {
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
div.prod-project-settings div.content div.project-phase-container div.project-phase-content label.project-phase-option span {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #090909;
  position: relative;
}
div.prod-project-settings div.content div.project-phase-container div.project-phase-content label.project-phase-option.project-phase-selected span {
  border: 3px solid #aa6117;
}
div.prod-project-settings div.content div.project-phase-container div.project-phase-content label.project-phase-option.project-phase-selected span::before {
  position: absolute;
  content: "";
  width: 40%;
  height: 60%;
  border-width: 0 4px 4px 0;
  border-color: #aa6117;
  border-style: solid;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
div.prod-project-settings div.content div.project-phase-container div.project-phase-content label.project-phase-option.project-phase-current {
  font-weight: 500;
}
div.prod-project-settings div.content div.project-phase-container div.project-phase-content label.project-phase-option.project-phase-current span {
  border: 3px solid #aa6117;
}
div.prod-project-settings div.content div.project-phase-container div.project-phase-content label.project-phase-option.project-phase-current span::before {
  position: absolute;
  content: "";
  width: 40%;
  height: 60%;
  border: none;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
div.prod-project-settings div.content div.project-phase-container div.project-phase-content div.project-phase-bar {
  flex: 1 1 auto;
  height: 3px;
  border-bottom: 3px solid #090909;
  margin-top: 12px;
}
div.prod-project-settings div.content div.project-phase-container div.project-phase-content div.project-phase-bar.project-phase-bar-selected {
  border-bottom: 3px solid #aa6117;
}
div.prod-project-settings div.content div.project-phase-container div.project-phase-content div.project-phase-bar-dashed {
  flex: 1 1 auto;
  height: 3px;
  border-bottom: 3px dashed #090909;
  margin-top: 12px;
}
div.prod-project-settings div.content div.project-status-container {
  padding: 10px;
  margin-bottom: 10px;
}
div.prod-project-settings div.content div.project-status-container > div.title {
  margin: 0 0 20px 20px;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content {
  border: 2px solid #090909;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-project-settings div.content div.project-status-container div.project-status-content > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline {
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-header {
  display: flex;
  justify-content: flex-end;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-header > div {
  padding: 4px 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 10px;
  border-radius: 8px;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-header > div div.img-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-header > div input {
  border: none;
  outline: none;
  background: none;
  font-size: 16px;
  font-weight: 500;
  width: 350px;
  text-align: right;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-header > div:has(input:not(:disabled)) {
  border: 2px solid #aa6117;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.timeline-row {
  display: flex;
  width: max-content;
  margin-left: auto;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 220px;
  width: 220px;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status div.status-header {
  font-weight: 500;
  margin-bottom: 6px;
  width: 100%;
  text-align: center;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status div.status-description {
  border-top: 2px solid #090909;
  padding: 14px 10px 0 10px;
  position: relative;
  text-align: center;
  width: 100%;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status div.status-description::before {
  position: absolute;
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid #090909;
  background: #d9d9d9;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 0;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status-input {
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status-input div.status-header {
  font-weight: 500;
  margin-bottom: 6px;
  cursor: pointer;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status-input div.status-description {
  height: 80px;
  width: 100%;
  border-top: 2px dashed #090909;
  padding: 14px 10px 0 10px;
  position: relative;
  text-align: center;
  transition-duration: 300ms;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status-input div.status-description label {
  height: 0px;
  overflow: hidden;
  padding: 0;
  margin-bottom: 0;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status-input div.status-description label div.input-content {
  height: 100%;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status-input div.status-description div.project-status-timeline-add-button {
  height: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 500;
  cursor: pointer;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status-input div.status-description.status-description-input {
  height: 120px;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status-input div.status-description.status-description-input label {
  height: 80px;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status-input div.status-description.status-description-input div.project-status-timeline-add-button {
  height: 0px;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-timeline div.project-status-timeline-content div.project-status-input div.status-description::before {
  position: absolute;
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid #090909;
  background: #090909;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 0;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-new-timeline {
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  font-weight: 500;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-new-timeline > div {
  width: 360px;
  border-top: 2px dashed #090909;
  position: relative;
  text-align: center;
  padding: 14px 10px 0 10px;
}
div.prod-project-settings div.content div.project-status-container div.project-status-content div.project-status-new-timeline div::before {
  position: absolute;
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid #090909;
  background: #090909;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 0;
}
div.prod-project-settings div.content div.project-description-container {
  display: flex;
  flex-direction: row;
  padding: 10px;
  gap: 20px;
}
div.prod-project-settings div.content div.project-description-container div.project-description-map {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-project-settings div.content div.project-description-container div.project-description-map > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-project-settings div.content div.project-description-container div.project-description-map {
  flex: 1 1 auto;
}
div.prod-project-settings div.content div.project-description-container div.project-description-editor {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-project-settings div.content div.project-description-container div.project-description-editor > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-project-settings div.content div.project-description-container div.project-description-editor {
  height: 20cm;
  display: flex;
  flex-direction: column;
}
div.prod-project-settings div.content div.project-description-container div.project-description-editor #editor {
  overflow: auto;
  flex: 1 1 auto;
  width: 17cm;
  outline: 1px dashed rgba(9, 9, 9, 0.25);
  outline-offset: 10px;
  margin: 1cm 2cm;
  display: flex;
}
div.prod-project-settings div.content div.project-description-container div.project-description-toolbar {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-project-settings div.content div.project-description-container div.project-description-toolbar > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-project-settings div.content div.project-description-container div.project-description-toolbar {
  padding: 10px;
  overflow: auto;
}
div.prod-project-settings div.content div.project-tasks-container {
  padding: 10px;
  margin-bottom: 10px;
}
div.prod-project-settings div.content div.project-tasks-container > div.title {
  margin: 0 0 20px 20px;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-project-settings div.content div.project-tasks-container div.project-tasks-content {
  width: 100%;
  max-height: 900px;
  overflow: hidden;
  display: flex;
}
div.prod-project-settings div.content div.project-tasks-container div.project-tasks-content div.project-tasks-column {
  width: 25%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
div.prod-project-settings div.content div.project-tasks-container div.project-tasks-content div.project-tasks-column div.project-tasks-column-title {
  border-bottom: 3px solid #090909;
  padding-bottom: 5px;
  font-size: 20px;
  font-weight: 500;
  margin: 10px;
}
div.prod-project-settings div.content div.project-tasks-container div.project-tasks-content div.project-tasks-column div.project-new-task-container {
  border: 2px solid #090909;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-project-settings div.content div.project-tasks-container div.project-tasks-content div.project-tasks-column div.project-new-task-container > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-project-settings div.content div.project-tasks-container div.project-tasks-content div.project-tasks-column div.project-new-task-container {
  cursor: pointer;
  margin: 10px;
}
div.prod-project-settings div.content div.project-tasks-container div.project-tasks-content div.project-tasks-column div.project-tasks-column-content {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px;
  overflow: auto;
  padding-top: 0;
}

div.prod-tasks, div.prod-project-settings {
  position: relative;
}
div.prod-tasks div.task-tile, div.prod-project-settings div.task-tile {
  margin-top: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-tasks div.task-tile > div.title, div.prod-project-settings div.task-tile > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-tasks div.task-tile, div.prod-project-settings div.task-tile {
  display: flex;
}
div.prod-tasks div.task-tile div.task-options, div.prod-project-settings div.task-tile div.task-options {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
}
div.prod-tasks div.task-tile div.task-options div.task-drag-zone, div.prod-project-settings div.task-tile div.task-options div.task-drag-zone {
  background-image: radial-gradient(circle at 4px 3px, #000 2.5px, transparent 2.5px), radial-gradient(circle at 11px 3px, #000 2.5px, transparent 2.5px);
  background-size: 18px 9px;
  background-repeat: repeat;
  flex-grow: 1;
  flex-shrink: 0;
  min-height: 0;
  width: 15px;
  cursor: grab;
}
div.prod-tasks div.task-tile div.task-options div.tasks-settings-icon, div.prod-tasks div.task-tile div.task-options div.task-archive-icon, div.prod-project-settings div.task-tile div.task-options div.tasks-settings-icon, div.prod-project-settings div.task-tile div.task-options div.task-archive-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  transition-duration: 250ms;
}
div.prod-tasks div.task-tile div.task-content, div.prod-project-settings div.task-tile div.task-content {
  padding-left: 20px;
}
div.prod-tasks div.task-tile div.task-content div.task-title, div.prod-project-settings div.task-tile div.task-content div.task-title {
  font-weight: 500;
  margin-bottom: 6px;
}
div.prod-tasks div.task-tile div.task-content div.task-priority-tag, div.prod-project-settings div.task-tile div.task-content div.task-priority-tag {
  display: inline-block;
  border-radius: 6px;
  font-size: 14px;
  padding: 2px 15px;
  width: auto;
  margin-bottom: 12px;
  font-weight: 500;
}
div.prod-tasks div.task-tile div.task-content div.high-priority-tag, div.prod-project-settings div.task-tile div.task-content div.high-priority-tag {
  border: 2px solid #951009;
  color: #951009;
}
div.prod-tasks div.task-tile div.task-content div.medium-priority-tag, div.prod-project-settings div.task-tile div.task-content div.medium-priority-tag {
  border: 2px solid #aa6117;
  color: #aa6117;
}
div.prod-tasks div.task-tile div.task-content div.low-priority-tag, div.prod-project-settings div.task-tile div.task-content div.low-priority-tag {
  border: 2px solid #147534;
  color: #147534;
}
div.prod-tasks div.task-tile div.task-content div.task-deadline, div.prod-project-settings div.task-tile div.task-content div.task-deadline {
  display: flex;
  align-items: center;
  justify-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
div.prod-tasks div.task-tile div.task-content div.task-deadline div.overdue-tag, div.prod-project-settings div.task-tile div.task-content div.task-deadline div.overdue-tag {
  border: 2px solid #951009;
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 14px;
  color: #951009;
  font-weight: 500;
}
div.prod-tasks div.task-tile div.task-content div.task-duration, div.prod-project-settings div.task-tile div.task-content div.task-duration {
  display: flex;
  align-items: center;
  justify-items: center;
  gap: 10px;
}
div.prod-tasks div.task-tile-dragging, div.prod-project-settings div.task-tile-dragging {
  border: 1px dashed rgba(9, 9, 9, 0.75);
  opacity: 0.5;
}
div.prod-tasks div.task-tile-ghost, div.prod-project-settings div.task-tile-ghost {
  border: 1px solid #aa6117;
  position: absolute;
  z-index: 1000;
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.75);
  pointer-events: none;
}
div.prod-tasks div.task-draft-tile, div.prod-project-settings div.task-draft-tile {
  margin-top: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-tasks div.task-draft-tile > div.title, div.prod-project-settings div.task-draft-tile > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-tasks div.task-draft-tile, div.prod-project-settings div.task-draft-tile {
  display: flex;
  border: 2px solid #951009;
}
div.prod-tasks div.task-draft-tile div.task-draft-options, div.prod-project-settings div.task-draft-tile div.task-draft-options {
  display: flex;
  gap: 6px;
  align-items: center;
}
div.prod-tasks div.task-draft-tile div.task-draft-options div, div.prod-project-settings div.task-draft-tile div.task-draft-options div {
  display: flex;
  justify-content: center;
  align-content: center;
  cursor: pointer;
}
div.prod-tasks div.task-draft-tile div.task-draft-title, div.prod-project-settings div.task-draft-tile div.task-draft-title {
  margin-left: 10px;
  display: flex;
  align-items: center;
  font-weight: 500;
}

div.prod-tasks div.content {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
div.prod-tasks div.content div.not-started-tasks-column,
div.prod-tasks div.content div.started-tasks-column,
div.prod-tasks div.content div.stopped-tasks-column,
div.prod-tasks div.content div.finished-tasks-column {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
div.prod-tasks div.content div.tasks-column-title {
  border-bottom: 3px solid #090909;
  padding-bottom: 5px;
  font-size: 20px;
  font-weight: 500;
  margin: 10px;
}
div.prod-tasks div.content div.new-task-container {
  border: 2px solid #090909;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-tasks div.content div.new-task-container > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-tasks div.content div.new-task-container {
  cursor: pointer;
  margin: 10px;
}
div.prod-tasks div.content div.tasks-column-content {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px;
}
div.prod-tasks div.content div.tasks-column-content div.tasks-project-container {
  display: none;
  margin-bottom: 20px;
}
div.prod-tasks div.content div.tasks-column-content div.tasks-project-container div.tasks-project-container-header {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-tasks div.content div.tasks-column-content div.tasks-project-container div.tasks-project-container-header > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-tasks div.content div.tasks-column-content div.tasks-project-container div.tasks-project-container-header {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
div.prod-tasks div.content div.tasks-column-content div.tasks-project-container div.tasks-project-container-header div.visibility-button {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.prod-tasks div.content div.tasks-column-content div.tasks-project-container:has(div.task-tile), div.prod-tasks div.content div.tasks-column-content div.tasks-project-container:has(div.task-draft-tile) {
  display: block;
}
div.prod-tasks div.content div.tasks-column-content div.tasks-project-container-collapsed div.tasks-project-container-content {
  display: none;
}

div.prod-project-settings div.content div.tasks-settings-undertasks {
  height: 100% !important;
}

div.tasks-settings {
  transition-duration: 400ms;
  position: absolute;
  z-index: 2000;
  top: 0;
  right: 0;
  height: 100%;
  width: 0%;
  overflow: hidden;
  background: #d9d9d9;
}
div.tasks-settings div.tasks-settings-content {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 7px rgba(9, 9, 9, 0.5);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  height: 100%;
  margin: 0 20px;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column {
  display: flex;
  flex-direction: column;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-description {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-description > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-description {
  margin: 10px;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-description div.tasks-settings-dates-input {
  display: flex;
  gap: 10px;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-editor {
  display: flex;
  padding: 10px;
  gap: 20px;
  flex: 1 1 auto;
  overflow: hidden;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-editor div.editor-content {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-editor div.editor-content > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-editor div.editor-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-editor div.editor-content #editor {
  width: 11.7083333333cm;
  overflow: auto;
  flex: 1 1 auto;
  margin-top: 20px;
  display: flex;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-editor #toolbar {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-editor #toolbar > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-left-column div.tasks-settings-editor #toolbar {
  overflow: auto;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column {
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: 500px;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-undertasks {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-undertasks > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-undertasks {
  margin: 10px;
  height: 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-undertasks div.tasks-settings-undertasks-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: auto;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-undertasks div.tasks-settings-undertasks-content div.tasks-settings-undertask {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-undertasks div.tasks-settings-undertasks-content div.tasks-settings-undertask img {
  cursor: pointer;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-project {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-project > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-project {
  margin: 10px;
  height: 50%;
  display: flex;
  flex-direction: column;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-project div.title {
  margin-bottom: 10px;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-project div.tasks-settings-project-content {
  flex: 1 1 auto;
  overflow: auto;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-project div.tasks-settings-project-active div.header,
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-project div.tasks-settings-project-inactive div.header,
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-right-column-content div.tasks-settings-project div.tasks-settings-project-finished div.header {
  font-weight: 500;
  border-bottom: 1px solid #090909;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
div.tasks-settings div.tasks-settings-content div.tasks-settings-right-column div.tasks-settings-buttons {
  display: flex;
  gap: 20px;
  padding: 10px;
}

div.content-blur {
  position: absolute;
  z-index: 1000;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(10px);
}

div.prod-notes div.content {
  display: flex;
  overflow: hidden;
  position: relative;
}
div.prod-notes div.content div.notes-folders-column {
  width: 500px;
  flex: 0 0 500px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-category-selector-container {
  display: flex;
  gap: 20px;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-category-selector-container div.folder-category {
  cursor: pointer;
  padding-bottom: 5px;
  font-weight: 500;
  border-bottom: 2px solid rgba(217, 217, 217, 0.5);
  transition-duration: 300ms;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-category-selector-container div.folder-category.folder-category-selected {
  border-bottom: 2px solid rgba(9, 9, 9, 0.75);
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list {
  overflow: auto;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.title {
  margin-bottom: 10px;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option {
  border: 2px solid rgba(0, 0, 0, 0);
  display: flex;
  align-content: center;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 5px;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option div.img-container {
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option div.folder-name {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  padding: 3px 10px;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option div.folder-name input {
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  font-size: 16px;
  background: none;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option div.folder-otpions-submit, div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option div.folder-options-expand {
  visibility: hidden;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option:hover div.folder-name {
  text-shadow: 0 0 0 currentColor;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option-selected {
  border: 2px solid #ffffff;
  color: #090909;
  border: 2px solid rgba(217, 217, 217, 0.75);
  background: #D9D9D9;
  background: linear-gradient(100deg, #d9d9d9 30%, white 100%);
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option-selected div.folder-name {
  text-shadow: 0 0 0 currentColor;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option-selected div.folder-otpions-submit, div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option-selected div.folder-options-expand {
  visibility: visible;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.folder-option-selected:has(input) {
  border: 2px solid rgba(170, 97, 23, 0.75);
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.new-folder-option {
  border-radius: 8px;
  border: 1px solid rgba(9, 9, 9, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  margin-bottom: 10px;
  cursor: pointer;
}
div.prod-notes div.content div.notes-folders-column div.notes-folder-list div.new-folder-option img {
  margin-right: 10px;
}
div.prod-notes div.content div.notebook-options-popup {
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  border: 2px solid rgba(217, 217, 217, 0.75);
  box-shadow: 0 0 6px 1px #e7e7e7;
  z-index: 100000;
  position: absolute;
}
div.prod-notes div.content div.notebook-options-popup > div {
  display: flex;
  align-items: center;
  font-weight: 500;
  cursor: pointer;
  margin: 5px 0;
  border-radius: 8px;
  border: 1px solid rgba(9, 9, 9, 0.5);
  padding: 5px 10px;
  padding: 5px 40px 5px 10px;
}
div.prod-notes div.content div.notebook-options-popup > div div.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
div.prod-notes div.content div.notebook-options-popup div.notebook-options-popup-delete-option {
  color: #951009;
}
div.prod-notes div.content div.notes-folder-content-column {
  padding: 10px;
  min-width: 750px;
  flex: 0 0 750px;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.title {
  margin-bottom: 20px;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.new-node-container {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.new-node-container div.new-folder-button, div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.new-node-container div.new-note-button {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 5px 0;
  cursor: pointer;
  border: 2px solid rgba(217, 217, 217, 0.75);
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-folder {
  margin-bottom: 10px;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-folder div.folder-header {
  margin-right: 56px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid rgba(217, 217, 217, 0.75);
  background: #D9D9D9;
  background: linear-gradient(100deg, rgba(217, 217, 217, 0.5) 30%, rgba(255, 255, 255, 0.5) 100%);
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-folder div.folder-header div.img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-folder div.folder-header div.folder-name {
  padding: 3px 10px;
  flex: 1 1 auto;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-folder div.folder-header div.folder-name input {
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  font-size: 16px;
  background: none;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-folder div.folder-header:has(input) {
  border: 2px solid rgba(170, 97, 23, 0.75);
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-folder div.folder-content:has(div.notes-folder-content-folder), div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-folder div.folder-content:has(div.notes-folder-content-note) {
  margin-left: 30px;
  margin-top: 10px;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-note {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  margin-bottom: 10px;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-note div.note-header {
  transition-duration: 300ms;
  display: flex;
  align-items: center;
  border-radius: 8px;
  flex: 1 1 auto;
  border: 2px solid rgba(217, 217, 217, 0.75);
  background: #D9D9D9;
  background: linear-gradient(100deg, rgba(217, 217, 217, 0.5) 30%, rgba(255, 255, 255, 0.5) 100%);
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-note div.note-header div.img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-note div.note-header div.note-title {
  flex: 1 1 auto;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-note div.note-header div.note-title input {
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  font-size: 16px;
  background: none;
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-note div.note-header:has(input) {
  border: 2px solid rgba(170, 97, 23, 0.75);
}
div.prod-notes div.content div.notes-folder-content-column div.notes-folder-content div.notes-folder-content-note div.note-open-button {
  transition-duration: 300ms;
  width: 46px;
  margin-left: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(217, 217, 217, 0.75);
  background: rgba(255, 255, 255, 0.25);
}
div.prod-notes div.content div.notes-options-popup {
  padding: 5px 10px;
  background: white;
  border-radius: 12px;
  border: 2px solid rgba(217, 217, 217, 0.75);
  box-shadow: 0 0 6px 1px #e7e7e7;
  z-index: 100000;
  position: absolute;
}
div.prod-notes div.content div.notes-options-popup div.popup-option, div.prod-notes div.content div.notes-options-popup div.popup-option-red {
  display: flex;
  align-items: center;
  font-weight: 500;
  margin: 4px 0;
  width: 200px;
  cursor: pointer;
}
div.prod-notes div.content div.notes-options-popup div.popup-option div.img-container, div.prod-notes div.content div.notes-options-popup div.popup-option-red div.img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  margin-right: 10px;
}
div.prod-notes div.content div.notes-options-popup div.popup-option-red {
  color: #951009;
}

div.prod-notes-editor div.content {
  overflow: hidden;
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
div.prod-notes-editor div.content div.notes-editor-header {
  padding: 10px;
  width: 21.5291666667cm;
}
div.prod-notes-editor div.content div.notes-editor-header div.header-content {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-notes-editor div.content div.notes-editor-header div.header-content > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-notes-editor div.content div.notes-editor-header div.header-content {
  cursor: default;
}
div.prod-notes-editor div.content div.notes-editor-header div.header-content div.header-bread-crumb {
  font-size: 14px;
  margin-bottom: 4px;
}
div.prod-notes-editor div.content div.notes-editor-header div.header-content div.header-title {
  font-weight: 500;
  font-size: 20px;
}
div.prod-notes-editor div.content div.notes-editor-content {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 21.5291666667cm 1fr;
  overflow: hidden;
}
div.prod-notes-editor div.content div.notes-editor-content div.tasks-column {
  padding: 10px;
  justify-self: end;
  overflow: auto;
}
div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-tile, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-draft-tile {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-tile > div.title, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-draft-tile > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-tile, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-draft-tile {
  padding: 10px;
  width: 250px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 2px solid rgba(170, 97, 23, 0);
  transition-duration: 300ms;
}
div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-tile div.task-header, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-draft-tile div.task-header {
  font-weight: 500;
  margin-bottom: 5px;
}
div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-tile div.task-title, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-draft-tile div.task-title {
  margin-bottom: 10px;
}
div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-tile div.task-deadline, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-tile div.task-create-date, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-draft-tile div.task-deadline, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-draft-tile div.task-create-date {
  font-weight: 500;
}
div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-tile div.task-deadline span, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-tile div.task-create-date span, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-draft-tile div.task-deadline span, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-draft-tile div.task-create-date span {
  font-weight: 400;
}
div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-tile {
  border: 2px solid rgba(170, 97, 23, 0);
}
div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-draft-tile {
  border: 2px solid rgba(149, 16, 9, 0.75);
}
div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-tile.task-in-note, div.prod-notes-editor div.content div.notes-editor-content div.tasks-column div.notes-editor-task-draft-tile.task-in-note {
  border: 2px solid rgba(170, 97, 23, 0.75);
}
div.prod-notes-editor div.content div.notes-editor-content div.editor-column {
  grid-column: 2;
  padding: 10px;
  overflow: hidden;
}
div.prod-notes-editor div.content div.notes-editor-content div.editor-column div.editor-container {
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-notes-editor div.content div.notes-editor-content div.editor-column div.editor-container > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-notes-editor div.content div.notes-editor-content div.editor-column div.editor-container {
  height: 100%;
  padding: 0;
  display: flex;
}
div.prod-notes-editor div.content div.notes-editor-content div.editor-column div.editor-container div#editor {
  overflow: auto;
  flex: 1 1 auto;
  width: 17cm;
  outline: 1px dashed rgba(9, 9, 9, 0.25);
  outline-offset: 10px;
  margin: 1cm 2cm;
  display: flex;
}
div.prod-notes-editor div.content div.notes-editor-content div.editor-column {
  /*
  div#editor
  {
      border: 1px solid red;
      overflow: auto;
      flex: 1 1 auto;
      width: 21cm;
      outline: 1px dashed rgba($primary_dark, $alpha_1);
      outline-offset: 10px;
      //padding: 10px;
      margin: 1cm 2cm;
      display: flex;
  }*/
}
div.prod-notes-editor div.content div.notes-editor-content div.toolbar-column {
  padding: 10px;
  justify-self: start;
  overflow: hidden;
}
div.prod-notes-editor div.content div.notes-editor-content div.toolbar-column div#toolbar {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(9, 9, 9, 0.5);
}
div.prod-notes-editor div.content div.notes-editor-content div.toolbar-column div#toolbar > div.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  gap: 10px;
}
div.prod-notes-editor div.content div.notes-editor-content div.toolbar-column div#toolbar {
  padding: 10px;
  height: 100%;
  overflow: auto;
}

/*
// #region notes

div.prod-notes div.content
{
    display: flex;
    //gap: 20px;
    overflow: hidden;

    div.notes-notebook-column
    {
        width: 25%;
        overflow: scroll;

        div.project-notebooks, div.own-notebooks, div.archived-projects-notebooks
        {
            @include content-box-white-attrs;

            margin: 10px;
            margin-bottom: 20px;

            > div.title
            {
                margin-bottom: 10px;
            }

            div.notes-notebook
            {
                div.notes-notebook-header
                {
                    min-height: 34px;
                    width: 100%;
                    border-radius: 10px;
                    background: none;
                    font-size: $font_size_m;
                    outline: 0;
                    border: none;
                    display: flex;
                    align-items: stretch;
                    cursor: pointer;

                    transform: translateZ(0);
                    backface-visibility: hidden;
                    will-change: transform;

                    div.img-container
                    {
                        border-radius: 8px;
                        width: 34px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    div.notebook-name
                    {
                        min-height: 34px;
                        color: $primary_dark;
                        flex: 1 1 auto;
                        padding: 3px 15px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }

                    div.notebook-options
                    {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 8px;
                        opacity: 0;
                        transform: translateZ(0);
                        transition: opacity 300ms;

                        img
                        {
                            margin: 0 4px;
                        }
                    }
                }

                div.notes-notebook-header:hover
                {
                    div.notebook-options
                    {
                        opacity: 1;
                    }
                }

                div.notes-notebook-content
                {
                    div.note
                    {
                        margin-left: 15px;
                        border-left: 2px solid $primary_dark;
                        padding-left: 15px;
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                        border-radius: 0 5px 5px 0;

                        transform: translateZ(0);
                        backface-visibility: hidden;
                        will-change: transform;

                        div.img-container
                        {
                            height: 34px;
                            width: 34px;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            transform: translateZ(0);
                            backface-visibility: hidden;
                            will-change: transform;

                            img
                            {
                                transform: translateZ(0);
                                backface-visibility: hidden;
                                will-change: transform;
                            }
                        }

                        div.note-title
                        {
                            margin-left: 10px;
                            flex: 1 1 auto;
                            hyphens: auto;
                            overflow-wrap: break-word;
                        }

                        div.note-create-date
                        {
                            opacity: 0.75;
                            margin-left: 10px;
                            margin-right: 5px;
                        }
                    }

                    div.note-selected
                    {
                        background: rgba($primary_dark, $alpha_0);
                        div.note-title
                        {
                            font-weight: 400;
                        }
                        transform: translateZ(0);
                        backface-visibility: hidden;
                        will-change: transform;
                    }

                    div.new-note-button
                    {
                        border-left: 2px dashed $primary_dark;
                    }
                }
            }

            div.notes-notebook-selected
            {
                div.notes-notebook-header
                {
                    background-color: $primary_dark;
                    color: $primary_white;

                    div.img-container
                    {
                        border: 2px solid $primary_dark;
                        background: rgba($primary_white, 1);
                    }

                    div.notebook-name
                    {
                        color: $primary_white;
                        font-weight: 500;

                        input
                        {
                            color: $primary_white;
                            background: none;
                            border: none;
                            font-size: $font_size_m;
                            font-weight: 500;

                            outline: none;
                            transform: translateZ(0);
                            backface-visibility: hidden;
                            will-change: transform;
                        }
                    }

                    div.notebook-options
                    {
                        border: 2px solid $primary_dark;
                        background: rgba($primary_white, 1);
                    }
                }

                div.notes-notebook-header:has(input)
                {
                    border: 1px solid transparent;
                    outline: 3px solid $primary_orange;
                    outline-offset: 2px;
                }
            }

            div.new-notes-notebook-button
            {
                display: flex;
                align-items: center;
                border-radius: 10px;
                border: 2px solid $primary_dark;
                margin-bottom: 10px;
                cursor: pointer;

                div:has(img)
                {
                    border-radius: 8px;
                    width: 34px;
                    height: 34px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                div
                {
                    margin-right: 15px;
                }
            }
        }
    }

    div.notes-editor-column
    {
        //padding: 10px;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        div.notes-header
        {
            margin: 10px;
            @include content-box-white-attrs;
            display: flex;
            justify-content: space-between;
            align-items: center;

            div.notes-header-title
            {
                flex: 1 1 auto;

                > input
                {
                    margin-top: 10px;
                    border: 0;
                    outline: 0;
                    font-size: $font_size_l;
                    font-weight: 500;
                    background: none;
                    width: 100%;
                }
            }

            div.notes-header-options-container
            {
                div.notes-header-options
                {
                    margin-top: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img
                    {
                        cursor: pointer;
                    }
                }
            }
        }

        div.notes-editor-container
        {
            display: flex;
            height: 100%;
            overflow: auto;

            div.notes-editor
            {
                margin: 10px;
                @include content-box-white-attrs;
                height: calc(100% - 20px);
                padding: 0;
                display: flex;
                flex-direction: column;
                overflow: hidden;

                div#editor
                {
                    overflow: auto;
                    flex: 1 1 auto;
                    width: 21cm;
                    outline: 1px dashed rgba($primary_dark, $alpha_1);
                    outline-offset: 10px;
                    //padding: 10px;
                    margin: 1cm 2cm;
                    display: flex;
                }
            }

            div.notes-toolbar
            {
                margin: 10px;
                @include content-box-white-attrs;
                padding: 10px;
                overflow: auto;
            }
        }
    }
}

// #endregion
*/
div.error-container {
  position: absolute;
  top: 100px;
  right: 50px;
  width: 400px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
div.error-container div.error-red {
  border-left: 10px solid #951009;
}
div.error-container div.error-orange {
  border-left: 10px solid #aa6117;
}
div.error-container div.error-green {
  border-left: 10px solid #147534;
}
div.error-container div.error {
  border-radius: 8px;
  display: flex;
  height: auto;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 4px 2px rgba(9, 9, 9, 0.25);
  cursor: pointer;
}
div.error-container div.error div.error-icon {
  margin: 10px;
  padding: 0;
}
div.error-container div.error div.error-icon img {
  padding: 0;
  height: 40px;
}
div.error-container div.error div.error-description {
  margin: 10px;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
div.sync-container {
  opacity: 0;
  transition-duration: 0.3s;
  width: 50px;
  height: 50px;
  background-color: #090909;
  border-radius: 10px;
  position: absolute;
  bottom: 60px;
  right: 60px;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.sync-container img {
  height: 75%;
  width: 75%;
  animation: rotate360 4s linear infinite;
}

label.input-container {
  width: 100%;
  display: block;
  transition-duration: 300ms;
  margin-bottom: 20px;
}
label.input-container div.input-header {
  font-size: 14px;
  margin-bottom: 5px;
  margin-left: 60px;
}
label.input-container div.input-content {
  display: flex;
  height: 34px;
  border: 2px solid rgba(9, 9, 9, 0.25);
  border-radius: 8px;
  box-shadow: 0 0 2px 0px rgba(9, 9, 9, 0.25) inset;
  padding: 4px;
  transition-duration: 300ms;
}
label.input-container div.input-content div.input-content-prefix {
  height: 100%;
  width: 60px;
  border-right: 2px solid rgba(9, 9, 9, 0.25);
}
label.input-container div.input-content div.input-content-value {
  flex-grow: 1;
  height: 100%;
}
label.input-container div.input-content div.input-content-value input, label.input-container div.input-content div.input-content-value textarea {
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  background: none;
  padding-left: 20px;
  font-size: 16px;
  resize: none;
}
label.input-container div.input-content div.input-content-sufix {
  height: 100%;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
label.input-container div.input-content div.input-content-sufix img {
  width: 30px;
}
label.input-container div.input-content:has(textarea) {
  height: 100px;
}
label.input-container div.input-content:has(input:focus), label.input-container div.input-content:has(textarea:focus) {
  border: 2px solid rgba(170, 97, 23, 0.5);
}

label.input-container:has(input:focus), label.input-container:has(textarea:focus) {
  transition-duration: 300ms;
}
label.input-container:has(input:focus) div.input-header, label.input-container:has(textarea:focus) div.input-header {
  font-weight: 500;
}
label.input-container:has(input:focus) div.input-content, label.input-container:has(textarea:focus) div.input-content {
  border: 2px solid rgba(170, 97, 23, 0.5);
}

label.input-container.tools-ui-error div.input-header {
  color: #951009;
  font-weight: 500;
}
label.input-container.tools-ui-error div.input-content {
  border: 2px solid rgba(149, 16, 9, 0.75);
}

button.button-container {
  height: 34px;
  width: 100%;
  border-radius: 10px;
  background-color: #090909;
  color: #d9d9d9;
  font-size: 16px;
  border: none;
}

button.button-container-image {
  height: 34px;
  width: 100%;
  border-radius: 10px;
  background: none;
  font-size: 16px;
  outline: 0;
  border: none;
  display: flex;
  align-items: center;
  cursor: pointer;
}
button.button-container-image div.img-container {
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}
button.button-container-image div.img-container img {
  height: 24px;
  width: 24px;
}
button.button-container-image div.text {
  padding-left: 15px;
  color: #090909;
  padding-right: 15px;
}

button.button-container-image-selected {
  background-color: #090909;
  color: #d9d9d9;
}
button.button-container-image-selected div.img-container {
  border: 2px solid #090909;
  background: #d9d9d9;
}
button.button-container-image-selected div.text {
  color: #d9d9d9;
  font-weight: 500;
}

button.button-container-image-inverted {
  background-color: #d9d9d9;
  border: 2px solid #090909;
}
button.button-container-image-inverted div.img-container {
  border-right: 2px solid #090909;
}
button.button-container-image-inverted div.text {
  color: #090909;
  font-weight: 500;
}

div.input-checkbox-container {
  margin-bottom: 20px;
}

div.input-checkbox-header {
  font-size: 14px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.75);
  padding-left: 60px;
}

label.input-checkbox-label {
  display: flex;
  margin-bottom: 10px;
}
label.input-checkbox-label div.input-checkbox-mark {
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
label.input-checkbox-label div.input-checkbox-mark div {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(9, 9, 9, 0.25);
  background: rgba(9, 9, 9, 0.05);
  border-radius: 5px;
  box-shadow: 0 0 4px 0px rgba(9, 9, 9, 0.25) inset;
  transition-duration: 300ms;
}

label.input-checkbox-label:has(input:checked) div.input-checkbox-mark div {
  background: rgba(170, 97, 23, 0.5);
}

div.input-checklist-container label.input-checkbox-label {
  display: flex;
  align-items: center;
}
div.input-checklist-container label.input-checkbox-label div.input-checkbox-mark {
  width: 60px;
  min-width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
div.input-checklist-container label.input-checkbox-label div.input-checkbox-mark div {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(9, 9, 9, 0.25);
  background: rgba(9, 9, 9, 0.05);
  border-radius: 5px;
  box-shadow: 0 0 4px 0px rgba(9, 9, 9, 0.25) inset;
  transition-duration: 300ms;
}
div.input-checklist-container label.input-checkbox-label:has(input:checked) {
  text-decoration: line-through;
}
div.input-checklist-container label.input-checkbox-label:has(input:checked) div.input-checkbox-mark div {
  background: rgba(170, 97, 23, 0.5);
}

div.input-horizontal-container {
  width: 100%;
  display: block;
  transition-duration: 300ms;
  margin-bottom: 20px;
}
div.input-horizontal-container div.input-header {
  font-size: 14px;
  margin-bottom: 5px;
  margin-left: 60px;
}
div.input-horizontal-container div.input-horizontal-labels-container {
  display: flex;
  height: 34px;
  border: 2px solid rgba(9, 9, 9, 0.25);
  border-radius: 8px;
  box-shadow: 0 0 2px 0px rgba(9, 9, 9, 0.25) inset;
  transition-duration: 300ms;
}
div.input-horizontal-container div.input-horizontal-labels-container label.horizontal-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 6px;
  cursor: pointer;
}
div.input-horizontal-container div.input-horizontal-labels-container label.horizontal-label input[type=radio] {
  display: none;
}
div.input-horizontal-container div.input-horizontal-labels-container label.horizontal-label:has(input:checked) {
  box-shadow: 0 0 2px 0px rgba(9, 9, 9, 0.25) inset;
}
div.input-horizontal-container div.input-horizontal-labels-container label.horizontal-label:has(#tasks-settings-low-priority:checked) {
  background: rgba(20, 117, 52, 0.75);
}
div.input-horizontal-container div.input-horizontal-labels-container label.horizontal-label:has(#tasks-settings-medium-priority:checked) {
  background: rgba(170, 97, 23, 0.75);
}
div.input-horizontal-container div.input-horizontal-labels-container label.horizontal-label:has(#tasks-settings-high-priority:checked) {
  background: rgba(149, 16, 9, 0.75);
}

div#toolbar div.toolbar-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
div#toolbar div.toolbar-row div.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  border-radius: 5px;
  cursor: pointer;
}
div#toolbar div.toolbar-row div.icon-container.selected {
  background: rgba(170, 97, 23, 0.75);
}
div#toolbar div.toolbar-row div.color-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
  border-radius: 10px;
  cursor: pointer;
  border: 5px solid rgb(245, 245, 245);
}
div#toolbar div.toolbar-row div.color-container.selected {
  outline: 2px solid #090909;
  outline-offset: -2px;
}
div#toolbar div.toolbar-row div#toolbar-color-red-full {
  background: #951009;
}
div#toolbar div.toolbar-row div#toolbar-color-red-half {
  background: rgba(149, 16, 9, 0.5);
}
div#toolbar div.toolbar-row div#toolbar-color-green-full {
  background: #147534;
}
div#toolbar div.toolbar-row div#toolbar-color-green-half {
  background: rgba(20, 117, 52, 0.5);
}
div#toolbar div.toolbar-row div#toolbar-color-orange-full {
  background: #aa6117;
}
div#toolbar div.toolbar-row div#toolbar-color-orange-half {
  background: rgba(170, 97, 23, 0.5);
}
div#toolbar div.toolbar-row div#toolbar-color-blue-full {
  background: #110b8a;
}
div#toolbar div.toolbar-row div#toolbar-color-blue-half {
  background: rgba(17, 11, 138, 0.5);
}
div#toolbar div.toolbar-row-margin {
  margin-bottom: 25px;
}
div#toolbar div.toolbar-single-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  border-radius: 5px;
  margin-bottom: 4px;
  cursor: pointer;
}
div#toolbar div.toolbar-single-icon.selected {
  background: rgba(170, 97, 23, 0.75);
}
div#toolbar div.toolbar-hidden-group {
  border: 2px solid #aa6117;
  border-radius: 5px;
}

div.tiptap {
  outline: none;
  width: 100%;
  font-size: 14px;
}
div.tiptap table {
  border-collapse: collapse;
  margin: 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
div.tiptap table td, div.tiptap table th {
  border: 1px solid #090909;
  padding: 6px 8px;
  position: relative;
  vertical-align: middle;
}
div.tiptap table .selectedCell {
  background-color: rgba(9, 9, 9, 0.05);
}
div.tiptap table .column-resize-handle {
  background-color: rgba(170, 97, 23, 0.75);
  bottom: -2px;
  pointer-events: none;
  position: absolute;
  right: -2px;
  top: 0;
  width: 4px;
}
div.tiptap .tableWrapper {
  margin: 1.5rem 0;
  overflow-x: auto;
}
div.tiptap .resize-cursor,
div.tiptap .resize-cursor * {
  cursor: col-resize !important;
}
div.tiptap ul, div.tiptap ol {
  margin-left: 40px;
  padding-left: 0;
}
div.tiptap h1, div.tiptap h2, div.tiptap h3, div.tiptap h4 {
  border-bottom: 2px solid #090909;
}
div.tiptap img {
  border: 1px solid #090909;
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}
div.tiptap [data-resize-handle] {
  position: absolute;
  background: rgba(0, 0, 0, 0);
  border-radius: 2px;
  z-index: 10;
}
div.tiptap [data-resize-handle]:hover {
  background: rgba(0, 0, 0, 0.8);
}
div.tiptap [data-resize-handle][data-resize-handle=top-left], div.tiptap [data-resize-handle][data-resize-handle=top-right], div.tiptap [data-resize-handle][data-resize-handle=bottom-left], div.tiptap [data-resize-handle][data-resize-handle=bottom-right] {
  width: 8px;
  height: 8px;
}
div.tiptap [data-resize-handle][data-resize-handle=top-left] {
  top: -4px;
  left: -4px;
  cursor: nwse-resize;
}
div.tiptap [data-resize-handle][data-resize-handle=top-right] {
  top: -4px;
  right: -4px;
  cursor: nesw-resize;
}
div.tiptap [data-resize-handle][data-resize-handle=bottom-left] {
  bottom: -4px;
  left: -4px;
  cursor: nesw-resize;
}
div.tiptap [data-resize-handle][data-resize-handle=bottom-right] {
  bottom: -4px;
  right: -4px;
  cursor: nwse-resize;
}
div.tiptap [data-resize-handle][data-resize-handle=top], div.tiptap [data-resize-handle][data-resize-handle=bottom] {
  height: 6px;
  left: 8px;
  right: 8px;
}
div.tiptap [data-resize-handle][data-resize-handle=top] {
  top: -3px;
  cursor: ns-resize;
}
div.tiptap [data-resize-handle][data-resize-handle=bottom] {
  bottom: -3px;
  cursor: ns-resize;
}
div.tiptap [data-resize-handle][data-resize-handle=left], div.tiptap [data-resize-handle][data-resize-handle=right] {
  width: 6px;
  top: 8px;
  bottom: 8px;
}
div.tiptap [data-resize-handle][data-resize-handle=left] {
  left: -3px;
  cursor: ew-resize;
}
div.tiptap [data-resize-handle][data-resize-handle=right] {
  right: -3px;
  cursor: ew-resize;
}
div.tiptap [data-resize-wrapper] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
div.tiptap [data-resize-state=true] [data-resize-wrapper] {
  outline: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0.125rem;
}
div.tiptap div.task-block {
  border-radius: 10px;
  margin: 70px 80px 10px 80px;
  padding: 10px;
  position: relative;
}
div.tiptap div.task-block::before {
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width: 200px;
  top: -60px;
  left: 0;
  padding: 4px 10px;
  color: #d9d9d9;
  text-align: center;
  border-radius: 10px;
  margin-right: 10px;
  padding: 4px 8px;
}
div.tiptap div.task-block-draft, div.tiptap div.task-block-not-started {
  border: 2px solid #090909;
}
div.tiptap div.task-block-started {
  border: 2px solid #aa6117;
}
div.tiptap div.task-block-stopped {
  border: 2px solid #951009;
}
div.tiptap div.task-block-finished {
  border: 2px solid #147534;
}
div.tiptap div.task-block-archived {
  border: 2px solid #090909;
  background: repeating-linear-gradient(45deg, rgba(9, 9, 9, 0.15) 0 3px, rgba(0, 0, 0, 0) 3px 6px);
}
div.tiptap div.task-block-draft::before {
  content: "OPPGAVE - UTKAST";
  background-color: #090909;
}
div.tiptap div.task-block-not-started::before {
  content: "OPPGAVE - IKKE STARTET";
  background-color: #090909;
}
div.tiptap div.task-block-started::before {
  content: "OPPGAVE - STARTET";
  background-color: #aa6117;
}
div.tiptap div.task-block-stopped::before {
  content: "OPPGAVE - STANSET";
  background-color: #951009;
}
div.tiptap div.task-block-finished::before {
  content: "OPPGAVE - FULLFØRT";
  background-color: #147534;
}
div.tiptap div.task-block-archived::before {
  content: "OPPGAVE - ARKIVERT";
  background-color: #090909;
}
div.tiptap div.task-block::after {
  content: attr(data-title);
  font-size: 14px;
  font-weight: 500;
  position: absolute;
  display: flex;
  align-items: center;
  height: 25px;
  width: 11.7083333333cm;
  top: -30px;
  left: 0;
  padding: 4px 10px;
  color: #090909;
  text-align: center;
  border-radius: 10px;
  margin-right: 10px;
  padding: 4px 8px;
}
div.tiptap div.notation-block {
  border-radius: 10px;
  border: 2px solid #090909;
  margin: 40px 80px 10px 80px;
  padding: 10px;
  position: relative;
}
div.tiptap div.notation-block::before {
  position: absolute;
  content: "Avklaring";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width: 200px;
  top: -30px;
  left: 0;
  padding: 4px 10px;
  color: #d9d9d9;
  background-color: #090909;
  text-align: center;
  border-radius: 10px;
  margin-right: 10px;
  padding: 4px 8px;
}

div.prod-tools div.content {
  min-height: 1000px;
  min-width: 1400px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
div.prod-tools div.content div.tools-ui-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-title {
  padding-bottom: 10px;
  font-size: 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid rgba(9, 9, 9, 0.75);
  font-weight: 500;
  margin: 10px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content {
  flex: 1;
  overflow: auto;
  padding: 10px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container {
  width: 100%;
  padding: 20px;
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 4px 2px rgba(9, 9, 9, 0.25);
  backdrop-filter: blur(3px);
  border: 2px solid rgba(217, 217, 217, 0.05);
  border-radius: 10px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-container-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-container-title div.tools-ui-container-subtitle {
  color: rgba(9, 9, 9, 0.75);
  font-size: 16px;
  font-weight: 400;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block {
  width: 100%;
  display: block;
  transition-duration: 300ms;
  margin-bottom: 20px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-block-title {
  font-size: 14px;
  margin-bottom: 5px;
  margin-left: 60px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-block-content {
  display: flex;
  height: 34px;
  border: 2px solid rgba(9, 9, 9, 0.25);
  border-radius: 8px;
  box-shadow: 0 0 2px 0px rgba(9, 9, 9, 0.25) inset;
  padding: 4px;
  transition-duration: 300ms;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-block-content div.tools-ui-input-prefix {
  height: 100%;
  width: 60px;
  border-right: 2px solid rgba(9, 9, 9, 0.25);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-block-content div.tools-ui-input-value {
  flex-grow: 1;
  height: 100%;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-block-content div.tools-ui-input-value input, div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-block-content div.tools-ui-input-value textarea {
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  background: none;
  padding-left: 20px;
  font-size: 16px;
  resize: none;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-block-content div.tools-ui-input-value button {
  cursor: pointer;
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  background: none;
  padding-left: 20px;
  font-size: 16px;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-block-content div.tools-ui-input-sufix {
  height: 100%;
  width: 60px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-block-content div.tools-ui-input-sufix img {
  width: 30px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-comment {
  width: 100%;
  margin-top: 5px;
  display: flex;
  opacity: 0.75;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-comment div.tools-ui-input-comment-icon {
  width: 60px;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block div.tools-ui-input-comment div.tools-ui-input-comment-text {
  padding-left: 10px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block:last-child {
  margin-bottom: 0;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block:has(input:focus), div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block:has(button):hover {
  transition-duration: 300ms;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block:has(input:focus) div.tools-ui-input-block-title, div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block:has(button):hover div.tools-ui-input-block-title {
  font-weight: 500;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block:has(input:focus) div.tools-ui-input-block-content, div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block:has(button):hover div.tools-ui-input-block-content {
  border: 2px solid rgba(170, 97, 23, 0.5);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block:has(input:disabled) {
  transition-duration: 300ms;
  cursor: default;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-input-block:has(input:disabled) div.tools-ui-input-block-content {
  border: 2px solid rgba(9, 9, 9, 0.25);
  background: rgba(28, 28, 28, 0.25);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-error div.tools-ui-input-block-title {
  color: #951009;
  font-weight: 500;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-error div.tools-ui-input-block-content {
  border: 2px solid rgba(149, 16, 9, 0.75);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-slider-block {
  width: 100%;
  display: block;
  transition-duration: 300ms;
  margin-bottom: 20px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-slider-block div.tools-ui-slider-block-title {
  font-size: 14px;
  margin-bottom: 5px;
  margin-left: 60px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-slider-block div.tools-ui-slider-block-content {
  min-height: 34px;
  transition-duration: 300ms;
  position: relative;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-slider-block div.tools-ui-slider-block-content input[type=range] {
  margin: 10px 0;
  appearance: none;
  width: 100%;
  height: 5px;
  background: rgba(9, 9, 9, 0.25);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-slider-block div.tools-ui-slider-block-content input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: #aa6117;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-slider-block div.tools-ui-slider-block-content input[type=range]::-moz-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: #aa6117;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-slider-block div.tools-ui-slider-block-content div.slider-value {
  position: absolute;
  top: 30px;
  transform: translateX(-50%) translateX(10px);
  white-space: nowrap;
  font-weight: 500;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-radio-option {
  display: flex;
  flex-direction: row;
  width: 100%;
  border: 2px solid rgba(9, 9, 9, 0.25);
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 10px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-radio-option div.tools-ui-radio-option-button-container {
  min-width: 50px;
  width: 50px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-radio-option div.tools-ui-radio-option-button-container input[type=radio] {
  display: none;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-radio-option div.tools-ui-radio-option-button-container div {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(9, 9, 9, 0.25);
  background: rgba(9, 9, 9, 0.05);
  border-radius: 5px;
  box-shadow: 0 0 4px 0px rgba(9, 9, 9, 0.25) inset;
  transition-duration: 300ms;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-radio-option div.tools-ui-radio-option-content div.tools-ui-radio-option-title {
  font-weight: 500;
  margin-bottom: 5px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-radio-option:last-child {
  margin-bottom: 0;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-radio-option:has(input[type=radio]:checked) {
  border: 2px solid rgba(170, 97, 23, 0.75);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container label.tools-ui-radio-option:has(input[type=radio]:checked) div.tools-ui-radio-option-button-container > div {
  background: rgba(170, 97, 23, 0.5);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-output-block {
  width: 100%;
  display: block;
  margin-bottom: 20px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-output-block div.tools-ui-output-block-title {
  font-size: 14px;
  margin-bottom: 5px;
  margin-left: 60px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-output-block div.tools-ui-output-block-content {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-output-block div.tools-ui-output-block-content div.tools-ui-output-prefix {
  width: 60px;
  height: 100%;
  padding: 10px;
  border-right: 1px solid rgba(9, 9, 9, 0.75);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-output-block div.tools-ui-output-block-content div.tools-ui-output-value {
  padding-left: 10px;
  height: 100%;
  font-size: 20px;
  font-weight: 500;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-output-block div.tools-ui-output-block-content div.tools-ui-output-value span {
  margin-left: 10px;
  color: rgba(9, 9, 9, 0.75);
  font-weight: 400;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 20px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table tr.error-row {
  background: rgba(149, 16, 9, 0.25);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table tr:first-child th:first-child {
  border-top-left-radius: 7px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table tr:first-child th:last-child {
  border-top-right-radius: 7px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table tr.empty-row {
  border: none;
  height: 20px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table th {
  background: rgba(170, 97, 23, 0.25);
  margin: 20px;
  margin-top: 10px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table th span::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 3px;
  margin-right: 5px;
  vertical-align: middle;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table th span.gravitational-force-symbol::before {
  background: #951009;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table th span.normal-force-symbol::before {
  background: #147534;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table th span.traction-force-symbol::before {
  background: #aa6117;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table th span.friction-force-symbol::before {
  background: #110b8a;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table th span.rolling-resistance-force-symbol::before {
  background: purple;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table th, div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table td {
  margin-bottom: 10px;
  text-align: center;
  border-left: 1px solid rgba(9, 9, 9, 0.05);
  border-right: 1px solid rgba(9, 9, 9, 0.05);
  border-bottom: 1px solid rgba(9, 9, 9, 0.5);
  padding: 3px 0;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table th.table-cell-10, div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table td.table-cell-10 {
  width: 10%;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table td.table-cell-red {
  border-left: 5px solid #951009;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table td.table-cell-green {
  border-left: 5px solid #147534;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container table.tools-ui-table td.table-cell-blue {
  border-left: 5px solid #110b8a;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-table-container table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-table-container table td {
  padding: 5px 0;
  text-align: center;
  transition-duration: 300ms;
  outline: 1px solid rgba(170, 97, 23, 0);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-table-container table tr.signal-duration-table-sub-header td {
  background: rgba(170, 97, 23, 0.25);
  font-weight: 500;
  border: 1px solid rgba(9, 9, 9, 0.75);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-table-container table tr.signal-duration-table-header td {
  background: rgba(170, 97, 23, 0.5);
  font-weight: 500;
  border: 1px solid rgba(9, 9, 9, 0.75);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-table-container table tr.signal-duration-table-content-row td:first-child {
  border-right: 1px solid rgba(9, 9, 9, 0.75);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-table-container table td.active.highlight {
  background: rgba(170, 97, 23, 0.75) !important;
  outline: 1px solid #aa6117;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-table-container table td.highlight {
  background: rgba(170, 97, 23, 0.25);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-table-container table td.dt04-empty {
  background: rgba(9, 9, 9, 0.05);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-table-container table td.dt04-empty.active {
  background: rgba(149, 16, 9, 0.5);
  outline: none;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-bars-container div.tools-ui-signal-bar-container {
  margin: 10px 0;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-bars-container div.tools-ui-signal-bar-container div.tools-ui-signal-bar-container-header {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 8px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-bars-container div.tools-ui-signal-bar-container div.tools-ui-signal-bar-container-content {
  height: 50px;
  padding-bottom: 20px;
  display: flex;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-bars-container div.tools-ui-signal-bar-container div.tools-ui-signal-bar-container-content div.signal-duration-bar {
  height: 100%;
  position: relative;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-bars-container div.tools-ui-signal-bar-container div.tools-ui-signal-bar-container-content div.signal-duration-bar::before {
  padding-top: 4px;
  content: attr(data-signal-duration-time);
  position: absolute;
  left: 50%;
  bottom: 0;
  text-align: center;
  height: 20px;
  transform: translate(-50%, 100%);
  white-space: nowrap;
  font-weight: 500;
  font-size: 14px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-bars-container div.tools-ui-signal-bar-container div.tools-ui-signal-bar-container-content div.signal-duration-bar-green {
  border: 2px solid #147534;
  background: rgba(20, 117, 52, 0.75);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-bars-container div.tools-ui-signal-bar-container div.tools-ui-signal-bar-container-content div.signal-duration-bar-yellow {
  border: 2px solid #aa6117;
  background: rgba(170, 97, 23, 0.75);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-bars-container div.tools-ui-signal-bar-container div.tools-ui-signal-bar-container-content div.signal-duration-bar-red {
  border: 2px solid #951009;
  background: rgba(149, 16, 9, 0.75);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-bars-container div.tools-ui-signal-bar-container div.tools-ui-signal-bar-container-content div.signal-duration-bar-emptying-time {
  border: 2px solid #951009;
  background: rgba(149, 16, 9, 0.75);
  background: repeating-linear-gradient(45deg, #951009 0 3px, rgba(149, 16, 9, 0.5) 3px 6px);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-signal-bars-container div.tools-ui-signal-bar-container div.tools-ui-signal-bar-container-content div.signal-duration-double-bar::after {
  content: "";
  background: #aa6117;
  outline: 2px solid #aa6117;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 15px;
  background: repeating-linear-gradient(45deg, #aa6117 0 3px, rgb(188, 134, 84) 3px 6px);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-view-box {
  height: 300px;
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-view-box img {
  height: 80%;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-view-box svg {
  height: 100%;
  display: block;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container div.tools-ui-view-box-large {
  height: 600px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-container:has(div.tools-ui-view-box-large) {
  padding: 0;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-friction-utilization-degree-container {
  background-color: #d9d9d9;
  position: relative;
  height: 35px;
  border-radius: 10px;
  margin-bottom: 20px;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-friction-utilization-degree-container div.tools-ui-friction-utilization-degree-bar {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s;
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-friction-utilization-degree-container div.tools-ui-friction-utilization-degree-bar-red {
  background: repeating-linear-gradient(45deg, rgba(149, 16, 9, 0.25) 0 3px, #d9d9d9 3px 6px);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-friction-utilization-degree-container div.tools-ui-friction-utilization-degree-bar-orange {
  background: repeating-linear-gradient(45deg, rgba(170, 97, 23, 0.25) 0 3px, #d9d9d9 3px 6px);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-friction-utilization-degree-container div.tools-ui-friction-utilization-degree-bar-yellow {
  background: repeating-linear-gradient(45deg, rgba(157, 118, 24, 0.25) 0 3px, #d9d9d9 3px 6px);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-friction-utilization-degree-container div.tools-ui-friction-utilization-degree-bar-green {
  background: repeating-linear-gradient(45deg, rgba(20, 117, 52, 0.25) 0 3px, #d9d9d9 3px 6px);
}
div.prod-tools div.content div.tools-ui-column div.tools-ui-column-content div.tools-ui-friction-utilization-degree-container div.tools-ui-friction-utilization-degree-value {
  z-index: 100;
  font-weight: 500;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

div.login-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}
div.login-container div.login-window {
  height: 700px;
  width: 500px;
  margin: 100px;
  background-color: #ffffff;
  box-shadow: inset 0 0 7px rgba(9, 9, 9, 0.5);
  backdrop-filter: blur(5px);
  border-radius: 10px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
div.login-container div.login-window img {
  width: 50%;
  margin-bottom: 40px;
  filter: drop-shadow(0 0 4px #090909);
}
div.login-container div.login-window div.login-window-header {
  font-size: 35px;
  font-weight: 300;
  margin-bottom: 40px;
}
div.login-container div.login-window div.login-window-form {
  width: 80%;
}
div.login-container div.login-illustration {
  height: 100%;
  flex: 1 1 auto;
}

/*# sourceMappingURL=main.css.map */