/* ****************************************
		
	Code created by Serge Soudoplatoff
	Copyright 2018 to 2023
	*/
		
html, body, .wrapper {
  width: 100%;
  height: 100%;
}
/* this is to add extralarge bootstrap modal * /
@media (min-width: 768px) {
	.modal-xl {
		width: 90%;
		max-width:1200px;
	}
}
/**/

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #fff;

    -webkit-touch-cautoout: auto;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

/***** header *****/
.navbar{padding: 10px 0;}
.navbar-brand{height: auto; padding: 0;}
.navbar ul li a{font-size: 16px;}
.nav>li>a: focus, 
.nav>li>a: hover{background-color: transparent; text-decoration: underline;}


.tooltip-inner {
	max-width: 350px;
	/* If max-width does not work, try using width instead */
	width: 350px; 
}


/***** login passw join confirm *****/
.loginForm {
	max-width: 420px; 
	margin: 0 auto;
}


.la_gauche {
	position: absolute; 
	width: 500px;
	height: 100%;
	overflow-y: scroll;
	
}
.la_droite {
	margin-left: 550px;
	margin-right: 40px;
}


#chart_tlsess, #chart_histsess {
	width		: 100%;
	height		: 300px;
	padding-top	: 10px;
}					
#contstats {
	width: 90%;
	margin: auto;
}
#topstat {
	width: 100%;
	margin: auto;
	display: flex;	
}

.blockstat {
	padding: 10px;
	flex-grow: 1;	
}
.pointerhand {
	cursor: pointer;
}
.statnb {
	width: 20px;
	text-align: right;
	padding-right: 3px;
}
.statnbl {
	width: 50px; 
	text-align: right;
	padding-right: 3px;
}
.statrl {
	padding-left: 2px;
	padding-right: 3px;
}

#tbl_users, #tbl_sessions {
	width: 100%;
	flex-grow: 1;	
}
.d_cont_users {
	padding-top: 25px;
	padding-right: 30px;
}
.infoUser {
	overflow: hidden;
	display: none;
}
.innerinfoUser {
	border-bottom: 2px solid blue;
}
.infos_ply_sessions {
	overflow-y: scroll;
	height: 80%; /* 80vh; */
}
.disp_ply_sessions {
	height: 90vh;
}

#info_user {
	width: 50%;
	flex-grow: 1;
	padding-left: 10px;	
}

#menumain_ct {
	margin-left: 20px;	
}
#subcontent {
	padding-left: 10px;
}



.instmgt {
	margin-top: 10px;
	display: none;
}
.instHead {
	margin-top: 5px;
	font-size: 28px;
	border-top: blue 1px solid;
}

.dspsession {
	border-top: blue 1px solid;
	margin-top: 4px;
	margin-left: 2px;
	margin-bottom: 6px;
}
.evtv {
	margin-top: 15px;
}

.dspEvents {
	display: none;
}


.infoinsth {
	width: 80px;
	font-weight: bold;
}
.infoinst {
	width: 300px;
	border: 1px solid black;
    padding-left: 2px;
    padding-right: 1px;

}

.b_institu {
	margin-bottom: 6px;
}


.orga_tabdiv {
	margin-top: 15px;
}

#d_billing {
	width: 100px;
	border: 20px;
}

.hcountry {
	font-size: 34px;
	border-top: solid blue 2px;
	margin-top: 30px;
	
}
.hstate {
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 5px;
	
}

.tdsession1 {
	padding: 3px;
	width: 70px;
}
.tdsession2 {
	padding: 3px;
	width: 90px;
}
.tdsession3 {
	padding: 3px;
	width: 400px;
}

.sticon {
	width: 16px;
	height: 16px;
}
.zeassets {
	display: none;
	width: 300px;
}
.li_asset {
	margin-bottom: 6px;
}

#mainadmin {
	max-width: 900px;
}

.d_contlist {
	margin-top: 10px;
	height: 80vh;
	overflow-y: scroll;
}


#asset_left {
	position: absolute; 
	width: 500px;
}
#asset_right {
	margin-left: 550px;
	margin-right: 40px;
}

.assettitle {
	font-size: 34px;
	border-top: solid blue 2px;
	margin-top: 30px;
	
}

#cloud_words {
	width: 80%;
	height: 300px;
}


#ze_serveur {
	width: 250px;
}

.surveychart {
	width: 100%;
	height: 200px;
}
.survh {
	font-size: 18px;
	font-family: serif;
	font-weight: bold;
}


.book_page {
	border-top: 1px solid;
	margin-bottom: 5px; 
}

/* *************************** 
	careplay 
	*/

.d_listcpmodscen {
	height: 55%;
	overflow-y: scroll;
}


.cpmodthm {
	font-size: 18px;
	font-family: serif;
	font-weight: bold;
	border-top: 1px solid;
	margin-bottom: 7px;
	margin-top: 8px;
}

.cpmodu {
	border-top: dashed 1px;
	margin-bottom: 15px;
}

.i_scenar {
	border-top: 1px solid;
	margin-bottom: 5px; 
}

.cpmodsi {
	margin-bottom: 20px;
}

.disp_progr {
	margin-top: 6px;
	border-top: 2px solid;
}

.d_cpuser {
	font-size: 20px;
	font-family: serif;
	font-weight: bold;
	border-top: 2px solid;
	margin-bottom: 7px;
	margin-top: 4px;
}

.d_cps_modu {
	border-top: 1px solid;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 6px;	
}

.d_cps_modu_di {
	font-weight: bold;
	margin-bottom: 4px;
}
.d_cps_modu_t {
	display: none;
}

/* *************************** 
	voice 
	*/


.b_avat_upd {
	margin-top: 12px;	
}
#d_avat_create {
	width: 50%;
	
}


/* *************************** 
	
	
	slider 
	*/

#vz_par .sub_header {
	font-size: 10px;
	font-style: italic;
	font-family: monospace;
}

#vz_par .dsp_fo {
	font-size: 12px;
	font-family: sans-serif;
	font-style: italic;
}



/* the sliders are different according to player or caregiver */
/* https://en.wikipedia.org/wiki/List_of_Unicode_characters#Box_Drawing */


/* --- player pre --- */
#vz_par .pre {
	color: #e64e00;	
}
#vz_par .pre .slider-handle.custom::before {
	font-size: 20px;
	content: '\25C9'; /* '\25B2'; */
	color: #e64e00;
}
#vz_par .pre .slider-selection {
	background: #e64e00;
	opacity: 0.4;
}

/* --- player post --- */
#vz_par .pst {
	color: #003d78;	
}
#vz_par .pst .slider-handle.custom::before {
	font-size: 20px;
	content: '\25C9';
	color: #003d78;
}
#vz_par .pst .slider-selection {
	background: #003d78;
	opacity: 0.4;
}

/* --- admin --- */
.d_admin_tbl {
	width: 45%;
}

/* --- caregiver --- */
#vz_par .sgl {
	color: #29442c;	
}
#vz_par .sgl .slider-selection {
	background: #29442c;
	opacity: 0.4;
}
#vz_par .sgl .slider-handle.custom::before {
	font-size: 20px;
	color: #29442c;
	content: '\25C9'; /* '\2600'; /*unicode character * /
 
  /* si font awsome
	content: "\f111";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
*/
}

.inforg {
	border:solid 1px blue;
	border-top: 0px;
	color: #29442c;
}