/* Buttons */
.button {
	margin: var(--size-3);
	color: white;
	background-color: var(--primary);
	font-weight: bold;
	border-radius: var(--size-4);
	outline: none;
	box-shadow: var(--shadow);
	border: var(--size-1) solid var(--primary);
	padding: var(--size-5) var(--size-7);
	font-size: 1rem;
}
.button:hover {
	background-color: var(--primary-dark);
	border-color: var(--primary-dark);
}
.button:active {
	background-color: var(--primary-darker);
	border-color: var(--primary-darker);
}
.button.disabled {
	background-color: var(--accent);
	border-color: var(--accent);
}

.button.secondary {
	color: var(--primary);
	background-color: white;
	font-weight: bold;
}
.button.secondary:hover {
	background-color: #EBEEEF;
}
.button.secondary:active {
	background-color: #EBEEEF;
	border-color: var(--primary-darker);
	color: var(--primary-darker);
}
.button.secondary.disabled {
	border-color: var(--accent);
	color: var(--accent);
}

.button:not(.transparent) .fas {
	margin-right: var(--size-5);
}

.button.transparent {
	color: var(--primary);
	box-shadow: none;
	background-color: transparent;
	border-color: transparent;
}
.button.transparent:hover {
	color: var(--primary-dark);
}
.button.transparent:active {
	color: var(--primary-darker);
}
.button.transparent.disabled {
	color: var(--accent);
}

.button.icon-only {
	padding-left: 0;
	padding-right: 0;
}


/* Text inputs */
.text-input-container {
	margin: var(--size-3);
	display: flex;
}
.text-input {
	flex: 1;
	resize: vertical;
	padding: var(--size-5);
	background-color: var(--primary-faded);
	/* --accent-faded (#e7e7e7) against this background (#ECF4F6) reads as
	   almost no border at all -- too close in luminance to tell there's a
	   box to fill in. A darker, still-light grey keeps the same restrained
	   look but is actually visible. */
	border: 0.1rem solid #b7bcc2;
	border-radius: var(--size-4);
	display: block;
	outline: none;
}
.text-input:focus, .button:focus, .combobox:focus {
	box-shadow: 0 0 var(--size-4) var(--primary);
	border-color: var(--primary);
}
.text-input::placeholder {
	color: var(--accent);
}


/* ==== Comboboxes (combination input/select fields) ========================================== */

.combobox {
	outline: none;
	display: block;
	cursor: pointer;
	flex: 1;
}

.combobox-container {
	position: relative;
	display: flex;
}

.combobox-icon-container {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	pointer-events: none;
	height: 1.8rem;
}

ul.combobox-list {
	border-radius: var(--size-4);
	/* 	setting max height to be half of window height as a work around to fix the combo-box overflow issue (see ticket # 12661)
	 *	This should fix the issue regardless of the combo-box position.
	 */
	max-height: 50vh;
	overflow: scroll;
	overflow-x: hidden;
}

li.combobox-list-item {
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}

li.combobox-list-item a {
	color: #000;
}

table.easyAjaxFileUploadProgressContainer td {
	border: 0;
}

input[type=number].phone_3 { width: var(--size-9); height: var(--size-7); }
input[type=number].phone_4 { width: var(--size-9); height: var(--size-7);}
input[type=number].phone_5 { width: var(--size-9); height: var(--size-7);}