html
{
	height: 100%;
	position: relative;	
	min-height: 100vh;
	//overflow-y: scroll; 
}

body
{
	font:500 16px/26px Roboto,sans-serif;
	color: #55595c;	
	background:#f2f2f2;	
	letter-spacing: .0142857143em;
	//overflow-y: scroll;
}

/*
body.modal-open {
    overflow: auto;
}

/*logo section*/

.loginLogo
{
	height:100px;
}

.divLoginLogoutRegistration 
{
	margin:0 auto;
	max-width:400px;
	width:100%;
	background-color:#ffffff;
	padding-left:50px; 
	padding-right:50px; 
	margin-top:10%;
}

/*no to glitch*/
.tooltip {
  pointer-events: none;
}

.form-control-login 
{
  border: 1px solid #e6e9ec !important;
}

/*end logo section*/

/*man section */
#mainSection 
{
	padding-top: 10%;	
	width: 80%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

/*utils : hideClass*/
.hideClass
{
	display:none;
}

/*btn scroll to top*/
#scroll-to-top 
{
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  padding: 10px;
  border: none;
  background-color: #6c757d;
  color: #fff;
  cursor: pointer;
}

#scroll-to-top:hover 
{
  background-color: #007bff;
}
/*btn scroll to top end*/

/*scroll loader for infinite scroll*/
#scrollLoader  
{
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 4;
	margin: -75px 0 0 -75px;
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #3498db;
	width: 80px;
	height: 80px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin 
{
	0%   { -webkit-transform: rotate(0deg);}
	100% { -webkit-transform: rotate(360deg);}
}

@keyframes spin 
{
	0%   { transform: rotate(0deg);}
	100% { transform: rotate(360deg);}
}
/*end scroll loader for infinite scroll*/


/* MLM tree vertical*/

.isOverFlow
{
	position: relative;
    //overflow: hidden;
	overflow-x: scroll;
	overflow-y: scroll;		
}

.treeVertical
{
	text-align: left !important;
	font-family: Roboto;
	font-size: 13px; 
}

.treeVertical, .treeVertical ul {
    margin:0;
    padding:0;
    list-style:none;
}
.treeVertical ul {
    margin-left:1em;
    position:relative
}
.treeVertical ul ul {
    margin-left:.5em
}
.treeVertical ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid #ddd;
}
.treeVertical li {
    margin:0;
    padding:0 1em;
    line-height:2em;
    color:#369;
    position:relative
}
.treeVertical ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid #ddd;
    margin-top:-1px;
    position:absolute;
    top:1em;
    left:0
}
.treeVertical ul li:last-child:before {
    background:#fff;
    height:auto;
    top:1em;
    bottom:0
}
.indicator {
    margin-right:5px;
}
.treeVertical li a {
    text-decoration: none;
    color:#369;
}
.treeVertical li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    color:#369;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}
/* end MLM tree vertical*/


/* MLM tree */

.tree 
{
	margin: 0; padding: 0;
	margin-left: auto;
	margin-right: auto;
}

.tree .ulCentered
{
	display: inline-block;
	text-align: left;
	margin-left: auto;
	margin-right: auto;	
}


.tree ul {
	padding-top: 20px; position: relative;	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;	
	display: flex;
	overflow-x: auto;	
}

.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	overflow: hidden;
}

/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #ccc;
	width: 50%; height: 20px;
}
.tree li::after{
	right: auto; left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 20px;
}

.tree li a{
	border: 1px solid #ccc;
	padding: 0.5rem;
	text-decoration: none;
	color: #666;
	font-family: Roboto;
	font-size: 11px;
	display: inline-block;
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
	border-color:  #94a0b4;
}
/* end MLM tree */


/*format datepicker*/
.datepicker 
{
    font-size: 0.875em;
}
/*end format datepicker*/


/*floating label*/
.has-float-label
{
	display:block; 
	position:relative;
	color:#C0C0C0!important;
}
.has-float-label label,.has-float-label>span
{
	position:absolute;
	cursor:text;
	font-weight: 500;	
	font-size:75%;
	opacity:1;
	-webkit-transition:all .2s;transition:all .2s;top:-.6em;left:.75rem;z-index:3;line-height:1;padding:0 1px;
	color:#708eaa;!important;
}
.has-float-label label::after,.has-float-label>span::after
{
	content:" ";display:block;position:absolute;background:#fff;height:3px;top:50%;left:-.2em;right:-.2em;z-index:-1
}
.has-float-label .form-control::-webkit-input-placeholder
{
	opacity:1;-webkit-transition:all .2s;transition:all .2s
}
.has-float-label .form-control:disabled
{
	background-color: #f1f1f1;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder
{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus)+*
{
	font-size:100%;
	opacity:.5;
	top:.9em;
}

.has-float-label .form-control:focus
{
	border-color: #e6e9ec;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/*end floating label*/


.form-control-for-select 
{
    border: 1px solid #e5e5e5;
	box-shadow:none;
	outline: medium none;
	height: 45px !important;
}

.form-control-for-select:focus 
{
	outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important; 
  background-color: #fefefe;
  border-color: #e5e5e5;
}
 

/*upload input file*/

/*no browse on custom file upload*/
.custom-file-label::after 
{
    padding:0;
    content:"";
}

.custom-file-label
{
	border:0px;
}


/*end upload input file*/


/*error form validation*/
.label-danger 
{
    font-size:80%;
    color:#dc3545;
}

/*no image for invalid*/
.form-control.is-invalid, .was-validated .form-control:invalid 
{
	background-image: none;
}

.is-invalid
{
	font-size: 0.8rem !important;	
    color:#dc3545;	
	background-image: none;
}
/*end error form validation*/

/*utils : display error in login & registry forms*/
.help-block 
{
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #dc3545;
}

/*form details*/
#formDetails {
  padding: 5px 20px 0px 20px;
  margin: 1rem !important;
  border-radius: 6px;
  border-collapse: separate;
}

/*alert header*/
.alertHeader {
  font-size: 18px;
  font-weight: 500;
  color: #666c71;
  background-color: #e9ebee;
  border-color: #e5e5e5;
  margin-bottom: 0rem;
  border-radius: 0.25rem 0.25rem 0rem 0rem;
  border: 0px;
  text-align: justify;
  text-justify: inter-word;
}

/*increase padding*/
.form-control {
  border: 1px solid #ffffff;
  box-shadow: none;
  outline: medium none;
  padding: 1.3rem .75rem;
}

/*nav bar*/

.navbar 
{
	font:400 16px/26px Roboto,sans-serif;
	min-height: 50px;	
	transition: top 0.5s ease;
}

.navbar-hide 
{
	top: -120px;
}

.navbar-collapse 
{
  max-height: 500px;
  overflow-y: inherit; 
}

.navbar.close 
{
    display: none;
}	

.navbar-light 
{
    color: #777777;
	border-color: #e7e7e7;	
	border-bottom: 1px solid #e9e9e9;	
}

.navbar-light .navbar-nav .nav-link
{
	color: #495057;	
}	

.navbar-logo 
{
  color: #003865 !important;
}

.navbar-brand 
{
  padding: 0 15px;
  font-weight: bold;
}

.activeNavLink 
{
  color: #1976d2 !important;
  background: #e7e7e7 !important;
  padding: 1.0rem !important;
}

.navbarNav li a:active, .navbar li a:focus
{
  text-decoration: none; 
  background: #e7e7e7!important; 
  color: #1976d2!important;
}

.navbar-expand-lg .navbar-nav .nav-link 
{
    padding:1.0rem;
}

.activeNavLink 
{ 
	color: #1976d2!important;
	background: #e7e7e7!important; 
}

.dropdown-item
{
  line-height: 40px!important;
}
/*end nav bar*/


/* modals */

.modal 
{
  overflow: auto !important;
}

.modal-lg 
{
  max-width: 900px;
}

.modal-content {
  background-color: #f2f2f2;
  border-radius: 10px;
}

.modal-header {
  border-bottom: 0px solid #dee2e6;
}

.modal-body {
  word-wrap: break-word;
}

.modalTitle 
{
	font: 700 24px/30px Roboto,sans-serif;
}

.listTitle 
{
	font: 700 24px/30px Roboto,sans-serif;
}

#modalDetails 
{
	padding: 25px 20px 0px 20px;
	border-radius: 6px;
	border-collapse: separate;
}
/* end modals */

/*table*/
table td 
{
	vertical-align: middle !important;
	color: #617585;
}

table th 
{
	text-align:center !important;
	font-weight:500;
}
.table-bordered>thead>tr>th,.table-bordered
{
	border-bottom-width:0px;
}	

.table tbody tr:hover td, .table tbody tr:hover th 
{
	background-color: #F9F9F9;
}
/*end table*/

/*autocomplete search*/
#search
{
	color: #909090;
	width: 170px;
	border:0px;	
	border-radius: 5px 5px 5px 5px;
	-webkit-transition: all 0.7s ease 0s;
	-moz-transition: all 0.7s ease 0s;
	transition: all 0.7s ease 0s;
	background-color:#F0F0F0;
}

#search:focus 
{
	width: 250px;
	-webkit-box-shadow: none;
	box-shadow: none;	
	background-color:#F0F0F0;
}

.has-search .form-control 
{
	padding-left: 2.375rem;
}

.has-search .form-control-feedback 
{
	position: absolute;
	z-index: 2;
	display: block;
	width: 2.375rem;
	height: 2.375rem;
	line-height: 2.375rem;
	text-align: center;
	pointer-events: none;
	color: #aaa;
	border: 1px;
}		
		
#resetSuggest
{
	border-left:0px;
	background-color:#F0F0F0;
	border-left:0px;
	border:0px;
}
.btn-outline-group 
{
	border-color: #ced4da;
}	
	
/* end autocomplete search*/

/* a href */
a{text-decoration:none}				
a:hover{text-decoration:none;}	
a:focus{text-decoration:none;outline:none}
a:hover,a:focus{text-decoration:none}	

/* end a href */

/*string format*/
.pageTitle 
{
  font-size: 1.4rem; 
  font-weight: 500;
  line-height: 1.7;
}
.title
{
    font: 600 18px/32px Roboto,sans-serif;
}	
.fontAwesomeForSocial 
{
  font-size: 1.4em;
}

.isRowTextBigger600
{
	font-weight: 600;
	font-size: 1.05rem;	
	letter-spacing: 0.06rem;
}

.isText1Rem 
{
  font-size: 1.0rem;
}

.isInfo 
{
  font-weight: 500;
  font-size: 0.8rem;
}

.isInfoLighter {
  font-weight: 400;
  font-size: 0.8rem;
}
/*end string format*/


/* breadcrumb */
.breadcrumbNav {
  font-size: 80%;
  font-weight: 400;
  background-color: #e9ebee !important;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f105";
    font-weight: 900;
}
/* end  breadcrumb */


/*string color*/
.textBlueFacebook{color:#3b5998}
.textBlueGoogle{color:#1976d2}
.textAzure{color: #708eaa}
.textIndigo{color:rgb(12,108,242)}
.textGreen{color:rgb(40,167,69)}
.textOrange{color:#fd7e14}
.textOrangeDark{color:#e65d17}
.textTeal{color:#20c997}
.textCyan{color:#17a2b8}
.textBrownish{color:#86121d}
.textBluish{color:#5c87ae}
.textElectricCrimson{color:#ff003}
.textRedSafe{color:#d50000}
.textMutedGray{color:#cfd4d9}
.textMutedGrayBluish{color:#bcc1c6;}
	
/*btn*/
.btn-outline-btn1{color:#1976d2;background-color:#e9ebee;background-image:none;border-color:#e5e5e5;font-weight: bold;}
.btn-outline-btn1:hover{color:#1976d2;background-color:#d0d0d0;}
.btn-outline-btn1.focus,.btn-outline-btn1:focus{color:#1976d2;background-color:#d0d0d0;box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}
.btn-outline-btn1.disabled,.btn-outline-btn1:disabled{color:#6c757d;background-color:transparent}
.btn-outline-btn1:not(:disabled):not(.disabled).active,.btn-outline-btn1:not(:disabled):not(.disabled):active,.show>.btn-outline-btn1.dropdown-toggle{color:#fff;background-color:#6c757d;border-color:#6c757d}
.btn-outline-btn1:not(:disabled):not(.disabled).active:focus,.btn-outline-btn1:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-btn1.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}
.btn-outline-btn2{color:#4285f4;;background-color:transparent;background-image:none;border-color:#e5e5e5;font-weight: bold;}
.btn-outline-btn2:hover{color:#4285f4;;background-color:#d0d0d0;}
.btn-outline-btn2.focus,.btn-outline-btn2:focus{color:#1976d2;background-color:#d0d0d0;box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}
.btn-outline-btn2.disabled,.btn-outline-btn1:disabled{color:#6c757d;background-color:transparent}
.btn-outline-btn2:not(:disabled):not(.disabled).active,.btn-outline-btn1:not(:disabled):not(.disabled):active,.show>.btn-outline-btn1.dropdown-toggle{color:#fff;background-color:#6c757d;border-color:#6c757d}
.btn-outline-btn2:not(:disabled):not(.disabled).active:focus,.btn-outline-btn2:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-btn1.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}
.btn-deep-orange{background-color: #ff7043 !important;color: #fff;}
.btn-outline-deep-orange{border: 2px solid #ff7043 !important;background-color: transparent !important;color: #ff7043 !important;}
.btn-pink{background-color: #ec407a !important; color: #fff;}
.btn-outline-pink{border: 2px solid #ec407a !important;background-color: transparent !important;color: #ec407a !important;}
.btn-magenta{background-color: #ff3547 !important; color: #fff;}
.btn-outline-magenta {border: 2px solid #ff3547 !important;background-color: transparent !important;color: #ff3547 !important;}
.btn-space{margin-right:2px;}			
.btn-space5px{margin-right:5px;}

/*end btn*/

/*input class format*/
.input-upper{text-transform:uppercase;}
.input-lower{text-transform:lowercase;}
.input-capitalize{text-transform:capitalize;}

/*placeholder color*/
::placeholder {color: #C0C0C0!important;opacity: 1;}
:-ms-input-placeholder {color:#C0C0C0!important;}
::-ms-input-placeholder{color:#C0C0C0!important;}

/*do not alter placeholder with uppercase*/
input::placeholder{text-transform:none;}




@media (max-width:768px)
{
	.container , .container-fluid
	{
		max-width     : 768px;
		padding-right : 0px;
		padding-left  : 0px;		
	}	
	
	.row
	{
		margin-right: 2px;
		margin-left: 2px;			
	}

	.modal-dialog
	{
		margin : 0px;
	}	
	
	#modalDetails
	{
		padding: 0px !important;
		margin: 0rem !important;			
	}
	
	#formDetails
	{
		padding-right : 0px;
		padding-left  : 0px;
		margin: 0rem !important;		
	}

	#modalLevelsSubtitle
	{
	  font-size: 80%;
	}

	#btnRefresh
	{
	  display: none;
	}

	#socialBar
	{
	  display: none;
	}

	#btnToggleNetwork	
	{
		border-radius: .25rem;
	}
	
}