@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --white: #fff;
  --black: #3c3c3b;
  --orange: #f05a28;
  --red: #e64845;
  --green: #2f797a;
  --green-light: #7cc9c2;
  --grey-medium: #c5c5c5;
  --grey-light: #e5e5e5;
  --grey-lighter: #f5f5f5;
  --font: "Montserrat", sans-serif;
  --transition: 0.4s ease;
  --input-bg: rgb(245, 245, 245, 0.65);
  --selected: rgb(47, 121, 122, 0.3);
}

body {
  background-color: var(--grey-lighter) !important;
  font-family: var(--font);
}

* {
  box-sizing: border-box;
}
*::after,
*::before {
  box-sizing: border-box;
}

/* Login page */
body.login {
  align-items: center;
  display: flex;
  height: 100%;
  padding: 20px;
}
body.login #container {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 auto;
}
body.login #header {
  background-color: var(--orange);
  padding: 12px 16px;
}
body.login #branding {
  float: none;
}
body.login .content {
  background-color: var(--white);
  border: 2px solid var(--grey-light);
  border-top: 0;
}
body.login #login-form input {
  background-color: var(--input-bg);
  border: 2px solid var(--grey-light);
  border-radius: 0;
  font-family: var(--font);
  font-size: 14px;
  height: 40px;
  padding: 0 20px !important;
}
body.login #login-form input:focus-visible {
  outline: 0;
}
body.login #login-form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  font-family: var(--font);
}
body.login #login-form .submit-row input {
  background: var(--green);
  border: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 0 26px !important;
  text-transform: uppercase;
  transition: opacity var(--transition);
}
body.login #login-form .submit-row input:hover {
  opacity: 0.7;
}
@media only screen and (max-width: 767px) {
  body.login {
    padding: 20px !important;
    width: 100%;
  }
  body.login #container {
    max-width: 392px;
    min-width: 10px;
    width: 100%;
  }
}

/* header */
body #header {
  background-color: var(--orange);
}
body #header #site-name {
  color: var(--white);
  font-size: 18px;
  line-height: 1.2;
  margin-right: 0;
}
body #user-tools {
  color: var(--grey-light);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
}
body #user-tools a {
  color: var(--white);
  border: 0;
  font-size: 11px;
  font-weight: 600;
  margin: 0 2px;
  text-transform: uppercase;
}
body #user-tools a:hover {
  color: var(--white);
  text-decoration: underline;
}
body #user-tools a:first-of-type {
  margin-left: 10px;
}
@media only screen and (max-width: 767px) {
  body #user-tools {
    text-align: center;
  }
}

/* sidebar */
.main #content-related {
  background: none;
}
.main #content-related .module {
  background-color: var(--white);
  border: 2px solid var(--grey-light);
}
.main #content-related .module h2 {
  color: var(--green);
  font-weight: 600;
}
.main #content-related .module .actionlist a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: underline;
}
.main #content-related .module .actionlist a:hover {
  text-decoration: none;
}

/* main content */
.main h1 {
  font-size: 18px;
  font-weight: 700;
  margin: 15px 0;
  text-transform: uppercase;
}
.main .module caption,
.inline-group h2 {
  background: var(--green);
  font-weight: 600;
}
.main .module table caption a,
.inline-group h2 a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.main .module table {
  border: 0;
}
.main .module tbody {
  border: 2px solid var(--grey-light);
  border-top: 0;
}
.main .module td,
.main .module th {
  border-color: var(--grey-light);
}
.main .module table a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: underline;
}
.main .module table a:hover {
  text-decoration: none;
}
.main .module table .viewlink,
.main .module table .inlineviewlink,
.main .module table .addlink,
.main .module table .changelink,
.main .module table .inlinechangelink {
  font-weight: 600;
}
.main .module table tr:nth-child(even),
.main .module table tr:nth-child(even) .errorlist,
.main .module table tr:nth-child(odd) + .row-form-errors,
.main .module table tr:nth-child(odd) + .row-form-errors .errorlist {
  background: var(--input-bg);
}

/* breadcrumbs */
body .breadcrumbs {
  background-color: var(--grey-light);
  border-bottom: 2px solid rgb(60, 60, 59, 0.06);
  color: var(--black);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
body .breadcrumbs a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: underline;
}
body .breadcrumbs a:hover {
  color: var(--orange);
  text-decoration: none;
}
body .breadcrumbs a:focus {
  color: var(--orange);
}

/* toggle sidebar */
.main .toggle-nav-sidebar {
  align-items: flex-start;
  background-color: var(--grey-medium);
  border: 0;
  font-size: 22px;
  font-weight: 900;
  flex: 0 0 24px;
  height: 100%;
  max-height: none;
  width: 24px;
}

/* sidebar */
.main #nav-sidebar {
  background-color: var(--grey-lighter);
  border: 0;
  max-height: none;
}
#nav-sidebar .module {
  margin-bottom: 20px;
}
#nav-sidebar .module table caption a {
  color: var(--white);
}
#nav-sidebar .module.current-app table caption a {
  color: var(--white) !important;
}
#nav-sidebar .module table tbody {
  border-left: 0;
}
#nav-sidebar .module table .current-model {
  background-color: var(--selected);
}
#nav-sidebar .module table .current-model a {
  color: var(--black);
}

/* changelist */
.change-list #changelist {
  background: transparent;
}
.change-list #changelist .toplinks {
  border-bottom: 2px solid var(--grey-light);
}
#changelist #changelist-filter {
  background: var(--white);
  border: 2px solid var(--grey-light);
}
#changelist #changelist-filter h2 {
  background: none;
  border-bottom: 1px solid var(--hairline-color);
  color: var(--green);
  font-size: 18px;
  font-weight: 600;
  padding: 16px;
  text-transform: none;
}
#changelist #changelist-filter h3 {
  font-weight: bold;
}
#changelist #changelist-filter ul a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
}
#changelist #changelist-filter ul a:hover {
  text-decoration: none;
}
#changelist #changelist-filter ul li.selected {
  border-color: var(--selected);
}
#changelist #changelist-filter #changelist-filter-clear {
  font-weight: 500;
}
#changelist #changelist-filter #changelist-filter-clear a {
  color: var(--orange);
}
@media only screen and (min-width: 768px) and (max-width: 1025px) {
  #changelist.module {
    flex-direction: column;
    justify-content: flex-start;
  }
  #changelist.module .changelist-form-container {
    flex: 0 0 auto;
    margin-bottom: 20px;
    width: 100%;
  }
  #changelist #changelist-filter {
    flex-basis: 100%;
    margin: 0;
    width: 100%;
  }
}

/* paginator */
.module #changelist-form .paginator {
  border-color: var(--grey-light);
}

/* changelist search */
.changelist-form-container #toolbar {
  padding: 14px;
}
.changelist-form-container #changelist-search #searchbar,
.changelist-form-container #changelist-search input[type="submit"] {
  border-radius: 0;
  font-family: var(--font);
  height: 40px;
}
.changelist-form-container #changelist-search #searchbar {
  background-color: var(--input-bg);
  border: 2px solid var(--grey-light);
  font-size: 14px;
  outline: none;
  padding: 0 20px !important;
}
.changelist-form-container #changelist-search #searchbar:focus,
.changelist-form-container #changelist-search #searchbar:focus-visible {
  border-color: var(--grey-light);
}
.changelist-form-container #changelist-search input[type="submit"] {
  background: var(--orange);
  border: 0;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  padding: 0 26px !important;
  text-transform: uppercase;
  transition: opacity var(--transition);
}
.changelist-form-container #changelist-search input[type="submit"]:hover {
  opacity: 0.7;
}
@media only screen and (min-width: 1026px) and (max-width: 1200px) {
  .changelist-form-container #changelist-search > div {
    display: flex;
    flex-wrap: wrap;
  }
  .changelist-form-container #changelist-search label {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 20px;
  }
  .changelist-form-container #changelist-search #searchbar {
    width: calc(100% - 20px);
  }
  .changelist-form-container #changelist-search input[type="submit"] {
    margin: 10px 0 0 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1025px) {
  .changelist-form-container #changelist-search > div {
    display: flex;
    flex-wrap: wrap;
  }
}

#content-main .object-tools a.addlink,
#content-main .object-tools a.historylink {
  background-color: var(--orange);
  border-radius: 0;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  transition: opacity var(--transition);
}
#content-main .object-tools a.addlink:hover,
#content-main .object-tools a.historylink:hover {
  opacity: 0.7;
}

#changelist .changelist-form-container .actions select {
  border: 2px solid var(--grey-light);
  border-radius: 0;
  color: var(--black);
  outline: none;
}
#changelist .changelist-form-container .actions select:focus,
#changelist .changelist-form-container .actions select:focus-visible {
  border-color: var(--grey-light);
}
#changelist .changelist-form-container .actions .button {
  background-color: var(--orange);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--white);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
#changelist .changelist-form-container #result_list thead {
  border: 2px solid var(--grey-light);
}
#changelist .changelist-form-container #result_list thead th {
  font-weight: 700;
}
#changelist .changelist-form-container #result_list thead th.sorted,
#changelist .changelist-form-container #result_list thead th .text a:hover {
  background-color: var(--darkened-bg);
}
#changelist .changelist-form-container #result_list tbody {
  border-bottom: 0;
}
#content-main form .form-row label {
  color: var(--black);
}
#content-main form .form-row select,
#content-main form .form-row input,
#content-main form .form-row textarea {
  border: 2px solid var(--grey-light);
  border-radius: 0;
  color: var(--black);
  outline: none;
}
#content-main form .form-row .url a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
}
#content-main form .form-row .url a:hover {
  text-decoration: none;
}
#content-main form .submit-row {
  border: none;
  border-radius: 0;
  background-color: var(--white);
}
#content-main form .submit-row input,
#content-main form .submit-row .deletelink,
#content-main form .submit-row .closelink {
  border-radius: 0;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  text-transform: uppercase;
  transition: opacity var(--transition);
}
#content-main form .submit-row .deletelink,
#content-main form .submit-row .closelink {
  align-items: center;
  background-color: var(--red);
  display: flex;
  float: left;
}
#content-main form .submit-row input:hover,
#content-main form .submit-row .deletelink:hover {
  opacity: 0.7;
}
#content-main form .submit-row input:hover {
  background-color: var(--orange);
}
#content-main form .submit-row .deletelink:hover {
  background-color: var(--red);
}
.content ul.messagelist li {
  background-color: rgb(124, 201, 194, 0.6);
  color: var(--black);
  font-weight: 600;
}
.content ul.messagelist li a {
  color: var(--black);
  font-weight: 700;
  text-decoration: underline;
}
.content ul.messagelist li a:hover {
  text-decoration: none;
}

#content-main #toolbar,
#content-main .form-row,
#content-main .submit-row {
  background-color: var(--white);
  border: 0;
}

#content-main .form-row .help li {
  color: var(--black);
  font-style: italic;
}

/* hidden sections*/
#content-main > div.app-authtoken.module,
#content-main > div.app-auth.module,
#nav-sidebar > div.app-authtoken.module,
#nav-sidebar > div.app-auth.module {
  display: none !important;
}

.select2-container--admin-autocomplete
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--black);
}

.paginator a:link,
.paginator a:visited {
  background: var(--black);
}

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
  background: var(--orange);
  border-radius: 0;
  color: var(--white);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  transition: opacity var(--transition);
}
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--orange);
  opacity: 0.7;
}
.button:active,
input[type="submit"]:active,
input[type="button"]:active,
.button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
  background-color: var(--orange) !important;
}

#user-tools a:focus,
#user-tools a:hover {
  border: 0;
  color: #ddd;
}

.selector-chosen h2 {
  background: #f05a27 !important;
}

.calendar td.selected a {
  background: #f05a27 !important;
}

.calendar td a:focus,
.timelist a:focus,
.calendar td a:hover,
.timelist a:hover {
  background: #f05a27 !important;
}

#changelist-filter li.selected a {
  color: #444;
}

fieldset.collapsed .collapse-toggle {
  color: #444;
}

table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after {
  color: #444;
}

a.active.selector-chooseall:focus,
a.active.selector-clearall:focus,
a.active.selector-chooseall:hover,
a.active.selector-clearall:hover {
  color: #999;
}

.calendar td a:active,
.timelist a:active {
  background: #444;
}

.change-list ul.toplinks .date-back a:focus,
.change-list ul.toplinks .date-back a:hover {
  color: #222;
}

.paginator a.showall:focus,
.paginator a.showall:hover {
  color: #222;
}

.paginator a:focus,
.paginator a:hover {
  background: #222;
}

#changelist-filter a:focus,
#changelist-filter a:hover,
#changelist-filter li.selected a:focus,
#changelist-filter li.selected a:hover {
  color: var(--black);
}

.calendar td a:active,
.timelist a:active {
  background: #292d32;
  color: white;
}

.calendar caption,
.calendarbox h2 {
  background: #999;
}

.button.default,
input[type="submit"].default,
.submit-row input.default {
  background: #f05a27;
}

.button.default:hover,
input[type="submit"].default:hover {
  background: #191d22;
}

.button.default,
input[type="submit"].default,
.submit-row input.default {
  background: var(--orange);
}

.object-tools a:focus,
.object-tools a:hover {
  background-color: #292d32;
}

input[type="file"]::-webkit-file-upload-button {
  border: 0;
  background: var(--grey-light);
  font-family: var(--font);
}

#changelist-filter {
  top: -250px;
  right: 15px;
}

#changelist-filter h2 {
  padding-top: 0px;
  padding-bottom: 0px;
}
#content-main h3 a {
  color: var(--orange);
  text-decoration: underline;
}
#content-main h3 a:hover {
  text-decoration: none;
}

.module.aligned h2 {
  background-color: var(--green);
  font-weight: 600;
}
.module.aligned .selector-available h2 {
  background-color: var(--grey-lighter);
  border-radius: 0;
}
.module.aligned.collapse > h2 {
  color: var(--white);
}
.module.aligned.collapse > h2 .collapse-toggle {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
}
.module.aligned.collapse > h2 .collapse-toggle:hover {
  text-decoration: none;
}
.module.collapse.collapsed .collapse-toggle {
  color: var(--orange);
  font-weight: 700;
  text-decoration: underline;
}
.module.collapse.collapsed .collapse-toggle:hover {
  text-decoration: none;
}
.module.collapse .add-row a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
}
.module.collapse .add-row a:hover {
  text-decoration: none;
}

.delete-confirmation form .cancel-link {
  height: auto !important;
}

/* dark theme reset */
@media (prefers-color-scheme: dark) {
	:root {
		--primary: #79aec8;
		--primary-fg: #fff;
		--body-fg: #333;
		--body-bg: #fff;
		--body-quiet-color: #666;
		--body-loud-color: #000;
		--breadcrumbs-link-fg: var(--body-bg);
		--breadcrumbs-bg: var(--primary);
		--link-fg: #447e9b;
		--link-hover-color: #036;
		--link-selected-fg: #5b80b2;
		--hairline-color: #e8e8e8;
		--border-color: #ccc;
		--error-fg: #ba2121;
		--message-success-bg: #dfd;
		--message-warning-bg: #ffc;
		--message-error-bg: #ffefef;
		--darkened-bg: #f8f8f8;
		--selected-bg: #e4e4e4;
		--selected-row: #ffc;
		--close-button-bg: #888;
		--close-button-hover-bg: #747474;
	}
}