@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body 
{ 
	background: green;
	background: #469941 url('../images/esl_24_bg.png') top left repeat-y; 
	background-size: cover;
	font-family: 'Ubuntu', sans-serif; 
	height: 100vh;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

header, nav, section, footer
{
	background: transparent;
	max-width: 1400px;
	padding: 0;
}

header {
	margin-top: 0;
	max-width: 100vw;
	width: 100%;
	height: 150px;
	background-color: #00000083;
}

nav {
    margin-top: 0;
    max-width: 100vw;
    width: 100%;
    background-color: #00000083;
    height: 150px;
}
nav ul {
    height: 100%;
    max-width: 1400px;
    width: 90%;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav ul .links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    flex-grow: 1;
    padding-left: 3rem;
    text-align: center;
}

.btn-nav { border: 2px solid #fff; padding: 10px!important; border-radius: 15px; }
.btn-nav:hover {text-decoration: none; }

nav ul .links li a { color: #fff; padding: 0 1rem; }
nav ul li a:hover { background: none; text-decoration: underline; }

section.stream 
{ 
	gap: 1rem;
	display: grid; 
	grid-auto-rows: 1fr; 
	grid-template-columns: auto 360px; 
}

section.stream aside iframe { border: 0; }

section.interp 
{ 
	gap: 1rem;
	display: grid; 
	grid-auto-rows: 1fr; 
	grid-template-columns: auto 360px; 
}

p { font-family: "Open Sans", serif; }

/* Mobile */

@media screen and (max-width: 800px)
{
	section.stream  { display: block !important; }
	section.stream aside iframe { display: block !important; height: 400px !important; }
	aside { margin-top: 1.5rem; }
	section.interp { grid-template-columns: 1fr!important; }
	
	/* Nav */
	nav { height: auto; }
	nav ul {
        /* flex-direction: column; */
		column-gap: 20px;
		flex-wrap: wrap;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	
	nav ul div img { width: 200px; height: auto; }
	#fsmLogo { width: 100px; height: auto; }
	
	nav ul .links {
		font-size: 12px;
		padding-left: 0.5rem;
		justify-content: flex-end;
	}
	
	
	.stage-name {
		white-space: normal!important;
		font-size: 16px!important;
		width: 100%;
	}
	
	.session-title { flex-direction: column; justify-content: flex-start; }
	
	.session-title h2 {
		width: 100%; 
		text-align: left;
		font-size: 18px!important;
	}
	
	.card-left { flex-direction: column; gap: 10px; }
	.card-middle { width: 90%!important; padding-left: 10px!important; }
	.session-description { font-size: 14px!important;}
	.card-right { display: none; }
	
	div.login h1 { font-size: 18px!important; }
	
	button.filter { margin: 0.2rem 0; }
}

@media screen and (max-width: 400px) {
	nav ul { flex-direction: column; }
}


/* ETL */
.w-1180 { max-width: 1180px; }
iframe { border-radius: 15px; }

/* From local */

div.video iframe {  border-radius: 15px; }

div.description p { padding: 1rem; }

section.sessions { border-radius: 15px; background-color: transparent; text-align: left; padding-bottom: 1.5rem; }
.session-section {
    background-color: white;
    border-radius: 15px;
    /* width: 100%; */
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* margin: 20px auto; */
    text-align: left;
}
.session-title { display: flex; align-items: flex-start; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.session-title h2 {
    /* text-decoration: underline; */
    /* text-decoration-color: #07194F; */
    margin: 0;
    font-size: 22px;
    flex: 1; 
    min-width: 0;
    line-height: 1.4;
}
.stage-name { font-size: 18px; color: #555; white-space: nowrap; margin-top: -0.5rem; }
.session-description { font-size: 16px; color: #333; }

.sessionCards { 
	height: 600px;
	overflow-y: scroll;
	scrollbar-width: none;
    -ms-overflow-style: none;
}

.sessionCards::-webkit-scrollbar { display: none; }

.styled-input:focus { outline: 2px solid #469941; }
.styled-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 15px;
    background-color: white;
    text-align: center;
    font-size: 16px;
    z-index: 1;
    margin-bottom: 1rem;
}


/* Session cards  */

a { text-decoration: none; }
a .card { text-decoration: none; }
.card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    min-height: 150px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 0.5rem auto;
    background-color: #fff;
    z-index: 0;
}

.card-left { display: flex; align-items: center; }
.card-middle { padding-left: 20px; width: 80%; text-decoration: none; }
.card-middle h2 { margin: 0; font-size: 18px; text-decoration: none!important; color: #000; }
.card-middle p { margin: 5px 0 0; font-size: 14px; color: #555; text-decoration: none;  }
.card-right { margin-left: auto; padding-left: 10px; }
#speakers { display: none; }

/* Pigeon hole */
.iframe-wrap { border: none!important; }

/* Added last minute to fix login page */

form { margin-bottom: 2rem; }
form fieldset { background: white !important; border: none!important; padding: 0; }
form dl { margin: 0.4rem 0; padding: 0; }
form dl dt { margin: 0; padding: 0; }
form dl dd { margin: 0; padding: 0; }

form dl#optIn { display: flex; justify-content: center; width: 100%; }
form dl dd input#optInCheckbox { margin-right: 10px; }


form input.loginBtn { padding: 0.8rem 1.2rem; background:  #C70F2E; color: #fff; border-radius: 15px; border: 2px solid #fff; font-size: 16px; cursor: pointer;}

div.login {
	background: #fff;
	border-radius: 15px;
	padding: 0.4rem 0;
}
div.login h1 {color: #000; font-size: 22px; }

.login-ondemand-flex { display: flex; justify-content:center; align-items:center; gap: 20px; flex-wrap: wrap; }

a#tcsLink { font-size: 12px; color:#001D46; }


/* Filter search btns */

button.filter {
	background: #fff;
	color: #000;
	border-radius: 15px;
	padding: 0.6rem 0.8rem;
	cursor: pointer;
/*	margin: 0.6rem 0;*/
}

button.filter.active { background: #008048; color: #fff; }