/*========= main css 
*/

/*== font */

/* cf. https://google-webfonts-helper.herokuapp.com/fonts
+ avoid @import google font (take the IP address !)
https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file/52271583#52271583
*/
/* open-sans-regular - latin */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		 url('../font/open-sans-v29-latin-regular.woff2') format('woff2'), 
		 url('../font/open-sans-v29-latin-regular.woff') format('woff'); 
	font-display: swap;
}
  
  /* open-sans-italic - latin */
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src: local(''),
		 url('../font/open-sans-v29-latin-italic.woff2') format('woff2'), 
		 url('../font/open-sans-v29-latin-italic.woff') format('woff');
	font-display: swap;
}
/* open-sans-700 - latin */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: local(''),
		 url('../font/open-sans-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('../font/open-sans-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
  
/* @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);   */
/* @font-face {
	font-family: 'Varela Round';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		url('../font/varela-round-v17-latin-regular.woff2') format('woff2'), 
		url('../font/varela-round-v17-latin-regular.woff') format('woff');
	font-display: swap;
} */
@font-face {
	font-family: 'Varela Round';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		url('../font/varelaround-regular-webfont.woff2') format('woff2'), 
		url('../font/varelaround-regular-webfont.woff') format('woff');
	font-display: swap;
}

/*== color scheme */
:root{
  --bluegr:rgb(30,101,108);
  --blue: rgb(45, 112, 119);
  --red: rgb(185, 55, 10);
  --orang: rgb(211, 85, 0);
  --green: rgb(70, 160, 50);
  --blueg: rgb(20, 165, 155);
  --greylight: rgb(200, 200, 200);
  --bggrey: rgba(240,240,240,0.5);
  --greymid: rgb(140, 140, 140);
  --greydark: rgb(80, 80, 80);
}
.red{
	color: var(--red);
}
.orange{
	color: var(--orang);
}
.mtop{
	margin-top: 1em;
}
.mbot{
	margin-bottom: 0.8em;
}
.mside{
	margin-left: 1em;
	margin-right: 1em;
}
/*== html */
html{
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 20px;
	background-image: url("../img/bg.png");
}

/*== body */
/* add a small margin of 2.5% everywhere */
body{
	margin: auto;
	text-align: center;
	color: var(--greydark);
	min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer, .footer{
	margin-top: auto;
	/* position: absolute;
	bottom: 0.2em;
	width: 99%;
	font-size: 0.9em; */
}
/*== main style for button */
.button{
    display: inline-block;	
	border: none;
	border-radius: 25px;  
	background-color: var(--blueg);
	padding: 10px 30px 10px 30px;
	font-size: 20px;   
	font-weight: bold;
	color: rgb(245, 240, 245);
	text-align: center;
	margin: auto;
} 
.button:hover{
	color: rgb(219, 215, 207);
	background-color: rgb(20, 175, 165);
	cursor: pointer;
	border-radius: 25px;  	
}

/*== login form */
*,:after,:before{
	box-sizing:border-box;
}


.login{
	color: var(--bluegr);
	text-align: left;
}
.login a{
	color: inherit;
	text-decoration:none
}
#welcome {	
	font-size: 22px; 
	text-align: center;  
	padding: 10px;
	width: 90%;
	margin: auto;
}

.login-wrap{
	position: relative;
	width: 100%;
	max-width: 400px;
	min-height: 500px;
	max-height: 500px;
	margin: auto;
	border-radius: 15px;
	background-color: rgba(240,240,240,0.5);
	box-shadow: 0 2px 5px rgba(0,0,0,.24);
}
.log-in{
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 30px 58px 30px 58px;
}
.tab{
	display: inline-block;
	margin: 0 20px 24px 0;
	padding-bottom: 15px;
	border-bottom: 2px solid transparent;
}
.log-in .tab_1, .log-in .tab_2{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: rotateY(180deg);
	backface-visibility: hidden;
	transition: all .4s linear;
}
.log-in .sign-in, 
.log-in .sign-up, 
.login-form .group .check{
	display: none;
}
.sign-in:checked + .tab,
.sign-up:checked + .tab{
	border-color: #43c6af;
}
.tab, .label{
	text-transform: uppercase;
}
.but{
	width: 100%;
}
.but span{
	font-weight: normal;
}

.login-form{
	min-height: 345px;
	max-width: 320px;
	perspective: 1000px;
	transform-style: preserve-3d;
	position: relative;
	margin: auto;
	padding-bottom: 1em;
}
.group{
	margin-bottom: 15px;
}
.label{
	display: block;
	color: var(--bluegr);
	font-size: 16px;
	padding-bottom: 0.5em;
}

.group .input,
.group .but{
	display: block;
	width: 100%;
	color: var(--greydark);
	font-size: 0.8em;
	letter-spacing: 0.1em;
	border: 1px solid var(--bluegr);
	padding: 15px 20px;
	border-radius: 25px;
	background: rgba(200,200,200,0.1);
}
.group input{
	font-size: 0.9em;
	font-family: inherit;
}
.group input:-webkit-autofill {
	box-shadow: 0 0 0px 1000px rgba(55, 210, 200, 0.05) inset !important;
}
.group input:focus{
	outline: none;
}
.pass-vis{
	position: absolute;
	right: 0.1em;
    margin-top: -1.65em;
    padding-right: 0.5em;
    font-size: 1.1em;
	color: rgb(165, 165, 165);
	cursor: pointer;
}
.passw {
	letter-spacing: 0.2em;
}

.group label .icon{
	width: 15px;
	height: 15px;
	border-radius: 2px;
	position: relative;
	display: inline-block;
	background: rgba(255,255,255,0.1);
}

.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.check:checked + label{
	color:#fff;
}
.check:checked + label .icon{
	background:#0cbd8b;
}

.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.log-in .sign-in:checked + .tab + .sign-up + .tab + .login-form .tab_1{
	transform:rotate(0);
}
.log-in .sign-up:checked + .tab + .login-form .tab_2{
	transform:rotate(0);
}
.hr{
	height: 2px;
	margin: 10px 0 1em 0;
	background: rgb(150,150,150);
}
.foot-lnk{
	text-align:center;
	cursor: pointer;
}

.req_lab{
	padding-left: 0.5em;
	color: rgb(236, 132, 57);
}

.form-error {
	max-width: 320px;
    border: 1px solid var(--orang);
    border-radius: 8px;
	background-color: rgba(244, 242, 238, 0.7);
    padding: 4px; 
    margin: 10px auto; 
    font-size: 0.8em;
	font-weight: bold;
    color:var(--orang);
	text-align: center;
}
.form-error > p {
	line-height: 1.5em;
  	margin: 0.2em;
}

#forgot-instruct{
	color: var(--greydark);
	font-size: 18px;
	margin-bottom: 1em;
}
/*---- code form*/
.login-code{
	text-align: center;
	margin-top: 3em;
}
#access{
	width: 12em;
	margin: auto;
	border: 1px solid var(--blueg);
	padding: 1em;
	border-radius: 10px;
	background-color: var(--bggrey);
	height: 11em;
}
#code-form{
	margin-top: 0.6em;
	width: 10em;
}
#code-error{
	width: 13em;
	margin: 1em auto;
}
#code{
	font-size: 1.1em;
	text-align: center;
	letter-spacing: 0.2em;
	padding: 0.5em;
}

.menu-middle{
	margin: auto;
	width: 20em;
}

.mid-menu{
    background-color: #2d70770a;
    display: flex;
    flex-direction: column;
    align-items: center;
	margin-top: 1em;  /*4em */
	padding: 1em;
	border-radius: 15px;
	box-shadow: 0 1px 3px rgba(0,0,0,.24);
}
.mid-menu>div{
	display: flex;
	flex-direction: row;
	width: 100%;
	margin: 0.5em;
	border: 1px solid var(--greymid);
	border-radius: 5px;
	cursor: pointer;
	background-color: rgba(240,240,240,0.9);	
}
.mid-menu>div:hover{
	background-color: rgba(250,250,250,0.95);
}
.mid-menu>div:hover>.menu_icon{
	color: var(--orang);
}

.menu_icon{
	margin: auto;
	/* margin-right: 8px; */
	font-size: 1.5em;
	padding-left: 0.5em;
	width: 1.5em;
	color: var(--bluegr);
}

.menu_txt{
	text-align: left;
	font-size: 20px;
    width: 18em; 
	padding-left: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin: auto;
	color: var(--bluegr);	
}

/*======================= SpeechTherapist space ========================*/
#app-header{
	font-family: 'Varela Round', 'Open Sans', 'Arial Black', Arial;
	text-align: left;
	letter-spacing: 1px;
	width: 100%;
	min-width: 650px;
	height: 70px;
	background: linear-gradient(159.17deg, #15573e -9.41%, #1db0c8 97.45%);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.24);
}
#app-header div {
	padding-top: 18px;
	font-size: 24px;
	color: #f7f7f7;
}
#app-header span{
	font-size: 26px;
    color: #d35500;
}
#app-header img{
	float: left;
	margin: 7px 10px 0px 15px;	
}
#ort-menu-wrap{
	position: absolute;
	top: 70px;
	min-height: 90vh;
	background-color: #177369;
}
  
#ort-menu{
	width: 330px;
	height: 100%;
	/* background-color: #177369; */
}
  
#ort-menu-hdr{
	padding: 5px;
	background-color: #2A3942;
	height: 70px;
	margin-bottom: 1em;
}
  
#ort-menu-hdr h3{
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	margin-left: 1rem;
}
  
#icon-folder{
	font-size: 18px;
	float: right;
	margin-right: 1em;
	color: #df712f;
}
  
.icon {
	margin-right: 8px;
}
#ort-menu-choices{
	text-align: left;
}
#ort-menu-choices ul{
	padding-left: 0;
}
  
#ort-menu-choices li{
	transition: 0.4s all;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	padding: 0.8em 0 0.8em 2em;
	margin-top: 0px;
	color: #fff;
	list-style: none;
	display: block;
}
  
#ort-menu-choices li:hover{
	transition: 1s all;
	color: #ecaa91;
	background-color: rgba(42, 56, 65, 0.82);
	cursor: pointer;
}
  
#ort-menu-choices > li{
	float: left;
}
  
#ort-menu-choices li ul{
	background: #1E2B32;
	margin-left: 280px;
	margin-top: -38px;
	display: none;
	position: absolute;
	border-top-right-radius: 15px 15px;
	border-bottom-right-radius: 15px 15px;
}
  
#ort-menu-choices li:hover > ul{
	display: block;
	cursor: pointer;
}

#param{
	background-color: #2A3942;
}
#disconn>i {
	color: #df712f;
}

#contact{
	color: white;
	text-align: left;
	border: 1px dashed;
	border-radius: 5px;
	padding: 10px 30px;
	font-size: 0.75em;
	background-color: rgb(48, 74, 89);
	width: 90%;
	margin: 8em auto;
}

#contact i {
	font-size: 2em;
	padding-right: 0.2em;
	color: var(--blueg);
}
#contact p {
	line-height: 0;
}
#action {
	position: absolute;
	top: 80px;
	left: 335px;
	width: calc(100% - 340px);
}
#action>p, #instr{
	color: var(--bluegr);
}
.welcome{
	font-size: 1.2em;
	/* color: var(--orang); */
}

#app-ort {
    width:100%;
    display:flex;
    flex-direction: row;
}

#menu {
    width:25%;
    min-width: 220px;
	background-color: #2d707717;
	border: 2px #0080aa dotted;
    display:flex;
    flex-direction: column;
    align-items: center;
	color: var(--greydark);
}

/*=== session timeout timer*/
#timer {
	position: absolute;
	bottom: 1em;
	right: 1em;
	cursor: move;
    font-size: 15px;
    border: dashed 1px #666;
	z-index: 10;
    width: fit-content;
    height: fit-content;
    padding: 3px;
}

#timer p {
	line-height: 0;
}

#countdown{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	background-color: #1d656c;
	border-radius: 4px;
}

#countdown > div{
	padding: 8px;
	display: inline-block;
}

#countdown div > span{
	padding: 12px;
	border-radius: 3px;
	background: #00816A;
	display: inline-block;
	font-weight: bold;
}

.cd_label{
	padding-top: 5px;
	font-size: 15px;
}

#expired_session {
	margin: auto;
	padding-top: 2em;
	font-size: 1.2em;
	color: var(--greydark);
	text-align: center;
}

/* #reg_pat{
    display: flex;
    align-items: center;
    flex-direction: column;
	padding: 0 2em;
} */
#reg_pat_form{
	min-width: 15em;
	margin-top: 6em;
}
.highlight{
	font-size: 1.1em;
	font-weight: bold;
	color: var(--orang);
}
.bold {
	font-weight: bold;
}

#notice-after-reg {
	font-size: 16px;
}
#notice-after-reg ul {
	margin: 0;
}
#notice-after-reg li {
	margin-bottom: 1em;
}


/*=============*/

#wrap_table, #table-wrap{
    margin: auto;
	padding-bottom: 1em;
}

#table {
	color: rgb(59, 59, 59);
	margin: 0.5em auto 1em auto;
}
.table {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	display: table;
}

@media screen and (max-width: 580px) {
	.table {
		display: block;
	}
}

th, td {
	border-bottom: 2px solid rgb(255, 255, 255);
}

.row {
	display: table-row;
	background: #e6e6e69c;
	cursor: pointer;
}
.row:hover {
	color: rgb(6, 113, 184); 
}

.row:nth-of-type(odd) {
	background: rgb(233, 233, 233);
}

.hdr{
	font-weight: 800;
	color: #ffffff;	
	text-align: center;	
}

.row.blue {
	background: var(--blue);
}

@media screen and (max-width: 580px) {
	.row {
		padding: 8px 0;
		display: block;
	}
}

.cell {
	padding: 6px 4px;
	display: table-cell;
}

#table-item{
	width: 30em;
	margin: auto;
}

.itemlist {
	font-size: 0.8em;
}

.info {
	font-size: 0.9em;
	font-style: italic;
	padding-bottom: 1em;
	padding-top: 1em;
	color: var(--greydark);
	max-width: 90%;
	margin: auto;
}
#list_control{
	margin: 0.5em auto;
}
.control>button {
	font-size: 17px;
	font-weight: normal;
	background-color: rgb(242,242,242);
	cursor: pointer;
	color: var(--greydark);
	border: 1px solid var(--greymid);
	padding: 0.3em;
	border-radius: 4px;
}

.control>button>i {
	padding-right: 0.5em;
	color: var(--blue);
}

.control>button:first-of-type{
	margin-right: 1em;	
}
.control>button:hover{
	color: var(--blue);
	background-color: white;
}
.control>button:hover>i {
	color: var(--orang);
}

.rowPatient {
    width:100%;
    display:flex;
    flex-direction: row;
    height:8%;
    align-items: center;
    padding: 15px 0;
	cursor: pointer;
}

.rowPatient>p {
    text-align: center;
    width:4em;
	font-size: 1.1em;
}

.rowPatient>p:hover {
    color: var(--blueg);	
}

.rowPatient>button {
    height:60%;
    width:13%;
}

.word_list>p{
	padding-right: 0.2em;
    font-size: 0.9em;
}

/*--- control button */
#change_control {
	margin: 0.5em auto;
}

/**** add new list of item
**/
#new_list_wrap {
	display: inline-block;
	position: relative;
	top: -2em;
	background-color: rgba(250,250,250,0.4);
	padding: 0.7em 0.5em;
	width: 98%;
}
#sel_categ>select{
	font-size: 0.9em;
	color: var(--orang);
}
#sel_categ>.control{
	display: inline-block;
}
#sel_instr {
	padding-right: 1em;
	line-height: 1;
}
#sel_categ button{
	margin-left: 1em;
}

#item_select select, #add_item{
	margin-left: 1em;
	font-size: 0.7em;
}
#newlist_control {
	display: inline-block;
	margin-top: 1em;
	border: dotted 1.5px var(--bluegr);	
}

#newlist_control button{
	margin: 0.5em;
}

#it_sel {
	display: inline;
}

.atypic {
	color: var(--red);
}
/*------ stat 
----*/
.stat-title{
	font-weight: bold;
	color: var(--orang);
}

/* ---- eval 104
---*/
#select_wrap{
	margin-bottom: 1em;
}
#sel{
	font-size: 1em;
	color: var(--blue);
}
/*----------------
  REGISTER FORM
  ----------------
*/

/* increase the height for orthophonist registration form */
#formRegister{
	min-height: 650px;
}

/* remove the 2nd tab label */
#no-lab{
    padding-bottom: 0em;
    margin: 0.5em 0;
}
/* password instruction */
#pass_instruc{
	text-transform: lowercase;
    font-size: 0.8em;
    font-weight: 400;
}
/* after register message (success) */
#after_register{
	max-width: 500px;
    margin: auto;
    padding-top: 4em;
	color: rgb(80,80,80);
	font-size: 1.2em;
	text-align: center;
	line-height: 1.5em;
}
#after_register .but{
	margin-top: 2em;
}

#contact-bug{
	margin-top: 1em;
	font-size: 0.8em;
	color: rgb(100,100,100);
	line-height: 0.8em;
}
/* error message div*/
.error{
	max-width: 500px;
    margin: auto;
    padding-top: 4em;
	color: rgb(90,80,80);
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	line-height: 1.5em;
}

/*---------------- */
/* account-bug management */
/*-------------------*/
#pacc-menu-wrap{
	margin-bottom: 1.5em;
}
.output {
	text-align: left;
	font-size: 14px;
	width: 80%;
	margin: auto;
	margin-bottom: 0.4em;
	padding: 1.2em;
	background-color: rgba(220,220,220,0.4);
	border: dotted 2px white;	
}

/*--- wait-div ----*/
#wait_wrap{
	position: absolute;
	top: 160px;
	width: 100%;
}
#wait{
	border: 1px solid var(--blueg);
	margin: auto;
	width: 10em;
	padding: 1em;
	border-radius: 10px;
	background-color: var(--bggrey);
}
#wait>i{
	--fa-animation-duration: 4s;
	font-size: 62px;
	color: var(--orang);
}
#wait_label{
	color: var(--bluegr);
}
.ellipsis:after{
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}
@keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}
/*--- decoration for button evocation in instruction --*/
.but_instr{
	color: var(--orang);
	border: 1px dotted;
	background-color: rgba(250,250,250,0.3);
	padding: 0em 0.2em;
}
.eval-info{
	margin: 2em auto;
	font-size: 1.2em;
	width: 80%;
}
#eval-id{
	font-size: 1.2em;
	font-weight: bold;
	color: var(--orang);
}

#failed_wrap{
	position: absolute;
  	top: 1em;
  	width: 100%;
}
#failed{
	margin: auto;
	background-color: var(--bggrey);
	color: var(--red);
	font-weight: bold;
	padding: 0.2em;
	width: fit-content;
}
/*=== settings */
.setting{
	margin-top: 1em;
	margin-bottom: 1em;
}
/******** CHECK FOR VOLUME
*************/
#instr_vol {
	font-size: 0.9em;
	text-align: left;
	width: 26em;
	margin: auto;
	line-height: 1.5em;
	background-color: rgba(255,255,255,0.3);
	padding: 10px;
	border-radius: 3px;
}
#instr_vol>ul{
	margin:0;
}
#player {
	display: flex;
	flex-direction: row;
	margin: 0.5em auto 1em auto;
	width: 460px;
	height: 5em;
	border-radius: 10px;
	background: var(--bggrey);
	box-shadow: 0 2px 5px rgba(0,0,0,.24);
	color: var(--greydark);
}
.check-icon{	
	float: left;
	width: 80px;	
	margin-top: 0.1em;
	padding-left: 0.5em;
	line-height: 0;
	cursor: pointer;
}
.check-icon p {
	font-size: 0.8em;
}
.check-icon span {
	font-size: 2em;
}
#play span:hover{
	color: var(--blueg); 
}
#sound-slider {
	display: inline-block;
	position: relative;
	width: 350px;
	padding-top: 2.6em;
	text-align: left;
}
#sound-slider i {
    position: absolute;
    margin-top: -10px;
    color: #666;
}
#player .fa-volume-high {
	margin-right: -2px;
	right: 0;
}

#vol-slid {
	position: absolute;
	left: 22px;
	width: 300px;
	height: 5px;
	margin: 0 auto;	
	background: #555;
	border-radius: 15px;
}
/*https://nosmoking.developpez.com/demos/css/range-slider-custom.html*/

* {
  box-sizing: border-box;
}

#micbut{
	font-size: 24px;
	border-radius: 50%;
	height: 2.2em;
	width: 2.2em;
	color: var(--greymid);
	border: 1px solid rgba(255, 255, 255, 0.5);
	background-color: rgba(255,255,255,0.5);
	cursor: pointer;
	padding: 0;
	margin:auto;
}

#micbut:hover{
	color: rgb(20, 165, 155);
	color: var(--blueg); 
	border-color: rgb(20, 165, 155);
	border-color: var(--blueg);
}
#micbut>i{
	padding-top: 0.5em;
}
#mic-viewer {
	margin: auto;
	text-align: left;
}
#mic-viewer p {
	line-height: 0;
	margin-bottom: 12px;
	font-size: 0.8em;
	font-weight: bold;
}

#meter{
	border: 1.2px solid #666;
	border-radius: 7px;
}

/*-------------------
	meditation / coherence 
----------*/
#medit-player{
	padding-top: 1em;
	margin: auto;
	width: 400px;
	height: 80px;
	border-radius: 10px;
	background: var(--bggrey);
	box-shadow: 0 2px 5px rgba(0,0,0,.24);
}

#coh-timer{
	font-weight: bold;
	display: inline-block;
	padding: 0.5em;
	background-color: rgba(255,255,255,0.4);
	margin-bottom: 1em;
	margin-top: 0.5em;
}

#bubble-container {
	position: relative;		
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
				rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.grow_wrap{
	margin: 2em auto;
	height: 300px;
	width: 300px;
	border-radius: 150px;
}
.move_wrap{
	height: 450px;
	width: 100px;
	margin: auto;
    border-radius: 55px;
}
#bubble {
	position: relative;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
				rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
				rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
	background: rgba(22,204,167,1);
	margin: auto;	
	width: 100px;
	height: 100px;
	border-radius: 100px;
}
.grow{	
	top: 100px;
}
.move{
	top: 350px;
}
@keyframes growing {
	0% { scale: 1; background-color: rgba(22,204,167,0.8);}
	25% { scale: 2; background-color: rgba(239, 217, 39, 0.8);}
	50% { scale: 3; background-color: rgba(228,123,5,0.8);}
	75% { scale: 2; background-color: rgba(34, 169, 210, 0.8);}
	100% { scale: 1; background-color: rgba(22,204,167,1);}
}
@keyframes moving {
    0% { top: 350px; background-color: rgba(22,204,167,0.8);}
    25% { background-color: rgba(239, 217, 39, 0.8);}
    50% { top: 0px; background-color: rgba(228,123,5,0.8);}
    75% { background-color: rgba(34, 169, 210, 0.8);}
    100% { top: 350px; background-color: rgba(22,204,167,1);}
}

/*****************
* GAME CHOICES page  *
*****************/

#game_intro {
	margin-bottom: 2em;
	margin-top: 3em;
	text-align: center;
	width: 100%;
}
#game_intro p{
	line-height: 1.2em;
	margin: 0.4em;
	font-size: 22px;
	color: var(--blue);
}

#game_choices{
	text-align: center;
	max-width: 400px;
	margin: auto;
}

.game_div {
	display: block;
	text-align: center;
	position: relative;
	cursor: pointer;
	background-color: rgba(250, 250, 250, 0.3);
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,.24);
	margin-bottom: 1em;
	height: 110px;
}
.game_div:hover{
	background-color: rgba(250,250,250,0.5);
}
.game_button {
	width: 400px;
	height: 112px;
}
#img_all {
	height:167px;
}
#all{
	height: 153px;
}

#application > h1{
	font-size: 1.3em;
	margin-top: 0;
}

#check{
	width: 80%;
    margin: auto;
    padding-top: 1em;
}
/**======================
user statistics 
=======================**/
#user_stat{
	width: 80%;
	text-align: left;
	margin: 2em auto;
}
#user_stat > .control{
	text-align: center;
}
.stat-icon{
	margin-right: 15px;
	font-size: 1.5em;
	padding-left: 0.5em;
	width: 1.5em;
	color: rgba(211, 85, 0, 0.55);
}
#stat-total{
  width: 26em;
  margin: 1.5em auto;
  line-height: 1.5em;
  background-color: rgba(255,255,255,0.3);
  padding: 10px;
  border-radius: 3px;
  text-align: center;
}

.circle { 
	display: inline-block; 
	line-height: 0px; 
	border-radius: 50%; 
	font-size: 32px; 
	background-color: var(--blueg);
	color: white;
} 

.circle span { 
	display: inline-block; 
	padding-top: 50%; 
	padding-bottom: 50%; 
	margin-left: 8px; 
	margin-right: 8px; 
} 
.multi-graph-wrap{
	width: 100%;
}
.graph-wrap {
	margin: 20px auto;
	background-color: rgba(255,255,255,0.3);
	width: 700px;
}
.graph-wrap div {
	margin: auto;
	width: 600px;
}
/**========================
training-tasks
========================**/
/* prevent the dotted line that appears with tabindex=0 that is put by jspsych*/
.jspsych-display-element{
	outline: none !important;
}

.hide {
	opacity: 0;
}

/*===============
 Main xp template
 ===============*/
#stim-template{
	margin: auto;
}
#instr_div{
	margin-top: 1.5em;
	margin-bottom: 0em;
	min-height: 5em;
	display: block;
}
#title, .title {
	font-weight: bold;
	font-size: 26px;
	color: var(--greydark);
	margin-bottom: 0.5em;
}
#action>#title{
	margin-top: 1em;
}
#subtitle, .subtitle {
	line-height: 1.5em;		
	color: var(--blue);
	width: 90%;
	margin: 0 auto 1em auto;
	font-size: 22px;
}

#img_wrap {
	position: relative;
	width: 280px;
	height: 280px;
	margin: 0.5em auto;
	border-radius: 15px;
	background-color: var(--bggrey);
	box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}
/* #item-img {
	width: 100%
} */

#item-what {
	position: absolute;
	top: 40%;
	width: 100%;
	margin: auto;
	font-size: 1.5em;
	color: var(--blue);	
}
#icon_wrap{
	min-height: 50px;
}
#icon{
	text-align: center;
	padding: 1px 1px;
	font-size: 2em;
	height: 44px !important;
}
#icon.fa-keyboard{
	color: var(--blueg)
}
#icon.fa-volume-high{
	color: var(--blue);
}
#icon.fa-microphone {
  color: var(--orang);
}
.rec-on {
	animation: col 1.7s linear infinite alternate;
}
@keyframes col{
	from {
		opacity: 1;
	}
	to {
		opacity: 0.2;
	}	
}

#icon.fa-microphone.speaking {
	color: var(--blueg);
}
#icon.fa-circle-check:before {
  color: rgb(0, 150, 100);
}
#type_wrap{
	margin-top: 1em;
}

#item-word {
	font-size: 1.2em;
	margin-top: -0.5em;	
}

#item-typing {
	width: 290px;
	margin: 0.5em auto 0.6em;
	color: var(--greydark);
	text-align: center;
	font-size: 1.2em;
	border: 2px dotted var(--blueg);
	border-radius: 8px;
	background-color: transparent;
	caret-color: var(--blueg);
	padding: 4px 0px;
}
/* Remove blue border around focus area for Chrome */
#item-typing:focus {
	font-family: "Open Sans";
    outline: none !important;
	/* appearance: none; */
}
#item-typing.hide{
	cursor: default;
}
#icon.typing{
	color: var(--blue);
}
#rhyme_wrap{
	margin: 0em auto 1.5em auto;
}
#item-rhyme{
	font-size: 1.6em;
	color: var(--greydark);
}

/* Remove cross at right of input text for IE */
/* #item-typing::-ms-clear{
  width : 0;
  height: 0;
} */
#button_wrap{
	width: 290px;
	min-height: 2em;
	margin: auto;
}
#button_wrap>button{
	width: 135px;
}
#button_over{
	display: block;
	position: relative;
}
#button-ov{
	z-index: 2;
	position: absolute;
	width: 100%;
	top: 0;
}
#button-mid{
	width: 100%;
}
#redo-request, .stop-wrap{
	margin-top: 1.5em;
	margin-bottom: 1em;
}
#redo, .stop{
	font-size: 0.8em;
	color: var(--blue);
	cursor: default;
	border: 1px solid var(--greylight);
	/* border: 1px dashed var(--blue); */
	border-radius: 6px;
	padding: 0.5em;
	background-color: rgba(250,250,250,0.6);
}
.stop{
	cursor: pointer;
}
#redo:not(.hide){
	cursor: pointer;
}
#redo:hover, .stop:hover{
	background-color: rgba(250,250,250,0.8);
}
#redo:hover>i, .stop:hover>i{
	color: var(--orang);
}
#redo>i, .stop>i{
	display: block;
}
.show{
	display: block;
}
.none{
	display: none;
}
.none-one{
	display: none;
}
/* borrowing Bootstrap style for btn elements, but combining styles a bit */
.xp-but {
	height: 39.2px !important;
	padding: 6px 12px;
	font-size: 18px;
	text-align: center;
	white-space: nowrap;
	border: 1px solid #ccc;
	/* border-color: #ccc; */
	border-radius: 6px;
	color: var(--greydark);
	background-color: rgba(250,250,250,0.8);
	cursor: default;
}
.xp-but:not(.hide){
	cursor: pointer;
}
#button-middle{
	margin: auto;
}
  
/* only apply the hover style on devices with a mouse/pointer that can hover - issue #977 */
@media (hover: hover) {
	.xp-but:hover {
		background-color: #ddd;
		border-color: #aaa;
	}
}
  
.xp-but:active {
	background-color: #ddd;
	border-color: #000000;
}
  
.xp-but:disabled {
	background-color: #eee;
	color: #aaa;
	border-color: #ccc;
	cursor: not-allowed;
}
#abort_wrap{
	position: absolute;
	top: 1em;
	right: 1em;
}
#abort{
	background-color: rgba(250,250,250,0.7);
	border: dotted 1px;
}
/*===============
TASK: TYPING
===============*/

.input-ini{
	font-size: 1em;
	color: rgb(0, 0, 0);
}
.input-ok {
	color: rgb(0, 162, 80);
	animation: grow ease 2s ;
}
  
@keyframes grow {
	50% {transform: scale(1.05);}
	100% {transform: scale(1.15);
		color: rgb(0, 162, 80);}
}
#inp_wrap {	
	width: 30em; /*60%;*/
	float: left;
	display: inline;
	text-align: center;
}
#memo_wrap {
	width: 27em;
	margin: auto;
	text-align: left;
}
#memo-input {
	overflow: auto !important;
    outline: none !important;
	resize: none !important;
	width: 100%;
	margin-bottom: 1.5em;
	padding-left: 0.5em;
	border: 1px dashed rgb(0, 128, 170); /*var(--blue);*/
	background-color: rgba(255, 255, 255, 0.55);
    box-shadow: 3px 3px 2px 0px rgb(188, 189, 191);
    font-family: monospace;
	font-size: 19px;
}
#validbutton {
	display: inline-block;
	margin-top: 10px;
	text-align: center;
	font-size: 0.8em;
}
#butsmall{
	padding: 8px 15px;
	font-size: 0.8em;
	font-weight: normal;
}
/* Add space between radio and labels */
.radio_but {
	margin-right: 0.5em;
}
.radio_lab {
	margin-right: 1.5em;
	margin-left: 0.3em;
	text-align: left;
	display: inline-block; /*Avoid splitting between button and label*/
}

/********** PROPOS CHECK
***************/
#propos_counter{
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0.5em;
	margin-top: -0.5em;
}
#num{
	color: var(--blue);
}
.propos_col {
	float: left; /*Flottant is important !*/
	width : 42%;
	margin: 0 3% ; 
	font-size: 16px; 	
}
#state_wrap {
	width: 70%;
    padding: 0 16px;
    margin: 0em auto 1em;
    font-size: 18px;
    font-weight: 600;
	text-align: left;
}
.propinp {
	background-color: rgba(255, 255, 255, 0.5);
	display: inline-block;
	width: 100%;
	margin: 0 1% 5px 0;
	padding-top: 3px;
	padding-bottom: 3px;
}
.propinp  input {
	width: 32px;
	height: 32px;
	order: 1;
	z-index: 2;
	position: absolute;
	right: 30px;
	top: 50%;
	cursor: pointer;
}
.propinp label {
	display: block;
	cursor: pointer;
	font-family: "Open Sans", Arial, sans-serif;
}	
.quest {
	padding-left: 1em;
	padding-top: 0.2em;
	width: 88%;
}
.switch {
	position: relative; 
	width: 18%;
	user-select:none; 
	float: right;
	margin: 0.33em 1em;
	min-width: 45px;
	max-width: 55px;
}
.switch-checkbox {
	display: none;
}
.switch-label {
	display: block; 
	overflow: hidden; 
	cursor: pointer;
	border-radius: 8px;
}
.switch-inner {
	display: block; 
	width: 200%; 
	margin-left: -100%;
	transition: margin 0.3s ease-in 0s;
}
.switch-inner:before, .switch-inner:after {
	display: block; 
	float: left; 
	width: 50%; 
	height: 20px; 
	padding: 0; 
	line-height: 20px;
	font-size: 14px; 
	color: white; 
	font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
	box-sizing: border-box;
}
.switch-inner:before {
	color: #FFFFFF;
	text-align: center;
}
.true.switch-inner:before {
	content: "VRAI";
	background-color: rgb(70, 160, 50);
	background-color: var(--green); 
}
.false.switch-inner:before {
	content: "FAUX";
	background-color: rgb(185, 55, 10);
	background-color: var(--red); 
}
.switch-inner:after {
	content: "?";
	padding-right: 0px;
	background-color: #9E9E9E; 
	color: #FFFFFF;
	text-align: center;
}
.switch-checkbox:checked + .switch-label .switch-inner {
	margin-left: 0;
}
.switch-checkbox:checked + .switch-label {
	right: 0px; 
}
.black{
	color: rgb(0,0,0);	
}
.grey {
	color: rgb(90, 100, 100);	
}
.button_recall {
    display: inline-block;	
	-webkit-border-radius: 25px;
	border-radius: 25px;  	
	background-color: rgb(20, 165, 155); /*var(--blueg);*/
	width: 85%;
	margin-bottom: 0.6em;
} 
.button_recall span {
    display: inline-block;
    padding: 8px 15px;   
	color: rgb(50, 70, 80);
}
.button_recall span:hover {
	color: rgb(230, 238, 244); 
	cursor: pointer;
	-webkit-border-radius: 25px;
	border-radius: 25px;  	
}
#mic_wrap {
	width: 60%;
	float: left;
	display: inline;
}
#mic_instr {
	font-size: 17px;
	padding-top: 0.5em;
}
#recall_mic {
	font-size: 32px;
	background-color: rgba(255, 255, 255, 0);
	border: none;
}

@keyframes pulse{
	0% {
		box-shadow: 0px 0px 2px 0px rgba(173,0,0,0.2);
	}
	65% {
		box-shadow: 0px 0px 3px 2px rgba(173,0,0,0.5);
	}
}
.rec_on_2 {
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#mic{    
	color: rgba(250,250,250,0.6);
    border-radius: 50%;
    font-size: 28px;
    border: 1px solid;
    padding: 10px 14px;
    background-color: var(--red);
}
#mic:hover {
  color: var(--blueg);
}

/**** CLUE WRAP
*****/
#clue_wrap{
	position: absolute;
	top: 78px;
	width: 100%;
	background-image: url("../img/bg.png");
	height: calc(100% - 78px);
	z-index: 2;
}
#clue_sub_wrap{
	margin: 2em auto;
	min-height: 20em;
	max-width: 40em;
	border-radius: 10px;
	box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.15);
}
#clue_sub_wrap>p{
	padding-top: 2em;
	color: var(--blue);
}
#clue-menu{
	display: flex;
	flex-direction: row;
	width: 50%;
	gap: 1em;
	justify-content: center;
	margin: auto;
}
#clue-menu>button{
	width: 10em;
}
#clue_flex_wrap{
	padding-top: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin-bottom: 2em;
}
#clue-img{
	border-radius: 15px;
	background-color: var(--bggrey);
	box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.15);
}
#clue-img>img{
	width: 120px;
}
#clue{
	height: 6em;
	width: 60%;
	border: dotted 2px var(--orang);
	border-radius: 10px;
}
#clue-close-no{
	margin-left: 1em;
	margin-right: 2em;
}
.clue-big{
	font-size: 1.5em;
}
.spanhid{
	color: var(--blueg);
	padding-left: 0.2em;
	padding-right: 0.1em;
}

/***** end msg *****/
#end-train {
  	font-size: 2em;
}
#end-train-icon{
	font-size: 120px;
	color: rgba(25, 127, 124,0.65);
	filter: drop-shadow(5px 3px 1px rgba(211, 85, 0,0.6));
}
#end-wrapper {
	margin-top: 60px;
}
#replay{
	font-size: 2em;
	margin-top: 1em;
	margin-right: 0em;
}

/*================================= Super space */
#user_type {
	padding-bottom: 1em;
}
#user_type > label {
	padding-left: 0.25em;
}
#user_type > label:hover {
	color: var(--bluegr);
}
#user_type > input {
	margin-left: 1em;
	width: 15px;
  	height: 15px;
}
#if_patient {
	background-color: rgba(250, 250, 250, 0.4);
	padding: 1em;
	margin-bottom: 1em;
}
#if_patient>p  {
	font-size: 0.9em;
	color: var(--greydark);
}
#findby-form{
	min-height: 0;
}