/* Branding */

:root {
	--brand-secondary-color: #00CCFF;
	--brand-secondary-color-rgb: 102,102,102;
	--brand-main-color: #007CB0;
	--brand-main-color-rgb: 100,130,170;
}

/* Branding */

.mt0 {
	margin-top: 0px
}

.mt10 {
	margin-top: 10px
}

.mt20 {
	margin-top: 20px
}

.mt30 {
	margin-top: 30px
}

.mt40 {
	margin-top: 40px
}

.mt50 {
	margin-top: 50px
}

.mt60 {
	margin-top: 60px
}

.mt70 {
	margin-top: 70px
}

.mt80 {
	margin-top: 80px
}

.mt90 {
	margin-top: 90px
}

.mt100 {
	margin-top: 100px
}

.mb0 {
	margin-bottom: 0px
}

.mb10 {
	margin-bottom: 10px
}

.mb20 {
	margin-bottom: 20px
}

.mb30 {
	margin-bottom: 30px
}

.mb40 {
	margin-bottom: 40px
}

.mb50 {
	margin-bottom: 50px
}

.mb60 {
	margin-bottom: 60px
}

.mb70 {
	margin-bottom: 70px
}

.mb80 {
	margin-bottom: 80px
}

.mb90 {
	margin-bottom: 90px
}

.mb100 {
	margin-bottom: 100px
}

.pt0 {
	padding-top: 0px
}

.pt10 {
	padding-top: 10px
}

.pt20 {
	padding-top: 20px
}

.pt30 {
	padding-top: 30px
}

.pt40 {
	padding-top: 40px
}

.pt50 {
	padding-top: 50px
}

.pt60 {
	padding-top: 60px
}

.pt70 {
	padding-top: 70px
}

.pt80 {
	padding-top: 80px
}

.pt90 {
	padding-top: 90px
}

.pt100 {
	padding-top: 100px
}

.pb0 {
	padding-bottom: 0px
}

.pb10 {
	padding-bottom: 10px
}

.pb20 {
	padding-bottom: 20px
}

.pb30 {
	padding-bottom: 30px
}

.pb40 {
	padding-bottom: 40px
}

.pb50 {
	padding-bottom: 50px
}

.pb60 {
	padding-bottom: 60px
}

.pb70 {
	padding-bottom: 70px
}

.pb80 {
	padding-bottom: 80px
}

.pb90 {
	padding-bottom: 90px
}

.pb100 {
	padding-bottom: 100px
}

.ml0 {
	margin-left: 0px
}

.ml5 {
	margin-left: 5px
}

.ml10 {
	margin-left: 10px
}

.ml20 {
	margin-left: 20px
}

.ml30 {
	margin-left: 30px
}

.ml40 {
	margin-left: 40px
}

.ml50 {
	margin-left: 50px
}

.mr0 {
	margin-right: 0px
}

.mr5 {
	margin-right: 5px
}

.mr10 {
	margin-right: 10px
}

.mr20 {
	margin-right: 20px
}

.mr30 {
	margin-right: 30px
}

.mr40 {
	margin-right: 40px
}

.mr50 {
	margin-right: 50px
}

a:active, a:focus {
	outline: none;
}

:focus {
	outline: none !important;
}

body {
	font-family: 'Muli', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: #8A98AC;
	line-height: 1.3;
	background: #ffffff;
}

a {
	color: var(--brand-main-color);
	opacity: 0.8;
	transition: opacity .2s;
}

	a:hover {
		color: var(--brand-main-color);
		opacity: 1.0;
		transition: opacity .2s;
	}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Muli', sans-serif;
	color: var(--brand-main-color);
	font-weight: 700;
	text-transform: uppercase;
}

	h2 span,
	h3 span,
	h4 span {
		font-size: 75%;
		text-transform: none;
	}

header,
main,
footer {
	padding: 20px;
}

header {
	background: #FFF;
}

footer {
	background: #FFF;
}

header {
	position: relative;
}

	header img {
		max-width: 300px;
	}

.feather {
	color: var(--brand-main-color);
}

div.session-info,
div.video {
	padding: 20px;
	background: #fff;
	margin-bottom: 20px;
}

.slido {
	border: 1px solid #f2f2f2;
}

.tab-pane,
div.speaker-info {
	margin-top: 20px;
}

div.speaker-info {
	margin-bottom: 20px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	color: var(--brand-main-color);
}

.nav-tabs .nav-link {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.widgetbar {
	display: inline;
	float: right;
	text-align: right;
}

.btn {
	border-radius: 3px;
	font-size: 14px;
	padding: 6px 12px;
}

.btn-primary {
	background-color: var(--brand-main-color);
	border: none;
	color: #fff;
	box-shadow: none;
	opacity: 1.0;
	transition: opacity .3s;
}

	.btn-primary:hover,
	.btn-primary:focus,
	.btn-primary:active {
		background-color: var(--brand-main-color);
		border: none;
		color: #fff;
		opacity: 0.7;
		box-shadow: none;
	}

.btn-secondary {
	background-color: var(--brand-secondary-color);
	border: none;
	color: #fff;
	box-shadow: none;
	opacity: 1.0;
	transition: opacity .3s;
}

	.btn-secondary:hover,
	.btn-secondary:focus,
	.btn-secondary:active {
		background-color: var(--brand-secondary-color);
		border: none;
		color: #fff;
		opacity: 0.7;
		box-shadow: none;
	}

.btn-success {
	background-color: var(--brand-main-color);
	border-color: var(--brand-main-color);
}

	.btn-success:hover {
		color: #fff;
		background-color: var(--brand-secondary-color);
		border-color: var(--brand-secondary-color);
	}

.btn-primary .feather,
.btn-secondary .feather {
	color: #fff;
}

.table.dataTable {
	border-spacing: 0;
}

.dataTables_wrapper {
	padding: 0 !important;
}

.table {
	margin-bottom: 10px;
	color: #263a5b;
}

	.table th {
		font-size: 14px;
		font-weight: 600;
		text-transform: capitalize;
		border-top: 1px solid rgba(0, 0, 0, 0.03);
		padding: 0.7rem;
	}

	.table td {
		color: #8A98AC;
		vertical-align: middle;
		border-top: 1px solid rgba(0, 0, 0, 0.03);
		padding: 0.6rem;
	}

	.table thead th {
		vertical-align: bottom;
		border-bottom: 2px solid rgba(0, 0, 0, 0.03);
	}

	.table .thead-light th {
		color: #282828;
		background-color: #d4d8de;
		border-color: rgba(0, 0, 0, 0.03);
	}

	.table .thead-dark th {
		color: #ffffff;
		background-color: #263a5b;
		border-color: rgba(0, 0, 0, 0.03);
	}

.table-bordered {
	border: 1px solid rgba(0, 0, 0, 0.03);
	border-top: none;
	border-bottom: none;
}

	.table-bordered th {
		border: 1px solid rgba(0, 0, 0, 0.03);
	}

	.table-bordered td {
		border: 1px solid rgba(0, 0, 0, 0.03);
	}

.table-hover tbody tr:hover {
	color: #282828;
	background-color: #d4d8de;
}

.thead-default th {
	background-color: #d4d8de;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before {
	background-color: #0080ff;
	border: none;
	box-shadow: none;
	height: 18px;
	width: 18px;
	line-height: 18px;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
	background-color: #0080ff;
	border: none;
	box-shadow: none;
	height: 18px;
	width: 18px;
	line-height: 18px;
}

.page-link {
	color: var(--brand-main-color);
	opacity: 0.7;
	transition: opacity .2s;
}

	.page-link:hover {
		color: var(--brand-main-color);
		background-color: #fff;
		border-color: #dee2e6;
	}

.page-item.active .page-link {
	background-color: var(--brand-main-color);
	border-color: var(--brand-main-color);
}

.modal-header {
	background-color: var(--brand-main-color);
	border: 1px solid var(--brand-main-color);
	color: #fff;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.modal-title {
	color: #ffffff;
	font-size: 18px;
}

.modal-header .close {
	color: #ffffff;
}

a.open-bio {
	color: var(--brand-main-color);
	font-weight: 600;
}

	a.open-bio:hover {
		cursor: pointer;
	}

.panel {
	background-color: #fff;
}

.panel-button {
	border-color: #ddd;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.176);
	margin: 60px 0;
	border-radius: 0;
}

	.panel-button .panel-body {
		border-bottom: 5px solid var(--brand-main-color);
		transition: all 0.1s;
	}

		.panel-button .panel-body:hover,
		.panel-button .panel-body:active,
		.panel-button .panel-body:focus {
			background: var(--brand-main-color);
			color: #fff;
		}

.pb-icon {
	background: #fff none repeat scroll 0 0;
	border: 1px solid #ddd;
	border-radius: 90px;
	color: var(--brand-main-color);
	height: 90px;
	margin: -60px auto 20px;
	padding-top: 15px;
	text-align: center;
	width: 90px;
}

.button-heading {
	font-weight: bold;
	margin: 0;
	text-transform: uppercase;
}

.button-subtitle {
	font-weight: bold;
	margin-top: 20px;
}

.welcome main {
	margin: 15px 0px;
}

.hero {
	background: #ffffff;
	margin-top: -30px;
	box-shadow: inset 0px 30px 0px 0px #ffffff, inset 0px -30px 0px 0px #ffffff;
	border: none;
}

	.hero h1 {
		font-weight: 800;
	}

		.hero h1 span {
			font-weight: 400;
		}

	.hero h5 {
		color: #fff;
	}

.img-hero {
	max-height: 400px;
}

.img-head {
	max-width: 100%;
}

.login main {
	background: url('/cmPortal/content/cmportal/ec15/images/buttons/virtual-congress-bg.jpg');
	background-size: cover;
	background-position: 50% 50%;
}

.img-login {
	max-height: 150px;
	margin: 15px auto;
}

.login .row-max {
	min-height: calc(100vh - 205px);
}

.welcome .card {
	overflow: hidden;
	margin-bottom: 30px;
	min-height: 94%;
}

.welcome .card-img-top {
	background: #fff;
	padding: 25px 15px 5px 15px;
	transition: all .2s ease;
}

.welcome a:hover .card-img-top {
	padding: 15px 15px 15px 15px;
}

.welcome .card-body {
	position: relative;
	padding: 0px 1.25rem 1.25rem 1.25rem;
}

	.welcome .card-body::after {
		-webkit-transition-duration: 500ms;
		transition-duration: 500ms;
		position: absolute;
		width: 250%;
		height: 500px;
		top: -120px;
		left: 0;
		content: '';
		background-color: var(--brand-main-color);
		-webkit-transform: rotate(-15deg);
		transform: rotate(-15deg);
	}

.welcome .card-body-inner {
	position: relative;
	z-index: 9;
	color: #fff;
	text-align: right;
}

	.welcome .card-body-inner h5 {
		color: #fff;
		font-size: 150%;
	}

.jq-toast-wrap.bottom-right {
	bottom: 20px;
	right: 20px;
}

.jq-has-icon {
	padding: 15px 15px 15px 55px;
}

.jq-icon-info {
	background-color: var(--brand-main-color);
	color: #fff;
	border-color: var(--brand-main-color);
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}

	.jq-icon-info a:hover {
		color: #fff;
	}

.jq-toast-loader {
	background-color: var(--brand-secondary-color) !important;
}



/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	main {
		padding: 20px 0px;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: 110%;
	}

	.hero {
		margin-top: 0px;
		box-shadow: none;
		padding: 0px 0px;
	}

	.img-head {
		display: none;
	}
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}

.logoutbutton {
	background-color: #00CCFF;
	border: none;
	color: #fff;
	box-shadow: none;
	opacity: 1.0;
	transition: opacity .3s;
	border-radius: 3px;
	font-size: 14px;
	padding: 6px 12px;
}

.btn {
	background-color: #007CB0;
	border: none;
	color: #fff;
	box-shadow: none;
	opacity: 1.0;
	transition: opacity .3s;
	border-radius: 3px;
	font-size: 14px;
	padding: 6px 12px;
}


.logoutbutton:hover {
	color: #fff;
}
.widgetbar button:hover {
	color: #fff;
}
.loginname {
	padding: 6px 12px;
	color: #346464;
}

#logoutForm {
	float: right;
	margin: 5px;
}
.btn {
	margin-bottom: 10px;
}




.cmvirtualportal-loader {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}

	.cmvirtualportal-loader div {
		display: inline-block;
		position: absolute;
		left: 8px;
		width: 16px;
		background: #007CB0;
		animation: cmvirtualportal-loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
	}

		.cmvirtualportal-loader div:nth-child(1) {
			left: 8px;
			animation-delay: -0.24s;
		}

		.cmvirtualportal-loader div:nth-child(2) {
			left: 32px;
			animation-delay: -0.12s;
		}

		.cmvirtualportal-loader div:nth-child(3) {
			left: 56px;
			animation-delay: 0;
		}

@keyframes cmvirtualportal-loader {
	0% {
		top: 8px;
		height: 64px;
	}

	50%, 100% {
		top: 24px;
		height: 32px;
	}
}

