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

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

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

	.container {
		width: 100%;
	}
}

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

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

.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: #888;
		border-color: #888;
	}


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

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

	.btn-default.btn-dashboard: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;
}

/* 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;
}

/* these elements are getting in the way of the calendar icon on the date-pickers */
.required-icon {
	pointer-events: none;
}

/* font-awesome default colors */

i.fa-bolt {
	color: gold;
}

i.fa-check {
	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-trash {
	color: firebrick;
}

i.fa-warning {
	color: goldenrod;
}

i.fa-asterisk {
	color: firebrick;
}

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

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-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;
}

.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: 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);
		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 {
			font-size: 27px;
			text-transform: uppercase;
			display: block;
		}

		.quote-options .option .description {
			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;
	}

	#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 .card-image {
			border-color: #337ab7;
			background-color: #f5faff;
			object-fit: cover;
			object-position: top;
			width: 100%;
			height: 100%;
		}

		.card-area .card-preview canvas {
			border-color: #337ab7;
			background-color: #f5faff;
			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%;
	}

/* File Upload Panel Styles */

/* Highlight applied the file placeholder when no preview is present when a file is beign dragged */
.active-drag .file-upload-panel .file-drop .file-placeholder {
	background-color: #CCC;
}

/* Add styling after the file preview to highlight it when a file is being dragged */
.active-drag .file-upload-panel .file-drop .file-preview.show-with-file::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	z-index: 1;
	pointer-events: none;
}

.file-upload-panel {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

	/* displayed when a file preview is not present - div included to increase specificity */
	.file-upload-panel .file-placeholder {
		position: relative;
		height: 200px;
		width: 320px;
		border: 2px dashed #ccc;
		border-radius: 12px;
		cursor: pointer;

		line-height: 1;
		margin: 0;
		padding: 20px;
		text-align: center;
		z-index: 0;
	}
		.file-upload-panel .file-placeholder p {
			color: gray;
			font-size: 30px;
		}

			.file-upload-panel .file-placeholder p .text-muted {
				font-size: 18px;
			}

	/* displayed when a file is present */
	.file-upload-panel .file-preview {
		position: relative;
		text-align: center;
		cursor: pointer;
		height: 200px;
		width: 320px;
		line-height: 1;
		padding: 0;
		margin: 0;
		z-index: 0;
	}

		.file-upload-panel .file-preview.zoom-in {
			height: 400px;
			width: 640px;
		}

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

		.file-upload-panel .file-preview canvas.file-preview-pdf {
			border-color: #337ab7;
			background-color: #f5faff;
			width: 100%;
			height: 100%;
		}

	.file-upload-panel .button-bar i {
		color: var(--primary-color);
	}

		.file-upload-panel .button-bar i.fa-trash {
			color: firebrick;
		}


/* hidden file input that is triggered on a button press */
form input.hidden-file-input {
	/* In theory some browsers don't allow display: none on file inputs, but this doesn't seem to be the case in practice
	If this becomes an issue, we can try the following CSS to hide the input offscreen
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	opacity: 0;*/
	display: none;
}

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

.modal-med-lg {
	width: 700px;
}

.auto-height {
	height: auto !important;
}