osherdo

osherdo

Member Since 4 Years Ago

Experience Points 11,480
Experience Level 3

3,520 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed 19
Lessons
Completed
Best Reply Awards 0
Best Reply
Awards
  • Start Your Engines Achievement

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • First Thousand Achievement

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • One Year Member Achievement

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • Two Year Member Achievement

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • Three Year Member Achievement

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • Four Year Member Achievement

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • Five Year Member Achievement

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • School In Session Achievement

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • Welcome To The Community Achievement

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • Full Time Learner Achievement

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • Pay It Forward Achievement

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • Subscriber Achievement

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • Lifer Achievement

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • Laracasts Evangelist Achievement

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • Chatty Cathy Achievement

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • Laracasts Veteran Achievement

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • Ten Thousand Strong Achievement

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • Laracasts Master Achievement

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • Laracasts Tutor Achievement

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • Laracasts Sensei Achievement

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • Top 50 Achievement

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

18 Aug
2 years ago

osherdo started a new conversation Failing At Uploading Images With Dropzone.js

I am trying to upload an image for a user (as his profile image), and I get this error in the image element in the output. I noticed the error shows after I add this code to the controller. Would love to hear your suggestions about it.

$user = auth->user();

$user->profileImage()->create([
    'filename' => $filename
]);

Error Screenshot:

http://1.1m.yt/Wgsi-uF.png

error - pretty long text, so I have pasted it in this link: https://justpaste.it/xgk8

here's my code: User.php model:

public function profileImage()
  {
    return $this->hasMany(ProfileImage::class);
  }

ProfileImage Model:

class profile_image extends Model
{
    protected $table="profile_images";
    protected $fillable=["image_upload"];


    public function user()
    {
    return $this->belongsTo(User::class);
    }

    public function getPathAttribute()
{
    return $this->filePath;
}

}

Controller:

class DropzoneController extends Controller
{

  public function index()
{
  return view('dropzone_demo');
}

public function uploadFiles()
{
  $user = auth->user();

  $message="Profile Image Created";
  $input = Input::all();

  $rules = array(
      'file' => 'image|max:3000',
  );

  $validation = Validator::make($input, $rules);

  if ($validation->fails()) {
      return Response::make($validation->errors->first(), 400);
  }

  $destinationPath = 'uploads'; // upload path: public/uploads
  $extension = Input::file('file')->getClientOriginalExtension(); // getting file extension
  $fileName = rand(11111, 99999) . '.' . $extension; // renameing image
  $upload_success = Input::file('file')->move($destinationPath, $fileName); // uploading file to given path

  if ($upload_success)
  {
      return Response::json('success', 200);
  } else
  {
      return Response::json('error', 400);
  }

//  attaching the profile image to the authenticated user.

$user->profileImage()->create([
    'filename' => $filename
]);

}
}

view:

    <form action="{{ url('user/upload')}}" class="dropzone" name="image_upload" id="my-awesome-dropzone"></form>

osherdo left a reply on Getting Data From Js To Laravel (dropzone.js)

@mstnorris thought I should give you an update.

If I change the relationship to one-to-many - should I change something else expect the property in the User model?

16 Aug
2 years ago

osherdo left a reply on Delete A Record From A Relationship

@Snapey thanks so much! I have done it with also removing the first() method that did not helped in this case.

I now do redirect back to the view I have been on, but I dont see the flash message.

This is my current code:

public function delete(Request $request,$id)
    {

        $user=Auth::user();
        $routine = \App\Routine::findOrFail($id); // find or throw an error if you don't find the routine id in db.

        if ($user->id != $routine->user->id)
        {
          Session::flash('flash_message', 'No routine found.');
        }
        else
        {
          $routine->delete();
        }
        return redirect()->back()->with('user') ;

    }

and that's my view for the message:

@if(Session::has('flash_message'))
            <div class="alert alert-success">
                {{ Session::get('flash_message') }}
            </div>
@endif 

Thanks for helping, again.

osherdo left a reply on Delete A Record From A Relationship

I have updated the code , like you said, and understood your idea:

public function delete(Request $request,$id)
    {

        $user=Auth::user();
        $routine = \App\Routine::findOrFail($id); // find or throw an error if you don't find the routine id in db.
        // Makes if() statement redundant, since it checkes for that id already.

        // Need to check that the owner of the routine is the current authenticated user.
        if ($user->id != $routine->user->id)
        {
          Session::flash('flash_message', 'No routine found.');
        }
        else
        {
          $routine->delete();
        }

        return view('view_routine')->with('user','routine')->first();
        //return view('view_routine')->with('user', 'routine');

    }

tried both with and without first(). No success here. Currently I get an error with first() I am getting this error:

Trying to get property of non-object (View: /var/www/sports-application/resources/views/view_routine.blade.php)

view (if needed):

          <div class="col-lg-2">
      <!-- When this button is clicked, we determine which routine to remove. -->
      {!! Form::open(['route' => ['deleteRoutine', $routine->id], 'method' => 'delete']) !!}
          <input type="submit" class="btn btn-warning remove_routine" style="display:inline" value="Delete">
      {!! Form::close() !!}
  </div>

osherdo left a reply on Missing Argument 2 Error

@SaeedPrez I tried it without the first() method, but it returns this:

Trying to get property of non-object (View: /var/www/sports-application/resources/views/view_routine.blade.php)

So I thought adding the first() method will solve it.

15 Aug
2 years ago

osherdo left a reply on Missing Argument 2 Error

I also now get an error after fixing it like you said, and updated the controller code a bit: error: Method [first] does not exist on view.

controller:

public function delete(Request $request,$id)
    {

        $user=Auth::user();
        $routine = \App\Routine::findOrFail($id); // find or throw an error if you don't find the routine id in db.

        if ($routine)
        {
            $routine->delete();
        }
        else
        {
          // Need to check that the owner of the routine is the current authenticated user.
        if ($user->id != $routine->user->id)
        {
          Session::flash('flash_message', 'No routine found.');

        }
          }

        $routine->delete();

        return view('view_routine')->with('user','routine')->first();
    }

osherdo left a reply on Missing Argument 2 Error

I am not sure why this: {routine} is important. what's this argument represents?

osherdo started a new conversation Missing Argument 2 Error

I am trying to delete a routine that a user create, and belongs to him. I get this error when trying to delete on a button click:

Missing argument 2 for App\Http\Controllers\RoutineController::delete()

I think I do have 2 arguments which are:

Request $request,$id

here's the view:

      <div class="col-lg-2">
    <!-- When this button is clicked, we determine which routine to remove. -->
    {!! Form::open(['route' => ['deleteRoutine', $routine->id], 'method' => 'delete']) !!}
        <input type="submit" class="btn btn-warning remove_routine" style="display:inline" value="Delete">
    {!! Form::close() !!}
</div>

route:

 Route::delete('routine/delete', '[email protected]')->name('deleteRoutine'); // Delete a routine for a user.

controller:

public function delete(Request $request,$id)
    {


        $routine = \App\Routine::findOrFail($id);

        if ($routine)
        {
            $routine->delete();
        }
        else
        {
          // Need to check that the owner of the routine is the current authenticated user.
        if (Auth::user()->id != $routine->user->id)
        {
          Session::flash('flash_message', 'No routine found.');

        }
          }

        $routine->delete();

        return view('view_routine');
    }

User.php model:

  public function routine()
  {
    return $this->hasMany('App\Routine');
  }

Routine.php model

public function user()
{
  return $this->belongsTo('App\User');
}

osherdo started a new conversation MethodNotAllowedHttpException In RouteCollection.php Error

I have this route:

 Route::post('routine/delete', '[email protected]')->name('deleteRoutine'); // Delete a routine for a user.

And when trying to access it in the view:


        <div class="col-lg-2">
    <!-- When this button is clicked, we determine which routine to remove. -->
    {!! Form::open(['route' => ['deleteRoutine', $routine->id], 'method' => 'delete']) !!}
        <input type="submit" class="btn btn-warning remove_routine" style="display:inline" value="Delete">
    {!! Form::close() !!}
</div>

I am not sure why, and checked if the naming is right, but I get this error message:

MethodNotAllowedHttpException in RouteCollection.php line 218:

Why is it happening?

thanks.

osherdo left a reply on Delete A Record From A Relationship

@ctroms thanks for that profound explanation. I have tried to change the method from POST to DELETE , and it returns this error:

MethodNotAllowedHttpException in RouteCollection.php line 218:

I am not sure why it returns a routing error here, so I am leaving it with the post request for now.

Checked about the route, seems fine to me: routes.php: Route::post('routine/delete', '[email protected]')->name('deleteRoutine'); // Delete a routine for a user.

view: {!! Form::open(['route' => 'deleteRoutine','method'=>'post']) !!}

As for the data attributes- I am thinking if it's possible to remove the routine for the authenticated user without ajax, so it will refresh the page on delete. I think I will delete those for now, and instead use the destroy method. this is the updated line: <input type="submit" class="btn btn-danger remove_routine" data-token="{{csrf_token()}}" style="display:inline" value="Delete">

You said that value isn't needed unless you are going to use it when handling the request. Value is used to show the text on the delete button, I believe, isn't?

Also, I don't believe I need button element instead of the submit button,right?

Currently I am getting the above errors (simultaneously with post and delete requests). Here's the updated controller function code:

  public function delete(Request $request,$id)
    {


        $routine = \App\Routine::findOrFail($id);

        if ($routine)
        {
            $routine->delete();
        }
        else
        {
          // Need to check that the owner of the routine is the current authenticated user.
        if (Auth::user()->id != $routine->user->id)
        {
        return view('view_routine') // throw your exception, return something or redirect back with an error message, etc.
        }
          }

        $routine->delete();

        return view('view_routine');
    }

Would love to hear your suggestions further :). Appreciate your time to write comprehensive explanation.

13 Aug
2 years ago

osherdo left a reply on Delete A Record From A Relationship

Going to sleep now, definitely will update my code according to your suggestions and post here what's the output for it.

osherdo left a reply on Delete A Record From A Relationship

Ok I have change it to a submit button, and added a name route direction :

  <div class="col-lg-2">
       <!-- When this button is clicked, we determine which routine to remove. -->
       {!! Form::open(['route' => 'deleteRoutine','method'=>'post']) !!}

            <input type="submit" class="btn btn-warning remove_routine" data-id="{{$routine->id}}" data-token="{{csrf_token()}}" style="display:inline" value="Delete">
            {!! Form::close() !!}
        </div>

controller:

public function delete(Request $request,$id)
    {
      $user = Auth::user();

        $id = $request->input("id"); // Getting the id via. the ajax request.

        $routine = \App\Routine::find($id); //Fetching the routine object from the db ifentified by the id passed via ajax

        if ($routine)
        {
            $routine->delete();

        }
        Routine::destroy($id);

        //return ["status" => "success"];
        return view('view_routine');

    }

I have added the destroy method in the controller. isn't possible to achieve without ajax?

route:

 Route::post('routine/delete', '[email protected]')->name('deleteRoutine'); // Delete a routine for a user.

I am now getting this error: Missing argument 2 for App\Http\Controllers\RoutineController::delete()

what's the second argument from the url the action expects?

osherdo left a reply on Delete A Record From A Relationship

@ctroms it's ok, don't go hard on yourself :)

I will post here the outcome of my complete ajax request soon.

osherdo started a new conversation Delete A Record From A Relationship

I want to delete a record: remove a routine,that belongs to a user, on button click (hasMany). I have set up the view, models and relationship within,delete route, and the controller method to delete.

When I try to click the button to remove the routine from the db, it does nothing. why does it not removing the record?

Here's my code: route:

 Route::post('routine/delete', '[email protected]'); // Delete a routine for a user.

Controller:

    {
        $id = $request->input("id"); // Getting the id via. the ajax request.

        $routine = \App\Routine::find($id); //Fetching the routine object from the db ifentified by the id passed via ajax

        if ($routine)
        {
            $routine->delete();
        }

        return ["status" => "success"];
    }

View:

<div class="col-lg-2">
       <!-- When this button is clicked, we determine which routine to remove. -->
            <button class="btn btn-danger remove_routine" data-id="{{$routine->id}}" data-token="{{csrf_token()}}" style="display:inline">Delete</button>
        </div>

User Model:

  public function routine()
  {
    return $this->hasMany('App\Routine');
  }

Routine model:

 public function user()
{
  return $this->belongsTo('App\User');
}

Thanks in advance!

02 Aug
2 years ago

osherdo left a reply on Including Css File Is Not Working

That's seems to work:

var elixir = require('laravel-elixir');

elixir(function (mix) {
mix.sass('app.scss', 'resources/assets/css')
 .styles([
'app.css'
 ], 'public/css/app.css');
 mix.version([
   'css/app.css'
    ]);
 });

view:

     <link href="{{ elixir("css/app.css") }}" rel="stylesheet">

It now works well! thank you guys anyway for the help! @d3xt3r thanks for pointing that out for me.

osherdo left a reply on Including Css File Is Not Working

@d3xt3r I have just inspected with Chrome tools, and it appears it gets the background-color from other file!

http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/less/scaffolding.less

How can I use the scss file instead of using bootstrap's file styling? I do need bootstrap for the design part.

osherdo left a reply on Including Css File Is Not Working

You're right, since I thought it is in another folder. I now know what the versioned css folder is.

so why does it still not applying the stylesheet to it? any idea?

osherdo left a reply on Including Css File Is Not Working

@Snapey it returns this in page source: <link rel="stylesheet" href="/build//build/css/app-58d7a6fbb4.css"> not so well. I am trying to find where it says to set /build as the root folder. the thing's that the code in this file is indeed updating when running gulp, but it does not applying still to the view.

osherdo left a reply on Including Css File Is Not Working

@d3xt3r thanks. I do see the changes in this file: build/css/app-58d7a6fbb4.css After I run gulp.

osherdo left a reply on Including Css File Is Not Working

i need to point to this path with elixir. is it possible? /var/www/sports-application/public/css/app.css

osherdo left a reply on Including Css File Is Not Working

Yes. But I don't need this fiie. I do need the compiled css that's generated with gulp. How can I point to it with {{ elixir }}?

I really thought that that:

    <link rel="stylesheet" href="/build/css/app-58d7a6fbb4.css">

Will point me to the compiled one.

osherdo left a reply on Including Css File Is Not Working

No special errors in the Network tab (only one .png file that's not found).

osherdo left a reply on Including Css File Is Not Working

Help , please?

osherdo left a reply on Including Css File Is Not Working

Still no success here. I for instance try to change the background color, and then compile with gulp - but the background is not changing.

@import "dropzone";

body {

    background: #ff9999;
    overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
    height: 100%; /* Cover all (100%) of the container for the body with its content */
    padding-top: 70px;
}

Any more suggestions?

osherdo started a new conversation Including Css File Is Not Working

I have compiled one app.scss file to css file using Gulp. The compilation completed (using gulp) without any errors. But even the compiled css has been included in the view, it seems the styles are not being applied! Why is it happening?

View code:

<head>
<!--Relevant code. -->
    <link rel="stylesheet" href="{{ elixir('css/app.css') }}">
</head>

gulpfile.js:

var elixir = require('laravel-elixir');
elixir(function(mix) {
    mix.sass(['app.scss']).version('css/app.css');
});
01 Aug
2 years ago

osherdo left a reply on Multiple SASS Files

I see now. Will check up on that. Thanks!

osherdo left a reply on Multiple SASS Files

@leandromatos thanks for that.It returns another error:

 gulp-notify: [Laravel Elixir] Sass Compilation Failed: resources/assets/sass/app.scss Error: @import directive requires a url or quoted path on line 4 of stdin >> @import('buttons'); ^ 

Tried to run both: npm install -g gulp-sass and npm install gulp-sass still getting the same error as above.

osherdo left a reply on Multiple SASS Files

Tried to import 2 fils like this at the top of app.scss file:

@include('buttons');
@include('dropzone');

It returns an error: invalid css after @import.

osherdo left a reply on Multiple SASS Files

@leandromatos thanks for replying. You mean I can include the SASS file inside the app.scss file, like you've shown?

osherdo left a reply on Multiple SASS Files

Anyone,please?

osherdo left a reply on Multiple SASS Files

Please @SmoDav :

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.sass(['app.scss','buttons.scss','dropzone.scss']).version('css/app.css');
});

@mstnorris please, here's the app.scss file as you've requeested:

// @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";


$primaryColor: #eeffcc;

body {
    background: $primaryColor;
    overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
    height: 100%; /* Cover all (100%) of the container for the body with its content */
    padding-top: 70px;


}

$container-width: 100%;
$column-count: 4;
$margin: 1%;

nav.navbar{
  transition: top 0.2s ease-in-out;
}
.nav-up {
    top: -51px;
}
.container {
  width: $container-width;
}

.column {
  background: #1abc9c;
  height: 200px;
  display: block;
  float: left;
  width: ($container-width / $column-count) - ($margin * 2);
  margin: 0 $margin;
}


.test {
    width: 500px;
    height: 70px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 5px;
}

.test[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555;
}

.test[placeholder]:empty:focus:before {
    content: "";
}

.contentWrap {
  overflow: hidden;
  max-height: 70px;
}

.own_posts {
  margin-top: 15px;
  width: 100%;
  background: #008B8B;
  text-align: center;
  border: 1px solid #000;
  }
  .own_posts p{
    font-weight: 800;
    font-size: 20px;
  }

  .following_posts {
  right: 10%;
  width: 35%;
  height: 30%;
  top: 60%;
  background: #008B8B;
  position: absolute;
  text-align: center;
  }

.contentWrap {
  overflow: hidden;
  max-height: 70px;
}

.icons {
  border: 1px solid red;
  max-width: 700px;
  width:100%;
}

.test img, .icons img , .followee_posts img,.own_posts img {
  width: 24px;
  height: 24px;
}

.test {
  max-width: 700px;
  width:100%;
  overflow: hidden;
  height: 70px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 5px;
  max-height: 70px;
  &[placeholder]:empty {
    &:before {
      content: attr(placeholder);
      color: #555;
    }
    &:focus:before {
      content: "";
    }
  }
}

.multiselect-container {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  .input-group {
    margin: 5px;
  }
  > li {
    padding: 0;
    > a.multiselect-all label {
      font-weight: 700;
    }
    &.multiselect-group label {
      margin: 0;
      padding: 3px 20px 3px 20px;
      height: 100%;
      font-weight: 700;
    }
    &.multiselect-group-clickable label {
      cursor: pointer;
    }
    > a {
      padding: 0;
      > label {
        margin: 0;
        height: 100%;
        cursor: pointer;
        font-weight: 400;
        padding: 3px 20px 3px 40px;
        &.radio, &.checkbox {
          margin: 0;
        }
        > input[type=checkbox] {
          margin-bottom: 5px;
        }
      }
    }
  }
}

.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.form-inline .multiselect-container
{
  label {
    &.checkbox, &.radio {
      padding: 3px 20px 3px 40px;
    }
  }
  li a label {
    &.checkbox input[type=checkbox], &.radio input[type=radio] {
      margin-left: -20px;
      margin-right: 0;
    }
  }
}
    /* Bootstrap multi-select library -scss (sass) code.  */
.multiselect-container {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  .input-group {
    margin: 5px;
  }
  > li {
    padding: 0;
    > a.multiselect-all label {
      font-weight: 700;
    }
    &.multiselect-group label {
      margin: 0;
      padding: 3px 20px 3px 20px;
      height: 100%;
      font-weight: 700;
    }
    &.multiselect-group-clickable label {
      cursor: pointer;
    }
    > a {
      padding: 0;
      > label {
        margin: 0;
        height: 100%;
        cursor: pointer;
        font-weight: 400;
        padding: 3px 20px 3px 40px;
        &.radio, &.checkbox {
          margin: 0;
        }
        > input[type=checkbox] {
          margin-bottom: 5px;
        }
      }
    }
  }
}

.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.form-inline .multiselect-container {
  label {
    &.checkbox, &.radio {
      padding: 3px 20px 3px 40px;
    }
  }
  li a label {
    &.checkbox input[type=checkbox], &.radio input[type=radio] {
      margin-left: -20px;
      margin-right: 0;
    }
  }
}
/* Jquery external library for range selector */
.slider-container {
  width: 300px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  .back-bar {
    height: 10px;
    position: relative;
    .selected-bar {
      position: absolute;
      height: 100%;
    }
    .pointer {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: red;
      cursor: col-resize;
      opacity: 1;
      z-index: 2;
      &.last-active {
        z-index: 3;
      }
    }
    .pointer-label {
      position: absolute;
      top: -17px;
      font-size: 8px;
      background: white;
      white-space: nowrap;
      line-height: 1;
    }
    .focused {
      z-index: 10;
    }
  }
  .clickable-dummy {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .scale {
    top: 2px;
    position: relative;
    span {
      position: absolute;
      height: 5px;
      border-left: 1px solid #999;
      font-size: 0;
    }
    ins {
      font-size: 9px;
      text-decoration: none;
      position: absolute;
      left: 0;
      top: 5px;
      color: #999;
      line-height: 1;
    }
  }
  &.slider-readonly {
    .clickable-dummy, .pointer {
      cursor: auto;
    }
  }
}

.theme-green {
  .back-bar {
    height: 5px;
    border-radius: 2px;
    background-color: #eeeeee;
    background-color: #e7e7e7;
    background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
    background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
    background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
    background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
    .selected-bar {
      border-radius: 2px;
      background-color: #a1fad0;
      background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
      background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
      background-image: -o-linear-gradient(top, #bdfade, #76fabc);
      background-image: linear-gradient(to bottom, #bdfade, #76fabc);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);
    }
    .pointer {
      width: 14px;
      height: 14px;
      top: -5px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border-radius: 10px;
      border: 1px solid #AAA;
      background-color: #e7e7e7;
      background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
      background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
      background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
      background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
    }
    .pointer-label {
      color: #999;
    }
    .focused {
      color: #333;
    }
  }
  .scale {
    span {
      border-left: 1px solid #e5e5e5;
    }
    ins {
      color: #999;
    }
  }
}

.theme-blue {
  .back-bar {
    height: 5px;
    border-radius: 2px;
    background-color: #eeeeee;
    background-color: #e7e7e7;
    background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
    background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
    background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
    background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
    .selected-bar {
      border-radius: 2px;
      background-color: #92c1f9;
      background-image: -moz-linear-gradient(top, #b1d1f9, #64a8f9);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b1d1f9), to(#64a8f9));
      background-image: -webkit-linear-gradient(top, #b1d1f9, #64a8f9);
      background-image: -o-linear-gradient(top, #b1d1f9, #64a8f9);
      background-image: linear-gradient(to bottom, #b1d1f9, #64a8f9);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0);
    }
    .pointer {
      width: 14px;
      height: 14px;
      top: -5px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border-radius: 10px;
      border: 1px solid #AAA;
      background-color: #e7e7e7;
      background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
      background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
      background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
      background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
    }
    .pointer-label {
      color: #999;
    }
    .focused {
      color: #333;
    }
  }
  .scale {
    span {
      border-left: 1px solid #e5e5e5;
    }
    ins {
      color: #999;
    }
  }
}

/* Jquery UI */
.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin:2px 0 0 0;padding:.5em .5em .5em .7em;min-height:0;font-size:100%}.ui-accordion .ui-accordion-icons{padding-left:2.2em}.ui-accordion .ui-accordion-icons .ui-accordion-icons{padding-left:2.2em}.ui-accordion .ui-accordion-header .ui-accordion-header-icon{position:absolute;left:.5em;top:50%;margin-top:-8px}.ui-accordion .ui-accordion-content{padding:1em 2.2em;border-top:0;overflow:auto}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-button{display:inline-block;position:relative;padding:0;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2.2em}button.ui-button-icon-only{width:2.4em}.ui-button-icons-only{width:3.4em}button.ui-button-icons-only{width:3.7em}.ui-button .ui-button-text{display:block;line-height:normal}.ui-button-text-only .ui-button-text{padding:.4em 1em}.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{padding:.4em;text-indent:-9999999px}.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em}.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em}.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em}input.ui-button{padding:.4em 1em}.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px}.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px}.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em}.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em}.ui-buttonset{margin-right:7px}.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-dialog{overflow:hidden;position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-se{width:12px;height:12px;right:-5px;bottom:-5px;background-position:16px 16px}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:none}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{position:relative;margin:0;padding:3px 1em 3px .4em;cursor:pointer;min-height:0;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-progressbar{height:2em;text-align:left;overflow:hidden}.ui-progressbar .ui-progressbar-value{margin:-1px;height:100%}.ui-progressbar .ui-progressbar-overlay{background:url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");height:100%;filter:alpha(opacity=25);opacity:0.25}.ui-progressbar-indeterminate .ui-progressbar-value{background-image:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-selectable{-ms-touch-action:none;touch-action:none}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-selectmenu-menu{padding:0;margin:0;position:absolute;top:0;left:0;display:none}.ui-selectmenu-menu .ui-menu{overflow:auto;overflow-x:hidden;padding-bottom:1px}.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup{font-size:1em;font-weight:bold;line-height:1.5;padding:2px 0.4em;margin:0.5em 0 0 0;height:auto;border:0}.ui-selectmenu-open{display:block}.ui-selectmenu-button{display:inline-block;overflow:hidden;position:relative;text-decoration:none;cursor:pointer}.ui-selectmenu-button span.ui-icon{right:0.5em;left:auto;margin-top:-8px;position:absolute;top:50%}.ui-selectmenu-button span.ui-selectmenu-text{text-align:left;padding:0.4em 2.1em 0.4em 1em;display:block;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default;-ms-touch-action:none;touch-action:none}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.ui-spinner{position:relative;display:inline-block;overflow:hidden;padding:0;vertical-align:middle}.ui-spinner-input{border:none;background:none;color:inherit;padding:0;margin:.2em 0;vertical-align:middle;margin-left:.4em;margin-right:22px}.ui-spinner-button{width:16px;height:50%;font-size:.5em;padding:0;margin:0;text-align:center;position:absolute;cursor:default;display:block;overflow:hidden;right:0}.ui-spinner a.ui-spinner-button{border-top:none;border-bottom:none;border-right:none}.ui-spinner .ui-icon{position:absolute;margin-top:-8px;top:50%;left:0}.ui-spinner-up{top:0}.ui-spinner-down{bottom:0}.ui-spinner .ui-icon-triangle-1-s{background-position:-65px -16px}.ui-tabs{position:relative;padding:.2em}.ui-tabs .ui-tabs-nav{margin:0;padding:.2em .2em 0}.ui-tabs .ui-tabs-nav li{list-style:none;float:left;position:relative;top:0;margin:1px .2em 0 0;border-bottom-width:0;padding:0;white-space:nowrap}.ui-tabs .ui-tabs-nav .ui-tabs-anchor{float:left;padding:.5em 1em;text-decoration:none}.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:-1px;padding-bottom:1px}.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor{cursor:text}.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor{cursor:pointer}.ui-tabs .ui-tabs-panel{display:block;border-width:0;padding:1em 1.4em;background:none}.ui-tooltip{padding:8px;position:absolute;z-index:9999;max-width:300px;-webkit-box-shadow:0 0 5px #aaa;box-shadow:0 0 5px #aaa}body .ui-tooltip{border-width:2px}.ui-widget{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #ddd;background:#eee url("images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #e78f08;background:#f6a828 url("images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;color:#fff;font-weight:bold}.ui-widget-header a{color:#fff}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #ccc;background:#f6f6f6 url("images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;font-weight:bold;color:#1c94c4}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#1c94c4;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #fbcb09;background:#fdf5ce url("images/ui-bg_glass_100_fdf5ce_1x400.png") 50% 50% repeat-x;font-weight:bold;color:#c77405}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{color:#c77405;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #fbd850;background:#fff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;font-weight:bold;color:#eb8f00}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#eb8f00;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fed22f;background:#ffe45c url("images/ui-bg_highlight-soft_75_ffe45c_1x100.png") 50% top repeat-x;color:#363636}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#b81900 url("images/ui-bg_diagonals-thick_18_b81900_40x40.png") 50% 50% repeat;color:#fff}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#fff}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#fff}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("images/ui-icons_222222_256x240.png")}.ui-widget-header .ui-icon{background-image:url("images/ui-icons_ffffff_256x240.png")}.ui-state-default .ui-icon{background-image:url("images/ui-icons_ef8c08_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url("images/ui-icons_ef8c08_256x240.png")}.ui-state-active .ui-icon{background-image:url("images/ui-icons_ef8c08_256x240.png")}.ui-state-highlight .ui-icon{background-image:url("images/ui-icons_228ef1_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("images/ui-icons_ffd27a_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}.ui-widget-overlay{background:#666 url("images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;opacity:.5;filter:Alpha(Opacity=50)}.ui-widget-shadow{margin:-5px 0 0 -5px;padding:5px;background:#000 url("images/ui-bg_flat_10_000000_40x100.png") 50% 50% repeat-x;opacity:.2;filter:Alpha(Opacity=20);border-radius:5px}

/* Multi-select and slider aligned each under one. */

.container col-centered {
  float: none;
  margin: 0 auto;
}

/* jquery routine content-filter (filter exercises type) */


@import 'node_modules/bourbon/app/assets/stylesheets/_bourbon.scss'; // http://bourbon.io/

@import "node_modules/node-neat/node_modules/bourbon-neat/app/assets/stylesheets/_neat.scss";

@import 'resources/assets/sass/content-filter/partials/_variables.scss'; // colors, fonts etc...

@import 'resources/assets/sass/content-filter/partials/_mixins.scss'; // custom mixins

@import 'resources/assets/sass/content-filter/partials/_layout.scss'; // responsive grid and media queries

/* --------------------------------

Primary style

-------------------------------- */

*, *::after, *::before {
  @include box-sizing(border-box);
}

html {
  font-size: 62.5%;
  height: 100%;
}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font: {
    size: 1.6rem;
    family: $primary-font; // variables inside partials > _variables.scss
  }
  color: $color-1;
  background-color: lighten($color-4, 30%);
}

a {
  color: $color-2;
  text-decoration: none;
}

/* --------------------------------

Main Components

-------------------------------- */

.cd-header {
  position: relative;
  height: 150px;
  background-color: $color-1;

  h1 {
    color: $color-3;
    line-height: 150px;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 300;
  }

  @include MQ(L) {
    height: 180px;

    h1 {
      line-height: 180px;
    }
  }
}
.affix.showSidebar{
   top: 50px!important;
   }
.showSidebar{
    right: 0px; /* show the sidebar from the right */
    left: auto!important;
    display: inherit!important;
}

main {
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
  -moz-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
  -ms-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
  -o-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
  transition: all 0.35s cubic-bezier(1, 1, 1, 1);
}

#main.pushWrapper{
  -webkit-transform: translate3d(-250px, 0, 0);
  -moz-transform: translate3d(-250px, 0, 0);
  -ms-transform: translate3d(-250px, 0, 0);
  -o-transform: translate3d(-250px, 0, 0);
  transform: translate3d(-250px, 0, 0);
}



#sidebar-nav {
  position: fixed;
  width: 500px;
  top: 0;
  bottom: 0;
  right:0;
  background-color: #000;
  z-index:99;
  overflow-y: scroll;
  overflow: auto;
  -webkit-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
  -moz-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
  -ms-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
  -o-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
  transition: all 0.35s cubic-bezier(1, 1, 1, 1);
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);

}

#sidebar-nav.showSidebar
{
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

}

#sidebar-nav ul form button[type="submit"]{
  display: none;
}

.cd-main-content {
  position: relative;
  min-height: 100vh;
  @include clearfix;

  &.is-fixed {
    .cd-tab-filter-wrapper {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
    }


    .cd-gallery {
      padding-top: 26px+$tab-filter-height;
    }

    .cd-filter {
      position: fixed;
      height: 100vh;
      overflow: hidden;

      form {
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
    }

    .cd-filter-trigger {
      position: fixed;
    }

    @include MQ(M) {
      .cd-gallery {
        padding-top: 40px+$tab-filter-height;
      }
    }

    @include MQ(L) {
      .cd-gallery {
        padding-top: 50px+$tab-filter-height;
      }
    }
  }
}

/* --------------------------------

xtab-filter

-------------------------------- */

.cd-tab-filter-wrapper {
  background-color: $color-3;
  box-shadow: 0 1px 1px rgba(#000, .08);
  z-index: 1;
  @include clearfix;
}

.cd-tab-filter {
  /* tabbed navigation style on mobile - dropdown */
  position: relative;
  height: $tab-filter-height;
  width: 140px;
  margin: 0 auto;
  z-index: 1;

  &::after {
    /* small arrow icon */
    content:'';
    position: absolute;
    right: 14px;
    @include center(y); // see partials > mixins

    display: inline-block;
    width: 16px;
    height: 16px;

    background: url('../img/cd-icon-arrow.svg') no-repeat center center;

    @include transition(all .3s);
    pointer-events: none;
  }

  ul {
    position: absolute;
    top: 0;
    left: 0;

    background-color: $color-3;
    box-shadow: inset 0 -2px 0 $color-2;
  }

  li {
    display: none;

    &:first-child {
      /* this way the placehodler is alway visible */
      display: block;
    }
  }

  a {
    display: block;
    /* set same size of the .cd-tab-filter */
    height: $tab-filter-height;
    width: 140px;
    line-height: $tab-filter-height;
    padding-left: 14px;

    &.selected {
      background: $color-2;
      color: $color-3;
    }
  }

  &.is-open {

    &::after {
      /* small arrow rotation */
      @include transform(translateY(-50%) rotate(-180deg));
    }

    ul {
      box-shadow: inset 0 -2px 0 $color-2, 0 2px 10px rgba(#000, .2);
    }

    ul li {
      display: block;
    }

    .placeholder a {
      /* reduces the opacity of the placeholder on mobile when the menu is open */
      opacity: .4;
    }
  }

  @include MQ(M) {
    /* tabbed navigation style on medium devices */
    width: auto;
    cursor: auto;

    &::after {
      /* hide the arrow */
      display: none;
    }

    ul {
      background: transparent;
      position: static;
      box-shadow: none;
      text-align: center;
    }

    li {
      display: inline-block;

      &.placeholder {
        display: none !important;
      }
    }

    a {
      display: inline-block;
      padding: 0 1em;
      width: auto;

      color: $color-4;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 1.3rem;

      .no-touch &:hover {
        color: $color-2;
      }

      &.selected {
        background: transparent;
        color: $color-2;
        /* create border bottom using box-shadow property */
        box-shadow: inset 0 -2px 0 $color-2;
      }
    }

    &.is-open {
      ul li {
        display: inline-block;
      }
    }
  }

  @include MQ(L) {
    /* tabbed navigation on big devices */
    width: 100%;
    float: right;
    margin: 0;
    @include transition(width .3s);

    &.filter-is-visible {
      /* reduce width when filter is visible */
      width: 80%;
    }
  }
}

/* --------------------------------

xgallery

-------------------------------- */

.cd-gallery {
  padding: 26px 5%;
  width: 100%;

  li {
    margin-bottom: 1.6em;
    box-shadow: 0 1px 4px rgba(#000, .1);
    display: none;

    &.gap {
      /* used in combination with text-align: justify to align gallery elements */
      opacity: 0;
      height: 0;
      display: inline-block;
    }
  }

  img {
    display: block;
    width: 100%;
  }

  .cd-fail-message {
    display: none;
    text-align: center;
  }

  @include MQ(M) {
    padding: 40px 3%;

    ul {
      @include clearfix;
      text-align: justify;
    }

    li {
      width: 48%;
      margin-bottom: 2em;
    }
  }

  @include MQ(L) {
    padding: 50px 2%;
    float: right;
    @include transition(width .3s);

    li {
      width: 23%;
    }

    &.filter-is-visible {
      /* reduce width when filter is visible */
      width: 80%;
    }
  }
}

/* --------------------------------

xfilter

-------------------------------- */

.cd-filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: $color-3;
  box-shadow: 4px 4px 20px rgba(#000, 0);
  z-index: 2;

  /* Force Hardware Acceleration in WebKit */
  @include transform(translateZ(0));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  @include transform(translateX(-100%));
  @include transition(transform .3s, box-shadow .3s);

  &::before {
    /* top colored bar */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: $tab-filter-height;
    width: 100%;
    background-color: $color-2;
    z-index: 2;
  }

  form {
    padding: $tab-filter-height+20px 20px;
  }

  .cd-close {
    position: absolute;
    top: 0;
    right: 0;
    height: $tab-filter-height;
    line-height: $tab-filter-height;
    width: 60px;

    color: $color-3;
    font-size: 1.3rem;
    text-align: center;

    background: darken($color-2, 5%);
    opacity: 0;

    @include transition(opacity .3s);
    z-index: 3;

    .no-touch &:hover {
      background: darken($color-2, 8%);
    }
  }

  &.filter-is-visible {
    @include transform(translateX(0));
    box-shadow: 4px 4px 20px rgba(#000, .2);

    .cd-close {
      opacity: 1;
    }
  }

  @include MQ(L) {
    width: 20%;

    form {
      padding: $tab-filter-height+20px 10%;
    }
  }
}

.cd-filter-trigger {
  position: absolute;
  top: 0;
  left: 0;
  height: $tab-filter-height;
  line-height: $tab-filter-height;
  width: 60px;

  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
  background: transparent url('../img/cd-icon-filter.svg') no-repeat center center;

  z-index: 3;

  &.filter-is-visible {
    pointer-events: none;
  }

  @include MQ(L) {
    width: auto;
    left: 2%;

    text-indent: 0;
    color: $color-4;
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 700;

    padding-left: 24px;
    background-position: left center;

    @include transition(color .3s);

    .no-touch &:hover {
      color: $color-2;
    }

    &.filter-is-visible,
    &.filter-is-visible:hover {
      color: $color-3;
    }
  }
}

/* --------------------------------

xcustom form elements

-------------------------------- */

.cd-filter-block {
  margin-bottom: 1.6em;

  h4 {
    /* filter block title */
    position: relative;
    margin-bottom: .2em;
    padding: 10px 0 10px 20px;

    color: $color-4;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.3rem;

    @include user-select(none);
    cursor: pointer;

    .no-touch &:hover {
      color: $color-2;
    }

    &::before {
      /* arrow */
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 16px;
      height: 16px;
      background: url('../img/cd-icon-arrow.svg') no-repeat center center;

      @include transform(translateY(-50%));
      @include transition(transform .3s);
    }

    &.closed::before {
      @include transform(translateY(-50%) rotate(-90deg));
    }
  }

  input, select,
  .radio-label::before,
  .checkbox-label::before {
    /* shared style for input elements */
    font-family: $primary-font;
    border-radius: 0;
    background-color: $color-3;
    border: 2px solid darken($color-3, 10%);
  }

  input[type='search'],
  input[type='text'],
  select {
    width: 100%;
    padding: .8em;
    @include appearance(none);
    box-shadow: none;

    &:focus {
      outline: none;
      background-color: $color-3;
      border-color: $color-2;
    }
  }

  input[type='search'] {
    /* custom style for the search element */
    border-color: transparent;
    background-color: darken($color-3, 10%);
    /* prevent jump - ios devices */
    font-size: 1.6rem !important;
  }

  input[type='search']::-webkit-search-cancel-button {
    display: none;
  }

  .cd-select {
    /* select element wrapper */
    position: relative;
  }

  .cd-select::after {
    /* switcher arrow for select element */
    content: '';
    position: absolute;
    z-index: 1;
    right: 14px;
    top: 50%;
    @include transform(translateY(-50%));

    display: block;
    width: 16px;
    height: 16px;

    background: url('../img/cd-icon-arrow.svg') no-repeat center center;
    pointer-events: none;
  }

  select {
    cursor: pointer;
    font-size: 1.4rem;
  }

  select::-ms-expand {
      display: none;
  }

  .list li {
    position: relative;
    margin-bottom: .8em;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  input[type=radio],
  input[type=checkbox] {
    /* hide original check and radio buttons */
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 2;
  }

  .checkbox-label,
  .radio-label {
    padding-left: 24px;
    font-size: 1.4rem;
    @include user-select(none);

    &::before,
    &::after {
      /* custom radio and check boxes */
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      @include transform(translateY(-50%));
    }

    &::before {
      width: 16px;
      height: 16px;
      left: 0;
    }

    &::after {
      /* check mark - hidden */
      display: none;
    }
  }

  .checkbox-label::after {
    /* check mark style for check boxes */
    width: 16px;
    height: 16px;
    background: url('../img/cd-icon-check.svg') no-repeat center center;
  }

  .radio-label::before,
  .radio-label::after {
    border-radius: 50%;
  }

  .radio-label::after {
    /* check mark style for radio buttons */
    width: 6px;
    height: 6px;
    background-color: $color-3;
    left: 5px;
  }

  input[type=radio]:checked + label::before,
  input[type=checkbox]:checked + label::before {
    border-color: $color-2;
    background-color: $color-2;
  }

  input[type=radio]:checked + label::after,
  input[type=checkbox]:checked + label::after {
    display: block;
  }
}

@-moz-document url-prefix(){
  /* hide custom arrow on Firefox - select element */
  .cd-filter-block .cd-select::after {
    display: none;
  }
}
/* End of jquery routine content-filter styling (filter exercises type). */

/* hide the info_box div. it would appear when clicking on an image (details in script).
It is preferred than a hidden div since it does not takes a space in the page.*/

.info_box {
  display: none;
    width: 450px;
     position: fixed;
       top: 50%;
        left: 50%;
          z-index: 9;
           -webkit-transform: translate(-50%,-50%);
             -ms-transform: translate(-50%,-50%);
               -o-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
                  background-color: #f0f0f0;
                    padding: 15px;
}

.body-inactive {
  background-color: rgba(0,0,0,0.60); /* view %90 of opacity out of %100.Other zeros are RGB values. */
    display: none;
      top: 0;
      right: 0;
       left: 0;
        bottom: 0;
         z-index: 7;
          position: fixed;
}
/*styling for the x button of the info_box */

a#closeIt {
  padding: 7px; /* disance of x from the top right. */
   position: absolute; /* relative to the info_box. */
    top: 0; /* stick to the most top */
     right: 0; /* sticked to the most right possible. together it's in the top right */
      color: #333;
        font-size: 21px;
          font-weight: bold;
}

/* Bootstrap Theme */

/*!
 * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Global Styles */

html {
  height: 100%;
}

body {
  height: 100%;
  padding-top: 50px;
  /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.img-portfolio {
  margin-bottom: 30px;
}

.img-hover:hover {
  opacity: 0.8;
}

/* Home Page Carousel */

header.carousel {
  height: 50%;
  .item {
    height: 100%;
    &.active {
      height: 100%;
    }
  }
  .carousel-inner {
    height: 100%;
  }
  .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
  }
}

/* 404 Page Styles */

.error-404 {
  font-size: 100px;
}

/* Pricing Page Styles */

.price {
  display: block;
  font-size: 50px;
  line-height: 50px;
  sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
  }
}

.period {
  display: block;
  font-style: italic;
}

/* Footer Styles */

footer {
  margin: 50px 0;
}

/* Responsive Styles */

@media (max-width: 991px) {
  .customer-img, .img-related {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .img-portfolio {
    margin-bottom: 15px;
  }
  header.carousel .carousel {
    height: 70%;
  }
}

div.carousel-caption *
{

font-size: 20px;
}
/* End of Bootstrap theme */


.errors
{
  color: red;
}

Right now, you can see I've included 2 SASS files in gulpfile.js. In what case should I include 2 SASS/SCSS files in my app.scss file?

osherdo started a new conversation Multiple SASS Files

I am trying to use gulp for compling multiple SASS file to one app.scss file. css file look like this in the code:

    <link rel="stylesheet" href="{{ elixir('css/app.css') }}">

This is how the final css file is being included in the view:

    <link rel="stylesheet" href="/build/css/app-44267ef7f7.css">

Right now, it seems that that the SASS files are not applied to the final css file, and I don't understand why. Would absolutely appreciate you help.

30 Jul
2 years ago

osherdo left a reply on Getting Data From Js To Laravel (dropzone.js)

@mstnorris thanks, will checkout and reply here to let you know what is up with it.

osherdo started a new conversation Getting Data From Js To Laravel (dropzone.js)

I have working image upload feature using 'dropzone.js` . What I need now is to associate the uploaded image to the authenticated user who uploads it, and store it in his personal folder of profile images.

By that, I have created models of 'User' and ProfileImage. I don't know how to catch the file upload from dropzone.js to Laravel, and how to proccess it then.

This is what I have so far: View:

    <div class="container">
                <div class="dropzone" id="dropzoneFileUpload">
                </div>
                <button type="button" id="uploadPhoto">Upload Photo</button>
                <!-- <form id="dropzoneFileUpload" method="post" action="{{action('[email protected]')}}" class="dropzone">
                  <div class="fallback">
                    <input name="file" type="file" />
                    <input type="hidden" name="_token" value="{{Session::getToken()}}">
                  </div>
                </form> -->
            </div>


          <script type="text/javascript">
                // var baseUrl = "{{ url('/') }}";
                // var token = "{{ Session::getToken() }}";
                Dropzone.autoDiscover = false;
                jQuery(document).ready(function(){



                   var myDropzone = new Dropzone("div#dropzoneFileUpload", {
                       url: "{{action('[email protected]')}}",
                       maxFilesize: 2, // MB
                           maxFiles: 1,
                           addRemoveLinks: true,
                       autoProcessQueue:false,
                       params: {
                          _token: "{{csrf_token()}}"
                        },

                   });

                     myDropzone.on("success", function(file,resp){
                       if(resp=="success"){
                         alert("Image uploaded successfully");
                       }
                       else {
                         alert("Faild to upload image! Try again");
                       }
                     });
                     
                    jQuery("button#uploadPhoto").click(function(){
                      myDropzone.processQueue();
                    });
                });
             </script>

Controller:

  public function index()
{
  return view('dropzone_demo');
}

public function uploadFiles()
{

  $message="Profile Image Created";
  $input = Input::all();

  $rules = array(
      'file' => 'image|max:3000',
  );

  $validation = Validator::make($input, $rules);

  if ($validation->fails()) {
      return Response::make($validation->errors->first(), 400);
  }

  $destinationPath = 'uploads'; // upload path: public/uploads
  $extension = Input::file('file')->getClientOriginalExtension(); // getting file extension
  $fileName = rand(11111, 99999) . '.' . $extension; // renameing image
  $upload_success = Input::file('file')->move($destinationPath, $fileName); // uploading file to given path

  if ($upload_success) {
      return Response::json('success', 200);
  } else {
      return Response::json('error', 400);
  }

}

ProfileImage model:

class profile_image extends Model
{
    protected $table="profile_images";
}
28 Jul
2 years ago

osherdo left a reply on Attach Uploaded Image To A User

ok I have uploaded the controller's function that uploads the file to the server to look like this:

public function uploadFiles()
{
/*
  $get_uploaded_image=$this->user->uploadProfileImage($request->file('image'));
  */
  $input = Input::all();

  $rules = array(
      'file' => 'image|max:3000',
  );

  $validation = Validator::make($input, $rules);

  if ($validation->fails()) {
      return Response::make($validation->errors->first(), 400);
  }

  $destinationPath = 'uploads'; // upload path: public/uploads
  $extension = Input::file('file')->getClientOriginalExtension(); // getting file extension
  $fileName = mt_rand(11111, 99999) . '.' . $extension; // renameing image
  $upload_success = Input::file('file')->move($destinationPath, $fileName); // uploading file to given path

  if ($upload_success) {
      return Response::json('success', 200);
  } else {
      return Response::json('error', 400);
  }
  $this->user->uploadNewProfileImage($request->file('image'));
}
  return redirect('hub');

It's not redirecting to the hub view,though.

I have updated the model to a hasMany relationship.

yet it shows like the image is not on server. This is how I try to show the image in the hub view

  <img src="{{ asset($user->profile_image_path) }}" />

User.php model:

const PROFILE_IMAGES_DIR = 'uploads';

    public function profile_image()
    {
      return $this->hasMany('App\ProfileImage');
    }

    public function uploadNewProfileImage(UploadedFile $file)
    {
        $name = time() . $file->getClientOriginalName();

        $file->move(self::PROFILE_IMAGES_DIR, $name);

        $this->profile_image_path = self::PROFILE_IMAGES_DIR . '/' . $name;

        $this->save();

        $this->profileImages()->save(new ProfileImage(['path' => $this->profile_image_path]));
    }

I have changed the directory of image uploads to uploads instead of 'profile_images'.

What do you think's wrong now?

thanks for helping!

27 Jul
2 years ago

osherdo left a reply on Attach Uploaded Image To A User

@selmonal thanks. I am wondering where to place this code? should I place it on the top of the controller where the upload is processed?

$this->user->uploadProfileImage($request->file('image'));

osherdo started a new conversation Get Value From Javascript

Hi I am using `dropdown.js' to upload image to a user profile image.

I need to get the image's path I have uploaded, then pass it to laravel and insert it to the current user image_path column record.

Controller:

  public function index()
{
  return view('dropzone_demo');
}

public function uploadFiles()
{

  $message="Profile Image Created";
  $input = Input::all();

  $rules = array(
      'file' => 'image|max:3000',
  );

  $validation = Validator::make($input, $rules);

  if ($validation->fails()) {
      return Response::make($validation->errors->first(), 400);
  }

  $destinationPath = 'uploads'; // upload path: public/uploads
  $extension = Input::file('file')->getClientOriginalExtension(); // getting file extension
  $fileName = mt_rand(11111, 99999) . '.' . $extension; // renameing image
  $upload_success = Input::file('file')->move($destinationPath, $fileName); // uploading file to given path

  if ($upload_success) {
      return Response::json('success', 200);
  } else {
      return Response::json('error', 400);
  }

}

View:

<div class="container">
                <div class="dropzone" id="dropzoneFileUpload">
                </div>
                <button type="button" id="uploadPhoto">Upload Photo</button>

            </div>


          <script type="text/javascript">
              // Since we're using Juery to initialize Dropzone, we Set autoDiscover to false,so that dropzone object is not initialized twice.
              // So we only initialize it here: var myDropzone

                Dropzone.autoDiscover = false;
                // dropzone should load when the DOM is completely loaded
                jQuery(document).ready(function(){



                   var myDropzone = new Dropzone("div#dropzoneFileUpload", {
                       url: "{{action('[email protected]')}}",
                       maxFilesize: 2, // MB
                           maxFiles: 1,
                           addRemoveLinks: true,
                       autoProcessQueue:false,
                       params: {
                          _token: "{{csrf_token()}}"
                        },

                   });

                     myDropzone.on("success", function(file,resp){
                       if(resp=="success"){
                         alert("Image uploaded successfully");
                       }
                       else {
                         alert("Faild to upload image! Try again");
                       }
                     });


                    jQuery("button#uploadPhoto").click(function(){
                      myDropzone.processQueue();
                    });
                });
             </script>

profile image model:

class profile_image extends Model
{
    protected $table="profile_images";

    public function user()
    {
      return $this->belongsTo('App\User');
    }

also added the inverse in the User model.

Thanks.

osherdo left a reply on Attach Uploaded Image To A User

@kobear thanks. Right now this is my upload path (declared in the controller):

  $destinationPath = 'uploads';  // upload path: public/uploads

although I am not sure this code will help me to get the path I need:

  public function getPathAttribute()
{
   $destinationPath = 'uploads';
    return $destinationPath;   
}

I am not sure yet how to catch the uploaded image for the js code, and then attach it to a user.

This is my current view code:

  <div class="container">
                <div class="dropzone" id="dropzoneFileUpload">
                </div>
                <button type="button" id="uploadPhoto">Upload Photo</button>
              
            </div>


          <script type="text/javascript">
        
                Dropzone.autoDiscover = false;
                jQuery(document).ready(function(){



                   var myDropzone = new Dropzone("div#dropzoneFileUpload", {
                       url: "{{action('[email protected]')}}",
                       maxFilesize: 2, // MB
                           maxFiles: 1,
                           addRemoveLinks: true,
                       autoProcessQueue:false,
                       params: {
                          _token: "{{csrf_token()}}"
                        },

                   });

                     myDropzone.on("success", function(file,resp){
                       if(resp=="success"){
                         alert("Image uploaded successfully");
                       }
                       else {
                         alert("Faild to upload image! Try again");
                       }
                     });


                    jQuery("button#uploadPhoto").click(function(){
                      myDropzone.processQueue();
                    });
                });
             </script>

Thanks.

osherdo started a new conversation Attach Uploaded Image To A User

I am uploading image to the server using Dropzone.js. I want to associate the uploaded image to a user . So basically this is a one-to-one realtionship between a user and his profile image.

How can I associate the image with a user?

I have also 2 tables : users and profile_images .I have also created a pivot table with 2 columns : user,image_path . Right now this is the code I have on the view to upload the images (including dropzone.js code). view:

<script type="text/javascript">
                 Dropzone.options.dropzoneFileUpload = {
                    paramName: "file", // The name that will be used to transfer the file
                    maxFilesize: 2, // MB
                    maxFiles: 1,
                    addRemoveLinks: true,
                    init: function(){
                      this.on("success", function(file,resp){
                        if(resp=="success"){
                          alert("Image uploaded successfully");
                        }
                        else {
                          alert("Faild to upload image! Try again");
                        }
                      });
                    }
                  };
             </script>

Controller:

public function index()
{
  return view('dropzone_demo');
}

public function uploadFiles()
{

  $message="Profile Image Created";
  $input = Input::all();

  $rules = array(
      'file' => 'image|max:3000',
  );

  $validation = Validator::make($input, $rules);

  if ($validation->fails()) {
      return Response::make($validation->errors->first(), 400);
  }

  $destinationPath = 'uploads'; // upload path: public/uploads
  $extension = Input::file('file')->getClientOriginalExtension(); // getting file extension
  $fileName = rand(11111, 99999) . '.' . $extension; // renameing image
  $upload_success = Input::file('file')->move($destinationPath, $fileName); // uploading file to given path

  if ($upload_success) {
      return Response::json('success', 200);
  } else {
      return Response::json('error', 400);
  }

}

Question is : how do I process the image that I have uploaded to be set as a profile image of the user?

Would appreciate your suggestions, thanks.

24 Jul
2 years ago

osherdo left a reply on Css File Is Not Loaded To View

thanks @d3xt3r . I will check it out.

osherdo left a reply on Css File Is Not Loaded To View

Yes I can see it. It's a sass/css syntax issue then?

osherdo left a reply on Css File Is Not Loaded To View

@d3xt3r I am sorry - I did not get your question. Could you rephrase it ?

osherdo left a reply on Css File Is Not Loaded To View

@mstnorris thanks.

that's the gulpfile.js:

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.sass(['app.scss','buttons.scss']).version('css/app.css');
});

the compiled css file is in this path: /var/www/app-name/public/css

So I guess it the same path, right? And this is how I try to include it in the view:

    <link rel="stylesheet" href="{{ elixir('css/app.css') }}" >

It is still not applying the css file styling, unfortunately.

osherdo left a reply on Css File Is Not Loaded To View

ok. So how do I refer to the compiled css file now?

osherdo left a reply on Css File Is Not Loaded To View

@d3xt3r thanks for replying. I mean the default as shown in the docs and how @jlrdw suggested: resources/assets/css

But instead when running gulp I get these paths instead:

Fetching Version Source Files...
   - public/css/app.css


Saving To...
   - public/build

osherdo left a reply on Css File Is Not Loaded To View

the thing's when I am running gulp in the terminal - it saves it to other directory,and not laravel's default:

Fetching Version Source Files...
   - public/css/app.css


Saving To...
   - public/build

osherdo left a reply on Css File Is Not Loaded To View

should not it be in:

/var/www/sports-application/public/css

I understand it has been changed since l5.2 since I have been placing it in the folder above in 5.1.

osherdo left a reply on Css File Is Not Loaded To View

I still ain't able to make it with either any of these variations:

    <link rel="stylesheet" type="text/css" href="/public/css/app.css">
      <link rel="stylesheet" type="text/css" href="css/app.css">

Anyone else, please?

osherdo left a reply on Error On Image Upload[L5.2]

@Mo7sin thanks. @tomi thanks for pointing that out. Unfortunately I cannot see your reply here, and I saw partially on email only, so I could not test your suggestion until @Mo7sin quoted you. It was the issue. thanks.

if I want to get the images to upload as an array - I should change to files[] in both the view and controller. is that correct?