Tubes1/src/app/Menu/Order/SelectDriver.routes.php

+<?php
+
+namespace MotaRaido\Menu\Order;
+
+use \MotaRaido\Core\View;
+use \MotaRaido\Core\Route;
+
+if (!defined('MOTAFW')) 
+{
+    echo 'This file can only be called via the main index.php file, and not directly';
+    exit();
+}
+
+Route::add('/order/#user/selectdriver', function($user) use ($query) {
+    $view = new View();
+    $view->assign('title', 'Select Driver');
+    $view->assign('script', JS . 'selectdriver.js');
+    $view->assign('user', $user);
+    $view->assign('image', IMG);
+
+    $pickLoc = $_POST['pick-point'];
+    $dest = $_POST['destination'];
+    $prefDriver = $_POST['pref-driver'];
+    $driverList = $query->select('preferredloc',[]);
+    $ratingDat = $query->select('history',[]);
+    $driverName = $query->select('user', []);
+    
+    $driverPrefLoc = array();
+    $preferredDriver = '';
+    $count = 0;
+    foreach($driverList as $driver) {
+        if(!strcasecmp($driver[0],$prefDriver) && $driver[0] !== $user) {
+            $preferredDriver = $driver[0];
+        } else {
+            if (($driver[1] === $pickLoc || $driver[1] === $dest) && !in_array($driver[0],$driverPrefLoc) && $driver[0] !== $user) {
+                    $driverPrefLoc[$count] = $driver[0];
+                    $count++;
+            }
+        }
+    }
+
+    EmbedJS($driverPrefLoc, $ratingDat, $driverName, $user, $preferredDriver, $pickLoc, $dest);
+    print_r($jsDriverArr);
+    $view->render(__DIR__ . '/SelectDriver.view.php');
+});
+
+function EmbedJS($driverArr, $ratingArr, $driverNameArr, $user, $prefDriver, $pickLoc, $dest) {
+    $jsRatingArr = json_encode($ratingArr);
+    $jsDriverArr = json_encode($driverArr);
+    $jsDriverNameArr = json_encode($driverNameArr);
+    $jsUser = json_encode($user);
+    $jsPrefDriver = json_encode($prefDriver);
+    $jsPickLoc = json_encode($pickLoc);
+    $jsDest = json_encode($dest);
+    echo "<script>";
+    echo "var driverArr = $jsDriverArr;";
+    echo "var ratingArr = $jsRatingArr;";
+    echo "var driverNameArr = $jsDriverNameArr;";
+    echo "var user = $jsUser;";
+    echo "var preferredDriver = $jsPrefDriver;";
+    echo "var pickLoc = $jsPickLoc;";
+    echo "var dest = $jsDest;";
+    echo "</script>";
+}
\ No newline at end of file

Tubes1/src/app/Menu/Order/SelectDriver.view.php

+<?php
+
+namespace MotaRaido\Menu\Order;
+
+if (!defined('MOTAFW')) 
+{
+    echo 'This file can only be called via the main index.php file, and not directly';
+    exit();
+}
+
+?>
+
+<?php echo $this->header; ?>
+<div class="edit-profile-header">
+    Make an order       
+</div>
+<div class="progress-container">
+    <div class="progress">
+        <div class="progress-num">1</div> Select Destination
+    </div>
+    <div class="progress selected">
+        <div class="progress-num">2</div> Select a driver
+    </div>
+    <div class="progress">
+        <div class="progress-num">3</div> Complete your order
+    </div>
+</div>
+<div id="pref-driver" class="select-driver">
+    <div class= "selectdriver-header">
+        Preferred Drivers:
+    </div>
+    </div>
+<div id="other-driver" class="select-driver">
+    <div class="selectdriver-header">
+        Other Drivers:
+    </div>
+</div>
+<script src="<?php echo $this->script; ?>"></script>

Tubes1/src/app/Menu/Profile/EditPrefLoc.routes.php

+<?php
+
+namespace MotaRaido\Menu\Profile;
+
+use \MotaRaido\Core\View;
+use \MotaRaido\Core\Route;
+
+if (!defined('MOTAFW')) 
+{
+    echo 'This file can only be called via the main index.php file, and not directly';
+    exit();
+}
+
+Route::add('/preferred-loc/#user', function($user) use ($query) {
+    $view = new View();
+    $view->assign('title', 'Edit Preferred Location');
+    $view->assign('user', $user);
+    $prefLoc = $query->select('preferredloc', ['username' => $user]);
+    $view->assign('prefLoc', $prefLoc);
+    $view->render(__DIR__ . '/EditPrefLoc.view.php');
+});
+
+Route::add('/preferred-loc/#user/finish', function($user) use ($query) {
+    $query->transaction(function() use ($query, $user) {
+        $location = $_POST['location'];
+        $query->insert('preferredloc', array('username' => $user, 'location' => $location));
+        header('Location: /preferred-loc/' . $user);
+    });
+});
+
+Route::add('/preferred-loc/#user/edit', function($user) use ($query) {
+    $query->transaction(function() use ($query, $user) {
+        $location_new = $_POST['location_new'];
+        $location_old = $_POST['location_old'];
+        $query->update('preferredloc', array('location' => $location_new), array('username' => $user, 'location' => $location_old));
+        header('Location: /preferred-loc/' . $user);
+    });
+});
+
+
+Route::add('/preferred-loc/#user/delete/#location', function($user, $location) use ($query) {
+    $query->transaction(function() use ($query, $user, $location) {
+        $query->delete('preferredloc', array('username' => $user, 'location' => $location));
+        header('Location: /preferred-loc/' . $user);
+    });
+});
\ No newline at end of file

Tubes1/src/app/Menu/Profile/EditPrefLoc.view.php

+<?php
+
+namespace MotaRaido\Menu\Profile;
+
+if (!defined('MOTAFW')) 
+{
+    echo 'This file can only be called via the main index.php file, and not directly';
+    exit();
+}
+
+?>
+
+<div class="container">
+    <h1 class="header"><?php echo $this->title; ?></h1>
+    <form action=<?php echo '/preferred-loc/' . $this->user . '/edit'; ?> method="post">
+        <table style="width:100%">
+        <tr>
+            <th>No</th>
+            <th>Location</th> 
+            <th>Actions</th>
+        </tr>
+        <?php
+            $count = 0;
+            foreach($this->prefLoc as $loc) {
+                $count = $count + 1;
+                echo "<tr class='rows'>";
+                echo "<td id='count'>" . $count . "</td>";
+                echo "<td><div name='location'>" . $loc['location'] . "</div></td>";
+                echo "<td id='action'><img class=\"pref-button\" name=\"edit-button\" src='" .  IMG . "/edit.png' /><a href='/preferred-loc/" . $this->user . "/delete/" . $loc['location'] . "'><img class=\"pref-button\" src='" . IMG . "/delete.png' /></td></a>";
+                echo "</tr>";
+            }
+        ?>
+        </table>
+    </form>
+    <form action=<?php echo '/preferred-loc/' . $this->user . '/finish'; ?> method='post' enctype="multipart/form-data">
+        <div class="edit-profile-btm">
+            <h2 class="header">Add new Location:</h2>
+            <div class="form-input">
+                <input type="text" id="next-button-text" name="location" />
+                <input class="next-button" type="submit" value="Add" />
+            </div>
+        </div>
+    </form>
+</div>
+<script>
+    var edit = Array.prototype.slice.call(document.getElementsByName('edit-button'));
+    var locs = document.getElementsByName('location');
+    var rows = document.getElementsByClassName('rows');
+
+    edit.map(function(x, i) {
+        var loc = locs[i].innerHTML;
+        x.addEventListener('click', function (event) {
+            event.preventDefault();
+            rows[i].cells[1].innerHTML = '<input type="text" name="location_new" value="' + loc + '" /><input type="hidden" name="location_old" value="' + loc +  '"/>';
+            rows[i].cells[2].innerHTML = '<input type="submit" value="Save" />';
+        });
+    });
+</script>
\ No newline at end of file

Tubes1/src/app/Menu/Profile/EditProfile.routes.php

+<?php
+
+namespace MotaRaido\Menu\Profile;
+
+use \MotaRaido\Core\View;
+use \MotaRaido\Core\Route;
+
+if (!defined('MOTAFW')) 
+{
+    echo 'This file can only be called via the main index.php file, and not directly';
+    exit();
+}
+
+Route::add('/editprofile/#user', function($user) use ($query) {
+    $view = new View();
+    $view->assign('title', 'Edit Profile');
+    $view->assign('image', IMG . $user);
+    $view->include('header', APPDIR . '/Menu/Header.php');
+    
+    $usrData = $query->select('user', ['username' => $user]);
+    $view->assign('user', $user);
+    $view->assign('name', $usrData[0][2]);
+    $view->assign('phone', $usrData[0][3]);
+    if($usrData[0][4]){
+        $view->assign('isDriver', 'checked');
+    }
+
+    $view->render(__DIR__ . '/EditProfile.view.php');
+});
+
+Route::add('/editprofile/#user/finish', function($user) use ($query) {
+    $query->transaction(function() use ($query,$user) {
+        $name = $_POST['your-name'];
+        $phone = $_POST['phone-number'];
+        $isDriver = $_POST['is-driver'];
+        $image = $_FILES['image'];
+        $driverValue = isset($isDriver) ? 1 : 0;
+        header('Location: /profile/' . $user);
+        $query->update('user', ['fullname' => $name,'phone' => $phone, 'isDriver' => $driverValue], ['username' => $user]);
+        if(!empty($image['name'])){
+            $image['name'] = $user;
+            $target = $_SERVER['DOCUMENT_ROOT'] . IMG . basename($image['name']);
+            if (move_uploaded_file($image['tmp_name'], $target)) {
+                echo "File is valid, and was successfully uploaded.\n";
+            } else {
+                echo 'Failed to upload file\n';
+            }
+        }
+    });
+});
\ No newline at end of file

Tubes1/src/app/Menu/Profile/EditProfile.view.php

+<?php
+
+namespace MotaRaido\Menu\Profile;
+
+if (!defined('MOTAFW')) 
+{
+    echo 'This file can only be called via the main index.php file, and not directly';
+    exit();
+}
+
+?>
+
+
+<?php echo $this->header; ?>
+<div class="edit-profile-container">
+    <form action='/editprofile/<?php echo $this->user; ?>/finish' method='post' onsubmit="return editProfileValidation();" enctype="multipart/form-data" name="editprofile-form">
+        <h1 class="edit-profile-header">Edit Profile Information</h1>
+            <img id="profile-pic" src="<?php echo $this->image; ?>" alt="">
+            <div class="img-chooser">
+            <p>Update profile picture</p>
+            <input type="file" name="image" accept="image/jpeg, image/png">
+        </div>
+        <div class="edit-profile-btm">
+            <div class="form-editprofile">
+                <label for="your-name">Your Name</label>
+                <input class="ep-textarea" type="text" name="your-name" value="<?php echo $this->name; ?>">
+            </div>
+            <div class="form-editprofile">
+                <label for="phone-number">Phone</label>
+                <input class="ep-textarea" type="text" name="phone-number" value="<?php echo $this->phone; ?>">
+            </div>
+            <div class="button-form">
+                <div>
+                    Status driver
+                </div>
+                <label class="switch">
+                    <input type="checkbox" name="is-driver" <?php echo $this->isDriver; ?>>
+                    <span class="slider round"></span>
+                </label>
+            </div>
+            <a href='/profile/<?php echo $this->user; ?>'><input class="cancel-button" value="Back"></a>
+            <input class="accept-button" id="save-profile" type="submit" value="Save">
+        </div>
+    </form>
+</div>
\ No newline at end of file

Tubes1/src/app/Menu/Profile/Profile.routes.php

+<?php
+
+namespace MotaRaido\Menu\Profile;
+
+use \MotaRaido\Core\View;
+use \MotaRaido\Core\Route;
+
+if (!defined('MOTAFW')) 
+{
+    echo 'This file can only be called via the main index.php file, and not directly';
+    exit();
+}
+
+Route::add('/profile/#user', function($user) use ($query) {
+    $view = new View();
+    $view->assign('title', 'Profile');
+    $view->assign('user', $user);
+    $view->assign('image', IMG . $user);
+    $view->assign('edit', IMG . 'pen.png');
+    $view->include('header', APPDIR . '/Menu/HeaderWithMenu.php');
+    
+    $usrData = $query->select('user', ['username' => $user]);
+    $ratingData = $query->select('history', ['usernameDriver' => $user]);
+    $preferredLoc = $query->select('preferredloc', ['username' => $user]);
+
+    $view->assign('username', $usrData[0][0]);
+    $view->assign('name', $usrData[0][2]);
+    $view->assign('phone', $usrData[0][3]);
+    if($usrData[0][4]){
+        $view->assign('isdriver', 'Driver');
+    }
+    $view->assign('email', $usrData[0][5]);
+    if ($ratingData)
+    {
+        $count = 0;
+        $amount = 0;
+        foreach($ratingData as $rating) {
+            $amount += $rating[2];
+            $count++;
+        }
+    
+    	$view->assign('rating', $amount / $count);
+    	$view->assign('votes', $count);
+    }
+    if (count($preferredLoc) != 0)
+    {
+        $view->assign('preferredloc', $preferredLoc);
+    }
+    else
+    {
+        $view->assign('preferredloc', []);
+    }
+    $view->render(__DIR__ . '/Profile.view.php');
+});
\ No newline at end of file

Tubes1/src/app/Menu/Profile/Profile.view.php

+<?php
+
+namespace MotaRaido\Menu\Profile;
+
+if (!defined('MOTAFW')) 
+{
+    echo 'This file can only be called via the main index.php file, and not directly';
+    exit();
+}
+
+?>
+
+<?php echo $this->header ?>
+<div id="info-profile">
+	<div class="subtitle-cont">
+	  <div class="subtitle-profile">
+	    MY PROFILE
+	  </div>
+		<a href="/editprofile/<?php echo $this->user; ?>" >
+			<div id="edit-pen-div">
+				<img class="edit-pen" src=<?php echo $this->edit; ?>>
+			</div>
+		</a>
+	</div>
+	<div id="profile-pic-div">
+	  <img class="profile-picture" src=<?php echo $this->image; ?>>
+	</div>
+	<div id="info-text">
+	  <ol id="list-info">
+	    <li><b><?php echo $this->username; ?></b></li>
+	    <li><?php echo $this->name; ?></li>
+			<?php if($this->isdriver == 'Driver'): ?>
+	    	<li><?php echo $this->isdriver; ?> | <?php for($i = 0; $i<floor($this->rating); $i++) { echo "★"; } ?> (<?php echo $this->rating; ?> rating from <?php echo $this->votes; ?> votes)</li>
+			<?php endif; ?>
+	    <li><?php echo $this->email; ?></i></li>
+	    <li><?php echo $this->phone; ?></i></li>
+	  </ol>
+	</div>
+</div>
+<div>
+	<div class="subtitle-cont">
+	<?php if($this->isdriver == 'Driver'): ?>
+	  <div id="prefer-loc-title" class="subtitle-profile">
+	    PREFERRED LOCATIONS:
+	  </div>
+		<a href="/preferred-loc/<?php echo $this->user; ?>">
+			<div id="edit-pen-div">
+				<img class="edit-pen" src=<?php echo $this->edit; ?>>
+			</div>
+		</a>
+	</div>
+		<?php foreach ($this->preferredloc as $loc): ?>
+			<div id="info-pref-text">
+			  <span class="loc-list"><?php echo "  " . $loc[1] ?><span>
+			</div>
+		<?php endforeach; ?>
+	<?php endif; ?>
+</div>
+<?php echo $this->footer; ?>
\ No newline at end of file

Tubes1/src/app/SignUp/Signup.routes.php

+<?php
+
+namespace MotaRaido\SignUp;
+
+use \MotaRaido\Core\View;
+use \MotaRaido\Core\Route;
+
+if (!defined('MOTAFW')) 
+{
+    echo 'This file can only be called via the main index.php file, and not directly';
+    exit();
+}
+
+Route::add('/signup', function() {
+    $view = new View();
+    $view->assign('title', 'Sign Up');
+    $view->assign('style', CSS . "style.css");
+    $view->assign('profileStyle', CSS . "profile.css");
+    $view->assign('script', JS . "signup.js?time=" . date("H:i:s"));
+    $view->render(__DIR__ . '/SignUp.view.php', false);
+
+});
+
+Route::add('/signup/validation', function() use ($query) {
+	// header('Location: /signup');
+	$query->transaction(function() use ($query) {
+		$username = $_GET['username'];
+		if ($_GET['password'] === $_GET['confirm-password'])
+			$password = $_GET['password'];
+		else
+			$password = null;
+		$email = $_GET['email'];
+		$fullname = $_GET['your-name'];
+		$phone = $_GET['phone-number'];
+		$isdriver = isset($_GET['driver']) ? 1 : 0;
+	
+		$ratingArray['username'] = $_GET['username'];
+		$ratingArray['rating'] = 0;
+		$ratingArray['votes'] = 0;
+		$ratingArray['numrat'] = 0;
+
+		$datauser = $query->select('user', ['username' => $username]);
+		
+		$preferredlocArray['username'] = $_GET['username'];
+		if ($password != null && count($datauser) == 0)
+		{
+			$query->insert('user', ['username' => $username, 'password'=> $password, 'email' => $email, 'fullname' => $fullname, 'phone' => $phone, 'isdriver' => $isdriver]);
+			$query->insert('rating', $ratingArray);
+			$query->insert('preferredloc', $preferredlocArray);
+			header('Location: /profile/' . $username);
+		}		
+	});
+});
+
+Route::add('/validation', function() use ($query) {	
+	if(isset($_GET['email']))
+	{
+		$email = $_GET['email'];
+		$emailData = $query->select('user', ['email' => $email]);
+		$found = count($emailData) !== 0;
+	}
+	else if(isset($_GET['username']))
+	{
+		$username = $_GET['username'];
+		$usrData = $query->select('user', ['username' => $username]);
+		$found = count($usrData) !== 0;
+	}
+
+	if($found) {
+		print_r('Failed');
+	} else {
+		print_r('OK');
+	}
+	
+});
\ No newline at end of file

Tubes1/src/app/SignUp/Signup.view.php

+<?php
+
+namespace MotaRaido\SignUp;
+
+if (!defined('MOTAFW')) 
+{
+    echo 'This file can only be called via the main index.php file, and not directly';
+    exit();
+}
+
+?>
+
+<section class="content-layout">
+  <header class="title">
+    <div>
+      <hr>
+      <h1><?php echo $this->title; ?></h1>
+      <hr>
+    </div>
+  </header>
+  <section class="form-layout">
+    <form action="/signup/validation" method="get" name="signupform" onsubmit="return signupValidation()">
+      <div class="form-input">
+        <div>Your Name</div>
+        <input id="your-name" type="text" name="your-name">
+      </div>
+      <div class="form-input checked-input">
+        <div>Username</div>
+        <input id="username" type="text" name="username" onKeyUp="checkData('username','username-check')">
+        <span id="username-check"></span>
+      </div>
+      <div class="form-input checked-input">
+        <div>Email</div>
+        <input id="email" type="text" name="email" onKeyUp="checkData('email','email-check')">
+        <span id="email-check"></span>
+      </div>
+      <div class="form-input">
+        <div>Password</div>
+        <input id="password" type="password" name="password">
+      </div>
+      <div class="form-input">
+        <div>Confirm Password</div>
+        <input id="confirm-password" type="password" name="confirm-password">
+      </div>
+      <div class="form-input">
+        <div>Phone Number</div>
+        <input id="phone" type="text" name="phone-number">
+      </div>
+      <div class="driver-checkbox">
+        <input id="isdriver" type="checkbox" name="driver">
+        <div>Also sign me up as a driver!</div>
+      </div>
+      <div id="button-layout">
+        <div>
+          <a href="/login">Already have an account</a>
+        </div>
+        <input id="register-button" type="submit" value="Register">
+      </div>
+    </form>
+  </section>
+</section>
\ No newline at end of file

Tubes1/src/index.php

+<?php
+    session_start();
+    define("MOTAFW", true);
+    define("APPDIR", __DIR__ . '/app/');
+    define("PUBLICDIR", '/public/');
+    define("CSS", PUBLICDIR . 'css/');
+    define("JS", PUBLICDIR . 'js/');
+    define("IMG", PUBLICDIR . 'img/');
+
+    require_once __DIR__ . '/vendor/autoload.php';
+
+    use \MotaRaido\Core\Config;
+    use \MotaRaido\Core\Database\Connector;
+    use \MotaRaido\Core\Database\Query;
+
+    $query = new Query(new Connector(Config::get('database')));
+    
+    // include all routes
+    $dir = new RecursiveDirectoryIterator(APPDIR);
+    $iter = new RecursiveIteratorIterator($dir);
+    $files = new RegexIterator($iter, '/^.+\.routes\.php$/', RecursiveRegexIterator::GET_MATCH); // an Iterator, not an array
+
+    foreach ( $files as $file ) {
+        foreach($file as $route_file) {
+            require_once $route_file;
+        }
+    }

Tubes1/src/public/css/profile.css

+.profile-picture {
+  width: 150px;
+  height: 150px;
+  border: 5px solid black;
+  float: left;
+  border-radius: 500px;
+  clear: both;
+}
+
+#info-profile {
+  margin: 20px 0px;
+  height: auto;
+}
+
+.edit-pen {
+  float: right;
+  height: 30px;
+
+}
+
+.subtitle-profile {
+  float: left;
+  width: 200px;
+  font-size: 2em;
+  font-weight: bold;
+  font-family: 'Mutka', sans-serif;
+}
+
+#profile-pic-div {
+  margin: auto;
+  width: 160px;
+  height: 160px;
+}
+
+#edit-pen-div {
+  margin: auto;
+  height: auto;
+}
+
+.subtitle-cont {
+  margin-bottom: 20px;
+  height: 37px;
+}
+
+#info-text {
+  margin: auto;
+  font-size: 1.2em;
+}
+
+#list-info {
+  list-style: none;
+  text-align: center;
+  padding: 0px;
+}
+
+#prefer-loc-title {
+  font-size: 1.5em;
+  width: 400px;
+}
+
+.fa-star-o{
+  color: red;
+}
+
+#info-pref-text {
+  font-size: 1.2em;
+}
+
+.subtitle-history {
+  float: left;
+  font-size: 2em;
+  font-weight: bold;
+  font-family: 'Mutka', sans-serif;
+  margin-top: 20px; 
+}
+
+.history-pic-div {
+  width: 120px;
+  height: 120px;
+  margin: 0px 20px;
+  float: left;
+}
+
+.profile-pic-his {
+  width: 110px;
+  height: 110px;
+  border: 1px solid black;
+  float: left;
+}
+
+.history-list {
+  margin-top: 20px;
+  list-style: none;
+  padding: 0px;
+  height: auto;
+}
+
+.order-list {
+  display: none;
+}
+
+.driver-list {
+  display: none;
+}
+
+.active-list {
+  display:block;
+}
+
+.comment {
+  margin-left: 180px;
+}
+
+.hide{
+  width: auto;
+  padding: 10px 15px;
+  border: 1px solid black;
+  border-radius: 10px;
+  background-color: red;
+  position: absolute;
+  right: 0;
+}
+
+.his-text>span {
+  display: inline-block;
+}
+
+.list-text-his {
+  height: auto;
+  position: relative;
+  clear: both;
+}
+
+.date-his {
+  color: gray;
+}
+
+.name-his {
+  font-size: 1.2em;
+}
+
+.tab-active {
+  display: block;
+}
+
+.active {
+  color: #ffffff;
+  border-color: #000000;
+  background-color: #5A1E83;
+}
+
+.hide-element {
+  display: none;
+}
\ No newline at end of file

Tubes1/src/public/css/style.css

+@charset "UTF-8";
+
+body {
+  width: 470px;
+  margin: auto;
+  font-family: 'Mutka', sans-serif;
+}
+
+textarea {
+  resize: none;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+/* Order Header */
+  .progress-container {
+    width: fit-content;
+    border-collapse:separate;
+    border-spacing: 10px 10px;
+    display: table;
+  }
+
+  .progress {
+    width: 30%;
+    height: 50px;
+    font-size: 105%;
+    border: 1px solid black;
+    text-align: left;
+    vertical-align: middle;
+    display: table-cell;
+  }
+
+  .progress-num {
+    display:inline-block;
+    background-color: #DDD;
+    width: 35px;
+    height: 35px;
+    border-radius: 100%;
+    margin: 0px 5px;
+    line-height: 200%;
+    text-align: center;
+    vertical-align: middle;
+    float: left;
+  }
+
+  .selected {
+    background-color: #FFFF44;
+  }
+
+/* Header style */
+
+.header-box {
+  height: fit-content content-box;
+  width: fit-content content-box;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: none;
+  margin-bottom: none;
+  font-family: 'Mutka', sans-serif;
+  column-count: 2;
+  -moz-column-count: 2;
+  -webkit-column-count: 2;
+  -webkit-column-span: all; /* Chrome, Safari, Opera */
+  column-span: all;
+  column-gap: 40px;
+}
+
+.col-header-left {
+  width: 50% content-box;
+  float: left;
+  vertical-align: middle;
+}
+
+.logo-title {
+  font-family: 'Geo', sans-serif;
+  font-weight: bold;
+  font-size: 250%;
+  color: #5A1E83;
+}
+
+.tagline {
+  color: #311B92;
+}
+
+.col-header-right {
+  width: 50% content-box;
+  float: right;
+  text-align: right;
+  vertical-align: middle;
+  line-height: 2;
+}
+
+/* Menu style */
+
+.menu {
+  width: 100%;
+  display: table;
+  table-layout: fixed;
+}
+
+.menu > div.menu-column {
+  display: table-column;
+}
+
+.menu > div.menu-cell {
+  display: table-cell;
+  font-family: 'Mukta', sans-serif;
+  vertical-align: middle;
+  line-height: 50px;
+  text-align: center;
+  font-weight: bold;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.menu > div:hover, .menu > div.selected {
+  color: #ffffff;
+  border-color: #000000;
+  background-color: #5A1E83;
+}
+
+/* Footer style */
+.footer {
+  column-count: 3;
+  -moz-column-count: 3;
+  -webkit-column-count: 3;
+  -webkit-column-span: all;
+  column-span: all;
+  -moz-column-gap: 2em;
+  -webkit-column-gap: 2em;
+  column-gap: 1.5em;
+  column-rule-style: solid;
+  border-style: solid;
+  border-width: 2px;
+}
+
+.footer > div {
+  width: fit-content content-box;
+  text-align: center;
+  font-weight: bold;
+  font-family: 'Mukta', sans-serif;
+  vertical-align: middle;
+}
+
+.img-chooser {
+  padding-top: 20px;
+}
+
+.text-link {
+  text-decoration: none;
+  font-size: 120%;
+  font-weight: bold;
+  color: black;
+}
+
+
+
+/* Container */
+.container {
+  width: inherit;
+}
+
+.header {
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.selectdriver-header {
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.edit-profile-container {
+  font-family: Verdana;
+}
+
+.edit-profile-header {
+  text-transform: uppercase;
+  font-weight: bold;
+  width: 100%;
+  font-size: 170%;
+}
+
+.edit-profile-btm {
+  clear: both;
+}
+
+.form-editprofile{
+  margin: 5px 0;
+}
+
+.ep-textarea{
+  width: 60%;
+  float: right;
+  clear: both;
+}
+
+.content-layout {
+  background-color: rgb(124, 206, 43);
+  padding: 50px;
+  border: 10px solid rgb(10, 127, 10);
+  border-radius: 100px;
+  width: 350px;
+}
+
+.title {
+  height: 27px;
+  padding: 0px 20px;
+}
+
+.title>div>h1 {
+  text-align: center;
+  margin-top: 0px;
+  width: 100px;
+  float: left;
+}
+
+.title>div>hr {
+  float:left;
+  position: relative;
+  width: 100px;
+  top: 5px;
+  background-color: rgb(10, 127, 10);
+  height: 5px;
+  border: none;
+}
+
+.form-layout {
+  clear: left;
+}
+
+.form-input {
+  width: 350px;
+  margin-bottom: 5px;
+}
+
+.form-input>div {
+  float: left;
+  width: 135px;
+}
+
+.form-input>input {
+  width: 198px;
+}
+
+.checked-input>input {
+  width: 170px;
+}
+
+.driver-checkbox {
+  margin: 20px 0px;
+}
+
+.driver-checkbox>input {
+  float: left;
+  margin-left: 0px;
+}
+
+
+.cancel-button {
+  width: 75px;
+  height: 30px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border: 1px solid black;
+  background-color: #D2002E;
+  border-radius: 10px;
+}
+
+.accept-button {
+  width: 75px;
+  height: 30px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border: 1px solid black;
+  background-color: #83D535;
+  border-radius: 10px;
+}
+
+.driver-completeorder-pic {
+  height: 100px;
+  width: 100px;
+  margin: 10px;
+  border-radius: 100%;
+  border: 3px solid #5A1E83;
+}
+
+.completeorder-container {
+  text-align: center;
+  clear: both;
+}
+
+.right-align {
+  width: 100%;
+  text-align: right;
+}
+
+.driver-fullname-disp {
+  font-size: 105%;
+  font-weight: bold;
+  margin-top: 5px;
+}
+
+/*Select driver*/
+.select-driver {
+  width: auto;
+  padding: 0 10px;
+  border-radius: 12px;
+  border: 1px solid black;
+  margin: 10px 0;
+}
+
+.driver-content {
+  height: 120px;
+  overflow: hidden;
+}
+
+.driver-pic {
+  height: 100px;
+  width: 100px;
+  margin: 10px;
+  border-radius: 100%;
+  border: 3px solid #5A1E83;
+  float: left;
+}
+
+.driver-name-disp {
+  font-size: 160%;
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.driver-rating-disp {
+  color: orange;
+  font-size: 110%;
+}
+
+.driver-not-found {
+  color: grey;
+  height: 70px;
+  text-align: center;
+  text-transform: none;
+  line-height: 70px;
+  vertical-align: middle;
+}
+
+.vote-disp {
+  color: black;
+}
+
+.select-driver-btn {
+  width: auto;
+  color: white;
+  background-color: #5A1E83;
+  letter-spacing: 0.5px;
+  float: right;
+}
+
+.order-btn {
+  float: none;
+  clear: both;
+}
+
+#profile-pic {
+  width: 150px;
+  height: 150px;
+  border: 1px solid black;
+  float: left;
+  margin-right: 25px;
+  margin-bottom: 30px;
+}
+
+#save-profile {
+  float: right;
+  margin-right: 120px;
+}
+
+#register-button {
+  background-color: #4CAF50;
+  border: 5px solid rgb(10, 127, 10);
+  border-radius: 20px;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
+
+#button-layout>div {
+  float: left;
+  width: 200px;
+  height: 66px;
+}
+
+#button-layout a {
+  position: relative;
+  top: 20px;
+}
+
+
+.button-form {
+  text-align: right;
+  width: 350px;
+}
+
+.button-form div {
+  float: left;
+}
+
+.completeorder-btn {
+  width: 100px;
+  height: 50px;
+  float: none;
+}
+
+ /* The switch - the box around the slider */
+ .switch {
+  position: relative;
+  display: inline-block;
+
+  width: 50px;
+  height: 25px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {display:none;}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 19px;
+  width: 19px;
+  left: 4px;
+  bottom: 3px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #1E7B25;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #1E7B25;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(23px);
+  -ms-transform: translateX(23px);
+  transform: translateX(23px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+/* Menu Order */
+.menu-order {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  font-size: 12px;
+  border-spacing: 20px 12px;
+}
+
+.menu-order-column {
+  height: 100%;
+}
+
+.menu-order-cell {
+  display: table-cell;
+  position: relative;
+  text-align: left;
+  font-weight: bold;
+}
+
+.menu-order-number
+{
+    position: relative;
+    display: block;
+    width: 50px;
+    height: 50px;
+    border-radius: 25px; /* or 50% */
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #311B92;
+    color: #ffffff;
+    line-height: 50px;
+}
+
+.menu-order-title
+{
+    position: relative;
+    display: inline-block;
+}
+
+#next-button-text {
+  line-height: 20px;
+  width: 75%;
+  padding-right: 1px;
+}
+
+input.next-button {
+  width: 20%;
+  height: 30px;
+  line-height: 20px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border: 1px solid black;
+  background-color: #83D535;
+  border-radius: 10px;
+  display: inline-block;
+}
+
+table, th, td {
+  table-layout: auto !important;
+  width: 100% auto !important;
+  max-width:100%;
+  white-space:nowrap;
+  border: 1px solid black;
+  border-collapse: collapse;
+}
+
+.pref-button {
+  width: 21px;
+  height: 21px;
+  vertical-align: middle;
+  border: none;
+  display: inline-block;
+}
+
+/** Rating **/
+.starRating:not(old){
+  display        : inline-block;
+  width          : 7.5em;
+  height         : 1.5em;
+  overflow       : hidden;
+  vertical-align : bottom;
+}
+
+.starRating:not(old) > input{
+  margin-right : -100%;
+  opacity      : 0;
+}
+
+.starRating:not(old) > label{
+  display         : block;
+  float           : right;
+  position        : relative;
+  background      : url('../img/star-off.svg');
+  background-size : contain;
+}
+
+.starRating:not(old) > label:before{
+  content         : '';
+  display         : block;
+  width           : 1.5em;
+  height          : 1.5em;
+  background      : url('../img/star-on.svg');
+  background-size : contain;
+  opacity         : 0;
+  transition      : opacity 0.2s linear;
+}
+
+.starRating:not(old) > label:hover:before,
+.starRating:not(old) > label:hover ~ label:before,
+.starRating:not(:hover) > :checked ~ label:before{
+  opacity : 1;
+}
+
+/* Font customization */
+/* latin */
+@font-face {
+  font-family: 'Geo';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Geo'), local('Geo-Regular'), url(./fonts/geo.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+/* devanagari */
+@font-face {
+  font-family: 'Mukta';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Mukta Regular'), local('Mukta-Regular'), url(./fonts/mukta1.woff2) format('woff2');
+  unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Mukta';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Mukta Regular'), local('Mukta-Regular'), url(./fonts/mukta1.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Mukta';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Mukta Regular'), local('Mukta-Regular'), url(./fonts/mukta1.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}

Tubes1/src/public/css/style_old.css

+@charset "UTF-8";
+
+/* Font customization */
+/* latin */
+@font-face {
+  font-family: 'Geo';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Geo'), local('Geo-Regular'), url(./fonts/geo.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+/* devanagari */
+@font-face {
+  font-family: 'Mukta';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Mukta Regular'), local('Mukta-Regular'), url(./fonts/mukta1.woff2) format('woff2');
+  unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Mukta';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Mukta Regular'), local('Mukta-Regular'), url(./fonts/mukta1.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Mukta';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Mukta Regular'), local('Mukta-Regular'), url(./fonts/mukta1.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+/* Body style */
+
+body {
+  width: 470px;
+  margin: auto;
+  font-family: 'Mutka', sans-serif;
+}
+
+textarea {
+  resize: none;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+/* Order Header */
+  .progress-container {
+    width: fit-content;
+    border-collapse:separate;
+    border-spacing: 10px 10px;
+    display: table;
+  }
+
+  .progress {
+    width: 30%;
+    height: 50px;
+    font-size: 105%;
+    border: 1px solid black;
+    text-align: left;
+    vertical-align: middle;
+    display: table-cell;
+  }
+
+  .progress-num {
+    display:inline-block;
+    background-color: #DDD;
+    width: 35px;
+    height: 35px;
+    border-radius: 100%;
+    margin: 0px 5px;
+    line-height: 200%;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .selected {
+    background-color: #FFFF44;
+  }
+
+/* Header style */
+
+.header-box {
+  height: fit-content content-box;
+  width: fit-content content-box;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: none;
+  margin-bottom: none;
+  column-count: 2;
+  -moz-column-count: 2;
+  -webkit-column-count: 2;
+  -webkit-column-span: all; /* Chrome, Safari, Opera */
+  column-span: all;
+  column-gap: 40px;
+}
+
+.col-header-left {
+  width: 50% content-box;
+  float: left;
+  vertical-align: middle;
+}
+
+.logo-title {
+  font-family: 'Geo', sans-serif;
+  font-weight: bold;
+  font-size: 250%;
+  color: #5A1E83;
+}
+
+.tagline {
+  color: #311B92;
+}
+
+.col-header-right {
+  width: 50% content-box;
+  float: right;
+  text-align: right;
+  vertical-align: middle;
+  line-height: 2;
+}
+
+/* Menu style */
+
+.menu {
+  width: 100%;
+  display: table;
+  table-layout: fixed;
+}
+
+.menu > div.menu-column {
+  display: table-column;
+}
+
+.menu > div.menu-cell {
+  display: table-cell;
+  font-family: 'Mukta', sans-serif;
+  vertical-align: middle;
+  line-height: 50px;
+  text-align: center;
+  font-weight: bold;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.menu-item:hover, .menu-item#selected {
+  color: #ffffff;
+  border-color: #000000;
+  background-color: #5A1E83;
+}
+
+/* Footer style */
+.footer {
+  width: 100% fit-content;
+  display: inline-block;
+  column-count: 3;
+  column-span: all;
+  column-gap: 1.5em;
+  column-rule-style: solid;
+  border-style: solid;
+  border-width: 2px;
+  margin: auto;
+}
+
+.footer > div {
+  text-align: center;
+  font-weight: bold;
+  font-family: 'Mukta', sans-serif;
+  vertical-align: middle;
+}
+
+.img-chooser {
+  padding-top: 20px;
+}
+
+/* Container */
+.container {
+  width: inherit;
+}
+
+.header {
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.selectdriver-header {
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.edit-profile-container {
+  font-family: Verdana;
+}
+
+.edit-profile-header {
+  text-transform: uppercase;
+  font-weight: bold;
+  width: 100%;
+  font-size: 170%;
+}
+
+.edit-profile-btm {
+  clear: both;
+}
+
+.form-editprofile{
+  margin: 5px 0;
+}
+
+
+
+.ep-textarea{
+  width: 60%;
+  float: right;
+  clear: both;
+}
+
+.content-layout {
+  background-color: rgb(124, 206, 43);
+  padding: 50px;
+  border: 10px solid rgb(10, 127, 10);
+  border-radius: 100px;
+  width: 350px;
+}
+
+.title {
+  height: 27px;
+  padding: 0px 20px;
+}
+
+.title>div>h1 {
+  text-align: center;
+  margin-top: 0px;
+  width: 100px;
+  float: left;
+}
+
+.title>div>hr {
+  float:left;
+  position: relative;
+  width: 100px;
+  top: 5px;
+  background-color: rgb(10, 127, 10);
+  height: 5px;
+  border: none;
+}
+
+.form-layout {
+  clear: left;
+}
+
+.form-input {
+  width: 350px;
+  margin-bottom: 5px;
+}
+
+.form-input>div {
+  float: left;
+  width: 130px;
+}
+
+.form-input>input {
+  width: 198px;
+}
+
+.driver-checkbox {
+  margin: 20px 0px;
+}
+
+.driver-checkbox>input {
+  float: left;
+  margin-left: 0px;
+}
+
+
+.cancel-button {
+  width: 75px;
+  height: 30px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border: 1px solid black;
+  background-color: #D2002E;
+  border-radius: 10px;
+}
+
+.accept-button {
+  width: 75px;
+  height: 30px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border: 1px solid black;
+  background-color: #83D535;
+  border-radius: 10px;
+}
+
+
+.driver-completeorder-pic {
+  height: 100px;
+  width: 100px;
+  margin: 10px;
+  border-radius: 100%;
+  border: 3px solid #5A1E83;
+}
+
+.completeorder-container {
+  text-align: center;
+  clear: both;
+}
+
+.right-align {
+  width: 100%;
+  text-align: right;
+}
+
+.driver-fullname-disp {
+  font-size: 105%;
+  font-weight: bold;
+  margin-top: 5px;
+}
+
+/*Select driver*/
+.select-driver {
+  width: fit-content;
+  padding: 0 10px;
+  border-radius: 12px;
+  border: 1px solid black;
+  margin: 10px 0;
+}
+
+.driver-content {
+  height: 120px;
+  overflow: hidden;
+}
+
+.driver-pic {
+  height: 100px;
+  width: 100px;
+  margin: 10px;
+  border-radius: 100%;
+  border: 3px solid #5A1E83;
+  float: left;
+}
+
+.driver-name-disp {
+  font-size: 160%;
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.driver-rating-disp {
+  color: orange;
+  font-size: 110%;
+}
+
+.driver-not-found {
+  color: grey;
+  height: 70px;
+  text-align: center;
+  text-transform: none;
+  line-height: 70px;
+  vertical-align: middle;
+}
+
+.vote-disp {
+  color: black;
+}
+
+.select-driver-btn {
+  width: auto;
+  color: white;
+  background-color: #5A1E83;
+  letter-spacing: 0.5px;
+  float: right;
+}
+
+.order-btn {
+  float: none;
+  clear: both;
+}
+
+#profile-pic {
+  width: 150px;
+  height: 150px;
+  border: 1px solid black;
+  float: left;
+  margin-right: 25px;
+  margin-bottom: 30px;
+}
+
+#save-profile {
+  float: right;
+}
+
+#register-button {
+  background-color: #4CAF50;
+  border: 5px solid rgb(10, 127, 10);
+  border-radius: 20px;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
+
+#button-layout>div {
+  float: left;
+  width: 200px;
+  height: 66px;
+}
+
+#button-layout a {
+  position: relative;
+  top: 20px;
+}
+
+
+.button-form {
+  text-align: right;
+  width: 100%;
+}
+
+.button-form div {
+  float: left;
+}
+
+.completeorder-btn {
+  width: 100px;
+  height: 50px;
+  float: none;
+}
+
+ /* The switch - the box around the slider */
+ .switch {
+  position: relative;
+  display: inline-block;
+
+  width: 50px;
+  height: 25px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {display:none;}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 19px;
+  width: 19px;
+  left: 4px;
+  bottom: 3px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #1E7B25;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #1E7B25;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(23px);
+  -ms-transform: translateX(23px);
+  transform: translateX(23px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+/* Menu Order */
+.menu-order {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  font-size: 12px;
+  border-spacing: 20px 12px;
+}
+
+.menu-order-column {
+  height: 100%;
+}
+
+.menu-order-cell {
+  display: table-cell;
+  position: relative;
+  text-align: left;
+  font-weight: bold;
+}
+
+.menu-order-number
+{
+    position: relative;
+    display: block;
+    width: 50px;
+    height: 50px;
+    border-radius: 25px; /* or 50% */
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #311B92;
+    color: #ffffff;
+    line-height: 50px;
+}
+
+.menu-order-title
+{
+    position: relative;
+    display: inline-block;
+}
+
+#next-button-text {
+  line-height: 20px;
+  width: 75%;
+  padding-right: 1px;
+}
+
+input.next-button {
+  width: 20%;
+  height: 30px;
+  line-height: 20px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border: 1px solid black;
+  background-color: #83D535;
+  border-radius: 10px;
+  display: inline-block;
+}
+
+table, th, td {
+  table-layout: auto !important;
+  width: 100% auto !important;
+  max-width:100%;
+  white-space:nowrap;
+  border: 1px solid black;
+  border-collapse: collapse;
+}
+
+.pref-button {
+  width: 21px;
+  height: 21px;
+  vertical-align: middle;
+  border: none;
+  display: inline-block;
+}
+
+/** Rating **/
+.starRating:not(old){
+  display        : inline-block;
+  width          : 7.5em;
+  height         : 1.5em;
+  overflow       : hidden;
+  vertical-align : bottom;
+}
+
+.starRating:not(old) > input{
+  margin-right : -100%;
+  opacity      : 0;
+}
+
+.starRating:not(old) > label{
+  display         : block;
+  float           : right;
+  position        : relative;
+  background      : url('../img/star-off.svg');
+  background-size : contain;
+}
+
+.starRating:not(old) > label:before{
+  content         : '';
+  display         : block;
+  width           : 1.5em;
+  height          : 1.5em;
+  background      : url('../img/star-on.svg');
+  background-size : contain;
+  opacity         : 0;
+  transition      : opacity 0.2s linear;
+}
+
+.starRating:not(old) > label:hover:before,
+.starRating:not(old) > label:hover ~ label:before,
+.starRating:not(:hover) > :checked ~ label:before{
+  opacity : 1;
+}