@charset "utf-8";
/*---------------------screen----------------*/


.screen {
	position: absolute;
	top: 131.65px;
	width: 100%;
	height: 612px;
	
	direction: rtl;
}

/* text field and reach text fields properties */
/*basic text properties*/
.etoptool_text {
	direction: rtl;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 20px;
	padding-left: 20px;
	box-sizing: border-box;
	user-select: none;
	cursor: default;
	overfloW: auto;
	white-space: pre-line;/*pre-wrap - the same but with tabs. but they good only  without color*/
	tab-size: 200px;
}
/* properties for the words that are chosen as link in richtext for popup or drag from or into*/
.ett_link {
	color: #0000FF;
	text-decoration: underline;
	cursor: pointer;
}

/* properties for the words that are chosen as colored in richtext*/
.ett_colored {
	color: var(--red-custom);
}
/* properties for the words that are chosen as colored & bold in richtext*/
.ett_coloredbold {
	color: var(--red-custom);
	font-weight: bold;
}
/* properties for the words that are chosen as bold in richtext*/
.ett_bold {
	font-weight: bold;
}

/*class for the pic to put in the div as background image and keep ratio*/
.pic_keep_ratio_contain {
	/*object-fit: contain; is for img*/
	
	/*right: 40px;*/
	/*background-size: calc(100% - 40px);*/ /*contain;*//* can be also 100%*/
	background-size: contain; 
	background-repeat: no-repeat;
	background-position: right top;/*if we change this then we need to change also the offsetX and offsetY in loadComplete function in class PicObj*/
	
	
}

/*need to check before use*/
.pic_keep_ratio_picOnlyObj_ans {
	/*object-fit: contain; is for img*/
	
	right: 40px;
	/*background-size: calc(100% - 40px);*/ /*contain;*//* can be also 100%*/
	background-size: calc(100% - 40px);
	/*background-size: contain; */
	background-repeat: no-repeat;
	background-position: right top;/*if we change this then we need to change also the offsetX and offsetY in loadComplete function in class PicObj*/
	
	
}

/*class for the pic to put in the doc as background image and keep ratio*/
/*not in use ??*/
.pic_keep_ratio {
	/*object-fit: contain; is for img*/
	background-size: contain;/* acn be also 100%*/
	background-repeat: no-repeat;
	background-position: right top;
}

/*class for the properties of the text line that is in the pic*/
.ett_pictext {
	direction: rtl;
	padding-bottom: 0px;
	padding-left: 10px;
	box-sizing: border-box;
	user-select: none;
	cursor: default;
	white-space: pre-line;/*pre-wrap - the samw but with tabs. but they good only  without color*/
	tab-size: 200px;
	position: absolute;
	background-color: rgba(255, 255, 255,0.7);
	overflow: hidden;
	font-family: Alef;
	font-size: 18px;
	text-align: right;
	color: var(--black);
	padding-top: 2px;
	padding-right: 10px;
	line-height: 100%;
	height: 40px; 
}
/*class for the properties of the video */
.ett_video {
	position: absolute;
	width : 100%;
	height: 100%;
}
/*class for the properties of the rectangle that is used for link in the picture */
.rec_link {
	position: absolute;
	border: hidden;
	cursor: pointer;/*
	border-color: var(--red-custom);
	border-width: 1px;
	*/
	
}
.rec_link:hover {
	border: solid;
	cursor: pointer;
	position: absolute;
	border-color: var(--red-custom);
	border-width: 1px;
}
/*class for the properties of the point that is used for link in the picture */
.point_link {
	cursor: pointer;
	position: absolute;
	width: 35px;
	height: 35px;
	background-image: url(../images/link_p.png);
}


/* for the btn in the fb and in the ans in actobj */
.actobj_btn {
	cursor: pointer;
	position: absolute;
	top: var(--btn-top);
	width: var(--btn-width);
	/*left: calc(100% - var(--btn-width) + var(--btn-left));/* --btn-left is now 0, but we may awnt it to be other value, no need in this because we have: right!  */ 
	right: var(--btn-right);
	
	height: var(--btn-height);
	background-image: var(--btn-image);
	
	background-size: auto;
	background-repeat: no-repeat;
}
/* for the media(etxt,pic,video) in the fb and in the ans in actobj */
.actobj_media {
	position: absolute;
	box-sizing: border-box;
	
	/*direction: rtl;*/
	
	width: 100%;
	height: 100%;
	
	
	top: var(--media-top);
	left: var(--media-left);
	
	/* for text fb */
	/*
	font-family: Alef;
	font-size: 28px;
	text-align: right;
	color: var(--black);
	padding-top: 2px;
	*/
	font-family: var(--font-family);
	font-size: var(--font-size);
	text-align: var(--text-align);
	color: var(--colorText);
	padding-top: var(--padding-top);
	padding-right: calc(var(--btn-width) + var(--small-space-between-btn-and-text) + var(--btn-right)); /*70px;*/
	
}


/* for the feedback in act */
/* for text in fb in act*/
.actobj_text_fb {
	--btn-width: 54px;
	--btn-height: 40px;
	--btn-image: var(--ansCheckBtnFbGraphic);
	
	--btn-top: 0px;
	/*--btn-left: 0px; will be overide by the son:btn*/
	--btn-right:0px;
	
	/* to check if needed  */
	--media-top: 0px; /*will beoverride by kod */
	--media-left: 0px; /*will beoverride by kod */
	
	
	--font-family: Alef;
	--font-size: 28px;
	--text-align: right;
	--colorText: var(--black);
	--padding-top: 2px;
	
	
	background-color: var(--white);
	cursor: default;/* wll be overirde in btn*/
	position: absolute;
	box-sizing: border-box;
	
}
/* for the different graphics of btn in the fb  in the act */
.actobj_pic_fb[fbOf = 'qmc'] {
	--btn-image: var(--ansCheckBtnQmcGraphic);
}
.actobj_video_fb[fbOf = 'qmc'] {
	--btn-image: var(--ansCheckBtnQmcGraphic);
}
.actobj_text_fb[fbOf = 'qmc'] {
	--btn-image: var(--ansCheckBtnQmcGraphic);
}
.actobj_richtext_fb[fbOf = 'qmc'] {
	--btn-image: var(--ansCheckBtnQmcGraphic);
}

.actobj_pic_fb {
	--btn-width: 54px;
	--btn-height: 40px;
	--btn-image: var(--ansCheckBtnFbGraphic);
	
	
	
	--btn-top: 0px;
	/*--btn-left: 0px; will be overide by the son:btn*/
	--btn-right:0px;
	
	
	--media-top: 0px; /*will beoverride by kod so not needed*/
	--media-left: 0px; /*will beoverride by kod so not needed*/
	--media-right: 0px;
	
	
	background-color: var(--white);
	cursor: default;/* wll be overirde in btn*/
	position: absolute;
	box-sizing: border-box;
	
}
.actobj_video_fb {
	--btn-width: 54px;
	--btn-height: 40px;
	--btn-image: var(--ansCheckBtnFbGraphic);
	--btn-top: 0px;
	/*--btn-left: 0px; will be overide by the son:btn*/
	--btn-right:0px;
	--media-top: 0px; /*will beoverride by kod so not needed*/
	--media-left: 0px; /*will beoverride by kod so not needed*/
	--media-right: 0px;
	background-color: var(--white);
	cursor: default;/* wll be overirde in btn*/
	position: absolute;
	box-sizing: border-box;
	
}

.actobj_richtext_fb {
	--btn-width: 54px;
	--btn-height: 40px;
	--btn-image: var(--ansCheckBtnFbGraphic);
	
	--btn-top: 0px;
	/*--btn-left: 0px; will be overide by the son:btn*/
	--btn-right:0px;
	--media-top: 0px; /*will beoverride by kod so not needed*/
	--media-left: 0px; /*will beoverride by kod so not needed*/
	--media-right: 0px;
	
	background-color: var(--white);
	cursor: default;/* wll be overirde in btn*/
	position: absolute;
	box-sizing: border-box;
}


/* for the pic ans in act */
.actobj_pic_ans {
	--btn-width: 22px;
	--btn-height: 22px;
	/*--btn-image: url(../images/fb_graphic_small.png); from kod */
	
	
	
	--btn-top: 10px;
	/*--btn-left: 0px; will be overide by the son:btn*/
	--btn-right:10px;
	
	
	/* to check if needed  */
	--media-top: 0px; /*will beoverride by kod */
	--media-left: 0px; /*will beoverride by kod */
	
	
	background-color: var(--white);
	cursor: default;/* wll be overirde in btn*/
	position: absolute;
	box-sizing: border-box;
	
}
/* for the different graphics of btn in the ans typ pic in the act */
.actobj_pic_ans[type = 'singleUp'] {
	
	--btn-image: var(--ansSingleUpGraphic);
}
.actobj_pic_ans[type = 'singleCheckedTrue'] {
	--btn-image: var(--anssingleCheckedTrueGraphic);
}
.actobj_pic_ans[type = 'singleCheckedFalse'] {
	--btn-image: var(--ansSingleCheckedFalseGraphic);
}
.actobj_pic_ans[type = 'multiUp'] {
	--btn-image: var(--ansMultiUpGraphic);
}
.actobj_pic_ans[type = 'multiCheckedTrue'] {
	--btn-image: var(--ansMultiCheckedTrueGraphic);
}
.actobj_pic_ans[type = 'multiCheckedFalse'] {
	--btn-image: var(--ansMultiCheckedFalseGraphic);
}

/* for text ans in act */
.actobj_text_ans {
	--btn-width: 22px;
	--btn-height: 22px;
	/*--btn-image: url(../images/fb_graphic_small.png); from kod */
	
	
	
	--btn-top: 15px;
	/*--btn-left: 0px; will be overide by the son:btn*/
	--btn-right:15px;
	
	/* to check if needed  */
	--media-top: 0px; /*will beoverride by kod */
	--media-left: 0px; /*will beoverride by kod */
	
	--font-family: Alef;
	--font-size: 18px;
	--text-align: right;
	--colorText: var(--darkBlue-custom);
	--padding-top: 10px;
	
	background-color: var(--white);
	cursor: default;/* wll be overirde in btn*/
	position: absolute;
	box-sizing: border-box;
	
}
/* for the different graphics of btn in the ans typ text in the act */
.actobj_text_ans[type = 'singleUp'] {
	--btn-image: var(--ansSingleUpGraphic);
}
.actobj_text_ans[type = 'singleCheckedTrue'] {
	--btn-image: var(--anssingleCheckedTrueGraphic);
}
.actobj_text_ans[type = 'singleCheckedFalse'] {
	--btn-image: var(--ansSingleCheckedFalseGraphic);
}
.actobj_text_ans[type = 'multiUp'] {
	--btn-image: var(--ansMultiUpGraphic);
}
.actobj_text_ans[type = 'multiCheckedTrue'] {
	--btn-image: var(--ansMultiCheckedTrueGraphic);
}
.actobj_text_ans[type = 'multiCheckedFalse'] {
	--btn-image: var(--ansMultiCheckedFalseGraphic);
}

/* for the video ans in act */
.actobj_video_ans {
	
	--btn-width: 22px;
	--btn-height: 22px;
	/*--btn-image: url(../images/fb_graphic_small.png); from kod */
	

	
	--btn-top: 10px;
	/*--btn-left: 0px; will be overide by the son:btn*/
	--btn-right:10px;
	
	/* to check if needed  */
	--media-top: 0px; /*will beoverride by kod */
	--media-left: 0px; /*will beoverride by kod */
	
	
	background-color: var(--white);
	cursor: default;/* wll be overirde in btn*/
	position: absolute;
	box-sizing: border-box;

}
/* for the different graphics of btn in the ans typ video in the act */
.actobj_video_ans[type = 'singleUp'] {
	--btn-image: var(--ansSingleUpGraphic);
}
.actobj_video_ans[type = 'singleCheckedTrue'] {
	--btn-image: var(--anssingleCheckedTrueGraphic);
}
.actobj_video_ans[type = 'singleCheckedFalse'] {
	--btn-image: var(--ansSingleCheckedFalseGraphic);
}
.actobj_video_ans[type = 'multiUp'] {
	--btn-image: var(--ansMultiUpGraphic);
}
.actobj_video_ans[type = 'multiCheckedTrue'] {
	--btn-image: var(--ansMultiCheckedTrueGraphic);
}
.actobj_video_ans[type = 'multiCheckedFalse'] {
	--btn-image: var(--ansMultiCheckedFalseGraphic);
}

/* for the richtext ans in act */
.actobj_richtext_ans{
	/* ther are no richtext in qmc for now  */
}
/* for the different graphics of btn in the ans typ richtext in the act */
.actobj_richtext_ans[type = 'singleUp'] {
	--btn-image: var(--ansSingleUpGraphic);
}
.actobj_richtext_ans[type = 'singleCheckedTrue'] {
	--btn-image: var(--anssingleCheckedTrueGraphic);
}
.actobj_richtext_ans[type = 'singleCheckedFalse'] {
	--btn-image: var(--ansSingleCheckedFalseGraphic);
}
.actobj_richtext_ans[type = 'multiUp'] {
	--btn-image: var(--ansMultiUpGraphic);
}
.actobj_richtext_ans[type = 'multiCheckedTrue'] {
	--btn-image: var(--ansMultiCheckedTrueGraphic);
}
.actobj_richtext_ans[type = 'multiCheckedFalse'] {
	--btn-image: var(--ansMultiCheckedFalseGraphic);
}

/* until here the ans objecvts in act */