/*--------------------------------------------------*/
/*	BUTTONS
/*--------------------------------------------------*/

.button {
	position: relative;
	display: inline-block;
	cursor: pointer;

	min-width: 10px;
	height: 44px;

	padding: 10px 15px;
	outline: 0 !important;
	border: 0 !important;

	font-size: 1em;
	font-weight: 700;
	line-height: 24px;

	text-align: center;
	text-transform: capitalize;
	text-decoration: none;

	vertical-align: baseline;
	white-space: nowrap;
}

.button,
.button:hover,
.button:focus,
.button:hover:after {
	color: #FFFFFF !important;
}

.button.empty {
	width: 44px !important;
	padding: 0 !important;
}

.button.read-more {
	margin: 15px auto 0;
	text-align: center !important;
}

/*--------------------------------------------------*/
/*	DISABLED
/*--------------------------------------------------*/

.button[disabled],
.button[disabled]:after,
.button.disabled,
.button.disabled:after {
	cursor: not-allowed;
	color: #FFFFFF !important;
	background-color: #DBDBDB !important;
}

.button[disabled]:hover,
.button[disabled]:focus,
.button[disabled]:after,
.button.disabled:hover,
.button.disabled:focus,
.button.disabled:after {
	color: #DBDBDB !important;
	background-color: #F4F4F4 !important;
}

/*--------------------------------------------------*/
/*	COLORS
/*--------------------------------------------------*/

.button,
.button:after,
.button:hover,
.button:focus,
.button:hover:after {
	color: #FFFFFF;
	text-align: center;
}

/*--- DEFAULT ---*/
.button,
.button:after {
	background-color: var(--color-orange);
}

.button:hover,
.button:focus,
.button:not(.empty):after,
.button.empty:hover:after {
	background-color: var(--color-orange-light);
}

/*--- BLACK ---*/
.button.black,
.button.black:after {
	background-color: var(--color-black);
}

.button.black:hover,
.button.black:focus,
.button.black:not(.empty):after,
.button.black.empty:hover:after {
	background-color: var(--color-black-light);
}

/*--- GRAY ---*/
.button.gray,
.button.gray:after {
	background-color: var(--color-gray);
}

.button.gray:hover,
.button.gray:focus,
.button.gray:not(.empty):after,
.button.gray.empty:hover:after {
	background-color: var(--color-gray-light);
}

/*--- ORANGE ---*/
.button.orange,
.button.orange:after {
	background-color: var(--color-orange);
}

.button.orange:hover,
.button.orange:focus,
.button.orange:not(.empty):after,
.button.orange.empty:hover:after {
	background-color: var(--color-orange-light);
}

/*--- BLUE ---*/
.button.blue,
.button.blue:after {
	background-color: var(--color-blue);
}

.button.blue:hover,
.button.blue:focus,
.button.blue:not(.empty):after,
.button.blue.empty:hover:after {
	background-color: var(--color-blue-light);
}

/*--- CYAN ---*/
.button.cyan,
.button.cyan:after {
	background-color: var(--color-cyan);
}

.button.cyan:hover,
.button.cyan:focus,
.button.cyan:not(.empty):after,
.button.cyan.empty:hover:after {
	background-color: var(--color-cyan-light);
}

/*--- RED ---*/
.button.red,
.button.red:after {
	background-color: var(--color-red);
}

.button.red:hover,
.button.red:focus,
.button.red:not(.empty):after,
.button.red.empty:hover:after {
	background-color: var(--color-red-light);
}

/*--- GREEN ---*/
.button.green,
.button.green:after {
	background-color: var(--color-green);
}

.button.green:hover,
.button.green:focus,
.button.green:not(.empty):after,
.button.green.empty:hover:after {
	background-color: var(--color-green-light);
}

/*--- PURPLE ---*/
.button.purple,
.button.purple:after {
	background-color: var(--color-purple);
}

.button.purple:hover,
.button.purple:focus,
.button.purple:not(.empty):after,
.button.purple.empty:hover:after {
	background-color: var(--color-purple-light);
}

/*--------------------------------------------------*/
/*	ICONS
/*--------------------------------------------------*/

.button.account,
.button.add,
.button.arrow-left,
.button.arrow-right,
.button.cancel,
.button.close,
.button.copy,
.button.delete,
.button.download,
.button.edit,
.button.invoice,
.button.key,
.button.message,
.button.more,
.button.print,
.button.refresh,
.button.search,
.button.settings,
.button.sign-up,
.button.submit,
.button.window-maximize,
.button.window-minimize,
.button.window-new,
.button.window-refresh,
.button.window-restore {
/*
	padding-left: 44px;
*/
	padding-right: 59px; /* 44px + 15px */
}

.button:after {
	font-family: Material-Design-Iconic-Font;

	position: absolute;
	top: 0;
	right: 0;

	width: 44px;
	height: 44px;

	padding: 10px;
	line-height: 24px;
}

.button.account:after {
	content: "\f207";
	font-size: 150%;
}

.button.add:after {
	content: "\f278";
/*
	font-size: 200%;
*/
}

.button.arrow-left:after {
	content: "\f2ea";
}

.button.arrow-right:after {
	content: "\f2ee";
}

.button.cancel:after {
	content: "\f119";
}

.button.close:after {
	content: "\f136";
}

.button.copy:after {
	content: "\f237";
	font-size: 125%;
}

.button.delete:after {
	content: "\f154";
}

.button.download:after {
	content: "\f220";
}

.button.edit:after {
	content: "\f158";
}

.button.invoice:after {
	content: "\f109";
}

.button.key:after {
	content: "\f183";
}

.button.message:after {
	content: "\f266";
}

.button.more:after {
	content: "\f19b";
	font-size: 150%;
}

.button.print:after {
	content: "\f1b0";
	font-size: 150%;
}

.button.refresh:after {
	content: "\f1b9";
}

.button.search:after {
	content: "\f1c3";
}

.button.settings:after {
	content: "\f1c6";
}

.button.sign-up:after {
	content: "\f109";
}

.button.submit:after {
	content: "\f301";
}

.button.window-maximize:after {
	content: "\f1ea";
	font-size: 150%;
}

.button.window-minimize:after {
	content: "\f1eb";
	font-size: 150%;
}

.button.window-new:after {
	content: "\f1a3";
	font-size: 150%;
}

.button.window-restore:after {
	content: "\f1ec";
	font-size: 150%;
}

.button.window-refresh:after {
	content: "\f1b5";
	font-size: 150%;
}

/*--------------------------------------------------*/
/*	SPECIALS
/*--------------------------------------------------*/

.button.more,
.button.more:after,
.button.more:hover,
.button.more:focus,
.button.more:hover:after {
	color: #404040;
}

/*--- color ---*/
.button.more,
.button.more:after {
	background-color: transparent;
}

.button.more:hover,
.button.more:focus,
.button.more:not(.empty):after,
.button.more.empty:hover:after {
	background-color: #F0F0F0;
}

.button.close,
.button.close:after,
.button.close:hover,
.button.close:focus,
.button.close:hover:after {
	color: #404040;
}

/*--- color ---*/
.button.close,
.button.close:after {
	background-color: transparent;
}

.button.close:hover,
.button.close:focus,
.button.close:not(.empty):after,
.button.close.empty:hover:after {
	background-color: #F0F0F0;
}