:root {
   --font-family-default: "Inter", sans-serif;
   --font-family-monospace: "Space Mono", serif;
   --color-primary: #0000cd;
/*
   --color-primary-lighter: #3e3ef1;
*/
   --color-primary-lighter: #5454dc;
   --color-primary-bg: #adadcc;
   --color-primary-faint: #f4f4f7;
   --color-default: black;
   --color-default-light: #697386;
   --color-default-lighter: #8e8e8e;
   --color-picturebg: #808080;
   --color-online: #2ea90e;
   --color-danger: #ff3737;
   --color-faint-lines: #dddddd;
   --color-bg-adminmenu: #1a1a1e;
   --color-bg-adminmenu-lighter: #1b1b38;
   --box-shadow-panels: 0 0 10px rgb(0 0 0 / 20%);
   --headerheight: 85px;
}



/* Font to form elements
 * */
body, input, select, button, textarea {
   font-family: var(--font-family-default);
   font-optical-sizing: auto;
   font-style: normal;
   font-weight: 400;
}

/* Some sizing except for radio & checkbox
 * */
input:not([type="radio"]):not([type="checkbox"]), select, button, textarea {
   font-size: 1em;
   min-width: 0;
   width: 100%;
   padding: 8px 12px;
   box-sizing: border-box;
   border-radius: 4px;
   border: 1px solid var(--color-faint-lines);
   background: white;
   color: black;
   /* line-height: 1; */ /* this creates height inconistencies between (at least) button & input */
}

input:invalid,
textarea:invalid {
   background: #FFDCDC !important;
}

input:disabled,
textarea:disabled {
   color: var(--color-default-lighter) !important;
}



/* Codes, numbers
 * */
code {
   font-family: var(--font-family-monospace);
}



/* Symbols at the beginning of input field
* */
.fieldwithsymbol {
   position: relative;
/*
   align-items: center;
*/
/*
   background: white;
   border-radius: 4px;
   border: 1px solid var(--color-faint-lines);
*/
}
.fieldwithsymbol > .svg {
   position: absolute;
   top: 50%;
   left: 6px;
   transform: translate(0,-50%);
}
.fieldwithsymbol > .svg > svg {
/*
   position: relative;
   top: 50%;
   transform: translate(0,-50%);
*/
}
.fieldwithsymbol > input:not([type="radio"]):not([type="checkbox"]) {
   padding-left: 1.3em;
}



/* INFO BOXES
 * */
.infobox {
   padding: 0 16px 16px;
   margin-top: 24px;
}
.infobox.warning {
   color: var(--color-default-light);
   background: #ffffdf;
   border: 1px solid #ceceaf;
}
.infobox p {
   margin: 16px 0 0;
}



/* BUTTONS
 * */
button {
   border-color: var(--color-primary);
   background: var(--color-primary);
   color: white;
   width: auto;
   opacity: .85;
}
button:not(:disabled):not(.svg):hover {
   box-shadow: 0 0 3px rgb(0 0 0 / 40%);
   opacity: 1;
}
button:disabled {
   filter: grayscale(.75);
   opacity: .25;
}

button.plain:not(:disabled),
button.cancel:not(:disabled) {
   background: white;
   color: var(--color-primary);
}

button.danger {
   border-color: var(--color-danger);
   background: var(--color-danger);
}



/* SVG Link & Button
 * */
button.svg {
   margin: 0;
   padding: 0;
   border: none;
   background: transparent;
   width: auto;
}
button.svg path,
a.svg path {
   fill: var(--color-primary);
}



/* Close SVG Button
 * */
button.svg.close {
   background: var(--color-danger);
   border-radius: 10px;
   padding: 1px;
}
button.svg.close svg {
   display: block;
}
button.svg.close path {
   fill: white;
}



/* SVG in Buttons
 * */
button:not(.svg):not(.tox-tbtn) path {
   fill: white;
}



/* Bottom actions
 * */
.bottomactions {
   margin: 24px 0 0;
   padding: 0 0 8px;
   border: none;
   display: flex;
   column-gap: 16px;
   justify-content: center;
}



/* Picture placeholder
 * */
.haspicplaceholder {
   background-color: var(--color-picturebg);
   background-image: url(https://staging.sharedassets.uniondocs.org/images/uniondocs-logo-trans-grey.png);
   background-repeat: no-repeat;
   background-position: 50% 50%;
}



html, body {
   height: 100%;
}
body {
   font-size: 18px;
   line-height: 1.4;
   background: white;
   color: black;
   padding: 0;
   margin: 0;
/*
   display: flex;
   flex-direction: column;
*/
}
body > footer {
   padding: 32px 0;
   color: white;
   background-color: var(--color-primary);
   font-size: 1.25em;
   font-weight: 500;
   line-height: 1;
   text-align: center;
   margin-top: auto;
}



h1 {
   margin: 0;
   padding-top: 2em;
   font-size: 2em;
   font-weight: 600;
}
h2 { font-size: 1.6em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1.2em; }



a, .link {
   color: var(--color-primary);
   cursor: pointer;
}



.hidden {
   display: none !important;
}

.nowrap {
   white-space: nowrap;
}

.faicon {
   width: 1em;
   height: 1em;
   vertical-align: -0.125em;
}



/* Horizontal container */
.hcontainer {
   margin: 0 18px;
}
@media( min-width: 768px ) {
   .hcontainer {
      margin: 0 32px;
   }
}
@media( min-width: 1344px ) {
   .hcontainer {
      margin: 0 auto;
      width: 1280px;
   }
}



/* Loading stuff */
.pageloading {
   display: none;
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 6000;
   background: rgba(0,0,0,.75 )
}
.pageloading span {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-size: 1.5em;
}
button .loading svg,
.pageloading svg,
.svg.loading svg {
   animation: spin 700ms linear infinite;
}
.pageloading path {
   fill: var(--color-primary-lighter);
}

@keyframes spin {
   100% {
      transform: rotate(360deg);
   }
}



/* Popover page notification */
.popovernotification {
   margin-top: 16px;
   position: fixed;
   padding: 0 16px;
   border: none;
   background: transparent;
}
.popovernotification > span {
   display: block;
   background-color: rgba(0, 0, 0, .75);
   color: white;
   padding: 8px 18px;
   border-radius: 20px;
}



/* DIALOGS
 * */
dialog {
   background: white;
   border: none;
   box-shadow: var(--box-shadow-panels);
   max-width: calc(100vw - 72px);
   max-height: calc(100vh - 72px);
}
dialog::backdrop {
   background-color: rgba(0,0,0,.5);
}

/* Limited width on large screens
 * */
@media( min-width: 840px ) {
   dialog.limitwidth {
      max-width: 768px;
   }
}



/* SEARCH
 * */
dialog.search {
   display: flex;
}



/* PUBLIC HEADER
 * Moved here because the tradeoff is okay
 * (larger and not always used CSS vs loading multiple CSS file)
 * Admin header is in admin.css
 * */

body > header {
   background-color: white;
   line-height: 1;
   box-shadow: 0 0 10px 0px rgb(0 0 0 / 30%);
}

body > main {
   min-height: calc(100vh - 85px - 87px);
}



/* Fixed header for >1024px
 * Transparent if $off->transheader = true in module's header.php
 * */
@media( min-width: 1024px ) {
   body > header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 500;
   }
   body > main {
      padding-top: 85px;
/*
      min-height: calc(100vh - 85px - 87px);
*/
   }
   body.transheader > header.trans {
      background-color: transparent;
      box-shadow: none;
   }
   body.transheader > main {
      padding-top: 0;
   }
}
body > header > div {
   height: 85px;
   display: flex;
   align-items: center;
}
body > header a {
   text-decoration: none;
}



/* Big top pic
 * for the transparent header
 * */
body.transheader > main > div:first-child {
   position: relative;
}
body.transheader > main > div:first-child > img,
body.transheader > main > div:first-child > video {
   display: block;
   width: 100%;
   height: auto;
   filter: grayscale(1);
}
body.transheader > main > div:first-child h1 {
   margin: 0;
   padding: 0;
   max-width: 90%;
   text-align: center;
   color: white;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-shadow: -1px 1px 4px black;
}
@media( min-width: 768px ) {
   body.transheader > main > div:first-child {
      height: calc(100vh - 85px);
   }
   body.transheader > main > div:first-child > img,
   body.transheader > main > div:first-child > video {
      height: 100%;
      object-fit: cover;
      aspect-ratio: 1/1;
   }
   body.transheader > main > div:first-child h1 {
      font-size: 2.5em;
      font-weight: 700;
   }
}
@media( min-width: 1024px ) {
   body.transheader > main > div:first-child {
      height: 100vh;
   }
   body.transheader > main > div:first-child h1 {
      font-size: 2.8em;
   }
}



/* Logo box
 * */
.undologo {
   display: flex;
   align-items: center;
   column-gap: 10px;
   font-size: .8em;
   margin-right: auto;
}
.undologo > span {
   display: none;
   flex-direction: column;
   row-gap: 2px;
   letter-spacing: .1em;
}
@media( min-width: 512px ) {
   .undologo > span {
      display: flex;
   }
}
.undologo > span > span:nth-child(1) {
   letter-spacing: .1em;
}



/* Main menu
 * */
.mainmenu {
   display: flex;
   align-items: center;
   column-gap: 16px;
   font-weight: 700;
}
.mainmenu svg {
   font-size: 1.2em;
}
.mainmenu a {
   color: white;
}
.mainmenu ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
.mainmenu > ul {
   display: none;
   position: fixed;
   top: 0;
   right: 0;
   z-index: 1000;
   width: 200px;
   flex-direction: column;
   row-gap: 18px;
   padding: 24px;
   background: var(--color-primary);
}
.mainmenu > ul.shown {
   display: flex;
}
.mainmenu > ul > li > a,
.mainmenu > ul > li > span {
   display: flex;
   column-gap: 8px;
}
.mainmenu > ul > li > a svg,
.mainmenu > ul > li > span svg {
   font-size: .75em;
}
.mainmenu > ul > li > a path,
.mainmenu > ul > li > span path {
   fill: white;
}
.mainmenu button {
   border: none;
   background: transparent;
   margin: 0;
   padding: 0;
}
@media( min-width: 1024px ) {
   .mainmenu > ul {
      font-size: .95em;
      position: relative;
      width: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: 32px;
      padding: 0;
      background: transparent;
   }
   .mainmenu a {
      color: var(--color-primary);
   }
   .mainmenu > ul > li > a path,
   .mainmenu > ul > li > span path {
      fill: var(--color-primary);
   }
   .mainmenu > button {
      display: none;
   }
}
@media( min-width: 1280px ) {
   .mainmenu,
   .mainmenu > ul {
      column-gap: 48px;
   }
}

/* Children
 * */
.mainmenu .children {
   display: none;
   padding: 18px 0 8px;
}
.mainmenu .children.shown {
   display: block;
}
.mainmenu .children ul {
   display: flex;
   flex-direction: column;
   row-gap: 18px;
   font-weight: 400;
}
@media( min-width: 1024px ) {
   .mainmenu .children {
      position: absolute;
      top: -1px;
      left: -16px;
      padding-top: 36px;
   }
/*
   .mainmenu .children.opened {
      display: unset;
   }
*/
   .mainmenu .children ul {
      background: rgba(255,255,255,.9);
      padding: 24px 16px;
      box-shadow: var(--box-shadow-panels);
   }
}


/* Main menu's User Popup
 * */
.mainmenu .usermenu {
   position: relative;
}
.mainmenu .usermenu path {
   fill: var(--color-online);
}
.mainmenu .usermenu > a {

}
.mainmenu .usermenu > div {
   position: absolute;
   z-index: 500;
   top: -1px;
   right: -16px;
   padding-top: 36px;
   display: none;
}
.mainmenu .usermenu > div.shown {
   display: block;
}
.mainmenu .usermenu ul {
   background: rgba(255,255,255,.9);
   padding: 16px;
   box-shadow: var(--box-shadow-panels);
}
.mainmenu .usermenu ul a {
   font-weight: 400;
   padding: 9px 0;
   display: block;
   white-space: nowrap;
   font-size: .9em;
   color: var(--color-primary);
}



/* Search
 * */
.mainsearch button {
}



/* Centerized content in <main>
 * */
main.absmiddle {
   height: calc(100vh - 85px);
   align-content: center;
   text-align: center;
}
.transheader main.absmiddle {
   height: 100vh;
}



/* Fields with Button
 * */
.fieldwbutton {
   display: flex;
}
.fieldwbutton input:not([type="radio"]):not([type="checkbox"]) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: none;
}
.fieldwbutton button {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}



/* Address fields
 * */
fieldset.addressfields {
   margin: 0;
   padding: 0;
   border: none;
   display: flex;
   flex-direction: column;
   row-gap: 8px;
}
fieldset.addressfields .citystatezip {
   display: flex;
   column-gap: 8px;
}
fieldset.addressfields .citystatezip input:nth-child(2) {
   flex: 0 0 30%;
}
fieldset.addressfields .citystatezip input:nth-child(3) {
   flex: 0 0 25%;
   max-width: 80px;
}