@font-face {
	font-family: 'Outfit';
	src: url('../fonts/outfit-regular.ttf');
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	background-color: #141414;
}


/* App ---------- ---------- ---------- */

.app {
	display: grid;
	gap: 1rem;
	margin: 1rem;
	padding-bottom: 5rem;
	max-width: 1200px;
}


/* Title ---------- ---------- ---------- */

.app .title {
	color: #fff;
}

.app .title .heading {
	font-weight: 400;
	margin: 0 0 0.5rem 0;
}

.app .title .appinfo {
	display: flex;
	align-items: center;
	gap: 0.2rem
}

.app .title .appinfo .connection_status {
	width: 24px;
	height: 20px;
	background-image: url(../img/cloud_icon_connected.svg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
}

.app .title .appinfo .connection_status.online {
	background-image: url(../img/cloud_icon_connected.svg);
}

.app .title .appinfo .connection_status.offline {
	background-image: url(../img/cloud_icon_disconnected.svg);
}


/* Alert ---------- ---------- ---------- */

.app .alert {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	height: min-content;
	transition: 0.3s all ease-in-out;
}

.app .alert .message {
	display: none;
	padding: 0.3rem 0.4rem;
	border-radius: 0.2rem;
	background: #303030;
	color: #fff;
}

.app .alert .message.success {
	background: #19c459;
	color: #000;
}

.app .alert .message.warning {
	background: #fdb14f;
	color: #000;
}


/* Task ---------- ---------- ---------- */

.app .task {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.app .task .form {
	display: grid;
	grid-template-columns: 20fr 9fr 60px;
	justify-content: space-between;
	gap: 1rem;
	background-color: #202020;
	border-radius: 0.2rem;
}

.app .task .form:hover {
	background-color: #222222;
}

.app .task .task_name {
	font-family: 'Outfit', sans-serif;
	font-size: 1rem;
	width: 100%;
	padding: 0.4rem 1rem;
	background-color: transparent;
	border: none;
	color: white;
	outline: none;
}

.app .task .task_group {
	font-family: 'Outfit', sans-serif;
	font-size: 1rem;
	width: 100%;
	padding: 0.4rem 1rem;
	background-color: #1a1a1a;
	border: none;
	color: white;
	outline: none;
}

.app .task .task_add {
	font-family: 'Outfit', sans-serif;
	font-size: 1rem;
	width: max-content;
	min-height: 3rem;
	padding: 0.5rem 1rem;
	border: 1px solid #404040;
	border-radius: 0.2rem;
	background-color: #404040;
	color: white;
	cursor: pointer;
	white-space: nowrap;
}

.app .task .task_add:hover {
	background-color: #1a7e38;
}

.app .task .task_add:active {
	color: white;
	background-color: #35ff71;
}


/* List ---------- ---------- ---------- */

.app .list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style-type: none;
	color: white;
}

.app .list .item, .app .list li {
	display: grid;
	grid-template-columns: 20px 2fr 1fr 20px;
	gap: 0.4rem;
	padding: 0.8rem 1rem;
	border-radius: 0.5rem;
	background: #181818;
	font-size: 1rem;
	color: #fff;
	user-select: none;
	cursor: pointer;
	animation: fadein 0.3s linear;
}

@keyframes fadein {
	0% {
		transform: translateY(30px);
		opacity: 0;
	}
	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}

.app .list .item:hover, .app .list li:hover {
	background: #222222;
}

.app .list .item::before, .app .list li::before {
	content: ' ';
	position: relative;
	width: 20px;
	height: 20px;
	background-image: url(../img/checkbox_unchecked.svg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
}

.app .list .item.checked, .app .list li.checked {
	text-decoration: line-through;
	color: #404040;
}

.app .list .item.checked::before, .app .list li.checked::before {
	background-image: url(../img/checkbox_checked.svg);
}


.app .list .item > span, .app .list li :hover {
	display: block;
}

.app .list .item > span, .app .list li > span {
	content: ' ';
	position: relative;
	width: 20px;
	height: 20px;
	background-image: url(../img/close_icon.svg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
}

.app .list .item > span:hover, .app .list li > span:hover {
	background-image: url(../img/close_icon_hover.svg);
}