:root {
  --primary: #045C9C;
  --secondary: #5E9FCA;
  --accent: #5B9BD5;
  --primary-fg: #FFFFFF;
  --body-fg: #000000;
  --body-quiet-color: #6E747A;
  --body-loud-color: #000000;
  --body-bg: #F5F8FC;
  --darkened-bg: #EAF2FA;
  --selected-bg: #DEEBF7;
  --selected-row: #DEEBF7;
  --hairline-color: #E5EAF0;
  --border-color: #D8E3ED;
  --link-fg: #045C9C;
  --link-hover-color: #5E9FCA;
  --button-bg: #045C9C;
  --button-hover-bg: #034C82;
  --default-button-bg: #045C9C;
  --default-button-hover-bg: #034C82;
  --delete-button-bg: #C00000;
  --delete-button-hover-bg: #9C0006;
  --object-tools-bg: #045C9C;
  --object-tools-hover-bg: #034C82;
}

body {
  color: var(--body-fg);
  background: var(--body-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

#header {
  min-height: 52px;
  background: var(--primary);
  box-shadow: 0 2px 10px rgba(4, 92, 156, 0.18);
}

#branding h1,
#branding h1 a:link,
#branding h1 a:visited {
  color: #fff;
  font-weight: 700;
}

#user-tools,
#user-tools a,
#user-tools button {
  color: rgba(255, 255, 255, 0.92);
}

div.breadcrumbs {
  background: #034C82;
  color: rgba(255, 255, 255, 0.86);
}

div.breadcrumbs a {
  color: #fff;
}

.module {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(4, 92, 156, 0.04);
}

.module h2,
.module caption,
.inline-group h2 {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

#content h1 {
  color: var(--primary);
  font-weight: 700;
}

table thead th {
  background: #EAF2FA;
  color: var(--primary);
}

thead th a:link,
thead th a:visited {
  color: var(--primary);
}

tr:nth-child(even),
.row-form-errors {
  background: #FAFCFE;
}

tr:hover {
  background: #DEEBF7;
}

.button,
input[type=submit],
input[type=button],
.submit-row input,
a.button {
  border-radius: 6px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.button:hover,
input[type=submit]:hover,
input[type=button]:hover,
.submit-row input:hover,
a.button:hover {
  background: #034C82;
}

.object-tools a:link,
.object-tools a:visited {
  border-radius: 6px;
  background: var(--primary);
}

.object-tools a:hover {
  background: #034C82;
}

.submit-row {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
}

input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
textarea,
select,
.vTextField {
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

input:focus,
textarea:focus,
select:focus,
.vTextField:focus {
  border-color: var(--secondary);
  outline: 2px solid #BDD7EE;
}

#changelist-filter {
  border-left: 1px solid var(--border-color);
  background: #fff;
}

#changelist-filter h2 {
  background: var(--primary);
  color: #fff;
}

#changelist-filter h3 {
  color: var(--primary);
}

#toolbar {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
}

#changelist {
  border-radius: 8px;
}

#changelist .actions {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #fff;
}

#changelist table {
  border-radius: 0 0 8px 8px;
}

#changelist-search input[type=text] {
  min-height: 34px;
}

.paginator {
  border-top: 1px solid var(--border-color);
  background: #fff;
  color: var(--body-quiet-color);
}

fieldset.module {
  margin-bottom: 16px;
}

.aligned label {
  color: var(--body-quiet-color);
  font-weight: 600;
}

.readonly {
  color: var(--primary);
  font-weight: 600;
}

.inline-group {
  border-radius: 8px;
}

.inline-related h3 {
  background: #EAF2FA;
  color: var(--primary);
}

.help,
p.help,
form p.help,
div.help,
form div.help,
div.help li {
  color: var(--body-quiet-color);
}

.selector-chosen h2 {
  background: var(--primary);
}

.calendarbox,
.clockbox {
  border-radius: 8px;
  border-color: var(--border-color);
  box-shadow: 0 8px 24px rgba(4, 92, 156, 0.12);
}

.calendar caption,
.calendarbox h2 {
  background: var(--primary);
}

.messagelist li {
  border-radius: 6px;
}

.messagelist li.success {
  background-color: #C6EFCE;
  color: #006100;
}

.errornote,
ul.errorlist {
  border-color: #FFC7CE;
  background: #FFC7CE;
  color: #9C0006;
}