.p-dialog {
  border: grey;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: $dialog-bg-color;
  box-shadow: $defaultBoxShadow;

  // Prevents shrinking of dialog on small screen
  &:not(.p-confirm-dialog) {
    width: 100%;
  }

  .p-dialog-header {
    border-bottom: 1px solid var(--dialog-header-border-color);
    color: $dialog-header-txt-color;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    padding: var(--dialog-padding);
    text-align: left;

    .p-dialog-title {
      margin: 0;
      float: none;
      vertical-align: middle;
    }

    .p-dialog-header-icon {
      border: 0 none;
      font-size: $closeButtonSize;
      margin-left: .35em;
      padding: 0;
      @include transition(color $transitionDuration);
    }

    .icon-header {
      display: flex;
      align-items: center;

      .dvl-icon {
        margin-right: 5px;
      }
    }
  }

  .p-dialog-content {
    padding: var(--dialog-padding);
    white-space: pre-line;

    @include custom-scrollbar();

    .toastui-editor-tooltip { // ToastUI tooltip doesn't like the pre-line property
      white-space: initial;
    }
  }

  .p-dialog-footer {
    padding: var(--dialog-padding);
    text-align: right;
    border-top: 1px solid var(--dialog-header-border-color);

    button {
      background: $dialog-footer-btn-bg-color;
      border: 0;
      border-radius: $buttonRadius;
      font-size: 14px;
      font-weight: 600;
      height: 30px;
      margin-right: 16px;
      min-width: 76px;
      padding: $buttonPadding;

      &.no-margin {
        margin: 0;
      }

      .p-button-label {
        align-items: center;
        display: flex;
        justify-content: center;
        line-height: normal;
        padding: 0;
      }

      &.secondary {
        background-color: var(--action-btn-outline-secondary-bg-color);
        border: 1px solid var(--action-btn-outline-secondary-color);
        box-shadow: 0 1px 5px 0 var(--action-btn-outline-tertiary-box-shadow-color);
        color: var(--action-btn-icon-color);
      }

      &.tertiary {
        background-color: var(--action-btn-outline-tertiary-bg-color);
        border: 1px solid var(--action-btn-outline-tertiary-color);
        box-shadow: 0 1px 5px 0 var(--action-btn-outline-tertiary-box-shadow-color);
        color: var(--action-btn-icon-color);

        &:not(.p-disabled):not(.p-highlight):not([disabled]):hover {
          background: var(--action-btn-outline-tertiary-bg-hover-color);
          border-color: var(--action-btn-outline-tertiary-border-hover-color);
          color: var(--action-btn-icon-color);
        }

        &:not(.p-disabled):not(.p-highlight):not([disabled]):active {
          background: var(--action-btn-outline-tertiary-bg-pressed-color);
          border-color: var(--action-btn-outline-tertiary-border-pressed-color);
          color: var(--action-btn-icon-color);
        }
      }

      &:not(.p-disabled):not(.p-highlight):not([disabled]):hover {
        background: $dialog-footer-btn-bg-hover-color;
        color: #fff;
      }

      &:not(.p-disabled):not(.p-highlight):not([disabled]):active {
        background: $dialog-footer-btn-bg-pressed-color;
      }

      &.p-button-delete-footer {
        background: $error-btn-bg-color;

        &:hover {
          background: $error-btn-bg-hover-color !important;
        }

        &:active {
          background: $error-btn-bg-pressed-color !important;
        }
      }
    }
  }

  &.p-confirm-dialog {
    max-width: 600px;

    .p-dialog-content {
      padding: 20px 35px;

      > span {
        float: none;
        display: inline-block;
        vertical-align: middle;
        line-height: 1.4;
        margin: 0;

        &.p-icon {
          margin-right: .35em;
          font-size: $fontSize + 2;
        }
      }

      .p-confirm-dialog-icon {
        margin: 0 10px;
      }
    }
  }
}

body .confirmdialog-password-breach .p-dialog-content {
  display: flex;

  .dvl-icon-alert-error {
    color: $errorMessageBackgroundColor;
  }

  .dvl-icon-alert-advise-bold {
    color: $warningMessageBackgroundColor;
  }
}

.scrollable-dialog {
  height: 100%;
  overflow-y: scroll;

  @include custom-scrollbar()
}

.dialog-left-tab.p-tabview-left {
  display: flex;
  flex-direction: row;

  @media screen and (max-width: 640px) {
    flex-direction: column;
  }
}

@media screen and (min-width: 769px) {

  .p-dialog-content {
    height: 100%;
  }

  body .lg-dialog:not(.p-confirm-dialog) {
    width: 65vw;
    min-width: 700px;
    height: 750px;

    &.auto-height-dialog {
      height: auto;
    }

    &.auto-width-dialog {
      width: auto;
    }
  }

  body .md-dialog:not(.p-confirm-dialog) {
    width: 50vw;
    min-width: 560px;
    height: 590px;

    &.auto-height-dialog {
      height: auto;
    }

    &.auto-width-dialog {
      width: auto;
    }
  }

  body .sm-dialog:not(.p-confirm-dialog) {
    width: 25vw;
    min-width: 350px;
    min-height: 175px;

    &.auto-height-dialog {
      height: auto;
    }

    &.auto-width-dialog {
      width: auto;
    }
  }
}

@media screen and (max-width: 768px) {
  .responsive-dialog-display {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    top: 0 !important;
  }
  body .p-dialog .p-dialog-content {
    height: 100%;
  }
}

.p-dialog .p-dialog-header {
  &:not(:empty) {
    flex: 0 1 auto;
    font-size: large;
    color: var(--dialog-header-txt-color);
    border-bottom: 1px solid var(--dialog-header-border-color);
    position: relative;
    display: flex;
    align-items: center;

    button:only-child {
      margin-left: auto;
    }
  }

  .p-dialog-title,
  h1 {
    display: inline-block;
    color: var(--dialog-header-txt-color);
    margin: 0 auto 0 0;
    font-size: 18px;
    font-weight: 600;

    @include text-ellipsis();
  }
}

.p-divider.p-divider-vertical {
  margin: 0 .5rem;
  padding: .25rem 0;
}

.p-dialog .p-dialog-header-icon {
  font-size: 22px !important;
}

.p-dialog .p-dialog-header .p-dialog-header-close {
  padding: 5px;
  border-radius: 50%;
  transition: background-color ease-in-out $transitionDuration;

  .pi-times:before {
    font-family: devolutions-icons, sans-serif;
    content: "\e93e";
  }

  &:hover:not(.p-disabled):not([disabled]) {
    background-color: $action-btn-hover-bg-color;
  }

  &:active:not(.p-disabled):not([disabled]) {
    background-color: $action-btn-pressed-bg-color;
  }
}

body .p-dialog-maximized {
  max-height: 100vh !important;
  max-width: 100vw !important;
}


.p-dialog-mask.p-component-overlay.import-dialog,
.p-dialog-mask.p-component-overlay.folder-browser-dialog,
.p-dialog-mask.p-component-overlay.checkout-dialog {
  .md-dialog:not(.p-confirm-dialog) {
    height: unset;
  }

  .sm-dialog:not(.p-confirm-dialog) {
    width: 400px;
  }
}

.p-dialog.unset-width:not(.p-confirm-dialog) {
  width: unset;
}

.p-dialog.unset-height:not(.p-confirm-dialog) {
  height: unset;
}

.p-dialog-draggable .p-dialog-header {
  cursor: grab;

  .p-unselectable-text & {
    cursor: grabbing;
  }
}

.p-confirmdialog.p-dialog .p-dialog-content {
  color: $default-text-color;
}

.dvl-dialog-form {
  height: 100%;

  p {
    margin-top: 0;
  }

  /* Fix double scrollbar in entry form */
  p-checkbox {
    .p-hidden-accessible {
      height: 0 !important;
    }
  }
}

.dvl-form-header {
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: -.04em;
}

.p-icon-gripsmall-diagonal-se {
  background: url(data:image/png;base64,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);
  background-size: 15px;
}

.table-container {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;

  hub-user-groups-selector {
    flex: 1;
    overflow: hidden;
  }
}
