body {
	background-image: url('/img/bg.png');
	background-attachment: fixed;
	background-repeat: repeat;
	margin: 40px auto 20px;
	font-family: 'Athiti', sans-serif !important;
}

h1,
h2,
h3,
h4 {
	font-family: 'Athiti', sans-serif;
}

.uk-card-body {
	opacity: 0.7;
	transition: 0.4s;
	word-break: break-all;
}

.uk-card-body img:hover {
	opacity: 1;
}

.uk-card-body:hover {
	cursor: pointer;
	opacity: 1;
	transition: 0.4s;

}

.uk-active img {
	opacity: 1 !important;
}

.uk-active {
	opacity: 1;
	background: #545454;
	color: #fff;
}

.bg-blue {
	background-color: #5d9ff5;
}

.bg-red {
	background-color: #f25268;
}

.bg-yellow {
	background-color: #fedb73;
}

p {
	margin: 2px;
}

.title {
	font-size: 50px;
}

@media only screen and (max-width: 440px) {
	.input-refill {
		width: 100%;
	}

	.btn-refresh {
		width: 100%;
		margin: 0 !important;
	}
}

@media only screen and (max-width: 779px) {
	.uk-child-width-1-2>* {
		width: 100%;
	}

	.btn-refresh {
		width: 100%;
		margin: 0 !important;
	}

	.uk-reaction {
		padding: 5px 20px;
		font-size: 14px;
	}

	.uk-reaction img {
		width: 30px;
		height: 30px;
	}

	.uk-card-body {
		padding: 10px 10px;
	}

	.uk-button {
		margin: 2px;
	}
}


@media (min-width: 1200px) {
	.uk-reaction {
		font-size: 14px;
	}

	.uk-child-width-1-2>* {
		width: 60%;
	}

	.uk-width-1-3 {
		width: calc(50% * 1 / 3.001);
	}
}

textarea {
	resize: none;
}

.disabled-link {
	pointer-events: none;
	cursor: default;
	opacity: 0.5;
}