/*GENERAL*/
body{
	background-image: url('images/casino-background.png');
	background-size: cover;
	background-attachment: fixed;
}
#content{
	padding: 0 5% 0 5%;
}
.grisby_btn{color: white !important;}
.grisby_btn:active{color: grey !important;}
.grisby_btn:hover{color: grey !important;}
.disconnect_btn{color: red !important;}
.disconnect_btn:hover{color: white !important;}
.feedback_btn{color: white !important;}
.feedback_btn:hover{color: grey !important;}
.bizzdata_btn{color: #299944 !important;}
.bizzdata_btn:hover{color: white !important;}
a:visited {
    text-decoration-color: none;
}
h1{
	color: white;
}
.white_titles{
	color: white;
}
.table-dark{
	background-color: rgba(0, 0, 0, 0.7) !important;
}

/*CONNEXION*/
#logo_home{
}
#connexion_form{
	margin: 10% auto 0 auto;
	padding: auto;
	width: 400px;
}

/*HOME*/
#home_header{
	margin: 20px 0 0 0;
	height: 100px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/*border: 1px solid red;*/
}
#home_stats{
	display: flex;
	flex-direction: row;
	align-items: center;
	/*border: 1px solid green;*/
	background-color: #ececec;
	padding: 0 10px 0 10px;
	border-radius: 10px;
}
#home_score{
	font-size: 30px;
	font-weight: bold;
	border-radius: 10px;
	/*border: 1px solid blue;*/
	margin: 0 20px 0 0;
	padding: 10px;
}
#home_score_msg{
	font-size: 15px;
	border-radius: 10px;
	margin-top: 10px;
	/*border: 1px solid blue;*/
}
.home_cards_icons{
	width: 40px;
	height: 40px;
	transition: all 0.3s;
	margin-top: -15px;
}
.home_cards_icons:hover{
	box-shadow: 0px 0px 25px gold;
	background-color: rgba(255,215,0,0.4);
}
#home_cards{
	border-radius: 10px;
	padding: 10px 20px 10px 20px;
	background-color: #ececec;
}
#home_cards p{
	font-weight: bold;
}
#home_cards_icons{
	font-size: 30px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
#home_cards_icons>*{
	transition: all 0.3s;
}
#home_cards_club:hover{color: black}
#home_cards_diamond:hover{color: red;}
#home_cards_heart:hover{color: black;}
#home_cards_spade:hover{color: red;}

#home_table{
	margin: 20px 0 0 0;
}

.user_modal_btn{
	color: white;
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
}
.user_modal_btn:hover{
	color: #007bff;
}
.pipe_status_box{
	width: 25px;
	height: 25px;
	text-align: center;
	border: 1px solid pink;
	background-color: grey;
	display: inline-block;
}
.pipe_status_box_0{width:125px;background-color: red}
.pipe_status_box_1{background-color: #fd8008}
.pipe_status_box_2{background-color: #f9de27}
.pipe_status_box_3{background-color: #60d836}
.pipe_status_box_4{background-color: #1cb000}
.pipe_status_box_5{background-color: #017000}

.tooltip_icones {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip_icones .tooltiptext_icones {
  visibility: hidden;
  z-index: 1000;
  width: 150px;
  font-size: 12px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  width: 150px;
  top: 100%;
  left: 50%;
  margin-left: -60px; 
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip_icones:hover .tooltiptext_icones {
  visibility: visible;
}

.copyContactInfoBtn{
	font-size:25px;
}
.copyContactInfoBtn:hover{
	color: blue;
	cursor: pointer;
}




/*DASHBOARD*/
#picModal{
	width: 200px;
	height: 200px;
	border-radius: 200px;
}
.badge-sin{
  background: linear-gradient(297deg,#af6e22,#f3de70,#af6e22);
  background-size: 120% 120%;
  animation: gradient-animation 1s ease infinite;
  padding: 2px 4px;
  font-weight: bold;
  border-radius: 5px;
}
.badge-casino{
  background: linear-gradient(297deg,#7a140c,#fc6f65,#7a140c);
  background-size: 120% 120%;
  animation: gradient-animation 1s ease infinite;
  padding: 2px 4px;
  font-weight: bold;
  border-radius: 5px;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}
/*DASHBOARD*/






/*STATS*/
#stats_charts{
	border-radius: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: rgba(255,255,255,0.5);
}

#barChart_div{
	width:50%;
}

#donutChart_div{
	width: 30%;
}


/*.stats_table_ico_col{width: 10px !important;}
.stats_table_bar_col{width: 50%;}
.stats_table_member_col{width: 20%;}
.stats_table_see_col{width: 10px;}

.stats_table_pig_ico{
	color: gold;
}
.stats_table_eye{
	color: white;
}
.stats_table_eye:hover{
	color: lightblue;
}*/


/*ANNUAIRE*/
.directory_section{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.directory_left{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.directory_subscription{
/*	background-color: white;*/
	color: black;
	border-radius: 100px;
	width: 10%	;
	text-align: center;
	margin: 10px auto 0 auto;
	padding: 0 auto 0 auto;
}
.directory_card{
	display: flex;
	flex-direction: row;
	background-color: rgba(0,0,0,0.5);
	margin: 10px;
	padding: 10px 20px;
	align-items: center;
	width: 400px;
	max-width: 400px;
	border-radius: 20px;
	color: white;
}
.directory_img{
	width: 100px;
	height: 100px;
	border-radius: 100%;
	margin: 0 20px 0 10px;
}
.directory_name{
	font-weight: bold;
	font-size: 20px;
	margin: 0;
}
.directory_company{
	font-weight: bold;
	margin: 0;
}
.directory_activity{
	margin: 0;
}
/*ANNUAIRE*/







/*MON COMPTE*/
#account_section{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 20px 0 0 0;
}
#account_pic{
	width: 300px;
	height: 300px;
	min-width: 300px;
	min-height: 300px;
	border-radius: 100%;
	background-size: cover;
	background-position: center;
	margin: 0 50px 0 0;
}
#account_infos{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;@
}

.account_infos_rows{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	min-width: 400px;
	flex-wrap: wrap;
}
.account_infos_cols{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border: 1px solid red;
	min-width: 300px;
	margin: 20px 20px 0 0;
	padding: 10px 20px 10px 20px;
	background-color: #fcfcfc;
	border: 1px solid #ababab;
	border-radius: 10px;	
}
.photo_picker{
	border-radius: 5px;
	background-color: white;
	padding: 5px;
}

/*EDIT PAGES*/
#edit_infos_btn{
	margin: 20px 0 0 0px;
}
.edit_pwd_cols{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border: 1px solid red;
	max-width: 500px;
	margin: 20px 20px 0 0;
	padding: 10px 20px 10px 20px;
	background-color: #fcfcfc;
	border: 1px solid #ababab;
	border-radius: 10px;
}

@media only screen and (max-width: 1000px){
	/*GENERAL*/
	#content{
		padding: 0 5% 0 5%;
	}
}

@media only screen and (max-width: 600px){
	/*GENERAL*/
	#content{
		padding: 0;
	}
}

/*ADMIN*/
.user_pic{
	height: 30px;
	width: 30px;
	border-radius: 100px;
}

.user_podium{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.user_crowned{
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 200px;
	align-items: center;
}
.user_crown{
	width: 200px;
	z-index: 1;
}
.user_pic_crown{
	width: 200px;
	border-radius: 100px;
	position: relative;
	top: -20px;
}
.user_crowned_badge{
	background-color: red;
	border-radius: 5px;
	padding: 5px 30px;
	font-weight: bold;
	font-size: 20px;
}
/*ADMIN*/