@import url(digitalEventsCustom.css);

:root{
	--primary: #A01441;		/* #34a853; */
	--secondary: #73c346;
	--tertiary: #007ac1;
	--quaternary: #54b1ff;

	--black: #000;
	--gray-900: #111111;
	--gray-800: #333333;
	--gray-700: #606467;
	--gray-600: #818286;
	--gray-500: #a9aab0;
	--gray-400: #c9cad1;
	--gray-300: #d8d9dd;
	--gray-200: #eaebf0;
	--gray-100: #f5f6f9;
	--white: #FFF;

	--info: #789ac2;
	--info-light: #eafdfe;
	--success: #92b46a;
	--success-light: #f3fae8;
	--warning: #f1a82c;
	--warning-light: #fffae7;
	--danger: #e66a75;
	--danger-light: #ffd8d7;

	--border-radius: 4px;

	--color: #000;

	--font-size-smaller: 14px;
	--font-size: 17px;
	--font-size-bigger: 19px;

	--line-height-smaller: 19px;
	--line-height: 25.5px;
	--line-height-bigger: 25.5px;

	--font-weight-bold: 600;
}

/* --- ELEMENTS --> TERMS Popup --- */
#terms-popup{
	background-color: rgba(0, 0, 0, .75);
}
	#terms-popup .u2d-popup__wrapper{
		margin: 0 auto;
		width: 90%;
		max-width: 500px;
		height: auto;
		margin-top: calc(50vh - 200px);
	}
	#terms-popup .u2d-popup__content{
		display: block;
		height: 100%;
		max-height: 500px;
		overflow-y: auto;
		padding: 20px;
		box-sizing: border-box;
	}
	#terms-popup .u2d-popup__header{
		flex-wrap: wrap;
		align-items: center;
		position: absolute;
		top: -35px;
		right: 10px;
		padding: 0;
		border: 0 none;
	}
	#terms-popup .u2d-popup__header > button{
		display: none;
		font-size: 22px;
		color: var(--white);
		cursor: pointer;
		padding: 3px 10px;
		background-color: transparent;
		border: 0 none;
		transition: color .2s ease-in;
	}
		#terms-popup .u2d-popup__header > button:hover{
			color: var(--primary);
		}
		#terms-popup .u2d-popup__header > button:before{
			font-family: fontAwesome;
		}
		#terms-popup .u2d-popup__header > button.popover-fullscreen:before{
			content: '\f0b2';
		}
		#terms-popup .u2d-popup__header > button.popover-fullscreen.open:before{
			content: '\f066';
		}
		#terms-popup .u2d-popup__header > button.u2d-popup__close:before{
			content: '\f00d';
		}	
	#terms-popup .u2d-popup__body{
		flex: none;
		padding: 0;
	}
	#terms-popup .u2d-popup__body h2{
		margin-top: 20px;
		margin-bottom: 20px;
		font-weight: bold;
		font-size: 18px;
	}

		#terms-popup .u2d-popup__body a{
			cursor: pointer;
			text-decoration: underline;
		}	
		#terms-popup .u2d-popup__body .btn-wrapper {
			display: flex;
			margin: 20px auto;
			justify-content: center;
		}
		#terms-popup .u2d-popup__body .btn.terms {
			display: inline-block;
			font-size: var(--font-size);
			font-weight: normal;
			line-height: var(--line-height);
			color: var(--primary);
			text-decoration: none;
			padding: 15px 20px;
			background-color: var(--white);
			border: 1px solid var(--primary);
			border-radius: var(--border-radius);
			transition: background-color .2s ease-in;
		}
		#terms-popup .u2d-popup__body .btn.terms:hover {
			background: var(--primary);
			color:#fff;
		}





/* *** GENERAL *** */
#live-sessions span.headline{
	font-size: var(--font-size);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height);
	color: var(--color);
	display: block;
	margin: 0;
}

#live-sessions .btn{
	font-size: var(--font-size);
	font-weight: normal;
	line-height: var(--line-height);
	color: var(--primary);
	text-decoration: none;
	display: inline-block;
	padding: 15px 20px;
	background-color: var(--white);
	border: 1px solid var(--primary);
	border-radius: var(--border-radius);
	transition: background-color .2s ease-in;
}
	#live-sessions .btn:hover{
		color: var(--white);
		background-color: var(--primary);
	}

#live-sessions .template{
	display: none;
}


/* *** SESSIONS *** */
#live-sessions{
	position: relative;
	padding-top: 70px;
}

#live-stream{
	text-align: center;
	position: absolute;
	top: 0;
	width: 100%;
}

.session:not(:last-child){
	margin-bottom: 10px;
}

.session .tr.thead .td.date{
	padding: 10px;
	background-color: var(--gray-100);
}
	.session .tr.thead .td.date span{
		display: block;
	}
	.session .tr.thead .td.date span.time-start{
		font-size: var(--font-size-bigger);
		line-height: var(--line-height-bigger);
		color: var(--primary);
	}
	.session .tr.thead .td.date span.day{
		font-size: var(--font-size-smaller);
		line-height: var(--line-height-smaller);
	}
	.session .tr.thead .td.name,
	.session .tr.thead .td.category{
		padding: 0 10px;
		background-color: var(--gray-200);
	}
	.session .tr.thead .td.name{
		padding-top: 10px;
	}
	.session .tr.thead .td.name span{
		display: block;
	}
	.session .tr.thead .td.name span.session-name{
		font-size: var(--font-size-bigger);
		line-height: var(--line-height-bigger);
		color: var(--primary);
	}
	.session .tr.thead .td.name span.session-signposting{
		font-size: var(--font-size-smaller);
		line-height: var(--line-height-smaller);
	}
	.session .tr.thead .td.category{
		padding-bottom: 10px;
	}
	.session .tr.thead .td.category span{
		font-size: var(--font-size-smaller);
		line-height: var(--line-height-smaller);
	}

.session .tr.tbody{
	border: 2px solid var(--gray-100);
	border-top: 0 none;
}
	.session .tr.tbody > .tr{
		padding: 15px 10px 20px 10px;
	}
	.session .tr.tbody .tr.top > div:not(:first-child){
		margin-top: 10px;
	}
	.session .tr.tbody .tr.top > div.td.infos > div{
		position: relative;
		padding-left: 25px;
	}
	.session .tr.tbody .tr.top > div.td.infos > div:not(:first-child){
		margin-top: 10px;
	}
	.session .tr.tbody .tr.top > div.td.infos > div span.headline:before{
		font-family: fontAwesome;
		font-size: 20px;
		font-weight: normal;
		text-align: center;
		color: var(--gray-400);
		position: absolute;
		top: 0;
		left: 0;
		width: 18px;
	}
	.session .tr.tbody .tr.top > div.td.infos > div.time span.headline:before{
		content: '\f017';
	}
	.session .tr.tbody .tr.top > div.td.infos > div.room span.headline:before{
		content: '\f041';
	}
	.session .tr.tbody .tr.top > div.td.infos > div.referents span.headline:before{
		content: '\f007';
	}
	.session .tr.tbody .tr.top > div.td.description{
		position: relative;
		padding-left: 25px;
	}
	.session .tr.tbody .tr.top > div.td.description:before{
		content: '\f129';
		font-family: fontAwesome;
		font-size: 20px;
		text-align: center;
		font-weight: normal;
		color: var(--gray-400);
		position: absolute;
		top: 0;
		left: 0;
		width: 18px;
	}
	.session .tr.tbody .tr.bottom{
		text-align: center;
		background-color: var(--gray-100);
	}


/* *** ELEMENTS *** */
/* --- ELEMENTS --> Accordion --- */
.accordion{
	position: relative;
}
	.accordion .accordion-toggler{
		cursor: pointer;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.accordion.open .accordion-toggler .open-body{
		display: none;
	}
	.accordion:not(.open) .accordion-toggler .close-body{
		display: none;
	}
	.accordion .accordion-toggler .open-body:after,
	.accordion.open .accordion-toggler .close-body:after{
		font-family: fontAwesome;
		font-size: 22px;
		color: var(--primary);
		float: right;
		margin-left: 5px;
	}
	.accordion .accordion-toggler .open-body:after{
		content: '\f107';
	}
	.accordion.open .accordion-toggler .close-body:after{
		content: '\f106';
	}
	.accordion .accordion-body{
		display: none;
	}

/* --- ELEMENTS --> Popup --- */
#u2d-popup{
	background-color: rgba(0, 0, 0, .75);
}
	#u2d-popup .u2d-popup__wrapper{
		margin: 50px auto;
		width: 90%;
		max-width: 90%;
		height: calc(100% - 100px);
	}
	#u2d-popup .u2d-popup__content{
		display: block;
		height: 100%;
	}
	#u2d-popup .u2d-popup__header{
		flex-wrap: wrap;
		align-items: center;
		position: absolute;
		top: -35px;
		right: 10px;
		padding: 0;
		border: 0 none;
	}
	#u2d-popup .u2d-popup__body{
		flex: none;
		padding: 0;
		height: 100%;
	}

#u2d-popup .u2d-popup__header > button{
	font-size: 22px;
	color: var(--white);
	cursor: pointer;
	padding: 3px 10px;
	background-color: transparent;
	border: 0 none;
	transition: color .2s ease-in;
}
	#u2d-popup .u2d-popup__header > button:hover{
		color: var(--primary);
	}
	#u2d-popup .u2d-popup__header > button:before{
		font-family: fontAwesome;
	}
	#u2d-popup .u2d-popup__header > button.popover-fullscreen:before{
		content: '\f0b2';
	}
	#u2d-popup .u2d-popup__header > button.popover-fullscreen.open:before{
		content: '\f066';
	}
	#u2d-popup .u2d-popup__header > button.u2d-popup__close:before{
		content: '\f00d';
	}

#u2d-popup .template{
	overflow-y: scroll;
	padding: 20px;
	height: calc(100% - 40px);
}

#u2d-popup .popover-header{
	margin-bottom: 10px;
}
	#u2d-popup .popover-header img{
		max-width: 130px;
		max-height: 40px;
	}
	#u2d-popup .popover-header .va-name{
		font-size: var(--font-size-bigger);
		font-weight: var(--font-weight-bold);
		color: var(--primary);
	}

#u2d-popup .stream .stream-video-wrapper{
	overflow: hidden;
	position: relative;
	padding-top: 56.45%;
	width: 100%;
}
	#u2d-popup .stream .stream-video-wrapper iframe{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0 none;
	}
	#u2d-popup .stream .stream-top{
		margin-top: 10px;
	}
	#u2d-popup .stream .stream-top .session-name{
		font-size: var(--font-size-bigger);
		font-weight: var(--font-weight-bold);
		color: var(--primary);
	}
	#u2d-popup .stream .stream-top .session-signposting{
		font-size: var(--font-size-smaller);
	}
	#u2d-popup .stream .stream-top .contact-me-btn{
		cursor: pointer;
		margin-top: 10px;
	}
	#u2d-popup .stream .stream-bottom{
		margin-top: 20px;
	}
	#u2d-popup .stream .stream-bottom .referents{
		position: relative;
		padding-left: 25px;
	}
	#u2d-popup .stream .stream-bottom .referents:before{
		content: '\f007';
		font-family: fontAwesome;
		font-size: 20px;
		font-weight: normal;
		text-align: center;
		color: var(--gray-400);
		position: absolute;
		top: 0;
		left: 0;
		width: 18px;
	}

#u2d-popup .contact-me-form{
	display: none;
	margin-top: 40px;
}
	#u2d-popup .contact-me-form.active{
		display: block;
	}
	#u2d-popup .contact-me-form.active + .voting{
		display: none;
	}
	/*#u2d-popup .contact-me-form.processing:after{
	content: '';
	background-color: rgba(0, 0, 0, 0.3);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	}*/
	#u2d-popup .contact-me-form h2{
		font-size: var(--font-size-bigger);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height-smaller);
		color: var(--primary);
		margin: 0 0 15px 0;
	}
	#u2d-popup .contact-me-form .form-group{
		margin-bottom: 5px;
	}
	#u2d-popup .contact-me-form .form-group label{
		display: block;
		margin-bottom: 5px;
	}
	#u2d-popup .contact-me-form .form-group input[type="text"],
	#u2d-popup .contact-me-form .form-group textarea,
	#u2d-popup .contact-me-form .form-group select{
		font-family: inherit;
		font-size: inherit;
		color: inherit;
		padding: 3px 10px;
		width: calc(100% - 22px);
		border: 1px solid var(--gray-300);
		border-radius: var(--border-radius);
		outline: none;
	}
	#u2d-popup .contact-me-form .form-group textarea{
		min-height: 150px;
	}
	#u2d-popup .contact-me-form .form-group select{
		width: 100%;
	}
	#u2d-popup .contact-me-form .submit_message{
		display: none;
	}
	#u2d-popup .contact-me-form.submited .submit_message {
		display: block;
	}
	#u2d-popup .contact-me-form.submited form {
		display: none;
	}
	#u2d-popup .contact-me-form .submit_message .reset,
	#u2d-popup .contact-me-form .submit_message .success_message,
	#u2d-popup .contact-me-form .submit_message .error_message {
		display: none;
	}
	#u2d-popup .contact-me-form.submited.success .success_message{
		display: block;
	}
	#u2d-popup .contact-me-form.submited.error .error_message{
		display: block;
	}
	#u2d-popup .contact-me-form.submited.error .reset{
		display: inline-block;
	}
	#u2d-popup .contact-me-form form .form-control.error{
		border: 1px solid red;
	}

#u2d-popup .voting{
	margin-top: 20px;
}
	#u2d-popup .voting .toggle-voting{
		display: none;
	}
	#u2d-popup .voting h2{
		font-size: var(--font-size-bigger);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height-smaller);
		color: var(--primary);
		margin: 0 0 15px 0;
	}
	#u2d-popup .voting .iframe-wrapper iframe{
		height: 600px;
	}


@media only screen and (min-width: 1024px){
	/* *** SESSIONS *** */
	.session .tr.thead{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: var(--gray-100);
	}
		.session .tr.thead > .td{
			padding: 10px !important;
			background-color: transparent !important;
		}
		.session .tr.thead .td.date{
			flex: 1;
			max-width: 70px;
		}
		.session .tr.thead .td.name{
			flex: 1;
		}
		.session .tr.thead .td.category{
			flex: 1;
			max-width: 120px;
		}
		.session .tr.thead .td.accordion-toggler{
			position: relative;
			top: auto;
			right: auto;
			flex: 1;
			max-width: 110px;
		}

	.session .tr.tbody .tr.top > div.td.infos{
		display: flex;
		flex-wrap: wrap;
	}
		.session .tr.tbody .tr.top > div.td.infos > div{
			flex: 1;
			max-width: calc(100% / 3 - 115px / 3);
		}
		.session .tr.tbody .tr.top > div.td.infos > div:not(:first-child){
			margin-top: 0;
		}
		.session .tr.tbody .tr.top > div.td.infos > div:not(:last-child){
			margin-right: 20px;
		}
		.session .tr.tbody .tr.bottom{
			text-align: left;
			padding: 10px 10px 10px 35px;
		}


	/* *** ELEMENTS *** */
	/* --- ELEMENTS --> Popup --- */
	#u2d-popup .template{
		overflow-y: auto;
	}
		#u2d-popup .template .template-inner{
			display: flex;
			flex-direction: column;
			height: 100%;
		}
		#u2d-popup .template .popover-body{
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			height: 100%;
		}

	#u2d-popup .stream{
		flex: 1;
		margin-right: 20px;
	}

	#u2d-popup .contact-me-form{
		margin-top: 0;
		margin-left: 20px;
		width: 490px;
		padding: 15px 10px 10px 10px;
		background-color: var(--gray-100);
	}

	#u2d-popup .voting{
		position: relative;
		margin-top: 0;
	}
		#u2d-popup .voting .voting-inner{
			overflow: hidden;
			display: flex;
			flex-direction: column;
			padding: 15px 10px 10px 30px;
			width: 490px;
			height: calc(100% - 10px);
			background-color: var(--gray-100);
			transition: width .2s ease-in;
		}
		#u2d-popup .voting.hidden .voting-inner{
			padding: 0;
			width: 20px;
		}
		#u2d-popup .voting .voting-inner h2{
			width: 490px;
		}
		#u2d-popup .voting .toggle-voting{
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 20px;
			height: 100%;
			background-color: var(--primary);
			border-radius: var(--border-radius) 0 0 var(--border-radius);
		}
		#u2d-popup .voting .toggle-voting:after{
			content: '\f105';
			font-family: fontAwesome;
			font-size: 25px;
			color: #FFF;
		}
		#u2d-popup .voting.hidden .toggle-voting:after{
			content: '\f104';
		}
		#u2d-popup .voting .voting-inner .iframe-wrapper{
			flex: 1;
			width: 490px;
		}
		#u2d-popup .voting .voting-inner .iframe-wrapper iframe{
			height: 100%;
		}

	/* Terms Popup */
	
	#terms-popup .u2d-popup__content{
		padding: 40px;
	}	
	#terms-popup .u2d-popup__body {
		text-align: justify;
	}	
	#terms-popup .u2d-popup__body h2{
		margin-top: 48px;
		margin-bottom: 50px;
	}
}