/* ------------------ Setup ------------------ */
@media (min-width: 600px) {
	*, .btn, .form-control {
		font-size: 16px;
	}
}
@media (max-width: 599px) {
	*, .btn, .form-control {
		font-size: 14px;
	}
}
* {
	line-height: 135%;
	letter-spacing: .15px;
}
body {
    color: #535b6d;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	letter-spacing: .3px;
	line-height: 1.35;
}
h3, .h3 {
	font-weight: 700;
	font-size: 16px;
	margin: 15px 0;
	color: #202035;
}
h3:first-child, .h3:first-child {
	margin-top: 0;
}
h4, .h4 {
	font-size: 16px;
}
h5, .h5 {
	font-weight: 700;
	margin: 15px 0 7px 0;
}
p:last-child {
	margin-bottom: 0;
}
/* ------------------ Helpers ------------------ */
.template {
	display: none;
}
@media (max-width: 599px) {
	.hide-if-small {
		display: none;
	}
}
.flex-grow {
	flex-grow: 1;
}
/* Visually hide an element but have it accessible in the DOM for screen readers */
.visually-hidden {
	border: 0;
	padding: 0;
	margin: 0;
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
	clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
	clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
	white-space: nowrap;
}
/* ------------------ Transitions ------------------ */
.btn, .form-control {
	transition-duration: 0.35s;
	transition-timing-function: ease;
}
.btn {
	transition-property: color, background-color;
	transition-duration: 0.35s;
	transition-timing-function: ease;
}
.form-control {
	transition-property: color, background-color, box-shadow, padding;
}
/* ------------------ Bootstrap Overrides ------------------ */
/* ------ Styles ------ */
/* Removing Box Shadows */
.btn:active, .btn.active, .form-control, .has-error .form-control, .panel, .btn-group.open .dropdown-toggle, .dropdown-menu, .modal-content {
	box-shadow: none;	
}
/* Removing Borders */
.btn, .form-control, .panel, .panel-heading, .modal-content {
	border: none;
}
.modal-header, .modal-body {
	border-bottom: 0;
}
.modal-footer {
	border-top: 0;
}
/* Rounded Corners */
.modal-content {
	border-radius: 4px;
	background-color: #eef5fb;
}
.panel-heading, .modal-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}
/* Z Index */
.btn-group > .btn:hover, .btn-group-vertical > .btn:hover, .btn-group > .btn:focus, .btn-group-vertical > .btn:focus, .btn-group > .btn:active, .btn-group-vertical > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn.active {
	z-index: initial;
}
/* ------ Structure ------ */
.container {
	max-width: 100%;
}
/* Rows and Columns */
.row, .form-horizontal .form-group {
    margin-left: -10px;
    margin-right: -10px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-left: 10px;
    padding-right: 10px;
}
.input-group .form-control {
    z-index: inherit;
}
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
    z-index: inherit;
}
input[type="file"] {
	display: inline;
}
/* Forms */
.btn, .form-control {
	padding: 7px 12px;
}
.btn {
	white-space: normal;
}
label {
	margin-bottom: 7px;
	font-weight: normal;
}
.inline-form label {
	margin-bottom: 0;
}
.panel-default > .panel-heading {
	background-color: #4c4c5d;
}

/* ------------------ Bootstrap Modifications ------------------ */
/* ------------ Panels ------------ */
.panel {
	width: 600px;
	max-width: 100%;
}
.panel-heading {
	padding: 15px 20px;
}
.panel-body {
	padding: 20px;
}
/* ------ Alerts ------ */
.alert {
	border: 2px solid;
}
alert:not(:first-child) {
	margin-top: 10px;
}
.alert:last-child {
	margin-bottom: 0;
}
/* --- Warning Alert --- */
.alert-warning {
	color: #ff8f3e;
	border-color: #ff8f3e;
}
/* --- Success Alert --- */
.alert-success {
	color: #11d293;
	border-color: #11d293;
}
/* ------------ Buttons ------------ */
.glyphicon.k-icon-left {
	margin-right: 6px;
}

/* --- Button Types --- */
/* Primary */
.btn-primary {
	background: #48a1da;
}
/* Default */
.btn-default {
	background: #7fd7ff;
}
/* Primary & Default */
.btn-default:hover, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default,
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
	background: #0080ba;
}
.btn-primary:focus, .btn-primary.focus, .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary.focus:active, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus,
.btn-default:focus, .btn-default.focus, .btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default.focus:active, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus {
	background: #064d7d;
}
/* Info */
.btn-info {
	background: #9ca6b4;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {
	background:  #535b6d;
}
.btn-info:focus, .btn-info.focus, .btn-info:active:hover, .btn-info.active:hover, .open > .dropdown-toggle.btn-info:hover, .btn-info:active:focus, .btn-info.active:focus, .open > .dropdown-toggle.btn-info:focus, .btn-info.focus:active, .btn-info.active.focus, .open > .dropdown-toggle.btn-info.focus {
	background: #202035;
}
/* Danger */
.btn-danger {
	color: #f25646;
	background: #fff;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
	background: #f25646;
	color: #fff;
}
.btn-danger:focus, .btn-danger.focus, .btn-danger:active:hover, .btn-danger.active:hover, .open > .dropdown-toggle.btn-danger:hover, .btn-danger:active:focus, .btn-danger.active:focus, .open > .dropdown-toggle.btn-danger:focus, .btn-danger.focus:active, .btn-danger.active.focus, .open > .dropdown-toggle.btn-danger.focus {
	background: #c64739;
}
/* Preview */
.btn-preview {
	color: #9673b3;
	background: #fff;
}
.btn-preview:hover, .btn-preview:active, .btn-preview.active, .open > .dropdown-toggle.btn-preview {
	background: #9673b3;
	color: #fff;
}
.btn-preview:focus, .btn-preview.focus, .btn-preview:active:hover, .btn-preview.active:hover, .open > .dropdown-toggle.btn-preview:hover, .btn-preview:active:focus, .btn-preview.active:focus, .open > .dropdown-toggle.btn-preview:focus, .btn-preview.focus:active, .btn-preview.active.focus, .open > .dropdown-toggle.btn-preview.focus {
	background: #9673b3;
}
/* --- Button Groups --- */
/* --- Icons --- */
.btn .glyphicon {
	margin-right: 4px;
}
/* --- Icon Colours --- */
.glyphicon.k-ic-orange {
	color: #ff8f3e;
}
.glyphicon.k-ic-mgrey {
	color: #9ca6b4;
}
.glyphicon.k-ic-red {
	color: #f25646;
}
.glyphicon.k-ic-purple {
	color: #9673b3;
}
/* Icon Hover Colours */
:focus > .glyphicon.k-ich-white, a:hover > .glyphicon.k-ich-white, span:hover > .glyphicon.k-ich-white, li:hover > .glyphicon.k-ich-white, .btn:hover .glyphicon.k-ich-white, .k-ich-white:hover {
	color: #fff;
}
/* ------------ Input Groups ------------ */
/* Labels */
.input-group-addon {
	border: 0;
	color: #ffffff;
	background-color: #9ca6b4;
}
/* ------------ Forms ------------ */
form {
	padding-top: 20px;
	padding-bottom: 10px;
}
/* ------ Vertical Forms ------ */
.form-group .control-label {
	padding-right: 0;
}
.form-horizontal .form-group > .control-label + * ~ * {
	padding-left: 0;
}
/* ------ Radio Buttons ------ */
.form-group {
	margin-bottom: 10px;
}

/* ------ Radio Buttons ------ */
input[type="radio"] {
	margin-right: 4px;
}
/* ------ Checkboxes ------ */
input[type="checkbox"] {
	margin-right: 3px;
}
.k-checkbox input[type="checkbox"] {
    opacity: 0;
	margin-right: 0;
	position: absolute;
	width: 28px;
	height: 28px;
	margin-left: -4px;
	margin-top: -4px;
	cursor: pointer;
}
.k-checkbox input[type="checkbox"] + span {
	display:inline-block;
	vertical-align: middle;
	width:20px;
	height:20px;
	font-size: 12px; /*krevisit; needed for WebQ's font-size 16 */
	box-shadow: 0 0 0 2px rgba(191, 200, 212, 1) inset;
	border-radius: 4px;
	background: #fff;
	margin: -3px 10px 0 -30px;
	cursor: pointer;
}
.k-checkbox label {
	padding-left: 30px;
}
.k-checkbox input[type="checkbox"] + span:before {
	content: none;
	cursor: pointer;
}
.k-checkbox input[type="checkbox"]:checked + span:before {
	font-family: 'Glyphicons Halflings';
	content:"\e013";
	color: #535b6d;
	width: 100%;
	vertical-align: middle;
	text-align: center;
	display: inline-block;
	padding-right: .5pt;
	padding-top: .5pt;
}
.k-checkbox input[type="checkbox"] + span + a {
	margin-left: -2px;
}
/* Focus */
.k-checkbox input[type="checkbox"]:focus + span {
	box-shadow: 0 0 0 2px rgba(127, 215, 255, 1) inset;
}
/* Has Error */
.k-checkbox.has-error input[type="checkbox"] + span {
	box-shadow: 0 0 0 2px rgba(242, 86, 70, 1) inset;
}
/* --- Checkbox In Form --- */
form .k-checkbox input[type="checkbox"] {
	margin-left: -34px;
}
form .k-checkbox input[type="checkbox"] + span {
	margin: -3px 10px 0 -30px;
}
/* ------ Form Fields ------ */
.form-control {
	box-shadow: 0 0 0 2px rgba(156, 166, 180, 1) inset;
}
.form-control:focus {
	box-shadow: 0 0 0 2px rgba(127, 215, 255, 1) inset;
}
.has-error .form-control, .has-error .form-control:focus {
	box-shadow: 0 0 0 2px rgba(242, 86, 70, 1) inset;
}

/* ------------------ Structure ------------------ */
/* ------ Patient pages ------ */
/* Body */
.patient-page-body {
	background-color: #9ca6b4;
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
@media (min-width: 600px) {
	.patient-page-body {
		padding: 20px;
	}
}
@media (max-width: 599px) {
	.patient-page-body {
		padding: 0;
	}
	.panel {
		border-radius: 0;
	}
	.panel-heading {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
}
/* Footer */
.patient-page-footer {
	width: 600px;
	max-width: 100%;
	padding: 20px;
	text-align: center;
	font-weight: 300;
	color: #ffffff;
}
.patient-page-footer,
.patient-page-footer p,
.patient-page-footer span,
.patient-page-footer a {
	font-size: 14px;
}
@media (min-width: 600px) {
	.patient-page-footer {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}
@media (max-width: 599px) {
	.patient-page-footer {
		padding-top: 0;
		padding-bottom: 20px;
	}
}
.patient-page-footer a {
	color: #c9e9ff;
}
.patient-page-footer a:hover, .patient-page-footer a:active {
	color: #ffffff;
}
.patient-page-footer a:focus, .patient-page-footer a:active:hover {
	color:  #fffccf;
}
/* ------------------ Our Elements ------------------ */
/* ------ Loader/Spinner ------ */
/* Animation */
.glyphicon.spinning {
    -webkit-animation: spin-webkit 1.5s infinite linear;
    animation: spin 1.5s infinite linear;
    margin-right: 8px;
}
.glyphicon.spinning-solo {
    margin-right: inherit;
}
@-webkit-keyframes spin-webkit {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}
/* ------ Appointment ------ */
.appointment  {
	background-color: #ffffff;
}
/* --- Appointment Confirmation --- */
.appointment-confirmation {
	padding: 12px 20px;
	display: flex;
	background-color: #11d293;
	color: #ffffff;
}
/* --- Appointment Details --- */
.appointment-detail {
	display: flex;
}
.appointment-detail-label {
	font-weight: 300;
	width: 150px;
	flex-shrink: 1;
	padding-right: 10px;
}
.appointment-detail-info {
	color: #202035;
}
/* ------ Secure Messages ------ */
.secure-messages {
	padding: 0;
}
.secure-messages,
.secure-message-attachments,
.secure-messages-actions {
	background-color: #ffffff;
}
/* --- Message --- */
.secure-message {
	padding: 20px;
	border-bottom: 4px dashed #eef5fb;
}
.secure-message-date {
	color: #9ca6b4;
	font-weight: 300;
}
.secure-message-content {
	white-space: pre-wrap;
	overflow-wrap: break-word;
	color: #202035;
}
/* --- Attachments --- */
.secure-message-attachments {
	margin: -5px;
	padding-top: 15px;
}
.secure-message-attachments .btn {
	font-weight: 300;
	margin: 5px;
}
/* --- Actions --- */
.secure-messages-actions,
.secure-messages-reply-actions {
	display: flex;
	justify-content: flex-start;
}
.secure-messages-print {
	flex-shrink: 0;
}
.secure-messages-reply-actions {
	flex-grow: 1;
}
.secure-messages-reply-actions .input-group {
	width: 100%;
}
@media (min-width: 600px) {
	.secure-messages-actions > * + * {
		padding-left: 10px;
	}
}
@media (max-width: 599px) {
	.secure-messages-actions,
	.secure-messages-reply-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.secure-messages-actions > * + * {
		padding-top: 10px;
	}
}
/* --- Confirmation --- */
.secure-messages-confirmation {
	display: flex;
	justify-content: space-between;
}
.secure-messages-confirmation-buttons {
	align-self: flex-end;
}
@media (min-width: 600px) {
	.secure-messages-confirmation > * + * {
		margin-left: 20px;
	}
	.secure-messages-confirmation-options {
		margin-bottom: -10px;
	}
	.secure-messages-confirmation-options .alert {
		margin-top: 20px;
		margin-bottom: 10px;
	}
}
@media (max-width: 599px) {
	.secure-messages-confirmation {
		flex-direction: column;
	}
}
/* ------ Questionnaires ------ */
.questionnaire-panel {
	background-color: #ffffff;
}
.questionnaire-panel > .panel-body {
	padding: 10px; /* Due to current built in form padding */
}
/* ------ File Upload ------ */
.attachment-upload-form {
	padding-left: 4px;
}
.attachment-upload-form.has-error {
	background-color: #FFF5F5;
	border: 2px solid #AD6262;
}
.attachment-add-button {
	background-color: #768097;
}
.attachments-list {
	margin: 5px 0px;
}
.attachments-list .attachments-list-item + .attachments-list-item {
	margin-top: 5px;
}
/* File */
.attachment-group {
	display: flex;
}
.attachment-group-item {
	padding: 7px 12px;
	float: left;
	background-color: #FFFFFF;
	line-height: 1.42857143;
	display: flex;
	align-items: center;
}
.eFormQItem:not(.eFormQItemErrorHighlight) .attachment-group-item {
	background-color: #eef5fb;
}
.attachment-group .attachment-group-item:first-child {
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}
.attachment-group .attachment-group-item:last-child {
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
}
.attachment-group .attachment-group-item + .attachment-group-item {
	margin-left: 1px;
}
.attachment-preview-link:hover {
	background-color: #9673b3;
}
.attachment-remove-button:hover {
	background-color: #f25646;
}
.attachment-upload-error {
	margin-top: 10px;
	color: #768097;
}
/* Animation */
.attachment-loader,
.attachment-loader:after {
	border-radius: 50%;
	width: 16px;
	height: 16px;
}
.attachment-loader {
	position: relative;
	display: inline-block;
	text-indent: -9999em;
	line-height: 1;
	top: 1px;
	margin-right: 6px;
	border-top: 3px solid #6ccdf6;
	border-right: 3px solid #6ccdf6;
	border-bottom: 3px solid #6ccdf6;
	border-left: 3px solid #eef5fb;
	-webkit-animation: spin-webkit 1.5s infinite linear;
	animation: spin 1.5s infinite linear;
}

/* ------ Workarounds ------ */
/* 3115- hide the pesky Safari autofill icon */
input::-webkit-contacts-auto-fill-button {
	visibility: hidden;
	display: none !important;
	pointer-events: none;
	position: absolute;
	right: 0;
}
/* iFrame for intake forms */
.hideIfIFrame.patient-page-body {
	background: none;
}
.hideIfIFrame .panel {
	background: none;
}
.hideIfIFrame #loading-div-background {
	background: none;
}
#loading-div-background {
	/* Needed for OUtils.showWait */
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background: #003650;
	width: 100%;
	height: 100%;
	z-index: 4000;
}
#loading-div-background #loading-div {
	margin-top: -100px;
	width: 200px; margin-left: -100px;
	left : 50%; top : 50%;
	font-size: 20px;
	background-color: white;
	text-align: center;
	position: absolute;
	padding : 15px 0px 10px 0px;
	border-radius: 30px;
}
.health-messenger-loading-spinner {
	margin-top: 20px;
	text-align: center;
}