/** START: JQuery UI widget styles **/
.ui-helper-hidden-accessible {display: none;}
.ui-helper-clearfix::before, .ui-helper-clearfix::after {
  border-collapse: collapse;
  content: "";
  display: table;
}
.ui-helper-clearfix {min-height: 0;}
.ui-helper-clearfix::after {clear: both;}

.standardDialog {
    z-index: 111;
    width: 100%;
    min-width: 320px;
    height: auto;
    position: relative;
}

.standardDialog .dialogContent {
    height: calc(100% - 180px);
    padding: 10px;
    overflow: auto;
    background-color: var(--primary-background-color);
}

.dialogContent.noPadding{
  padding: 0;
}

.dialogContainerActive {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 115;
	background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.standardDialog.midSizeDialog, .standardDialog.smallSizeDialog, .standardDialog.largeSizeDialog {
    max-height: 100%;
    overflow: auto;
}

.standardDialog.smallSizeDialog {max-width: 500px;}
.standardDialog.midSizeDialog {max-width: 700px;}
.standardDialog.largeSizeDialog {padding-bottom: 0;}

.standardDialog.fullSizeDialog {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--primary-background-color);
    border-radius: 0;
}

.standardDialog.fullSizeDialog .dialogContent{
  height: calc(100% - 120px);
}

.standardDialog.noButtonPane .dialogContent{
  height: calc(100% - 65px);
}

.standardDialog.noButtonPane .dialogContent.noPadding{
  height: calc(100% - 45px);
}

.standardDialog .titleArea {
  font-size: 18px;
  font-weight: 600;
  color: var(--alternate-text-color);
  background-color: var(--maincolor);
  height: 25px;
  padding: 10px;
}

.standardDialog.errorDialog .titleArea {
    background-color: var(--error-background-color);
    color: var(--primary-text-color);
}

.standardDialog.errorDialog {
    background-color: var(--secondary-background-color);
}

.standardDialog.errorDialog .standardButton:hover {
    background-color: var(--secondary-background-color);
}

.standardDialog.infoOnlyDialog .titleArea {
    background-color: var(--white);
    color: var(--primary-text-color);
}

.standardDialog.infoOnlyDialog .dialogTitle {
    width: 100%;
    text-align: center;
}

.standardDialog.infoOnlyDialog .buttonBottom {
    justify-content: center;
}

.standardDialog ul li {
    list-style-type: disc;
}

/*fixed position for search input*/
#new_healthinfo_dialog .dialogSearch {left: 10px; top: 55px; position: absolute; width: 94%;}

.standardDialog .dialogTitle {
  width: calc(100% - 35px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standardDialog .dialogClose {
  cursor: pointer;
  height: 25px;
  padding: 10px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 25px;
}

.ui-icon {
	background-repeat: no-repeat;
    text-indent: -99999px;
}
.ui-icon {height: 16px; width: 16px;}

.standardDialog .buttonPane  {
    padding: 10px;
    background-color: var(--primary-background-color);
}

.standardButton {
    background-color: var(--standardbutton-color);
    color: var(--standardbutton-text-color);
    border: 1px solid var(--standardbutton-text-color);
    text-transform: uppercase;
    display: inline-block;
    font-weight: normal;
    margin: 0;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 3px;
    white-space: normal;
}

.standardButton:hover, .standardButton a:hover {
    color: var(--standardbutton-text-hover-color);
    background-color: var(--standardButton-hover-color);
}

.standardButton[disabled], .standardButton[disabled]:hover, .standardButton.disabled {
    background-color: var(--standardbutton-disabled-color);
    opacity: 1;
    color: var(--standardbutton-disabled-text-color);
    border-color: var(--standardbutton-disabled-text-color);
    cursor: not-allowed;
}


.button.alternative, .standardButton.alternative {
	background-color: var(--alternate-button-color);
	color: var(--alternate-button-text-color);
	box-sizing: border-box;
    border: none;
    padding: 7px 12px;
}

.button.alternative:hover, .standardButton.alternative:hover {
	background-color: var(--alternate-button-hover-color);
	color: var(--alternate-button-text-hover-color);
}

.standardButton.alternative[disabled], .button.alternative:disabled,
.standardButton.alternative[disabled]:hover, .button.alternative:disabled:hover, .button.alternative.disabled:hover,
.standardButton.alternative.disabled, .button.alternative:disabled,.button.alternative.disabled
{
    background-color: var(--alternate-button-disabled-color) !important;
    color: var(--alternate-button-disabled-text-color);
    cursor: not-allowed;
}


.descendantContainer .standardButton {
    padding: 10px 0;
    letter-spacing: 0;
    margin: 5px auto;
    width: 220px;
    text-align: center;
    display: block;
}

.standardButton.addAncestor {padding: 5px 20px; margin-top: 1px;}

.moreButton {
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--standardbutton-color);
    color: var(--standardbutton-text-color);
    cursor: pointer;
    font-size: 10px;
}

.moreButton:after {
    font-family: 'tba';
    content: "\e90e";
}

.moreButton:hover {
    color: var(--standardbutton-text-hover-color);
}

/** Date picker **/
.ui-datepicker.ui-widget-content .ui-state-default {
  border: 1px solid #ccc;
  font-weight: 600;
}
.ui-datepicker .ui-datepicker-title {text-align: center;}
#ui-datepicker-div select {height: auto; width: auto;}
.ui-datepicker table thead {background-color: var(--maincolor); color: var(--alternate-text-color);}
.ui-datepicker th {text-align: center;}
.ui-datepicker td {padding: 1px;}
.ui-datepicker.ui-widget-content {border: 1px solid var(--maincolor); background-color: var(--secondary-background-color); border-radius: 3px; display: none; z-index: 100 !important;}
.ui-datepicker-header {background-color: var(--maincolor);}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  height: 30px;
  width: 30px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev {left: 2px;}
.ui-datepicker .ui-datepicker-next {right: 2px;}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {background-color: var(--maincolor-variant); }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
	display: block;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
	background-size: 15px 15px;
}
.ui-datepicker-next .ui-icon {background-image: url("../images/icon_calendar_right.png"); }
.ui-datepicker-prev .ui-icon {background-image: url("../images/icon_calendar_left.png"); }
.ui-datepicker .ui-state-default.ui-state-active, .ui-datepicker .ui-state-default.ui-state-active.ui-state-hover,
.ui-datepicker .ui-state-default.ui-state-highlight, .ui-datepicker .ui-state-default.ui-state-highlight.ui-state-hover,
.ui-datepicker .ui-state-default.ui-state-hover {color: var(--maincolor); border: 1px solid var(--maincolor); background: var(--primary-background-color);}

.ui-datepicker td span, .ui-datepicker td a {
	display: block;
    padding: 12px;
    text-align: right;
}
/** END: overwrite JQuery UI widget styles **/