:root {
  --main-bg-color: #f7fbff;
  --main-bg-image: linear-gradient(135deg, #f7fbff 0%, #e9f8f3 38%, #eef3ff 68%, #fff7ea 100%);
  --loading-color: #1f3d3a;
  --loading-text-shadow: 0 1px 0 rgba(255,255,255,.8);
  --login-color: #17312f;
  --login-bg-color: rgba(255,255,255,.82);
  --login-box-shadow: 0 24px 70px rgba(34,78,72,.18), 0 8px 24px rgba(27,47,66,.08);
  --login-border: 1px solid rgba(255,255,255,.78);
  --login-border-radius: 16px;
  --folders-selected-color: #fff;
  --folders-selected-bg-color: rgba(137,207,240,.34);
  --folders-focused-color: #fff;
  --folders-focused-bg-color: rgba(137,207,240,.46);
  --folders-hover-color: #fff;
  --folders-hover-bg-color: rgba(137,207,240,.2);
  --folders-drop-color: #fff;
  --folders-drop-bg-color: rgba(137,207,240,.32);
  --settings-menu-selected-bg-color: rgba(137,207,240,.3);
  --settings-menu-hover-bg-color: rgba(137,207,240,.18);
  --nc-color-primary-light: rgba(137,207,240,.38);
  --nc-color-background-hover: rgba(255,255,255,.12);
}

body#rl-app {
  background:
    radial-gradient(circle at 18% 18%, rgba(137,207,240,.26), transparent 28%),
    radial-gradient(circle at 82% 16%, rgba(86,124,214,.18), transparent 28%),
    radial-gradient(circle at 76% 84%, rgba(245,183,97,.2), transparent 30%),
    linear-gradient(135deg, #f8fcff 0%, #e9f8f3 42%, #eef4ff 72%, #fff8ea 100%) !important;
  background-attachment: fixed;
  color: #17312f;
}

body#rl-app:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.64), rgba(255,255,255,.12) 48%, rgba(255,255,255,.52)),
    repeating-linear-gradient(135deg, rgba(74,135,180,.045) 0 1px, transparent 1px 18px);
}

#rl-loading,
#rl-loading-error,
#rl-content,
#rl-popups {
  position: relative;
  z-index: 1;
}

#rl-app .LoginView .descWrapper,
#rl-app .descWrapper {
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: #17312f !important;
  margin: 0 0 14px !important;
}

#rl-app .LoginView .descWrapper::before,
#rl-app .descWrapper::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  background: url("/gtcare-login-logo.png") center / contain no-repeat;
}

#rl-app #V-Login {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100dvh !important;
  padding: 32px 16px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  z-index: 2 !important;
}

#rl-app .LoginView {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(94vw, 560px) !important;
  margin: 0 auto !important;
  transform: translateY(-24px) !important;
}

#rl-app .LoginView form {
  width: 100% !important;
  max-width: 560px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 34px 38px !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(34,78,72,.18), 0 8px 24px rgba(27,47,66,.08) !important;
  color: #17312f !important;
}

@media (max-width: 560px) {
  #rl-app .LoginView {
    transform: translateY(-14px) !important;
  }

  #rl-app .LoginView form {
    padding: 26px 22px !important;
  }
}

#rl-app #rl-left,
#rl-app #V-MailFolderList,
#rl-app .b-folders {
  background: linear-gradient(180deg, rgba(36,67,94,.88), rgba(51,93,128,.78)) !important;
  color: #f6fffd !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.18), 12px 0 34px rgba(24,48,78,.12) !important;
}

#rl-app .b-folders .b-content,
#rl-app .b-folders .b-footer,
#rl-app .b-folders .b-toolbar {
  background: transparent !important;
  color: #f6fffd !important;
}

#rl-app .b-folders li a.selectable,
#rl-app .b-folders .e-checkbox,
#rl-app .b-folders .search-input-wrp input {
  color: #f6fffd !important;
}

#rl-app .b-folders li a.selectable {
  background: rgba(255,255,255,.04) !important;
}

#rl-app .b-folders li a.selectable.selected {
  background: linear-gradient(135deg, rgba(137,207,240,.52), rgba(137,207,240,.38)) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 18px rgba(137,207,240,.16) !important;
}

#rl-app .b-folders li a.selectable:not(.selected):hover,
#rl-app .b-folders li a.selectable:not(.selected):focus {
  background: rgba(137,207,240,.18) !important;
  color: #fff !important;
}

#rl-app .b-folders hr {
  border-color: rgba(255,255,255,.18) !important;
}

#rl-app .b-folders .search-input-wrp input {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#rl-app .b-folders .search-input-wrp input::placeholder {
  color: rgba(246,255,253,.68) !important;
}

#rl-app .buttonLogin {
  background: linear-gradient(135deg, #89cff0, #5aa8d8) !important;
  border: 0 !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: 0 12px 26px rgba(137,207,240,.2);
}

#rl-app .gtcare-create-email .btn {
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(137,207,240,.34) !important;
  color: #2f6f9f !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(137,207,240,.12);
}

#rl-app .gtcare-forgot-password {
  margin-top: 8px !important;
  text-align: right !important;
}

#rl-app .gtcare-forgot-password a {
  color: #2f6f9f !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#rl-app .gtcare-forgot-password a:hover,
#rl-app .gtcare-forgot-password a:focus {
  text-decoration: underline !important;
}