:root {
  /* dialog width */
  --default-dialog-width: 500px;
  --large-dialog-width: 800px;
  --extra-large-dialog-width: 1000px;
  --fullscreen-dialog-width: 100vw;
  /* dialog height */
  --fullscreen-dialog-height: 100%;
  /* dialog header height */
  --desktop-header-height: 58px;
  --tablet-header-height: 50px;
  --mobile-header-height: 45px;
  /* dialog fullscreen body height */
  --desktop-fullscreen-body-height: calc(100% - (var(--desktop-header-height) + var(--desktop-footer-height)));
  --tablet-fullscreen-body-height: calc(100% - (var(--tablet-header-height) + var(--tablet-footer-height)));
  --mobile-fullscreen--body-height: calc(100% - (var(--mobile-header-height) + var(--mobile-footer-height)));
  /* dialog footer height */
  --desktop-footer-height: 65px;
  --mobile-footer-height: 60px;
  /* dialog padding */
  --desktop-dialog-padding: 1rem;
  --tablet-dialog-padding: 0.75rem;
  --mobile-dialog-padding: 0.6rem;
  /* dialog border */
  --dialog-border: 1px solid #dee2e6;
}



/* ALLGEMEIN */
.custom-dialog-fade {
  animation: fadeIn 0.5s;
}


.custom-dialog-fullscreen {
  width: var(--fullscreen-dialog-width) !important;
  height: var(--fullscreen-dialog-height);
}


/* User Add */
.user-add-dialog {
  width: var(--default-dialog-width) !important;
}


/* User Edit */
.user-edit-dialog {
  width: var(--extra-large-dialog-width) !important;
  height: 100vh;
}

.user-edit-dialog-wrapper {
  height: unset !important;
  margin: 1.5rem 0;
}

.user-edit-body {
  height: var(--desktop-fullscreen-body-height);
}


/* User Delete */
.user-delete-dialog {
  width: var(--default-dialog-width) !important;
}

.user-delete-body {
  height: 150px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}


/* User Delete */
.contact-support-dialog {
  width: var(--default-dialog-width) !important;
}

.contact-support-body {
  height: 150px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}



/* HEADER */
.custom-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--desktop-header-height);
  padding: var(--desktop-dialog-padding);
  background-color: var(--rz-dialog-title-background-color);
  border-bottom: var(--dialog-border);
}

  .custom-dialog-header h4 {
    margin: 0;
  }

  .custom-dialog-header i {
    color: var(--secondary-color);
    cursor: pointer;
    line-height: 0;
  }

    .custom-dialog-header i:hover {
      color: var(--primary-color);
    }



/* BODY */
.custom-dialog-body {
  padding: var(--desktop-dialog-padding);
  overflow: auto;
  overflow-x: hidden;
}

  .custom-dialog-body::-webkit-scrollbar {
    background: white;
  }

  .custom-dialog-body::-webkit-scrollbar-thumb {
    background: var(--secondary-color) !important;
    border-radius: 1000px !important;
    border: 7px solid white !important;
  }

.custom-dialog-fullscreen-body {
  height: var(--desktop-fullscreen-body-height);
  overflow-x: hidden;
  overflow-y: auto;
}

  .custom-dialog-fullscreen-body::-webkit-scrollbar {
    background: white;
  }

  .custom-dialog-fullscreen-body::-webkit-scrollbar-thumb {
    background: var(--secondary-color) !important;
    border-radius: 1000px !important;
    border: 7px solid white !important;
  }



/* FOOTER */
.custom-dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: var(--desktop-footer-height);
  padding: 0.75rem;
  column-gap: 0.25rem;
  border-top: var(--dialog-border);
}