@charset "UTF-8";
@import "pure-min.css";
@import "pure-grids-responsive-min.css";
@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@200..800");
.pure-u-offset-1-3 {
  margin-left: calc(33.333% + 20px);
}

.pure-u-offset-2-3 {
  margin-left: calc(66.666% + 20px);
}

.pure-u-offset-1-4 {
  margin-left: calc(25% + 20px);
}

.pure-u-offset-2-4 {
  margin-left: calc(50% + 20px);
}

.pure-u-offset-3-4 {
  margin-left: calc(75% + 20px);
}

.pure-u-offset-1-5 {
  margin-left: calc(20% + 20px);
}

.pure-u-offset-2-5 {
  margin-left: calc(40% + 20px);
}

.pure-u-offset-3-5 {
  margin-left: calc(60% + 20px);
}

.pure-u-offset-4-5 {
  margin-left: calc(80% + 20px);
}

.pure-u-offset-1-8 {
  margin-left: calc(12.5% + 20px);
}

.pure-u-offset-2-8 {
  margin-left: calc(25% + 20px);
}

.pure-u-offset-3-8 {
  margin-left: calc(37.5% + 20px);
}

.pure-u-offset-4-8 {
  margin-left: calc(50% + 20px);
}

.pure-u-offset-5-8 {
  margin-left: calc(62.5% + 20px);
}

.pure-u-offset-6-8 {
  margin-left: calc(75% + 20px);
}

.pure-u-offset-7-8 {
  margin-left: calc(87.5% + 20px);
}

.pure-u-offset-1-12 {
  margin-left: calc(8.333% + 20px);
}

.pure-u-offset-2-12 {
  margin-left: calc(16.666% + 20px);
}

.pure-u-offset-3-12 {
  margin-left: calc(25% + 20px);
}

.pure-u-offset-4-12 {
  margin-left: calc(33.333% + 20px);
}

.pure-u-offset-5-12 {
  margin-left: calc(41.666% + 20px);
}

.pure-u-offset-6-12 {
  margin-left: calc(50% + 20px);
}

.pure-u-offset-7-12 {
  margin-left: calc(58.333% + 20px);
}

.pure-u-offset-8-12 {
  margin-left: calc(66.666% + 20px);
}

.pure-u-offset-9-12 {
  margin-left: calc(75% + 20px);
}

.pure-u-offset-10-12 {
  margin-left: calc(83.333% + 20px);
}

.pure-u-offset-11-12 {
  margin-left: calc(91.666% + 20px);
}

.pure-u-offset-1-24 {
  margin-left: calc(4.166% + 20px);
}

.pure-u-offset-2-24 {
  margin-left: calc(8.333% + 20px);
}

.pure-u-offset-3-24 {
  margin-left: calc(12.5% + 20px);
}

.pure-u-offset-4-24 {
  margin-left: calc(16.666% + 20px);
}

.pure-u-offset-5-24 {
  margin-left: calc(20.833% + 20px);
}

.pure-u-offset-6-24 {
  margin-left: calc(25% + 20px);
}

.pure-u-offset-7-24 {
  margin-left: calc(29.166% + 20px);
}

.pure-u-offset-8-24 {
  margin-left: calc(33.333% + 20px);
}

.pure-u-offset-9-24 {
  margin-left: calc(37.5% + 20px);
}

.pure-u-offset-10-24 {
  margin-left: calc(41.666% + 20px);
}

.pure-u-offset-11-24 {
  margin-left: calc(45.833% + 20px);
}

.pure-u-offset-12-24 {
  margin-left: calc(50% + 20px);
}

.pure-u-offset-13-24 {
  margin-left: calc(54.166% + 20px);
}

.pure-u-offset-14-24 {
  margin-left: calc(58.333% + 20px);
}

.pure-u-offset-15-24 {
  margin-left: calc(62.5% + 20px);
}

.pure-u-offset-16-24 {
  margin-left: calc(66.666% + 20px);
}

.pure-u-offset-17-24 {
  margin-left: calc(70.833% + 20px);
}

.pure-u-offset-18-24 {
  margin-left: calc(75% + 20px);
}

.pure-u-offset-19-24 {
  margin-left: calc(79.166% + 20px);
}

.pure-u-offset-20-24 {
  margin-left: calc(79.166% + 20px);
}

.pure-u-offset-21-24 {
  margin-left: calc(83.333% + 20px);
}

.pure-u-offset-22-24 {
  margin-left: calc(91.666% + 20px);
}

.pure-u-offset-23-24 {
  margin-left: calc(95.833% + 20px);
}

@media screen and (min-width: 768px) {
  .pure-u-md-offset-1-3 {
    margin-left: calc(33.333% + 20px);
  }
  .pure-u-md-offset-2-3 {
    margin-left: calc(66.666% + 20px);
  }
  .pure-u-md-offset-1-4 {
    margin-left: calc(25% + 20px);
  }
  .pure-u-md-offset-2-4 {
    margin-left: calc(50% + 20px);
  }
  .pure-u-md-offset-3-4 {
    margin-left: calc(75% + 20px);
  }
  .pure-u-md-offset-1-5 {
    margin-left: calc(20% + 20px);
  }
  .pure-u-md-offset-2-5 {
    margin-left: calc(40% + 20px);
  }
  .pure-u-md-offset-3-5 {
    margin-left: calc(60% + 20px);
  }
  .pure-u-md-offset-4-5 {
    margin-left: calc(80% + 20px);
  }
  .pure-u-md-offset-1-8 {
    margin-left: calc(12.5% + 20px);
  }
  .pure-u-md-offset-2-8 {
    margin-left: calc(25% + 20px);
  }
  .pure-u-md-offset-3-8 {
    margin-left: calc(37.5% + 20px);
  }
  .pure-u-md-offset-4-8 {
    margin-left: calc(50% + 20px);
  }
  .pure-u-md-offset-5-8 {
    margin-left: calc(62.5% + 20px);
  }
  .pure-u-md-offset-6-8 {
    margin-left: calc(75% + 20px);
  }
  .pure-u-md-offset-7-8 {
    margin-left: calc(87.5% + 20px);
  }
  .pure-u-md-offset-1-12 {
    margin-left: calc(8.333% + 20px);
  }
  .pure-u-md-offset-2-12 {
    margin-left: calc(16.666% + 20px);
  }
  .pure-u-md-offset-3-12 {
    margin-left: calc(25% + 20px);
  }
  .pure-u-md-offset-4-12 {
    margin-left: calc(33.333% + 20px);
  }
  .pure-u-md-offset-5-12 {
    margin-left: calc(41.666% + 20px);
  }
  .pure-u-md-offset-6-12 {
    margin-left: calc(50% + 20px);
  }
  .pure-u-md-offset-7-12 {
    margin-left: calc(58.333% + 20px);
  }
  .pure-u-md-offset-8-12 {
    margin-left: calc(66.666% + 20px);
  }
  .pure-u-md-offset-9-12 {
    margin-left: calc(75% + 20px);
  }
  .pure-u-md-offset-10-12 {
    margin-left: calc(83.333% + 20px);
  }
  .pure-u-md-offset-11-12 {
    margin-left: calc(91.666% + 20px);
  }
  .pure-u-md-offset-1-24 {
    margin-left: calc(4.166% + 20px);
  }
  .pure-u-md-offset-2-24 {
    margin-left: calc(8.333% + 20px);
  }
  .pure-u-md-offset-3-24 {
    margin-left: calc(12.5% + 20px);
  }
  .pure-u-md-offset-4-24 {
    margin-left: calc(16.666% + 20px);
  }
  .pure-u-md-offset-5-24 {
    margin-left: calc(20.833% + 20px);
  }
  .pure-u-md-offset-6-24 {
    margin-left: calc(25% + 20px);
  }
  .pure-u-md-offset-7-24 {
    margin-left: calc(29.166% + 20px);
  }
  .pure-u-md-offset-8-24 {
    margin-left: calc(33.333% + 20px);
  }
  .pure-u-md-offset-9-24 {
    margin-left: calc(37.5% + 20px);
  }
  .pure-u-md-offset-10-24 {
    margin-left: calc(41.666% + 20px);
  }
  .pure-u-md-offset-11-24 {
    margin-left: calc(45.833% + 20px);
  }
  .pure-u-md-offset-12-24 {
    margin-left: calc(50% + 20px);
  }
  .pure-u-md-offset-13-24 {
    margin-left: calc(54.166% + 20px);
  }
  .pure-u-md-offset-14-24 {
    margin-left: calc(58.333% + 20px);
  }
  .pure-u-md-offset-15-24 {
    margin-left: calc(62.5% + 20px);
  }
  .pure-u-md-offset-16-24 {
    margin-left: calc(66.666% + 20px);
  }
  .pure-u-md-offset-17-24 {
    margin-left: calc(70.833% + 20px);
  }
  .pure-u-md-offset-18-24 {
    margin-left: calc(75% + 20px);
  }
  .pure-u-md-offset-19-24 {
    margin-left: calc(79.166% + 20px);
  }
  .pure-u-md-offset-20-24 {
    margin-left: calc(79.166% + 20px);
  }
  .pure-u-md-offset-21-24 {
    margin-left: calc(83.333% + 20px);
  }
  .pure-u-md-offset-22-24 {
    margin-left: calc(91.666% + 20px);
  }
  .pure-u-md-offset-23-24 {
    margin-left: calc(95.833% + 20px);
  }
}
@media screen and (min-width: 1024px) {
  .pure-u-lg-offset-1-3 {
    margin-left: calc(33.333% + 20px);
  }
  .pure-u-lg-offset-2-3 {
    margin-left: calc(66.666% + 20px);
  }
  .pure-u-lg-offset-1-4 {
    margin-left: calc(25% + 20px);
  }
  .pure-u-lg-offset-2-4 {
    margin-left: calc(50% + 20px);
  }
  .pure-u-lg-offset-3-4 {
    margin-left: calc(75% + 20px);
  }
  .pure-u-lg-offset-1-5 {
    margin-left: calc(20% + 20px);
  }
  .pure-u-lg-offset-2-5 {
    margin-left: calc(40% + 20px);
  }
  .pure-u-lg-offset-3-5 {
    margin-left: calc(60% + 20px);
  }
  .pure-u-lg-offset-4-5 {
    margin-left: calc(80% + 20px);
  }
  .pure-u-lg-offset-1-8 {
    margin-left: calc(12.5% + 20px);
  }
  .pure-u-lg-offset-2-8 {
    margin-left: calc(25% + 20px);
  }
  .pure-u-lg-offset-3-8 {
    margin-left: calc(37.5% + 20px);
  }
  .pure-u-lg-offset-4-8 {
    margin-left: calc(50% + 20px);
  }
  .pure-u-lg-offset-5-8 {
    margin-left: calc(62.5% + 20px);
  }
  .pure-u-lg-offset-6-8 {
    margin-left: calc(75% + 20px);
  }
  .pure-u-lg-offset-7-8 {
    margin-left: calc(87.5% + 20px);
  }
  .pure-u-lg-offset-1-12 {
    margin-left: calc(8.333% + 20px);
  }
  .pure-u-lg-offset-2-12 {
    margin-left: calc(16.666% + 20px);
  }
  .pure-u-lg-offset-3-12 {
    margin-left: calc(25% + 20px);
  }
  .pure-u-lg-offset-4-12 {
    margin-left: calc(33.333% + 20px);
  }
  .pure-u-lg-offset-5-12 {
    margin-left: calc(41.666% + 20px);
  }
  .pure-u-lg-offset-6-12 {
    margin-left: calc(50% + 20px);
  }
  .pure-u-lg-offset-7-12 {
    margin-left: calc(58.333% + 20px);
  }
  .pure-u-lg-offset-8-12 {
    margin-left: calc(66.666% + 20px);
  }
  .pure-u-lg-offset-9-12 {
    margin-left: calc(75% + 20px);
  }
  .pure-u-lg-offset-10-12 {
    margin-left: calc(83.333% + 20px);
  }
  .pure-u-lg-offset-11-12 {
    margin-left: calc(91.666% + 20px);
  }
  .pure-u-lg-offset-1-24 {
    margin-left: calc(4.166% + 20px);
  }
  .pure-u-lg-offset-2-24 {
    margin-left: calc(8.333% + 20px);
  }
  .pure-u-lg-offset-3-24 {
    margin-left: calc(12.5% + 20px);
  }
  .pure-u-lg-offset-4-24 {
    margin-left: calc(16.666% + 20px);
  }
  .pure-u-lg-offset-5-24 {
    margin-left: calc(20.833% + 20px);
  }
  .pure-u-lg-offset-6-24 {
    margin-left: calc(25% + 20px);
  }
  .pure-u-lg-offset-7-24 {
    margin-left: calc(29.166% + 20px);
  }
  .pure-u-lg-offset-8-24 {
    margin-left: calc(33.333% + 20px);
  }
  .pure-u-lg-offset-9-24 {
    margin-left: calc(37.5% + 20px);
  }
  .pure-u-lg-offset-10-24 {
    margin-left: calc(41.666% + 20px);
  }
  .pure-u-lg-offset-11-24 {
    margin-left: calc(45.833% + 20px);
  }
  .pure-u-lg-offset-12-24 {
    margin-left: calc(50% + 20px);
  }
  .pure-u-lg-offset-13-24 {
    margin-left: calc(54.166% + 20px);
  }
  .pure-u-lg-offset-14-24 {
    margin-left: calc(58.333% + 20px);
  }
  .pure-u-lg-offset-15-24 {
    margin-left: calc(62.5% + 20px);
  }
  .pure-u-lg-offset-16-24 {
    margin-left: calc(66.666% + 20px);
  }
  .pure-u-lg-offset-17-24 {
    margin-left: calc(70.833% + 20px);
  }
  .pure-u-lg-offset-18-24 {
    margin-left: calc(75% + 20px);
  }
  .pure-u-lg-offset-19-24 {
    margin-left: calc(79.166% + 20px);
  }
  .pure-u-lg-offset-20-24 {
    margin-left: calc(79.166% + 20px);
  }
  .pure-u-lg-offset-21-24 {
    margin-left: calc(83.333% + 20px);
  }
  .pure-u-lg-offset-22-24 {
    margin-left: calc(91.666% + 20px);
  }
  .pure-u-lg-offset-23-24 {
    margin-left: calc(95.833% + 20px);
  }
}
/* Add this to your CSS file */
:root {
  --status-bar-height: 0px;
}

/* For iOS, use safe area insets */
@supports (padding: env(safe-area-inset-top)) {
  .mobile-app {
    padding-top: env(safe-area-inset-top);
  }
}
/* For Android or fallback, use the CSS variable */
.mobile-app:not(.ios) {
  padding-top: var(--status-bar-height);
}

/* Ensure iOS gets proper safe area handling */
.mobile-app.ios {
  padding-top: env(safe-area-inset-top);
}
.mobile-app.ios select, .mobile-app.ios textarea, .mobile-app.ios input {
  font-size: 16px;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

@media screen and (min-width: 768px) {
  .order-md-1 {
    order: 1;
  }
  .order-md-2 {
    order: 2;
  }
  .order-md-3 {
    order: 3;
  }
  .order-md-4 {
    order: 4;
  }
}
@media screen and (min-width: 1024px) {
  .pure-u-gap-lg + div {
    padding-left: 0.5em !important;
  }
  div:has(+ .pure-u-gap-lg) {
    padding-right: 0.5em !important;
  }
}
@media screen and (min-width: 768px) {
  .pure-u-gap-md + div {
    padding-left: 0.5em !important;
  }
  div:has(+ .pure-u-gap-md) {
    padding-right: 0.5em !important;
  }
}
.pure-u-gap-sm + div {
  padding-left: 0.5em !important;
}

div:has(+ .pure-u-gap-sm) {
  padding-right: 0.5em !important;
}

.pure-g > div {
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .pure-g > div {
    padding-left: 20px;
    padding-right: 20px;
  }
}

form .pure-g > div {
  padding: 4px 0;
}

.nav .pure-g > div {
  padding-top: 0;
  padding-bottom: 0;
}

.limit-width {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

@media screen and (max-width: 1024px) {
  .off-canvas-hide {
    display: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .off-canvas-show {
    display: none !important;
  }
  .text-center-lg {
    text-align: center;
  }
  .text-left-lg {
    text-align: left;
  }
  .text-right-lg {
    text-align: right;
  }
}
@media screen and (max-width: 768px) {
  .hide-mobile-md {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .show-mobile-md {
    display: none !important;
  }
  .text-center-md {
    text-align: center;
  }
  .text-left-md {
    text-align: left;
  }
  .text-right-md {
    text-align: right;
  }
}
@media screen and (max-width: 500px) {
  .hide-mobile-sm {
    display: none !important;
  }
}
@media screen and (min-width: 500px) {
  .show-mobile-sm {
    display: none !important;
  }
}
@media screen and (max-width: 500px) {
  .hide-small {
    display: none;
  }
  .text-center-sm {
    text-align: center;
  }
  .text-left-sm {
    text-align: left;
  }
  .text-right-sm {
    text-align: right;
  }
}
@media screen and (min-width: 500px) {
  .show-small {
    display: none;
  }
}
/* ***** O P T I M I Z E : We should only be using 3 or 4 font weights, don't load all them, looks like using 300 through 700 right now */
/* ***** O P T I M I Z E : We're probably being inconsistent, should only need maybe 4?*/
body > section.main {
  opacity: 0; /* Start with the body fully transparent */
  transition: opacity 0.5s ease-in-out; /* Transition effect for both in and out */
}

body > section.main.fade-in { /* This class is added via JavaScript when the document is fully loaded */
  opacity: 1;
}

div.preloader-logo { /* OPTIMIZE: Are we still using this??? It appears to be unused */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s ease;
}
div.preloader-logo img {
  max-width: 250px;
}
div.preloader-logo.loading {
  opacity: 1;
}

body.disable-scroll { /* What's this for? It appears to be something related to draggable table rows? */
  overflow: hidden;
  touch-action: none; /* Prevent all touch gestures */
}

.error {
  color: #C1272D;
} /* QUESTION: What's this for? Seems out of place */
body {
  padding-top: calc(80px + var(--status-bar-height));
  /* OPTIMIZE: Can we use document flow and avoid this specificity? */
}
body.projects {
  padding-top: calc(120px + var(--status-bar-height));
}
body.mobile-app > section.main {
  padding-top: calc(60px + var(--status-bar-height));
}
body.mobile-app:before {
  content: "";
  background-color: #636b72;
  position: fixed;
  top: 0;
  height: var(--status-bar-height);
  left: 0;
  right: 0;
  z-index: 101;
}

body {
  background-color: #EDF3F7 !important;
  color: rgb(71, 69, 63);
  font-family: Assistant, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 100%;
  line-height: 1.4em;
}

a {
  text-decoration: none;
  color: #003A6D;
  transition: all ease-in-out 0.4s;
}
a:hover, a:active {
  color: #8c959d;
}

p {
  margin-right: -0.5em;
  margin-bottom: 1em;
}

h1, h2, h3, h4, h5, h6 {
  color: #636b72;
  font-size: 1em;
}
h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, h2 + h1, h2 + h2, h2 + h3, h2 + h4, h2 + h5, h2 + h6, h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6, h4 + h1, h4 + h2, h4 + h3, h4 + h4, h4 + h5, h4 + h6, h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6, h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5, h6 + h6 {
  margin-top: 0;
}

.head1, .head2, .head3, .head4, .head5, .head6 {
  font-family: Assistant, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #003A6D;
  margin-top: 0.9em;
  margin-bottom: 0.3em;
}
.head1 + .head1, .head1 + .head2, .head1 + .head3, .head1 + .head4, .head1 + .head5, .head1 + .head6, .head2 + .head1, .head2 + .head2, .head2 + .head3, .head2 + .head4, .head2 + .head5, .head2 + .head6, .head3 + .head1, .head3 + .head2, .head3 + .head3, .head3 + .head4, .head3 + .head5, .head3 + .head6, .head4 + .head1, .head4 + .head2, .head4 + .head3, .head4 + .head4, .head4 + .head5, .head4 + .head6, .head5 + .head1, .head5 + .head2, .head5 + .head3, .head5 + .head4, .head5 + .head5, .head5 + .head6, .head6 + .head1, .head6 + .head2, .head6 + .head3, .head6 + .head4, .head6 + .head5, .head6 + .head6 {
  margin-top: -0.35em;
}
.head1 + p, .head2 + p, .head3 + p, .head4 + p, .head5 + p, .head6 + p {
  margin-top: 0.6em;
}

.head1 {
  font-size: 2.5em;
  line-height: 1.1em;
}

.head2 {
  font-size: 2.2em;
  line-height: 1.1em;
}

.head3 {
  font-size: 1.7em;
  line-height: 1.1em;
}

.head4 {
  font-size: 1.4em;
  line-height: 1.2em;
  color: #8c959d;
}

.head5 {
  font-size: 1.3em;
  line-height: 1.1em;
}

.head6 {
  font-size: 1.2em;
  line-height: 1.2em;
}

ul li {
  margin-bottom: 0.5em;
  line-height: 1.2em;
}

.date-input {
  opacity: 0;
  position: absolute;
  width: 0;
  z-index: -1;
}

.datepicker-picker {
  background-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

input:not([type=file], [type=hidden], [type=submit]).opt--input, textarea.opt--input {
  border-radius: 20px;
  border: 2px #b0b7ba solid;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  padding: 4px 12px;
}
input:not([type=file], [type=hidden], [type=submit]).opt--input::-moz-placeholder, textarea.opt--input::-moz-placeholder {
  color: #b0b7ba;
}
input:not([type=file], [type=hidden], [type=submit]).opt--input::placeholder, textarea.opt--input::placeholder {
  color: #b0b7ba;
}
@media screen and (min-width: 768px) {
  input:not([type=file], [type=hidden], [type=submit]).opt--input, textarea.opt--input {
    font-size: 16px;
    line-height: 16px;
    padding: 5px 12px !important;
  }
}

.opt--form.small select {
  font-size: 12px;
  line-height: 12px;
  padding: 4px 6px;
}
.opt--form.small input:not([type=file], [type=hidden], [type=submit]), .opt--form.small textarea {
  font-size: 12px;
  line-height: 12px;
  padding: 4px 6px;
}
@media screen and (min-width: 768px) {
  .opt--form.small input:not([type=file], [type=hidden], [type=submit]), .opt--form.small textarea {
    font-size: 12px;
    line-height: 12px;
    padding: 4px 6px !important;
  }
}

.opt--form select {
  height: 36px;
  display: inline-block;
  border: 2px #b0b7ba solid;
  padding: 6px 6px 6px 30px;
  font-weight: 400;
  margin-bottom: 4px;
}
.opt--form input:not([type=file], [type=hidden], [type=submit]), .opt--form textarea {
  border-radius: 20px;
  border: 2px #b0b7ba solid;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  padding: 4px 12px;
}
.opt--form input:not([type=file], [type=hidden], [type=submit])::-moz-placeholder, .opt--form textarea::-moz-placeholder {
  color: #b0b7ba;
}
.opt--form input:not([type=file], [type=hidden], [type=submit])::placeholder, .opt--form textarea::placeholder {
  color: #b0b7ba;
}
@media screen and (min-width: 768px) {
  .opt--form input:not([type=file], [type=hidden], [type=submit]), .opt--form textarea {
    font-size: 16px;
    line-height: 16px;
    padding: 5px 12px;
  }
}
.opt--form input:not([type=file], [type=hidden], [type=submit], [type=checkbox]), .opt--form select, .opt--form textarea {
  width: 100%;
}
.opt--form textarea {
  border-radius: 12px;
}
.opt--form input[type=checkbox] + label {
  padding-left: 0.5em;
}
.opt--form span.pw-reminder {
  margin-top: 0.5em;
  font-weight: 600;
  display: none;
}
.opt--form span.pw-reminder.show {
  display: inline-block;
}
.opt--form .profile-preview {
  display: inline-block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  padding-bottom: 100%;
}
.opt--form .pw-requirements {
  display: none;
  font-size: 85%;
  color: #636b72;
  list-style: none;
}
.opt--form .pw-requirements.show {
  display: block;
}
.opt--form .pw-requirements li {
  position: relative;
  color: #C1272D;
}
.opt--form .pw-requirements li::before {
  content: "x";
  position: absolute;
  left: -1.25em;
  top: -1px;
}
.opt--form .pw-requirements li.met {
  color: #39B54A;
}
.opt--form .pw-requirements li.met:before {
  left: -1.3em;
  top: 0;
  content: "✓";
}
.opt--form > .pure-g {
  border-radius: 12px;
  margin-top: 2em;
}
.opt--form > .pure-g > div {
  padding: 0 1.5em;
}
.opt--form div.form-group {
  margin-bottom: 1.5em;
  border-radius: 12px;
}
@media screen and (max-width: 768px) {
  .opt--form div.form-group {
    padding: 2em;
    background: linear-gradient(90deg, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0) 80%);
  }
}
@media screen and (min-width: 768px) {
  .opt--form div.side-groups {
    padding: 2em 0 2em 2em;
    background: linear-gradient(90deg, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0) 80%);
  }
}
.opt--form .head3 {
  margin-top: 0;
}
.opt--form div + div > .head3 {
  margin-top: 0.9em;
}

table.opt--table {
  width: 100%;
  font-size: 90%;
  font-weight: 500;
  border-collapse: collapse;
}
table.opt--table th, table.opt--table td {
  border: 1px solid #8c959d;
}
table.opt--table th {
  padding: 0.75em 0.25em;
  font-weight: 600;
  background-color: #d6dee3;
}
@media screen and (min-width: 768px) {
  table.opt--table th {
    padding: 0.75em 0.5em;
  }
}
table.opt--table td {
  padding: 0.25em;
}
@media screen and (min-width: 768px) {
  table.opt--table td {
    padding: 0.5em;
  }
}
table.opt--table thead {
  text-align: left;
}

.subform {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.01) 100%);
  display: block;
  padding: 0.75em 1em !important;
  border-radius: 16px;
}
@media screen and (max-width: 768px) {
  .subform {
    padding: 0.5em;
  }
}

.img2svg.date path, .img2svg.date rect, .img2svg.date circle, .img2svg.date polygon {
  fill: white;
}

/* ***** O P T I M I Z E : Should be moved to universals */
img {
  width: 100%;
  height: auto;
}

.radius {
  border-radius: 12px;
}

.opt--button {
  font-size: 14px;
  line-height: 14px;
  padding: 6px 10px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-radius: 20px;
  display: inline-block;
  background-color: transparent;
  color: #8c959d;
  border: 2px #b0b7ba solid;
  transition: all ease-in-out 0.4s;
}
@media screen and (min-width: 768px) {
  .opt--button {
    font-size: 16px;
    line-height: 16px;
    padding: 7px 12px;
  }
}
.opt--button.dark {
  background-color: #8c959d;
  color: white;
  border: 2px solid #8c959d;
}
.opt--button.attention {
  background-color: #39B54A;
  color: white;
  border: 2px solid #39B54A;
}
.opt--button:active, .opt--button:hover, .opt--button.active, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .opt--button#seven-day-label,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .opt--button#thirty-day-label,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .opt--button#YTD-label {
  background-color: #8c959d;
  border: 2px solid #8c959d;
  color: white;
}
.opt--button:active.solid, div.week div.post form.add-comment button.opt--button.comment-submit:active, .opt--button:hover.solid, div.week div.post form.add-comment button.opt--button.comment-submit:hover, .opt--button.active.solid, div.week div.post form.add-comment button.opt--button.active.comment-submit, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .opt--button.solid#seven-day-label, div.leaderboard div.week div.post form.add-comment #seven-day-switch:checked ~ .lb-switch-labels > button.opt--button#seven-day-label.comment-submit, div.week div.post form.add-comment div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > button.opt--button#seven-day-label.comment-submit,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .opt--button.solid#thirty-day-label,
div.leaderboard div.week div.post form.add-comment #thirty-day-switch:checked ~ .lb-switch-labels > button.opt--button#thirty-day-label.comment-submit,
div.week div.post form.add-comment div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > button.opt--button#thirty-day-label.comment-submit,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .opt--button.solid#YTD-label,
div.leaderboard div.week div.post form.add-comment #YTD-switch:checked ~ .lb-switch-labels > button.opt--button#YTD-label.comment-submit,
div.week div.post form.add-comment div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > button.opt--button#YTD-label.comment-submit {
  background-color: #003A6D;
  border-color: #003A6D;
}
.opt--button:active, .opt--button:hover {
  background-color: #003A6D;
  border: 2px solid #003A6D;
  transform: scale(1.07);
}
.opt--button.small {
  font-size: 12px;
  line-height: 12px;
  padding: 4px 6px;
}
@media screen and (min-width: 768px) {
  .opt--button.small {
    font-size: 13px;
    line-height: 13px;
    padding: 5px 9px;
  }
}
@media screen and (max-width: 768px) {
  .opt--button .plus {
    display: inline-block;
    transform: scale(2);
  }
}

div.circle {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #b0b7ba;
  border-radius: 100%;
}

.circle-status {
  font-weight: 600;
}

.icon-button {
  display: inline-block;
  background-color: #8c959d;
  border-radius: 50%;
  transition: all ease-in-out 0.4s;
  vertical-align: top;
  margin: 0;
  width: 20px;
  height: 20px;
  padding: 5px;
  text-align: center;
}
.icon-button.large {
  width: 40px;
  height: 40px;
}
.icon-button.large .img2svg {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  .icon-button {
    width: 21px;
    height: 21px;
    padding: 7px;
  }
}
.icon-button:active, .icon-button:hover, .icon-button.active, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .icon-button#seven-day-label,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .icon-button#thirty-day-label,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .icon-button#YTD-label {
  background-color: #003A6D;
  border-color: #003A6D;
  transform: scale(1.07);
}
.icon-button .img2svg {
  width: 16px;
  height: 16px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .icon-button .img2svg {
    width: 19px;
    height: 19px;
  }
}
.icon-button .img2svg path, .icon-button .img2svg rect, .icon-button .img2svg circle, .icon-button .img2svg polygon {
  fill: white !important;
  color: white !important;
}
.icon-button.search, .icon-button.reset {
  background-color: #b0b7ba;
}
.icon-button.search:active, .icon-button.search:hover, .icon-button.search.active, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .icon-button.search#seven-day-label,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .icon-button.search#thirty-day-label,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .icon-button.search#YTD-label, .icon-button.reset:active, .icon-button.reset:hover, .icon-button.reset.active, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .icon-button.reset#seven-day-label,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .icon-button.reset#thirty-day-label,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .icon-button.reset#YTD-label {
  background-color: #8c959d;
  border-color: #8c959d;
  transform: scale(1);
}
.icon-button.search {
  border-radius: 50% 0 0 50%;
}
.icon-button.reset {
  border-radius: 0 50% 50% 0;
}
.icon-button + .icon-button {
  margin-left: 3px;
}

.icon-button-naked {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  transition: all ease-in-out 0.4s;
  vertical-align: bottom;
}
@media screen and (min-width: 768px) {
  .icon-button-naked {
    width: 30px;
    height: 30px;
  }
}
.icon-button-naked .img2svg {
  width: 100%;
  height: 100%;
  transition: all ease-in-out 0.4s;
}
.icon-button-naked .img2svg path, .icon-button-naked .img2svg rect, .icon-button-naked .img2svg circle, .icon-button-naked .img2svg polygon {
  fill: #8c959d !important;
  color: #8c959d !important;
}
.icon-button-naked:active .img2svg, .icon-button-naked:hover .img2svg, .icon-button-naked.active .img2svg, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .icon-button-naked#seven-day-label .img2svg,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .icon-button-naked#thirty-day-label .img2svg,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .icon-button-naked#YTD-label .img2svg {
  transform: scale(1.07);
}
.icon-button-naked:active .img2svg path, .icon-button-naked:active .img2svg rect, .icon-button-naked:active .img2svg circle, .icon-button-naked:active .img2svg polygon, .icon-button-naked:hover .img2svg path, .icon-button-naked:hover .img2svg rect, .icon-button-naked:hover .img2svg circle, .icon-button-naked:hover .img2svg polygon, .icon-button-naked.active .img2svg path, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .icon-button-naked#seven-day-label .img2svg path,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .icon-button-naked#thirty-day-label .img2svg path,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .icon-button-naked#YTD-label .img2svg path, .icon-button-naked.active .img2svg rect, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .icon-button-naked#seven-day-label .img2svg rect,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .icon-button-naked#thirty-day-label .img2svg rect,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .icon-button-naked#YTD-label .img2svg rect, .icon-button-naked.active .img2svg circle, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .icon-button-naked#seven-day-label .img2svg circle,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .icon-button-naked#thirty-day-label .img2svg circle,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .icon-button-naked#YTD-label .img2svg circle, .icon-button-naked.active .img2svg polygon, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .icon-button-naked#seven-day-label .img2svg polygon,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .icon-button-naked#thirty-day-label .img2svg polygon,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .icon-button-naked#YTD-label .img2svg polygon {
  fill: #b0b7ba !important;
  color: #b0b7ba !important;
}

div.customDropDown {
  position: relative;
}
@media screen and (max-width: 768px) {
  div.customDropDown .customDropDown-button .static-cell {
    justify-content: flex-end;
  }
}
div.customDropDown .customDropDown-button .circle {
  margin-right: 0.5em;
}
div.customDropDown .customDropDown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  z-index: 1000;
}
div.customDropDown .customDropDown-menu .menuItem {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}
div.customDropDown .customDropDown-menu .menuItem .circle {
  margin-right: 0.5em;
}

.no-hover:hover {
  color: initial;
  background-color: initial;
  opacity: initial;
}

.spinning-icon {
  text-align: center;
  padding: 20px;
  transition: opacity 0.25s ease;
  animation: spinLoading 2s linear infinite;
}
.spinning-icon img {
  width: 50px; /* Adjust the size of your loading icon */
  height: 50px;
  animation: spinIcon 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes spinLoading {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinIcon {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

span.due-date {
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  font-size: 85%;
  position: absolute;
  text-align: center;
  background-color: #636b72;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  padding: 4px 4px 6px;
  border-radius: 4px;
}
span.due-date.alert {
  background-color: #C1272D;
}
span.due-date div.month {
  font-size: 0.8em;
  line-height: 1em;
}
span.due-date div.day {
  font-size: 1.8em;
  line-height: 0.7em;
}

nav .opt--button {
  border: 2px solid transparent;
}

*:has(> .bubble) {
  position: relative;
}

.bubble {
  position: absolute;
  top: 0;
  right: 0;
  background-color: red !important;
  display: flex;
  width: 18px;
  height: 18px;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 600;
  line-height: 1;
  transform: translate(25%, 5%) !important;
}

body.projects header.hidden-nav {
  height: -moz-fit-content;
  height: fit-content;
}

header {
  background-color: white;
  font-size: 0.95em;
}
header h1.greeting {
  margin-left: 20px;
  margin-top: 1.5em;
  position: absolute;
  color: #003A6D;
  text-transform: capitalize;
}
@media screen and (max-width: 341.3333333333px) {
  header h1.greeting {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  header h1.greeting {
    margin-left: 66px;
  }
}
header.hidden-nav {
  position: fixed; /* Always fixed */
  min-height: 80px;
  box-sizing: border-box;
  top: var(--status-bar-height);
  left: 0;
  width: 100%; /* Full width */
  transition: transform 0.5s ease; /* Smooth transform transition */
  z-index: 100; /* Ensure it's above other content */
  /* toggle button animation */
}
@media screen and (max-width: 1024px) {
  header.hidden-nav {
    padding: 0;
  }
}
@media screen and (min-width: 1024px) {
  header.hidden-nav.compact nav.project-details-nav div.header-project-info {
    margin-top: 1em;
  }
  header.hidden-nav.compact nav.project-details-nav div.header-project-info ul.project-info-list {
    margin-top: 0.4em;
  }
}
header.hidden-nav nav {
  display: block;
  margin: 0;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  /* toggle menu - slide animation */
}
header.hidden-nav nav .toggle-button {
  top: 36px;
}
header.hidden-nav nav label {
  cursor: pointer;
}
header.hidden-nav nav label.desktop-profile-icon {
  position: relative;
  display: inline-block;
  padding: 0.5em 0.6em;
  margin-left: 4.5em;
  font-size: 120%;
  color: #F7931E;
  /* right: 20px;
  top: 20px; */
}
@media screen and (max-width: 1024px) {
  header.hidden-nav nav label.desktop-profile-icon {
    display: none;
  }
}
header.hidden-nav nav label.desktop-profile-icon div {
  position: absolute;
  left: -3em;
  top: -0.5em;
  height: 50px;
  width: 50px;
  border-radius: 40px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
header.hidden-nav nav label.mobile-profile-icon {
  display: none;
  position: absolute;
  right: 20px;
  top: 20px;
}
@media screen and (max-width: 1024px) {
  header.hidden-nav nav label.mobile-profile-icon {
    display: inline-block;
  }
}
header.hidden-nav nav label.mobile-profile-icon div {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
header.hidden-nav nav #checkbox-right:checked ~ ul.from-right.profile {
  box-shadow: -280px 0px 0px 2400px rgba(2, 2, 2, 0.2);
  transform: translate(0, 0);
  opacity: 1;
  /* dropdown menu responsive */
}
header.hidden-nav nav #checkbox-right:checked ~ ul.from-right.profile .dropdown {
  background-color: hsl(0, 0%, 98%);
  box-shadow: none;
  border: none;
  display: none;
  padding: 1rem;
  position: relative;
  top: 0;
}
header.hidden-nav nav .menu {
  float: right;
  margin-right: 0;
  width: calc(100% - 250px);
  list-style: none;
  display: flex; /* Change to flexbox */
  align-items: center; /* Vertically center items */
  justify-content: flex-end; /* Align items to the right */
  margin: 1.75em 0 18px 0;
  padding: 0;
  position: relative;
  text-align: right;
  font-weight: 600;
  z-index: 3;
}
header.hidden-nav nav .menu li {
  margin: 0 0 0 0.5em;
}
@media (max-width: 1024px) {
  header.hidden-nav nav .menu li {
    display: list-item;
    position: relative;
    margin-bottom: 0.5em;
  }
}
header.hidden-nav nav .menu li a {
  padding: 0.5rem 0.6rem;
  transition: all 0.25s;
  color: #636b72;
  transition: all ease-in-out 0.4s;
  display: inline-block;
  border-radius: 40px;
}
header.hidden-nav nav .menu li a div {
  display: block;
  background-color: transparent;
  height: 1.5px;
  width: 2px;
  transition: all ease-in-out 0.4s;
}
header.hidden-nav nav .menu li a.active, header.hidden-nav nav .menu li div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > a#seven-day-label, div.leaderboard header.hidden-nav nav .menu li #seven-day-switch:checked ~ .lb-switch-labels > a#seven-day-label,
header.hidden-nav nav .menu li div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > a#thirty-day-label,
div.leaderboard header.hidden-nav nav .menu li #thirty-day-switch:checked ~ .lb-switch-labels > a#thirty-day-label,
header.hidden-nav nav .menu li div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > a#YTD-label,
div.leaderboard header.hidden-nav nav .menu li #YTD-switch:checked ~ .lb-switch-labels > a#YTD-label, header.hidden-nav nav .menu li a:hover, header.hidden-nav nav .menu li a:active {
  background-color: #8c959d;
  color: white;
}
header.hidden-nav nav .menu li a.active div, header.hidden-nav nav .menu li div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > a#seven-day-label div, div.leaderboard header.hidden-nav nav .menu li #seven-day-switch:checked ~ .lb-switch-labels > a#seven-day-label div,
header.hidden-nav nav .menu li div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > a#thirty-day-label div,
div.leaderboard header.hidden-nav nav .menu li #thirty-day-switch:checked ~ .lb-switch-labels > a#thirty-day-label div,
header.hidden-nav nav .menu li div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > a#YTD-label div,
div.leaderboard header.hidden-nav nav .menu li #YTD-switch:checked ~ .lb-switch-labels > a#YTD-label div, header.hidden-nav nav .menu li a:hover div, header.hidden-nav nav .menu li a:active div {
  width: 100%;
  background-color: #003A6D;
}
header.hidden-nav nav .menu li a.button {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #003A6D;
  background-color: #003A6D;
  color: white;
}
header.hidden-nav nav .menu li a.button:hover, header.hidden-nav nav .menu li a.button:active {
  transform: scale(1);
}
@media (max-width: 1024px) {
  header.hidden-nav nav .menu.from-left {
    left: 0;
    transform: translate(-200%, 0);
  }
}
@media (max-width: 1024px) {
  header.hidden-nav nav .menu {
    display: initial;
    position: absolute;
    right: 0;
    top: 0;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    text-align: right;
    margin-top: 0 !important;
    padding: 80px 20px 0 10px;
    font-size: larger;
    background: #EDF3F7;
    transform-origin: 0% 0%;
    transform: translate(200%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }
}
header.hidden-nav nav .menu.profile {
  display: initial;
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;
  max-width: 300px;
  height: 100vh;
  text-align: right;
  margin-top: 0 !important;
  padding: 33px 20px 0 10px;
  font-size: larger;
  background: #EDF3F7;
  transform-origin: 0% 0%;
  transform: translate(200%, 0);
  transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  opacity: 0;
}
header.hidden-nav nav .menu.profile li {
  display: list-item;
  position: relative;
}
header.hidden-nav nav .menu.profile li div.profile-portrait {
  display: inline-block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
  border-radius: 100px;
  margin-top: 32px;
}
header.hidden-nav.show {
  transform: translateY(0);
  /* Slide in */
}
header.hidden-nav.compact {
  box-shadow: 3px 3px 1em 0.4em rgba(0, 0, 0, 0.05);
}
header.hidden-nav.compact a.logo {
  width: 170px;
  height: 41px;
  padding: 5px 0;
  margin-bottom: 13px;
}
@media screen and (min-width: 1024px) {
  header.hidden-nav.compact {
    font-size: 0.85em;
  }
  header.hidden-nav.compact .menu {
    margin-top: 24px;
    margin-bottom: 24px;
  }
}
header.hidden-nav.top {
  box-shadow: 3px 3px 1em 0.4em rgba(0, 0, 0, 0.05);
  transition: all ease-in-out 0.4s;
}
header.hidden-nav.top a.logo .light {
  display: block;
}
header.hidden-nav.top a.logo .dark {
  display: none;
}
@media screen and (min-width: 1024px) {
  header.hidden-nav.top nav ul.menu li a:hover div, header.hidden-nav.top nav ul.menu li a:active div, header.hidden-nav.top nav ul.menu li a.active div, header.hidden-nav.top nav ul.menu li div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > a#seven-day-label div, div.leaderboard header.hidden-nav.top nav ul.menu li #seven-day-switch:checked ~ .lb-switch-labels > a#seven-day-label div,
  header.hidden-nav.top nav ul.menu li div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > a#thirty-day-label div,
  div.leaderboard header.hidden-nav.top nav ul.menu li #thirty-day-switch:checked ~ .lb-switch-labels > a#thirty-day-label div,
  header.hidden-nav.top nav ul.menu li div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > a#YTD-label div,
  div.leaderboard header.hidden-nav.top nav ul.menu li #YTD-switch:checked ~ .lb-switch-labels > a#YTD-label div {
    background-color: #EDF3F7;
  }
  header.hidden-nav.top nav a.button {
    border: 1px solid #C1272D;
    background-color: #C1272D;
    color: #EDF3F7 !important;
  }
  header.hidden-nav.top nav a.button:hover, header.hidden-nav.top nav a.button:active {
    background-color: #003A6D;
    border: 1px solid #003A6D;
  }
}
header.hidden-nav nav.login-nav {
  height: 100%;
}
header.hidden-nav nav.login-nav div.login-logo-container {
  height: 100%;
  text-align: center;
}
header.hidden-nav nav.login-nav div.login-logo-container img {
  margin-top: 1em;
  width: 150px;
}
header.hidden-nav nav.project-details-nav .pure-g > div {
  padding: 0;
}
header.hidden-nav nav.project-details-nav .toggle-button {
  position: relative;
  float: left;
}
header.hidden-nav nav.project-details-nav .toggle-button span {
  display: block;
}
header.hidden-nav nav.project-details-nav label.desktop-profile-icon {
  top: 50%;
  transform: translateY(-40%);
  font-weight: 600;
  line-height: 1em;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  header.hidden-nav nav.project-details-nav label.desktop-profile-icon {
    margin-left: 0;
  }
  header.hidden-nav nav.project-details-nav label.desktop-profile-icon div {
    top: -0.3em;
    left: 0;
    position: relative;
  }
}
header.hidden-nav nav.project-details-nav .menu {
  display: initial;
  position: absolute;
  top: 0;
  width: 80%;
  max-width: 300px;
  height: 100vh;
  text-align: right;
  margin-top: 0 !important;
  padding: 80px 20px 0 10px;
  font-size: larger;
  background: #EDF3F7;
  transform-origin: 0% 0%;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
header.hidden-nav nav.project-details-nav .menu li {
  margin-bottom: 0.5em;
}
header.hidden-nav nav.project-details-nav .menu.from-left {
  left: 0;
  transform: translate(-200%, 0);
  opacity: 0;
}
header.hidden-nav nav.project-details-nav .menu.from-right {
  right: 0;
  transform: translate(200%, 0);
  opacity: 0;
}
header.hidden-nav nav.project-details-nav #checkbox-left:checked ~ ul.from-left, header.hidden-nav nav.project-details-nav #checkbox-right:checked ~ ul.from-right {
  box-shadow: -280px 0px 0px 5000px rgba(2, 2, 2, 0.2);
  transform: translate(0, 0);
  opacity: 1;
}
header.hidden-nav nav.project-details-nav div.header-project-info {
  position: relative;
  display: inline-block;
  margin-top: 0.75em;
}
@media screen and (max-width: 1024px) {
  header.hidden-nav nav.project-details-nav div.header-project-info {
    padding-left: 42px;
  }
}
header.hidden-nav nav.project-details-nav div.header-project-info .project-info-button {
  float: left;
  margin-left: 2.2em;
  margin-top: 1em;
  margin-right: 0.75em;
}
@media screen and (max-width: 1024px) {
  header.hidden-nav nav.project-details-nav div.header-project-info .project-info-button {
    display: none;
  }
}
header.hidden-nav nav.project-details-nav div.header-project-info ul.project-info-list {
  margin: 0;
  list-style: none;
  display: inline-block;
  padding-left: 0;
}
header.hidden-nav nav.project-details-nav div.header-project-info ul.project-info-list li {
  line-height: 1em;
  margin: 0;
}
header.hidden-nav nav.project-details-nav div.header-project-info ul.project-info-list li h1 {
  margin: 0;
}
header.hidden-nav nav.project-details-nav div.header-project-info ul.project-info-list li span {
  font-size: 90%;
  display: inline-block;
}
header.hidden-nav nav.project-details-nav div.header-project-info ul.project-info-list li span.number {
  color: #003A6D;
}
header.hidden-nav nav.project-details-nav div.header-project-info ul.project-info-list li div.circle {
  width: 14px;
  height: 14px;
  margin-bottom: -2px;
}
@media screen and (max-width: 1300px) {
  header.hidden-nav .static-toggle-button {
    display: none;
  }
}
header.hidden-nav .toggle-button {
  position: absolute;
  top: 45px;
  z-index: 10;
}
header.hidden-nav .toggle-button.from-left {
  left: 20px;
}
@media screen and (min-width: 1300px) {
  header.hidden-nav .toggle-button.from-left {
    z-index: 3;
  }
}
header.hidden-nav .toggle-button.from-right {
  right: 20px;
}
header.hidden-nav .toggle-button span {
  display: none;
  position: relative;
  width: 33px;
  height: 2px;
  margin-bottom: 5px;
  background: #003A6D;
  z-index: 1;
  /* animation */
  transform-origin: 8px 6px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
header.hidden-nav .toggle-button span:first-of-type {
  transform-origin: 0% 0%;
}
header.hidden-nav .toggle-button span:nth-last-child(2) {
  transform-origin: 0% 100%;
}
header.hidden-nav .menu-switch {
  pointer-events: none;
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
}
header.hidden-nav .menu-switch:checked ~ label > span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #636b72 !important;
}
header.hidden-nav .menu-switch:checked ~ label > span:nth-last-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
header.hidden-nav .menu-switch:checked ~ label > span:last-child {
  transform: rotate(-45deg) translate(0, -1px);
}
header.hidden-nav label img.exit {
  width: 26px;
}
@media (max-width: 1024px) {
  header.hidden-nav {
    /* toggle menu - slide animation */
    /* dropdown menu responsive */
  }
  header.hidden-nav nav {
    padding-top: 1px;
    background-color: transparent;
  }
  header.hidden-nav .toggle-button span {
    display: block;
  }
  header.hidden-nav #checkbox-left:checked ~ ul.from-left, header.hidden-nav #checkbox-right:checked ~ ul.from-right {
    box-shadow: -280px 0px 0px 2400px rgba(2, 2, 2, 0.2);
    transform: translate(0, 0);
  }
  header.hidden-nav .dropdown {
    background-color: hsl(0, 0%, 98%);
    box-shadow: none;
    border: none;
    display: none;
    padding: 1rem;
    position: relative;
    top: 0;
  }
}

@media screen and (max-width: 768px) {
  .sub-nav-bar {
    padding: 1em 0 0.5em;
  }
}
@media screen and (min-width: 768px) {
  .sub-nav-bar {
    display: flex;
    align-items: start;
  }
}
.sub-nav-bar input:not([type=file], [type=hidden], [type=submit]), .sub-nav-bar select, .sub-nav-bar textarea {
  width: auto;
}
.sub-nav-bar .opt--fill--remainder {
  flex: auto;
}
@media screen and (min-width: 768px) {
  .sub-nav-bar nav {
    flex: 0 0 auto;
  }
}
.sub-nav-bar .opt--form.right-align {
  display: flex;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .sub-nav-bar .opt--form.right-align {
    display: block;
    flex: 0 0 auto;
    margin-left: 1em;
    margin-top: 0;
    text-align: right;
  }
}
@media screen and (max-width: 768px) {
  .sub-nav-bar .opt--form.right-align > .icon-button, .sub-nav-bar .opt--form.right-align #post, .sub-nav-bar .opt--form.right-align #task {
    margin-left: 3px;
  }
}
.sub-nav-bar .opt--form.right-align .search-field-container {
  flex: 1 1 auto;
  position: relative;
}
.sub-nav-bar .opt--form.right-align .search-field-container .search-field {
  width: 100%;
  padding-right: 40px;
  position: relative;
  z-index: 1;
}
.sub-nav-bar .opt--form.right-align .search-field-container .search-button {
  background-color: #E9F0F5;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  margin-right: -10px;
}
.sub-nav-bar .opt--form.right-align .search-field-container .search-button:hover {
  background-color: #8c959d;
}
@media screen and (min-width: 768px) {
  .sub-nav-bar .opt--form.right-align .search-field-container {
    display: inline-block;
  }
  .sub-nav-bar .opt--form.right-align .search-field-container .search-field {
    width: 100px;
    padding-right: inherit;
    transition: all ease-in-out 0.4s;
  }
  .sub-nav-bar .opt--form.right-align .search-field-container .search-field:focus {
    width: 200px;
  }
}
.sub-nav-bar .opt--form.right-align .search-buttons {
  z-index: 4;
  margin-left: -36px;
  vertical-align: top;
  flex: 0 0 auto;
}
.sub-nav-bar .opt--form.right-align .search-buttons .icon-button {
  position: relative;
  background-color: #8c959d;
}
.sub-nav-bar .opt--form.right-align .search-buttons .icon-button:hover {
  background-color: #003A6D;
}
.sub-nav-bar .opt--form.right-align .search-buttons .search, .sub-nav-bar .opt--form.right-align .search-buttons .reset {
  margin: 0;
}
.sub-nav-bar .opt--form.right-align .search-buttons .search {
  margin-right: -4px;
}
@media screen and (min-width: 768px) {
  .sub-nav-bar .opt--form.right-align .search-buttons {
    display: inline-block;
    position: relative;
    z-index: 4;
  }
}

/* *****QUESTION: What is this? */
/* ***** O P T I M I Z E : We have a TON of "ts-" on page code in <style> on individual pages. Why? */
.ts-control::-moz-placeholder {
  color: #b0b7ba;
}
.ts-control::placeholder {
  color: #b0b7ba;
}

.ts-wrapper > .ts-dropdown {
  border-top: 1px solid #d0d0d0 !important;
  border-radius: 12px;
  overflow: hidden;
}

.ts-wrapper .ts-control {
  padding: 4.5px 12px;
  border-radius: 20px;
  border: 2px #b0b7ba solid;
  box-sizing: border-box;
  cursor: text;
}
.ts-wrapper .ts-control:has(.item) {
  padding: 2.5px 12px;
}
@media screen and (min-width: 768px) {
  .ts-wrapper .ts-control {
    padding: 5px 12px !important;
  }
}
.ts-wrapper .ts-control.wrapped-radius {
  border-radius: 12px;
}
.ts-wrapper .item {
  line-height: 16px;
  padding-top: 2.5px !important;
  padding-bottom: 2.5px !important;
}

.ts-wrapper .ts-control input {
  width: initial !important;
  padding: 0 !important;
  line-height: 14px !important;
}
@media screen and (min-width: 768px) {
  .ts-wrapper .ts-control input {
    font-size: 16px !important;
    line-height: 16px !important;
  }
}

.bg-overlay {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 10;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.edit-post-image-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.edit-post-image-list li {
  margin: 0;
  position: relative;
}
.edit-post-image-list li > img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.edit-post-image-list li .remove-btn {
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-post-image-list li .remove-btn img {
  width: 10px;
}

ul.file-attachments {
  list-style: none;
  margin-top: 1.5em;
  padding-left: 1em;
}
ul.file-attachments li {
  display: block;
  position: relative;
}
ul.file-attachments li img {
  width: 28px;
  margin: 0 8px -6px 0;
}
ul.file-attachments li .remove-btn {
  background-color: #fff;
  position: absolute;
  top: 13px;
  right: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.file-attachments li .remove-btn img {
  width: 10px;
  margin: 0;
}

section.post-overlay-container, section.directory-overlay-container {
  display: none;
  transition: opacity 0.5s ease;
  /* input, textarea {
      transition: background-color 0.5s ease;
  }
  &.loading input, &.loading textarea {
      background-color: $clr-gray-dark;
      pointer-events: none;
  } */
  position: fixed;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
section.post-overlay-container.scrollable-overlay, section.scrollable-overlay.directory-overlay-container {
  position: absolute;
  overflow: scroll;
}
section.post-overlay-container.open, section.open.directory-overlay-container {
  display: block;
}
section.post-overlay-container.fade-out, section.fade-out.directory-overlay-container {
  opacity: 0;
}
section.post-overlay-container select, section.directory-overlay-container select, section.post-overlay-container textarea, section.directory-overlay-container textarea, section.post-overlay-container input, section.directory-overlay-container input {
  transition: opacity 0.25s ease;
}
section.post-overlay-container select:disabled, section.directory-overlay-container select:disabled, section.post-overlay-container textarea:disabled, section.directory-overlay-container textarea:disabled, section.post-overlay-container input:disabled, section.directory-overlay-container input:disabled {
  opacity: 0.75;
}
section.post-overlay-container div.post-overlay, section.directory-overlay-container div.post-overlay {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  position: relative;
  width: 94%;
  max-width: 700px;
  background-color: white;
  border-radius: 12px;
  margin: 3em auto 3em;
  padding: 0 1em 2em;
}
section.post-overlay-container div.post-overlay .head2, section.directory-overlay-container div.post-overlay .head2 {
  margin-top: 1.5em;
}
@media screen and (max-width: 768px) {
  section.post-overlay-container div.post-overlay, section.directory-overlay-container div.post-overlay {
    padding: 0 0 1.5em;
    margin: 1em;
  }
}
section.post-overlay-container div.post-overlay .is-log-checkbox, section.directory-overlay-container div.post-overlay .is-log-checkbox {
  display: none;
}
section.post-overlay-container div.post-overlay .is-log-checkbox:disabled ~ .is-log-label, section.directory-overlay-container div.post-overlay .is-log-checkbox:disabled ~ .is-log-label {
  opacity: 0.5;
  pointer-events: none;
}
section.post-overlay-container div.post-overlay #is-log-warning, section.directory-overlay-container div.post-overlay #is-log-warning, section.post-overlay-container div.post-overlay #is-mine-warning, section.directory-overlay-container div.post-overlay #is-mine-warning {
  display: none;
  color: #C1272D;
  font-size: 12px;
  line-height: 1em;
}
section.post-overlay-container div.post-overlay::-webkit-scrollbar, section.directory-overlay-container div.post-overlay::-webkit-scrollbar {
  display: none;
}
section.post-overlay-container div.post-overlay form .alert-staff-container, section.directory-overlay-container div.post-overlay form .alert-staff-container {
  position: relative;
}
section.post-overlay-container div.post-overlay form .alert-staff-container .autocomplete-dropdown, section.directory-overlay-container div.post-overlay form .alert-staff-container .autocomplete-dropdown {
  width: 100%;
}

@media screen and (min-width: 500px) {
  div.post-form-bottom {
    text-align: right;
  }
}

.filter-overlay-button {
  max-width: 50px;
}

div.attachment-buttons {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
@media screen and (min-width: 500px) {
  div.attachment-buttons {
    float: left;
  }
}
div.attachment-buttons label {
  display: flex !important;
  margin-left: 1.4em;
  cursor: pointer;
}
div.attachment-buttons label img {
  width: 30px;
}
div.attachment-buttons label svg {
  width: 30px;
}
div.attachment-buttons label svg circle, div.attachment-buttons label svg path, div.attachment-buttons label svg rect, div.attachment-buttons label svg polygon {
  fill: #8c959d;
  transition: all ease-in-out 0.4s;
}
div.attachment-buttons label.active svg circle, div.attachment-buttons div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > label#seven-day-label svg circle, div.leaderboard div.attachment-buttons #seven-day-switch:checked ~ .lb-switch-labels > label#seven-day-label svg circle,
div.attachment-buttons div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > label#thirty-day-label svg circle,
div.leaderboard div.attachment-buttons #thirty-day-switch:checked ~ .lb-switch-labels > label#thirty-day-label svg circle,
div.attachment-buttons div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > label#YTD-label svg circle,
div.leaderboard div.attachment-buttons #YTD-switch:checked ~ .lb-switch-labels > label#YTD-label svg circle, div.attachment-buttons label.active svg path, div.attachment-buttons div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > label#seven-day-label svg path, div.leaderboard div.attachment-buttons #seven-day-switch:checked ~ .lb-switch-labels > label#seven-day-label svg path,
div.attachment-buttons div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > label#thirty-day-label svg path,
div.leaderboard div.attachment-buttons #thirty-day-switch:checked ~ .lb-switch-labels > label#thirty-day-label svg path,
div.attachment-buttons div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > label#YTD-label svg path,
div.leaderboard div.attachment-buttons #YTD-switch:checked ~ .lb-switch-labels > label#YTD-label svg path, div.attachment-buttons label.active svg polygon, div.attachment-buttons div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > label#seven-day-label svg polygon, div.leaderboard div.attachment-buttons #seven-day-switch:checked ~ .lb-switch-labels > label#seven-day-label svg polygon,
div.attachment-buttons div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > label#thirty-day-label svg polygon,
div.leaderboard div.attachment-buttons #thirty-day-switch:checked ~ .lb-switch-labels > label#thirty-day-label svg polygon,
div.attachment-buttons div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > label#YTD-label svg polygon,
div.leaderboard div.attachment-buttons #YTD-switch:checked ~ .lb-switch-labels > label#YTD-label svg polygon, div.attachment-buttons label:hover svg circle, div.attachment-buttons label:hover svg path, div.attachment-buttons label:hover svg polygon {
  fill: #003A6D;
}
div.attachment-buttons h3 {
  margin: 0;
}

.exit-modal {
  z-index: 1;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.exit-modal img {
  width: 30px;
}

.loading-text {
  font-weight: 600;
  font-size: 1.25em;
  margin-left: 1em;
  /* text-align: center;
  padding: 5em 3em 3em;
  font-size: 1.25em; */
}
.loading-text.hide {
  display: none;
}
.loading-text.completed {
  color: #39B54A;
}

input.show-input.media:checked ~ .hidden-input-container.media {
  display: inline-block;
}

input.show-input.docs:checked ~ .hidden-input-container.docs {
  display: inline-block;
}

input.show-input.links:checked ~ .hidden-input-container.links {
  display: inline-block;
}

.show-input, .hidden-input-container {
  display: none;
}

.hidden-input-container input {
  margin: 0.5em 0;
}
.hidden-input-container label + input {
  margin: 0 0 0.5em;
}

input:disabled[type=text] {
  background-color: #d6dee3;
}

.overlay-list {
  font-size: 90%;
  overflow: scroll;
  background-color: #d6dee3;
  line-height: 2;
  border-radius: 12px;
  padding: 0.25em 0.75em;
  margin-bottom: 1.25em;
}
@media screen and (max-width: 500px) {
  .overlay-list {
    padding-right: 0.65em;
  }
}
.overlay-list .overlay-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.35em;
}
.overlay-list .overlay-list-item .item-title {
  flex: auto;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 0.5em;
}
@media screen and (max-width: 500px) {
  .overlay-list .overlay-list-item .item-title {
    font-size: 90%;
  }
}
.overlay-list .overlay-list-item select {
  width: 130px;
  height: auto;
  margin-bottom: 0;
  transition: all 0.25s ease;
}
@media screen and (max-width: 500px) {
  .overlay-list .overlay-list-item select {
    width: 100px;
  }
}
.overlay-list .overlay-list-item select:has(+ span.delete-checkbox > input[type=checkbox]:checked) {
  width: 72px;
  opacity: 0.5;
}
.overlay-list .overlay-list-item span.delete-checkbox {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-left: 1em;
}
@media screen and (max-width: 500px) {
  .overlay-list .overlay-list-item span.delete-checkbox {
    padding-left: 0.5em;
  }
}
.overlay-list .overlay-list-item span.delete-checkbox input[type=checkbox]:checked + label > svg {
  opacity: 1;
  transform: scale(1.15);
}
.overlay-list .overlay-list-item span.delete-checkbox label {
  display: flex;
  align-items: center;
  padding-left: 0;
}
.overlay-list .overlay-list-item span.delete-checkbox label svg {
  opacity: 0.45;
  transform: scale(0.9);
  transition: all 0.25s ease;
}

.notification-overlay {
  position: fixed;
  z-index: 100;
  max-width: 700px;
  margin: 0 auto;
  padding: 0.5em 1em;
  left: 0;
  right: 0;
  border-radius: 12px;
  background-color: white;
  color: #636b72;
  font-weight: 600;
  font-size: 1.1em;
  box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.125);
  bottom: -5em;
  transition: none;
}
@media screen and (max-width: 1024px) {
  .notification-overlay {
    left: 1em;
    right: 5.5em;
  }
}
.notification-overlay.active, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .notification-overlay#seven-day-label,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .notification-overlay#thirty-day-label,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .notification-overlay#YTD-label {
  animation: notification-slide-in-out 3s cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
}

@keyframes notification-slide-in-out {
  0% {
    bottom: -5em;
    opacity: 0;
  }
  10% {
    bottom: 1em;
    opacity: 1;
  }
  90% {
    bottom: 1em;
    opacity: 1;
  }
  100% {
    bottom: -5em;
    opacity: 0;
  }
}
.loading-overlay {
  display: none;
  border-radius: 12px;
  position: absolute;
  /* width: 100%; */
  box-sizing: border-box;
  /* height: 100%; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* display: flex; */
  text-align: center;
  padding-top: 8em;
  z-index: 10;
  background-color: rgba(220, 220, 220, 0.7);
}
.loading-overlay.active, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .loading-overlay#seven-day-label,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .loading-overlay#thirty-day-label,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .loading-overlay#YTD-label {
  display: block;
  pointer-events: all;
}
.loading-overlay.active .post-upload-progress-container, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > .loading-overlay#seven-day-label .post-upload-progress-container,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > .loading-overlay#thirty-day-label .post-upload-progress-container,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > .loading-overlay#YTD-label .post-upload-progress-container {
  display: block;
}
.loading-overlay .post-upload-progress-container {
  display: none;
  z-index: 10;
  position: relative;
  text-align: center;
  margin-right: 2em;
  margin-left: 2em;
  /* progress::-webkit-progress-bar {
      background-color: #eee;
      border-radius: 6px;
  } */
}
.loading-overlay .post-upload-progress-container progress::-webkit-progress-value {
  background-color: #4caf50;
}
.loading-overlay .post-upload-progress-container progress::-moz-progress-bar {
  background-color: #4caf50;
}
.loading-overlay .post-upload-progress-container progress {
  color: #4caf50; /* some browsers use this */
}

/* *****QUESTION: What does this belong with? Should be a part of posts section somewhere below */
.post-checked {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 0.9em;
}

/* .likes-hover-container:has(~ .check-count:hover) > span.likes-hover {
    opacity: 1;
} */
/* OPTIMIZE: might be a specialized button not combine with icon-button? */
.icon-button-naked.check-button, .icon-button-naked.checked-indicator {
  width: 26px;
  height: 26px;
  margin-right: 0.5em;
}
.icon-button-naked.check-button[data-checked=checked], .icon-button-naked.checked-indicator[data-checked=checked] {
  cursor: initial;
}
.icon-button-naked.check-button[data-checked=checked] svg path, .icon-button-naked.check-button[data-checked=checked] svg circle, .icon-button-naked.check-button[data-checked=checked] svg rect, .icon-button-naked.checked-indicator[data-checked=checked] svg path, .icon-button-naked.checked-indicator[data-checked=checked] svg circle, .icon-button-naked.checked-indicator[data-checked=checked] svg rect {
  fill: #003A6D !important;
}
.icon-button-naked.check-button[data-checked=checked]:hover svg, .icon-button-naked.checked-indicator[data-checked=checked]:hover svg {
  transform: none;
}

.edit-links:has(.check-button[data-checked=checked]) .post-likes .like-button[data-vote=liked] {
  cursor: initial;
}
.edit-links:has(.check-button[data-checked=checked]) .post-likes .like-button[data-vote=liked]:hover svg {
  transform: none;
}

/* ***** O P T I M I Z E : Checks and likes function largely the same, can't this be combined into one styling? */
.post-likes {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 0.9em;
}

.like-button.icon-button-naked {
  width: 27px;
  height: 27px;
}

.like-button[data-vote=liked] svg rect, .like-button[data-vote=liked] svg circle, .like-button[data-vote=liked] svg path, .like-button[data-vote=liked]:hover svg rect, .like-button[data-vote=liked]:hover svg circle, .like-button[data-vote=liked]:hover svg path {
  fill: #003A6D !important;
}

.like-count, .check-count {
  font-weight: 600;
  color: #003A6D;
  padding: 0.25em 0.4em;
  margin-left: -7px;
  position: relative;
  cursor: pointer;
  text-decoration: underline;
}
.like-count:hover ~ div .likes-hover, .check-count:hover ~ div .likes-hover {
  opacity: 1;
}

.top-info:has(.upvotes:hover) .likes-hover:not(.dislikes) {
  opacity: 1;
}

.top-info:has(.downvotes:hover) .likes-hover.dislikes {
  opacity: 1;
}

span.likes-hover {
  transition: opacity 0.25s ease;
  display: inline-block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  transform: none;
  height: auto;
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  /* OPTIMIZE: What is this??? Why aren't we doing this with border radius? */
}
@media screen and (max-width: 768px) {
  span.likes-hover {
    overflow: scroll;
    z-index: 1;
  }
  span.likes-hover .likes-hover-inner {
    margin: 8em auto 3em;
    position: relative;
    background-color: #EDF3F7;
    border-radius: 12px;
    min-height: 20vh;
    width: 80vw;
    padding: 1.5em;
    box-sizing: border-box;
  }
}
@media screen and (min-width: 768px) {
  span.likes-hover {
    position: absolute;
    padding: 0.75em 1em;
    width: -moz-max-content;
    width: max-content;
    height: -moz-max-content;
    height: max-content;
    max-width: 160px !important;
    top: 115%;
    right: 50%;
    left: initial;
    z-index: 11;
    background-color: rgb(250, 250, 250);
    border-radius: 12px 0 12px 12px;
    box-shadow: 2px 3px 5px 1px rgba(0, 0, 0, 0.22);
  }
  span.likes-hover .head3 {
    display: none;
  }
  span.likes-hover .exit-modal {
    display: none;
  }
  span.likes-hover .likes-time {
    display: none;
  }
  span.likes-hover.idea {
    border-radius: 0 12px 12px 12px;
    left: 16px;
    top: 150%;
    right: initial;
  }
  span.likes-hover.idea.dislikes {
    left: 48px;
  }
}
span.likes-hover svg.corner {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-100%);
}
span.likes-hover svg.corner polygon {
  fill: rgb(250, 250, 250);
}
span.likes-hover .likes-name {
  color: #636b72;
  display: flex;
  align-items: center;
  font-weight: initial;
  margin-bottom: 0.5em;
}
span.likes-hover .likes-name .likes-profile {
  display: inline-block;
  width: 38px;
  height: 38px;
  margin-right: 0.75em;
  background-size: cover;
  background-position: center;
  border-radius: 50px;
}
span.likes-hover .likes-name .likes-time {
  flex: auto;
  text-align: right;
  color: #b0b7ba;
}
span.likes-hover .likes-name:last-child {
  margin-bottom: 0;
}
span.likes-hover .likes-name:last-child {
  margin-bottom: 2em;
}

.hover-switch {
  position: absolute;
  width: 0;
  pointer-events: none;
  opacity: 0;
}
.hover-switch:checked ~ .likes-hover {
  opacity: 1;
  pointer-events: all;
}

.feed-container {
  position: relative;
}

.edit-links {
  display: flex;
  align-items: center;
  color: #8c959d;
  margin-top: 0.3em;
  gap: 4px;
}
.edit-links a {
  color: #8c959d;
  cursor: pointer;
}
.edit-links .post-task-div {
  flex: auto;
  padding-left: 1em;
  /* padding-top: 0.5em;
  padding-bottom: 0.85em; */
}
@media screen and (max-width: 500px) {
  .edit-links .post-task-div {
    padding-left: 0.5em;
  }
}
.edit-links .post-task-div .post-task-btn {
  color: #39B54A;
  transition: all ease-in-out 0.4s;
}

.tabs-menu {
  position: relative;
}
@media screen and (max-width: 768px) {
  .tabs-menu {
    position: fixed; /* Always fixed */
    box-sizing: border-box;
    background-color: #EDF3F7;
    padding: calc(80px + var(--status-bar-height)) 20px 0;
    top: 0; /* Start at the top */
    left: 0;
    width: 100%; /* Full width */
    transition: transform 0.5s ease-out; /* Smooth transform transition */
    transform: translateY(-101%); /* Start hidden off the screen */
    z-index: 1; /* Ensure it's above other content */
  }
  .tabs-menu.show {
    transform: translateY(0);
    /* Slide in */
  }
  .tabs-menu.compact {
    box-shadow: 3px 3px 1em 0.4em rgba(0, 0, 0, 0.05);
  }
  .tabs-menu.compact a.logo {
    width: 170px;
    height: 41px;
    padding: 5px 0;
    margin-bottom: 13px;
  }
}
@media screen and (max-width: 768px) and (min-width: 1024px) {
  .tabs-menu.compact {
    font-size: 0.85em;
  }
  .tabs-menu.compact .menu {
    /* margin-top: 15px;
    margin-bottom: 15px; */
    margin-top: 24px;
    margin-bottom: 24px;
  }
}
.tabs-menu > div {
  padding: 0;
}
.tabs-menu .task-button {
  display: none;
}
.tabs-menu.show-tasks-button .post-button {
  display: none;
}
.tabs-menu.show-tasks-button .task-button {
  display: inline-block;
}

input.post-button {
  background-color: #39B54A;
}

html:has(.scrollable-container) {
  scrollbar-width: none;
}

.scrollable-container {
  /* top: 80px;
  bottom: -100px;
  left: 0;
  right: 0;

  position: absolute;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0 20px;
  border: 50px;
  // Hides scrollbar but keeps scroll function
  &::-webkit-scrollbar {
      display: none;
  } */
}
@media screen and (max-width: 768px) {
  .scrollable-container {
    top: 0px;
    padding-top: 100px;
  }
}
.scrollable-container.admin-results-table {
  top: 100px;
}
@media screen and (max-width: 768px) {
  .scrollable-container.admin-results-table {
    top: 0px;
    padding-top: 130px;
  }
  .scrollable-container.admin-results-table.lower {
    padding-top: 170px;
  }
}

span.vertical-week {
  width: -moz-max-content;
  width: max-content;
  display: inline-block;
  text-align: right;
  text-transform: uppercase;
  transform-origin: 0 0;
  margin-bottom: 5em;
  transform: rotate(-90deg) translate(-100%, -130%);
  color: #8c959d;
  font-weight: 600;
  position: sticky;
  top: 7em;
  /* &.static {
      transform: rotate(-90deg) translateX(-100%);
      left:0.9em;
      top:2.25em;
      position: absolute;
  } */
}
@media screen and (max-width: 768px) {
  span.vertical-week {
    transform: rotate(-90deg) translate(-100%, -95%);
    top: calc(12.5em + var(--status-bar-height));
  }
}
span.vertical-week.no-sticky {
  position: static;
}

span.vertical-week + div {
  margin-top: -6.75em;
}

div.group-container, div.alerts, div.week, div.leaderboard {
  position: relative;
  margin-bottom: 2em;
  min-height: 120px;
  background: linear-gradient(90deg, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0) 80%);
  border-radius: 12px;
  padding: 1.5em 0 1.5em 3em;
}
@media screen and (max-width: 768px) {
  div.group-container, div.alerts, div.week, div.leaderboard {
    padding-left: 1.25em;
  }
}

div.leaderboard #seven-day-switch:not(:checked) ~ #seven-day-lb-container,
div.leaderboard #thirty-day-switch:not(:checked) ~ #thirty-day-lb-container,
div.leaderboard #YTD-switch:not(:checked) ~ #YTD-lb-container {
  display: none;
}
div.leaderboard .lb-ranking-switch {
  display: none;
}
div.leaderboard .lb-columns-container, div.leaderboard .lb-table-container {
  padding: 1em 0;
}
@media screen and (min-width: 768px) {
  div.leaderboard .lb-columns-container {
    padding-right: 0.5em;
  }
  div.leaderboard .lb-table-container {
    padding-left: 0.5em;
  }
}
div.leaderboard table.lb-table {
  width: 100%;
  border-collapse: collapse;
}
div.leaderboard table.lb-table tr.lb-my-rank td {
  color: #003A6D;
}
div.leaderboard table.lb-table tr.lb-my-rank td ul.lb-stats > li svg polygon, div.leaderboard table.lb-table tr.lb-my-rank td ul.lb-stats > li svg path, div.leaderboard table.lb-table tr.lb-my-rank td ul.lb-stats > li svg circle, div.leaderboard table.lb-table tr.lb-my-rank td ul.lb-stats > li svg rect {
  fill: #003A6D;
}
div.leaderboard table.lb-table tr:has(+ tr) td {
  border-bottom: 2px solid #EDF3F7;
}
div.leaderboard table.lb-table td {
  color: #8c959d;
  padding: 0.5em;
}
div.leaderboard table.lb-table td.lb-rank-cell {
  width: 50px;
  min-width: -moz-fit-content;
  min-width: fit-content;
  box-sizing: border-box;
}
div.leaderboard table.lb-table td:first-child {
  padding-left: 0;
}
div.leaderboard table.lb-table td:last-child {
  text-align: right;
  padding-right: 0;
}
div.leaderboard table.lb-table td.lb-portrait-cell {
  width: 24px;
  text-align: center;
  vertical-align: middle;
  padding: 0.5em 0.5em 0.5em 0;
}
div.leaderboard table.lb-table .lb-table-xp, div.leaderboard table.lb-table .lb-table-xp-value {
  line-height: 1.2em;
  font-weight: 500;
}
div.leaderboard .lb-points {
  padding-bottom: 30px;
  font-weight: 500;
}
div.leaderboard div.lb-portrait {
  display: inline-block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
div.leaderboard .lb-name {
  padding: 0 0.5em;
  line-height: 1em;
  margin-bottom: 1em;
  font-weight: 700;
  color: white;
}
div.leaderboard .lb-columns {
  display: flex;
  align-items: end;
  padding-top: 1em;
  overflow: hidden;
}
div.leaderboard .lb-columns .lb-column {
  flex: 1;
  text-align: center;
  min-height: -moz-fit-content;
  min-height: fit-content;
}
div.leaderboard .lb-columns .lb-column .lb-contents {
  background: linear-gradient(rgb(0, 58, 109) 15%, rgba(0, 58, 109, 0) 75%);
  height: 100%;
  padding-bottom: 2em;
}
div.leaderboard .lb-columns .lb-column .lb-contents .lb-portrait {
  margin-top: -30px;
  width: 60px;
  height: 60px;
}
div.leaderboard .lb-columns .lb-column .lb-contents .lb-rank {
  color: #003A6D;
}
div.leaderboard .lb-columns .lb-column .lb-contents ul.lb-stats {
  color: #003A6D;
  margin-bottom: 0.5em;
}
div.leaderboard .lb-columns .lb-column .lb-contents ul.lb-stats > li svg polygon, div.leaderboard .lb-columns .lb-column .lb-contents ul.lb-stats > li svg path, div.leaderboard .lb-columns .lb-column .lb-contents ul.lb-stats > li svg circle, div.leaderboard .lb-columns .lb-column .lb-contents ul.lb-stats > li svg rect {
  fill: white;
}
div.leaderboard .lb-columns .lb-column.first-place {
  padding-left: 0.2em;
  padding-right: 0.2em;
  height: 240px;
  order: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
div.leaderboard .lb-columns .lb-column.first-place .lb-contents {
  background: linear-gradient(rgb(0, 58, 109) 15%, rgba(0, 58, 109, 0) 75%);
  border-radius: 12px 12px 0 0;
}
div.leaderboard .lb-columns .lb-column.first-place.fade-in {
  opacity: 1;
  transform: translateY(0);
}
div.leaderboard .lb-columns .lb-column.second-place {
  padding-left: 0;
  padding-right: 0.2em;
  height: 200px;
  order: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
div.leaderboard .lb-columns .lb-column.second-place .lb-contents {
  background: linear-gradient(rgb(193, 35, 49) 30%, rgba(193, 35, 49, 0) 87.5%);
  border-radius: 12px 0 0 0;
}
div.leaderboard .lb-columns .lb-column.second-place.fade-in {
  opacity: 1;
  transform: translateY(0);
}
div.leaderboard .lb-columns .lb-column.third-place {
  padding-left: 0.2em;
  padding-right: 0;
  height: 160px;
  order: 3;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
div.leaderboard .lb-columns .lb-column.third-place .lb-contents {
  background: linear-gradient(rgb(131, 141, 150) 30%, rgba(131, 141, 150, 0));
  border-radius: 0 12px 0 0;
}
div.leaderboard .lb-columns .lb-column.third-place.fade-in {
  opacity: 1;
  transform: translateY(0);
}
div.leaderboard .lb-column + .lb-column {
  padding-left: 0.2em;
}
div.leaderboard .lb-column:has(~ .lb-column) {
  padding-right: 0.2em;
}
div.leaderboard ul.lb-stats {
  display: flex;
  justify-content: center;
  text-align: center;
  list-style: none;
  /* color: $clr-gray; */
  font-weight: 500;
  padding-left: 0;
  margin: 0;
}
div.leaderboard ul.lb-stats > li {
  flex: 0;
  margin: 0;
}
div.leaderboard ul.lb-stats > li .number {
  display: block;
  line-height: 0.75em;
}
div.leaderboard ul.lb-stats > li svg {
  width: 14px;
  height: 14px;
}
div.leaderboard ul.lb-stats > li svg polygon, div.leaderboard ul.lb-stats > li svg path, div.leaderboard ul.lb-stats > li svg circle, div.leaderboard ul.lb-stats > li svg rect {
  fill: #8c959d;
}
div.leaderboard ul.lb-stats > li + li {
  margin-left: 6.5px;
}
div.leaderboard .lb-rank {
  font-size: 1.5em;
  font-weight: 700;
}

.author-name {
  font-weight: 600;
  align-self: center;
  text-transform: uppercase;
  margin-right: 0.5em;
  color: #636b72;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .author-name {
    font-size: 85%;
  }
}

div.week div.post {
  position: relative;
  scroll-margin-top: 140px;
  margin-bottom: 4.5em;
}
@media screen and (max-width: 768px) {
  div.week div.post {
    scroll-margin-top: 175px;
  }
}
div.week div.post img.alert-icon, div.week div.post img.seen-alert-icon {
  display: none;
  width: 32px;
  margin-top: 4px;
  margin-left: 4px;
  /* position: absolute;
  right: 0;
  top: 50%;
  transform: translate(130%, -50%); */
}
@media screen and (max-width: 768px) {
  div.week div.post img.alert-icon, div.week div.post img.seen-alert-icon {
    display: none !important;
  }
}
div.week div.post.has-alerts.my-alert img.alert-icon {
  display: inline-block;
}
div.week div.post.has-alerts.my-alert.seen img.alert-icon {
  display: none;
}
div.week div.post.has-alerts.my-alert.seen img.seen-alert-icon {
  display: inline-block;
}
div.week div.post .mobile-datestamp {
  font-style: italic;
  color: #8c959d;
  font-size: 90%;
  margin-top: 0.5em;
}
@media screen and (min-width: 500px) {
  div.week div.post .mobile-datestamp {
    display: none;
  }
}
div.week div.post div.post-description {
  box-sizing: border-box;
  padding-left: 1em;
  margin-top: 0.8em;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 500px) {
  div.week div.post div.post-description {
    padding-left: 0.5em;
  }
}
@media screen and (max-width: 500px) {
  div.week div.post.details .post-top {
    padding-left: 1em;
  }
}
div.week div.post.pinned .pin-button {
  background-color: #003A6D;
}
div.week div.post ul.file-attachments {
  list-style: none;
  margin-top: 1.5em;
  padding-left: 1em;
}
div.week div.post ul.file-attachments li {
  display: block;
}
div.week div.post:last-child {
  margin-bottom: 0;
}
div.week div.post .post-top {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 0.5em;
  color: #636b72;
  background-color: #d6dee3;
  border-radius: 30px;
  padding: 0 1em;
}
@media screen and (max-width: 500px) {
  div.week div.post .post-top {
    padding-left: 0;
  }
}
div.week div.post .post-top div.top-buttons {
  display: inline-block;
  flex: auto;
  text-align: right;
}
div.week div.post .post-top div.top-buttons .float-buttons {
  display: flex;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
div.week div.post .post-top div.top-buttons span.name {
  font-weight: 600;
  align-self: center;
  text-transform: uppercase;
  margin-right: 0.5em;
  color: #636b72;
}
@media screen and (max-width: 768px) {
  div.week div.post .post-top div.top-buttons span.name {
    font-size: 85%;
  }
}
div.week div.post .post-top div.top-info-inner {
  position: absolute;
  display: flex;
  align-items: center;
  top: 50%;
  transform: translateY(-50%);
  width: -moz-max-content;
  width: max-content;
}
div.week div.post .post-top div.top-info {
  flex: auto;
  display: inline-block;
  position: relative;
}
div.week div.post .post-top div.top-info .month {
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  div.week div.post .post-top div.top-info .month {
    font-size: 90%;
  }
}
div.week div.post .post-top div.top-info .day {
  font-weight: 700;
  color: white;
  background-color: #8c959d;
  padding: 4px 6px;
  border-radius: 50px;
}
@media screen and (max-width: 768px) {
  div.week div.post .post-top div.top-info .day {
    font-size: 90%;
  }
}
div.week div.post .post-top div.top-info a.project {
  background-color: #8c959d;
  padding: 0.35em 0.6em 0.4em;
  border-radius: 40px;
  color: white;
  text-wrap: nowrap;
}
div.week div.post .post-top div.top-info a.project:hover {
  background-color: #003A6D;
}
div.week div.post .post-top div.top-info span.top-date {
  padding-right: 6px;
}
@media screen and (max-width: 500px) {
  div.week div.post .post-top div.top-info span.top-date {
    display: none;
  }
}
div.week div.post .post-top div.top-info::after {
  content: "x";
  position: relative;
  opacity: 0;
  pointer-events: none;
}
div.week div.post .post-top:has(.vote-count) {
  padding-left: 0 !important;
  /* @media screen and (min-width: $scr-width-md) {
      div.top-info { .top-date { margin-left: 78px; } }
      //div.top-buttons { span.name { margin-right: 130px; } }
  }
  .top-info { .top-date { margin-left: 68px; } }
  //.top-buttons { span.name { margin-right: 110px; } } */
}
div.week div.post .image-post-top {
  display: flex;
  align-items: center;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0.75em 0 0 0.75em;
  /* left: 3.75em;
  right: 0.75em; */
  /* &:has(.vote-count) {
      @media screen and (min-width: $scr-width-md) {
          div.top-info { .top-date { margin-left: 78px; } }
          //div.top-buttons { span.name { margin-right: 148px; } }
      }
      .top-info { .top-date { margin-left: 68px; } }
      //.top-buttons { span.name { margin-right: 128px; } }
  } */
}
@media screen and (max-width: 768px) {
  div.week div.post .image-post-top {
    /* left: 2.5em;
    right: 0.5em; */
  }
}
div.week div.post .image-post-top div.top-buttons {
  flex: auto;
  text-align: right;
}
div.week div.post .image-post-top div.top-buttons .float-buttons {
  display: flex;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
div.week div.post .image-post-top div.top-buttons span.name {
  font-weight: 600;
  align-self: center;
  margin-right: 0.5em;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  div.week div.post .image-post-top div.top-buttons span.name {
    font-size: 85%;
  }
}
div.week div.post .image-post-top div.top-info-inner {
  position: absolute;
  display: flex;
  align-items: center;
  top: 50%;
  transform: translateY(-50%);
  width: -moz-max-content;
  width: max-content;
}
div.week div.post .image-post-top div.top-info {
  flex: auto;
  display: inline-block;
  position: relative;
}
div.week div.post .image-post-top div.top-info a.project {
  background-color: #8c959d;
  padding: 0.35em 0.6em 0.4em;
  border-radius: 40px;
  color: white;
  text-wrap: nowrap;
}
div.week div.post .image-post-top div.top-info a.project:hover {
  background-color: #003A6D;
}
div.week div.post .image-post-top div.top-info span.name {
  font-weight: 600;
  text-transform: uppercase;
  color: white;
}
@media screen and (max-width: 768px) {
  div.week div.post .image-post-top div.top-info span.name {
    font-size: 90%;
  }
}
div.week div.post .image-post-top div.top-info span.top-date {
  padding-right: 6px;
}
@media screen and (max-width: 500px) {
  div.week div.post .image-post-top div.top-info span.top-date {
    display: none;
  }
}
div.week div.post .image-post-top div.top-info .month {
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  div.week div.post .image-post-top div.top-info .month {
    font-size: 90%;
  }
}
div.week div.post .image-post-top div.top-info .day {
  font-weight: 700;
  color: white;
  background-color: #8c959d;
  padding: 4px 6px;
  border-radius: 50px;
}
@media screen and (max-width: 768px) {
  div.week div.post .image-post-top div.top-info .day {
    font-size: 90%;
  }
}
div.week div.post .image-post-top div.top-info::after {
  content: "x";
  position: relative;
  opacity: 0;
  pointer-events: none;
}
div.week div.post div.image-grid-container {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
div.week div.post div.image-grid-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 85%;
  background: linear-gradient(rgba(0, 0, 0, 0.4) 35%, rgba(0, 0, 0, 0) 100%);
  transition: background-color 0.2s ease;
  pointer-events: none;
}
div.week div.post div.image-grid-container div.image-grid {
  position: relative;
}
div.week div.post div.image-grid-container div.image-grid div.image-object-container > a.download-button {
  display: none;
  position: absolute;
  left: 0.5em;
  bottom: 0.5em;
  margin: 0;
  border-radius: 0;
  border: 1.5px white solid;
  z-index: 1;
  opacity: 0.75;
  padding: 0.5em 0.5em 0.1em;
  border-radius: 5px;
  transition: 0.25s ease;
}
div.week div.post div.image-grid-container div.image-grid div.image-object-container > a.download-button img {
  width: 20px;
}
div.week div.post div.image-grid-container div.image-grid div.image-object-container > a.download-button:hover {
  border-color: black;
  background-color: black;
  opacity: 1;
  transform: scale(1.1);
}
div.week div.post div.image-grid-container div.image-grid > div.image-object-container {
  position: relative;
  padding: 0;
}
div.week div.post div.image-grid-container div.image-grid > div.image-object-container > div.image-object {
  box-sizing: border-box;
  padding: 0 0 360px;
  background-image: url(../_temp/quote-back.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  div.week div.post div.image-grid-container div.image-grid > div.image-object-container > div.image-object {
    padding: 0 0 280px !important;
  }
}
@media screen and (max-width: 500px) {
  div.week div.post div.image-grid-container div.image-grid > div.image-object-container > div.image-object {
    padding: 0 0 200px !important;
  }
}
div.week div.post div.image-grid-container div.image-grid > div.image-object-container > div.image-object::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
  transition: background-color 0.2s ease;
}
div.week div.post div.image-grid-container div.image-grid > div.image-object-container > div.image-object:hover::after {
  background-color: rgba(40, 40, 40, 0.5);
}
div.week div.post div.image-grid-container div.image-grid div.image-subgrid {
  padding: 0;
}
div.week div.post div.image-grid-container div.image-grid div.image-subgrid > div.pure-g > div.image-object-container {
  position: relative;
  padding: 0;
}
div.week div.post div.image-grid-container div.image-grid div.image-subgrid > div.pure-g > div.image-object-container:last-child:has(div.remaining-images) div.image-object:hover::after {
  background-color: rgba(40, 40, 40, 0.55);
}
div.week div.post div.image-grid-container div.image-grid div.image-subgrid > div.pure-g > div.image-object-container:last-child:has(div.remaining-images) div.image-object::after {
  background-color: rgba(40, 40, 40, 0.4);
}
div.week div.post div.image-grid-container div.image-grid div.image-subgrid > div.pure-g > div.image-object-container:last-child:has(div.remaining-images) div.image-object > div.remaining-images {
  display: block;
}
div.week div.post div.image-grid-container div.image-grid div.image-subgrid > div.pure-g > div.image-object-container > div.image-object {
  box-sizing: border-box;
  padding: 0 0 180px;
  background-image: url(../_temp/quote-back.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}
div.week div.post div.image-grid-container div.image-grid div.image-subgrid > div.pure-g > div.image-object-container > div.image-object::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
  transition: background-color 0.2s ease;
}
div.week div.post div.image-grid-container div.image-grid div.image-subgrid > div.pure-g > div.image-object-container > div.image-object:hover::after {
  background-color: rgba(40, 40, 40, 0.5);
}
div.week div.post div.image-grid-container div.image-grid div.image-subgrid > div.pure-g > div.image-object-container > div.image-object div.remaining-images {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
  font-size: 250%;
  transform: translate(-50%, -60%);
  z-index: 2;
  letter-spacing: 2px;
}
div.week div.post div.image-grid-container div.image-grid div.image-subgrid.four-items div.image-object {
  padding: 0 0 180px !important;
}
@media screen and (max-width: 768px) {
  div.week div.post div.image-grid-container div.image-grid div.image-subgrid.four-items div.image-object {
    padding: 0 0 120px !important;
  }
}
div.week div.post div.image-grid-container div.image-grid div.image-subgrid.three-items div.image-object {
  padding: 0 0 360px !important;
}
@media screen and (max-width: 768px) {
  div.week div.post div.image-grid-container div.image-grid div.image-subgrid.three-items div.image-object {
    padding: 0 0 120px !important;
  }
}
div.week div.post div.image-grid-container div.image-grid div.hidden-remaining-images {
  display: none;
}
div.week div.post form.add-comment, div.week div.post div.comment {
  position: relative;
  margin-left: 60px;
  box-sizing: border-box;
  margin-top: 0.75em;
}
@media screen and (min-width: 1024px) {
  div.week div.post form.add-comment, div.week div.post div.comment {
    margin-left: 48px;
  }
}
div.week div.post form.add-comment:before, div.week div.post div.comment:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: -30px;
  border-bottom: 1px #003A6D solid;
  border-left: 1px #003A6D solid;
  border-radius: 0 0 0 8px;
  border-width: 2px;
}
div.week div.post div.comment {
  color: #8c959d;
}
div.week div.post div.comment div.comment-top {
  display: flex;
  align-items: center;
  font-weight: 600;
}
div.week div.post div.comment div.comment-top span.name {
  flex: auto;
  text-transform: uppercase;
  font-size: 110%;
}
div.week div.post div.comment div.comment-top span.date {
  float: right;
}
div.week div.post div.comment div.comment-top a.delete-comment-btn {
  margin-left: 0.35em;
}
div.week div.post div.comment p {
  padding: 0;
  margin: 0;
}
div.week div.post div.comment:before {
  border-color: #8c959d;
}
div.week div.post ul.file-attachments + div.comment, div.week div.post ul.file-attachments + form.add-comment {
  margin-top: 2em;
}
div.week div.post form.add-comment textarea.comment-textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px #8c959d solid;
  border-radius: 12px;
  padding: 0.5em;
  margin-bottom: 0.25em;
}
div.week div.post form.add-comment button {
  margin-right: 0.5em;
}
.lazy {
  background-image: none !important;
}

.scroll-to-top-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}
.scroll-to-top-container .scroll-to-top-button {
  right: 1em;
  bottom: 1em;
  pointer-events: all;
  position: absolute;
  z-index: 1;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 1024px) {
  .scroll-to-top-container .scroll-to-top-button {
    bottom: 2em;
  }
}
.scroll-to-top-container .scroll-to-top-button.off-screen {
  transform: translateY(100%);
  bottom: 0;
}
.scroll-to-top-container .scroll-to-top-button:hover {
  transform: translateY(-0.65em);
}

div.tasks {
  overflow: hidden;
  position: relative;
  margin-bottom: 2em;
  min-height: 400px;
  background: linear-gradient(90deg, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0) 80%);
  border-radius: 12px;
  padding: 1em 0 1.5em 3em;
}
div.tasks .pure-g > div {
  padding: 0;
}
@media screen and (max-width: 500px) {
  div.tasks {
    background: linear-gradient(90deg, rgb(255, 255, 255) 10%, rgba(255, 255, 255, 0) 60%);
  }
}
div.tasks input.tasks-filter {
  display: none;
}
div.tasks input.tasks-filter.my-tasks:checked ~ table.tasks-table tr.tasks-row.my-task:not(.completed-task) {
  display: table-row;
}
div.tasks input.tasks-filter.my-tasks:checked ~ table.tasks-table tr.tasks-row.hide-when-not-my-tasks {
  display: table-row;
}
div.tasks input.tasks-filter.my-tasks:checked ~ div.mobile-tasks-tables > table.my-task:not(.completed-task) {
  display: table;
}
div.tasks input.tasks-filter.my-tasks:checked ~ div.mobile-tasks-tables > table.my-task.hide-when-not-my-tasks {
  display: table;
}
div.tasks input.tasks-filter.all-tasks:checked ~ table.tasks-table tr.tasks-row:not(.completed-task) {
  display: table-row;
}
div.tasks input.tasks-filter.all-tasks:checked ~ table.tasks-table tr.tasks-row.hide-when-not-my-tasks {
  display: none;
}
div.tasks input.tasks-filter.all-tasks:checked ~ div.mobile-tasks-tables > table:not(.completed-task) {
  display: table;
}
div.tasks input.tasks-filter.all-tasks:checked ~ div.mobile-tasks-tables > table.my-task.hide-when-not-my-tasks {
  display: none;
}
div.tasks input.tasks-filter.completed-tasks:checked ~ table.tasks-table tr.tasks-row.completed-task {
  display: table-row;
}
div.tasks input.tasks-filter.completed-tasks:checked ~ table.tasks-table tr.tasks-row.hide-when-not-my-tasks {
  display: none;
}
div.tasks input.tasks-filter.completed-tasks:checked ~ div.mobile-tasks-tables > table.completed-task {
  display: table;
}
div.tasks input.tasks-filter.completed-tasks:checked ~ div.mobile-tasks-tables > table.my-task.hide-when-not-my-tasks {
  display: none;
}
div.tasks table.tasks-table {
  width: 100%;
  border-collapse: collapse;
}
@media screen and (max-width: 768px) {
  div.tasks table.tasks-table {
    display: none;
  }
}
div.tasks table.tasks-table tr.tasks-row {
  display: none;
}
div.tasks table.tasks-table tr.tasks-row:last-child td {
  border-bottom: none;
}
div.tasks table.tasks-table tr.tasks-row td:has(input.task-checkbox:checked) ~ td {
  opacity: 0.5;
}
div.tasks table.tasks-table tr.tasks-row.has-subtasks td.dropdown-button-cell a.subtasks-arrow img {
  display: inline-block;
}
div.tasks table.tasks-table tr.tasks-row:has(+ tr.subtasks-row.open) td {
  border-bottom: none;
}
div.tasks table.tasks-table tr.tasks-row td {
  position: relative;
  padding-top: 1em;
  padding-bottom: 1em;
  border-bottom: 2px #EDF3F7 solid;
}
div.tasks table.tasks-table tr.tasks-row td span.due-date {
  top: 50%;
  transform: translate(-50%, -50%);
}
div.tasks table.tasks-table tr.tasks-row td.checkbox-cell {
  width: 30px;
}
div.tasks table.tasks-table tr.tasks-row td.dropdown-button-cell {
  width: 30px;
  text-align: right;
}
div.tasks table.tasks-table tr.tasks-row td.dropdown-button-cell a.subtasks-arrow {
  padding: 0.25em;
  cursor: pointer;
}
div.tasks table.tasks-table tr.tasks-row td.dropdown-button-cell a.subtasks-arrow img {
  display: none;
  margin-bottom: -2px;
  width: 18px;
  transition: all ease-in-out 0.4s;
  transform: rotate(-90deg);
}
div.tasks table.tasks-table tr.tasks-row td.dropdown-button-cell a.subtasks-arrow img.open {
  transform: rotate(0deg);
}
div.tasks table.tasks-table tr.tasks-row td.due-date-cell {
  width: 44px;
}
div.tasks table.tasks-table tr.tasks-row td.description-cell {
  padding-left: 0.75em;
  padding-right: 0.5em;
}
div.tasks table.tasks-table tr.tasks-row td.description-cell input.description-checkbox {
  display: none;
}
div.tasks table.tasks-table tr.tasks-row td.description-cell input.description-checkbox:checked ~ div.short-desc {
  display: none;
}
div.tasks table.tasks-table tr.tasks-row td.description-cell input.description-checkbox:checked ~ div.full-desc {
  display: block;
}
div.tasks table.tasks-table tr.tasks-row td.description-cell div.full-desc {
  display: none;
}
div.tasks table.tasks-table tr.tasks-row td .job-number {
  font-weight: 600;
}
div.tasks table.tasks-table tr.tasks-row td.job-name-cell {
  padding: 0 0.75em;
  white-space: nowrap;
  min-width: -moz-min-content;
  min-width: min-content;
  width: 1%;
}
div.tasks table.tasks-table tr.tasks-row td.status-cell {
  white-space: nowrap;
  min-width: -moz-min-content;
  min-width: min-content;
  width: 1%;
  font-weight: 600;
  padding: 0 0.75em;
  cursor: pointer;
}
div.tasks table.tasks-table tr.tasks-row td.status-cell .circle {
  margin-right: 0.5em;
}
div.tasks table.tasks-table tr.tasks-row td.priority-cell {
  cursor: pointer;
}
div.tasks table.tasks-table tr.tasks-row td.priority-cell .svg-wrapper {
  width: 18px;
  height: 18px;
  display: flex;
  margin-right: 4px;
}
div.tasks table.tasks-table tr.tasks-row td.supervisor-cell {
  min-width: -moz-min-content;
  min-width: min-content;
  width: 1%;
  padding: 0 0.75em;
  white-space: nowrap;
}
div.tasks table.tasks-table tr.tasks-row td .assigner-name {
  color: #b0b7ba;
}
div.tasks table.tasks-table tr.tasks-row td.expand-button-cell {
  text-align: center;
  width: 44px;
}
div.tasks table.tasks-table tr.tasks-row td.expand-button-cell .edit-task-btn {
  float: right;
}
div.tasks table.tasks-table tr.subtasks-row {
  display: none;
}
div.tasks table.tasks-table tr.subtasks-row.open {
  display: table-row;
}
div.tasks table.tasks-table tr.subtasks-row table.subtasks-table tr > td:has(input.task-checkbox:checked) ~ td {
  opacity: 0.5;
}
div.tasks table.tasks-table tr.subtasks-row table.subtasks-table tr td {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
div.tasks table.tasks-table tr.subtasks-row table.subtasks-table tr td div.checkbox-stylized {
  padding-right: 0.5em;
}
div.tasks ul.clickable-vertical {
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin: 0;
  text-align: right;
  text-transform: uppercase;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%, -105%);
  color: #8c959d;
  font-weight: 600;
  /* left:0.9em;
  top:2em;
  position: sticky; */
  width: -moz-max-content;
  width: max-content;
  position: relative;
  top: 0.75em;
  left: -0.5em;
}
div.tasks ul.clickable-vertical li {
  box-sizing: border-box;
  display: inline-block;
  margin-left: 1.25em;
  color: #b0b7ba;
}
div.tasks ul.clickable-vertical li label {
  cursor: pointer;
}
div.tasks ul.clickable-vertical li label.active, div.tasks ul.clickable-vertical li div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > label#seven-day-label, div.leaderboard div.tasks ul.clickable-vertical li #seven-day-switch:checked ~ .lb-switch-labels > label#seven-day-label,
div.tasks ul.clickable-vertical li div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > label#thirty-day-label,
div.leaderboard div.tasks ul.clickable-vertical li #thirty-day-switch:checked ~ .lb-switch-labels > label#thirty-day-label,
div.tasks ul.clickable-vertical li div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > label#YTD-label,
div.leaderboard div.tasks ul.clickable-vertical li #YTD-switch:checked ~ .lb-switch-labels > label#YTD-label {
  color: #636b72;
}
div.tasks div.mobile-tasks-tables {
  display: none;
}
@media screen and (max-width: 768px) {
  div.tasks div.mobile-tasks-tables {
    display: block;
  }
  div.tasks div.mobile-tasks-tables .priority-cell .menuItem::after {
    content: attr(data-title);
    position: relative;
  }
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table {
  display: none;
  position: relative;
  margin: 0 0 1.5em;
  border-collapse: collapse;
  width: 100%;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table:has(+ .mobile-tasks-table)::after {
  content: "";
  background-color: #d6dee3;
  height: 2px;
  width: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.75em;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table thead th {
  text-align: left;
  font-weight: 400;
  font-size: 95%;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table thead th a {
  color: #8c959d;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table thead th a:hover {
  color: #003A6D;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table td:nth-child(1), div.tasks div.mobile-tasks-tables table.mobile-tasks-table td:nth-child(3) {
  width: 30px;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table tr.flex-row > td > * {
  display: flex;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table tbody tr:nth-child(1) td {
  padding: 0;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table .task-title {
  font-weight: 600;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table p {
  margin: 0;
  line-height: 1.5;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table .status-cell {
  white-space: nowrap;
  min-width: -moz-min-content;
  min-width: min-content;
  font-weight: 600;
  padding: 0 0.75em;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table .status-cell .circle {
  margin-right: 0.5em;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table .priority-cell {
  cursor: pointer;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table .priority-cell .svg-wrapper {
  width: 18px;
  height: 18px;
  display: flex;
  margin-right: 4px;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table label.expand-button {
  cursor: pointer;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table input.task-checkbox {
  display: none;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table input.description-checkbox {
  display: none;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table input.description-checkbox:checked ~ p.short-desc {
  display: none;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table input.description-checkbox:checked ~ p.full-desc {
  display: inline-block;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table p.full-desc {
  display: none;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table div.checkbox-stylized {
  display: inline-block !important;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table div.task-double {
  font-size: 90%;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table div.task-double > div {
  width: 50%;
  display: flex;
  align-items: center;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table div.task-double .status {
  font-weight: 600;
}
div.tasks div.mobile-tasks-tables table.mobile-tasks-table div.task-double .supervisor-name {
  text-align: right;
  position: absolute;
  right: 0.5em;
  color: #8c959d;
  white-space: nowrap;
}

input.task-checkbox {
  display: none;
}
input.task-checkbox:checked ~ label {
  background-color: #b0b7ba;
  color: #b0b7ba;
  border-color: #b0b7ba;
}
input.task-checkbox:checked ~ label::before {
  background-image: url(../_interface/icon-checkmark.svg);
  left: 15%;
  top: 3%;
  width: 100%;
  height: 100%;
}

.checkbox-stylized label {
  position: relative;
  color: #EDF3F7;
  background-color: #EDF3F7;
  border: 2px #b0b7ba solid;
  border-radius: 40px;
  margin: 0;
  padding: 0.4em 0.75em;
  font-weight: 700;
  font-size: 75%;
  cursor: pointer;
  transition: transform 0.25s ease;
  transition-property: all;
}
.checkbox-stylized label:hover {
  background-color: #003A6D;
  color: #003A6D;
  border-color: #003A6D;
}
.checkbox-stylized label::before {
  content: "";
  position: absolute;
  left: 10%;
  top: 10%;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  div.tasks {
    padding-left: 2em;
  }
}

div.key-files-links {
  position: relative;
  margin-bottom: 2em;
  min-height: 150px;
  background: linear-gradient(90deg, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0) 80%);
  border-radius: 12px;
  padding: 2.5em 0 0.5em 3em;
}
div.key-files-links span.vertical-week {
  color: #C1272D;
}
@media screen and (max-width: 500px) {
  div.key-files-links {
    background: linear-gradient(90deg, rgb(255, 255, 255) 10%, rgba(255, 255, 255, 0) 60%);
  }
}
@media screen and (max-width: 768px) {
  div.key-files-links {
    padding: 2em 0 1em 3em;
  }
}
div.key-files-links .pure-g > div.icon-container {
  padding: 0 0.3em 1.5em 0.3em;
  line-height: 1.1em;
}
@media screen and (max-width: 768px) {
  div.key-files-links .pure-g > div.icon-container {
    padding: 0.75em 0 0.75em 0;
    border-bottom: 2px #EDF3F7 solid;
  }
}
div.key-files-links .pure-g > div.icon-container a {
  display: inline-block;
  text-align: center;
  width: 100%;
  font-size: 90%;
}
@media screen and (max-width: 768px) {
  div.key-files-links .pure-g > div.icon-container a {
    text-align: left;
    display: flex;
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  div.key-files-links .pure-g > div.icon-container a {
    font-size: 80%;
  }
}
div.key-files-links .pure-g > div.icon-container a img.icon {
  height: 40px;
}
@media screen and (max-width: 768px) {
  div.key-files-links .pure-g > div.icon-container a img.icon {
    width: auto;
    float: left;
    margin-right: 0.75em;
    margin-top: -0.25em;
    height: 32px;
  }
}
div.files-links {
  position: relative;
  margin-bottom: 2em;
  min-height: 150px;
  background: linear-gradient(90deg, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0) 80%);
  border-radius: 12px;
  padding: 1em 0 1.5em 3em;
}
@media screen and (max-width: 500px) {
  div.files-links {
    background: linear-gradient(90deg, rgb(255, 255, 255) 10%, rgba(255, 255, 255, 0) 60%);
  }
}
div.files-links span.vertical-week {
  color: #C1272D;
}
div.files-links table.files-links-table {
  width: 100%;
  border-collapse: collapse;
}
div.files-links table.files-links-table tr.files-row, div.files-links table.files-links-table tr.links-row {
  transition: background-color 0.25s ease;
}
div.files-links table.files-links-table tr.files-row:last-child > td, div.files-links table.files-links-table tr.files-row:has(+ tr.dropdown-row.open) td, div.files-links table.files-links-table tr.links-row:last-child > td, div.files-links table.files-links-table tr.links-row:has(+ tr.dropdown-row.open) td {
  border-bottom: none;
}
div.files-links table.files-links-table tr.files-row:has(a.dropdown-anchor:hover), div.files-links table.files-links-table tr.links-row:has(a.dropdown-anchor:hover) {
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
div.files-links table.files-links-table tr.files-row.open td.folder-icon-cell img.closed-folder, div.files-links table.files-links-table tr.links-row.open td.folder-icon-cell img.closed-folder {
  display: none;
}
div.files-links table.files-links-table tr.files-row.open td.folder-icon-cell img.open-folder, div.files-links table.files-links-table tr.links-row.open td.folder-icon-cell img.open-folder {
  display: inline-block;
}
div.files-links table.files-links-table tr.files-row td, div.files-links table.files-links-table tr.links-row td {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: 2px #EDF3F7 solid;
}
div.files-links table.files-links-table tr.files-row td a.dropdown-anchor, div.files-links table.files-links-table tr.links-row td a.dropdown-anchor {
  display: inline-block;
  width: 100%;
  height: 100%;
}
div.files-links table.files-links-table tr.files-row td.folder-icon-cell, div.files-links table.files-links-table tr.links-row td.folder-icon-cell {
  position: relative;
  text-align: center;
  width: 36px;
}
div.files-links table.files-links-table tr.files-row td.folder-icon-cell img, div.files-links table.files-links-table tr.links-row td.folder-icon-cell img {
  width: 32px;
}
div.files-links table.files-links-table tr.files-row td.folder-icon-cell img.open-folder, div.files-links table.files-links-table tr.links-row td.folder-icon-cell img.open-folder {
  display: none;
}
div.files-links table.files-links-table tr.files-row td.folder-icon-cell div.counter, div.files-links table.files-links-table tr.links-row td.folder-icon-cell div.counter {
  color: white;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}
div.files-links table.files-links-table tr.files-row td.folder-name-cell, div.files-links table.files-links-table tr.links-row td.folder-name-cell {
  padding-left: 1em;
}
div.files-links table.files-links-table tr.dropdown-row {
  display: none;
  background: linear-gradient(rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.03) 100%);
}
div.files-links table.files-links-table tr.dropdown-row.open {
  display: table-row;
}
div.files-links table.files-links-table tr.dropdown-row td table.dropdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 90%;
}
div.files-links table.files-links-table tr.dropdown-row td table.dropdown-table tr:last-child td {
  border-bottom: none;
}
div.files-links table.files-links-table tr.dropdown-row td table.dropdown-table tr td {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: 2px #EDF3F7 solid;
}
div.files-links table.files-links-table tr.dropdown-row td table.dropdown-table tr td.icon-cell {
  width: 36px;
}
div.files-links table.files-links-table tr.dropdown-row td table.dropdown-table tr td.icon-cell img.icon {
  width: 24px;
  float: left;
}
div.files-links table.files-links-table tr.dropdown-row td table.dropdown-table tr td.date-cell {
  text-align: right;
}
div.files-links table.files-links-table tr.dropdown-row td table.dropdown-table tr td.uploader-cell {
  text-align: right;
}

img.alert {
  width: 24px;
}

.alert-text.mine {
  color: #C1272D;
}

div.alerts {
  min-height: 36px;
}
div.alerts span.vertical-week {
  color: #C1272D !important;
}
div.alerts table.alerts-table {
  border-collapse: collapse;
  width: 100%;
  /* tr.alert-row {

      &:hover {
          cursor:pointer;
          td:nth-child(2) {
              background: linear-gradient(90deg, rgba(233, 240, 245, 0) 0%, rgba(233, 240, 245, 1) 40%, rgba(233, 240, 245, 1) 60%, rgba(233, 240, 245, 0) 100%,);
          }
      }

      display: table-row;

      &:last-child > td {
          border-bottom: none;
      }

      td {

          display: table-cell;

          padding-top: 1em;
          padding-bottom: 1em;

          border-bottom: 2px $clr-page solid;

          transition: background-color 0.2s ease;

          &.checkbox-cell {
              @media screen and (max-width: $scr-width-md) { display: none; }
          }
          &.alert-icon-cell {
              @media screen and (max-width: $scr-width-md) { display: none; }
              width: 36px;
              padding-right: 1em;
          }
          &.description-cell {
              @media screen and (max-width: $scr-width-md) { padding-left: 0;}
              line-height: 1.25em;
              span.poster {
                  font-weight: 700;
                  color: $clr-red;
              }
          }
          &.alert-buttons-cell {
              padding-left: 1em;
              white-space: nowrap;
              text-align: right;

              div.button-container.see::before {
                  transform: rotate(45deg);
                  top: 6px;
                  background-image: url(../_interface/plus.svg)
              }

          }

          .alert-project-name a {
              color: $clr-gray;
              text-transform: uppercase;
              //font-weight: 600;
              &:hover {
                  color: $clr-primary;
              }
          }

      }
  } */
}
div.alerts table.alerts-table .alert-name {
  color: #C1272D !important;
  /* padding-left: 1.25em; */
}
div.alerts table.alerts-table tr:has(+ tr) td {
  border-bottom: 1.5px solid #EDF3F7;
}
div.alerts table.alerts-table td {
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: top;
}

input.sidebar-display {
  display: none;
}

input.sidebar-display:checked ~ div.mobile-sidebar {
  display: block;
}

.mobile-sidebar .head {
  color: #003A6D;
  margin-bottom: 0.75em;
}

.ghost-child {
  position: fixed;
}

.gradient-border {
  height: 30px;
  width: 100%;
  margin-top: -1px;
  background: linear-gradient(rgb(237, 243, 247) 0%, rgba(237, 243, 247, 0.7) 50%, rgba(237, 243, 247, 0));
  position: absolute;
  z-index: 1;
}

.sidebar.ghost-child {
  height: 90%;
}
.sidebar.ghost-child .sidebar-inner {
  position: relative;
  overflow: auto;
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sidebar.ghost-child .sidebar-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
@media screen and (max-width: 1024px) {
  .sidebar {
    display: none;
  }
}
.sidebar.mobile-contents {
  display: initial;
}
@media screen and (min-width: 1024px) {
  .sidebar.mobile-contents {
    display: none;
  }
}
.sidebar.show-sidebar-mobile {
  display: none;
}
@media screen and (max-width: 1024px) {
  .sidebar.show-sidebar-mobile {
    display: initial;
  }
}
.sidebar div.pure-g > div {
  padding: 0;
}
.sidebar .top-head {
  margin-top: 4px;
  font-size: 1.4em;
}
.sidebar div.project-details h2 {
  color: #003A6D;
  margin-bottom: 0.75em;
}
.sidebar div.project-details div.location {
  font-size: 75%;
  text-align: left;
  line-height: 1.25em;
  margin-bottom: 2.5em;
}
.sidebar div.project-details div.location img {
  width: 24px;
  float: left;
  margin-right: 0.5em;
}
.sidebar div.project-details div.supervisor-portrait {
  width: 50%;
  padding-bottom: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  background-image: url(../../_temp/portrait-sample.jpg);
}
.sidebar div.project-details ul.project-contacts-menu {
  list-style: none;
  padding-left: 0;
}
.sidebar div.project-details ul.project-contacts-menu li.contact-item {
  margin-bottom: 1em;
}
.sidebar div.project-details ul.project-contacts-menu li.contact-item a {
  cursor: pointer;
}
.sidebar div.project-details ul.project-contacts-menu li.contact-item a:hover span.contact-head {
  color: #003A6D;
}
.sidebar div.project-details ul.project-contacts-menu li.contact-item a span.contact-head {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  color: #8c959d;
  font-weight: 600;
  transition: 0.25s ease;
}
.sidebar div.project-details ul.project-contacts-menu li.contact-item a span.contact-head img.contact-arrow {
  width: 12px;
  float: right;
  margin-top: 0.2em;
  margin-left: 0.5em;
  transition: all ease-in-out 0.4s;
}
.sidebar div.project-details ul.project-contacts-menu li.contact-item a.open span.contact-head img.contact-arrow {
  transform: rotate(180deg);
}
.sidebar div.project-details ul.project-contacts-menu li.contact-item h3 {
  color: #636b72;
  margin: 0.25em 0;
}
.sidebar div.on-job h2, .sidebar div.sidebar-files-links h2 {
  margin-top: 1.5em;
  color: #003A6D;
}
.sidebar div.on-job ul, .sidebar div.sidebar-files-links ul {
  padding-left: 0;
  list-style: none;
}
.sidebar div.on-job ul li, .sidebar div.sidebar-files-links ul li {
  margin-bottom: 0.75em;
}
.sidebar div.sidebar-files-links ul li {
  font-size: 85%;
  line-height: 1.2em;
  padding: 0.3em 0 0.2em 32px;
  position: relative;
}
.sidebar div.sidebar-files-links ul li img {
  width: 24px;
  position: absolute;
  left: 0;
  top: 0;
}
.sidebar div.alerts {
  margin-bottom: 3em;
}
.sidebar div.alerts h2 {
  color: #C1272D;
}
.sidebar div.alerts ul.alerts-list {
  list-style: none;
  padding: 0;
}
.sidebar div.alerts ul.alerts-list li.alerts-item .project-number {
  color: #003A6D;
  font-weight: 700;
  margin-bottom: 8px;
}
.sidebar div.alerts ul.alerts-list li.alerts-item .project-number a {
  text-decoration: none;
}
.sidebar div.alerts ul.alerts-list li.alerts-item .project-name {
  color: #636b72;
  text-transform: uppercase;
  font-weight: 500;
}
.sidebar div.alerts ul.alerts-list li.alerts-item a {
  text-decoration: underline;
  text-transform: uppercase;
}
.sidebar div.alerts ul.alerts-list li.alerts-item p {
  margin-top: 8px;
}
.sidebar h2 {
  color: #003A6D;
  margin-bottom: 0.75em;
}
.sidebar .projects-sidebar div.projects-line {
  height: 2px;
  width: 74%;
  background-color: #b0b7ba;
  float: right;
}
.sidebar .projects-sidebar table.project-site-item {
  list-style: none;
  padding: 0.25em 0;
}
.sidebar .projects-sidebar table.project-site-item:last-child {
  padding-bottom: 100px;
}
.sidebar .projects-sidebar table.project-site-item tr {
  height: 40px;
}
.sidebar .projects-sidebar table.project-site-item tr > td {
  font-weight: 600;
  text-transform: uppercase;
}
.sidebar .projects-sidebar table.project-site-item tr > td:first-child {
  width: 50px;
}
.sidebar .projects-sidebar table.project-site-item tr > td:last-child, .sidebar .projects-sidebar table.project-site-item tr > td:last-child a {
  color: #636b72;
}
.sidebar .projects-sidebar table.project-site-item tr > td:last-child a:hover {
  color: #b0b7ba;
}
.sidebar .projects-sidebar table.project-site-item tr > td span.circle {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: #636b72;
}
.sidebar .projects-sidebar table.project-site-item tr > td span.circle span.circle-num {
  vertical-align: text-top;
  line-height: 2em;
  color: white;
}

ul.contact-item-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-out;
  list-style: none;
  padding-left: 0;
}
ul.contact-item-submenu.open {
  max-height: 300px;
}
ul.contact-item-submenu li.form-of-contact {
  margin-top: 0.5em;
  position: relative;
  font-size: 90%;
  margin-bottom: 0.75em;
}
ul.contact-item-submenu li.form-of-contact a {
  color: rgb(71, 69, 63);
}
ul.contact-item-submenu li.form-of-contact a:hover {
  color: #C1272D;
}
ul.contact-item-submenu li.form-of-contact img, ul.contact-item-submenu li.form-of-contact svg {
  width: 18px;
  float: left;
  margin-right: 0.5em;
}
ul.contact-item-submenu li.form-of-contact svg path, ul.contact-item-submenu li.form-of-contact circle {
  fill: #8c959d;
}

.empty-search-results {
  color: #8c959d;
  font-weight: 600;
  font-size: 1.2em;
  text-align: center;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  box-sizing: border-box;
  padding: 2em 3em !important;
}
.empty-search-results a {
  color: #39B54A;
}
.empty-search-results a:hover {
  opacity: 0.8;
}

section.login {
  background-image: url(../_temp/quote-back.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 100vh;
  min-height: 100%;
  padding-top: 14em;
  box-sizing: border-box;
  margin-top: -4.5em;
}
@media screen and (max-width: 768px) {
  section.login {
    padding-top: 140px;
  }
}
section.login::after {
  content: "";
  position: fixed;
  background-color: rgba(0, 0, 0, 0.3);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}
section.login div.pure-g {
  position: relative;
  z-index: 2;
}
section.login h1.login-head {
  margin: 0;
  font-size: 7em;
  line-height: 0.9;
  font-weight: 700;
  color: white;
}
@media screen and (max-width: 768px) {
  section.login h1.login-head {
    text-align: center;
    font-size: 5em;
    margin-bottom: 0.5em;
  }
}
section.login form.login-form, section.login form.reset-password-form {
  border-radius: 12px;
  padding: 1em 1em 1.5em;
  background-color: white;
}
@media screen and (max-width: 768px) {
  section.login form.login-form, section.login form.reset-password-form {
    text-align: center;
    padding: 0.5em 0 1em;
  }
}
section.login form.login-form h3, section.login form.reset-password-form h3 {
  margin-top: 0;
  margin-bottom: 1em;
}
section.login form.login-form input, section.login form.login-form a, section.login form.reset-password-form input, section.login form.reset-password-form a {
  margin-bottom: 0.5em;
}

.overlay-portrait {
  background-image: url("../_temp/ver-sample.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  width: 36%;
  padding-bottom: 45%;
  float: right;
}
@media screen and (min-width: 768px) {
  .overlay-portrait {
    width: 250px;
    padding-bottom: 250px;
  }
}

.overlay-subhead {
  color: #8c959d;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 90%;
  margin-bottom: 0.5em;
}

div.overlay-location {
  font-size: 75%;
  text-align: left;
  line-height: 1.25em;
  margin-bottom: 0.5em;
}
div.overlay-location img {
  width: 24px;
  float: left;
  margin-right: 0.5em;
}

div.directory .directory-item {
  padding: 0.75em;
  text-align: center;
}
div.directory .directory-item .directory-portrait {
  background-image: url("../_temp/ver-sample.jpg");
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}
div.directory .directory-item .directory-bio {
  text-align: left;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
div.directory .directory-item .directory-bio.revealed {
  max-height: 350px;
}
div.directory .directory-item .directory-info {
  padding: 1em 0 0.5em;
  position: relative;
  line-height: 0.9em;
}
div.directory .directory-item .directory-info .directory-name {
  font-weight: 700;
  color: #003A6D;
  margin-bottom: 0.35em;
}
div.directory .directory-item .directory-info .directory-role {
  color: #8c959d;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 80%;
}
div.directory .directory-item .directory-info .bio-button .img2svg.minus {
  display: none;
}
div.directory .directory-item .directory-info .bio-button .img2svg path, div.directory .directory-item .directory-info .bio-button .img2svg rect, div.directory .directory-item .directory-info .bio-button .img2svg circle, div.directory .directory-item .directory-info .bio-button .img2svg polygon {
  fill: white;
}
div.directory .directory-item .directory-info .bio-button.open .img2svg.minus {
  display: inline;
}
div.directory .directory-item .directory-info .bio-button.open .img2svg.plus {
  display: none;
}
div.directory .directory-item .directory-phone {
  font-size: 90%;
  font-weight: 700;
  letter-spacing: 1px;
}
div.directory .directory-item .directory-phone a {
  color: #003A6D;
}
div.directory .directory-item .directory-social-list .rounded-social-buttons a {
  width: 16px;
  height: 16px;
  margin-top: -0.25em;
  padding: 0.4em;
}

@media screen and (max-width: 768px) {
  .opt--admin-sidebar {
    padding-top: 60px !important;
  }
}

tr.insert-row td {
  display: none;
}
tr.insert-row td.open-insert-form {
  text-transform: uppercase;
  display: table-cell;
  background-color: #d6dee3;
  color: #636b72 !important;
}
tr.insert-row.editing td {
  display: table-cell;
}
tr.insert-row.editing td.open-insert-form {
  display: none;
}
tr.insert-row div.insert-row-buttons {
  display: inline-block;
}
@media screen and (max-width: 500px) {
  tr.insert-row div.insert-row-buttons button {
    margin: 0 0.25em !important;
  }
}
@media screen and (min-width: 500px) {
  tr.insert-row div.insert-row-buttons {
    display: inline-block;
  }
}

table.project-statuses, table.project-categories, table.doc-folders, table.on-time-statuses, table.task-statuses {
  display: none;
}

ul.settings-list {
  margin: 0;
  list-style: none;
  padding-left: 0;
}
ul.settings-list li {
  margin-bottom: 1em;
  font-weight: 600;
  text-transform: uppercase;
  color: #636b72;
}
ul.settings-list li:last-child {
  margin-bottom: 0;
}
ul.settings-list li label {
  cursor: pointer;
  transform: all ease-in-out 0.4s;
}
ul.settings-list li label.active, ul.settings-list li div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > label#seven-day-label, div.leaderboard ul.settings-list li #seven-day-switch:checked ~ .lb-switch-labels > label#seven-day-label,
ul.settings-list li div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > label#thirty-day-label,
div.leaderboard ul.settings-list li #thirty-day-switch:checked ~ .lb-switch-labels > label#thirty-day-label,
ul.settings-list li div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > label#YTD-label,
div.leaderboard ul.settings-list li #YTD-switch:checked ~ .lb-switch-labels > label#YTD-label, ul.settings-list li label:hover {
  color: #003A6D;
}

.tip {
  color: #636b72;
  font-style: italic;
}
.tip span {
  font-weight: 600;
}

.static-cell {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  div.mobile-tasks-tables .priority-cell div.customDropDown .customDropDown-menu {
    right: 0;
    left: initial;
    top: 30px;
  }
}
/* *****QUESTION: How much of this is for the like/check in the general feed vs the parking lot stuff? I suppose the general heading for it all would be 'feedback' not sure how much duplication but should have general above and specific below */
.vote-count {
  position: relative;
  cursor: pointer;
}
.vote-count.upvotes {
  background-color: #39B54A;
  z-index: 1;
}
.vote-count.downvotes {
  margin-left: -4px !important;
  margin-right: 6px;
}
.vote-count::after {
  position: absolute;
  pointer-events: none;
  color: white;
  font-weight: 600;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.vote-count.upvotes::after {
  content: "+" attr(data-count);
}
.vote-count.downvotes::after {
  content: "-" attr(data-count);
}

.vote-button {
  background-color: #8c959d;
}
.vote-button > * {
  pointer-events: none;
}
.vote-button.up[data-active=true] {
  background-color: #39B54A;
}
.vote-button.down[data-active=true] {
  background-color: #C1272D;
}
.vote-button.down svg {
  transform: scale(1.65) rotate(180deg);
}
.vote-button svg {
  transform: scale(1.65);
}

/* *****QUESTION: Odd, why the generic div selector? */
div.upvote-button::before, div.downvote-button::before {
  background-image: url(../_interface/icon-thumb.svg);
  width: 31px;
  height: 31px;
  left: 0%;
  top: 0%;
  transition: transform 0.25s;
}
div.upvote-button:has(input:hover)::before, div.downvote-button:has(input:hover)::before {
  transform: scale(1.1);
}
div.upvote-button.active input, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > div.upvote-button#seven-day-label input,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > div.upvote-button#thirty-day-label input,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > div.upvote-button#YTD-label input, div.upvote-button:hover input {
  background-color: #39B54A;
  color: #39B54A;
}
div.downvote-button.active input, div.leaderboard #seven-day-switch:checked ~ .lb-switch-labels > div.downvote-button#seven-day-label input,
div.leaderboard #thirty-day-switch:checked ~ .lb-switch-labels > div.downvote-button#thirty-day-label input,
div.leaderboard #YTD-switch:checked ~ .lb-switch-labels > div.downvote-button#YTD-label input, div.downvote-button:hover input {
  background-color: #C1272D;
  color: #C1272D;
}
div.downvote-button::before {
  transform: rotate(180deg);
  left: 2%;
}
div.downvote-button:has(input:hover)::before {
  transform: scale(1.1) rotate(180deg);
}

div.idea-board .post-contents.pure-g {
  width: 100%;
  margin-top: 1.5em;
}
div.idea-board .post-contents.pure-g > div {
  margin: 0;
  padding: 0;
}
div.idea-board .post-contents.pure-g > div p {
  margin: 0;
}
div.idea-board .post-contents.pure-g > div a img.icon-archive {
  margin-top: 0.75em;
  width: 32px;
}

div.progress-bar-container {
  margin-top: 0.6em;
}
@media screen and (max-width: 768px) {
  div.progress-bar-container {
    margin-bottom: 0.6em;
  }
}
div.progress-bar-container div.pure-g {
  font-size: 80%;
  line-height: 1.75em;
}
div.progress-bar-container div.pure-g div {
  padding: 0 0 0 8px;
}
div.progress-bar-container div.pure-g div div.circle {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  margin-bottom: -2px;
  margin-left: -7px;
}
div.progress-bar-container div.progress-bar {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(90deg, #C3C5CD, #E1E4EC);
  padding-left: 8px;
  line-height: 1.5em;
}
div.progress-bar-container div.progress-bar div.fill {
  border-radius: 12px;
  left: 0;
  position: absolute;
  display: inline-block;
  background-color: #F7931E;
  height: 100%;
  width: 70%;
}
div.progress-bar-container div.progress-bar div.fill.good {
  background-color: #39B54A;
}
div.progress-bar-container div.progress-bar div.fill.concerning {
  background-color: #F7931E;
}
div.progress-bar-container div.progress-bar span {
  position: relative;
  font-weight: 700;
  color: white;
}

section.projects-tabs {
  width: 100%;
  font-weight: 600;
}
@media screen and (max-width: 1024px) {
  section.projects-tabs {
    margin-top: 72px;
  }
}
section.projects-tabs div.pure-g {
  width: 100%;
}
section.projects-tabs div.pure-g > div {
  padding-top: 0;
  padding-bottom: 0;
}
section.projects-tabs div.pure-g > div ul {
  overflow: hidden;
  padding-left: 0;
  list-style: none;
  margin: 0;
  height: 100%;
}
section.projects-tabs div.pure-g > div ul label > li {
  display: inline-block;
  padding: 0.5em 1em 0.25em;
  margin-right: 0.5em;
  height: 100%;
  border-radius: 12px 12px 0 0;
  color: #636b72;
  transition: color 0.25s ease;
}
section.projects-tabs div.pure-g > div ul label > li:hover {
  color: #003A6D;
}
section.projects-tabs div.pure-g > div ul label > li.active, section.projects-tabs div.pure-g > div ul div.leaderboard #seven-day-switch:checked ~ label.lb-switch-labels > li#seven-day-label, div.leaderboard section.projects-tabs div.pure-g > div ul #seven-day-switch:checked ~ label.lb-switch-labels > li#seven-day-label,
section.projects-tabs div.pure-g > div ul div.leaderboard #thirty-day-switch:checked ~ label.lb-switch-labels > li#thirty-day-label,
div.leaderboard section.projects-tabs div.pure-g > div ul #thirty-day-switch:checked ~ label.lb-switch-labels > li#thirty-day-label,
section.projects-tabs div.pure-g > div ul div.leaderboard #YTD-switch:checked ~ label.lb-switch-labels > li#YTD-label,
div.leaderboard section.projects-tabs div.pure-g > div ul #YTD-switch:checked ~ label.lb-switch-labels > li#YTD-label {
  background-color: #E3E8EC;
  color: #003A6D;
}

div.row-js-overlay {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  display: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #d6dee3 35%, #d6dee3 65%, rgba(255, 255, 255, 0) 100%);
}

input.display-table-switch {
  display: none;
}
input.display-table-switch.active-switch:checked ~ div table tbody tr.active-project:not(.archived-project) {
  display: table-row;
}
input.display-table-switch.my-switch:checked ~ div table tbody tr.my-project:not(.archived-project) {
  display: table-row;
}
input.display-table-switch.archived-switch:checked ~ div table tbody tr.archived-project {
  display: table-row;
}
input.display-table-switch.active-switch:checked ~ div div.project-card.active-project:not(.archived-project) {
  display: block;
}
input.display-table-switch.my-switch:checked ~ div div.project-card.my-project:not(.archived-project) {
  display: block;
}
input.display-table-switch.archived-switch:checked ~ div div.project-card.archived-project {
  display: block;
}

table.projects-table.settings thead tr th:nth-child(2), table.projects-table.settings thead tr th:nth-child(3) {
  border-radius: 0;
}
table.projects-table.settings tr.settings-row .circle {
  float: right;
  margin-right: 0;
  margin-left: 0.5em;
}
table.projects-table.settings tr.settings-row td.color {
  text-align: right;
}
@media screen and (max-width: 500px) {
  table.projects-table.settings tr.settings-row td.color {
    padding-right: 0.3em;
    padding-left: 0.2em;
  }
}
table.projects-table.settings tr.settings-row td.color div.color-wrapper {
  justify-content: flex-end;
  display: flex;
  align-items: center;
}
table.projects-table.settings tbody tr {
  display: table-row !important;
}
table.projects-table.settings tbody tr:hover {
  cursor: auto;
  background-color: rgba(255, 255, 255, 0.4);
}
table.projects-table.settings tbody tr td:nth-child(2) {
  font-weight: 600;
  font-size: 100%;
  color: #003A6D;
  transition: 0.2s ease-out;
}
table.projects-table.settings tbody tr td:nth-child(2):hover {
  color: #A7AEB4;
}
table.projects-table.settings tbody tr td:last-child {
  padding-right: 0.5em;
}
table.projects-table.settings tbody tr td.order {
  width: 12px;
  padding-left: 0;
  padding-right: 0;
}
table.projects-table.settings tbody tr td.delete {
  width: 20px;
}
table.projects-table.settings tbody tr td.title {
  width: -moz-min-content;
  width: min-content;
}
@media screen and (max-width: 500px) {
  table.projects-table.settings tbody tr td.title {
    max-width: 125px;
    padding-left: 0.2em;
  }
}
@media screen and (max-width: 768px) {
  table.projects-table.settings tbody tr td.title > form > input[type=text] {
    max-width: 120px;
  }
}
table.projects-table.settings tbody tr td {
  font-weight: 600;
  transition: all ease-in-out 0.4s;
  padding: 0.5em 1em;
}
table.projects-table.settings tbody tr td:hover {
  color: #8c959d;
}
table.projects-table.settings tbody tr td button {
  margin: 0 0 0 0.5em;
}
@media screen and (max-width: 768px) {
  table.projects-table.settings tbody tr td button {
    margin: 0;
  }
}

table.projects-table {
  border-collapse: collapse;
  width: 100%;
  line-height: 1.2em;
  margin-top: 1em;
}
table.projects-table .link-text {
  color: #003A6D;
  transition: 0.2s ease-out;
}
table.projects-table .link-text:hover {
  color: #8c959d;
}
@media screen and (max-width: 500px) {
  table.projects-table {
    font-size: 90%;
  }
}
table.projects-table thead {
  overflow: hidden;
}
table.projects-table thead tr {
  background-color: #d6dee3;
  border-radius: 3em;
}
table.projects-table thead tr th {
  color: #999999;
  text-transform: uppercase;
  font-size: 90%;
  padding: 0 1em;
  text-align: left;
}
@media screen and (max-width: 768px) {
  table.projects-table thead tr th:nth-child(2) {
    border-radius: 4em 0 0 4em;
  }
}
@media screen and (max-width: 500px) {
  table.projects-table thead tr th {
    padding-right: 0.3em;
    padding-left: 0.2em;
  }
  table.projects-table thead tr th:nth-child(3) {
    border-radius: 4em 0 0 4em;
  }
}
table.projects-table thead tr th:nth-child(1) {
  border-radius: 4em 0 0 4em;
}
table.projects-table thead tr th:last-child {
  border-radius: 0 4em 4em 0;
  padding-right: 0;
}
table.projects-table thead tr th a.new-project {
  white-space: nowrap;
  background-color: #39B54A;
  text-transform: capitalize;
  color: white;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 0 0.5em;
  margin: 0;
  border: 0;
  border-radius: 40px;
  box-sizing: border-box;
  /* Flexbox properties for vertical and horizontal centering */
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
}
table.projects-table tbody tr {
  display: none;
  border-bottom: 1.5px #b0b7ba solid;
  transition: 0.2s ease-out;
}
table.projects-table tbody tr:hover {
  cursor: pointer;
}
table.projects-table tbody tr td.buttons {
  pointer-events: none;
}
table.projects-table tbody tr td.buttons a {
  pointer-events: auto;
  padding: 0 0.3em;
}
table.projects-table tbody tr.archived-project .archive {
  display: none;
}
table.projects-table tbody tr.archived-project .unarchive {
  display: inline !important;
}
table.projects-table tbody tr td {
  font-size: 90%;
  position: relative;
  padding: 1.5em 1em;
  text-transform: capitalize;
  /* img.alert {
      float:right;
      width: 28px;
  } */
}
@media screen and (min-width: 500px) {
  table.projects-table tbody tr td:nth-child(3) {
    white-space: nowrap;
  }
}
table.projects-table tbody tr td a.hidden-link {
  display: none;
}
table.projects-table tbody tr td:last-child {
  padding-right: 0;
}
@media screen and (max-width: 500px) {
  table.projects-table tbody tr td {
    padding-right: 0.3em;
    padding-left: 0.2em;
  }
}
table.projects-table tbody tr td.buttons {
  white-space: nowrap;
  /* img.edit, img.archive, img.unarchive {
      width: 28px;
  } */
  /* img.archive, img.unarchive {
      margin-left: 1.5em;
  } */
}
table.projects-table tbody tr td.buttons a img {
  transition: 0.25s ease;
}
table.projects-table tbody tr td.buttons a:hover img {
  transform: scale(1.15);
  opacity: 0.7;
}
table.projects-table tbody tr td.buttons .unarchive {
  display: none;
}
table.projects-table tbody tr td div.circle {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 0.3em;
}
table.projects-table tbody tr td:nth-child(1) {
  font-size: 100%;
}
table.projects-table tbody tr td:nth-child(1), table.projects-table tbody tr td:nth-child(3) {
  font-weight: 600;
}
table.projects-table tbody tr td span.ontime {
  padding: 0.2em 0.6em;
  font-weight: 600;
  border-radius: 40px;
  background-color: gray;
  color: white;
}

.main-feed-content {
  display: none;
}

div.project-card {
  display: none;
  box-sizing: border-box;
  /* border-radius: $uni-radius; */
  /* overflow: hidden; */
  margin-bottom: 1.5em;
}
div.project-card * {
  box-sizing: border-box;
}
div.project-card div.card-top {
  padding: 0.7em 1em 0.25em;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  font-size: 90%;
  background-color: #DEE1E5;
}
@media screen and (max-width: 500px) {
  div.project-card div.card-top {
    padding: 0.7em 0.5em 0.25em;
  }
}
div.project-card div.card-top > div {
  padding: 0;
}
div.project-card div.card-top > div.status {
  padding-right: 0.75em;
  font-weight: 600;
}
div.project-card div.card-top > div.status.awaiting-delivery {
  color: #8c959d;
}
div.project-card div.card-top > div.status div.circle {
  width: 20px;
  height: 20px;
  float: left;
  margin-right: 6px;
}
div.project-card div.card-top > div.ontime {
  text-align: right;
  position: relative;
}
div.project-card div.card-top > div.ontime div.remaining {
  margin-right: 3.5em;
  display: inline-block;
  position: relative;
  /* img.alert {
      width: 28px;
      float: left;
      margin-top: -4px;
      margin-right: 8px;
  } */
}
div.project-card div.card-top > div.ontime span.due-date {
  right: 0;
  top: 0;
  left: initial;
  transform: none;
}
div.project-card div.card-info {
  background-color: white;
  padding: 1em 1em 1.5em;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
@media screen and (max-width: 500px) {
  div.project-card div.card-info {
    padding: 0.7em 0.5em 0.25em;
  }
}
div.project-card div.card-info div {
  padding: 0;
}
div.project-card div.card-info div.name-location .location {
  font-size: 90%;
  margin-bottom: 0.5em;
  text-align: left;
  display: inline-block;
  margin: 0.1em 0 0.2em;
}
div.project-card div.card-info div.name-location div.name {
  font-size: 110%;
  font-weight: 700;
}
div.project-card div.card-info div.name-location div.name span.number {
  color: #636b72;
}
div.project-card div.card-info div.name-location div.name.awaiting-delivery {
  color: #636b72;
}
div.project-card div.card-info div.time-type {
  text-align: right;
  flex: auto;
  /* Styling for Status Dropdown */
  /* span.ontime {
      padding: 0.2em 0.6em;
      font-weight: 600;
      border-radius: 40px;
      background-color: gray;
      color: white;
  } */
}
div.project-card div.card-info div.time-type div.time {
  font-size: 90%;
  /* margin-top: 1.5em; */
}
div.project-card div.card-info div.time-type div.time span {
  padding: 0.35em 0.3em;
  border-radius: 40px;
  font-weight: 700;
  color: white;
  white-space: nowrap;
}
div.project-card div.card-info div.time-type div.type {
  margin-top: 0.5em;
  font-size: 90%;
}

input.internal-switch {
  display: none;
}
input.internal-switch.main-feed:checked ~ div.week:has(> div.post) {
  display: block;
}
input.internal-switch.main-feed:checked ~ div.week > div.post {
  display: block;
}
input.internal-switch.main-feed:checked ~ div.week:has(> div.hide-when-not-mine) {
  display: none;
}
input.internal-switch.main-feed:checked ~ div.week:has(> div.hide-when-not-photos) {
  display: none;
}
input.internal-switch.main-feed:checked ~ div.alerts {
  display: block;
}
input.internal-switch.main-feed:checked ~ div.main-feed-content {
  display: block;
}
input.internal-switch.my-content:checked ~ div.week:has(> div.post.my-post) {
  display: block;
}
input.internal-switch.my-content:checked ~ div.week > div.post.my-post {
  display: block;
}
input.internal-switch.pinned-content:checked ~ div.week:has(> div.post.pinned) {
  display: block;
}
input.internal-switch.pinned-content:checked ~ div.week > div.post.pinned {
  display: block;
}
input.internal-switch.photos-content:checked ~ div.week:has(> div.post.photo-post) {
  display: block;
}
input.internal-switch.photos-content:checked ~ div.week > div.post.photo-post {
  display: block;
}
input.internal-switch.tasks-content:checked ~ div.tasks {
  display: block;
}
input.internal-switch.tasks-content:checked ~ div.tasks {
  display: block;
}
input.internal-switch.idea-board-content:checked ~ div.idea-board, input.internal-switch.directory-content:checked ~ div.directory, input.internal-switch.files-links-content:checked ~ div.files-links, input.internal-switch.files-links-content:checked ~ div.key-files-links {
  display: block;
}
input.internal-switch.project-statuses-switch:checked ~ table.project-statuses {
  display: table;
}
input.internal-switch.project-categories-switch:checked ~ table.project-categories {
  display: table;
}
input.internal-switch.doc-folders-switch:checked ~ table.doc-folders {
  display: table;
}
input.internal-switch.on-time-statuses-switch:checked ~ table.on-time-statuses {
  display: table;
}
input.internal-switch.task-statuses-switch:checked ~ table.task-statuses {
  display: table;
}

div.internal-switch-container.main-feed-container {
  display: none;
}
div.internal-switch-container.main-feed-container:has(input.internal-switch.main-feed:checked), div.internal-switch-container.main-feed-container:has(input.internal-switch.my-content:checked) {
  display: block;
}
div.internal-switch-container.pinned-feed-container {
  display: none;
}
div.internal-switch-container.pinned-feed-container:has(input.internal-switch.pinned-content:checked) {
  display: block;
}

div.internal-switch-container > div.week {
  display: none;
}
div.internal-switch-container > div.week > div.post {
  display: none;
}

div.internal-switch-container > div.alerts, div.internal-switch-container > div.tasks, div.internal-switch-container > div.files-links, div.internal-switch-container > div.key-files-links, div.internal-switch-container > div.directory, div.internal-switch-container > div.idea-board, div.internal-switch-container > div.mobile-sidebar {
  display: none;
}

.dead-link {
  color: #8c959d !important;
}

@media screen and (max-width: 500px) {
  .subnav-range-form {
    margin-top: 0.5em;
  }
}
@media screen and (min-width: 500px) {
  .subnav-range-form {
    display: inline-block;
  }
}
.subnav-range-form span {
  padding: 0 0.3em;
  font-weight: 700;
  color: #A7AEB4;
}

table.project-streaks.first tbody tr svg.img2svg path {
  fill: #003A6D !important;
}
table.project-streaks.second tbody tr svg.img2svg path {
  fill: #C1272D !important;
}

.ribbon-streak {
  margin-bottom: -0.25em;
  width: 36px;
  height: 36px;
}
.ribbon-streak[data-digits="3"] {
  font-size: 90%;
}
.ribbon-streak::after {
  content: attr(data-duration);
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  color: white;
}

.streak-name {
  color: #8c959d;
}

.streak-project {
  color: #8c959d;
  text-transform: none !important;
  font-weight: normal;
}

ul.meter-list {
  list-style: none;
  padding-left: 0;
}
ul.meter-list > li {
  margin-bottom: 0.75em;
}
ul.meter-list > li:first-child .meter-rank {
  color: #003A6D;
}
ul.meter-list > li:nth-child(2) .meter-rank {
  color: #C1272D;
}
ul.meter-list > li .meter-info {
  color: #8c959d;
  display: flex;
  margin-bottom: 0.4em;
}
ul.meter-list > li .meter-info .meter-rank {
  padding-right: 0.5em;
  font-weight: 700;
}
ul.meter-list > li .meter-info .meter-name {
  text-transform: uppercase;
  color: #636b72;
  font-weight: 600;
}
ul.meter-list > li .meter-info .meter-flavor {
  flex: auto;
  text-align: right;
}
ul.meter-list > li .meter-bar-container {
  background-color: #c7ccd0;
  border-radius: 4px;
  overflow: hidden;
}
ul.meter-list > li .meter-bar-container .meter-fill {
  box-sizing: border-box;
  background-color: #009245;
  padding: 0.35em 0.5em;
  display: inline-block;
  width: 70%;
  border-radius: 4px;
}
ul.meter-list > li .meter-bar-container .meter-fill .meter-percent {
  font-weight: 700;
  text-align: right;
  color: white;
}

.streak-size {
  background-color: #003A6D;
  display: flex;
  width: 24px;
  color: white;
  text-align: center;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 1em;
}
.streak-size.dead-streak {
  background-color: #8c959d;
}
.streak-size[data-digits="3"] {
  font-size: 87.5%;
}

.streak-date {
  text-transform: none;
  font-weight: 600;
  white-space: nowrap;
}
.streak-date.deadline {
  color: #C1272D;
}

.th-button {
  position: absolute;
  right: 0;
  top: 50%;
  padding: 0.2em 0.5em;
  background-color: #39B54A;
  color: white;
  border-color: #39B54A;
  transform: translateY(-50%);
  text-transform: none;
}
.th-button:hover {
  transform: translateY(-50%) scale(1.07);
}

.taggable-input-wrapper {
  position: relative;
}

.taggable-dropdown-outer {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1000;
  border-radius: 12px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.taggable-dropdown {
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* App Releases Page START */
a.app-link {
  border: 2px solid lightgray;
  border-radius: 8px;
  padding: 2em;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  max-width: 300px;
  margin: 1em auto;
  transition: all 0.3s ease;
}

a.off {
  color: darkgray;
  pointer-events: none;
  opacity: 0.6;
}

svg.mobile-logo {
  fill: darkblue;
  transition: all 0.5s ease;
  height: 48px;
  width: 48px;
}

a:hover svg.mobile-logo {
  fill: darkgray;
}

a.off svg.mobile-logo {
  fill: lightgray;
}

.version-number {
  color: gray;
}

/* App Releases Page END */
/* *****QUESTION: What is this??? */
@media screen and (max-width: 768px) {
  .collapsed-criteria-on-mobile {
    display: none;
  }
  .collapsed-criteria-on-mobile.expanded {
    display: initial;
  }
}/*# sourceMappingURL=styles.css.map */