@charset "utf-8";
/*---------------------actQDragG----------------*/
/* optional class for each act for general propeties that are specific to this act*/
.screen {
	/* for qdragG act */
	--height-of-act-QDragG: 64px;/*since this act is not "isParts" so we need to use the position of the act itself inside the screen*/
	--QdragG-reka-image: url(../images/closet1.png); /*the image in the reka*/
	
}
	
/*the rectangle that is the reka for the boxes*/	
.ett_reka_for_qDragG {
	position: absolute;
	background-color: #A7DEEF;
	top: var(--height-of-act-QDragG);
	left: 0px;
	width: 948px;
	height: 426.7px;
	
	
}
/*the closet that is the pic in the reka of the boxes*/
.ett_reka_pic_for_qDragG {
	position: absolute;
	background-color: var(--black-transparent);
	top: calc(38px + var(--height-of-act-QDragG));/*since this act is not "isParts" so we need to use the position of the act itself inside the screen*/
	left: 868.4px;
	width: 175.4px;
	height: 398.8px;
	background-image: var(--QdragG-reka-image);
	background-size: cover; 
	background-repeat: no-repeat;
	background-position: left top;
}



/*class for general box properties, each box has also id and special propeties as position and graphic*/
.ett_QDragGAct_box {
	position: absolute;
	background-size: 100%; /* acn be also 100%*/
	background-repeat: no-repeat;
	background-position: left top;
}

/*each box has id and special propeties as position and graphic maximum: 6 boxes*/
#ett_QDragGAct_box1 {
	left: 17px;
	top: calc(11px + var(--height-of-act-QDragG)); 
	width: 251px;
	height: 196px;
	background-image: url(../images/box1.png);
}
#ett_QDragGAct_box2 {

	left: 312px;
	top: calc(25px + var(--height-of-act-QDragG)); 
	width: 226px;
	height: 206px;
	background-image: url(../images/box2.png);
}
#ett_QDragGAct_box3 {
	left: 585px;
	top: calc(19px + var(--height-of-act-QDragG)); 
	width: 221px;
	height: 189px;
	background-image: url(../images/box3.png);
	
}
#ett_QDragGAct_box4 {
	left: 123px;
	top: calc(202px + var(--height-of-act-QDragG)); 
	width: 226px;
	height: 206px;
	background-image: url(../images/box2.png);
}
#ett_QDragGAct_box5 {
	left: 413px;
	top: calc(229px + var(--height-of-act-QDragG)); 
	width: 221px;
	height: 189px;
	background-image: url(../images/box3.png);
}
#ett_QDragGAct_box6 {
	left: 694px;
	top: calc(213px + var(--height-of-act-QDragG)); 
	width: 251px;
	height: 199px;
	background-image: url(../images/box1.png);
}

/*class for general box title text, each title has also id and special propeties as position*/
.ett_QDragGAct_box_title{ /* box 6 is equal to 1 so also title 6 == title 1 */
	position: absolute;
	direction: rtl;
	font-size: 17px;
	font-family: "Alef";
	text-align: center;
	font-weight: bold;
	overfloW: hidden;
	cursor: default;
	/*box-sizing: border-box;*/
	user-select: none;
	transform: skewY(30deg);
	color: var(--red-custom); /*#F27064;*/
	line-height: 90%;/* we need 2 lines to get into the title */
}

/*each title has also id and special propeties as position, mac 6 titles, one for each box*/
#ett_QDragGAct_box_title_box1{
	left: 30px;
	top: 122px;
	width: 90px;
	height: 36px;
}
#ett_QDragGAct_box_title_box6{
	left: 30px;
	top: 122px;
	width: 90px;
	height: 36px;
}
#ett_QDragGAct_box_title_box2{
	left: 35px;
	top: 128px;
	width: 80px;
	height: 40px;
}

#ett_QDragGAct_box_title_box4{
	left: 35px;
	top: 128px;
	width: 80px;
	height: 40px;
}
#ett_QDragGAct_box_title_box3{
	left: 42px;
	top: 90px;
	width: 95px;
	height: 43px;
}
#ett_QDragGAct_box_title_box5{
	left: 42px;
	top: 90px;
	width: 95px;
	height: 43px;
}



/* class for the words (items) that are in eqch box, each word in each box has also id with special position */
.ett_QDragGAct_box_textItem{
	position: absolute;
	direction: rtl;
	
	width: 105px;
	height: 28.5px;
	font-size: 18px;
	font-family: "Alef";
	text-align: right;
	font-weight: bold;
	cursor: default;
	color: var(--black);
	overfloW: hidden;
}

/* each word in each box has also id with special position , 5 words for each box, so 5*6 id's*/
#ett_textItem1box1{
	left: 39.5px;
	top: 96.8px;
}
#ett_textItem2box1{
	left: 66.5px;
	top: 76.8px;
}
#ett_textItem3box1{
	left: 7px;
	top: 62.3px;
}
#ett_textItem4box1{
	left: 41.5px;
	top: 42.3px;
}
#ett_textItem5box1{
	left: 21px;
	top: 19.8px;
}
#ett_textItem1box6{
	left: 39.5px;
	top: 96.8px;
}
#ett_textItem2box6{
	left: 66.5px;
	top: 76.8px;
}
#ett_textItem3box6{
	left: 7px;
	top: 62.3px;
}
#ett_textItem4box6{
	left: 41.5px;
	top: 42.3px;
}
#ett_textItem5box6{
	left: 21px;
	top: 20px;
}

#ett_textItem5box2{
	left: 50.5px;
	top: 1.0px;
}
#ett_textItem4box2{
	left: 43px;
	top: 24px;
}
#ett_textItem3box2{
	left: 9px;
	top: 44px;
}
#ett_textItem2box2{
	left: 70px;
	top: 57px;
}
#ett_textItem1box2{
	left: 42px;
	top: 76px;
}

#ett_textItem5box4{
	left: 50.5px;
	top: 1.0px;
}
#ett_textItem4box4{
	left: 43px;
	top: 24px;
}

#ett_textItem3box4{
	left: 9px;
	top: 44px;
}
#ett_textItem2box4{
	left: 70px;
	top: 57px;
}
#ett_textItem1box4{
	left: 42px;
	top: 76px;
}
#ett_textItem5box3{
	left: 70px;
	top: -15px;
}
#ett_textItem4box3{
	left: 67px;
	top: 8px;
}

#ett_textItem3box3{
	left: 32px;
	top: 28px;
}
#ett_textItem2box3{
	left: 93px;
	top: 40px;
}
#ett_textItem1box3{
	left: 66px;
	top: 59px;
}

#ett_textItem5box5{
	left: 70px;
	top: -15px;
}
#ett_textItem4box5{
	left: 67px;
	top: 8px;
}

#ett_textItem3box5{
	left: 32px;
	top: 28px;
}
#ett_textItem2box5{
	left: 93px;
	top: 40px;
}
#ett_textItem1box5{
	left: 66px;
	top: 59px;
}

/* class for the fb field of this act*/
.ett_drag2boxes_fb {
	left: 1px;
	/*top: calc(508.8px + var(--height-of-act-QDragG));*/ /*calc does not work here*/
	top: 572.8px;
	width: 948px;
	height: 40.2px; 
}

/* class of the field that from it we drag the phrases*/
.ett_drag2boxesItems_text{
	position: absolute;
	direction: rtl;
	
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 20px;
	padding-left: 20px;
	
	box-sizing: border-box;
	user-select: none;
	cursor: default;
	overfloW: hidden;
	white-space: pre-line;/*pre-wrap - the samw but with tabs. but they good only  without color*/
	/*tab-size: 200px;*/
	font-size: 38px;
	font-family: "Alef";
	text-align: right;
	background-color: var(--black-transparent);/* var(--white); /**/
	left: 1px;
	top: 493.8px;
	width: 948px;
	height: 78px; 
	line-height: 35px;
	
}
/* class for the phrases it self that we drag from the field to the boxes */
.ett_drag2boxesItems_item{
	position: relative;/*ask nimrod!!, only with relative i can see all the text nice and with the inline-block i can drag it but the billets does not sit good */
	direction: rtl;
	
	box-sizing: border-box;
	user-select: none;
	cursor: pointer;
	overfloW: hidden;
	/*white-space: pre-line;*/
	
	font-size: 38px;
	font-family: "Alef";
	text-align: right;
	
	display: inline-block;
	/*display: inline;*/
	/*line-height: 50px;*/
}