/* by Karen Zhou */

/*
=======================
GENERAL NOTES
=======================
Most Root variable declarations are in lsi_web2.css
*/

:root {
	--orange: #DD8E66;
	--dark_dark_blue: #223885;
	--light_purple: #D1CEF3;
	--light_orange: #F9CAAE;
	--light_blue: #92E5ED;
	--light_teal: #C1ECF0;

	--dark_teal: #0C5C6E;
	--dark_blue: #10416E;
	--dark_purple: #5F3373;
}

.material-icons-round {
	font-size: 1.2rem !important;
    vertical-align: text-top;
}

/*
=====================================================================================================================================================
WEBINAR BANNER
=====================================================================================================================================================
*/



/*
=====================================================================================================================================================
CONTAINER
=====================================================================================================================================================
*/
.web-container{
	/*display: flex;
	gap: 2rem;
	justify-content: center;*/
	min-height: var(--faux_page_height);
	padding: var(--faux_page_padding);
	/*background-image: url("/images/illustrations/laptop3.svg");*/
	background-repeat: no-repeat;
	background-position: center top;
	background-color: var(--lsi_blue);
	background-size: 110%;
}
/*
=====================================================================================================================================================
WEBINAR
=====================================================================================================================================================
*/
.web{
	flex: 1;
	margin-bottom: 4rem;
}
.web-pic{
	height: 70px;
}
.web-pic img{
	display: block;
	height: 100%;
}
.web-desc{
	padding: 1rem 0;
	/*text-align: center;*/
	/*background-color: var(--darken);*/
}
.web-desc h2{
	margin-bottom: 0.5rem;
	font-family: var(--decorative_font_family);
	font-weight: 600;
	font-size: 2rem;
	color: var(--white);
}
.web-desc sup{
	font-size: 0.8rem;
	vertical-align: super;
}
.web-desc p{
	margin-bottom: 0.3rem;
	font-family: var(--copy_font_family);
	font-weight: var(--copy_font_weight);
	color: var(--white);
}

/*
SCHEDULE -------------------------------------------------------------------------------
*/

.web-register {
	border-radius: 0 0 var(--rounded) var(--rounded);
}
#net-webinars .web-register{
	/*background-color: var(--darken);*/
}
#pi-webinars .web-register{
	background-color: var(--dark_blue);
}
#sof-webinars .web-register{
	background-color: var(--dark_purple);
}

.web-schedule{
	padding-left: 1rem;
	border-left: solid var(--white) 2px;
}
.web-schedule p{
	margin: 1rem 0 0.2rem 0;
	text-align: center;
	font-family: var(--copy_font_family);
	font-weight: var(--copy_font-weight);
	color: var(--white);
}
.web-table{
	display: table;
	border-collapse: separate;
	border-spacing: 0 10px;
	width: 100%;
}
.web-time{
	display: table-row;
	background-color: var(--lsi_blue);
}
.web-time:hover{
	outline: 2px solid var(--light_green);
}
.web-time h4{
	display: table-cell;
	vertical-align: middle;
	width: 150px !important;
	padding: 1rem;
	background-color: var(--darken);
	font-family: var(--decorative_font_family);
	font-weight: 800;
	font-size: 1rem;
	color: var(--white);
	text-transform: uppercase;
}
.web-links{
	display: table-cell;
	height: inherit !important;
}
.web-links a{
	display: block;
	height: 100% !important;
	padding: 0.5rem 1rem;
	text-align: left;
	font-family: var(--decorative_font_family);
	font-weight: 600;
	transition-duration: var(--hover-transition-time);
}
.web-links a:link, .web-time a:visited{
	color: var(--white);
}
.web-links a:hover, .web-time a:active{
	padding-left: 2rem;
	background-color: var(--light_green);
	text-decoration: none;
	color: var(--black);
}
.web-links a:focus {
	padding-left: 2rem;
	background-color: var(--light_green);
	text-decoration: none;
	color: var(--black);
}
.slot1{
	background-color: rgba(0,0,0,0.3);
}
.slot2{
	background-color: rgba(0,0,0,0.2);
}
.slot3{
	background-color: rgba(0,0,0,0.1);
}