/* Add your custom CSS overrides to this file. */

@media (min-width: 768px) {
	.container {
		width: 100%;
	}
}

@media (min-width: 992px) {
	.modal-xl {
		width: 900px;
	}
	.modal-med {
		width: 800px;
	}

	.modal-sm {
		width: 700px;
	}

	.container {
		width: 100%;
	}
}

@media (min-width: 1200px) {
	.modal-xl {
		width: 1100px;
	}

	.modal-med {
		width: 900px;
	}

	.modal-sm {
		width: 700px;
	}

	.container {
		width: 90%;
		max-width: 1500px;
	}
}

.modal-xl .modal-header button.close span {
	color: #F0F0F0;
}

.modal-content {
	max-height: 95vh;
}

.modal-body {
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 10px; /*  for scrollbar */
}

.colorRed {
	color: var(--primary-color) !important; /* a bit strange ... */
}

.btn-fullwidth {
	width: 100%;
}

.btn-primary-inverse {
	border: 1px solid var(--primary-color);
	background: #FFF;
	color: var(--primary-color);
}

	.btn-primary-inverse:hover,
	.btn-primary-inverse:focus {
		color: #FFF;
		background: var(--button-highlight-color);
	}


.btn.btn-dashboard, .btn-mini {
	height: 20px;
	padding: 0 6px;
	line-height: 18px;
	font-size: 10px;
}

.btn-default.btn-dashboard, .btn-mini.btn-default {
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
}

	.btn-default.btn-dashboard:hover, .btn-mini.btn-default:hover {
		background: var(--primary-color);
		color: #FFF;
	}

	.btn-default.btn-dashboard[disabled] {
		border: 1px solid #777;
		color: #777;
	}

		.btn-default.btn-dashboard[disabled]:hover {
			background: var(--primary-color);
		}
/* Button Icons */

.btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

	.btn-icon .icon {
		display: block;
		background-size: cover;
		background-position: center center;
		margin-right: 5px;
	}

.btn-basket {
	height: 43px;
	font-size: 16px;
}

	.btn-basket .icon-quote {
		background-image: url('images/icon_button-larger_save_2x.png');
		height: 27px;
		width: 27px;
	}

	.btn-basket .icon-checkout {
		background-image: url('images/icon_button-larger_checkout-white_2x.png');
		height: 30px;
		width: 35px;
	}

.btn-minibasket {
	height: 35px;
	margin-bottom: 10px;
}

	.btn-minibasket .icon-quote {
		background-image: url('images/icon_button_save_2x.png');
		height: 22px;
		width: 22px;
		flex: 0 0 22px;
	}

	.btn-minibasket .icon-checkout {
		background-image: url('images/icon_button_checkout-white_2x.png');
		height: 25px;
		width: 29px;
		flex: 0 0 29px;
	}

	.btn-minibasket .icon-viewcart {
		background-image: url('images/icon_button_viewcart-white_2x.png');
		height: 26px;
		width: 29px;
		flex: 0 0 29px;
	}


/* Mini basket */

.closeNotifyLink {
	top: 15px;
	right: 30px;
	position: absolute;
}

.sectionHeader {
	border-bottom: 1px solid #8C8B8C;
	margin: 20px 0 10px;
	position: relative;
	padding: 0 0 6px;
}

	.sectionHeader h3 {
		margin: 0;
		font-weight: 700;
		font-size: 18px;
		letter-spacing: 0;
		display: inline-block;
	}

	.sectionHeader .collapse-link {
		position: absolute;
		right: 0;
		top: 0;
		height: 20px;
		width: 20px;
		border: 1px solid #8C8B8C;
		text-align: center;
		line-height: 100%;
	}

		.sectionHeader .collapse-link:after {
			content: "\2212";
			font-size: 21px;
			height: 20px;
			display: block;
			line-height: 18px;
			color: #777;
		}

		.sectionHeader .collapse-link.collapsed:after {
			content: "\002B";
		}

.inline-labels .form-label {
	height: 36px;
	text-align: right;
	line-height: 36px;
	padding-right: 0;
}

/* Clickable Rows */
tr.clickable {
	cursor: pointer;
	transition: background-color 0.3s, opacity 0.3s;
}

	tr.clickable:hover {
		background-color: var(--row-highlight-color);
		/* opacity: 0.9; */
	}

		tr.clickable:hover td {
			color: #A0A0A0;
		}

/* Patient Search Page */

#PatientSearchResults {
	margin-top: 3em;
}

	#PatientSearchResults .result-msg {
		border-top: 0;
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		text-align: center;
		padding: 0;
	}

		#PatientSearchResults .result-msg .desc1 {
		}

		#PatientSearchResults .result-msg .desc2 {
			font-weight: bold;
			color: var(--primary-color);
		}


.create-patient-button-wrapper {
	text-align: center;
	margin: 30px 0;
}

#add-patient-form .input-group-btn {
	padding: 30px 0;
}

.benefits-verification-msg {
	border: 2px solid var(--primary-color);
	padding: 10px 20px;
}

	.benefits-verification-msg p {
		color: var(--primary-color);
		font-weight: bold;
	}

.carrier-vob-support {
	height: 40px; /* constant height regardless of whether or not it displays phone + real-time or just phone*/
}

	.carrier-vob-support .single-vob-support-message {
		padding-top: 7px; /* if only one vob support message is shown, center it vertically*/
	}

	.carrier-vob-support i.fa-check {
		color: green;
		margin-right: 10px;
	}

	.carrier-vob-support i.fa-times {
		color: red;
		margin-right: 13px;
	}


.patient-is-div {
	margin-top: 15px; /* Fix alignment issues between left and right column rows */
}

	.patient-is-div .patient-is-radio {
		margin-top: 7px; /* center on label */
		margin-right: 10px;
	}

/* Patient Dashboard */
.switchPatientsContainer {
	position: relative;
	height: 0;
}

	.switchPatientsContainer .btn {
		position: absolute;
		top: 0;
		right: 0;
	}


.patientInfoTable {
	width: 100%;
	color: #777;
	font-size: 16px;
}

	.patientInfoTable th {
		text-align: right;
		padding: 3px 15px 3px 0;
		vertical-align: top;
	}

	.patientInfoTable td {
		min-width: 60%;
	}

.sectionHeader .header-buttons {
	position: absolute;
	right: 40px;
	top: -2px;
}

.benefitsTable {
}

.patientDashboardTable {
	width: 100%;
}

	.patientDashboardTable th {
		color: #999;
		font-weight: normal;
		padding: 2px;
		font-size: 12px;
	}

	.patientDashboardTable td {
		border-top: 1px solid #DDD;
		padding: 4px 10px 4px 0;
		color: #777;
	}

#currentHearingAidsContainer p {
	margin-bottom: 0;
}

#currentHearingAidsContainer .thumbOuterWrapper {
	width: 100%;
	padding-top: 100%;
	position: relative;
}

#currentHearingAidsContainer .thumbInnerWrapper {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 1px solid #DDDDDD;
	align-items: center;
}

	#currentHearingAidsContainer .thumbInnerWrapper img {
		width: 100%;
	}

.tableActionIcon {
	display: inline-block;
	margin: 0 5px;
	background-position: top center;
	background-size: contain;
	background-repeat: no-repeat;
	text-align: center;
	font-size: 8px;
	color: var(--primary-color);
}

a.tableActionIcon:hover {
	color: var(--primary-color);
}

.tableActionIcon.edit {
	background-image: url('images/icon_edit_2x.png');
	min-width: 20px;
	padding-top: 23px;
}

.tableActionIcon.load {
	background-image: url('images/icon_load_2x.png');
	min-width: 22px;
	padding-top: 23px;
}

.tableActionIcon.cancel {
	background-image: url('images/icon_cancel_2x.png');
	min-width: 20px;
	padding-top: 23px;
}

.tableActionIcon.order {
	background-image: url('images/icon_checkout_2x.png');
	min-width: 22px;
	padding-top: 23px;
}

.tableActionIcon.print {
	background-image: url('images/icon_print.png');
	min-width: 22px;
	padding-top: 23px;
}

.sectionHeader .info-text {
	font-weight: normal;
	font-style: italic;
}

/* font-awesome default colors */

i.fa-bolt {
	color: gold;
}

i.fa-check, i.fa-check-square-o {
	color: green;
}

.btn-primary i.fa-check {
	color: limegreen;
}

i.fa-phone {
	color: #090;
}

.btn-primary i.fa-phone {
	color: inherit;
}

i.fa-times,
i.fa-times-circle,
i.fa-times-circle-o,
i.fa-trash,
i.fa-clock-o.alarm {
	color: firebrick;
}

i.fa-warning {
	color: goldenrod;
}

i.fa-asterisk {
	color: firebrick;
}

	i.fa-asterisk.conditionally-required {
		color: darkorange;
	}

/* these elements are getting in the way of drop-down arrows on select elements */
.required-field-block select + .required-icon,
.required-field-block .chosen-container + .required-icon {
	pointer-events: none;
}

/* add styling for conditionally required icons in required field blocks */
.required-field-block .required-icon.conditionally-required-icon .text {
	color: darkorange;
}

/* used to style a "*" character as a required "icon" */
i.required-icon {
	color: #800;
	font-size: xx-small;
	vertical-align: super;
}

i.conditionally-required-icon {
	color: darkorange;
	font-size: xx-small;
	vertical-align: super;
}

.btn-primary i.fa.fa-warning {
	color: gold;
}

.btn-primary i.fa-save,
.btn-primary i.fa-send,
.btn-primary i.fa-times-circle-o,
.btn-primary i.fa-times,
.btn-primary i.fa-plus,
.btn-primary i.fa-upload,
.btn-primary i.fa-shopping-cart,
.btn-primary i.fa-paperclip {
	color: white;
	margin-right: 5px;
}

/* ARG only to avoid conflict with highlight-color */
.btn-primary:hover i.fa-warning {
	color: orange;
}


i.fa-file-pdf-o {
	color: #F40F02; /* adobe logo color */
}

/* use to re-color one of the above back to the default color */
i.fa.restore-color {
	color: inherit;
}

i.fa-primary-color {
	color: var(--primary-color);
}

i.fa-error-color {
	color: firebrick;
}

i.fa.fa-large {
	font-size: 1.5em;
}

i.fa.fa-med {
	font-size: medium;
}

i.fa.fa-small {
	font-size: small;
}

i.fa.fa-smaller {
	font-size: smaller;
}

i.fa.fa-x-small {
	font-size: x-small;
}

i.fa.fa-xx-small {
	font-size: xx-small;
}

i.fa.fa-align-super {
	vertical-align: super;
}

i.fa.fa-align-top {
	vertical-align: text-top;
}

.pad-left {
	padding-left: 5px;
}

.pad-right {
	padding-right: 5px;
}

.pad-sides {
	padding-left: 5px;
	padding-right: 5px;
}

.pad-top {
	padding-top: 5px;
}

.pad-bottom {
	padding-bottom: 5px;
}

/* Icon padding */
i.pad-left {
	padding-left: 3px;
}

i.pad-right {
	padding-right: 3px;
}

i.pad-sides {
	padding-left: 3px;
	padding-right: 3px;
}

button.icon-only {
	background: none;
	border: none;
}

.icon-button {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 2px;
}

/* Contains annotation icons that */
.annotation-container {
}

.superscript {
	vertical-align: super;
}

.align-top {
	vertical-align: top;
}

.align-middle {
	vertical-align: middle;
}

.nowrap {
	white-space: nowrap;
}

/* Quotes */
.quote-options {
	padding: 0px 30px 30px 30px;
}

	.quote-options h2 {
		font-weight: 600;
		text-align: center;
		line-height: 1.2em;
		margin-top: 60px;
		margin-bottom: 40px;
	}

		.quote-options h2 strong {
			font-weight: 900;
		}

	.quote-options .options {
		display: flex;
	}

	.quote-options .option {
		border: 1px solid var(--primary-color);
		background-color: white;
		padding: 20px;
		display: block;
		text-align: center;
		margin: 0 20px;
		flex: 1;
	}

		.quote-options a.option:hover,
		.quote-options .option a:hover {
			color: var(--primary-color);
		}

		.quote-options .option .icon {
			display: block;
			margin: 0 auto 5px;
			background-size: cover;
			background-position: center center;
		}

			.quote-options .option .icon.quote {
				background-image: url('images/icon_modal_save_2x.png');
				width: 52px;
				height: 52px;
			}

			.quote-options .option .icon.remove {
				background-image: url('images/icon_modal_remove_2x.png');
				width: 42px;
				height: 50px;
			}

			.quote-options .option .icon.cancel {
				background-image: url('images/icon_modal_cancel_2x.png');
				width: 52px;
				height: 52px;
			}

			.quote-options .option .icon.order {
				background-image: url('images/icon_modal_order_2x.png');
				width: 59px;
				height: 50px;
			}

			.quote-options .option .icon.keep {
				background-image: url('images/icon_modal_order_2x.png');
				width: 59px;
				height: 50px;
			}

		.quote-options .option .title {
			color: var(--primary-color);
			font-size: 27px;
			text-transform: uppercase;
			display: block;
		}

		.quote-options .option .description {
			color: var(--primary-color);
			display: block;
			padding: 0 10px;
		}

	.quote-options .quoteForm {
		margin: 20px 0 0;
	}

	.quote-options .quoteDays {
		color: var(--primary-color);
		font-weight: 400;
	}

		.quote-options .quoteDays .form-control {
			display: inline-block;
			width: 34px;
			height: 30px;
			padding: 3px;
			text-align: center;
		}

	.quote-options .quoteForm .form-label {
		text-align: left;
		margin-bottom: 0;
		font-weight: 400;
		display: block;
	}

#save-as-quote-form {
	padding: 40px 40px;
}

	#save-as-quote-form label {
		font-weight: normal;
	}

	#save-as-quote-form h2 {
		margin-bottom: 30px;
		font-size: 22px;
		font-weight: 900;
		color: #777;
		letter-spacing: -1px;
		margin-top: 0;
	}

	#save-as-quote-form .quoteDays {
		color: var(--primary-color);
		font-size: 16px;
		margin-bottom: 20px;
	}

		#save-as-quote-form .quoteDays .form-control {
			width: 40px;
			display: inline-block;
		}

	#save-as-quote-form textarea {
		height: 100px;
	}

.quoteNotes {
	margin-top: 10px;
	margin-bottom: 0;
	font-style: italic;
	line-height: 1.2em;
}

.panel-primary {
	border-color: var(--primary-color);
}

/* Meta-data headers viewable internally on view benefits and verify benefits*/
.meta-data {
	color: black;
	font-size: 8pt;
}

.header-link:hover {
	text-decoration: underline;
	color: var(--primary-color);
}

/* support widget */
.support-widget {
	position: relative;
}

	.support-widget .support-icon-container {
		cursor: pointer;
		color: var(--primary-color);
	}

	.support-widget .support-form-container {
		position: absolute;
		top: 0;
		right: -1px; /* hide a tiny bit of the icon that shows */
		width: 400px;
		background: whitesmoke;
		border: 1px solid #ccc;
		border-radius: 8px; /* rounded corners */
		padding: 15px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		z-index: 1000;
	}

	.support-widget .support-form .validation-summary-errors ul {
		list-style-type: none;
		padding-left: 0px;
	}

		.support-widget .support-form .validation-summary-errors ul li {
			margin-left: 0px;
		}

	.support-widget .support-form hr {
		margin-top: 0;
		margin-bottom: 10px;
		border-color: #CCC;
	}

	.support-widget .close-support-button {
		cursor: pointer;
		position: absolute;
		top: 5px;
		right: 5px;
		border: none;
		background: none;
		color: #777;
		z-index: 1000;
	}

	/* Some of these values are specified to prevent the patient dashboard modals from overwriting the styles */
	.support-widget h3 {
		color: var(--primary-color);
		margin-top: 0px;
		text-align: center;
		letter-spacing: normal;
		font-weight: normal;
		font-size: 24px;
		display: block;
		margin-bottom: 10px;
	}

	.support-widget .instructions {
		font-style: italic;
	}

.store-menu .support-widget {
	padding-top: 10px;
}


/* Gor use when the support widget should appear to the right of header text, 
which otherwise forces the widget onto a newline (if not included in the header),
or passes the header styling to the widget (if included in the header). To use,
create a div with this class that contains both the header and the support widget.
*/
.flex-header-container {
	display: flex;
}

	.flex-header-container .support-widget {
		padding-left: 10px;
	}

/* Patient Modals */

/* Ensure the dropdown icon appears over the required icon */
.patient-modal .chosen-drop {
	z-index: 3001;
}

.patient-modal .btn-primary,
.patient-modal .btn-primary-inverse {
	margin-left: 2px !important;
	margin-right: 2px !important;
}

/* used in Html.AutoCompleteTextBoxFor */
.patient-modal .ui-autocomplete {
	max-height: 150px;
	overflow-y: scroll;
	overflow-x: hidden;
}

/* SweetAlerts with longer messages or more text on buttons. */
.swal-wide {
	width: 600px !important;
}

	.swal-wide p {
		text-align: left;
		padding-left: 20px;
		padding-right: 20px;
	}

/* fix field-validation-error class being overridden by article.account-content span */
article span.field-validation-error {
	color: #cc5965;
}

/* clear icon */
/* group an input with an overlay icon. Used to separate the input and the overlay form any input-group-addons that would interfere with positioning the overlay */
.input-overlay-group {
	position: relative;
}

.clear-input-icon {
	position: absolute;
	top: 8px;
	right: 10px;
	cursor: pointer;
	color: #888 !important;
	z-index: 2;
}

	.clear-input-icon:hover {
		color: #666 !important;
	}

/* Insurance Cards in Patient Insurance Modals */

.active-drag .card-drop .card-placeholder {
	background-color: #CCC;
}

.active-drag .card-drop .show-with-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	z-index: 1;
	pointer-events: none;
}

/* surrounding highlight */
/*	.active-drag .card-drop::before {
		content: "";
		position: absolute;
		top: -5px;
		left: -5px;
		right: -5px;
		bottom: -5px;
		border-radius: 10px;
		background: lightgray;
		z-index: -1;
		pointer-events: none;
	}*/


.card-area {
	text-align: center;
}

	.card-area .card-preview {
		position: relative;
		text-align: center;
		cursor: pointer;
		height: 200px;
		width: 320px;
		line-height: 1;
		padding: 0;
		margin: 0;
		z-index: 0;
	}

		.card-area .card-preview.zoom-in {
			height: 400px;
			width: 640px;
		}

		.card-area .card-preview .preview-image {
			border-color: #337ab7;
			background-color: #f5faff;
			object-fit: cover;
			object-position: top;
			width: 100%;
			height: 100%;
		}

		.card-area .card-preview .card-placeholder .text-muted {
			font-size: 18px;
		}

	.card-area .button-bar span {
		color: #777;
		padding-right: 10px;
		font-weight: bold;
		font-size: larger;
	}

	.card-area .button-bar i {
		color: var(--primary-color);
	}

		.card-area .button-bar i.fa-trash {
			color: firebrick;
		}

	.card-area .card-placeholder {
		color: gray;
		font-size: 30px;
		padding: 20px;
		border: 2px dashed #ccc;
		border-radius: 12px;
		width: 100%;
		height: 100%;
	}

/* hidden file input that is triggered on a button press */
form input.hidden-file-input {
	/* In theory some browsers allow "fake" hidden but not real hidden, but this doesn't seem to be the case in practice
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	opacity: 0;*/
	display: none;
}

.angry,
.angry p,
.angry span {
	color: firebrick !important;
}

/* Pre-auth */
.pre-auth-table {
	width: 100%;
}

	.pre-auth-table th {
		color: #999;
		font-weight: normal;
		padding: 2px;
		font-size: 12px;
	}

	.pre-auth-table td {
		border-top: 1px solid #DDD;
		padding: 4px 10px 4px 0;
		color: #777;
	}

.prescription-icon:before {
	content: "℞";
}

/* style like an inactive form control */
.pre-auth-container .form-control-static {
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #999;
	background-color: #EEE;
	font-weight: bold;
	width: 100%;
}

.pre-auth-container .form-group .form-label {
	line-height: normal;
	display: flex;
	justify-content: right;
	align-items:center;
}

.pre-auth-container .btn {
	margin-right: 4px;
}

.pre-auth-container .instructions {
	font-style: italic;
}

.pre-auth-container i.fa-info-circle,
#edit-pre-auth-response-container i.fa-info-circle {
	color: #206BA8;
}

.pre-auth-container .pre-auth-status {
	font-style: italic;
	display: flex;
	align-items: center;
}

/* Allow other items to appear to the right of the title in the panel heading and section headers */
.pre-auth-container .panel-primary .panel-heading h4.panel-title,
.pre-auth-container .sectionHeader h3 {
	display: inline;
}

i.pre-auth-status-icon.fa-check {
	color: green;
}

	i.pre-auth-status-icon.fa-check.mixed-result {
		color: gold;
	}
/* Default color
i.pre-auth-status-icon.fa-pencil-square-o
*/

i.pre-auth-status-icon.fa-hourglass-start,
i.pre-auth-status-icon.fa-hourglass-half {
	color: darkgray;
}
i.pre-auth-status-icon.fa-times-circle-o {
	color: firebrick;
}
i.pre-auth-status-icon.fa-warning {
	color: goldenrod;
}

/* Hover is causing the buttons to shrink to a 1 px border-width */
#pre-auth-modal-content .pre-auth-container .btn:hover {
	border-width: 2px;
}

.pre-auth-mini-table {
	width: auto;
}

	.pre-auth-mini-table th {
		color: #999;
		font-weight: normal;
		padding: 2px 10px;
		font-size: 12px;
	}

	.pre-auth-mini-table td {
		border-top: 1px solid #DDD;
		padding: 4px 10px;
		color: #777;
	}

/* Hide border between attachment type label and attachments of that type */
#pre-auth-attachments-table td.attachment-type {
	border-bottom: none;
}

/* Hide border between attachment type label and attachments of that type */
#pre-auth-attachments-table tr.attachment-row td:first-child {
	border: none;
}

td.response-overdue {
	color: firebrick !important;
}

td.response-due-soon {
	color: green !important;
}

/* Checklist Issue Styles */
li.checklist-issue {
}

/* needs to have more specificity than article.account-content li to avoid being overwritten*/
ul li.checklist-issue-warning {
	list-style-type: disc;
	color: red;
}

/* needs to have more specificity than article.account-content li to avoid being overwritten*/
ul li.checklist-issue-info {
	list-style-type: disc;
	color: gray;
}

.checklist-warning {
	color: red;
}

.error-message { 
	color: firebrick;
}