/*
  The CSS Variables below can be used to theme your app.
  For more info on CSS variables check out:
  https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

  More info about color theming using Ionic:
  https://ionicframework.com/docs/theming/color-generator
*/

@import './variables.css';

/* Styles applicable to all searchbars*/
.searchbar-input-container .searchbar-input {
	--box-shadow: none;
	border: var(--kyra-searchbar-border);
	line-height: var(--kyra-line-height-regular);
	text-overflow: ellipsis;
}

.searchbar-input-container .searchbar-search-icon {
	color: var(--kyra-color-grey-dark);
	top: calc(var(--kyra-line-height-regular) / 2 - 2px); /*2px is to account for the border...*/
}

.searchbar-input-container .searchbar-clear-button {
	--clear-button-color: var(--kyra-color-grey-dark);
}

.searchbar-input-container .searchbar-clear-button.sc-ion-searchbar-md:focus {
	opacity: 1;
}

.label-stacked.sc-ion-label-md-h {
	transform: translateY(25%) scale(0.75);
}

.item-label-stacked {
	--min-height: 48px;
}

/* For observation zone infomation styling*/
.msg-zone {
	padding: 10px;
	background-color: white;
}

.msg-zone h1 {
	text-align: center;
	margin: 0px;
	padding: 5px;
}

.msg-zone table,
.msg-zone td {
	border: none;
}

.msg-zone ol {
	list-style-type: decimal;
}

.msg-zone ul {
	list-style-type: disc;
}

.yellow-zone-msg {
	border: 4px #ffdb45 solid;
}

.yellow-zone-msg > div {
	background-color: #fff9e0;
	border: 1px #ffdb45 solid;
	padding: 0px 20px;
}

.yellow-zone-msg h1 {
	background-color: #fff3c1;
}

.red-zone-msg {
	border: 4px #ff6245 solid;
}

.red-zone-msg h1 {
	background-color: #ffded8;
}

.red-zone-msg > div {
	background-color: #ffeded;
	border: 1px #ff6245 solid;
	padding: 0px 20px;
}

.blue-zone-msg {
	border: 4px #83e2ff solid;
}

.blue-zone-msg h1 {
	background-color: #def7ff;
}

ion-alert.obsCustomCssClass {
	--max-width: none !important;
}

ion-alert.obsCustomCssClass .alert-message {
	font-weight: normal !important;
	text-align: left !important;
	font-size: 14px !important;
	max-height: unset !important;
	color: var(--kyra-color-text);
}

ion-alert.obsCustomCssClass .alert-head {
	margin: 0;
	padding: 1rem 1.5rem;
	display: flex;
}

ion-alert.obsCustomCssClass.yellow .alert-head {
	background-color: rgb(255, 245, 157);
}

ion-alert.obsCustomCssClass.red .alert-head {
	background-color: rgb(255, 187, 165);
}

ion-alert.obsCustomCssClass.blue .alert-head {
	background-color: rgb(179, 229, 252);
}

ion-alert.obsCustomCssClass ul {
	font-size: 16px;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 40px;
}

ion-alert.obsCustomCssClass h4 {
	margin-block-start: 1.33em;
	margin-block-end: 1.33em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}

ion-alert.obsCustomCssClass h1 {
	font-size: 1.5em;
	font-weight: var(--kyra-regular-font-weight);
}

ion-alert.obsCustomCssClass .alert-button-group {
	justify-content: end !important;
	-webkit-padding-start: 0px !important;
	padding-inline-start: 0px !important;
	-webkit-padding-end: 1.5rem !important;
	padding-inline-end: 1.5rem !important;
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}

ion-alert.obsCustomCssClass button {
	width: min-content !important;
}

ion-alert.obsCustomCssClass .alert-wrapper {
	width: 50%;
}

@media (max-width: 1024px) {
	.obsCustomCssClass .alert-wrapper {
		width: 100% !important;
	}
}

a.obs-anchor  {
    text-decoration: underline !important;
    font-size: .75rem !important;
}

ion-toggle.ion-color-success {
    --ion-color-base: var(--ion-color-success) !important;
    --ion-color-base-rgb: var(--ion-color-success-rgb) !important;
    --ion-color-contrast: var(--ion-color-success-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-success-shade) !important;
    --ion-color-tint: var(--ion-color-success-tint) !important
}

/* End of observation zone infomation styling*/

/* Styling for text editor*/
.jodit-container {
	height: 100% !important;
	display: flex;
	flex-direction: column;
	flex-grow : 1;
}

.jodit-workplace {
	flex: 1 1 0%;
}

.jodit-toolbar-button__button {
	font-family: inherit;
}

@media (max-width: 768px) {
	.text-container {
		max-height: 400px;
	}
}

/* End of text-editor styling*/

/* Styling for image annotator*/
.ptro-holder {
	left: 15% !important;
	top: 15% !important;
	width: 70% !important;
	height: 70% !important;
}

@media (max-width: 1024px) {
	.ptro-holder {
		left: 10% !important;
		top: 25% !important;
		width: 80% !important;
		height: 50% !important;
	}
}

/* For virtual select scrolling to bottom issue*/
div:not(.show-as-popup) > div.vscomp-dropbox-container > div.vscomp-dropbox > div.vscomp-options-container {
    max-height: 210px !important;
}

/* Progress Notes History modal styling*/

  ion-modal.progress-notes-history::part(content){
	  min-width: 1164px;
		height: 696px;
		padding: 0;
		border-radius: 0;
	}

	.progress-notes-history-title {
		display: flex;
		justify-content: space-between;
		height: 60px;
		align-items: center;
		padding-left: 26px;
		padding-right: 12px;
		border-bottom: 1px solid var(--kyra-color-grey-mild-light);
	}

	.progress-notes-history-left-side-container {
		background-color: var(--kyra-color-grey-more-lighter);
		width: 349px;
		padding: 17px 25px;
	}

	.current-badge {
		color: var(--kyra-color-green);
	}

	.selected-history-card {
		border: 1px solid var(--kyra-color-blue)
	}

	.regular-history-card {
		border: 1px solid var(--kyra-color-grey-light-dark)
	}

	figure {
		text-align: center;
	}
	del.diffdel {
	background-color: lightpink;
	}
	del.diffmod {
	background-color: lightpink;
	}
	ins.diffmod {
	background-color: limegreen;
	}
	ins.diffins {
	background-color: limegreen;
	}

figure del.diffmod,
figure ins.diffmod,
figure ins.diffins,
figure del.diffdel {
display: block;
padding: 10px;
}
/* End of Progress Notes History modal styling*/

/* styles for progress notes list page */

ion-toggle.progress-notes-list-toggle::part(track){
	height: 20px;
	width: 40px;
  }

  ion-toggle.progress-notes-list-toggle::part(handle){
	height: 18px;
	left: 1px;
  }

  .progress-notes-list-toggle-label {
	margin-left: 0.5rem;
    margin-right: 0.5rem;
	margin-top: 0.25rem;
    font-size: 0.875rem;
	font-weight: var(--kyra-semi-bold-font-weight);
  }

/*End of styles for progress notes list page*/

ion-item.selection-small-item::part(native){
	--min-height: 30px;
}

span.dot-indicator{
	min-width: 0.625rem;
}
/* Start of Progress notes list styling */
.kyra-badge-padding {
	padding: 2px 4px 2px 4px;
}

.disabled-text {
	color: var(--kyra-color-grey-less-darker) !important;
}

.disabled-background {
	background-color: var(--kyra-color-grey-mild) !important;
}

.active-icon {
	color: var(--kyra-patient-severe-allergy-color-medium-yellow-color)
}

/* End of Progress notes list styling */

/* Mobiscroll components styling */
.mbsc-schedule-col-width {
	width: 100px;
  }

.mbsc-list-item:before{
	background-color: transparent !important;
	border: 0px !important;
}

.mbsc-schedule-events.mbsc-ltr {
	left: 0 !important;
	right: 0 !important;
}

.mbsc-calendar-button.mbsc-button,
.mbsc-kyra-date-picker-theme.mbsc-button-primary.mbsc-button-flat{
	color: var(--ion-color-secondary) !important;
}

/* mobiscroll accessibility styling */

/* CLN-521: as we are using 3px outline style to highlight accessible elements,
adding margins to some mobiscroll elements (or paddings to their wrapper containers) to allow this outline not to be chopped off*/
.mbsc-kyra-date-picker-theme.mbsc-segmented,
.mbsc-kyra-date-picker-theme.mbsc-calendar-title-wrapper,
.mbsc-kyra-date-picker-theme.mbsc-popup-buttons{
	padding:3px !important;
}
.mbsc-kyra-date-picker-theme.mbsc-calendar-month,
.mbsc-kyra-date-picker-theme.mbsc-calendar-year{
	margin-top:3px !important;
	margin-bottom:3px !important;
}
.mbsc-kyra-date-picker-theme.mbsc-scroller-wheel-item{
  	margin-left:3px !important;
  	margin-right:3px !important;
}

.mbsc-focus {
	box-shadow: none !important;
}

.mbsc-calendar-cell.mbsc-focus:after {
	border: 0px !important;
}
/* end of mobiscroll accessibility styling */

/* Day Label in Agenda Calendar View */
.mbsc-event-day.mbsc-list-header {
	padding: 0.75rem 1rem 0.75rem 1rem !important;
	margin-bottom: 0.5rem !important;
	font-weight: var(--kyra-regular-font-weight) !important;
	font-size: var(--kyra-small-font-size) !important;
	font-family: var(--ion-font-family) !important;
	color: var(--kyra-color-text) !important;
	--tw-bg-opacity: 1;
 	background-color: rgb(247 247 247 / var(--tw-bg-opacity)) !important;
	border-bottom: 0;
}

.mbsc-eventcalendar {
	overflow: auto !important;
}

/* Event container in Agenda Calendar View */
.mbsc-event.mbsc-list-item {
	padding: 0 !important;
	margin: 0 0.55rem 0.55rem  0.55rem;
}

/* Separator between Events */
.mbsc-list-item:after {
	border: 0 !important;
}

/* Tooltips */
.mbsc-popup-arrow:not(.mbsc-kyra-date-picker-theme){
	background-color: var(--kyra-color-text) !important;
}

/* Theatre location session label */
.mbsc-schedule-color-text {
	position: absolute;
	right: 0;
	writing-mode: vertical-lr;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 100%;
	padding: 5px;
    font-style: normal;
    font-weight: 500;
    line-height: 10px;
  }
  
 @media (max-width: 767px) {
    .mbsc-schedule-color-text {
        font-size: 12px;
    }
}

@media (min-width: 768px) and (max-width: 1364px) {
    .mbsc-schedule-color-text {
        font-size: 14px;
    }
}

@media (min-width: 1365px) {
    .mbsc-schedule-color-text {
        font-size: 16px;
    }
}

/* End of Mobiscroll components styling */


/* Start of modal slider styling */
ion-modal.modal-slider::part(content){
	padding: 0px !important;
	border-radius: 0px !important;
	width: 320px;
	position: absolute;
	top: 0px;
	height: 100%;
}

ion-modal.small-size-slider::part(content){
	width: 320px;
}

ion-modal.large-size-slider::part(content){
	width: 430px;
}

ion-modal.medium-size-slider::part(content){
	width: 400px;
}

ion-modal.modal-slider.left-slider::part(content){
	left: 0px;
}

ion-modal.modal-slider.right-slider::part(content){
	right: 0px;
}


@media (max-width: 1024px) {
	ion-modal.modal-slider::part(content) {
		width: 100% !important;
	}
}

/* End of modal slider styling */

/* Start of modal utility styling */
ion-modal.kyra-modal::part(content){
	padding: 0px !important;
	border-radius: 0px !important;
	width: 320px;
	position: absolute;
}

ion-modal.small-size-modal::part(content){
	width: 320px;
	height: 360px;
}

ion-modal.medium-size-modal::part(content){
	width: 504px;
}

ion-modal.large-size-modal::part(content){
	width: 80%;
}

@media (max-width: 1024px) {
	ion-modal.kyra-modal::part(content) {
		width: 100% !important;
		height: 100% !important;
	}
}

/* End of modal utility styling */



/* Start of new patient list styling */

kyra-select-button.bulk-action-button ion-button.bulk-action-button {
	--background: var(--ion-color-secondary);
	--background-hover: var(--ion-color-secondary-shade);
	--background-activated: var(--ion-color-secondary-shade);
	--color: white;
	--border-width: 0px;
	--box-shadow: none;
	box-shadow: none;
}

kyra-select-button.bulk-action-button.gray-bulk-action-button ion-button.bulk-action-button {
	--background: var(--kyra-color-grey-light);
	--color: var(--kyra-color-text);
}

kyra-select-button.bulk-action-button.gray-bulk-action-button ion-button.bulk-action-button.popover-opened::part(native) {
	background: var(--kyra-color-grey-mild);
}

kyra-select-button.bulk-action-button ion-button.bulk-action-button.button-disabled::part(native) {
	background: var(--kyra-color-grey-light);
	color:var(--kyra-color-grey-less-darker)
}

kyra-select-button.bulk-action-button:not(.gray-bulk-action-button) ion-button.bulk-action-button.popover-opened::part(native) {
	background: var(--ion-color-secondary-shade);
}

kyra-select-button#sort-button ion-button.sort-button.popover-opened::part(native) {
	background: var(--kyra-color-grey-light-dark);
}

kyra-select-button#sort-button ion-button.sort-button {
	--background: white;
	--background-hover: var(--ion-color-secondary-shade);
	--background-activated: var(--ion-color-secondary-shade);
	--color: var(--ion-color-secondary);
	--border-width: 0px;
	--box-shadow: none;
	box-shadow: none;
}

ion-item.bulkAction-list-item button::part(native),
ion-item.sortBy-list-item button::part(native) {
	--min-height: 44px;
}

ion-item.bulkAction-list-item,
ion-item.sortBy-list-item {
	--inner-padding-end: 0px;
	--padding-end: 16px;
	font-size: 14px;
}

ion-list#bulkAction-list,
ion-list#sortBy-list {
	padding: 0px;
}

ion-button#save-custom-list-btn::part(native),
ion-button#search-criteria-btn::part(native) {
	border-radius: 2px;
	box-shadow: none;
	background-color: var(--kyra-color-background);
	color: var(--kyra-color-text);
	border-color: var(--kyra-color-grey-light-dark);
}

ion-button#save-as-list-btn::part(native) {
	box-shadow: none;
}

/*
 * Focus styles for accessibility to comply with WCAG AA
 * Some components require class="ion-focusable" to be added to it.
 *
 * https://ionic.io/docs/accessibility/keyboard#ionic-component-styling
 *
 * WIP: This is a work in progress and will be updated as we go along.
 */

ion-input.ion-focused,
button:focus-visible,
ion-button.ion-focused,
ion-segment-button.ion-focused,
ion-radio.ion-focused,
ion-select.ion-focused,
ion-fab.ion-focused,
ion-searchbar.ion-focused,
ion-checkbox.ion-focused,
kyra-multiselect.ion-focused,
kyra-search-bar.ion-focused,
ion-toggle.ion-focused:not(ion-item ion-toggle),
ion-range.ion-focused,
ion-datetime.ion-focused,
ion-accordion.ion-focused,
ion-textarea.ion-focused,
ion-chip.ion-focused,
ion-icon.ion-focused,
div:not(.mbsc-popup-focus):focus-visible,
span:focus-visible,
tr:focus-visible,
.selectabletablerow:focus-visible,
a:focus-visible,
.mbsc-focus {
  outline: solid 2px var(--ion-color-secondary) !important;
  border-radius: var(--kyra-border-radius);
  outline-offset: 1px;
}

ion-item.ion-focused, 
kyra-tabs-responsive div button:focus-visible,
kyra-tabs button:focus-visible{
	border: 2px solid var(--ion-color-secondary) !important;
	border-radius: 4px;
	outline: none !important;
}

ion-item.ion-focused.menu-item{
	border: 0px !important;
} 

ion-checkbox.checkbox-checked {
	--checkbox-background-checked: var(--ion-color-secondary);
	--border-color-checked: var(--ion-color-secondary);
	--border-color: var(--kyra-color-grey-dark);
}

ion-button.single-icon-button {
	margin: 0px;
	height: 100%;
	--background: white;
	--box-shadow: none !important;
	--background-hover: var(--kyra-color-grey-lighter) !important;
	--background-hover-opacity: none;
	--background-focused: var(--kyra-color-grey-lighter) !important;
	--background-focused-opacity: none;
	--padding-start: 0.375rem;
	--padding-end: 0.375rem;
	--padding-top: 0.375rem;
	--padding-bottom: 0.375rem;
	--border-radius: 2px;
	--border-width: 0px;
}

ion-button.single-icon-button.button-popover-opened {
	--background: var(--kyra-color-grey-light);
  }

ion-button.column-visible-reorder-button {
	height: 100%;
	--background-hover: var(--kyra-color-grey-lighter) !important;
	--border-radius: 0px;
	--border-color: var(--kyra-color-grey-mild);
}

ion-button.view-custom-lists-button,
ion-button.results-filter-button {
	--border-style: solid;
	--border-radius: 2px;
	--background: white;
	color: var(--kyra-color-grey-lighter);
	--box-shadow: none;
	--background-hover: var(--kyra-color-grey-lighter) !important;
	--background-hover-opacity: none;
	--background-activated:var(--kyra-color-grey-lighter) !important;
	--background-activated-opacity: none;
	--background-focused: var(--kyra-color-grey-lighter) !important;
	--background-focused-opacity: none;
	--border-color: var(--kyra-color-grey-mild);
	--padding-start: 8px;
	--padding-end: 8px;
}

ion-button#create-new-list-btn{
	--background: var(--kyra-color-grey-mild) !important;
}

ion-popover.selection-list-popover::part(content) {
	--width: fit-content;
	border-radius: 4px;
}

ion-item.selection-list-popover-item button::part(native) {
	--min-height: 44px;
}

ion-item.selection-list-popover-item {
	--inner-padding-end: 0rem;
	--padding-end: 1rem;
}

div#patient-list-table-container #patient-list-ag-grid,
div#patient-search-table-container #patient-search-ag-grid{
  	--ag-font-size: 14px !important;
}

ion-icon#column-visible-reorder-icon{
	color: var(--kyra-color-grey-darker) !important;
}

.ag-theme-material div.ag-filter-from input.ag-input-field-input,
.ag-theme-material .ag-filter .ag-filter-apply-panel{
	font-size: 14px;
}

.ag-checkbox-focus-wrapper.focused {
	outline: solid 2px var(--ion-color-responsive-table-primary) !important;
}

.ag-checkbox-input-wrapper {
	box-shadow: none !important;
}

.ag-theme-material div.ag-cell.red-text-cell .ag-cell-value{
	color: var(--kyra-color-red-shade);
}

.patient-list-card{
	grid-template-rows: auto auto auto auto auto auto;
}

kyra-multiselect#custom-list-type-selector{
	min-width: 130px;
	max-width: 150px;
}

kyra-multiselect#custom-list-type-selector .vscomp-wrapper.focused .vscomp-toggle-button{
	border-color: var(--ion-color-secondary) !important;
}

ion-searchbar#custom-list-searchbar .searchbar-input {
	height: 100%;
	font-size: 14px;
	padding-inline-start: 1.875rem;
	padding-inline-end: 0.5rem;
	border-radius: 0.25rem;
	border-color: var(--kyra-color-grey-mild);
}

ion-searchbar#custom-list-searchbar .searchbar-input-container{
	height: 100%;
}

ion-searchbar#custom-list-searchbar .searchbar-search-icon {
	font-size: 14px;
	inset-inline-start: 0.5rem;
}

span.dot-before::before {
    content: '\2022'; /* Unicode for the bullet character */
    margin-right: 0.5rem;
}

/* End of new patient list styling */

.order-cancelled-gray * {
	color: rgb(148 148 148) !important;
}

div.text-gray-500 .ag-cell-value{
	color : rgb(148 148 148) !important;
}

@media (min-width: 1024px) {
  .hide-at-1024 {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .show-at-1024 {
    display: block !important;
  }
}

/* Start of global searchbar styling*/
ion-searchbar.kyra-searchbar input {
	border: none !important;
	padding: 0px 6px 0px 6px !important;
	font-size: 14px !important;
	box-shadow: none !important;
	text-overflow: ellipsis !important;
	text-align: start !important;
}

ion-searchbar.kyra-searchbar ion-icon.searchbar-search-icon{
	display: none !important;
}

div#search-bar-container:has(ion-searchbar.searchbar-has-focus){
	border-color: var(--ion-color-secondary);
}

ion-button.kyra-searchbar-button{
	height: 30px;
}

ion-button.kyra-searchbar-button::part(native) {
	--border-width: 0px;
	--padding-start:0px;
	--padding-end:0px;
}

ion-button.kyra-searchbar-button::part(native) {
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	--background-hover:var(--kyra-color-grey-lighter);
	--background-activated:var(--kyra-color-grey-lighter);
	--background-activated-opacity: none;
	--background-hover-opacity: none;
	border-radius: 2px !important;
    --background: white;
    box-shadow: unset;
}
/* End of global searchbar styling*/
.reverse-flow {
	flex-flow: column-reverse;
}

/*episode switcher styling */

ion-button#episode-switcher-button {
--padding-start: 0px !important;
--padding-end: 0px !important;
}

ion-popover.episode-switcher-popover::part(content) {
	--height: min-content;
	--width: min-content;
	scrollbar-width: thin;
}

@media (max-width: 767px) {
	.episode-switcher-content {
		max-height: 280px;
		width: 360px;
	}
}

@media (max-width: 1365px) {
	.episode-switcher-content {
		max-height: 320px;
		width: 360px;
	}
}

.episode-switcher-content {
	max-height: 320px;
	width: 360px;
}

kyra-responsive-table-card.episode-switcher-card:focus-visible {
    border: 2px solid var(--ion-color-secondary);
	border-radius:4px;
	outline: none;
}

/*end of episode switcher styling*/

/*patient-banner expanded details styling */

ion-popover.expanded-details-popover::part(content) {
	background-color: var(--kyra-color-grey-lightest);
}

/*end of patient-banner expanded details styling */

/*patient home styling */

.patient-details-section {
	border: 1px solid var(--kyra-color-grey-test-darkest) !important;
	border-radius: 4px;
}

.patient-details-ion-item {
--inner-border-width: 0px !important;
}

/*end of patient home styling */