.button-list button
{
	margin-top: 10px;
}

/* Normal buttons, i.e., no raised */
.button
{
	cursor: pointer;
	border-style: none;
	border-radius: 3px;
	transition: 0.4s ease;
	text-align: center;
	font-family: Raleway;
	font-size: 100%;
	padding: 2%;
	font-weight: 400;
}

/* Raised buttons */
.raised-button
{
	cursor: pointer;
	border-style: none;
	border-radius: 3px;
	transition: 0.4s ease;
	text-align: center;
	font-family: Raleway;
	font-size: 100%;
	padding: 2%;
	box-shadow: 0px 1px 3px gray;
	font-weight: 400;
}

/* Circle buttons */
.circle-button
{
	border-style: none;
	height: 35px;
	width: 35px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	transition: 0.4s;
}

/* Tile buttons */
.two-tile-button-container
{
	max-width: 260px;
	margin: auto;
}

.tile-button
{
	border-style: none;
	height: 120px;
	width: 120px;
	text-align: center;
	padding-top: 5px;
	display: inline-block;
	cursor: pointer;
	font-weight: 400;
	font-family: Raleway;
	transition: 0.4s ease;
}

/*.tile-button:hover { box-shadow: 0 0 2px 2px #aaa; }*/

.tile-button-icon
{
	font-size: 55px;
	padding-bottom: 0;
}

.tile-button + .tile-button { margin-left: 10px; }

/* Flat button */
.flat-button
{
	cursor: pointer;
	border-style: none;
	transition: 0.4s ease;
	text-align: center;
	font-family: Raleway;
	font-size: 100%;
	padding: 2%;
	font-weight: 500;
	color: #2196f3;
	background-color: transparent;
}

.flat-button:hover { background-color: #e9e9e9; }

/* Toggle button */
.toggle-button, .checkbox-button
{
	cursor: pointer;
	transition: 0.4s ease;
	border-style: none;
	background-color: transparent;
	font-size: 100%;
	color: #777;
	font-family: Raleway;
	font-weight: 400;
	text-align: left;
	padding: 1%;
}

.checkbox-button:hover, .toggle-button:hover { color: #333; }

.toggle-button-icon, .checkbox-button-icon
{
	font-size: 110%;
	padding-left: 5px;
}

/* Button's color palette */
.blue-button
{
	background-color: #326fd1;
	color: white;
}

.blue-button:hover { background-color: #397ce8; }

.white-button
{
	border: 1px solid #bbb;
	color: #666;
	background-color: white;
}

.white-button:hover { background-color: #f0f0f0; }

.red-button
{
	border: none;
	background-color: #fe2525;
	color: white;
}

.red-button:hover { background-color: #fe3c3c; }

.lightred-button
{
	background-color: #f63b3b;
	color: white;
}

.gray-button
{
	background-color: #555;
	color: white;
}

.lightred-button:hover { background-color: #f74d4d; }

.clickable-text
{
	background-color: transparent;
	font-weight: 400;
	font-size: 100%;
	font-family: Raleway;
	color: #056eaa;
	text-decoration: underline;
	text-align: center;
	transition: 0.3s ease;
	margin-top: 3%;
}

.clickable-text:hover
{
	color: #0530e8;
	cursor: pointer;
}

@media only screen and (min-width: 768px)
{
	.toggle-button, .button, .raised-button, .flat-button {  padding: 1.5%; font-size: 130%; }
	.button-list * { margin-top: 0%; }

	.circle-button
	{
		height: 50px;
		width: 50px;
		border-radius: 25px;
	}
}

.checklist
{
	margin-bottom: 2%;
	border-radius: 2%;
	border-color: #4b4b49;
}