/* body background now being dictated by app/Resources/views/theme/theme.css.twig
body {
    background-color: #fafafa;
}
*/
/* =========================================================== */
/* NAVIGATION OVERWRITES */
/* =========================================================== */

nav[role="navigation"] {
	position: relative;
	height: 0px !important;
    /*padding: .3rem 0 4.8rem 0;*/
}

nav[role="navigation"] a {
	color: #002878;
}

nav .nav-wrapper.container {
    position: relative;
    height: 100%;
	width: 100%;
	max-width: none;
    z-index: 1000;
    padding: 0 4%;
    background-color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}


#logo-container {
    max-height: 64px;
    max-width: 250px;
}

nav.nav-breadcrumb {
	border-radius: 4px;
	padding: 0 1.2rem;
	height: 50px;
	line-height: 50px;
	margin-top:14px;
}

nav.nav-breadcrumb .nav-wrapper i {
	height: 50px;
	line-height: 50px;
}

div.col.l12.m5.s12.card-panel.site-info-panel {
	padding-top:7px;
}

.brand-logo img {
	max-height: 64px !important;
	max-width: 300px;
    vertical-align: middle;
    margin-top: -7px;
    padding:5px;
}

nav[role="navigation"] ul#slide-out {
	/*padding:21px 0 0 0;*/
    z-index: 999;
	top: 0;
    bottom: 0;
    /*width: auto !important;*/
	max-width:240px;
	height: 100%;
	box-shadow:none;
	background-color: #fff;
	/*margin: 78px 0 0 0;*/
    margin: 0;
    padding: 78px 0 0 0;
}

.side-nav {
	width: 250px !important;
	margin-top: 64px;
}

nav#nav-top ul#slide-out {
	padding:21px 0 0 4rem;
	top: inherit;
	height: auto;
	box-shadow:none;
	background-color: #fff;
	margin: -66px 0 0 0;
}

li.side-nav-sub.side-nav-sub-active a{
	line-height: 1.25;
}

#slide-out li a {
	height: auto;
}

.side-nav-sub a {
    margin-left: 38px;
	line-height: 30px;
}

.side-nav-sub {
	display: none;
    height: 30px;
}

.side-nav-sub-active {
	display: block;
	color: #002878;
	margin-top: .75rem;
}

.side-nav.fixed a:hover,
nav ul a:hover i.material-icons,
nav#nav-top ul li a:hover,
.side-nav.fixed a:hover,
nav ul a:hover i.fa,
nav#nav-top ul li a:hover {
	color: #002878;
}

ul#main-nav.right li a i:hover {
	transition: color .4s;
}
ul#main-nav.right li a i:hover {
	color: #44a5f6;
}

.side-nav li {
    float: left;
	width:100%;
}

.side-nav li > a > i {
    float: left;
    line-height: 48px;
    margin: 0 28px 0 0;
    width: 0px;
    color: rgba(0, 0, 0, 0.54);
}


.side-nav li > a > [class^="mdi-"],
.side-nav li > a > [class*="mdi-"],
.side-nav li > a > i.material-icons {
    margin: 0 21px 0 0;
    width: 40px;
}

nav .button-collapse {
	position: absolute;
    z-index: 1;
    height: 56px;
    right: 0;
}

nav#nav-top {
	background-color: #fff;
	margin: 3px 0 0 0;
	box-shadow: none;
}

nav#nav-top ul a {
    padding: 0 48px;
	color: #4d4e53;
}

nav#nav-top[role="navigation"] a {
    color: #4d4e53;
}

#setting-nav {
	margin-top: 7px;
}

nav ul a {
    padding: 0 7px;
}
nav ul a:hover {
    background-color:transparent;
}

@media only screen and (max-width: 1200px) {
ul#slide-out {
	margin-top: 77px;
}
}

@media only screen and (min-width: 993px) {
div#sidenav-overlay {
	display:none;
}
}

@media only screen and (max-width: 992px) {
nav .brand-logo {
    left: 38%;
    transform: translateX(-62%);
}
.side-nav.fixed {
    transform: translateX(-40%);
}
.side-nav-sub {
    display: block;
}
}

@media only screen and (max-width: 600px) {
nav#nav-top ul#slide-out {
	margin: -58px 0 0 0;
}
}

@media only screen and (max-width: 550px) {
.brand-logo img {
	max-width: 255px;
}
}

@media only screen and (max-width: 500px) {
.brand-logo img {
	max-width: 230px;
}
}

@media only screen and (max-width: 465px) {
nav ul a {
    padding: 0 5px;
}
}

@media only screen and (max-width: 375px) {
nav ul a {
    padding: 0 4px;
}
.brand-logo img {
	max-width: 180px;
}
}

#setting-nav-fab {
	display:none;
	padding-top:3px;
	padding-right: 6px;
}
#setting-nav-full {
	display:block;
	padding-top:7px;
}
@media only screen and (max-width: 992px) {
#setting-nav-fab {
	display:block;
}
#setting-nav-full {
	display:none;
}
}

.header-welcome{
	margin-right: 50px;
	display: inline-block;
}

.alert-badge:after{
	content: "" !important;
}

.alert-badge{
	border-radius: 50% !important;
	min-width: 0px !important;
	width: 18px !important;
	height: 18px !important;
	line-height: 18px !important;
	position:absolute !important;
	padding: 0px !important;
	margin: 0px !important;
}

.webui-popover {
	max-width: 60%;
}

.webui-popover .alert {
	border-bottom: none;
}

.text-small {
	font-size: 0.8rem;
}

/* =========================================================== */
/* BUTTON/ICON OVERWRITES */
/* =========================================================== */

.btn, .btn-large, .btn-flat {
    border-radius: 5px;
	/*padding: 0.69rem 1.69rem;
	font-size: 0.9rem;
	line-height: 1.09rem;
	height: auto;*/
}
.btn-floating i {
    font-size: 1.4rem;
}

a.btn-floating {
    margin: 0 2px;
}

#btn-settings.fixed-action-btn.horizontal,
#btn-settings.fixed-action-btn.horizontal a.btn-floating {
    position: relative; 
    padding-top: 15px;
    z-index: 998;
	border-radius: 50%;
	width: 40.5px;
    height: 40.5px;
}
.btn:hover, .btn-large:hover, .btn-floating:hover {
    box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
}

@media only screen and (max-width: 992px) {
	#btn-settings.fixed-action-btn.horizontal,
	#btn-settings.fixed-action-btn.horizontal a.btn-floating {
		position: relative;
		padding: 15px 15px 0;
		z-index: 998;
		border-radius: 50%;
		width: 40.5px;
		height: 40.5px;
		margin: 0 20px 0 0;
	}

	.btn-floating.btn-large i {
		line-height: 3rem !important;
		font-size: 2rem !important;
		position: absolute;
		top: 0;
		left: 0;
	}

	.btn-floating.btn-large:hover i {
		color: rgba(255,255,255,0.7) !important;
		transition: 0.3s;
	}
}

.btn-floating.btn-large i {
    line-height: 12.5px;
	font-size:1.75rem;
}
.btn-floating.btn-large:hover i {
    line-height: 12.5px;
	font-size:1.75rem;
	color: #fff;
}

#btn-settings.fixed-action-btn.horizontal ul {
    text-align: right;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    left: auto;
    width: 110px;
	margin-right: 5px;
}

.fixed-action-btn.horizontal ul li {
    margin: 15px 0px 0 0;
}

@media only screen and (max-width: 600px) {
.fixed-action-btn.horizontal ul li {
    margin: 15px 0px 0 0;
}
#btn-settings.fixed-action-btn.horizontal ul {
    width: 156px;
}
}

@media only screen and (max-width: 480px) {
#btn-settings.fixed-action-btn.horizontal ul {
    width: 145px;
}
}

@media only screen and (max-width: 465px) {
div#btn-settings.fixed-action-btn.horizontal.click-to-toggle.active ul {
	background-color: white;
    padding: 31px 0 32px 32px;
    width: 160px;
    height: 100px;
	transition: width .5s, padding-left .6s;
}
}


/* =========================================================== */
/* TABLE OVERWRITES */
/* =========================================================== */

table.table tr {
	border-bottom: 1px dotted gainsboro;
}
table {
	margin-bottom: 21px;
}

/* =========================================================== */
/* FORM CLASSES/OVERWRITES */
/* =========================================================== */

/*.input-field.required label::after {
	content: '*' !important;
	color: red;
	font-weight: bold;
}*/

.btn-bar .btn {
	margin-right: 2px;
	margin-left: 2px;
}


/* =========================================================== */
/* MISC CLASSES/OVERWRITES */
/* =========================================================== */

div.container[role="main"] {
	min-height: 550px;
	max-width: none;
	margin: 0 0 0 10px;
	padding: 64px 0 0 245px;
	width: 99%;
}

@media only screen and (max-width: 992px) {
	div.container[role="main"] {
		min-height: 550px;
		max-width: none;
		margin: 0;
		padding: 64px 5%;
		width: 100%;
	}
}

.form-buttons {
	margin-top: 2em;
}

.challenge-leaderboards-wrapper {
    margin-bottom: 50px;
}

/* =========================================================== */
/* Validation Classes for jQuery Validation Plugin
/* =========================================================== */
span.invalid{
	color: red;
}

/* =========================================================== */
/* Message/Toast Classes
/* =========================================================== */
.error, .danger{
	background-color: #e53935;
	color: white;
}

.warning{
	background-color: #fdd835;
	color: white;
}

.success{
	background-color: #43a047;
	color: white;
}

.info{
	background-color: #1e88e5;
	color: white;
}
.alert{
    padding: 12px;
    margin-bottom: 12px;
	outline: none;
}

/* =========================================================== */
/* Help Block
/* =========================================================== */
.help-block{
	font-size: 0.9em;
	color: darkgray;
}
.help-block-dark{
	font-size: 0.9em;
	color: #4e4f51;
}

/* =========================================================== */
/* Without this space, Chips clump together
/* into a blob when there are multiple rows
/* =========================================================== */
.chip{
	margin-bottom: 5px;
}

/* =========================================================== */
/* Simple popup
/* =========================================================== */
.white-popup {
	position: relative;
	background: #FFF;
	padding: 10px 20px 5px 20px;
	width: auto;
	max-width: 800px;
    min-width: 300px;
	margin: 20px auto;
	border-radius: 1px;
	z-index: 10002 !important;
}

.white-popup.lg {
	max-width: 1200px !important;
	min-width: 300px !important;
}

.white-popup.sm {
	max-width: 500px;
	min-width: 300px;
}

/* increase the z-index for magnific popup - otherwise the popover has a higher z-index and overlays it */
.mfp-bg {
	z-index: 10000 !important;
}

.mfp-wrap {
	z-index: 10001 !important;
}

.mfp-container, .mfp-content {
	z-index: 10002 !important;
	overflow: auto;
}

/* =========================================================== */
/* Basic Widget CSS
/* =========================================================== */
.widget, .custom-widget{
	height:100%;
	width:100%;
	overflow:hidden;
	padding:5px;
}

.custom-content{
	height:100%;
	/*overflow-y: hidden !important;*/
	width:100%;
}

.widget-preview-container{
	height:100%;
	width:100%;
}

/* =========================================================== */
/* MISC CSS
/* =========================================================== */
.color-square {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid #000;
 }
 
.colors-list ul li {
    display: inline-block;
    position: relative;
    margin: 12px;
}
 
.colors-list ul li input {
    display: inline-block;
    border: none;
    margin: 0 0 15px 0;
    padding: 0 0 0 26px;
    width: 100px;
    height: 20px !important;
    line-height: 15px !important;
    line-height: 40px !important;
    padding-top: 4px !important;
    padding-bottom: 8px !important;
}

.colors-list ul li input:focus {
    border: none !important;
}

.colors-list ul li .color-square {
    position: absolute;
    top: 6px;
    left: 6px;
    border-radius: 0 !important;
    width: 15px;
    height: 15px;
    cursor: move;
}

input.field-color.dragging {
    border: 1px dashed #ccc;
}

.campaign-info {
	position: relative;
}

.campaign-points {
	position: absolute;
}

/* =========================================================== */
/* Wrapper for embedly responsive videos
/* =========================================================== */
.responsive-object iframe {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.responsive-object {
	height:100%;
	overflow: hidden;
}

/* =========================================================== */
/* fa-none for placeholder icon at same dimensions
/* =========================================================== */
.fa-none:before {
	content: "\f060";
    visibility: hidden;
}

.side-nav li > a > i.fa-none {
	margin: 0;
	width: 28px;
}

/* =========================================================== */
/* FOOTER OVERWRITES
/* =========================================================== */
.text-footer {
	font-size: .9rem;
	margin-top: .7rem;
}
.hdr-footer {
	font-size: 1.5rem;
}
.page-footer {
	padding-bottom: 1rem;
	border-top: 2px solid #44a5f6;
}

.member-footer {
	z-index: 1000;
	padding-bottom: 1rem;
	border: none;
	margin: 0;
	padding: 0;
}

footer.page-footer {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 24px;
    min-height: 100px;
}

footer.page-footer .container {
	width: 96%;
	max-width: none;
}

/*body {
	display: flex;
	flex-direction: column;
}*/

html, body{
	height: 100%;
}

div.container[role="main"] {
	flex: 1 0 auto;
}


/* =========================================================== */
/* HEADER OVERWRITES
/* =========================================================== */
h1 {
	font-size: 2.5rem;
	color: #4d4e53;
}

h2 {
	font-size: 2rem;
	color: #012168;
}

h3 {
	font-size: 1.75rem;
	color: #012168;
}

h4 {
	font-size: 1.5rem;
	color: #333333;
}

h5 {
	font-size: 1.25rem;
	color: #636363;
}

h6 {
	font-size: 1.1rem;
	color: #929292;
}

/* OpenTok errors or plugin install prompt for IE appears in this...
   if we don't increase the z-index, it will be hidden behind the modal dialog the video lives in*/
.OT_ModalDialog {
	z-index: 20002 !important;
}

/** ANIMATION EFFECTS **/
.shaking {
	animation-name: shake-chunk;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 9
}

.shaking:hover {
	animation: none;
}

@keyframes shake-chunk {
	2% {
		transform: translate(2px, 6px) rotate(0deg)
	}

	4% {
		transform: translate(5px, -3px) rotate(0deg)
	}

	6% {
		transform: translate(-1px, -4px) rotate(2deg)
	}

	8% {
		transform: translate(-5px, 6px) rotate(12deg)
	}

	10% {
		transform: translate(-1px, 5px) rotate(-8deg)
	}

	12% {
		transform: translate(-4px, 2px) rotate(-8deg)
	}

	14% {
		transform: translate(4px, -2px) rotate(10deg)
	}

	16% {
		transform: translate(6px, -3px) rotate(12deg)
	}

	18% {
		transform: translate(6px, -1px) rotate(7deg)
	}

	20% {
		transform: translate(2px, 3px) rotate(7deg)
	}

	22% {
		transform: translate(5px, 1px) rotate(11deg)
	}

	24% {
		transform: translate(1px, -3px) rotate(-14deg)
	}

	26% {
		transform: translate(2px, 6px) rotate(8deg)
	}

	28% {
		transform: translate(-4px, -2px) rotate(-11deg)
	}

	30% {
		transform: translate(1px, 5px) rotate(-8deg)
	}

	32% {
		transform: translate(-2px, -6px) rotate(14deg)
	}

	34% {
		transform: translate(0px, 4px) rotate(5deg)
	}

	36% {
		transform: translate(1px, -4px) rotate(1deg)
	}

	38% {
		transform: translate(-6px, -2px) rotate(6deg)
	}
	40% {
		transform: translate(0px, 0px) rotate(0deg)
	}
}