/*
(C) Advantys 2024

All rights are reserved. Reproduction or transmission in whole or in part, in
any form or by any means, electronic, mechanical or otherwise, is prohibited
without the prior written permission of the copyright owner.
*/

.ui-dialog[aria-describedby="userSettingsPopup"] .ui-dialog-titlebar {
  border-bottom: 1px solid var(--border) !important;
}

#userSettingsPopup {
  background-color: transparent;
  padding: 0px;
}

#userSettingsPopup .userSettingsPopup-content {
  padding: 0px 12px 0px 24px;
  color: var(--foreground);
  height: 458px;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

#userSettingsPopup .userSettingsPopup-content:hover {
  overflow-y: auto;
}

#userSettingsPopup .FormSection {
  margin-top: 24px;
  grid-template-columns: 32% 68%;
}

#userSettingsPopup .FormSection:last-of-type {
  margin-bottom: 24px;
}

#userSettingsPopup .FormSection .Titles {
  padding: 4px 12px 4px 0px;
}

#userSettingsPopup .FormSection .Titles .MainTitle {
  font-size: 16px;
  line-height: 19px;
}

#userSettingsPopup .FormSection .Cards .FormCard {
  background-color: unset;
  border-radius: unset;
  border: none;
  box-shadow: none;
}

#userSettingsPopup .FormSection .Cards .FormCard .Content {
  padding: 4px 12px 4px 12px;
  margin-bottom: 0px;
}

#userSettingsPopup .FormSection .Cards .FormCard .Field {
  padding-bottom: 16px;
}

#userSettingsPopup .FormSection .Cards .FormCard .Field:last-of-type {
  padding-bottom: 0px;
}

#userSettingsPopup .userSettingsPopup-content input[type="text"],
#userSettingsPopup .userSettingsPopup-content input[type="password"] {
  font-size: 14px;
  font-weight: 400;
  color: var(--foreground);
  background-color: var(--subdued);
  width: 100%;
  height: 36px;
  border-radius: var(--radius-input);
  border: 1px solid var(--input);
  padding: 8px 12px;
  box-sizing: border-box;
}

#userSettingsPopup .userSettingsPopup-content .ui-selectmenu-button.ui-button {
  width: 95%;
  padding: 8px 12px;
  outline: none;
}

#userSettingsPopup .userSettingsPopup-footer {
  height: 36px;
  padding: 16px 24px 24px 24px;
  border-top: solid 1px var(--border);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

#userSettingsPopup .userSettingsPopup-footer #userSettingsPopup-save,
#userSettingsPopup .userSettingsPopup-footer #userSettingsPopup-cancel {
  float: right;
  min-width: 80px;
}

#userSettingsPopup .userSettingsPopup-footer #userSettingsPopup-save {
  margin-left: 12px;
}

#userSettingsPopup .userSettingsPopup-footer #userSettingsPopup-loadIndicator {
  float: right;
  width: 36px;
  height: 36px;
  -webkit-mask-image: var(--icon-loader);
  mask-image: var(--icon-loader);
  background-color: var(--foreground);
  background-image: none;
  display: none;
}

/* userSettingsPopup-theme-menu */

.ui-selectmenu-menu #userSettingsPopup-theme-menu .ui-menu-item-wrapper div {
  font-size: 13px;
  padding: 4px 24px;
  border-radius: var(--radius-tag);
  display: inline-flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  color: #ffffff;
}

.ui-selectmenu-menu
  #userSettingsPopup-theme-menu
  .ui-menu-item-wrapper
  div
  svg {
  margin-right: 8px;
}

/* 1024px */
@media (max-width: 956px) {
  #userSettingsPopup .FormSection {
    grid-template-columns: 100%;
  }
}

/* 878px */
@media (max-width: 878px) {
  .ui-dialog[aria-describedby="userSettingsPopup"] {
    width: 570px !important;
  }

  #userSettingsPopup .userSettingsPopup-content {
    height: 320px;
  }
}

/* 640px */
@media (max-width: 640px) {
  .ui-dialog[aria-describedby="userSettingsPopup"] {
    width: 100% !important;
  }

  #userSettingsPopup {
    height: 100% !important;
  }

  #userSettingsPopup .userSettingsPopup-content {
    padding: 0px 6px 0px 18px;
    height: calc(100vh - 122px);
    overflow-y: auto;
  }

  body.phone.android #userSettingsPopup .userSettingsPopup-content {
    height: calc(100vh - 178px);
  }

  body.phone.ios #userSettingsPopup .userSettingsPopup-content {
    height: calc(100vh - 204px);
  }

  #userSettingsPopup .FormSection {
    margin-top: 12px;
  }

  #userSettingsPopup .FormSection .Cards .FormCard {
    margin-left: 0px;
    margin-right: 0px;
  }

  #userSettingsPopup .FormSection .Cards .FormCard .Content {
    padding: 0px !important;
  }

  #userSettingsPopup .FormSection .Cards .FormCard .Field {
    padding-bottom: 12px;
    margin-left: 1px;
  }

  #userSettingsPopup .userSettingsPopup-content input[type="text"],
  #userSettingsPopup .userSettingsPopup-content input[type="password"] {
    width: calc(100vw - 42px);
  }

  #userSettingsPopup
    .userSettingsPopup-content
    .ui-selectmenu-button.ui-button {
    width: calc(100vw - 68px);
  }

  #userSettingsPopup .userSettingsPopup-footer {
    padding: 16px 24px 24px 24px;
  }
}