From bbf5f1059d0971555998ac08fc11f13e0b92f4da Mon Sep 17 00:00:00 2001
From: pero1203 <peter.hrvatin@gmail.com>
Date: Mon, 31 Oct 2022 13:59:18 +0100
Subject: [PATCH] Redesign - tema ankete - popravki

---
 .../Vprasanja/NumberController.php            | 19 ++++----
 .../RadioCheckboxSelectController.php         | 20 ++++-----
 main/survey/skins/1kaBlack.css                | 42 +++++++++++++++++-
 main/survey/skins/1kaBlue.css                 | 42 +++++++++++++++++-
 main/survey/skins/1kaGreen.css                | 42 +++++++++++++++++-
 main/survey/skins/1kaNature.css               | 42 +++++++++++++++++-
 main/survey/skins/1kaOffice.css               | 42 +++++++++++++++++-
 main/survey/skins/1kaOrange.css               | 42 +++++++++++++++++-
 main/survey/skins/1kaPurple.css               | 42 +++++++++++++++++-
 main/survey/skins/1kaRed.css                  | 42 +++++++++++++++++-
 main/survey/skins/Cdi.css                     | 42 +++++++++++++++++-
 main/survey/skins/Fdv.css                     | 42 +++++++++++++++++-
 main/survey/skins/Uni.css                     | 42 +++++++++++++++++-
 public/css/main.css                           | 12 ++++--
 resources/sass/main/main/content.scss         |  2 +-
 resources/sass/main/main/input.scss           | 11 +++--
 resources/sass/main/skins/1ka/1ka.scss        | 43 ++++++++++++++++++-
 17 files changed, 528 insertions(+), 41 deletions(-)

diff --git a/main/survey/app/Controllers/Vprasanja/NumberController.php b/main/survey/app/Controllers/Vprasanja/NumberController.php
index ecfc02325..e862cc5de 100644
--- a/main/survey/app/Controllers/Vprasanja/NumberController.php
+++ b/main/survey/app/Controllers/Vprasanja/NumberController.php
@@ -132,7 +132,9 @@ class NumberController extends Controller
 
                 # če imamo enoto na levi jo izpišemo
                 if ($row['enota'] == 1) {
+                    echo '<label for="spremenljivka_' . $spremenljivka . '_vrednost_' . $row2['vrstni_red'] . '" ' . ($row['ranking_k'] == '1' && get('mobile') == 0 ? ' style="display:none;"' : '') . '>';
                     echo $naslov;
+                    echo '</label>';
                 }
 
                 echo ' <input type="text" class="width_' . $taWidth . '" name="vrednost_' . $spremenljivka . '[]"'
@@ -141,13 +143,13 @@ class NumberController extends Controller
                     . ' onkeypress="checkNumber(this, ' . $row['cela'] . ', ' . $row['decimalna'] . ');"'
                     . ' onkeyup="checkNumber(this, ' . $row['cela'] . ', ' . $row['decimalna'] . '); checkBranching();"'
                     . (!$missing ? '' : ' disabled') . '> ' . "\n";
+
                 # če imamo enoto na desni jo izpišemo
                 if ($row['enota'] == 2) {
+                    echo '<label for="spremenljivka_' . $spremenljivka . '_vrednost_' . $row2['vrstni_red'] . '" ' . ($row['ranking_k'] == '1' && get('mobile') == 0 ? ' style="display:none;"' : '') . '>';
                     echo $naslov;
-                }
-
-                echo '<label for="spremenljivka_' . $spremenljivka . '_vrednost_' . $row2['vrstni_red'] . '" ' . ($row['ranking_k'] == '1' && get('mobile') == 0 ? ' style="display:none;"' : '') . '>';
-                echo '</label>';
+                    echo '</label>';
+                }  
 
             } else {
                 # imamo polje drugo - ne vem, zavrnil...
@@ -356,11 +358,12 @@ class NumberController extends Controller
                     $hide_missing = true;
 
                 echo '<div class="variabla' . $oblika['cssFloat'] . ' missing"  id="vrednost_if_' . $oKey . '"' . ' ' . ($hide_missing ? ' style="display:none"' : '') . '>';
-                echo '<input type="checkbox" name="vrednost_mv_' . $spremenljivka . '[]" id="' . $_id . '" value="' . $oKey . '"' . $_checked . ($_disabled ? ' disabled' : '') . ' data-calculation="0" onclick="checkBranching(); ' . ($checkbox_limit > 0 ? 'checkboxLimit(\'' . $spremenljivka . '\', \'' . $oKey . '\', \'' . $checkbox_limit . '\');' : '') . ' checkMissing(this);"> ';
+                echo '  <label for="'.$_id.'">';
+                echo '      <input type="checkbox" name="vrednost_mv_' . $spremenljivka . '[]" id="' . $_id . '" value="' . $oKey . '"' . $_checked . ($_disabled ? ' disabled' : '') . ' data-calculation="0" onclick="checkBranching(); ' . ($checkbox_limit > 0 ? 'checkboxLimit(\'' . $spremenljivka . '\', \'' . $oKey . '\', \'' . $checkbox_limit . '\');' : '') . ' checkMissing(this);"> ';
                 // Font awesome checkbox
-                echo '<label for="' . $_id . '">';
-				echo '<span class="enka-checkbox-radio" '.((Helper::getCustomCheckbox() != 0) ? 'style="font-size:' . Helper::getCustomCheckbox() . 'px;"' : '').'></span>';
-				echo '' . $other['naslov'] . '</label>';
+				echo '      <span class="enka-checkbox-radio" '.((Helper::getCustomCheckbox() != 0) ? 'style="font-size:' . Helper::getCustomCheckbox() . 'px;"' : '').'></span>';
+				echo $other['naslov'];
+                echo '  </label>';
                 echo '</div>';
             }
         }
diff --git a/main/survey/app/Controllers/Vprasanja/RadioCheckboxSelectController.php b/main/survey/app/Controllers/Vprasanja/RadioCheckboxSelectController.php
index 6faf6635d..3fc4b41c6 100644
--- a/main/survey/app/Controllers/Vprasanja/RadioCheckboxSelectController.php
+++ b/main/survey/app/Controllers/Vprasanja/RadioCheckboxSelectController.php
@@ -282,11 +282,9 @@ class RadioCheckboxSelectController extends Controller
                         $otherHeight = ($spremenljivkaParams->get('otherHeight') ? $spremenljivkaParams->get('otherHeight') : 1);
 
                         if ($otherHeight > 1)
-                            echo ' <textarea name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" rows="' . $otherHeight . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching();">' . $row3['text'] . '</textarea>';
+                            echo ' <textarea name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" class="input_other" rows="' . $otherHeight . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching();">' . $row3['text'] . '</textarea>';
                         else
-                            echo ' <input type="text" name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" value="' . $row3['text'] . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching();" />';
-
-                        //echo '   <input type="text" name="textfield_'.$row1['id'].'" id="spremenljivka_'.$spremenljivka.'_textfield_'.$row1['id'].'" value="'.$row3['text'].'" '.($_disabled ? ' disabled' : '').' onclick="$(\'#spremenljivka_'.$spremenljivka.'_vrednost_'.$row1['id'].'\').attr(\'checked\',true); checkBranching();">';
+                            echo ' <input type="text" name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" class="input_other" value="' . $row3['text'] . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching();" />';
                     }
                     echo '</td>';
 
@@ -397,11 +395,9 @@ class RadioCheckboxSelectController extends Controller
                         $otherHeight = ($spremenljivkaParams->get('otherHeight') ? $spremenljivkaParams->get('otherHeight') : 1);
 
                         if ($otherHeight > 1)
-                            echo ' <textarea name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" rows="' . $otherHeight . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching();">' . $row3['text'] . '</textarea>';
+                            echo ' <textarea name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" class="input_other" rows="' . $otherHeight . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching();">' . $row3['text'] . '</textarea>';
                         else
-                            echo ' <input type="text" name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" value="' . $row3['text'] . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching();" />';
-
-                        //echo '   <input type="text" name="textfield_'.$row1['id'].'" id="spremenljivka_'.$spremenljivka.'_textfield_'.$row1['id'].'" value="'.$row3['text'].'" '.($_disabled ? ' disabled' : '').' onclick="$(\'#spremenljivka_'.$spremenljivka.'_vrednost_'.$row1['id'].'\').attr(\'checked\',true); checkBranching();">';
+                            echo ' <input type="text" name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" class="input_other" value="' . $row3['text'] . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching();" />';
                     }
                     echo '</td>';
                     echo '<td align="right">';
@@ -438,9 +434,9 @@ class RadioCheckboxSelectController extends Controller
                         $otherHeight = ($spremenljivkaParams->get('otherHeight') ? $spremenljivkaParams->get('otherHeight') : 1);
 
                         if ($otherHeight > 1)
-                            echo ' <textarea name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" rows="' . $otherHeight . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching(); '.($checkbox_limit > 0 ? 'checkboxLimitTextbox(\'' . $spremenljivka . '\', \'' . $row1['id'] . '\', \'' . $checkbox_limit . '\');' : '').'" >' . $row3['text'] . '</textarea>';
+                            echo ' <textarea name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" class="input_other" rows="' . $otherHeight . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching(); '.($checkbox_limit > 0 ? 'checkboxLimitTextbox(\'' . $spremenljivka . '\', \'' . $row1['id'] . '\', \'' . $checkbox_limit . '\');' : '').'" >' . $row3['text'] . '</textarea>';
                         else
-                            echo ' <input type="text" name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" value="' . $row3['text'] . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching(); '.($checkbox_limit > 0 ? 'checkboxLimitTextbox(\'' . $spremenljivka . '\', \'' . $row1['id'] . '\', \'' . $checkbox_limit . '\');' : '').'" />';
+                            echo ' <input type="text" name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" class="input_other" value="' . $row3['text'] . '" style="' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="$(\'#spremenljivka_' . $spremenljivka . '_vrednost_' . $row1['id'] . '\').attr(\'checked\',true); checkBranching(); '.($checkbox_limit > 0 ? 'checkboxLimitTextbox(\'' . $spremenljivka . '\', \'' . $row1['id'] . '\', \'' . $checkbox_limit . '\');' : '').'" />';
                     }
                 }
                 echo '</div>' . "\n";
@@ -485,9 +481,9 @@ class RadioCheckboxSelectController extends Controller
                     $otherHeight = ($spremenljivkaParams->get('otherHeight') ? $spremenljivkaParams->get('otherHeight') : 1);
 
                     if ($otherHeight > 1)
-                        echo '<br /><textarea name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" class="drugo_' . $spremenljivka . '" rows="' . $otherHeight . '" style="display:none; ' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="checkBranching();">' . $row3['text'] . '</textarea>';
+                        echo '<br /><textarea name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" class="input_other drugo_' . $spremenljivka . '" rows="' . $otherHeight . '" style="display:none; ' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="checkBranching();">' . $row3['text'] . '</textarea>';
                     else
-                        echo '<br /><input type="text" name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" class="drugo_' . $spremenljivka . '" value="' . $row3['text'] . '" style="display:none; ' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="checkBranching();" />';
+                        echo '<br /><input type="text" name="textfield_' . $row1['id'] . '" id="spremenljivka_' . $spremenljivka . '_textfield_' . $row1['id'] . '" class="input_other drugo_' . $spremenljivka . '" value="' . $row3['text'] . '" style="display:none; ' . ($otherWidth != -1 ? ' width:' . $otherWidth . '%;' : '') . '" ' . ($_disabled ? ' disabled' : '') . ' onclick="checkBranching();" />';
                 }
             }
 
diff --git a/main/survey/skins/1kaBlack.css b/main/survey/skins/1kaBlack.css
index 7d59c19dc..e16364329 100644
--- a/main/survey/skins/1kaBlack.css
+++ b/main/survey/skins/1kaBlack.css
@@ -88,7 +88,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 0;
+  left: 16px;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -212,6 +212,46 @@ h1.evalvacija {
   outline: 1px #F15A24 solid;
 }
 
+.spremenljivka.tip_1 .custom_radio_picture {
+  display: inline-block;
+  margin-right: 8px;
+}
+.spremenljivka.tip_1 .custom_radio_picture label {
+  display: inline-block !important;
+}
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label {
+  display: flex;
+  line-height: 23px;
+}
+
+.variabla.floatLeft {
+  margin-right: 16px;
+}
+
+.variabla.missing:first-of-type {
+  margin-top: 16px;
+}
+
+.spremenljivka .variabla.missing label {
+  padding: 0;
+}
+
+div.variabla {
+  display: flex;
+  align-items: center;
+}
+
+input[type=text].input_other,
+textarea.input_other {
+  margin: 0 0 0 8px;
+}
+
+.variabla label.limit {
+  padding: 0 16px 0 8px !important;
+}
+
 div.variabla,
 td.variabla,
 td.question,
diff --git a/main/survey/skins/1kaBlue.css b/main/survey/skins/1kaBlue.css
index 643b6615b..a98096355 100644
--- a/main/survey/skins/1kaBlue.css
+++ b/main/survey/skins/1kaBlue.css
@@ -88,7 +88,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 0;
+  left: 16px;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -212,6 +212,46 @@ h1.evalvacija {
   outline: 1px #F15A24 solid;
 }
 
+.spremenljivka.tip_1 .custom_radio_picture {
+  display: inline-block;
+  margin-right: 8px;
+}
+.spremenljivka.tip_1 .custom_radio_picture label {
+  display: inline-block !important;
+}
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label {
+  display: flex;
+  line-height: 23px;
+}
+
+.variabla.floatLeft {
+  margin-right: 16px;
+}
+
+.variabla.missing:first-of-type {
+  margin-top: 16px;
+}
+
+.spremenljivka .variabla.missing label {
+  padding: 0;
+}
+
+div.variabla {
+  display: flex;
+  align-items: center;
+}
+
+input[type=text].input_other,
+textarea.input_other {
+  margin: 0 0 0 8px;
+}
+
+.variabla label.limit {
+  padding: 0 16px 0 8px !important;
+}
+
 div.variabla,
 td.variabla,
 td.question,
diff --git a/main/survey/skins/1kaGreen.css b/main/survey/skins/1kaGreen.css
index 87e9f4a2b..c0bb7b13a 100644
--- a/main/survey/skins/1kaGreen.css
+++ b/main/survey/skins/1kaGreen.css
@@ -88,7 +88,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 0;
+  left: 16px;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -212,6 +212,46 @@ h1.evalvacija {
   outline: 1px #F15A24 solid;
 }
 
+.spremenljivka.tip_1 .custom_radio_picture {
+  display: inline-block;
+  margin-right: 8px;
+}
+.spremenljivka.tip_1 .custom_radio_picture label {
+  display: inline-block !important;
+}
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label {
+  display: flex;
+  line-height: 23px;
+}
+
+.variabla.floatLeft {
+  margin-right: 16px;
+}
+
+.variabla.missing:first-of-type {
+  margin-top: 16px;
+}
+
+.spremenljivka .variabla.missing label {
+  padding: 0;
+}
+
+div.variabla {
+  display: flex;
+  align-items: center;
+}
+
+input[type=text].input_other,
+textarea.input_other {
+  margin: 0 0 0 8px;
+}
+
+.variabla label.limit {
+  padding: 0 16px 0 8px !important;
+}
+
 div.variabla,
 td.variabla,
 td.question,
diff --git a/main/survey/skins/1kaNature.css b/main/survey/skins/1kaNature.css
index 2830ecef3..287316969 100644
--- a/main/survey/skins/1kaNature.css
+++ b/main/survey/skins/1kaNature.css
@@ -88,7 +88,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 0;
+  left: 16px;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -212,6 +212,46 @@ h1.evalvacija {
   outline: 1px #F15A24 solid;
 }
 
+.spremenljivka.tip_1 .custom_radio_picture {
+  display: inline-block;
+  margin-right: 8px;
+}
+.spremenljivka.tip_1 .custom_radio_picture label {
+  display: inline-block !important;
+}
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label {
+  display: flex;
+  line-height: 23px;
+}
+
+.variabla.floatLeft {
+  margin-right: 16px;
+}
+
+.variabla.missing:first-of-type {
+  margin-top: 16px;
+}
+
+.spremenljivka .variabla.missing label {
+  padding: 0;
+}
+
+div.variabla {
+  display: flex;
+  align-items: center;
+}
+
+input[type=text].input_other,
+textarea.input_other {
+  margin: 0 0 0 8px;
+}
+
+.variabla label.limit {
+  padding: 0 16px 0 8px !important;
+}
+
 div.variabla,
 td.variabla,
 td.question,
diff --git a/main/survey/skins/1kaOffice.css b/main/survey/skins/1kaOffice.css
index 82b02fdbc..222195ad7 100644
--- a/main/survey/skins/1kaOffice.css
+++ b/main/survey/skins/1kaOffice.css
@@ -88,7 +88,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 0;
+  left: 16px;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -212,6 +212,46 @@ h1.evalvacija {
   outline: 1px #F15A24 solid;
 }
 
+.spremenljivka.tip_1 .custom_radio_picture {
+  display: inline-block;
+  margin-right: 8px;
+}
+.spremenljivka.tip_1 .custom_radio_picture label {
+  display: inline-block !important;
+}
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label {
+  display: flex;
+  line-height: 23px;
+}
+
+.variabla.floatLeft {
+  margin-right: 16px;
+}
+
+.variabla.missing:first-of-type {
+  margin-top: 16px;
+}
+
+.spremenljivka .variabla.missing label {
+  padding: 0;
+}
+
+div.variabla {
+  display: flex;
+  align-items: center;
+}
+
+input[type=text].input_other,
+textarea.input_other {
+  margin: 0 0 0 8px;
+}
+
+.variabla label.limit {
+  padding: 0 16px 0 8px !important;
+}
+
 div.variabla,
 td.variabla,
 td.question,
diff --git a/main/survey/skins/1kaOrange.css b/main/survey/skins/1kaOrange.css
index 2df851f4f..5f09b7db6 100644
--- a/main/survey/skins/1kaOrange.css
+++ b/main/survey/skins/1kaOrange.css
@@ -88,7 +88,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 0;
+  left: 16px;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -212,6 +212,46 @@ h1.evalvacija {
   outline: 1px #F15A24 solid;
 }
 
+.spremenljivka.tip_1 .custom_radio_picture {
+  display: inline-block;
+  margin-right: 8px;
+}
+.spremenljivka.tip_1 .custom_radio_picture label {
+  display: inline-block !important;
+}
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label {
+  display: flex;
+  line-height: 23px;
+}
+
+.variabla.floatLeft {
+  margin-right: 16px;
+}
+
+.variabla.missing:first-of-type {
+  margin-top: 16px;
+}
+
+.spremenljivka .variabla.missing label {
+  padding: 0;
+}
+
+div.variabla {
+  display: flex;
+  align-items: center;
+}
+
+input[type=text].input_other,
+textarea.input_other {
+  margin: 0 0 0 8px;
+}
+
+.variabla label.limit {
+  padding: 0 16px 0 8px !important;
+}
+
 div.variabla,
 td.variabla,
 td.question,
diff --git a/main/survey/skins/1kaPurple.css b/main/survey/skins/1kaPurple.css
index b44a1cae5..dabd254ee 100644
--- a/main/survey/skins/1kaPurple.css
+++ b/main/survey/skins/1kaPurple.css
@@ -88,7 +88,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 0;
+  left: 16px;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -212,6 +212,46 @@ h1.evalvacija {
   outline: 1px #F15A24 solid;
 }
 
+.spremenljivka.tip_1 .custom_radio_picture {
+  display: inline-block;
+  margin-right: 8px;
+}
+.spremenljivka.tip_1 .custom_radio_picture label {
+  display: inline-block !important;
+}
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label {
+  display: flex;
+  line-height: 23px;
+}
+
+.variabla.floatLeft {
+  margin-right: 16px;
+}
+
+.variabla.missing:first-of-type {
+  margin-top: 16px;
+}
+
+.spremenljivka .variabla.missing label {
+  padding: 0;
+}
+
+div.variabla {
+  display: flex;
+  align-items: center;
+}
+
+input[type=text].input_other,
+textarea.input_other {
+  margin: 0 0 0 8px;
+}
+
+.variabla label.limit {
+  padding: 0 16px 0 8px !important;
+}
+
 div.variabla,
 td.variabla,
 td.question,
diff --git a/main/survey/skins/1kaRed.css b/main/survey/skins/1kaRed.css
index 0558a3baa..581d61919 100644
--- a/main/survey/skins/1kaRed.css
+++ b/main/survey/skins/1kaRed.css
@@ -88,7 +88,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 0;
+  left: 16px;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -212,6 +212,46 @@ h1.evalvacija {
   outline: 1px #F15A24 solid;
 }
 
+.spremenljivka.tip_1 .custom_radio_picture {
+  display: inline-block;
+  margin-right: 8px;
+}
+.spremenljivka.tip_1 .custom_radio_picture label {
+  display: inline-block !important;
+}
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label {
+  display: flex;
+  line-height: 23px;
+}
+
+.variabla.floatLeft {
+  margin-right: 16px;
+}
+
+.variabla.missing:first-of-type {
+  margin-top: 16px;
+}
+
+.spremenljivka .variabla.missing label {
+  padding: 0;
+}
+
+div.variabla {
+  display: flex;
+  align-items: center;
+}
+
+input[type=text].input_other,
+textarea.input_other {
+  margin: 0 0 0 8px;
+}
+
+.variabla label.limit {
+  padding: 0 16px 0 8px !important;
+}
+
 div.variabla,
 td.variabla,
 td.question,
diff --git a/main/survey/skins/Cdi.css b/main/survey/skins/Cdi.css
index 2c12cbcb9..668dbb26a 100644
--- a/main/survey/skins/Cdi.css
+++ b/main/survey/skins/Cdi.css
@@ -88,7 +88,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 0;
+  left: 16px;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -212,6 +212,46 @@ h1.evalvacija {
   outline: 1px #F15A24 solid;
 }
 
+.spremenljivka.tip_1 .custom_radio_picture {
+  display: inline-block;
+  margin-right: 8px;
+}
+.spremenljivka.tip_1 .custom_radio_picture label {
+  display: inline-block !important;
+}
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label {
+  display: flex;
+  line-height: 23px;
+}
+
+.variabla.floatLeft {
+  margin-right: 16px;
+}
+
+.variabla.missing:first-of-type {
+  margin-top: 16px;
+}
+
+.spremenljivka .variabla.missing label {
+  padding: 0;
+}
+
+div.variabla {
+  display: flex;
+  align-items: center;
+}
+
+input[type=text].input_other,
+textarea.input_other {
+  margin: 0 0 0 8px;
+}
+
+.variabla label.limit {
+  padding: 0 16px 0 8px !important;
+}
+
 div.variabla,
 td.variabla,
 td.question,
diff --git a/main/survey/skins/Fdv.css b/main/survey/skins/Fdv.css
index dfe1f9997..9e5d3ca1b 100644
--- a/main/survey/skins/Fdv.css
+++ b/main/survey/skins/Fdv.css
@@ -88,7 +88,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 0;
+  left: 16px;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -212,6 +212,46 @@ h1.evalvacija {
   outline: 1px #F15A24 solid;
 }
 
+.spremenljivka.tip_1 .custom_radio_picture {
+  display: inline-block;
+  margin-right: 8px;
+}
+.spremenljivka.tip_1 .custom_radio_picture label {
+  display: inline-block !important;
+}
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label {
+  display: flex;
+  line-height: 23px;
+}
+
+.variabla.floatLeft {
+  margin-right: 16px;
+}
+
+.variabla.missing:first-of-type {
+  margin-top: 16px;
+}
+
+.spremenljivka .variabla.missing label {
+  padding: 0;
+}
+
+div.variabla {
+  display: flex;
+  align-items: center;
+}
+
+input[type=text].input_other,
+textarea.input_other {
+  margin: 0 0 0 8px;
+}
+
+.variabla label.limit {
+  padding: 0 16px 0 8px !important;
+}
+
 div.variabla,
 td.variabla,
 td.question,
diff --git a/main/survey/skins/Uni.css b/main/survey/skins/Uni.css
index a6f3dbb50..36cabf48f 100644
--- a/main/survey/skins/Uni.css
+++ b/main/survey/skins/Uni.css
@@ -88,7 +88,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 0;
+  left: 16px;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -212,6 +212,46 @@ h1.evalvacija {
   outline: 1px #F15A24 solid;
 }
 
+.spremenljivka.tip_1 .custom_radio_picture {
+  display: inline-block;
+  margin-right: 8px;
+}
+.spremenljivka.tip_1 .custom_radio_picture label {
+  display: inline-block !important;
+}
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label {
+  display: flex;
+  line-height: 23px;
+}
+
+.variabla.floatLeft {
+  margin-right: 16px;
+}
+
+.variabla.missing:first-of-type {
+  margin-top: 16px;
+}
+
+.spremenljivka .variabla.missing label {
+  padding: 0;
+}
+
+div.variabla {
+  display: flex;
+  align-items: center;
+}
+
+input[type=text].input_other,
+textarea.input_other {
+  margin: 0 0 0 8px;
+}
+
+.variabla label.limit {
+  padding: 0 16px 0 8px !important;
+}
+
 div.variabla,
 td.variabla,
 td.question,
diff --git a/public/css/main.css b/public/css/main.css
index d3e56111e..61381512b 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -5225,6 +5225,13 @@ input[type=radio] + span.enka-vizualna-skala::before {
   font-weight: 400;
 }
 
+div.variabla input[type=checkbox] + span.enka-checkbox-radio:before,
+div.variabla input[type=radio] + span.enka-checkbox-radio:before,
+div.variabla input[type=radio] + span.enka-custom-radio:before,
+div.variabla input[type=radio] + span.enka-vizualna-skala::before {
+  margin-right: 8px;
+}
+
 /* Disabled radio / checkbox */
 input[type=checkbox]:disabled + span.enka-checkbox-radio:before,
 input[type=radio]:disabled + span.enka-checkbox-radio:before {
@@ -5241,7 +5248,6 @@ input[type=radio] + span.enka-checkbox-radio {
 input[type=checkbox] + span.enka-checkbox-radio:before {
   /*content: "\f096";*/
   content: "";
-  letter-spacing: 10px;
 }
 
 input[type=checkbox]:checked + span.enka-checkbox-radio:before {
@@ -5253,7 +5259,6 @@ input[type=checkbox]:checked + span.enka-checkbox-radio:before {
 input[type=radio] + span.enka-checkbox-radio:before {
   /*content: "\f10c";*/
   content: "";
-  letter-spacing: 10px;
 }
 
 input[type=radio]:checked + span.enka-checkbox-radio:before {
@@ -5286,7 +5291,6 @@ span.enka-custom-radio,
 
 span.enka-custom-radio:before,
 .visual-radio-scale .enka-vizualna-skala {
-  letter-spacing: 10px;
   color: #dcdcdc;
 }
 
@@ -6872,7 +6876,7 @@ html.js #javascript_alert {
 
 .spremenljivka.tip_1 .variabla label,
 .spremenljivka.tip_2 .variabla label {
-  display: flex !important;
+  display: inline-block;
 }
 
 /* Dodaten hack da se potem popravi v mozilli da ne pobarva slike modro:) */
diff --git a/resources/sass/main/main/content.scss b/resources/sass/main/main/content.scss
index 884ad2454..f7909b811 100644
--- a/resources/sass/main/main/content.scss
+++ b/resources/sass/main/main/content.scss
@@ -1493,7 +1493,7 @@ html.js #javascript_alert {
 }
 .spremenljivka.tip_1 .variabla label,
 .spremenljivka.tip_2 .variabla label{
-    display: flex !important;
+    display: inline-block;
 }
 /* Dodaten hack da se potem popravi v mozilli da ne pobarva slike modro:) */
 @-moz-document url-prefix() {
diff --git a/resources/sass/main/main/input.scss b/resources/sass/main/main/input.scss
index 4e7542e07..0c83854a5 100644
--- a/resources/sass/main/main/input.scss
+++ b/resources/sass/main/main/input.scss
@@ -57,6 +57,13 @@ input[type="radio"] + span.enka-vizualna-skala::before{
 	font-weight: 400;
 }
 
+div.variabla input[type="checkbox"] + span.enka-checkbox-radio:before,
+div.variabla  input[type="radio"] + span.enka-checkbox-radio:before,
+div.variabla  input[type="radio"] + span.enka-custom-radio:before,
+div.variabla  input[type="radio"] + span.enka-vizualna-skala::before{
+    margin-right: 8px;
+}
+
 /* Disabled radio / checkbox */
 input[type="checkbox"]:disabled + span.enka-checkbox-radio:before,
 input[type="radio"]:disabled + span.enka-checkbox-radio:before{
@@ -73,7 +80,6 @@ input[type="radio"] + span.enka-checkbox-radio {
 input[type="checkbox"] + span.enka-checkbox-radio:before {
 	/*content: "\f096";*/
 	content: "\f0c8";
-    letter-spacing: 10px;
 }
 
 input[type="checkbox"]:checked + span.enka-checkbox-radio:before {
@@ -85,8 +91,6 @@ input[type="checkbox"]:checked + span.enka-checkbox-radio:before {
 input[type="radio"] + span.enka-checkbox-radio:before {
 	/*content: "\f10c";*/
 	content: "\f111";
-
-    letter-spacing: 10px;
 }
 
 input[type="radio"]:checked + span.enka-checkbox-radio:before {
@@ -123,7 +127,6 @@ span.enka-custom-radio,
 
 span.enka-custom-radio:before,
 .visual-radio-scale .enka-vizualna-skala{
-    letter-spacing: 10px;
     color: #dcdcdc;
 }
 
diff --git a/resources/sass/main/skins/1ka/1ka.scss b/resources/sass/main/skins/1ka/1ka.scss
index 91be59585..5703b957f 100644
--- a/resources/sass/main/skins/1ka/1ka.scss
+++ b/resources/sass/main/skins/1ka/1ka.scss
@@ -107,7 +107,7 @@ h1.evalvacija{
 
 #logo {
 	right: auto;
-	left: 0;
+	left: 16px;
 	top: 13px;
 	
 	max-height: 56px !important;
@@ -263,6 +263,47 @@ h1.evalvacija{
 }
 
 
+.spremenljivka.tip_1 .custom_radio_picture{
+    display: inline-block;
+    margin-right: 8px;
+
+    label{
+        display: inline-block !important;
+    }
+}
+
+
+.spremenljivka.tip_1 .variabla label,
+.spremenljivka.tip_2 .variabla label{
+    display: flex;
+    line-height: 23px;
+}
+.variabla.floatLeft{
+    margin-right: 16px;
+}
+
+.variabla.missing:first-of-type{
+    margin-top: 16px;
+}
+.spremenljivka .variabla.missing label{
+    padding: 0;
+}
+
+div.variabla{
+    display: flex;
+    align-items: center;
+}
+
+input[type="text"].input_other,
+textarea.input_other{
+    margin: 0 0 0 8px;
+}
+
+.variabla label.limit{
+    padding: 0 16px 0 8px !important;
+}
+
+
 div.variabla, 
 td.variabla,
 td.question,