.user-settings-page {
  min-width: 1050px;
  height: 100%;
  display: grid;
  grid-template-rows: 60px minmax(0,1fr);
  background: #eff3f6;
  color: #2d2c33;
}

.user-settings-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid #e6eaee;
  background: #fff;
}

.user-settings-page-header h1 {
  flex: 1;
  margin: 0;
  font-size: 24px;
  font-weight: 400;
}

.user-settings-save-status {
  min-width: 90px;
  color: #7d828b;
  font-size: 13px;
  text-align: right;
}
.user-settings-save-status.is-saved { display: none; }
.user-settings-save-status.is-error { color: #d94f4f; }
.user-settings-save-status.is-dirty,
.user-settings-save-status.is-saving { color: #888d96; }

.user-settings-page-content { min-height: 0; padding: 20px; overflow-y: auto; }
.user-settings-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.user-settings-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.user-settings-panel {
  padding: 20px;
  border: 1px solid #e6eaee;
  border-radius: 4px;
  background: #fff;
}

.user-settings-panel h2 {
  margin: 0;
  padding-bottom: 4px;
  font-size: 18px;
  font-weight: 400;
}

.user-settings-panel p {
  margin: 0;
  padding-bottom: 10px;
  color: rgba(45,44,51,.7);
  font-size: 12px;
  line-height: normal;
}

.user-settings-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.user-settings-control { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: rgba(45,44,51,.7); font-size: 12px; }
.user-settings-control--half { width: calc(50% - 9px); }
.user-settings-control--compact { width: 100%; }

.user-settings-control input,
.user-settings-control select {
  width: 259px;
  max-width: 100%;
  height: 36px;
  padding: 5px 10px;
  border: 1px solid rgba(153,157,168,.4);
  border-radius: 4px;
  background: #fff;
  color: #2d2c33;
  font: inherit;
  font-size: 16px;
  outline: none;
}
.user-settings-control select { font-size: 14px; appearance: none; padding-right: 30px; }
.user-settings-select { position: relative; display: block; width: 259px; max-width: 100%; height: 36px; }
.user-settings-select::after { position: absolute; top: 11px; right: 9px; width: 14px; height: 14px; content: ""; pointer-events: none; background: #999da8; mask: url('/nimbus-icons/user-chevron.svg') center / contain no-repeat; }

.user-settings-control input:focus,
.user-settings-control select:focus { border-color: #4285f4; }
.user-settings-control input:not([data-user-settings-field="rideCompletionPercent"]) { appearance: textfield; }
.user-settings-control input:not([data-user-settings-field="rideCompletionPercent"])::-webkit-inner-spin-button,
.user-settings-control input:not([data-user-settings-field="rideCompletionPercent"])::-webkit-outer-spin-button { appearance: none; margin: 0; }
.user-settings-control select:disabled { background: #f8f9fa; color: #60646c; opacity: 1; }

.user-settings-inline-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}
.user-settings-inline-checks .user-settings-checkbox-row { justify-self: start; max-width: 100%; }

.user-settings-checkbox-row {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  color: #2d2c33;
  font-size: 16px;
  cursor: pointer;
}

.user-settings-checkbox-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.user-settings-checkmark {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  padding: 3px;
  font-size: 8px;
  border: 1px solid rgba(153,157,168,.4);
  border-radius: 4px;
  background: #fff;
}
.user-settings-checkbox-label { display: inline-block; vertical-align: middle; max-width: calc(100% - 16px); overflow: hidden; padding: 0 14px 0 10px; text-overflow: ellipsis; font-size: 14px; }

.user-settings-checkbox-row input:checked + .user-settings-checkmark {
  background: #32a754;
}

.user-settings-checkbox-row input:checked + .user-settings-checkmark::after {
  position: absolute;
  left: 5px;
  top: 3px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: "";
}

.user-settings-divider { height: 1px; margin: 15px 0; background: #e6eaee; }
.user-settings-notifications .user-settings-checkbox-row { display: block; margin-bottom: 15px; }

body.nimbus-tooltips-disabled [title]::after { display: none !important; }

@media (max-width: 1250px) {
  .user-settings-page-content { padding: 16px; }
  .user-settings-columns { gap: 16px; }
  .user-settings-column { gap: 16px; }
  .user-settings-two-cols,
  .user-settings-inline-checks { gap: 34px; }
  .user-settings-control--half { width: calc(50% - 17px); }
}

body.nimbus-tooltips-disabled .runs-nimbus-tooltip,
body.nimbus-tooltips-disabled .tracking-unit-online-tooltip,
body.nimbus-tooltips-disabled .tracking-stops-online-tooltip,
body.nimbus-tooltips-disabled .tracking-units-info-tooltip {
  display: none !important;
}

body:not(.nimbus-developer-mode) .tracking-unit-online-tooltip .devmode {
  display: none !important;
}