/*!
Theme Name: SVPG 2024 Expenses
Theme URI: https://svpgmbc.org/
Author: Joe Tan
template: svpg2024
*/
/*
Fonts
*/
/*
Colors
*/
/*
Responsive breakpoints
*/
/*
Animations
*/
/*
Misc
*/
:root {
  --font-base-size: 18px;
  --gutter: calc((100vw - 1760px) / 2);
  --gutter-left: calc((100vw - 1760px) / 2);
  --gutter-right: calc((100vw - 1760px) / 2);
  --scrollbarWidth: 0px;
  --viewportWidth: calc(100vw - var(--scrollbarWidth, 0));
  --block-margin: 4rem;
}
@media screen and (max-width: 1942.0689655172px) {
  :root {
    --gutter-left: 4.6875vw;
    --gutter-right: 4.6875vw;
    --gutter: 4.6875vw;
  }
}
@media screen and (max-width: 1450px) {
  :root {
    --block-margin: 2.8rem;
  }
}
@media screen and (max-width: 1200px) {
  :root {
    --block-margin: 2.4rem;
  }
}
@media screen and (max-width: 1024px) {
  :root {
    --block-margin: 2.6rem;
  }
}

@keyframes loading {
  100% {
    background-position: 0px -570px;
  }
}
@keyframes loop {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(-50%, 0%);
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/*
Author: Joe Tan (joetan54@gmail.com)

Copyright (c) 2018 Joe Tan
THIS CODE MAY NOT BE REDISTRIBUTED WITHOUT EXPLICIT PERMISSION
*/
/*
@mixin icon-char($what) {
    @if map-has-key($icons, $what) {

        content: make-icon(map-get($icons, $what));
    }
    @else {
        content: '???';
    }

}
@mixin icon-font($what) {
    font-family: $font-icon;
    font-weight: normal;
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
    text-transform:none !important;
    @if map-has-key($icons, $what) {
        @include icon-char($what);
    }
}
*/
.claims-introduction {
  margin: calc(var(--block-margin, 4rem) * 1) 0;
  text-align: center;
}
.claims-introduction hr {
  margin: calc(var(--block-margin, 4rem) * 1) 0;
}
.claims-introduction form {
  margin: 0 0 calc(var(--block-margin, 4rem) * 0.5);
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "id code" "submit submit";
}
.claims-introduction form input[type=text] {
  padding: 0.5em;
  text-align: center;
}
.claims-introduction form label.id {
  grid-area: id;
  text-align: right;
}
.claims-introduction form label.code {
  grid-area: code;
  text-align: left;
}
.claims-introduction form .submit {
  grid-area: submit;
}
.claims-introduction .message {
  margin-top: calc(var(--block-margin, 4rem) * 1);
}
.claims-introduction .message .icon {
  color: #D62828;
}

iframe.google-drive-embed {
  display: block;
  margin: 0 0 calc(var(--block-margin, 4rem) * 1);
  width: 100%;
  height: 75vh;
  border: 0;
}

.main-content.voucher > .layout {
  grid-template-columns: [start] var(--gutter-left) [main-start] 2fr 1fr [main-end] var(--gutter-right) [end];
  grid-template-rows: auto [main-start] auto auto auto auto auto auto 1fr [main-end];
  grid-template-areas: "title title title title" ". embed status ." ". embed user ." ". embed payment ." ". embed action ." ". embed request ." ". embed comment ." ". embed activity .";
}
.main-content.voucher .block-status {
  grid-area: status;
  margin: 0 0 calc(var(--block-margin, 4rem) * 0.5);
}
.main-content.voucher .block-status .status {
  padding: 0.5em;
  text-align: center;
  border: 1px dashed currentColor;
  border-radius: 4px;
}
.main-content.voucher .block-status .status.paid, .main-content.voucher .block-status .status.approve {
  background: green;
  color: white;
  font-weight: bold;
  border: 1px solid green;
}
.main-content.voucher .block-status .status.reject {
  background: #D62828;
  color: white;
  font-weight: bold;
  border: 1px solid #D62828;
}
.main-content.voucher .block-status .payment-record p {
  font-size: 0.8em;
}
.main-content.voucher .block-status .reason {
  border: 2px dashed #D62828;
  padding: 0.5em;
  border-radius: 1em;
}
.main-content.voucher .block-payment {
  grid-area: payment;
}
.main-content.voucher .block-payment .label.details,
.main-content.voucher .block-payment .comment-form-author,
.main-content.voucher .block-payment .comment-form-email {
  display: none;
}
.main-content.voucher .block-user {
  margin: 0 0 0.5em;
  grid-area: user;
}
.main-content.voucher form {
  margin: 0 0 1em;
  padding: 1em;
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(0, 0, 0, 0.75);
  border-radius: 4px;
}
.main-content.voucher form .submit {
  grid-area: submit;
  margin: 0.5em 0 0;
}
.main-content.voucher form .submit button {
  padding: 0.5em 1em;
}
.main-content.voucher .block-action {
  grid-area: action;
}
.main-content.voucher .block-action .label.details,
.main-content.voucher .block-action .comment-form-author,
.main-content.voucher .block-action .comment-form-email {
  display: none;
}
.main-content.voucher .block-action .logged-in {
  grid-area: details;
}
.main-content.voucher .block-action .action-content {
  display: grid;
  gap: 0.5em;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "approve reject" "textarea textarea";
}
.main-content.voucher .block-action .action-content textarea {
  display: none;
  grid-area: textarea;
  height: 5rem;
  padding: 1em;
  border-radius: 4px;
}
.main-content.voucher .block-action .action-content label.on + textarea {
  display: block;
}
.main-content.voucher .block-action .action-content .field {
  --highlight-color: rgba(0, 0, 0, 0.8);
  display: inline-block;
  padding: 0.25em 0.75em 0.25em 0.5em;
  border-radius: 4px;
  border: 2px solid currentColor;
  cursor: pointer;
  font-weight: 600;
  background: white;
  color: var(--highlight-color, currentColor);
}
.main-content.voucher .block-action .action-content .field.on {
  background-color: var(--highlight-color, currentColor);
  border-color: var(--highlight-color, currentColor);
  color: white;
}
.main-content.voucher .block-action .action-content label.field {
  font-size: 1.25em;
}
.main-content.voucher .block-action .action-content label.field.approve {
  grid-area: approve;
  --highlight-color: green;
}
.main-content.voucher .block-action .action-content label.field.reject {
  grid-area: reject;
  --highlight-color: #D62828;
}
.main-content.voucher .block-action .action-content label.field.noop {
  grid-area: defer;
}
.main-content.voucher .block-request {
  grid-area: request;
}
.main-content.voucher .block-request select {
  width: 100%;
  font-size: 1rem;
  cursor: pointer;
}
.main-content.voucher .block-embed {
  grid-area: embed;
  padding-right: calc(var(--block-margin, 4rem) * 1);
}
.main-content.voucher .block-comment {
  grid-area: comment;
}
.main-content.voucher .block-activity {
  grid-area: activity;
}
.main-content.voucher .block-access-control {
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding: calc(var(--block-margin, 4rem) * 1) 0;
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-areas: ". title title ." ". label button ." "message message message message" "login login login login";
  justify-content: center;
  align-items: center;
  gap: 1em;
  border: 0;
  background: none;
}
.main-content.voucher .block-access-control h2 {
  grid-area: title;
  text-align: center;
}
.main-content.voucher .block-access-control label {
  grid-area: label;
  display: block;
}
.main-content.voucher .block-access-control input[type=text] {
  padding: 0.5em;
  width: 6em;
  text-align: center;
  text-transform: uppercase;
}
.main-content.voucher .block-access-control ::-webkit-input-placeholder {
  text-transform: none;
}
.main-content.voucher .block-access-control :-moz-placeholder {
  text-transform: none;
}
.main-content.voucher .block-access-control ::-moz-placeholder {
  text-transform: none;
}
.main-content.voucher .block-access-control :-ms-input-placeholder {
  text-transform: none;
}
.main-content.voucher .block-access-control button {
  grid-area: button;
}
.main-content.voucher .block-access-control .message {
  grid-area: message;
  text-align: center;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  border: 0.5em solid rgba(214, 40, 40, 0.8);
  padding: 1em;
}
.main-content.voucher .block-access-control .message .help {
  font-size: 0.8em;
}
.main-content.voucher .block-access-control .login {
  grid-area: login;
  text-align: center;
  max-width: 500px;
  margin: calc(var(--block-margin, 4rem) * 1) auto 0;
}
.main-content.voucher .toggle-section {
  margin: calc(var(--block-margin, 4rem) * 0.5) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  border: 2px solid currentColor;
  padding: 0.5em;
  border-radius: 4px;
  cursor: pointer;
}
.main-content.voucher .toggle-section:before {
  content: " ";
  display: inline-block;
}
.main-content.voucher .toggle-section:after {
  font-family: "Font Awesome 6 Free";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  text-transform: none;
  content: "\f105";
  transition: 0.2s ease;
}
.main-content.voucher .toggle-section:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.main-content.voucher .toggle-section small {
  display: none;
}
.main-content.voucher .toggle-section.on {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px 4px 0 0;
  border-bottom: 0;
}
.main-content.voucher .toggle-section.on:after {
  rotate: 90deg;
}
.main-content.voucher .toggle-section + form {
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
.main-content.voucher .toggle-section:not(.on) + form {
  display: none;
}

.block-activity {
  margin-top: calc(var(--block-margin, 4rem) * 1);
}
.block-activity ul, .block-activity li {
  margin: 0;
  padding: 0;
  list-style: square;
}
.block-activity > ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--block-margin, 4rem) * 0.5);
}
.block-activity li {
  position: relative;
  list-style: none;
  padding: 0 0 0.5em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.block-activity li::marker {
  display: none;
}
.block-activity li:before {
  position: absolute;
  top: 0;
  right: 100%;
  width: 1em;
  margin: 0 0.5em 0 0;
  font-size: 20px;
  font-family: "Font Awesome 6 Free";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  text-transform: none;
  content: "\f111";
  color: var(--highlight-color, #ccc);
}
.block-activity li strong {
  color: var(--highlight-color, currentColor);
}
.block-activity li.comment {
  --highlight-color: currentColor;
}
.block-activity li.comment:before {
  content: "\f075";
}
.block-activity li.system {
  --highlight-color: #039;
}
.block-activity li.system:before {
  content: "\f570";
}
.block-activity li.paid, .block-activity li.approve {
  --highlight-color: green;
}
.block-activity li.paid:before, .block-activity li.approve:before {
  content: "\f00c";
}
.block-activity li.paid {
  --highlight-color: green;
}
.block-activity li.paid:before {
  content: "\f53d";
}
.block-activity li.error, .block-activity li.reject {
  --highlight-color: #D62828;
}
.block-activity li.error:before, .block-activity li.reject:before {
  content: "\f071";
}
.block-activity li.request {
  --highlight-color: purple;
}
.block-activity li.request:before {
  content: "\f064";
}
.block-activity li time {
  display: block;
  margin: 0 0 0.25em;
  font-size: 0.7em;
  text-transform: uppercase;
}
.block-activity li .edit-link {
  font-size: 0.7em;
  position: absolute;
  top: 0;
  right: 0;
}

form.comment-form {
  display: grid;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "details details" "name email" "comment comment" "submit cookies";
  margin: 0 0 calc(var(--block-margin, 4rem) * 1);
}
form.comment-form label,
form.comment-form .label {
  font-size: 0.8em;
  text-transform: uppercase;
}
form.comment-form .details.label {
  grid-area: details;
}
form.comment-form textarea {
  width: 100%;
  height: 5rem;
  padding: 1em 0.75em;
  border-radius: 4px;
}
form.comment-form input[type=text],
form.comment-form input[type=email] {
  width: 100%;
  padding: 0.5em 0.75em;
  border-radius: 4px;
}
form.comment-form input[type=text][disabled],
form.comment-form input[type=email][disabled] {
  background-color: #ccc;
}
form.comment-form input[type=submit] {
  padding: 0.5em 1em;
}
form.comment-form .comment-form-cookies-consent {
  font-size: 0.7em;
}
form.comment-form .action-content {
  grid-area: comment;
}
form.comment-form .comment-form-comment {
  grid-area: comment;
  margin: 0.5em 0;
}
form.comment-form .comment-form-author {
  grid-area: name;
}
form.comment-form .comment-form-email {
  grid-area: email;
}
form.comment-form .comment-form-cookies-consent {
  grid-area: cookies;
  text-align: right;
  margin: 0;
}
form.comment-form .form-submit {
  grid-area: submit;
}

form.new {
  display: grid;
  grid-template-areas: "title title" "code dept" "submit submit" "message message";
  grid-template-columns: auto auto;
  justify-content: center;
  justify-content: center;
  align-items: center;
  gap: 1em;
  margin: 0 0 calc(var(--block-margin, 4rem) * 1);
}
form.new h2 {
  grid-area: title;
  text-align: center;
}
form.new label {
  display: inline-block;
}
form.new label.account-code {
  grid-area: code;
  text-align: right;
}
form.new label.account-dept {
  grid-area: dept;
}
form.new .submit {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: ". button note";
  grid-area: submit;
  align-items: center;
  text-align: center;
}
form.new .submit button {
  grid-area: button;
}
form.new .submit em {
  grid-area: note;
  font-size: 0.8em;
}
form.new input[type=text] {
  padding: 0.5em;
}
form.new #accounting-code {
  text-align: center;
}
form.new p.message {
  grid-area: message;
  font-size: 0.8em;
  text-align: center;
}

.select-title {
  text-align: center;
}

#the-funds {
  max-width: 1024px;
  margin: 0 auto;
  padding: 1em;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
}
#the-funds .heading {
  margin: 0;
  display: flex;
  align-items: center;
  text-align: center;
  cursor: pointer;
}
#the-funds .heading:after {
  margin: 0 0 0 0.5em;
  font-family: "Font Awesome 6 Free";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  text-transform: none;
  content: "\f105";
}
#the-funds .heading.on {
  padding-bottom: 0.5rem;
}
#the-funds .heading.on:after {
  rotate: 90deg;
}
#the-funds .heading.on ~ .group {
  display: block;
}
#the-funds .heading.on + ul {
  display: flex;
}
#the-funds > .group {
  margin: 0 1em 1em 1em;
}
#the-funds > .group:last-child {
  margin-bottom: 0;
}
#the-funds > .group .group {
  display: none;
  margin: 0 0 1em;
  padding: 1em;
  background: rgba(0, 0, 0, 0.05);
}
#the-funds > .group .group .heading {
  margin: -1rem;
  padding: 1rem;
}
#the-funds > .group .group .heading.on {
  margin-bottom: 0;
}
#the-funds ul {
  display: none;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}
#the-funds ul li {
  flex-basis: 15.5rem;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.5em;
  border: 1px solid #FCBF49;
  background: rgba(252, 191, 73, 0.7);
  cursor: pointer;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.9em;
}
#the-funds ul li code {
  padding: 0.5em;
  font-weight: bold;
  border: 1px solid currentColor;
  background: white;
  border-radius: 4px;
  white-space: nowrap;
}
#the-funds ul li:hover {
  background: #fcbf49;
}/*# sourceMappingURL=style.css.map */