/* DO NOT CHANGE THIS ROOT CLASS NAME*/
#task-6 {
  	background: #efefef;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

#empty {
	width: 90px;
}

#input-section {
	display: flex;
	flex-direction: column;
}

#warning {
  margin-left: 20px;
  margin-right: 20px;
  background: yellow;
  text-align: center;
  margin-bottom: -10px;
}

#list {
	display:flex;
	flex-direction: column;
	padding: 0px;
}

#top-section {
	display:flex;
	flex-direction: row;
}

h3 {
	text-align: center;
	width: 300px;
}

#app {
	display: flex;
	flex-direction: column;
}

#list-element {
	height: 40px;
	display:flex;
	flex-direction: row;
	align-content: center;
}

#list-element-uneven {
	height: 40px;
  	background: #e1e1e1;
	display:flex;
	flex-direction: row;
	align-content: center;
}

#item-text {
	width: 300px;
	text-align: center;
}

#list-content {
	display:flex;
	flex-direction: row;
	align-items:center;
	justify-content: center;
}

#button {
  width: 80px;
  padding: 5px 10px;
  margin: 5px;
  background: #efefef;
  color: #444;
  text-align: center;
  transition: .2s ease-in-out;
  &:hover {
	background: #ffe5a5;
  }
  &:active {
  	background: #efefef;
  }
  &:focus {
	  background: #e5f9c4;
	  border: solid 2px black;
  }
}


#input {
	margin: 20px;
  color: #555;
  padding:5px 10px 5px 5px;
  transition: .2s ease-in-out;

  &:hover {
	background: #ffe5a5;
  }
  &:focus {
	  background: #e5f9c4;
  }
  margin-bottom: 20px;
}


#add-button {
	display: flex;
	flex-direction: column;
	align-items: end;
	margin-right:15px;
}