.do-button, .undo-button, .yellow-button, .small-button, .small-gray-button
{
	display: inline-block;
	white-space: nowrap;
	outline: none;
	height: 32px;
	line-height: 32px;
	overflow: hidden;
	font-size: 13px;
	font-weight: normal;
	border-width: 1px;
	border-style: solid;
	border-radius: 3px;
	text-align: center;
	text-decoration: none;
	padding: 0 19px;
	margin: 0;
	cursor: pointer;
	box-sizing: border-box;
	letter-spacing: normal;
	word-spacing: normal;
	text-decoration: none !important;
}
.do-button:active, .undo-button:active, .yellow-button:active, .small-button:active, .small-gray-button:active, .small-yellow-button:active
{
	transform: translate3D(1px, 1px, 1px);
}
span.do-button, span.undo-button, span.yellow-button, span.small-button, span.small-gray-button { cursor: default; }
.do-button:disabled, .undo-button:disabled, .yellow-button:disabled, .small-button:disabled, .small-gray-button:disabled
{
	background: #ddd !important;
	border-color: #ddd !important;
	color: #999 !important;
	cursor: default !important;
}

/* Gray */
.undo-button, .small-gray-button
{
	background: linear-gradient(#f9f9fa, #c2c2c2);
	border-color: #d3d3d3;
	border-bottom-color: #aaa;
	color: #474747;
	text-decoration: none !important;
}
.undo-button:hover, .small-gray-button:hover
{
	color: #474747;
	background: #e1e1e2;
}
.undo-button:active, .small-gray-button:active, .undo-button.selected, .small-gray-button.selected
{
	background: #d9d9d9;
	background: linear-gradient(#c2c2c2, #f9f9fa);
	color: #474747;
}
.undo-button:disabled, .small-gray-button:disabled
{
	background: #ddd !important;
	border-color: #ddd !important;
	color: #999 !important;
}
.no-buttons-gradient .undo-button, .no-buttons-gradient .small-gray-button
{
	background: #ececec;
	border-color: #ececec;
	color: #333;
	transition-property: background, border-color, color;
	transition-duration: 0.05s;
}
.no-buttons-gradient .undo-button:hover, .no-buttons-gradient .small-gray-button:hover
{
	background: #f0f0f0;
	border-color: #f0f0f0;
	color: #333;
}
.no-buttons-gradient .undo-button:active, .no-buttons-gradient .small-gray-button:active, .no-buttons-gradient .undo-button.selected, .no-buttons-gradient .small-gray-button.selected
{
	background: #ddd;
	border-color: #ddd;
	color: #000;
}

/* Yellow */
.small-yellow-button
{
	display: inline-block;
	white-space: nowrap;
	outline: none;
	overflow: hidden;
	margin: 0;
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	height: 25px;
	line-height: 25px;
	padding: 0 10px;
	border-radius: 2px;
}
.yellow-button, .small-yellow-button
{
	background: linear-gradient(#F0ED04, #EFD21B);
	border: 0;
	border-bottom: 1px solid #AC7B1E;
	border-top: 1px solid #F9F89A;
	color: #000;
	box-shadow: 0 1px 1px #CDB078;
	text-decoration: none !important;
}
.yellow-button:hover, .small-yellow-button:hover
{
	background: #f3f004;
	color: #000;
}
.yellow-button:active, .small-yellow-button:active
{
	background: linear-gradient(#EFD21B, #F0ED04);
}
.no-buttons-gradient .yellow-button, .no-buttons-gradient .small-yellow-button
{
	background: #F0ED04;
	border-color: #F0ED04;
	transition-property: background, color, border-color;
	transition-duration: 0.15s;
}
.no-buttons-gradient .yellow-button:hover, .no-buttons-gradient .small-yellow-button:hover
{
	background: #f3f004;
	border-color: #f3f004;
	color: #000;
}
.no-buttons-gradient .yellow-button:active, .no-buttons-gradient .small-yellow-button:active
{
	background: #EFD21B;
	border-color: #EFD21B;
}

.do-button.big, .undo-button.big, .yellow-button.big
{
	font-size: 150%;
	height: 42px;
	line-height: 42px;
	text-transform: uppercase;
	font-family: var(--font2);
	vertical-align: middle;
	border-radius: 3px;
}
.small-button, .small-gray-button
{
	font-size: 11px;
	height: 25px;
	line-height: 24px;
	padding: 0 10px;
	text-decoration: none !important;
}

.no-border-radius .do-button, .no-border-radius .undo-button,
.no-border-radius .small-button, .no-border-radius .small-gray-button,
.no-border-radius .yellow-button, .no-border-radius .small-yellow-button
{
	border-radius: 0;	
}

/* Colorizing */
.theme-button
{
	background: linear-gradient(var(--button1), var(--button2));
	border-color: var(--button_border);
	color: var(--ThemeButtonTextColor, #fff);
}
.theme-button:hover, .do-button-hoverer:hover .theme-button, .do-button-hoverer:hover .theme-button:hover
{
	background: var(--button_hover);
	color: var(--ThemeButtonTextHoverColor, #fff);
	border-color: var(--button_hover);
}
.theme-button:active, .theme-button.selected
{
	background: linear-gradient(var(--button2), var(--button1));
	color: var(--ThemeButtonTextHoverColor, #fff);
	border-color: var(--button_hover);
}
.button-gradient { background: linear-gradient(var(--button1), var(--button2)); }
.button-gradient:hover, a.button-gradient:hover { background: var(--button_hover); }
.no-buttons-gradient .theme-button, .no-buttons-gradient .button-gradient
{
	background: var(--button_color);
	border-color: var(--button_border);
	transition-property: background, color, border-color;
	transition-duration: 0.15s;
}
.no-buttons-gradient .theme-button:hover, .no-buttons-gradient .button-gradient:hover, .no-buttons-gradient a.button-gradient:hover
{
	background: var(--button_hover);
	border-color: var(--button_hover);
}
.no-buttons-gradient .theme-button:active, .no-buttons-gradient .theme-button.selected
{
	background: var(--button2);
	border-color: var(--button2);
}

.credit-button
{
	background: linear-gradient(var(--credit_button1), var(--credit_button2));
	border-color: var(--credit_button_border);
	color: #fff;
}
.credit-button:hover { background: var(--credit_button_hover); color: #fff; }
.credit-button:active { background: linear-gradient(var(--credit_button2), var(--credit_button1)); }

.no-buttons-gradient .credit-button
{
	background: var(--credit_button_color, #9e1566);
	border-color: var(--credit_button_color, #9e1566);
}
.no-buttons-gradient .credit-button:hover
{
	background: var(--credit_button_hover, #9e1566);
	border-color: var(--credit_button_hover, #9e1566);
}
.no-buttons-gradient .credit-button:active
{
	background: var(--credit_button2, #9e1566);
	border-color: var(--credit_button2, #9e1566);
}

/* Close buttons */
.small-close
{
	display: inline-block;
	color: #999;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font-family: Arial;
	outline: none;
	box-sizing: border-box;
}
.small-close:before { content: '\2715'; }
.small-close:hover { color: #000; }
.small-close:active::before
{
	position: relative;
	top: 1px;
	left: 1px;	
}

.small-delete
{
	font-family: "Font Awesome 5 Pro";
	font-weight: 100;
	display: inline-block;
	color: #999;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	outline: none;
	box-sizing: border-box;
}
.small-delete:before { content: '\f2ed'; }
.small-delete:hover { color: #000; }
.small-delete:active { transform: translate3D(1px, 1px, 1px); }

.big-close
{
	display: block;
	position: absolute;
	top: 10px;
	right: 14px;
	z-index: 1;
	cursor: pointer;
	text-decoration: none;
	text-shadow: none;
	color: #999;
	font-size: 30px;
	line-height: 30px;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	outline: none;
}
.big-close:hover
{
	color: #000;
	text-decoration: none;
}
.big-close:after
{
	content: '\2715';
	line-height: 1;
	transition: color 0.02s ease-out;
	color: inherit;
}

.wide-close
{
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 18px 15px;
	margin: 0;
	background: #f0f0f0;
	color: #000;
	text-align: center;
	font-size: 20px;
	text-decoration: none;
	border: 0;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
	transition: background-color 0.2s;
}
.wide-close:hover
{
	background: #f5f5f5;
}
.wide-close:active
{
	background: #e0e0e0;
	transform: translate3D(1px, 1px, 1px);
}
.wide-close:before
{
	content: '\f00d';
	font-family: 'Font Awesome 5 Pro';
	margin-right: 7px;
}

.font-icon
{
	display: inline-block;
	vertical-align: middle;
	font-family: 'Font Awesome 5 Pro';
	font-weight: 400;
	color: var(--IconColor, #ee8b17);
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	outline: none;
	text-decoration: none;
}
.font-icon:active
{
	transform: translate3d(1px, 1px, 1px);
}
.font-icon::before { color: var(--IconColor, #ee8b17); }
.font-icon.empty { color: var(--IconColorEmpty); }