@media( min-width: 1024px ) {
   #mainmenu ul {
      background: linear-gradient(180deg,rgba(70, 74, 70, 1) 0%, rgba(36, 51, 36, 1) 100%);
/*
      background: var(--color-primary);
*/
   }
   .sidebar {
      margin-top: 52px;
   }
}
.pagetitle {
   margin-bottom: 24px;
/*
   color: var(--color-primary);
*/
   color: #4c544c;
}



/* DIALOGS
 * */
/*
.login p {
   text-align: center;
}
*/
.login label {
   display: flex;
   column-gap: 2px;
   margin: 8px 0 0;
}
.login .forgotpass {
   display: flex;
   flex-direction: column;
   color: var(--color-female);
}


/* -- */



/*
.innerwrap {
   background: #f9f9f9;
   border: 1px solid #ddd;
   padding: 24px 16px;
   border-radius: 8px;
}
@media( min-width: 768px ) {
   .innerwrap {
      padding: 24px;
   }
}
*/



#theform {
   font-size: 18px;
}

#theform .greetings {
   font-size: 1.1em;
}
#theform .greetings .note {
   display: flex;
   flex-direction: column;
   row-gap: 12px;
   margin: 42px 0 24px;
   padding: 0;
   list-style: none;
}
#theform .greetings .note li {
   display: flex;
   column-gap: 16px;
/*
   border: 1px solid #bdcfc7;
*/
   border-radius: 6px;
   background: #e9efed;
   font-size: .9em;
   padding: 12px 16px;
}
#theform .greetings .note li path {
   fill: var(--color-primary);
}
#theform .greetings .note li.warning {
   background: #f5f5e8;
}
#theform .greetings .note li.warning path {
   fill: #e69f9f;
}



#theform h3 {
   font-weight: 400;
   font-size: 1.8em;
   margin: 0;
   padding: 54px 0 24px;
   text-align: center;
}
@media( min-width: 1024px ) {
   #theform .formsection > h3 {
      text-align: left;
   }
}



#theform select,
#theform textarea,
#theform input:not([type="radio"], [type="checkbox"]) {
   border: 1px solid #cccccc;
   border-radius: 4px;
   box-sizing: border-box;
   padding: 8px 12px;
   margin: 0;
   width: 100%;
   font-size: 1em;
}
#theform input[type="radio"],
#theform input[type="checkbox"] {
   margin: 0;
   padding: 0;
}



.formfield {
   margin: 32px 0 0;
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid #d5d5d5;
   padding-bottom: 32px;
}

.formfield.email {
   margin-top: 48px;
   border-top: 1px solid #d5d5d5;
   padding-top: 32px;
}

.formfield > div:first-child {
   display: flex;
   flex-direction: column;
   padding-bottom: 16px;
}
.formfield > div:first-child > p {
   display: flex;
   column-gap: 8px;
}
.formfield > div:first-child > p:first-child:not(.explainer) {
   font-weight: bold;
}
.formfield > div:first-child > p {
   margin: 0;
}

.formfield > div.additionalinfo {
   display: flex;
   flex-direction: column;
   row-gap: 8px;
}

.formfield .explainer {
   font-size: .85em;
}
.formfield ul.explainer {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   row-gap: 6px;
}
.formfield ul.explainer li {
   margin: 0;
   position: relative;
   padding: 0 0 0 16px;
}
.formfield ul.explainer li:before {
   content: '-';
   position: absolute;
   left: 0;
}

.formfield fieldset {
   margin: 0;
   padding: 0;
   border: none;
   display: flex;
   flex-wrap: wrap;
}
@media( min-width: 1024px ) {
   .formfield {
      flex-direction: row;
      column-gap: 16px;
   }
   .formfield > div:first-child {
      flex: 0 0 45%;
   }
   .formfield > div:last-child {
      flex: 1;
   }
}

/* Location
 * */
.formfield fieldset small.location {
   position: absolute;
   transform: translate(0, 41px);
   font-size: .75em;
}

.formfield .singleline {
   display: flex;
   flex-wrap: nowrap;
   column-gap: 4px;
}


.formfield .doesntmatter {
   display: flex;
   column-gap: 16px;
   align-items: center;
   margin-bottom: 16px;
}
.formfield .doesntmatter input,
.formfield .doesntmatter span {
   opacity: .5;
}
.formfield .doesntmatter input:checked,
.formfield .doesntmatter input:checked ~ span {
   opacity: 1;
}


.formfield .rowsdown {
   display: flex;
   flex-direction: column;
   row-gap: 8px;
}
.formfield .rowsdown label {
   display: flex;
   column-gap: 16px;
   align-items: center;
}
.formfield .rowsdown label span {
   display: flex;
   flex-direction: column;
}
.formfield .rowsdown label span em {
   font-size: .85em;
   color: #555555;
   font-style: normal;
}



/* SECTION NAV
 * */
.sectionnav {
   margin: 48px 0 24px;
   padding: 0;
   list-style: none;
   display: flex;
   column-gap: 16px;
   justify-content: center;
   color: var(--color-primary);
}
.sectionnav .svg {
   font-size: .8em;
}
.sectionnav path {
   fill: var(--color-primary);
}
.sectionnav li {
   cursor: pointer;
}



/* Form progress
 * */
.jumptoprogress {
   position: fixed;
   z-index: 1000;
   bottom: 24px;
   left: 50%;
   transform: translate(-50%, 0);
   padding: 8px 16px;
   background: white;
   box-shadow: 0 0 5px 0px rgba( 0,0,0,.3);
   cursor: pointer;
   white-space: nowrap;
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s, opacity 1s linear;

}
.jumptoprogress path {
   fill: var(--color-primary);
}
.jumptoprogress.show {
  visibility: visible;
  opacity: 1;
}



/* Section list
 * */
#theform .sectionlist h3 {
   padding: 0;
   font-size: 1em;
}
.sectionlist ul {
   margin: 16px 0 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   row-gap: 16px;
}
.sectionlist li {
   line-height: 1.2;
   margin: 0;
   padding: 18px 16px 16px;
   border: 1px solid #dbdbdb;
   display: flex;
   row-gap: 6px;
   flex-direction: column;
   text-align: center;
   color: #a3a3a3;
   border-radius: 6px;
   cursor: pointer;
   font-size: .9em;
   transition: 0.3s;
}
.sectionlist li strong {
   font-weight: normal;
/*
   font-size: .9em
*/
/*
   font-family: var(--headingfont);
*/
}
.sectionlist li span {
/*
   font-weight: normal;
*/
   font-family: var(--headingfont);
   font-size: 1.2em;
}

/* Progress colors
 * */
.sectionlist li:hover {
   border-color: var(--color-primary);
}
.sectionlist li.filled {
/*
   background: #eae5c8;
   border-color: #eae5c8;
*/
   color: black;
}
.sectionlist li.filled span {
   color: #beb507;
}
.sectionlist li.complete {
/*
   background: #738b73;
   border-color: #738b73;
*/
   color: black;
}
.sectionlist li.complete span {
   color: #1d6143;
}



/* Saving info
 * */
.savinginfo {
   margin: 0;
   text-align: center;
   font-size: .74em;
   height: 36px;
   line-height: 36px;
}
.savinginfo > div {
   color: var(--color-primary);
   padding: 0 16px;
}
.savinginfo path {
   fill: var(--color-primary);
}
/*
.savinginfo > div:empty {
   display: none;
}
.savinginfo button {
   font-size: 1em;
   padding: 12px;
   width: 100%;
   box-sizing: border-box;
   background: var(--color-primary);
   border: none;
   color: white;
   cursor: pointer;
}
*/



/* CONSENT
 * */
.consent {
   display: flex;
   flex-direction: column;
   row-gap: 12px;
   font-size: .8em;
   margin-top: 16px;
}
.consent label {
   display: flex;
   align-items: flex-start;
   column-gap: 12px;
   font-style: italic;
}
.consent p {
   margin: 0;
}
#theform .consent input[type="checkbox"] {
   margin: 4px 0 0;
}



/* Social media
 * */
.socmeds {
   margin: 24px 0;
   display: flex;
   justify-content: center;
}
.socmeds a {
   display: block;
   text-decoration: none;
   width: 32px;
}
.socmeds img {
   display: block;
   width: 100%;
}



/* Remove data
 * */
.removedata {
   margin: 0;
   padding: 52px 0 24px;
   font-size: .85em;
   text-align: center;
   border-top: 1px solid #cccccc;
}
.removedata .confirm {
   display: none;
   color: #e20412;
}



/* Logged-on email field
 * */
.formfield.email .loggedin {
   display: flex;
   flex-wrap: wrap;
   column-gap: 16px;
   margin: 0;
}



/* Photo
 * */
.formfield.photo > div:last-child {
   display: flex;
   flex-direction: column;
   row-gap: 4px;
}
.formfield.photo ul {
   margin: 0;
   padding: 2px;
   list-style: none;
   background-color: #6d6d6d;
   display: flex;
   flex-wrap: wrap;
}
.formfield.photo ul:empty {
   display: none;
}
.formfield.photo li {
   flex: 0 0 50%;
   height: auto;
   aspect-ratio: 1/1;
   position: relative;
   padding: 2px;
   box-sizing: border-box;
}
@media( min-width: 425px ) {
   .formfield.photo li {
      flex: 0 0 25%;
   }
}
.formfield.photo li .delete {
   position: absolute;
   z-index: 500;
   top: 8px;
   right: 8px;
   background: var(--color-female);
   border-radius: 10px;
   padding: 1px;
   border: none;
   font-size: 1em;
   cursor: pointer;
}
.formfield.photo li .delete svg {
   display: block;
}
.formfield.photo li .delete path {
   fill: white;
}
.formfield.photo li img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   cursor: zoom-in;
}
.formfield.photo label {
   text-align: center;
   background: var(--color-primary);
   display: block;
   width: 100%;
   padding: 8px 0;
   border-radius: 4px;
}
.formfield.photo label path {
   fill: white;
}
.formfield.photo label input {
   display: none;
}

/* CROPPER
 * */
dialog.cropper img {
   display: block;
   margin: auto;
   max-width: 70vw;
   max-height: 60vh;
}

/* Enlarged
 * */
dialog.enlargedpic {
   box-sizing: border-box;
   padding: 8px;
   max-width: 100vw;
   max-height: 100vh;
}
dialog.enlargedpic::backdrop {
   background-color: rgba(0,0,0,.75);
}
dialog.enlargedpic button {
   position: absolute;
   top: 16px;
   right: 16px;
   z-index: 8000;
   border: none;
   background: rgba(255, 255, 255, .75);
   padding: 3px 4px;
   border-radius: 50%;
   font-size: 1.5em;
   line-height: 1;
   cursor: pointer;
}
dialog.enlargedpic img {
   display: block;
   width: 100%;
   height: 100%;
   max-width: calc(100vw - 5em);
   max-height: calc(100vh - 5em);
   object-fit: contain;
}