/**
 * Copyright 2023, Grant Richardson
 * License: GNU Affero General Public License v3.0 only
 *
 * You should have received a copy of the GNU Affero General Public License, version 3,
 * along with this program.  If not, see <https://www.gnu.org/licenses/agpl-3.0.html>.
 */
:root {
  /* These default values operate for smallest size; breakpoints below may override these values */
  /* 2b6fdd */
  --primaryColor1: #3373db;
  --primaryColor1--text: #1c61d0;
  --primaryColor2: rgb(19, 25, 38);
  --primaryColor3: #4b5563;
  --primaryColor4: #666d7c;
  --deleteColor: #b24400;
  --saveColor: #0b837f;
  --messages-color: #d9e8fe;
  --backgroundColor: rgb(244, 245, 245);
  --backgroundColor2: rgba(222, 232, 253, 0.716);
  --fileListCard--expired_background-color: #ebe5e1;
  --box-shadow-color: hsl(200 50% 20% / 40%);
  --border-radius: 0.375rem;
  --homepageCard_border-radius: 0.25rem;
  --navbar__background_padding: 0.45rem 0 0.53rem;
  /* increases at multiple breakpoints */
  --pageContent_max-width: 90%;
  /* becomes a fixed width at widest breakpoint */
  --navbar__logo_font-size: 1.2rem;
  /* increases at multiple breakpoints */
  --navbar__link_font-size: 0.69rem;
  /* increases at multiple breakpoints */
  --navbar__link_paddingLeftRight: 0.45rem;
  /* optimised at each breakpoint to prevent undesired wrapping */
  --navbar__link_padding-bottom: 8px;
  /* increases at mobile breakpoint */
  --navbar__link--active_padding-bottom: 12px;
  --navbar__link--extra-word_display: none;
  --navbar__logo_order: 1;
  --navbar__menuAccountLinks_order: 2;
  /* navbar links for account (e.g. 'login' and 'register') */
  --navbar__menuAppLinks_order: 3;
  /* being third in line, this group wraps to the left on mobile */
  --navbar__menuAccountLinks_margin: 0;
  --spacer-below-navbar: 2.8rem;
  --hero__title_font-size: 1.4rem;
  --hero__tagline_font-size: 0.8rem;
  --fileFormCard_display: grid;
  /* centers the fileFormCard__image above fileForm on mobile */
  --fileFormCard__image_width: 9.5rem;
  /* prevent image from growing to full col width on mobile*/
  --fileFormCard__form_width: 103%;
  --filePasswordCard__image_width: 7rem;
  /* prevent image from growing to full col width on mobile*/
  --filePasswordCard__form_width: 103%;
  --fileList_grid-template-columns: 1fr;
  --fileListCard_width: 16.5rem;
  --fileListCard__image_width: 72px;
  --fileListCard__details_font-size: 0.82rem;
  --homepageHeading_text-align: center;
  /*left when cards go from 1 to 2 cols @ screen min-width 935px */
  --homepageCard_grid-template-columns: 1fr;
  --homepageCard_max-width: 96%;
  --homepageSectionContainer_max-width: 99%;
  /* widens when homepage cards go from 1 to 2 columns */
  --homepageCard__image_width: 92px;
  --homepageCard__image_width--agpl: 150px;
  --homepageCard__image_width--intro: 190px;
  --homepageCard_font-size: 0.75rem;
  --homepageSectionContainer_display: grid;
  /* flex when homepage cards go from 1 to 2 columns */
  --homepageSectionContainer--first_max-width: 96%;
  --homepageSectionContainer--first-p_width: 96%;
  --homepageSectionContainer--first_box-sizing: border-box;
  --homepageMiddlePhoto_width: 100%;
  --homepageMiddlePhoto_margin-left: auto;
  --homepageMiddleCard_width: 100%;
  --homepageLowerCard_margin-left: auto;
  --homepageLowerPhoto_width: 97%;
  --homepageLowerPhoto_margin-left: auto;
  --homepageLowerPhoto_margin-right: auto;
  --fileDetailsCard__image_width: 40%;
  --fileDetailsCard__details_width: 90%;
  --fileDetailsCard__details_font-size: 0.8rem;
  --fileDetailsCard__details_line-height: 1.5rem;
  --button_padding: 0.75rem 1.25rem;
  --button_margin: 0.25rem 0 1.2rem;
  --button_font-weight: 700;
  --button_font-size: 0.85rem;
  --button--choose-file_padding: 0.75rem 1rem;
  --button_cursor: pointer;
  --button_border: none;
  --choose-file-button-tooltip_top: -1.5rem;
  --fileChosen_font-size: 0.85rem;
  /* increases at mobile breakpoint */
  --datePicker_font-size: 1.65rem;
  /* increases at mobile breakpoint */
  --formFieldBlock_font-size: 0.85rem;
  /* increases at mobile breakpoint */
  --formFieldBlock__input_border-radius: 0.25rem;
  --formError_font-size: 0.85rem;
  --textarea_font-size: 0.85rem;
  /* increases at mobile breakpoint */
  --textarea_width: 100%;
  --date_font-size: 0.9rem;
  --currentDateTimeNotice_margin-left: -0.7rem;
  --exceptionCard_width: 100%;
  --exceptionHeader_font-size: 0.9rem;
  --exceptionCard__p-font-size: 0.8rem;
  --tooltip-transition-duration: 0.5s;
  --tooltip-transition-delay--field: 0.6s;
  --tooltip-transition-delay--button: 1s;
  --tooltip-font-weight: 400;
  --passwordButtonTooltip_margin-top: -13.7rem;
  /* upload form */
  --passwordTooltip_margin-top: -4.2rem;
  /* download form */
  --passwordForDlTooltip_margin-top: -1.9rem;
  /* download form */
  --btnDownloadGetPassword_top: -7.5rem;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --universal-gap-above-footer: 5rem;
  --universal-gap-above-footer-partial-negation: -4.5rem;
  --doc_page_font-size: 0.85rem;
  --pre_font-size: 0.79rem;
  --gpgKey__font-size: 0.36rem;
  --gpgFingerprint__font-size: 0.55rem;
  --footer_height: 17.4rem;
  /* increase to raise footer until scroll bar disappears */
  --footer_height--without-section1: 7.8rem;
  /* increase to raise footer until scroll bar disappears */
  --footerSection1_display: grid;
  --footerSection1_font-size: 0.82rem;
  --footerSection2_font-size: 0.8rem;
  --footerItem__section2_width: 15rem;
  --footerColumn_grid-template-columns: 1fr;
  --footerColumn--padding: 0 0.5rem;
  /* changes to 0 when last (4th) footer column wraps */
  --footerColumn_width: 9.9rem;
}

@-moz-document url-prefix() {
  :root {
    --navbar__link_font-size: 0.55rem;
    --navbar__menuAccountLinks_margin: 0 0 0 -0.75rem;
  }
}

@media screen and (min-width:309px) {
  :root {
    --navbar__background_padding: 0.55rem 0 0.59rem;
    --navbar__link_font-size: 0.80rem;
    --navbar__link_paddingLeftRight: 0.45rem;
    /* maximise spacing without wrapping too early */
    --spacer-below-navbar: 3.2rem;
    --hero__title_font-size: 1.55rem;
    --fileListCard_width: 18rem;
    --gpgKey__font-size: 0.42rem;
    --passwordForDlTooltip_margin-top: -1.1rem;
    --footerColumn_grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @-moz-document url-prefix() {
    :root {
      --navbar__link_font-size: 0.65rem;
    }
  }
}

@media screen and (min-width:360px) {
  :root {
    --gpgKey__font-size: 0.48rem;
    --gpgFingerprint__font-size: 0.62rem;
  }
}

@media screen and (min-width:369px) {
  :root {
    --navbar__background_padding: 0.56rem 0;
    --navbar__link_font-size: 0.85rem;
    --navbar__link_paddingLeftRight: 0.6rem;
    --spacer-below-navbar: 3.4rem;
    --hero__title_font-size: 1.7rem;
    --hero__tagline_font-size: 0.85rem;
    --currentDateTimeNotice_margin-left: 0;
    --fileListCard__details_font-size: 0.88rem;
    --fileDetailsCard__details_font-size: 0.85rem;
    --passwordTooltip_margin-top: -3.25rem;
    --passwordForDlTooltip_margin-top: -1.25rem;
    --gpgKey__font-size: 0.5rem;
    --footer_height: 15.5rem;
    /* increase to raise footer until scroll bar disappears */
  }

  @-moz-document url-prefix() {
    :root {
      --navbar__link_font-size: 0.75rem;
    }
  }
}

@media screen and (min-width:390px) {
  :root {
    --navbar__menuAccountLinks_margin: 0 0 0 4.5rem;
    --navbar__link--extra-word_display: inline;
    --hero__title_font-size: 1.875rem;
    --hero__tagline_font-size: 0.9rem;
    --homepageCard_font-size: 0.85rem;
    --fileDetailsCard__details_font-size: 0.88rem;
    --fileListCard_width: 20.2rem;
    --passwordTooltip_margin-top: -2.25rem;
    /* download form */
    --passwordForDlTooltip_margin-top-top: -1.25rem;
    /* download form */
    --passwordButtonTooltip_margin-top: -10.2rem;
    /* upload form */
    --gpgKey__font-size: 0.53rem;
    --gpgFingerprint__font-size: 0.69rem;
  }

  @-moz-document url-prefix() {
    :root {
      --navbar__menuAccountLinks_margin: 0 0 0 2.8rem;
    }
  }
}

@media screen and (min-width:412px) {
  :root {
    --gpgKey__font-size: 0.56rem;
    --footer_height--without-section1: 3.95rem;
    /* increase to raise footer until scroll bar disappears */
  }
}


@media screen and (min-width:523px) {
  :root {
    --passwordButtonTooltip_margin-top: -8.2rem;
  }
}

@media screen and (min-width:528px) {
  :root {
    --navbar__link_paddingLeftRight: 0.71rem;
    --navbar__link_paddingRight--logout: 0.29rem;
    --navbar__link_paddingRight--logout-with-help: 0.28rem;
    --navbar__link_paddingLeftRight--help: 1.3rem;
    --navbar__link_paddingLeftRight--help-with-register: 1.26rem;
    --fileListCard__details_font-size: 0.9rem;
    --footerColumn_grid-template-columns: repeat(3, minmax(0, 1fr));
    --footerColumn--padding: 0;
    --footer_height: 13rem;
    /* increase to raise footer until scroll bar disappears */
    --navbar__logo_font-size: 1.25rem;
    --navbar__link_font-size: 0.88rem;
    --exceptionHeader_font-size: 1rem;
    --exceptionCard__p-font-size: 0.9rem;
    --fileDetailsCard__details_font-size: 0.92rem;
    --gpgKey__font-size: 0.72rem;
    --gpgFingerprint__font-size: 0.82rem;
  }
}

@media screen and (min-width:579px) {
  :root {
    --passwordButtonTooltip_margin-top: -7.5rem;
    --gpgKey__font-size: 0.78rem;
    --gpgFingerprint__font-size: 0.88rem;
  }
}

@media screen and (min-width:730px) {
  :root {
    --navbar__link_paddingLeftRight: 0.78rem;
    /* lower at lower screen widths to prevent early wrap */
    --homepageSectionContainer--first_max-width: 39rem;
    --homepageSectionContainer_max-width: 39rem;
    --fileList_grid-template-columns: repeat(2, minmax(0, 1fr));
    --homepageCard_max-width: 39rem;
  }
}

@media screen and (min-width:754px) {
  :root {
    --passwordButtonTooltip_margin-top: -7.5rem;
    --fileListCard__details_font-size: 0.97rem;
  }
}

/* mobile breakpoint - going wider unwraps navbar links while keeping 'login' and 'register' right */
/* This same breakpoint value is also hardcoded in account/style.css. Can't use variable in @media. */
@media screen and (min-width:776px) {
  :root {
    --navbar__link_font-size: 0.92rem;
    --navbar__logo_font-size: 1.3rem;
    --navbar__background_padding: 0.62rem 0;
    --navbar__link_padding-bottom: 16px;
    --navbar__link--active_padding-bottom: 20px;
    --navbar__menuAccountLinks_margin: 0;
    --navbar__menuAccountLinks_order: 3;
    --navbar__menuAppLinks_order: 2;
    --hero__tagline_font-size: 1.05rem;
    --spacer-below-navbar: 2rem;
    /* decrease vertical spacing when navbar unwraps */
    --fileFormCard_display: flex;
    --fileFormCard__image_width: 35%;
    --fileFormCard__form_width: 65%;
    --filePasswordCard__image_width: 10rem;
    --filePasswordCard__form_width: 20rem;
    --button_font-size: 1rem;
    --fileChosen_font-size: 0.95rem;
    --formFieldBlock_font-size: 1rem;
    --formError_font-size: 0.92rem;
    --passwordButtonTooltip_margin-top: -11.5rem;
    --passwordTooltip_margin-top: -3.75rem;
    --passwordForDlTooltip_margin-top: -1.6rem;
    --choose-file-button-tooltip_top: -1rem;
    --btnDownloadGetPassword_top: -8rem;
    --passwordFormCard__image_width: 35%;
    --passwordFormCard__form_width: 65%;
    --datePicker_font-size: 2rem;
    --textarea_font-size: 1rem;
    --date_font-size: 1rem;
    --currentDateTimeNotice_margin-left: -0.3rem;
    --homepageCard_font-size: 0.95rem;
    --fileListCard__image_width: 80px;
    --fileListCard_width: 20.2rem;
    --fileListCard__details_font-size: 0.95rem;
    --fileDetailsCard__image_width: 35%;
    --fileDetailsCard__details_width: 65%;
    --fileDetailsCard__details_font-size: 1rem;
    --fileDetailsCard__details_line-height: 1.6rem;
    --doc_page_font-size: 0.9rem;
    --pre_font-size: 0.83rem;
    --gpgKey__font-size: 0.87rem;
    --gpgFingerprint__font-size: 1rem;
    --exceptionHeader_font-size: 1.05rem;
    --exceptionCard__p-font-size: 1rem;
    --footerSection1_font-size: 0.97rem;
    --footer_height: 13.1rem;
    /* increase to raise footer until scroll bar disappears */
    --footerColumn--padding: 0 0.5rem;
    --footerSection2_font-size: 0.9rem;
    --footer_height--without-section1: 4.09rem;
    /* increase to raise footer until scroll bar disappears */
    --footerItem__section2_width: 16.5rem;
  }

  /* For Firefox, hold back on switching the order until wider (further down) */
  @-moz-document url-prefix() {
    :root {
      --navbar__menuAccountLinks_order: 2;
      --navbar__menuAppLinks_order: 3;
      --spacer-below-navbar: 3.5rem;
      --navbar__background_padding: 0.56rem 0;
      --navbar__link_padding-bottom: 8px;
      --navbar__link--active_padding-bottom: 12px;
      --navbar__menuAccountLinks_margin: 0 0 0 2.8rem;
    }
  }
}

@media screen and (min-width:848px) {
  @-moz-document url-prefix() {
    :root {
      --navbar__menuAccountLinks_order: 3;
      --navbar__menuAppLinks_order: 2;
      --spacer-below-navbar: 2rem;
      --navbar__background_padding: 0.62rem 0;
      --navbar__link_padding-bottom: 19px;
      --navbar__link--active_padding-bottom: 23px;
      --navbar__menuAccountLinks_margin: 0 0 0 -0.5rem;
    }
  }
}

@media screen and (min-width:861px) {
  :root {
    --passwordButtonTooltip_margin-top: -10.3rem;
  }
}

@media screen and (min-width:898px) {
  :root {
    --navbar__link_paddingLeftRight: 0.95rem;
    --fileChosen_font-size: 1.03rem;
    --formFieldBlock_font-size: 1.1rem;
    --formError_font-size: 1rem;
    --date_font-size: 1.1rem;
    --currentDateTimeNotice_margin-left: 0;
    --passwordButtonTooltip_margin-top: -13rem;
    --passwordTooltip_margin-top: -4.25rem;
    --passwordForDlTooltip_margin-top: -1.75rem;
  }
}

@media screen and (min-width:935px) {

  /* first break point for homepage cards - from one to two columns */
  :root {
    --navbar__logo_font-size: 1.35rem;
    --navbar__link_font-size: 0.97rem;
    --homepageHeading_text-align: left;
    --homepageCard_grid-template-columns: repeat(2, minmax(0, 1fr));
    --homepageSectionContainer_display: flex;
    --homepageSectionContainer_max-width: 73.6rem;
    --homepageSectionContainer--first_max-width: 72.6rem;
    --homepageSectionContainer--first-p_width: 28%;
    --homepageSectionContainer--first_box-sizing: border-box;
    --homepageMiddlePhoto_width: 45%;
    --homepageMiddleCard_width: 65%;
    --homepageMiddlePhoto_margin-left: -5rem;
    --homepageLowerCard_margin-left: 1.5rem;
    --homepageLowerPhoto_margin-left: -4rem;
    --homepageLowerPhoto_margin-right: 1.5rem;
    --homepageLowerPhoto_width: 52%;
    --fileListCard__details_font-size: 1rem;
    --doc_page_font-size: 1rem;
    --pre_font-size: 0.92rem;
  }
}

@media screen and (min-width:957px) {
  :root {
    --passwordButtonTooltip_margin-top: -11.5rem;
  }
}

@media screen and (min-width:1003px) {
  :root {
    --passwordButtonTooltip_margin-top: -10rem;
    --navbar__link_paddingLeftRight: 1.2rem;
  }
}

@media screen and (min-width:1026px) {
  :root {
    --homepageSectionContainer--first_max-width: 100%;
  }
}

@media screen and (min-width:1063px) {
  :root {
    --passwordButtonTooltip_margin-top: -10rem;
  }
}

@media screen and (min-width:1100px) {
  :root {
    --hero__title_font-size: 2.1rem;
    --fileList_grid-template-columns: repeat(3, minmax(0, 1fr));
    --fileDetailsCard__details_font-size: 1.1rem;
  }
}

@media screen and (min-width:1300px) {
  :root {
    --homepageSectionContainer--first_box-sizing: unset;
  }
}

@media screen and (min-width:1410px) {

  /* second break point for homepage cards - from two to three columns */
  :root {
    --homepageCard_grid-template-columns: repeat(3, minmax(0, 1fr));
    --homepageSectionContainer_max-width: 100%;
    --homepageMiddlePhoto_margin-left: 0;
    --homepageLowerPhoto_margin-left: 1.5rem;
  }
}

@media screen and (min-width:1460px) {
  :root {
    --fileList_grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* widest breakpoint - going wider stops stretching content to take up a percentage of page width */
@media screen and (min-width:1780px) {
  :root {
    --pageContent_max-width: 1600px;
  }
}

* {
  margin: 0;
  padding: 0;
  /* prevent accidental selecting when dragging scrollbar */
  /* -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none; */
}

html {
  box-sizing: border-box;
  width: 100vw;
  overflow-x: hidden;
}

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

body {
  border: 0px;
  background-color: var(--backgroundColor);
  font-family: var(--font-family);
  position: relative;
  /* needed for keeping footer at bottom */
  min-height: 100vh;
  /* needed for keeping footer at bottom; also need padding in main{...} */
}

body::-webkit-scrollbar {
  width: 14px;
}

body::-webkit-scrollbar-track {
  background: white;
}

body::-webkit-scrollbar-thumb {
  background-color: var(--primaryColor4);
  border-radius: var(--border-radius);
  border: 1px solid var(--backgroundColor);
}

ul {
  margin-left: 1rem;
}

.ul--less-top {
  margin-top: -0.75rem;
}

a.cameleonLink {
  color: var(--primaryColor1--text);
}

a.cameleonLink--terminal {
  color: var(--errors-color);
}

a.cameleonLink:active {
  color: var(--saveColor);
}

a.cameleonLink:visited {
  color: var(--saveColor);
}

a.cameleonLinkNoVisited:visited {
  color: var(--primaryColor1--text);
}

a.cameleonLink:hover {
  color: var(--primaryColor2);
}

a.cameleonLink--terminal:hover {
  color: var(--primaryColor1);
}

ol {
  margin-left: 1rem;
}

li.listHeading {
  list-style: none;
  margin: 0 0 0.5rem -1rem;
}

/* Start - section for 'nav' tag and related tags in base.html */
.navbar__background {
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1.2rem 1.2rem -1.25rem var(--box-shadow-color);
  padding: var(--navbar__background_padding);
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  overflow: auto;
  z-index: 1000;
}

.navbar__content {
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  max-width: var(--pageContent_max-width);
  margin-left: auto;
  margin-right: auto;
  list-style: none;
}

.navbar__logo {
  display: flex;
  text-decoration: none;
  align-items: center;
  margin-right: 1.5em;
  order: var(--navbar__logo_order);
}

.navbar__logo:hover {
  box-shadow: 0 0.5rem 0.5rem -1rem var(--box-shadow-color);
  transform: translate(0, -0.07rem);
  transition: transform 200ms ease-in-out;
}

.navbar__logo:active {
  box-shadow: none;
  transform: translate(0, 0.02rem);
}

.navbar__logo-icon {
  height: 3rem;
  margin-right: 0.5rem;
}

.navbar__logo-icon--no-name {
  margin-right: 4.8rem;
}

.navbar__logo-name {
  color: var(--primaryColor1);
  font-weight: 600;
  line-height: 1.5rem;
  font-size: var(--navbar__logo_font-size);
}

.navbar__menuAccountLinks {
  display: flex;
  order: var(--navbar__menuAccountLinks_order);
  list-style: none;
  line-height: 2.1rem;
  margin: var(--navbar__menuAccountLinks_margin);
}

.navbar__menuAppLinks {
  display: flex;
  list-style: none;
  order: var(--navbar__menuAppLinks_order);
  list-style: none;
  line-height: 2.1rem;
}

.navbar__link {
  text-decoration: none;
  color: var(--primaryColor3);
  position: relative;
  font-weight: 600;
  font-size: var(--navbar__link_font-size);
  line-height: 1.5rem;
  padding-left: var(--navbar__link_paddingLeftRight);
  padding-right: var(--navbar__link_paddingLeftRight);
  padding-bottom: var(--navbar__link_padding-bottom);
}

.navbar__link--help {
  padding-right: var(--navbar__link_paddingLeftRight--help);
}

.navbar__link--help-with-register {
  padding-right: var(--navbar__link_paddingLeftRight--help-with-register);
}

.navbar__link--logout {
  padding-right: var(--navbar__link_paddingRight--logout);
}

.navbar__link--logout-with-help {
  padding-right: var(--navbar__link_paddingRight--logout-with-help);
}

.navbar__link--active {
  text-decoration: none;
  color: var(--primaryColor3);
  position: relative;
  font-weight: 600;
  font-size: var(--navbar__link_font-size);
  line-height: 1.5rem;
  padding-left: var(--navbar__link_paddingLeftRight);
  padding-right: var(--navbar__link_paddingLeftRight);
  padding-bottom: var(--navbar__link--active_padding-bottom);
  border-bottom: 4px solid;
  border-color: var(--primaryColor1);
}

.navbar__link--footer {
  font-weight: 400;
  color: var(--backgroundColor);
  padding-bottom: 0.2rem;
  padding-right: 0;
  padding-left: 0;
  font-size: var(--footerSection1_font-size);
}

.navbar__link--active--footer {
  font-weight: 400;
  color: var(--backgroundColor);
  padding-bottom: 0.45rem;
  padding-right: 0;
  padding-left: 0;
  font-size: var(--footerSection1_font-size);
  border-color: var(--backgroundColor2);
}

.navbar__link--extra-word {
  display: var(--navbar__link--extra-word_display);
}

.navbar__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 4px;
  background: var(--primaryColor1);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 240ms ease-in-out;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.navbar__link--footer::after {
  background: var(--backgroundColor2);
  margin-bottom: -0.5px;
}

.navbar__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* End - section for 'nav' tag and related tags in base.html */

.spacer-below-navbar {
  height: var(--spacer-below-navbar);
}

main {
  padding: 1.3rem 0;
  max-width: var(--pageContent_max-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: 3.2rem;
  padding-bottom: var(--footer_height);
  /* use same value in footer{...} below */
  color: var(--primaryColor3);
  display: grid;
}

.main--without-footer-section1 {
  padding-bottom: var(--footer_height--without-section1);
  /* use same value in footer{...} below */
}

.hero {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 1.5rem;
}

.hero__title {
  font-size: var(--hero__title_font-size);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.8rem;
}

.hero__title--part1 {
  font-weight: 600;
  color: var(--primaryColor2);
}

.hero__title--part2 {
  color: var(--primaryColor1);
}

.hero__tagline {
  margin-top: 0.75rem;
  color: var(--primaryColor4);
  font-size: var(--hero__tagline_font-size);
}

.hero__tagline--darker {
  color: var(--primaryColor3);
}

.fileFormCardAndMessages {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  place-items: center;
  display: grid;
  column-width: 60rem;
  gap: 0.25rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.fileFormCard {
  display: var(--fileFormCard_display);
  /* grid for mobile; flex for non-mobile */
  padding: 1.5rem;
  background-color: white;
  box-shadow: 0 1.2rem 1.2rem -1.25rem var(--box-shadow-color);
  border-radius: var(--border-radius);
  margin-top: 0.9rem;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  place-items: center;
  /* centers image vertically for grid; horizontally, for flex */
}

.fileFormCard__image {
  width: var(--fileFormCard__image_width);
}

.fileFormCard__image img {
  max-width: 90%;
}

.fileFormCard__form {
  width: var(--fileFormCard__form_width);
}

.filePasswordCard__image {
  width: var(--filePasswordCard__image_width);
  margin: 0.5rem 0;
}

.filePasswordCard__image img {
  max-width: 90%;
}

.filePasswordCard__form {
  width: var(--filePasswordCard__form_width);
}

label {
  display: block;
}

.button {
  padding: var(--button_padding);
  margin: var(--button_margin);
  border-radius: var(--border-radius);
  font-weight: var(--button_font-weight);
  font-size: var(--button_font-size);
  cursor: var(--button_cursor);
  border: var(--button_border);
  white-space: nowrap;
}

.button:hover {
  box-shadow: 0 1.2rem 1.2rem -1rem var(--box-shadow-color);
  transform: translate(0, -1px);
  transition: transform 250ms ease-in-out;
}

.button:active {
  box-shadow: none;
  transform: translate(0, 1px);
}

.applyButton,
.downloadButton {
  color: white;
  background-color: var(--primaryColor1);
}

.adminButton {
  color: white;
  background-color: var(--primaryColor3);
}

.copyButton {
  color: white;
  background-color: var(--primaryColor3);
}

.backButton {
  color: white;
  background-color: var(--primaryColor4);
}

.filePasswordButton {
  color: white;
  background-color: var(--primaryColor3);
  margin-left: 1rem;
  margin-top: 0.85rem;
  margin-bottom: 0.85rem;
}

.saveButton {
  color: white;
  background-color: var(--saveColor);
}

.deleteButton {
  color: white;
  background-color: var(--deleteColor);
}

/* For 'choose file' button styling, see below for input[type=file]::file-selector-button */

.formFieldBlock {
  display: block;
  margin: 0 0 1rem;
  font-size: var(--formFieldBlock_font-size);
}

.formFieldBlock--choose-file {
  display: block;
  margin: 0.6rem 0;
  font-size: var(--formFieldBlock_font-size);
}

.formFieldBlock--last {
  display: block;
  margin: 0;
  font-size: var(--formFieldBlock_font-size);
}

.formFieldBlock__input {
  padding: 0.3rem;
  box-shadow: 0 0.5rem 1.2rem -1rem var(--box-shadow-color);
  border: solid rgb(219, 219, 219) 0.05rem;
  border-radius: var(--formFieldBlock__input_border-radius);
}

.formFieldBlock__input--enterFilePassword {
  padding: 0rem 0.3rem;
  box-shadow: 0 0.5rem 1.2rem -1rem var(--box-shadow-color);
  border: solid rgb(219, 219, 219) 0.05rem;
  border-radius: var(--formFieldBlock__input_border-radius);
  margin-bottom: -0.75rem;
}

/* .formFieldBlock__input--choose-file{
  padding: 0.2rem;
  box-shadow: 0 0.5rem 1.2rem -1rem var(--box-shadow-color);
  border:solid rgb(219, 219, 219) 0.05rem;
  border-radius: var(--formFieldBlock__input_border-radius);
} */

.formFieldBlock__input--uploadedFile {
  padding: 0.5rem;
  box-shadow: 0 0.5rem 1.2rem -1rem var(--box-shadow-color);
  border: solid rgb(219, 219, 219) 0.05rem;
  border-radius: var(--formFieldBlock__input_border-radius);
  background-color: var(--backgroundColor);
}

.formFieldBlock__input--firefox {
  padding: 0.57rem 0.5rem;
  box-shadow: 0 0.5rem 1.2rem -1rem var(--box-shadow-color);
  border: solid rgb(219, 219, 219) 0.05rem;
  border-radius: var(--formFieldBlock__input_border-radius);
}

/* 'choose file' button */
input[type=file]::file-selector-button {
  color: white;
  background-color: var(--primaryColor3);
  padding: var(--button--choose-file_padding);
  margin: 1rem 0.75rem 1rem 1rem;
  border-radius: var(--border-radius);
  font-weight: var(--button_font-weight);
  font-size: var(--button_font-size);
  text-transform: uppercase;
  border: var(--button_border);
  cursor: var(--button_cursor);
}

input[type=file]::file-selector-button:hover {
  box-shadow: 0 1.2rem 1.2rem -1rem var(--box-shadow-color);
  transform: translate(0, -1px);
  transition: transform 180ms ease-in-out;
}

input[type=file]::file-selector-button:active {
  box-shadow: none;
  transform: translate(0, 1px);
}

.dateTimeGroup {
  display: flex;
}

input[type="checkbox"] {
  margin: 0.2rem 0.8rem;
  width: 1.4rem;
  height: 1.4rem;
}

.addPassword {
  display: flex;
  align-items: center;
  padding: 0;
}

.keyStatus {
  visibility: visible;
  font-size: var(--fileChosen_font-size);
  font-family: -apple-system, BlinkMacSystemFont, 'Courier New', sans-serif;
  font-weight: 400;
  color: black;
  margin-left: 0.6rem;
}

.passwordUsed {
  color: var(--saveColor);
}

.passwordNotUsed {
  color: var(--primaryColor1--text);
}

/* style the text beside the 'choose file' button; defaults to "No file chosen" */
.fileChosen {
  font-size: var(--fileChosen_font-size);
  font-family: -apple-system, BlinkMacSystemFont, 'Courier New', sans-serif;
  font-weight: 400;
  color: black;
  width: 100%;
  margin-left: 0.3rem;
  cursor: var(--button_cursor);
}

.labelFileChosen {
  margin: 1.75rem 0 0;
}

input[type="date"] {
  border: none;
  padding: 0.25rem 0 0.25rem 0.8rem;
  font-size: var(--date_font-size);
}

.placeholderColor{
  color:#6f6f6f;
}

.validValueColor{
  color:var(--primaryColor2);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  color: var(--primaryColor2);
  padding: 0 0.6rem 0 0;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  transform: translate(0, -0.1rem);
  transition: transform 250ms ease-in-out;
}

input[type="date"]::-webkit-calendar-picker-indicator:active {
  transform: translate(0, 0.15rem);
}

input[type="date"]::-webkit-clear-button {
  font-size: 2rem;
  height: 3rem;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 2rem;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: var(--datePicker_font-size);
}

input[type="time"] {
  border: none;
  padding: 0.2rem 0 0.2rem 0.8rem;
  font-size: var(--date_font-size);
}

input[type="time"]::-webkit-calendar-picker-indicator {
  padding: 0 0.6rem 0 0;
  font-size: var(--datePicker_font-size);
}

input[type="time"]::-webkit-calendar-picker-indicator:hover {
  transform: translate(0, -0.1rem);
  transition: transform 250ms ease-in-out;
}

input[type="time"]::-webkit-calendar-picker-indicator:active {
  transform: translate(0, 0.15rem);
}

input[type="number"] {
  border: none;
  padding: 0.5rem 0 0.5rem 1rem;
  font-size: var(--textarea_font-size);
  font-family: -apple-system, BlinkMacSystemFont, 'Courier New', sans-serif;
}

input[type="password"].filePassword {
  border: none;
  padding: 0.5rem 0 0.5rem 0.75rem;
  font-size: var(--textarea_font-size);
  font-family: -apple-system, BlinkMacSystemFont, 'Courier New', sans-serif;
  width: 100%;
}

textarea {
  font-size: var(--textarea_font-size);
  padding: 0.3rem;
  margin-bottom: -0.25rem;
  border: none;
  width: var(--textarea_width);
}

.messagesAboveForm {
  padding: 0.9rem;
  margin-bottom: 0.6rem;
  background-color: var(--messages-color);
  box-shadow: 0 1.2rem 1.2rem -1.25rem var(--box-shadow-color);
  width: fit-content;
  height: auto;
  overflow: auto;
  justify-content: center;
  border-radius: var(--border-radius);
  font-size: var(--formFieldBlock_font-size);
  line-height: 1.5rem;
}

.errorsAboveForm {
  padding: 0.9rem;
  margin-bottom: 0.4rem;
  background-color: var(--errors-color);
  box-shadow: 0 1.2rem 1.2rem -1.25rem var(--box-shadow-color);
  width: fit-content;
  height: auto;
  overflow: auto;
  justify-content: center;
  border-radius: var(--border-radius);
  font-size: var(--formFieldBlock_font-size);
  line-height: 1.5rem;
}

.formFieldBlock__errors {
  padding: 0.5rem 0.9rem;
  margin-bottom: 0.6rem;
  background-color: var(--errors-color);
  box-shadow: 0 1.2rem 1.2rem -1.25rem var(--box-shadow-color);
  width: fit-content;
  border-radius: var(--border-radius);
  font-weight: 700;
}

.formError {
  line-height: 1.9rem;
  /* need line-height >= 1.8rem to create shadows below field error messages */
  font-size: var(--formError_font-size);
}

.currentDateTimeNotice {
  color: var(--primaryColor3);
  margin-left: var(--currentDateTimeNotice_margin-left);
}

.homepageContainer {
  display: grid;
}

.homepageHeading {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4rem;
  padding: 1.5rem 0;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  text-align: var(--homepageHeading_text-align);
}

.homepageHeading--lowest {
  margin-top: var(--universal-gap-above-footer-partial-negation);
  /* homepageHeading--lowest and homepageLowerContainer both appear only when logged out, so shift up to partially negate homepageSectionContainer margin-bottom gap for footer */
}

.homepageCardContainer {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  place-items: center;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: var(--homepageCard_grid-template-columns);
}

.homepageLeadInQuestion {
  color: white;
  font-weight: 600;
}

.homepageCard {
  display: block;
  /* grid for mobile; flex for non-mobile */
  padding: 1.5rem;
  font-size: var(--homepageCard_font-size);
  line-height: 1.4rem;
  background-color: var(--backgroundColor2);
  box-shadow: 0 0.72rem 1rem -1.25rem var(--box-shadow-color);
  border-radius: var(--homepageCard_border-radius);
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  margin-left: auto;
  margin-right: auto;
  place-content: center;
  max-width: var(--homepageCard_max-width);
}

.homepageCard ul {
  list-style: none;
}

.homepageCard ul li:before {
  content: '\2713';
  font-weight: 700;
  display: inline-block;
  color: var(--primaryColor1--text);
  padding: 0 0.2rem 0 0;
}

.homepageCard__image--intro {
  display: flex;
  width: var(--homepageCard__image_width--intro);
}

.homepageCard__image {
  display: flex;
  width: var(--homepageCard__image_width);
}

.homepageCard__image--agpl {
  display: flex;
  width: var(--homepageCard__image_width--agpl);
}

.homepageCard__heading {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
  color: var(--primaryColor3);
  padding: 0.9rem 0 0.75rem;
  word-wrap: break-word;
}

.homepageCard__heading--agpl {
  padding: 1.2rem 0 0.75rem;
  font-weight: 700;
}

.homepageCard__heading--usability {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
  color: var(--primaryColor1);
  padding: 0.02rem 0 0.25rem;
  word-wrap: break-word;
}

.homepageCard__details {
  color: var(--primaryColor3);
}

.homepageSectionContainer {
  gap: 1.5rem;
  grid-template-columns: var(--homepageCard_grid-template-columns);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--universal-gap-above-footer);
  /* vertical space above the footer */
  border-radius: var(--border-radius);
  line-height: 1.4rem;
  max-width: var(--homepageSectionContainer_max-width);
  padding: 1.25rem;
  background-color: var(--primaryColor1);
  place-items: center;
  display: var(--homepageSectionContainer_display);
  /* =grid when cards are 1 column to put photo on top */
}

.homepageSectionContainer--first {
  background-color: var(--primaryColor4);
  color: var(--backgroundColor);
  font-size: var(--homepageCard_font-size);
  margin-bottom: 0.25rem;
  max-width: var(--homepageSectionContainer--first_max-width);
  margin-right: auto;
  margin-left: auto;
  box-sizing: var(--homepageSectionContainer--first_box-sizing);
}

img.homepageCard__image--intro {
  max-width: 9rem;
  margin: -15px;
  padding: 0;
}

div.homepageSectionContainer--first>p {
  width: var(--homepageSectionContainer--first-p_width);
  margin-left: auto;
  margin-right: auto;
}

.homepageMiddlePhoto {
  /* padding: 1.25rem; */
  width: var(--homepageMiddlePhoto_width);
  margin-left: var(--homepageMiddlePhoto_margin-left);
  margin-right: auto;
  border-radius: var(--homepageCard_border-radius);
}

.homepageMiddleCard {
  padding: 0.75rem 1.5rem;
  line-height: 1.4rem;
  font-size: var(--homepageCard_font-size);
  font-family: -apple-system, BlinkMacSystemFont, 'Courier New', sans-serif;
  background-color: #1e1e1e;
  color: var(--backgroundColor);
  box-shadow: 0 0.72rem 1rem -1.25rem var(--box-shadow-color);
  border-radius: var(--homepageCard_border-radius);
  margin-left: auto;
  margin-right: auto;
  place-items: center;
  width: var(--homepageMiddleCard_width);
}

.homepageMiddleCard p {
  margin: 0.75rem 0;
}

.homepageSectionContainer--last {
  padding-bottom: 1.75rem;
  background-color: var(--backgroundColor2);
  max-width: 99%;
}

.homepageLowerCard {
  /* encloses the homepage registration form */
  font-size: var(--fileDetailsCard__details_font-size);
  border-radius: var(--homepageCard_border-radius);
  margin-left: var(--homepageLowerCard_margin-left);
  margin-right: auto;
  place-items: center;
  z-index: 10;
}

.homepageLowerPhoto {
  width: var(--homepageLowerPhoto_width);
  margin-left: var(--homepageLowerPhoto_margin-left);
  margin-right: var(--homepageLowerPhoto_margin-right);
  border-radius: var(--homepageCard_border-radius);
  margin-top: 0.5rem;
}

.contactCard {
  font-size: var(--homepageCard_font-size);
  margin-top: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--universal-gap-above-footer);
  /* vertical space above the footer */
  border-radius: var(--border-radius);
  line-height: 1.4rem;
  /* max-width: var(--homepageSectionContainer_max-width); */
  padding: 1.25rem;
  place-items: center;
  background-color: var(--backgroundColor2);
}

.contactCard--narrow-bottom {
  margin-bottom: 0.5rem;
}

.contactEmail {
  font-size: var(--formFieldBlock_font-size);
}

.fileList {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  place-items: center;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: var(--fileList_grid-template-columns);
  margin-top: 0.5rem;
  margin-bottom: var(--universal-gap-above-footer);
}

.doc_page {
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 2rem;
  place-items: left;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  font-size: var(--doc_page_font-size);
}

.doc_page>ul {
  padding-left: 2rem;
}

.li--spaced {
  margin-top: 0.5rem;
}

.li--less-spaced {
  margin-top: 0.32rem;
}

.doc_page>.indent {
  padding-left: 2rem;
}

/* 'pre' tag is used in license.html and userguide.html to format text snippets */
pre {
  font-size: var(--pre_font-size);
  color: black;
  font-family: -apple-system, BlinkMacSystemFont, 'Courier New', sans-serif;
  overflow-x: auto;
  white-space: pre-line;
  white-space: -moz-pre-line;
  white-space: -pre-line;
  white-space: -o-pre-line;
  word-wrap: break-word;
}

.code {
  background-color: white;
  font-weight: 600;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  margin: 0.15rem;
}

.code--non-bold {
  font-weight: 400;
  line-height: 1.5rem;
  padding: 0.2rem 0.35rem;
}

.codeblock {
  padding: 0.5rem 0.5rem;
  line-height: 1.2rem;
}

.disclaimer {
  color: var(--primaryColor2);
  font-weight: 500;
  font-size: 1.1rem;
}

.fileListCard {
  display: block;
  /* grid for mobile; flex for non-mobile */
  padding: 1.5rem;
  background-color: white;
  box-shadow: 0 1.2rem 1.2rem -1.25rem var(--box-shadow-color);
  border-radius: var(--border-radius);
  margin-left: auto;
  margin-right: auto;
  place-items: center;
  width: var(--fileListCard_width);
}

.fileListCard--expired {
  background-color: var(--fileListCard--expired_background-color);
}

.gpgTitle {
  margin-top: -2.5rem;
  line-height: 1.5rem;
}

.filesAppHyperLinks {
  color: var(--primaryColor1);
  text-decoration: none;
}

.fileListCard,
a:link,
a:visited {
  text-decoration: none;
}

.fileListCard__image {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
  width: var(--fileListCard__image_width);
}

.fileListCard__filepath {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
  color: var(--primaryColor1);
  padding: 0.5rem 0 0.75rem;
  word-wrap: break-word;
}

.fileListCard__details {
  color: var(--primaryColor4);
  font-size: var(--fileListCard__details_font-size);
}

.timeNow {
  margin-top: -2rem;
}

.fileDetailsCardContainer {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  place-items: center;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.fileDetailsCard {
  display: var(--fileFormCard_display);
  /* grid for mobile; flex for non-mobile */
  padding: 1.5rem;
  background-color: white;
  box-shadow: 0 1.2rem 1.2rem -1.25rem var(--box-shadow-color);
  border-radius: var(--border-radius);
  margin-top: 0.9rem;
  margin-bottom: 1.75rem;
  margin-left: auto;
  margin-right: auto;
  place-items: center;
}

.fileDetailsCard--expired {
  background-color: var(--fileListCard--expired_background-color);
}

.fileDetailsCard__image {
  width: var(--fileDetailsCard__image_width);
}

.fileDetailsCard__image img {
  max-width: 90%;
}

.fileDetailsCard__details {
  width: var(--fileDetailsCard__details_width);
  line-height: var(--fileDetailsCard__details_line-height);
  font-size: var(--fileDetailsCard__details_font-size);
}

.fileDetailsCard__fileName {
  font-weight: 700;
  color: var(--primaryColor3);
  padding: 0.5rem 0 0.75rem;
  word-wrap: break-word;
}

.fileMaxDownloadReached {
  font-weight: 600;
  /* color: var(--deleteColor); */
}

.fileMaxDownloadNotReached {
  font-weight: 600;
  color: var(--primaryColor1);
}

.fileSizeMissingFile {
  font-weight: 600;
  color: var(--deleteColor);
}

.fileDetailsButtons,
.uploadFileButtons {
  text-align: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--universal-gap-above-footer);
}

.fileDetailsButtons button,
.uploadFileButtons button {
  margin: 0.2rem;
  /* buttons need margin above & below (as well as left & right) for when wrapped */
  flex-wrap: wrap;
}

.myUploadsButtons {
  margin-top: 0.25rem;
  margin-bottom: 1.75rem;
}

.pageContentCentered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.exceptionHeader {
  font-weight: 700;
  font-size: var(--exceptionHeader_font-size);
  color: var(--primaryColor2);
  padding: 1rem 0;
}

.exceptionCard {
  display: block;
  padding: 1.5rem;
  background-color: white;
  box-shadow: 0 1.2rem 1.2rem -1.25rem var(--box-shadow-color);
  border-radius: var(--border-radius);
  margin-top: 1rem;
  margin-bottom: 1.75rem;
  margin-left: auto;
  margin-right: auto;
  place-items: center;
  width: var(--exceptionCard_width);
  color: var(--primaryColor3);
}

.exceptionCard p {
  padding: 0.5rem 0;
  font-size: var(--exceptionCard__p-font-size);
}

/* START: Tooltip on hover */
/* Code adapted from a Stack Overflow answer by Pietro Terracciano 2017-10-16 (edited by CommunityBot 2020-06-20), source URL: https://stackoverflow.com/questions/46771953/tooltip-on-hover-on-element
*/
div.formFieldBlock,
div.formFieldBlock--choose-file,
div.formFieldBlock--last,
div.fileDetailsCard__details,
div.buttonLink {
  position: relative;
  /* Parent tag (div.formFieldBlock in this case) requires position:relative */
}

.fileDetailsButtons.gpgKeyBtnContainer {
  justify-content: right;
  margin-bottom: 1rem;
}

div.formFieldBlock span,
div.formFieldBlock--choose-file span,
div.formFieldBlock--last span,
div.fileDetailsCard__details span,
div.buttonLink span {
  visibility: hidden;
  opacity: 0;
  border-radius: var(--formFieldBlock__input_border-radius);
  position: absolute;
  /* This is necessary */
  top: -1.8rem;
  left: -0.1rem;
  text-align: left;
  padding: 0.3rem 0.5rem;
  /* Tooltip padding */
  width: auto;
  height: auto;
  transition-duration: var(--tooltip-transition-duration);
  /* Tooltip animation duration */
  transition-delay: var(--tooltip-transition-delay--field);
  /* Tooltip animation delay */
  transition-property: opacity;
  /* Apply animation only on opacity rule */
  background: var(--primaryColor4);
  /* Tooltip background color */
  color: #fff;
  /* Tooltip text color */

  /* Compatibility with other Browsers */
  -moz-transition-duration: var(--tooltip-transition-duration);
  -moz-transition-property: opacity;
  -o-transition-duration: var(--tooltip-transition-duration);
  -o-transition-property: opacity;
  -ms-transition-duration: var(--tooltip-transition-duration);
  -ms-transition-property: opacity;
  -webkit-transition-duration: var(--tooltip-transition-duration);
  -webkit-transition-property: opacity;
}

div.buttonLink span {
  /* override some property values that differ from those shared with formFieldBlock tooltips above */
  /* width: 10rem; */
  top: -4.5rem;
  font-size: var(--button_font-size);
  transition-delay: var(--tooltip-transition-delay--button);
  /* Tooltip animation delay */
}

div.buttonLink .btnDownloadGetPassword {
  top: var(--btnDownloadGetPassword_top);
}

span.passwordButtonTooltip {
  /* override some property values that differ from those shared with formFieldBlock tooltips above */
  margin-top: var(--passwordButtonTooltip_margin-top);
}

span.gpgKeyButtonTooltip {
  /* override some property values that differ from those shared with formFieldBlock tooltips above */
  margin-top: 1.1rem;
}

div.formFieldBlock--choose-file span {
  top: var(--choose-file-button-tooltip_top);
}

span.passwordTooltip {
  /* override some property values that differ from those shared with formFieldBlock tooltips above */
  margin-top: var(--passwordTooltip_margin-top);
}

span.passwordForDlTooltip {
  /* override some property values that differ from those shared with formFieldBlock tooltips above */
  margin-top: var(--passwordForDlTooltip_margin-top);
}

div.fileDetailsCard__details span {
  top: 12.3rem;
  max-width: 100%;
  justify-items: center;
}

div.formFieldBlock:hover span,
div.formFieldBlock--choose-file:hover span,
div.formFieldBlock--last:hover span,
div.fileDetailsCard__details:hover span,
div.buttonLink:hover span {
  visibility: visible;
  opacity: 1;
  z-index: 2000;
}

div.fileMissing {
  color: var(--deleteColor)
}

/* END: Tooltip on hover */

footer {
  border: 0px;
  font-family: var(--font-family);
  width: 100%;
  height: var(--footer_height);
  /* require same value in main{...} above */
  position: absolute;
  bottom: 0;
}

.footer--without-section1 {
  height: var(--footer_height--without-section1);
  /* require same value in main{...} above */
}

.footerSection1_background {
  background-color: var(--primaryColor3);
}

.footerSection2_background {
  background-color: var(--primaryColor1);
}

.footer--without-section1>.footerSection2_background {
  background-color: var(--primaryColor3);
}

.footerSection1 {
  color: var(--backgroundColor);
  font-size: var(--footerSection1_font-size);
  padding: 2rem 0;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--pageContent_max-width);
  display: flex;
  flex-wrap: wrap;
}

.footerColumn {
  display: grid;
  justify-content: center;
  grid-template-columns: var(--footerColumn_grid-template-columns);
  padding: 0 0.5rem;
  width: 100%;
}

.footerItem {
  padding: 0.5rem 0;
  width: 10rem;
  /* minimum width to fit all items in footerSection1 */
  margin-left: auto;
  margin-right: auto;
}

a.footerLink {
  color: white;
}

a.footerLink:active {
  color: var(--saveColor);
}

a.footerLink:visited {
  color: white;
}

a.footerLink:hover {
  color: var(--fileListCard--expired_background-color);
}

.footerSection2 {
  color: white;
  font-size: var(--footerSection2_font-size);
  padding: 1rem 0;
  background-color: var(--primaryColor1);
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--pageContent_max-width);
  display: flex;
}

.footer--without-section1>.footerSection2_background>.footerSection2 {
  background-color: var(--primaryColor3);
}

.footerSection2>.footerColumn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.footerSection2>.footerColumn>.footerItem {
  padding: 0.5rem 0;
  width: var(--footerItem__section2_width);
  /* At relevant break points, change width to one that fits both items in footerSection2 > .footerColumn */
}

/* used by progressBar on uploadfile.html */
.not-visible {
  display: none;
}

progress {
  width: 340px;
  height: 20px;
  border-radius: 12px;
}

/* Firefox browsers */
progress::-moz-progress-bar {
  background: var(--primaryColor1);
  border-radius: 12px;
}

/* Chrome and Safari browsers */
progress::-webkit-progress-value {
  background: var(--primaryColor1);
  border-radius: 12px;
}

progress::-webkit-progress-bar {
  background: #d9d9d9;
  height: 18px;
  border-radius: 12px;
}

.gpgKeyFont {
  font-size: var(--gpgKey__font-size);
}

.gpgFingerprintContainer {
  margin-top: 0.25rem;
  margin-bottom: 2rem;
}

.gpgFingerprint {
  font-size: var(--gpgFingerprint__font-size);
  color: var(--primaryColor3);
  line-height: 0.92rem;
}

.bulletedList {
  text-decoration: none;
}

.section {
  scroll-margin-top: 7.5rem;
}