.suffix-container {
    display: flex;
    align-items: center;
    margin-left: 2em;
}

.navigation-list-count {
    color: #114B99;
    font-family: Arial;
    font-weight: bold;
    margin-left: 16px;
}

.navigation-list-count-no-margin {
    color: #114B99;
    font-family: Arial;
    font-weight: bold;
}

.set-email-template-list-item {
    margin-top: 8px;
    margin-bottom: 8px;
}

.set-email-template-list-heading {
    min-width: 100px;
}

.condensed-help-text-button {
    margin: 0px !important;
    padding: 0px !important;
    min-height: 24px !important;
    max-height: 24px !important;
}

/*
    Styling to show a 'footer' in the select control with a checkbox
*/

.ui-select-footer {
    border-top: 1px solid rgba(0,0,0,0.54);
    color: rgba(0,0,0,0.54);
    font-size: 0.75em;
}

.ui-select-footer-content {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 8px;
}

.ui-select-footer-content input {
    margin: 0px;
    vertical-align: bottom;
}

button-bar {
    display: flex;
    flex-direction: row;
}

/*
    Fix to show ng messages in all scenarios where they apply. This fixes the issue with opening the same dialog more than once would cause ng messages to no longer correctly shown, as noted in PBI 1740.
    To use this fix, a tag is needed similar to the following 'ng-class="{ 'show-ng-messages': ti[drvCtrl.field.Name].$touched || (ti[drvCtrl.field.Name].$viewModel !== undefined && ti[drvCtrl.field.Name].$viewModel !== null && ti[drvCtrl.field.Name].$viewModel !== '') }"'
*/
.show-ng-messages md-input-container .md-auto-hide .md-input-message-animation:not(.ng-animate),
.show-ng-messages md-input-container .md-input-message-animation.ng-enter,
.show-ng-messages md-input-container:not(.md-input-invalid) .md-auto-hide .md-input-message-animation {
  opacity: 1;
  margin-top: 0px;
}

.md-button._md-nav-button > span {
    margin-left: 8px;
    margin-right: 8px;
}

.md-nav-bar, .md-nav-bar > nav, ._md-nav-bar-list, .md-button._md-nav-button{
  height: 40px;
}

._md-nav-bar-list {
    border-bottom: 1px solid gray;
}

.md-nav-bar .md-button._md-nav-button {
    border: 1px solid gray;
    background-color: lightgray;
    margin: 0px;
    padding-left: 7px;
    padding-right: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    top: 0px;
    text-transform: none;
    padding-top: 8px;
    padding-bottom: 8px;
}

.md-nav-bar .md-button._md-nav-button.md-active {
    padding-left: 0px;
    border-bottom: 1px solid white;
    background-color: white;
    border-left: 8px solid #3860A4;
}

md-nav-bar md-nav-ink-bar {
    visibility: hidden;
}

.tag-chip {
    border: 1px solid #aaaaaa;
    border-radius: 3px;
    margin: 3px 0 3px 5px;
    padding-left: 3px;
    padding-right: 3px;
}

.field-input-entity-template-icon {
    margin-left: 8px;
}

.field-input-margin {
    margin-top: 18px;
    margin-bottom: 18px;
}

md-list-item:hover {
    -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

md-list-item.md-clickable:hover, md-list-item.hover-background:hover {
    background-color: #DADADA;
}

.md-nav-bar .md-button._md-nav-button.md-active {
    color: black;
}

md-checkbox.md-checked .md-icon {
    background-color: #49c43e;
}

.item-list-name {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(0,0,0,0.54) !important;
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-list-description {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(0,0,0,0.54) !important;
    white-space: pre-line;
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-selector-item {
    align-items: center;
}

.sub-view-list .list-item-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(0,0,0,0.54) !important;
    margin: 0px;
}

.sub-view-list .list-item-description, .sub-view-list .list-item-description p {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(0,0,0,0.54) !important;
    white-space: pre-line;
    margin: 0px;
}

.view-list .list-item-name, .list-item-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgba(0,0,0,0.54) !important;
    margin: 0px;
}

.view-list .list-item-description, .list-item-description {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(0,0,0,0.54) !important;
    white-space: pre-line;
    margin: 0px;
}

.many-entity-list {
    max-height: 470px;
    overflow-y: auto;
}

.select2-results {
  max-height: 530px !important;
}

.dashboard-panel {
    border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    border: 1px solid #a8a2ab;
}

ul.pagination {
    list-style-type: none;
    padding: 0;
}
ul.pagination li {
    display: inline-block;
}

.material-icons {
  vertical-align: middle;
}

.date-time-input md-input-container {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.date-time-input button {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

h4 {
    font-weight: 600 !important;
}

.mce-add-field-button button {
    color: #551A8B !important;
}

.navigation-button {
    margin: 0px;
    height: 40px;
    width: auto !important;
    line-height: 0px;
    border-radius: 0px 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.document-editor-nav {
    border-radius: 2px 2px 2px 2px;
    margin-left: 7em;
    padding-left: 1em;
    padding-right: 1em;
    color: white;
    font-size: 16px;
    background-color:cornflowerblue;
}

.sub-menu {
    padding-left: 1em;
}

md-sidenav {
    width: 260px;
    background-color:lightgray;
}

md-sidenav .md-button {
    width: 100%;
    text-align: left;
    padding: 10px 20px;
    margin: 0px;
}

.entity-view-details {
    text-align:left;
}

md-icon {
    fill: grey;
}

.joint-js-diagram
{
    overflow: auto;
    max-height: 600px;
}

.madetofade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

.madetofade.ng-enter.ng-enter-active {
  opacity:1;
}

.filebox-dragover {
    border: 5px dashed blue;
}

.md-toolbar-tools.title-bar md-icon {
    fill: grey;
}

.title-bar, .title-bar-sub-view {
    background-color: white;
    color: rgba(0,0,0,0.54);
    padding: 0px 0px 0px 16px;
    min-height: 54px;
}

.title-bar h1, .title-bar-sub-view h1 {
    margin: 12px 0px 12px 0px;
}

.md-nav-bar {
    background-color: white !important;
    border-bottom: none !important;
    margin-bottom: 8px;
}

.view-content {
    background-color: white;
    overflow: hidden;
}

.page-content {
    padding: 8px;
}

h1 {
    font-size: 16pt;
}

.material-label-fake {
    /* When you want a label to look like it's in an md-input-container, but it's not */
    padding-left: 3px;
    color: rgba(0,0,0,0.54);
    position: relative;
    bottom: 100%;
    left: 0;
    right: auto;
    font-size: 0.75em;
}

.material-label-fake.invalid {
    color: red !important;
}

/* Default for Edge Support: Override the mandatory symbol/notification text for angular material */
.mandatory:after {
    content: ' (Required)';
    font-size: 10px;
    vertical-align: top;
    font-stretch: extra-condensed;
}

.mandatory:after {
    content: var(--mandatoryLabel);
    font-size: 10px;
    vertical-align: top;
    font-stretch: extra-condensed;
}

/* Default for Edge Support: Set the optional symbol/notification text */
.optional:after {
    content: ' (Optional)';
    font-size: 10px;
    vertical-align: top;
    font-stretch: extra-condensed;
}

.optional:after {
    content: var(--optionalLabel);
    font-size: 10px;
    vertical-align: top;
    font-stretch: extra-condensed;
}

md-menu-content.md-dense {
    max-height: 500px;
}

.warning-message-div {
    color: orange !important;
}

.error-messsage-div {
    color: red !important;
}

.error-message-chip {
    color: rgb(230,50,20) !important;
}

/* Used to override the angular material colouring of list items for the entity preview name */
.error-message-chip .entity-preview-name {
    color: red !important;
}

/* Used for the toasts which show the result of the automatic draft email saving */
.email-save-success .md-toast-content{
    background: rgb(50,230,20) !important;
}

.email-save-error .md-toast-content{
    background: rgb(230,50,20) !important;
}

/* Used for the file list directive */
.file-list-error {
    fill: rgb(230,50,20) !important;
}

.attachment-button-view {
    min-width: 32px;
    margin: 0px 0px 0px 20px;
}

.attachment-button-delete {
    min-width: 32px;
    margin: 0px;
}

.email-address-selector {
    margin-top: 8px;
}

.email-address-selector .md-chip-input-container {
    height: 32px;
    width: 100%;
}

.email-address-autocomplete-template li {
  border-bottom: 1px solid #ccc;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  white-space: normal;
}
.email-address-autocomplete-template li:last-child {
  border-bottom-width: 0;
}

.email-address-autocomplete-template .list-item {
    Display: Block;
    line-height: 2;
}

/* Contact information panel*/
.contact-information p {
    margin-top: 0px;
    margin-bottom: 0px;
}

.email-list.selected {
    background-color: lightgray;
}

.list-item {
    margin-top: 4px;
    margin-bottom: 4px;
}

.list-item:not(.selected) {
    height: 2em !important;
    min-height: initial !important;
}

.list-item .detail {
    margin-left: 1em;
    border-top:solid;
    border-top-width: 1px;
    border-top-color: lightgrey;
}

.list-item .detail span {
    margin-right: 10px;
}

.list-item.selected .header {
}

.list-item-header:hover {
    background-color: lightgray;
}

.expando-button {
    text-align: center;
    user-select: none;
}

.expando-button:hover {
    cursor: pointer;
}

.animate-if {
  padding:10px;
}

.animate-if.ng-enter, .animate-if.ng-leave {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
}

.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
  opacity:0;
}

.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
  opacity:1;
}

.main-button {
    color: white !important;
    background-color: #3860A4 !important;
}

.title-bar-button {
    margin-left: 8px;
    margin-right: 8px;
}

.title-bar-button button {
    color: white !important;
    background-color: #3860A4 !important;
    min-width: 0px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Override the padding for the add button so the text and icon are correctly aligned */
.add-button .title-bar-button button {
    padding-left: 4px;
}

/* Override the padding for the save button so the text and icon are correctly aligned */
.save-button .title-bar-button button {
    padding-left: 6px;
}

.title-bar-button button md-icon {
    fill: white;
}

.title-bar-button button:disabled md-icon {
    fill: grey;
}

.main-button:disabled, .title-bar-button button:disabled {
    color: grey !important;
    background-color: lightgrey !important;
}

/* ****** Bootstrap Tooltip ****** */

.tooltip {
  position: absolute;
  z-index: 10001;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;

  line-break: auto;
}
.tooltip.in {
  /*filter: alpha(opacity=90);
  opacity: .9;*/
  filter: alpha(opacity=100);
  opacity: 1;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  /*color: #fff;*/
  color: #000;
  /*text-align: center;*/
  /*background-color: #000;*/
  background-color: #fff;
  border-radius: 4px;
  border: solid 1px black;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  right: 5px;
  bottom: 0;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

/* ****** End of Bootstrap Tooltip ****** */

/* ****** Bootstrap Modal ****** */

.modal-open {
  overflow: hidden;
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
       -o-transition:      -o-transform .3s ease-out;
          transition:         transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
       -o-transform: translate(0, -25%);
          transform: translate(0, -25%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-dialog {
  position: relative;
  width: auto;
  height: 98%;
  margin: auto;
  overflow: hidden;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}
.modal-content {
    max-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    overflow: hidden;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 79 !important;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}
.modal-header {
  border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
.modal-xl-fh .modal-content {
    height: 95%;
}

@media (min-width: 993px) {
    .modal-xl-fh .modal-content {
        width: 90%;
    }
}

@media (min-width: 768px) {
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    width: 600px;
  }
  .modal-sm .modal-content {
      width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg .modal-content, .modal-xl .model-content {
      width: 900px;
  }
}
@media (min-width: 993px) {
    .modal-xl .modal-content {
        width: 90%;
    }
}

/* ****** End of Bootstrap Modal ****** */

/* Override z-index for compatibility with Bootstrap Modal */
.md-select-backdrop {
    z-index: 1200 !important;
}

/* Override z-index for compatibility with Bootstrap Modal */
.md-select-menu-container {
    z-index: 1201 !important;
}

/* Default for Edge Support: Override the mandatory symbol/notification text for angular material */
md-input-container label:not(.md-container-ignore).md-required:after {
    content: ' (Required)';
}
/* Default for Edge Support:  Override the mandatory symbol/notification text for angular material */
md-input-container:not(.md-input-has-value) md-select[required]:not(.md-no-asterisk) .md-select-value span:first-child:after, md-input-container:not(.md-input-has-value) md-select.ng-required:not(.md-no-asterisk) .md-select-value span:first-child:after {
    content: ' (Required)';
}
/* Default for Edge Support:  Override the mandatory symbol/notification text for angular material */
md-select[required].ng-invalid:not(.md-no-asterisk) .md-select-value span:first-child:after, md-select.ng-required.ng-invalid:not(.md-no-asterisk) .md-select-value span:first-child:after {
    content: ' (Required)';
}

/* Override the mandatory symbol/notification text for angular material */
md-input-container label:not(.md-container-ignore).md-required:after {
    content: var(--mandatoryLabel);
    font-size: 10px;
    vertical-align: top;
}

/* Override the mandatory symbol/notification text for angular material */
md-input-container:not(.md-input-has-value) md-select[required]:not(.md-no-asterisk) .md-select-value span:first-child:after, md-input-container:not(.md-input-has-value) md-select.ng-required:not(.md-no-asterisk) .md-select-value span:first-child:after {
    content: var(--mandatoryLabel);
    font-size: 10px;
    vertical-align: top;
}

/* Override the mandatory symbol/notification text for angular material */
md-select[required].ng-invalid:not(.md-no-asterisk) .md-select-value span:first-child:after, md-select.ng-required.ng-invalid:not(.md-no-asterisk) .md-select-value span:first-child:after {
    content: var(--mandatoryLabel);
    font-size: 10px;
    vertical-align: top;
}