/*
 * Opens `@layer bootstrap { … }` so that everything in the Sprockets-bundled
 * application.css manifest below it lands in the bootstrap cascade layer.
 * The matching close brace lives in _application_layer_close.css, required
 * last by application.css.
 *
 * Rationale: pre-cascade-layer refactor, both legacy_bootstrap and this
 * application stylesheet were unlayered, so the rules across both were
 * authored as Bootstrap-level overrides/extensions, not "above Tailwind."
 * Putting the manifest into the bootstrap layer preserves that intent and
 * lets `tw:*` utilities win over the Bootstrap-era global rules.
 */
@layer bootstrap {
/*! jQuery UI - v1.11.2 - 2014-10-16
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, draggable.css, menu.css, progressbar.css, resizable.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0); /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	min-height: 0; /* support: IE7 */
	font-size: 100%;
}
.ui-accordion .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	position: absolute;
	left: .5em;
	top: 50%;
	margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-button {
	display: inline-block;
	position: relative;
	padding: 0;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	overflow: visible; /* removes extra width in IE */
}
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2.2em;
}
/* button elements seem to need a little more width */
button.ui-button-icon-only {
	width: 2.4em;
}
.ui-button-icons-only {
	width: 3.4em;
}
button.ui-button-icons-only {
	width: 3.7em;
}

/* button text element */
.ui-button .ui-button-text {
	display: block;
	line-height: normal;
}
.ui-button-text-only .ui-button-text {
	padding: .4em 1em;
}
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
	padding: .4em;
	text-indent: -9999999px;
}
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 1em .4em 2.1em;
}
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 2.1em .4em 1em;
}
.ui-button-text-icons .ui-button-text {
	padding-left: 2.1em;
	padding-right: 2.1em;
}
/* no icon support for input elements, provide padding by default */
input.ui-button {
	padding: .4em 1em;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
	position: absolute;
	top: 50%;
	margin-top: -8px;
}
.ui-button-icon-only .ui-icon {
	left: 50%;
	margin-left: -8px;
}
.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
	left: .5em;
}
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
	right: .5em;
}

/* button sets */
.ui-buttonset {
	margin-right: 7px;
}
.ui-buttonset .ui-button {
	margin-left: 0;
	margin-right: -.3em;
}

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}
.ui-dialog {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-se {
	width: 12px;
	height: 12px;
	right: -5px;
	bottom: -5px;
	background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-draggable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: none;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	position: relative;
	margin: 0;
	padding: 3px 1em 3px .4em;
	cursor: pointer;
	min-height: 0; /* support: IE7 */
	/* support: IE10, see #8844 */
	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: -1px;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
	height: 100%;
	filter: alpha(opacity=25); /* support: IE8 */
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-selectable {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	/* Support: IE7 */
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-button {
	display: inline-block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	cursor: pointer;
}
.ui-selectmenu-button span.ui-icon {
	right: 0.5em;
	left: auto;
	margin-top: -8px;
	position: absolute;
	top: 50%;
}
.ui-selectmenu-button span.ui-selectmenu-text {
	text-align: left;
	padding: 0.4em 2.1em 0.4em 1em;
	display: block;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-sortable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 22px;
}
.ui-spinner-button {
	width: 16px;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top: none;
	border-bottom: none;
	border-right: none;
}
/* vertically center icon */
.ui-spinner .ui-icon {
	position: absolute;
	margin-top: -8px;
	top: 50%;
	left: 0;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
	/* need to fix icons sprite */
	background-position: -65px -16px;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
	border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Verdana,Arial,sans-serif;
	font-size: 1.1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Verdana,Arial,sans-serif;
	font-size: 1em;
}
.ui-widget-content {
	border: 1px solid #aaaaaa;
	background: #ffffff url(/assets/ui-bg_flat_75_ffffff_40x100-17d558a6ce4fa02875bb5209821aaf1538c9fc19d8f6fdcd05395f113f7994ce.png) 50% 50% repeat-x;
	color: #222222;
}
.ui-widget-content a {
	color: #222222;
}
.ui-widget-header {
	border: 1px solid #aaaaaa;
	background: #cccccc url(/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;
	color: #222222;
	font-weight: bold;
}
.ui-widget-header a {
	color: #222222;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid #d3d3d3;
	background: #e6e6e6 url(/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
	font-weight: normal;
	color: #555555;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: #555555;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #999999;
	background: #dadada url(/images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
	font-weight: normal;
	color: #212121;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
	color: #212121;
	text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #aaaaaa;
	background: #ffffff url(/images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
	font-weight: normal;
	color: #212121;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #212121;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #fcefa1;
	background: #fbf9ee url(/images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x;
	color: #363636;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #cd0a0a;
	background: #fef1ec url(/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
	color: #cd0a0a;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #cd0a0a;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #cd0a0a;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70); /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url(/images/ui-icons_222222_256x240.png);
}
.ui-widget-header .ui-icon {
	background-image: url(/images/ui-icons_222222_256x240.png);
}
.ui-state-default .ui-icon {
	background-image: url(/images/ui-icons_888888_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
	background-image: url(/images/ui-icons_454545_256x240.png);
}
.ui-state-active .ui-icon {
	background-image: url(/images/ui-icons_454545_256x240.png);
}
.ui-state-highlight .ui-icon {
	background-image: url(/images/ui-icons_2e83ff_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url(/images/ui-icons_cd0a0a_256x240.png);
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 4px;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa url(/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
	opacity: .3;
	filter: Alpha(Opacity=30); /* support: IE8 */
}
.ui-widget-shadow {
	margin: -8px 0 0 -8px;
	padding: 8px;
	background: #aaaaaa url(/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
	opacity: .3;
	filter: Alpha(Opacity=30); /* support: IE8 */
	border-radius: 8px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * The whole bundle is wrapped in `@layer bootstrap { … }` via the
 * _application_layer_open / _application_layer_close partials at the top
 * and bottom of the manifest. New work goes in component CSS, not here.
 *


























 */

:root {
  --border-color: #e0e0e0;
  --red: #c33a07;
  --translucent-red: #c33a07aa;
  --blue: #2489fd;
  --green: #5cb85c;
  --orange: #ee9b15;
  --grey: #ccc;
  --patient-color: #17c78a;
  --appointment-color: #1768c7;
  --triage-color: #7c4dc7;
  --consultation-color: #7c4dc7;
  --yellow: #fed724;
}

* {
  --max-element-width: 640px;
}

.card,
.visit-card,
.patient-card,
.report-card {
  position: relative;
  border: 1px solid var(--border-color);
  padding: 10px;
  border-radius: 5px;

  &:focus {
    outline: none;
  }

  &:not(:last-child) {
    margin-bottom: 10px;
  }

  background-color: white;

  h2 {
    font-size: 160%;
    border-style: none;
    font-weight: bold;
    margin-top: 0;
  }

  .label {
    display: inline-flex;
    align-items: center;
  }

  p {
    margin-bottom: 0.1em;
  }

  p,
  ul li {
    line-height: 1.4em;
  }
}

.card.in-error {
  border-color: var(--red);
}

.card-with-header {
  padding: 0;
}

.card-with-header--header {
  padding: 0.5em;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  margin-bottom: 10px;
}

.card-with-header--content {
  padding: 6px 10px;
}

* {
  font-family: Ubuntu, "Sans serif";
}

html {
  touch-action: manipulation;
}
body {
  padding-bottom: 160px;
  background-color: #f7f7f7;

  &.dark-background {
    background-color: #e8e8e8;
  }
}
body.bottom-padded {
  padding-bottom: 320px;
}
blockquote {
  margin: 0;
  font-style: italic;
  border-color: #888;
  background-color: white;
  font-size: 100%;
  white-space: pre-wrap;
}

ul,
li {
  margin: 0;
  list-style-type: none;
  padding: 0;
}
ul.bullet-list,
ul.bullet-list li {
  list-style-type: square;
}
ul.bullet-list {
  margin-left: 15px;
}
a,
input[type="checkbox"] {
  cursor: pointer;
}
h1 {
  font-size: 26px;
  color: #aaa;
  font-weight: 300;
  margin: 0.8em 0;
}
h2 {
  font-size: 22px;
  font-weight: 300;
  margin-top: 1.7em;
  margin-bottom: 1em;
}
h3 {
  font-size: 120%;
  font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
}
audio::-webkit-media-controls-panel {
  background-color: #f7f7f7;
}

.smaller {
  font-size: 90%;
}

.approved {
  color: var(--green);
}
.highlighted {
  color: var(--red);
}
.warning {
  color: var(--orange);
}
.svg-icon:not(.tw) {
  font-family: unset;
  width: 1.9rem;
  min-width: 1.9rem;
  vertical-align: middle;
  top: -1px;
}

.label .svg-icon {
  width: 1.2rem;
  margin-left: -2px;
  margin-right: 3px;
  max-height: 1.5rem;
}
.label .svg-icon.glyphicon-video {
  top: 0;
}
.label.label-danger .svg-icon {
  fill: white;
}
.svg-icon.muted {
  opacity: 0.5;
}
.svg-icon.white {
  color: white;
  fill: currentColor;
}
.svg-icon.flipped-horizontally {
  transform: scaleX(-1);
  left: 0;
}
.svg-icon.large {
  width: 2.55rem;
  max-height: 2.55rem;
}
.svg-icon.small {
  width: 1.6em;
  max-height: 1.6em;
}
.svg-icon.red {
  fill: var(--red);
}
.svg-icon.blue {
  fill: var(--blue);
}
.svg-icon.yellow {
  fill: var(--orange);
}
.svg-icon.grey {
  fill: var(--grey);
}
.svg-icon.green {
  fill: var(--green);
}
.svg-icon.glyphicon-triangle-alert {
  top: -2px;
}
.green {
  color: var(--green);
}
.red {
  color: var(--red);
}
.bg-red {
  background-color: var(--red);
}
.bold {
  font-weight: bold;
  * {
    font-weight: bold;
  }
}

.button-bar.btn-group {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

input,
select,
textarea,
.form-control {
  font-weight: 300;
}

table tfoot {
  font-weight: bold;
}

.esri-feature a {
  color: #337ab7;

  &:hover,
  &:focus {
    color: #23527c;
  }
}

.note-card {
  padding-top: 10px;
  h4 {
    margin: 0;
    .svg-icon {
      width: 1.6rem;
    }
  }
}

[data-target] {
  cursor: pointer;
}

.ui-front {
  z-index: 5000 !important;
}

.existing-attachments {
  margin-top: 10px;
}

.striked-through {
  text-decoration: line-through;
  color: #888;
}

.nowrap {
  white-space: nowrap;
}

.index-table {
  width: 100%;
}

.widget,
.card.patient-card {
  label {
    margin-top: 0.75em;
    margin-bottom: 0;
  }

  p {
    margin-bottom: 0.1em;
  }
}

.patient-name {
  align-items: center;
  display: flex;
  font-size: 125%;
  font-weight: bold;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 0.4em;
  word-break: break-all;
}

.visit-card,
.patient-card {
  padding: 0;

  .card-content {
    padding: 5px;

    .mini-card--row {
      display: flex;
      justify-content: space-between;
    }
  }

  .active-status {
    background-color: var(--orange);
    color: white;
  }
  .to-be-triaged-status {
    background-color: var(--red);
    color: white;
  }
  .triaged-status {
    background-color: var(--green);
    color: white;
  }
}

.card-content--name-and-buttons {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.card-content--contact-and-flag {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.acceptance-or-hand-back-confirmation {
  background-color: white;
  padding: 10px 16px;
  border: 4px solid #aaa;
  border-radius: 8px;
  margin-bottom: 5px;
}

.acceptance-or-hand-back-confirmation {
  border-color: var(--red);

  p {
    margin-bottom: 0.1em;
  }
}

.grey-box {
  background-color: #f7f7f7;
  padding: 0.6em 1em;
}

.card-section {
  width: 100%;
  display: block;
}

.card-section--clinical-workflow-with-medical-note {
  margin-bottom: 5px;
  background-color: #eee;
  display: flex;
  justify-content: space-between;

  .clinical-workflow.vertical-workflow {
    min-width: 45px;

    .clinical-workflow--step {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .clinical-workflow--line {
        flex: 1;
        border-left-width: 2px;
        border-right-width: 2px;

        &.incoming-line {
          margin-top: -5px;
          max-height: 17px;
        }

        &.outgoing-line {
          margin-bottom: -5px;
        }

        &.hidden-line {
          visibility: hidden;
        }
      }
    }
  }

  .clinical-workflow.vertical-workflow + .card-section--medical-note {
    padding-left: 0;
  }

  .card-section--medical-note {
    flex: 1;
    padding: 8px 10px;
    display: flex;

    label {
      margin: 0;
    }

    .card-section--medical-note--content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .card-section--medical-note--body {
      display: flex;
      align-items: flex-start;

      .card-section--medical-note--body--text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
    }

    .card-section--medical-note--button {
      margin-top: 5px;
    }

    .card-section--medical-note--actions {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;

      a .svg-icon {
        margin-right: 0.1em;
        top: -1.5px;
      }
    }
  }
}

.card .card-actions {
  display: flex;
  align-items: center;
}

.action {
  margin-top: 45px;
  margin-bottom: 10px;
  padding: 10px 0 5px;
  border-top: 1px dotted #ddd;

  &.tw\:sticky {
    position: sticky;
    bottom: 0;
    background: #f7f7f7;
    z-index: 1000;
    opacity: 0.95;
  }
}

@supports (padding: max(0px)) {
  .action.tw\:sticky {
    padding-bottom: Max(10px, env(safe-area-inset-bottom));
  }
}

.service-list {
  border-top: 1px solid #ddd;
  margin-top: 50px;
  padding-top: 20px;

  .claim-service {
    margin-bottom: 35px;
    margin-top: 35px;
  }
}

.ui-autocomplete.ui-widget-content li.ui-state-focus {
  background: #f7f7f7;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.ui-menu .ui-menu-item {
  padding: 9px 1em 9px 0.4em;
  line-height: 1.1em;
}

.ui-menu .ui-menu-item:active {
  background-color: #f0faff;
}

.ui-autocomplete-no-results,
.search-no-results {
  color: var(--red);
}

.online-status {
  height: 5px;
  width: 100%;
  background-color: var(--green);

  &.online-status-error {
    background-color: var(--red);
  }
}

.offline-notice {
  padding: 1em;
  border: 1px solid var(--green);
  color: white;
  position: fixed;
  bottom: 20px;
  left: 20px;
  box-shadow: 0 2px 3px #666;
  width: 260px;
  align-items: center;
  display: flex;
  opacity: 0;
  background: var(--green);
  transition-property: opacity;
  transition-duration: 3s;
  transition-timing-function: ease-in;
  z-index: 10001;
  pointer-events: none;

  &.is-offline {
    opacity: 1;
    background: var(--red);
    border-color: var(--red);
    transition-property: opacity;
    transition-duration: 1s;
  }

  .svg-icon {
    margin-right: 1em;
    top: -2px;
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
  }
}

.card.red-border,
.btn.red-border {
  border-color: var(--red);
}

.user-info {
  margin: 5px 0 5px 0;
}

.btn-action {
  background-color: #fff;
  color: black;
  border: 1px solid #ccc;

  &:hover {
    background-color: #ddd;
    border-color: #999;
  }
}

.flex-stretch {
  display: flex;
  align-items: stretch;
}

.btn-group.flex-stretch {
  .btn-group {
    display: flex;
    align-items: stretch;
  }
  & > a {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.separator {
  color: #ccc;
}

.link-separator {
  &:before {
    content: "|";
    color: #ccc;
  }
  display: inline-block;
  margin: 0 0.2em !important;
}

table.table-striped > thead > tr > th {
  border-style: none;
  background-color: #f7f7f7;
}

table.table-striped > tbody > tr > td {
  border: 1px solid #f7f7f7;
  vertical-align: top;
}

table.table-striped.hover > tbody > tr:hover {
  background-color: #ddd;
  cursor: pointer;
}

.ui-autocomplete-disabled {
  color: #aaa;
  font-style: italic;
}

.pre {
  white-space: pre-wrap;
}

textarea.form-control[name="note[body]"],
textarea.form-control[name="visit[medical_problem_at_triage]"],
#reason-for-urgency-fields textarea,
textarea#call_medical_problem_at_referral {
  height: 8em;
}

#reason-for-urgency-fields {
  textarea[name="visit[extra_urgent_information]"],
  textarea[name="visit[other_urgent_information_provider]"],
  textarea[name="visit[relative_urgent_information_provider_details]"] {
    height: 4em;
  }
}

.timestamp {
  color: #aaa;
}
.online {
  background-color: green;
}

.in-conflict,
textarea.is-offline,
.offline-alert.is-offline {
  border: 1px solid var(--red) !important;
  background-color: #fee !important;
}

.inline-form-control {
  width: auto;
  display: inline-block;
}

.selected-thumbnail {
  border: 5px solid blue;
}

.force-link-color {
  color: #337ab7 !important;
}

.panel.note .panel-body {
  padding: 10px 2px 10px 2px;
}

.panel.note {
  border-style: none;

  .panel-heading {
    border: 1px solid #ccc;
  }
}

.panel-heading .panel-title a {
  display: inline-block;
  width: 100%;
}

.panel-body.note:before {
  content: "";
  display: auto;
}

.attachment-container {
  margin-top: 5px;
  clear: both;
  background-color: #f7f7f7;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 1px solid #ddd;

  .attachment-header {
    vertical-align: middle;

    h6 {
      font-size: 100%;
      float: left;
      line-height: 100%;
    }
  }
}

img.attachment {
  width: 100%;
  border: 1px solid #ccc;
  margin-top: 10px;
}

iframe {
  border: 1px solid #ddd;
  width: 100%;
  min-height: 600px;
  background-color: white;
}

.italic {
  font-style: italic;
}

.thin {
  margin: 1px !important;
  line-height: 1.1em !important;
}

.leg-room {
  margin-bottom: 10px;
}

.tiny-leg-room {
  margin-bottom: 6px;
}

.head-space {
  margin-top: 10px;
}

.caution {
  color: var(--red);
}

.tab-pane[data-link].hover,
.tab-pane[data-link]:hover,
.card[data-link]:hover,
.card[data-link].hover {
  cursor: pointer;
  background-color: #f7f7f7;
}

.card .close-button {
  position: relative;
  top: -10px;
  max-height: 20px;
  a {
    color: #ccc;
    font-size: 16pt;
  }

  a:hover {
    color: black;
    text-decoration: none;
  }
}

.shift-header {
  display: flex;
  align-items: center;
  position: relative;

  & > remote-link + remote-link {
    position: relative;
    left: -15px;
    margin-right: -15px;
  }

  .glyphicon-car {
    margin-right: 4px;
  }
}

.shift-counts {
  .svg-icon.muted {
    margin-right: 1px;
  }

  .shift-count {
    display: inline;
    margin-right: 10px;
  }

  .shift-count:last-child {
    margin-right: 0;
  }
}

.right-aligned {
  text-align: right;
}

.transparent {
  opacity: 0.8;
}

.spacer {
  display: block;
  height: 5px;
  content: " ";
}

ul.minimal-list {
  li {
    padding-bottom: 5px;
    margin-bottom: 5px;
    &:not(:last-child) {
      border-bottom: 1px solid #eee;
    }
  }
}

.label.label-grey {
  background-color: #777777;
}

.label.label-easyclaim {
  background-color: darkgreen;
  color: yellow;
  font-style: italic;
}

.label.label-allianz {
  background-color: darkblue;
  color: white;
  font-family: serif;
}

.autocomplete-extra-info {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.ad-hoc-clear-button {
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 14pt;
}

.spaced-out-flex-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.big-centered-icon {
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;

  &.green {
    background-color: var(--green);
  }
}

.centered-flex-row {
  display: flex;
  width: 100%;
  align-items: center;

  > *:not(:last-child) {
    margin-right: 0.1em;
  }
}

.collapsable-subheading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-row {
  display: flex;
  align-items: flex-start;

  > .svg-icon {
    margin-right: 5px;
  }
}

@media (max-width: 374px) {
  .right-aligned-xxs {
    text-align: right;
  }

  .hidden-xxs {
    display: none;
  }
}

header:not(.esri-popup__header) {
  margin-top: 2em;
  font-size: 120%;
  font-weight: bold;
}

.in-person-label {
  font-size: 120%;
  text-transform: uppercase;
  margin-bottom: 0.5em;
  display: inline-block;

  a {
    display: inline-block;
    color: white;
    text-decoration: none;
  }
}

.centered {
  text-align: center;
}

.full-width {
  width: 100%;
}

.thin-padding-button {
  padding: 4px;
}

.vertically-centered {
  display: flex;
  align-items: center;
}

.checkboxes {
  .checkbox-row {
    display: flex;
    align-items: center;

    &:not(:last-of-type) {
      margin-bottom: 1em;
    }

    input {
      margin: 0 0.7em 0 0;
      width: 25px;
      height: 25px;
    }

    label {
      font-weight: normal;
      margin: 0;
      cursor: pointer;
    }
  }

  .checkbox-details {
    margin: 1em 0 1.5em 32px;
  }
}

.prevent-autofill {
  display: none;
}

.email-preview {
  max-height: 640px;
  overflow: scroll;
  background: white;
  padding: 10px;
}

.html-setting {
  height: 12em !important;
}

.code {
  border: 1px solid #ddd;
  font-family: Courier;
  display: inline-block;
  padding: 2px;
  border-radius: 4px;
  font-size: 90%;
}

.clinical-workflow.horizontal-workflow {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: #777;

  .clinical-workflow--lines {
    display: flex;
    width: 100%;
  }

  .clinical-workflow--line {
    width: 100%;
    border-top: 3px solid #ccc;

    &.hidden-line {
      visibility: hidden;
    }
  }

  .clinical-workflow--step {
    flex: 1;
    white-space: nowrap;
    line-height: 1em;
    font-size: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    min-width: 69px;
  }

  .clinical-workflow--step--graphic {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 101%;
    position: relative;

    .circle {
      position: absolute;
      top: -10px;

      svg {
        width: 1.8rem;
        height: 1.8rem;
      }
    }
  }

  .clinical-workflow--step--text {
    &:last-child {
      padding-top: 15px;
    }

    &:first-child {
      padding-bottom: 15px;
    }
  }

  .clinical-workflow--step:first-of-type {
    .clinical-workflow--step--text {
      padding-left: 0;
    }
  }

  .clinical-workflow--step:last-of-type {
    .clinical-workflow--step--text {
      padding-left: 0;
    }
  }
}

.clinical-workflow.horizontal-workflow {
  .clinical-workflow--step .clinical-workflow--line {
    height: 6px;
  }
}

.clinical-workflow.horizontal-workflow,
.clinical-workflow.vertical-workflow {
  .circle {
    width: 26px;
    height: 26px;
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: white;

    .svg-icon {
      top: 0px;
    }
  }

  .clinical-workflow--step .clinical-workflow--line {
    border-color: #ccc;
    border-style: solid;
  }

  .clinical-workflow--step.active {
    .circle {
      border-color: var(--blue);
    }
    .incoming-line {
      border-color: var(--blue);
      background-color: var(--blue);
    }
    .outgoing-line {
      border-color: var(--blue);
      background-color: var(--blue);
    }
  }

  .clinical-workflow--step.skipped,
  .clinical-workflow--step.fulfilled {
    .circle {
      border-color: var(--green);
      background-color: var(--green);
    }
  }

  .clinical-workflow--step.fulfilled,
  .clinical-workflow--step.skipped {
    .clinical-workflow--line {
      border-color: var(--green);
      background-color: var(--green);
    }
  }

  .clinical-workflow--step.draft,
  .clinical-workflow--step.started {
    .circle {
      border-color: var(--orange);
      background-color: var(--orange);
    }

    .clinical-workflow--line {
      border-color: var(--orange);
      background-color: var(--orange);
    }
  }
}

.btn-xxs {
  padding: 3px;
  line-height: 1.1em;

  .svg-icon {
    width: 1.6rem;
    position: relative;
    left: 1px;
  }
}

.popover {
  min-width: 300px;
  color: #666;

  .popover-content {
    padding: 10px;

    p {
      margin-bottom: 0.5em;
    }

    pre {
      font-size: 80%;
    }
  }

  ul li:not(:last-child) {
    margin-bottom: 0.5em;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .head-space-sm {
    margin-top: 10px;
  }
}

@media (min-width: 768px) {
  .pull-right-sm {
    float: right;
  }
  .right-aligned-sm {
    text-align: right;
  }
}

.subtle-action {
  margin-top: 1.5em;
  font-size: 90%;
}

.widget {
  background-color: white;
  border: 1px solid #f3f3f3;
  margin-bottom: 10px;

  .card:not(.household-card) {
    box-shadow: 0 1px 3px #e6e6e6;
  }

  h1,
  h2 {
    margin-top: 0;
    padding: Max(7px, 1.75%);
  }

  &.expanded {
    .expand-button {
      display: none;
    }
  }

  &.collapsed {
    .widget--content {
      display: none;
    }

    .collapse-button {
      display: none;
    }
  }

  h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    min-height: 35px;

    .icon-and-text {
      flex: 1;

      .svg-icon {
        width: 2.6rem;
        position: relative;
        top: -2px;
      }
    }
  }

  h3 {
    font-size: 110%;
  }
}

.widget--content {
  padding: Max(7px, 1.75%);
  padding-top: 0;
}

.widget > .widget--content > h3:first-of-type,
.widget > .widget--content > h4:first-of-type,
.widget > .widget--content > h5:first-of-type,
.widget > .widget--content > h6:first-of-type {
  margin-top: 0;
}

.widget,
.modal-body,
.card.patient-card {
  h3,
  h4:not(.modal-title) {
    margin-top: 1.1em;
    margin-bottom: 0.6em;
  }

  h3 + h4:not(.modal-title) {
    margin-top: 0;
  }

  h5,
  h6 {
    font-size: 15px;
    margin: 0.8em 0 0.1em;
    font-weight: 550;

    &.floating-subheading {
      font-size: 120%;
      margin-top: 1.5em;
    }
  }
}

.ql-editor ol,
.ql-editor ul {
  padding-left: 0;
}

#edit-training-hint-modal {
  z-index: 1100; /* ensure this modal shows above all other modals */
}

.navbar-default .navbar-nav > li a.avatar-container {
  padding: 0 0 2px;
}

.navbar-default .navbar-header .right-aligned a.avatar-container {
  display: inline-block;
  margin-left: auto;
}

.avatar {
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid #999;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: white;
  color: #444;
  font-size: 1.7rem;
  object-fit: cover;

  .placeholder-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 55px;
    height: 55px;

    .svg-icon {
      opacity: 0.1;
      width: 100%;
      height: 100%;
      margin: 0;
      top: 0;
    }
  }

}

.avatar--tiny {
  font-size: 1.2rem;
  width: 23px;
  height: 23px;

  .placeholder-avatar {
    width: 30px;
    height: 30px;
  }
}

.avatar--medium {
  font-size: 3.5rem;
  width: 100px;
  height: 100px;

  .placeholder-avatar {
    width: 135px;
    height: 135px;
  }
}

.visible-xs .avatar {
  margin-right: 0;
}

.widget.todays-appointments-widget {
  padding-bottom: 0;
}

a.white-space-normal {
  white-space: normal !important;
}

.rotate-90-deg {
  transform: rotate(90deg);
}

.custom-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 15px 5px 100px;
}

@media (max-width: 767px) {
  .mini-card--row .card-actions .btn-accented svg {
    width: 2.2em;
  }

  .column-xs {
    display: flex;
    flex-direction: column;

    & > *,
    .btn + .btn {
      padding: 0;
      margin: 0.2em 0 0 0;
      width: 100%;
    }
  }
  .head-space-xs {
    margin-top: 10px;
  }

  .leg-room-xs {
    margin-bottom: 10px;
  }

  .right-aligned-xs {
    text-align: right !important;
    justify-content: flex-end !important;
  }

  .left-aligned-xs {
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

@media (min-width: 1200px) {
  .right-aligned-lg {
    text-align: right;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .head-space-md {
    margin-top: 10px;
  }
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  vertical-align: -0.125em;
  border: 4px solid #aaa;
  border-right-color: transparent;
  border-radius: 50%;
  animation: 0.75s linear infinite spinner-border;
}

@keyframes fading-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: 0.3s linear fading-in;
}
/* Restored from Bootstrap's _glyphicons.scss base rule. The rest of that
 * partial was font-icon machinery we don't use — SVG icons are tagged with
 * .glyphicon as a CSS hook only, not for font glyph rendering. */
.glyphicon { position: relative; display: inline-block; }

[hidden] {
  display: none !important;
}

a {
  color: var(--blue);
}

a:hover,
a:focus {
  color: color-mix(in srgb, var(--blue), black 10%);
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

.navbar {
  margin-bottom: 0;
}

.navbar-default .navbar-nav > li > a,
.dashboard-quick-links .dropdown-toggle {
  color: #444;
  .glyphicon {
    margin-right: 3px;
    top: -0.5px;
  }
}

.label {
  padding: 0.1em 0.6em 0.1em;
  white-space: normal;
  font-size: 1.3rem;
  padding-left: 3px;
  padding-right: 3px;
  line-height: 1.3;
  border-radius: 0;
  font-weight: normal;
  position: relative;
}

.label.label-warning {
  background-color: var(--orange);
}

.label.label-danger {
  background-color: var(--red);
}

.label.label-success {
  background-color: var(--green);
}

.no-padding {
  padding: 0 !important;
}

.form-control {
  font-size: 16px;
  border-color: var(--border-color);
  padding-left: 8px;
  padding-right: 8px;
}

.form-control:focus {
  background-color: #f0faff;
  border-width: 2px;
}

.btn-primary {
  background-color: var(--blue);
}

.btn-link,
.btn-link:hover,
.btn-link:focus {
  color: var(--blue);
}

.btn-primary:focus {
  border: 1px solid #66afe9;
}

.btn-primary:focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary:active.focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus,
.open > .btn-primary.dropdown-toggle:hover,
.open > .btn-primary.dropdown-toggle:focus,
.open > .btn-primary.dropdown-toggle.focus {
  background-color: color-mix(in srgb, var(--blue), black 10%);
}

.btn {
  line-height: 1.5;
  border-color: var(--border-color);
}
.btn-lg,
.btn-group-lg > .btn {
  border-radius: 4px;
  line-height: 2;
  padding: 7px 16px;
}
.btn-xs {
  padding: 5px;
}

.alert {
  border-radius: 0;
  margin-bottom: 0;
  padding: 6px;
  border: none;
}

.modal-body {
  padding: 10px;
}

.modal-content {
  .modal-header {
    border-bottom: 0;

    &.bg-primary {
      background-color: #444;
    }

    .close,
    .close:hover,
    .close:focus {
      color: white;
      font-size: 200%;
      opacity: 0.9;
      position: relative;
      top: -1px;
      line-height: 1.1;
      padding: 0 5px;
    }
  }
}

search-by-proximity-modal .modal .modal-content {
  background-color: white;
}

.modal-content .modal-footer {
  text-align: left;
}

.form-group,
.form-horizontal .form-group {
  margin-bottom: 20px;
  margin-left: -5px;
  margin-right: -5px;
}

.btn-group-justified {
  margin-bottom: 10px;
  border-radius: 10px !important;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
}

.container-fluid {
  padding-left: 5px;
  padding-right: 5px;
}

div[class*="col-"]:not([class*="tw:"]) {
  padding-left: 5px;
  padding-right: 5px;
}

.well {
  background-color: #ffffff;
}

.list-group {
  margin-bottom: 10px;
}

.list-group-item,
.list-group-item:first-child,
.list-group-item:last-child {
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: #f7f7f7;
  border-style: none;
  padding: 8px;
  color: #444;
  border-radius: 0;

  p {
    margin: 2px 0 0 0;
  }
}

.list-group-item.danger {
  border: 1px solid var(--red);
  color: var(--red);
  background-color: #fee;

  svg {
    fill: red;
  }
}

.progress {
  height: 4px;
  margin: 2px 0;

  .bar {
    height: 4px;
    background: green;
  }
}

.form-horizontal .control-label {
  text-align: left;
}

.panel {
  box-shadow: none;
  margin-bottom: 5px;
  width: 100%;
}

.panel-group .panel {
  border-radius: 0;
}

.panel-group .panel + .panel {
  margin-top: 0;
}

.panel-body {
  padding: 0 7px 10px 7px;
}

.panel-default > .panel-heading .badge {
  vertical-align: top;
  margin-left: 3px;
}

.panel-default {
  border-color: #ddd;
}

.panel > .panel-heading {
  color: #333333;
  background-color: white;
  border-color: transparent;
  border-radius: 0;
}

.panel-group:last-of-type {
  margin-bottom: 0;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
}

a.dropdown-toggle .caret {
  margin-left: 3px;
}

.dropdown-menu.dropdown-menu-lg > li > a {
  font-size: 120%;
  padding-top: 9px;
  padding-bottom: 9px;
}

.dropdown-menu {
  font-size: 16px;
}

.dropdown-menu > li > a {
  padding: 5px 15px;
}

.click-feedback-button {
  position: relative;

  &:after {
    background-color: black;
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
  }

  &:not(:active) {
    &:after {
      transition: opacity 800ms ease-out;
    }
  }

  &:active {
    &:after {
      opacity: 0.3;
    }
  }
}

textarea.form-control:not([rows]) {
  height: 6.5em;
}

@media (min-width: 2000px) {
  .col-xl-1 {
    width: 8.3333333333%;
  }
  .col-xl-2 {
    width: 16.666666667%;
  }
  .col-xl-3 {
    width: 24.999999999%;
  }
  .col-xl-4 {
    width: 33.333333332%;
  }
  .col-xl-5 {
    width: 41.666666665%;
  }
  .col-xl-6 {
    width: 50%;
  }
  .col-xl-7 {
    width: 58.333333331%;
  }
  .col-xl-8 {
    width: 66.666666664%;
  }
  .col-xl-9 {
    width: 74.999999997%;
  }
  .col-xl-10 {
    width: 83.33333333%;
  }
  .col-xl-11 {
    width: 91.666666663%;
  }
  .col-xl-12 {
    width: 100%;
  }
}
.card.patient-card {
  /* Restores 10px padding for .card.patient-card elements. Previously the
   * Sass `@include card` here re-asserted padding: 10px at (0,2,0) specificity,
   * overriding `.visit-card, .patient-card { padding: 0 }` (which is (0,1,0)
   * but later in source order). After dropping the mixin, that higher-
   * specificity assertion was lost; this restores it explicitly. */
  padding: 10px;
  margin-bottom: 10px;

  h3 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    font-size: 130%;
  }
  .primary-info {
    margin-bottom: 15px;
  }
}

.deceased-notice {
  color: #b20;
}

.card.tabbed-card {
  border-top-style: none;

  .extended-info {
    height: 50px;
    overflow: hidden;
    position: relative;

    &.expanded:after {
      display: none;
      content: none;
    }
  }
}

ul.nav li a.danger,
ul.nav li.active a.danger:focus,
ul.nav li.active a.danger:hover {
  background-color: #d9534f;
  color: white;
}
ul.nav li.active a.danger {
  border-bottom-color: white;
}
ul.nav li.active a .svg-icon:not(.white) {
  filter: none;
}
.nav-tabs {
  margin-top: 10px;
  border-bottom-color: var(--border-color);
  .tab-label {
    margin-left: 5px;
    display: inline-block;
  }
  li {
    margin-bottom: -2px;
  }
  li a {
    padding: 12px 22px;
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  li a:hover,
  .nav-tabs li a:focus,
  .nav-tabs li a:active {
    border-bottom-color: var(--border-color);
  }
  & > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    border-color: var(--border-color);
    border-bottom-color: transparent;
  }
  li .badge {
    margin-left: 4px;
    padding: 2px 5px;
  }
}

.muted .patient-card {
  opacity: 0.6;
}

@media (max-width: 450px) {
  .nav-tabs {
    display: flex;
    li a {
      padding: 12px 8px;
    }
  }
}
.report-card {
  p {
    margin-bottom: 2px;
  }
}

.existing-attachments {
  display: flex;
  flex-direction: column;

  .blank {
    text-align: center;
    margin: 3em auto;
    color: #666;
  }
}

.result-thumbnail {
  position: relative;

  a[data-method="delete"] {
    position: absolute;
    left: 68%;
    top: 4px;
    border-radius: 0;
    font-weight: bold;
  }
  a {
    display: inline-block;
    img {
      margin: 0;
      border-style: none;
    }
  }
  .page-count {
    position: absolute;
    bottom: 2px;
    right: 5px;
    background-color: white;
    padding: 5px;
    opacity: 0.8;
  }
  background-color: white;
  border: 1px solid #ddd;
  position: relative;
  width: 120px;
  min-height: 64px;
  margin-right: 10px;
}

.sublabel {
  font-size: 90%;
  font-weight: normal;
}

ul.documented-selection {
  li small.text-muted {
    font-size: 95%;
    line-height: 1em;
    white-space: normal;
  }
}

.info-bubble {
  background-color: #eaeaea;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #333;

  &.white {
    background-color: #fafafa;
  }

  &.icon-circle {
    .info-bubble--row--icon-container {
      .svg-icon {
        border: 2px solid black;
        border-radius: 50%;
      }
    }
  }

  &.danger {
    .info-bubble--row--icon-container {
      .svg-icon {
        fill: var(--red);
        opacity: 1;
      }
    }
  }

  &.error {
    background-color: #fee;
    border: 1px solid var(--red);

    .info-bubble--row--icon-container {
      .svg-icon {
        fill: var(--red);
        opacity: 1;
      }
    }
  }

  &.warn {
    background-color: color-mix(in srgb, var(--orange) 10%, transparent);
    border: 1px solid var(--orange);

    .info-bubble--row--icon-container {
      .svg-icon {
        fill: var(--orange);
        opacity: 1;
      }
    }
  }

  &.success {
    background-color: color-mix(in srgb, var(--green) 10%, transparent);
    border: 1px solid var(--green);

    .info-bubble--row--icon-container {
      .svg-icon {
        fill: var(--green);
        opacity: 1;
      }
    }
  }
}

.info-bubble--row {
  display: flex;
}

.info-bubble--row--icon-container {
  margin-right: 0.5em;
}

.info-bubble--row--content {
  padding-top: 1px;
  width: 100%;
}

.btn-group.vertical-toggle {
  display: flex;
  flex-direction: column;

  & > .btn {
    margin-left: 0;

    &:not(:last-child) {
      border-bottom-style: none;
    }
  }

  & > .btn:first-child:not(:last-child) {
    border-radius: 4px 4px 0 0;
  }

  & > .btn:last-child:not(:first-child) {
    border-radius: 0 0 4px 4px;
  }

  .btn-default:hover:not(.active) {
    background-color: #fff;
    border-color: #ccc;
  }
}

form.toggle-switch {
  margin: 8px 5px;
}

error-panel, .errors {
  background-color: #fee;
  border: 1px solid var(--red);
  display: block;
  padding: 15px;
  color: var(--red);
  margin-bottom: 2em;
  &[hidden] {
    display: none;
  }
}

.success {
  background-color: #efe;
  border: 1px solid var(--green);
  padding: 15px;
  color: var(--green);
  margin-bottom: 2em;
}

.error-messages {
  margin-top: 1em;
  margin-bottom: 1em;
}

.field_with_errors {
  input,
  input:focus,
  select,
  select:focus,
  textarea,
  textarea:focus {
    outline: 1px solid var(--red);
    outline-offset: 0;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--translucent-red);
  }

  label,
  .control-label {
    color: var(--red);
  }
}

.field-in-error {
  outline: 1px solid var(--red);
}

.row.form-section {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 75px 0 0 0;
  border-top: 1px dotted #ccc;
}

.row.form-section:first-of-type {
  border: none;
  margin-top: 0;
  padding-top: 15px;
}

form.button_to {
  display: inline;
}

.btn-group.field_with_errors {
  border: 1px solid var(--red);
}

.error {
  background-color: var(--red);
}

hr.separator {
  margin-top: 30px;
  margin-bottom: 30px;
}

.btn-accented {
  color: var(--blue);
  border-color: var(--blue);

  .svg-icon {
    fill: var(--blue);
  }

  &:hover {
    color: color-mix(in srgb, var(--blue), black 10%);
    border-color: color-mix(in srgb, var(--blue), black 10%);
  }
}

.btn-group[data-toggle] {
  .btn-default.active {
    color: var(--blue);
  }
  .btn-default.focus,
  .btn-default:focus {
    border-color: #66afe9;
  }
  .btn-default {
    color: #aaa;
  }
  .btn-default.active.disabled:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
  }
}

.nav.extended-visit-options {
  padding-bottom: 10px;
  border-bottom: 1px dotted #bbb;
  margin-bottom: 10px;
  padding-top: 10px;
}

label.simple-label {
  font-weight: bold;
  margin-bottom: 0.6em;
}

label.no-margin {
  margin-bottom: 0;
  line-height: 1.2em;
}

.field-star {
  font-size: 110%;

  &.required {
    color: var(--red);
  }
  &.desired {
    color: var(--blue);
  }
}

.checkbox-lg {
  label {
    font-weight: normal;
  }
}

.panel-form-group-block {
  width: 100%;

  h3 {
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.4em;
    margin-bottom: 1em;
    font-weight: 300;
    font-size: 160%;
  }
}

a.info-bubble {
  display: inline-block;
  top: 0 !important;

  .svg-icon {
    margin: 0;
  }

  &:focus {
    outline: 3px auto var(--blue);
    outline-offset: -1px;
  }
}

.address-summary {
  background-color: #eee;
  padding: 1em;
}

.slick-selector {
  select {
    opacity: 0.8;
  }
}

.slick-selector--summary {
  background-color: #f1f1f1;
  padding: 1em;

  p {
    margin-bottom: 0;
  }
}

.slick-selector--heading {
  display: flex;
  justify-content: space-between;

  a {
    font-weight: normal;
  }
}

.training-hint {
  display: flex;
  max-width: 640px;
  margin-top: 2px;
  width: 100%;
  padding: 10px;
  background-color: #eee;
  display: flex;
  align-items: flex-start;
}

.rich-text,
.popover-content {
  font-weight: normal;

  p {
    margin-bottom: 0.2em;
  }

  p:first-of-type:last-of-type {
    margin-bottom: 0 !important;
  }

  ol,
  ul {
    padding: 0;
  }
}

.toggle-anchor {
  display: inline-flex;
  color: black;

  &:hover {
    text-decoration: none;
    color: black;
  }
}

.toggle-anchor--label {
  margin-left: 0.5em;
  cursor: pointer;
}

.slick-toggle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 40px;
  min-width: 40px;
  border-radius: 11px;
  height: 24px;
  background-color: #ccc;

  &.active {
    justify-content: flex-end;
    background-color: var(--blue);
  }

  &.active.critical {
    background-color: var(--red);
  }
}

.slick-toggle--yoke {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  margin: 2px;
}

.btn-group > .btn + .dropdown-toggle.dropdown-toggle-split {
  .svg-icon {
    width: 1.5rem;
    min-width: 1.5rem;
  }
}

@media (min-width: 768px) {
  .card .btn-lg.lg-small {
    font-size: 14px;
    padding: 6px 12px;
  }
}

@media (max-width: 767px) {
  .btn.xs-btn-block {
    width: 100%;
  }

  .training-hint {
    flex-wrap: wrap;

    & > * {
      margin-left: 0;
      margin-right: 0;
    }
  }
}
.navbar-form .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  background-color: #0066FF;
  color: #FFFFFF;
}

ul li {
  .option-label {
    margin-right: 0.4em;
  }
}

.selection-group-header {
  padding: 1em 0.4em 0 0.4em;
  color: #555;
  font-weight: bold;

  &:first-child {
    padding-top: 0;
  }
}

.dragging-info {
  display: none;
  padding: 5px 10px;
}

.modal .visit-star, .visit-star {
  display: flex;
  align-items: center;
  justify-content: center;

  .svg-icon {
    width: 2.8rem;
    height: 2.8rem;
  }
}

.card {
  &.visit-card,
  .visit-card,
  &.patient-card,
  .patient-card {
    &:not(.patient-card) {
      box-shadow: 0 2px 2px #eee;
    }

    .urgent-clinical-attention-frame {
      border: 2px solid var(--red);
      padding: 5px;
      width: 100%;

      h4 {
        margin: 0;
        font-weight: bold;
      }

      .dropdown-menu {
        li {
          max-width: 100%;

          small {
            display: block;
            margin-left: 30px;
            white-space: break-spaces;
          }
        }

        .glyphicon-restart {
          transform: scaleX(-1);
        }
      }

      .card-section.card-section--medical-note {
        margin-bottom: 0;
      }
    }

    .screening-status {
      color: var(--red);
      font-size: 125%;

      button {
        padding: 6px;
      }
    }

    .contact-bar {
      display: inline-flex;
      /*justify-content: flex-end;*/

      .btn-group {
        min-width: 75px;

        &:not(:first-of-type) {
          margin-left: 2px;
        }
      }

      button.dropdown-toggle {
        width: 100%;
        background: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 90%;
        padding: 3px 10px;
        line-height: 1.25em;
        border-radius: 6px;

        svg {
          margin: 0;
        }

        &.enabled {
          border-color: var(--blue);
          color: var(--blue);

          svg {
            fill: var(--blue);
          }
        }

        &.disabled {
          border-color: #aaa;
          color: #aaa;

          svg {
            fill: #aaa;
          }
        }
      }

      .other-contact-box {
        padding: 0.5em 0;
        &:not(:last-child) {
          border-bottom: 1px solid #eee;
        }
      }

      .contact-header-container {
        width: 100%;
        display: flex;
        align-items: center;

        .contact-header {
          display: flex;
          flex-grow: 1;
          align-items: center;

          .label-and-name {
            display: flex;
            flex-direction: column;
            flex-grow: 1;

            label {
              margin:0
            }
          }
        }
      }

      hr.separator {
        margin-top: 10px;
        margin-bottom: 10px;
      }

      .dropdown-menu {
        padding: 0.5em;
        min-width: Min(330px, 80vw);

        a[data-toggle=tab] {
          display: block;
          width: 100%;
          color: black;
          text-decoration: none;
        }

        a.call-link {
          display: flex;
          justify-content: space-between;
          width: 100%;
          align-items: center;
        }

        label {
          margin: 0;
        }

        ul li {
          display: flex;
          &:not(:first-of-type) { padding-top: 0.5em; }

          &:not(:last-of-type) {
            padding-bottom: 0.5em;
            border-bottom: 1px solid #eee;
          }
        }
      }
    }
  }
}

.draggable-mirror {
  z-index: 1000;
}

.draggable-source--is-dragging {
  opacity: 0.6;
}

.ranked-visits-site.empty {
  min-height: 50px;
  border: 1px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-color: white;
  flex-direction: column;

  &>* {
    flex-grow: 1;
  }

  &::before {
    content: 'Drop consultations here to rank them';
    color: #999;
    padding: 15px;
    text-align: center;
  }
}

.allergy-warning {
  background-color: var(--orange);
  color: white;
  border-radius: 50%;
  font-family: serif;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.draggable-mirror {
  background-color: #f7f7f7 !important;
}

.draggable-source--is-dragging,
.draggable-mirror {
  & .visit-card> :not(.dragging-info) {
    display: none;
  }

  .dragging-info {
    display: block;
  }

  & .visit-card[data-index="0"] {
    position: relative;
    z-index: 10;
    opacity: 0.9;
    box-shadow: 0 0 3px #aaa;
  }

  & .visit-card:not([data-index="0"]) {
    position: absolute;
    top: 60px;
    z-index: 5;
    opacity: 0.9;
    left: 5px;
    right: 5px;
    box-shadow: none;
  }
}

.snomed-concepts {
  .concept-description {
    font-size: 16px;
    padding: 3px 7px;
    background-color: #666;
    color: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  li {
    margin-bottom: 5px;

    .remove-concept {
      font-size: 130%;
      padding: 0 7px;
    }
  }
}

li.active .custom-icon {
  filter: grayscale(100%);
}

.custom-icon {
  width: 16px;
  height: 16px;
  position: relative;

  img {
    position: absolute;
    width: 100%;
  }
}

.info-box {
  background-color: var(--blue);
  color: white;
  padding: 10px;
  margin-bottom: 15px;

  ol,
  li {
    list-style-type: decimal;
    padding-left: 0;
  }

  ol li {
    margin-left: 1em;
    margin-bottom: 0.8em;
    line-height: 1.2em;
  }

  h2 {
    text-align: center;
    margin: 0 0 0.5em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 120%;
    font-weight: bold;

    .svg-icon {
      margin-right: 0.3em;
      top: 0;
    }
  }

  .dismiss-info-box {
    float: right;

    button {
      background-color: transparent;
      border-style: none;
      padding: 0;
      margin: 0;
    }
  }
}

.billing-total-container {
  font-size: 200%;
  font-weight: bold;
  margin-bottom: 0;
}

.save-and-convert-button {
  margin-top: 10px;
  display: block;
  margin-left: 2px;
}

.panel-form-group {
  margin-bottom: 1em;
  max-width: 640px;
  display: flex;
}

.contact-indicator, .sub-section-indicator {
  background-color: #777;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px; /* Necessary to prevent the indicator from being half a pixel off compared to the border of the panel-body */
  display: flex;
  align-items: center;
  justify-content: center;

  &.patient {
    background-color: var(--patient-color);
  }

  &.triage {
    background-color: var(--triage-color);

    svg {
     transform: rotate(-90deg);
    }
  }

  &.consultation {
    background-color: var(--consultation-color);
  }

  &.appointment {
    background-color: var(--appointment-color);
  }

  svg {
    fill: white;
    width: 3rem;
    margin: 0 !important;
  }
}

.main-accordion--header {
  background: #777;
  color: white;
  padding: 0.2rem 0.6rem;
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin-bottom: 1px;
}

.main-accordion {
  .main-section {
    margin-top: 20px !important;

    .panel-heading {
      h4 {
        font-weight: 600;
        margin-top: Min(1vw, 10px);
        margin-bottom: Min(1vw, 10px);
      }
    }
  }

  .panel-body {
    border: 1px solid #f1f1f1;
    border-left: 12px solid #f1f1f1;
    padding: 20px 10px 10px 15px;
  }

  .sub-section--sticky {
    .panel-heading {
      position: sticky;
      box-shadow: 0 1px 4px #888;
      z-index: 1000;
    }
  }

  .sub-section {
    .panel-heading {
      width: 100%;
      padding: 0;
      background-color: #f1f1f1;
      display: flex;

      h4 {
        width: 100%;
        margin: 10px 0;
        padding-right: 10px;

        a {
          width: 100%;
          color: black;
          text-decoration: none;
        }
      }
    }

    &.patient {
      .panel-body {
        border-left-color: color-mix(in srgb, var(--patient-color), white 25%);
      }
    }

    &.appointment {
      .panel-body {
        border-left-color: color-mix(in srgb, var(--appointment-color), white 25%);
      }
    }

    &.triage {
      .panel-body {
        border-left-color: color-mix(in srgb, var(--triage-color), white 25%);
      }
    }
  }

  .panel-body {
    border-top: none;
  }
}

.extra-info--fields, .modal-body .extra-info--fields {
  padding-left: 23px;
}

.extra-info, .modal-body .extra-info {
  h6 {
    font-size: 110%;
    margin: 1em 0 0.25em;
  }
}

patient-header {
  .patient-header--entry {
    margin-left: 1em;
    text-indent: -1em;
  }
}

@media (min-width: 768px) {
  .save-and-convert-button {
    display: inline-block;
    margin-left: 1em;
  }
}

.triage-summary {
  label {
    margin-bottom: 0;
  }
}

@media print {
  .card.tabbed-card .extended-info {
    height: auto;
    overflow: visible;
    background: none;
    -webkit-text-fill-color: black;
  }
}
@keyframes glow_animation {
  0% {
    box-shadow: 0 0 5px var(--red);
  }
  50% {
    box-shadow: 0 0 1px var(--red);
  }
  100% {
    box-shadow: 0 0 5px var(--red);
  }
}

.unallocated-visit-list .card.household-card,
.widget .unallocated-visit-list > .col-xs-12 > .card.visit-card {
  border: none;
  box-shadow: 0 0 3px #444;
}

.card.household-card {
  padding: 2px 5px;
  border: none;
  box-shadow: 0 1px 2px #666;

  .truncated-address {
    overflow: hidden;
    flex: 1;
    text-align: left;
    margin-right: 2px;
  }

  .timeline {
    font-size: 80%;
    width: 100%;

    tr {
      &:not(:last-child) {
        border-bottom: 1px solid #eee;
      }

      td:not(:last-child) {
        padding-right: 2px;
      }

      td:last-child {
        text-align: right;
      }

      td:last-child {
        white-space: nowrap;
      }

      td {
        vertical-align: top;
      }
    }
  }

  .last-notification-error {
    color: var(--red);
    text-align: center;
  }

  .glow {
    border-color: #ea645f !important;

    animation-name: glow_animation;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
  }

  .open ul.household-menu {
    padding: 0.7rem;
    min-width: 280px;

    .dropdown-toggle {
      box-shadow: none;
    }

    li.eta-forms {
      .eta-form-fields {
        width: 100%;

        .eta-date-field,
        .eta-time-field {
          width: 100%;

          /* Ensure nested components fill width */
          date-input-group,
          .clockpicker {
            width: 100%;
          }
        }

        .eta-time-field,
        .eta-submit-field {
          margin-top: 0.7rem;
        }

        .eta-submit-field {
          .btn {
            width: 100%;
          }
        }
      }
    }

    li:not(:last-child) {
      margin-bottom: 5px;
    }

    .btn-group {
      width: 100%;

      .dropdown-toggle {
        width: 100%;
      }
    }

    .btn-group.open > .dropdown-toggle {
      box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }
  }

  .header-bar {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 2px 0 0 0;

    .label {
      .svg-icon {
        margin: 0 1px;
      }
    }

    .etas {
      flex: 1;
      margin: 0 8px;

      & > .btn-group > button.dropdown-toggle {
        padding: 2px 5px;
        display: flex;
        justify-content: space-between;

        .caret {
          justify-self: flex-end;
        }

        .eta {
          line-height: 1.25;
          text-align: center;
          flex: 1;

          .glyphicon-announcement {
            height: 1em;
            margin: 0;
            position: relative;
            left: -2px;
            top: 0.25px;
          }
        }
      }
    }
    .edit-button {
      text-align: right;

      .btn.btn-default {
        padding: 7px 10px 6px;

        .svg-icon {
          margin: 0;
        }
      }
    }
    .card-number {
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;

      svg {
        fill: #bbb;
        margin-right: 2px;
        width: 24px;
        height: 24px;
      }
    }
  }
}

@media (max-width: 420px) {
  .card.household-card .header-bar .etas {
    margin: 0 4px;

    .eta {
      * {
        font-size: 12px !important;
      }
    }
  }
}
.toggle-switch {
  .btn-group {
    .btn {
      outline: none !important;
    }

    .btn-default {
      color: #aaa;
      min-width: 32px;
      border-color: #adadad;
      &:hover,
      &:focus,
      &.focus {
        background-color: white;
      }
    }

    .btn-default.active,
    .btn-default.active:hover {
      color: #aaa;
      background-color: #adadad;
    }
  }

  input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
  }
}

li > .toggle-switch {
  margin: 3px 20px;
}

.toggle-switch {
  label.btn.yes.active,
  label.btn.yes.active:hover {
    background-color: #519a34;
  }
}
.loading-feedback {
  width: 100%;
  height: 5px;
  position: absolute;
  right: 0;
  background-color: white;
  opacity: 0;

  &.animating-loading:not(.superceded-by-modal) {
    pointer-events: none;
    animation: progress 5s ease-out;
    width: 10%;
    opacity: 1;
  }
}

.loading-feedback--container {
  background-color: green;
  height: 5px;
}

@keyframes progress {
  0% {
    width: 90%;
    opacity: 0;
  }
  9.99% {
    width: 90%;
    opacity: 0;
  }
  10% {
    width: 90%;
    opacity: 1;
  }
  100% {
    width: 10%;
    opacity: 1;
  }
}
nav .bread-crumbs {
  --background: #ececec;
  --level3: color-mix(in srgb, var(--background), black 2%);
  --level2: color-mix(in srgb, var(--background), black 4%);
  --level1: color-mix(in srgb, var(--background), black 7%);

  background-color: var(--background);

  ol {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;

    li {
      line-height: 1.2em;
      &:first-of-type {
        padding-left: 10px;
      }

      a {
        padding: 6px 7px;
        display: inline-block;
      }

      a[rel="prev"] {
        padding-left: 0;
      }

      a[rel="next"] {
        padding-right: 0;
      }

      .padded-box {
        display: inline-block;
        padding: 0 7px;
        border: 1px solid color-mix(in srgb, var(--level3), black 12%);
        border-top-style: none;
        border-bottom-style: none;

        &:first-child {
          margin-left: 0;
          padding-left: 0;
          border-left-color: transparent;
        }
      }
    }

    li:nth-of-type(1) {
      background-color: var(--level1);
    }
    .arrow:nth-of-type(1) {
      border-color: var(--level2);
      border-left-color: var(--level1);
    }
    li:nth-of-type(2) {
      background-color: var(--level2);
    }
    .arrow:nth-of-type(2) {
      border-color: var(--level3);
      border-left-color: var(--level2);
    }
    li:nth-of-type(3) {
      background-color: var(--level3);
    }
    .arrow:nth-of-type(3) {
      border-color: transparent;
      border-left-color: var(--level3);
    }
    li:last-of-type {
      background-color: transparent;
    }
    .arrow:last-of-type {
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
    }
  }

  .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border: 14px solid transparent;
  }

  ol li:first-of-type a {
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  .bread-crumbs {
    ol li:first-of-type {
      padding-left: 9%;
    }
  }
}
.widget.map-widget {
  .map-with-custom-buttons {
    position: relative;

    .map-link {
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 5;
      font-size: 130%;

      &.open-in-new-window-map-link {
        right: 15px;
      }

      &.zoom-out-map-link {
        right: 45px;
      }
    }
  }
}

.other-visits,
.other-calls,
.service-area-overview,
.map-legend {
  padding: 5px;

  ul li {
    line-height: 1.1em;
    margin-bottom: 2px;
    display: flex;
    align-items: center;

    .other-visits-list-pin,
    .other-calls-list-pin {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      margin-right: 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 80%;

      .svg-icon {
        min-width: 1.4rem;
      }
    }
  }
}

.map-legend {
  background-color: #e8e8e8;
  color: black;
}
/**
* The following styles are modifying Bootstrap's for buttons.
*
* We prefer a button because this list item is not
* semantically an anchor linking to another page.
*
* Not all of these styles are used by us but we thought
* we would simply lift and shift for simplicity's sake.
*/

.dropdown-menu > li > .list-item-link {
  border: none;
  display: block;
  clear: both;
  font-weight: 400;
  line-height: 1.428571429;
  color: #333333;
  white-space: nowrap;
  padding: 5px 15px;
}

/* line 74, bootstrap/_dropdowns.scss */
.dropdown-menu > li > .list-item-link:hover, .dropdown-menu > li > .list-item-link:focus, .dropdown-menu > li .list-item-link:hover {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

/* line 85, bootstrap/_dropdowns.scss */
.dropdown-menu > .active > .list-item-link, .dropdown-menu > .active > .list-item-link:hover, .dropdown-menu > .active > .list-item-link:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}

/* line 100, bootstrap/_dropdowns.scss */
.dropdown-menu > .disabled > .list-item-link, .dropdown-menu > .disabled > .list-item-link:hover, .dropdown-menu > .disabled > .list-item-link:focus {
  color: #777777;
}

/* line 107, bootstrap/_dropdowns.scss */
.dropdown-menu > .disabled > .list-item-link:hover, .dropdown-menu > .disabled > .list-item-link:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

/* line 125, bootstrap/_dropdowns.scss */
.open > .list-item-link {
  outline: 0;
}

.dropdown-menu.dropdown-menu-lg > li > .list-item-link {
  font-size: 120%;
  padding-top: 9px;
  padding-bottom: 9px;
}
.modal-body {
  .flash {
    margin-bottom: 15px;
  }
}

.flash-site {
  p {
    margin: 0;
    padding: 0;
  }
}

.flash-site,
.modal {
  .svg-icon {
    width: 2rem;
  }

  .alert {
    font-size: 115%;
    color: white;
    display: flex;

    a {
      color: white;
      text-decoration: underline;
    }

    .flash-icon {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .svg-icon {
        top: 0;
      }
    }

    .flash-content {
      display: flex;
      align-items: center;

      & > div {
        white-space: pre-line;
      }
    }

    .flash-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

  .alert.alert-warning {
    background-color: var(--orange);
  }

  .alert.alert-danger {
    background-color: var(--red);
  }

  .alert.alert-success {
    background-color: var(--green);
  }

  .alert.alert-signpost {
    background-color: var(--blue);
  }

  width: 100%;
}

.navbar .flash-site {
  top: 100%;
  z-index: -1;
}
body.iosBugFixCaret.modal-open {
  position: fixed;
  width: 100%;
}
.survey-results {
  header {
    margin-top: 40px;
    font-weight: bold;
    font-size: 100%;
  }

  .question {
    label {
      font-weight: normal;
      margin: 0;
      margin-top: 5px;
    }

    .free_text {
      margin-bottom: 15px;
    }
  }
}
#suburb-list {
  li {
    .svg-icon {
      position: relative;
      top: 2px;
    }
  }
}

.serviced-zone-booking-status-editor {
  ul li {
    margin-bottom: 0.5em;
  }
}

.serviced-zone-booking-status-editor--status-indicators {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
}

.serviced-zone-booking-status-editor--collapsible {
  border-top: 1px solid #ddd;
  padding-top: 1em;
  margin-top: 1em;
}

.serviced-zone-booking-status-editor--serviced-zone-name {
  font-weight: bold;
  display: flex;
  align-items: center;

  & > *:not(:last-child) {
    margin-right: 10px !important;
  }

  & > * {
    top: 0 !important;
  }

  svg {
    fill: #aaa;
  }
}

.serviced-zone-booking-status-editor--subzone-name {
  font-weight: bold;
  min-width: 60px;
}

.serviced-zone-booking-status-editor--radios {
  display: flex;
  margin-left: 15px;

  .serviced-zone-booking-status-editor--radios--radio {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    border: 3px solid #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &.selected .radio-mark {
      display: block;
    }

    &:not(:last-child) {
      margin-right: 5px;
    }

    &[data-status="accepting"] .radio-mark {
      background-color: var(--green);
    }

    &[data-status="requiring_decision"] .radio-mark {
      background-color: var(--orange);
    }

    &[data-status="not_accepting"] .radio-mark {
      background-color: var(--red);
    }

    .radio-mark {
      display: none;
      border-radius: 50%;
      width: 16px;
      height: 16px;
    }
  }
}

.serviced-zone-statuses {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 2px 0;
  font-weight: bold;

  &:not(:last-child) {
    border-bottom: 1px solid #eee;
  }
}

.serviced-zone-status-indicators {
  display: flex;

  .serviced-zone-status {
    &:not(.selected) {
      visibility: hidden;
    }
    &:not(:last-child) {
      margin-right: 4px;
    }

    border-radius: 50%;
    width: 10px;
    height: 10px;

    &.accepting {
      background-color: var(--green);
    }
    &.requiring-decision {
      background-color: var(--orange);
    }
    &.not-accepting {
      background-color: var(--red);
    }
  }
}

.inline-status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
  top: 1px;
  margin-right: 3px;

  &.accepting {
    background-color: var(--green);
  }

  &.requiring-decision {
    background-color: var(--orange);
  }

  &.not-accepting {
    background-color: var(--red);
  }
}
.referral-reservation-countdown {
  color: white;
  padding: 5px 10px 5px 12px;
  margin-bottom: 10px;
  background-color: var(--green);
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  opacity: 0.92;

  &.expiring {
    background-color: var(--orange);
  }

  &.expired {
    background-color: var(--red);
  }
}

.referral-reservation-countdown--header {
  font-weight: bold;
}

.call-card {
  padding: 0 !important;
}

.call-card--header {
  background-color: #e8e8e8;
  color: black;
  padding: 5px 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  align-items: center;
}

.call-card--header--icon-and-heading {
  flex: 1;
  display: flex;
  align-items: center;

  .label {
    margin-left: 0.5em;
  }
}

.call-card--header--icon-and-heading--heading {
  position: relative;
  top: -1px;
  display: flex;
  align-items: center;
}

.call-card--header--icon {
  border-radius: 50%;
  width: 1.45em;
  height: 1.45em;
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.3em;
  padding-right: 1px;

  &.standby {
    background-color: #888;
  }

  & > * {
    position: relative;
    left: 1px;
  }
}

.call-card--content {
  padding: 10px;
}

.list-group-item .call-card {
  border: 1px solid #ccc;
}

.billing-task-list,
.callback-list {
  .billing-task-card,
  .call-card {
    padding: 4px 6px;
  }
}

.btn-group.btn-group-vertical {
  display: flex;
  flex-direction: column;

  button:first-child {
    border-top-right-radius: 4px !important;
    border-top-left-radius: 4px !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom: none;
  }
  button:last-child {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
}

@media (max-width: 410px) {
  .callback-list .call-card {
    .btn-group {
      width: 100%;
    }

    .btn-group > button {
      margin: 0;
    }

    .btn-group.change-allocation-dropdown {
      margin-bottom: 5px;
    }
  }
}
.widget:not(.collapsed) .tw\:sticky {
  position: sticky;
  background: white;
  z-index: 1;
  top: 7.4rem;
  border-bottom: none;

  &.stuck {
    z-index: 1002;
    border-bottom: 1px solid var(--border-color) !important;
  }

  &.stuck::after {
    content: " ";
    box-shadow: 0 2px 3px #aaa;
    width: 100%;
    position: absolute;
    height: 1px;
    bottom: 0;
    left: 0;
  }
}

.widget .shift-panel {
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
  border-top-width: 0;
  border-radius: 0;

  .collapsable-subheading {
    .svg-icon {
      margin: 0;
    }
  }

  .panel-heading {
    border-top: 8px solid var(--border-color);
    border-radius: 0;
    display: flex;
    align-items: center;
    padding: 3px 6px 5px;

    .license-plate {
      border: 1px solid #333;
      padding: 4px;
      border-radius: 2px;
    }

    .edit-shift-in-modal-button {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      margin-left: 5px;
    }
  }
}

.widget .shift-panel--body {
  padding: 0;
  .shift-management-panel {
    padding: 6px;
    background-color: white;
  }

  h4.collapsable-subheading {
    line-height: 36px;
    padding: 6px;
    margin-bottom: 0;
    margin-top: 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .collapsable-appointment-list {
    background-color: #eee;

    hr {
      border-color: white;
      border-style: dashed;
    }

    .visits-table:first-of-type .collapsable-subheading {
      border-style: none;
    }

    .card.household-card:not(:last-of-type) {
      margin-bottom: 7px;
    }

    .ranked-visits-site + .card.visits-table-card {
      margin-top: 7px;
    }
  }
}

.widget .shift-panel--body .collapsable-appointment-list--content {
  padding: 6px;
}

.modal-dialog {
  .modal-header.with-loading-feedback {
    padding: 0;
    border-bottom-style: none;

    .modal-header--content {
      padding: 15px 20px;
    }
  }

  .modal-body {
    hr.separator {
      margin: 15px 0;
    }
  }
}

.modal.info-modal .modal-dialog {
  .modal-body {
    padding: 1rem 2rem 3rem 2rem;

    h2 {
      font-weight: bold;
      font-size: 125%;
      margin-top: 1em;
      margin-bottom: 5px;
    }

    ul.serviced-zones-list {
      li:before {
        content: "–";
        margin-left: 0.3em;
        margin-right: 0.4em;
      }
    }

    .card {
      border: none;
      background-color: transparent;
      padding: 0;
    }
  }
}

ul li.draggable-serviced-zone {
  display: flex;
  align-items: center;
  padding: 0.3em;
  margin: 0.15em 0;
  background-color: #f7f7f7;

  & > * {
    margin: 0;
    margin-right: 0.5em;
  }

  svg.draggable-svg {
    fill: #bbb;
    margin-right: 1em;
    position: relative;
    top: 1px;
    cursor: pointer;
  }
}
.radio-group {
  .radio-choice {
    display: flex;
    align-items: center;
    margin-bottom: 0.6em;

    label {
      cursor: pointer;
      margin: 0;
      font-weight: normal;
      padding-left: 0.5em;
      line-height: 1;
    }

    input {
      cursor: pointer;
      margin: 0;
      width: 2em;
      min-width: 2em;
      height: 2em;
    }
  }
}
.call-note {
  border: 1px solid white;
  background: #f7f7f7;
  padding: 5px 8px;
  font-size: 80%;
}

.call-note--body {
  white-space: pre-wrap;
  margin-top: 0.5em;
}

.call-note--header {
  display: flex;
  justify-content: space-between;
}

.call-note--header--byline {
  font-weight: bold;
}

.call-note--timestamp {
  color: #888;
}
.fax {
  & > {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
  }

  & > * .info-row {
    margin-bottom: 10px;
  }
}
#call-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  background: white;

  @media (max-width: 768px) {
    .call-bar-container {
      width: 100%;
      padding: 5px !important;

      > div {
        width: 100%;
      }

      .active-call {
        justify-content: space-between;
      }
    }
  }

  .dialer {
    display: flex;

    #phone-number-input {
      border-radius: 0;

      &:focus {
        border-width: 1px;
      }
    }

    .btn-call {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      margin-left: -1px;
    }

    .show-dial-pad {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
  }

  .call-bar-container {
    position: relative;
    display: flex;
    padding: 5px 10px;
    justify-content: flex-end;
  }

  .recent-history {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
  }

  .contact-book-icon {
    position: relative;

    .superscript {
      position: absolute;
      left: 16px;
      top: -3px;
      font-size: 10px;
      text-align: center;
      color: white;
      background-color: var(--blue);
      border-radius: 50%;
      width: 15px;
      height: 15px;
    }
  }

  #phone-number-input {
    height: auto;
    min-width: 200px;
  }
}

#dial-pad {
  position: absolute;
  top: 45px;
  z-index: 1;
  width: 100%;
  display: none;
  background-color: #e6e6e6;
  border: 1px solid #e6e6e6;
  max-width: 290px;
}

#in-call-input {
  font-size: 20px;
  display: none;
}

.dial-pad-row {
  display: flex;
  height: 55px;
}

.special-digits,
.digits {
  background-color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.digits .number {
  font-size: 20px;
}

.digits .letters {
  font-size: 10px;
}

.active-call-info {
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 2;
}

.active-call > * {
  &:not(:last-child) {
    margin-right: 10px;
  }
}

.active-call-info > * {
  &:not(:last-child) {
    margin-right: 15px;
  }
}

.recent-history .vertically-centered > * {
  &:not(:last-child) {
    margin-right: 15px;
    margin-bottom: 2px;
  }
}

.contact-book-modal {
  display: none;

  .patient-info {
    margin-bottom: 10px;
  }

  .card:not(:last-child) {
    margin-bottom: 25px;
  }

  .contact-row {
    margin-bottom: 10px;
  }
}

.bg-grey {
  background-color: #e3e3e3;
}
.medicare-request-response-card {
  display: flex;
  flex-wrap: wrap;

  p {
    display: flex;
  }

  label {
    min-width: 120px;
  }
}

.medicare-request-response-card--metadata {
  flex: 1;
  padding-right: 1em;
}

.medicare-request-response-card--data {
  flex: 1;
  min-width: 200px;
}
/* Closes the `@layer bootstrap { … }` opened by _application_layer_open.css.
 * See that file for rationale. */
}