html {
	overflow-y: scroll;
	scrollbar-gutter: stable;
	
}
body {

    --pd-white: #fff;
	--pd-black: #000;
    --pd-green: #1D7872;
    --pd-green-light: #5A958D;
	--pd-beige: #F2EDE4;
	--pd-blue: #D2F0EB;

    --pd-radius: 3px;
    
    --box-shadow: none;
    --color-background: #fff;
	--color-link: var(--pd-green);

    /* --font-family-body: "'source sans 3'", sans-serif; */
    --font-family-body: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-headings: "Expletus Sans", sans-serif;
}
body, * {
    font-family: var(--font-family-body);
}
h1, h2, h3, h4, h5, h6, 
.input-card-header, .input-card-header span, 
.nav-link {
    font-family: var(--font-family-headings);
}

p {
	a {
		font-weight: 500;
		text-decoration: underline;
	}
}
.clamp-2 {
	hyphens: auto;
}
.input-card {
	p {
		a {
			color: var(--color-link) !important;
		}
	}
}
.btn {
	--bs-btn-font-family: var(--font-family-body);
	--bs-btn-font-size: 1rem;
	border-radius: var(--pd-radius) !important;
	&:active,
	&:focus,
	&:focus-visible {
		border-radius: var(--pd-radius) !important;
	}
	&:focus-visible {
			box-shadow: var(--bs-btn-focus-box-shadow) !important;
	}
	.font-sm {
		font-size: unset
	}
}

.btn.btn-lg.btn-primary[value="UmbracoMembers.OpenIdConnect"] {
	background: #0060E6 !important;
	
	&:before {
		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="47" height="12" fill="none"><g fill="%23fff" clip-path="url(%23a)"><path d="M20.45 1.43V3.7h1.82v1.8h-1.82v3.63c0 .68.38.9.98.9.38 0 .76-.07.99-.3v2.04c-.3.15-.91.23-1.51.23-1.66 0-2.72-.83-2.72-2.64V5.5h-1.28V3.7h1.28V1.43zM39.17.15c4.83 0 6.87 2.64 6.87 5.89s-2.04 5.88-6.87 5.88h-1.96V.15zM30.5 0a2.87 2.87 0 1 0-.01 5.73 2.87 2.87 0 0 0 0-5.73m0 6.8c-2.65 0-4.84 1.5-5.14 5.12H35.7c-.3-3.62-2.5-5.13-5.2-5.13M2.19.6l3.47 5.36L9.06.6h2.19v11.32H8.9V4.6L5.7 9.43h-.08L2.34 4.6v7.32H0V.6zM14.5 0c-.76 0-1.37.6-1.37 1.36 0 .75.6 1.36 1.36 1.36s1.36-.6 1.36-1.36S15.25 0 14.49 0m-1.14 3.7v8.22h2.26V3.7z"/></g><defs><clipPath id="a"><path fill="%23fff" d="M0 0h46.04v12H0z"/></clipPath></defs></svg>');
		display: inline-block;
		width:47px;
		height:12px; 
		margin-right: .5rem;
	}
}

/* Left align buttons */
#mx-contact-form,
#mx-myprofile,
#mx-user-memberships {
	.d-flex.justify-content-center {
		justify-content: start !important;
	}
}


/* .btn-secondary -> .btn-primary */
#mx-user-memberships .membership-details > div:not(.p-2) {
	.btn-secondary {
		background: var(--pd-green) !important;
		color: var(--pd-white) !important;
	}
}
/* .btn-simple -> .btn-primary */
.mx-events-preview {
	.btn-simple {
		background: var(--color-input-primary)!important;
		padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
		--bs-btn-padding-x: .75rem;
		--bs-btn-padding-y: .375rem;
		--bs-btn-font-family: ;
		--bs-btn-font-size: 1rem;
		--bs-btn-font-weight: 400;
		--bs-btn-line-height: 1.5;
		--bs-btn-color: var(--bs-body-color);
		--bs-btn-bg: transparent;
		--bs-btn-border-width: var(--bs-border-width);
		--bs-btn-border-color: transparent;
		--bs-btn-border-radius: var(--pd-radius);
		--bs-btn-hover-border-color: transparent;
		--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
		--bs-btn-disabled-opacity: .65;
		--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
		display: inline-block;
		padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
		font-family: var(--bs-btn-font-family);
		font-size: var(--bs-btn-font-size);
		font-weight: var(--bs-btn-font-weight);
		line-height: var(--bs-btn-line-height);
		color: var(--bs-btn-color);
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
		user-select: none;
		border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
		border-radius: var(--bs-btn-border-radius);
		background-color: var(--bs-btn-bg);
		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
	}
}
.btn-secondary {

	border-radius: var(--pd-radius) !important;
	&:active {
		border-radius: var(--pd-radius) !important;
	}
}

.info-title {
	font-size: 16px !important;
	font-weight: 400;
	color: var(--pd-black);
}
div:has(> .info-title) {
	font-weight: 600;
}


div.p-2:has(>.input-card) {
	padding-inline: 0 !important;
}

header {
	div:has(>.logo-large) {
		justify-content: unset !important
	}
	.logo-large {
		left: 1rem;
		position: relative;
		height: 50px;
		width: 200px;
	}
    > div {
        > div:first-of-type {
            /* Main navigation */
            justify-content: end;
            .nav {
                gap: 48px;
            }
        }
        > div:last-of-type { 
            /* Tools navigation */

            > div {
                flex-flow: row-reverse;
				gap: 32px;
                > div:first-of-type {/* Language switcher */
                     .btn.btn-language {
                        .fi {
                            border-radius: 50%;
                            width: 24px;
                            height: 24px;
                            border: 1px solid var(--pd-white);
                            background-size: cover
                        }
                    }   
                }

                > div:last-of-type { /* User profile */
                    > div {
                         > button {
                            border: 1px solid var(--Grn-Outline, #5A958D);
                            padding: 8px 12px;
                            border-radius: 5px !important; 
                            background: transparent;
                        }   
                    }
                }
            }
        }
    }
    nav.w-100 {
        width: auto !important;
    }
}

footer {
	padding-block: 2rem;
    h2,h3 {
        font-size: 18px;
        font-family: var(--font-family-roboto-mono);
        font-weight: unset !important;
		margin-bottom: 1rem !important;
    }
    p {
        font-size: 16px;
        font-family: var(--bs-body-font-family);
		margin-bottom: 1rem !important;
    }
	.container {
		.row {
			.col-md-4:first-of-type
			{
				text-align: left !important;
				padding-left: 3rem !important;
			}
		}
	}
}

.breadcrumbs {margin-left: 1.5rem;}

.input-card {
	border-radius: 0;
	.card-title,
	.input-card-header {
	    color: var(--pd-green) !important;
	    background: transparent;
		font-size: 22px;    
		padding-right: 1rem !important;
	    padding-left: 1rem !important;
		max-width: unset;
	}

}

.input-card {
	.position-absolute.bottom-0.justify-content-end.w-100.d-flex.pb-2.pe-2 {
		justify-content:start !important;
		padding: 15px;
		bottom: 5px !important;
	}
	padding: 10px;
}

.crm-data-card .footer {
	justify-content:start
}
.btn.btn-primary {
	border-radius: 3px !important
}


.mx-events-preview {

    .input-card {
        background: var(--pd-green) !important;
        color: var(--pd-white) !important;
		padding: 48px 64px;
		height: auto;
		.input-card-header-container {
			padding: 0;
			.input-card-header {
			    color: var(--pd-white) !important;
			    font-size: 50px;
			    padding: 0 !important;
			}
		}
		.entry-list {
			height: auto;
			gap: 5px;
			margin-top: 24px;
			margin-bottom: 48px;
		}
		.event-preview-entry {
			background: var(--pd-beige);
			color: var(--pd-black);
			gap: 24px;
			width: auto;
			padding: 24px;
			
			&:before {
				display: none;
			}
			.title {
				display: block;
				font-size: 22px;
				font-family: var(--font-family-headings);
			}


			.info {

				span > span {
					background: white;
					padding: 4px 8px;
					display: inline-block;
					font-family: var(--font-family-body);
					font-weight: 400;
					font-size:  16px;
				}
				.info-city {
					background: var(--pd-blue);
					padding:4px 8px;
					font-family: var(--font-family-body);
					font-weight: 400;
					font-size: 16px;
				}
				
			}

			
		}
    }


	.event-preview-container {
		.see-all-button {
			--color-input-primary: var(--pd-white);
			color: var(--pd-green) !important;
			position: unset;
			display: inline-block !important;
			padding: 8px 24px !important;
			border-radius: var(--bs-btn-border-radius) !important;
			svg {
				display: none;
			}
		}
	}
}

.mx-membercard {
	.spinner-border {
		display: none !important;
	}
	height: 100%;
	> div,
	> div > div, 
	> div > div > div 
	{
		height: 100%;
	}
	
	.input-card {
		background-color: var(--pd-green) !important;
		color: var(--pd-white) !important;
		height: 100%;
		background-position: 58% -220%  !important;
		height: 100%;
		background-size: auto;
		
		> div {
			background-image: url("/media/evkiblyo/pd_white.svg") !important;
			background-repeat: no-repeat !important;
			background-position: 16px 48px !important;
			background-size: 150px 36px !important;
            @media (min-width: 1200px) {
    			background-size: 200px 48px !important;
            }
		}
		.info-container {
			> div {
				margin-top: 100px;
				gap: 48px !important;
				> div {
					span {
						font-family: var(--font-family-headings);
					}
					.font-xl {
						font-size: 38px;
					}
					.font-semibold {
						font-size: 28px;
					}
				}
			}
		}
	}

}
.mx-crm-data-card {
	height: 100%;
	> div,
	> div > div,
	> div > div > div,
	> div > div > div > .crm-data-card {
		height: 100%;
	}
    .spinner-border {
        height: var(--bs-spinner-height) !important;
    }
}
.input-card.d-flex.flex-column.w-100.h-400 {
    height: 100%;
    .d-flex.flex-column.h-100.flex-fill.position-relative {

        .d-flex.pb-5.h-100 {
            padding-bottom: 0 !important;
            .px-3.flex-grow-1.overflow-y-auto {
                    overflow-y: unset !important;
                    hyphens: auto;
            }
            

        }
        .position-absolute.bottom-0.justify-content-end.w-100.d-flex.pb-2.pe-2 {
            padding-inline: 1rem !important;
            position: unset !important;
            .btn.btn-primary.btn-slim.btn-rounded.d-flex.gap-2 {
                hyphens: auto;
            }

        }
        
    }
}
section.mb-3:has(.input-card.d-flex.flex-column.w-100.h-400) {
    height: 100%;
}


#mx-myprofile {
	hr.w-100 {
		display: none;
	}
	.btn.btn-secondary.btn-slim {
		background: var(--pd-green) !important;
		color: var(--pd-white) !important;
	}
} 

#mx-contact-form {
	background-color:var(--color-card-background);
	padding-block: 1rem;
}	

#mx-consent-page {

	.consent-window {
		padding: 0;
		padding-bottom: 1rem;	
	}
	.consent-card {
		position: relative;
		max-width: unset;
		.input-card {
			padding: 1rem;
		}
		.d-flex.gap-2.justify-content-end.pe-4.pt-2 {
			justify-content:start !important;
		}
		.input-card-header {
			font-size: 28px
		}
		.card-footer {
			position: absolute;
			right: 2rem;
			.d-flex.gap-1.align-items-center {
				justify-content:start !important;
				flex-direction: row-reverse;
				font-weight: 500;
				font-size: 22px;
			}
		}
	}
}