@charset "utf-8";
/*---------------------messageBox----------------*/
#messageBox {
	--mb-width: 300px;
	--mb-height: 230px;
	--mb-caption-height : 30px;
	--mb-line-height: var(--mb-caption-height); /*ok btn, user input*/
	--mb-lines-gap: 15px;
	--mb-xbtn-width: var(--mb-caption-height);/*let it be squre*/
	position: absolute;
	top: 150px;
	left: 330px;
	width:var(--mb-width);
	height: var(--mb-height);
}

#mb_drag {
	position: absolute;
	top: 0px;
	left: 0px;
	width:var(--mb-width);
	height: var(--mb-height);
}

#mb_text {
	position: absolute;
	direction: rtl;
	/*we will set all dimantions from code because it is dragable and fit to text amount*/
	top: var(--mb-caption-height);
	width: 100%;
	height: calc(100% - var(--mb-caption-height)) ;/* if we write 100% then it takes the height of the messageBox above becasue it is the child of it and because it is top: 30px then the height turn to be 30 more then the height of the messageBox so it not good when aclaulating the height of the messagebox!! so if we want it to be top=30, we need to calculate the height here and not write 100% */
	background-color: var(--white);
	border: 5px var(--blue-custom);
	border-style: solid;
	box-sizing: border-box;
	border-top: none;
	text-align: right;
	padding-right: 10px;
	font-family: Alef;
	font-size: 28px;
	color: var(--blue-custom);
	overfloW: auto;
}


#mb_caption {
	position: absolute;
	top : 0px;
	left : var(--mb-xbtn-width);
	width: calc(100% - var(--mb-xbtn-width));/*270px*/
	height: var(--mb-caption-height);
	background-color: var(--blue-custom);
}

#mb_closeBtn {
	position: absolute;
	top : 0px;
	left : 0px;
	width: var(--mb-xbtn-width);  
	height: var(--mb-caption-height);
	box-sizing: border-box;
	
	background-image: url(../images/closeBtn_x.png);
	background-repeat: no-repeat;
	cursor: pointer;
}

#mb_userText {
	position: absolute;
	top : calc(var(--mb-height) - 2 * (var(--mb-lines-gap) + var(--mb-line-height)));;
	left : var(--mb-lines-gap);
	width: calc( 100% - (2* (var(--mb-lines-gap))));/*280px;*/  
	height: var(--mb-line-height);
	background-color: #EEEEEE;
	
	border: 1px var(--black);
	border-style: solid;
	box-sizing: border-box;
	text-align: right;
	padding-right: 10px;
	font-family: Alef;
	font-size: 18px;

}

#mb_okBtn {
	/*on edge this button is not in center ("left" calculation is not working)*/
	--mb-okbtn-width: calc(var(--mb-line-height) * 2);/*do it rectangle 1X2 (60px)*/ 
	position: absolute;
	top : calc(var(--mb-height) - (var(--mb-lines-gap) + var(--mb-line-height)));
	left : calc(((var(--mb-width) / 2 ) - ( var(--mb-okbtn-width) / 2)));/*in the center*/
	width: var(--mb-okbtn-width);
	height: var(--mb-line-height);
	margin: auto;
}
/*list of options*/
#mb_answers {
	/*number of lines set as "size" from the code*/
	position: absolute;
	direction: rtl;
	
	
	--curRight: 30px;
	font-size: 24px;
	font-family: Alef;
	text-align: center;
	color: var(--blue-custom);
	line-height: 80%;
	width: calc(100% - (2 * (var(--curRight))));
	left: calc(((var(--mb-width) - 100%) / 2) + var(--curRight));
		
	height: auto;
	top: 40px; /* i do not know th height when it is auto  */
	/*top: calc(var(--mb-height) - 2 * (var(--mb-lines-gap)) - var(--mb-line-height) );*/

}