:root {
  --accent-color: #00d3b3;
  --bs-primary: var(--accent-color);
  --light:#001d20;
  --dark:#001517;
  --blue:#00d3b3;
  --yellow:#deff00;
  --bs-dark: var(--bs-dark);
  --box-shadow: 4px 9px 16px #060f1735;
	--bs-body-font-size:1.15rem;
	--mauve-color: #d499fc;
	--bleu-color: #3b13b1;
	--bleu-clair-color: #1cf0f0  ;
	
}

::-moz-selection {
  /* Code for Firefox */
  color: #fff;
  background: var(--accent-color);
}

::selection {
  color: #fff;
  background: var(--accent-color);
}
.sun {max-width: 130px; width: 100%;}
.img_logo {max-width: 40px;}
.banner_desktop{
	background-image: url('/sites/mystalia/images/banner-desktop.webp');
	background-size: cover;
	background-repeat: no-repeat;
}
.banner_desktop_free{
	background-image: url('/sites/mystalia/images/banner-desktop.webp');
	background-size: cover;
	background-repeat: no-repeat;
}
.banner_desktop_chat{
	background-image: url('/sites/mystalia/images/banner-desktop.webp');
	background-size: cover;
	background-repeat: no-repeat;
}
.banner_desktop_love{
	background-image: url('/sites/mystalia/images/banner-desktop-love.webp');
	background-size: cover;
	background-repeat: no-repeat;
}
.banner_desktop_astro{
	background-image: url('/sites/mystalia/images/banner-desktop.webp');
	background-size: cover;
	background-repeat: no-repeat;
}
.banner_desktop_tarot{
	background-image: url('/sites/mystalia/images/banner-desktop.webp');
	background-size: cover;
	background-repeat: no-repeat;
}
.banner_mobile{display: none;}
.mobile_only {display: none;}
#img_hamburger {display: none;}
.user_img{width: 100%;}
.header_btn {
	display: flex; 
	text-align: right;  
	margin-left:auto;
}
.cell_voyant {
	border:none;
	background-color: #FFFFFF;
	border-radius: 10px;
	padding: 10px;
	margin: 0;
}
.chatencours {
	border:solid;
	border-color: var(--bleu-color);
	border-width: 1px;
}

.voyant_desc{
	white-space: normal; 
	text-align: justify;
	font-size: 16px;
	color: #000000;
	line-height: 10px;
}
.voyant_note{font-size: 18px;}
.voyant_star{width: 100px;}
.voyant_titre {
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	text-transform: capitalize;
}
.voyant_titre:hover {
	text-decoration: underline;
}
.voyant_dispo {
	padding: 3px 10px;
	background-color: #00FF00;
	border-radius: 5px;
	border: none;
}
.voyant_indispo {
	background-color: rgb(255, 128, 0);
}
.online_icon{
	position: absolute;
	height: 10px;
	width:10px;
	background-color: #4cd137;
	border-radius: 50%;
	top: 0.2em;
	right: 0.2em;
}
.inactive .online_icon{
	background-color:#ff7200;
}
.chat-header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999999999999;
}
.chat-body{
	margin-top:90px;
}
.chat-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 9999999999999;
}
.img_cont_msg {
	width: 40px;
	min-width: 40px;
	height: 40px;
}
.msg_cotainer {  
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 10px;
	border-radius: 25px;
	background-color: var(--bleu-color);
	color: #FFFFFF;
	padding: 10px;
	position: relative;
	min-width: 100px;
}
.msg_cotainer_send {
	margin-top: auto;
	margin-bottom: 30px;
	margin-right: 10px;
 	border-radius: 25px;
	background-color: #e2ffe8;
	padding: 10px;
	position: relative;
	min-width: 100px;
	text-align:right
}
.msg_time {
  position: absolute;
  left: 0;
  bottom: -20px;
  color: black;
  font-size: 12px;
}
.msg_time_send {
  position: absolute;
  right: 0;
  bottom: -20px;
  color: black;
  font-size: 12px;
}
.logo_titre{ font-size: 30px; color: var(--bleu-color) !important;}
.logo_titre_chat{ font-size: 20px; }
.div_btn_navbar{margin:10px;}
.btn_site {
	background-color: var(--bleu-color);
	color: #FFFFFF;
	border-color: var(--bleu-color);
	border-radius: 17px;
}
.btn_site:hover {
	background-color: #FFFFFF;
	color: var(--bleu-color);
	border-color: var(--bleu-color);
}
.btn_site_yellow {
	background-color: #ffcc45;
	color: #000000;
	border-color: #ffcc45;
	border-radius: 17px;
}
.btn_site_yellow:hover {
	background-color: #000000;
	color: #ffcc45;
	border-color: #ffcc45;
}
.btn_site_green {
	background-color: #62bd2b;
	color: #FFFFFF;
	border-color: #62bd2b;
	border-radius: 17px;
}
.btn_site_green:hover {
	background-color: #FFFFFF;
	color: #62bd2b;
	border-color: #62bd2b;
}
.btn_site_header {
	background-color: var(--bleu-color);
	color: #FFFFFF;
	border-color: var(--bleu-color);
	border-radius: 17px;
}
.btn_site_header:hover {
	background-color: #FFFFFF;
	color: var(--bleu-color);
	border-color: var(--bleu-color);
}
.display-2 {
	font-size: 32px;
	padding: 100px 10px 10px 10px;
	font-weight: bold;
}
.display-4 {
	font-size: 22px;
	padding: 10px 10px 100px 10px;
	font-weight: bold;
}
.intro { font-size: 18px; }
.buy {text-align: center;}
.chat_alert{
	display: none;
	position: fixed; top: 130px; z-index: 999999999999; width: 100%;
}
.chat_alert_box{
	margin: auto; background-color: #e78603; padding: 10px; border-radius:5px; width: 80%; max-width: 400px;
}
.chat_alert_btn {
	background-color: var(--bleu-clair-color); color: white; border-color: white; border: solid; border-width: 1px; border-radius:3px; padding: 5px 10px; margin: 15px;
}
.chat_alert_btn:hover {
	background-color: white; color: var(--bleu-clair-color);
}
/* ----------------------------- */
/* ! SHOP */
/* ----------------------------- */
.shop{
	background-color: white;
	border-radius: 12px;
	text-align: center;
	color:var(--blue);
}
.shop .promo-item{
	border:1px solid var(--blue);
	border-radius: 6px;
}
.shop .promo-item p{
	font-family: 'Oswald',"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: bold;
}
.shop .credits{
	font-size:1rem;
	margin-top:-110px;
	margin-bottom:0;
	/*line-height:4.5rem;*/
	color: var(--bleu-color);
}
.shop .credits-mention{
	font-size:0.9rem;
	/*line-height:1.5rem; */
	color:black;
	text-transform: uppercase;
	margin-bottom:0;
}
.shop .price{
	font-size:1rem;
	/*line-height:4.5rem;*/
	margin-bottom:0;
	color: var(--bleu-color);
}
.shop .price-out{
	font-size:1.0rem;
	line-height:1.5rem;
	color:black;
	font-weight: normal!important;
	margin-bottom:12px;
	min-height: 1.5rem;
	margin:0;
}
.shop .price-out span{
	font-family: 'Oswald',"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size:1.0rem;
	line-height:1.5rem;
	text-decoration: line-through;
}
.shop .info-price{
	font-size:0.8rem;
	line-height:1.1rem;
	color:#686868;
	font-weight: normal!important;
	margin-bottom:0.5rem;
}
.shop .promo-item .btn_site{
	font-family: 'Oswald',"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: bold;
	text-transform: uppercase;
	font-size:1.4rem;
	line-height:1.4rem;
	width:90%;
}
.btn_success{
	font-family: 'Oswald',"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: bold;
	text-transform: uppercase;
	font-size:1.0rem;
	line-height:1.4rem;
	width:90%;
	background-color: var(--bleu-clair-color);
	color: white;
	border-radius: 17px !important;
}

.btn_success_indispo{
	font-family: 'Oswald',"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	/*font-weight: bold; */
	text-transform: uppercase;
	font-size:0.9rem;
	line-height:1.4rem;
	width:90%;
	background-color: #fe6601;
	color: white;
}
.shop .promo-item.recommanded{
	background-color:  #FFFFFF;
	border-radius: 6px;
	border:3px solid var(--bleu-color);
	border-radius: 6px;
	background-image:url("../images/pictos/recommanded.png");
	background-repeat: no-repeat;
	background-position: top right; 
}
.shop .promo-item.recommanded .btn_site:hover{
	background-color: white!important;
}

.btn_success:hover{
	background-color: var(--bleu-clair-color);
	color: white;
}

.btn_success_indispo:hover{
	background-color: white!important;
	color: #fe6601;
}

.card-body {height: calc(100vh - 300px); overflow: auto;}
.avatar_chat_voyant{max-width: 100px; border-radius: 50%}
.banner-chat {height: 15dvh; 
	background-image: url('/sites/mystalia/images/banner/banner-chat-w1300.webp');
	background-repeat: no-repeat; background-size: 100% 100%;
}
.blink {animation: blink 1s infinite;}
@keyframes blink { 
	0% { opacity:0; }
	50% { opacity:1; } 
	100% { opacity:0; }
}
@media (max-width: 760px) {
	h1 {font-size: 1.5rem;}
	.banner_desktop{display: none;	}
	.banner_desktop_free{display: none;	}
	.banner_desktop_chat{display: none;	}
	.banner_desktop_love{display: none;	}
	.banner_desktop_astro{display: none;	}
	.banner_desktop_tarot{display: none;	}
	.banner_mobile{display: block;}
	.display-2 {
		font-size: 12px;
		padding: 30px 5px 5px 5px;
		color: #FFFFFF;
	}
	.display-4 {
		font-size: 10px;
		padding: 5px 5px 30px 5px;
		font-weight: normal;
		color: #FFFFFF;
	}
	.desktop_only {display: none;}
	.mobile_only {display: block;}
	#img_hamburger {display: inline;}
	
	.div_btn_navbar{margin:5px;}
	
	.header_btn {
		display: block; 
		text-align: right;  
		margin-left:auto;
	}	
	.btn_site_header {font-size: 12px;padding: 0 5px;}
	.shop .credits{
		font-size:1rem;
		margin-top:-85px;
		margin-bottom:0;
		color: var(--bleu-color);
	}
	.shop .promo-item.recommanded{background-image: none;}
	.avatar_chat_voyant{max-width: 60px;}
	.banner-chat { 
		background-image: url('/sites/mystalia/images/banner/banner-chat-w500.webp');
}
}