From b02a67110b2eb9f1d455c0b4271d92aaa3b5e31e Mon Sep 17 00:00:00 2001
From: pero1203 <peter.hrvatin@gmail.com>
Date: Mon, 30 May 2022 12:48:12 +0200
Subject: [PATCH] Redesign - popravki napak - popravek nominalna/ordinalna
 preklop po dodajanju vprasanja, redesign urejanja povleci-spusti pri tabelah

---
 admin/survey/Branching.php                    |  28 +-
 admin/survey/script/branching.js              |   2 +-
 public/css/admin_new.css                      | 270 ++++++++++++------
 .../pages/survey_edit/questions/ranking.scss  | 238 ++++++++++-----
 4 files changed, 370 insertions(+), 168 deletions(-)

diff --git a/admin/survey/Branching.php b/admin/survey/Branching.php
index 42e17af12..15ba7dc6a 100644
--- a/admin/survey/Branching.php
+++ b/admin/survey/Branching.php
@@ -971,7 +971,7 @@ class Branching {
         echo '<span>' . $lang['srv_new_question_icon'] . '</span>';
         echo '<div class="tip_sample">';
         echo '<div class="tip_sample_text">' . $lang['srv_tip_sample_t21'] . '</div>';
-        echo '<div class="tip_sample_option"><textarea style="width:150px; height:12px">abc</textarea></div>';
+        echo '<div class="tip_sample_option"><textarea style="width:150px; height:25px; padding:0 4px;">abc</textarea></div>';
         echo '</div>';
         echo '</div>';
 
@@ -3987,8 +3987,11 @@ class Branching {
 				$num = mysqli_num_rows($sql1);
 				$size = $num * 50;
 
+
+                echo '<div class="ranking_holder">';
+
 				//zaslon razdelimo na dva dela - izris leve strani
-				echo '<div id="half" class="dropzone '.($this->lang_id==null?'allow_new':'').'" style="width: 50%; min-height:' . $size . 'px; float: left; border-right: 1px solid black;">';
+				echo '<div id="half" class="dropzone '.($this->lang_id==null?'allow_new':'').'">';
 				
 				while ($row1 = mysqli_fetch_array($sql1)) {
 					
@@ -4017,17 +4020,21 @@ class Branching {
 					if ($length > 30) $class = 'ranking_long'; $class = 'ranking';
 					
 					echo '<div class="variabla" id="variabla_'.$row1['id'].'" other="'.$row1['other'].'">';
+
 					echo '<span class="faicon move_updown inline inline_move" title="'.$lang['srv_move'].'"></span>';
 					
+                    
+
+					echo '<div id="vre_id_'.$row1['id'].'" class="vrednost_inline '.$class.'" style="float:none" contenteditable="'.(!$locked?'true':'false').'" tabindex="1" vre_id="'.$row1['id'].'" '.(strpos($row1['naslov'], $lang['srv_new_text'])!==false || $this->lang_id!=null ?' default="1"':'').'>'.$row1['naslov'].'</div>';
+					
+
                     echo ' <div class="icons_holder">';
                     echo ' <span class="faicon delete small inline inline_delete" title="'.$lang['srv_brisivrednost'].'"></span>';
 					echo ' <span class="faicon odg_hidden inline inline_hidden '. (($row1['hidden'] == 1) ? 'show-hidden' : '').(($row1['hidden'] == 2) ? 'show-disable' : '') .'" odg_vre="'.$row1['hidden'].'" odg_id="'.$row1['id'].'" title="'.$lang['srv_hide-disable_answer-'.$row1['hidden']].'"></span>';
 					echo ' <span class="faicon odg_if_not inline inline_if_not '.(!$userAccess->checkUserAccess($what='if') ? 'user_access_locked' : '').'" onclick="vrednost_condition_editing(\''.$row1['id'].'\'); return false;" title="'.$lang['srv_podif_edit'].'"></span>';
 					echo ' <span class="faicon edit2 inline inline_edit"></span>';
                     echo ' </div>';
-
-					echo '<div id="vre_id_'.$row1['id'].'" class="vrednost_inline '.$class.'" style="float:none" contenteditable="'.(!$locked?'true':'false').'" tabindex="1" vre_id="'.$row1['id'].'" '.(strpos($row1['naslov'], $lang['srv_new_text'])!==false || $this->lang_id!=null ?' default="1"':'').'>'.$row1['naslov'].'</div>';
-					
+                    
                     // koda za notranji IF
 					if ($row1['if_id'] > 0) {
 						echo ' <span class="red">*</span>';
@@ -4039,18 +4046,20 @@ class Branching {
 						if ($this->condition_check($row1['if_id']) != 0)
 							echo ' <span class="faicon warning icon-orange"></span>';
 					}
-					echo '</div>';
 
+					echo '</div>';
 				}
+
 				echo '</div>';
 				
+
 				//izris desne strani**************************************************************************************
 				
 				//***********za skatlasto obliko
 				$display_drag_and_drop_new_look = ($spremenljivkaParams->get('display_drag_and_drop_new_look') ? $spremenljivkaParams->get('display_drag_and_drop_new_look') : 0); //za checkbox
 				//***********za skatlasto obliko - konec
 
-				echo '<div id="half2" class="dropzone" style="width: 49%; min-height:' . $size . 'px; float: right;">';
+				echo '<div id="half2" class="dropzone">';
 				
 				$sql2 = sisplet_query("SELECT id, naslov, variable, vrstni_red FROM srv_grid WHERE spr_id='$spremenljivka' AND other=0 ORDER BY vrstni_red");
 				$row2 = mysqli_fetch_array($sql2);
@@ -4119,12 +4128,11 @@ class Branching {
 				echo	'</ul>';
 
 				
-				echo		'</div>'; //half2_$spremenljivka
+				echo		'</div>';   // half2_$spremenljivka
 
-				echo '<div class="clr"></div>';
+                echo '</div>';  // end ranking_holder;
 
 			//***********************Drag and drop grid konec*************************************************************
-			
 			}
 			//Image hot spot********************************************************************************************************
 			elseif( ($row['tip'] == 6) && $row['enota'] == 10){	//image hot spot
diff --git a/admin/survey/script/branching.js b/admin/survey/script/branching.js
index 8a686ad33..f791e996c 100644
--- a/admin/survey/script/branching.js
+++ b/admin/survey/script/branching.js
@@ -113,7 +113,7 @@ function branching_click(event) {
         id = id.replace('edit_', '');
 		
 		value = ta.parent().parent().parent().find('.spremenljivka_content').attr('skala');
-		if(value == 0) value = 1;
+		if(value == 0 || value == -1) value = 1;
 		else value = 0;
 		
         scale_ordnom(id, value);
diff --git a/public/css/admin_new.css b/public/css/admin_new.css
index 79aeb032d..4b4ec084f 100644
--- a/public/css/admin_new.css
+++ b/public/css/admin_new.css
@@ -17841,90 +17841,6 @@ div.jezik_row.tip_17 .variable_holder .ranking_holder .dragdrop_frame {
   text-indent: -20px;
   text-align: left;
 }
-li.spr_tip_17 .variable_holder .ranking_holder .dragdrop_frame_grid,
-div.spr_tip_17 .variable_holder .ranking_holder .dragdrop_frame_grid,
-div.jezik_row.tip_17 .variable_holder .ranking_holder .dragdrop_frame_grid {
-  font-size: 14px;
-  width: 230px;
-  height: 25px;
-  padding: 0 0 2px 0;
-  margin: 0px auto 10px auto;
-  border: 1px black dashed;
-  background-color: #E5E5E5;
-  text-indent: -20px;
-  text-align: left;
-}
-li.spr_tip_17 .variable_holder .ranking_holder .dragdrop_frame_grid_box,
-div.spr_tip_17 .variable_holder .ranking_holder .dragdrop_frame_grid_box,
-div.jezik_row.tip_17 .variable_holder .ranking_holder .dragdrop_frame_grid_box {
-  font-size: 14px;
-  width: 230px;
-  height: 30px;
-  padding: 0 0 2px 0;
-  margin: 10px auto 0px auto;
-  border-left: 1px black dashed !important;
-  border-right: 1px black dashed !important;
-  border-bottom: 1px black dashed !important;
-  text-indent: -20px;
-  text-align: left;
-}
-li.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_box,
-div.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_box,
-div.jezik_row.tip_17 .variable_holder .ranking_holder .drag_and_drop_box {
-  cursor: pointer;
-  width: 230px;
-  padding: 5px;
-  margin: 0px auto 10px auto;
-  border: 1px solid #000;
-  height: 15px;
-  text-align: center;
-  overflow: hidden;
-  background-color: white;
-  cursor: pointer;
-  width: 230px;
-  padding: 5px;
-  margin: 0px auto 10px auto;
-  border: 1px solid #000;
-  height: 15px;
-  text-align: center;
-  overflow: hidden;
-  background-color: white;
-}
-li.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_box img,
-div.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_box img,
-div.jezik_row.tip_17 .variable_holder .ranking_holder .drag_and_drop_box img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-li.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop,
-div.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop,
-div.jezik_row.tip_17 .variable_holder .ranking_holder .drag_and_drop {
-  top: -6px;
-  left: -6px;
-}
-li.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_right,
-div.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_right,
-div.jezik_row.tip_17 .variable_holder .ranking_holder .drag_and_drop_right {
-  top: -6px !important;
-  left: -6px !important;
-}
-li.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_box_right,
-div.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_box_right,
-div.jezik_row.tip_17 .variable_holder .ranking_holder .drag_and_drop_box_right {
-  top: 15px !important;
-  left: -6px !important;
-}
-li.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_box_right_after_refresh,
-div.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_box_right_after_refresh,
-div.jezik_row.tip_17 .variable_holder .ranking_holder .drag_and_drop_box_right_after_refresh {
-  left: -6px !important;
-}
-li.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_box_right_over,
-div.spr_tip_17 .variable_holder .ranking_holder .drag_and_drop_box_right_over,
-div.jezik_row.tip_17 .variable_holder .ranking_holder .drag_and_drop_box_right_over {
-  left: -6px !important;
-}
 li.spr_tip_17 .variable_holder .ranking_holder .inline_labele_podrocij,
 div.spr_tip_17 .variable_holder .ranking_holder .inline_labele_podrocij,
 div.jezik_row.tip_17 .variable_holder .ranking_holder .inline_labele_podrocij {
@@ -17959,6 +17875,192 @@ div.jezik_row.tip_17 .variable_holder .ranking_holder .enka-vizualna-skala {
   float: left;
 }
 
+li.spr_tip_6 .variable_holder .ranking_holder,
+div.spr_tip_6 .variable_holder .ranking_holder,
+div.jezik_row.tip_6 .variable_holder .ranking_holder,
+li.spr_tip_16 .variable_holder .ranking_holder,
+div.spr_tip_16 .variable_holder .ranking_holder,
+div.jezik_row.tip_16 .variable_holder .ranking_holder {
+  display: flex;
+  margin-top: 16px;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half,
+div.spr_tip_6 .variable_holder .ranking_holder #half,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half,
+li.spr_tip_16 .variable_holder .ranking_holder #half,
+div.spr_tip_16 .variable_holder .ranking_holder #half,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half {
+  width: 50%;
+  padding-right: 16px;
+  margin-right: 16px;
+  border-right: 1px #E5E5E5 solid;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half .variabla,
+div.spr_tip_6 .variable_holder .ranking_holder #half .variabla,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half .variabla,
+li.spr_tip_16 .variable_holder .ranking_holder #half .variabla,
+div.spr_tip_16 .variable_holder .ranking_holder #half .variabla,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half .variabla {
+  margin-bottom: 16px;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half .variabla:last-child,
+div.spr_tip_6 .variable_holder .ranking_holder #half .variabla:last-child,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half .variabla:last-child,
+li.spr_tip_16 .variable_holder .ranking_holder #half .variabla:last-child,
+div.spr_tip_16 .variable_holder .ranking_holder #half .variabla:last-child,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half .variabla:last-child {
+  margin-bottom: 0;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half .variabla .ranking,
+div.spr_tip_6 .variable_holder .ranking_holder #half .variabla .ranking,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half .variabla .ranking,
+li.spr_tip_16 .variable_holder .ranking_holder #half .variabla .ranking,
+div.spr_tip_16 .variable_holder .ranking_holder #half .variabla .ranking,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half .variabla .ranking {
+  overflow: hidden;
+  box-sizing: border-box;
+  flex-grow: 1;
+  width: calc(100% - 120px);
+  max-width: 250px;
+  min-height: 36px;
+  padding: 8px;
+  margin: 0 auto 0 auto;
+  font-size: 14px;
+  text-align: center;
+  background-color: #F8F8F8;
+  border: 1px solid #E5E5E5;
+  border-radius: 4px;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half .variabla .ranking img,
+div.spr_tip_6 .variable_holder .ranking_holder #half .variabla .ranking img,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half .variabla .ranking img,
+li.spr_tip_16 .variable_holder .ranking_holder #half .variabla .ranking img,
+div.spr_tip_16 .variable_holder .ranking_holder #half .variabla .ranking img,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half .variabla .ranking img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half .variabla .ranking_long,
+div.spr_tip_6 .variable_holder .ranking_holder #half .variabla .ranking_long,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half .variabla .ranking_long,
+li.spr_tip_16 .variable_holder .ranking_holder #half .variabla .ranking_long,
+div.spr_tip_16 .variable_holder .ranking_holder #half .variabla .ranking_long,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half .variabla .ranking_long {
+  overflow: hidden;
+  box-sizing: border-box;
+  max-width: 250px;
+  max-height: 36px;
+  padding: 8px;
+  margin: 0 auto 0 auto;
+  font-size: 11px;
+  text-align: center;
+  background-color: #F8F8F8;
+  border: 1px solid #E5E5E5;
+  border-radius: 4px;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half .variabla .ranking_long img,
+div.spr_tip_6 .variable_holder .ranking_holder #half .variabla .ranking_long img,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half .variabla .ranking_long img,
+li.spr_tip_16 .variable_holder .ranking_holder #half .variabla .ranking_long img,
+div.spr_tip_16 .variable_holder .ranking_holder #half .variabla .ranking_long img,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half .variabla .ranking_long img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half2,
+div.spr_tip_6 .variable_holder .ranking_holder #half2,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half2,
+li.spr_tip_16 .variable_holder .ranking_holder #half2,
+div.spr_tip_16 .variable_holder .ranking_holder #half2,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half2 {
+  width: 49%;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title,
+div.spr_tip_6 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title,
+li.spr_tip_16 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title,
+div.spr_tip_16 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title {
+  box-sizing: border-box;
+  width: 250px;
+  min-height: 36px;
+  height: auto;
+  padding: 8px;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 14px;
+  border: 1px dashed #E5E5E5;
+  border-bottom: 0;
+  border-radius: 4px 4px 0 0;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid,
+div.spr_tip_6 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid,
+li.spr_tip_16 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid,
+div.spr_tip_16 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid {
+  box-sizing: border-box;
+  width: 250px;
+  height: 36px;
+  padding: 8px;
+  margin: 0 auto 16px auto;
+  font-size: 14px;
+  text-align: center;
+  background-color: #F8F8F8;
+  border: 1px dashed #E5E5E5;
+  border-radius: 0 0 4px 4px;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid_box,
+div.spr_tip_6 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid_box,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid_box,
+li.spr_tip_16 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid_box,
+div.spr_tip_16 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid_box,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half2 .dragdrop_frame_grid_box {
+  box-sizing: border-box;
+  width: 250px;
+  height: 36px;
+  padding: 8px;
+  margin: 0 auto;
+  font-size: 14px;
+  text-align: center;
+  background-color: #FFFFFF;
+  border: 1px dashed #C4C4C4;
+  border-top: 0;
+  border-radius: 0 0 4px 4px;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title_box,
+div.spr_tip_6 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title_box,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title_box,
+li.spr_tip_16 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title_box,
+div.spr_tip_16 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title_box,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half2 .grid_inline_droppable_title_box {
+  box-sizing: border-box;
+  width: 250px;
+  min-height: 36px;
+  height: auto;
+  padding: 8px;
+  margin: 0 auto 16px auto;
+  text-align: center;
+  font-size: 14px;
+  border: 0;
+}
+li.spr_tip_6 .variable_holder .ranking_holder #half2 li:last-child .grid_inline_droppable_title_box,
+li.spr_tip_6 .variable_holder .ranking_holder #half2 li:last-child .dragdrop_frame_grid,
+div.spr_tip_6 .variable_holder .ranking_holder #half2 li:last-child .grid_inline_droppable_title_box,
+div.spr_tip_6 .variable_holder .ranking_holder #half2 li:last-child .dragdrop_frame_grid,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half2 li:last-child .grid_inline_droppable_title_box,
+div.jezik_row.tip_6 .variable_holder .ranking_holder #half2 li:last-child .dragdrop_frame_grid,
+li.spr_tip_16 .variable_holder .ranking_holder #half2 li:last-child .grid_inline_droppable_title_box,
+li.spr_tip_16 .variable_holder .ranking_holder #half2 li:last-child .dragdrop_frame_grid,
+div.spr_tip_16 .variable_holder .ranking_holder #half2 li:last-child .grid_inline_droppable_title_box,
+div.spr_tip_16 .variable_holder .ranking_holder #half2 li:last-child .dragdrop_frame_grid,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half2 li:last-child .grid_inline_droppable_title_box,
+div.jezik_row.tip_16 .variable_holder .ranking_holder #half2 li:last-child .dragdrop_frame_grid {
+  margin-bottom: 0;
+}
+
 /*
 To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates
diff --git a/resources/sass/admin_new/pages/survey_edit/questions/ranking.scss b/resources/sass/admin_new/pages/survey_edit/questions/ranking.scss
index f4750c24a..a4ce3861d 100644
--- a/resources/sass/admin_new/pages/survey_edit/questions/ranking.scss
+++ b/resources/sass/admin_new/pages/survey_edit/questions/ranking.scss
@@ -12,7 +12,7 @@ and open the template in the editor.
 
 li.spr_tip_17,
 div.spr_tip_17,
-div.jezik_row.tip_17{ 
+div.jezik_row.tip_17{
 
     .variable_holder .ranking_holder{
 
@@ -177,12 +177,6 @@ div.jezik_row.tip_17{
         }
 
 
-
-
-
-
-        
-        
         .dragdrop_frame {
             font-size: 14px;
             width: 230px;
@@ -194,72 +188,7 @@ div.jezik_row.tip_17{
             text-indent: -20px;
             text-align: left;
         }
-        .dragdrop_frame_grid {
-            font-size: 14px;
-            width: 230px;
-            height: 25px;
-            padding: 0 0 2px 0;
-            margin: 0px auto 10px auto;
-            border: 1px black dashed;
-            background-color: $gray;
-            text-indent: -20px;
-            text-align: left;
-        }
-        .dragdrop_frame_grid_box {
-            font-size: 14px;
-            width: 230px;
-            height: 30px;
-            padding: 0 0 2px 0;
-            margin: 10px auto 0px auto;
-            border-left: 1px black dashed !important;
-            border-right: 1px black dashed !important;
-            border-bottom: 1px black dashed !important;
-            text-indent: -20px;
-            text-align: left;
-        }
-        .drag_and_drop_box {
-            cursor: pointer;
-            width: 230px;
-            padding: 5px;
-            margin: 0px auto 10px auto;
-            border: 1px solid #000;
-            height: 15px;
-            text-align: center;
-            overflow: hidden;
-            background-color: white;
-            cursor: pointer;
-            width: 230px;
-            padding: 5px;
-            margin: 0px auto 10px auto;
-            border: 1px solid #000;
-            height: 15px;
-            text-align: center;
-            overflow: hidden;
-            background-color: white;
-            img {
-                display: block;
-                margin-left: auto;
-                margin-right: auto;
-            }
-        }
-        .drag_and_drop {
-            top: -6px;
-            left: -6px;
-        }
-        .drag_and_drop_right {
-            top: -6px !important;
-            left: -6px !important;
-        }
-        .drag_and_drop_box_right {
-            top: 15px !important;
-            left: -6px !important;
-        }
-        .drag_and_drop_box_right_after_refresh {
-            left: -6px !important;
-        }
-        .drag_and_drop_box_right_over {
-            left: -6px !important;
-        }
+   
         .inline_labele_podrocij {
             text-align: center !important;
         }
@@ -292,3 +221,166 @@ div.jezik_row.tip_17{
 }
 
 
+li.spr_tip_6 .variable_holder .ranking_holder,
+div.spr_tip_6 .variable_holder .ranking_holder,
+div.jezik_row.tip_6 .variable_holder .ranking_holder,
+li.spr_tip_16 .variable_holder .ranking_holder,
+div.spr_tip_16 .variable_holder .ranking_holder,
+div.jezik_row.tip_16 .variable_holder .ranking_holder{ 
+    display: flex;
+
+    margin-top: 16px;
+
+    #half{
+        width: 50%;
+
+        padding-right: 16px;
+        margin-right: 16px;
+
+        border-right: 1px $gray solid;
+
+        .variabla{
+            margin-bottom: 16px;
+
+            &:last-child{
+                margin-bottom: 0;
+            }
+
+            .ranking {
+                overflow: hidden;
+                box-sizing: border-box;
+                flex-grow: 1;
+
+                width: calc(100% - 120px);
+                max-width: 250px;
+                min-height: 36px;
+                padding: 8px;
+                margin: 0 auto 0 auto;
+                
+                font-size: 14px;
+                text-align: center;
+
+                background-color: $light-gray;
+                border: 1px solid $gray;
+                border-radius: 4px;
+                
+                img {
+                    display: block;
+                    margin-left: auto;
+                    margin-right: auto;
+                }
+            }
+
+            .ranking_long {
+                overflow: hidden;
+                box-sizing: border-box;
+
+                max-width: 250px;
+                max-height: 36px;
+                padding: 8px;
+                margin: 0 auto 0 auto;
+                
+                font-size: 11px;
+                text-align: center;
+
+                background-color: $light-gray;
+                border: 1px solid $gray;
+                border-radius: 4px;
+                
+                img {
+                    display: block;
+                    margin-left: auto;
+                    margin-right: auto;
+                }
+            }
+        }
+
+        
+        
+    }
+
+    // Desna stran
+    #half2{
+        width: 49%;
+
+
+        .grid_inline_droppable_title{
+            box-sizing: border-box;
+
+            width: 250px;
+            min-height: 36px;
+            height: auto;
+            padding: 8px;
+            margin: 0 auto;
+
+            text-align: center;
+            font-size: 14px;
+
+            border: 1px dashed $gray;
+            border-bottom: 0;
+            border-radius: 4px 4px 0 0;
+        }
+
+        .dragdrop_frame_grid {
+            box-sizing: border-box;
+
+            width: 250px;
+            height: 36px;
+            padding: 8px;
+            margin: 0 auto 16px auto;
+            
+            font-size: 14px;
+            text-align: center;
+
+            background-color: $light-gray;
+            border: 1px dashed $gray;
+            border-radius: 0 0 4px 4px;
+        }
+
+
+        .dragdrop_frame_grid_box {
+            box-sizing: border-box;
+
+            width: 250px;
+            height: 36px;
+            padding: 8px;
+            margin: 0 auto;
+            
+            font-size: 14px;
+            text-align: center;
+
+            background-color: $white;
+            border: 1px dashed $dark-gray;
+            border-top: 0;
+            border-radius: 0 0 4px 4px;
+        }
+
+        .grid_inline_droppable_title_box{
+            box-sizing: border-box;
+
+            width: 250px;
+            min-height: 36px;
+            height: auto;
+            padding: 8px;
+            margin: 0 auto 16px auto;
+
+            text-align: center;
+            font-size: 14px;
+
+            border: 0;
+        }
+
+
+        li:last-child{
+            .grid_inline_droppable_title_box,
+            .dragdrop_frame_grid{
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    
+    
+}
+
+