/* CSS Document */

/* ***  ROOT  *** */
:root {	
	--narrow-w: 600px;
	--wide-w: 1200px;
}

/* Reset */
/* -------------------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	position: relative;
}
a {
	display: inline-block;
	text-decoration: none;
}
a:focus { outline: 1px dotted; }
a[disabled] { pointer-events: none; }

img,
iframe {
	max-width: 100%;
	border: none;
}
iframe {
	width: 100%;
}
img {
	height: auto;
}
h1, h2, h3, h4 , h5, h6, p:not(:first-child) {
	margin: 1rem 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	border: solid #ccc;
	border-width: 1px 1px 0 1px;
}
table th 	{ background-color:#f5f5f5; color: var(--first-brand-color); border-bottom: 1px solid #ddd; }
table td 	{ border-bottom: 1px solid #ddd; padding: 3px; }
table td+td { border-left: 1px solid #ddd; }

ul.list li, ol.list li, dl.list li {
	padding: 0.5rem;
	list-style: outside;
	margin: 0 1rem;
}

.video-js * { position: static; }  /* Fix */

.page.rounded .round { border-radius: 8px; overflow: hidden; }

/* General */
/* -------------------------------------------------------------- */

body {
	color: var(--text-color);
	font-family: var(--main-font);
	background-color: var(--background-color);
	background-image: var(--background-image);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	line-height: 1.4;
	min-height: 100vh;
}

/* PAGE */
/* -------------------------------------------------------------- */

.page {
	margin: 0 auto;
	display: block;
}

.page.full	 { }
.page.wide   { max-width: var(--wide-w) }
.page.narrow { max-width: var(--narrow-w) }

.row.full   { margin: 0 auto; }
.row.wide   { margin: 0 auto; max-width: var(--wide-w) }
.row.narrow { margin: 0 auto; max-width: var(--narrow-w) }

.headline:has( + .row.wide ),
.row.wide + .footer  { max-width: var(--wide-w); margin-left: auto; margin-right: auto; }
.headline:has( + .row.narrow ),
.row.narrow + .footer  { max-width: var(--narrow-w); margin-left: auto; margin-right: auto; }

.wrap { margin: 0 auto; padding: 0; }

/* Header */
header { padding: var(--header-ypad) var(--header-xpad); }
header .wrap { display: flex; justify-content: center; }
header .wrap img { width: var(--header-width); }

header.alignleft   .wrap { justify-content: flex-start; }
header.alignright  .wrap { justify-content: flex-end; }
header.aligncenter .wrap { justify-content: center; }
header.justify     .wrap img { width: 100%; }

/* Main */
article {
	min-width: 300px;
	display: block;
	margin: 0 auto;
	padding: 1.5vh 1em;
}
.player_content {
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
}
.video-container {
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	background: rgba(100,100,100,0.15);
}
.video-container iframe {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-container.loader iframe {
	z-index: 10;
	display: block;
}
.video-container.loader #ik_player,
.video-container.loader #ecg-player {
	display: none;
}

/* --- Date & info --- */
.headline {
	padding: 1vh 1rem;
	font-size: 0.85rem;
	margin-bottom: 1.5vh;
	background-color: rgba(0, 0, 0, 0.1);
	font-weight: bold;
	text-align: left;
	display: flex;
	align-items: center;
	width: 100%;
}

.ico_date::before {
	content: "";
	display: block;
	width: 28px;
	overflow: hidden;
	background: url(https://storage.wowcast.co/libs/images/ico-calendar.png) center 0.2vh no-repeat;
	margin-right: 0.5rem;
	min-height: 28px;
	min-width: 26px;
}

#headline.ico::before {
	width: 36px;
	height: 36px;
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: rgba(255, 255, 255, 0.15);
	content: "";
	display: block;
	margin: 0 0.5rem 0 -0.5rem;
}

/* Minimum width of X */
@media screen and (min-width: 1024px) {
	#headline.ico::before {
		width: 42px;
		height: 42px;
		background-size: 30px 30px;
	}
}

/* Planning icons */
#headline.ico_planning_calendar::before { background-image: url(https://storage.wowcast.co/libs/images/ico_planning_calendar.svg); }
#headline.ico_planning_todo_list::before { background-image: url(https://storage.wowcast.co/libs/images/ico_planning_todo_list.svg); }
#headline.ico_planning_timeline::before { background-image: url(https://storage.wowcast.co/libs/images/ico_planning_timeline.svg); }

/* Discussion icons */
#headline.ico_discussion_conference::before { background-image: url(https://storage.wowcast.co/libs/images/ico_discussion_conference.svg); }
#headline.ico_discussion_voice_presentation::before { background-image: url(https://storage.wowcast.co/libs/images/ico_discussion_voice_presentation.svg); }
#headline.ico_discussion_collaboration::before { background-image: url(https://storage.wowcast.co/libs/images/ico_discussion_collaboration.svg); }
#headline.ico_discussion_qa::before { background-image: url(https://storage.wowcast.co/libs/images/ico_discussion_qa.svg); }
#headline.ico_discussion_survey::before { background-image: url(https://storage.wowcast.co/libs/images/ico_discussion_survey.svg); }

/* Chart icons */
#headline.ico_chart_pie::before { background-image: url(https://storage.wowcast.co/libs/images/ico_chart_pie.svg); }
#headline.ico_chart_area::before { background-image: url(https://storage.wowcast.co/libs/images/ico_chart_area.svg); }
#headline.ico_chart_bar::before { background-image: url(https://storage.wowcast.co/libs/images/ico_chart_bar.svg); }
#headline.ico_chart_line::before { background-image: url(https://storage.wowcast.co/libs/images/ico_chart_line.svg); }
#headline.ico_chart_combo::before { background-image: url(https://storage.wowcast.co/libs/images/ico_chart_combo.svg); }
#headline.ico_chart_presentation::before { background-image: url(https://storage.wowcast.co/libs/images/ico_chart_presentation.svg); }
#headline.ico_chart_positive::before { background-image: url(https://storage.wowcast.co/libs/images/ico_chart_positive.svg); }
#headline.ico_chart_negative::before { background-image: url(https://storage.wowcast.co/libs/images/ico_chart_negative.svg); }
#headline.ico_chart_bullish::before { background-image: url(https://storage.wowcast.co/libs/images/ico_chart_bullish.svg); }
#headline.ico_chart_bearish::before { background-image: url(https://storage.wowcast.co/libs/images/ico_chart_bearish.svg); }

/* Shadowed box */
.new-section-box {
	padding: 2vh 2% 1.5vh 2%;
	box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.15);
}

/* Columns */
.row {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1em;
	align-items: flex-start;
}

/* Spacer columns */
.column_1,
.column_3,
.column_5 { flex: 1 1 0; display: none; }

/* Content columns */
.column_2,
.column_4 { width: 100%; }

/* Expired conent */
.post-expired { display: none }
.row.expired[rel=all] { display: none }

/* Type 1: show alternative content */
.row.expired.alt-content > .col.expired > * { display: none }
.row.expired.alt-content > .col.expired > .post-expired { display: block; background: var(--box-background-color); color: var(--box-text-color); padding: 2em 1em; }
.page.rounded .row.expired.alt-content > .col.expired > .post-expired { border-radius: 8px }
.row.expired.alt-content > .col.expired:has(.post-expired) { align-self: center; }

/* Type 2: Hide it and keep other contents width and center */
.row.expired.center-contents > .col.column_3,
.row.expired.center-contents > .col.expired { display: none; }

/* Type 3: Hide it and resize other contents */
.row.expired.resize-contents > .col.column_3,
.row.expired.resize-contents > .col.expired { display: none; }

@media screen and (min-width: 1024px) {

	/* Columns */
	.row {
		flex-direction: row;
		gap: 0;
	}

	/* Spacer columns */
	.column_1,
	.column_3,
	.column_5 { display: block; }

	/* Content columns */
	.column_2,
	.column_4 { width: auto; }

	/* Expired conent */

	/* Type 1: show alternative content */

	/* Type 2: Hide it and keep other contents width and center */
	.row.expired.center-contents > .col.column_content:not(.expired) { margin: 0 auto; flex-grow: 0}

	/* Type 3: Hide it and resize other contents */
	.row.expired.resize-contents > .col.column_content:not(.expired) { flex-grow: 1 }
}



/* Useful classes */
/* -------------------------------------------------------------- */

.allsizes.left  { float: left;  display: inline-block; }
.allsizes.right { float: right; display: inline-block; }
.cleaner{ height: 1px !important;  clear: both; overflow: hidden; }
.spacer	{ height: 15px !important; clear: both; overflow: hidden; }
.hidden	{ display: none; }
.indent { padding-left: 1.5rem; }
blockquote { padding: 8rem; }
.small, small { font-size: 0.8em; }
.big, big { font-size: 1.2em; }
.multiply { mix-blend-mode: multiply; }

/* Minimum width of X */
@media screen and (min-width: 1024px) {
	.left  { float: left;  display: inline-block; }
	.right { float: right; display: inline-block; }
}

.soft-transition, .soft-transition * {
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	transition: 0.6s;
}
.btn-sm,
a[title*="Button"]{
	border: none;
	padding: 0.8rem 2rem;
	max-width: 100%;
	text-decoration: none;
	margin: 0.5em auto;
	transition: 0.6s;
}
.btn-sm:has( ~ .btn-sm[disabled]), .btn-sm[disabled] ~ .btn-sm { opacity: 0.6; }
.btn-sm:has( ~ .btn-sm[disabled]):hover, .btn-sm[disabled] ~ .btn-sm:hover { opacity: 1; }


/* Tabs */
.nav { border-bottom: 4px solid var(--first-brand-color); height: 2.8em; overflow: hidden; } 
.nav , .nav li { list-style: none; display: block; } 
.nav li { display: inline-block; width: auto; margin: 0 0.01em; } 
.nav a  { display: inline-block; text-decoration: none; color: var(--first-brand-color); padding: 1rem 2rem; background-color: #eee; font-weight: bold; border-top-left-radius: 4px; border-top-right-radius: 4px; font-size: 0.8rem; } 
.nav a:hover, .nav a.active { background-color: var(--button-color); color: var(--button-text) }

/* Langs page template */
.lang { margin:0; padding:0; list-style:none; display: flex; flex-wrap: wrap; gap: 5%; justify-content: center }
.lang li { padding: 15px; border-bottom: 1px solid rgba(0,0,0,0.1); border-left: 7px solid transparent; margin:0 0 20px; overflow: hidden; padding-left: 70px; padding-left: calc(70px + 6%); width: 100% }
.lang li:before { position: absolute; left: 10px; left: calc(10px + 3%); top: 16px;}
.lang li:hover { background-color: rgba(0,0,0,0.03); border-left: 7px solid var(--first-brand-color);	 }

.lang li a,
.open-mini { margin: 1rem 0; text-decoration: none;  font-weight: bold; padding: 0.5em;display: flex; align-items: center;}
.lang li a:before,
.open-mini:before { background: var(--button-color); border-radius: 100%; color: var(--button-text); content: "\2023"; display: inline-block; font-size: 2em; height: 0.8em;  line-height: 0.75;   text-align: center;  width: 0.8em; margin-right: 0.2rem;}
.lang li a:hover:before,
.open-mini:hover:before { background: var(--button-hover); }

.lang li::before { content: ""; margin-right: 8px; background: center center no-repeat; width: 40px !important; height: 40px !important; overflow: hidden; border-radius: 50%; }

.lang .en::before { background-image: url(https://storage.wowcast.co/libs/images/flags/uk.png); } 
.lang .fr::before { background-image: url(https://storage.wowcast.co/libs/images/flags/fr.png); } 
.lang .it::before { background-image: url(https://storage.wowcast.co/libs/images/flags/it.png); } 
.lang .de::before { background-image: url(https://storage.wowcast.co/libs/images/flags/de.png); } 
.lang .es::before { background-image: url(https://storage.wowcast.co/libs/images/flags/es.png); } 
.lang .pt::before { background-image: url(https://storage.wowcast.co/libs/images/flags/pt.png); } 
.lang .tr::before { background-image: url(https://storage.wowcast.co/libs/images/flags/tk.png); } 
.lang .pl::before { background-image: url(https://storage.wowcast.co/libs/images/flags/pl.png); }

/* Langs player template */
.lang-selector { padding: 0.5rem 0; font-size: 0.8rem; 	text-align: right }
.lang-selector select { display: inline-block; padding: 0.6rem;  width:auto }

/* System test link */
a[alt*="System-test"] { color: var(--text-color); font-size: 0.75rem; }
a[alt*="System-test"]:hover { color: var(--text-color); opacity: 0.8; }
.a-system-test a::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	overflow: hidden;
	vertical-align: -0.2em;
	background: url(https://storage.wowcast.co/libs/images/ico-system-test.png) center center no-repeat;
	background-size: cover;
	opacity: 0.7;
	filter: alpha(opacity=70);
	margin-right: 0.5em;
}

/* Aviso cookies ECG */
/* Cookies layer */
#cookieLayer, #ECGcookieLayer { position: fixed; display: flex; flex-direction: column; justify-content: flex-end; z-index: 99999; margin: 0; padding: 1%; top: 0; width: 100%; height: 100%; overflow-y: auto; background-color: rgba(0, 0, 0, 0.3);  }
#cookieLayer div, #ECGcookieLayer div { background-color: var(--background-color); margin: 0; padding: 0; font-size: 90%; color: var(--text-color); text-align: right; display: block; }
#cookieLayer div p, #ECGcookieLayer div p { margin: 0; padding: 3%; text-align: justify; }
#cookieLayer div a, #ECGcookieLayer div a { display: inline-block; text-decoration: none; color: var(--text-color); }
#cookieLayer div a, #ECGcookieLayer div a:not(.btn-sm) { font-weight: bold; }
#cookieLayer div a.btn-sm, #ECGcookieLayer div a.btn-sm { background-color: var(--text-color); color: var(--background-color); border: 1px solid var(--text-color); padding: 0.6vw 2vw; margin: 0 3% 3% 0; display: inline-block; border-radius: 3px; }
#cookieLayer div a.btn-sm.reverse, #ECGcookieLayer div a.btn-sm.reverse { background-color: var(--background-color); color: var(--text-color); }
#cookieLayer div a:hover, #ECGcookieLayer div a:hover { opacity: 0.8; }