html {
	overflow: hidden;
	height: 100%;
}

body {
	background: var(--body-bg);
	font-family: StandardFont, FontAwesome;
	overflow: hidden;
	margin: 0;
	font-weight: normal;
	font-size: medium;
	letter-spacing: 0.01em;
}

body.login {
	background: var(--body-bg);
}

textarea {
	font-family: StandardFont, FontAwesome;
}

.ui-inputfield.ui-inputtextarea {
	height: auto;
	padding: 5px;
	white-space: pre-wrap;
}

*, *:before, *:after {
	box-sizing: border-box;
	transition-property: border-color, background-color, color;
	transition-duration: 0.2s;
}

*:focus {
  outline: none;
}

.ui-panel {
	padding: 0px;
}

.ui-menu {
	width: auto;
	padding: 0;
}

.ui-button {
	border: none;
	font-family: StandardFont;
}

table, .ui-panelgrid .ui-panelgrid-cell {
	border: none;
}

.required::after {
	content: " *";
	color: var(--required-color);
}

.ui-icon {
	text-indent: inherit;
}

.ui-button-text-icon-left .ui-icon.pp-plus,
.ui-button-text-icon-left .ui-icon.pp-share-1 {
	font-size: 18px;
	width: 1em;
	height: 1em;
	line-height: 1em;
	margin-top: calc(var(--fontBottomOffset)/2);
}

.ui-datepicker {
	background: var(--body-bg);
	border: 1px solid var(--datepicker-border);
	padding: 0;
	border-radius: 6px;
}

.ui-datepicker-buttonpane > button {
    font-family: StandardFont;
}

.ui-datepicker td a.ui-state-default, .ui-datepicker td span.ui-state-default
	{
	text-align: center;
}

.ui-state-default, .ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default {
	text-shadow: none;
	/*outline: none;*/
}

.headerText {
	font-weight: bold;
}

.ui-button-icon-only.ui-button.ui-state-default {
	background: none;
}

.ui-selectonemenu-panel {
	background: var(--body-bg);
}

.ui-shadow {
	box-shadow: 1px 3px 8px 0 rgba(152, 152, 152, 0.5);
}

.pp {
	font-family: 'patientportal' !important;
	font-size: 24px;
	font-style: initial !important;
	width: 24px;
	height: 24px;
	line-height: 24px;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	color: inherit;
}

.pp-plus::before {
	font-weight: 300;
}

.pp-small {
	font-size: 12px;
	font-weight: bold;
	margin-left: 5px !important;
}

.ui-selectcheckboxmenu-multiple .ui-icon-triangle-1-s::before,
	.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon::before {
	font-family: 'patientportal';
	content: "\EA2A";
	color: var(--color-3-bg);
	font-size: 24px;
	height: 24px;
}

.ui-icon-closethick::before {
	font-family: 'patientportal';
	content: "\EA16";
}

.error_row {
	color: var(--error-row-color);
	background: none;
	font-size: 14px;
	height: auto;
}

.ui-growl {
	left: 16px;
	bottom: 134px;
	top: unset;
	width: calc(100vw - 32px);
	padding: 0px calc(50vw - 400px);
}

.ui-growl .ui-growl-item-container {
	display: none !important;
	width: 100%;
	margin: 0px;
	position: initial;
	box-shadow: none;
	opacity:1;
}

.ui-growl .ui-growl-item-container:first-child {
	display: initial !important;
}

.ui-growl .ui-growl-item-container .ui-growl-item {
	background: var(--panel-bg);
	color: var(--body-color);
	box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.20);
	border-radius: 3px;
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
}

.ui-growl .ui-growl-item-container.ui-growl-error .ui-growl-item {
	background: var(--error-panel-color);
}

.ui-growl .ui-growl-item-container .ui-growl-item .ui-growl-image {
	width: 24px;
	height: 24px;
	display: flex;
	justify-content: center;
	flex-shrink: 0;
}

.ui-growl .ui-growl-image-info::before {
	font-family: PatientPortal;
	color: var(--color-1-fg);
	content: "\EA13";
	background: var(--color-1-bg);
	border-radius: 50%;
	padding: 6px;
	font-size: 12px;
}

.ui-growl .ui-growl-image-error::before {
    font-family: PatientPortal;
    color: var(--color-1-fg);
    content: "\EA16";
    background: var(--color-1-bg);
    border-radius: 50%;
    padding: 6px;
    font-size: 12px;
}

.ui-growl-image{
	background:none;
}

.ui-growl-title {
	display: none;
}

.ui-growl .ui-growl-item-container .ui-growl-item .ui-growl-message {
	padding: 0px;
	padding-right: 24px;
	padding-bottom: var(--fontBottomOffset);
	width:100%;
}

.ui-growl .ui-growl-item-container .ui-growl-item .ui-growl-icon-close {
	display: flex !important;
	top: 10%;
	right: 12px;
	transform: translateY(-50%);
	width: 14px;
	font-size: 14px;
}

.button_secondary, .ui-icon.ui-icon-close {
	color: var(--selected-bg);
}

.button.button_icon {
	background: none;
	color: var(--color-3-bg);
	display: flex;
	flex-direction: column;
	padding: 0px;
	gap: 0px;
	min-width: unset;
	height: unset !important;
}

.button.button_icon .ui-icon {
	font-weight: 400;
}

.button.button_icon.ui-state-loading {
	border: none;
	background: var(--body-bg);
}

.button.button_icon.ui-state-disabled {
	border: none;
	background: var(--body-bg);
	opacity: 0.4;
}

.selectAllCheckbox {
	padding-left: 12px;
}

.selectAllCheckbox .ui-chkbox-label {
	font-weight: bold;
	color: var(--color-3-bg);
}

.footerButtonPanel>.buttonSelectPanel {
	display: flex;
	justify-content: space-between;
	grid-column: 1/-1;
	margin-bottom: 10px;
	width: 100%;
}

.footerButtonPanel {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	grid-column: 1/3;
}

.footerButtonPanel:has(>:only-child)>* {
	margin-left: auto !important;
}

.footerButtonPanel>.button, .footerButtonPanel>* {
	margin-top: 10px;
	margin-bottom: auto;
}

.footerButtonPanel>*:last-child {
	margin: 10px 0px 22px 0px;
}

.headerTitle {
	font-size: 24px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.appointmentPicker .ui-datepicker {
	width: 100%;
	border: none;
}

.appointmentPicker .ui-datepicker td {
	height: 45px;
	font-weight: 700;
	font-size: 16px;
	line-height: 21px;
	padding: 0px;
}

.appointmentPicker .ui-datepicker td>* {
	margin: 12px;
}

.appointmentPicker td.disabledDate {
	background: var(--body-bg);
	color: var(--gray-30);
}

.appointmentPicker td.ui-datepicker-today span.ui-state-default {
	border: 1px solid var(--color-2-bg) !important;
	background: var(--body-bg);
}

.appointmentPicker td.ui-datepicker-today a {
	border: 0.5px solid var(--color-2-bg) !important;
}

.appointmentPicker td.enabledDate:not(.ui-datepicker-current-day) a:hover
	{
	background: var(--color-2-bg-20);
}

.appointmentPicker td.enabledDate a {
	background: var(--color-2-bg-10);
	color: var(--timeslot-color);
}

.appointmentPicker td.ui-datepicker-current-day a {
	background: var(--selected-bg);
	color: var(--selected-color);
}

.appointmentPicker .ui-datepicker .ui-datepicker-title {
	font-weight: 700;
	font-size: 16px;
	color: var(--timeslot-color);
}

.appointmentPicker td.ui-datepicker a, .ui-datepicker td a.ui-state-default,
	.appointmentPicker .ui-datepicker td span.ui-state-default {
	height: 46px;
	border: none;
	align-content: center;
	display: grid;
	padding: 0px;
}

.ui-datepicker.ui-input-overlay {
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
	padding: 0px;
	height: 24px !important;
	width: 24px !important;
	cursor: pointer;
	top: 5px !important;
	overflow: hidden;
}

.ui-datepicker .ui-datepicker-prev.ui-state-disabled, .ui-datepicker .ui-datepicker-next.ui-state-disabled
	{
	display: none;
}

.ui-datepicker-header .ui-icon-circle-triangle-e, .ui-datepicker-header .ui-icon-circle-triangle-w
	{
	color: var(--datepicker-btn-color);
	font-family: PatientPortal;
	font-size: 24px;
	line-height: 24px;
}

.ui-datepicker-header .ui-icon-circle-triangle-e::before {
	content: "\EA2E";
}

.ui-datepicker-header .ui-icon-circle-triangle-w::before {
	content: "\EA2F";
}

.ui-datepicker-header {
	background: var(--body-bg);
	font-size: 12px;
	margin-bottom: 16px;
}

.ui-datepicker th {
	background: var(--datepicker-header-bg);
	color: var(--datepicker-header-color);
	font-size: 14px;
	font-weight: normal;
	padding: 5px 0px;
	padding-bottom: calc(5px + var(--fontBottomOffset));
	line-height: 1em;
}

.ui-button-text-only .ui-button-text {
	padding-bottom: calc(0.3em + var(--fontBottomOffset));
}

.ui-menu .ui-menuitem-text, .ui-button-text {
	padding-bottom: var(--fontBottomOffset);
}

.ui-menu .ui-menuitem-link {
	border-left: 7px solid transparent;
	border-top: 0;
	border-bottom: 0;
}

.ui-panelmenu-panel.hasBobbel .ui-panelmenu-header a:after,
	.ui-menuitem-link.hasBobbel:after {
	content: var(--bobbelvalue);
	width: 22px;
	height: 22px;
	color: var(--bobbel-color);
	display: inline-grid;
	background: var(--bobbel-bg);
	place-items: center;
	border-radius: 50%;
	font-size: 12px;
	border: 1px solid var(--bobbel-border);
	margin-left: 8px;
	font-weight: normal;
	padding-right: 1px;
	padding-bottom: var(--fontBottomOffset);
	margin-top: var(--fontBottomOffset);
}

.ui-menuitem-icon.ui-icon:not(.pp) {
	display: none;
}

.dateTimePanel {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1px auto;
}

.dateTimePanel>div {
	display: flex;
	flex-direction: column;
}

.timeSlotPanel {
	grid-column-start: 3;
	grid-row-start: 1;
	grid-row-end: 3;
}

.ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected {
	border-top: 3px solid var(--selected-bg);
	border-bottom: 0px;
	background: var(--standard-bg);
	height: 44px;
	font-weight: bold;
	font-size: 16px;
}

.ui-tabs.ui-tabs-top>.ui-tabs-nav {
	border-bottom: 0px;
	text-align: left;
}

.ui-tabs.ui-tabs-top>.ui-tabs-nav>li>a {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: calc(-1.5px - var(--fontBottomOffset));
	max-width: 400px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
	color: var(--body-color);
	cursor: pointer;
}

.ui-tabs .ui-tabs-nav li a {
	color: var(--color-3-bg);
	padding: 0px;
}

.ui-tabs .ui-tabs-nav li {
	margin: 0px;
	background: var(--gray-10);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 21px;
	text-align: center;
	height: 46px;
}

.ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected, .ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected.ui-state-hover,
	.ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-state-hover {
	border-bottom: 0px;
}

.infoBobbel {
	width: 22px;
	height: 22px;
	color: var(--bobbel-color);
	display: inline-grid;
	background: var(--bobbel-bg);
	place-items: center;
	border-radius: 50%;
	font-size: 12px;
	border: 1px solid var(--bobbel-border);
	margin-left: 8px;
	font-weight: normal;
	padding-right: 1px;
	padding-bottom: var(--fontBottomOffset);
	margin-top: var(--fontBottomOffset);
}

.ui-selectmanycheckbox {
	border-collapse: collapse;
}

.ui-selectmanycheckbox .ui-chkbox {
	padding-left: 12px;
}

.ui-selectmanycheckbox label {
	padding-bottom: var(--fontBottomOffset);
}

.ui-chkbox:has(>.ui-chkbox-label) {
	display: flex;
	align-items: center;
}

.ui-chkbox-label {
	padding-bottom: var(--fontBottomOffset);
}

.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default {
	border-radius: 2px;
	background: var(--checkbox-bg);
	display: block;
}

.ui-chkbox .ui-chkbox-box {
	width: 24px;
	height: 24px;
	border: 1px solid;
}

.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default {
	border-color: var(--checkbox-border);
}

.notDisabled .ui-chkbox-box.ui-widget.ui-corner-all.ui-state-disabled {
	background: var(--body-bg);
}

.ui-chkbox-icon.ui-icon.ui-c.ui-icon-check {
	width: 100%;
	height: 100%;
	align-items: center;
	display: flex;
	padding: 4px;
	align-items: center;
}

.ui-icon.ui-icon-circle-check::after, .ui-icon-check::after {
	content: "\EA13" !important;
	font-family: 'patientportal' !important;
	font-size: 24px;
	font-style: initial !important;
	width: 24px;
	height: 24px;
	line-height: 24px;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	color: var(--color-3-bg);
	font-size: 14px;
	font-weight: bold;
}

.ui-chkbox-icon.ui-icon.pp {
	display: flex;
	padding: 4px;
	align-items: center;
}

.ui-chkbox-icon.ui-icon.pp:before {
	color: var(--checkbox-color);
	font-size: 14px;
	font-weight: bold;
}

.headerCheckbox {
	color: var(--gray-70);
	font-size: 14px;
}

.timeSlot {
	display: grid;
	gap: 24px;
	align-content: start;
	width: 182px;
	height: 286px;
	grid-template-columns: repeat(auto-fill, minmax(79px, 1fr));
}

.timeSlot.wideButtons {
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.timeSlotButtons {
	background: var(--color-2-bg-10);
	color: var(--timeslot-color);
	height: 46px;
	width: 100%;
	box-shadow: none;
	font-weight: bold;
	border-radius: 0px;
	font-size: 16px;
	margin-right: 0px;
}

.timeSlotButtons span {
	text-align: center;
	white-space: nowrap;
}

.timeSlotButtons.ui-button.ui-state-hover, .timeSlotButtons.ui-button.ui-state-active {
	background: var(--color-2-bg-20);
}

.timeSlotButtonSelected, .timeSlotButtonSelected.ui-button.ui-state-hover,
	.timeSlotButtonSelected.ui-button.ui-state-active {
	background: var(--selected-bg);
	color: var(--selected-color);
}

.ui-radiobutton .ui-radiobutton-box {
	border: 1px solid var(--checkbox-border);
	&.ui-state-active > .ui-icon-bullet {
	   background: var(--checkbox-color);
	   width: 10px;
	   height: 10px;
	   border-radius: 20px;
	   margin-top: 2px;
	   margin-left: 2px;
	} 
}



.ui-inputfield {
	width: 100%;
	height: 45px;
	border: 1px solid var(--body-bg);
	border-bottom: 1px solid var(--input-border-color);
	background: var(--input-bg);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	font-size: 18px;
	line-height: 160%;
	color: var(--input-color);
	border-radius: 3px;
	overflow: hidden;
	padding: 0 5px 0 5px;
	font-family: StandardFont, FontAwesome;
}

.ui-inputfield::placeholder {
	color: var(--input-placeholder);
}

.ui-password .ui-password-icon {
	font-style: normal;
	font-weight: normal;
	display: inline-block;
	background: none;
	cursor: pointer;
}

.ui-password {
	position: relative;
}

.ui-input-icon-right>i:last-of-type {
	right: 12px;
	position: absolute;
}

.ui-selectonemenu {
	width: auto;
	height: 45px;
	border: 1px solid var(--body-bg);
	border-bottom: 1px solid var(--input-border-color);
	background: var(--input-bg);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	font-size: 18px;
	line-height: 160%;
	color: var(--input-color);
	border-radius: 3px;
	overflow: hidden;
	padding-right: 40px;
}

.ui-selectonemenu.ui-state-hover {
	background-color: var(--input-hover-bg);
}

.ui-inputfield.ui-state-focus, .ui-selectonemenu.ui-state-focus {
	background-color: var(--input-focus-bg);
	border: 1px solid var(--input-focus-border-color);
}

.ui-inputfield.ui-state-error, .ui-selectonemenu.ui-state-error {
	border: 2px solid var(--error-border-color);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background: var(--gray-10);
}

.portalmessage_mainMessage>textarea.ui-inputfield.ui-state-error {
	border: 2px solid var(--error-border-color);
	height: calc(100% - 20px);
}

.ui-selectonemenu label.ui-selectonemenu-label {
	height: 100%;
	display: flex;
	padding: 5px;
	padding-bottom: calc(5px + var(--fontBottomOffset));
	text-overflow: ellipsis;
	line-height: normal;
	align-items: center;
}

.ui-selectonemenu .ui-selectonemenu-trigger {
	width: 24px;
	height: 24px;
	padding: 0px;
	top: 10px;
	right: 15px;
}

.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
	margin-top: auto;
}

.ui-selectonemenu-panel .ui-selectonemenu-list {
	padding: 8px 0px;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.12);
	border-radius: 0px 0px 3px 3px;
}

.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-corner-all.ui-state-hover
	{
	background-color: var(--panel-bg);
}

.ui-selectonemenu-list-item.ui-state-highlight {
	background-color: var(--panel-bg);
}

.ui-selectonemenu-panel .ui-selectonemenu-list-item {
	padding: 6px 10px;
	padding-bottom: calc(6px + var(--fontBottomOffset));
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	line-height: 160%;
	white-space: break-spaces;
}

.ui-selectonemenu-items, .ui-selectonemenu-panel .ui-selectonemenu-items-wrapper
	{
	font-size: 18px;
	width: 100%;
}

.ui-datepicker-buttonpane {
	display: flex;
	flex-direction: column;
}

.button, .ui-datepicker-buttonpane>button {
	height: 48px !important;
	border-radius: 30px;
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	box-shadow: none;
	margin: 0px;
	text-align: center;
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 0px 20px var(--fontBottomOffset) 20px;
	justify-content: center;
	white-space: nowrap;
	width: fit-content;
	min-width: 200px;
}

.ui-datepicker td a.ui-state-default {
	text-align: center;
}

.ui-datepicker-today a {
	color: var(--datepicker-today-color);
}

.ui-datepicker-header .ui-icon-circle-triangle-e, .ui-datepicker-header .ui-icon-circle-triangle-w
	{
	display: contents !important;
	transform: scale(1) !important;
	text-indent: 0px !important;
}

.ui-datepicker .ui-datepicker-prev {
	left: 6px !important;
}

.ui-datepicker .ui-datepicker-next {
	right: 6px !important;
}

.ui-datepicker-buttonpane>button {
	margin-top: 0px !important;
	padding: 0px 20px !important;
}

.ui-menubutton .button {
	width: 100%;
}

.button.ui-button-text-only .ui-button-text {
	padding: 0px;
}

.button .ui-button-text {
	text-align: center;
}

.ui-button-text-icon-left .ui-button-text {
	padding: 0px;
}

.button.ui-button.ui-state-active {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.main_footer .button_primary, .main_footer .ui-menubutton {
	grid-column: 2;
	justify-self: end;
}

.main_footer .button_primary.fullWidth, .main_footer .ui-menubutton.fullWidth
	{
	grid-column: 1/3;
}

.button_primary, .ui-priority-primary {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-color);
	border: 1px solid var(--btn-primary-border);
}

.button_primary.ui-button.ui-state-active, .button_primary.ui-button.ui-state-hover,
	.ui-priority-primary.ui-state-active, .ui-priority-primary.ui-state-hover
	{
	background: var(--btn-primary-hover-bg);
	color: var(--btn-primary-hover-color);
	border: 1px solid var(--btn-primary-hover-border);
}

.button_primary.ui-button.ui-state-disabled, .ui-priority-primary.ui-state-disabled
	{
	opacity: 0.5;
	background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    border: 1px solid var(--btn-primary-border);
}

.button_primary:focus-visible {
	border: 2px solid var(--btn-primary-color);
	outline: 2px solid var(--btn-primary-bg);
}

.button_primary.button_error {
	background: var(--btn-error-bg);
	color: var(--btn-error-color);
	border-color: var(--btn-error-border);
}

.button_primary.button_error.ui-button.ui-state-active, .button_primary.button_error.ui-button.ui-state-hover
	{
	background: var(--btn-error-hover-bg);
    color: var(--btn-error-hover-color);
    border-color: var(--btn-error-hover-border);
}

.button_primary.button_error.ui-button.ui-state-disabled {
	opacity: 0.5;
	background: var(--btn-error-bg);
    color: var(--btn-error-color);
    border-color: var(--btn-error-border);
}

.button_secondary, .ui-priority-secondary {
	background: var(--btn-secondary-bg);
	color: var(--btn-secondary-color);
	border: 1px solid var(--btn-secondary-border);
}

.button_secondary:focus-visible {
	border: 6px solid var(--btn-secondary-border);
	outline: 2px solid var(--btn-secondary-bg);
	outline-offset: -5px;
}

.button_secondary.ui-button.ui-state-active, .button_secondary.ui-button.ui-state-hover,
	.ui-priority-secondary.ui-state-active, .ui-priority-secondary.ui-state-hover
	{
	background: var(--btn-secondary-hover-bg);
}

.button_secondary.button_red {
	color: var(--btn-red-color);
	border: 1px solid var(--btn-red-border);
}

.button_secondary.button_red.ui-button.ui-state-active,
	.button_secondary.button_red.ui-button.ui-state-hover {
	background: var(--btn-red-hover-bg);
}

.button_link {
	background: var(--btn-link-bg);
	color: var(--btn-link-color);
	border: 1px solid var(--btn-link-border);
}

.button_link.ui-button.ui-state-active, .button_link.ui-button.ui-state-hover
	{
	background: var(--btn-link-hover-bg);
	color: var(--btn-link-hover-color);
	border: 1px solid var(--btn-link-hover-border);
}

.button_link.ui-button.ui-state-disabled {
	opacity: 0.5;
	background: var(--btn-link-bg);
    color: var(--btn-link-color);
    border: 1px solid var(--btn-link-border);
}

.button_link:focus-visible {
    border: 2px solid var(--btn-link-color);
    outline: 2px solid var(--btn-link-bg);
}

.isStickyBottom {
	box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.50);
}

.isStickyTop {
	box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.50);
}

.main_header {
	background: var(--standard-bg);
	z-index: 2;
	border-bottom: 1px solid var(--header-border);
}

.main_footer {
	z-index: 1;
	background: var(--standard-bg);
	width: 100vw;
	display: grid;
	gap: 0px 25px;
	align-items: center;
	padding: 0px calc(50vw - 400px);
	grid-template-columns: repeat(2, minmax(min-content, 50%));
}

.info_footer_group {
	margin-bottom: 12px;
	margin-top: 12px;
}

.info_footer .info_footer_content {
	grid-column: 1/-1;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.footerSeparator {
	display: block;
	width: 100vw;
	border-bottom: 1px solid var(--gray-40);
	margin: 0 0 4px 0;
}

.info_footer .info_footer_content i {
	margin-right: 0px;
}

.helpLink {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: bold;
	padding-top: 8px;
	padding-bottom: 4px;
}

.helpLink .pi {
	font-size: 24px;
}

.ui-confirm-dialog, .largeDialog {
	width: min(800px, calc(100vw - 32px)) !important;
	left: max(16px, calc(50vw - 400px)) !important;
	border-radius: 0px;
	background: var(--body-bg);
	overflow: initial;
}

.largeDialog.qrCodeDialog {
	max-width: 500px;
	left: max(16px, calc(50vw - 250px)) !important;
}

.largeDialog.qrCodeDialog.ui-dialog .ui-dialog-content {
	gap: 12px;
}

.largeDialog.qrCodeDialog img {
	padding: 32px;
}

.ui-confirm-dialog {
	padding: 24px 16px 12px 16px;
}

.largeDialog.ui-dialog .ui-dialog-titlebar {
	display: none;
}

.largeDialog.ui-dialog .ui-dialog-content {
	padding: 24px 16px 36px 16px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.largeDialog.ui-dialog .ui-dialog-content>form {
	display: contents;
}

.largeDialog .button {
	width: 100%;
}

.ui-dialog .ui-dialog-titlebar {
	background: none;
	padding: 0px;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
	margin: 0;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
	display: none;
}

.ui-dialog .ui-dialog-titlebar, .largeDialog .dialogTitle {
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: var(--header-color);
}

.ui-dialog .ui-dialog-titlebar, .largeDialog .dialogTitleMedium {
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	color: var(--header-color);
}

.largeDialog .appointmentOverview {
	margin-bottom: -12px;
	display: flex;
	flex-direction: column;
	align-items: unset;
	gap: 0px;
}

.largeDialog .appointmentTitle {
	padding: 8px 12px;
}

.largeDialog .confirmWrapper {
	margin-top: -12px;
	margin-bottom: 12px;
}

.dialog {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--header-color);
}

.dialogSubtitleText {
	font-weight: 700;
	padding-bottom: var(--fontBottomOffset);
	padding-left: 7px;
}

.dialogSubtitle {
	display: flex;
	align-items: center;
}

.hint img {
	max-height: calc(80vh - 32px);
	width: 100%;
	object-fit: contain;
	overflow: hidden
}

.hint {
	width: min(800px, calc(100vw - 32px));
}

.ui-confirm-dialog .ui-dialog-content {
	padding: 0px;
	margin-top: 24px;
}

.ui-confirm-dialog .ui-dialog-content>.ui-icon {
	display: none;
}

.ui-confirm-dialog-message, .largeDialog .dialogMessage {
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	margin: 0;
	margin-bottom: 12px;
	color: var(--body-color);
}

.ui-confirm-dialog.ui-dialog .ui-dialog-buttonpane {
	display: flex;
	flex-direction: column;
	padding: 0px;
	gap: 24px;
	margin: 0px;
}

.ui-confirm-dialog.ui-dialog .ui-dialog-buttonpane button {
	margin: 0px;
	width: 100%;
}

.ui-dialog-mask {
	background-color: rgba(0, 0, 0, 0.5);
}

.panelNoPadding td.ui-panelgrid-cell {
	padding: 0px !important;
}

h2 {
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 31px;
	color: var(--header-color);
	margin: 0;
}

h1 {
	display: unset;
	font-size: inherit;
	margin: unset;
	font-weight: inherit;
	unicode-bidi: unset;
}

.gray100 {
	color: var(--gray-100) !important;
}

.black {
	color: #000000 !important;
}

.heading_H1 {
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 120%;
	color: var(--header-color);
}

.label {
	min-height: 1em;
}

.label_small {
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 140%;
	color: var(--gray-70);
	white-space: break-spaces;
}

.label_small_strong {
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: var(--gray-90);
}

.label_link {
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 21px;
	padding-left: 5px;
	color: var(--color-3-bg);
}

.text_medium {
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 160%;
	color: var(--gray-100);
}

.text_emphasized {
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 155%;
	color: var(--gray-90);
}

.sub_title {
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: var(--color-1-fg);
	margin-bottom: 12px;
}

.upper_sub_title {
	padding: 0px max(calc(50% - 400px));
	display: block;
	margin-top: 22px;
	margin-bottom: 1px;
}

.text_link {
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 160%;
	color: var(--color-2-bg);
	margin-right: 10px;
}

.welcomePanel {
	width: 576px;
	height: auto;
	margin-left: calc(50% - 370px);
}

.loginPanel {
	height: auto;
	padding-bottom: 36px;
	padding: 0px max(16px, calc(50% - 300px)) 36px
		max(16px, calc(50% - 300px));
}

.loginPanel>* {
	width: 387px;
	margin: auto;
}

.portalLoginToken {
	text-transform: uppercase;
}

.loginPanel .ui-inputfield {
	background: var(--body-bg);
}

.margin_40 {
	margin-bottom: 40px;
}

.panelDiv {
	border-top: 1px solid var(--panel-top-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 0px;
	margin: 0px max(0px, calc(50% - 400px));
}

.panelDiv button {
	width: fit-content;
}

.registrationTable {
	width: 100%;
}

.scheduleAppointmentTable {
	margin-top: -10px;
}

.registrationTable {
	margin-top: -20px;
}

.scheduleAppointmentTable.ui-panelgrid .ui-panelgrid-cell,
	.registrationTable.ui-panelgrid .ui-panelgrid-cell {
	padding: 0px;
}

.scheduleAppointmentTable.ui-panelgrid .ui-panelgrid-cell td span.label_small
	{
	margin-top: 12px;
	display: block;
}

.entryList {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.appointmentList {
	display: grid;
	flex-direction: column;
	gap: 12px;
	grid-template-columns: auto 1fr 1fr auto auto;
}

.appointmentList .fa.fa-download, .appointmentList .fa.fa-file-text-o,
	.appointmentList .fa.fa-trash, .appointmentList .fa-expand,
	.appointmentList .fa-ellipsis-h, .appointmentList .fa.fa-download.fa:hover,
	.appointmentList .fa.fa-file-text-o.fa:hover, .appointmentList .fa.fa-trash.fa:hover,
	.appointmentList .fa-expand.fa:hover, .appointmentList .fa-ellipsis-h.fa:hover
	{
	color: var(--color-3-bg);
	font-size: 25px;
}

.fa-undo, .fa-undo.fa:hover {
	color: var(--gray-60);
	font-size: 25px;
}

.appointmentOverview {
	display: grid;
	flex-direction: row;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
	min-height: 60px;
	align-items: center;
	grid-template-columns: auto 1fr 1fr auto auto;
	grid-template-columns: subgrid;
	grid-column: 1/6;
	background: var(--appointment-bg);
}

.documentFilter {
	display: grid;
	grid-template-columns: minmax(0px, 1fr) auto;
	column-gap: 12px;
	padding: 8px 0px 16px 0px;
	max-width: 800px;
	margin: auto;
	align-items: center;
	width: 100%;
}

.documentFilter>.onlyIcon {
	margin-top: 10px;
}

.dynamicDocumentFilter {
	display: flex;
	column-gap: 12px;
	padding: 8px 0px 16px 0px;
	max-width: 800px;
	margin: auto;
	align-items: center;
	justify-content: end;
	width: 100%;
}

.documentDynamicFilterOptions {
	margin: -4px;
}

.documentFilterOptions {
	display: flex;
	flex-direction: column;
	min-width: 250px;
}

.documentSortOptions {
	display: flex;
	flex-direction: column;
	min-width: 250px;
	margin: -16px;
}

.documentSortOptions>span {
	padding: 12px;
}

.dynamicFilter {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-bottom: 1px solid var(--gray-20);
	margin-bottom: 12px;
}

.dynamicFilter:last-of-type {
	border-bottom: none;
	margin-bottom: -14px;
}

.dynamicFilter td {
	padding-bottom: 7px;
	display: flex;
	align-items: center;
}

.sortOrder {
	color: var(--standard-color);
	font-style: normal;
	font-size: 16px;
	line-height: normal;
	text-align: left;
	height: 36px;
	padding: 0px 12px;
	padding-bottom: var(--fontBottomOffset);
	display: flex;
	align-items: center;
}

.sortOrder.selected {
	background: var(--panel-bg);
}

.onlyIcon {
	color: var(--color-3-bg);
	cursor: pointer;
}

.ui-overlaypanel {
	filter: drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.50));
	border-radius: 5px;
	overflow: hidden;
	box-shadow: none;
}

.ui-overlaypanel-content {
	background: var(--body-bg);
	max-height: 70vh;
	overflow: auto;
}

.ui-overlaypanel-content {
	padding: 16px;
}

.editOverlayPanel>.ui-overlaypanel-content {
	padding: 6px 0px;
	display: flex;
	flex-direction: column;
}

.editOverlayPanel>.ui-overlaypanel-content a {
	color: #000;
	padding: 6px 12px;
	padding-bottom: calc(6px + var(--fontBottomOffset));
	line-height: 160%;
}

.editOverlayPanel>.ui-overlaypanel-content a:hover {
	background: var(--panel-bg);
}

.documentOverview {
	display: flex;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
	background: var(--card-bg);
	gap: 8px;
	align-items: center;
	padding: 8px 8px 8px 0px;
	min-height: 60px;
}

.documentOverview.selected {
	background: var(--color-2-bg-5);
}

.welcomeNews .documentOverview {
	grid-template-columns: auto minmax(0px, 1fr) 24px;
	padding: 8px;
}

.welcomeNews .documentOverview .newDocumentMarker {
	display: none;
}

.documentOverview:hover {
	background: var(--card-hover-bg);
}

.documentOverview>a {
	font-size: 24px;
	color: var(--header-color);
	flex-shrink: 0;
}

.documentOverview .ui-button, .appointmentOverview .ui-button {
	width: 100%;
	color: inherit;
}

.welcomeNews .documentOverview .documentTexts {
	display: grid;
	grid-template-columns: minmax(0px, 1fr) auto;
	align-items: center;
}

.welcomeNews .documentTexts .createUploadLabel {
	grid-column: 1/3;
	padding-bottom: 0px;
	font-size: medium;
}

.welcomeNews .statusLabel {
	grid-column: 2/3;
	grid-row: 1;
}

.documentTexts {
	display: grid;
	grid-template-columns: 40% 1fr auto;
	align-items: center;
	flex-grow: 1;
}

.documentTexts .headerText {
	font-style: normal;
	font-size: 16px;
	color: var(--header-color);
	margin-right: 10px;
	text-decoration: none;
	font-weight: 700;
	overflow: hidden;
	line-height: normal;
	display: block;
	padding-bottom: var(--fontBottomOffset);
	pointer-events: none;
}

.documentTexts .createUploadLabel {
	padding-bottom: var(--fontBottomOffset);
	font-size: medium;
}

.appointmentHeader {
	display: flex;
	padding: 7px 16px 8px 12px;
	justify-content: space-between;
	align-items: center;
	background: var(--appointment-header-bg);
	color: var(--appointment-header-color);
	font-weight: bold;
	white-space: nowrap;
	height: 100%;
}

.appointmentHeaderDescription {
	display: flex;
	align-items: center;
	gap: 8px;
}

.appointmentHeader.pending .pp, .appointmentHeader.cancelled .pp {
	color: var(--color-2-bg);
}

.appointmentHeader .pp, .appointmentHeader.past .pp {
	color: var(--appointment-header-color);
	font-weight: normal;
}

.appointmentHeader.pending {
	background: var(--appointment-header-pending-bg);
	color:  var(--appointment-header-pending-color);
}

.appointmentHeader.cancelled {
	background: var(--appointment-header-cancelled-bg);
    color:  var(--appointment-header-cancelled-color);
}

.appointmentHeader.cancelled .appointmentHeaderDescription {
	text-decoration: line-through;
}

.appointmentHeader.past {
	background: var(--appointment-header-past-bg);
	color: var(--appointment-header-past-color);
}

.appointmentCancelWrapper {
	display: flex;
	flex-direction: column;
	font-size: 16px;
}

.appointmentBody {
	display: contents;
	padding: 8px 12px;
	gap: 12px;
	align-items: center;
	width: 100%;
}

.appointmentOverview>.menuButtonsDocument {
	padding-right: 12px;
	grid-column: 5;
}

.appointmentDocuments {
	white-space: break-spaces;
	font-size: 14px;
	color: var(--appointment-subtitle-color);
	padding-bottom: 0.25em;
	width: max-content;
}

.appointmentTitle {
	font-size: 16px;
	font-weight: bold;
	color: var(--appointment-title-color);
	padding-bottom: 0.25em;
	flex-basis: 35%;
	flex-shrink: 0;
}

.appointmentOverviewInfoDiv {
	margin: 30px 0px 30px 0px;
	width: 640px;
}

.appointmentTitleHeader {
	display: flex;
	flex-direction: column;
	position: relative;
	font-size: 16px;
	font-weight: 700;
	color: var(--header-color);
	max-width: 800px;
	margin: 0px auto;
	width: 800px;
	padding: 24px 0px;
	gap: 14px;
}

.appointmentButtons {
	display: grid;
	gap: 24px 36px;
	grid-template-columns: auto auto 1fr;
	margin: 10px 0px 12px 0px;
}

.appointmentButtons>:nth-child(3n) {
	margin-left: auto;
}

.appointmentButtons .ui-button {
	white-space: wrap;
}

.appointmentButtons .ui-button .ui-icon {
	font-weight: normal;
	flex-shrink: 0;
}

.appointmentButtons .ui-button .ui-icon.pp-calendar-download {
	margin-bottom: -7px;
}

.videoconferenceJoinGroup {
	position: relative;
	display: inline-block;
	justify-self: start;
	width: fit-content;
}

.videoconferenceJoinGroup .ui-button {
	padding-right: 32px;
}

.videoconferenceJoinGroup .pp-information-circle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: auto;
	z-index: 1;
}

.videoConferenceFrame {
	width: 800px;
	max-height: 500px;
	border: 1px solid var(--gray-30);
	margin: 0 auto;
	padding-bottom: 0px !important;
	background: var(--gray-30);
}

.uploadFrame {
	width: 100vw;
	height: calc(100% + 40px);
	border: none;
	border-radius: 0px;
	margin: 0px -16px !important;
	width: calc(100% + 32px) !important;
	padding: 0px calc(50% - 400px + 16px);
	box-sizing: content-box;
}

.docFullSize {
	padding: 16px;
	width: min(100vw, 805px);
	margin: 0px -16px;
}

.docFullSize #showDocumentInlineTarget, .docFullSize #showDocumentTarget
	{
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

.docFullSize .page {
	box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.12);
}

.docNonDisplay {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	height: 100%;
	justify-content: center;
}

.docNonDisplay>.text_medium {
	max-width: 296px;
	text-align: center;
	white-space: pre-wrap;
}

.portalContentTabs {
	width: 800px;
	margin: 0px -16px;
	top: 0;
	z-index: 1;
	width: calc(100% + 32px);
}

.portalContentTabs .ui-tabs ul li a {
	font-size: 16px;
	line-height: 10px;
	left: 0px;
	right: 0px;
	position: absolute;
}

.portalContentTabs .ui-tabs .ui-tabs-nav li {
	width: 50%;
	border-width: 1px;
	top: 0px;
	display: inline-grid;
	place-items: center;
	height: 48px;
	border-top: 3px solid transparent;
	cursor: pointer;
	position: relative;
}

.portalContentTabs.threeTabs .ui-tabs .ui-tabs-nav li:nth-child(2n+1) {
	width: calc(800px/ 3 + calc(50% - 400px));
}

.portalContentTabs.threeTabs .ui-tabs .ui-tabs-nav li:nth-child(2) {
	width: calc(800px/ 3);
}

.portalContentTabs.threeTabs .ui-tabs .ui-tabs-nav li>a {
	max-width: calc(800px/ 3);
}

.portalContentTabs .ui-tabs .ui-tabs-nav li:not(.ui-tabs-selected):first-of-type
	{
	box-shadow: -10px 0px 10px -5px rgba(0, 0, 0, 0.05) inset, 0px -10px
		10px -5px rgba(0, 0, 0, 0.05) inset;
	border-top: none;
}

.portalContentTabs .ui-tabs .ui-tabs-nav li:not(.ui-tabs-selected) {
	box-shadow: 10px 0px 10px -5px rgba(0, 0, 0, 0.05) inset, 0px -10px 10px
		-5px rgba(0, 0, 0, 0.05) inset;
	border-top: none;
}

.portalContentTabs .ui-tabs .ui-tabs-nav li:not(.ui-tabs-selected)>a {
	padding-top: 3px;
	margin-bottom: 0px !important;
}

.portalContentTabs .ui-tabs .ui-tabs-nav li:first-of-type>a {
	margin-left: auto;
}

.portalContentTabs .ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected,
	.portalContentTabDetails .ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected
	{
	height: 48px;
	cursor: pointer;
}

.portalContentTabs.colored .ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected,
	.portalContentTabDetails.colored .ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected
	{
	background: var(--panel-bg);
}

.portalContentTabs.colored2 .ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected,
	.portalContentTabDetails.colored2 .ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected
	{
	background: var(--panel-bg);
}

.appointmentStatusCancelled {
	background: var(--appointment-status-cancelled-bg);
	color:  var(--appointment-status-cancelled-color);
	border-radius: 5px;
	width: fit-content;
	font-size: 14px;
	padding: 0px 8px;
	line-height: 14px;
	height: 18px;
	display: flex;
	align-items: center;
	padding-bottom: var(--fontBottomOffset);
}

.appointmentStatusBooked {
	background:  var(--appointment-status-booked-bg);
	color:  var(--appointment-status-booked-color);
	border-radius: 5px;
	width: fit-content;
	font-size: 14px;
	padding: 0px 8px;
	line-height: 14px;
	height: 18px;
	display: flex;
	align-items: center;
	padding-bottom: var(--fontBottomOffset);
}

.appointmentStatusPending {
	background:  var(--appointment-status-pending-bg);
	color:  var(--appointment-status-pending-color);
	border-radius: 5px;
	width: fit-content;
	font-size: 14px;
	padding: 0px 8px;
	line-height: 14px;
	height: 18px;
	display: flex;
	align-items: center;
	padding-bottom: var(--fontBottomOffset);
	white-space: nowrap;
}

.logoPublicMenu {
	height: 82px;
	padding: var(--logo-padding);
}

.registrationError {
	color: var(--error-border-color);
	padding-left: 10px;
	margin: 20px 0px 20px 0px;
}

.ui-message.ui-message-error.ui-widget.ui-corner-all {
    line-height: 10px;
}

.ui-message-error {
    background: none;
    border: none;
    color: var(--error-message-color);
    font-weight: normal !important;
    font-size: 13px;
	padding: 4px 0px !important;
    margin: 0;
}

.ui-message-error-icon {
	display: none;
}

.registrationInputTable.ui-datatable tbody.ui-datatable-data {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.registrationInputTable.ui-datatable tbody td {
	padding: 0px;
}

.registrationInputTable.ui-datatable tbody tr:nth-child(odd) {
	padding-right: 5px;
}

.registrationInputTable.ui-datatable tbody tr:nth-child(even) {
	padding-left: 5px;
}

.keywordSearchPanel .ui-autocomplete .ui-inputfield, .keywordSearchPanel .ui-autocomplete
	{
	width: 100%;
	padding-bottom: var(--fontBottomOffset);
}

.appointmentSearchPanel {
	width: 100%;
	overflow: hidden;
	margin-bottom: 8px;
}

.appointmentSearchPanel .ui-autocomplete .ui-inputfield {
	font-family: StandardFont, FontAwesome;
}

.ui-tabs-panels .ui-tabs-panel.ui-widget-content.ui-corner-bottom {
	padding: 0;
}

.ui-tabs {
	padding: 0;
}

.ui-tabs.ui-tabs-top>.ui-tabs-nav {
	padding: 0;
}

.loading.ui-dialog, .loading .ui-widget-content {
	background: none;
	overflow: hidden;
	box-shadow: none;
}

.spinner_bounce {
	width: 40px;
	height: 40px;
	position: relative;
	margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: var(--bounce-bg);
	opacity: 0.6;
	position: absolute;
	top: 0;
	left: 0;
	animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}
.decisionList {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.decision {
	display: flex;
	flex-direction: column;
}

.appointmentSearchPanel .ui-selectonemenu, .furtherInfoPanel .ui-selectonemenu
	{
	width: 100%;
}

.registrationInputTable.ui-datatable .ui-inputfield {
	width: 100%;
	padding: 0px 5px 0px 5px;
}

.registrationInputTable.ui-datatable .ui-selectonemenu {
	width: 100%;
}

.registrationInputTable.ui-datatable .ui-selectonemenu label.ui-selectonemenu-label
	{
	padding: 5px;
}

a {
	color: var(--link-color);
	text-decoration: none;
}
a.ui-state-disabled {
	opacity: 0.5;
}

.ui-button.ui-state-disabled {
	background-color: var(--gray-20);
}

.ui-tooltip .ui-tooltip-text {
	background-color: var(--tooltip-bg);
	color: var(--tooltip-color);
	filter: drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.20));
	padding: 12px;
	border-radius: 5px;
}

.tooltipRegistration.ui-tooltip {
	width: 423px;
	height: 80px;
	padding: 16px;
}

.fa.fa-question-circle {
	font-size: 20px;
	padding-left: 10px;
	color: var(--standard-color);
}

.fa.fa-sign-out {
	color: var(--standard-color);
}

.page_content {
	display: grid;
	position: absolute;
	width: 100%;
	height: 100%;
	grid-template-columns: 100%;
	grid-template-rows: auto minmax(0px, 1fr) auto;
	overflow: hidden;
}

.mainContent {
	position: relative;
}

.mainContent>*, .contentform {
	max-width: 800px;
	width: 800px;
	margin: auto;
	margin-top: 20px;
}

.mainContent>.homeWrapper {
	overflow-x: hidden;
	margin: 0px -16px;
	width: calc(100% + 32px);
	max-width: unset;
}

.mainContent>.loginContent {
	margin: 0px -16px;
	width: calc(100% + 32px);
	background: var(--panel-bg);
	max-width: unset;
}

.main_content>.cmsContent {
	display: flex;
	width: calc(100% + 32px);
	margin-left: -16px;
	padding-bottom: 0px !important;
	height: 100%;
}

.homeWrapper.noChildBorder .panelDiv {
	border-top: 0px;
}

.homeMenu .ui-menu-list.ui-helper-reset, .portalWorkflowPanel {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 12px;
	padding: 20px max(16px, calc(50% - 400px));
}

.homeMenu.ui-menu .ui-menu-list .ui-menuitem a, .portalWorkflowPanel .portalWorkflowButton
	{
	background: var(--home-btn-primary-bg);
    color: var(--home-btn-primary-color);
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	padding: 16px 0px 12px 0px;
	border: none;
	place-content: space-around;
	align-items: center;
	border-radius: 0px;
	box-shadow: none;
}

.homeMenu.ui-menu .ui-menu-list .ui-menuitem a:has(>.ui-icon),
	.portalWorkflowPanel .portalWorkflowButton:has(>.ui-icon) {
	place-content: space-between;
}

.homeMenu.ui-menu .ui-menu-list .ui-menuitem, .portalWorkflowPanel .portalWorkflowButton
	{
	height: 84px;
	grid-column: span 2;
}

.homeMenu.ui-menu .ui-menu-list .ui-menuitem a.ui-state-hover,
	.portalWorkflowPanel .portalWorkflowButton.ui-state-hover {
	background: var(--home-btn-primary-hover-bg);
}

.homeMenu.ui-menu .ui-menu-list .ui-menuitem a .ui-menuitem-text,
	.portalWorkflowPanel .portalWorkflowButton .ui-button-text {
	min-height: 24px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

.homeMenu.ui-menu .ui-menu-list .ui-menuitem:nth-child(n+3),
	.portalWorkflowPanel .portalWorkflowButton:nth-child(n+3) {
	grid-column: span 1;
}

.homeMenu.ui-menu .ui-menu-list .ui-menuitem:nth-child(n+3) a,
	.portalWorkflowPanel .portalWorkflowButton:nth-child(n+3) {
	background: var(--home-btn-secondary-bg);
	color: var(--home-btn-secondary-color);
}

.homeMenu.ui-menu .ui-menu-list .ui-menuitem:nth-child(n+3) a.ui-state-hover,
	.portalWorkflowPanel .portalWorkflowButton.ui-state-hover:nth-child(n+3)
	{
	background: var(--home-btn-secondary-hover-bg);
}

.portalWorkflowPanel .portalWorkflowButton.ui-button-text-only .ui-button-text
	{
	padding: 0px;
}

.portalWorkflowPanel .portalWorkflowButton .ui-icon {
	font-weight: normal;
}

.portalWorkflowPanelDicomUpload {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 20px auto 20px auto;
	gap: 0px 25px;
}

.portalWorkflowButtonDicomUpload {
	height: auto;
	min-height: 48px;
	border-radius: 30px;
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.settingsMenu.ui-menu {
	background: var(--gray-40);
	padding: 1px 0px;
}

.settingsMenu .ui-icon-triangle-1-s::before {
	content: "\EA0C";
	color: var(--color-2-bg);
}

.settingsMenu .ui-icon-triangle-1-e::before {
	content: "\EA2A";
	color: var(--color-2-bg);
}

.settingsMenu .ui-panelmenu-header .ui-icon {
	left: unset;
	right: 0;
	margin: 12px 16px;
	width: 24px;
	height: 24px;
	font-family: 'patientportal';
	font-size: 24px;
	font-weight: 400;
	top: 0;
}

.settingsMenu.ui-panelmenu {
	background: var(--gray-40);
}

.settingsMenu.ui-menu .ui-menu-list, .settingsMenu.ui-panelmenu .ui-menu-list
	{
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.settingsMenu.ui-menu .ui-menu-list .ui-menuitem, .settingsMenu.ui-panelmenu .ui-menu-list .ui-menuitem
	{
	margin: 0px;
	height: 47px;
}

.settingsMenu.ui-menu .ui-widget-header {
	display: none;
}

.settingsMenu.ui-menu .ui-menu-list .ui-menuitem a, .settingsMenu.ui-panelmenu .ui-menu-list .ui-menuitem a,
	.settingsMenu.ui-panelmenu h3 a {
	color: var(--settings-menu-color);
	height: 100%;
	width: 100%;
	background: var(--settings-menu-bg);
	align-items: center;
	display: flex;
}

.settingsMenu.ui-menu .ui-menu-list .ui-menuitem a.ui-state-hover,
	.settingsMenu.ui-panelmenu .ui-menu-list .ui-menuitem a.ui-state-hover,
	.settingsMenu.ui-panelmenu h3.ui-panelmenu-header.ui-state-hover a,
	.settingsMenu.ui-panelmenu h3.ui-panelmenu-header.ui-state-active:hover a,
	.settingsMenu.ui-panelmenu h3.ui-panelmenu-header.ui-state-active a {
	background: var(--settings-menu-hover);
}

.settingsMenu .ui-panelmenu-panel h3 {
	height: 47px;
	margin: auto;
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: normal;
}

.settingsMenu.ui-panelmenu .ui-panelmenu-content {
	margin: 0px;
	padding: 0px;
}

.settingsMenu .ui-panelmenu-panel .ui-menuitem {
	height: 47px;
	margin: auto;
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: normal;
	width: 100%;
}

.settingsMenu.ui-menu .ui-menu-list .ui-menuitem a.deleteMenu {
    color: var(--delete-link-color);
}

.settingsMenu.ui-menu .ui-menu-list .ui-menuitem a.deleteMenu.ui-state-hover
    {
    background: var(--delete-link-hover-color);
}

.settingsMenu .ui-panelmenu-panel h3 a {
	padding: .3em;
	border-left: 7px solid transparent;
}

.emptyMenuItem {
	pointer-events: none;
}

.accountHeader {
	padding: 16px 0px;
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: auto minmax(0px, 1fr);
	gap: 16px;
	margin-top: 0px;
}

.accountHeader .ui-selectonemenu.accountSelectionMenu {
	margin: 0px;
	width: 100%;
}

.avatar {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
}

.accountImageFileUpload {
	display: none;
}

.editableProfileImage {
	grid-row: 1/3;
}

.editableProfileImage>a {
	position: relative;
	display: flex;
	border-radius: 50%;
	overflow: hidden;
	outline-offset: -1px;
}

.editableProfileImage .grayBanner {
	background: var(--gray-10);
	position: absolute;
	bottom: 0px;
	width: 100%;
	display: grid;
	place-items: center;
	height: 24px;
}

.editableProfileImage .grayBanner>.pp {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
}

.verifiedBadge {
	display: flex;
	gap: 8px;
	align-items: center;
}

.verifiedBadge i {
	color: var(--color-3-bg);
}

.verifiedBadge i.verified {
	color: var(--color-1-bg);
}

.verifiedBadge .verifiedText {
	color: var(--gray-70);
	padding-bottom: var(--fontBottomOffset);
}

.ui-panel .ui-panel-content {
	white-space: normal;
	padding: 0;
	height: 100%;
}

.topMenuRaster {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	height: auto;
	text-align: center;
}

.topMenuPublicRaster {
	display: grid;
	grid-template-columns: 1fr auto;
}

.topMenuLinks {
	grid-column: 2;
	height: 100%;
}

.languageButton {
	grid-column: 3;
	margin: auto;
	width: 100%;
	max-height: 50px;
}

.menuButtonsDynDiv {
	grid-column: 2;
	margin: auto;
	width: 100%;
	max-height: 50px;
}

.welcomeDiv {
	background: var(--panel-bg);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0px -16px;
}

.welcomeNews {
	background: var(--panel-bg);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0px -16px !important;
	width: calc(100% + 32px) !important;
	padding: 0px max(16px, calc(50% - 400px + 16px));
	padding-bottom: 24px;
	max-width: unset;
}

.welcomeNews>a {
	font-size: 16px;
	font-weight: 700;
	grid-column-start: 1;
	display: none;
}

/* only show first four overviews */
.welcomeNews:not(.showAll)>div:nth-of-type(n+6) {
	display: none;
}

.welcomeNews>div:nth-of-type(n+6) ~ a {
	display: block;
}

.welcomeNews .appointmentCancelWrapper {
	grid-row: 1/3;
	grid-column: 2;
	align-items: end;
	align-self: start;
}

.notificationDiv {
	background: var(--panel-bg);
	padding: 12px 16px 16px 16px;
	width: calc(100% + 32px);
	margin: 15px -16px 0px -16px;
}

.pageTitleWrapper {
	padding: 24px 0px 24px 0px;
	width: 800px;
	margin: 0px auto;
	display: flex;
	align-items: center;
}

.pageTitleWrapper .pageTitle {
	padding: inherit;
	width: inherit;
	margin: inherit;
	text-align: left;
	font-weight: 700;
}

.pageTitle {
	padding: 24px 0px 24px 0px;
	width: 800px;
	margin: 0px auto;
	text-align: left;
	font-weight: 700;
}

.progressBar ~ .pageTitle {
	padding-top: 14px;
}

.pageDescription {
	padding: 0px 0px 32px 0px;
	width: 800px;
	margin: 0px auto;
	text-align: left;
}

.pageTopButtons {
	padding: 0px 0px 16px 0px;
	width: 800px;
	margin: 0px auto;
}

.pageTopButtons .button {
	margin-left: auto;
}

.salutationTitle>:not(br) {
	font-size: 32px;
}

.salutationTitle:not(:has(>*)) {
	font-size: 32px;
}

.salutationTitle {
	width: auto;
	height: auto;
	padding: 24px calc(50% - 400px) 36px calc(50% - 400px);
	text-align: left;
	font-weight: 700;
	line-height: 40px;
}

.main_content {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: auto;
	padding: 0px 16px;
	overflow-x: hidden;
	position: relative;
}

.main_content>div:last-of-type {
	padding-bottom: 40px;
	flex-grow: 1;
}

.stickyContent {
	position: sticky;
}

.documentsContent {
	background: var(--panel-bg);
	margin: 0px -16px;
	padding: 0px 16px;
}

.uploadDataContent {
	margin: 0px -16px;
	padding: 0px 16px;
}

.mainContent.uploadDataContent>div:first-of-type {
	margin-top: 0;
}

.topMenuContainer {
	width: 800px;
	height: 90px;
	margin: auto;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
}

.topMenuContainer:has(>.topHelpLink) {
	height: 120px;
}

.headingSeparator {
	color: var(--selected-bg);
	border-width: 0px 0px 1px 0px;
	border-style: solid;
	width: 100%;
}

.headingGrid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin: 20px 0px;
}

.infoTextFormSubmission {
	color: var(--standard-color);
	font-size: 16px;
	margin: 20px 20px 0px 30px;
	background-color: var(--gray-10);
	padding: 20px;
	width: max-content;
}

.columnStyleTop {
	vertical-align: top;
}

.accountInfoTexts.ui-panelgrid tbody td {
	padding-left: 0px;
}

.displayNone {
	display: none;
}

.newDocumentMarker {
	background-color: var(--new-doc-marker);
	width: 4px;
	margin: -8px 0px;
	flex-shrink: 0;
	align-self: stretch;
}

.newDocumentMarker.hidden {
	background-color: transparent;
}

.sideBar {
	display: none;
}

.pdf_table table {
	width: auto;
	table-layout: auto;
	font-size: 18px;
	line-height: 40px;
}

.pdf_table table tbody tr {
	border-bottom: 1px solid var(--color-4-bg);
}

.pdf_table .fa.fa-file-text-o, .fa.fa-download, .fa.fa-edit {
	color: var(--color-3-bg);
}

.no_wrap_small_font_table.ui-datatable table {
	width: 100%;
	table-layout: fixed;
	font-size: 14px;
}

.no_wrap_small_font_table.ui-datatable thead th {
	background: var(--panel-bg) !important;
	color: var(--body-color);
	font-weight: 600;
	white-space: normal;
	padding: 10px 12px;
	border: none;
}

.no_wrap_small_font_table.ui-datatable tbody td {
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 10px 12px;
	border: none;
	border-bottom: 1px solid var(--gray-20) !important;
}

.no_wrap_small_font_table.ui-datatable td.iconColumn,
.no_wrap_small_font_table.ui-datatable th.iconColumn {
	width: 70px;
	text-align: center;
}

.tokenLinkRow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0px;
}

.no_wrap_small_font_table .tableIcon {
	font-size: 18px;
	line-height: 18px;
	width: 18px;
	height: 18px;
	display: inline-block;
}

.noheader.ui-datatable thead th,.noheader.ui-datatable tbody td {
    border-style: none;
    padding:  0px;
}

.commentOutput {
	background: var(--panel-bg);
	border-radius: 5px;
	padding: 12px 16px;
	margin-top: 12px;
}

.ui-datatable .ui-column-filter {
	border: 1px solid var(--color-4-bg);
}

.newsHeaderText {
	font-weight: 700;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: var(--selected-bg);
	margin-bottom: 8px;
	grid-column: 1/3;
}

.ui-fileupload-content {
	display: none;
}

.ui-fileupload-buttonbar {
	padding: 0px;
	padding-bottom: 12px;
}

.dropzone {
	margin: auto;
	max-width: 800px;
}

.dropzone .ui-button {
	background: var(--dropzone-bg);
	color: var(--dropzone-color);
	height: 48px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: start;
	box-shadow: none;
	padding: 12px 16px !important;
	gap: 12px;
	font-weight: normal;
}

.dropzone .ui-button.ui-state-hover {
	background: var(--dropzone-hover-bg);
}

.dropzone .ui-button .ui-button-icon-left {
	color: var(--dropzone-icon-color);
}

.dropzone .ui-button-text.ui-c {
	font-size: 16px !important;
	text-align: center;
	font-weight: 700;
}

.fileList {
	padding: 12px 0px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fileWrapper {
	padding: 12px;
	background: var(--body-bg);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 3px 0px
		rgba(0, 0, 0, 0.12);
	gap: 12px;
	display: flex;
	flex-direction: column;
}

.fileWrapper>div {
	display: flex;
	flex-direction: column;
}

.fileWrapper .topRow {
	display: grid;
	grid-template-columns: minmax(0px, 1fr) auto;
	gap: 12px;
}

.fileWrapper .topRow a {
	text-decoration: none;
}

.fileWrapper .topRow .fileName {
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-2-bg);
}

.fileWrapper .topRow .displayname {
	font-size: 14px;
	color: var(--gray-70);
}

.menuButtons .ui-button, .menuButtonsDocument .ui-button {
	display: block;
	box-shadow: none;
	color: var(--color-3-bg);
}

.ui-menu.ui-menu-dynamic {
	background: var(--body-bg);
	border-radius: 5px;
	box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.50);
	overflow: hidden;
}

.ui-menu.ui-menu-dynamic .ui-menuitem {
	margin: 0px;
}

.ui-menu.ui-menu-dynamic .ui-menuitem.ui-state-hover {
	background: var(--panel-bg);
}

.ui-menu.ui-menu-dynamic .ui-menuitem-link {
	border: none;
	padding: 6px 8px;
	gap: 8px;
	color: var(--standard-color);
	height: 36px;
	width: 100%;
	display: flex;
	align-items: center;
}

.ui-button-text-icon-left .ui-icon {
	position: initial;
	margin: 0;
}

.progressBar {
	display: flex;
	padding: 30px max(16px, calc(50% - 400px + 16px)) 10px
		max(16px, calc(50% - 400px + 16px));
	top: 0;
	background: var(--body-bg);
	margin: 0px -16px;
	z-index: 1;
}

.progressBar .fa::before {
	margin: auto;
	font-size: 14px;
}

.progressStepFinished.progressStepWarning .fa, .progressStepFinished.progressStepWarning .fa:hover
	{
	background: var(--error-color-50);
	border: var(--error-color-50);
}

.progressStep {
	border-top: 2px solid var(--gray-20);
	width: 100%;
}

.progressStepActive {
	border-top: 2px solid var(--color-2-bg);
	width: 100%
}

.progressStep .fa, .progressStep .fa:hover {
	width: 20px;
	height: 20px;
	display: flex;
	border-radius: 20px;
	border: 2px solid var(--gray-20);
	background: var(--gray-20);
	margin: -11px auto 0px auto;
	color: var(--gray-20);
}

.progressStepActive .fa, .progressStepActive .fa:hover {
	border: 2px solid var(--color-2-bg);
	background: var(--color-2-bg);
	color: var(--color-2-bg);
}

.progressStepFinished .fa, .progressStepFinished .fa:hover {
	border: 2px solid var(--color-1-bg);
	background: var(--color-1-bg);
	color: var(--color-1-fg);
}

.bold {
	font-weight: bold;
}

.appointmentList .ui-selectonemenu label.ui-selectonemenu-label {
	border-radius: 5px;
}

.filter-header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.filter-reset {
	margin: 0px 20px 0px auto;
}

.filter-reset .fa-undo, .fa-undo.fa:hover {
	font-size: 1.25em;
}

.filterOption {
	background: var(--body-bg);
	border: 1px solid var(--gray-80);
	border-radius: 5px;
	margin: 15px 20px 20px 0px;
	float: left;
	height: 31px;
}

.filterOption label.ui-selectonemenu-label {
	height: 21px;
	font-size: 16px;
	background: var(--body-bg);
}

.element-item {
	background: var(--body-bg);
	display: grid;
	grid-template-columns: auto minmax(0px, 1fr) auto auto;
	align-items: center;
	margin: 10px 0px;
	padding: 5px 10px;
	gap: 10px;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
}

.element-item .element-icon {
	padding: 0px 5px;
}

.element-item .element-text {
	display: grid;
	grid-template-columns: auto auto auto minmax(0px, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	cursor: pointer;
}

.menuButtonsDocument {
	height: 24px;
	flex-shrink: 0;
}

.menuButtonsDocument .fa.fa-ellipsis-h {
	width: 25px;
}

.menuButtonsDocument .pp-navigation-menu-vertical-filled {
	font-weight: bold;
}

.topRightButton {
	position: absolute;
	top: 12px;
	right: 0px;
	width: 24px;
}

.topRightButton button {
	color: var(--color-3-bg);
}

.topRightInfoButton {
	display: none;
	position: absolute;
	top: 12px;
	right: max(16px, calc(50% - 400px + 16px));
	color: var(--color-3-bg);
	font-weight: normal;
}

.topRightInfoButton>label {
	display: flex;
}

.expansion {
	grid-row: 2;
	grid-column: 1/5;
	display: grid;
	grid-template-columns: auto minmax(0px, 1fr);
	border-top: 1px solid var(--gray-30);
	padding: 10px 5px 5px 5px;
	gap: 5px 10px;
}

.expansion.hidden {
	display: none;
}

.element-search {
	background: var(--body-bg);
	border: 1px solid var(--gray-30);
	border-radius: 5px;
	box-sizing: border-box;
	font-family: StandardFont, FontAwesome;
}

.loginOptionSeparator {
	text-align: center;
}

.formProgessWrapper {
	width: 100%;
	height: 6px;
	display: flex;
	max-width: 800px;
	margin: auto;
	margin-bottom: -6px;
}

.formProgess {
	background: var(--color-1-bg);
	height: 100%;
	border-bottom-right-radius: 2px;
	border-top-right-radius: 2px;
}

.mobileViewerWrapper {
	height: calc(100% + 40px);
	display: flex;
	flex-flow: column;
	margin: 0px -16px !important;
	width: calc(100% + 32px) !important;
	padding: 0px calc(50% - 400px + 16px);
	box-sizing: content-box;
}

.mobileViewerWrapper .mobileViewer {
	border: none;
	height: 100%;
	width: 100%;
}

.mobileViewerFullSize {
	height: 100%;
	width: 100%;
	border: none;
}

.mobileViewer {
	border: none;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	height: 640px;
	width: 100%;
}

.checkdataDiv:has(>:only-child) {
	grid-template-columns: 100%;
	width: 100%;
}

.checkdataDiv:has(>:only-child) .checkdata {
	grid-template-columns: 1fr 1fr;
}

.checkdataDiv {
	display: grid;
	grid-template-columns: 60% 40%;
	gap: 138px;
	width: calc(100% - 138px);
}

.checkdata {
	display: grid;
	grid-template-columns: auto auto;
	gap: 4px 12px;
}

.checkdata .data_label, .checkdata .data_value {
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	color: var(--body-color);
}

.checkdata .data_label {
	color: var(--gray-70);
}

.statusCircle {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	display: grid;
	color: white;
	align-self: center;
	margin: auto auto 12px auto;
}

.statusCircle.line {
	margin-top: 36px;
}

.statusCircle.line::before {
	content: "";
	position: absolute;
	height: 3px;
	background: var(--gray-20);
	width: calc(100% + 32px);
	z-index: -1;
	left: -16px;
	margin-top: 44px;
}

.statusCircle .pp {
	font-size: 48px;
	width: 48px;
	line-height: 48px;
	height: 48px;
	place-self: center;
}

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

.error_text {
	color: var(--error-color-50);
}

.statusCircle.success {
	background: var(--color-1-bg);
}

.loginportal_input {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.resetColumn {
	display: flex;
}

.general_link {
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.ui-password .ui-password-icon {
	font-family: 'PatientPortal' !important;
	color: var(--color-3-bg);
	font-size: 24px;
	top: 0px;
	margin-top: 0;
}

.ui-password.ui-password-unmasked .ui-password-icon::before {
	content: "\EA27"
}

.ui-password.ui-password-masked .ui-password-icon::before {
	content: "\EA28"
}

.filetypeslist {
	display: flex;
	flex-direction: column;
}

.deleteAccountLink {
	color: var(--delete-link-color);
	display: block;
	margin-top: 28px !important;
}

.pwdPolicy.ui-datalist ul {
	margin: 0px;
	padding: 9px 0px 0px 0px;
	list-style-type: none;
}

.pwdPolicy.ui-datalist li {
	line-height: 28px;
	padding-left: 20px;
}

.pwdPolicy.ui-datalist .ui-datalist-item>:first-child::before {
	content: '';
	background: var(--color-1-bg);
	border-radius: 50px;
	width: 12px;
	height: 12px;
	display: inline-block;
	margin-right: 8px;
	margin-left: -20px;
}

.no_popup>.ui-datepicker-trigger {
	display: none;
}

bold {
	font-weight: bold;
}

.stepsShower {
	margin-top: -13px;
}

.qrCodeWrapper {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 16px 0px;
}

.qrCodeWrapper img {
	width: 150px;
	height: 150px;
	margin: -12px;
}

.validation_separator {
	width: 100%;
	margin-top: 80px;
	border: none;
	border-top: 1px solid var(--gray-30);
}

.authenticatorDownload {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	place-items: center;
	background: var(--panel-bg);
	padding: 16px;
	margin: -16px;
	margin-top: 64px;
}

.authenticatorDownload .descriptionText {
	grid-column: 1/3;
}

.largeActionButton {
	background: var(--btn-large-bg);
	color: var(--btn-large-color);
	height: 48px;
	margin-top: 8px;
	display: flex;
	padding: 0px 24px;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding-bottom: var(--fontBottomOffset);
}

.largeActionButton:hover {
	background: var(--btn-large-hover-bg);
}

.largeActionButton .activeWrapper {
	display: flex;
	gap: 8px;
	align-items: center;
}

.largeActionButton .activeWrapper .pp {
	margin-bottom: cacl(-1 * var(--fontBottomOffset));
}

.sidebarMenu.ui-sidebar-left {
	padding: 0px;
	background: var(--menu-bg);
	display: block;
	overflow-y: auto;
	width: 100%;
	max-width: 848px;
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
}

.sidebarMenu.ui-sidebar .ui-button {
	background: var(--menu-bg);
	height: 48px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--menu-border);
	border-radius: 0px;
	font-size: 16px;
	font-weight: normal;
	margin-right: 0;
}

.sidebarMenu.ui-sidebar .ui-button-text-only .ui-button-text {
	padding: 0px;
}

.sidebarMenu .ui-sidebar-close, .sidebarMenu .ui-sidebar-close:focus,
	.sidebarMenu .ui-sidebar-close:hover {
	float: left;
	font-size: 24px;
	color: var(--menu-color);
	padding: 0px 8px 0px 16px;
	width: 48px;
	border-bottom: 1px solid var(--menu-border);
}

.sidebarMenu .ui-menu .ui-menu-list .ui-menuitem {
	height: 48px;
	display: flex;
	align-items: center;
	margin: 0px;
	border-bottom: 1px solid var(--menu-border);
	width: 100%;
	padding-left: 16px;
}

.sidebarMenu .ui-menu .ui-menuitem-link {
	padding: 0px;
	border: 0px;
	color: var(--menu-color);
	gap: 8px;
	display: flex;
	align-items: center;
}

.sidebarMenu .fa.fa-sign-out {
	color: var(--menu-color);
}

.sidebarMenu .ui-icon-triangle-1-e::before {
	content: "\EA2A";
}

.sidebarMenu .ui-icon-triangle-1-s::before {
	content: "\EA0C";
}

.sidebarMenu .ui-menuitem {
	margin: 0px;
}

.sidebarMenu .ui-panelmenu-content {
	top: 0px;
	margin-top: 0px;
	padding: 0px;
}

.sidebarMenu .ui-panelmenu-header a {
	border-bottom: 1px solid var(--menu-border);
	color: var(--menu-color);
	height: 48px;
	font-weight: normal;
	font-size: 16px;
	padding: 0px 0px var(--fontBottomOffset) 16px;
	display: flex;
	align-items: center;
}

.sidebarMenu .ui-panelmenu .ui-panelmenu-header .ui-icon {
	left: unset;
	right: 0;
	margin: 12px 16px;
	width: 24px;
	height: 24px;
	font-family: 'patientportal';
	font-size: 24px;
	font-weight: 400;
	top: 0;
	color: var(--menu-color);
}

.sidebarMenu .ui-panelmenu-header.ui-state-active {
	background: var(--menu-active-bg);
	color: var(--menu-active-color);
}

.sidebarMenu .ui-panelmenu .ui-menuitem-link {
	height: 48px;
	display: flex;
	align-items: center;
	font-size: 16px;
	padding: 0px 0px var(--fontBottomOffset) 36px;
	border-bottom: 1px solid var(--menu-border);
	width: 100%;
	background: var(--menu-sub-bg);
	color: var(--menu-color);
}

.closeIconMenu {
	border-bottom: 1px solid var(--menu-border);
	display: flex;
}

.emptyMenuItem {
	height: 48px;
	border-bottom: 1px solid var(--menu-border);
}

.sidebarMenu .ui-icon-closethick {
	align-items: center;
	display: flex;
	height: 48px;
}

.closeLabel {
	color: var(--menu-color);
	font-size: 14px;
	line-height: 21px;
	display: flex;
	align-items: center;
	height: 48px;
}

.showSideBar.ui-button-text-icon-left .ui-icon {
	color: var(--color-3-bg);
}

.showSideBar.ui-button-text-icon-left .ui-button-text {
	padding: 0;
	font-weight: normal;
	padding-bottom: var(--fontBottomOffset);
}

.showSideBar {
	box-shadow: none;
	float: left;
	margin-left: 16px;
	height: auto;
	background: none;
	color: var(--standard-color);
	display: flex;
	align-items: center;
	gap: 8px;
	bottom: 0px;
	font-size: 16px;
}

.showSideBar.ui-state-hover, .showSideBar.ui-state-active {
	background: none;
}

.sideBar {
	display: flex;
	align-items: center;
}

.ui-sidebar-active {
	left: max(calc(calc(100% - 848px)/2), 0px);
}

.doubleMenu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0px 22px;
	padding: 0px 24px 24px 24px;
}

.doubleMenu .ui-button:first-of-type {
	border-top: 1px solid var(--menu-border);
}

.doubleMenu>* {
	grid-column: 1;
}

.doubleMenu .ui-panelmenu-panel {
	position: relative;
}

.doubleMenu .ui-panelmenu-content {
	position: absolute;
	width: 100%;
	right: calc(-100% - 22px);
	overflow: visible !important;
	border-top: 1px solid var(--menu-border);
}

.doubleMenu .ui-panelmenu-header.ui-state-active {
	margin-right: -22px;
	margin-top: -1px;
	border-top: 1px solid var(--menu-border);
}

.doubleMenu .ui-panelmenu .ui-panelmenu-header.ui-state-active .ui-icon
	{
	right: 22px;
}

.doubleMenu .ui-panelmenu-header:not(.ui-state-active)+.ui-panelmenu-content
	{
	display: none !important;
}

.doubleMenu .ui-panelmenu .ui-menuitem-link {
	padding-left: 16px;
}

.doubleMenu .ui-panelmenu .ui-menu-list:has(.ui-menuitem-icon) .ui-menuitem-link
	{
	padding-left: 36px;
}

.doubleMenu .ui-icon-triangle-1-s::before, .doubleMenu .ui-icon-triangle-1-e::before
	{
	content: '\EA2E';
}

.doubleMenu .ui-menu:first-of-type {
	border-top: 1px solid var(--menu-border);
}

.doubleMenuTop {
	display: flex;
	height: 90px;
	align-items: center;
	justify-content: space-between;
	padding: 22px;
}

.doubleMenuTop .ui-sidebar-close, .doubleMenuTop .ui-sidebar-close:focus,
	.doubleMenuTop .ui-sidebar-close:hover {
	border-bottom: none;
}

.sidebarMenu.hideInMobileView {
	transition: none;
}

.sidebarMenu.hideInMobileView>.ui-sidebar-close, .sidebarMenu.hideInMobileView>.ui-sidebar-close:focus,
	.sidebarMenu.hideInMobileView>.ui-sidebar-close:hover {
	display: none;
}

.footerLogo {
	background: #EDEDED;
	display: flex;
	padding: 10px 17px !important;
	align-items: center;
	margin: 60px -16px 0px -16px;
}

.footerLogo img {
	height: 36px;
}

footer {
	background: var(--footer-bg);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0px min(calc(-50vw + 400px), -16px) !important;
	padding: 16px;
	width: 100vw;
	height: fit-content;
	grid-column: 1/3;
}

.footerMenu .ui-menu-list {
	display: flex;
	gap: 8px 24px;
	flex-wrap: wrap;
	justify-content: space-around;
}

.footerMenu .ui-menu-list .ui-menuitem {
	width: fit-content;
}

.footerMenu .ui-menu-list .ui-menuitem a {
	color: var(--footer-color);
	display: flex;
	gap: 8px;
	height: 100%;
	width: fit-content;
	border: none;
	padding: 0px;
	place-content: space-between;
}

.footerMenu .ui-menu-list .ui-menuitem a .ui-menuitem-icon {
	width: fit-content;
}

.footerMenu.ui-menu .ui-menu-list .ui-menuitem a .ui-menuitem-text {
	height: 24px;
	font-size: 16px;
	font-weight: 700;
}

.signatureParent {
	border: 1px dotted var(--gray-80);
	margin-top: 20px;
	border-radius: 5px;
	background: var(--body-bg);
	padding: 8px;
	padding-bottom: 24px;
}

#signature input {
	position: relative !important;
}

.loginportal_input.ui-panelgrid .ui-panelgrid-cell {
	padding: 4px 0px;
}

.ui-tooltip-arrow {
	display: none;
}

.loginWithImage {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr auto;
}

.loginImage {
	grid-row: 1/3;
	width: auto;
	margin: 0px 16px 0px -16px;
	position: sticky;
	top: 0;
	align-self: start;
}

.loginWithImage .loginPanel>* {
	margin: 0px;
}

.loginWithImage .footerLogo {
	grid-column: 1/3;
}

.loginWithImageMenu {
	width: 100%;
	padding: 0px 50px;
}

.registrationWarningPanel {
	background: var(--error-panel-color);
	padding: 6px 16px 11px 16px;
	width: calc(100% + 32px);
	margin: 15px -16px 0px -16px;
}

.generalWarningPanel {
	background: var(--error-panel-color);
	padding: 11px max(16px, calc(50% - 400px));
}

.generalWarningPanel .ui-panel-titlebar {
	cursor: pointer;
}

.generalWarningPanel .ui-panel-titlebar-icon {
	margin: auto !important;
}

.generalWarningPanel .ui-panel-content p {
	margin-top: 16px;
	margin-bottom: 0px;
}

.generalWarningPanel .ui-icon {
	font-family: 'Patientportal';
	font-size: 24px;
	height: 24px;
	width: 24px;
}

.generalWarningPanel .ui-icon-plusthick::before {
	content: "\EA2A" !important;
}

.generalWarningPanel .ui-icon-minusthick::before {
	content: "\EA0C" !important;
}

.sharePasswordInfo {
	padding: 15px;
	padding-bottom: 10px;
	margin-top: 25px;
	margin-bottom: 25px;
	border: var(--error-border-color) solid 2px;
	border-radius: 5px;
}

.patientDataTable.ui-datatable table {
	width: 100%;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0px 10px;
	padding-left: 5px;
}

.patientDataTable.ui-datatable tbody td {
	padding: 0px 0px 0px 0px;
	font-size: 18px;
	overflow: visible;
	background: var(--color-4-bg);
	border: none;
}

.patientDataTable.ui-datatable tbody td:first-child {
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}

.patientDataTable.ui-datatable tbody td:last-child {
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
}

.patientDataTable.ui-datatable thead {
	display: none;
}

tr.patientDataRow {
	line-height: 25px;
	border-top: 5px solid;
	color: var(--table-font-color);
}

.main_content_fullSize {
	padding: 0px;
}

.main_content.main_content_fullSize>div:last-of-type {
	padding: 0px;
}

.fullSizePanel {
	min-width: 100%;
	margin: 0px;
}

.fullSizeViewer {
	height: 100%;
	overflow: hidden;
}

.fullSizeViewerDiv {
	background-color: var(--color-4-bg);
	color: var(--table-font-color);
	font-size: 18px;
	padding: 5px 15px 5px 40px;
}

.fullSizeViewer.ui-panel .ui-panel-content {
	display: grid;
	grid-template-rows: auto 1fr;
}

.topMenuRasterFullSize {
	display: none;
}

.patientDataInfoColumn.small-column {
	width: 20%;
}

.patientDataInfoColumn.bottom-align {
	vertical-align: bottom;
}

.patientDataInfoColumn .ui-dataview .ui-dataview-header {
	display: none;
}

.patientDataInfoColumn .ui-dataview-column {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.patientDataInfoColumn .ui-g-12 {
	padding: 0.1em;
}

.patientDataTable.ui-datatable .patientDataInfoColumn {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 8px 15px 10px 8px;
	width: auto;
}

.patientDataTable.ui-datatable .patientDataInfoColumn table {
	border-spacing: 0;
}

.patientDataTable.ui-datatable .patientDataInfoColumn td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.patientDataTable.ui-datatable .patientDataInfoColumn td:last-child {
	width: 33%;
	text-align: right;
	padding-right: 5%;
}

.patientDataTable.ui-datatable .patientDataButtonsColumn .ui-button-icon-only.ui-button.ui-state-default
	{
	width: 53px;
	height: 53px;
}

.entryTogglerColumn {
	width: 15px;
	padding: 10px 33px 10px 30px !important;
	position: relative;
}

.patientDataButtonsColumn {
	width: 73px;
}

.patientDataButton {
	box-shadow: none;
}

.patientDataButton .fa.fa-download, .patientDataButton .fa.fa-male,
	.patientDataButton .fa.fa-edit, .patientDataButton .fa.fa-expand,
	.patientDataButton .fa.fa-compress {
	font-size: 36px;
	color: var(--table-icons-color);
	margin-top: -16px;
	transform: none;
}

.mainContent .ui-row-toggler.ui-icon.ui-icon-circle-triangle-e {
	background-image: url(/medizinakte/image/arrow_right_30x30.png);
	background-position: center;
	height: 33px;
	width: 33px;
	transform: scale(0.8) !important;
}

.mainContent .ui-row-toggler.ui-icon.ui-icon-circle-triangle-s {
	background-image: url(/medizinakte/image/arrow_down_30x30.png);
	background-position: center;
	height: 33px;
	width: 33px;
	transform: scale(0.8) !important;
}

.newEntryMarker {
	border-radius: 4px/4px;
	background-color: var(--newEntryMarker-color);
	position: absolute;
	transform: translate(-35px, -23px);
	line-height: 15px;
	font-size: 15px;
	padding: 0px 3px 3px 3px;
	text-align: center;
}

.patientDataInfoGrid .ui-datagrid-data {
	width: 100%;
	table-layout: fixed;
}

.patientDataInfoGrid .ui-datagrid-column {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.checkBoxEmail {
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 140%;
	color: var(--gray-70);
	display: flex;
	margin: 15px 0px;
}

.verticalDivider {
	grid-column-start: 2;
	grid-row-start: 1;
	grid-row-end: 3;
	border-right: 1px solid var(--gray-20);
}

.subTitle {
	font-size: 16px;
	color: var(--color-2-bg);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	display: block;
	padding-bottom: 20px;
}

.diaryContent {
	background: var(--color-2-bg-5);
	margin: 0px -16px;
	padding: 0px 16px;
}

.diaryContent .pp-bookmarks-2, .diary_maincontent .pp-bookmarks-2 {
	color: var(--gray-50);
}

.diary_list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.diary_entry {
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
	display: flex;
	gap: 8px;
	align-items: center;
	background: var(--body-bg);
	padding: 8px 8px 8px 12px;
	height: 60px;
}

.diary_entry_texts {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	white-space: nowrap;
	overflow: hidden;
}

.diary_entry_texts>* {
	text-overflow: ellipsis;
	overflow: hidden;
}

.diary_entry_texts .headerText {
	color: var(--color-2-bg);
}

.diary_maincontent {
	display: grid;
	grid-template-columns: auto auto;
	gap: 9px;
	margin-top: 12px;
}

.diary_maincontent>* {
	grid-column: 1/3;
}

.diary_maincontent textarea {
	resize: none;
	font-family: inherit;
}

.diary_date {
	grid-column: 1;
}

.diary_important {
	grid-column: 2;
	place-self: end;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.painscale_buttons {
	display: flex;
}

.painscale_button {
	margin-right: 0px !important;
	border-radius: 0px;
	box-shadow: none;
	background: none;
	width: calc(100%/ 11);
	font-weight: 400;
	height: 36px;
}

.painscale_button:nth-of-type(1) {
	background: color-mix(in srgb, var(--color-2-bg), #ffffff 95%);
	color: var(--color-2-bg);
}

.painscale_button:nth-of-type(2) {
	background: color-mix(in srgb, var(--color-2-bg), #ffffff 90%);
	color: var(--color-2-bg);
}

.painscale_button:nth-of-type(3) {
	background: color-mix(in srgb, var(--color-2-bg), #ffffff 80%);
	color: var(--color-2-bg);
}

.painscale_button:nth-of-type(4) {
	background: color-mix(in srgb, var(--color-2-bg), #ffffff 70%);
	color: var(--color-2-bg);
}

.painscale_button:nth-of-type(5) {
	background: color-mix(in srgb, var(--color-2-bg), #ffffff 60%);
	color: var(--color-2-bg);
}

.painscale_button:nth-of-type(6) {
	background: color-mix(in srgb, var(--color-2-bg), #ffffff 50%);
	color: var(--color-2-fg);
}

.painscale_button:nth-of-type(7) {
	background: color-mix(in srgb, var(--color-2-bg), #ffffff 40%);
	color: var(--color-2-fg);
}

.painscale_button:nth-of-type(8) {
	background: color-mix(in srgb, var(--color-2-bg), #ffffff 30%);
	color: var(--color-2-fg);
}

.painscale_button:nth-of-type(9) {
	background: color-mix(in srgb, var(--color-2-bg), #ffffff 20%);
	color: var(--color-2-fg);
}

.painscale_button:nth-of-type(10) {
	background: color-mix(in srgb, var(--color-2-bg), #ffffff 10%);
	color: var(--color-2-fg);
}

.painscale_button:nth-of-type(11) {
	background: var(--color-2-bg);
	color: var(--color-2-fg);
}

.painscale_button.active {
	background: var(--color-1-bg);
	color: var(--color-1-fg);
	font-weight: 700;
}

.painscale_button>.ui-button-text {
	padding: 0px 0px var(--fontBottomOffset) 0px;
}

.painscale_lables {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
}

.painscale_lables > * {
	color: var(--gray-100) !important;
}

.fileSeparator {
	border-top: 1px var(--gray-70) dashed;
	padding-top: 24px;
	margin-top: 7px;
}

.registrationOption.ui-selectonemenu, .registrationOption.ui-selectonemenu.ui-state-hover,
	.registrationOption .ui-inputfield, .registrationOption.ui-selectonemenu .ui-icon::before
	{
	background: var(--color-2-bg);
	color: var(--color-2-fg)
}

.uploadStep {
	color: var(--selected-bg);
	font-size: 30px;
	font-weight: 500
}

.uploadStepDescription {
	color: var(--selected-bg);
	font-size: 17px;
	font-style: italic;
	font-weight: bold;
	margin: 0px auto 20px auto;
}

.uploadInfo {
	color: var(--selected-bg);
	font-size: 22px;
	font-weight: bold;
	display: none
}

.portalLoginPanel {
	color: var(--color-1-fg-10);
}

.descriptionValueFields {
	display: grid;
	grid-template-columns: auto auto;
	gap: 4px 12px;
}

.valueFields {
	display: grid;
}

.downloads {
	display: flex;
	gap: 8px;
	flex-direction: column;
}

.downloadPanel {
	background: var(--download-panel-bg);
}

.downloadPanel .textWrapper {
	width: 800px;
	display: flex;
	margin: auto;
	justify-content: space-between;
}

.downloadPanel a {
	color: var(--download-panel-color);
	display: flex;
	padding: 5px 0px;
	align-items: center;
	gap: 8px;
}

.downloadPanel a .text {
	padding-bottom: var(--fontBottomOffset);
}

.downloadMessage {
	display: flex;
	align-items: center;
	gap: 10px;
}

.downloadMessage .text {
	padding-bottom: var(--fontBottomOffset);
}

.topHelpLink {
	margin-left: auto;
	border-right: 1px solid var(--gray-20);
	margin-right: 19px;
	padding: 30px 35px;
}

.small_table {
	width: 100%;
}

.portal_message_background {
	background: var(--panel-bg);
	margin: 0px -16px;
	padding: 0px 16px;
	padding-bottom: 0px;
	margin: 0px -16px;
}

.portal_message_background_detail {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.portal_message_entryList {
	background: var(--panel-bg);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px calc(50vw - 50%);
	margin: 0px calc(-50vw + 50%);
	display: flex;
}

.portal_message_entryList:empty {
	padding: 2px;
}

.portal_message_entryList:not(.showAll)>div:nth-child(n+2) {
	display: none;
}

.portal_message_entryList>div:nth-child(n+2) ~ a {
	display: block;
}

.portal_message {
	background: var(--body-bg);
	color: var(--body-color);
	padding: 8px 12px;
	display: grid;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px
		rgba(0, 0, 0, 0.24);
	position: relative;
	grid-template-columns: 1fr auto;
	column-gap: 10px;
}

.portal_message:hover {
	background: var(--card-hover-bg);
}

.portal_message_detail {
	background: var(--body-bg);
	color: var(--body-color);
	display: grid;
	position: relative;
	column-gap: 10px;
}

.portal_messages {
	display: flex;
	gap: 8px;
	flex-direction: column;
	margin-bottom: 20px;
}

.portal_message_author {
	grid-column-start: 1;
	grid-row-start: 1;
	padding-right: 5px;
}

.portal_message_timestamp {
	white-space: nowrap;
	font-size: 14px;
	grid-column-start: 3;
	grid-row-start: 2;
	color: var(--gray-80);
	justify-self: end;
}

.portal_message_subject {
	font-weight: 600;
	grid-column-start: 1;
	grid-row-start: 2;
	color: var(--color-2-bg);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 5px;
}

.portal_message_content {
	grid-column-start: 1;
	grid-row-start: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 5px;
}

.portal_message_newMessageMarker {
	background-color: var(--color-1-bg);
	width: 4px;
	flex-shrink: 0;
	align-self: stretch;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
}

.portal_message_newMessageMarker.hidden {
	display: none;
}

.portal_messages_icons {
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 1;
	justify-self: end;
	display: flex;
	gap: 5px;
	color: var(--color-2-bg);
}

.accordionTitle {
	font-weight: bold;
	padding-left: 0px;
	padding-bottom: 10px;
}

.createAuthorTimestampLabel {
	grid-column: 1/3;
	padding-top: 24px;
	padding-bottom: 0px;
	font-size: medium;
}

.portal_message_author_detail {
	font-size: 14px;
	color: var(--gray-80);
}

.portal_message_author_detail_descriptor {
	font-size: 14px;
	color: var(--gray-80);
	font-weight: bold;
	width: 100px;
	display: inline-block;
}

.portal_message_timestamp_detail {
	white-space: nowrap;
	font-size: 14px;
	padding-right: 12px;
	color: var(--gray-80);
}

.portal_message_subject_detail {
	font-weight: 600;
	font-size: 16px;
	padding-right: 5px;
	grid-column-start: 1;
	grid-row-start: 1;
	padding-bottom: 10px;
}

.portal_message_content_detail {
	font-size: 16px;
	white-space: break-spaces;
	padding: 16px 0px;
}

.portal_message_overview_header {
	position: relative;
}

.blank_on_mobile {
	display: none;
}

.info_documents {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ui-accordion .ui-accordion-content {
	overflow: visible;
	padding: 0px;
}

.portal_message_sort_button {
	position: absolute;
	top: 65px;
	right: max(16px, calc(50vw - 400px + 16px));
	width: 24px;
	font-weight: normal;
	background: none;
	color: var(--color-2-bg);
	box-shadow: none;
}

.portal_message_attachment_button {
	position: absolute;
	top: 12px;
	right: 16px;
	width: 24px;
}

.portal_message_attachment_button .ui-fileupload-icon-only {
	font-weight: normal;
	background: none;
	color: var(--color-2-bg);
	box-shadow: none;
}

.portal_message_attachment_button_mobile {
	padding: 20px 0px 0px 0px;
}

.portal_message_attachment_button_mobile .ui-fileupload-buttonbar {
	padding: 0px;
}

.portal_message_attachment_button_mobile .ui-fileupload-icon-only {
	font-weight: normal;
	background: none;
	color: var(--color-2-bg);
	box-shadow: none;
	padding: 12px 13px 12px 17px;
	height: unset;
}

.portal_message_registrationField {
	flex-grow: 1;
}

.registrationField>label {
	display: flex;
	flex-direction: column;
}

.portal_message_title_header {
	margin: 0px auto;
	width: 100%;
	font-weight: 400;
	gap: 0px;
	display: flex;
	flex-direction: column;
	position: relative;
	font-size: 16px;
	color: var(--color-2-bg);
	max-width: 800px;
	padding-top: 24px;
}

.portal_message_answer_banner {
	background: var(--color-2-bg-5);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px calc(50vw - 50%);
	padding-bottom: calc(16px + var(--fontBottomOffset));
	overflow: auto;
	margin: 0px calc(-50vw + 50%);
	margin-top: -24px;
	font-size: 14px;
	color: var(--standard-color);
	margin-bottom: 16px;
}

.portalmessage_document_list {
	display: flex;
	align-items: center;
	gap: 12px;
}

.portalmessage_document {
	display: flex;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
	background: var(--standard-bg);
	gap: 8px;
	align-items: center;
	padding: 8px 8px 8px 0px;
	min-height: 48px;
	flex-grow: 1;
	display: flex;
	width: 100%;
}

.portalmessage_document_detail {
	display: flex;
	width: 100%;
	padding-right: 8px;
	align-items: center;
}

.portal_message_uploadFileList {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px calc(50vw - 50%);
	margin: 16px calc(-50vw + 50%);
}

.portal_message_uploadFileTitle {
	font-style: normal;
	font-size: 16px;
	color: var(--color-2-bg);
	margin-right: 10px;
	text-decoration: none;
	font-weight: 700;
	overflow: hidden;
	line-height: normal;
	display: block;
	padding-bottom: var(--fontBottomOffset);
	pointer-events: none;
	flex-grow: 1;
	padding-left: 6px;
	white-space: break-spaces;
	word-break: break-all;
}

.portal_message_uploadFileIcon {
	padding-left: 8px;
	color: var(--color-2-bg);
}

.portalmessage_document_detail>.headerText {
	padding-bottom: var(--fontBottomOffset);
	flex-grow: 1;
	white-space: break-spaces;
	word-break: break-all;
}

.portalmessage_document_detail>.label_small {
	flex-shrink: 0;
}

.portalmessage_mainMessage {
	background: var(--panel-bg);
	padding: 8px calc(50vw - 50%);
	margin: 16px calc(-50vw + 50%);
	flex-grow: 1;
	position: relative;
}

.portalmessage_mainMessage>textarea.ui-inputfield {
	background: var(--standard-bg);
	border: none;
	padding: 18px 0px 0px 18px;
	resize: none;
	border-top: 1px solid var(--gray-20);
	overflow: auto;
	height: 100%;
}

.portalmessage_placeholder_icon {
	position: absolute;
	top: 50%;
	left: 50%;
	pointer-events: none;
	display: none;
	width: 60px;
	height: 60px;
	line-height: 60px;
	transform: translate(-50%, -50%);
}

.portalmessage_mainMessage:has(>textarea:placeholder-shown) .pp-pencil-mail
	{
	display: initial;
	font-size: 60px;
	color: var(--gray-40);
}

.breakspaces {
	white-space: break-spaces;
}

.accordion_header {
	margin-top: -8px;
	position: absolute;
	right: 0.5em;
	top: 50%;
}

.accordion_notification.ui-accordion .ui-accordion-header {
	padding: 10px 0px;
}

.accordion_notification.ui-accordion .ui-accordion-header.tabTopLine {
	border-top: 1px solid var(--gray-30);
}

.accordion_notification.ui-accordion .ui-accordion-header .ui-icon {
	display: none;
}

.mainMessage {
	flex-grow: 1;
}

.mainMessage>textarea.ui-inputfield {
	background: none;
	border: none;
	padding: 16px 0px;
	resize: none;
	border-top: 1px solid var(--gray-20);
	overflow: auto;
	height: 100%;
}

.ui-state-highlight .ui-icon, .ui-state-default .ui-icon {
	transform: scale(1) !important;
}

.request-message {
	padding-top: 10px;
}

.request-message ul, .follow-up-request ul {
	margin-block-start: 0;
	margin-block-end: 5px;
	margin-left: -8px;
}

.follow-up-request {
	background: var(--follow-up-bg);
	padding-top: 14px;
	padding-bottom: 10px;
	padding-left: 16px;
	margin-left: -16px;
	margin-right: -16px;
	margin-bottom: 3px;
	display: flex;
	flex-direction: column;
}

.follow-up-request .request-header {
	color: var(--follow-up-color);
	font-weight: bold;
}

.follow-up-request span {
	padding-right: 16px;
}

.sidebarMenu .poweredBy {
	padding: 10px 16px;
}

.doubleMenu .poweredBy {
	padding: 10px 16px;
}

.poweredBy {
	display: flex;
	align-items: end;
	gap: 7px;
	margin-right: 24px;
	align-self: start;
	margin-top: calc(-1 * var(--fontBottomOffset));
	font-size: 8px;
}

.poweredBy.dark {
	margin: auto;
	padding-bottom: 12px;
	width: fit-content;
	grid-column: 2;
}

.poweredBy > span {
	color: var(--menu-color);
	font-size: 16px;
	font-style: normal;
}

.poweredBy.dark > span {
	color: var(--body-color);
}

.poweredBy>img {
	height: 20px;
}

.ui-paginator .ui-corner-all {
	min-width: 40px;
}

.ui-datatable .ui-paginator {
  background: var(--panel-bg);
  height: 26px;
  display: flex;
  justify-content: center;
  padding: 0;
  align-items: center;
}

.ui-paginator .ui-paginator-page,
.ui-paginator .ui-paginator-pages,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-current {
  padding: 0;
}

.ui-paginator .ui-paginator-next .ui-icon,
.ui-paginator .ui-paginator-prev .ui-icon,
.ui-paginator .ui-paginator-first .ui-icon,
.ui-paginator .ui-paginator-last .ui-icon {
  display: none;
}

.ui-paginator-first.ui-state-default.ui-corner-all:before {
  content: "\f100";
  font-family: FontAwesome, StandardFont;
}

.ui-paginator-prev.ui-state-default.ui-corner-all:before {
  content: "\f104";
  font-family: FontAwesome, StandardFont;
}

.ui-paginator-next.ui-state-default.ui-corner-all:before {
  content: "\f105";
  font-family: FontAwesome, StandardFont;
}

.ui-paginator-last.ui-state-default.ui-corner-all:before {
  content: "\f101";
  font-family: FontAwesome, StandardFont;
}

@media only screen and (min-width: 850px) {
	.hideInLargeView {
		display: none !important;
	}
	.limitTextWidth {
		padding: 20px max(16px, calc(50% - 300px));
		margin: unset;
	}
}

@media screen and (max-width: 40em) {
	.dropzone .ui-fileupload-buttonbar .ui-button {
		padding: 0;
	}
	.dropzone .ui-fileupload-buttonbar .ui-button .ui-button-text {
		display: block;
	}
	.no_wrap_small_font_table.ui-datatable-reflow td,
	.no_wrap_small_font_table.ui-datatable-reflow th {
		width: 100% !important;
	}
}

@media only screen and (max-width: 850px) {
	.blank_on_mobile {
		display: flex;
		height: 30px;
		width: 100%;
	}
	.downloadPanel .textWrapper {
		padding-left: 16px;
		padding-right: 16px;
		width: 100%;
	}
	.button, .ui-datepicker-buttonpane>button {
		height: 36px !important;
		min-width: 160px;
	}
	.ui-growl {
		bottom: 76px;
	}
	.main_header {
		border-bottom: 1px solid var(--gray-30);
	}
	.appointmentTitleHeader {
		margin: 0px;
		width: 100%;
		font-weight: 400;
		gap: 0px;
	}
	.settingsMenu {
		margin: 0px -16px !important;
		width: calc(100% + 32px) !important;
	}
	.accountSelectionMenu, .accountSelectionMenu.ui-state-focus {
		height: 36px;
		width: 158px;
		border: unset;
		border-radius: 3px;
		overflow: hidden;
		margin: 6px 16px 6px auto;
	}
	.accountSelectionMenu label.ui-selectonemenu-label {
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	    line-height: 26px;
	}
	.accountSelectionMenu.ui-selectonemenu .ui-selectonemenu-trigger {
	   top: 5px;
	}
	.accountSelection {
		display: none;
	}
	.ui-selectonemenu-panel.ui-widget.ui-input-overlay {
		border-radius: 5px;
		overflow: hidden;
		box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.50);
		max-width: 100%;
	}
	.topMenuContainer {
		flex-direction: row;
		width: 100%;
		height: auto !important;
	}
	.mainContent>*, .contentform {
		width: 100%;
	}
	.topMenuRaster {
		grid-template-rows: auto auto;
		grid-template-columns: 1fr;
	}
	.logoCustomer {
		grid-column: 2;
		min-height: 48px;
	}
	.logoCustomer>a {
		display: flex;
	}
	.pageTitleWrapper {
		padding: 20px 0px;
		width: 100%;
	}
	.pageTitleWrapper .pageTitle {
		padding: 0;
	}
	.pageTitle {
		padding: 20px 0px;
		width: 100%;
	}
	.pageTopButtons {
		margin: 0px auto;
		display: flex;
		width: 100%;
		padding-bottom: 20px;
	}
	.languageButton, .menuButtonsDynDiv, .topButtonsDynDiv {
		display: none;
	}
	.topMenuMobile.ui-menu .ui-menu-list {
		box-shadow: none;
	}
	.pdf_table table tbody tr {
		border-bottom: 1px solid var(--color-4-bg);
		line-height: 20px;
	}
	.pdf_table table {
		font-size: 16px;
	}
	.pdf_table.ui-datatable thead th {
		padding: 0px 0px 20px 0px;
	}
	.infoTextFormSubmission {
		width: auto;
	}
	.heading_H1 {
		line-height: 40px;
	}
	.text_emphasized {
		font-size: 14px;
	}
	.text_medium, .label_link {
		font-size: 16px;
	}
	.pageDescription {
		display: none;
	}
	.welcomePanel {
		width: calc(90% + 20px);
		margin: auto;
	}
	.loginPanel {
		width: 100%;
		padding: 24px 0px 24px 0px;
		margin: 0 auto auto auto;
		box-shadow: none;
	}
	.loginPanel>* {
		width: 100%;
	}
	.loginPanel .ui-inputfield {
		background: var(--gray-10);
	}
	.loginPanel .ui-panelgrid .ui-panelgrid-cell {
		padding: 2px;
	}
	.newsTable .ui-datatable .ui-datatable-header {
		height: 33px;
	}
	.scheduleAppointmentTable {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: -20px;
	}
	.dateTimePanel {
		flex-direction: column;
	}
	.timeSlotPanel {
		grid-column-start: 1;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.groupOptionPanel {
		margin-top: 10px;
		grid-column-start: 1;
	}
	.main_footer {
		width: 100%;
		padding: 0px 16px;
	}
	.ui-g {
		display: block;
	}
	.ui-inputfield {
		margin-bottom: 0px;
		font-size: 16px;
	}
	.logoPublicMenu {
		height: 48px;
		padding: var(--logo-padding-mobile);
	}
	.tooltipRegistration.ui-tooltip {
		width: auto;
		height: auto;
		padding: 10px;
		padding-top: 5px;
	}
	.logoDiv {
		grid-column: 2;
	}
	.logoDiv>a {
		display: flex;
	}
	.hideInMobileView {
		display: none !important;
	}
	.timeSlot {
		height: auto;
		width: 100%;
		gap: 8px;
	}
	.timeSlot .ui-g {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
	}
	.timeSlot .ui-g-12 {
		width: auto;
		padding: 0px;
	}
	.appointmentPicker .ui-datepicker td>* {
		margin: 4px;
	}
	.salutationTitle {
		margin: auto;
		width: 100%;
		font-weight: 700;
		line-height: normal;
		padding: 20px 0px 16px 0px;
	}
	.salutationTitle>:not(br) {
		font-size: 16px;
	}
	.salutationTitle:not(:has(>*)) {
		font-size: 16px;
	}
	.welcomeDiv {
		padding: 0px 16px 0px 16px;
	}
	.topRightInfoButton {
		display: initial;
	}
	.mainContent>.loginContent {
		margin: auto;
		padding: 0px;
		width: 100%;
		background: var(--body-bg);
	}
	.checkdata {
		gap: 4px 26px;
	}
	.documentTexts .createUploadLabel {
		grid-column: 1/3;
		padding-bottom: 0px;
		font-size: medium;
	}
	.statusLabel {
		grid-column: 2/3;
		grid-row: 1;
	}
	.documentTexts {
		grid-template-columns: minmax(0px, 1fr) auto;
	}
	.documentTexts .headerText {
		padding-bottom: 0px;
	}
	.appointmentOverview {
		flex-direction: column;
		align-items: initial;
	}
	.appointmentBody {
		display: flex;
		flex-direction: column;
		align-items: initial;
		gap: 8px;
	}
	.appointmentHeader {
		height: 40px;
		padding-right: 8px;
	}
	.homeWrapper.noChildBorder .panelDiv:first-of-type {
		background: var(--panel-bg);
	}
	.homeMenu .ui-menu-list.ui-helper-reset, .portalWorkflowPanel {
		grid-template-columns: 1fr 1fr;
	}
	.homeMenu.ui-menu .ui-menu-list .ui-menuitem, .portalWorkflowPanel .portalWorkflowButton
		{
		grid-column: span 1;
	}
	.loginWithImage {
		display: unset;
	}
	.loginImage {
		display: none;
	}
	.loginWithImageMenu {
		padding: 0px;
	}
	.validation_separator {
		margin-left: -16px;
		width: calc(100% + 32px);
	}
	.videoConferenceFrame {
		width: 100%;
	}
	.patientDataTable.ui-datatable tbody td {
		font-size: 16px;
		padding-right: 0px;
	}
	.patientDataTable.ui-datatable table {
		border-spacing: 0px 5px;
	}
	.patientDataTable.ui-datatable .patientDataInfoColumn {
		padding: 5px 10px 5px 10px;
	}
	.patientDataTable.ui-datatable .patientDataInfoColumn table {
		border-spacing: 0;
	}
	.patientDataTable.ui-datatable .patientDataButtonsColumn .ui-button-icon-only.ui-button.ui-state-default
		{
		width: 30px;
	}
	.patientDataButtonsColumn {
		width: 34px;
	}
	.entryTogglerColumn {
		width: 10px;
		padding: 5px 23px 5px 10px !important;
		position: relative;
	}
	.newEntryMarker {
		transform: translate(-13px, -17px);
	}
	.patientDataButton .fa.fa-download, .patientDataButton .fa.fa-edit,
		.patientDataButton .fa.fa-male, .patientDataButton .fa.fa-expand,
		.patientDataButton .fa.fa-compress {
		font-size: 20px;
		margin-top: -10px;
	}
	.appointmentList, .appointmentOverview {
		display: flex;
	}
	.welcomeNews {
		display: flex;
		flex-direction: column;
	}
	/* only show first three overviews */
	.welcomeNews:not(.showAll)>div:nth-of-type(n+5) {
		display: none;
	}
	.welcomeNews>div:nth-of-type(n+5) ~ a {
		display: block;
	}
	.panelDiv {
		padding: 20px 16px;
	}
	.appointmentButtons {
		gap: 24px;
		grid-template-columns: 1fr 1fr;
		justify-items: unset;
		margin-top: 24px;
	}
	.appointmentButtons .ui-button:nth-of-type(3n) {
		margin-left: 0;
	}
	.appointmentButtons .ui-button:nth-of-type(2n) {
		margin-left: auto;
	}
	.uploadStep {
		font-size: 20px;
	}
	.uploadStepDescription {
		font-size: 14px;
	}
	.uploadInfo {
		font-size: 18px;
	}
	.ui-datatable .ui-paginator {
		background: var(--standard-bg);
	}
	.ui-paginator .ui-corner-all {
		width: 100%;
		height: 22px;
	}
	.ui-paginator .ui-paginator-pages {
		height: 22px;
		background: var(--standard-bg);
	}
}

@media screen and (max-width: 360px) {
	.appointmentButtons {
		gap: 24px;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		justify-items: unset;
		margin-top: 24px;
	}
	.appointmentButtons .ui-button:nth-of-type(2n) {
		margin-left: 0;
	}
}

/* ===== Appointment schedule view ============================================ */

.scheduleTopBar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	background: #ffffff;
	position: sticky;
	top: 0;
	z-index: 1;
}

.scheduleWeekNav {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.scheduleTodayLink {
    color: #1664a4;
    text-decoration: none;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 145%;
    opacity: 40%;
}

.scheduleTodayLink:hover {
	text-decoration: underline;
}

.scheduleNavArrow {
	color: #1f3a64;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	text-decoration: none;
	cursor: pointer;
	border-radius: 4px;
}

.scheduleNavArrow:hover {
	color: #0e2647;
	background: #eef2f8;
}

.scheduleNavArrow > i {
	pointer-events: none;
	font-synthesis: none;
	font-size: 16px;
	line-height: 1;
}

.scheduleWeekRange {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: bold;
	font-size: 16px;
	line-height: 145%;
	color: #1f3a64;
	min-width: 12em;
	text-align: center;
}

.scheduleDailyViewLink {
	color: #1f6fc1;
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: bold;
	font-size: 16px;
	line-height: 145%;
	text-decoration: none;
	text-align: right;
}

.scheduleBackBar {
	display: none;
	max-width: 832px;
	width: 100%;
	margin: 16px auto 12px auto;
	box-sizing: border-box;
	padding: 0;
}

.scheduleBackButton {
	width: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 1;
}

.scheduleBackButton .ui-button-icon-left {
	position: static;
	margin: 0;
	top: auto;
	left: auto;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-synthesis: none;
	transform: translateY(-1px);
}

.scheduleBackButton .ui-button-text {
	padding: 0;
	line-height: 1;
	transform: translateY(1px);
}

.scheduleTitleHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.scheduleTitleHeader h1 {
	color: #000000;
}

.scheduleTitleHeader h1 {
	margin: 0;
}

.scheduleDailyViewLink:hover {
	text-decoration: underline;
}

.scheduleList {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 145%;
	background: #F2F2F2;
	padding: 12px 16px 24px;
	margin: 0 -16px;
}

.scheduleDay {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 6px;
}

.scheduleDayHeader {
	background: #d9d9d9;
	color: #333333;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 0.95em;
	font-weight: 500;
}

.scheduleDayHeader.today {
	background: #1f3a64;
	color: #ffffff;
}

.scheduleEntry {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
	border-radius: 5px;
	min-height: 44px;
	text-decoration: none;
	overflow: hidden;
	position: relative;
}

.scheduleStatusBanner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 12px;
	color: #ffffff;
	font-weight: 600;
	background: var(--status-color, #6c7a89);
	box-sizing: border-box;
}

.scheduleStatusBanner > i {
	font-size: 1em;
	pointer-events: none;
	color: #ffffff;
	font-synthesis: none;
}

/* Status frame: thin sides + bottom; the top is the banner itself (30px tall) */
/* Tile-side frame (weekly + daily). Details dialog stays unframed; only its banner shows the status. */
.scheduleEntry.hasStatusBanner,
.dailyEntry.hasStatusBanner {
	border-left: 2px solid var(--status-color, transparent);
	border-right: 2px solid var(--status-color, transparent);
	border-bottom: 2px solid var(--status-color, transparent);
}

.scheduleEntry.hasStatusBanner .scheduleStatusBanner,
.dailyEntry.hasStatusBanner .scheduleStatusBanner,
.appointmentDetailsDialog.hasStatusBanner .scheduleStatusBanner {
	height: 30px;
}

/* One color token per status — banner background and frame inherit it */
.scheduleEntry.statusChanged,
.dailyEntry.statusChanged,
.appointmentDetailsDialog.statusChanged   { --status-color: #9C6F00; }

.scheduleEntry.statusCancelled,
.dailyEntry.statusCancelled,
.appointmentDetailsDialog.statusCancelled { --status-color: #B22425; }

.scheduleEntry.statusNew,
.dailyEntry.statusNew,
.appointmentDetailsDialog.statusNew       { --status-color: #1a1a1a; }

.scheduleEntry.statusPending,
.dailyEntry.statusPending,
.appointmentDetailsDialog.statusPending   { --status-color: #6c7a89; }

/* Cancelled appointments: grey out text content. The hint section (header + body) stays at full contrast so the cancellation reason is clearly readable. */
.scheduleEntry.statusCancelled .scheduleEntryTime,
.scheduleEntry.statusCancelled .scheduleEntryTitle,
.scheduleEntry.statusCancelled .scheduleEntryLocation,
.dailyEntry.statusCancelled .dailyEntryTime,
.dailyEntry.statusCancelled .dailyEntryTitle,
.dailyEntry.statusCancelled .dailyEntryLocation,
.dailyEntry.statusCancelled .dailyEntryPractitioner,
.dailyEntry.statusCancelled .dailyEntryPill,
.appointmentDetailsDialog.statusCancelled .appointmentDetailsDay,
.appointmentDetailsDialog.statusCancelled .appointmentDetailsTime,
.appointmentDetailsDialog.statusCancelled .appointmentDetailsTitle,
.appointmentDetailsDialog.statusCancelled .appointmentDetailsMeta,
.appointmentDetailsDialog.statusCancelled .appointmentDetailsTypePill {
	color: #9aa3ad;
}

.scheduleEntryContent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: center;
	padding: 8px 18px 8px 12px;
	min-height: 44px;
	position: relative;
}

.scheduleEntryBody {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.scheduleEntryLocation {
	font-weight: 700;
	color: #1f3a64;
}

.scheduleEntry:hover {
	background: #f6f8fb;
}

.scheduleEntry.past {
	background: #F2F2F2;
}

/* ===== Daily view ============================================================ */

.dailyDaySelector {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	background: #ffffff;
	padding: 8px 0 16px;
	position: sticky;
	top: 52px;
	z-index: 1;
}

.dailyDay {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 8px 0;
	border-radius: 6px;
	text-decoration: none;
	color: #1f3a64;
	font-family: "IBM Plex Sans", sans-serif;
}

.dailyDay:hover {
	background: #eef2f8;
}

.dailyDay.selected {
	background: #1f3a64;
	color: #ffffff;
}

.dailyDay.selected .dailyDayShort,
.dailyDay.selected .dailyDayNum {
	color: #ffffff;
}

.dailyDayShort {
	font-size: 12px;
	font-weight: 500;
	color: #6c7a89;
}

.dailyDayNum {
	font-size: 16px;
	font-weight: 700;
	color: #1f6fc1;
}

.dailyList {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #F2F2F2;
	padding: 12px 16px 24px;
	margin: 0 -16px;
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 145%;
}

.dailyEntry {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #ffffff;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
	border-radius: 5px;
	padding: 12px 14px;
	text-decoration: none;
	color: #000000;
	overflow: hidden;
}

.dailyEntry.hasStatusBanner {
	padding-top: 0;
}

.dailyEntry .scheduleStatusBanner {
	margin: 0 -14px 8px -14px;
}

.dailyEntry:hover {
	background: #f6f8fb;
}

.dailyEntry.past {
	background: #F2F2F2;
}

.dailyEntryTopRow,
.dailyEntryMidRow,
.dailyEntryBottomRow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.dailyEntryTopRow {
	padding-bottom: 8px;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 4px;
}

.dailyEntryTime {
	font-size: 14px;
	font-weight: 700;
	color: #000000;
}

.dailyEntryIcon {
	color: #1f6fc1;
	font-synthesis: none;
}

.dailyEntryPill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 5px;
	background: #d3edec;
	color: #000000;
	font-size: 12px;
	font-weight: 600;
}

.dailyEntryLocation {
	font-size: 14px;
	font-weight: 700;
	color: #000000;
	text-align: right;
}

.dailyEntryTitle {
	font-size: 15px;
	font-weight: 600;
	color: #000000;
}

.dailyEntryPractitioner {
	font-size: 13px;
	color: #6c7a89;
	text-align: right;
}

.dailyEntryHint {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 4px;
	font-size: 13px;
	color: #6c7a89;
}

.dailyEntryHint > i {
	flex-shrink: 0;
	margin-top: 2px;
	color: #6c7a89;
	font-synthesis: none;
}

.dailyEntryHintText {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ===== Appointment details dialog ============================================ */

.appointmentDetailsDialog,
.appointmentDetailsDialog .ui-dialog-content {
	background: #ffffff;
}

.appointmentDetailsDialog {
	max-width: 480px;
	width: 100% !important;
}

.appointmentDetailsDialog .ui-dialog-content {
	padding: 24px;
	font-family: "IBM Plex Sans", sans-serif;
	color: #000000;
}

.appointmentDetailsDialog.hasStatusBanner .ui-dialog-content {
	padding-top: 0;
}

.appointmentDetailsDialog .scheduleStatusBanner {
	margin: 0 -24px 16px -24px;
}

.appointmentDetailsTopRow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.appointmentDetailsDay {
	font-size: 14px;
	color: #000000;
}

.appointmentDetailsTypePill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 5px;
	background: #d3edec;
	color: #000000;
	font-size: 13px;
	font-weight: 600;
}

.appointmentDetailsTitleRow {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 12px;
}

.appointmentDetailsTitleBlock {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.appointmentDetailsTime {
	font-size: 14px;
	font-weight: 600;
}

.appointmentDetailsTitle {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	color: #000000;
}

.appointmentDetailsQrCode {
	width: 88px;
	height: 88px;
	flex-shrink: 0;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

.appointmentDetailsMeta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	color: #000000;
}

.appointmentDetailsMeta i {
	width: 16px;
	color: #6c7a89;
	font-synthesis: none;
}

.appointmentDetailsNote {
	margin-top: 20px;
	background: transparent;
	border-radius: 0;
	padding: 0;
}

.appointmentDetailsNoteHeader {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px 0;
	font-size: 14px;
	font-weight: 400;
}

.appointmentDetailsNoteHeader i {
	color: #6c7a89;
	font-synthesis: none;
}

.appointmentDetailsNoteBody {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	max-height: 260px;
	overflow-y: auto;
	padding-right: 8px;
}

.appointmentDetailsLinks {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 16px;
}

.appointmentDetailsLink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #1f6fc1;
	text-decoration: none;
	font-size: 14px;
	word-break: break-all;
}

.appointmentDetailsLink:hover {
	text-decoration: underline;
}

.appointmentDetailsLink > i {
	color: #6c7a89;
	font-synthesis: none;
	flex-shrink: 0;
}

.appointmentDetailsCloseButton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 16px;
	background: #1a1a1a;
	color: #ffffff;
	border-radius: 24px;
	border: none;
	padding: 12px;
	line-height: 1.2;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
}

.scheduleEntryStripe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 12px;
}

/* When a status banner is shown, start the stripe below the banner. Right/bottom already sit inside the 2px frame because absolute positioning is relative to the padding box. */
.scheduleEntry.hasStatusBanner .scheduleEntryStripe {
	top: 30px;
}

.scheduleEntryTime {
	color: #1f3a64;
	font-variant-numeric: tabular-nums;
	padding: 16px 8px;
	white-space: nowrap;
}

.scheduleEntryTitle {
	font-weight: 400;
	color: #1f3a64;
	padding: 0px 0px 0px 0px;
	text-align: right;
}


@media screen and (max-width: 600px) {
	.scheduleEntry {
		grid-template-columns: auto 1fr;
		gap: 8px;
	}
	.scheduleWeekNav {
		gap: 8px;
	}
	.scheduleWeekRange {
		min-width: 10em;
		font-size: 0.95em;
	}
}

.titleHeaderIconButton{
  float: right;
  color: #316582;
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  position: relative;
  
  .ui-icon{
  	font-size: 2rem;
	position: absolute;
	left: 25%;
	top: 25%;
  }
  
}

.questionnaire_stepper_panel{
  margin-top:0 !important;
  padding: 5px;
  height: fit-content;
  width: 100%;
	
	.stepper_count{
		float: right;
    	padding-right: 5px;
    	padding-top: 4px;
    	font-size: 14px;
	}
}

.stepper-container{
  height: fit-content;
  width:100%;
  display: grid;
}

.stepper-item{
  display: flex;
  height: 20px;
  position: relative;
  border-style: solid;
  border-color: var(--gray-60);
  border-width: 2px 0 2px 0;
	
  &.done {
  	background-color: var(--color-1-bg);
  }
  
  &.todo {
  	background-color: transparent;
  }
}

.stepper-container .stepper-item:first-child{
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border-left-width: 2px;
}

.stepper-container .stepper-item:last-child{
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-right-width: 2px;
}

.imgWrapper {
    display: none;
}

.chiliLoginLogo {
    display: none;
}