/* Copyright 2018-2023 Epic Systems Corporation */
div.title.relationship-content {
  margin-top: 22px;
}

.card.relationship-content .address .cardline {
  display: inline-block;
  vertical-align: top;
}

.relationship-content.card.addItem a {
  height: 100%;
}

.relationship-content p.subtext {
  display: none;
  line-height: 1.25rem;
  margin: 0.25rem 0.5%;
  box-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  position: absolute;
  font-size: 11pt;
  text-align: left;
  padding: 1rem;
  bottom: 2.8rem;
  left: 30%;
  z-index: 2;
  border-width: 1px;
  border-style: solid;
  min-width: 65%;
}
.relationship-content .removebutton.explainable.disabled:hover + p.subtext,
.relationship-content .removebutton.explainable.disabled:focus + p.subtext,
.relationship-content .removebutton.explainable.disabled + p.subtext:hover,
.relationship-content .removebutton.explainable.disabled + p.subtext:focus {
  display: inline-block;
  visibility: visible;
}

.mobile .relationship-content .buttonList p.subtext {
  left: unset;
  right: 0rem;
  bottom: 4.5rem;
}

.relationship-content .header.name.icon + .cardline.halfwidth {
  width: 50%;
  line-height: 1rem;
}
.relationship-content .ajaxspinner {
  position: absolute;
  top: 25%;
  transform: perspective(1px) translateY(-50%);
  margin: 0 0 -0.5rem 0;
}
.relationship-content .overflowHiddenWithEllipses {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.5rem;
  max-width: 100%;
}
.relationship-content select {
  text-overflow: ellipsis;
  white-space: nowrap;
}
.relationship-content .noValue {
  font-style: italic;
}
.relationship-content .fieldValues {
  vertical-align: middle;
}
.relationship-content .temporary {
  max-width: 100%;
}
.relationship-content .name.header {
  padding-bottom: 1rem;
}
.relationship-content .primary-contact-checkbox {
  padding: 0 0.25rem 0.5rem 0.25rem;
}
.relationship-content .primary-contact-checkbox p.button {
  width: 100%;
}
.relationship-content .primary-contact-checkbox p label {
  font-size: 1.05rem;
}
.relationship-content .edit-primary-label p {
  text-align: right;
  font-size: 0.9rem;
}

.relationship-content .formsection {
  margin: 0.25rem 0;
}
.relationship-content [class*=col-] {
  padding: 0 0.25rem;
}
.relationship-content .homePhone input,
.relationship-content .mobilePhone input,
.relationship-content .workPhone input {
  padding-right: 1.5rem;
}
.relationship-content .homePhone input::-ms-clear,
.relationship-content .mobilePhone input::-ms-clear,
.relationship-content .workPhone input::-ms-clear {
  display: none;
}
.relationship-content label.preferredDeviceSelector {
  padding-top: 0;
  margin: -2.75rem 1px 0 0;
  line-height: 2.25rem;
  height: 2.25rem;
  width: auto;
  float: right;
  cursor: pointer;
  position: relative;
}
.mobile.androidWebview .relationship-content label.preferredDeviceSelector {
  margin-top: -1.25lh;
}
.relationship-content label.preferredDeviceSelector .preferredDeviceSelected,
.relationship-content label.preferredDeviceSelector .preferredDeviceUnselected {
  visibility: hidden;
  vertical-align: middle;
  width: 1rem;
  height: 1rem;
  margin: 0 0.5rem;
}
.relationship-content label.preferredDeviceSelector .preferredDeviceUnselected {
  margin-left: -1.5rem;
}
.relationship-content .preferredDeviceSelector.selected .preferredDeviceSelected,
.relationship-content .preferredDeviceSelector:hover .preferredDeviceUnselected,
.relationship-content input:hover + .preferredDeviceSelector .preferredDeviceUnselected,
.relationship-content input:focus + .preferredDeviceSelector .preferredDeviceUnselected,
.relationship-content .preferredDeviceSelector input:focus + .preferredDeviceSelected + .preferredDeviceUnselected, .mobile .relationship-content .preferredDeviceSelector .preferredDeviceUnselected {
  visibility: visible;
}
.relationship-content .preferredDeviceSelector.selected input:focus + .preferredDeviceSelected,
.relationship-content .preferredDeviceSelector input:focus + .preferredDeviceSelected + .preferredDeviceUnselected {
  outline: 1px dotted #000000;
}
.relationship-content .preferredDeviceSelector.selected:hover .preferredDeviceUnselected,
.relationship-content input:hover + .preferredDeviceSelector.selected .preferredDeviceUnselected,
.relationship-content input:focus + .preferredDeviceSelector.selected .preferredDeviceUnselected,
.relationship-content .preferredDeviceSelector.selected input:focus + .preferredDeviceSelected + .preferredDeviceUnselected, .mobile .relationship-content .preferredDeviceSelector.selected .preferredDeviceUnselected {
  visibility: hidden;
}
.relationship-content .iconLabel {
  vertical-align: middle;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.25rem;
}

.mobile .card.relationship-content .cardline,
.mobile .relationship-content .header.name.icon + .cardline.halfwidth {
  display: block;
  width: 100%;
  margin: 0;
}

.mobile .card.relationship-content .cardline.rightHalf {
  margin-top: 1rem;
}

.card .cardline {
  line-height: normal;
}

.mobile #main div.title.relationship-content.viewInMobile {
  display: block;
}

.mobile .relationship-content.card .buttonList.right {
  width: 100%;
}
.mobile .relationship-content.card .buttonList.right .button {
  width: 50%;
}
.mobile .relationship-content.card .buttonList.right .button:only-child {
  width: 100%;
}

.saveFailSpacer,
.vrkSpacer {
  position: relative;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  margin-left: -0.5rem;
  padding: 0.25rem 0rem 0.25rem 2rem;
  opacity: 0;
}

.helptip {
  /*
  	1. This block should be removed eventually and use vrkBanner instead.
  	2. vrkBanner should be renamed properly then.
  	3. Both saveFail banner and addFail banner are now using a spacer div 
  	to occupy the height and then using position:absolute to display the
  	banner on page, which cause screen reader (voiceover and talkback)
  	read twice. The spacer div should be removed after switch to vrkBanner.
  	4. It won't be fixed along with DLG 603967 because it's a change order
  	DLG.
  */
}
.helptip.saveFail, .helptip.addFail {
  position: absolute;
  top: 0;
  font-size: 0.8rem;
  margin-left: -0.5rem;
  border-bottom: 1px solid #dbdbdb;
  padding: 0.25rem 1rem 0.25rem 2rem;
  background-size: 1rem 1rem;
  min-height: auto;
  min-height: initial;
}
.helptip.vrkBanner {
  position: relative;
  top: -0.5rem;
  left: -0.5rem;
  max-width: none;
  width: calc(100% + 1rem);
  border-bottom: 1px solid #dbdbdb;
  padding: 0.25rem 1rem 0.25rem 2rem;
  background-size: 1rem 1rem;
  min-height: auto;
  min-height: initial;
}

.closeBG {
  background: url("../images/close.svg") no-repeat scroll left 0.7rem center #ffffd0;
}

.checkBG {
  background: url("../images/requirement_met.svg") no-repeat scroll left 0.7rem center #ffffd0;
}

.infoBG {
  background: url("../images/info.png") no-repeat scroll left 0.7rem center #ffffd0;
}

/*Patient Contacts*/
.cardlist .relationship-content.card.contact {
  padding: 0;
}
.cardlist .relationship-content.card.contact.card.withButton {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.cardlist .relationship-content.card.contact.card.withButton .buttonList {
  min-height: 0;
  padding: 0;
  position: static;
  margin-top: auto;
}
.cardlist .relationship-content.card.contact .standardBanner {
  margin-bottom: 3%;
}
.cardlist .relationship-content.card.contact .cardContent {
  padding: 0.5rem;
}
.cardlist .relationship-content.card.contact .cardContent .name.header {
  display: flex;
  align-items: flex-start;
}
.cardlist .relationship-content.card.contact .cardContent .name.header .patientPhotoContainer {
  margin: 0.25rem;
}
.cardlist .relationship-content.card.contact .cardContent .name.header .patientPhotoContainer .roundedPatientPhoto {
  height: 1.75rem;
  width: 1.75rem;
  min-width: 1.75rem;
  line-height: 1.75rem;
  font-size: 1.25rem;
}
.mobile.androidWebview .cardlist .relationship-content.card.contact .cardContent .name.header .patientPhotoContainer .roundedPatientPhoto {
  height: 1lh;
  width: 1lh;
  min-width: 1lh;
}
.cardlist .relationship-content.card.contact .cardContent .name.header .name {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.cardlist .relationship-content.card.contact .cardContent .name.header .primaryContactLabel {
  padding: 0 0.25rem;
  float: right;
}
.cardlist .relationship-content.card.contact .cardContent .name.header .primaryContactLabel svg {
  height: 2rem;
  width: 2rem;
}
.cardlist .relationship-content.card.contact .cardContent .fieldValues {
  align-items: center;
}
.cardlist .relationship-content.card.contact .cardContent .fieldValues svg {
  height: 1.75rem;
  min-width: 1.75rem;
  margin: 0 0.25rem;
}
.cardlist .relationship-content.card.contact .cardContent .fieldValues.contactAddress {
  display: flex;
}
.cardlist .relationship-content.card.contact .buttonList {
  justify-content: space-between;
  align-items: flex-end;
}
.cardlist .relationship-content.card.contact .buttonList span {
  width: 100%;
}
.cardlist .relationship-content.card.contact .buttonList span div {
  margin-right: 0.25rem;
}
.cardlist .relationship-content.card.contact .buttonList .formbuttons {
  justify-content: flex-end;
}
@media screen and (max-width: 1300px) {
  .cardlist .relationship-content.card.contact .buttonList .formbuttons {
    flex-direction: column;
  }
  .cardlist .relationship-content.card.contact .buttonList .formbuttons > button {
    margin-top: 0.5rem;
    margin-left: 0;
    margin-right: 0;
  }
}
.cardlist .relationship-content.card.contact .buttonList button {
  justify-content: center;
}