mykanban2/assets/css/kanban.css

.kanban {
	display: flex;
	padding: 4px;
	background: #e8fcf8;
	border-radius: 5px;
}

.kanban * {
	font-family: sans-serif;
}

.kanban__column {
	flex: 1;
}

.kanban__column:not(:last-child) {
	margin-right: 4px;
}

.kanban__column-title {
	margin-bottom: 20px;
	font-size: 20px;
	color: black;
	user-select: none;
}

.kanban__item {
	border-radius: 8px;
	border: 1px solid #000;
	margin-bottom: 4px
}

.kanban__item-input {
	font-size: 14px;
	padding: 10px 5px;
	box-sizing: border-box;
	border-radius: 5px;
	cursor: pointer;
}

.kanban__dropzone {
	height: 20px;
	transition: background 0.15s, height 0.15s;
}

.kanban__dropzone--active {
	height: 90px;
	background: rgba(0, 0, 0, 0.25);
}

.kanban__add-item {
	float: left;
	background-color: #e8fcf8;
	font-size: 16px;
	color: black;
	border: none;
	cursor: pointer;
}

.kanban__hide-item {
	float: right;
	background-color: #e8fcf8;
	font-size: 16px;
	color: black;
	border: none;
	cursor: pointer;
}

.kanban__number {
	float: left;
}

.kanban__assign {
	float: right;
}

.form-row {
  display: flex;
  flex-direction: row;
  margin: 0.2rem;
}

.form-row-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0.2rem;
}

#edit-button,
#save-button,
#cancel-button {
  margin: 0.2rem 2px 0.1rem 0rem;
  background-color: white;
  border-radius: 0.2rem;
  width: 49.2%;
  border: 0.25rem solid black;
  padding: 0.7rem 2.7rem;
  border-radius: 0.3rem;
  font-size: 1rem;
}

#delete-button {
  margin: 0.2rem 2px 0.1rem 0rem;
  background-color: red;
  border-radius: 0.2rem;
  width: 49.2%;
  border: 0.25rem solid black;
  padding: 0.5rem 2.7rem;
  border-radius: 0.3rem;
  font-size: 1rem;
}

.datetime {
	font-size: .65rem;
}

.color-picker-square {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border: 1px solid #000;
}

.kanban__item.color-yellow, .task-summary-container.color-yellow, .color-picker-square.color-yellow {
    background-color: rgb(245, 247, 196);
    border-color: rgb(223, 227, 45);
}
.kanban__item.color-blue, .task-summary-container.color-blue, .color-picker-square.color-blue {
    background-color: rgb(219, 235, 255);
    border-color: rgb(168, 207, 255);
}
.kanban__item.color-green, .task-summary-container.color-green, .color-picker-square.color-green {
    background-color: rgb(189, 244, 203);
    border-color: rgb(74, 227, 113);
}

.kanban__item.color-purple, .task-summary-container.color-purple, .color-picker-square.color-purple {
    background-color: rgb(223, 176, 255);
    border-color: rgb(205, 133, 254);
}

.kanban__item.color-red, .task-summary-container.color-red, .color-picker-square.color-red {
    background-color: rgb(255, 187, 187);
    border-color: rgb(255, 151, 151);
}
.kanban__item.color-orange, .task-summary-container.color-orange, .color-picker-square.color-orange {
    background-color: rgb(255, 215, 179);
    border-color: rgb(255, 172, 98);
}
.kanban__item.color-grey, .task-summary-container.color-grey, .color-picker-square.color-grey {
    background-color: rgb(238, 238, 238);
    border-color: rgb(204, 204, 204);
}

.kanban__item.color-brown, .task-summary-container.color-brown, .color-picker-square.color-brown {
    background-color: #d7ccc8;
    border-color: #4e342e;
}
.kanban__item.color-deep_orange, .task-summary-container.color-deep_orange, .color-picker-square.color-deep_orange {
    background-color: #ffab91;
    border-color: #e64a19;
}
.kanban__item.color-dark_grey, .task-summary-container.color-dark_grey, .color-picker-square.color-dark_grey {
    background-color: #cfd8dc;
    border-color: #455a64;
}
.kanban__item.color-pink, .task-summary-container.color-pink, .color-picker-square.color-pink {
    background-color: #f48fb1;
    border-color: #d81b60;
}
.kanban__item.color-teal, .task-summary-container.color-teal, .color-picker-square.color-teal {
    background-color: #80cbc4;
    border-color: #00695c;
}
.kanban__item.color-cyan, .task-summary-container.color-cyan, .color-picker-square.color-cyan {
    background-color: #b2ebf2;
    border-color: #00bcd4;
}
.kanban__item.color-lime, .task-summary-container.color-lime, .color-picker-square.color-lime {
    background-color: #e6ee9c;
    border-color: #afb42b;
}
.kanban__item.color-light_green, .task-summary-container.color-light_green, .color-picker-square.color-light_green {
    background-color: #dcedc8;
    border-color: #689f38;
}
.kanban__item.color-amber, .task-summary-container.color-amber, .color-picker-square.color-amber {
    background-color: #ffe082;
    border-color: #ffa000;
}