.banned{color:red !important;}
.red{background:#d9534f; border: none;}
.blue{background:#337ab7; border: none;}
.lightblue{background:#5bc0de; border: none;}
.yellow{background:#f0ad4e; border: none;}
.green{ background:#95c41f; border: none; }
.round{ border-radius: 500rem; }
.fluid{ width: 100%; margin: 5px 0;}

.button.big{
	font-size: 15px !important;
	padding: 10px 30px;
}

.modalOpen{
	position: fixed;
	overflow: hidden;
	width: 100%;
}

.copyBtn{
	display: inline-block;
	color: white;
	margin-left: 10px;
    background: #f0ad4e;
	border:none;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

#canvas{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 20002; display: none; overflow-x: hidden;}
#lightcanvas{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: none; overflow-x: hidden;}
#backcanvas{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #222; z-index: 1; display: block; overflow-x: hidden;}
#globalAlert{border-top: 1px solid rgba(221, 221, 221, 0.2); display:none; position: fixed; z-index:20001; bottom:0; left:0; width: 100%; background:rgba(234, 75, 64, 1); box-sizing: border-box;}
#globalAlertInner{ position: relative; display: flex; align-items: center;}
#globalAlert p{
	margin: 0;
	padding: 10px;
	margin-left:0;
	margin-right: auto;
	width: calc(100vw - 70px);
	box-sizing: border-box;
	color: white !important;
	font-size: 20px;
}
#globalAlert span{
	box-sizing: border-box;
	display: block;
	margin-left: auto;
	margin-right: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	cursor: pointer;
	width: 70px;
	height: 60px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 348.333 348.334'%3E%3Cpath d='M336.559 68.611L231.016 174.165l105.543 105.549c15.699 15.705 15.699 41.145 0 56.85-7.844 7.844-18.128 11.769-28.407 11.769-10.296 0-20.581-3.919-28.419-11.769L174.167 231.003 68.609 336.563c-7.843 7.844-18.128 11.769-28.416 11.769-10.285 0-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139 0-56.85l105.54-105.549L11.774 68.611c-15.699-15.699-15.699-41.145 0-56.844 15.696-15.687 41.127-15.687 56.829 0l105.563 105.554L279.721 11.767c15.705-15.687 41.139-15.687 56.832 0 15.705 15.699 15.705 41.145.006 56.844z' fill='%23FFF'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
	color: white;
}

#msgBox{
	background: #d9edf7;
	border: 1px solid #bcdff1;
	color: #31708f;
	border-radius: 4px;
	margin-bottom: 20px;
	padding: 10px;
	box-sizing: border-box;
	margin-top: 30px;
}

.left{float: left;}
.right{float: right;}
.clear{clear: both;}
.clearfix:after{display: block; content:''; clear:both;}

#page-content{
	min-height: calc(100vh - 230px);
}
select:focus, input:focus, button:focus{outline:none !important;}
select{
	width: 100%;
	height: 40px;
	display: block;
}
input[type="submit"]{
	border: none;
}

form .form-row.last{
	margin-bottom: 0;
}

#accountForm label, #passwordForm label{
	display: block;
}
#loginLogo, #signupLogo{
	display: block;
	width: 350px;
	max-width: 100%;
	margin: 0 auto;
	padding-top: 50px;
}
#signupLogo{
	padding-top:0;
}
.signupLogoText{
	display: inline-block;
	margin: 0 auto;
	margin-bottom: 50px;
}
#loginWidget, #signupWidget{
	width: 500px;
	max-width: 100%;
	margin: 30px auto;
	padding: 50px 30px;
	box-sizing: border-box;
	background: white;
}

@media all and (max-width: 499px){
	#loginWidget, #signupWidget{
		margin:0;
		left:0;
		width: 96% !important;
		margin-left: 2%;
	}
}

.flexWrap{
	display: flex;
	width: 100%;
	align-items: center;
}

.tableBtn{ margin: 5px; padding: 7px 15px; font-size: 12px !important;}
.tableWrapperSpecial{
	overflow-x: auto;
	margin-bottom: 30px;
}
.tableWrapperSpecial .row{
	margin: 0 !important;
}

table{ margin:0; padding:0; width: 100% !important; /*min-width: 800px !important;*/ }
table th, table td{ font-size: 12px !important; line-height: 1.4; }
table p{ margin: 0; font-size: 12px !important; padding: 0; line-height: 1.4;}
table ul p{ display: inline-block; }

#modalWrapper{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index:20000;
	display: none;
}
#modalWrapperInner{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0 20px;
	box-sizing: border-box;
	overflow-y: auto;
}
form.modal{
	width: 500px;
	max-width: 100%;
	background: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 30px;
	box-sizing: border-box;
	margin: 0 auto;
	margin-top: 100px;
	margin-bottom: 30px;
	display: none;
	position: relative !important;
	border: 1px solid #006064;
}
form.modal.big{
	width: 600px;
}
form.modal.large{
	width: 700px;
}

.modalFlex{
	display: flex;
	flex-wrap: wrap;
}
.modalFlexItem{
	width: calc(33.3% - 10px);
	flex: 0 1 calc(33.3% - 10px);
	margin: 0 5px;
	margin-bottom: 20px;
}
@media all and (max-width: 599px){
	.modalFlexItem{
		width: 100%;
		flex: 0 1 100%;
		margin: 0;
		margin-bottom: 20px;
	}
	.modalFlexItem br{
		display: none;
	}
}
span.exploreBtn{
	display: inline-block;
	background: #5bc0de;
	color: white;
	border: 1px solid #46b8da;
	padding: 0;
	width: 15px;
	height: 15px;
	font-weight: bold !important;
	font-size: 15px !important;
	line-height: 12px;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	box-sizing: border-box;
}
span.triangle:after{
	padding-right: 3px;
}
span.triangle.no:after{
	display: inline;
	content:'▶';
	color: transparent !important;
	cursor: pointer;
	font-size: 10px;
}
span.triangle.closed:after{
	display: inline;
	content:'▶';
	color: white !important;
	cursor: pointer;
	font-size: 10px;
}
span.triangle.open:after{
	display: inline;
	content:'▼';
	color: white !important;
	cursor: pointer;
	font-size: 12px;
}

.disclosure{ text-align: center; padding: 10px 0 50px 0;}
.disclosure p{ font-size: 20px !important; }
.disclosure span{display: block; font-size: 14px; font-weight: bold; padding-top: 5px; margin-bottom: 50px;}
.disclosure img{ display: block; margin: 0; padding: 0; max-width: 100%; margin: 0 auto; }

.imageUpload{
	position: relative;
	width: 280px;
	max-width: 100%;
	height: 40px;
	overflow: hidden;
	cursor: pointer;
}
.imageUpload input{
	opacity: 0;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
}
.imageUploadBtn{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: white;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
	font-size: 18px;
	font-weight: bold;
}
img.avatar{
	display: block;
	max-width: 100%;
}
.avatarBackground{
	display: block !important;
	margin: 0 auto;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.avatarBackground.big{
	margin-bottom: 0;
	width: 150px;
	height: 150px;
}
.avatarBackground.medium{
	margin-bottom: 0;
	width: 100px;
	height: 100px;
}
.avatarBackground.small{
	margin-bottom: 0;
	display: inline-block;
	cursor: pointer;
}

.flexWrapSub{
	display: flex;
	align-items: center;
}
.flexImage{ width: 50%; margin-bottom: 30px;}
.flexText{ width:70%; text-align: left;}
.flexText p{ margin:0; font-style: italic; padding:0; box-sizing: border-box; font-size: 16px;}
.flexText#onRight p{padding-left: 30px;}
.flexText#onLeft p{padding-right: 30px;}

@media all and (max-width: 537px){
	.flexWrapSub{
		display: block !important;
	}
	.flexImage{
		width: 100%;
		margin: 50px 0;
	}
	.flexText{ width: 100%; }
	.flexText p{
		padding: 0 !important;
	}
}
.promoteItem{
	padding: 0 15px;
	box-sizing: border-box;
}
.promoteItem a{
	display: block;
	width: 100%;
	position: relative;
	overflow: hidden;
	margin-bottom: 15px;
	-webkit-box-shadow: 0px 1px 14px -2px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 1px 14px -2px rgba(0,0,0,0.75);
	box-shadow: 0px 1px 14px -2px rgba(0,0,0,0.75);
}
.promoteItem span{
	text-transform: uppercase;
	font-weight: bold;
}
.promoteItem a img{
	display: block;
	width: 100%;
	margin: 0 auto;
}

.flexModalWrap{ display: flex; align-items: center; }
.flexModalItem {width:50%; text-align: center; padding: 0 10px; box-sizing: border-box;}
.flexModalItem button{ display: block; margin: 10px auto; width:100%;}

@media all and (max-width: 737px){
	.flexModalWrap{ display: block; }
	.flexModalItem{ width: 100%; }
}

@media all and (max-width: 737px){
	.dataTables_wrapper > .row:first-child{
		display: none;
	}
}

div.dataTables_wrapper .paginate_button.active a{
	background-color: #006064;
}

.submit-btn-1{ border: none !important; }
.footer-bottom{background: transparent;}
.section-title-2 h2 span{
	display: block;
	font-weight: 300;
	font-size: 18px;
	padding-top: 5px;
}

.company-info{
	padding-top: 60px;
}
@media (max-width: 767px){
	.container{
		width: 100% !important;
	}
}

.ui-state-default, .ui-widget-content .ui-state-default{
	color: white !important;
}

#scrollDown{
	top: 70px;
    color: #ffffff;
    right: 3%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
}

.Treant { position: relative; overflow: hidden; padding: 0 !important; }
.Treant > .node,
.Treant > .pseudo { position: absolute; display: block; visibility: hidden; }
.Treant.Treant-loaded .node,
.Treant.Treant-loaded .pseudo { visibility: visible; }
.Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; }
.Treant .collapse-switch { width: 3px; height: 3px; z-index: 1; display: block; border: 1px solid black; position: absolute; top: 1px; right: 1px; cursor: pointer; }
.Treant .collapsed .collapse-switch { background-color: #868DEE; }
.Treant > .node img {	border: none; float: left; }

#userTreeWrap{width: 1024px; margin: 50px auto; max-width: 100%;}
#userTree { width: 1024px;}
@media all and (max-width: 1023px){
	#userTreeWrap{
		overflow-x: auto;
	}
}

#myleader_announcements{
	margin-bottom: 30px;
}
#myleader_announcements ul, #leader_announcements ul, #announcements ul{
	width: 100%;
	margin: 0;
	padding: 0;
	margin-top: 30px;
	border: 1px solid #efefef;
	padding: 20px;
	box-sizing: border-box;
	max-height: 200px;
	overflow-y: auto;
	border-radius: 7px;
}

#myleader_announcements ul p, #leader_announcements ul p, #announcements ul p{
	color: black;
	word-break: break-all;
}

#myleader_announcements ul p span, #leader_announcements ul p span, #announcements ul p span{
	font-style: italic;
}

.Treant > .node { padding: 7px; border: 1px solid #484848; border-radius: 3px; text-align: center;}
.Treant > .node.color_tier1{ background: #5c78de !important; }
.Treant .node.color_tier2{ background: #7cabe4 !important; }
.Treant .node.color_tier3{ background: #9dd2eb !important; }
.Treant .node.color_tier4{ background: #beedf2 !important; }
.Treant .node.color_tier5{ background: #def8f9 !important; }

.Treant > .node img { width: 100%; height: 100%; }

.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
.Treant .node.collapsed { background-color: #efefef; }
.Treant .node.collapsed .collapse-switch { background: none; }

.Treant > .node p{margin-bottom: 0; text-align: center; color: black; line-height: 1.1}
.Treant > .node .node-name{ display:inline-block; font-size: 14px; font-weight: 400; white-space: nowrap; position: relative; z-index: 2; cursor: pointer;}
.Treant > .node .node-name:hover{ text-decoration: underline; }
.Treant > .node .node-title{ font-size: 12px; padding-top: 5px; white-space: nowrap;}
/* CUSTOM STYLE FOR TREANT NODE*/
.Treant > .node{
	width: 140px;
	text-transform: lowercase;
	}
	
.node-name:first-letter {
	    text-transform: uppercase;
    }

	.navy-bg {
		background: #4a4c80;
	}

	.yellow-bg {
		background: #f6eb84;
	}

	.blue-bg {
		background: #4d95dd;
	}

	.white-text {
		color: white;
	}

	.gray {
		color: rgb(75,75,75);
	}