/* CROWDFUNDING SHORTCODE
--------------------------------------------------- */
.crowdfunding-card-container {
background: #FBBA00;
color: white;
padding: 30px;
border-radius: var(--border-radius);
}

.crowdfunding-bar-container {
height: 29px;
margin-top:15px;
margin-bottom: 10px;
overflow: hidden;
background-color: #f9f9f9;
border-radius: 20px;
padding: 5px;
border: solid 2px #01ADEF;
}

.crowdfunding-bar {
animation-name: animateBar;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1.4s;
float: left;
max-width: 100%;
width: 0%;
height: 100%;
background-color: #9DA179;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
height:15px;
border-radius: 20px;
}

.crowdfunding-amount {
font-weight: 700;
}

.crowdfunding-amount span {
font-size: 200% !important;
}

.crowdfunding-count-container,
.crowdfunding-progress-container,
.crowdfunding-goal-container {
font-weight: 500;
}

.crowdfunding-goal-container,
.crowdfunding-progress-container {
display: inline-block;
}

.px-crowdfunding-type-collecte .gchoice em {
font-size: 15px;
}

.px-crowdfunding-type-collecte .gchoice:not(:last-of-type) {
margin-bottom:7px;
}

/* GRAVITY PERKS FIELDS
--------------------------------------------------- */
ul.gpfup__files,
.gpfup__droparea {
border-radius: var(--border-radius-form) !important;
box-shadow: none !important;
}

/* SUBSCRIBE FORM
--------------------------------------------------- */
.gfield.px-crowdfunding-logo .gfield_description,
.gfield.px-crowdfunding-logo .instruction,
.gfield.px-crowdfunding-foto .gfield_description,
.gfield.px-crowdfunding-foto .instruction,
.gfield.px-crowdfunding-doelbedrag .instruction,
.gfield.px-crowdfunding-doelbedrag .gfield_description {
display: none !important;
}
.gpfup__droparea.gpfup__droprea--maxed {
display: none !important;
}

.gpfup__crop {
background: #FBBA00 !important;
}

/* Draaiknoppen in de fotocropper: de plugin zet hier zijn eigen paars neer.
Alleen background-color, want de shorthand wist het SVG icoon. */
.cropper__lightbox .gpfup__rotate_left,
.cropper__lightbox .gpfup__rotate_right {
background-color: #9DA179;
}

/* BEVESTIGING NA AANMELDEN
--------------------------------------------------- */
.px-crowdfunding-confirmation-heading {
margin-bottom: 10px;
}

/* De kolom waar dit formulier in staat is smal, dus de kaart stapelt altijd:
foto boven, gegevens eronder. */
.px-crowdfunding-confirmation-card {
margin: var(--distance-small) 0;
padding: 20px;
background-color: var(--light-yellow);
border-radius: var(--border-radius);
}

.px-crowdfunding-confirmation-image img {
display: block;
width: 100%;
height: 160px;
object-fit: cover;
margin-bottom: 15px;
border-radius: var(--border-radius);
}

.px-crowdfunding-confirmation-label {
display: block;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}

.px-crowdfunding-confirmation-title {
display: block;
font-size: var(--heading-fs-medium);
line-height: var(--heading-lh-medium);
font-weight: 700;
}

.px-crowdfunding-confirmation-url {
display: block;
margin-top: 5px;
font-size: 15px;
overflow-wrap: anywhere;
}

.px-crowdfunding-confirmation-note {
margin-top: var(--distance-small);
}

/* UPDATE FORM
--------------------------------------------------- */
.gform_fileupload_rules,
.gfield.px-crowdfunding-update-amount .gfield_description,
.gfield.px-crowdfunding-update-amount .instruction,
.gfield.px-crowdfunding-update-personal-photo .gfield_description,
.gfield.px-crowdfunding-update-personal-photo .instruction,
.gfield.px-crowdfunding-update-logo .instruction
.gfield.px-crowdfunding-update-logo .gfield_description {
display: none !important;
}

/* THEMER LAYOUT
--------------------------------------------------- */
.crowdfunding-themer-layout-compay-logo-row {
margin-bottom: -70px;
margin-top: -20px;
}

/* FOTO EN LOGO OP DE ACTIEPAGINA
De foto (individu) of het logo (organisatie) valt half over de onderrand van
de headerfoto, net als de portretfoto op de veldmedewerkerpagina. De rij
schuift zelf omhoog in plaats van de module absoluut te plaatsen, zodat de
inhoud eronder altijd onder de foto en het label begint.
De Themer layout zet hier nog oude regels neer (position absolute, right
20px !important), die worden hieronder bewust overschreven.
--------------------------------------------------- */
body.single-acties {
--cf-avatar-size: 225px;
--cf-avatar-ring: 10px;
--cf-avatar-overlap: calc(var(--cf-avatar-size) / 2);
--cf-logo-padding: 35px;
--cf-label-width: 180px;
--cf-label-overlap: 40px;
--cf-content-gap: var(--distance-default);
}

body.single-acties .fl-row:has(.px-vm-person-image-col-container),
body.single-acties .crowdfunding-themer-layout-compay-logo-row {
position: relative;
z-index: 2;
margin-top: calc(var(--cf-avatar-overlap) * -1);
margin-bottom: 0;
}

body.single-acties .px-vm-content-row {
margin-top: var(--cf-content-gap);
}

/* Foto en label als een blok, label gecentreerd onder de foto */
body.single-acties .px-vm-person-image-col-container > .fl-col-content {
display: flex;
flex-direction: column;
align-items: center;
width: fit-content;
max-width: 100%;
}

body.single-acties .px-vm-person-image-col-container .px-vm-person-image,
body.single-acties .px-vm-person-image-col-container .px-crowdfunding-action-image {
position: relative !important;
inset: auto !important;
margin-top: 0;
margin-bottom: 0;
}

body.single-acties .px-vm-person-image-col-container .fl-module.px-image img {
box-sizing: border-box;
width: var(--cf-avatar-size);
height: var(--cf-avatar-size);
padding: var(--cf-avatar-ring);
background: var(--white);
border-radius: 50% !important;
object-fit: cover;
box-shadow: var(--box-shadow);
}

body.single-acties .px-vm-person-image-col-container .fl-module.px-crowdfunding-action-image {
z-index: 1;
margin-top: calc(var(--cf-label-overlap) * -1);
}

body.single-acties .px-vm-person-image-col-container .fl-module.px-crowdfunding-action-image img {
width: var(--cf-label-width);
height: auto;
padding: 0;
background: none;
border-radius: 0 !important;
box-shadow: none;
object-fit: contain;
}

/* Logo van een organisatie: heel logo zichtbaar binnen een witte cirkel.
De padding houdt de hoeken van een vierkant logo binnen de rand. */
body.single-acties .crowdfunding-themer-layout-compay-logo-row .fl-col-content {
display: flex;
justify-content: flex-start;
}

body.single-acties .crowdfunding-themer-layout-compay-logo-row .fl-module.px-image {
margin-top: 0;
margin-bottom: 0;
}

body.single-acties .crowdfunding-themer-layout-compay-logo-row .fl-module.px-image img {
box-sizing: border-box;
width: var(--cf-avatar-size);
height: var(--cf-avatar-size);
padding: var(--cf-logo-padding);
background: var(--white);
border-radius: 50% !important;
object-fit: contain;
box-shadow: var(--box-shadow);
}

/* Desktop en tablet: logo op dezelfde plek als de foto van een individu.
Die staat in een kolom van 39% (tablet portrait 50%) rechts in de rij. */
@media (min-width : 992px) {body.single-acties .crowdfunding-themer-layout-compay-logo-row .fl-col-content {
padding-left: 61%;
}
} /* End @media */
@media (min-width : 768px) and (max-width : 992px) {body.single-acties .crowdfunding-themer-layout-compay-logo-row .fl-col-content {
padding-left: 50%;
}
} /* End @media */
@media (max-width : 767px) {body.single-acties {
--cf-avatar-size: 200px;
--cf-logo-padding: 30px;
--cf-label-width: 150px;
--cf-label-overlap: 35px;
}
} /* End @media */
/* OTHER
--------------------------------------------------- */
/* Mobile CSS */
@media (max-width : 767px) {
.crowdfunding-amount-container {
margin-bottom: 10px;}
.crowdfunding-count-container {
margin-top: 3px;}

} /* End @media */

.charleft.ginput_counter.warningTextareaInfo {
display: none !important;
}

.px-crowdfunding-donate-bar {
position: fixed !important;
left:0px;
bottom:0px;
width:100%;
z-index: 20;
}

@media (min-width: 768px) and (max-width: 1024px) {
.px-crowdfunding-main-row .fl-row-content-wrap {
display:inherit !important;}
} /* end @media */

.crowdfunding-bar-container {
border-color: white !important;
}

.crowdfunding-bar-container {
max-width: 355px;
}