/*
      Author: Primosite

      Havenclub "Amsterdam"
      site120
*/

@import "hca-vars-v1.0.css";

/* STRUCTURE
----------------------------------------------------*/
* {margin:0;padding:0;outline:none;}
html {height:100%;}
body {height:100%;
  font-family:'Poppins',sans-serif;
  font-size: var(--font0);
  line-height:1.75;
  color:var(--grey);}

#main-wrapper {display:flex;flex-flow:column;padding-top:150px;min-height:calc(100% - 150px);}
#header-wrapper {position:fixed;top:0;left:0;width:100%;height:var(--headerH);z-index:3;
  box-shadow:0 0 15px #444;padding:10px 0; background-color:white;}
#content-wrapper {flex-grow:1;background-color:#fff;}
#footer-wrapper {padding:25px 0;z-index:1;background-color:var(--blue);}

.header {display:flex;flex-flow:row wrap;justify-content:center;align-items:flex-start;
  position:relative;}
#version {position:absolute;top:0;left:50%;width:50px;text-align:center;margin:-8px 0 0 -25px;background:var(--red);color:white;
  padding:0 12px;font-size:var(--font-2);text-transform:uppercase;}
#nav-trigger {display:none;}
#logo {display:flex;align-items:center;}
#logo .image {max-width:clamp(300px,50vw,400px);margin:20px auto 0;}
#myprofile {position:absolute;top:1em;right:0;font-weight:var(--fontMedium);color:var(--blue);text-align:right;}
#myprofile .un:before{margin-right:6px;}
#myprofile .un.morning:before {content:"Goedemorgen";}
#myprofile .un.afternoon:before {content:"Goedemiddag";}
#myprofile .un.evening:before {content:"Goedenavond";}
#myprofile .un.night:before {content:"Goedenacht";}
.myprofile {display:flex;flex-flow:column;align-items:flex-end;}
.myprofile > * {margin-left:2em;}
.myprofile a:before {color:var(--red)}

.footer {display:flex;flex-flow:row wrap;justify-content:space-between;align-items:flex-end;}
.footer * {color:white}
.footer > * {}
.footer > .contactdata {flex-basis:30%;flex-grow:1;min-width:var(--minW);}
.footer > .footerlinks {flex-basis:30%;flex-grow:1;min-width:var(--minW);}
.footer > .footerlinks,
.footer > .followus-wrapper {margin-top:1em;}

.header,
#header-nav > .menu,
#site-nav,
.footer {width:var(--mainW);max-width:var(--maxW);margin:0 auto;}

.content > .aclgroup,
.content > .aclgroupnode-wrapper,
.content > .csv-wrapper,
.content > .import-wrapper,
.content > .emailformbox,
.content > .library-wrapper,
.content > .myhca-wrapper,
.content > .news-wrapper,
.content > .psform-wrapper,
.content > .sitemap,
.content > .taggroup-wrapper,
.content > .aclgroupmgt-wrapper,
.content > .users-wrapper {width:var(--mainW);max-width:var(--maxW);margin:1em auto;}

.content > .checkout-wrapper,
.content > .emailform-wrapper,
.content > .error-wrapper,
.content > .information,
.content > .invoicer-wrapper,
.content > .mailr-wrapper,
.content > .membershiprequests-wrapper,
.content > .multiple.news,
.content > .schoolguide-wrapper,
.content > .siteparameters,
.content > .training-wrapper,
.content > .trainingcatalog-wrapper,
.content > .video-wrapper,
.content > .xlocations-wrapper {width:var(--contentW);max-width:var(--maxW);margin:1em auto;}

.content .EditUsernamePassword,
.content > .signin-wrapper,
.content > .passwordreminder-wrapper {width:var(--loginW);max-width:var(--maxW);margin:1em auto 0;}

.content > .signin-wrapper > .signin,
.content > .passwordreminder-wrapper > .passwordreminder {padding:0 50px 50px;}

body > .signin-wrapper,
body > .passwordreminder-wrapper {width:var(--loginW);max-width:var(--maxW);margin:50px auto 0;
  box-shadow:0 0 15px #ccc;
  background-image:url(/images/layout/hca-logo.png);
  background-repeat:no-repeat;
  background-position:50% 40px;
  background-size:90%;
  background-color:#fff;
}
body > .signin-wrapper > .signin,
body > .passwordreminder-wrapper > .passwordreminder {padding:150px 50px 50px;}

/* NAV
----------------------------------------------------*/
.menu li {list-style:none;}
.menu a {color:var(--blue);text-transform:uppercase;font-weight:var(--fontSemiBold);font-size:var(--font1)}

#nav a {color:var(--blue);font-weight:var(--fontMedium);font-size:var(--font1);}
#nav a[class^="icon-"],
#nav a[class*=" icon-"] {display:inline-flex;align-items:baseline;text-decoration:none!important;}
#nav a[class^="icon-"]:before,
#nav a[class*=" icon-"]:before {color:var(--red);}
#nav li > div.submenu {position:absolute;}

/* header-nav */
#header-nav {position:absolute;width:100%;top:10px;left:0;}
#header-nav > .menu {display:flex;flex-flow:row wrap;justify-content:flex-start;}
#header-nav li.level1 {position:relative;margin-right:2em;}
#header-nav li>div.submenu {left:0;max-height:0;overflow:hidden;z-index:2;}
#header-nav li:hover > div.submenu {box-shadow:0 0 15px var(--tintGrey);
  max-height:500px;padding:2em;background-color:white;
  transition:max-height .5s linear .5s, padding .0s linear .5s;}
#header-nav .level2 a {display:block;white-space:nowrap;padding:2px 5px;}
#header-nav .level2 a:hover {background-color:var(--tintBlue);}

/* site-nav */
#site-nav-wrapper {order:4;width:100%;pointer-events:none;position:relative;z-index:1;}
#site-nav {pointer-events:auto;}
#site-nav li {list-style:none;}
#site-nav ul.level1 {display:flex;flex-flow:row wrap;justify-content:center;margin:0 -6px;}
#site-nav li.level1 {margin:6px;position:relative;}
#site-nav a {display:block;text-decoration:none;text-transform:uppercase;}
#site-nav a.level1 {text-align:center;}
#site-nav li.level1 > div.submenu {max-height:0;overflow:hidden;z-index:2;}
#site-nav li:hover > div.submenu {box-shadow:0 0 15px var(--tintGrey);
  max-height:500px;padding:2em;background-color:white;
  transition:max-height .25s linear .5s, padding .25s linear .5s;}
#site-nav li.level2 {margin-top:.5em;}
#site-nav li.level2 a {font-weight:var(--fontSemiBold);color:var(--blue);white-space:nowrap;}

/* TEMP
----------------------------------------------------*/
.csv-wrapper br {margin-bottom:1em;}

/* DEFAULTS
----------------------------------------------------*/
/* headers */
h1,h2,h3 {color:var(--blue);}
h1 {font-weight:var(--fontSemiBold);text-transform:uppercase;}
h2,h3 {font-weight:var(--fontMedium);color:var(--red);line-height:1.25}
h1 {font-size:var(--font4);margin-bottom:1em;}
h2 {font-size:var(--font3);}
h3 {font-size:var(--font1);}
h4 {font-size:var(--font0);color:var(--blue);font-weight:var(--fontMedium);}
h2,h3,h4 {margin-top:1em;}
h2:first-child,h3:first-child,h4:first-child {margin-top:0;}

/* links */
a {color:inherit;text-decoration:underline dotted 1px;text-underline-offset:4px;cursor:pointer;}
a:hover {text-decoration:underline solid 1px;}
a.back, a.myetb-editlink{display:inline-block;text-decoration:none;padding:.5em 1em;border:solid 1px;border-radius:3px;cursor:pointer;}
a.back:before {content:"<";margin-right:1em;font-weight:bold;}
a.backlink {margin-bottom:1em;}
a.delete-item {display:inline-block;font-size:12px;font-weight:bold;width:16px;height:16px;
  line-height:10px;text-align:center;border-radius:50%;cursor:pointer;text-indent:-999em;
  background-color:#E2303C;
  background-image:url(/images/layout/cross-white.png);
  background-size:60%;
  background-position:50%;
  background-repeat:no-repeat;
}
a.doclink[href$=".pdf"]:before {color:red;}
a.doclink[href$=".doc"]:before {color:blue;}
a.doclink[href$=".docx"]:before {color:blue;}
a.doclink.hasimage {padding:0;}
a.doclink.hasimage:before {position:absolute;border-radius:3px 0 3px 0}
a.doclink.hasimage img {display:block;border-radius:3px;}
#main-wrapper .followus-link {background-image:none;background-color:transparent;white-space:nowrap;
  text-indent:0;color:inherit;font-size:inherit;display:inline-block;width:auto;height:auto;}
a.loadlink {cursor:pointer;}
a.more,
.newsindex-item a {color:var(--red);font-weight:var(--fontMedium);}
a.more:hover,
.newsindex-item a:hover {color:var(--subRed)}

/* contactdata */
.contactdata {display:flex;flex-flow:row wrap;}
.contactdata > * {flex-basis:100%;}
.contactdata > *:before {font-weight:var(--fontSemiBold);}
.contactdata .name {font-weight:bold;font-size:112.5%;margin-bottom:var(--marginW);}
.contactdata .zip {flex-basis:30px;white-space:nowrap;margin-right:.75em;}
.contactdata .city {flex-basis:100px;}
.contactdata .country {margin-bottom:20px;}
.contactdata .email {margin-top:1em;}
.contactdata .coc {margin-top:1em;}
.contactdata .coc:before {content:"Kvk: ";}
.contactdata .bank {margin-top:1em;}
.contactdata .bank:before {content:"Bank: ";}

/* dates */
.date {display:flex;flex-flow:row wrap;align-items:center;margin:0 -2px;}
.date > * {margin:0 2px;}
.date .minute:before{content:":"}
.date .minute:after{content:" uur"}

/* google recaptcha */
.grecaptcha-badge {bottom:80px!important;}

/* misc */
.info {background-color:var(--subRed);color:white;padding:0 1em;margin-bottom:1em;}
.info * {color:white!important;}

[class^="icon-"]:before,
[class*=" icon-"]:before {text-decoration:none!important;margin-right:.3em!important;}

.ps-alert [class^="icon-"],
.ps-alert [class*=" icon-"] {display:inline-block;background-color:var(--blue);color:white;text-decoration:none;padding:3px 1em;margin:.5em;border-radius:3px;}

.menu li[class^="icon-"]:before,
.menu li[class*=" icon-"]:before {display:none;}

.icon-hca:before {content:" ";height:1em;background-image:var(--iconS);background-size:1em;}

.relatedlink {clear:left;margin-bottom:.5em;display:flex;align-items:center;}

strong {color:var(--red);}

.content ul {margin:0 0 1em;}
.content li ul,
.ps-alerttext li ul {margin-top:0;}
.content ul:first-child {margin-top:0;}
.content li,
.ps-alerttext li {margin:0 0 .5em 1.25em;list-style:none;position:relative;}
.content li:before,
.ps-alerttext li:before {
  position:absolute;
  content: "\2022";  /* CSS Code/unicode for a bullet */
  color: var(--red);
  font-size:200%;
  line-height:0;
  font-weight: var(--fontBold);
  top:10px;
  left:-20px
}
.ps-alert.legend {text-align:left;}

.image {text-align:center;background-size:cover;background-position:50%;background-repeat:no-repeat;}
.image img {display:inline-block;max-width:100%;max-height:100%;}
.content p,.ps-alerttext p, .content .text {margin-bottom:1em;}
.content button,
button.submit,
button[type=submit] {background-color:var(--blue);color:white;font-family:inherit;border-radius:0;} 
.content button:hover,
button.submit:hover,
button[type=submit]:hover {background-color:var(--subBlue);}
button.cancel {background-color:var(--tintGrey);color:var(--grey);}
button.cancel:hover {background-color:var(--grey);color:white;}
.editwrapper {float:none;}

.ps-alert {border-color:white!important;color:inherit;border-radius:3px;}
.ps-alert video {display:block;max-height:400px;max-width:100%;margin:0 auto;}
.ps-alert h1 {border-bottom:solid 2px var(--red);}
.popup-msg .ps-alerttext,
.mailr-preview .ps-alerttext {text-align:left;}
.ps-alertbutton {background:var(--red);color:#fff;text-transform:uppercase;}
.ps-alertbutton:hover{background:var(--red);}

button.no {background:lightgrey;color:darkgrey;}
button.no:hover {background:grey;}
.field {display:flex;flex-flow:row wrap;margin-bottom:1em;}
.field>.key,
.fieldheader {flex-basis:25%;margin-right:1em;color:var(--red)};
.field>.value,
.fieldvalue {flex-basis:calc(100% - 25% - 1em);}
.message {font-size:18px;font-weight:bold;color:red;}
.formelement.message {font-size:inherit;font-weight:inherit;color:inherit;}

.content table {width:100%;border-collapse:collapse;}
.content th {text-align:left;}
.content .sharelinks {justify-content:center;margin-top:2em;}
.content .sharelink {margin-right:1em;border-radius:2px;}
.content .sharelink:hover {}

/* ACLGROUPMGT
----------------------------------------------------*/
.aclgroupmgt-wrapper .userrow {display:flex;flex-flow:row wrap;}
.aclgroupmgt-wrapper .headerrow {font-weight:var(--fontMedium);border-bottom:solid 2px;}

.aclgroupmgt-wrapper .userrow .lastname {flex-basis:200px;}
.aclgroupmgt-wrapper .userrow .firstname {flex-basis:200px;}
.aclgroupmgt-wrapper .userrow .middlename {flex-basis:150px;}
.aclgroupmgt-wrapper .userrow .eb-id {flex-basis:200px;}

/* CHECKOUT
----------------------------------------------------*/
.checkout-wrapper h1 span:first-of-type {margin-right:.25em;}
.checkout-wrapper .terms label span {margin-right:.25em;}

/* EMAILFORMBOX
----------------------------------------------------*/
.emailformbox .emailheader h2 {display:flex;}
.emailformbox .emailheader h2 .date {flex-basis:110px;}
.emailformbox .emailheader h2 .time {flex-basis:60px;}
.emailformbox .emailheader h2 .subject {flex-grow:1;}


/* FORMS
----------------------------------------------------*/
form label,.fieldlabel {font-weight:var(--fontMedium);color:var(--red);}
form label.checkbox {color:inherit;font-weight:var(--fontRegular);}
form input[type=checkbox] {margin-right:.5em;}
.signin .ps-form {margin-bottom:2em;}
.content .fieldlabel,.content .formfield {flex-basis:calc(100%);}
.formfield label.checkbox {margin:0 1.5em .5em 0;display:flex;}
.multi-email label {display:block;}
#content-wrapper .formelement.grecatcha {background:none;}
.emailform-body {display:flex;flex-flow:row wrap;align-items:flex-start;}
.emailform-body > * {flex-basis:100%;flex-grow:1;min-width:var(--minW);}
.emailform-body > .emailform-text {flex-basis:20%;margin-bottom:2em;}
.emailform-body > .emailform-form {flex-basis:60%;}

.ps-form label.error {position:absolute;bottom:-1.75em;background-color:red;color:white;padding:0 1em;
  width:calc(100% - 2em - 2px);border-radius:3px;margin:1px;}
.ps-form .formelement {margin-bottom:2em;}

.ps-form.EditUser {max-width:var(--contentW);margin:0 auto;}
.ps-form.EditUser > * {margin:.5em;}

.ps-form.EditUser .formelement {order:90;}
.ps-form.EditUser .formelement.loginname {flex-basis:20%;margin-bottom:1em;order:1;}
.ps-form.EditUser .formelement.Password {flex-basis:20%;order:2;}
.ps-form.EditUser .formelement.firstname {flex-basis:35%;order:1;}
.ps-form.EditUser .formelement.middlename {flex-basis:15%;order:2;}
.ps-form.EditUser .formelement.lastname {flex-basis:35%;order:3;}
.ps-form.EditUser .formelement.email {flex-basis:30%;order:4;}
.ps-form.EditUser .formelement.Url {flex-basis:30%;order:5;}
.ps-form.EditUser .formelement.department {flex-basis:30%;order:5;}
.ps-form.EditUser .formelement.Company {flex-basis:40%;order:6;}
.ps-form.EditUser .formelement.Function {flex-basis:40%;order:7;}
.ps-form.EditUser .formelement.address {order:8;}
.ps-form.EditUser .formelement.zip {flex-basis:60px;max-width:100px;order:9;}
.ps-form.EditUser .formelement.city {flex-basis:calc(100% - 60px - 4em);order:10;}
.ps-form.EditUser .formelement.phone {flex-basis:45%;order:11;}
.ps-form.EditUser .formelement.phone2 {flex-basis:45%;order:12;}
.ps-form.EditUser .formelement.phone3 {flex-basis:45%;order:13;} /* date */
.ps-form.EditUser .formelement.phone3 input {text-align:center;}
.ps-form.EditUser .formelement.birthday {flex-basis:45%;order:14;} /* date */
.ps-form.EditUser .formelement.photo {flex-basis:45%;order:15;}
.ps-form.EditUser .formelement.buttons {order:99;}
.ps-form.EditUser .birthday .time {display:none;}

/* aanvraag lidmaatschap */
#emailform4473269 .formelement.voornaam {flex-basis:30%;}
#emailform4473269 .formelement.achternaam {flex-basis:30%;}
#emailform4473269 .formelement.tussenvoegsels {flex-basis:10%;min-width:110px;}
#emailform4473269 .formelement.email {flex-basis:40%;}
#emailform4473269 .formelement.iban {flex-basis:30%;}
#emailform4473269 .formelement.organisatie {flex-basis:45%;}
#emailform4473269 .formelement.functie {flex-basis:45%;}
#emailform4473269 .formelement.telefoon_zakelijk {flex-basis:45%;}
#emailform4473269 .formelement.telefoon_mobiel {flex-basis:45%;}
#emailform4473269 .formelement.postcode {flex-basis:10%;min-width:110px;}
#emailform4473269 .formelement.plaats {flex-basis:70%;}
#emailform4473269 .formelement.voordrager_1 {flex-basis:45%;}
#emailform4473269 .formelement.voordrager_2 {flex-basis:45%;}

/* INVOICER
----------------------------------------------------- */
.invoicerform .selecttags > div {display:flex;flex-flow:row nowrap;align-items:flex-start}
.invoicerform .selecttags > div > * {flex-basis:200px;}
.invoicerform .selecttags h3 {margin:0;}
.invoicerform label {font-weight:var(--fontRegular)!important;}
.invoicerform .selecttags label {color:inherit!important;}
.invoicerform .formstep {display:flex;flex-flow:row wrap;}
.invoicerform .formstep>*{flex-grow:1;}
.invoicerform .formstep>* {flex-basis:100%;}
.invoicerform .formelement.fromname{flex-basis:300px;flex-grow:1;}
.invoicerform .formelement.fromemail{flex-basis:300px;flex-grow:1;}
.invoicerform .formstep.invoiceline {display:flex;flex-flow:row wrap;}
.invoicerform .formelement.invoicelinetext {flex-basis:50%;flex-grow:10;}
.invoicerform .formelement.amount {flex-basis:175px;flex-grow:1;}
.invoicerform .formelement.vat,
.invoicerform .formelement.leger,
.invoicerform .formelement.paymentterm {flex-basis:33%;min-width:var(--minW);flex-grow:1;}

/* LIBRARY
----------------------------------------------------- */
.library-wrapper {margin:2em auto;}
.library-wrapper h1 {text-align:center;}
.folders {width:900px;max-width:calc(100% - 2em);margin:0 auto;
  display:flex;flex-flow:row wrap;justify-content:center;}
.folders > * {margin:.5em;flex-basis:250px;flex-grow:1;padding:1em;
  background:var(--tintGrey);}
.folder {padding-bottom:2em;}
.folder .folder-item-wrapper {display:flex;}

.folder-item-wrapper {background-color:var(--tintBlue);border:solid 1px var(--subBlue);margin-bottom:.5em;position:relative;}
.folder-item-wrapper:hover {box-shadow:var(--boxShadow);}
.folder-item-wrapper > .editwrapper {position:absolute;}
.folder-item {display:flex;flex-flow:row wrap;align-items:center;padding:.25em;}
.folder-item:before {color:var(--red);font-size:var(--font5);flex-basis:25px;}
.folder-item-content {flex-basis:50px;flex-grow:1;}
.folder-item .item-date {flex-basis:80px;font-size:var(--font-2);color:var(--blue)}
.folder-item .item-title {flex-grow:1;}

/* MULTIPLE
----------------------------------------------------*/
/* homepage */
.multiple.homepage {display:flex;flex-flow:row wrap;justify-content:center;margin:0;}
.multiple.homepage > * {margin:0 var(--marginW) 1em;}
.multiple.homepage > .aside {max-width:var(--asideW);background-color:var(--tintGrey);padding:var(--marginW);}
.multiple-item.picture {margin:0 0 2em;flex-basis:100%;position:relative;}
.multiple-item.picture .editwrapper {position:absolute;top:10px;left:50%;}
.multiple.homepage .multiple-item.schoolguide {max-width:calc(var(--contentW) - var(--marginW));flex-basis:var(--asideW);flex-grow:2;order:1;}
.multiple.homepage .multiple-item.trainingcatalog {flex-basis:var(--asideW);flex-grow:1;
  margin-bottom:2em;padding-bottom:2em;border-bottom:solid 4px white;}
.multiple.homepage .newsindex-item {background-color:var(--tintBlue);border:solid 1px var(--subBlue);padding:.5em;margin-bottom:.5em;}
.multiple.homepage .newsindex-item:hover {box-shadow:var(--boxShadow);}

/* news */
.multiple.news {display:flex;flex-flow:row wrap;margin:0 var(--negMarginW);}
.multiple.news > * {margin:var(--marginW);}
.multiple-item.news {flex-grow:1}
.multiple-item.linkoverview {flex-basis:var(--asideW);}

/* membershiprequests */
.membershiprequest .date {margin-bottom:1em;}
.membershiprequest .date:before {content:"Datum aanvraag: ";color:var(--red);margin-right:.5em;}
.membershiprequest-body .field {padding:.5em 0;margin:0;border-bottom:dotted 1px #ccc;}
.membershiprequest-body .key {flex-basis:150px;}

.short-membershiprequest {display:flex;flex-flow:row wrap;margin:2px -.5em;background-color:var(--tintBlue);}
.short-membershiprequest:hover {background-color:var(--subBlue);}
.short-membershiprequest:hover > * {color:white!important;}
.short-membershiprequest > * {margin:.5em;}
.short-membershiprequest .date {color:var(--red);}

/* MYHCA
----------------------------------------------------*/
.myhca-profile a[class^="icon-"]:before,
.myhca-profile a[class*=" icon-"]:before {color:var(--red);}

.myhca-wrapper h1,
.myhca-profile {width:var(--contentW);margin-left:auto;margin-right:auto;}
.myhca-profile .field-wrapper {display:flex;flex-flow:row wrap;}
.myhca-profile .field-wrapper > * {flex-basis:var(--subContentW);}

.myhca-profile .empty {/*! display:none; */}
.myhca-profile .company {font-weight:var(--fontSemiBold);}
.myhca-profile .function {font-style:italic;margin-bottom:1em;}
.myhca-profile .tagvalues {color:var(--red);}
.myhca-profile .tagvalues,
.myhca-profile .membertype,
.myhca-profile .memberstatus {font-style:italic;}
.myhca-profile .zip {}
.myhca-profile .city {margin:0 0 1em 0;}
.myhca-profile .department {margin:0 0 1em 0;}
.myhca-profile .email {margin:1em 0 1em 0;}
.myhca-profile .phone2 {margin:0 0 1em 0;}
.myhca-profile .url {margin:0 0 1em 0;}
.myhca-profile .phone3 {margin:0 0 1em 0;}
.myhca-profile .phone3:before {content:"Lid sinds: ";color:var(--red);margin-right:.25em;}
.myhca-profile .eb-field {color:var(--tintDarkGrey);}

.myhca-profile .photo .ps-field{width:80px;height:80px;min-width:80px;min-height:80px;flex-basis:80px;
  margin:0 0 1em 0;border-radius:50%;overflow:hidden;
  align-self: center;
  background-color:white;
  background-image:url(/images/layout/hca-icon.png);
  background-size:60%;
  background-repeat:no-repeat;
  background-position:50%;
}
.myhca-profile .photo .image {width:100%;height:100%;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50%;
}

.myhca-eb-profile {max-width:var(--contentW);margin:1em auto;border-top:solid 5px var(--blue);padding-top:1em;}
.myhca-eb-profile:before {content:"e-Boekhouden";font-size:var(--font4);font-weight:var(--fontSemiBold);color:var(--red);}
.myhca-eb-profile .field {margin-bottom:0;border-bottom:solid 1px var(--tintGrey);}

/* NEWS
----------------------------------------------------*/
.content > .news-wrapper {display:flex;flex-flow:row wrap;justify-content:center;padding-top:1em;}
.content > .news-wrapper > * {margin:0 var(--marginW) 1em;}
.content > .news-wrapper > h1 {flex-basis:100%;margin-bottom:1em;}
.content > .news-wrapper > .editwrapper {flex-basis:100%;}
.content > .news-wrapper > .news {flex-basis:var(--subContentW);flex-grow:1;order:1;}
.content > .news-wrapper > .newsindex {flex-basis:var(--asideW);max-width:var(--asideW);padding:var(--marginW);background:var(--tintGrey);}
.newsindex-item-wrapper {margin-bottom:var(--marginW)}
.newsindex-item {font-size:var(--font3);margin-bottom:.5em; }
.newsindex .date-author {font-size:var(--font-2);margin-bottom:1em;}

.news-wrapper .date-author {display:flex;flex-flow:row wrap;margin:0 -5px 1em;}
.news-wrapper .date-author>* {margin:5px;font-style:italic;}
.news-wrapper .todate {margin-left:0;}
.news-wrapper .todate:before {content:"-";margin-right:5px;}

/* SCHOOLGUIDE
----------------------------------------------------*/
.schoolguide > .editwrapper {float:none;}
.content > .schoolguide-wrapper > .schoolguide {}
.schoolguide > .image {order:1;
  min-height:var(--imageMinH);max-height:var(--imageMaxH);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
}

.paragraph-wrapper {display:flex;flex-flow:row wrap;margin:0 var(--negMarginW);align-items:center;}
.paragraph-wrapper > * {min-width:var(--asideW);margin-left:var(--marginW);margin-right:var(--marginW);}
.paragraph-wrapper > .image {min-height:var(--asideW);}
.paragraph-wrapper:nth-child(even) > .image {order:2;}
.paragraph-wrapper > .image {flex-basis:100px;flex-grow:2;box-shadow:0 0 15px #ddd;border-radius:10px;}
.paragraph-wrapper > .paragraph {flex-basis:100px;flex-grow:3;}
.paragraph > .editwrapper {float:none;}

/* SITEMAP
----------------------------------------------------*/
.content > .sitemap {display:flex;flex-flow:row wrap;}
.content > .sitemap > .subsitemap {margin:1em;min-width:200px;flex-grow:1;}
.content > .sitemap li {display:flex;flex-flow:row wrap;}
.content > .sitemap li > .submenu {flex-basis:100%;}

/* TAGS
----------------------------------------------------*/
.tagtypes {display:flex;flex-flow:row wrap;margin:0 -.5em;}
.tagtypes > * {margin:.5em;flex-basis:200px;}
.tagtype-wrapper {background-color:var(--tintBlue);padding:1em;}

/* TRAINING (EVENTS)
----------------------------------------------------*/
.short-training {background-color:var(--tintBlue);border:solid 1px var(--subBlue);padding:.5em;margin-bottom:.5em;}
.short-training:hover {box-shadow:var(--boxShadow);}
.short-training .date{font-weight:var(--fontSemiBold);font-size:var(--font-1);}

.training-wrapper {display:flex;flex-flow:row wrap;justify-content:center;align-items:flex-start;
  margin:0 -.5em;}
.training-wrapper > * {margin:.5em;}
.training-wrapper .image {flex-basis:100%;}
.training-wrapper > .xlocations {flex-basis:var(--asideW);}
.training-wrapper > .trainingcontent {flex-basis:var(--subContentW);}
.training-wrapper > .attendees-wrapper {flex-basis:100%;}

.training-wrapper .xlocation-wrapper:before {content:"Locatie";color:var(--red);font-weight:var(--fontSemiBold);}
.training-wrapper .attendees-link {margin-bottom:1em;font-weight:var(--fontMedium);}
.training-wrapper .costs {margin-bottom:1em;}
.training-wrapper .costs:before {display:block;content:"Eigen bijdrage";color:var(--red);font-weight:var(--fontSemiBold);flex-basis:100%;}
.training-wrapper .date {margin-bottom:1em;}
.training-wrapper .date:before {color:var(--red);font-weight:var(--fontSemiBold);flex-basis:100%;}
.training-wrapper .date1:before {content:"Aanvang ";}
.training-wrapper .date2:before {content:"Einde ";}
.training-wrapper .date3:before {content:"Aanmelden vóór ";}
.training-wrapper .subscribed.date3:before {content:"Afmelden vóór ";}
.training-buttons {margin:2em 0;}
.training-wrapper .select-user {flex-basis:100%;}
.select-user form {display:flex;}
.select-user select {border-radius:3px 0 0 3px;border:solid 1px var(--grey);flex-grow:1;}
.select-user button {margin:0;border-radius:0 3px 3px 0;}

/* USERLIST/FACES
----------------------------------------------------*/
.users-wrapper .buttons {margin-bottom:2em;align-items:stretch;}
.users-wrapper .buttons > * {margin:var(--halfMarginW);display:flex;align-items:center;}
.users-wrapper .buttons button:before {font-size:var(--font3);}
.users-wrapper .switch:after {margin-left:.5em;}
.users-wrapper.faces .switch:after {content:"Telefoonlijst";}
.training-wrapper .users-wrapper.faces .switch:after {content:"Lijst";}
.users-wrapper.userlist .switch:after {content:"Pasfoto's";}
.users-wrapper input[name=search] {padding:0 1em;flex-basis:20em;border:solid 1px;color:var(--blue);font-weight:var(--fontSemiBold);} 

.user-wrapper {position:relative;}
.user-wrapper.nonickname {background:orange;}
.user-wrapper .editwrapper {position:absolute;top:0;left:0;}

.users {margin-bottom:2em;margin:0 auto 4em;}

.faces .userlistheader {display:none;}
.faces .users {display:flex;flex-flow:row wrap;/*! justify-content: center; */}
.faces .user-wrapper {flex-basis:calc(33% - 26px);min-width:230px;padding:10px;margin:2px;
  background-color:var(--tintBlue);border:solid 1px var(--tintBlue);}
.faces .user-wrapper:hover {border:solid 1px var(--blue);}
.faces .user {display:flex;flex-flow:row;align-items: center;}
.faces .user .fn2,
.faces .user .phone,
.faces .user .phone2,
.faces .user .phone3,
.faces .user .email {display:none;}
.user-photo {width:80px;height:80px;min-width:80px;min-height:80px;
  margin:0 10px 0 0;border-radius:50%;overflow:hidden;
  align-self: center;
  background-color:white;
  background-image:url(/images/layout/hca-icon.png);
  background-size:60%;
  background-repeat:no-repeat;
  background-position:50%;
}
.user-photo .image {width:100;height:80px;min-width:80px;min-height:80px;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50%;
}
.faces .user-content {font-size:var(--font-2);}
.faces .user .fn {font-size:var(--font-1);font-weight:var(--fontSemiBold)}
.face .department {font-style:italic;}
.faces .user .function {font-style:italic;font-size:var(--font-2);}
.faces .user .tagvalue {font-style:italic;font-size:var(--font-2);color:var(--red);}
.faces .user .remarks {display:none;}

.userlistheader {display:flex;flex-flow:row wrap;
  font-weight:bold;border-bottom:solid 2px;color:var(--blue);}
.userlist .user {padding:3px 0;border-bottom:dotted 1px;}
.userlist .user:hover {background:#eee;}
.userlist .editwrapper {top:-3px;left:-30px;}
.userlist .user-photo,
.userlist .fn,
.userlist .function,
.userlist .tags ,
.userlist .tagvalues,
.userlist .email, 
.userlist .phone3 {display:none;}
.userlist .user-content {flex-grow:1;display:flex;flex-flow:row wrap;}
.userlist .fn2 {flex-basis:250px;}
.userlist .company {flex-basis:250px;flex-grow:1;}
.userlist .phone {flex-basis:180px;}
.userlist .phone2 {flex-basis:180px;}
.userlist .remarks {flex-basis:100%;background-color:var(--tintYellow);padding:0 .5em;}

/* USERMGT
----------------------------------------------------*/
.aclgroupnode {display:flex;flex-flow:row wrap;margin:0 -1em;align-items:flex-start;}
.aclgroupnode > * {margin:0 1em;}
.aclgroupnode > .selection {flex-basis:250px;display:flex;flex-flow:column;}
.aclgroupnode > .selection select {padding:.5em 1em;}
.aclgroupnode > .selection .selectuser {margin-top:1em;display:flex;flex-flow:column;}
.aclgroupnode > .selection .selectuser input {padding:.5em 1em;margin-bottom:1em;}
.aclgroupnode > .selection .selecteduser {display:none;}

.aclgroupnode > .aclgroup {flex-basis:200px;flex-grow:1;align-items:baseline;}
.aclgroupnode > .user-wrapper {flex-basis:calc(100% - 500px - 50px - 2em);flex-grow:1;display:flex;border:solid 1px;padding:1em;background:#eee;}

.aclgroupnode .aclgroup span.count {margin-left:1em;font-style:italic;}
.users .user {display:flex;align-items:center;}
.users .user > a {flex-grow:1;display:flex;align-items:center;background-color:var(--tintBlue);margin-bottom:2px;
  text-decoration:none;font-size:12px;padding:3px;}
.users .user > a:hover {background-color:var(--subBlue);color:white;}
.users a > * {margin:0 1em 0 0;}
.users a > .lastname {flex-basis:100px;}
.users a > .firstname {flex-basis:100px;}
.users a > .email {flex-basis:200px;}
.users a > .image {flex-basis:30px;width:30px;min-width:30px;height:30px;overflow:hidden;
  background-size:cover;border-radius:50%;}

.usergroups label input {margin-right:.5em;}

.aclgroupnode .userinfo {display:flex;flex-flow:column;}
.aclgroupnode .userinfo .fieldheader {flex-basis:100%}
.aclgroupnode .userinfo .field {order:9;}
.aclgroupnode .userinfo .field.gender {display:none;}
.aclgroupnode .userinfo .field.image {order:1;width:100px;height:100px;overflow:hidden;border-radius:50%;}
.aclgroupnode .userinfo .field.name {order:1;}
.aclgroupnode .userinfo .field.nickname {order:1;}
.aclgroupnode .userinfo .field.function {order:1;}
.aclgroupnode .userinfo .field.department {order:1;}
.aclgroupnode .userinfo .field.phone {order:2;}
.aclgroupnode .userinfo .field.phone2 {order:3;}
.aclgroupnode .userinfo .field.phone3 {order:3;}
.aclgroupnode .userinfo .field.email {order:4;}

/* VIDEO
----------------------------------------------------*/
.video-wrapper {text-align:center;}

/* XLOCATIONS
----------------------------------------------------*/
/*
.xlocations {display:flex;flex-flow:row wrap;justify-content:center;margin:0 -1em;}
.xlocations > * {flex-basis:230px;margin:.5em;}
.xlocation-wrapper {display:flex;flex-flow:column;align-items:center;text-align:center;
  padding:1em;border:solid 1px var(--blue);}
.xlocations-wrapper h2 {}
.xlocation-wrapper h2{font-size:var(--font2);}
.xlocation-wrapper .image {height:150px;margin-bottom:1em;flex-grow:1;}
.xlocation-wrapper .text {font-style:italic;}
.xlocation-wrapper .full-address {padding-top:1em;color:var(--blue);font-weight:var(--fontMedium);}
*/

.xlocation-wrapper {padding:1em;margin-bottom:1em;border:solid 1px var(--blue);position:relative;}
.xlocation-wrapper .editwrapper {position:absolute;left:0;top:0;}
.xlocation-wrapper .image img{margin:1em 0;}
.xlocation-wrapper .image img{max-height:150px;}
.xlocation-wrapper .full-address {color:var(--blue);font-weight:var(--fontMedium);}
.xlocation-wrapper .zip {margin-right:.75em;}