/* fonts */
@font-face {
  font-family: Rubik;
  src: url("/assets/fonts/rubik.woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* variables */
:root {
  /* colors */
  --theme-color: #95324e;
  --bg-color: #f1f1eb;
  --text-color: #272727;
  --heading-color: #434343;
  --link-color: #0063c5;
  --link-active-color: #e90000;
  --link-underline-color: #0088f1;
  --link-active-underline-color: #f00;
  --error-color: #e90000;
  --success-color: #009511;
  --info-color: #0063c5;
  --blur-color: #777;
  --blur-light-color: #9f9f9f;
  --blur-dark-color: #636363;
  --input-color: #515151;
  --border-color: #c7c9cb;
  --input-border-color: #b7b7b7;
  --button-border-color: rgba(0, 0, 0, 0.14);
  /*--button-hover-bg-color: #175777;*/
  --button-hover-bg-color: var(--theme-color);
  --button-red-bg-color: #df4702;
  --button-red-bg-hover-color: #d53f00;
  --icon-fill-color: #575757;
  --shadow-color: #a1a1a1;
  --light-shadow-color: #cfcfcf;
  --lucent-bg-color: rgba(0, 0, 0, 0.44);
  --lucent-slight-bg-color: rgba(0, 0, 0, 0.28);
  --red-bg-color: #df4702;
  --light-red-bg-color: rgba(223, 0, 0, 0.07);
  --light-green-bg-color: rgba(0, 223, 0, 0.09);
  --light-blue-bg-color: rgba(0, 0, 223, 0.08);
  --medium-red-bg-color: rgba(223, 0, 0, 0.18);
  --medium-green-bg-color: rgba(0, 223, 0, 0.20);
  --medium-blue-bg-color: rgba(0, 0, 223, 0.18);

  /* dimensions */
  --min-body-width: 360px;
  --max-container-width: 1024px;
  --max-narrow-container-width: 944px;
  --max-small-panel-width: 512px;

  /* fonts */
  --main-font-family: Rubik, Arial, sans-serif;
  --mono-font-family: monospace;
  --std-font-size: 16px;
  --large-font-size: 18px;
  --small-font-size: 15px;
  --tiny-font-size: 14px;
  --std-line-height: 1.625;
  --large-line-height: 1.75;
  --small-line-height: 1.5;
  --tiny-line-height: 1.25;
  --h1-font-size: 24px;
  --h2-font-size: 21px;
  --h3-font-size: 20px;
  --h4-font-size: 18px;
  --form-field-font-size: 15px;
}

/* reset */
* {
  box-sizing: border-box;
  padding: 0; border: 0; margin: 0;
  background: transparent;
  text-size-adjust: none; max-height: 1000000px; /* prevent font-boosting */
}
*::before, *::after {
  box-sizing: border-box;
}

/* general */
html {
  scroll-behavior: smooth;
  background: var(--bg-color);
  overflow-wrap: break-word;
  height: 100%; /* for sticky footer */
}
body {
  width: 100%; min-width: var(--min-body-width);
  font-family: var(--main-font-family);
  font-size: var(--std-font-size); line-height: var(--std-line-height);
  font-weight: 400;
  color: var(--text-color); background: var(--bg-color);
  display: flex; flex-direction: column; height: 100%; /* for sticky footer */
}

/* sticky footer */
header, footer {flex-shrink: 0;}
main {flex: 1; flex-wrap: wrap;}

/* headings */
h1 {font-size: var(--h1-font-size);}
h2 {font-size: var(--h2-font-size);}
h3 {font-size: var(--h3-font-size);}
h4, h5, h6 {font-size: var(--h4-font-size);}
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-weight: bold;
}

/* links */
a, a:link, a:visited, a:hover, a:active {
  color: var(--link-color);
  text-decoration: underline;
  cursor: pointer;
}
a.no-u, a.no-u:link, a.no-u:visited, a.no-u:hover, a.no-u:active {
  text-decoration: none;
}

/* multimedia */
img, video, figure, iframe {
  max-width: 100%;
}

/* lists */
ul {
  list-style-type: none;
}

/* code */
pre, code, samp {
  overflow-wrap: normal;
}

/* tables */
table {
  border-collapse: collapse;
}
table, tr, td, th {
  border: 1px solid var(--border-color);
}
td, th {
  padding: 8px 10px;
  vertical-align: middle;;
}

/* form elements */
input, button, textarea, select {
  display: inline-block;
  max-width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  font-size: var(--form-field-font-size); line-height: 1;
  font-family: var(--main-font-family);
  color: var(--input-color); background: #fff;
}
input[type="submit"], input[type="reset"], button {
  padding: 8px 10px;
  border: 1px solid var(--button-border-color);
  background: var(--theme-color); color: #fff;
  cursor: pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover, button:hover,
input[type="submit"]:focus, input[type="reset"]:focus, button:focus {
  background: var(--button-hover-bg-color);
  outline: 0;
}
input[type="color"] {
  height: 34px; width: 40px;
  padding: 2px 4px;
  cursor: pointer;
}
input[type="file"] {
  padding: 5px;
  cursor: pointer;
}
textarea {
  min-height: 120px;
  line-height: var(--small-line-height);
}
select {
  line-height: 1.6;
  padding: 4px 28px 4px 9px;
  cursor: pointer;
  /* custom arrow */
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 24px;
}
label {
  cursor: pointer;
  display: inline-block;
  margin-bottom: 1px;
}
[readonly], [disabled] {
  background: var(--bg-color);
  cursor: not-allowed;
}

/* general classes */
.hidden {display: none;}
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.block {display: block;}
.inline-block {display: inline-block;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.text-justify {text-align: justify;}
.small-text {font-size: var(--small-font-size);}
.tiny-text {font-size: var(--tiny-font-size);}
.large-text {font-size: var(--large-font-size);}
.font-mono {font-family: var(--mono-font-family);}
.one-line {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.no-word-break {word-break: keep-all;}
.normal-color {color: var(--text-color);}
.error {color: var(--error-color);}
.success {color: var(--success-color);}
.info {color: var(--info-color);}
.blur {color: var(--blur-color);}
.auto {margin-left: auto; margin-right: auto;}
.container {max-width: var(--max-container-width);}
.narrow-container {max-width: var(--max-narrow-container-width);}
.container, .narrow-container, .small-panel, .narrow-content, .narrow-box {
  width: 100%;
  margin-left: auto; margin-right: auto;
}
.small-panel, .narrow-content, .narrow-box {max-width: var(--max-small-panel-width);}
.container.main, .narrow-container.main {
  padding: 12px;
}
.req {
  color: var(--error-color);
  display: none;
}
.sep-lg {height: 15px;}
.sep {height: 12px;}
.sep-md {height: 10px;}
.sep-sm {height: 8px;}
.sep-tiny {height: 4px;}
.info-box {
  background: var(--light-blue-bg-color);
  border: 1px solid var(--button-border-color);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: var(--small-font-size);
}
.info-box.small-pad {
  padding: 5px 9px;
}
.info-box.error {
  background: var(--light-red-bg-color);
}
.info-box.success {
  background: var(--light-green-bg-color);
}
.info-box.grey {
  background: var(--bg-color);
}
.info-box .counters {
  border-top: 1px solid var(--button-border-color);
  margin-top: 7px;
  padding-top: 6px;
}
.error .info-box {
  margin-bottom: 4px;
}
.details .detail {
  padding: 0px 0 8px;
}

/* status indicator */
.status {
  display: inline-block;
  border: 1px solid var(--button-border-color);
  border-radius: 20px;
  padding: 3px 7px;
  font-size: var(--small-font-size); line-height: 1;
  margin: 0 1px 0 3px;
}
.status.active {
  background: var(--medium-green-bg-color);
}
.status.inactive {
  background: var(--medium-red-bg-color);
}

/* buttons */
button.red-bg {
  background: var(--button-red-bg-color);
}
button.red-bg:hover, button.red-bg:focus {
  background: var(--button-red-bg-hover-color);
}
button.controls {
  margin-right: 6px; margin-bottom: 10px;
}
button.small-button {
  padding: 6px 8px;
}

/* icons */
.i {
  display: inline-block;
  width: 24px; height: 24px;
  fill: var(--icon-fill-color);
}
.i.move-up {
  position: relative; top: -2px;
}

/* loading animation */
[data-ajax] {
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
@keyframes rotating {
  100% {transform: rotate(360deg);}
}
@keyframes dots {
  0%  {content:    "";}
  25% {content:   ".";}
  50% {content:  "..";}
  75% {content: "...";}
}
.loading {
  display: flex;
  justify-content: center; align-items: center;
  position: absolute; top: -1px; right: 0; bottom: 0; left: 0;
  background: var(--theme-color);
  border-radius: 4px;
}
.red-bg .loading {
  background: var(--button-red-bg-color);
}
.loading .i {
  fill: #fff;
  animation: rotating 900ms linear infinite;
}
.loading-dots {
  position: relative;
  margin-left: 1px;
}
.loading-dots::after {
  position: absolute;
  content: "";
  animation: dots 1s linear infinite;
}

main {
  background-image: url('/assets/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}
main#admin-page {
  /*background-image: none;*/
  display: block;
}

/* alternate header & footer */
header.alt {
  background: var(--theme-color); color: #fff;
  text-align: center;
}
header.alt > .container {
  padding: 24px 16px 28px;
}
header.alt #site-name {
  display: inline-block;
}
header.alt #logo {
  width: 128px; height: 128px;
  display: block;
  margin: 0 auto 24px;
  border-radius: 10px;
}
header.alt a span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 26px; line-height: 1;
  font-weight: bold;
  display: block;
}
header.alt a p {
  margin-top: 22px;
  padding: 5px 16px 5px;
  font-size: 18px;
  display: inline-block;
  background: #fff;
  color: var(--text-color);
  border-radius: 40px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle; /* fix */
  max-width: 100%;
}
header.alt a, header.alt a:link, header.alt a:visited, header.alt a:hover, header.alt a:active,
footer.alt a, footer.alt a:link, footer.alt a:visited, footer.alt a:hover, footer.alt a:active {
  color: #fff;
  text-decoration: none;
}
footer.alt {
  background: var(--theme-color); color: #fff;
  text-align: center;
}
footer.alt > .container {
  padding: 15px 16px;
}

/* panels */
.panel {
  background: #fff;
  /*border: 1px solid var(--border-color);*/
  border: 1px solid #fff;
  border-radius: 8px;
  margin-left: auto; margin-right: auto;
}
.panel > h1, .panel > h2, .panel > h3 {
  font-size: var(--large-font-size); line-height: 1;
  text-align: center;
  padding: 14px 17px 13px;
  background: var(--theme-color); color: #fff;
  border-radius: 8px 8px 0 0;
  margin: -1px -1px 0;
  width: calc(100% + 2px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel > .content {
  padding: 16px;
}
.sub-panel > .content {
  padding-bottom: 7px;
}
.panel input[type="text"], .panel input[type="number"], .panel input[type="password"], .panel input[type="email"], .panel input[type="url"], .panel input[type="file"], .panel textarea, .panel select {
  width: 100%;
}
.custom-date-field select {
  width: auto;
  margin-right: 2px;
}
.panel .success-msg {
  padding: 35px 4px 36px;
  text-align: center;
  font-size: var(--large-font-size);
}
.sub-panel {
  margin-bottom: 12px;
}
.sub-panel:last-child {
  margin-bottom: 0;
}
.sub-panel .content:not(.inner) .error-main:not(:empty) {
  padding-bottom: 10px;
}
.panel > .narrow-content:not(.no-margin-bot) .field.action {
  margin-bottom: 9px;
}

/* action buttons */
.action-button-container {
  text-align: center;
  padding: 13px 0 13px;
}
.action-button {
  display: inline-block;
  position: relative;
  font-size: var(--std-font-size); line-height: 1;
  padding: 9px 15px 9px 43px;
  border: 2px solid var(--theme-color);
  border-radius: 24px;
  margin-bottom: 10px;
  height: 38px;
  background: var(--theme-color);
}
.action-button.small-button {
  font-size: var(--std-font-size);
  padding: 6px 12px 6px 37px;
  margin-bottom: 0;
  height: 32px;
}
.action-button, .action-button:link, .action-button:visited, .action-button:hover, .action-button:active {
  color: #fff;
  text-decoration: none;
}
.action-button > .i { /* direct child selector is important */
  position: absolute; left: 1px; top: 1px;
  width: 32px; height: 32px;
  padding: 4px 0;
  text-align: center;
  border-radius: 50%;
  background: #fff; fill: var(--theme-color);
}
.action-button.small-button > .i { /* direct child selector is important */
  width: 26px; height: 26x;
  padding: 4px 0;
}

/* fields */
.field {padding: 3px 4px 22px;}
.many-fields .field {padding-bottom: 16px;}
.field:empty {padding: 0;}
.field.action {
  text-align: center;
  padding: 3px 4px 9px;
}
.field.text {
  padding: 3px 5px 18px;
  text-align: center;
}
.field.action + .field.text {
  padding-top: 9px; padding-bottom: 8px;
}
.sub-panel .field, .sub-panel .field.action, .sub-panel .field.text {
  padding-left: 0; padding-right: 0;
}
.field.text-left {text-align: left;}
.field.checkbox {padding: 3px 4px 18px;}
.field.checkbox + .field.text {margin-top: -4px;}
.field.checkbox input[type="checkbox"], .field.checkbox input[type="radio"] {
  margin-right: 2px;
  position: relative; top: 1px;
}
.field.action .error {
  margin: -5px 0 14px;
}
.field.text + .field.action .error,
.field.checkbox + .field.action .error {
  margin: -7px 0 14px;
}
.field.action .error:empty, .field.text + .field.action .error:empty, .field.checkbox + .field.action .error:empty {
  margin: 0;
}
.field label + br + .error:not(:empty) {
  margin-top: -2px; margin-bottom: 4px;
}
.field .error .action-button, .field .error button {
  margin-bottom: 9px; margin-top: 6px;
}
.field .error.m-bot-neg:not(:empty) {margin-bottom: 5px;}
.field .error.m-top-neg:not(:empty) {margin-top: -5px;}
.field textarea {
  margin-bottom: -7px;
}

/* input field icons */
.input-container {position: relative;}
.field:not(.checkbox) .input-container {height: 36px;}
.field.checkbox .input-container {display: inline-block;}
.input-container > .i { /* input field left icon */
  position: absolute; top: 0; left: 0;
  width: 36px; height: 36px;
  padding: 8px 0;
  text-align: center;
  background: var(--theme-color); fill: #fff;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
}
.input-container input[type="text"], .input-container input[type="number"], .input-container input[type="password"], .input-container input[type="email"], .input-container input[type="url"] {
  height: 36px;
  padding-top: 0; padding-bottom: 0;
  padding-left: 44px; /* for the icon */
  line-height: 34px;
}
.input-container.no-icon input[type="text"], .input-container.no-icon input[type="number"], .input-container.no-icon input[type="password"], .input-container.no-icon input[type="email"], .input-container.no-icon input[type="url"] { /* ones without icons */
  padding-left: 10px;
}
.input-container input[type="checkbox"]:not(.no-style), .input-container input[type="radio"]:not(.no-style) {
  display: none; /* replaced using js */
}

/* custom checkbox & radio fields */
.checkbox-replacer, .radio-replacer {
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 2px;
  border: 2px solid var(--theme-color);
  border-radius: 4px;
  position: relative; top: 3px;
  cursor: pointer;
}
.radio-replacer {
  border-radius: 50%;
}
.checkbox-replacer .i { /* checked icon */
  width: 12px; height: 12px;
  fill: var(--theme-color);
  position: absolute; top: 1px; left: 1px;
}
.radio-replacer.checked::before { /* checked dot for radio fields */
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  position: absolute; top: 2px; left: 2px;
  background: var(--theme-color);
  border-radius: 50%;
  cursor: pointer;
}

/* password clear-view toggler */
.input-container input.password-field:not(.no-clear) { /* password field with clear-view toggler button */
  padding-right: 36px; /* for the button */
}
.clear-toggler { /* the clear-view toggler button */
  display: inline-block;
  position: absolute; top: 0; right: 0;
  width: 36px; height: 36px;
  padding: 8px 0;
  text-align: center;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
.clear-toggler .i { /* the clear-view toggler icon */
  width: 20px; height: 20px;
}
input.match {
  background: var(--light-green-bg-color);
}

#salutation-panel {
  position: relative;
}
#salutation-panel > .content {
  padding: 4px 16px 0 12px;
}
#greeting {
  display: inline-block;
  max-width: calc(100% - 108px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-top: 4px;
}
#logout-button {
  position: absolute; right: 7px; top: 6px;
}

/* user details box */
#user-details {
  margin: 0 -17px;
  padding-bottom: 16px;
}
#user-details .profile-pic-container {
  padding: 0 16px;
  margin-bottom: 8px;
}
#user-details .profile-pic-container img {
  width: 128px; height: 128px;
  border-radius: 50%;
  box-shadow: 0 0 32px var(--light-shadow-color);
}
#user-details .details-container {
  text-align: left;
  width: calc(100% - 32px);
  max-width: var(--max-small-panel-width);
  margin: 0 auto;
  background: #f7f8f9;
}
#user-details .details-container td {
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-all;
  padding: 6px 10px;
}
.details-container .label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* no items box */
.no-items {
  text-align: center;
  font-size: 17px;
  color: var(--error-color);
}
.content > .no-items {
  margin-bottom: 8px;
}

/* announcements */
.announcement {
  margin: 0 -17px 12px;
  border-bottom: 1px solid var(--border-color);
  padding: 0 16px 13px;
  font-size: var(--small-font-size);
}
.announcement:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 6px;
}
.announcement .date {
  padding: 3px 7px 2px;
  font-size: var(--tiny-font-size); line-height: 1;
  background: var(--light-blue-bg-color);
  border: 1px solid var(--button-border-color);
  border-radius: 24px;
  margin-right: 2px;
}
.announcement .heading {
  font-weight: bold;
  color: var(--heading-color);
}
.announcement .title {
  margin-bottom: 3px;
}

/* tithes */
.aggregates {
  display: inline-block;
  margin: 0 auto;
}
.tithe-packages {
  text-align: center;
  margin: 0 -17px;
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
}
.tithe-package {
  display: inline-block;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  border-radius: 12px;
  padding: 16px 0 15px;
  width: calc(33.33% - 8px);
  min-width: 96px;
  max-width: 120px;
  margin: 0 4px 8px;
  height: 94px; overflow: hidden;
  vertical-align: middle;
}
.tithe-package.custom {
  padding-top: 7px;
}
.tithe-package .price {
  margin-bottom: 8px;
  font-size: var(--small-font-size);
}
.tithe-package input {
  text-align: center;
  border-radius: 8px;
}
.tithe-package .price > div {
  padding: 0 7px 2px;
}
.tithe-package button {
  border-radius: 20px;
  padding: 6px 12px;
}
.recent-tithes {
  text-align: center;
  padding-bottom: 4px;
}
.recent-tithes h4 {
  margin-bottom: 6px;
  font-size: 17px;
}
li.tithe {
  font-size: var(--small-font-size);
  display: inline-block;
  margin: 2px 3px 8px;
  border: 1px solid var(--button-border-color);
  border-radius: 24px;
  background: var(--bg-color);
  padding: 0 12px 1px;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}

@media screen and (min-width: 600px) {
.panel > .narrow-content {
  padding: 24px 20px 20px;
}
.panel > .narrow-content .field.action {
  margin-bottom: 0;
}
}

@media screen and (min-width: 720px) {
.tithe-package {
  width: calc(16.66% - 8px);
}
}