@import url("view-transition.css");

:root {
	--white-color:#fff;
	--white-alpha33-color:#FFFFFF33;
	--white-alpha55-color:#FFFFFF8C;
	--white-alpha72-color:#FFFFFFB8;
	--white-alpha85-color:#FFFFFFD9;
	--black-color:#000;
	--verydark-color:#102040;
	--dark-color:#0A1628;
	--gray-color:#7A8AB0;
	--graystandard-color:#EDF1F8;
	--graydark-color:#3A4A78;
	--graylight-color:#F0F4FA;
	--grayalt-color:#8A9AB8;
	--grayalt2-color:#E8EDF8;
	--graymid0-color:#0A66C2;
	--graymid-color:#0C258E26;
	--graymid2-color:#0A66C226;
	--blue-color:#1A40CC;
	--blue-alpha7-color:#0C258E12;
	--blue-alpha10-color:#0C258E1A;
	--blue-alpha20-color:#0C258E33;
	--blue-alpha100-color:#0C258E;
	--bluelight-color:#EEF3FB;
	--bluemid-color:#E8F1FB;
	--red-color:#E3332C;
	--orange-color:#C9A040;
	--green-color:#2A7A52CC;
	--greenmid-color:#E8F8EE;
	--greenmid2-color:#128C3E;
	--green-alpha20-color:#25D36633;
	--pink-alpha80-color:#6B3EB5CC;
	--brown-color:#8A5C1ECC;
	--nav-height:53px;
}

::-webkit-scrollbar {
	width: 3px;
	height: 5px;
}

::-webkit-scrollbar-track {
	background-color: var(--white-color);
}

::-webkit-scrollbar-thumb {
	background: var(--blue-color);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--white-color);
}

html {
    scroll-behavior: smooth;
}

body {
	min-height:100dvh;
	font-family: "DM Sans", sans-serif;
	font-size:16px;
	font-weight:400;
	color:var(--black-color);
	background-color:#F4F7FC;
	margin-bottom: var(--nav-height);
}

.dm-sans-font {
	font-family: "DM Sans", sans-serif;
}

.dm-mono-font {
	font-family: "DM Mono", monospace;
}

.josefin-sans-font {
	font-family: "Josefin Sans", sans-serif;
}

a {
	color:var(--black-color);
    text-decoration:none;
    transition:all .5s;
}

a:hover {
    opacity:.75;
}

a[nohref],
label {
	cursor:pointer;
}

.relative {
    position:relative;
}

.absolute {
    position:absolute;
	&.bottom-0 {
		bottom:0;
	}
	&.right-0 {
		right:0;
	}
}

.block {
    display:block;
}

.flex {
    display:flex;
}

.flex-wrap {
    flex-wrap:wrap;
}

.flex-col {
    flex-direction:column;
}

.flex-1 {
    flex:1;
}

.flex-vert-aligned {
    align-items:center;
}

.flex-hor-aligned {
    justify-content:center;
}

:is(.full-width, #abs-id) {
	width:100%;
}

:is(.full-height, #abs-id) {
	height:100%;
}

.light-text {
	font-weight:300;
}

.regular-text {
	font-weight:400;
}

.medium-text {
	font-weight:500;
}

.semibold-text {
	font-weight:600;
}

.bold-text {
	font-weight:700;
}

.fs-9 {
    font-size:9px;
}

.fs-10 {
    font-size:10px;
}

.fs-11 {
    font-size:11px;
}

.fs-12 {
    font-size:12px;
}

.fs-13 {
    font-size:13px;
}

.fs-14 {
    font-size:14px;
}

.fs-15 {
    font-size:15px;
}

.fs-16 {
    font-size:16px;
}

.fs-18 {
    font-size:18px;
}

.fs-20 {
    font-size:20px;
}

.fs-22 {
    font-size:22px;
}

.fs-26 {
    font-size:26px;
}

.fs-28 {
    font-size:28px;
}

.fs-36 {
    font-size:36px;
}

.ls-0-5 {
	letter-spacing:.5px;
}

.ls-1-2 {
	letter-spacing:1.2px;
}

.uppercase {
	text-transform: uppercase;
}

.bluelight-bg {
	background-color:var(--bluelight-color);
}

.white-bg {
	background-color:var(--white-color);
}

.white-alpha33-bg {
	background-color:var(--white-alpha33-color);
}

.graylight-bg {
	background-color:var(--graylight-color);
}

.graystandard-bg {
	background-color:var(--graystandard-color);
}

.blue-alpha10-bg {
	background-color:var(--blue-alpha10-color);
}

.blue-alpha100-bg {
	background-color:var(--blue-alpha100-color);
}

.verydark-bg {
	background-color:var(--verydark-color);
}

.green-bg {
	background-color:var(--green-color);
}

.greenmid-bg {
	background-color:var(--greenmid-color);
}

.pink-alpha80-bg {
	background-color:var(--pink-alpha80-color);
}

.brown-bg {
	background-color:var(--brown-color);
}

.bluemid-bg {
	background-color:var(--bluemid-color);
}

.grayalt2-bg {
	background-color:var(--grayalt2-color);
}

.blue-text {
	color:var(--blue-color);
}

.blue-alpha100-text {
	color:var(--blue-alpha100-color);
}

.white-text {
	color:var(--white-color);
}

.white-alpha55-text {
	color:var(--white-alpha55-color);
}

.white-alpha72-text {
	color:var(--white-alpha72-color);
}

.white-alpha85-text {
	color:var(--white-alpha85-color);
}

.verydark-text {
	color:var(--verydark-color);
}

.dark-text {
	color:var(--dark-color);
}

.gray-text {
	color:var(--gray-color);
}

.graydark-text {
	color:var(--graydark-color);
}

.grayalt-text {
	color:var(--grayalt-color);
}

.red-text {
	color:var(--red-color);
}

.orange-text {
	color:var(--orange-color);
}

.graymid0-text {
	color:var(--graymid0-color);
}

.greenmid2-text {
	color:var(--greenmid2-color);
}

.padding-5 {
    padding:5px;
}

.padding-10 {
    padding:10px;
}

.padding-15 {
    padding:15px;
}

.padding-20 {
    padding:20px;
}

.mt-15 {
	margin-top:15px;
}

.mt-50 {
	margin-top:50px;
}

.mb-10 {
	margin-bottom:10px;
}

.mb-15 {
	margin-bottom:15px;
}

.mb-20 {
	margin-bottom:20px;
}

.mb-30 {
	margin-bottom:30px;
}

.mt-auto {
	margin-top:auto;
}

.ml-auto {
	margin-left:auto;
}

.pt-100 {
	padding-top:100px;
}

.pt-50 {
	padding-top:50px;
}

.pt-35 {
	padding-top:35px;
}

.pt-20 {
	padding-top:20px;
}

:is(.pt-10, #abs-id) {
	padding-top:10px;
}

.pb-35 {
	padding-bottom:35px;
}

.pb-20 {
	padding-bottom:20px;
}

.pb-15 {
	padding-bottom:15px;
}

.border-rad-5 {
	border-radius:5px;
}

.border-rad-8 {
	border-radius:8px;
}

.border-rad-10 {
	border-radius:10px;
}

.border-rad-12 {
	border-radius:12px;
}

.border-rad-14 {
	border-radius:14px;
}

.border-rad-18 {
	border-radius:18px;
}

.border-rad-20 {
	border-radius:20px;
}

.border-rad-full {
	border-radius:100%;
}

.brd-top-left-rad-inherit {
	border-top-left-radius:inherit;
}

.brd-top-right-rad-inherit {
	border-top-right-radius:inherit;
}

.border-rad-full {
	border-radius:100%;
}

.border-top-0 {
	border-top:0;
}

.border-1-white {
	border:1px var(--white-color) solid;
}

.border-1-gray {
	border:1px var(--gray-color) solid;
}

.border-1-graymid {
	border:1px var(--graymid-color) solid;
}

.border-1-graymid2 {
	border:1px var(--graymid2-color) solid;
}

.border-1-red {
	border:1px var(--red-color) solid;
}

.border-1-orange {
	border:1px var(--orange-color) solid;
}

.border-1-green-alpha20 {
	border:1px var(--green-alpha20-color) solid;
}

.border-1-blue-alpha10 {
	border:1px var(--blue-alpha10-color) solid;
}

.border-1-white-alpha33 {
	border:1px var(--white-alpha33-color) solid;
}

.border-bottom-1-blue-alpha10 {
	border-bottom:1px var(--blue-alpha10-color) solid;
}

.brd-lw-3 {
	border-left-width: 3px;
}

.bl-0 {
	border-left:0;
}

.br-0 {
	border-right:0;
}

.center-aligned {
    text-align:center;
}

.underlined-text {
	text-decoration:underline;
}

.object-fit-cover {
    object-fit:cover;
}

.object-fit-contain {
    object-fit:contain;
}

.lh-14 {
    line-height:14px;
}

.lh-16 {
    line-height:16px;
}

.lh-18 {
    line-height:18px;
}

.lh-20 {
    line-height:20px;
}

.lh-22 {
    line-height:22px;
}

.lh-25 {
    line-height:25px;
}

.lh-26 {
    line-height:26px;
}

.lh-30 {
    line-height:30px;
}

.lh-32 {
    line-height:32px;
}

.lh-42 {
    line-height:42px;
}

.grid-gap-5 {
	grid-gap: 5px;
}

.grid-gap-7 {
	grid-gap: 7px;
}

.grid-gap-10 {
	grid-gap: 10px;
}

.grid-gap-15 {
	grid-gap: 15px;
}

.grid-gap-20 {
	grid-gap: 20px;
}

.grid-gap-50 {
	grid-gap: 50px;
}

.status-marker {
	display:inline-flex;
	border:1px transparent solid;
	&:not(.lang-switcher) {
		padding-left:12px;
		padding-right:12px;
	}
	width: max-content;
	&.small {
		padding-left:5px;
		padding-right:5px;
	}
	&.lh-19 {
		line-height:19px;
	}
	&.lh-21 {
		line-height:21px;
	}
	&.lh-25 {
		line-height:25px;
	}
	&.lh-29 {
		line-height:29px;
	}
	&.lh-30 {
		line-height:30px;
	}
	&.lh-33 {
		line-height:33px;
	}
	&.lh-36 {
		line-height:36px;
	}
	&.h-54 {
		height:54px;
	}
	&.white-brd {
		border-color:#FFFFFF26;
	}
	&.white-alpha33-brd {
		border-color:var(--white-alpha33-color);
	}
	&.graymid-brd {
		border-color:var(--graymid-color);
	}
	&.red-bg {
		background-color:#C45050D9;
	}
	&.green-brd {
		border-color:var(--green-color);
	}
}

.hor-sep {
	height:1px;
	&.white-alpha33-bg {
		background-color:var(--white-alpha33-color);
	}
	&.blue-alpha10-bg {
		background-color:var(--blue-alpha10-color);
	}
	&.red-bg {
		background-color:#C45050CC;
	}
	&.w28 {
		width:28px;
	}
	&.w36 {
		width:36px;
	}
}

.vert-sep {
	width:1px;
}

.rectangle {
	aspect-ratio:1 / 1;
	&.w-20 {
		width:20px;
	}
	&.w-32 {
		width:32px;
	}
	&.w-38 {
		width:38px;
	}
	&.w-44 {
		width:44px;
	}
	&.w-56 {
		width:56px;
	}
	&.w-72 {
		width:72px;
	}
	img {
		aspect-ratio:inherit;
	}
}

.program-type {
	border-left:3px var(--color) solid;
	.status-marker {
		color:var(--color);
	}
	&.networking {
		--color:#C45050;
		.status-marker {
			background-color:#C4505018;
		}
	}
	&.planning {
		--color:#3A5A9A;
		.status-marker {
			background-color:#3A5A9A18;
		}
	}
	&.atelier {
		--color:#C9A040;
		.status-marker {
			background-color:#C9A04018;
		}
	}
	&.pause {
		--color:#5A9E78;
		.status-marker {
			background-color:#5A9E7818;
		}
	}
}

.container {
    width:100%;
	height:inherit;
    margin:auto;
    padding-left: 20px;
    padding-right: 20px;
}

	.nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		height:var(--nav-height);
		border-top:1px var(--blue-alpha10-color) solid;
		li {
			a {
				position:relative;
				span {
					transition:all .5s;
					svg {
						path {
							transition:all .5s;
						}
					}
				}
				&:before {
					content:"";
					position:absolute;
					top:-7px;
					left:0;
					right:0;
					width:32px;
					margin:auto;
					height:2px;
					border-bottom-left-radius:20px;
					border-bottom-right-radius:20px;
					background-color:var(--blue-alpha100-color);
					opacity:0;
					visibility:hidden;
					transition:all .5s;
				}
				&:hover,
				&.active {
					opacity: 1;
					span {
						color:var(--blue-alpha100-color);
						svg {
							path {
								stroke:var(--blue-alpha100-color);
							}
						}
					}
					&:before {
						opacity:1;
						visibility:visible;
					}
				}
			}
		}
	}

	.header {
		&:before {
			content:"";
			position:absolute;
			background-color:#0A162899;
			inset:0;
		}
		&.big {
			height:440px;
		}
		&.middle {
			height:280px;
		}
		&.small {
			height:140px;	
			&:before {
				border-radius:inherit;
			}
		}
		.header-inner {
			position:absolute;
			inset:0;
		}
	}
	
	.lang-switcher {
		padding:3px;
		gap:0;
		.lang-btn {
			min-width:35px;
			text-align:center;
			border-radius:16px;
			line-height:19px;
			color:var(--white-text);
			&.active {
				cursor:default;
				pointer-events: none;
				background-color:var(--white-color);
				color:var(--blue-alpha100-color);
			}
		}
	}
	.header {
		.lang-switcher {
			position:absolute;
			right:0;
		}
	}
	.main {
		.lang-switcher {
			.lang-btn {
				color:var(--grayalt-color);
				&.active {
					background-color:var(--blue-alpha100-color);
					color:var(--white-color);
				}
			}
		}
	}
	
	.actions-link {
		transition:all .5s;
		& {
			.rectangle {
				transition:all .5s;
			}
		}
		&:hover,
		&.active {
			opacity:1;
			border-color:var(--blue-alpha20-color);
			background-color:var(--blue-alpha7-color);
			.rectangle {
				background-color:var(--blue-alpha10-color);
			}
			strong {
				color:var(--blue-color);
			}
		}
	}
	
	:is(.up-on-hover, #abs-id) {
		transition:all .5s;
		&:hover {
			opacity:1;
			margin-top: -10px;
			box-shadow: 0 7px 20px 2px rgba(0, 0, 0, .05);
		}
	}
	
	:is(.right-on-hover, #abs-id) {
		transition:all .5s;
		&:hover {
			opacity:1;
			transform: translateX(5px);
			box-shadow: 7px 0 20px 2px rgba(0, 0, 0, .05);
		}
	}
	
	input {
		border:0;
		outline:none;
	}
	
	input:not([type="checkbox"], [type="radio"]) {
		background:transparent;
		font-size:14px;
		font-weight:400;
		color:var(--dark-color);
		line-height: 21px;
		&::placeholder {
			color:var(--dark-color);
		}
	}
	
	.tab-ul {
		a {
			border-bottom:2px transparent solid;
			transition:all .5s;
			&:hover,
			&.active {
				opacity:1;
				border-bottom-color:var(--verydark-color);
				span {
					color:var(--verydark-color);
				}
			}
		}
	}
	
	.tags-ul {
		a {
			border-color: var(--blue-alpha10-color);
			&:hover,
			&.active {
				opacity:1;
				border-color;var(--verydark-color);
				background-color:var(--verydark-color);
				color:var(--white-color);
			}
		}
	}
	
	.participants-header {
		position:relative;
		height:72px;
		&:before {
			content:"";
			position:absolute;
			inset:0;
			background-color:var(--white-alpha72-color);
		}
	}
	
	.has-shadow {
		box-shadow:0 4px 16px 0 #10204038;
	}
	
	.make-fav {
		&.status-marker {
			span {
				transition:all .5s;
			}
		}
		&.status-marker:hover,
		&.status-marker.active {
			opacity:1;
			border-color:var(--white-alpha33-color);
			background-color:var(--white-alpha85-color);
			svg {
				path {
					stroke:#E3332C;
					fill:#E3332C;
				}
			}
			span {
				color:var(--black-color);
			}
		}
	}
	
	details.status-marker {
		position:relative;
		summary {
			cursor:pointer;
			&:focus {
				outline:none;
			}
		}
		::marker {
			content: "";
		}
	}
	details.status-marker[open] summary {
		path {
			stroke:var(--grayalt-color);
		}
		span {
			color:var(--grayalt-color);
		}
	}
	details.status-marker[open] ul {
		position: absolute;
		right: 0;
		top: calc(100% + 2px);
		text-align: right;
		border:1px var(--blue-alpha10-color) solid;
		background-color: var(--graystandard-color);
		border-radius: 8px;
		li {
			font-size:13px;
			line-height: normal;
			white-space: nowrap;
			padding:5px 10px;
			a {
				color:var(--graydark-color);
				transition:none;
			}
		}
	}	
	
.footer {
	border-top:1px var(--blue-alpha10-color) solid;
}