commit 6ea53e2c31fe329902558449c5b8e63b9a19b59f
Author: テクニカル諏訪子 <renraku@076.ne.jp>
Date:   Sat Feb 5 14:05:00 2022 +0900

    最初コミット

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..4594291
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,68 @@
+APP_NAME=076Server
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=false
+APP_LOG_LEVEL=debug
+APP_URL=http://localhost
+ONION_HOST=jkdasfhfdhndsfnklhjfdsknjfdgsjk.onion
+SESSION_SECURE_COOKIE=false
+SESSION_HTTP_ONLY=true
+THEME="techsuwa"
+CSSENGINE="lolita"
+CSSMINIFY=true
+
+ENABLE_REGISTER=false
+HAS_ADMIN=false
+OWNER_NAME=""
+OWNER_PASS=""
+ADMIN_NAME=""
+ADMIN_PASS=""
+
+LOG_CHANNEL=stack
+LOG_LEVEL=debug
+
+DB_CONNECTION=mysql
+DB_HOST=127.0.0.1
+DB_PORT=3306
+DB_DATABASE=laravel
+DB_USERNAME=root
+DB_PASSWORD=
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+QUEUE_CONNECTION=sync
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=smtp
+MAIL_HOST=smtp.mailtrap.io
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_NOREPLY_USER=null
+MAIL_NOREPLY_PASS=null
+MAIL_ENCRYPTION=null
+MAIL_OWNER_ADDRESS=null
+MAIL_OWNER_NAME="${APP_NAME}"
+MAIL_FROM_ADDRESS=null
+MAIL_FROM_NAME="${APP_NAME}"
+
+GMO_KEY=""
+GMO_SECRET=""
+
+CONOHA_DENANT_ID=""
+CONOHA_DENANT_NAME=""
+CONOHA_USER_NAME=""
+CONOHA_USER_PASS=""
+
+YOUTUBE_API=""
+LBRY_URI=""
+PEER_URI=""
+PEER_USER=""
+PEER_PASS=""
\ No newline at end of file
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..967315d
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,5 @@
+* text=auto
+*.css linguist-vendored
+*.scss linguist-vendored
+*.js linguist-vendored
+CHANGELOG.md export-ignore
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d6fdcbe
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,9 @@
+
+/public/storage
+
+/storage/*.key
+/vendor
+package-lock.json
+composer.lock
+.env
+/storage/app/public/store
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3cae01e
--- /dev/null
+++ b/README.md
@@ -0,0 +1,79 @@
+<p align="center"><img src="https://res.cloudinary.com/dtfbvvkyp/image/upload/v1566331377/laravel-logolockup-cmyk-red.svg" width="400"></p>
+
+<p align="center">
+<a href="https://travis-ci.org/laravel/framework"><img src="https://travis-ci.org/laravel/framework.svg" alt="Build Status"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://poser.pugx.org/laravel/framework/d/total.svg" alt="Total Downloads"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://poser.pugx.org/laravel/framework/v/stable.svg" alt="Latest Stable Version"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://poser.pugx.org/laravel/framework/license.svg" alt="License"></a>
+</p>
+
+## About Laravel
+
+Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
+
+- [Simple, fast routing engine](https://laravel.com/docs/routing).
+- [Powerful dependency injection container](https://laravel.com/docs/container).
+- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
+- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
+- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
+- [Robust background job processing](https://laravel.com/docs/queues).
+- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
+
+Laravel is accessible, powerful, and provides tools required for large, robust applications.
+
+## Learning Laravel
+
+Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.
+
+If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains over 1500 video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
+
+## Laravel Sponsors
+
+We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the Laravel [Patreon page](https://patreon.com/taylorotwell).
+
+- **[Vehikl](https://vehikl.com/)**
+- **[Tighten Co.](https://tighten.co)**
+- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
+- **[64 Robots](https://64robots.com)**
+- **[Cubet Techno Labs](https://cubettech.com)**
+- **[Cyber-Duck](https://cyber-duck.co.uk)**
+- **[Many](https://www.many.co.uk)**
+- **[Webdock, Fast VPS Hosting](https://www.webdock.io/en)**
+- **[DevSquad](https://devsquad.com)**
+- [UserInsights](https://userinsights.com)
+- [Fragrantica](https://www.fragrantica.com)
+- [SOFTonSOFA](https://softonsofa.com/)
+- [User10](https://user10.com)
+- [Soumettre.fr](https://soumettre.fr/)
+- [CodeBrisk](https://codebrisk.com)
+- [1Forge](https://1forge.com)
+- [TECPRESSO](https://tecpresso.co.jp/)
+- [Runtime Converter](http://runtimeconverter.com/)
+- [WebL'Agence](https://weblagence.com/)
+- [Invoice Ninja](https://www.invoiceninja.com)
+- [iMi digital](https://www.imi-digital.de/)
+- [Earthlink](https://www.earthlink.ro/)
+- [Steadfast Collective](https://steadfastcollective.com/)
+- [We Are The Robots Inc.](https://watr.mx/)
+- [Understand.io](https://www.understand.io/)
+- [Abdel Elrafa](https://abdelelrafa.com)
+- [Hyper Host](https://hyper.host)
+- [Appoly](https://www.appoly.co.uk)
+- [OP.GG](https://op.gg)
+- [云软科技](http://www.yunruan.ltd/)
+
+## Contributing
+
+Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
+
+## Code of Conduct
+
+In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
+
+## Security Vulnerabilities
+
+If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
+
+## License
+
+The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
diff --git a/app/Console/Kernel.php b/app/Console/Kernel.php
new file mode 100644
index 0000000..69914e9
--- /dev/null
+++ b/app/Console/Kernel.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Console;
+
+use Illuminate\Console\Scheduling\Schedule;
+use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
+
+class Kernel extends ConsoleKernel
+{
+    /**
+     * The Artisan commands provided by your application.
+     *
+     * @var array
+     */
+    protected $commands = [
+        //
+    ];
+
+    /**
+     * Define the application's command schedule.
+     *
+     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
+     * @return void
+     */
+    protected function schedule(Schedule $schedule)
+    {
+        // $schedule->command('inspire')->hourly();
+    }
+
+    /**
+     * Register the commands for the application.
+     *
+     * @return void
+     */
+    protected function commands()
+    {
+        $this->load(__DIR__.'/Commands');
+
+        require base_path('routes/console.php');
+    }
+}
diff --git a/app/Exceptions/Handler.php b/app/Exceptions/Handler.php
new file mode 100644
index 0000000..59c585d
--- /dev/null
+++ b/app/Exceptions/Handler.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Exceptions;
+
+use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
+use Throwable;
+
+class Handler extends ExceptionHandler
+{
+    /**
+     * A list of the exception types that are not reported.
+     *
+     * @var array
+     */
+    protected $dontReport = [
+        //
+    ];
+
+    /**
+     * A list of the inputs that are never flashed for validation exceptions.
+     *
+     * @var array
+     */
+    protected $dontFlash = [
+        'password',
+        'password_confirmation',
+    ];
+
+    /**
+     * Report or log an exception.
+     *
+     * @param  \Throwable  $exception
+     * @return void
+     *
+     * @throws \Exception
+     */
+    public function report(Throwable $exception)
+    {
+        parent::report($exception);
+    }
+
+    /**
+     * Render an exception into an HTTP response.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Throwable  $exception
+     * @return \Symfony\Component\HttpFoundation\Response
+     *
+     * @throws \Throwable
+     */
+    public function render($request, Throwable $exception)
+    {
+        return parent::render($request, $exception);
+    }
+}
diff --git a/app/Http/Controllers/Controller.php b/app/Http/Controllers/Controller.php
new file mode 100644
index 0000000..e8768cd
--- /dev/null
+++ b/app/Http/Controllers/Controller.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Foundation\Bus\DispatchesJobs;
+use Illuminate\Foundation\Validation\ValidatesRequests;
+use Illuminate\Routing\Controller as BaseController;
+
+class Controller extends BaseController {
+  use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
+}
diff --git a/app/Http/Controllers/Engine.php b/app/Http/Controllers/Engine.php
new file mode 100644
index 0000000..8ab9b80
--- /dev/null
+++ b/app/Http/Controllers/Engine.php
@@ -0,0 +1,111 @@
+<?php
+
+namespace App\Http\Controllers;
+use Illuminate\Support\Facades\DB;
+
+class Engine {
+  public $user = 0;
+  public $err = '';
+  public $warn = '';
+  public $info = '';
+  public $suc = '';
+  public $css = '';
+
+  public function __construct () {
+    $this->err = '';
+    $this->warn = '';
+    $this->info = '';
+    $this->suc = '';
+
+    if (isset($_COOKIE['language'])) app()->setLocale($_COOKIE['language']);
+    $this->id = checkLegit((isset($_COOKIE['kero_token']) ? $_COOKIE['kero_token'] : ''));
+    $this->user = $this->getLoggedUser((isset($_COOKIE['kero_token']) ? $_COOKIE['kero_token'] : ''));
+
+    $this->css = env('CSSENGINE');
+    if ($this->user && $this->user->profile->gender != 0) $this->css .= '_'.($this->user->profile->gender == 1 ? 'm' : 'f');
+    if (env('CSSMINIFY')) $this->css .= '.min';
+    $this->css .= '.css';
+  }
+
+  function getLoggedUser ($kero) {
+    $check = checkLegit($kero);
+    if ($check == 0) return 0;
+
+    // $cols = getGroupColours();
+    $get = $this->getUser($check);
+
+    return $get;
+  }
+
+  public function getUser ($id) {
+    $get = DB::table('users')->where('id', $id)->first();
+    unset($get->password); unset($get->salt); unset($get->remember_token);
+    $get->profile = DB::table('usr_profile')->where('user_id', $get->id)->first();
+    $get->profile->showname = (!empty($get->profile->display_name) && !is_null($get->profile->display_name) ? $get->profile->display_name : $get->username);
+    $perm_id = DB::table('usr_perm_id')->select('perm_id')->where('user_id', $get->id)->first()->perm_id;
+    $get->perm_module = DB::table('usr_perm_module')->where('usr_perm_id', $perm_id)->first();
+    $get->details = DB::table('usr_details')->where('user_id', $get->id)->first();
+    $get->contacts = DB::table('usr_contacts')->where('user_id', $get->id)->first();
+    $ucol = DB::table('usr_perm_module')->select('id', 'name', 'colour_m', 'colour_f', 'colour_u')->get();
+
+    if (!empty($get->profile->name_style)) $get->profile->name_style = $get->profile->name_style;
+    else {
+      foreach ($ucol as $j3) {
+        if ($j3->id == $perm_id) {
+          if ($get->profile->gender == 1) $get->profile->name_style = $j3->colour_m;
+          else if ($get->profile->gender == 2) $get->profile->name_style = $j3->colour_f;
+          else $get->profile->name_style = $j3->colour_u;
+        }
+      }
+    }
+
+    if ($get->profile->gender == 1) $get->profile->gender_name = '男性';
+    else if ($get->profile->gender == 2) $get->profile->gender_name = '女性';
+    else $get->profile->gender_name = '不明';
+
+    $get->perm = $this->getPermissions($get->kero_token);
+    if (empty($get->profile->avatar) || $get->profile->avatar == '') $get->profile->avatar = 'img/noicon.jpg';
+    $get->profile->avatar = '/'.$get->profile->avatar;
+
+    return $get;
+  }
+
+  public function getPermissionGroup($mdl, $id) { return DB::table($mdl.'_permissions')->where('id', $id)->get(); }
+  public function getPermissionUser($mdl, $id) { return DB::table($mdl.'_user_permissions')->where('user_id', $id)->get(); }
+
+  public function getPermissions ($token) {
+    $check = checkLegit($token);
+    $perm = DB::table('usr_perm_id')->select('perm_id')->where('user_id', $check)->first();
+    $perm = json_decode(json_encode($perm), true);
+
+    if ($check != 0) {
+      $grouppermblg = $this->getPermissionGroup('blg', $perm['perm_id']);
+      $userpermblg = $this->getPermissionUser('blg', $check);
+
+      $grouppermusr = $this->getPermissionGroup('usr', $perm['perm_id']);
+      $userpermusr = $this->getPermissionUser('usr', $check);
+
+      $blgarr = array();
+      $usrarr = array();
+
+      if (!empty($userpermblg[0])) $blgarr = (array)$userpermblg[0];
+      else $blgarr = (array)$grouppermblg[0];
+      $blgarr = array_combine(array_map(function($k){ return 'blg_'.$k; }, array_keys($blgarr)), $blgarr);
+
+      if (!empty($userpermusr[0])) $usrarr = (array)$userpermusr[0];
+      else $usrarr = (array)$grouppermusr[0];
+      $usrarr = array_combine(array_map(function($k){ return 'usr_'.$k; }, array_keys($usrarr)), $usrarr);
+
+      return array_merge($blgarr, $usrarr);
+    }
+    else {
+      $grouppermblg = $this->getPermissionGroup('blg', 6);
+      $grouppermusr = $this->getPermissionGroup('usr', 6);
+
+      (array)$grouppermblg[0] = array_combine(array_map(function($k){ return 'blg_'.$k; }, array_keys((array)$grouppermblg[0])), (array)$grouppermblg[0]);
+      (array)$grouppermusr[0] = array_combine(array_map(function($k){ return 'usr_'.$k; }, array_keys((array)$grouppermusr[0])), (array)$grouppermusr[0]);
+
+      return array_merge((array)$grouppermblg[0], (array)$grouppermusr[0]);
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/MailerController.php b/app/Http/Controllers/MailerController.php
new file mode 100644
index 0000000..f5274d1
--- /dev/null
+++ b/app/Http/Controllers/MailerController.php
@@ -0,0 +1,74 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use Illuminate\Contracts\Routing\ResponseFactory;
+use Illuminate\Support\Facades\Log;
+
+use PHPMailer\PHPMailer\PHPMailer;
+use PHPMailer\PHPMailer\Exception;
+
+class MailerController extends Controller {
+  public function __construct() {}
+
+  public function compose ($val, $form=false) {
+    mb_language('japanese');
+    mb_internal_encoding('UTF-8');
+
+    $mail = new PHPMailer(true);
+
+    try {
+      // $mail->SMTPDebug = 2;
+      $mail->isSMTP();
+      $mail->Host = config('mail.mailers.smtp.host');
+      $mail->Port = config('mail.mailers.smtp.port');
+      $mail->SMTPSecure = config('mail.mailers.smtp.encryption');
+      $mail->SMTPAuth = true;
+      $mail->From = config('mail.'.($form ? 'owner' : 'from').'.address');
+      $mail->FromName = mb_encode_mimeheader(config('mail.mailers.smtp.'.($form ? 'fromname' : 'noreplyfrom')), 'JIS');
+      $mail->Username = config('mail.mailers.smtp.'.($form ? 'username' : 'noreplyuser'));
+      $mail->Password = config('mail.mailers.smtp.'.($form ? 'password' : 'noreplypass'));
+
+      $mail->AddAddress(config('mail.'.($form ? 'owner' : 'from').'.address'));
+      if ($form) $mail->addReplyTo(config('mail.owner.address'), config('mail.owner.name'));
+      else $mail->addReplyTo($val['adr']);
+
+      $mail->SMTPOptions = [
+        'ssl' => [
+          'verify_peer' => false,
+          'verify_peer_name' => false,
+          'allow_self_signed' => true
+        ]
+      ];
+
+      if (isset($val['attach'])) {
+        for ($i=0; $i < count($val['attach']); $i++) {
+          $mail->AddAttachment($val['attach'][$i], $val['attachname'][$i]);
+        }
+      }
+
+      if (isset($val['gpg'])) {
+        $mail->AddStringAttachment($val['gpg'], $val['filename']);
+        $mail->AddStringAttachment($val['bunsyo'], $val['adr'].'.gpg');
+      }
+
+      $mail->isHTML(false);
+
+      $mail->Subject = mb_encode_mimeheader('【'.$val['catname'].'】'.$val['kenmei'], 'JIS');
+      if ($form) $mail->Body = mb_convert_encoding($val['bunsyo'], 'UTF-8');
+      else $mail->Body = mb_convert_encoding($val['bunsyo'], 'JIS');
+
+      if (!$mail->send()) {
+        Log::critical('Mailer error: ' . $mail->ErrorInfo);
+        return false;
+      }
+    } catch (Exception $e) {
+      Log::critical($e);
+      return false;
+    }
+
+    return true;
+  }
+}
diff --git a/app/Http/Controllers/Peertube/About.php b/app/Http/Controllers/Peertube/About.php
new file mode 100644
index 0000000..1838197
--- /dev/null
+++ b/app/Http/Controllers/Peertube/About.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers\Peertube;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class About extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    $res = [
+      'page' => 'about',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Account.php b/app/Http/Controllers/Peertube/Account.php
new file mode 100644
index 0000000..aa53ac5
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Account.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Controllers\Peertube;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Account extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index ($id, $cat='video-channels') {
+    $res = [
+      'page' => 'account',
+      'style' => 'account',
+      'cat' => $cat,
+      'userinfo' => $this->common->user,
+    ];
+    $res['owner'] = $this->getOwner($id);
+    if (!empty($res['owner'])) $res['owner']->totalVideo = 0;
+    $res['channel'] = $this->getChannel($id);
+    if (!empty($res['owner'])) {
+      foreach ($res['channel']->data as $k => $v) {
+        $res['channel']->data[$k]->video = $this->getVideo($v->name.'@'.$v->host);
+        $res['owner']->totalVideo += $res['channel']->data[$k]->video->total;
+      }
+    }
+    return view('pages.peertube.a', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+
+  function getChannel ($id) {
+    return $this->ptapi('/api/v1/accounts/'.$id.'/video-channels?start=0&count=20&sort=-updatedAt&withStats=false');
+  }
+
+  function getVideo ($id) {
+    return $this->ptapi('/api/v1/video-channels/'.$id.'/videos?start=0&count=5&sort=-publishedAt&nsfw=both');
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Admin/Users.php b/app/Http/Controllers/Peertube/Admin/Users.php
new file mode 100644
index 0000000..a659f08
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Admin/Users.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Admin;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Users extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      if ($this->common->user['me']->adminFlags != 1) {
+        return redirect('/peertube/videos/local');
+      }
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/AuthTrait.php b/app/Http/Controllers/Peertube/AuthTrait.php
new file mode 100644
index 0000000..c1a21e0
--- /dev/null
+++ b/app/Http/Controllers/Peertube/AuthTrait.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller, Session;
+use Illuminate\Http\Request;
+
+trait AuthTrait {
+  public function getsession () {
+    if (!Session::has('ptsess')) {
+      $user = [];
+      $user['local'] = $this->getLocal();
+      $user['me'] = $this->getMe($user['local']);
+      $user['config'] = $this->getConfig();
+      $user['notify'] = $this->getNotify();
+      Session::put('ptsess', $user);
+      $this->user = $user;
+    }
+    else {
+      $this->user = Session::get('ptsess');
+    }
+
+    return $user;
+  }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Peertube/Channel.php b/app/Http/Controllers/Peertube/Channel.php
new file mode 100644
index 0000000..d7d0f8f
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Channel.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Http\Controllers\Peertube;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Channel extends Common {
+  private $common;
+  private $count;
+
+  public function __construct () {
+    $this->common = new Common;
+    $this->count = 25;
+  }
+
+  public function index ($id, $cat='videos', $page=0) {
+    $res = [
+      'page' => 'channel',
+      'style' => 'channel',
+      'cat' => $cat,
+      'paginate' => $page,
+      'pagetotal' => 500,
+      'userinfo' => $this->common->user,
+    ];
+    $res['channel'] = $this->getChannel($id);
+    $res['video'] = $cat == 'video-playlists' ? $this->getPlaylist($id, ($page*$this->count), $this->count) : $this->getVideo($id, ($page*$this->count), $this->count);
+    $res['pagetotal'] = $res['video']->total;
+    return view('pages.peertube.c', ['res' => $res]);
+  }
+
+  function getChannel ($id) {
+    return $this->ptapi('/api/v1/video-channels/'.$id);
+  }
+
+  function getVideo ($id, $start, $count) {
+    return $this->ptapi('/api/v1/video-channels/'.$id.'/videos?start='.$start.'&count='.$count.'&sort=-publishedAt&skipCount=false&nsfw=both');
+  }
+
+  function getPlaylist ($id, $start, $count) {
+    return $this->ptapi('/api/v1/video-channels/'.$id.'/video-playlists?start='.$start.'&count='.$count);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Common.php b/app/Http/Controllers/Peertube/Common.php
new file mode 100644
index 0000000..53d1de5
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Common.php
@@ -0,0 +1,119 @@
+<?php
+
+namespace App\Http\Controllers\Peertube;
+
+use App\Http\Controllers\Controller, Session;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Engine;
+use Illuminate\Support\Facades\Log;
+
+class Common extends Engine {
+  // use AuthTrait;
+
+  public $user = [];
+  private $engine;
+  private $access_token;
+  private $refresh_token;
+
+  public function __construct () {
+    $this->access_token = isset($_COOKIE['access_token']) ? $_COOKIE['access_token'] : null;
+    $this->refresh_token = isset($_COOKIE['refresh_token']) ? $_COOKIE['refresh_token'] : null;
+
+    if (!Session::has('ptsess')) {
+      $user = [];
+      $user['local'] = $this->getLocal();
+      $user['me'] = $this->getMe($user['local']);
+      $user['config'] = $this->getConfig();
+      $user['notify'] = $this->getNotify();
+      Session::put('ptsess', $user);
+      $this->user = $user;
+    }
+    else {
+      $this->user = Session::get('ptsess');
+    }
+
+    $this->engine = new Engine;
+  }
+
+  public function getLocal () {
+    return $this->ptapi('/api/v1/oauth-clients/local');
+  }
+
+  public function getMe ($param) {
+    if (!isset($_COOKIE['access_token']) && isset($_COOKIE['refresh_token'])) {
+      $r = new Request;
+      $login = new \App\Http\Controllers\Peertube\Login;
+      $r->client_id = $param->client_id;
+      $r->client_secret = $param->client_secret;
+      $r->refresh_token = $this->refresh_token;
+      $this->login($r);
+      $this->access_token = $_COOKIE['access_token'];
+      $this->refresh_token = $_COOKIE['refresh_token'];
+    }
+
+    if (isset($_COOKIE['access_token']) && isset($_COOKIE['refresh_token'])) return $this->ptapi('/api/v1/users/me');
+    return null;
+  }
+
+  public function getConfig () {
+    return $this->ptapi('/api/v1/config/');
+  }
+
+  public function getNotify () {
+    if (isset($_COOKIE['access_token']) && isset($_COOKIE['refresh_token'])) return $this->ptapi('/api/v1/users/me/notifications?start=0&count=0&unread=true');
+    return null;
+  }
+
+  public function ptapi ($url, $param='', $method='get', $contenttype='json') {
+    set_time_limit(0);
+    $this->access_token = isset($_COOKIE['access_token']) ? $_COOKIE['access_token'] : null;
+    $this->refresh_token = isset($_COOKIE['refresh_token']) ? $_COOKIE['refresh_token'] : null;
+    $header = ['Content-Type: application/'.$contenttype, 'Host: '.str_replace('https://', '', env('PEER_URI'))];
+
+    if (!is_null($this->access_token)) {
+      $header[] = 'Authorization: Bearer '.$this->access_token;
+    }
+
+    $ch = curl_init();
+    curl_setopt($ch, CURLOPT_URL, env('PEER_URI').$url);
+    curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
+    if ($method == 'post') {
+      curl_setopt($ch, CURLOPT_POST, 1);
+      if ($param != '') curl_setopt($ch, CURLOPT_POSTFIELDS, $param);
+    }
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+
+    $get = curl_exec($ch);
+    $err = curl_error($ch);
+    curl_close($ch);
+
+    if (!$get) return $err;
+    $get = json_decode($get);
+    if (isset($get->status) && $get->status == 404) return [];
+
+    return $get;
+  }
+
+  public function vidlist ($get) {
+    $res = [
+      'today' => [],
+      'week' => [],
+      'month' => [],
+      'lastmonth' => [],
+      'moreearly' => [],
+    ];
+
+    foreach ($get->data as $g) {
+      $ud = strtotime($g->createdAt);
+
+      if ($ud > time() - 86400 && $ud < time() + 86400) $res['today'][] = $g;
+      else if ($ud > time() - 604800 && $ud < time() + 604800) $res['week'][] = $g;
+      else if ($ud > time() - 2629800 && $ud < time() + 2629800) $res['month'][] = $g;
+      else if ($ud > time() - 5259600 && $ud < time() + 5259600) $res['lastmonth'][] = $g;
+      else $res['moreearly'][] = $g;
+    }
+
+    return $res;
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Home.php b/app/Http/Controllers/Peertube/Home.php
new file mode 100644
index 0000000..cc6a019
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Home.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Controllers\Peertube;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Home extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    $res = [
+      'page' => 'home',
+      'style' => 'videoslist',
+      'userinfo' => $this->common->user,
+    ];
+
+    $res['new']  = $this->getNewest();
+    $res['hot']  = $this->getPopularest();
+    return view('pages.peertube.home', ['res' => $res]);
+  }
+
+  function getNewest () {
+    return $this->ptapi('/api/v1/videos?start=0&count=8&sort=-publishedAt&skipCount=true&isLocal=true&nsfw=both');
+  }
+
+  function getPopularest () {
+    return $this->ptapi('/api/v1/videos?start=0&count=8&sort=-trending&skipCount=true&isLocal=true&nsfw=both');
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Login.php b/app/Http/Controllers/Peertube/Login.php
new file mode 100644
index 0000000..27003cb
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Login.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Http\Controllers\Peertube;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Login extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index ($err=null) {
+    if (isset($this->common->user['me']) && !is_null($this->common->user['me'])) {
+      return redirect('/peertube/home');
+    }
+
+    $res = [
+      'page' => 'login',
+      'style' => 'login',
+      'userinfo' => $this->common->user,
+      'err' => $err
+    ];
+
+    return view('pages.peertube.login', ['res' => $res]);
+  }
+
+  public function login (Request $r) {
+    if (isset($this->common->user['me']) && !is_null($this->common->user['me'])) {
+      return redirect('/peertube/videos/local');
+    }
+
+    $param = [
+      'client_id' => $this->common->user['local']->client_id,
+      'client_secret' => $this->common->user['local']->client_secret,
+      'grant_type' => 'password',
+    ];
+
+    if (isset($r->username) && isset($r->password)) {
+      $param['username'] = $r->username;
+      $param['password'] = $r->password;
+    }
+    else if (isset($r->refresh_token)) {
+      $param['refresh_token'] = $r->refresh_token;
+    }
+
+    $res = $this->ptapi('/api/v1/users/token', http_build_query($param), 'post', 'x-www-form-urlencoded');
+    $err = null;
+
+    if (isset($res->access_token) && isset($res->refresh_token)) {
+      setcookie('access_token', $res->access_token, time()+(int)$res->expires_in, '/', $_SERVER['HTTP_HOST'], 0, 1); // 24時間
+      setcookie('refresh_token', $res->refresh_token, time()+(int)$res->refresh_token_expires_in, '/', $_SERVER['HTTP_HOST'], 0, 1); // 14日間
+
+      return redirect('/peertube/videos/local');
+    }
+
+    return $this->index(isset($res->error) ? $res->error : '不正なエラー');
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Logout.php b/app/Http/Controllers/Peertube/Logout.php
new file mode 100644
index 0000000..33ca314
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Logout.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers\Peertube;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Logout extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function logout () {
+    $this->ptapi('/api/v1/users/revoke-token', '', 'post');
+    unset($_COOKIE['access_token']);
+    unset($_COOKIE['refresh_token']);
+    setcookie('access_token', '', time() - 3600, '/', $_SERVER['HTTP_HOST'], 0, 1);
+    setcookie('refresh_token', '', time() - 3600, '/', $_SERVER['HTTP_HOST'], 0, 1);
+
+    return redirect('/peertube/home');
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Myaccount.php b/app/Http/Controllers/Peertube/Myaccount.php
new file mode 100644
index 0000000..1a2a1f6
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Myaccount.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Controllers\Peertube;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Myaccount extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Myaccount/Abuses.php b/app/Http/Controllers/Peertube/Myaccount/Abuses.php
new file mode 100644
index 0000000..f2e478d
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Myaccount/Abuses.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Myaccount;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Abuses extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      if ($this->common->user['me']->adminFlags != 1) {
+        return redirect('/peertube/videos/local');
+      }
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    //https://video.076.ne.jp/api/v1/users/me/subscriptions?start=0&count=10
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Myaccount/Applications.php b/app/Http/Controllers/Peertube/Myaccount/Applications.php
new file mode 100644
index 0000000..130dbfb
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Myaccount/Applications.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Myaccount;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Applications extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    //https://video.076.ne.jp/api/v1/users/me/subscriptions?start=0&count=10
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Myaccount/Blocklist/Accounts.php b/app/Http/Controllers/Peertube/Myaccount/Blocklist/Accounts.php
new file mode 100644
index 0000000..d27f6a2
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Myaccount/Blocklist/Accounts.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Myaccount\Blocklist;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Accounts extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    //https://video.076.ne.jp/api/v1/users/me/subscriptions?start=0&count=10
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Myaccount/Blocklist/Servers.php b/app/Http/Controllers/Peertube/Myaccount/Blocklist/Servers.php
new file mode 100644
index 0000000..669dbd8
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Myaccount/Blocklist/Servers.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Myaccount\Blocklist;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Servers extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    //https://video.076.ne.jp/api/v1/users/me/subscriptions?start=0&count=10
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Myaccount/Notification.php b/app/Http/Controllers/Peertube/Myaccount/Notification.php
new file mode 100644
index 0000000..a92db26
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Myaccount/Notification.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Myaccount;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Notification extends Common {
+  private $common;
+  private $count;
+
+  public function __construct () {
+    $this->common = new Common;
+    $this->count = 20;
+  }
+
+  public function index ($page=0) {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'notification',
+      'style' => 'myaccount',
+      'paginate' => $page,
+      'pagetotal' => 500,
+      'userinfo' => $this->common->user,
+    ];
+
+    $res['notification'] = $this->getNotification(($page*$this->count), $this->count);
+    return view('pages.peertube.my-account.notifications', ['res' => $res]);
+  }
+
+  function getNotification ($start, $count) {
+    return $this->ptapi('/api/v1/users/me/notifications?start='.$start.'&count='.$count.'&sort=-createdAt');
+  }
+
+  public function read (Request $r) {
+    $this->ptapi('/api/v1/users/me/notifications/read', json_encode(['ids' => [(int)$r->id]]), 'post');
+    return redirect('/peertube/my-account/notifications');
+  }
+
+  public function readAll () {
+    $this->ptapi('/api/v1/users/me/notifications/read-all', '', 'post');
+    return redirect('/peertube/my-account/notifications');
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Myaccount/Settings.php b/app/Http/Controllers/Peertube/Myaccount/Settings.php
new file mode 100644
index 0000000..7638326
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Myaccount/Settings.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Myaccount;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Settings extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    //https://video.076.ne.jp/api/v1/users/me/subscriptions?start=0&count=10
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Mylibrary.php b/app/Http/Controllers/Peertube/Mylibrary.php
new file mode 100644
index 0000000..dc65246
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Mylibrary.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Controllers\Peertube;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Mylibrary extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Mylibrary/History/Videos.php b/app/Http/Controllers/Peertube/Mylibrary/History/Videos.php
new file mode 100644
index 0000000..2ecafd1
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Mylibrary/History/Videos.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Mylibrary\History;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Videos extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    //https://video.076.ne.jp/api/v1/users/me/history/videos?start=0&count=5
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Mylibrary/Subscriptions.php b/app/Http/Controllers/Peertube/Mylibrary/Subscriptions.php
new file mode 100644
index 0000000..2085f2a
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Mylibrary/Subscriptions.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Mylibrary;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Subscriptions extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    //https://video.076.ne.jp/api/v1/users/me/subscriptions?start=0&count=10
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Mylibrary/Videochannels.php b/app/Http/Controllers/Peertube/Mylibrary/Videochannels.php
new file mode 100644
index 0000000..19eefbe
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Mylibrary/Videochannels.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Mylibrary;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Videochannels extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    //https://video.076.ne.jp/api/v1/accounts/techsuwako/video-channels?start=0&count=20&sort=-updatedAt&withStats=true
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Mylibrary/Videoplaylists.php b/app/Http/Controllers/Peertube/Mylibrary/Videoplaylists.php
new file mode 100644
index 0000000..f91d80f
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Mylibrary/Videoplaylists.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Mylibrary;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Videoplaylists extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    //https://video.076.ne.jp/api/v1/users/me/subscriptions/videos?start=0&count=25&sort=-publishedAt&skipCount=true
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Mylibrary/Videos.php b/app/Http/Controllers/Peertube/Mylibrary/Videos.php
new file mode 100644
index 0000000..bc8d28f
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Mylibrary/Videos.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Mylibrary;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Videos extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    //https://video.076.ne.jp/api/v1/users/me/videos?start=0&count=10&sort=-publishedAt
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Signup.php b/app/Http/Controllers/Peertube/Signup.php
new file mode 100644
index 0000000..f6c449b
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Signup.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Controllers\Peertube;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Signup extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (isset($this->common->user['me']) && !is_null($this->common->user['me'])) {
+      return redirect('/peertube/videos/local');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'dummy',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Videos/Local.php b/app/Http/Controllers/Peertube/Videos/Local.php
new file mode 100644
index 0000000..8824aa5
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Videos/Local.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Videos;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Local extends Common {
+  private $common;
+  private $count;
+
+  public function __construct () {
+    $this->common = new Common;
+    $this->count = 50;
+  }
+
+  public function index ($page=0) {
+    $res = [
+      'page' => 'local',
+      'style' => 'videoslist',
+      'paginate' => $page,
+      'pagetotal' => 500,
+      'userinfo' => $this->common->user,
+    ];
+    $res['video'] = $this->getVideo(($page*$this->count), $this->count);
+    return view('pages.peertube.videos.local', ['res' => $res]);
+  }
+
+  function getVideo ($start, $count) {
+    $get = $this->ptapi('/api/v1/videos?start='.$start.'&count='.$count.'&sort=-publishedAt&skipCount=true&isLocal=true&nsfw=both');
+    return $this->vidlist($get);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Videos/Overview.php b/app/Http/Controllers/Peertube/Videos/Overview.php
new file mode 100644
index 0000000..53653d5
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Videos/Overview.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Videos;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Overview extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index ($page=1) {
+    $res = [
+      'page' => 'overview',
+      'style' => 'videoslist',
+      'paginate' => $page,
+      'pagetotal' => 500,
+      'userinfo' => $this->common->user,
+    ];
+    $res['video'] = $this->getVideo($page);
+    return view('pages.peertube.videos.overview', ['res' => $res]);
+  }
+
+  function getVideo ($page) {
+    return $this->ptapi('/api/v1/overviews/videos?page='.$page);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Videos/Recentlyadded.php b/app/Http/Controllers/Peertube/Videos/Recentlyadded.php
new file mode 100644
index 0000000..7a36165
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Videos/Recentlyadded.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Videos;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Recentlyadded extends Common {
+  private $common;
+  private $count;
+
+  public function __construct () {
+    $this->common = new Common;
+    $this->count = 25;
+  }
+
+  public function index ($page=0) {
+    $res = [
+      'page' => 'recently-added',
+      'style' => 'videoslist',
+      'paginate' => $page,
+      'pagetotal' => 500,
+      'userinfo' => $this->common->user,
+    ];
+    $res['video'] = $this->getVideo(($page*$this->count), $this->count);
+    return view('pages.peertube.videos.recentlyadded', ['res' => $res]);
+  }
+
+  function getVideo ($start, $count) {
+    $get = $this->ptapi('/api/v1/videos/?start='.$start.'&count='.$count.'&sort=-publishedAt&skipCount=true&nsfw=both');
+    return $this->vidlist($get);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Videos/Subscriptions.php b/app/Http/Controllers/Peertube/Videos/Subscriptions.php
new file mode 100644
index 0000000..7fd93fc
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Videos/Subscriptions.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Videos;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Subscriptions extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    if (!isset($this->common->user['me']) || is_null($this->common->user['me'])) {
+      return redirect('/peertube/login');
+    }
+
+    $res = [
+      'page' => 'dummy',
+      'style' => 'videoslist',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    //https://video.076.ne.jp/api/v1/users/me/subscriptions/videos?start=0&count=25&sort=-publishedAt&skipCount=true
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Videos/Trending.php b/app/Http/Controllers/Peertube/Videos/Trending.php
new file mode 100644
index 0000000..a4c1a71
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Videos/Trending.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Videos;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Trending extends Common {
+  private $common;
+  private $count;
+
+  public function __construct () {
+    $this->common = new Common;
+    $this->count = 25;
+  }
+
+  public function index ($page=0) {
+    $res = [
+      'page' => 'trending',
+      'style' => 'videoslist',
+      'paginate' => $page,
+      'pagetotal' => 500,
+      'userinfo' => $this->common->user,
+    ];
+    $res['video'] = $this->getVideo(($page*$this->count), $this->count);
+    return view('pages.peertube.videos.trending', ['res' => $res]);
+  }
+
+  function getVideo ($start, $count) {
+    return $this->ptapi('/api/v1/videos/?start='.$start.'&count='.$count.'&sort=-trending&skipCount=true&nsfw=both');
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Videos/Upload.php b/app/Http/Controllers/Peertube/Videos/Upload.php
new file mode 100644
index 0000000..b73906d
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Videos/Upload.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers\Peertube\Videos;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Upload extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index () {
+    $res = [
+      'page' => 'dummy',
+      'style' => 'videoslist',
+      'userinfo' => $this->common->user,
+    ];
+    // $res['owner'] = $this->getOwner($id);
+    return view('pages.peertube.notyet', ['res' => $res]);
+  }
+
+  function getOwner ($id) {
+    return $this->ptapi('/api/v1/accounts/'.$id);
+  }
+}
diff --git a/app/Http/Controllers/Peertube/Watch.php b/app/Http/Controllers/Peertube/Watch.php
new file mode 100644
index 0000000..e0a3e44
--- /dev/null
+++ b/app/Http/Controllers/Peertube/Watch.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Http\Controllers\Peertube;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Peertube\Common;
+// use Illuminate\Support\Facades\Log;
+
+class Watch extends Common {
+  private $common;
+
+  public function __construct () {
+    $this->common = new Common;
+  }
+
+  public function index ($id) {
+    $res = [
+      'page' => 'watch',
+      'style' => 'watch',
+      'userinfo' => $this->common->user,
+    ];
+    $res['detail'] = $this->getDetail($id);
+    $res = $this->getComment($id, $res);
+
+    $tags = [];
+    if (!is_null($res['detail']->tags)) $tags = $res['detail']->tags;
+    else $tags = explode(' ', $res['detail']->title);
+
+    $res['recommend'] = $this->getRecommend($tags);
+    return view('pages.peertube.w', ['res' => $res]);
+  }
+
+  function getDetail ($id) {
+    return $this->ptapi('/api/v1/videos/'.$id);
+  }
+
+  function getRecommend ($tags) {
+    $tag = '';
+    foreach ($tags as $t) {
+      $tag .= 'tagsOneOf='.urlencode($t).'&';
+    }
+    return $this->ptapi('/api/v1/search/videos?start=0&count=6&nsfw=both&'.$tag.'sort=-publishedAt&searchTarget=local');
+  }
+
+  function getComment ($id, $res) {
+    $get = null;
+
+    $res['comment'] = $this->ptapi('/api/v1/videos/'.$id.'/comment-threads');
+    foreach ($res['comment']->data as $co) {
+      $co->src = 'PT';
+    }
+
+    return $res;
+  }
+}
diff --git a/app/Http/Controllers/RssFeedController.php b/app/Http/Controllers/RssFeedController.php
new file mode 100644
index 0000000..9890186
--- /dev/null
+++ b/app/Http/Controllers/RssFeedController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
+
+class RssFeedController extends Controller {
+  public function feed () {
+    $select = ['id', 'user_id', 'title', 'slug', 'publish_date', 'message'];
+    $posts = DB::table('blg_content')->select($select)->where('isPost', true)->where('public_status', 0)->orderBy('id', 'desc')->limit(50)->get();
+
+    foreach ($posts as $k => $v) {
+      $userd = DB::table('users')->where('id', $v->user_id)->first();
+      $userd = DB::table('usr_profile')->where('user_id', $v->user_id)->first();
+      $v->user = $userd->display_name;
+      unset($posts[$k]->user_id);
+    }
+
+    return response()->view('rss.feed', ['posts' => $posts])->header('Content-Type', 'application/xml');
+  }
+}
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
new file mode 100644
index 0000000..70c1ca0
--- /dev/null
+++ b/app/Http/Kernel.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Http;
+
+use Illuminate\Foundation\Http\Kernel as HttpKernel;
+
+class Kernel extends HttpKernel
+{
+    /**
+     * The application's global HTTP middleware stack.
+     *
+     * These middleware are run during every request to your application.
+     *
+     * @var array
+     */
+    protected $middleware = [
+        // \App\Http\Middleware\TrustHosts::class,
+        \App\Http\Middleware\TrustProxies::class,
+        \Fruitcake\Cors\HandleCors::class,
+        \App\Http\Middleware\CheckForMaintenanceMode::class,
+        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
+        \App\Http\Middleware\TrimStrings::class,
+        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
+    ];
+
+    /**
+     * The application's route middleware groups.
+     *
+     * @var array
+     */
+    protected $middlewareGroups = [
+        'web' => [
+            \App\Http\Middleware\EncryptCookies::class,
+            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
+            \Illuminate\Session\Middleware\StartSession::class,
+            // \Illuminate\Session\Middleware\AuthenticateSession::class,
+            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
+            \App\Http\Middleware\VerifyCsrfToken::class,
+            \Illuminate\Routing\Middleware\SubstituteBindings::class,
+        ],
+
+        'api' => [
+            'throttle:60,1',
+            \App\Http\Middleware\VerifyCsrfToken::class,
+            \Illuminate\Routing\Middleware\SubstituteBindings::class,
+        ],
+    ];
+
+    /**
+     * The application's route middleware.
+     *
+     * These middleware may be assigned to groups or used individually.
+     *
+     * @var array
+     */
+    protected $routeMiddleware = [
+        'auth' => \App\Http\Middleware\Authenticate::class,
+        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
+        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
+        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
+        'can' => \Illuminate\Auth\Middleware\Authorize::class,
+        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
+        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
+        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
+        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
+        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
+    ];
+}
diff --git a/app/Http/Middleware/Authenticate.php b/app/Http/Middleware/Authenticate.php
new file mode 100644
index 0000000..704089a
--- /dev/null
+++ b/app/Http/Middleware/Authenticate.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Auth\Middleware\Authenticate as Middleware;
+
+class Authenticate extends Middleware
+{
+    /**
+     * Get the path the user should be redirected to when they are not authenticated.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return string|null
+     */
+    protected function redirectTo($request)
+    {
+        if (! $request->expectsJson()) {
+            return route('login');
+        }
+    }
+}
diff --git a/app/Http/Middleware/CheckForMaintenanceMode.php b/app/Http/Middleware/CheckForMaintenanceMode.php
new file mode 100644
index 0000000..35b9824
--- /dev/null
+++ b/app/Http/Middleware/CheckForMaintenanceMode.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode as Middleware;
+
+class CheckForMaintenanceMode extends Middleware
+{
+    /**
+     * The URIs that should be reachable while maintenance mode is enabled.
+     *
+     * @var array
+     */
+    protected $except = [
+        //
+    ];
+}
diff --git a/app/Http/Middleware/EncryptCookies.php b/app/Http/Middleware/EncryptCookies.php
new file mode 100644
index 0000000..033136a
--- /dev/null
+++ b/app/Http/Middleware/EncryptCookies.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;
+
+class EncryptCookies extends Middleware
+{
+    /**
+     * The names of the cookies that should not be encrypted.
+     *
+     * @var array
+     */
+    protected $except = [
+        //
+    ];
+}
diff --git a/app/Http/Middleware/RedirectIfAuthenticated.php b/app/Http/Middleware/RedirectIfAuthenticated.php
new file mode 100644
index 0000000..2395ddc
--- /dev/null
+++ b/app/Http/Middleware/RedirectIfAuthenticated.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use App\Providers\RouteServiceProvider;
+use Closure;
+use Illuminate\Support\Facades\Auth;
+
+class RedirectIfAuthenticated
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @param  string|null  $guard
+     * @return mixed
+     */
+    public function handle($request, Closure $next, $guard = null)
+    {
+        if (Auth::guard($guard)->check()) {
+            return redirect(RouteServiceProvider::HOME);
+        }
+
+        return $next($request);
+    }
+}
diff --git a/app/Http/Middleware/TrimStrings.php b/app/Http/Middleware/TrimStrings.php
new file mode 100644
index 0000000..5a50e7b
--- /dev/null
+++ b/app/Http/Middleware/TrimStrings.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Foundation\Http\Middleware\TrimStrings as Middleware;
+
+class TrimStrings extends Middleware
+{
+    /**
+     * The names of the attributes that should not be trimmed.
+     *
+     * @var array
+     */
+    protected $except = [
+        'password',
+        'password_confirmation',
+    ];
+}
diff --git a/app/Http/Middleware/TrustHosts.php b/app/Http/Middleware/TrustHosts.php
new file mode 100644
index 0000000..b0550cf
--- /dev/null
+++ b/app/Http/Middleware/TrustHosts.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Http\Middleware\TrustHosts as Middleware;
+
+class TrustHosts extends Middleware
+{
+    /**
+     * Get the host patterns that should be trusted.
+     *
+     * @return array
+     */
+    public function hosts()
+    {
+        return [
+            $this->allSubdomainsOfApplicationUrl(),
+        ];
+    }
+}
diff --git a/app/Http/Middleware/TrustProxies.php b/app/Http/Middleware/TrustProxies.php
new file mode 100644
index 0000000..14befce
--- /dev/null
+++ b/app/Http/Middleware/TrustProxies.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Fideloper\Proxy\TrustProxies as Middleware;
+use Illuminate\Http\Request;
+
+class TrustProxies extends Middleware
+{
+    /**
+     * The trusted proxies for this application.
+     *
+     * @var array|string|null
+     */
+    protected $proxies;
+
+    /**
+     * The headers that should be used to detect proxies.
+     *
+     * @var int
+     */
+    protected $headers = Request::HEADER_X_FORWARDED_ALL;
+}
diff --git a/app/Http/Middleware/VerifyCsrfToken.php b/app/Http/Middleware/VerifyCsrfToken.php
new file mode 100644
index 0000000..0c13b85
--- /dev/null
+++ b/app/Http/Middleware/VerifyCsrfToken.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;
+
+class VerifyCsrfToken extends Middleware
+{
+    /**
+     * The URIs that should be excluded from CSRF verification.
+     *
+     * @var array
+     */
+    protected $except = [
+        //
+    ];
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
new file mode 100644
index 0000000..d1f5496
--- /dev/null
+++ b/app/Providers/AppServiceProvider.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Pagination\Paginator;
+
+class AppServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Paginator::useBootstrap();
+    }
+}
diff --git a/app/Providers/AuthServiceProvider.php b/app/Providers/AuthServiceProvider.php
new file mode 100644
index 0000000..3049068
--- /dev/null
+++ b/app/Providers/AuthServiceProvider.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
+use Illuminate\Support\Facades\Gate;
+
+class AuthServiceProvider extends ServiceProvider
+{
+    /**
+     * The policy mappings for the application.
+     *
+     * @var array
+     */
+    protected $policies = [
+        // 'App\Model' => 'App\Policies\ModelPolicy',
+    ];
+
+    /**
+     * Register any authentication / authorization services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->registerPolicies();
+
+        //
+    }
+}
diff --git a/app/Providers/BroadcastServiceProvider.php b/app/Providers/BroadcastServiceProvider.php
new file mode 100644
index 0000000..395c518
--- /dev/null
+++ b/app/Providers/BroadcastServiceProvider.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\Facades\Broadcast;
+use Illuminate\Support\ServiceProvider;
+
+class BroadcastServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Broadcast::routes();
+
+        require base_path('routes/channels.php');
+    }
+}
diff --git a/app/Providers/EventServiceProvider.php b/app/Providers/EventServiceProvider.php
new file mode 100644
index 0000000..723a290
--- /dev/null
+++ b/app/Providers/EventServiceProvider.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Auth\Events\Registered;
+use Illuminate\Auth\Listeners\SendEmailVerificationNotification;
+use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
+use Illuminate\Support\Facades\Event;
+
+class EventServiceProvider extends ServiceProvider
+{
+    /**
+     * The event listener mappings for the application.
+     *
+     * @var array
+     */
+    protected $listen = [
+        Registered::class => [
+            SendEmailVerificationNotification::class,
+        ],
+    ];
+
+    /**
+     * Register any events for your application.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        parent::boot();
+
+        //
+    }
+}
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
new file mode 100644
index 0000000..540d17b
--- /dev/null
+++ b/app/Providers/RouteServiceProvider.php
@@ -0,0 +1,80 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
+use Illuminate\Support\Facades\Route;
+
+class RouteServiceProvider extends ServiceProvider
+{
+    /**
+     * This namespace is applied to your controller routes.
+     *
+     * In addition, it is set as the URL generator's root namespace.
+     *
+     * @var string
+     */
+    protected $namespace = 'App\Http\Controllers';
+
+    /**
+     * The path to the "home" route for your application.
+     *
+     * @var string
+     */
+    public const HOME = '/home';
+
+    /**
+     * Define your route model bindings, pattern filters, etc.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        //
+
+        parent::boot();
+    }
+
+    /**
+     * Define the routes for the application.
+     *
+     * @return void
+     */
+    public function map()
+    {
+        $this->mapApiRoutes();
+
+        $this->mapWebRoutes();
+
+        //
+    }
+
+    /**
+     * Define the "web" routes for the application.
+     *
+     * These routes all receive session state, CSRF protection, etc.
+     *
+     * @return void
+     */
+    protected function mapWebRoutes()
+    {
+        Route::middleware('web')
+            ->namespace($this->namespace)
+            ->group(base_path('routes/web.php'));
+    }
+
+    /**
+     * Define the "api" routes for the application.
+     *
+     * These routes are typically stateless.
+     *
+     * @return void
+     */
+    protected function mapApiRoutes()
+    {
+        Route::prefix('api')
+            ->middleware('api')
+            ->namespace($this->namespace)
+            ->group(base_path('routes/api.php'));
+    }
+}
diff --git a/app/helpers.php b/app/helpers.php
new file mode 100644
index 0000000..0370839
--- /dev/null
+++ b/app/helpers.php
@@ -0,0 +1,159 @@
+<?php
+
+use Illuminate\Support\Facades\DB;
+
+function getPagesInMenu () {
+  $get = DB::table('blg_content')->select('title', 'slug')->where('public_status', 0)->where('isPost', 0)->where('isMenu', 1)->orderBy('sortorder', 'asc')->get();
+
+  $res = array();
+  $key = 0;
+
+  foreach ($get as $i) {
+    array_push($res, ['key' => $key, 'title' => $i->title, 'slug' => $i->slug]);
+    $key++;
+  }
+
+  return $res;
+}
+
+function getCss () {
+  $engine = new \App\Http\Controllers\Engine;
+  return $engine->css;
+}
+
+function getPerms () {
+  $engine = new \App\Http\Controllers\Engine;
+  return $engine->getPermissions((isset($_COOKIE['kero_token']) ? $_COOKIE['kero_token'] : ''));
+}
+
+function getUser () {
+  $engine = new \App\Http\Controllers\Engine;
+  return $engine->user;
+}
+
+function getGroupColours () {
+  return DB::table('usr_perm_module')->select('id', 'colour_m', 'colour_f', 'colour_u')->get()->toArray();
+}
+
+function checkLegit ($t) {
+  if (!isset($t) || empty($t) || is_null($t)) return 0;
+  $check = DB::table('users')->select('id')->where('kero_token', $t)->first();
+  return $check->id;
+}
+
+function ptComeSrc ($v) {
+  $res = new \stdClass();
+  $res->bg = '#';
+  $res->fg = '#fcfcfc';
+  $res->tx = '不明';
+
+  switch ($v) {
+    case 'PT':
+      $res->bg .= 'ffad5c';
+      $res->tx = 'PeerTube';
+      break;
+    case 'TS':
+      $res->bg .= 'cb81ea';
+      $res->tx = 'テク諏訪';
+      break;
+    case 'YT':
+      $res->bg .= 'f50057';
+      $res->tx = 'YouTube';
+      break;
+    case 'OD':
+      $res->bg .= '33b58f';
+      $res->tx = 'LBRY';
+      break;
+    default:
+      $res->bg = 'transparent';
+      break;
+  }
+
+  return $res;
+}
+
+function ptFullHandle ($v) {
+  return $v->name.($v->host != str_replace('https://', '', env('PEER_URI')) ? '@'.$v->host : '');
+}
+
+function ptAvatar ($v) {
+  $placeholder = '/img/noicon.jpg';
+  $res = '';
+
+  if (isset($v->avatar)) {
+    if (is_null($v->avatar)) return $placeholder;
+    $ava = $v->avatar->path;
+    $ava = str_replace(env('APP_URL'), '', $ava);
+    $res = str_starts_with(env('APP_URL'), $ava) ? env('PEER_URI') : '';
+    if ($ava == '/') return '/img/noicon.jpg';
+    else if (str_starts_with($ava, '/lazy-static')) $res = env('PEER_URI');
+
+    return $res.$ava;
+  }
+
+  return '/img/noicon.jpg';
+}
+
+function userDetail ($id, $kero=null) {
+  if ($kero || $id) {
+    $log_username = null;
+    if (!is_null($id)) $log_username = DB::table('users')->select('id', 'username')->where('id', $id)->first();
+    else $log_username = DB::table('users')->select('id', 'username')->where('kero_token', $kero)->first();
+    $perm_id = DB::table('usr_perm_id')->select('perm_id')->where('user_id', $log_username->id)->first()->perm_id;
+    $p3 = DB::table('usr_profile')->select('gender', 'avatar', 'name_style', 'display_name')->where('user_id', $log_username->id)->first();
+    $user_id = $log_username->id;
+    $log_username = $log_username->username;
+    $showname = '';
+    $showcol = '';
+    $ucol = DB::table('usr_perm_module')->select('id', 'colour_m', 'colour_f', 'colour_u')->get();
+
+    if (!empty($p3->display_name)) $showname = $p3->display_name;
+    else $showname = $log_username;
+
+    if (!empty($p3->name_style)) $showcol = $p3->name_style;
+    else {
+      foreach ($ucol as $j3) {
+        if ($j3->id == $perm_id) {
+          if ($p3->gender == 1) $showcol = $j3->colour_m;
+          else if ($p3->gender == 2) $showcol = $j3->colour_f;
+          else $showcol = $j3->colour_u;
+        }
+      }
+    }
+
+    $p3->avatar = ($p3->avatar ? '/'.$p3->avatar : '/img/noicon.jpg');
+    return array('user_id' => $user_id, 'showname' => $showname, 'showcol' => $showcol, 'avatar' => $p3->avatar);
+  }
+
+  return new \stdClass();
+}
+
+function getCountries () {
+  $flags = DB::table('nhn_country')->orderBy('id', 'asc')->get();
+  $res = array();
+
+  foreach ($flags as $flag) {
+    $protocol = isset($_SERVER["HTTPS"]) ? 'https' : 'http';
+
+    $res[] = array(
+      'value' => $flag->nameEng,
+      'label' => $flag->name
+    );
+  }
+
+  return $res;
+}
+
+function makeToken () {
+  $c  = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$!%&()';
+  $clen = strlen($c);
+  $token = '';
+
+  for ($i = 0; $i < 128; $i++) {
+    $token .= $c[rand(0, $clen - 1)];
+  }
+
+  return $token;
+}
+
+?>
diff --git a/artisan b/artisan
new file mode 100755
index 0000000..5c23e2e
--- /dev/null
+++ b/artisan
@@ -0,0 +1,53 @@
+#!/usr/bin/env php
+<?php
+
+define('LARAVEL_START', microtime(true));
+
+/*
+|--------------------------------------------------------------------------
+| Register The Auto Loader
+|--------------------------------------------------------------------------
+|
+| Composer provides a convenient, automatically generated class loader
+| for our application. We just need to utilize it! We'll require it
+| into the script here so that we do not have to worry about the
+| loading of any our classes "manually". Feels great to relax.
+|
+*/
+
+require __DIR__.'/vendor/autoload.php';
+
+$app = require_once __DIR__.'/bootstrap/app.php';
+
+/*
+|--------------------------------------------------------------------------
+| Run The Artisan Application
+|--------------------------------------------------------------------------
+|
+| When we run the console application, the current CLI command will be
+| executed in this console and the response sent back to a terminal
+| or another output device for the developers. Here goes nothing!
+|
+*/
+
+$kernel = $app->make(Illuminate\Contracts\Console\Kernel::class);
+
+$status = $kernel->handle(
+    $input = new Symfony\Component\Console\Input\ArgvInput,
+    new Symfony\Component\Console\Output\ConsoleOutput
+);
+
+/*
+|--------------------------------------------------------------------------
+| Shutdown The Application
+|--------------------------------------------------------------------------
+|
+| Once Artisan has finished running, we will fire off the shutdown events
+| so that any final work may be done by the application before we shut
+| down the process. This is the last thing to happen to the request.
+|
+*/
+
+$kernel->terminate($input, $status);
+
+exit($status);
diff --git a/bootstrap/app.php b/bootstrap/app.php
new file mode 100644
index 0000000..037e17d
--- /dev/null
+++ b/bootstrap/app.php
@@ -0,0 +1,55 @@
+<?php
+
+/*
+|--------------------------------------------------------------------------
+| Create The Application
+|--------------------------------------------------------------------------
+|
+| The first thing we will do is create a new Laravel application instance
+| which serves as the "glue" for all the components of Laravel, and is
+| the IoC container for the system binding all of the various parts.
+|
+*/
+
+$app = new Illuminate\Foundation\Application(
+    $_ENV['APP_BASE_PATH'] ?? dirname(__DIR__)
+);
+
+/*
+|--------------------------------------------------------------------------
+| Bind Important Interfaces
+|--------------------------------------------------------------------------
+|
+| Next, we need to bind some important interfaces into the container so
+| we will be able to resolve them when needed. The kernels serve the
+| incoming requests to this application from both the web and CLI.
+|
+*/
+
+$app->singleton(
+    Illuminate\Contracts\Http\Kernel::class,
+    App\Http\Kernel::class
+);
+
+$app->singleton(
+    Illuminate\Contracts\Console\Kernel::class,
+    App\Console\Kernel::class
+);
+
+$app->singleton(
+    Illuminate\Contracts\Debug\ExceptionHandler::class,
+    App\Exceptions\Handler::class
+);
+
+/*
+|--------------------------------------------------------------------------
+| Return The Application
+|--------------------------------------------------------------------------
+|
+| This script returns the application instance. The instance is given to
+| the calling script so we can separate the building of the instances
+| from the actual running of the application and sending responses.
+|
+*/
+
+return $app;
diff --git a/bootstrap/cache/.gitignore b/bootstrap/cache/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/bootstrap/cache/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..45a6e77
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,65 @@
+{
+    "name": "laravel/laravel",
+    "type": "project",
+    "description": "The Laravel Framework.",
+    "keywords": ["framework", "laravel"],
+    "license": "MIT",
+    "require": {
+        "php": "^8.0",
+        "fideloper/proxy": "^4.4.1",
+        "fruitcake/laravel-cors": "^2.0.4",
+        "guzzlehttp/guzzle": "^7.4.0",
+        "laravel/framework": "^8.74.0",
+        "laravel/tinker": "^2.6.2",
+        "phpmailer/phpmailer": "^6.5",
+        "predis/predis": "^1.1.9"
+    },
+    "require-dev": {
+        "facade/ignition": "^2.5",
+        "fakerphp/faker": "^1.16.0",
+        "mockery/mockery": "^1.4.2",
+        "nunomaduro/collision": "^5.0",
+        "phpunit/phpunit": "^9.5.10"
+    },
+    "autoload": {
+        "psr-4": {
+            "App\\": "app/"
+        },
+        "files": [
+            "app/helpers.php"
+        ],
+        "classmap": [
+            "database/seeds",
+            "database/factories"
+        ]
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "Tests\\": "tests/"
+        }
+    },
+    "scripts": {
+        "post-autoload-dump": [
+            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
+            "@php artisan package:discover --ansi"
+        ],
+        "post-root-package-install": [
+            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
+        ],
+        "post-create-project-cmd": [
+            "@php artisan key:generate --ansi"
+        ]
+    },
+    "extra": {
+        "laravel": {
+            "dont-discover": []
+        }
+    },
+    "config": {
+        "optimize-autoloader": true,
+        "preferred-install": "dist",
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}
diff --git a/config/app.php b/config/app.php
new file mode 100644
index 0000000..02587a7
--- /dev/null
+++ b/config/app.php
@@ -0,0 +1,232 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Name
+    |--------------------------------------------------------------------------
+    |
+    | This value is the name of your application. This value is used when the
+    | framework needs to place the application's name in a notification or
+    | any other location as required by the application or its packages.
+    |
+    */
+
+    'name' => env('APP_NAME', 'テクニカル諏訪子'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Environment
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the "environment" your application is currently
+    | running in. This may determine how you prefer to configure various
+    | services the application utilizes. Set this in your ".env" file.
+    |
+    */
+
+    'env' => env('APP_ENV', 'production'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Debug Mode
+    |--------------------------------------------------------------------------
+    |
+    | When your application is in debug mode, detailed error messages with
+    | stack traces will be shown on every error that occurs within your
+    | application. If disabled, a simple generic error page is shown.
+    |
+    */
+
+    'debug' => (bool) env('APP_DEBUG', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application URL
+    |--------------------------------------------------------------------------
+    |
+    | This URL is used by the console to properly generate URLs when using
+    | the Artisan command line tool. You should set this to the root of
+    | your application so that it is used when running Artisan tasks.
+    |
+    */
+
+    'url' => env('APP_URL', 'http://localhost'),
+
+    'asset_url' => env('ASSET_URL', null),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Timezone
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default timezone for your application, which
+    | will be used by the PHP date and date-time functions. We have gone
+    | ahead and set this to a sensible default for you out of the box.
+    |
+    */
+
+    'timezone' => 'Asia/Tokyo',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Locale Configuration
+    |--------------------------------------------------------------------------
+    |
+    | The application locale determines the default locale that will be used
+    | by the translation service provider. You are free to set this value
+    | to any of the locales which will be supported by the application.
+    |
+    */
+
+    'locale' => 'ja',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Fallback Locale
+    |--------------------------------------------------------------------------
+    |
+    | The fallback locale determines the locale to use when the current one
+    | is not available. You may change the value to correspond to any of
+    | the language folders that are provided through your application.
+    |
+    */
+
+    'fallback_locale' => 'ja',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Faker Locale
+    |--------------------------------------------------------------------------
+    |
+    | This locale will be used by the Faker PHP library when generating fake
+    | data for your database seeds. For example, this will be used to get
+    | localized telephone numbers, street address information and more.
+    |
+    */
+
+    'faker_locale' => 'ja_JP',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Encryption Key
+    |--------------------------------------------------------------------------
+    |
+    | This key is used by the Illuminate encrypter service and should be set
+    | to a random, 32 character string, otherwise these encrypted strings
+    | will not be safe. Please do this before deploying an application!
+    |
+    */
+
+    'key' => env('APP_KEY'),
+
+    'cipher' => 'AES-256-CBC',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Autoloaded Service Providers
+    |--------------------------------------------------------------------------
+    |
+    | The service providers listed here will be automatically loaded on the
+    | request to your application. Feel free to add your own services to
+    | this array to grant expanded functionality to your applications.
+    |
+    */
+
+    'providers' => [
+
+        /*
+         * Laravel Framework Service Providers...
+         */
+        Illuminate\Auth\AuthServiceProvider::class,
+        Illuminate\Broadcasting\BroadcastServiceProvider::class,
+        Illuminate\Bus\BusServiceProvider::class,
+        Illuminate\Cache\CacheServiceProvider::class,
+        Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
+        Illuminate\Cookie\CookieServiceProvider::class,
+        Illuminate\Database\DatabaseServiceProvider::class,
+        Illuminate\Encryption\EncryptionServiceProvider::class,
+        Illuminate\Filesystem\FilesystemServiceProvider::class,
+        Illuminate\Foundation\Providers\FoundationServiceProvider::class,
+        Illuminate\Hashing\HashServiceProvider::class,
+        Illuminate\Mail\MailServiceProvider::class,
+        Illuminate\Notifications\NotificationServiceProvider::class,
+        Illuminate\Pagination\PaginationServiceProvider::class,
+        Illuminate\Pipeline\PipelineServiceProvider::class,
+        Illuminate\Queue\QueueServiceProvider::class,
+        Illuminate\Redis\RedisServiceProvider::class,
+        Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
+        Illuminate\Session\SessionServiceProvider::class,
+        Illuminate\Translation\TranslationServiceProvider::class,
+        Illuminate\Validation\ValidationServiceProvider::class,
+        Illuminate\View\ViewServiceProvider::class,
+
+        /*
+         * Package Service Providers...
+         */
+
+        /*
+         * Application Service Providers...
+         */
+        App\Providers\AppServiceProvider::class,
+        App\Providers\AuthServiceProvider::class,
+        // App\Providers\BroadcastServiceProvider::class,
+        App\Providers\EventServiceProvider::class,
+        App\Providers\RouteServiceProvider::class,
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Class Aliases
+    |--------------------------------------------------------------------------
+    |
+    | This array of class aliases will be registered when this application
+    | is started. However, feel free to register as many as you wish as
+    | the aliases are "lazy" loaded so they don't hinder performance.
+    |
+    */
+
+    'aliases' => [
+
+        'App' => Illuminate\Support\Facades\App::class,
+        'Arr' => Illuminate\Support\Arr::class,
+        'Artisan' => Illuminate\Support\Facades\Artisan::class,
+        'Auth' => Illuminate\Support\Facades\Auth::class,
+        'Blade' => Illuminate\Support\Facades\Blade::class,
+        'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
+        'Bus' => Illuminate\Support\Facades\Bus::class,
+        'Cache' => Illuminate\Support\Facades\Cache::class,
+        'Config' => Illuminate\Support\Facades\Config::class,
+        'Cookie' => Illuminate\Support\Facades\Cookie::class,
+        'Crypt' => Illuminate\Support\Facades\Crypt::class,
+        'DB' => Illuminate\Support\Facades\DB::class,
+        'Eloquent' => Illuminate\Database\Eloquent\Model::class,
+        'Event' => Illuminate\Support\Facades\Event::class,
+        'File' => Illuminate\Support\Facades\File::class,
+        'Gate' => Illuminate\Support\Facades\Gate::class,
+        'Hash' => Illuminate\Support\Facades\Hash::class,
+        'Http' => Illuminate\Support\Facades\Http::class,
+        'Lang' => Illuminate\Support\Facades\Lang::class,
+        'Log' => Illuminate\Support\Facades\Log::class,
+        'Mail' => Illuminate\Support\Facades\Mail::class,
+        'Notification' => Illuminate\Support\Facades\Notification::class,
+        'Password' => Illuminate\Support\Facades\Password::class,
+        'Queue' => Illuminate\Support\Facades\Queue::class,
+        'Redirect' => Illuminate\Support\Facades\Redirect::class,
+        'Redis' => Illuminate\Support\Facades\Redis::class,
+        'Request' => Illuminate\Support\Facades\Request::class,
+        'Response' => Illuminate\Support\Facades\Response::class,
+        'Route' => Illuminate\Support\Facades\Route::class,
+        'Schema' => Illuminate\Support\Facades\Schema::class,
+        'Session' => Illuminate\Support\Facades\Session::class,
+        'Storage' => Illuminate\Support\Facades\Storage::class,
+        'Str' => Illuminate\Support\Str::class,
+        'URL' => Illuminate\Support\Facades\URL::class,
+        'Validator' => Illuminate\Support\Facades\Validator::class,
+        'View' => Illuminate\Support\Facades\View::class,
+
+    ],
+
+];
diff --git a/config/auth.php b/config/auth.php
new file mode 100644
index 0000000..aaf982b
--- /dev/null
+++ b/config/auth.php
@@ -0,0 +1,117 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Defaults
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default authentication "guard" and password
+    | reset options for your application. You may change these defaults
+    | as required, but they're a perfect start for most applications.
+    |
+    */
+
+    'defaults' => [
+        'guard' => 'web',
+        'passwords' => 'users',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Guards
+    |--------------------------------------------------------------------------
+    |
+    | Next, you may define every authentication guard for your application.
+    | Of course, a great default configuration has been defined for you
+    | here which uses session storage and the Eloquent user provider.
+    |
+    | All authentication drivers have a user provider. This defines how the
+    | users are actually retrieved out of your database or other storage
+    | mechanisms used by this application to persist your user's data.
+    |
+    | Supported: "session", "token"
+    |
+    */
+
+    'guards' => [
+        'web' => [
+            'driver' => 'session',
+            'provider' => 'users',
+        ],
+
+        'api' => [
+            'driver' => 'token',
+            'provider' => 'users',
+            'hash' => false,
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | User Providers
+    |--------------------------------------------------------------------------
+    |
+    | All authentication drivers have a user provider. This defines how the
+    | users are actually retrieved out of your database or other storage
+    | mechanisms used by this application to persist your user's data.
+    |
+    | If you have multiple user tables or models you may configure multiple
+    | sources which represent each model / table. These sources may then
+    | be assigned to any extra authentication guards you have defined.
+    |
+    | Supported: "database", "eloquent"
+    |
+    */
+
+    'providers' => [
+        'users' => [
+            'driver' => 'eloquent',
+            'model' => App\User::class,
+        ],
+
+        // 'users' => [
+        //     'driver' => 'database',
+        //     'table' => 'users',
+        // ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Resetting Passwords
+    |--------------------------------------------------------------------------
+    |
+    | You may specify multiple password reset configurations if you have more
+    | than one user table or model in the application and you want to have
+    | separate password reset settings based on the specific user types.
+    |
+    | The expire time is the number of minutes that the reset token should be
+    | considered valid. This security feature keeps tokens short-lived so
+    | they have less time to be guessed. You may change this as needed.
+    |
+    */
+
+    'passwords' => [
+        'users' => [
+            'provider' => 'users',
+            'table' => 'password_resets',
+            'expire' => 60,
+            'throttle' => 60,
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Confirmation Timeout
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define the amount of seconds before a password confirmation
+    | times out and the user is prompted to re-enter their password via the
+    | confirmation screen. By default, the timeout lasts for three hours.
+    |
+    */
+
+    'password_timeout' => 10800,
+
+];
diff --git a/config/broadcasting.php b/config/broadcasting.php
new file mode 100644
index 0000000..3bba110
--- /dev/null
+++ b/config/broadcasting.php
@@ -0,0 +1,59 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Broadcaster
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default broadcaster that will be used by the
+    | framework when an event needs to be broadcast. You may set this to
+    | any of the connections defined in the "connections" array below.
+    |
+    | Supported: "pusher", "redis", "log", "null"
+    |
+    */
+
+    'default' => env('BROADCAST_DRIVER', 'null'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Broadcast Connections
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define all of the broadcast connections that will be used
+    | to broadcast events to other systems or over websockets. Samples of
+    | each available type of connection are provided inside this array.
+    |
+    */
+
+    'connections' => [
+
+        'pusher' => [
+            'driver' => 'pusher',
+            'key' => env('PUSHER_APP_KEY'),
+            'secret' => env('PUSHER_APP_SECRET'),
+            'app_id' => env('PUSHER_APP_ID'),
+            'options' => [
+                'cluster' => env('PUSHER_APP_CLUSTER'),
+                'useTLS' => true,
+            ],
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => 'default',
+        ],
+
+        'log' => [
+            'driver' => 'log',
+        ],
+
+        'null' => [
+            'driver' => 'null',
+        ],
+
+    ],
+
+];
diff --git a/config/cache.php b/config/cache.php
new file mode 100644
index 0000000..4f41fdf
--- /dev/null
+++ b/config/cache.php
@@ -0,0 +1,104 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default cache connection that gets used while
+    | using this caching library. This connection is used when another is
+    | not explicitly specified when executing a given caching function.
+    |
+    | Supported: "apc", "array", "database", "file",
+    |            "memcached", "redis", "dynamodb"
+    |
+    */
+
+    'default' => env('CACHE_DRIVER', 'file'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Stores
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define all of the cache "stores" for your application as
+    | well as their drivers. You may even define multiple stores for the
+    | same cache driver to group types of items stored in your caches.
+    |
+    */
+
+    'stores' => [
+
+        'apc' => [
+            'driver' => 'apc',
+        ],
+
+        'array' => [
+            'driver' => 'array',
+            'serialize' => false,
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'table' => 'cache',
+            'connection' => null,
+        ],
+
+        'file' => [
+            'driver' => 'file',
+            'path' => storage_path('framework/cache/data'),
+        ],
+
+        'memcached' => [
+            'driver' => 'memcached',
+            'persistent_id' => env('MEMCACHED_PERSISTENT_ID'),
+            'sasl' => [
+                env('MEMCACHED_USERNAME'),
+                env('MEMCACHED_PASSWORD'),
+            ],
+            'options' => [
+                // Memcached::OPT_CONNECT_TIMEOUT => 2000,
+            ],
+            'servers' => [
+                [
+                    'host' => env('MEMCACHED_HOST', '127.0.0.1'),
+                    'port' => env('MEMCACHED_PORT', 11211),
+                    'weight' => 100,
+                ],
+            ],
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => 'cache',
+        ],
+
+        'dynamodb' => [
+            'driver' => 'dynamodb',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+            'table' => env('DYNAMODB_CACHE_TABLE', 'cache'),
+            'endpoint' => env('DYNAMODB_ENDPOINT'),
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Key Prefix
+    |--------------------------------------------------------------------------
+    |
+    | When utilizing a RAM based store such as APC or Memcached, there might
+    | be other applications utilizing the same cache. So, we'll specify a
+    | value to get prefixed to all our keys so we can avoid collisions.
+    |
+    */
+
+    'prefix' => env('CACHE_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_cache'),
+
+];
diff --git a/config/cors.php b/config/cors.php
new file mode 100644
index 0000000..558369d
--- /dev/null
+++ b/config/cors.php
@@ -0,0 +1,34 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cross-Origin Resource Sharing (CORS) Configuration
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure your settings for cross-origin resource sharing
+    | or "CORS". This determines what cross-origin operations may execute
+    | in web browsers. You are free to adjust these settings as needed.
+    |
+    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
+    |
+    */
+
+    'paths' => ['api/*'],
+
+    'allowed_methods' => ['*'],
+
+    'allowed_origins' => ['*'],
+
+    'allowed_origins_patterns' => [],
+
+    'allowed_headers' => ['*'],
+
+    'exposed_headers' => [],
+
+    'max_age' => 0,
+
+    'supports_credentials' => false,
+
+];
diff --git a/config/database.php b/config/database.php
new file mode 100644
index 0000000..537186f
--- /dev/null
+++ b/config/database.php
@@ -0,0 +1,167 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Database Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which of the database connections below you wish
+    | to use as your default connection for all database work. Of course
+    | you may use many connections at once using the Database library.
+    |
+    */
+
+    'default' => env('DB_CONNECTION', 'mysql'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Database Connections
+    |--------------------------------------------------------------------------
+    |
+    | Here are each of the database connections setup for your application.
+    | Of course, examples of configuring each database platform that is
+    | supported by Laravel is shown below to make development simple.
+    |
+    |
+    | All database work in Laravel is done through the PHP PDO facilities
+    | so make sure you have the driver for your particular database of
+    | choice installed on your machine before you begin development.
+    |
+    */
+
+    'connections' => [
+
+        'sqlite' => [
+            'driver' => 'sqlite',
+            'url' => env('DATABASE_URL'),
+            'database' => env('DB_DATABASE', database_path('database.sqlite')),
+            'prefix' => '',
+            'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
+        ],
+
+        'mysql' => [
+            'driver' => 'mysql',
+            'url' => env('DATABASE_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'forge'),
+            'username' => env('DB_USERNAME', 'forge'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => 'utf8mb4',
+            'collation' => 'utf8mb4_unicode_ci',
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => true,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
+        'mysqlvmail' => [
+            'driver' => 'mysql',
+            'url' => env('DATABASE_VMAIL_URL'),
+            'host' => env('DB_HOST_VMAIL', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'forge'),
+            'username' => env('DB_USERNAME', 'forge'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => 'utf8mb4',
+            'collation' => 'utf8mb4_unicode_ci',
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => true,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
+        'pgsql' => [
+            'driver' => 'pgsql',
+            'url' => env('DATABASE_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '5432'),
+            'database' => env('DB_DATABASE', 'forge'),
+            'username' => env('DB_USERNAME', 'forge'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => 'utf8',
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'schema' => 'public',
+            'sslmode' => 'prefer',
+        ],
+
+        'sqlsrv' => [
+            'driver' => 'sqlsrv',
+            'url' => env('DATABASE_URL'),
+            'host' => env('DB_HOST', 'localhost'),
+            'port' => env('DB_PORT', '1433'),
+            'database' => env('DB_DATABASE', 'forge'),
+            'username' => env('DB_USERNAME', 'forge'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => 'utf8',
+            'prefix' => '',
+            'prefix_indexes' => true,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Migration Repository Table
+    |--------------------------------------------------------------------------
+    |
+    | This table keeps track of all the migrations that have already run for
+    | your application. Using this information, we can determine which of
+    | the migrations on disk haven't actually been run in the database.
+    |
+    */
+
+    'migrations' => 'migrations',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Redis Databases
+    |--------------------------------------------------------------------------
+    |
+    | Redis is an open source, fast, and advanced key-value store that also
+    | provides a richer body of commands than a typical key-value system
+    | such as APC or Memcached. Laravel makes it easy to dig right in.
+    |
+    */
+
+    'redis' => [
+
+        'client' => env('REDIS_CLIENT', 'predis'),
+
+        'options' => [
+            'cluster' => env('REDIS_CLUSTER', 'redis'),
+            'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
+        ],
+
+        'default' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'password' => env('REDIS_PASSWORD', null),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_DB', '0'),
+        ],
+
+        'cache' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'password' => env('REDIS_PASSWORD', null),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_CACHE_DB', '1'),
+        ],
+
+    ],
+
+];
diff --git a/config/filesystems.php b/config/filesystems.php
new file mode 100644
index 0000000..2ea896a
--- /dev/null
+++ b/config/filesystems.php
@@ -0,0 +1,92 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Filesystem Disk
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default filesystem disk that should be used
+    | by the framework. The "local" disk, as well as a variety of cloud
+    | based disks are available to your application. Just store away!
+    |
+    */
+
+    'default' => env('FILESYSTEM_DRIVER', 'local'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Cloud Filesystem Disk
+    |--------------------------------------------------------------------------
+    |
+    | Many applications store files both locally and in the cloud. For this
+    | reason, you may specify a default "cloud" driver here. This driver
+    | will be bound as the Cloud disk implementation in the container.
+    |
+    */
+
+    'cloud' => env('FILESYSTEM_CLOUD', 's3'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Filesystem Disks
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure as many filesystem "disks" as you wish, and you
+    | may even configure multiple disks of the same driver. Defaults have
+    | been setup for each driver as an example of the required options.
+    |
+    | Supported Drivers: "local", "ftp", "sftp", "s3"
+    |
+    */
+
+    'disks' => [
+
+        'local' => [
+            'driver' => 'local',
+            'root' => storage_path('app'),
+        ],
+
+        'public' => [
+            'driver' => 'local',
+            'root' => storage_path('app/public'),
+            'url' => env('APP_URL').'/storage',
+            'visibility' => 'public',
+        ],
+
+        'private' => [
+            'driver' => 'local',
+            'root' => storage_path('app/private'),
+            'url' => env('APP_URL').'/storage',
+            'visibility' => 'private',
+        ],
+
+        's3' => [
+            'driver' => 's3',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION'),
+            'bucket' => env('AWS_BUCKET'),
+            'url' => env('AWS_URL'),
+            'endpoint' => env('AWS_ENDPOINT'),
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Symbolic Links
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the symbolic links that will be created when the
+    | `storage:link` Artisan command is executed. The array keys should be
+    | the locations of the links and the values should be their targets.
+    |
+    */
+
+    'links' => [
+        public_path('storage') => storage_path('app/public'),
+    ],
+
+];
diff --git a/config/hashing.php b/config/hashing.php
new file mode 100644
index 0000000..8425770
--- /dev/null
+++ b/config/hashing.php
@@ -0,0 +1,52 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Hash Driver
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default hash driver that will be used to hash
+    | passwords for your application. By default, the bcrypt algorithm is
+    | used; however, you remain free to modify this option if you wish.
+    |
+    | Supported: "bcrypt", "argon", "argon2id"
+    |
+    */
+
+    'driver' => 'bcrypt',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Bcrypt Options
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the configuration options that should be used when
+    | passwords are hashed using the Bcrypt algorithm. This will allow you
+    | to control the amount of time it takes to hash the given password.
+    |
+    */
+
+    'bcrypt' => [
+        'rounds' => env('BCRYPT_ROUNDS', 10),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Argon Options
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the configuration options that should be used when
+    | passwords are hashed using the Argon algorithm. These will allow you
+    | to control the amount of time it takes to hash the given password.
+    |
+    */
+
+    'argon' => [
+        'memory' => 1024,
+        'threads' => 2,
+        'time' => 2,
+    ],
+
+];
diff --git a/config/logging.php b/config/logging.php
new file mode 100644
index 0000000..088c204
--- /dev/null
+++ b/config/logging.php
@@ -0,0 +1,104 @@
+<?php
+
+use Monolog\Handler\NullHandler;
+use Monolog\Handler\StreamHandler;
+use Monolog\Handler\SyslogUdpHandler;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Log Channel
+    |--------------------------------------------------------------------------
+    |
+    | This option defines the default log channel that gets used when writing
+    | messages to the logs. The name specified in this option should match
+    | one of the channels defined in the "channels" configuration array.
+    |
+    */
+
+    'default' => env('LOG_CHANNEL', 'stack'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Log Channels
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the log channels for your application. Out of
+    | the box, Laravel uses the Monolog PHP logging library. This gives
+    | you a variety of powerful log handlers / formatters to utilize.
+    |
+    | Available Drivers: "single", "daily", "slack", "syslog",
+    |                    "errorlog", "monolog",
+    |                    "custom", "stack"
+    |
+    */
+
+    'channels' => [
+        'stack' => [
+            'driver' => 'stack',
+            'channels' => ['single'],
+            'ignore_exceptions' => false,
+        ],
+
+        'single' => [
+            'driver' => 'single',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => 'debug',
+        ],
+
+        'daily' => [
+            'driver' => 'daily',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => 'debug',
+            'days' => 14,
+        ],
+
+        'slack' => [
+            'driver' => 'slack',
+            'url' => env('LOG_SLACK_WEBHOOK_URL'),
+            'username' => 'Laravel Log',
+            'emoji' => ':boom:',
+            'level' => 'critical',
+        ],
+
+        'papertrail' => [
+            'driver' => 'monolog',
+            'level' => 'debug',
+            'handler' => SyslogUdpHandler::class,
+            'handler_with' => [
+                'host' => env('PAPERTRAIL_URL'),
+                'port' => env('PAPERTRAIL_PORT'),
+            ],
+        ],
+
+        'stderr' => [
+            'driver' => 'monolog',
+            'handler' => StreamHandler::class,
+            'formatter' => env('LOG_STDERR_FORMATTER'),
+            'with' => [
+                'stream' => 'php://stderr',
+            ],
+        ],
+
+        'syslog' => [
+            'driver' => 'syslog',
+            'level' => 'debug',
+        ],
+
+        'errorlog' => [
+            'driver' => 'errorlog',
+            'level' => 'debug',
+        ],
+
+        'null' => [
+            'driver' => 'monolog',
+            'handler' => NullHandler::class,
+        ],
+
+        'emergency' => [
+            'path' => storage_path('logs/laravel.log'),
+        ],
+    ],
+
+];
diff --git a/config/mail.php b/config/mail.php
new file mode 100644
index 0000000..c1894fd
--- /dev/null
+++ b/config/mail.php
@@ -0,0 +1,119 @@
+<?php
+
+return [
+
+  /*
+  |--------------------------------------------------------------------------
+  | Default Mailer
+  |--------------------------------------------------------------------------
+  |
+  | This option controls the default mailer that is used to send any email
+  | messages sent by your application. Alternative mailers may be setup
+  | and used as needed; however, this mailer will be used by default.
+  |
+  */
+
+  'default' => env('MAIL_MAILER', 'smtp'),
+
+  /*
+  |--------------------------------------------------------------------------
+  | Mailer Configurations
+  |--------------------------------------------------------------------------
+  |
+  | Here you may configure all of the mailers used by your application plus
+  | their respective settings. Several examples have been configured for
+  | you and you are free to add your own as your application requires.
+  |
+  | Laravel supports a variety of mail "transport" drivers to be used while
+  | sending an e-mail. You will specify which one you are using for your
+  | mailers below. You are free to add additional mailers as required.
+  |
+  | Supported: "smtp", "sendmail", "mailgun", "ses",
+  |            "postmark", "log", "array"
+  |
+  */
+
+  'mailers' => [
+    'smtp' => [
+      'transport' => 'smtp',
+      'host' => env('MAIL_HOST', 'smtp.mailgun.org'),
+      'port' => env('MAIL_PORT', 587),
+      'encryption' => env('MAIL_ENCRYPTION', 'tls'),
+      'fromname' => env('MAIL_OWNER_NAME'),
+      'username' => env('MAIL_USERNAME'),
+      'password' => env('MAIL_PASSWORD'),
+      'noreplyfrom' => env('MAIL_FROM_NAME'),
+      'noreplyuser' => env('MAIL_NOREPLY_USER'),
+      'noreplypass' => env('MAIL_NOREPLY_PASS'),
+      'sendmail' => '/usr/sbin/sendmail -bs',
+      'timeout' => null,
+      'auth_mode' => null,
+    ],
+
+    'ses' => [
+      'transport' => 'ses',
+    ],
+
+    'mailgun' => [
+      'transport' => 'mailgun',
+    ],
+
+    'postmark' => [
+      'transport' => 'postmark',
+    ],
+
+    'sendmail' => [
+      'transport' => 'sendmail',
+      'path' => '/usr/sbin/sendmail -bs',
+    ],
+
+    'log' => [
+      'transport' => 'log',
+      'channel' => env('MAIL_LOG_CHANNEL'),
+    ],
+
+    'array' => [
+      'transport' => 'array',
+    ],
+  ],
+
+  /*
+  |--------------------------------------------------------------------------
+  | Global "From" Address
+  |--------------------------------------------------------------------------
+  |
+  | You may wish for all e-mails sent by your application to be sent from
+  | the same address. Here, you may specify a name and address that is
+  | used globally for all e-mails that are sent by your application.
+  |
+  */
+
+  'from' => [
+    'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
+    'name' => env('MAIL_FROM_NAME', 'Example'),
+  ],
+  'owner' => [
+      'address' => env('MAIL_OWNER_ADDRESS', 'hello@example.com'),
+      'name' => env('MAIL_OWNER_NAME', 'Example'),
+  ],
+
+  /*
+  |--------------------------------------------------------------------------
+  | Markdown Mail Settings
+  |--------------------------------------------------------------------------
+  |
+  | If you are using Markdown based email rendering, you may configure your
+  | theme and component paths here, allowing you to customize the design
+  | of the emails. Or, you may simply stick with the Laravel defaults!
+  |
+  */
+
+  'markdown' => [
+    'theme' => 'default',
+
+    'paths' => [
+      resource_path('views/vendor/mail'),
+    ],
+  ],
+
+];
diff --git a/config/queue.php b/config/queue.php
new file mode 100644
index 0000000..00b76d6
--- /dev/null
+++ b/config/queue.php
@@ -0,0 +1,89 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Queue Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Laravel's queue API supports an assortment of back-ends via a single
+    | API, giving you convenient access to each back-end using the same
+    | syntax for every one. Here you may define a default connection.
+    |
+    */
+
+    'default' => env('QUEUE_CONNECTION', 'sync'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Queue Connections
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the connection information for each server that
+    | is used by your application. A default configuration has been added
+    | for each back-end shipped with Laravel. You are free to add more.
+    |
+    | Drivers: "sync", "database", "beanstalkd", "sqs", "redis", "null"
+    |
+    */
+
+    'connections' => [
+
+        'sync' => [
+            'driver' => 'sync',
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'table' => 'jobs',
+            'queue' => 'default',
+            'retry_after' => 90,
+        ],
+
+        'beanstalkd' => [
+            'driver' => 'beanstalkd',
+            'host' => 'localhost',
+            'queue' => 'default',
+            'retry_after' => 90,
+            'block_for' => 0,
+        ],
+
+        'sqs' => [
+            'driver' => 'sqs',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'),
+            'queue' => env('SQS_QUEUE', 'your-queue-name'),
+            'suffix' => env('SQS_SUFFIX'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => 'default',
+            'queue' => env('REDIS_QUEUE', 'default'),
+            'retry_after' => 90,
+            'block_for' => null,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Failed Queue Jobs
+    |--------------------------------------------------------------------------
+    |
+    | These options configure the behavior of failed queue job logging so you
+    | can control which database and table are used to store the jobs that
+    | have failed. You may change them to any database / table you wish.
+    |
+    */
+
+    'failed' => [
+        'driver' => env('QUEUE_FAILED_DRIVER', 'database'),
+        'database' => env('DB_CONNECTION', 'mysql'),
+        'table' => 'failed_jobs',
+    ],
+
+];
diff --git a/config/services.php b/config/services.php
new file mode 100644
index 0000000..2a1d616
--- /dev/null
+++ b/config/services.php
@@ -0,0 +1,33 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Third Party Services
+    |--------------------------------------------------------------------------
+    |
+    | This file is for storing the credentials for third party services such
+    | as Mailgun, Postmark, AWS and more. This file provides the de facto
+    | location for this type of information, allowing packages to have
+    | a conventional file to locate the various service credentials.
+    |
+    */
+
+    'mailgun' => [
+        'domain' => env('MAILGUN_DOMAIN'),
+        'secret' => env('MAILGUN_SECRET'),
+        'endpoint' => env('MAILGUN_ENDPOINT', 'api.mailgun.net'),
+    ],
+
+    'postmark' => [
+        'token' => env('POSTMARK_TOKEN'),
+    ],
+
+    'ses' => [
+        'key' => env('AWS_ACCESS_KEY_ID'),
+        'secret' => env('AWS_SECRET_ACCESS_KEY'),
+        'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+    ],
+
+];
diff --git a/config/session.php b/config/session.php
new file mode 100644
index 0000000..4e0f66c
--- /dev/null
+++ b/config/session.php
@@ -0,0 +1,201 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Session Driver
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default session "driver" that will be used on
+    | requests. By default, we will use the lightweight native driver but
+    | you may specify any of the other wonderful drivers provided here.
+    |
+    | Supported: "file", "cookie", "database", "apc",
+    |            "memcached", "redis", "dynamodb", "array"
+    |
+    */
+
+    'driver' => env('SESSION_DRIVER', 'file'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Lifetime
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the number of minutes that you wish the session
+    | to be allowed to remain idle before it expires. If you want them
+    | to immediately expire on the browser closing, set that option.
+    |
+    */
+
+    'lifetime' => env('SESSION_LIFETIME', 120),
+
+    'expire_on_close' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Encryption
+    |--------------------------------------------------------------------------
+    |
+    | This option allows you to easily specify that all of your session data
+    | should be encrypted before it is stored. All encryption will be run
+    | automatically by Laravel and you can use the Session like normal.
+    |
+    */
+
+    'encrypt' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session File Location
+    |--------------------------------------------------------------------------
+    |
+    | When using the native session driver, we need a location where session
+    | files may be stored. A default has been set for you but a different
+    | location may be specified. This is only needed for file sessions.
+    |
+    */
+
+    'files' => storage_path('framework/sessions'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Connection
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" or "redis" session drivers, you may specify a
+    | connection that should be used to manage these sessions. This should
+    | correspond to a connection in your database configuration options.
+    |
+    */
+
+    'connection' => env('SESSION_CONNECTION', null),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Table
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" session driver, you may specify the table we
+    | should use to manage the sessions. Of course, a sensible default is
+    | provided for you; however, you are free to change this as needed.
+    |
+    */
+
+    'table' => 'sessions',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | While using one of the framework's cache driven session backends you may
+    | list a cache store that should be used for these sessions. This value
+    | must match with one of the application's configured cache "stores".
+    |
+    | Affects: "apc", "dynamodb", "memcached", "redis"
+    |
+    */
+
+    'store' => env('SESSION_STORE', null),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Sweeping Lottery
+    |--------------------------------------------------------------------------
+    |
+    | Some session drivers must manually sweep their storage location to get
+    | rid of old sessions from storage. Here are the chances that it will
+    | happen on a given request. By default, the odds are 2 out of 100.
+    |
+    */
+
+    'lottery' => [2, 100],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may change the name of the cookie used to identify a session
+    | instance by ID. The name specified here will get used every time a
+    | new session cookie is created by the framework for every driver.
+    |
+    */
+
+    'cookie' => env(
+        'SESSION_COOKIE',
+        Str::slug(env('APP_NAME', 'laravel'), '_').'_session'
+    ),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Path
+    |--------------------------------------------------------------------------
+    |
+    | The session cookie path determines the path for which the cookie will
+    | be regarded as available. Typically, this will be the root path of
+    | your application but you are free to change this when necessary.
+    |
+    */
+
+    'path' => '/',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Domain
+    |--------------------------------------------------------------------------
+    |
+    | Here you may change the domain of the cookie used to identify a session
+    | in your application. This will determine which domains the cookie is
+    | available to in your application. A sensible default has been set.
+    |
+    */
+
+    'domain' => env('SESSION_DOMAIN', null),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTPS Only Cookies
+    |--------------------------------------------------------------------------
+    |
+    | By setting this option to true, session cookies will only be sent back
+    | to the server if the browser has a HTTPS connection. This will keep
+    | the cookie from being sent to you if it can not be done securely.
+    |
+    */
+
+    'secure' => env('SESSION_SECURE_COOKIE'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTP Access Only
+    |--------------------------------------------------------------------------
+    |
+    | Setting this value to true will prevent JavaScript from accessing the
+    | value of the cookie and the cookie will only be accessible through
+    | the HTTP protocol. You are free to modify this option if needed.
+    |
+    */
+
+    'http_only' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Same-Site Cookies
+    |--------------------------------------------------------------------------
+    |
+    | This option determines how your cookies behave when cross-site requests
+    | take place, and can be used to mitigate CSRF attacks. By default, we
+    | will set this value to "lax" since this is a secure default value.
+    |
+    | Supported: "lax", "strict", "none", null
+    |
+    */
+
+    'same_site' => 'lax',
+
+];
diff --git a/config/view.php b/config/view.php
new file mode 100644
index 0000000..22b8a18
--- /dev/null
+++ b/config/view.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | View Storage Paths
+    |--------------------------------------------------------------------------
+    |
+    | Most templating systems load templates from disk. Here you may specify
+    | an array of paths that should be checked for your views. Of course
+    | the usual Laravel view path has already been registered for you.
+    |
+    */
+
+    'paths' => [
+        resource_path('views'),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Compiled View Path
+    |--------------------------------------------------------------------------
+    |
+    | This option determines where all the compiled Blade templates will be
+    | stored for your application. Typically, this is within the storage
+    | directory. However, as usual, you are free to change this value.
+    |
+    */
+
+    'compiled' => env(
+        'VIEW_COMPILED_PATH',
+        realpath(storage_path('framework/views'))
+    ),
+
+];
diff --git a/database/.gitignore b/database/.gitignore
new file mode 100644
index 0000000..97fc976
--- /dev/null
+++ b/database/.gitignore
@@ -0,0 +1,2 @@
+*.sqlite
+*.sqlite-journal
diff --git a/database/factories/UserFactory.php b/database/factories/UserFactory.php
new file mode 100644
index 0000000..741edea
--- /dev/null
+++ b/database/factories/UserFactory.php
@@ -0,0 +1,28 @@
+<?php
+
+/** @var \Illuminate\Database\Eloquent\Factory $factory */
+
+use App\User;
+use Faker\Generator as Faker;
+use Illuminate\Support\Str;
+
+/*
+|--------------------------------------------------------------------------
+| Model Factories
+|--------------------------------------------------------------------------
+|
+| This directory should contain each of the model factory definitions for
+| your application. Factories provide a convenient way to generate new
+| model instances for testing / seeding your application's database.
+|
+*/
+
+$factory->define(User::class, function (Faker $faker) {
+    return [
+        'name' => $faker->name,
+        'email' => $faker->unique()->safeEmail,
+        'email_verified_at' => now(),
+        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
+        'remember_token' => Str::random(10),
+    ];
+});
diff --git a/database/migrations/2014_10_12_000000_create_users_table.php b/database/migrations/2014_10_12_000000_create_users_table.php
new file mode 100644
index 0000000..621a24e
--- /dev/null
+++ b/database/migrations/2014_10_12_000000_create_users_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateUsersTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('users', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('email')->unique();
+            $table->timestamp('email_verified_at')->nullable();
+            $table->string('password');
+            $table->rememberToken();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('users');
+    }
+}
diff --git a/database/migrations/2019_08_19_000000_create_failed_jobs_table.php b/database/migrations/2019_08_19_000000_create_failed_jobs_table.php
new file mode 100644
index 0000000..9bddee3
--- /dev/null
+++ b/database/migrations/2019_08_19_000000_create_failed_jobs_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateFailedJobsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('failed_jobs', function (Blueprint $table) {
+            $table->id();
+            $table->text('connection');
+            $table->text('queue');
+            $table->longText('payload');
+            $table->longText('exception');
+            $table->timestamp('failed_at')->useCurrent();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('failed_jobs');
+    }
+}
diff --git a/database/seeds/DatabaseSeeder.php b/database/seeds/DatabaseSeeder.php
new file mode 100644
index 0000000..237dfc5
--- /dev/null
+++ b/database/seeds/DatabaseSeeder.php
@@ -0,0 +1,16 @@
+<?php
+
+use Illuminate\Database\Seeder;
+
+class DatabaseSeeder extends Seeder
+{
+    /**
+     * Seed the application's database.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        // $this->call(UserSeeder::class);
+    }
+}
diff --git a/phpunit.xml b/phpunit.xml
new file mode 100644
index 0000000..964ff0c
--- /dev/null
+++ b/phpunit.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="./vendor/phpunit/phpunit/phpunit.xsd"
+         bootstrap="vendor/autoload.php"
+         colors="true"
+>
+    <testsuites>
+        <testsuite name="Unit">
+            <directory suffix="Test.php">./tests/Unit</directory>
+        </testsuite>
+        <testsuite name="Feature">
+            <directory suffix="Test.php">./tests/Feature</directory>
+        </testsuite>
+    </testsuites>
+    <filter>
+        <whitelist processUncoveredFilesFromWhitelist="true">
+            <directory suffix=".php">./app</directory>
+        </whitelist>
+    </filter>
+    <php>
+        <server name="APP_ENV" value="testing"/>
+        <server name="BCRYPT_ROUNDS" value="4"/>
+        <server name="CACHE_DRIVER" value="array"/>
+        <server name="DB_CONNECTION" value="sqlite"/>
+        <server name="DB_DATABASE" value=":memory:"/>
+        <server name="MAIL_MAILER" value="array"/>
+        <server name="QUEUE_CONNECTION" value="sync"/>
+        <server name="SESSION_DRIVER" value="array"/>
+        <server name="TELESCOPE_ENABLED" value="false"/>
+    </php>
+</phpunit>
diff --git a/public/.htaccess b/public/.htaccess
new file mode 100644
index 0000000..3aec5e2
--- /dev/null
+++ b/public/.htaccess
@@ -0,0 +1,21 @@
+<IfModule mod_rewrite.c>
+    <IfModule mod_negotiation.c>
+        Options -MultiViews -Indexes
+    </IfModule>
+
+    RewriteEngine On
+
+    # Handle Authorization Header
+    RewriteCond %{HTTP:Authorization} .
+    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
+
+    # Redirect Trailing Slashes If Not A Folder...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_URI} (.+)/$
+    RewriteRule ^ %1 [L,R=301]
+
+    # Send Requests To Front Controller...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule ^ index.php [L]
+</IfModule>
diff --git a/public/css/account.css b/public/css/account.css
new file mode 100644
index 0000000..2391fa6
--- /dev/null
+++ b/public/css/account.css
@@ -0,0 +1,1645 @@
+#custom-css #typeahead-container input {
+  border-color: var(--mainForegroundColor) !important;
+}
+#typeahead-container input {
+  border: 1px solid var(--mainBackgroundColor)!important;
+  box-shadow: #0000001a 0 1px 20px;
+  flex-grow: 1;
+  transition: box-shadow .3s ease,width .2s ease;
+}
+#search-video {
+  padding-inline-end: 40px;
+}
+#search-video {
+  padding-inline-start: 10px;
+}
+#search-video {
+  padding: 0 15px;
+  display: inline-block;
+  height: 30px;
+  width: 375px;
+  background-color: var(--inputBackgroundColor);
+  border-radius: 3px;
+  font-size: 14px;
+}
+#custom-css input, #custom-css textarea {
+  background: var(--inputColor) !important;
+  color: var(--mainForegroundColor) !important;
+}
+input, textarea {
+  outline: none;
+}
+button, input {
+  overflow: visible;
+}
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-family: inherit;
+  line-height: inherit;
+}
+*, :after, :before {
+  box-sizing: border-box;
+}
+input {
+  text-rendering: auto;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0px;
+  text-shadow: none;
+  text-align: start;
+  appearance: textfield;
+  cursor: text;
+  font: 400 13.3333px Arial;
+}
+.header-right {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.wrapper {
+  margin-inline-end: 5px;
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  min-width: 35px;
+  min-height: 35px;
+  position: relative;
+  margin-bottom: 5px;
+}
+
+.wrapper:not(.generic-channel) .channel {
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  min-width: 35px;
+  min-height: 35px;
+}
+
+.wrapper:not(.generic-channel) .account {
+  height: 60%;
+  width: 60%;
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  background-color: #0000;
+}
+
+.avatar.account {
+  object-fit: cover;
+  border-radius: 50%;
+}
+.avatar-and-textarea {
+  display: flex;
+  margin-bottom: 10px;
+}
+.avatar-and-textarea my-actor-avatar {
+  margin-inline-end: 10px;
+}
+.avatar-34 {
+  --avatarSize: 34px !important;
+}
+.avatar {
+  --avatarSize: 100%;
+  --initialFontSize: 22px;
+  width: var(--avatarSize);
+  height: var(--avatarSize);
+  min-width: var(--avatarSize);
+  min-height: var(--avatarSize);
+}
+.video-info-channel {
+  font-weight: 600;
+  font-size: 15px;
+}
+img, svg {
+  vertical-align: middle;
+}
+img {
+  border-style: none;
+}
+.dropdown-toggle {
+  white-space: nowrap;
+}
+
+
+element.style {
+  overflow: hidden;
+  height: 32px;
+}
+#custom-css input, #custom-css textarea {
+  background: var(--inputColor) !important;
+  color: var(--mainForegroundColor) !important;
+  border: 1px solid var(--mainBackgroundColor);
+}
+
+.avatar-and-textarea textarea {
+  padding-inline-end: 45px!important;
+  display: inline-block;
+  width: 100%;
+  border-radius: 3px;
+  background-color: var(--textareaBackgroundColor);
+  padding: 5px 15px;
+  font-size: 15px;
+  min-height: calc(60px - 15px * 2);
+}
+input, textarea {
+  outline: none;
+}
+textarea {
+  resize: vertical;
+}
+
+.video-info-channel-left .video-info-channel-left-links {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  line-height: 1.37;
+}
+.ml-1 {
+  margin-inline-start: .25rem;
+}
+.ml-1, .mx-1 {
+  margin-left: .25rem!important;
+}
+.video-info-channel-left {
+  flex-grow: 1;
+}
+my-action-buttons {
+  margin-inline-end: 0;
+}
+my-action-buttons {
+  margin-inline-start: auto;
+}
+my-action-buttons {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 10px;
+  align-items: start;
+  width: -webkit-max-content;
+  width: max-content;
+}
+@media screen and (max-width: 1600px) {
+  .main-col {
+    --horizontalMarginContent: 15px;
+    --videosHorizontalMarginContent: 30px;
+  }
+}
+.video-info-description {
+  margin-inline-end: 0;
+}
+
+.video-info-description {
+  margin-inline-start: 44px;
+}
+.video-info-description .video-info-description-html {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+.video-info-description {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 15px;
+}
+my-video-attributes {
+  margin-inline-start: 44px;
+  display: block;
+  margin-bottom: 15px;
+}
+.attribute {
+  font-size: 13px;
+  display: block;
+  margin-bottom: 12px;
+}
+.attribute-label {
+  padding-inline-end: 5px;
+}
+.attribute-label {
+  min-width: 142px;
+  display: inline-block;
+  color: var(--greyForegroundColor);
+  font-weight: 700;
+}
+.attribute {
+  font-size: 13px;
+  display: block;
+  margin-bottom: 12px;
+}
+
+my-recommended-videos {
+  padding-inline-start: 15px;
+  display: block;
+  min-width: 250px;
+}
+
+.title-page-autoplay {
+  margin-inline-start: auto;
+  display: flex;
+  width: max-content;
+  height: max-content;
+  align-items: center;
+}
+
+.other-videos:not(.display-as-row) my-video-miniature {
+  min-width: 201px;
+  max-width: 201px;
+}
+my-video-miniature {
+  display: block;
+}
+.video-miniature:not(.display-as-row) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 15px;
+  width: 100%;
+}
+.video-miniature:not(.display-as-row) my-video-thumbnail {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding-top: 56.25%;
+}
+.video-miniature:not(.display-as-row) my-video-thumbnail .video-thumbnail {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+.video-thumbnail {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #ececec;
+  transition: filter .2s ease;
+}
+.video-thumbnail-actions-overlay {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  right: 5px;
+  top: 5px;
+  opacity: 0;
+}
+.video-thumbnail-label-overlay.danger {
+  background-color: red;
+}
+.video-thumbnail-label-overlay {
+  position: absolute;
+  padding: 0 5px;
+  left: 5px;
+  top: 5px;
+  font-weight: 700;
+}
+.video-thumbnail-watch-later-overlay, .video-thumbnail-label-overlay, .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay {
+  display: inline-block;
+  background-color: #000000b3;
+  color: #fff;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.1;
+  z-index: 10;
+}
+.video-thumbnail-duration-overlay, .video-thumbnail-live-overlay {
+  position: absolute;
+  padding: 0 3px;
+  right: 5px;
+  bottom: 5px;
+}
+.video-thumbnail .play-overlay, .video-thumbnail .play-overlay .icon {
+  transition: all .2s ease;
+}
+.video-thumbnail .play-overlay {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: inherit;
+  height: inherit;
+  opacity: 0;
+  background-color: #0000004d;
+}
+.video-miniature:not(.display-as-row) .video-bottom {
+  display: flex;
+  width: 100%;
+  min-width: 1px;
+}
+.video-miniature-information {
+  width: calc(100% - 40px);
+}
+
+.video-actions {
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+.video-actions .action-button my-global-icon {
+  margin-inline-end: 0;
+}
+.video-actions .action-button my-global-icon {
+  position: relative;
+  width: 21px;
+  top: -1px;
+}
+my-global-icon {
+  cursor: pointer;
+  width: 100%;
+}
+#custom-css .action-button .count {
+  color: var(--whiteColor);
+}
+.action-button-like .count, .action-button-dislike .count {
+  margin: 0 5px;
+}
+
+.full-width {
+  width: 100%;
+  margin: 0 auto;
+  max-width: none;
+}
+.video-miniature:not(.display-as-row) .video-actions {
+  margin-top: 3px;
+}
+my-actor-avatar {
+  margin-inline-end: 10px;
+  margin-inline-start: 0;
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+.video-miniature:not(.display-as-row) .video-miniature-name {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+.video-miniature-name {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  font-size: 1.1em;
+  line-height: 1.1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 2.2em;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  transition: color .2s;
+  font-weight: 600;
+  color: var(--mainForegroundColor);
+}
+.video-miniature:not(.display-as-row) .video-miniature-created-at-views {
+  display: block;
+}
+.video-miniature-created-at-views {
+  font-size: 13px;
+}
+.video-miniature-account, .video-miniature-channel {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  font-size: 13px;
+  color: var(--greyForegroundColor);
+}
+.video-miniature-created-at-views {
+  font-size: 13px;
+}
+.video-info-privacy, .video-info-blocked .blocked-label, .video-info-nsfw {
+  font-weight: 600;
+}
+
+
+.icon-search {
+  margin-inline-start: -35px;
+}
+.icon-search {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 25px;
+  vertical-align: middle;
+  cursor: pointer;
+  height: 18px;
+  position: absolute;
+  margin-top: 3.5px;
+  right: 10px;
+}
+my-search-typeahead {
+  margin-inline-end: 15px;
+}
+.w-100 {
+  width: 100%!important;
+}
+
+.icon-logo {
+  background-image: url(/client/assets/images/logo.svg?f43d062f4606d20e41cab4363a9d9da456139512);
+}
+
+.peertube-container {
+  padding-bottom: 20px;
+}
+
+.header {
+  background-color: #421a46 !important;
+  height: 50px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: #421a46 !important;
+  z-index: 17500;
+  box-shadow: 0 1px 3px #00000029;
+  display: flex;
+}
+
+.header-right {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  flex: 1;
+}
+
+#custom-css .sub-header-container {
+  background-position: center top;
+  background-size: cover;
+  background-repeat: repeat;
+  background-attachment: fixed;
+}
+
+.sub-header-container {
+  margin-top: 50px;
+  background-color: var(--mainBackgroundColor);
+  width: 100%;
+}
+
+.top-left-block {
+  z-index: 1;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.peertube-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: inherit!important;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  padding: 0 0 0 10px;
+}
+
+.c-hand {
+  cursor: pointer;
+}
+
+a {
+  text-decoration: none;
+  background-color: initial;
+}
+
+menu:focus, menu:hover {
+  overflow-y: auto;
+}
+
+@media not all and (hover: hover) and (pointer: fine) {
+  menu {
+    overflow-y: auto;
+  }
+}
+
+menu {
+  background-color: #421a46 !important;
+  overflow-y: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--menuForegroundColor);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.menu-wrapper {
+  position: fixed;
+  height: calc(100vh - 50px);
+  padding: 0;
+  width: 240px;
+  z-index: 12600;
+}
+
+.menu-block, .footer-block {
+  margin-bottom: 15px;
+}
+
+.footer {
+  width: 240px;
+  padding-bottom: 15px;
+}
+
+menu.is-logged-in .block-title {
+  margin-bottom: 15px;
+}
+.menu-block .block-title, .footer-block .block-title {
+  margin-inline-end: 30px;
+}
+.menu-block .block-title, .footer-block .block-title {
+  margin-inline-start: 26px;
+}
+.menu-block .block-title, .footer-block .block-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.footer-links, .footer-links > div {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.mr-1, .mx-1 {
+  margin-right: .25rem!important;
+}
+
+.menu-block a, .footer-block a {
+  min-height: 40px;
+}
+.menu-link:hover, .menu-link:focus, .menu-link:active {
+  text-decoration: none!important;
+  outline: none!important;
+}
+.menu-link {
+  padding-inline-end: 20px;
+  padding-inline-start: 26px;
+  display: flex;
+  align-items: center;
+  color: var(--menuForegroundColor);
+  font-size: 16px;
+  cursor: pointer;
+  white-space: normal;
+  word-break: break-word;
+  transition: background-color .1s ease-in-out;
+  line-height: 1.2;
+}
+.menu-link my-global-icon .feather, .menu-link my-global-icon .material, .menu-link my-global-icon .misc {
+  color: gray;
+}
+
+.publish-button {
+  margin-inline-end: 25px;
+}
+.publish-button, .publish-button:active, .publish-button:focus {
+  color: #fff;
+  background-color: var(--mainColor);
+}
+.publish-button {
+  padding-inline-end: 17px;
+}
+.publish-button {
+  padding-inline-start: 13px;
+}
+.publish-button {
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  border-radius: 3px!important;
+  text-align: center;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  line-height: normal!important;
+}
+
+.logged-in-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-top: 1px solid var(--greyForegroundColor);
+  line-height: 1.2;
+}
+
+.dropdown {
+  z-index: 12601!important;
+}
+.logged-in-more {
+  margin-inline-start: 13px;
+  flex: 1;
+  border-radius: 25px;
+  transition: all .1s ease-in-out;
+  cursor: pointer;
+  line-height: 1;
+}
+.logged-in-more:hover {
+  background-color: #ffffff26;
+}
+.notification-inbox-popover:hover, .notification-inbox-popover:active, .notification-inbox-link a:hover, .notification-inbox-link a:active {
+  background-color: #ffffff26;
+}
+.menu-link:hover, .menu-link.focus-visible {
+  background-color: #ffffff1a;
+}
+.menu-link:hover, .menu-link:focus, .menu-link:active {
+  text-decoration: none!important;
+  outline: none!important;
+}
+
+.logged-in-more .dropdown-toggle:first-child {
+  display: flex;
+  align-items: center;
+  padding: 5px 7px;
+  border-radius: 25px;
+}
+
+.dropdown, .dropup {
+  z-index: 17000!important;
+}
+.dropdown, .dropleft, .dropright, .dropup {
+  position: relative;
+}
+
+.notification-inbox-popover, .notification-inbox-link {
+  cursor: pointer;
+  position: relative;
+}
+.notification-inbox-popover, .notification-inbox-link a {
+  transition: all .1s ease-in-out;
+  border-radius: 25px;
+  cursor: pointer;
+}
+.notification-inbox-popover {
+  padding: 10px;
+}
+
+.logged-in-menu a {
+  font-size: 14px;
+  width: 100%;
+  min-height: 35px;
+}
+
+.logged-in-menu a my-global-icon {
+  margin-inline-start: 4.5px;
+}
+.logged-in-menu a my-global-icon {
+  width: 13px;
+  height: 13px;
+}
+.menu-link my-global-icon {
+  margin-inline-end: 18px;
+}
+.menu-link my-global-icon {
+  display: flex;
+  width: 22px;
+  height: 22px;
+}
+
+my-actor-avatar {
+  margin-inline-end: 10px;
+}
+
+.logged-in-info {
+  max-width: 105px;
+  flex-grow: 1;
+}
+
+.logged-in-display-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--menuForegroundColor);
+}
+
+.logged-in-username {
+  font-size: 13px;
+  color: #c6c6c6;
+  margin-top: 3px;
+}
+
+.logged-in-display-name, .logged-in-username {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.main-col .sub-menu { background-color: #502c50 !important; }
+.title-page.active { border-bottom-color: #ea81e8 !important; }
+.inner-form-title, .section-label { color: #ea81e8 !important; }
+
+.video-bottom {
+  display: flex;
+  margin-top: 1.5rem;
+}
+
+[tabindex="-1"]:focus:not(:focus-visible) {
+  outline: 0!important;
+}
+.avatar-32 {
+  --avatarSize: 32px;
+}
+.flex-column {
+  flex-direction: column!important;
+}
+.main-row {
+  min-height: calc(100vh - 50px - 30px - 30px);
+}
+@media screen and (max-width: 1600px) {
+  .main-col {
+    --horizontalMarginContent: 15px;
+    --videosHorizontalMarginContent: 30px;
+  }
+}
+.margin-content {
+  margin-inline-end: var(--gridVideosMiniatureMargins)!important;
+  margin-inline-start: var(--gridVideosMiniatureMargins)!important;
+  --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
+}
+.main-col {
+  margin-inline-start: 240px;
+}
+.main-col {
+  width: calc(100% - 240px);
+  outline: none;
+}
+.main-col .margin-content {
+  margin: 0 var(--horizontalMarginContent);
+  flex-grow: 1;
+}
+.channel {
+  max-width: 1200px;
+  background-color: var(--channelBackgroundColor);
+  padding: 30px;
+  margin: 30px 0;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  grid-column-gap: 15px;
+  column-gap: 15px;
+}
+
+.channel-avatar-row {
+  grid-column: 1;
+  grid-row: 1;
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  grid-template-rows: auto 1fr;
+}
+
+.channel-avatar-row my-actor-avatar {
+  margin-inline-end: 15px;
+  display: inline-block;
+  width: 75px;
+  height: 75px;
+  min-width: 75px;
+  min-height: 75px;
+  grid-column: 1;
+  grid-row: 1/3;
+}
+.channel-avatar-row h2 {
+  grid-row: 1;
+  grid-column: 2;
+  font-size: 20px;
+  line-height: 1;
+  font-weight: 700;
+  margin: 0;
+}
+.channel-avatar-row a {
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+  color: var(--mainForegroundColor);
+}
+.channel-avatar-row .actor-counters {
+  margin-inline-start: 15px;
+  color: var(--greyForegroundColor);
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  grid-row: 1;
+  grid-column: 3;
+}
+.actor-counters {
+  color: #bb00bb !important;
+}
+.margin-content {
+  --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
+}
+.channel-avatar-row .description-html {
+  position: relative;
+  overflow: hidden;
+  grid-column: 2/4;
+  grid-row: 2;
+  max-height: 80px;
+  font-size: 16px;
+}
+.button-show-channel {
+  display: none;
+}
+
+.orange-button-inverted, .orange-button-inverted:active, .orange-button-inverted:focus {
+  color: var(--mainColor);
+  background-color: var(--mainBackgroundColor);
+}
+.orange-button-inverted {
+  border: 2px solid var(--mainColor);
+  font-weight: 600;
+}
+.peertube-button-link {
+  padding-inline-end: 17px;
+  padding-inline-start: 13px;
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px!important;
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+}
+.videos {
+  display: flex;
+  grid-column: 1/3;
+  grid-row: 2;
+  margin-top: 30px;
+  position: relative;
+  overflow: hidden;
+}
+.videos my-video-miniature {
+  margin-inline-end: 15px;
+  min-width: 201px;
+  max-width: 201px;
+}
+.video-miniature:not(.display-as-row) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 15px;
+  width: 100%;
+}
+.video-miniature:not(.display-as-row) my-video-thumbnail {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding-top: 56.25%;
+}
+.video-miniature:not(.display-as-row) my-video-thumbnail .video-thumbnail {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+.video-thumbnail {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #ececec;
+  transition: filter .2s ease;
+}
+.video-thumbnail img {
+  width: inherit;
+  height: inherit;
+}
+.video-miniature:not(.display-as-row) .video-bottom {
+  display: flex;
+  width: 100%;
+  min-width: 1px;
+}
+.video-miniature-information {
+  width: calc(100% - 40px);
+}
+.margin-content {
+  --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
+}
+
+.video-miniature:not(.display-as-row) .video-miniature-name {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+.video-miniature-name {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  font-size: 1.1em;
+  line-height: 1.1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 2.2em;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  transition: color .2s;
+  font-weight: 600;
+  color: var(--mainForegroundColor);
+}
+.video-miniature:not(.display-as-row) .video-miniature-created-at-views {
+  display: block;
+}
+.video-miniature-created-at-views {
+  font-size: 13px;
+}
+.miniature-show-channel {
+  height: 100%;
+  position: absolute;
+  right: 0;
+  background: linear-gradient(90deg,transparent 0,var(--channelBackgroundColor) 45px);
+  padding: 47px 15px 0 60px;
+  z-index: 11;
+}
+
+.miniature-show-channel a {
+  color: var(--mainColor);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.avatar.channel {
+  border-radius: 5px;
+}
+
+.account-info {
+  padding-inline-end: var(--gridVideosMiniatureMargins)!important;
+}
+.account-info {
+  padding-inline-start: var(--gridVideosMiniatureMargins)!important;
+}
+.account-info {
+  --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
+  display: grid;
+  grid-template-columns: 1fr -webkit-min-content;
+  grid-template-columns: 1fr min-content;
+  grid-template-rows: auto auto;
+  background-color: var(--submenuBackgroundColor);
+  margin-bottom: 45px;
+  padding-top: var(--myGlobalTopPadding);
+  padding-bottom: var(--myGlobalTopPadding);
+  font-size: var(--myFontSize);
+}
+
+.account-avatar-row .main-avatar {
+  display: inline-block;
+  width: 120px;
+  height: 120px;
+  min-width: 120px;
+  min-height: 120px;
+}
+.section-label {
+  color: var(--mainColor);
+  font-size: 12px;
+  margin-bottom: 15px;
+  font-weight: 700;
+  letter-spacing: 2.5px;
+  margin-bottom: 5px !important;
+}
+.inner-form-title, .section-label {
+  color: #ea81e8 !important;
+}
+.account-avatar-row {
+  display: flex;
+  grid-column: 1;
+  margin-bottom: 30px;
+}
+.account-avatar-row > div {
+  margin-inline-start: var(--myImgMargin);
+}
+.account-avatar-row > div {
+  min-width: 1px;
+}
+svg {
+  width: inherit;
+  height: inherit;
+}
+svg {
+  overflow: hidden;
+}
+
+.title-page-container .title-page.active, .title-page-container .title-page.title-page-single {
+  margin-inline-end: .5rem!important;
+}
+.title-page-container .title-page.active, .title-page-container .title-page.title-page-single {
+  margin-bottom: unset;
+}
+.title-page {
+  margin-top: 0;
+}
+.title-page.active, .title-page.title-page-single, .title-page:active, .title-page:focus, .title-page:hover {
+  opacity: 1;
+}
+.title-page.title-page-single {
+  font-size: 125%;
+}
+
+.title-page {
+  color: var(--mainForegroundColor);
+  display: inline-block;
+  font-weight: 600;
+}
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  line-height: 1.2;
+}
+h2 {
+  margin-block-start: 0.83em;
+  margin-block-end: 0.83em;
+}
+@media screen and (max-width: 1600px) {
+  .main-col {
+    --horizontalMarginContent: 15px;
+    --videosHorizontalMarginContent: 30px;
+  }
+}
+
+#custom-css .dropdown-menu, #custom-css .dropdown-menu .dropdown-item { background-color: #421a46 !important; }
+
+#custom-css .icon.icon-logo {
+  background: url(/img/favicon.jpeg) 0% 0% / cover;
+}
+.peertube-title .icon.icon-logo {
+  margin-inline-end: .5rem;
+  width: 23px;
+  height: 24px;
+}
+.top-left-block .icon {
+  vertical-align: middle;
+  cursor: pointer;
+}
+.owner-description, .icon.icon-logo {
+  display: none !important;
+}
+
+#video-wrapper {
+  background-color: transparent !important;
+  display: flex;
+  justify-content: center;
+  padding-top: 20px !important;
+}
+
+.video-info {
+  flex-grow: 1;
+  min-width: 1px;
+  max-width: 100%;
+}
+
+.video-info-first-row {
+  display: flex;
+}
+
+.video-info-first-row > div:first-child {
+  flex-grow: 1;
+}
+
+.video-info-first-row-bottom {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+}
+.video-info-channel-left .video-info-channel-left-links a:nth-of-type(2) {
+  font-weight: 400;
+  font-size: 90%;
+}
+.video-info-channel a {
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  color: var(--mainForegroundColor);
+}
+.video-info-channel a:hover, .video-info-channel a:focus, .video-info-channel a:active {
+  text-decoration: none!important;
+  outline: none!important;
+}
+.pt-3, .py-3 {
+  padding-top: 1rem!important;
+}
+my-subscribe-button {
+  margin-inline-start: 5px;
+}
+.btn-group-subscribe {
+  padding-inline-end: 17px;
+  padding-inline-start: 13px;
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px!important;
+  text-align: center;
+  cursor: pointer;
+  float: right;
+  padding: 0;
+}
+.action-dropdown, .btn-group, .column-toggle, .dropdown-root, .input-group-prepend {
+  z-index: inherit!important;
+}
+.btn-group, .btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.btn-group-subscribe.subscribe-button .btn, .btn-group-subscribe.subscribe-button .btn:active, .btn-group-subscribe.subscribe-button .btn:focus {
+  color: #fff;
+  background-color: var(--mainColor);
+}
+.btn-group-subscribe.subscribe-button .btn {
+  font-weight: 600;
+}
+.btn-group-subscribe > .btn, .btn-group-subscribe > .dropdown > .dropdown-toggle {
+  font-size: 15px;
+}
+.btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.btn:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.btn-group-vertical>.btn, .btn-group>.btn {
+  position: relative;
+  flex: 1 1 auto;
+}
+[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
+  cursor: pointer;
+}
+.btn-group-sm>.btn, .btn-sm {
+  padding: .25rem .5rem;
+  line-height: 1.5;
+  border-radius: .2rem;
+}
+
+.btn {
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid #0000;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+.video-actions .action-button:not(:first-child), .video-actions .action-dropdown, .video-actions my-video-actions-dropdown {
+  margin-inline-start: 5px;
+}
+.video-actions .action-button.action-button-support {
+  color: var(--supportButtonColor);
+}
+.video-actions .action-button.action-button-support my-global-icon path:first-child {
+  fill: var(--supportButtonHeartColor)!important;
+}
+
+.justify-content-end {
+  justify-content: flex-end!important;
+}
+.d-flex {
+  display: flex!important;
+}
+.position-relative {
+  position: relative!important;
+}
+.d-inline-flex {
+  display: inline-flex!important;
+}
+.border-top {
+  border-top: 1px solid #dee2e6!important;
+}
+form {
+  margin-bottom: 30px;
+}
+#custom-css input, #custom-css textarea {
+  background: var(--inputColor) !important;
+  color: var(--mainForegroundColor) !important;
+  border: 1px solid var(--mainBackgroundColor);
+}
+.avatar-and-textarea textarea {
+  padding-inline-end: 45px!important;
+}
+.avatar-and-textarea .form-group {
+  flex-grow: 1;
+  margin: 0;
+  position: relative;
+}
+
+.video-info-name {
+  margin-inline-end: 30px;
+}
+.video-info-name {
+  word-break: break-word;
+  overflow-wrap: break-word;
+  min-height: 40px;
+  font-size: 27px;
+  font-weight: 600;
+  flex-grow: 1;
+}
+.video-actions .action-button {
+  padding-inline-end: 17px;
+}
+.video-actions .action-button {
+  padding-inline-start: 13px;
+}
+.small, small {
+  font-size: 80%;
+  font-weight: 400;
+}
+.title-page-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 25px;
+  flex-wrap: wrap-reverse;
+}
+
+.video-actions .action-button {
+  border: 0;
+  height: 30px;
+  border-radius: 3px!important;
+  text-align: center;
+  cursor: pointer;
+  align-items: center;
+  line-height: normal!important;
+  font-size: 100%;
+  font-weight: 600;
+  display: inline-block;
+  padding: 0 10px;
+  white-space: nowrap;
+  background-color: transparent!important;
+  color: var(--actionButtonColor);
+  text-transform: uppercase;
+}
+.action-button-like, .action-button-dislike {
+  filter: brightness(120%);
+}
+
+[type=button], [type=reset], [type=submit], button {
+  -webkit-appearance: button;
+}
+
+@media (min-width: 768px) {
+  .d-md-none {
+    display: none!important;
+  }
+}
+
+.title-block my-feed {
+  margin-inline-start: 5px;
+}
+.title-block my-feed {
+  display: inline-block;
+  opacity: 0;
+  transition: ease-in .2s opacity;
+  width: 12px;
+  position: relative;
+  top: -3px;
+}
+.feed {
+  width: 100%;
+}
+
+.flex-direction-column {
+  flex-direction: column;
+}
+.justify-content-between {
+  justify-content: space-between!important;
+}
+
+body {
+  margin: 0;
+  line-height: 1.5;
+  --mainColor: #ea81e8;
+  --mainColorLighter: #d68ad5;
+  --mainColorLightest: #fdd1fc;
+  --mainHoverColor: #fc54f9;
+  --mainBackgroundColor: #301a30;
+  --mainForegroundColor: #fcfcfc;
+  --secondaryColor: #421a46;
+
+  --greyForegroundColor: #585858;
+  --greyBackgroundColor: #e5e5e5;
+
+  --submenuBackgroundColor: #5e3c62;
+  --channelBackgroundColor: #5e3c62;
+
+  --textareaForegroundColor: #000;
+  --textareaBackgroundColor: #fff;
+  --markdownTextareaBackgroundColor: #efefef;
+
+  --actionButtonColor: #ea81e8;
+  --supportButtonBackgroundColor: #971195;
+  --supportButtonColor: var(--actionButtonColor);
+  --supportButtonHeartColor: #ec1818;
+
+  --activatedActionButtonColor: #000;
+  --horizontalMarginContent: 30px;
+  --videosHorizontalMarginContent: 6vw;
+  --mainColWidth: calc(100vw - 240px);
+  --dangerBackgroundColor: #d9534f;
+  --inputColor: #272727;
+  --inputPlaceholderColor: rgba(195,195,195,0.878431);
+  --menuAndHeaderBackgroundColor: #272727;
+  --menuForegroundColor: rgba(195,195,195,0.878431);
+  --menuBackgroundColor: #272727;
+  --whiteColor: #ffffff;
+  --submenuColor: #272727;
+  --embedForegroundColor: #fff;
+  --embedBigPlayBackgroundColor: rgba(0, 0, 0, .8);
+
+  font-family: Source Sans Pro,sans-serif;
+  font-weight: 400;
+  color: var(--mainForegroundColor);
+  background-color: var(--mainBackgroundColor);
+  font-size: 14px;
+  overflow-y: scroll;
+  text-align: start;
+}
+
+
+my-video-comments {
+  display: inline-block;
+  width: 100%;
+  margin-bottom: 20px;
+}
+.border-top {
+  border-top: 1px solid #dee2e6!important;
+}
+#highlighted-comment {
+  margin-bottom: 25px;
+}
+.anchor {
+  position: relative;
+  top: -70px;
+}
+.root {
+  --myGlobalTopPadding: 60px;
+  --myImgMargin: 30px;
+  --myFontSize: 16px;
+  --myGreyFontSize: 16px;
+}
+.root-comment {
+  font-size: 15px;
+  display: flex;
+}
+.root-comment .left {
+  margin-inline-end: 10px;
+}
+.root-comment .left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+my-actor-avatar {
+  display: inline-block;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+}
+.root-comment .left .vertical-border {
+  width: 2px;
+  height: 100%;
+  background-color: #0000000d;
+  margin: 10px calc(1rem + 1px);
+}
+.initial.blue {
+  background-color: #009fd4;
+}
+.initial {
+  background-color: #3c2109;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--initialFontSize);
+}
+.root-comment .right {
+  width: 100%;
+}
+.mb-3, .my-3 {
+  margin-bottom: 1rem!important;
+}
+.mb-3 {
+  margin-bottom: 1rem!important;
+}
+.comment {
+  flex-grow: 1;
+  min-width: 1px;
+}
+.highlighted-comment {
+  display: inline-block;
+  background-color: #f5f5f5;
+  color: #3d3d3d;
+  padding: 0 5px;
+  font-size: 13px;
+  margin-bottom: 5px;
+  font-weight: 600;
+  border-radius: 3px;
+}
+.comment-account-date {
+  display: flex;
+  margin-bottom: 4px;
+}
+.comment-account {
+  word-break: break-all;
+  font-weight: 600;
+  font-size: 90%;
+}
+.comment-date {
+  margin-inline-start: 5px;
+}
+.comment-date {
+  font-size: 90%;
+  color: var(--greyForegroundColor);
+  text-decoration: none;
+}
+.comment-account a {
+  color: var(--mainForegroundColor);
+}
+.comment-account .comment-account-fid {
+  opacity: .6;
+}
+.ml-1 {
+  margin-inline-start: .25rem;
+}
+.ml-1, .mx-1 {
+  margin-left: .25rem!important;
+}
+.comment-html {
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+.comment-html a:not(.linkified-url) {
+  color: var(--mainForegroundColor);
+  font-weight: 600;
+}
+.comment-html p {
+  margin-bottom: .3rem;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+.comment-actions {
+  margin-bottom: 10px;
+  display: flex;
+}
+.comment-actions .dropdown-toggle, .comment-actions .comment-action-reply {
+  margin-inline-end: 10px;
+}
+.comment-actions .dropdown-toggle, .comment-actions .comment-action-reply {
+  color: var(--greyForegroundColor);
+  cursor: pointer;
+}
+.description {
+  grid-column: 1/3;
+  max-width: 1000px;
+  word-break: break-word;
+}
+.buttons {
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-content: flex-start;
+}
+.buttons > a {
+  white-space: nowrap;
+}
+.orange-button, .orange-button:active, .orange-button:focus {
+  color: #fff;
+  background-color: var(--mainColor);
+}
+.peertube-button-link {
+  padding-inline-end: 17px;
+}
+.peertube-button-link {
+  padding-inline-start: 13px;
+}
+.peertube-button-link {
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px!important;
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+}
+.links.on-channel-page {
+  max-width: 1200px;
+}
+.links {
+  margin-inline-end: var(--gridVideosMiniatureMargins)!important;
+  margin-inline-start: var(--gridVideosMiniatureMargins)!important;
+  --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+my-list-overflow {
+  width: 100%;
+}
+.list-overflow-parent {
+  overflow: hidden;
+}
+.has-feedback.has-clear {
+  position: relative;
+}
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+}
+my-global-icon {
+  cursor: pointer;
+  width: 100%;
+}
+.myglobalicon-alt {
+  margin-inline-start: 10px;
+  height: 28px;
+  width: 28px!important;
+  color: var(--mainColor);
+}
+.text-nowrap {
+  white-space: nowrap!important;
+}
+.channel-buttons > *:not(:last-child) {
+  margin-inline-end: 15px;
+}
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  color: #212529;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: initial;
+  border: 1px solid #0000;
+  padding: .375rem .75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: .25rem;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+button, input[type=button], input[type=file]::-webkit-file-upload-button, input[type=reset], input[type=submit] {
+  border-radius: 0;
+}
+button, select {
+  text-transform: none;
+}
+button {
+  background: unset;
+  border-radius: 0;
+  appearance: button;
+  text-rendering: auto;
+  color: -internal-light-dark(black, white);
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0px;
+  text-shadow: none;
+  display: inline-block;
+  text-align: center;
+  align-items: flex-start;
+  cursor: default;
+  background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
+  box-sizing: border-box;
+  margin: 0em;
+  font: 400 13.3333px Arial;
+  padding: 1px 6px;
+  border-width: 2px;
+  border-style: outset;
+  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
+  border-image: initial;
+}
+.btn-group-subscribe:not(.big) {
+  white-space: nowrap;
+}
\ No newline at end of file
diff --git a/public/css/channel.css b/public/css/channel.css
new file mode 100644
index 0000000..036392a
--- /dev/null
+++ b/public/css/channel.css
@@ -0,0 +1,735 @@
+.root {
+  --myGlobalTopPadding: 60px;
+  --myChannelImgMargin: 30px;
+  --myFontSize: 16px;
+  --myGreyChannelFontSize: 16px;
+  --myGreyOwnerFontSize: 14px;
+}
+
+.banner img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+
+.banner {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding-top: 16.66666666%;
+}
+
+.channel-info {
+  padding-inline-end: var(--gridVideosMiniatureMargins)!important;
+  padding-inline-start: var(--gridVideosMiniatureMargins)!important;
+  --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  background-color: var(--channelBackgroundColor);
+  margin-bottom: 45px;
+  padding-top: var(--myGlobalTopPadding);
+  font-size: var(--myFontSize);
+}
+
+@media screen and (max-width: 1400px) {
+  .channel-avatar-row {
+    grid-column: 1/3;
+  }
+}
+
+.channel-avatar-row {
+  display: flex;
+  grid-column: 1;
+  margin-bottom: 30px;
+}
+
+.channel-avatar-row .main-avatar {
+  display: inline-block;
+  width: 120px;
+  height: 120px;
+  min-width: 120px;
+  min-height: 120px;
+}
+
+.channel-avatar-row > div {
+  margin-inline-start: var(--myChannelImgMargin);
+  min-width: 1px;
+}
+
+.section-label {
+  margin-bottom: 5px !important;
+}
+
+.inner-form-title, .section-label {
+  color: #ea81e8 !important;
+}
+
+.channel-avatar-row .actor-info {
+  display: flex;
+}
+
+.actor-info {
+  min-width: 1px;
+  width: 100%;
+}
+
+.channel-avatar-row .actor-info > div:first-child {
+  flex-grow: 1;
+  min-width: 1px;
+}
+
+.channel-avatar-row .actor-display-name {
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.channel-avatar-row h1 {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.channel-avatar-row .actor-handle, .channel-avatar-row .actor-counters {
+  color: var(--greyForegroundColor);
+  font-size: var(--myGreyChannelFontSize);
+}
+
+.channel-avatar-row .actor-handle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.channel-buttons.right {
+    margin-inline-start: 45px;
+}
+
+.channel-buttons {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+@media screen and (max-width: 1100px) {
+  .channel-buttons.bottom {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 30px;
+  }
+}
+
+.channel-buttons.bottom {
+    display: none;
+}
+
+.channel-buttons {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.channel-buttons > *:not(:last-child) {
+  margin-inline-end: 15px;
+}
+
+.orange-button, .orange-button:active, .orange-button:focus {
+  color: #fff;
+  background-color: var(--mainColor);
+}
+
+.peertube-button-link {
+  padding-inline-end: 17px;
+}
+
+.peertube-button-link {
+  padding-inline-start: 13px;
+}
+
+.peertube-button-link {
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px!important;
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.support-button {
+  display: inline-flex;
+  align-items: center;
+  line-height: normal!important;
+}
+
+[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
+  cursor: pointer;
+}
+
+.orange-button-inverted, .orange-button-inverted:active, .orange-button-inverted:focus {
+  color: var(--mainColor);
+  background-color: var(--mainBackgroundColor);
+}
+
+.orange-button-inverted {
+  border: 2px solid var(--mainColor);
+  font-weight: 600;
+}
+
+.peertube-button {
+  padding-inline-end: 17px;
+}
+
+.peertube-button {
+  padding-inline-start: 13px;
+}
+
+.peertube-button {
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px!important;
+  text-align: center;
+  cursor: pointer;
+}
+
+button {
+  background: unset;
+}
+
+button, input[type=button], input[type=file]::-webkit-file-upload-button, input[type=reset], input[type=submit] {
+  border-radius: 0;
+}
+
+[type=button], [type=reset], [type=submit], button {
+  -webkit-appearance: button;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button, input {
+  overflow: visible;
+}
+
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button {
+  border-radius: 0;
+}
+
+.support-button my-global-icon {
+  margin-inline-end: 0;
+  position: relative;
+  width: 21px;
+  top: -1px;
+}
+
+.support-button {
+  display: inline-flex;
+  align-items: center;
+  line-height: normal!important;
+}
+
+.channel-description {
+  grid-column: 1;
+  word-break: break-word;
+  padding-bottom: var(--myGlobalTopPadding);
+}
+
+@media screen and (max-width: 1400px) {
+  .owner-card {
+    margin-inline-start: 60px;
+    grid-row: 2;
+  }
+}
+
+.owner-card {
+    margin-inline-start: 105px;
+}
+
+.owner-card {
+    grid-column: 2;
+    grid-row: 1/3;
+    place-self: end;
+}
+
+@media screen and (max-width: 1100px) {
+  .bottom-owner {
+    display: block;
+    width: 100%;
+    border-bottom: 2px solid rgba(0,0,0,.1);
+    padding: var(--myGlobalTopPadding) 45px;
+    margin-bottom: 60px;
+  }
+}
+
+.bottom-owner {
+  display: none;
+}
+
+.owner-block {
+  background-color: rgba(48, 26, 48, 0.6) !important;
+  padding: 10px !important;
+  width: 300px;
+  font-size: var(--myFontSize);
+}
+
+.section-label {
+  color: var(--mainColor);
+  font-size: 12px;
+  margin-bottom: 15px;
+  font-weight: 700;
+  letter-spacing: 2.5px;
+}
+
+.section-label {
+  margin-bottom: 5px !important;
+}
+
+.inner-form-title, .section-label {
+  color: #ea81e8 !important;
+}
+
+.owner-block .avatar-row {
+  display: flex;
+  margin-bottom: 15px;
+}
+
+my-actor-avatar {
+  display: inline-block;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+  margin-inline-end: 10px;
+  margin-inline-start: 0;
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+
+.owner-block .avatar-row .actor-info {
+  margin-inline-start: 15px;
+}
+
+.owner-block .avatar-row h4 {
+  font-size: 18px;
+  margin: 0;
+}
+
+.actor-info > h4, .actor-info > .actor-handle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.owner-block .avatar-row h4 a {
+  color: var(--mainForegroundColor);
+}
+
+.owner-block .avatar-row .actor-handle {
+  font-size: var(--myGreyOwnerFontSize);
+  color: var(--greyForegroundColor);
+}
+
+.actor-info > h4, .actor-info > .actor-handle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.owner-block .owner-description {
+  position: relative;
+  overflow: hidden;
+  max-height: 140px;
+  word-break: break-word;
+}
+
+.owner-description, .icon.icon-logo {
+  display: none !important;
+}
+
+.view-account.short, .view-account.short:active, .view-account.short:focus {
+  color: var(--mainColor);
+  background-color: var(--mainBackgroundColor);
+}
+
+.view-account.short:focus, .view-account.short.focus-visible {
+  box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+}
+
+.view-account.short:hover, .view-account.short:focus, .view-account.short:active {
+  text-decoration: none!important;
+  outline: none!important;
+}
+
+.view-account.short {
+  padding-inline-end: 17px;
+}
+
+.view-account.short {
+  padding-inline-start: 13px;
+}
+
+.view-account.short {
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px!important;
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+  border: 2px solid var(--mainColor);
+  font-weight: 600;
+  margin-top: 30px;
+}
+
+.view-account.complete {
+  display: none;
+}
+
+.links {
+  margin-inline-end: var(--gridVideosMiniatureMargins)!important;
+  margin-inline-start: var(--gridVideosMiniatureMargins)!important;
+  --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
+}
+
+.margin-content {
+  margin-inline-end: var(--gridVideosMiniatureMargins)!important;
+  margin-inline-start: var(--gridVideosMiniatureMargins)!important;
+  --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
+}
+
+.main-col .margin-content {
+  margin: 0 var(--horizontalMarginContent);
+  flex-grow: 1;
+}
+
+.videos-header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  margin-bottom: 30px;
+}
+
+.videos-header .title-subscription.no-title {
+  margin-top: 10px;
+}
+
+.videos-header .title-subscription {
+  grid-row: 2;
+  font-size: 14px;
+  color: var(--greyForegroundColor);
+}
+
+.videos-header .title, .videos-header .title-subscription {
+  grid-column: 1;
+}
+
+.videos-header my-feed {
+  margin-inline-start: 5px;
+  display: inline-block;
+  width: 16px;
+  color: var(--mainColor);
+  position: relative;
+  top: -2px;
+}
+
+.feed {
+  width: 100%;
+}
+
+@media screen and (min-width: 500px) {
+  .margin-content .videos, .margin-content .playlists {
+    --miniatureMinWidth: 255px;
+    --miniatureMaxWidth: 280px;
+    display: grid;
+    grid-column-gap: 30px;
+    column-gap: 30px;
+    grid-template-columns: repeat(auto-fill,minmax(var(--miniatureMinWidth),1fr));
+  }
+}
+
+
+@media screen and (min-width: 500px) {
+  .margin-content .videos .video-wrapper, .margin-content .videos .playlist-wrapper, .margin-content .playlists .video-wrapper, .margin-content .playlists .playlist-wrapper {
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 500px) {
+  .margin-content .videos .video-wrapper my-video-miniature, .margin-content .videos .video-wrapper my-video-playlist-miniature, .margin-content .videos .playlist-wrapper my-video-miniature, .margin-content .videos .playlist-wrapper my-video-playlist-miniature, .margin-content .playlists .video-wrapper my-video-miniature, .margin-content .playlists .video-wrapper my-video-playlist-miniature, .margin-content .playlists .playlist-wrapper my-video-miniature, .margin-content .playlists .playlist-wrapper my-video-playlist-miniature {
+    display: block;
+    min-width: var(--miniatureMinWidth);
+    max-width: var(--miniatureMaxWidth);
+  }
+}
+
+.video-miniature:not(.display-as-row) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 15px;
+  width: 100%;
+}
+
+.video-miniature:not(.display-as-row) my-video-thumbnail {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding-top: 56.25%;
+}
+
+.video-miniature:not(.display-as-row) my-video-thumbnail .video-thumbnail {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+
+.video-thumbnail {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #ececec;
+  transition: filter .2s ease;
+}
+
+.video-thumbnail img {
+    width: inherit;
+    height: inherit;
+}
+
+.video-thumbnail-label-overlay.warning {
+  background-color: orange;
+}
+
+.video-thumbnail-label-overlay.danger {
+  background-color: red;
+}
+
+.video-thumbnail-label-overlay {
+  position: absolute;
+  padding: 0 5px;
+  left: 5px;
+  top: 5px;
+  font-weight: 700;
+}
+
+.video-thumbnail-watch-later-overlay, .video-thumbnail-label-overlay, .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay {
+  display: inline-block;
+  background-color: #000000b3;
+  color: #fff;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.1;
+  z-index: 10;
+}
+
+.video-thumbnail .play-overlay, .video-thumbnail .play-overlay .icon {
+  transition: all .2s ease;
+}
+
+.video-thumbnail .play-overlay {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: inherit;
+  height: inherit;
+  opacity: 0;
+  background-color: #0000004d;
+}
+
+.video-thumbnail .play-overlay .icon {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%) scale(.5);
+  border-top: 13px solid transparent;
+  border-bottom: 13px solid transparent;
+  border-left: 18px solid rgba(255,255,255,.95);
+}
+
+.progress-bar {
+  height: 3px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  background-color: #0003;
+}
+
+.progress-bar div {
+  height: 100%;
+  background-color: var(--mainColor);
+}
+
+.video-miniature:not(.display-as-row) .video-bottom {
+  display: flex;
+  width: 100%;
+  min-width: 1px;
+}
+
+.video-miniature-information {
+  width: calc(100% - 40px);
+}
+
+.video-miniature:not(.display-as-row) .video-miniature-name {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.video-miniature-name {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  font-size: 1.1em;
+  line-height: 1.1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 2.2em;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  transition: color .2s;
+  font-weight: 600;
+  color: var(--mainForegroundColor);
+}
+
+.video-miniature:not(.display-as-row) .video-miniature-created-at-views {
+  display: block;
+}
+
+.video-miniature-created-at-views {
+  font-size: 13px;
+}
+
+.video-info-privacy, .video-info-blocked .blocked-label, .video-info-nsfw {
+  font-weight: 600;
+}
+
+.miniature:not(.display-as-row) .miniature-thumbnail {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding-top: 56.25%;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.miniature-thumbnail {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #ececec;
+  transition: filter .2s ease;
+}
+
+.miniature:not(.display-as-row) .miniature-thumbnail a {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+
+.miniature-thumbnail img {
+  width: inherit;
+  height: inherit;
+}
+
+.miniature-thumbnail .miniature-playlist-info-overlay {
+  display: inline-block;
+  background-color: #000000b3;
+  color: #fff;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.miniature-thumbnail .play-overlay, .miniature-thumbnail .play-overlay .icon {
+  transition: all .2s ease;
+}
+
+.miniature-thumbnail .play-overlay {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: inherit;
+  height: inherit;
+  opacity: 0;
+  background-color: #0000004d;
+}
+
+.miniature-thumbnail .play-overlay .icon {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%) scale(.5);
+  border-top: 13px solid transparent;
+  border-bottom: 13px solid transparent;
+  border-left: 18px solid rgba(255,255,255,.95);
+}
+
+.miniature-thumbnail .play-overlay, .miniature-thumbnail .play-overlay .icon {
+  transition: all .2s ease;
+}
+
+.miniature:not(.display-as-row) .miniature-name {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.miniature-info .miniature-name {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  font-size: 1.1em;
+  line-height: 1.1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 2.2em;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  transition: color .2s;
+  font-weight: 600;
+  color: var(--mainForegroundColor);
+}
\ No newline at end of file
diff --git a/public/css/common.css b/public/css/common.css
new file mode 100644
index 0000000..85872b2
--- /dev/null
+++ b/public/css/common.css
@@ -0,0 +1,1626 @@
+#custom-css #typeahead-container input {
+  border-color: var(--mainForegroundColor) !important;
+}
+#typeahead-container input {
+  border: 1px solid var(--mainBackgroundColor)!important;
+  box-shadow: #0000001a 0 1px 20px;
+  flex-grow: 1;
+  transition: box-shadow .3s ease,width .2s ease;
+}
+#search-video {
+  padding-inline-end: 40px;
+}
+#search-video {
+  padding-inline-start: 10px;
+}
+#search-video {
+  padding: 0 15px;
+  display: inline-block;
+  height: 30px;
+  width: 375px;
+  background-color: var(--inputBackgroundColor);
+  border-radius: 3px;
+  font-size: 14px;
+}
+#custom-css input, #custom-css textarea {
+  background: var(--inputColor) !important;
+  color: var(--mainForegroundColor) !important;
+}
+input, textarea {
+  outline: none;
+}
+button, input {
+  overflow: visible;
+}
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-family: inherit;
+  line-height: inherit;
+}
+*, :after, :before {
+  box-sizing: border-box;
+}
+input {
+  text-rendering: auto;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0px;
+  text-shadow: none;
+  text-align: start;
+  appearance: textfield;
+  cursor: text;
+  font: 400 13.3333px Arial;
+}
+.header-right {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.wrapper {
+  margin-inline-end: 5px;
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  min-width: 35px;
+  min-height: 35px;
+  position: relative;
+  margin-bottom: 5px;
+}
+
+.wrapper:not(.generic-channel) .channel {
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  min-width: 35px;
+  min-height: 35px;
+}
+
+.wrapper:not(.generic-channel) .account {
+  height: 60%;
+  width: 60%;
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  background-color: #0000;
+}
+
+.avatar.account {
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.avatar-34 {
+  --avatarSize: 34px !important;
+}
+
+.avatar {
+  --avatarSize: 100%;
+  --initialFontSize: 22px;
+  width: var(--avatarSize);
+  height: var(--avatarSize);
+  min-width: var(--avatarSize);
+  min-height: var(--avatarSize);
+}
+
+.video-info-channel {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+img, svg {
+  vertical-align: middle;
+}
+
+img {
+  border-style: none;
+}
+
+.dropdown-toggle {
+  white-space: nowrap;
+}
+
+
+element.style {
+  overflow: hidden;
+  height: 32px;
+}
+#custom-css input, #custom-css textarea {
+  background: var(--inputColor) !important;
+  color: var(--mainForegroundColor) !important;
+  border: 1px solid var(--mainBackgroundColor);
+}
+
+.avatar-and-textarea textarea {
+  padding-inline-end: 45px!important;
+  display: inline-block;
+  width: 100%;
+  border-radius: 3px;
+  background-color: var(--textareaBackgroundColor);
+  padding: 5px 15px;
+  font-size: 15px;
+  min-height: calc(60px - 15px * 2);
+}
+input, textarea {
+  outline: none;
+}
+textarea {
+  resize: vertical;
+}
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.video-info-channel-left .video-info-channel-left-links {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  line-height: 1.37;
+}
+.ml-1 {
+  margin-inline-start: .25rem;
+}
+.ml-1, .mx-1 {
+  margin-left: .25rem!important;
+}
+.video-info-channel-left {
+  flex-grow: 1;
+}
+my-action-buttons {
+  margin-inline-end: 0;
+}
+my-action-buttons {
+  margin-inline-start: auto;
+}
+my-action-buttons {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 10px;
+  align-items: start;
+  width: -webkit-max-content;
+  width: max-content;
+}
+@media screen and (max-width: 1600px) {
+  .main-col {
+    --horizontalMarginContent: 15px;
+    --videosHorizontalMarginContent: 30px;
+  }
+}
+.video-info-description {
+  margin-inline-end: 0;
+}
+
+.video-info-description {
+  margin-inline-start: 44px;
+}
+.video-info-description .video-info-description-html {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+.video-info-description {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 15px;
+}
+my-video-attributes {
+  margin-inline-start: 44px;
+  display: block;
+  margin-bottom: 15px;
+}
+.attribute {
+  font-size: 13px;
+  display: block;
+  margin-bottom: 12px;
+}
+.attribute-label {
+  padding-inline-end: 5px;
+}
+.attribute-label {
+  min-width: 142px;
+  display: inline-block;
+  color: var(--greyForegroundColor);
+  font-weight: 700;
+}
+.attribute {
+  font-size: 13px;
+  display: block;
+  margin-bottom: 12px;
+}
+
+my-recommended-videos {
+  padding-inline-start: 15px;
+  display: block;
+  min-width: 250px;
+}
+
+.title-page-autoplay {
+  margin-inline-start: auto;
+  display: flex;
+  width: max-content;
+  height: max-content;
+  align-items: center;
+}
+.videos {
+  display: flex;
+  grid-column: 1/3;
+  grid-row: 2;
+  margin-top: 30px;
+  position: relative;
+  overflow: hidden;
+}
+.videos my-video-miniature {
+  margin-inline-end: 15px;
+  min-width: 201px;
+  max-width: 201px;
+}
+.video-miniature:not(.display-as-row) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 15px;
+  width: 100%;
+}
+.video-miniature:not(.display-as-row) my-video-thumbnail {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding-top: 56.25%;
+}
+.video-miniature:not(.display-as-row) my-video-thumbnail .video-thumbnail {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+
+.other-videos:not(.display-as-row) my-video-miniature {
+  min-width: 201px;
+  max-width: 201px;
+}
+
+@media screen and (min-width: 500px) {
+  .margin-content .videos, .margin-content .playlists {
+    --miniatureMinWidth: 255px;
+    --miniatureMaxWidth: 280px;
+    display: grid;
+    grid-column-gap: 30px;
+    column-gap: 30px;
+    grid-template-columns: repeat(auto-fill,minmax(var(--miniatureMinWidth),1fr));
+  }
+}
+
+@media screen and (min-width: 500px) {
+  .margin-content .videos .video-wrapper, .margin-content .videos .playlist-wrapper, .margin-content .playlists .video-wrapper, .margin-content .playlists .playlist-wrapper {
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 500px) {
+  .margin-content .videos .video-wrapper my-video-miniature, .margin-content .videos .video-wrapper my-video-playlist-miniature, .margin-content .videos .playlist-wrapper my-video-miniature, .margin-content .videos .playlist-wrapper my-video-playlist-miniature, .margin-content .playlists .video-wrapper my-video-miniature, .margin-content .playlists .video-wrapper my-video-playlist-miniature, .margin-content .playlists .playlist-wrapper my-video-miniature, .margin-content .playlists .playlist-wrapper my-video-playlist-miniature {
+    display: block;
+    min-width: var(--miniatureMinWidth);
+    max-width: var(--miniatureMaxWidth);
+  }
+}
+
+my-video-miniature {
+  display: block;
+}
+.video-miniature:not(.display-as-row) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 15px;
+  width: 100%;
+}
+.video-miniature:not(.display-as-row) my-video-thumbnail {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding-top: 56.25%;
+}
+.video-miniature:not(.display-as-row) my-video-thumbnail .video-thumbnail {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+.video-thumbnail {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #ececec;
+  transition: filter .2s ease;
+}
+.video-thumbnail-actions-overlay {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  right: 5px;
+  top: 5px;
+  opacity: 0;
+}
+.video-thumbnail-label-overlay.danger {
+  background-color: red;
+}
+.video-thumbnail-label-overlay {
+  position: absolute;
+  padding: 0 5px;
+  left: 5px;
+  top: 5px;
+  font-weight: 700;
+}
+.video-thumbnail-watch-later-overlay, .video-thumbnail-label-overlay, .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay {
+  display: inline-block;
+  background-color: #000000b3;
+  color: #fff;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.1;
+  z-index: 10;
+}
+.video-thumbnail-duration-overlay, .video-thumbnail-live-overlay {
+  position: absolute;
+  padding: 0 3px;
+  right: 5px;
+  bottom: 5px;
+}
+.video-thumbnail .play-overlay, .video-thumbnail .play-overlay .icon {
+  transition: all .2s ease;
+}
+.video-thumbnail .play-overlay {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: inherit;
+  height: inherit;
+  opacity: 0;
+  background-color: #0000004d;
+}
+.video-miniature:not(.display-as-row) .video-bottom {
+  display: flex;
+  width: 100%;
+  min-width: 1px;
+}
+.video-miniature-information {
+  width: calc(100% - 40px);
+}
+
+.video-miniature:not(.display-as-row) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 15px;
+  width: 100%;
+}
+
+.video-miniature:not(.display-as-row) my-video-thumbnail {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding-top: 56.25%;
+}
+
+.video-miniature:not(.display-as-row) my-video-thumbnail .video-thumbnail {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+
+.video-miniature:not(.display-as-row) .video-bottom {
+  display: flex;
+  width: 100%;
+  min-width: 1px;
+}
+
+.video-miniature-information {
+  width: calc(100% - 40px);
+}
+
+.video-miniature:not(.display-as-row) .video-miniature-name {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.video-miniature-name {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  font-size: 1.1em;
+  line-height: 1.1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 2.2em;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  transition: color .2s;
+  font-weight: 600;
+  color: var(--mainForegroundColor);
+}
+
+.video-miniature:not(.display-as-row) .video-miniature-created-at-views {
+  display: block;
+}
+
+.video-miniature-created-at-views {
+  font-size: 13px;
+}
+
+.video-info-privacy, .video-info-blocked .blocked-label, .video-info-nsfw {
+  font-weight: 600;
+}
+
+.video-thumbnail {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #ececec;
+  transition: filter .2s ease;
+}
+
+.video-thumbnail img {
+    width: inherit;
+    height: inherit;
+}
+
+.video-thumbnail-label-overlay.warning {
+  background-color: orange;
+}
+
+.video-thumbnail-label-overlay.danger {
+  background-color: red;
+}
+
+.video-thumbnail-label-overlay {
+  position: absolute;
+  padding: 0 5px;
+  left: 5px;
+  top: 5px;
+  font-weight: 700;
+}
+
+.video-thumbnail-watch-later-overlay, .video-thumbnail-label-overlay, .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay {
+  display: inline-block;
+  background-color: #000000b3;
+  color: #fff;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.1;
+  z-index: 10;
+}
+
+.video-thumbnail .play-overlay, .video-thumbnail .play-overlay .icon {
+  transition: all .2s ease;
+}
+
+.video-thumbnail .play-overlay {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: inherit;
+  height: inherit;
+  opacity: 0;
+  background-color: #0000004d;
+}
+
+.video-thumbnail .play-overlay .icon {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%) scale(.5);
+  border-top: 13px solid transparent;
+  border-bottom: 13px solid transparent;
+  border-left: 18px solid rgba(255,255,255,.95);
+}
+
+.video-actions {
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+.video-actions .action-button my-global-icon {
+  margin-inline-end: 0;
+}
+.video-actions .action-button my-global-icon {
+  position: relative;
+  width: 21px;
+  top: -1px;
+}
+my-global-icon {
+  cursor: pointer;
+  width: 100%;
+}
+#custom-css .action-button .count {
+  color: var(--whiteColor);
+}
+.action-button-like .count, .action-button-dislike .count {
+  margin: 0 5px;
+}
+
+.full-width {
+  width: 100%;
+  margin: 0 auto;
+  max-width: none;
+}
+.video-miniature:not(.display-as-row) .video-actions {
+  margin-top: 3px;
+}
+my-actor-avatar {
+  margin-inline-end: 10px;
+  margin-inline-start: 0;
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+.video-miniature:not(.display-as-row) .video-miniature-name {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+.video-miniature-name {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  font-size: 1.1em;
+  line-height: 1.1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 2.2em;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  transition: color .2s;
+  font-weight: 600;
+  color: var(--mainForegroundColor);
+}
+.video-miniature:not(.display-as-row) .video-miniature-created-at-views {
+  display: block;
+}
+.video-miniature-created-at-views {
+  font-size: 13px;
+}
+.video-miniature-account, .video-miniature-channel {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  font-size: 13px;
+  color: var(--greyForegroundColor);
+}
+.video-miniature-created-at-views {
+  font-size: 13px;
+}
+.video-info-privacy, .video-info-blocked .blocked-label, .video-info-nsfw {
+  font-weight: 600;
+}
+
+
+.icon-search {
+  margin-inline-start: -35px;
+}
+.icon-search {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 25px;
+  vertical-align: middle;
+  cursor: pointer;
+  height: 18px;
+  position: absolute;
+  margin-top: 3.5px;
+  right: 10px;
+}
+my-search-typeahead {
+  margin-inline-end: 15px;
+}
+.w-100 {
+  width: 100%!important;
+}
+
+.icon-logo {
+  background-image: url(/client/assets/images/logo.svg?f43d062f4606d20e41cab4363a9d9da456139512);
+}
+
+.peertube-container {
+  padding-bottom: 20px;
+}
+
+.header {
+  background-color: #421a46 !important;
+  height: 50px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: #421a46 !important;
+  z-index: 17500;
+  box-shadow: 0 1px 3px #00000029;
+  display: flex;
+}
+
+.header-right {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  flex: 1;
+}
+
+#custom-css .sub-header-container {
+  background-position: center top;
+  background-size: cover;
+  background-repeat: repeat;
+  background-attachment: fixed;
+}
+
+.sub-header-container {
+  margin-top: 50px;
+  background-color: var(--mainBackgroundColor);
+  width: 100%;
+}
+
+.top-left-block {
+  z-index: 1;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.peertube-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: inherit!important;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  padding: 0 0 0 10px;
+}
+
+.c-hand {
+  cursor: pointer;
+}
+
+a {
+  text-decoration: none;
+  background-color: initial;
+}
+
+menu:focus, menu:hover {
+  overflow-y: auto;
+}
+
+@media not all and (hover: hover) and (pointer: fine) {
+  menu {
+    overflow-y: auto;
+  }
+}
+
+menu {
+  background-color: #421a46 !important;
+  overflow-y: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--menuForegroundColor);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.menu-wrapper {
+  position: fixed;
+  height: calc(100vh - 50px);
+  padding: 0;
+  width: 240px;
+  z-index: 12600;
+}
+
+.menu-block, .footer-block {
+  margin-bottom: 15px;
+}
+
+.footer {
+  width: 240px;
+  padding-bottom: 15px;
+}
+
+menu.is-logged-in .block-title {
+  margin-bottom: 15px;
+}
+.menu-block .block-title, .footer-block .block-title {
+  margin-inline-end: 30px;
+}
+.menu-block .block-title, .footer-block .block-title {
+  margin-inline-start: 26px;
+}
+.menu-block .block-title, .footer-block .block-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.footer-links, .footer-links > div {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.mr-1, .mx-1 {
+  margin-right: .25rem!important;
+}
+
+.menu-block a, .footer-block a {
+  min-height: 40px;
+}
+.menu-link:hover, .menu-link:focus, .menu-link:active {
+  text-decoration: none!important;
+  outline: none!important;
+}
+.menu-link {
+  padding-inline-end: 20px;
+  padding-inline-start: 26px;
+  display: flex;
+  align-items: center;
+  color: var(--menuForegroundColor);
+  font-size: 16px;
+  cursor: pointer;
+  white-space: normal;
+  word-break: break-word;
+  transition: background-color .1s ease-in-out;
+  line-height: 1.2;
+}
+.menu-link my-global-icon .feather, .menu-link my-global-icon .material, .menu-link my-global-icon .misc {
+  color: gray;
+}
+
+.publish-button {
+  margin-inline-end: 25px;
+}
+.publish-button, .publish-button:active, .publish-button:focus {
+  color: #fff;
+  background-color: var(--mainColor);
+}
+.publish-button {
+  padding-inline-end: 17px;
+}
+.publish-button {
+  padding-inline-start: 13px;
+}
+.publish-button {
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  border-radius: 3px!important;
+  text-align: center;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  line-height: normal!important;
+}
+
+.footer-bottom {
+  display: flex;
+  flex-direction: column;
+  padding: 0 26px;
+}
+
+.footer-links a, .footer-links span[role=button] {
+  margin-inline-end: 8px;
+  display: inline-block;
+  text-decoration: none;
+  opacity: .8;
+  white-space: nowrap;
+  font-size: 90%;
+  font-weight: 500;
+  line-height: 1.4rem;
+}
+
+.top-menu {
+  flex-grow: 1;
+  width: 240px;
+}
+
+.login-buttons-block {
+  margin: 30px 25px 35px;
+}
+
+.login-buttons-block > a:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.login-buttons-block > a {
+  display: block;
+  width: 100%;
+}
+
+.orange-button, .orange-button:active, .orange-button:focus {
+  color: #fff;
+  background-color: var(--mainColor);
+}
+
+.peertube-button-link {
+  padding-inline-end: 17px;
+  padding-inline-start: 13px;
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px !important;
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.logged-in-block {
+  margin-bottom: 20px;
+  background-color: #ffffff26;
+}
+
+.create-account-button {
+  color: #fff;
+  background-color: #ffffff40;
+}
+
+.logged-in-block > div:first-child {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+
+.logged-in-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-top: 1px solid var(--greyForegroundColor);
+  line-height: 1.2;
+}
+
+.dropdown {
+  z-index: 12601!important;
+}
+.logged-in-more {
+  margin-inline-start: 13px;
+  flex: 1;
+  border-radius: 25px;
+  transition: all .1s ease-in-out;
+  cursor: pointer;
+  line-height: 1;
+}
+.logged-in-more:hover {
+  background-color: #ffffff26;
+}
+.notification-inbox-popover:hover, .notification-inbox-popover:active, .notification-inbox-link a:hover, .notification-inbox-link a:active {
+  background-color: #ffffff26;
+}
+.menu-link:hover, .menu-link.focus-visible {
+  background-color: #ffffff1a;
+}
+.menu-link:hover, .menu-link:focus, .menu-link:active {
+  text-decoration: none!important;
+  outline: none!important;
+}
+
+.logged-in-more .dropdown-toggle:first-child {
+  display: flex;
+  align-items: center;
+  padding: 5px 7px;
+  border-radius: 25px;
+}
+
+.dropdown, .dropup {
+  z-index: 17000!important;
+}
+.dropdown, .dropleft, .dropright, .dropup {
+  position: relative;
+}
+
+.notification-inbox-popover, .notification-inbox-link {
+  cursor: pointer;
+  position: relative;
+}
+.notification-inbox-popover, .notification-inbox-link a {
+  transition: all .1s ease-in-out;
+  border-radius: 25px;
+  cursor: pointer;
+}
+.notification-inbox-popover {
+  padding: 10px;
+}
+
+my-notification {
+  margin-inline-end: 15px;
+  margin-inline-start: auto;
+}
+
+.logged-in-menu a {
+  font-size: 14px;
+  width: 100%;
+  min-height: 35px;
+}
+
+.logged-in-menu a my-global-icon {
+  margin-inline-start: 4.5px;
+}
+.logged-in-menu a my-global-icon {
+  width: 13px;
+  height: 13px;
+}
+.menu-link my-global-icon {
+  margin-inline-end: 18px;
+}
+.menu-link my-global-icon {
+  display: flex;
+  width: 22px;
+  height: 22px;
+}
+
+my-actor-avatar {
+  margin-inline-end: 10px;
+}
+
+.logged-in-info {
+  max-width: 105px;
+  flex-grow: 1;
+}
+
+.logged-in-display-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--menuForegroundColor);
+}
+
+.logged-in-username {
+  font-size: 13px;
+  color: #c6c6c6;
+  margin-top: 3px;
+}
+
+.logged-in-display-name, .logged-in-username {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.main-col .sub-menu { background-color: #502c50 !important; }
+.title-page.active { border-bottom-color: #ea81e8 !important; }
+.inner-form-title, .section-label { color: #ea81e8 !important; }
+
+.video-bottom {
+  display: flex;
+  margin-top: 1.5rem;
+}
+
+[tabindex="-1"]:focus:not(:focus-visible) {
+  outline: 0!important;
+}
+.avatar-32 {
+  --avatarSize: 32px;
+}
+.flex-column {
+  flex-direction: column!important;
+}
+.main-row {
+  min-height: calc(100vh - 50px - 30px - 30px);
+}
+@media screen and (max-width: 1600px) {
+  .main-col {
+    --horizontalMarginContent: 15px;
+    --videosHorizontalMarginContent: 30px;
+  }
+}
+.main-col {
+  margin-inline-start: 240px;
+}
+.main-col {
+  width: calc(100% - 240px);
+  outline: none;
+}
+.main-col .margin-content {
+  margin: 0 var(--horizontalMarginContent);
+  flex-grow: 1;
+}
+
+.avatar.channel {
+  border-radius: 5px;
+}
+
+svg {
+  width: inherit;
+  height: inherit;
+}
+svg {
+  overflow: hidden;
+}
+img, svg {
+  vertical-align: middle;
+}
+img {
+  border-style: none;
+}
+
+.title-page-container .title-page.active, .title-page-container .title-page.title-page-single {
+  margin-inline-end: .5rem!important;
+}
+.title-page-container .title-page.active, .title-page-container .title-page.title-page-single {
+  margin-bottom: unset;
+}
+.title-page {
+  margin-top: 0;
+}
+.title-page.active, .title-page.title-page-single, .title-page:active, .title-page:focus, .title-page:hover {
+  opacity: 1;
+}
+.title-page.title-page-single {
+  font-size: 125%;
+}
+
+.title-page {
+  color: var(--mainForegroundColor);
+  display: inline-block;
+  font-weight: 600;
+}
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  line-height: 1.2;
+}
+h2 {
+  margin-block-start: 0.83em;
+  margin-block-end: 0.83em;
+}
+@media screen and (max-width: 1600px) {
+  .main-col {
+    --horizontalMarginContent: 15px;
+    --videosHorizontalMarginContent: 30px;
+  }
+}
+
+#custom-css .dropdown-menu, #custom-css .dropdown-menu .dropdown-item { background-color: #421a46 !important; }
+
+#custom-css .icon.icon-logo {
+  background: url(/img/favicon.jpeg) 0% 0% / cover;
+}
+.peertube-title .icon.icon-logo {
+  margin-inline-end: .5rem;
+  width: 23px;
+  height: 24px;
+}
+.top-left-block .icon {
+  vertical-align: middle;
+  cursor: pointer;
+}
+.owner-description, .icon.icon-logo {
+  display: none !important;
+}
+.peertube-title .instance-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.instance-name {
+  background-color: #5e3c62 !important;
+  background-image: url('/img/favicon.jpeg') !important;
+  background-position: top !important;
+  border-radius: 10px !important;
+  padding: 2px !important;
+  color: #fcfcfc !important;
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 34px !important;
+  height: 34px !important;
+}
+
+#video-wrapper {
+  background-color: transparent !important;
+  display: flex;
+  justify-content: center;
+  padding-top: 20px !important;
+}
+
+.video-info {
+  flex-grow: 1;
+  min-width: 1px;
+  max-width: 100%;
+}
+
+.video-info-first-row {
+  display: flex;
+}
+
+.video-info-first-row > div:first-child {
+  flex-grow: 1;
+}
+
+.video-info-first-row-bottom {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+}
+
+.video-info-channel {
+  font-weight: 600;
+  font-size: 15px;
+}
+.video-info-channel-left .video-info-channel-left-links a:nth-of-type(2) {
+  font-weight: 400;
+  font-size: 90%;
+}
+.video-info-channel a {
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  color: var(--mainForegroundColor);
+}
+.video-info-channel a:hover, .video-info-channel a:focus, .video-info-channel a:active {
+  text-decoration: none!important;
+  outline: none!important;
+}
+.pt-3, .py-3 {
+  padding-top: 1rem!important;
+}
+my-subscribe-button {
+  margin-inline-start: 5px;
+}
+.btn-group-subscribe:not(.big) {
+  white-space: nowrap;
+}
+.btn-group-subscribe {
+  padding-inline-end: 17px;
+}
+.btn-group-subscribe {
+  padding-inline-start: 13px;
+}
+.btn-group-subscribe {
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px!important;
+  text-align: center;
+  cursor: pointer;
+  float: right;
+  padding: 0;
+}
+.action-dropdown, .btn-group, .column-toggle, .dropdown-root, .input-group-prepend {
+  z-index: inherit!important;
+}
+.btn-group, .btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.btn-group-subscribe.subscribe-button .btn, .btn-group-subscribe.subscribe-button .btn:active, .btn-group-subscribe.subscribe-button .btn:focus {
+  color: #fff;
+  background-color: var(--mainColor);
+}
+.btn-group-subscribe.subscribe-button .btn {
+  font-weight: 600;
+}
+.btn-group-subscribe > .btn {
+  padding-inline-end: 4px;
+}
+.btn-group-subscribe > .btn, .btn-group-subscribe > .dropdown > .dropdown-toggle {
+  font-size: 15px;
+}
+.btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.btn:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.btn-group-vertical>.btn, .btn-group>.btn {
+  position: relative;
+  flex: 1 1 auto;
+}
+[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
+  cursor: pointer;
+}
+.btn-group-sm>.btn, .btn-sm {
+  padding: .25rem .5rem;
+  line-height: 1.5;
+  border-radius: .2rem;
+}
+
+.btn {
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid #0000;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+.video-actions .action-button:not(:first-child), .video-actions .action-dropdown, .video-actions my-video-actions-dropdown {
+  margin-inline-start: 5px;
+}
+.video-actions .action-button.action-button-support {
+  color: var(--supportButtonColor);
+}
+.video-actions .action-button.action-button-support my-global-icon path:first-child {
+  fill: var(--supportButtonHeartColor)!important;
+}
+
+.video-info-channel {
+  font-weight: 600;
+  font-size: 15px;
+}
+.pt-3, .py-3 {
+  padding-top: 1rem!important;
+}
+.w-100 {
+  width: 100%!important;
+}
+
+.justify-content-end {
+  justify-content: flex-end!important;
+}
+.d-flex {
+  display: flex!important;
+}
+.position-relative {
+  position: relative!important;
+}
+.d-inline-flex {
+  display: inline-flex!important;
+}
+.border-top {
+  border-top: 1px solid #dee2e6!important;
+}
+form {
+  margin-bottom: 30px;
+}
+#custom-css input, #custom-css textarea {
+  background: var(--inputColor) !important;
+  color: var(--mainForegroundColor) !important;
+  border: 1px solid var(--mainBackgroundColor);
+}
+.avatar-and-textarea textarea {
+  padding-inline-end: 45px!important;
+}
+.avatar-and-textarea .form-group {
+  flex-grow: 1;
+  margin: 0;
+  position: relative;
+}
+
+.video-info-name {
+  margin-inline-end: 30px;
+}
+.video-info-name {
+  word-break: break-word;
+  overflow-wrap: break-word;
+  min-height: 40px;
+  font-size: 27px;
+  font-weight: 600;
+  flex-grow: 1;
+}
+.video-actions .action-button {
+  padding-inline-end: 17px;
+}
+.video-actions .action-button {
+  padding-inline-start: 13px;
+}
+.small, small {
+  font-size: 80%;
+  font-weight: 400;
+}
+.title-page-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 25px;
+  flex-wrap: wrap-reverse;
+}
+
+.video-actions .action-button {
+  border: 0;
+  height: 30px;
+  border-radius: 3px!important;
+  text-align: center;
+  cursor: pointer;
+  align-items: center;
+  line-height: normal!important;
+  font-size: 100%;
+  font-weight: 600;
+  display: inline-block;
+  padding: 0 10px;
+  white-space: nowrap;
+  background-color: transparent!important;
+  color: var(--actionButtonColor);
+  text-transform: uppercase;
+}
+.action-button-like, .action-button-dislike {
+  filter: brightness(120%);
+}
+
+[type=button], [type=reset], [type=submit], button {
+  -webkit-appearance: button;
+}
+button {
+  background: unset;
+}
+
+@media (min-width: 768px) {
+  .d-md-none {
+    display: none!important;
+  }
+}
+
+.title-block my-feed {
+  margin-inline-start: 5px;
+}
+.title-block my-feed {
+  display: inline-block;
+  opacity: 0;
+  transition: ease-in .2s opacity;
+  width: 12px;
+  position: relative;
+  top: -3px;
+}
+.feed {
+  width: 100%;
+}
+
+.flex-direction-column {
+  flex-direction: column;
+}
+.justify-content-between {
+  justify-content: space-between!important;
+}
+
+body {
+  margin: 0;
+  line-height: 1.5;
+  --mainColor: #ea81e8;
+  --mainColorLighter: #d68ad5;
+  --mainColorLightest: #fdd1fc;
+  --mainHoverColor: #fc54f9;
+  --mainBackgroundColor: #301a30;
+  --mainForegroundColor: #fcfcfc;
+  --secondaryColor: #421a46;
+
+  --greyForegroundColor: #585858;
+  --greyBackgroundColor: #e5e5e5;
+
+  --submenuBackgroundColor: #5e3c62;
+  --channelBackgroundColor: #5e3c62;
+
+  --textareaForegroundColor: #000;
+  --textareaBackgroundColor: #fff;
+  --markdownTextareaBackgroundColor: #efefef;
+
+  --actionButtonColor: #ea81e8;
+  --supportButtonBackgroundColor: #971195;
+  --supportButtonColor: var(--actionButtonColor);
+  --supportButtonHeartColor: #ec1818;
+
+  --activatedActionButtonColor: #000;
+  --horizontalMarginContent: 30px;
+  --videosHorizontalMarginContent: 6vw;
+  --mainColWidth: calc(100vw - 240px);
+  --dangerBackgroundColor: #d9534f;
+  --inputColor: #272727;
+  --inputPlaceholderColor: rgba(195,195,195,0.878431);
+  --menuAndHeaderBackgroundColor: #272727;
+  --menuForegroundColor: rgba(195,195,195,0.878431);
+  --menuBackgroundColor: #272727;
+  --whiteColor: #ffffff;
+  --submenuColor: #272727;
+  --embedForegroundColor: #fff;
+  --embedBigPlayBackgroundColor: rgba(0, 0, 0, .8);
+
+  font-family: Source Sans Pro,sans-serif;
+  font-weight: 400;
+  color: var(--mainForegroundColor);
+  background-color: var(--mainBackgroundColor);
+  font-size: 14px;
+  overflow-y: scroll;
+  text-align: start;
+}
+
+my-video-comments {
+  display: inline-block;
+  width: 100%;
+  margin-bottom: 20px;
+}
+.border-top {
+  border-top: 1px solid #dee2e6!important;
+}
+#highlighted-comment {
+  margin-bottom: 25px;
+}
+.anchor {
+  position: relative;
+  top: -70px;
+}
+.root-comment {
+  font-size: 15px;
+  display: flex;
+}
+.root-comment .left {
+  margin-inline-end: 10px;
+}
+.root-comment .left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+my-actor-avatar {
+  display: inline-block;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+}
+.root-comment .left .vertical-border {
+  width: 2px;
+  height: 100%;
+  background-color: #0000000d;
+  margin: 10px calc(1rem + 1px);
+}
+.initial.blue {
+  background-color: #009fd4;
+}
+
+.initial {
+  background-color: #3c2109;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--initialFontSize);
+}
+
+.initial {
+  background-color: #3c2109;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--initialFontSize);
+}
+.root-comment .right {
+  width: 100%;
+}
+.mb-3, .my-3 {
+  margin-bottom: 1rem!important;
+}
+.mb-3 {
+  margin-bottom: 1rem!important;
+}
+.comment {
+  flex-grow: 1;
+  min-width: 1px;
+}
+.highlighted-comment {
+  display: inline-block;
+  background-color: #f5f5f5;
+  color: #3d3d3d;
+  padding: 0 5px;
+  font-size: 13px;
+  margin-bottom: 5px;
+  font-weight: 600;
+  border-radius: 3px;
+}
+.comment-account-date {
+  display: flex;
+  margin-bottom: 4px;
+}
+.comment-account {
+  word-break: break-all;
+  font-weight: 600;
+  font-size: 90%;
+}
+.comment-date {
+  margin-inline-start: 5px;
+}
+.comment-date {
+  font-size: 90%;
+  color: var(--greyForegroundColor);
+  text-decoration: none;
+}
+.comment-account a {
+  color: var(--mainForegroundColor);
+}
+.comment-account .comment-account-fid {
+  opacity: .6;
+}
+.ml-1 {
+  margin-inline-start: .25rem;
+}
+.ml-1, .mx-1 {
+  margin-left: .25rem!important;
+}
+.comment-html {
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+.comment-html a:not(.linkified-url) {
+  color: var(--mainForegroundColor);
+  font-weight: 600;
+}
+.comment-html p {
+  margin-bottom: .3rem;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+.comment-actions {
+  margin-bottom: 10px;
+  display: flex;
+}
+.comment-actions .dropdown-toggle, .comment-actions .comment-action-reply {
+  margin-inline-end: 10px;
+}
+.comment-actions .dropdown-toggle, .comment-actions .comment-action-reply {
+  color: var(--greyForegroundColor);
+  cursor: pointer;
+}
+
+.notification-inbox-popover, .notification-inbox-link {
+  cursor: pointer;
+  position: relative;
+}
+
+.notification-inbox-popover, .notification-inbox-link a {
+  transition: all .1s ease-in-out;
+  border-radius: 25px;
+  cursor: pointer;
+}
+
+.notification-inbox-popover {
+  padding: 10px;
+}
+
+.notification-inbox-popover .unread-notifications, .notification-inbox-link .unread-notifications {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--mainColor);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  border-radius: 15px;
+  width: 15px;
+  height: 15px;
+  margin-inline-start: 20px;
+}
\ No newline at end of file
diff --git a/public/css/custom.css b/public/css/custom.css
new file mode 100644
index 0000000..e346e27
--- /dev/null
+++ b/public/css/custom.css
@@ -0,0 +1,57 @@
+.header { background-color: #421a46 !important; }
+
+menu { background-color: #421a46 !important; }
+.main-col .sub-menu { background-color: #502c50 !important; }
+.title-page.active { border-bottom-color: #ea81e8 !important; }
+.inner-form-title, .section-label { color: #ea81e8 !important; }
+
+ #custom-css .dropdown-menu, #custom-css .dropdown-menu .dropdown-item { background-color: #421a46 !important; }
+
+.channel-info, .account-info, .channel, .miniature-show-channel, description-html { background-color: #5e3c62 !important; }
+.actor-handle { color: #dd00ee !important; }
+.actor-counters { color: #bb00bb !important; }
+.section-label { margin-bottom: 5px !important; }
+.owner-description, .icon.icon-logo { display: none !important; }
+.view-account short { margin-top: 0px !important; }
+
+.owner-block {
+  background-color: rgba(48, 26, 48, 0.6) !important;
+  padding: 10px !important;
+}
+
+#video-wrapper {
+  background-color: transparent !important;
+  padding-top: 20px !important;
+}
+
+body {
+  --mainColor: #ea81e8;
+  --mainColorLighter: #d68ad5;
+  --mainColorLightest: #fdd1fc;
+  --mainHoverColor: #fc54f9;
+  --mainBackgroundColor: #301a30;
+  --mainForegroundColor: #fcfcfc;
+  --secondaryColor: #421a46;
+
+
+  --submenuBackgroundColor: #5e3c62;
+  --channelBackgroundColor: #5e3c62;
+
+
+  --actionButtonColor: #ea81e8;
+  --supportButtonBackgroundColor: #971195;
+  --supportButtonColor: var(--actionButtonColor);
+  --supportButtonHeartColor: #ec1818;
+}
+
+.block-title, .title-page {
+    background: radial-gradient(ellipse at top, #db34d3, transparent), radial-gradient(ellipse at bottom, #232629, transparent);
+    margin-inline-end: 0px;
+    margin-inline-start: 0px;
+    padding: 5px;
+    border-radius: 4px;
+    border: 2px solid #fd95ff;
+    border-right-color: #fed9ff;
+    border-bottom-color: #fed9ff;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/public/css/global.css b/public/css/global.css
new file mode 100644
index 0000000..75e8768
--- /dev/null
+++ b/public/css/global.css
@@ -0,0 +1,113 @@
+.vjs-overlay a {
+    color: #210cbf;
+  }
+  
+  /* make font size for overlays little bigger and responsive */
+  .video-js .vjs-overlay { /* apply for screen sizes under 768px */
+    font-size:1.2rem;
+  }
+  @media screen and (min-width: 768px) { /* apply for screen sizes bigger or equal 768px */
+    .video-js .vjs-overlay {
+      font-size:1.4rem;
+    }
+  }.video-js .vjs-overlay{color:#fff;position:absolute;text-align:center}.video-js .vjs-overlay-no-background{max-width:33%}.video-js .vjs-overlay-background{background-color:#646464;background-color:rgba(255,255,255,0.4);border-radius:3px;padding:10px;width:33%}.video-js .vjs-overlay-top-left{top:5px;left:5px}.video-js .vjs-overlay-top{left:50%;margin-left:-16.5%;top:5px}.video-js .vjs-overlay-top-right{right:5px;top:5px}.video-js .vjs-overlay-right{right:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-bottom-right{bottom:3.5em;right:5px}.video-js .vjs-overlay-bottom{bottom:3.5em;left:50%;margin-left:-16.5%}.video-js .vjs-overlay-bottom-left{bottom:3.5em;left:5px}.video-js .vjs-overlay-left{left:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-center{left:50%;margin-left:-16.5%;top:50%;transform:translateY(-50%)}.video-js .vjs-no-flex .vjs-overlay-left,.video-js .vjs-no-flex .vjs-overlay-center,.video-js .vjs-no-flex .vjs-overlay-right{margin-top:-15px}
+  #peertube-plugin-livechat-container {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  #plugin-placeholder-player-next #peertube-plugin-livechat-container {
+    height: 100%;
+  }
+  
+  .peertube-plugin-livechat-buttons {
+    align-items: center;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+  }
+  
+  .peertube-plugin-livechat-button {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    height: 36px !important;
+    margin: 5px !important;
+    padding: 2px !important;
+  }
+  .peertube-plugin-livechat-button svg {
+    height: auto;
+  }
+  
+  .peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button {
+    height: 18px !important;
+    margin: 2px !important;
+    padding: 1px !important;
+  }
+  
+  [peertube-plugin-livechat-state=initializing] {
+    display: none;
+  }
+  
+  [peertube-plugin-livechat-state=open] .peertube-plugin-livechat-button-open {
+    display: none;
+  }
+  
+  [peertube-plugin-livechat-state=closed] .peertube-plugin-livechat-button-close {
+    display: none;
+  }
+  
+  [peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-main {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    margin-right: 0 !important;
+  }
+  [peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-secondary {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    margin-left: 0 !important;
+    border-left: 1px solid currentColor;
+  }
+  
+  #peertube-plugin-livechat-container iframe {
+    border: 1px solid black;
+    min-height: 30vh;
+    height: 100%;
+  }
+  
+  .peertube-plugin-livechat-warning {
+    color: orange;
+  }
+  
+  .peertube-plugin-livechat-error {
+    color: red;
+  }
+  
+  table.peertube-plugin-livechat-prosody-list-rooms {
+    border: 1px solid black;
+    margin: 5px 0;
+  }
+  
+  table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(odd) {
+    background-color: #eee;
+  }
+  
+  table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(even) {
+    background-color: #fff;
+  }
+  
+  table.peertube-plugin-livechat-prosody-list-rooms th {
+    background-color: var(--mainHoverColor);
+    border: 1px solid black;
+    color: var(--mainBackgroundColor);
+    padding: 4px 5px;
+  }
+  
+  table.peertube-plugin-livechat-prosody-list-rooms td {
+    border: 1px solid #555;
+    color: black;
+    padding: 4px 5px;
+  }
+  
+  /*# sourceMappingURL=style.css.map */
+  
\ No newline at end of file
diff --git a/public/css/login.css b/public/css/login.css
new file mode 100644
index 0000000..cab59b5
--- /dev/null
+++ b/public/css/login.css
@@ -0,0 +1,430 @@
+.main-row {
+  min-height: calc(100vh - 110px);
+}
+
+@media screen and (max-width: 1600px) {
+  .main-col {
+    --horizontalMarginContent: 15px;
+    --videosHorizontalMarginContent: 30px;
+  }
+}
+
+.main-col .margin-content {
+  margin: 0 var(--horizontalMarginContent);
+  flex-grow: 1;
+}
+
+.title-page.active, .title-page:hover, .title-page:active, .title-page:focus, .title-page.title-page-single {
+  opacity: 1;
+  outline: 0 hidden!important;
+}
+
+.title-page.title-page-single {
+  font-size: 125%;
+  margin-top: 30px;
+  margin-bottom: 25px;
+}
+
+.block-title, .title-page {
+  background: radial-gradient(ellipse at top, #db34d3, transparent), radial-gradient(ellipse at bottom, #232629, transparent);
+  margin-inline-end: 0px;
+  margin-inline-start: 0px;
+  padding: 5px;
+  border-radius: 4px;
+  border: 2px solid #fd95ff;
+  border-right-color: #fed9ff;
+  border-bottom-color: #fed9ff;
+  text-align: center;
+}
+
+.title-page {
+  margin-inline-end: 55px;
+  opacity: .6;
+  color: var(--mainForegroundColor);
+  font-size: 16px;
+  display: inline-block;
+  font-weight: 600;
+  border-bottom: 2px solid transparent;
+}
+
+.wrapper {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin-inline-end: 0;
+  width: auto;
+}
+
+.wrapper .login-form-and-externals {
+  margin-inline-end: 10px;
+  margin-inline-start: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 15px;
+  max-width: 450px;
+  margin-bottom: 40px;
+}
+
+.wrapper > div {
+  flex: 1 1;
+}
+
+.wrapper .login-form-and-externals form, .wrapper .login-form-and-externals form input {
+  width: 100%;
+}
+
+.wrapper .login-form-and-externals .signup-link {
+  display: inline-block;
+}
+
+.wrapper .login-form-and-externals form .additionnal-links .forgot-password-button, .wrapper .login-form-and-externals form .additionnal-links .create-an-account {
+  padding: 4px;
+  display: inline-block;
+  color: var(--mainColor);
+}
+
+.create-an-account, .forgot-password-button {
+  color: var(--mainForegroundColor);
+  cursor: pointer;
+  transition: opacity cubic-bezier(.39,.575,.565,1);
+}
+
+.wrapper .login-form-and-externals form {
+  margin: 0;
+}
+
+.wrapper .instance-information {
+  margin-inline-end: 10px;
+  margin-inline-start: 10px;
+  max-width: 600px;
+  min-width: 350px;
+  margin-bottom: 40px;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  font-weight: 700;
+  font-size: 15px;
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+#custom-css input, #custom-css textarea {
+  background: var(--inputColor) !important;
+  color: var(--mainForegroundColor) !important;
+  border: 1px solid var(--mainBackgroundColor);
+}
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+}
+
+input[type=text], input[type=email] {
+  padding: 0 15px;
+  display: inline-block;
+  height: 30px;
+  width: 340px;
+  color: var(--inputForegroundColor);
+  background-color: var(--inputBackgroundColor);
+  border: 1px solid #C6C6C6;
+  border-radius: 3px;
+  font-size: 15px;
+}
+
+#custom-css .peertube-select-container, input[type="text"] {
+  border: 1px solid var(--mainBackgroundColor) !important;
+  background: var(--inputColor) !important;
+  color: var(--mainForegroundColor) !important;
+}
+
+.form-control {
+  font-size: 15px;
+  color: var(--mainForegroundColor);
+  background-color: var(--inputBackgroundColor);
+  outline: none;
+  display: block;
+  width: 100%;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+input, textarea {
+  outline: none;
+  color: var(--inputForegroundColor);
+}
+
+button, input {
+  overflow: visible;
+}
+
+input, button, select, optgroup, textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.instance-name {
+  line-height: 1.7rem;
+}
+
+h2, .h2 {
+  font-size: 2rem;
+}
+
+.instance-short-description {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  font-size: 1rem;
+  line-height: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 3rem;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.accordion {
+  overflow-anchor: none;
+}
+
+ngb-accordion .card {
+  border-color: var(--mainBackgroundColor);
+}
+
+.accordion>.card {
+  overflow: hidden;
+}
+
+.card {
+  background-color: var(--mainBackgroundColor);
+  border-color: #dee2e6;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0,0,0,.125);
+  border-radius: 0.25rem;
+}
+
+ngb-accordion .card .card-header {
+  background-color: unset;
+  padding: 0;
+}
+
+.accordion>.card>.card-header {
+  border-radius: 0;
+  margin-bottom: -1px;
+}
+
+.card-header:first-child {
+  border-radius: calc(0.25rem- 1px) calc(0.25rem- 1px) 0 0;
+}
+
+.card-header {
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 0;
+  background-color: #00000008;
+  border-bottom: 1px solid rgba(0,0,0,.125);
+}
+
+.btn:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+
+ngb-accordion .btn {
+  padding-inline-end: 17px;
+  padding-inline-start: 13px;
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px !important;
+  text-align: center;
+  cursor: pointer;
+  background-color: #e5e5e5;
+  color: var(--greyForegroundColor);
+  border-radius: unset;
+  width: 100%;
+}
+
+button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+.btn-link {
+  font-weight: 400;
+  color: #007bff;
+  text-decoration: none;
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  color: #212529;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+button, [type=button], [type=reset], [type=submit] {
+  -webkit-appearance: button;
+}
+
+button {
+  background: unset;
+  border-radius: 0;
+}
+
+button, select {
+  text-transform: none;
+}
+
+.input-group:not(.has-validation)>.form-control:not(:last-child), .input-group:not(.has-validation)>.custom-select:not(:last-child), .input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label, .input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label:after {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group input.form-control {
+  width: unset!important;
+  flex-grow: 1;
+}
+
+.input-group-sm>.form-control:not(textarea), .input-group-sm>.custom-select {
+  height: calc(1.5em + 0.5rem + 2px);
+}
+
+.input-group>.form-control {
+  flex: initial;
+}
+
+.input-group>.form-control, .input-group>.form-control-plaintext, .input-group>.custom-select, .input-group>.custom-file {
+  position: relative;
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
+  margin-bottom: 0;
+}
+
+input {
+  padding-inline-end: 15px !important;
+  padding-inline-start: 15px !important;
+  padding: 0 15px;
+  display: inline-block;
+  height: 30px;
+  width: auto;
+  color: var(--inputForegroundColor);
+  background-color: var(--inputBackgroundColor);
+  border: 1px solid #C6C6C6;
+  border-radius: 3px;
+  font-size: 15px;
+  font-size: 15px!important;
+}
+
+.input-group-append {
+  margin-left: -1px;
+}
+
+.input-group-prepend, .input-group-append {
+  display: flex;
+}
+
+.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-group-sm>.form-control, .input-group-sm>.custom-select, .input-group-sm>.input-group-prepend>.input-group-text, .input-group-sm>.input-group-append>.input-group-text, .input-group-sm>.input-group-prepend>.btn, .input-group-sm>.input-group-append>.btn {
+  padding: 0.25rem 0.5rem;
+  font-size: .875rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+}
+
+.eye-button {
+  line-height: 1!important;
+}
+
+.input-group-prepend .btn, .input-group-append .btn {
+  position: relative;
+  z-index: 2;
+}
+
+.btn-outline-secondary {
+  border-color: #ced4da;
+  color: #6c757d;
+  border-color: #6c757d;
+}
+
+input[type=button], input[type=submit], input[type=reset], input[type=file]::-webkit-file-upload-button, button {
+  border-radius: 0;
+}
+
+ngb-accordion .card .card-header+.collapse.show {
+  background-color: var(--submenuBackgroundColor);
+}
+
+.card-body {
+  flex: 1 1 auto;
+  min-height: 1px;
+  padding: 1.25rem;
+}
+
+.block {
+  font-size: 15px;
+  margin-bottom: 15px;
+}
+
+.alert-danger {
+  color: #850000;
+  background-color: #fcc;
+  border-color: #ffb8b8;
+}
+
+.alert {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+}
+
+.alert {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+}
\ No newline at end of file
diff --git a/public/css/myaccount.css b/public/css/myaccount.css
new file mode 100644
index 0000000..887dbe9
--- /dev/null
+++ b/public/css/myaccount.css
@@ -0,0 +1,512 @@
+.main-row {
+  min-height: calc(100vh - 110px);
+}
+
+.row {
+  flex-direction: column;
+  width: 100%;
+}
+
+.row {
+  margin: 0!important;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.row > my-top-menu-dropdown:nth-child(1) {
+  flex-grow: 1;
+}
+
+.main-col .sub-menu.sub-menu-fixed {
+  position: fixed;
+  z-index: 12499;
+  max-width: var(--mainColWidth);
+}
+
+.main-col .sub-menu {
+  background-color: #502c50 !important;
+}
+
+.main-col .sub-menu {
+  background-color: var(--submenuBackgroundColor);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--horizontalMarginContent);
+  height: 81px;
+  margin-bottom: 30px;
+  overflow-x: auto;
+}
+
+.block-title, .title-page {
+  background: radial-gradient(ellipse at top, #db34d3, transparent), radial-gradient(ellipse at bottom, #232629, transparent);
+  margin-inline-end: 0px;
+  margin-inline-start: 0px;
+  padding: 5px;
+  border-radius: 4px;
+  border: 2px solid #fd95ff;
+  border-right-color: #fed9ff;
+  border-bottom-color: #fed9ff;
+  text-align: center;
+}
+
+.title-page-about, .title-page-settings {
+  white-space: nowrap;
+  font-size: 115%;
+}
+
+.title-page {
+  margin-inline-end: 55px;
+}
+
+.title-page {
+  opacity: .6;
+  color: var(--mainForegroundColor);
+  font-size: 16px;
+  display: inline-block;
+  font-weight: 600;
+  border-bottom: 2px solid transparent;
+}
+
+#custom-css .title-page.active, #custom-css .title-page:hover {
+  color: var(--whiteColor);
+}
+
+.title-page.active {
+  border-bottom-color: #ea81e8 !important;
+}
+
+.title-page.active, .title-page:hover, .title-page:active, .title-page:focus, .title-page.title-page-single {
+  opacity: 1;
+  outline: 0 hidden!important;
+}
+
+.title-page.active {
+  border-bottom-color: var(--mainColor);
+}
+
+.block-title, .title-page {
+  background: radial-gradient(ellipse at top, #db34d3, transparent), radial-gradient(ellipse at bottom, #232629, transparent);
+  margin-inline-end: 0px;
+  margin-inline-start: 0px;
+  padding: 5px;
+  border-radius: 4px;
+  border: 2px solid #fd95ff;
+  border-right-color: #fed9ff;
+  border-bottom-color: #fed9ff;
+  text-align: center;
+}
+
+.title-page-about, .title-page-settings {
+  white-space: nowrap;
+  font-size: 115%;
+}
+
+.title-page {
+  margin-inline-end: 55px;
+}
+
+.title-page {
+  opacity: .6;
+  color: var(--mainForegroundColor);
+  font-size: 16px;
+  display: inline-block;
+  font-weight: 600;
+  border-bottom: 2px solid transparent;
+}
+
+.main-col .margin-content.offset-content {
+  padding-top: 111px;
+}
+
+.main-col .margin-content {
+  margin: 0 var(--horizontalMarginContent);
+  flex-grow: 1;
+}
+
+.pb-5, .py-5 {
+  padding-bottom: 3rem !important;
+}
+
+.row h1 {
+  font-size: 1.3rem;
+  border-bottom: 2px solid #E5E5E5;
+  padding-bottom: 15px;
+  margin-bottom: 30px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
+#custom-css .header-filter {
+  background-color: var(--menuBackgroundColor);
+}
+
+.header-filter {
+  display: flex;
+  font-size: 15px;
+  margin-bottom: 20px;
+  background-color: #421a46 !important;
+}
+
+#custom-css .row .header-filter a, #custom-css .row .header-filter button {
+  color: var(--whiteColor);
+  background-color: var(--mainHoverColor);
+}
+
+.header-filter a {
+  padding-inline-end: 17px;
+  padding-inline-start: 13px;
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px !important;
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+  background-color: #e5e5e5;
+  color: var(--greyForegroundColor);
+  display: inline-flex;
+  align-items: center;
+  line-height: normal!important;
+}
+
+.header-filter a my-global-icon {
+  margin-inline-end: 3px;
+  position: relative;
+  width: 18px;
+  top: -1px;
+}
+
+#custom-css .header-filter my-global-icon .feather {
+  color: var(--whiteColor);
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+.notification my-global-icon {
+  margin-inline-start: 3px;
+  margin-inline-end: 11px;
+  width: 24px;
+}
+
+.header-filter a my-global-icon .feather, .header-filter a my-global-icon .material, .header-filter a my-global-icon .misc {
+  color: var(--greyForegroundColor);
+}
+
+#custom-css .peertube-select-container, input[type="text"] {
+  border: 1px solid var(--mainBackgroundColor) !important;
+  background: var(--inputColor) !important;
+  color: var(--mainForegroundColor) !important;
+}
+
+.header-filter .peertube-select-container.peertube-select-button {
+  background-color: #e5e5e5;
+  color: var(--greyForegroundColor);
+}
+
+.header-filter .peertube-select-container {
+  padding: 0;
+  margin: 0;
+  width: auto;
+  border-radius: 3px;
+  color: var(--inputForegroundColor);
+  background: var(--inputBackgroundColor);
+  position: relative;
+  font-size: 15px;
+  height: min-content;
+}
+
+#custom-css .peertube-select-container > select {
+  background: var(--inputColor) !important;
+  color: var(--mainForegroundColor) !important;
+}
+
+.header-filter .peertube-select-container.peertube-select-button select, .header-filter .peertube-select-container.peertube-select-button option {
+  font-weight: 600;
+  color: var(--greyForegroundColor);
+  border: 0;
+}
+
+.header-filter .peertube-select-container select {
+  padding: 0 35px 0 12px;
+  position: relative;
+  border: 1px solid #C6C6C6;
+  background: transparent none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  height: 30px;
+  text-overflow: ellipsis;
+  color: var(--mainForegroundColor);
+}
+
+.form-control {
+  font-size: 15px;
+  color: var(--mainForegroundColor);
+  background-color: var(--inputBackgroundColor);
+  outline: none;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+select {
+  word-wrap: normal;
+}
+
+button, select {
+  text-transform: none;
+}
+
+input, button, select, optgroup, textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+#custom-css .peertube-select-container > select > option {
+  background: var(--inputColor);
+  color: var(--mainForegroundColor) !important;
+}
+
+.header-filter .peertube-select-container select option {
+  color: #000;
+}
+
+.header-filter .peertube-select-container.peertube-select-button select, .header-filter .peertube-select-container.peertube-select-button option {
+  font-weight: 600;
+  color: var(--greyForegroundColor);
+  border: 0;
+}
+
+#custom-css .peertube-select-container > select option:hover, #custom-css .peertube-select-container > select > option:checked {
+  color: var(--whiteColor) !important;
+  background-color: var(--mainColor) !important;
+}
+
+#custom-css .peertube-select-container > select > option {
+  background: var(--inputColor);
+  color: var(--mainForegroundColor) !important;
+}
+
+.header-filter .peertube-select-container select option {
+  color: #000;
+}
+
+.header-filter .peertube-select-container.peertube-select-button select, .header-filter .peertube-select-container.peertube-select-button option {
+  font-weight: 600;
+  color: var(--greyForegroundColor);
+  border: 0;
+}
+
+#custom-css .peertube-select-container:after {
+  border-top-color: var(--mainForegroundColor) !important;
+}
+
+.header-filter .peertube-select-container:after {
+  top: 50%;
+  right: calc(0% + 15px);
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border: 5px solid rgba(0,0,0,0);
+  border-top-color: #000;
+  margin-top: -2px;
+  z-index: 100;
+}
+
+#custom-css .row .header-filter a, #custom-css .row .header-filter button {
+  color: var(--whiteColor);
+  background-color: var(--mainHoverColor);
+}
+
+.header-filter button {
+  padding-inline-end: 17px;
+}
+
+.header-filter button {
+  padding-inline-start: 13px;
+}
+
+.header-filter button {
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  font-weight: 600;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px !important;
+  text-align: center;
+  cursor: pointer;
+  background-color: #e5e5e5;
+  color: var(--greyForegroundColor);
+  display: inline-flex;
+  align-items: center;
+  line-height: normal!important;
+}
+
+.btn:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+
+button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+.ml-auto, .mx-auto {
+  margin-left: auto!important;
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  color: #212529;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+button {
+  background: unset;
+}
+
+button, [type=button], [type=reset], [type=submit] {
+  -webkit-appearance: button;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button, input {
+  overflow: visible;
+}
+
+input, button, select, optgroup, textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button {
+  border-radius: 0;
+}
+
+input[type=button], input[type=submit], input[type=reset], input[type=file]::-webkit-file-upload-button, button {
+  border-radius: 0;
+}
+
+.header-filter button my-global-icon {
+  margin-inline-end: 3px;
+  position: relative;
+  width: 20px;
+  top: -1px;
+}
+
+#custom-css .header-filter my-global-icon .feather {
+  color: var(--whiteColor);
+}
+
+.header-filter button my-global-icon .feather, .header-filter button my-global-icon .material, .header-filter button my-global-icon .misc {
+  color: var(--greyForegroundColor);
+}
+
+my-user-notifications {
+  font-size: 15px;
+}
+
+#custom-css .notification.unread {
+  background-color: var(--menuAndHeaderBackgroundColor);
+}
+
+.notification.unread {
+  background-color: #0000000d;
+}
+
+.notification {
+  display: flex;
+  align-items: center;
+  font-size: inherit;
+  padding: 15px 5px 15px 10px;
+  border-bottom: 1px solid rgba(0,0,0,.1);
+  word-break: break-word;
+}
+
+.notification .avatar {
+  margin-inline-end: 10px;
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
+  min-height: 30px;
+  border-radius: 5px;
+}
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+.notification .message {
+  flex-grow: 1;
+}
+
+.notification .message a {
+  font-weight: 600;
+}
+
+.notification .from-date {
+  margin-inline-start: auto;
+  padding-inline-start: 5px;
+  font-size: .85em;
+  color: var(--greyForegroundColor);
+  min-width: 70px;
+  text-align: end;
+}
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 0000000..97fe07b
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,473 @@
+body {
+    --mainColor: #00abff;
+    --mainBackgroundColor: #121212;
+    --mainForegroundColor: rgba(195,195,195,0.878431);
+    --submenuColor: #272727;
+    --submenuBackgroundColor: #272727;
+    --channelBackgroundColor: #272727;
+    --inputColor: #272727;
+    --inputPlaceholderColor: rgba(195,195,195,0.878431);
+    --menuAndHeaderBackgroundColor: #272727;
+    --menuForegroundColor: rgba(195,195,195,0.878431);
+    --menuBackgroundColor: #272727;
+    --whiteColor: #ffffff;
+    --mainHoverColor: #0481bf;
+    --actionButtonColor: #ffffff;
+    --dangerBackgroundColor: #d9534f;
+    /*font-family: "Open Sans",sans-serif;*/
+  }
+  
+  /* Main background */
+  #custom-css .sub-header-container{
+    background-position: center top;
+    background-size: cover;
+    background-repeat: repeat;
+    background-attachment: fixed;
+  }
+  
+  /* Header */
+  #search-video{
+    background: var(--mainBackgroundColor) !important;
+  }
+  #custom-css .header{
+    background-color: var(--menuBackgroundColor);
+  }
+  /* NavMenu*/
+  #custom-css .title-page.active,
+  #custom-css .title-page:hover{
+    color: var(--whiteColor);
+  }
+  #custom-css .row .header a,
+  #custom-css .row .header button{
+    color: var(--whiteColor);
+    background-color: var(--mainHoverColor);
+  }
+  #custom-css .row .header a my-global-icon svg g[stroke="#000000"],
+  #custom-css .row .header button my-global-icon svg path[stroke="#333333"],
+  #custom-css .row .header button my-global-icon svg g[stroke="#000000"]{
+    stroke: var(--whiteColor) !important;
+  }
+  #custom-css .row .header button my-global-icon svg path[fill="#333333"]{
+    fill: var(--whiteColor) !important;
+  }
+  
+  #custom-css .footer-links a,
+  #custom-css .footer-copyleft a{
+    color: var(--whiteColor) !important
+  }
+  /* Toast notifications*/
+  #custom-css .ui-toast .ui-toast-message-content{
+    color: var(--whiteColor);
+  }
+  /* Dropdown */
+  #custom-css .dropdown-menu,
+  #custom-css .dropdown-menu .dropdown-item{
+    background-color: var(--menuBackgroundColor);
+    color: var(--menuForegroundColor);
+  }
+  
+  #custom-css .dropdown-menu a,
+  #custom-css span.dropdown-item.custom-action,
+  #custom-css a.dropdown-item.with-icon{
+    color: var(--menuForegroundColor) !important;
+  }
+  
+  #custom-css .dropdown-item:focus:not(.new-playlist-block),
+  #custom-css .dropdown-item:hover:not(.new-playlist-block),
+  #custom-css .dropdown-item:active:not(.new-playlist-block),
+  #custom-css span.dropdown-item.custom-action:hover,
+  #custom-css a.dropdown-item.with-icon:hover{
+    color: var(--whiteColor) !important; 
+    background-color: var(--mainColor) !important;
+  }
+  #custom-css .ui-inputswitch-slider{
+    box-shadow: none !important;
+  }
+    /* Dropdown inputs && checkboxes */
+    #custom-css .dropdown-menu .peertube-select-container,
+    #custom-css .dropdown-menu input[type="text"], 
+    #custom-css .dropdown-menu textarea,
+    #custom-css .dropdown-menu span[role="checkbox"]{
+      border: 1px solid var(--mainForegroundColor) !important
+    }
+    #custom-css .dropdown-menu input[type="submit"]{
+      border: 1px solid transparent !important; /* Removing black border in buttons */
+    }
+    #custom-css .header .options-row{
+      padding-left: 0;
+    }
+    #custom-css .header .options-row > div{
+      justify-content: space-between;
+    }
+    #custom-css .dropdown-item:hover .ml-auto:not(.glyphicon){
+      box-shadow: 0 0 0 0.1em var(--menuForegroundColor) !important;
+    }
+    #custom-css .ml-auto:after{
+      background-color: var(--whiteColor);
+    }
+    #custom-css #typeahead-container input{
+      border-color: var(--mainForegroundColor) !important;
+    }
+  
+  /* Buttons */
+  #custom-css .upload-button, 
+  #custom-css .upload-button:active, 
+  #custom-css .upload-button:focus,
+  #custom-css .root .button-file{
+    color: var(--whiteColor) !important; 
+    background-color: var(--mainColor) !important;
+  }
+  #custom-css .upload-button my-global-icon svg g[stroke="#000000"],
+  #custom-css a.add-button my-global-icon svg circle[stroke="#000000"],
+  #custom-css a.create-button my-global-icon svg circle[stroke="#000000"],
+  #custom-css a.create-caption my-global-icon svg circle[stroke="#000000"]{
+    stroke: var(--whiteColor) !important;
+  }
+  #custom-css a.add-button my-global-icon svg rect[fill="#000000"],
+  #custom-css a.create-button my-global-icon svg rect[fill="#000000"],
+  #custom-css a.create-caption my-global-icon svg rect[fill="#000000"]{
+    fill: var(--whiteColor) !important;
+  }
+  #custom-css .grey-button, #custom-css .grey-button:active, #custom-css .grey-button:focus {
+    background-color: var(--menuAndHeaderBackgroundColor);
+    color: var(--mainForegroundColor);
+  }
+  #custom-css my-video-comments my-video-comment-add .comment-buttons .cancel-button{
+    display: none; /* Hidden because it's not needed and it have a buggy behaviour */
+  }
+  #custom-css .reset-button.reset-button-small{
+    color: var(--mainColor);
+  }
+    /* Delete buttons */
+    #custom-css .delete-me button:hover,
+    #custom-css .delete-me button,
+    #custom-css my-delete-button .action-button-delete,
+    #custom-css my-delete-button .action-button-delete:active,
+    #custom-css .action-button-delete-selection{
+      background-color: var(--dangerBackgroundColor);
+      color: var(--whiteColor);
+    }
+    #custom-css .top-buttons .delete-history{
+      background-color: var(--dangerBackgroundColor);
+      color: var(--whiteColor);
+    }
+    /* Trash bin icon */
+    #custom-css my-global-icon[iconname="delete"] svg path[stroke="#000000"]{
+      stroke: var(--whiteColor) !important;
+    }
+    #custom-css my-global-icon[iconname="delete"] svg path[fill="#000000"],
+    #custom-css my-global-icon[iconname="delete"] svg rect[fill="#000000"]{
+      fill: var(--whiteColor) !important;
+    }
+  
+  /* Modals */
+  #custom-css my-input-readonly-copy input{
+    color: var(--whiteColor);
+  }
+  #custom-css .form-group-checkbox input + span {
+    border-color: var(--mainForegroundColor);
+  }
+  /* Inputs */
+  #custom-css input, 
+  #custom-css textarea{
+    background: var(--inputColor) !important;
+    color: var(--mainForegroundColor) !important;
+    border: 1px solid var(--mainBackgroundColor);
+  }
+  #custom-css .ng-select .ng-input>input{
+    background: none !important;
+    border: 0 !important;
+  }
+  #custom-css .am-donate-main .button input{
+    color: var(--mainColor) !important;
+    background: var(--whiteColor) !important;
+    border: none !important;
+  }
+  #custom-css .am-donate-main .donation-details{
+    color: var(--mainBackgroundColor);
+  }
+  #custom-css input[type="submit"],
+  #custom-css input[type="button"]{ /* Buttons */
+    color: var(--whiteColor) !important;
+    background: var(--mainColor) !important;
+    border: none !important;
+  }
+  #custom-css input[type="submit"]:hover,
+  #custom-css input[type="button"]:hover,
+  #custom-css .submit-button:hover input{ 
+    background: var(--mainHoverColor) !important;
+  }
+  #custom-css .submit-button.disabled input{ 
+    background: var(--menuForegroundColor) !important;
+  } 
+  
+  #custom-css .root .form-group-checkbox input:checked + span{
+    background: var(--mainColor) !important;
+  }
+  #custom-css .action-button .count{
+    color: var(--whiteColor);
+  }
+  #custom-css .modal-content input.readonly{
+    color: var(--whiteColor);
+  }
+  /* Selects */
+  #custom-css .peertube-select-container, input[type="text"]{
+    border: 1px solid var(--mainBackgroundColor) !important;
+    background: var(--inputColor) !important;
+    color: var(--mainForegroundColor) !important;
+  }
+  #custom-css .peertube-select-container > select {
+    background: var(--inputColor) !important;
+    color: var(--mainForegroundColor) !important;
+  }
+  #custom-css .peertube-select-container:after{
+    border-top-color: var(--mainForegroundColor) !important;
+  }
+  #custom-css .peertube-select-container > select > option{
+    background: var(--inputColor);
+    color: var(--mainForegroundColor) !important;
+  }
+  #custom-css .peertube-select-container > select option:hover, 
+  #custom-css .peertube-select-container > select > option:checked{
+    color: var(--whiteColor) !important; 
+    background-color: var(--mainColor) !important;
+  }
+  /* MultiSelects */
+  #custom-css .ui-multiselect{
+    background: var(--inputColor);
+    border: none;
+  }
+  #custom-css .ui-multiselect .ui-multiselect-trigger{
+    background: var(--inputColor);
+  }
+  p-multiselect .pi.pi-chevron-down::after{
+    border-top-color: var(--mainForegroundColor);
+  }
+  #custom-css .ui-multiselect .ui-multiselect-label {
+    color: var(--mainForegroundColor);
+  }
+  #custom-css .ui-multiselect-panel{
+    background: var(--inputColor);
+    color: var(--mainForegroundColor);
+  }
+  /* Icons colors & hovers */
+  /* Stroke */
+  #custom-css  my-global-icon svg circle[stroke="#000000"],
+  #custom-css  my-global-icon svg g[stroke="#000000"],
+  #custom-css  my-global-icon svg g[stroke="#000"],
+  #custom-css  my-global-icon svg path[stroke="#000"],
+  #custom-css  my-global-icon svg path[stroke="#000000"],
+  #custom-css  my-global-icon svg polygon[stroke="#000000"],
+  #custom-css  my-global-icon svg rect[stroke="#000000"],
+  #custom-css  my-global-icon svg ellipse[stroke="#000000"]{
+    stroke: var(--mainForegroundColor) !important;
+  }
+  
+  #custom-css my-global-icon[iconname="video-lang"] svg path{
+    fill: transparent;
+  }
+  
+  #custom-css  a my-global-icon svg circle[stroke="#000000"],
+  #custom-css  a my-global-icon svg g[stroke="#000000"],
+  #custom-css  a my-global-icon svg path[stroke="#000000"],
+  #custom-css  a my-global-icon svg polygon[stroke="#000000"],
+  #custom-css  a my-global-icon svg rect[stroke="#000000"],
+  #custom-css  a my-global-icon svg ellipse[stroke="#000000"]{
+    stroke: var(--mainForegroundColor) !important;
+  }
+  
+  #custom-css  a my-global-icon svg linearGradient stop{
+    stop-color: var(--mainForegroundColor);
+  }
+  
+  #custom-css .action-button:not(.action-button-edit) > my-global-icon svg g[stroke="#000000"],
+  #custom-css  my-global-icon[iconname="validate"] svg circle,
+  #custom-css  my-global-icon[iconname="validate"] svg polyline{
+    stroke: var(--whiteColor) !important;
+  }
+  
+  #custom-css .dropdown-item:hover my-global-icon svg circle[stroke="#000000"],
+  #custom-css .dropdown-item:hover my-global-icon svg g[stroke="#000000"],
+  #custom-css .dropdown-item:hover my-global-icon svg path[stroke="#000000"],
+  #custom-css .dropdown-item:hover my-global-icon svg path[stroke="#000"],
+  #custom-css .dropdown-item:hover my-global-icon svg polygon[stroke="#000000"],
+  #custom-css .dropdown-item:hover my-global-icon svg rect[stroke="#000000"],
+  #custom-css .dropdown-item:hover my-global-icon svg ellipse[stroke="#000000"],
+  #custom-css .dropdown-item:active my-global-icon svg circle[stroke="#000000"],
+  #custom-css .dropdown-item:active my-global-icon svg g[stroke="#000000"],
+  #custom-css .dropdown-item:active my-global-icon svg path[stroke="#000000"],
+  #custom-css .dropdown-item:active my-global-icon svg polygon[stroke="#000000"],
+  #custom-css .dropdown-item:active my-global-icon svg rect[stroke="#000000"],
+  #custom-css .dropdown-item:active my-global-icon svg ellipse[stroke="#000000"]{
+    stroke: var(--whiteColor) !important;
+  }
+  #custom-css .dropdown-item:hover my-global-icon svg linearGradient stop,
+  #custom-css .dropdown-item:active my-global-icon svg linearGradient stop{
+    stop-color: var(--whiteColor) !important;
+  }
+  
+    /* Fill */
+  #custom-css  a my-global-icon svg circle[fill="#000000"],
+  #custom-css  a my-global-icon svg g[fill="#000000"],
+  #custom-css  a my-global-icon svg path[fill="#000000"],
+  #custom-css  a my-global-icon svg polygon[fill="#000000"],
+  #custom-css  a my-global-icon svg rect[fill="#000000"],
+  #custom-css  span my-global-icon svg circle[fill="#000000"],
+  #custom-css  span my-global-icon svg g[fill="#000000"],
+  #custom-css  span my-global-icon svg path[fill="#000000"],
+  #custom-css  span my-global-icon svg polygon[fill="#000000"],
+  #custom-css  span my-global-icon svg rect[fill="#000000"],
+  #custom-css  .notification my-global-icon svg path[fill="#000000"]{
+    fill: var(--mainForegroundColor) !important;
+  }
+  
+  #custom-css .dropdown-item:hover my-global-icon svg circle[fill="#000000"],
+  #custom-css .dropdown-item:hover my-global-icon svg g[fill="#000000"],
+  #custom-css .dropdown-item:hover my-global-icon svg path[fill="#000000"],
+  #custom-css .dropdown-item:hover my-global-icon svg polygon[fill="#000000"],
+  #custom-css .dropdown-item:hover my-global-icon svg rect[fill="#000000"],
+  #custom-css .dropdown-item:active my-global-icon svg circle[fill="#000000"],
+  #custom-css .dropdown-item:active my-global-icon svg g[fill="#000000"],
+  #custom-css .dropdown-item:active my-global-icon svg path[fill="#000000"],
+  #custom-css .dropdown-item:active my-global-icon svg polygon[fill="#000000"],
+  #custom-css .dropdown-item:active my-global-icon svg rect[fill="#000000"]{
+    fill: var(--whiteColor) !important;
+  }
+  /* Mute servers Icon */
+  #custom-css .dropdown-item my-global-icon svg .st0{
+    stroke: var(--mainForegroundColor);
+  }
+  #custom-css .dropdown-item:hover my-global-icon svg .st0,
+  #custom-css .dropdown-item:active my-global-icon svg .st0 {
+    stroke: var(--whiteColor);
+  }
+  #custom-css .dropdown-item my-global-icon svg .st1 {
+    fill: var(--mainForegroundColor);
+  }
+  #custom-css .dropdown-item:hover my-global-icon svg .st1,
+  #custom-css .dropdown-item:active my-global-icon svg .st1 {
+    fill: var(--whiteColor);
+  }
+  /* Language Icon */
+  #custom-css my-global-icon[iconname="language"] svg path,
+  #custom-css .dropdown-item:hover my-global-icon[iconname="language"] svg path,
+  #custom-css .dropdown-item:active my-global-icon[iconname="language"] svg path {
+    fill: var(--mainForegroundColor) !important;
+  }
+  
+  /* Pagination */
+  #custom-css .ui-paginator .ui-paginator-element:hover:not(.ui-state-disabled){
+    color: var(--whiteColor) !important;
+    background-color: var(--mainHoverColor) !important;
+  }
+  
+  /* Notifications Panel */
+  #custom-css .popover-notifications.popover .popover-body .notifications-header,
+  #custom-css .popover-notifications.popover .popover-body .notifications-header a{
+    background-color: var(--menuAndHeaderBackgroundColor);
+    color: var(--mainForegroundColor) !important;
+  }
+  #custom-css .popover-notifications.popover .popover-body .notifications-header button{
+    color: var(--mainForegroundColor);
+  }
+  #custom-css .notification{
+    background-color: var(--mainBackgroundColor);
+    color: var(--mainForegroundColor);
+  }
+  #custom-css .notification my-global-icon .feather{
+    color: var(--mainForegroundColor) !important;
+  }
+  #custom-css .notification.unread{
+    background-color: var(--menuAndHeaderBackgroundColor);
+  }
+  #custom-css .popover-notifications.popover .popover-body .all-notifications{
+    background-color: var(--menuBackgroundColor);
+    color: var(--mainForegroundColor);
+  }
+  #custom-css .bs-popover-auto[x-placement^=bottom]>.arrow::after, .bs-popover-bottom>.arrow::after{
+    border-bottom-color: var(--menuBackgroundColor);
+  }
+  #custom-css #inbox-full svg path[stroke="#333333"]{
+    stroke: var(--mainForegroundColor);
+  }
+  
+  #custom-css .popover-notifications.popover .popover-body .all-notifications svg g path[stroke="#333333"]{
+    stroke: var(--mainForegroundColor);
+  }
+  #custom-css .popover-notifications.popover .popover-body .all-notifications svg g path[fill="#333333"]{
+    fill: var(--mainForegroundColor);
+  }
+  
+  #custom-css .header my-global-icon .feather{
+    color: var(--whiteColor);
+  }
+  
+  /* Create new playlist, url video... preview box */
+  #custom-css .root .preview-container .preview.no-image{
+    background-color: var(--menuAndHeaderBackgroundColor);
+    border-color: var(--mainBackgroundColor);
+  }
+  #custom-css .preview-container .button-file.with-icon g[stroke="#000000"]{
+    stroke: var(--whiteColor) !important;
+  }
+  
+  /* Subscriptions buttons */
+  #custom-css .btn-group-subscribe.unsubscribe-button .btn, .btn-group-subscribe.unsubscribe-button .btn:active, .btn-group-subscribe.unsubscribe-button .btn:focus{
+    background-color: var(--mainColor);
+    color: var(--whiteColor);
+  }
+  
+  /* Upload video container */
+  #custom-css .root-tabset.video-add-tabset .upload-video-container{
+    border-color: var(--mainForegroundColor) !important;
+  }
+  #custom-css .root-tabset.video-add-tabset>.nav a.nav-link.active{
+    border-color: var(--mainForegroundColor) !important;
+  }
+  
+  /* Calendar */
+  #custom-css p-calendar span input{
+    color: var(--mainForegroundColor) !important;
+  }
+  
+  #custom-css .ui-datepicker{
+    background-color: var(--menuAndHeaderBackgroundColor);
+    color: var(--mainForegroundColor);
+  }
+  
+  #custom-css .ui-datepicker .ui-datepicker-header,
+  #custom-css p-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
+  #custom-css p-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next{
+    background-color: var(--menuAndHeaderBackgroundColor);
+    color: var(--mainForegroundColor) !important;
+  }
+  #custom-css .ui-datepicker table td>a:hover,
+  #custom-css .ui-datepicker table td>span:hover{
+    background-color: var(--mainColor);
+    color: var(--whiteColor);
+  }
+  #custom-css .ui-datepicker table td>a.ui-state-active,
+  #custom-css .ui-datepicker table td>span.ui-state-active{
+    background-color: var(--mainHoverColor);
+    color: var(--whiteColor);
+  }
+  
+  #custom-css p-calendar .ui-datepicker .ui-timepicker .pi.pi-chevron-down, 
+  #custom-css p-calendar .ui-datepicker .ui-timepicker .pi.pi-chevron-up,
+  #custom-css p-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover,
+  #custom-css p-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover,
+  #custom-css p-calendar .ui-datepicker .ui-timepicker .pi.pi-chevron-down:hover, 
+  #custom-css p-calendar .ui-datepicker .ui-timepicker .pi.pi-chevron-up:hover{
+    color: var(--whiteColor) !important;
+  }
+  
+  /* 404 Not found page */
+  #custom-css my-page-not-found img {
+    width: 350px !important;
+    margin-bottom: 0px !important;
+  }
+  
+  /* About */
+  #custom-css .anchor-link .section-title {
+    color: inherit;
+  }
\ No newline at end of file
diff --git a/public/css/styles.css b/public/css/styles.css
new file mode 100644
index 0000000..0c95b2b
--- /dev/null
+++ b/public/css/styles.css
@@ -0,0 +1,15423 @@
+@charset "UTF-8";@font-face {
+    font-family: Source Sans Pro;
+    font-weight: 200 900;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: swap;
+    src: url(SourceSans3VF-Roman.ttf.123081915e9fbb9f01bd.woff2) format("woff2")
+}
+
+@font-face {
+    font-family: Source Sans Pro;
+    font-weight: 200 900;
+    font-style: italic;
+    font-stretch: normal;
+    font-display: swap;
+    src: url(SourceSans3VF-Italic.ttf.797355866311afb6142d.woff2) format("woff2")
+}
+
+.peertube-button {
+    padding-top: 0;
+    padding-bottom: 0;
+    border: 0;
+    font-weight: 600;
+    font-size: 15px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px!important;
+    text-align: center;
+    cursor: pointer
+}
+
+@supports (padding-inline-start: 13px) {
+    .peertube-button {
+        padding-inline-start:13px}
+}
+
+@supports not (padding-inline-start: 13px) {
+    .peertube-button {
+        padding-left: 13px
+    }
+}
+
+@supports (padding-inline-end: 17px) {
+    .peertube-button {
+        padding-inline-end:17px}
+}
+
+@supports not (padding-inline-end: 17px) {
+    .peertube-button {
+        padding-right: 17px
+    }
+}
+
+.peertube-button-link {
+    padding-top: 0;
+    padding-bottom: 0;
+    border: 0;
+    font-weight: 600;
+    font-size: 15px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px!important;
+    text-align: center;
+    cursor: pointer;
+    display: inline-block
+}
+
+.peertube-button-link:active,.peertube-button-link:focus,.peertube-button-link:hover {
+    text-decoration: none!important;
+    outline: none!important
+}
+
+@supports (padding-inline-start: 13px) {
+    .peertube-button-link {
+        padding-inline-start:13px}
+}
+
+@supports not (padding-inline-start: 13px) {
+    .peertube-button-link {
+        padding-left: 13px
+    }
+}
+
+@supports (padding-inline-end: 17px) {
+    .peertube-button-link {
+        padding-inline-end:17px}
+}
+
+@supports not (padding-inline-end: 17px) {
+    .peertube-button-link {
+        padding-right: 17px
+    }
+}
+
+.orange-button.focus-visible,.orange-button:focus {
+    box-shadow: 0 0 0 .2rem var(--mainColorLightest)
+}
+
+.orange-button,.orange-button:active,.orange-button:focus {
+    color: #fff;
+    background-color: var(--mainColor)
+}
+
+.orange-button:hover {
+    color: #fff;
+    background-color: var(--mainHoverColor)
+}
+
+.orange-button.disabled,.orange-button[disabled] {
+    cursor: default;
+    color: #fff;
+    background-color: #c6c6c6
+}
+
+.orange-button my-global-icon ::ng-deep .feather,.orange-button my-global-icon ::ng-deep .material,.orange-button my-global-icon ::ng-deep .misc {
+    color: #fff
+}
+
+.orange-button-inverted {
+    border: 2px solid var(--mainColor);
+    font-weight: 600
+}
+
+.orange-button-inverted.focus-visible,.orange-button-inverted:focus {
+    box-shadow: 0 0 0 .2rem var(--mainColorLightest)
+}
+
+.orange-button-inverted,.orange-button-inverted:active,.orange-button-inverted:focus {
+    color: var(--mainColor);
+    background-color: var(--mainBackgroundColor)
+}
+
+.orange-button-inverted:hover {
+    color: var(--mainColor);
+    background-color: var(--mainColorLightest)
+}
+
+.orange-button-inverted.disabled,.orange-button-inverted[disabled] {
+    cursor: default;
+    color: var(--mainColor);
+    background-color: #c6c6c6
+}
+
+.orange-button-inverted my-global-icon ::ng-deep .feather,.orange-button-inverted my-global-icon ::ng-deep .material,.orange-button-inverted my-global-icon ::ng-deep .misc {
+    color: var(--mainColor)
+}
+
+.grey-button {
+    background-color: #e5e5e5;
+    color: var(--greyForegroundColor)
+}
+
+.grey-button.focus-visible,.grey-button:focus {
+    box-shadow: 0 0 0 .2rem #5858580d
+}
+
+.grey-button.disabled,.grey-button:active,.grey-button:focus,.grey-button:hover,.grey-button[disabled] {
+    color: var(--greyForegroundColor);
+    background-color: #efefef
+}
+
+.grey-button.disabled,.grey-button[disabled] {
+    cursor: default
+}
+
+.grey-button my-global-icon ::ng-deep .feather,.grey-button my-global-icon ::ng-deep .material,.grey-button my-global-icon ::ng-deep .misc {
+    color: var(--greyForegroundColor)
+}
+
+.tertiary-button {
+    color: var(--greyForegroundColor);
+    background-color: initial
+}
+
+.tertiary-button.focus-visible,.tertiary-button:focus {
+    box-shadow: 0 0 0 .2rem #5858580d
+}
+
+.tertiary-button .disabled,.tertiary-button[disabled] {
+    cursor: default
+}
+
+.tertiary-button my-global-icon ::ng-deep .feather,.tertiary-button my-global-icon ::ng-deep .material,.tertiary-button my-global-icon ::ng-deep .misc {
+    color: #0000
+}
+
+.peertube-radio-container [type=radio]:checked,.peertube-radio-container [type=radio]:not(:checked) {
+    position: absolute;
+    left: -9999px
+}
+
+.peertube-radio-container [type=radio]:checked+label,.peertube-radio-container [type=radio]:not(:checked)+label {
+    position: relative;
+    padding-left: 28px;
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block
+}
+
+.peertube-radio-container [type=radio]:checked+label:before,.peertube-radio-container [type=radio]:not(:checked)+label:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #c6c6c6;
+    border-radius: 100%;
+    background: #fff
+}
+
+.peertube-radio-container [type=radio]:checked+label:after,.peertube-radio-container [type=radio]:not(:checked)+label:after {
+    content: "";
+    width: 10px;
+    height: 10px;
+    background: var(--mainColor);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 100%;
+    transition: all .2s ease
+}
+
+.peertube-radio-container [type=radio]:not(:checked)+label:after {
+    opacity: 0;
+    transform: scale(0)
+}
+
+.peertube-radio-container [type=radio]:checked+label:after {
+    opacity: 1;
+    transform: scale(1)
+}
+
+peertube-container>.layout-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap
+}
+
+peertube-container>.layout-column {
+    display: flex;
+    flex-direction: column
+}
+
+peertube-container>.header {
+    margin: 30px 0 15px
+}
+
+peertube-container>.header>h4 {
+    margin-bottom: 0
+}
+
+peertube-channel-miniature,peertube-playlist-miniature,peertube-video-miniature {
+    margin-right: 30px
+}
+
+.ng-select.ng-select-opened>.ng-select-container {
+    background: #fff;
+    border-color: #b3b3b3 #ccc #d9d9d9
+}
+
+.ng-select.ng-select-opened>.ng-select-container:hover {
+    box-shadow: none
+}
+
+.ng-select.ng-select-opened>.ng-select-container .ng-arrow {
+    top: -2px;
+    border-color: #0000 #0000 #999;
+    border-width: 0 5px 5px
+}
+
+.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover {
+    border-color: #0000 #0000 #333
+}
+
+.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.ng-select.ng-select-opened.ng-select-top>.ng-select-container {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0
+}
+
+.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
+    border-color: #f2690d;
+    box-shadow: 0 0 0 .2rem var(--mainColorLightest)
+}
+
+.ng-select.ng-select-disabled>.ng-select-container {
+    background-color: #f9f9f9
+}
+
+.ng-select .ng-has-value .ng-placeholder {
+    display: none
+}
+
+.ng-select .ng-select-container {
+    color: #333;
+    background-color: #fff;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    min-height: 30px;
+    align-items: center
+}
+
+.ng-select .ng-select-container:hover {
+    box-shadow: 0 1px 0 #0000000f
+}
+
+.ng-select .ng-select-container .ng-value-container {
+    align-items: center;
+    padding-left: 15px
+}
+
+[dir=rtl] .ng-select .ng-select-container .ng-value-container {
+    padding-right: 15px;
+    padding-left: 0
+}
+
+.ng-select .ng-select-container .ng-value-container .ng-placeholder {
+    color: #999
+}
+
+.ng-select.ng-select-single .ng-select-container {
+    height: 30px
+}
+
+.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
+    top: 5px;
+    left: 0;
+    padding-left: 15px;
+    padding-right: 50px
+}
+
+[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
+    padding-right: 15px;
+    padding-left: 50px
+}
+
+.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value {
+    background-color: #f9f9f9;
+    border: 1px solid #e6e6e6
+}
+
+.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label {
+    padding: 0 5px
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container {
+    padding-top: 5px;
+    padding-left: 7px
+}
+
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
+    padding-right: 7px;
+    padding-left: 0
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+    font-size: 15px;
+    margin-bottom: 5px;
+    color: #333;
+    background-color: #fef3ec;
+    border-radius: 2px;
+    margin-right: 5px
+}
+
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+    margin-right: 0;
+    margin-left: 5px
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled {
+    background-color: #f9f9f9
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label {
+    padding-left: 5px
+}
+
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label {
+    padding-left: 0;
+    padding-right: 5px
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label {
+    display: inline-block;
+    padding: 1px 5px
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover {
+    background-color: #fde4d3
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left {
+    border-right: 1px solid #fbd5bb
+}
+
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left {
+    border-left: 1px solid #fbd5bb;
+    border-right: none
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right {
+    border-left: 1px solid #fbd5bb
+}
+
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right {
+    border-left: 0;
+    border-right: 1px solid #fbd5bb
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input {
+    padding: 0 0 3px 3px
+}
+
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input {
+    padding: 0 3px 3px 0
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input {
+    color: #000
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
+    top: 5px;
+    padding-bottom: 5px;
+    padding-left: 3px
+}
+
+[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
+    padding-right: 3px;
+    padding-left: 0
+}
+
+.ng-select .ng-clear-wrapper {
+    color: #999
+}
+
+.ng-select .ng-clear-wrapper:hover .ng-clear {
+    color: #d0021b
+}
+
+.ng-select .ng-spinner-zone {
+    padding: 5px 5px 0 0
+}
+
+[dir=rtl] .ng-select .ng-spinner-zone {
+    padding: 5px 0 0 5px
+}
+
+.ng-select .ng-arrow-wrapper {
+    width: 25px;
+    padding-right: 5px
+}
+
+[dir=rtl] .ng-select .ng-arrow-wrapper {
+    padding-left: 5px;
+    padding-right: 0
+}
+
+.ng-select .ng-arrow-wrapper:hover .ng-arrow {
+    border-top-color: #666
+}
+
+.ng-select .ng-arrow-wrapper .ng-arrow {
+    border-color: #999 #0000 #0000;
+    border-style: solid;
+    border-width: 5px 5px 2.5px
+}
+
+.ng-dropdown-panel {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 1px 0 #0000000f;
+    left: 0
+}
+
+.ng-dropdown-panel.ng-select-bottom {
+    top: 100%;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-top-color: #e6e6e6;
+    margin-top: -1px
+}
+
+.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px
+}
+
+.ng-dropdown-panel.ng-select-top {
+    bottom: 100%;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    border-bottom-color: #e6e6e6;
+    margin-bottom: -1px
+}
+
+.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px
+}
+
+.ng-dropdown-panel .ng-dropdown-header {
+    border-bottom: 1px solid #ccc;
+    padding: 5px 7px
+}
+
+.ng-dropdown-panel .ng-dropdown-footer {
+    border-top: 1px solid #ccc;
+    padding: 5px 7px
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup {
+    -webkit-user-select: none;
+    user-select: none;
+    padding: 8px 10px;
+    font-weight: 500;
+    color: #0000008a;
+    cursor: pointer
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled {
+    cursor: default
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked {
+    background-color: #fef9f5
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked {
+    background-color: #fef3ec;
+    font-weight: 600
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    background-color: #fff;
+    color: #000000de;
+    padding: 8px 10px
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
+    color: #333;
+    background-color: #fef3ec
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label {
+    font-weight: 600
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
+    background-color: #fef9f5;
+    color: #333
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled {
+    color: #ccc
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child {
+    padding-left: 22px
+}
+
+[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child {
+    padding-right: 22px;
+    padding-left: 0
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label {
+    font-size: 80%;
+    font-weight: 400;
+    padding-right: 5px
+}
+
+[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label {
+    padding-left: 5px;
+    padding-right: 0
+}
+
+[dir=rtl] .ng-dropdown-panel {
+    direction: rtl;
+    text-align: right
+}
+
+.ng-select {
+    font-size: 15px
+}
+
+.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
+    border-color: #ccc!important
+}
+
+.ng-select .ng-select-container {
+    background-color: var(--inputBackgroundColor)
+}
+
+@supports (padding-inline-end: 12px) {
+    .ng-select .ng-arrow-wrapper {
+        padding-inline-end:12px}
+}
+
+@supports not (padding-inline-end: 12px) {
+    .ng-select .ng-arrow-wrapper {
+        padding-right: 12px
+    }
+}
+
+.ng-select.ng-select-single .ng-value-container .ng-value {
+    color: var(--inputForegroundColor)
+}
+
+.ng-select.ng-select-single .ng-value-container .ng-value .ng-value-label {
+    display: flex;
+    align-items: center
+}
+
+@supports (padding-inline-start: 12px) {
+    .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
+        padding-inline-start:12px}
+}
+
+@supports not (padding-inline-start: 12px) {
+    .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
+        padding-left: 12px
+    }
+}
+
+@supports (margin-inline-start: 12px) {
+    .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+        margin-inline-start:12px}
+}
+
+@supports not (margin-inline-start: 12px) {
+    .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+        margin-left: 12px
+    }
+}
+
+:root {
+    --blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:red;--orange:#fd7e14;--yellow:#ffc107;--green:#39cc0b;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#39cc0b;--info:#17a2b8;--warning:#ffc107;--danger:red;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:900px;--breakpoint-xl:1200px;--breakpoint-xxl:1600px;--breakpoint-fhd:1800px;--breakpoint-qhd:2560px;--breakpoint-uhd:3840px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
+
+*,:after,:before {
+    box-sizing: border-box
+}
+
+html {
+    font-family: sans-serif;
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: rgba(0,0,0,0)
+}
+
+article,aside,figcaption,figure,footer,header,hgroup,main,nav,section {
+    display: block
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #212529;
+    text-align: left;
+    background-color: #fff
+}
+
+[tabindex="-1"]:focus:not(:focus-visible) {
+    outline: 0!important
+}
+
+hr {
+    box-sizing: initial;
+    height: 0;
+    overflow: visible
+}
+
+h1,h2,h3,h4,h5,h6 {
+    margin-top: 0;
+    margin-bottom: .5rem
+}
+
+p {
+    margin-top: 0;
+    margin-bottom: 1rem
+}
+
+abbr[data-original-title],abbr[title] {
+    text-decoration: underline;
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+    cursor: help;
+    border-bottom: 0;
+    -webkit-text-decoration-skip-ink: none;
+    text-decoration-skip-ink: none
+}
+
+address {
+    font-style: normal;
+    line-height: inherit
+}
+
+address,dl,ol,ul {
+    margin-bottom: 1rem
+}
+
+dl,ol,ul {
+    margin-top: 0
+}
+
+ol ol,ol ul,ul ol,ul ul {
+    margin-bottom: 0
+}
+
+dt {
+    font-weight: 700
+}
+
+dd {
+    margin-bottom: .5rem;
+    margin-left: 0
+}
+
+blockquote {
+    margin: 0 0 1rem
+}
+
+b,strong {
+    font-weight: bolder
+}
+
+small {
+    font-size: 80%
+}
+
+sub,sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: initial
+}
+
+sub {
+    bottom: -.25em
+}
+
+sup {
+    top: -.5em
+}
+
+a {
+    color: #007bff;
+    text-decoration: none;
+    background-color: initial
+}
+
+a:hover {
+    color: #0056b3;
+    text-decoration: underline
+}
+
+a:not([href]):not([class]),a:not([href]):not([class]):hover {
+    color: inherit;
+    text-decoration: none
+}
+
+code,kbd,pre,samp {
+    font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
+    font-size: 1em
+}
+
+pre {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    overflow: auto;
+    -ms-overflow-style: scrollbar
+}
+
+figure {
+    margin: 0 0 1rem
+}
+
+img {
+    border-style: none
+}
+
+img,svg {
+    vertical-align: middle
+}
+
+svg {
+    overflow: hidden
+}
+
+table {
+    border-collapse: collapse
+}
+
+caption {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    color: #6c757d;
+    text-align: left;
+    caption-side: bottom
+}
+
+th {
+    text-align: inherit;
+    text-align: -webkit-match-parent
+}
+
+label {
+    display: inline-block;
+    margin-bottom: .5rem
+}
+
+button {
+    border-radius: 0
+}
+
+button:focus:not(:focus-visible) {
+    outline: 0
+}
+
+button,input,optgroup,select,textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit
+}
+
+button,input {
+    overflow: visible
+}
+
+button,select {
+    text-transform: none
+}
+
+[role=button] {
+    cursor: pointer
+}
+
+select {
+    word-wrap: normal
+}
+
+[type=button],[type=reset],[type=submit],button {
+    -webkit-appearance: button
+}
+
+[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled) {
+    cursor: pointer
+}
+
+[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
+    padding: 0;
+    border-style: none
+}
+
+input[type=checkbox],input[type=radio] {
+    box-sizing: border-box;
+    padding: 0
+}
+
+textarea {
+    overflow: auto;
+    resize: vertical
+}
+
+fieldset {
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    border: 0
+}
+
+legend {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    padding: 0;
+    margin-bottom: .5rem;
+    font-size: 1.5rem;
+    line-height: inherit;
+    color: inherit;
+    white-space: normal
+}
+
+progress {
+    vertical-align: initial
+}
+
+[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
+    height: auto
+}
+
+[type=search] {
+    outline-offset: -2px;
+    -webkit-appearance: none
+}
+
+[type=search]::-webkit-search-decoration {
+    -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+    font: inherit;
+    -webkit-appearance: button
+}
+
+output {
+    display: inline-block
+}
+
+summary {
+    display: list-item;
+    cursor: pointer
+}
+
+template {
+    display: none
+}
+
+.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
+    margin-bottom: .5rem;
+    font-weight: 500;
+    line-height: 1.2
+}
+
+.h1,h1 {
+    font-size: 2.5rem
+}
+
+.h2,h2 {
+    font-size: 2rem
+}
+
+.h3,h3 {
+    font-size: 1.75rem
+}
+
+.h4,h4 {
+    font-size: 1.5rem
+}
+
+.h5,h5 {
+    font-size: 1.25rem
+}
+
+.h6,h6 {
+    font-size: 1rem
+}
+
+.lead {
+    font-size: 1.25rem;
+    font-weight: 300
+}
+
+.display-1 {
+    font-size: 6rem
+}
+
+.display-1,.display-2 {
+    font-weight: 300;
+    line-height: 1.2
+}
+
+.display-2 {
+    font-size: 5.5rem
+}
+
+.display-3 {
+    font-size: 4.5rem
+}
+
+.display-3,.display-4 {
+    font-weight: 300;
+    line-height: 1.2
+}
+
+.display-4 {
+    font-size: 3.5rem
+}
+
+hr {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border: 0;
+    border-top: 1px solid #0000001a
+}
+
+.small,small {
+    font-size: 80%;
+    font-weight: 400
+}
+
+.mark,mark {
+    padding: .2em;
+    background-color: #fcf8e3
+}
+
+.list-inline,.list-unstyled {
+    padding-left: 0;
+    list-style: none
+}
+
+.list-inline-item {
+    display: inline-block
+}
+
+.list-inline-item:not(:last-child) {
+    margin-right: .5rem
+}
+
+.initialism {
+    font-size: 90%;
+    text-transform: uppercase
+}
+
+.blockquote {
+    margin-bottom: 1rem;
+    font-size: 1.25rem
+}
+
+.blockquote-footer {
+    display: block;
+    font-size: 80%;
+    color: #6c757d
+}
+
+.blockquote-footer:before {
+    content: "— "
+}
+
+.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl {
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto
+}
+
+@media (min-width: 576px) {
+    .container,.container-sm {
+        max-width:420px
+    }
+}
+
+@media (min-width: 768px) {
+    .container,.container-md,.container-sm {
+        max-width:720px
+    }
+}
+
+@media (min-width: 900px) {
+    .container,.container-lg,.container-md,.container-sm {
+        max-width:900px
+    }
+}
+
+@media (min-width: 1200px) {
+    .container,.container-lg,.container-md,.container-sm,.container-xl {
+        max-width:1140px
+    }
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px
+}
+
+.no-gutters {
+    margin-right: 0;
+    margin-left: 0
+}
+
+.no-gutters>.col,.no-gutters>[class*=col-] {
+    padding-right: 0;
+    padding-left: 0
+}
+
+.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-auto,.col-fhd,.col-fhd-1,.col-fhd-2,.col-fhd-3,.col-fhd-4,.col-fhd-5,.col-fhd-6,.col-fhd-7,.col-fhd-8,.col-fhd-9,.col-fhd-10,.col-fhd-11,.col-fhd-12,.col-fhd-auto,.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-auto,.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-auto,.col-qhd,.col-qhd-1,.col-qhd-2,.col-qhd-3,.col-qhd-4,.col-qhd-5,.col-qhd-6,.col-qhd-7,.col-qhd-8,.col-qhd-9,.col-qhd-10,.col-qhd-11,.col-qhd-12,.col-qhd-auto,.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-auto,.col-uhd,.col-uhd-1,.col-uhd-2,.col-uhd-3,.col-uhd-4,.col-uhd-5,.col-uhd-6,.col-uhd-7,.col-uhd-8,.col-uhd-9,.col-uhd-10,.col-uhd-11,.col-uhd-12,.col-uhd-auto,.col-xl,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-auto,.col-xxl,.col-xxl-1,.col-xxl-2,.col-xxl-3,.col-xxl-4,.col-xxl-5,.col-xxl-6,.col-xxl-7,.col-xxl-8,.col-xxl-9,.col-xxl-10,.col-xxl-11,.col-xxl-12,.col-xxl-auto {
+    position: relative;
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px
+}
+
+.col {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%
+}
+
+.row-cols-1>* {
+    flex: 0 0 100%;
+    max-width: 100%
+}
+
+.row-cols-2>* {
+    flex: 0 0 50%;
+    max-width: 50%
+}
+
+.row-cols-3>* {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%
+}
+
+.row-cols-4>* {
+    flex: 0 0 25%;
+    max-width: 25%
+}
+
+.row-cols-5>* {
+    flex: 0 0 20%;
+    max-width: 20%
+}
+
+.row-cols-6>* {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%
+}
+
+.col-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%
+}
+
+.col-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%
+}
+
+.col-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%
+}
+
+.col-3 {
+    flex: 0 0 25%;
+    max-width: 25%
+}
+
+.col-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%
+}
+
+.col-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%
+}
+
+.col-6 {
+    flex: 0 0 50%;
+    max-width: 50%
+}
+
+.col-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%
+}
+
+.col-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%
+}
+
+.col-9 {
+    flex: 0 0 75%;
+    max-width: 75%
+}
+
+.col-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%
+}
+
+.col-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%
+}
+
+.col-12 {
+    flex: 0 0 100%;
+    max-width: 100%
+}
+
+.order-first {
+    order: -1
+}
+
+.order-last {
+    order: 13
+}
+
+.order-0 {
+    order: 0
+}
+
+.order-1 {
+    order: 1
+}
+
+.order-2 {
+    order: 2
+}
+
+.order-3 {
+    order: 3
+}
+
+.order-4 {
+    order: 4
+}
+
+.order-5 {
+    order: 5
+}
+
+.order-6 {
+    order: 6
+}
+
+.order-7 {
+    order: 7
+}
+
+.order-8 {
+    order: 8
+}
+
+.order-9 {
+    order: 9
+}
+
+.order-10 {
+    order: 10
+}
+
+.order-11 {
+    order: 11
+}
+
+.order-12 {
+    order: 12
+}
+
+.offset-1 {
+    margin-left: 8.3333333333%
+}
+
+.offset-2 {
+    margin-left: 16.6666666667%
+}
+
+.offset-3 {
+    margin-left: 25%
+}
+
+.offset-4 {
+    margin-left: 33.3333333333%
+}
+
+.offset-5 {
+    margin-left: 41.6666666667%
+}
+
+.offset-6 {
+    margin-left: 50%
+}
+
+.offset-7 {
+    margin-left: 58.3333333333%
+}
+
+.offset-8 {
+    margin-left: 66.6666666667%
+}
+
+.offset-9 {
+    margin-left: 75%
+}
+
+.offset-10 {
+    margin-left: 83.3333333333%
+}
+
+.offset-11 {
+    margin-left: 91.6666666667%
+}
+
+@media (min-width: 576px) {
+    .col-sm {
+        flex-basis:0;
+        flex-grow: 1;
+        max-width: 100%
+    }
+
+    .row-cols-sm-1>* {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .row-cols-sm-2>* {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .row-cols-sm-3>* {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .row-cols-sm-4>* {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .row-cols-sm-5>* {
+        flex: 0 0 20%;
+        max-width: 20%
+    }
+
+    .row-cols-sm-6>* {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-sm-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%
+    }
+
+    .col-sm-1 {
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%
+    }
+
+    .col-sm-2 {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-sm-3 {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .col-sm-4 {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .col-sm-5 {
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%
+    }
+
+    .col-sm-6 {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .col-sm-7 {
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%
+    }
+
+    .col-sm-8 {
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%
+    }
+
+    .col-sm-9 {
+        flex: 0 0 75%;
+        max-width: 75%
+    }
+
+    .col-sm-10 {
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%
+    }
+
+    .col-sm-11 {
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%
+    }
+
+    .col-sm-12 {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .order-sm-first {
+        order: -1
+    }
+
+    .order-sm-last {
+        order: 13
+    }
+
+    .order-sm-0 {
+        order: 0
+    }
+
+    .order-sm-1 {
+        order: 1
+    }
+
+    .order-sm-2 {
+        order: 2
+    }
+
+    .order-sm-3 {
+        order: 3
+    }
+
+    .order-sm-4 {
+        order: 4
+    }
+
+    .order-sm-5 {
+        order: 5
+    }
+
+    .order-sm-6 {
+        order: 6
+    }
+
+    .order-sm-7 {
+        order: 7
+    }
+
+    .order-sm-8 {
+        order: 8
+    }
+
+    .order-sm-9 {
+        order: 9
+    }
+
+    .order-sm-10 {
+        order: 10
+    }
+
+    .order-sm-11 {
+        order: 11
+    }
+
+    .order-sm-12 {
+        order: 12
+    }
+
+    .offset-sm-0 {
+        margin-left: 0
+    }
+
+    .offset-sm-1 {
+        margin-left: 8.3333333333%
+    }
+
+    .offset-sm-2 {
+        margin-left: 16.6666666667%
+    }
+
+    .offset-sm-3 {
+        margin-left: 25%
+    }
+
+    .offset-sm-4 {
+        margin-left: 33.3333333333%
+    }
+
+    .offset-sm-5 {
+        margin-left: 41.6666666667%
+    }
+
+    .offset-sm-6 {
+        margin-left: 50%
+    }
+
+    .offset-sm-7 {
+        margin-left: 58.3333333333%
+    }
+
+    .offset-sm-8 {
+        margin-left: 66.6666666667%
+    }
+
+    .offset-sm-9 {
+        margin-left: 75%
+    }
+
+    .offset-sm-10 {
+        margin-left: 83.3333333333%
+    }
+
+    .offset-sm-11 {
+        margin-left: 91.6666666667%
+    }
+}
+
+@media (min-width: 768px) {
+    .col-md {
+        flex-basis:0;
+        flex-grow: 1;
+        max-width: 100%
+    }
+
+    .row-cols-md-1>* {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .row-cols-md-2>* {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .row-cols-md-3>* {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .row-cols-md-4>* {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .row-cols-md-5>* {
+        flex: 0 0 20%;
+        max-width: 20%
+    }
+
+    .row-cols-md-6>* {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-md-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%
+    }
+
+    .col-md-1 {
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%
+    }
+
+    .col-md-2 {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-md-3 {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .col-md-4 {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .col-md-5 {
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%
+    }
+
+    .col-md-6 {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .col-md-7 {
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%
+    }
+
+    .col-md-8 {
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%
+    }
+
+    .col-md-9 {
+        flex: 0 0 75%;
+        max-width: 75%
+    }
+
+    .col-md-10 {
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%
+    }
+
+    .col-md-11 {
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%
+    }
+
+    .col-md-12 {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .order-md-first {
+        order: -1
+    }
+
+    .order-md-last {
+        order: 13
+    }
+
+    .order-md-0 {
+        order: 0
+    }
+
+    .order-md-1 {
+        order: 1
+    }
+
+    .order-md-2 {
+        order: 2
+    }
+
+    .order-md-3 {
+        order: 3
+    }
+
+    .order-md-4 {
+        order: 4
+    }
+
+    .order-md-5 {
+        order: 5
+    }
+
+    .order-md-6 {
+        order: 6
+    }
+
+    .order-md-7 {
+        order: 7
+    }
+
+    .order-md-8 {
+        order: 8
+    }
+
+    .order-md-9 {
+        order: 9
+    }
+
+    .order-md-10 {
+        order: 10
+    }
+
+    .order-md-11 {
+        order: 11
+    }
+
+    .order-md-12 {
+        order: 12
+    }
+
+    .offset-md-0 {
+        margin-left: 0
+    }
+
+    .offset-md-1 {
+        margin-left: 8.3333333333%
+    }
+
+    .offset-md-2 {
+        margin-left: 16.6666666667%
+    }
+
+    .offset-md-3 {
+        margin-left: 25%
+    }
+
+    .offset-md-4 {
+        margin-left: 33.3333333333%
+    }
+
+    .offset-md-5 {
+        margin-left: 41.6666666667%
+    }
+
+    .offset-md-6 {
+        margin-left: 50%
+    }
+
+    .offset-md-7 {
+        margin-left: 58.3333333333%
+    }
+
+    .offset-md-8 {
+        margin-left: 66.6666666667%
+    }
+
+    .offset-md-9 {
+        margin-left: 75%
+    }
+
+    .offset-md-10 {
+        margin-left: 83.3333333333%
+    }
+
+    .offset-md-11 {
+        margin-left: 91.6666666667%
+    }
+}
+
+@media (min-width: 900px) {
+    .col-lg {
+        flex-basis:0;
+        flex-grow: 1;
+        max-width: 100%
+    }
+
+    .row-cols-lg-1>* {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .row-cols-lg-2>* {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .row-cols-lg-3>* {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .row-cols-lg-4>* {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .row-cols-lg-5>* {
+        flex: 0 0 20%;
+        max-width: 20%
+    }
+
+    .row-cols-lg-6>* {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-lg-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%
+    }
+
+    .col-lg-1 {
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%
+    }
+
+    .col-lg-2 {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-lg-3 {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .col-lg-4 {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .col-lg-5 {
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%
+    }
+
+    .col-lg-6 {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .col-lg-7 {
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%
+    }
+
+    .col-lg-8 {
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%
+    }
+
+    .col-lg-9 {
+        flex: 0 0 75%;
+        max-width: 75%
+    }
+
+    .col-lg-10 {
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%
+    }
+
+    .col-lg-11 {
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%
+    }
+
+    .col-lg-12 {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .order-lg-first {
+        order: -1
+    }
+
+    .order-lg-last {
+        order: 13
+    }
+
+    .order-lg-0 {
+        order: 0
+    }
+
+    .order-lg-1 {
+        order: 1
+    }
+
+    .order-lg-2 {
+        order: 2
+    }
+
+    .order-lg-3 {
+        order: 3
+    }
+
+    .order-lg-4 {
+        order: 4
+    }
+
+    .order-lg-5 {
+        order: 5
+    }
+
+    .order-lg-6 {
+        order: 6
+    }
+
+    .order-lg-7 {
+        order: 7
+    }
+
+    .order-lg-8 {
+        order: 8
+    }
+
+    .order-lg-9 {
+        order: 9
+    }
+
+    .order-lg-10 {
+        order: 10
+    }
+
+    .order-lg-11 {
+        order: 11
+    }
+
+    .order-lg-12 {
+        order: 12
+    }
+
+    .offset-lg-0 {
+        margin-left: 0
+    }
+
+    .offset-lg-1 {
+        margin-left: 8.3333333333%
+    }
+
+    .offset-lg-2 {
+        margin-left: 16.6666666667%
+    }
+
+    .offset-lg-3 {
+        margin-left: 25%
+    }
+
+    .offset-lg-4 {
+        margin-left: 33.3333333333%
+    }
+
+    .offset-lg-5 {
+        margin-left: 41.6666666667%
+    }
+
+    .offset-lg-6 {
+        margin-left: 50%
+    }
+
+    .offset-lg-7 {
+        margin-left: 58.3333333333%
+    }
+
+    .offset-lg-8 {
+        margin-left: 66.6666666667%
+    }
+
+    .offset-lg-9 {
+        margin-left: 75%
+    }
+
+    .offset-lg-10 {
+        margin-left: 83.3333333333%
+    }
+
+    .offset-lg-11 {
+        margin-left: 91.6666666667%
+    }
+}
+
+@media (min-width: 1200px) {
+    .col-xl {
+        flex-basis:0;
+        flex-grow: 1;
+        max-width: 100%
+    }
+
+    .row-cols-xl-1>* {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .row-cols-xl-2>* {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .row-cols-xl-3>* {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .row-cols-xl-4>* {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .row-cols-xl-5>* {
+        flex: 0 0 20%;
+        max-width: 20%
+    }
+
+    .row-cols-xl-6>* {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-xl-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%
+    }
+
+    .col-xl-1 {
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%
+    }
+
+    .col-xl-2 {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-xl-3 {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .col-xl-4 {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .col-xl-5 {
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%
+    }
+
+    .col-xl-6 {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .col-xl-7 {
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%
+    }
+
+    .col-xl-8 {
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%
+    }
+
+    .col-xl-9 {
+        flex: 0 0 75%;
+        max-width: 75%
+    }
+
+    .col-xl-10 {
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%
+    }
+
+    .col-xl-11 {
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%
+    }
+
+    .col-xl-12 {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .order-xl-first {
+        order: -1
+    }
+
+    .order-xl-last {
+        order: 13
+    }
+
+    .order-xl-0 {
+        order: 0
+    }
+
+    .order-xl-1 {
+        order: 1
+    }
+
+    .order-xl-2 {
+        order: 2
+    }
+
+    .order-xl-3 {
+        order: 3
+    }
+
+    .order-xl-4 {
+        order: 4
+    }
+
+    .order-xl-5 {
+        order: 5
+    }
+
+    .order-xl-6 {
+        order: 6
+    }
+
+    .order-xl-7 {
+        order: 7
+    }
+
+    .order-xl-8 {
+        order: 8
+    }
+
+    .order-xl-9 {
+        order: 9
+    }
+
+    .order-xl-10 {
+        order: 10
+    }
+
+    .order-xl-11 {
+        order: 11
+    }
+
+    .order-xl-12 {
+        order: 12
+    }
+
+    .offset-xl-0 {
+        margin-left: 0
+    }
+
+    .offset-xl-1 {
+        margin-left: 8.3333333333%
+    }
+
+    .offset-xl-2 {
+        margin-left: 16.6666666667%
+    }
+
+    .offset-xl-3 {
+        margin-left: 25%
+    }
+
+    .offset-xl-4 {
+        margin-left: 33.3333333333%
+    }
+
+    .offset-xl-5 {
+        margin-left: 41.6666666667%
+    }
+
+    .offset-xl-6 {
+        margin-left: 50%
+    }
+
+    .offset-xl-7 {
+        margin-left: 58.3333333333%
+    }
+
+    .offset-xl-8 {
+        margin-left: 66.6666666667%
+    }
+
+    .offset-xl-9 {
+        margin-left: 75%
+    }
+
+    .offset-xl-10 {
+        margin-left: 83.3333333333%
+    }
+
+    .offset-xl-11 {
+        margin-left: 91.6666666667%
+    }
+}
+
+@media (min-width: 1600px) {
+    .col-xxl {
+        flex-basis:0;
+        flex-grow: 1;
+        max-width: 100%
+    }
+
+    .row-cols-xxl-1>* {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .row-cols-xxl-2>* {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .row-cols-xxl-3>* {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .row-cols-xxl-4>* {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .row-cols-xxl-5>* {
+        flex: 0 0 20%;
+        max-width: 20%
+    }
+
+    .row-cols-xxl-6>* {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-xxl-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%
+    }
+
+    .col-xxl-1 {
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%
+    }
+
+    .col-xxl-2 {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-xxl-3 {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .col-xxl-4 {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .col-xxl-5 {
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%
+    }
+
+    .col-xxl-6 {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .col-xxl-7 {
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%
+    }
+
+    .col-xxl-8 {
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%
+    }
+
+    .col-xxl-9 {
+        flex: 0 0 75%;
+        max-width: 75%
+    }
+
+    .col-xxl-10 {
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%
+    }
+
+    .col-xxl-11 {
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%
+    }
+
+    .col-xxl-12 {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .order-xxl-first {
+        order: -1
+    }
+
+    .order-xxl-last {
+        order: 13
+    }
+
+    .order-xxl-0 {
+        order: 0
+    }
+
+    .order-xxl-1 {
+        order: 1
+    }
+
+    .order-xxl-2 {
+        order: 2
+    }
+
+    .order-xxl-3 {
+        order: 3
+    }
+
+    .order-xxl-4 {
+        order: 4
+    }
+
+    .order-xxl-5 {
+        order: 5
+    }
+
+    .order-xxl-6 {
+        order: 6
+    }
+
+    .order-xxl-7 {
+        order: 7
+    }
+
+    .order-xxl-8 {
+        order: 8
+    }
+
+    .order-xxl-9 {
+        order: 9
+    }
+
+    .order-xxl-10 {
+        order: 10
+    }
+
+    .order-xxl-11 {
+        order: 11
+    }
+
+    .order-xxl-12 {
+        order: 12
+    }
+
+    .offset-xxl-0 {
+        margin-left: 0
+    }
+
+    .offset-xxl-1 {
+        margin-left: 8.3333333333%
+    }
+
+    .offset-xxl-2 {
+        margin-left: 16.6666666667%
+    }
+
+    .offset-xxl-3 {
+        margin-left: 25%
+    }
+
+    .offset-xxl-4 {
+        margin-left: 33.3333333333%
+    }
+
+    .offset-xxl-5 {
+        margin-left: 41.6666666667%
+    }
+
+    .offset-xxl-6 {
+        margin-left: 50%
+    }
+
+    .offset-xxl-7 {
+        margin-left: 58.3333333333%
+    }
+
+    .offset-xxl-8 {
+        margin-left: 66.6666666667%
+    }
+
+    .offset-xxl-9 {
+        margin-left: 75%
+    }
+
+    .offset-xxl-10 {
+        margin-left: 83.3333333333%
+    }
+
+    .offset-xxl-11 {
+        margin-left: 91.6666666667%
+    }
+}
+
+@media (min-width: 1800px) {
+    .col-fhd {
+        flex-basis:0;
+        flex-grow: 1;
+        max-width: 100%
+    }
+
+    .row-cols-fhd-1>* {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .row-cols-fhd-2>* {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .row-cols-fhd-3>* {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .row-cols-fhd-4>* {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .row-cols-fhd-5>* {
+        flex: 0 0 20%;
+        max-width: 20%
+    }
+
+    .row-cols-fhd-6>* {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-fhd-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%
+    }
+
+    .col-fhd-1 {
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%
+    }
+
+    .col-fhd-2 {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-fhd-3 {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .col-fhd-4 {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .col-fhd-5 {
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%
+    }
+
+    .col-fhd-6 {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .col-fhd-7 {
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%
+    }
+
+    .col-fhd-8 {
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%
+    }
+
+    .col-fhd-9 {
+        flex: 0 0 75%;
+        max-width: 75%
+    }
+
+    .col-fhd-10 {
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%
+    }
+
+    .col-fhd-11 {
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%
+    }
+
+    .col-fhd-12 {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .order-fhd-first {
+        order: -1
+    }
+
+    .order-fhd-last {
+        order: 13
+    }
+
+    .order-fhd-0 {
+        order: 0
+    }
+
+    .order-fhd-1 {
+        order: 1
+    }
+
+    .order-fhd-2 {
+        order: 2
+    }
+
+    .order-fhd-3 {
+        order: 3
+    }
+
+    .order-fhd-4 {
+        order: 4
+    }
+
+    .order-fhd-5 {
+        order: 5
+    }
+
+    .order-fhd-6 {
+        order: 6
+    }
+
+    .order-fhd-7 {
+        order: 7
+    }
+
+    .order-fhd-8 {
+        order: 8
+    }
+
+    .order-fhd-9 {
+        order: 9
+    }
+
+    .order-fhd-10 {
+        order: 10
+    }
+
+    .order-fhd-11 {
+        order: 11
+    }
+
+    .order-fhd-12 {
+        order: 12
+    }
+
+    .offset-fhd-0 {
+        margin-left: 0
+    }
+
+    .offset-fhd-1 {
+        margin-left: 8.3333333333%
+    }
+
+    .offset-fhd-2 {
+        margin-left: 16.6666666667%
+    }
+
+    .offset-fhd-3 {
+        margin-left: 25%
+    }
+
+    .offset-fhd-4 {
+        margin-left: 33.3333333333%
+    }
+
+    .offset-fhd-5 {
+        margin-left: 41.6666666667%
+    }
+
+    .offset-fhd-6 {
+        margin-left: 50%
+    }
+
+    .offset-fhd-7 {
+        margin-left: 58.3333333333%
+    }
+
+    .offset-fhd-8 {
+        margin-left: 66.6666666667%
+    }
+
+    .offset-fhd-9 {
+        margin-left: 75%
+    }
+
+    .offset-fhd-10 {
+        margin-left: 83.3333333333%
+    }
+
+    .offset-fhd-11 {
+        margin-left: 91.6666666667%
+    }
+}
+
+@media (min-width: 2560px) {
+    .col-qhd {
+        flex-basis:0;
+        flex-grow: 1;
+        max-width: 100%
+    }
+
+    .row-cols-qhd-1>* {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .row-cols-qhd-2>* {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .row-cols-qhd-3>* {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .row-cols-qhd-4>* {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .row-cols-qhd-5>* {
+        flex: 0 0 20%;
+        max-width: 20%
+    }
+
+    .row-cols-qhd-6>* {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-qhd-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%
+    }
+
+    .col-qhd-1 {
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%
+    }
+
+    .col-qhd-2 {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-qhd-3 {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .col-qhd-4 {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .col-qhd-5 {
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%
+    }
+
+    .col-qhd-6 {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .col-qhd-7 {
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%
+    }
+
+    .col-qhd-8 {
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%
+    }
+
+    .col-qhd-9 {
+        flex: 0 0 75%;
+        max-width: 75%
+    }
+
+    .col-qhd-10 {
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%
+    }
+
+    .col-qhd-11 {
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%
+    }
+
+    .col-qhd-12 {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .order-qhd-first {
+        order: -1
+    }
+
+    .order-qhd-last {
+        order: 13
+    }
+
+    .order-qhd-0 {
+        order: 0
+    }
+
+    .order-qhd-1 {
+        order: 1
+    }
+
+    .order-qhd-2 {
+        order: 2
+    }
+
+    .order-qhd-3 {
+        order: 3
+    }
+
+    .order-qhd-4 {
+        order: 4
+    }
+
+    .order-qhd-5 {
+        order: 5
+    }
+
+    .order-qhd-6 {
+        order: 6
+    }
+
+    .order-qhd-7 {
+        order: 7
+    }
+
+    .order-qhd-8 {
+        order: 8
+    }
+
+    .order-qhd-9 {
+        order: 9
+    }
+
+    .order-qhd-10 {
+        order: 10
+    }
+
+    .order-qhd-11 {
+        order: 11
+    }
+
+    .order-qhd-12 {
+        order: 12
+    }
+
+    .offset-qhd-0 {
+        margin-left: 0
+    }
+
+    .offset-qhd-1 {
+        margin-left: 8.3333333333%
+    }
+
+    .offset-qhd-2 {
+        margin-left: 16.6666666667%
+    }
+
+    .offset-qhd-3 {
+        margin-left: 25%
+    }
+
+    .offset-qhd-4 {
+        margin-left: 33.3333333333%
+    }
+
+    .offset-qhd-5 {
+        margin-left: 41.6666666667%
+    }
+
+    .offset-qhd-6 {
+        margin-left: 50%
+    }
+
+    .offset-qhd-7 {
+        margin-left: 58.3333333333%
+    }
+
+    .offset-qhd-8 {
+        margin-left: 66.6666666667%
+    }
+
+    .offset-qhd-9 {
+        margin-left: 75%
+    }
+
+    .offset-qhd-10 {
+        margin-left: 83.3333333333%
+    }
+
+    .offset-qhd-11 {
+        margin-left: 91.6666666667%
+    }
+}
+
+@media (min-width: 3840px) {
+    .col-uhd {
+        flex-basis:0;
+        flex-grow: 1;
+        max-width: 100%
+    }
+
+    .row-cols-uhd-1>* {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .row-cols-uhd-2>* {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .row-cols-uhd-3>* {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .row-cols-uhd-4>* {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .row-cols-uhd-5>* {
+        flex: 0 0 20%;
+        max-width: 20%
+    }
+
+    .row-cols-uhd-6>* {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-uhd-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%
+    }
+
+    .col-uhd-1 {
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%
+    }
+
+    .col-uhd-2 {
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%
+    }
+
+    .col-uhd-3 {
+        flex: 0 0 25%;
+        max-width: 25%
+    }
+
+    .col-uhd-4 {
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%
+    }
+
+    .col-uhd-5 {
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%
+    }
+
+    .col-uhd-6 {
+        flex: 0 0 50%;
+        max-width: 50%
+    }
+
+    .col-uhd-7 {
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%
+    }
+
+    .col-uhd-8 {
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%
+    }
+
+    .col-uhd-9 {
+        flex: 0 0 75%;
+        max-width: 75%
+    }
+
+    .col-uhd-10 {
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%
+    }
+
+    .col-uhd-11 {
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%
+    }
+
+    .col-uhd-12 {
+        flex: 0 0 100%;
+        max-width: 100%
+    }
+
+    .order-uhd-first {
+        order: -1
+    }
+
+    .order-uhd-last {
+        order: 13
+    }
+
+    .order-uhd-0 {
+        order: 0
+    }
+
+    .order-uhd-1 {
+        order: 1
+    }
+
+    .order-uhd-2 {
+        order: 2
+    }
+
+    .order-uhd-3 {
+        order: 3
+    }
+
+    .order-uhd-4 {
+        order: 4
+    }
+
+    .order-uhd-5 {
+        order: 5
+    }
+
+    .order-uhd-6 {
+        order: 6
+    }
+
+    .order-uhd-7 {
+        order: 7
+    }
+
+    .order-uhd-8 {
+        order: 8
+    }
+
+    .order-uhd-9 {
+        order: 9
+    }
+
+    .order-uhd-10 {
+        order: 10
+    }
+
+    .order-uhd-11 {
+        order: 11
+    }
+
+    .order-uhd-12 {
+        order: 12
+    }
+
+    .offset-uhd-0 {
+        margin-left: 0
+    }
+
+    .offset-uhd-1 {
+        margin-left: 8.3333333333%
+    }
+
+    .offset-uhd-2 {
+        margin-left: 16.6666666667%
+    }
+
+    .offset-uhd-3 {
+        margin-left: 25%
+    }
+
+    .offset-uhd-4 {
+        margin-left: 33.3333333333%
+    }
+
+    .offset-uhd-5 {
+        margin-left: 41.6666666667%
+    }
+
+    .offset-uhd-6 {
+        margin-left: 50%
+    }
+
+    .offset-uhd-7 {
+        margin-left: 58.3333333333%
+    }
+
+    .offset-uhd-8 {
+        margin-left: 66.6666666667%
+    }
+
+    .offset-uhd-9 {
+        margin-left: 75%
+    }
+
+    .offset-uhd-10 {
+        margin-left: 83.3333333333%
+    }
+
+    .offset-uhd-11 {
+        margin-left: 91.6666666667%
+    }
+}
+
+.table {
+    width: 100%;
+    margin-bottom: 1rem;
+    color: #212529
+}
+
+.table td,.table th {
+    padding: .75rem;
+    vertical-align: top;
+    border-top: 1px solid #dee2e6
+}
+
+.table thead th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #dee2e6
+}
+
+.table tbody+tbody {
+    border-top: 2px solid #dee2e6
+}
+
+.table-sm td,.table-sm th {
+    padding: .3rem
+}
+
+.table-bordered,.table-bordered td,.table-bordered th {
+    border: 1px solid #dee2e6
+}
+
+.table-bordered thead td,.table-bordered thead th {
+    border-bottom-width: 2px
+}
+
+.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th {
+    border: 0
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+    background-color: #0000000d
+}
+
+.table-hover tbody tr:hover {
+    color: #212529;
+    background-color: rgba(0,0,0,.075)
+}
+
+.table-primary,.table-primary>td,.table-primary>th {
+    background-color: #b8daff
+}
+
+.table-primary tbody+tbody,.table-primary td,.table-primary th,.table-primary thead th {
+    border-color: #7abaff
+}
+
+.table-hover .table-primary:hover,.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th {
+    background-color: #9fcdff
+}
+
+.table-secondary,.table-secondary>td,.table-secondary>th {
+    background-color: #d6d8db
+}
+
+.table-secondary tbody+tbody,.table-secondary td,.table-secondary th,.table-secondary thead th {
+    border-color: #b3b7bb
+}
+
+.table-hover .table-secondary:hover,.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th {
+    background-color: #c8cbcf
+}
+
+.table-success,.table-success>td,.table-success>th {
+    background-color: #c8f1bb
+}
+
+.table-success tbody+tbody,.table-success td,.table-success th,.table-success thead th {
+    border-color: #98e480
+}
+
+.table-hover .table-success:hover,.table-hover .table-success:hover>td,.table-hover .table-success:hover>th {
+    background-color: #b7eda6
+}
+
+.table-info,.table-info>td,.table-info>th {
+    background-color: #bee5eb
+}
+
+.table-info tbody+tbody,.table-info td,.table-info th,.table-info thead th {
+    border-color: #86cfda
+}
+
+.table-hover .table-info:hover,.table-hover .table-info:hover>td,.table-hover .table-info:hover>th {
+    background-color: #abdde5
+}
+
+.table-warning,.table-warning>td,.table-warning>th {
+    background-color: #ffeeba
+}
+
+.table-warning tbody+tbody,.table-warning td,.table-warning th,.table-warning thead th {
+    border-color: #ffdf7e
+}
+
+.table-hover .table-warning:hover,.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th {
+    background-color: #ffe8a1
+}
+
+.table-danger,.table-danger>td,.table-danger>th {
+    background-color: #ffb8b8
+}
+
+.table-danger tbody+tbody,.table-danger td,.table-danger th,.table-danger thead th {
+    border-color: #ff7a7a
+}
+
+.table-hover .table-danger:hover,.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th {
+    background-color: #ff9f9f
+}
+
+.table-light,.table-light>td,.table-light>th {
+    background-color: #fdfdfe
+}
+
+.table-light tbody+tbody,.table-light td,.table-light th,.table-light thead th {
+    border-color: #fbfcfc
+}
+
+.table-hover .table-light:hover,.table-hover .table-light:hover>td,.table-hover .table-light:hover>th {
+    background-color: #ececf6
+}
+
+.table-dark,.table-dark>td,.table-dark>th {
+    background-color: #c6c8ca
+}
+
+.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th {
+    border-color: #95999c
+}
+
+.table-hover .table-dark:hover,.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th {
+    background-color: #b9bbbe
+}
+
+.table-active,.table-active>td,.table-active>th,.table-hover .table-active:hover,.table-hover .table-active:hover>td,.table-hover .table-active:hover>th {
+    background-color: rgba(0,0,0,.075)
+}
+
+.table .thead-dark th {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #454d55
+}
+
+.table .thead-light th {
+    color: #495057;
+    background-color: #e9ecef;
+    border-color: #dee2e6
+}
+
+.table-dark {
+    color: #fff;
+    background-color: #343a40
+}
+
+.table-dark td,.table-dark th,.table-dark thead th {
+    border-color: #454d55
+}
+
+.table-dark.table-bordered {
+    border: 0
+}
+
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+    background-color: #ffffff0d
+}
+
+.table-dark.table-hover tbody tr:hover {
+    color: #fff;
+    background-color: hsla(0,0%,100%,.075)
+}
+
+@media (max-width: 575.98px) {
+    .table-responsive-sm {
+        display:block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+
+    .table-responsive-sm>.table-bordered {
+        border: 0
+    }
+}
+
+@media (max-width: 767.98px) {
+    .table-responsive-md {
+        display:block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+
+    .table-responsive-md>.table-bordered {
+        border: 0
+    }
+}
+
+@media (max-width: 899.98px) {
+    .table-responsive-lg {
+        display:block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+
+    .table-responsive-lg>.table-bordered {
+        border: 0
+    }
+}
+
+@media (max-width: 1199.98px) {
+    .table-responsive-xl {
+        display:block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+
+    .table-responsive-xl>.table-bordered {
+        border: 0
+    }
+}
+
+@media (max-width: 1599.98px) {
+    .table-responsive-xxl {
+        display:block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+
+    .table-responsive-xxl>.table-bordered {
+        border: 0
+    }
+}
+
+@media (max-width: 1799.98px) {
+    .table-responsive-fhd {
+        display:block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+
+    .table-responsive-fhd>.table-bordered {
+        border: 0
+    }
+}
+
+@media (max-width: 2559.98px) {
+    .table-responsive-qhd {
+        display:block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+
+    .table-responsive-qhd>.table-bordered {
+        border: 0
+    }
+}
+
+@media (max-width: 3839.98px) {
+    .table-responsive-uhd {
+        display:block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+
+    .table-responsive-uhd>.table-bordered {
+        border: 0
+    }
+}
+
+.table-responsive {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch
+}
+
+.table-responsive>.table-bordered {
+    border: 0
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .form-control {
+        transition: none
+    }
+}
+
+.form-control::-ms-expand {
+    background-color: initial;
+    border: 0
+}
+
+.form-control:-moz-focusring {
+    color: #0000;
+    text-shadow: 0 0 0 #495057
+}
+
+.form-control:focus {
+    color: #495057;
+    background-color: #fff;
+    border-color: #ced4da;
+    outline: 0;
+    box-shadow: 0 0 0 0 inherit
+}
+
+.form-control::placeholder {
+    color: #898989;
+    opacity: 1
+}
+
+.form-control:disabled,.form-control[readonly] {
+    background-color: #e9ecef;
+    opacity: 1
+}
+
+input[type=date].form-control,input[type=datetime-local].form-control,input[type=month].form-control,input[type=time].form-control {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none
+}
+
+select.form-control:focus::-ms-value {
+    color: #495057;
+    background-color: #fff
+}
+
+.form-control-file,.form-control-range {
+    display: block;
+    width: 100%
+}
+
+.col-form-label {
+    padding-top: calc(.375rem + 1px);
+    padding-bottom: calc(.375rem + 1px);
+    margin-bottom: 0;
+    font-size: inherit;
+    line-height: 1.5
+}
+
+.col-form-label-lg {
+    padding-top: calc(.5rem + 1px);
+    padding-bottom: calc(.5rem + 1px);
+    font-size: 1.25rem;
+    line-height: 1.5
+}
+
+.col-form-label-sm {
+    padding-top: calc(.25rem + 1px);
+    padding-bottom: calc(.25rem + 1px);
+    font-size: .875rem;
+    line-height: 1.5
+}
+
+.form-control-plaintext {
+    display: block;
+    width: 100%;
+    padding: .375rem 0;
+    margin-bottom: 0;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #212529;
+    background-color: initial;
+    border: solid #0000;
+    border-width: 1px 0
+}
+
+.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm {
+    padding-right: 0;
+    padding-left: 0
+}
+
+.form-control-sm {
+    height: calc(1.5em + .5rem + 2px);
+    padding: .25rem .5rem;
+    font-size: .875rem;
+    line-height: 1.5;
+    border-radius: .2rem
+}
+
+.form-control-lg {
+    height: calc(1.5em + 1rem + 2px);
+    padding: .5rem 1rem;
+    font-size: 1.25rem;
+    line-height: 1.5;
+    border-radius: .3rem
+}
+
+select.form-control[multiple],select.form-control[size],textarea.form-control {
+    height: auto
+}
+
+.form-group {
+    margin-bottom: 1rem
+}
+
+.form-text {
+    display: block;
+    margin-top: .25rem
+}
+
+.form-row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -5px;
+    margin-left: -5px
+}
+
+.form-row>.col,.form-row>[class*=col-] {
+    padding-right: 5px;
+    padding-left: 5px
+}
+
+.form-check {
+    position: relative;
+    display: block;
+    padding-left: 1.25rem
+}
+
+.form-check-input {
+    position: absolute;
+    margin-top: .3rem;
+    margin-left: -1.25rem
+}
+
+.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label {
+    color: #6c757d
+}
+
+.form-check-label {
+    margin-bottom: 0
+}
+
+.form-check-inline {
+    display: inline-flex;
+    align-items: center;
+    padding-left: 0;
+    margin-right: .75rem
+}
+
+.form-check-inline .form-check-input {
+    position: static;
+    margin-top: 0;
+    margin-right: .3125rem;
+    margin-left: 0
+}
+
+.valid-feedback {
+    display: none;
+    width: 100%;
+    margin-top: .25rem;
+    font-size: 80%;
+    color: #39cc0b
+}
+
+.valid-tooltip {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 5;
+    display: none;
+    max-width: 100%;
+    padding: .25rem .5rem;
+    margin-top: .1rem;
+    font-size: .875rem;
+    line-height: 1.5;
+    color: #fff;
+    background-color: #39cc0be6;
+    border-radius: .25rem
+}
+
+.form-row>.col>.valid-tooltip,.form-row>[class*=col-]>.valid-tooltip {
+    left: 5px
+}
+
+.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip {
+    display: block
+}
+
+.form-control.is-valid,.was-validated .form-control:valid {
+    border-color: #39cc0b;
+    padding-right: calc(1.5em + .75rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2339CC0B' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(.375em + .1875rem) center;
+    background-size: calc(.75em + .375rem) calc(.75em + .375rem)
+}
+
+.form-control.is-valid:focus,.was-validated .form-control:valid:focus {
+    border-color: #39cc0b;
+    box-shadow: 0 0 0 0 #39cc0b40
+}
+
+.was-validated textarea.form-control:valid,textarea.form-control.is-valid {
+    padding-right: calc(1.5em + .75rem);
+    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem)
+}
+
+.custom-select.is-valid,.was-validated .custom-select:valid {
+    border-color: #39cc0b;
+    padding-right: calc(.75em + 2.3125rem);
+    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2339CC0B' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat
+}
+
+.custom-select.is-valid:focus,.was-validated .custom-select:valid:focus {
+    border-color: #39cc0b;
+    box-shadow: 0 0 0 0 #39cc0b40
+}
+
+.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label {
+    color: #39cc0b
+}
+
+.form-check-input.is-valid~.valid-feedback,.form-check-input.is-valid~.valid-tooltip,.was-validated .form-check-input:valid~.valid-feedback,.was-validated .form-check-input:valid~.valid-tooltip {
+    display: block
+}
+
+.custom-control-input.is-valid~.custom-control-label,.was-validated .custom-control-input:valid~.custom-control-label {
+    color: #39cc0b
+}
+
+.custom-control-input.is-valid~.custom-control-label:before,.was-validated .custom-control-input:valid~.custom-control-label:before {
+    border-color: #39cc0b
+}
+
+.custom-control-input.is-valid:checked~.custom-control-label:before,.was-validated .custom-control-input:valid:checked~.custom-control-label:before {
+    border-color: #4cf317;
+    background-color: #4cf317
+}
+
+.custom-control-input.is-valid:focus~.custom-control-label:before,.was-validated .custom-control-input:valid:focus~.custom-control-label:before {
+    box-shadow: 0 0 0 0 #39cc0b40
+}
+
+.custom-control-input.is-valid:focus:not(:checked)~.custom-control-label:before,.custom-file-input.is-valid~.custom-file-label,.was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label:before,.was-validated .custom-file-input:valid~.custom-file-label {
+    border-color: #39cc0b
+}
+
+.custom-file-input.is-valid:focus~.custom-file-label,.was-validated .custom-file-input:valid:focus~.custom-file-label {
+    border-color: #39cc0b;
+    box-shadow: 0 0 0 0 #39cc0b40
+}
+
+.invalid-feedback {
+    display: none;
+    width: 100%;
+    margin-top: .25rem;
+    font-size: 80%;
+    color: red
+}
+
+.invalid-tooltip {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 5;
+    display: none;
+    max-width: 100%;
+    padding: .25rem .5rem;
+    margin-top: .1rem;
+    font-size: .875rem;
+    line-height: 1.5;
+    color: #fff;
+    background-color: #ff0000e6;
+    border-radius: .25rem
+}
+
+.form-row>.col>.invalid-tooltip,.form-row>[class*=col-]>.invalid-tooltip {
+    left: 5px
+}
+
+.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip {
+    display: block
+}
+
+.form-control.is-invalid,.was-validated .form-control:invalid {
+    border-color: red;
+    padding-right: calc(1.5em + .75rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23FF0000' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23FF0000' stroke='none'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(.375em + .1875rem) center;
+    background-size: calc(.75em + .375rem) calc(.75em + .375rem)
+}
+
+.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus {
+    border-color: red;
+    box-shadow: 0 0 0 0 #ff000040
+}
+
+.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid {
+    padding-right: calc(1.5em + .75rem);
+    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem)
+}
+
+.custom-select.is-invalid,.was-validated .custom-select:invalid {
+    border-color: red;
+    padding-right: calc(.75em + 2.3125rem);
+    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23FF0000' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23FF0000' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat
+}
+
+.custom-select.is-invalid:focus,.was-validated .custom-select:invalid:focus {
+    border-color: red;
+    box-shadow: 0 0 0 0 #ff000040
+}
+
+.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label {
+    color: red
+}
+
+.form-check-input.is-invalid~.invalid-feedback,.form-check-input.is-invalid~.invalid-tooltip,.was-validated .form-check-input:invalid~.invalid-feedback,.was-validated .form-check-input:invalid~.invalid-tooltip {
+    display: block
+}
+
+.custom-control-input.is-invalid~.custom-control-label,.was-validated .custom-control-input:invalid~.custom-control-label {
+    color: red
+}
+
+.custom-control-input.is-invalid~.custom-control-label:before,.was-validated .custom-control-input:invalid~.custom-control-label:before {
+    border-color: red
+}
+
+.custom-control-input.is-invalid:checked~.custom-control-label:before,.was-validated .custom-control-input:invalid:checked~.custom-control-label:before {
+    border-color: #f33;
+    background-color: #f33
+}
+
+.custom-control-input.is-invalid:focus~.custom-control-label:before,.was-validated .custom-control-input:invalid:focus~.custom-control-label:before {
+    box-shadow: 0 0 0 0 #ff000040
+}
+
+.custom-control-input.is-invalid:focus:not(:checked)~.custom-control-label:before,.custom-file-input.is-invalid~.custom-file-label,.was-validated .custom-control-input:invalid:focus:not(:checked)~.custom-control-label:before,.was-validated .custom-file-input:invalid~.custom-file-label {
+    border-color: red
+}
+
+.custom-file-input.is-invalid:focus~.custom-file-label,.was-validated .custom-file-input:invalid:focus~.custom-file-label {
+    border-color: red;
+    box-shadow: 0 0 0 0 #ff000040
+}
+
+.form-inline {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center
+}
+
+.form-inline .form-check {
+    width: 100%
+}
+
+@media (min-width: 576px) {
+    .form-inline label {
+        justify-content:center
+    }
+
+    .form-inline .form-group,.form-inline label {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0
+    }
+
+    .form-inline .form-group {
+        flex: 0 0 auto;
+        flex-flow: row wrap
+    }
+
+    .form-inline .form-control {
+        display: inline-block;
+        width: auto;
+        vertical-align: middle
+    }
+
+    .form-inline .form-control-plaintext {
+        display: inline-block
+    }
+
+    .form-inline .custom-select,.form-inline .input-group {
+        width: auto
+    }
+
+    .form-inline .form-check {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        padding-left: 0
+    }
+
+    .form-inline .form-check-input {
+        position: relative;
+        flex-shrink: 0;
+        margin-top: 0;
+        margin-right: .25rem;
+        margin-left: 0
+    }
+
+    .form-inline .custom-control {
+        align-items: center;
+        justify-content: center
+    }
+
+    .form-inline .custom-control-label {
+        margin-bottom: 0
+    }
+}
+
+.btn {
+    display: inline-block;
+    font-weight: 400;
+    color: #212529;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    user-select: none;
+    background-color: initial;
+    border: 1px solid #0000;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: .25rem;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .btn {
+        transition: none
+    }
+}
+
+.btn:hover {
+    color: #212529;
+    text-decoration: none
+}
+
+.btn.focus,.btn:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0 inherit
+}
+
+.btn.disabled,.btn:disabled {
+    opacity: .65
+}
+
+.btn:not(:disabled):not(.disabled) {
+    cursor: pointer
+}
+
+a.btn.disabled,fieldset:disabled a.btn {
+    pointer-events: none
+}
+
+.btn-primary {
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff
+}
+
+.btn-primary.focus,.btn-primary:focus,.btn-primary:hover {
+    color: #fff;
+    background-color: #0069d9;
+    border-color: #0062cc
+}
+
+.btn-primary.focus,.btn-primary:focus {
+    box-shadow: 0 0 0 0 #268fff80
+}
+
+.btn-primary.disabled,.btn-primary:disabled {
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff
+}
+
+.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle {
+    color: #fff;
+    background-color: #0062cc;
+    border-color: #005cbf
+}
+
+.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #268fff80
+}
+
+.btn-secondary {
+    color: #fff;
+    background-color: #6c757d;
+    border-color: #6c757d
+}
+
+.btn-secondary.focus,.btn-secondary:focus,.btn-secondary:hover {
+    color: #fff;
+    background-color: #5a6268;
+    border-color: #545b62
+}
+
+.btn-secondary.focus,.btn-secondary:focus {
+    box-shadow: 0 0 0 0 #828a9180
+}
+
+.btn-secondary.disabled,.btn-secondary:disabled {
+    color: #fff;
+    background-color: #6c757d;
+    border-color: #6c757d
+}
+
+.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle {
+    color: #fff;
+    background-color: #545b62;
+    border-color: #4e555b
+}
+
+.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #828a9180
+}
+
+.btn-success {
+    color: #fff;
+    background-color: #39cc0b;
+    border-color: #39cc0b
+}
+
+.btn-success.focus,.btn-success:focus,.btn-success:hover {
+    color: #fff;
+    background-color: #2fa809;
+    border-color: #2b9c08
+}
+
+.btn-success.focus,.btn-success:focus {
+    box-shadow: 0 0 0 0 #57d43080
+}
+
+.btn-success.disabled,.btn-success:disabled {
+    color: #fff;
+    background-color: #39cc0b;
+    border-color: #39cc0b
+}
+
+.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle {
+    color: #fff;
+    background-color: #2b9c08;
+    border-color: #289008
+}
+
+.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #57d43080
+}
+
+.btn-info {
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8
+}
+
+.btn-info.focus,.btn-info:focus,.btn-info:hover {
+    color: #fff;
+    background-color: #138496;
+    border-color: #117a8b
+}
+
+.btn-info.focus,.btn-info:focus {
+    box-shadow: 0 0 0 0 #3ab0c380
+}
+
+.btn-info.disabled,.btn-info:disabled {
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8
+}
+
+.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle {
+    color: #fff;
+    background-color: #117a8b;
+    border-color: #10707f
+}
+
+.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #3ab0c380
+}
+
+.btn-warning {
+    color: #212529;
+    background-color: #ffc107;
+    border-color: #ffc107
+}
+
+.btn-warning.focus,.btn-warning:focus,.btn-warning:hover {
+    color: #212529;
+    background-color: #e0a800;
+    border-color: #d39e00
+}
+
+.btn-warning.focus,.btn-warning:focus {
+    box-shadow: 0 0 0 0 #deaa0c80
+}
+
+.btn-warning.disabled,.btn-warning:disabled {
+    color: #212529;
+    background-color: #ffc107;
+    border-color: #ffc107
+}
+
+.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle {
+    color: #212529;
+    background-color: #d39e00;
+    border-color: #c69500
+}
+
+.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #deaa0c80
+}
+
+.btn-danger {
+    color: #fff;
+    background-color: red;
+    border-color: red
+}
+
+.btn-danger.focus,.btn-danger:focus,.btn-danger:hover {
+    color: #fff;
+    background-color: #d90000;
+    border-color: #c00
+}
+
+.btn-danger.focus,.btn-danger:focus {
+    box-shadow: 0 0 0 0 #ff262680
+}
+
+.btn-danger.disabled,.btn-danger:disabled {
+    color: #fff;
+    background-color: red;
+    border-color: red
+}
+
+.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle {
+    color: #fff;
+    background-color: #c00;
+    border-color: #bf0000
+}
+
+.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #ff262680
+}
+
+.btn-light {
+    color: #212529;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa
+}
+
+.btn-light.focus,.btn-light:focus,.btn-light:hover {
+    color: #212529;
+    background-color: #e2e6ea;
+    border-color: #dae0e5
+}
+
+.btn-light.focus,.btn-light:focus {
+    box-shadow: 0 0 0 0 #d8d9db80
+}
+
+.btn-light.disabled,.btn-light:disabled {
+    color: #212529;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa
+}
+
+.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle {
+    color: #212529;
+    background-color: #dae0e5;
+    border-color: #d3d9df
+}
+
+.btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #d8d9db80
+}
+
+.btn-dark {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #343a40
+}
+
+.btn-dark.focus,.btn-dark:focus,.btn-dark:hover {
+    color: #fff;
+    background-color: #23272b;
+    border-color: #1d2124
+}
+
+.btn-dark.focus,.btn-dark:focus {
+    box-shadow: 0 0 0 0 #52585d80
+}
+
+.btn-dark.disabled,.btn-dark:disabled {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #343a40
+}
+
+.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle {
+    color: #fff;
+    background-color: #1d2124;
+    border-color: #171a1d
+}
+
+.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #52585d80
+}
+
+.btn-outline-primary {
+    color: #007bff;
+    border-color: #007bff
+}
+
+.btn-outline-primary:hover {
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff
+}
+
+.btn-outline-primary.focus,.btn-outline-primary:focus {
+    box-shadow: 0 0 0 0 #007bff80
+}
+
+.btn-outline-primary.disabled,.btn-outline-primary:disabled {
+    color: #007bff;
+    background-color: initial
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle {
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #007bff80
+}
+
+.btn-outline-secondary {
+    color: #6c757d;
+    border-color: #6c757d
+}
+
+.btn-outline-secondary:hover {
+    color: #fff;
+    background-color: #6c757d;
+    border-color: #6c757d
+}
+
+.btn-outline-secondary.focus,.btn-outline-secondary:focus {
+    box-shadow: 0 0 0 0 #6c757d80
+}
+
+.btn-outline-secondary.disabled,.btn-outline-secondary:disabled {
+    color: #6c757d;
+    background-color: initial
+}
+
+.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle {
+    color: #fff;
+    background-color: #6c757d;
+    border-color: #6c757d
+}
+
+.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #6c757d80
+}
+
+.btn-outline-success {
+    color: #39cc0b;
+    border-color: #39cc0b
+}
+
+.btn-outline-success:hover {
+    color: #fff;
+    background-color: #39cc0b;
+    border-color: #39cc0b
+}
+
+.btn-outline-success.focus,.btn-outline-success:focus {
+    box-shadow: 0 0 0 0 #39cc0b80
+}
+
+.btn-outline-success.disabled,.btn-outline-success:disabled {
+    color: #39cc0b;
+    background-color: initial
+}
+
+.btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle {
+    color: #fff;
+    background-color: #39cc0b;
+    border-color: #39cc0b
+}
+
+.btn-outline-success:not(:disabled):not(.disabled).active:focus,.btn-outline-success:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-success.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #39cc0b80
+}
+
+.btn-outline-info {
+    color: #17a2b8;
+    border-color: #17a2b8
+}
+
+.btn-outline-info:hover {
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8
+}
+
+.btn-outline-info.focus,.btn-outline-info:focus {
+    box-shadow: 0 0 0 0 #17a2b880
+}
+
+.btn-outline-info.disabled,.btn-outline-info:disabled {
+    color: #17a2b8;
+    background-color: initial
+}
+
+.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle {
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8
+}
+
+.btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #17a2b880
+}
+
+.btn-outline-warning {
+    color: #ffc107;
+    border-color: #ffc107
+}
+
+.btn-outline-warning:hover {
+    color: #212529;
+    background-color: #ffc107;
+    border-color: #ffc107
+}
+
+.btn-outline-warning.focus,.btn-outline-warning:focus {
+    box-shadow: 0 0 0 0 #ffc10780
+}
+
+.btn-outline-warning.disabled,.btn-outline-warning:disabled {
+    color: #ffc107;
+    background-color: initial
+}
+
+.btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle {
+    color: #212529;
+    background-color: #ffc107;
+    border-color: #ffc107
+}
+
+.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-warning.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #ffc10780
+}
+
+.btn-outline-danger {
+    color: red;
+    border-color: red
+}
+
+.btn-outline-danger:hover {
+    color: #fff;
+    background-color: red;
+    border-color: red
+}
+
+.btn-outline-danger.focus,.btn-outline-danger:focus {
+    box-shadow: 0 0 0 0 #ff000080
+}
+
+.btn-outline-danger.disabled,.btn-outline-danger:disabled {
+    color: red;
+    background-color: initial
+}
+
+.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle {
+    color: #fff;
+    background-color: red;
+    border-color: red
+}
+
+.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #ff000080
+}
+
+.btn-outline-light {
+    color: #f8f9fa;
+    border-color: #f8f9fa
+}
+
+.btn-outline-light:hover {
+    color: #212529;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa
+}
+
+.btn-outline-light.focus,.btn-outline-light:focus {
+    box-shadow: 0 0 0 0 #f8f9fa80
+}
+
+.btn-outline-light.disabled,.btn-outline-light:disabled {
+    color: #f8f9fa;
+    background-color: initial
+}
+
+.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle {
+    color: #212529;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa
+}
+
+.btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #f8f9fa80
+}
+
+.btn-outline-dark {
+    color: #343a40;
+    border-color: #343a40
+}
+
+.btn-outline-dark:hover {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #343a40
+}
+
+.btn-outline-dark.focus,.btn-outline-dark:focus {
+    box-shadow: 0 0 0 0 #343a4080
+}
+
+.btn-outline-dark.disabled,.btn-outline-dark:disabled {
+    color: #343a40;
+    background-color: initial
+}
+
+.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #343a40
+}
+
+.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-dark.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 #343a4080
+}
+
+.btn-link {
+    font-weight: 400;
+    color: #007bff;
+    text-decoration: none
+}
+
+.btn-link:hover {
+    color: #0056b3
+}
+
+.btn-link.focus,.btn-link:focus,.btn-link:hover {
+    text-decoration: underline
+}
+
+.btn-link.disabled,.btn-link:disabled {
+    color: #6c757d;
+    pointer-events: none
+}
+
+.btn-group-lg>.btn,.btn-lg {
+    padding: .5rem 1rem;
+    font-size: 1.25rem;
+    line-height: 1.5;
+    border-radius: .3rem
+}
+
+.btn-group-sm>.btn,.btn-sm {
+    padding: .25rem .5rem;
+    font-size: .875rem;
+    line-height: 1.5;
+    border-radius: .2rem
+}
+
+.btn-block {
+    display: block;
+    width: 100%
+}
+
+.btn-block+.btn-block {
+    margin-top: .5rem
+}
+
+input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block {
+    width: 100%
+}
+
+.dropdown,.dropleft,.dropright,.dropup {
+    position: relative
+}
+
+.dropdown-toggle {
+    white-space: nowrap
+}
+
+.dropdown-toggle:empty:after {
+    margin-left: 0
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 10rem;
+    padding: .5rem 0;
+    margin: .125rem 0 0;
+    font-size: 1rem;
+    color: #212529;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #00000026;
+    border-radius: .25rem
+}
+
+.dropdown-menu-left {
+    right: auto;
+    left: 0
+}
+
+.dropdown-menu-right {
+    right: 0;
+    left: auto
+}
+
+@media (min-width: 576px) {
+    .dropdown-menu-sm-left {
+        right:auto;
+        left: 0
+    }
+
+    .dropdown-menu-sm-right {
+        right: 0;
+        left: auto
+    }
+}
+
+@media (min-width: 768px) {
+    .dropdown-menu-md-left {
+        right:auto;
+        left: 0
+    }
+
+    .dropdown-menu-md-right {
+        right: 0;
+        left: auto
+    }
+}
+
+@media (min-width: 900px) {
+    .dropdown-menu-lg-left {
+        right:auto;
+        left: 0
+    }
+
+    .dropdown-menu-lg-right {
+        right: 0;
+        left: auto
+    }
+}
+
+@media (min-width: 1200px) {
+    .dropdown-menu-xl-left {
+        right:auto;
+        left: 0
+    }
+
+    .dropdown-menu-xl-right {
+        right: 0;
+        left: auto
+    }
+}
+
+@media (min-width: 1600px) {
+    .dropdown-menu-xxl-left {
+        right:auto;
+        left: 0
+    }
+
+    .dropdown-menu-xxl-right {
+        right: 0;
+        left: auto
+    }
+}
+
+@media (min-width: 1800px) {
+    .dropdown-menu-fhd-left {
+        right:auto;
+        left: 0
+    }
+
+    .dropdown-menu-fhd-right {
+        right: 0;
+        left: auto
+    }
+}
+
+@media (min-width: 2560px) {
+    .dropdown-menu-qhd-left {
+        right:auto;
+        left: 0
+    }
+
+    .dropdown-menu-qhd-right {
+        right: 0;
+        left: auto
+    }
+}
+
+@media (min-width: 3840px) {
+    .dropdown-menu-uhd-left {
+        right:auto;
+        left: 0
+    }
+
+    .dropdown-menu-uhd-right {
+        right: 0;
+        left: auto
+    }
+}
+
+.dropup .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: .125rem
+}
+
+.dropup .dropdown-toggle:after {
+    display: inline-block;
+    margin-left: .255em;
+    vertical-align: .255em;
+    content: "";
+    border-top: 0;
+    border-right: .3em solid #0000;
+    border-bottom: .3em solid;
+    border-left: .3em solid #0000
+}
+
+.dropup .dropdown-toggle:empty:after {
+    margin-left: 0
+}
+
+.dropright .dropdown-menu {
+    top: 0;
+    right: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-left: .125rem
+}
+
+.dropright .dropdown-toggle:after {
+    display: inline-block;
+    margin-left: .255em;
+    vertical-align: .255em;
+    content: "";
+    border-top: .3em solid #0000;
+    border-right: 0;
+    border-bottom: .3em solid #0000;
+    border-left: .3em solid
+}
+
+.dropright .dropdown-toggle:empty:after {
+    margin-left: 0
+}
+
+.dropright .dropdown-toggle:after {
+    vertical-align: 0
+}
+
+.dropleft .dropdown-menu {
+    top: 0;
+    right: 100%;
+    left: auto;
+    margin-top: 0;
+    margin-right: .125rem
+}
+
+.dropleft .dropdown-toggle:after {
+    display: inline-block;
+    margin-left: .255em;
+    vertical-align: .255em;
+    content: "";
+    display: none
+}
+
+.dropleft .dropdown-toggle:before {
+    display: inline-block;
+    margin-right: .255em;
+    vertical-align: .255em;
+    content: "";
+    border-top: .3em solid #0000;
+    border-right: .3em solid;
+    border-bottom: .3em solid #0000
+}
+
+.dropleft .dropdown-toggle:empty:after {
+    margin-left: 0
+}
+
+.dropleft .dropdown-toggle:before {
+    vertical-align: 0
+}
+
+.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=top] {
+    right: auto;
+    bottom: auto
+}
+
+.dropdown-divider {
+    height: 0;
+    margin: .5rem 0;
+    overflow: hidden;
+    border-top: 1px solid #e9ecef
+}
+
+.dropdown-item {
+    display: block;
+    width: 100%;
+    padding: .25rem 1.5rem;
+    clear: both;
+    font-weight: 400;
+    color: #212529;
+    text-align: inherit;
+    white-space: nowrap;
+    background-color: initial;
+    border: 0
+}
+
+.dropdown-item:focus,.dropdown-item:hover {
+    color: #16181b;
+    text-decoration: none;
+    background-color: #e9ecef
+}
+
+.dropdown-item.active,.dropdown-item:active {
+    color: #fff;
+    text-decoration: none;
+    background-color: inherit
+}
+
+.dropdown-item.disabled,.dropdown-item:disabled {
+    color: #adb5bd;
+    pointer-events: none;
+    background-color: initial
+}
+
+.dropdown-menu.show {
+    display: block
+}
+
+.dropdown-header {
+    display: block;
+    padding: .5rem 1.5rem;
+    margin-bottom: 0;
+    font-size: .875rem;
+    color: #6c757d;
+    white-space: nowrap
+}
+
+.dropdown-item-text {
+    display: block;
+    padding: .25rem 1.5rem;
+    color: #212529
+}
+
+.btn-group,.btn-group-vertical {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle
+}
+
+.btn-group-vertical>.btn,.btn-group>.btn {
+    position: relative;
+    flex: 1 1 auto
+}
+
+.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover {
+    z-index: 1
+}
+
+.btn-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start
+}
+
+.btn-toolbar .input-group {
+    width: auto
+}
+
+.btn-group>.btn-group:not(:first-child),.btn-group>.btn:not(:first-child) {
+    margin-left: -1px
+}
+
+.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.dropdown-toggle-split {
+    padding-right: .5625rem;
+    padding-left: .5625rem
+}
+
+.dropdown-toggle-split:after,.dropright .dropdown-toggle-split:after,.dropup .dropdown-toggle-split:after {
+    margin-left: 0
+}
+
+.dropleft .dropdown-toggle-split:before {
+    margin-right: 0
+}
+
+.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split {
+    padding-right: .375rem;
+    padding-left: .375rem
+}
+
+.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split {
+    padding-right: .75rem;
+    padding-left: .75rem
+}
+
+.btn-group-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center
+}
+
+.btn-group-vertical>.btn,.btn-group-vertical>.btn-group {
+    width: 100%
+}
+
+.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child) {
+    margin-top: -1px
+}
+
+.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:not(:first-child) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0
+}
+
+.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn {
+    margin-bottom: 0
+}
+
+.btn-group-toggle>.btn-group>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio],.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn input[type=radio] {
+    position: absolute;
+    clip: rect(0,0,0,0);
+    pointer-events: none
+}
+
+.input-group {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    width: 100%
+}
+
+.input-group>.custom-file,.input-group>.custom-select,.input-group>.form-control,.input-group>.form-control-plaintext {
+    position: relative;
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+    margin-bottom: 0
+}
+
+.input-group>.custom-file+.custom-file,.input-group>.custom-file+.custom-select,.input-group>.custom-file+.form-control,.input-group>.custom-select+.custom-file,.input-group>.custom-select+.custom-select,.input-group>.custom-select+.form-control,.input-group>.form-control+.custom-file,.input-group>.form-control+.custom-select,.input-group>.form-control+.form-control,.input-group>.form-control-plaintext+.custom-file,.input-group>.form-control-plaintext+.custom-select,.input-group>.form-control-plaintext+.form-control {
+    margin-left: -1px
+}
+
+.input-group>.custom-file .custom-file-input:focus~.custom-file-label,.input-group>.custom-select:focus,.input-group>.form-control:focus {
+    z-index: 3
+}
+
+.input-group>.custom-file .custom-file-input:focus {
+    z-index: 4
+}
+
+.input-group>.custom-select:not(:first-child),.input-group>.form-control:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.input-group>.custom-file {
+    display: flex;
+    align-items: center
+}
+
+.input-group>.custom-file:not(:first-child) .custom-file-label,.input-group>.custom-file:not(:last-child) .custom-file-label {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.input-group.has-validation>.custom-file:nth-last-child(n+3) .custom-file-label:after,.input-group.has-validation>.custom-select:nth-last-child(n+3),.input-group.has-validation>.form-control:nth-last-child(n+3),.input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label:after,.input-group:not(.has-validation)>.custom-select:not(:last-child),.input-group:not(.has-validation)>.form-control:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.input-group-append,.input-group-prepend {
+    display: flex
+}
+
+.input-group-append .btn,.input-group-prepend .btn {
+    position: relative;
+    z-index: 2
+}
+
+.input-group-append .btn:focus,.input-group-prepend .btn:focus {
+    z-index: 3
+}
+
+.input-group-append .btn+.btn,.input-group-append .btn+.input-group-text,.input-group-append .input-group-text+.btn,.input-group-append .input-group-text+.input-group-text,.input-group-prepend .btn+.btn,.input-group-prepend .btn+.input-group-text,.input-group-prepend .input-group-text+.btn,.input-group-prepend .input-group-text+.input-group-text {
+    margin-left: -1px
+}
+
+.input-group-prepend {
+    margin-right: -1px
+}
+
+.input-group-append {
+    margin-left: -1px
+}
+
+.input-group-text {
+    display: flex;
+    align-items: center;
+    padding: .375rem .75rem;
+    margin-bottom: 0;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    text-align: center;
+    white-space: nowrap;
+    background-color: #e9ecef;
+    border: 1px solid #ced4da;
+    border-radius: .25rem
+}
+
+.input-group-text input[type=checkbox],.input-group-text input[type=radio] {
+    margin-top: 0
+}
+
+.input-group-lg>.custom-select,.input-group-lg>.form-control:not(textarea) {
+    height: calc(1.5em + 1rem + 2px)
+}
+
+.input-group-lg>.custom-select,.input-group-lg>.form-control,.input-group-lg>.input-group-append>.btn,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-prepend>.input-group-text {
+    padding: .5rem 1rem;
+    font-size: 1.25rem;
+    line-height: 1.5;
+    border-radius: .3rem
+}
+
+.input-group-sm>.custom-select,.input-group-sm>.form-control:not(textarea) {
+    height: calc(1.5em + .5rem + 2px)
+}
+
+.input-group-sm>.custom-select,.input-group-sm>.form-control,.input-group-sm>.input-group-append>.btn,.input-group-sm>.input-group-append>.input-group-text,.input-group-sm>.input-group-prepend>.btn,.input-group-sm>.input-group-prepend>.input-group-text {
+    padding: .25rem .5rem;
+    font-size: .875rem;
+    line-height: 1.5;
+    border-radius: .2rem
+}
+
+.input-group-lg>.custom-select,.input-group-sm>.custom-select {
+    padding-right: 1.75rem
+}
+
+.input-group.has-validation>.input-group-append:nth-last-child(n+3)>.btn,.input-group.has-validation>.input-group-append:nth-last-child(n+3)>.input-group-text,.input-group:not(.has-validation)>.input-group-append:not(:last-child)>.btn,.input-group:not(.has-validation)>.input-group-append:not(:last-child)>.input-group-text,.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),.input-group>.input-group-prepend>.btn,.input-group>.input-group-prepend>.input-group-text {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text,.input-group>.input-group-prepend:first-child>.btn:not(:first-child),.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),.input-group>.input-group-prepend:not(:first-child)>.btn,.input-group>.input-group-prepend:not(:first-child)>.input-group-text {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.nav {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none
+}
+
+.nav-link {
+    display: block;
+    padding: .5rem 1rem
+}
+
+.nav-link:focus,.nav-link:hover {
+    text-decoration: none
+}
+
+.nav-link.disabled {
+    color: #6c757d;
+    pointer-events: none;
+    cursor: default
+}
+
+.nav-tabs {
+    border-bottom: 1px solid #dee2e6
+}
+
+.nav-tabs .nav-link {
+    margin-bottom: -1px;
+    border: 1px solid #0000;
+    border-top-left-radius: .25rem;
+    border-top-right-radius: .25rem
+}
+
+.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover {
+    border-color: #e9ecef #e9ecef #dee2e6
+}
+
+.nav-tabs .nav-link.disabled {
+    color: #6c757d;
+    background-color: initial;
+    border-color: #0000
+}
+
+.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active {
+    color: #495057;
+    background-color: #fff;
+    border-color: #dee2e6 #dee2e6 #fff
+}
+
+.nav-tabs .dropdown-menu {
+    margin-top: -1px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0
+}
+
+.nav-pills .nav-link {
+    border-radius: .25rem
+}
+
+.nav-pills .nav-link.active,.nav-pills .show>.nav-link {
+    color: #000;
+    background-color: #f0f0f0
+}
+
+.nav-fill .nav-item,.nav-fill>.nav-link {
+    flex: 1 1 auto;
+    text-align: center
+}
+
+.nav-justified .nav-item,.nav-justified>.nav-link {
+    flex-basis: 0;
+    flex-grow: 1;
+    text-align: center
+}
+
+.tab-content>.tab-pane {
+    display: none
+}
+
+.tab-content>.active {
+    display: block
+}
+
+.card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: initial;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: .25rem
+}
+
+.card>hr {
+    margin-right: 0;
+    margin-left: 0
+}
+
+.card>.list-group {
+    border-top: inherit;
+    border-bottom: inherit
+}
+
+.card>.list-group:first-child {
+    border-top-width: 0;
+    border-top-left-radius: calc(.25rem - 1px);
+    border-top-right-radius: calc(.25rem - 1px)
+}
+
+.card>.list-group:last-child {
+    border-bottom-width: 0;
+    border-bottom-right-radius: calc(.25rem - 1px);
+    border-bottom-left-radius: calc(.25rem - 1px)
+}
+
+.card>.card-header+.list-group,.card>.list-group+.card-footer {
+    border-top: 0
+}
+
+.card-body {
+    flex: 1 1 auto;
+    min-height: 1px;
+    padding: 1.25rem
+}
+
+.card-title {
+    margin-bottom: .75rem
+}
+
+.card-subtitle {
+    margin-top: -.375rem
+}
+
+.card-subtitle,.card-text:last-child {
+    margin-bottom: 0
+}
+
+.card-link:hover {
+    text-decoration: none
+}
+
+.card-link+.card-link {
+    margin-left: 1.25rem
+}
+
+.card-header {
+    padding: .75rem 1.25rem;
+    margin-bottom: 0;
+    background-color: #00000008;
+    border-bottom: 1px solid rgba(0,0,0,.125)
+}
+
+.card-header:first-child {
+    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0
+}
+
+.card-footer {
+    padding: .75rem 1.25rem;
+    background-color: #00000008;
+    border-top: 1px solid rgba(0,0,0,.125)
+}
+
+.card-footer:last-child {
+    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px)
+}
+
+.card-header-tabs {
+    margin-bottom: -.75rem;
+    border-bottom: 0
+}
+
+.card-header-pills,.card-header-tabs {
+    margin-right: -.625rem;
+    margin-left: -.625rem
+}
+
+.card-img-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 1.25rem;
+    border-radius: calc(.25rem - 1px)
+}
+
+.card-img,.card-img-bottom,.card-img-top {
+    flex-shrink: 0;
+    width: 100%
+}
+
+.card-img,.card-img-top {
+    border-top-left-radius: calc(.25rem - 1px);
+    border-top-right-radius: calc(.25rem - 1px)
+}
+
+.card-img,.card-img-bottom {
+    border-bottom-right-radius: calc(.25rem - 1px);
+    border-bottom-left-radius: calc(.25rem - 1px)
+}
+
+.card-deck .card {
+    margin-bottom: 15px
+}
+
+@media (min-width: 576px) {
+    .card-deck {
+        display:flex;
+        flex-flow: row wrap;
+        margin-right: -15px;
+        margin-left: -15px
+    }
+
+    .card-deck .card {
+        flex: 1 0 0%;
+        margin-right: 15px;
+        margin-bottom: 0;
+        margin-left: 15px
+    }
+}
+
+.card-group>.card {
+    margin-bottom: 15px
+}
+
+@media (min-width: 576px) {
+    .card-group {
+        display:flex;
+        flex-flow: row wrap
+    }
+
+    .card-group>.card {
+        flex: 1 0 0%;
+        margin-bottom: 0
+    }
+
+    .card-group>.card+.card {
+        margin-left: 0;
+        border-left: 0
+    }
+
+    .card-group>.card:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0
+    }
+
+    .card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top {
+        border-top-right-radius: 0
+    }
+
+    .card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom {
+        border-bottom-right-radius: 0
+    }
+
+    .card-group>.card:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0
+    }
+
+    .card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top {
+        border-top-left-radius: 0
+    }
+
+    .card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom {
+        border-bottom-left-radius: 0
+    }
+}
+
+.card-columns .card {
+    margin-bottom: .75rem
+}
+
+@media (min-width: 576px) {
+    .card-columns {
+        column-count:3;
+        grid-column-gap: 1.25rem;
+        column-gap: 1.25rem;
+        orphans: 1;
+        widows: 1
+    }
+
+    .card-columns .card {
+        display: inline-block;
+        width: 100%
+    }
+}
+
+.accordion {
+    overflow-anchor: none
+}
+
+.accordion>.card {
+    overflow: hidden
+}
+
+.accordion>.card:not(:last-of-type) {
+    border-bottom: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.accordion>.card:not(:first-of-type) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0
+}
+
+.accordion>.card>.card-header {
+    border-radius: 0;
+    margin-bottom: -1px
+}
+
+.badge {
+    display: inline-block;
+    padding: .25em .4em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: initial;
+    border-radius: .25rem;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .badge {
+        transition: none
+    }
+}
+
+a.badge:focus,a.badge:hover {
+    text-decoration: none
+}
+
+.badge:empty {
+    display: none
+}
+
+.btn .badge {
+    position: relative;
+    top: -1px
+}
+
+.badge-pill {
+    padding-right: .6em;
+    padding-left: .6em;
+    border-radius: 10rem
+}
+
+.badge-primary {
+    color: #fff;
+    background-color: #007bff
+}
+
+a.badge-primary:focus,a.badge-primary:hover {
+    color: #fff;
+    background-color: #0062cc
+}
+
+a.badge-primary.focus,a.badge-primary:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0 #007bff80
+}
+
+.badge-secondary {
+    color: #fff;
+    background-color: #6c757d
+}
+
+a.badge-secondary:focus,a.badge-secondary:hover {
+    color: #fff;
+    background-color: #545b62
+}
+
+a.badge-secondary.focus,a.badge-secondary:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0 #6c757d80
+}
+
+.badge-success {
+    color: #fff;
+    background-color: #39cc0b
+}
+
+a.badge-success:focus,a.badge-success:hover {
+    color: #fff;
+    background-color: #2b9c08
+}
+
+a.badge-success.focus,a.badge-success:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0 #39cc0b80
+}
+
+.badge-info {
+    color: #fff;
+    background-color: #17a2b8
+}
+
+a.badge-info:focus,a.badge-info:hover {
+    color: #fff;
+    background-color: #117a8b
+}
+
+a.badge-info.focus,a.badge-info:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0 #17a2b880
+}
+
+.badge-warning {
+    color: #212529;
+    background-color: #ffc107
+}
+
+a.badge-warning:focus,a.badge-warning:hover {
+    color: #212529;
+    background-color: #d39e00
+}
+
+a.badge-warning.focus,a.badge-warning:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0 #ffc10780
+}
+
+.badge-danger {
+    color: #fff;
+    background-color: red
+}
+
+a.badge-danger:focus,a.badge-danger:hover {
+    color: #fff;
+    background-color: #c00
+}
+
+a.badge-danger.focus,a.badge-danger:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0 #ff000080
+}
+
+.badge-light {
+    color: #212529;
+    background-color: #f8f9fa
+}
+
+a.badge-light:focus,a.badge-light:hover {
+    color: #212529;
+    background-color: #dae0e5
+}
+
+a.badge-light.focus,a.badge-light:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0 #f8f9fa80
+}
+
+.badge-dark {
+    color: #fff;
+    background-color: #343a40
+}
+
+a.badge-dark:focus,a.badge-dark:hover {
+    color: #fff;
+    background-color: #1d2124
+}
+
+a.badge-dark.focus,a.badge-dark:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0 #343a4080
+}
+
+.alert {
+    position: relative;
+    padding: .75rem 1.25rem;
+    margin-bottom: 1rem;
+    border: 1px solid #0000;
+    border-radius: .25rem
+}
+
+.alert-heading {
+    color: inherit
+}
+
+.alert-link {
+    font-weight: 700
+}
+
+.alert-dismissible {
+    padding-right: 4rem
+}
+
+.alert-dismissible .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    padding: .75rem 1.25rem;
+    color: inherit
+}
+
+.alert-primary {
+    color: #004085;
+    background-color: #cce5ff;
+    border-color: #b8daff
+}
+
+.alert-primary hr {
+    border-top-color: #9fcdff
+}
+
+.alert-primary .alert-link {
+    color: #002752
+}
+
+.alert-secondary {
+    color: #383d41;
+    background-color: #e2e3e5;
+    border-color: #d6d8db
+}
+
+.alert-secondary hr {
+    border-top-color: #c8cbcf
+}
+
+.alert-secondary .alert-link {
+    color: #202326
+}
+
+.alert-success {
+    color: #1e6a06;
+    background-color: #d7f5ce;
+    border-color: #c8f1bb
+}
+
+.alert-success hr {
+    border-top-color: #b7eda6
+}
+
+.alert-success .alert-link {
+    color: #103a03
+}
+
+.alert-info {
+    color: #0c5460;
+    background-color: #d1ecf1;
+    border-color: #bee5eb
+}
+
+.alert-info hr {
+    border-top-color: #abdde5
+}
+
+.alert-info .alert-link {
+    color: #062c33
+}
+
+.alert-warning {
+    color: #856404;
+    background-color: #fff3cd;
+    border-color: #ffeeba
+}
+
+.alert-warning hr {
+    border-top-color: #ffe8a1
+}
+
+.alert-warning .alert-link {
+    color: #533f03
+}
+
+.alert-danger {
+    color: #850000;
+    background-color: #fcc;
+    border-color: #ffb8b8
+}
+
+.alert-danger hr {
+    border-top-color: #ff9f9f
+}
+
+.alert-danger .alert-link {
+    color: #520000
+}
+
+.alert-light {
+    color: #818182;
+    background-color: #fefefe;
+    border-color: #fdfdfe
+}
+
+.alert-light hr {
+    border-top-color: #ececf6
+}
+
+.alert-light .alert-link {
+    color: #686868
+}
+
+.alert-dark {
+    color: #1b1e21;
+    background-color: #d6d8d9;
+    border-color: #c6c8ca
+}
+
+.alert-dark hr {
+    border-top-color: #b9bbbe
+}
+
+.alert-dark .alert-link {
+    color: #040505
+}
+
+.close {
+    float: right;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: .5
+}
+
+.close:hover {
+    color: #000;
+    text-decoration: none
+}
+
+.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover {
+    opacity: .75
+}
+
+button.close {
+    padding: 0;
+    background-color: initial;
+    border: 0
+}
+
+a.close.disabled {
+    pointer-events: none
+}
+
+.modal-open {
+    overflow: hidden
+}
+
+.modal-open .modal {
+    overflow-x: hidden;
+    overflow-y: auto
+}
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1050;
+    display: none;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    outline: 0
+}
+
+.modal-dialog {
+    position: relative;
+    width: auto;
+    margin: .5rem;
+    pointer-events: none
+}
+
+.modal.fade .modal-dialog {
+    transition: transform .3s ease-out;
+    transform: translateY(-50px)
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .modal.fade .modal-dialog {
+        transition: none
+    }
+}
+
+.modal.show .modal-dialog {
+    transform: none
+}
+
+.modal.modal-static .modal-dialog {
+    transform: scale(1.02)
+}
+
+.modal-dialog-scrollable {
+    display: flex;
+    max-height: calc(100% - 1rem)
+}
+
+.modal-dialog-scrollable .modal-content {
+    max-height: calc(100vh - 1rem);
+    overflow: hidden
+}
+
+.modal-dialog-scrollable .modal-footer,.modal-dialog-scrollable .modal-header {
+    flex-shrink: 0
+}
+
+.modal-dialog-scrollable .modal-body {
+    overflow-y: auto
+}
+
+.modal-dialog-centered {
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - 1rem)
+}
+
+.modal-dialog-centered:before {
+    display: block;
+    height: calc(100vh - 1rem);
+    height: -webkit-min-content;
+    height: min-content;
+    content: ""
+}
+
+.modal-dialog-centered.modal-dialog-scrollable {
+    flex-direction: column;
+    justify-content: center;
+    height: 100%
+}
+
+.modal-dialog-centered.modal-dialog-scrollable .modal-content {
+    max-height: none
+}
+
+.modal-dialog-centered.modal-dialog-scrollable:before {
+    content: none
+}
+
+.modal-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    pointer-events: auto;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #0003;
+    border-radius: .3rem;
+    outline: 0
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1040;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000
+}
+
+.modal-backdrop.fade {
+    opacity: 0
+}
+
+.modal-backdrop.show {
+    opacity: .5
+}
+
+.modal-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid #dee2e6;
+    border-top-left-radius: calc(.3rem - 1px);
+    border-top-right-radius: calc(.3rem - 1px)
+}
+
+.modal-header .close {
+    padding: 1rem;
+    margin: -1rem -1rem -1rem auto
+}
+
+.modal-title {
+    margin-bottom: 0;
+    line-height: 1.5
+}
+
+.modal-body {
+    position: relative;
+    flex: 1 1 auto;
+    padding: 1rem
+}
+
+.modal-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    padding: .75rem;
+    border-top: 0 solid #dee2e6;
+    border-bottom-right-radius: calc(.3rem - 1px);
+    border-bottom-left-radius: calc(.3rem - 1px)
+}
+
+.modal-footer>* {
+    margin: .25rem
+}
+
+.modal-scrollbar-measure {
+    position: absolute;
+    top: -9999px;
+    width: 50px;
+    height: 50px;
+    overflow: scroll
+}
+
+@media (min-width: 576px) {
+    .modal-dialog {
+        max-width:600px;
+        margin: 1.75rem auto
+    }
+
+    .modal-dialog-scrollable {
+        max-height: calc(100% - 3.5rem)
+    }
+
+    .modal-dialog-scrollable .modal-content {
+        max-height: calc(100vh - 3.5rem)
+    }
+
+    .modal-dialog-centered {
+        min-height: calc(100% - 3.5rem)
+    }
+
+    .modal-dialog-centered:before {
+        height: calc(100vh - 3.5rem);
+        height: -webkit-min-content;
+        height: min-content
+    }
+
+    .modal-sm {
+        max-width: 300px
+    }
+}
+
+@media (min-width: 900px) {
+    .modal-lg,.modal-xl {
+        max-width:800px
+    }
+}
+
+@media (min-width: 1200px) {
+    .modal-xl {
+        max-width:1140px
+    }
+}
+
+.tooltip {
+    position: absolute;
+    z-index: 1070;
+    display: block;
+    margin: 0;
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: left;
+    text-align: start;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-break: normal;
+    word-spacing: normal;
+    white-space: normal;
+    line-break: auto;
+    font-size: .875rem;
+    word-wrap: break-word;
+    opacity: 0
+}
+
+.tooltip.show {
+    opacity: .9
+}
+
+.tooltip .arrow {
+    position: absolute;
+    display: block;
+    width: .8rem;
+    height: .4rem
+}
+
+.tooltip .arrow:before {
+    position: absolute;
+    content: "";
+    border-color: #0000;
+    border-style: solid
+}
+
+.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top {
+    padding: .4rem 0
+}
+
+.bs-tooltip-auto[x-placement^=top] .arrow,.bs-tooltip-top .arrow {
+    bottom: 0
+}
+
+.bs-tooltip-auto[x-placement^=top] .arrow:before,.bs-tooltip-top .arrow:before {
+    top: 0;
+    border-width: .4rem .4rem 0;
+    border-top-color: #000
+}
+
+.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right {
+    padding: 0 .4rem
+}
+
+.bs-tooltip-auto[x-placement^=right] .arrow,.bs-tooltip-right .arrow {
+    left: 0;
+    width: .4rem;
+    height: .8rem
+}
+
+.bs-tooltip-auto[x-placement^=right] .arrow:before,.bs-tooltip-right .arrow:before {
+    right: 0;
+    border-width: .4rem .4rem .4rem 0;
+    border-right-color: #000
+}
+
+.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom {
+    padding: .4rem 0
+}
+
+.bs-tooltip-auto[x-placement^=bottom] .arrow,.bs-tooltip-bottom .arrow {
+    top: 0
+}
+
+.bs-tooltip-auto[x-placement^=bottom] .arrow:before,.bs-tooltip-bottom .arrow:before {
+    bottom: 0;
+    border-width: 0 .4rem .4rem;
+    border-bottom-color: #000
+}
+
+.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left {
+    padding: 0 .4rem
+}
+
+.bs-tooltip-auto[x-placement^=left] .arrow,.bs-tooltip-left .arrow {
+    right: 0;
+    width: .4rem;
+    height: .8rem
+}
+
+.bs-tooltip-auto[x-placement^=left] .arrow:before,.bs-tooltip-left .arrow:before {
+    left: 0;
+    border-width: .4rem 0 .4rem .4rem;
+    border-left-color: #000
+}
+
+.tooltip-inner {
+    max-width: 200px;
+    padding: .25rem .5rem;
+    color: #fff;
+    text-align: center;
+    background-color: #000;
+    border-radius: .25rem
+}
+
+.popover {
+    top: 0;
+    left: 0;
+    z-index: 1060;
+    max-width: 276px;
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: left;
+    text-align: start;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-break: normal;
+    word-spacing: normal;
+    white-space: normal;
+    line-break: auto;
+    font-size: .875rem;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #0003;
+    border-radius: .3rem
+}
+
+.popover,.popover .arrow {
+    position: absolute;
+    display: block
+}
+
+.popover .arrow {
+    width: 1rem;
+    height: .5rem;
+    margin: 0 .3rem
+}
+
+.popover .arrow:after,.popover .arrow:before {
+    position: absolute;
+    display: block;
+    content: "";
+    border-color: #0000;
+    border-style: solid
+}
+
+.bs-popover-auto[x-placement^=top],.bs-popover-top {
+    margin-bottom: .5rem
+}
+
+.bs-popover-auto[x-placement^=top]>.arrow,.bs-popover-top>.arrow {
+    bottom: calc(-.5rem - 1px)
+}
+
+.bs-popover-auto[x-placement^=top]>.arrow:before,.bs-popover-top>.arrow:before {
+    bottom: 0;
+    border-width: .5rem .5rem 0;
+    border-top-color: #00000040
+}
+
+.bs-popover-auto[x-placement^=top]>.arrow:after,.bs-popover-top>.arrow:after {
+    bottom: 1px;
+    border-width: .5rem .5rem 0;
+    border-top-color: #fff
+}
+
+.bs-popover-auto[x-placement^=right],.bs-popover-right {
+    margin-left: .5rem
+}
+
+.bs-popover-auto[x-placement^=right]>.arrow,.bs-popover-right>.arrow {
+    left: calc(-.5rem - 1px);
+    width: .5rem;
+    height: 1rem;
+    margin: .3rem 0
+}
+
+.bs-popover-auto[x-placement^=right]>.arrow:before,.bs-popover-right>.arrow:before {
+    left: 0;
+    border-width: .5rem .5rem .5rem 0;
+    border-right-color: #00000040
+}
+
+.bs-popover-auto[x-placement^=right]>.arrow:after,.bs-popover-right>.arrow:after {
+    left: 1px;
+    border-width: .5rem .5rem .5rem 0;
+    border-right-color: #fff
+}
+
+.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom {
+    margin-top: .5rem
+}
+
+.bs-popover-auto[x-placement^=bottom]>.arrow,.bs-popover-bottom>.arrow {
+    top: calc(-.5rem - 1px)
+}
+
+.bs-popover-auto[x-placement^=bottom]>.arrow:before,.bs-popover-bottom>.arrow:before {
+    top: 0;
+    border-width: 0 .5rem .5rem;
+    border-bottom-color: #00000040
+}
+
+.bs-popover-auto[x-placement^=bottom]>.arrow:after,.bs-popover-bottom>.arrow:after {
+    top: 1px;
+    border-width: 0 .5rem .5rem;
+    border-bottom-color: #fff
+}
+
+.bs-popover-auto[x-placement^=bottom] .popover-header:before,.bs-popover-bottom .popover-header:before {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: block;
+    width: 1rem;
+    margin-left: -.5rem;
+    content: "";
+    border-bottom: 1px solid #f7f7f7
+}
+
+.bs-popover-auto[x-placement^=left],.bs-popover-left {
+    margin-right: .5rem
+}
+
+.bs-popover-auto[x-placement^=left]>.arrow,.bs-popover-left>.arrow {
+    right: calc(-.5rem - 1px);
+    width: .5rem;
+    height: 1rem;
+    margin: .3rem 0
+}
+
+.bs-popover-auto[x-placement^=left]>.arrow:before,.bs-popover-left>.arrow:before {
+    right: 0;
+    border-width: .5rem 0 .5rem .5rem;
+    border-left-color: #00000040
+}
+
+.bs-popover-auto[x-placement^=left]>.arrow:after,.bs-popover-left>.arrow:after {
+    right: 1px;
+    border-width: .5rem 0 .5rem .5rem;
+    border-left-color: #fff
+}
+
+.popover-header {
+    padding: .5rem .75rem;
+    margin-bottom: 0;
+    font-size: 1rem;
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #ebebeb;
+    border-top-left-radius: calc(.3rem - 1px);
+    border-top-right-radius: calc(.3rem - 1px)
+}
+
+.popover-header:empty {
+    display: none
+}
+
+.popover-body {
+    padding: .5rem .75rem;
+    color: #212529
+}
+
+.align-baseline {
+    vertical-align: initial!important
+}
+
+.align-top {
+    vertical-align: top!important
+}
+
+.align-middle {
+    vertical-align: middle!important
+}
+
+.align-bottom {
+    vertical-align: bottom!important
+}
+
+.align-text-bottom {
+    vertical-align: text-bottom!important
+}
+
+.align-text-top {
+    vertical-align: text-top!important
+}
+
+.bg-primary {
+    background-color: #007bff!important
+}
+
+a.bg-primary:focus,a.bg-primary:hover,button.bg-primary:focus,button.bg-primary:hover {
+    background-color: #0062cc!important
+}
+
+.bg-secondary {
+    background-color: #6c757d!important
+}
+
+a.bg-secondary:focus,a.bg-secondary:hover,button.bg-secondary:focus,button.bg-secondary:hover {
+    background-color: #545b62!important
+}
+
+.bg-success {
+    background-color: #39cc0b!important
+}
+
+a.bg-success:focus,a.bg-success:hover,button.bg-success:focus,button.bg-success:hover {
+    background-color: #2b9c08!important
+}
+
+.bg-info {
+    background-color: #17a2b8!important
+}
+
+a.bg-info:focus,a.bg-info:hover,button.bg-info:focus,button.bg-info:hover {
+    background-color: #117a8b!important
+}
+
+.bg-warning {
+    background-color: #ffc107!important
+}
+
+a.bg-warning:focus,a.bg-warning:hover,button.bg-warning:focus,button.bg-warning:hover {
+    background-color: #d39e00!important
+}
+
+.bg-danger {
+    background-color: red!important
+}
+
+a.bg-danger:focus,a.bg-danger:hover,button.bg-danger:focus,button.bg-danger:hover {
+    background-color: #c00!important
+}
+
+.bg-light {
+    background-color: #f8f9fa!important
+}
+
+a.bg-light:focus,a.bg-light:hover,button.bg-light:focus,button.bg-light:hover {
+    background-color: #dae0e5!important
+}
+
+.bg-dark {
+    background-color: #343a40!important
+}
+
+a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover {
+    background-color: #1d2124!important
+}
+
+.bg-white {
+    background-color: #fff!important
+}
+
+.bg-transparent {
+    background-color: initial!important
+}
+
+.border {
+    border: 1px solid #dee2e6!important
+}
+
+.border-top {
+    border-top: 1px solid #dee2e6!important
+}
+
+.border-right {
+    border-right: 1px solid #dee2e6!important
+}
+
+.border-bottom {
+    border-bottom: 1px solid #dee2e6!important
+}
+
+.border-left {
+    border-left: 1px solid #dee2e6!important
+}
+
+.border-0 {
+    border: 0!important
+}
+
+.border-top-0 {
+    border-top: 0!important
+}
+
+.border-right-0 {
+    border-right: 0!important
+}
+
+.border-bottom-0 {
+    border-bottom: 0!important
+}
+
+.border-left-0 {
+    border-left: 0!important
+}
+
+.border-primary {
+    border-color: #007bff!important
+}
+
+.border-secondary {
+    border-color: #6c757d!important
+}
+
+.border-success {
+    border-color: #39cc0b!important
+}
+
+.border-info {
+    border-color: #17a2b8!important
+}
+
+.border-warning {
+    border-color: #ffc107!important
+}
+
+.border-danger {
+    border-color: red!important
+}
+
+.border-light {
+    border-color: #f8f9fa!important
+}
+
+.border-dark {
+    border-color: #343a40!important
+}
+
+.border-white {
+    border-color: #fff!important
+}
+
+.rounded-sm {
+    border-radius: .2rem!important
+}
+
+.rounded {
+    border-radius: .25rem!important
+}
+
+.rounded-top {
+    border-top-left-radius: .25rem!important
+}
+
+.rounded-right,.rounded-top {
+    border-top-right-radius: .25rem!important
+}
+
+.rounded-bottom,.rounded-right {
+    border-bottom-right-radius: .25rem!important
+}
+
+.rounded-bottom,.rounded-left {
+    border-bottom-left-radius: .25rem!important
+}
+
+.rounded-left {
+    border-top-left-radius: .25rem!important
+}
+
+.rounded-lg {
+    border-radius: .3rem!important
+}
+
+.rounded-circle {
+    border-radius: 50%!important
+}
+
+.rounded-pill {
+    border-radius: 50rem!important
+}
+
+.rounded-0 {
+    border-radius: 0!important
+}
+
+.clearfix:after {
+    display: block;
+    clear: both;
+    content: ""
+}
+
+.d-none {
+    display: none!important
+}
+
+.d-inline {
+    display: inline!important
+}
+
+.d-inline-block {
+    display: inline-block!important
+}
+
+.d-block {
+    display: block!important
+}
+
+.d-table {
+    display: table!important
+}
+
+.d-table-row {
+    display: table-row!important
+}
+
+.d-table-cell {
+    display: table-cell!important
+}
+
+.d-flex {
+    display: flex!important
+}
+
+.d-inline-flex {
+    display: inline-flex!important
+}
+
+@media (min-width: 576px) {
+    .d-sm-none {
+        display:none!important
+    }
+
+    .d-sm-inline {
+        display: inline!important
+    }
+
+    .d-sm-inline-block {
+        display: inline-block!important
+    }
+
+    .d-sm-block {
+        display: block!important
+    }
+
+    .d-sm-table {
+        display: table!important
+    }
+
+    .d-sm-table-row {
+        display: table-row!important
+    }
+
+    .d-sm-table-cell {
+        display: table-cell!important
+    }
+
+    .d-sm-flex {
+        display: flex!important
+    }
+
+    .d-sm-inline-flex {
+        display: inline-flex!important
+    }
+}
+
+@media (min-width: 768px) {
+    .d-md-none {
+        display:none!important
+    }
+
+    .d-md-inline {
+        display: inline!important
+    }
+
+    .d-md-inline-block {
+        display: inline-block!important
+    }
+
+    .d-md-block {
+        display: block!important
+    }
+
+    .d-md-table {
+        display: table!important
+    }
+
+    .d-md-table-row {
+        display: table-row!important
+    }
+
+    .d-md-table-cell {
+        display: table-cell!important
+    }
+
+    .d-md-flex {
+        display: flex!important
+    }
+
+    .d-md-inline-flex {
+        display: inline-flex!important
+    }
+}
+
+@media (min-width: 900px) {
+    .d-lg-none {
+        display:none!important
+    }
+
+    .d-lg-inline {
+        display: inline!important
+    }
+
+    .d-lg-inline-block {
+        display: inline-block!important
+    }
+
+    .d-lg-block {
+        display: block!important
+    }
+
+    .d-lg-table {
+        display: table!important
+    }
+
+    .d-lg-table-row {
+        display: table-row!important
+    }
+
+    .d-lg-table-cell {
+        display: table-cell!important
+    }
+
+    .d-lg-flex {
+        display: flex!important
+    }
+
+    .d-lg-inline-flex {
+        display: inline-flex!important
+    }
+}
+
+@media (min-width: 1200px) {
+    .d-xl-none {
+        display:none!important
+    }
+
+    .d-xl-inline {
+        display: inline!important
+    }
+
+    .d-xl-inline-block {
+        display: inline-block!important
+    }
+
+    .d-xl-block {
+        display: block!important
+    }
+
+    .d-xl-table {
+        display: table!important
+    }
+
+    .d-xl-table-row {
+        display: table-row!important
+    }
+
+    .d-xl-table-cell {
+        display: table-cell!important
+    }
+
+    .d-xl-flex {
+        display: flex!important
+    }
+
+    .d-xl-inline-flex {
+        display: inline-flex!important
+    }
+}
+
+@media (min-width: 1600px) {
+    .d-xxl-none {
+        display:none!important
+    }
+
+    .d-xxl-inline {
+        display: inline!important
+    }
+
+    .d-xxl-inline-block {
+        display: inline-block!important
+    }
+
+    .d-xxl-block {
+        display: block!important
+    }
+
+    .d-xxl-table {
+        display: table!important
+    }
+
+    .d-xxl-table-row {
+        display: table-row!important
+    }
+
+    .d-xxl-table-cell {
+        display: table-cell!important
+    }
+
+    .d-xxl-flex {
+        display: flex!important
+    }
+
+    .d-xxl-inline-flex {
+        display: inline-flex!important
+    }
+}
+
+@media (min-width: 1800px) {
+    .d-fhd-none {
+        display:none!important
+    }
+
+    .d-fhd-inline {
+        display: inline!important
+    }
+
+    .d-fhd-inline-block {
+        display: inline-block!important
+    }
+
+    .d-fhd-block {
+        display: block!important
+    }
+
+    .d-fhd-table {
+        display: table!important
+    }
+
+    .d-fhd-table-row {
+        display: table-row!important
+    }
+
+    .d-fhd-table-cell {
+        display: table-cell!important
+    }
+
+    .d-fhd-flex {
+        display: flex!important
+    }
+
+    .d-fhd-inline-flex {
+        display: inline-flex!important
+    }
+}
+
+@media (min-width: 2560px) {
+    .d-qhd-none {
+        display:none!important
+    }
+
+    .d-qhd-inline {
+        display: inline!important
+    }
+
+    .d-qhd-inline-block {
+        display: inline-block!important
+    }
+
+    .d-qhd-block {
+        display: block!important
+    }
+
+    .d-qhd-table {
+        display: table!important
+    }
+
+    .d-qhd-table-row {
+        display: table-row!important
+    }
+
+    .d-qhd-table-cell {
+        display: table-cell!important
+    }
+
+    .d-qhd-flex {
+        display: flex!important
+    }
+
+    .d-qhd-inline-flex {
+        display: inline-flex!important
+    }
+}
+
+@media (min-width: 3840px) {
+    .d-uhd-none {
+        display:none!important
+    }
+
+    .d-uhd-inline {
+        display: inline!important
+    }
+
+    .d-uhd-inline-block {
+        display: inline-block!important
+    }
+
+    .d-uhd-block {
+        display: block!important
+    }
+
+    .d-uhd-table {
+        display: table!important
+    }
+
+    .d-uhd-table-row {
+        display: table-row!important
+    }
+
+    .d-uhd-table-cell {
+        display: table-cell!important
+    }
+
+    .d-uhd-flex {
+        display: flex!important
+    }
+
+    .d-uhd-inline-flex {
+        display: inline-flex!important
+    }
+}
+
+@media print {
+    .d-print-none {
+        display: none!important
+    }
+
+    .d-print-inline {
+        display: inline!important
+    }
+
+    .d-print-inline-block {
+        display: inline-block!important
+    }
+
+    .d-print-block {
+        display: block!important
+    }
+
+    .d-print-table {
+        display: table!important
+    }
+
+    .d-print-table-row {
+        display: table-row!important
+    }
+
+    .d-print-table-cell {
+        display: table-cell!important
+    }
+
+    .d-print-flex {
+        display: flex!important
+    }
+
+    .d-print-inline-flex {
+        display: inline-flex!important
+    }
+}
+
+.embed-responsive {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: 0;
+    overflow: hidden
+}
+
+.embed-responsive:before {
+    display: block;
+    content: ""
+}
+
+.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0
+}
+
+.embed-responsive-21by9:before {
+    padding-top: 42.8571428571%
+}
+
+.embed-responsive-16by9:before {
+    padding-top: 56.25%
+}
+
+.embed-responsive-4by3:before {
+    padding-top: 75%
+}
+
+.embed-responsive-1by1:before {
+    padding-top: 100%
+}
+
+.flex-row {
+    flex-direction: row!important
+}
+
+.flex-column {
+    flex-direction: column!important
+}
+
+.flex-row-reverse {
+    flex-direction: row-reverse!important
+}
+
+.flex-column-reverse {
+    flex-direction: column-reverse!important
+}
+
+.flex-wrap {
+    flex-wrap: wrap!important
+}
+
+.flex-nowrap {
+    flex-wrap: nowrap!important
+}
+
+.flex-wrap-reverse {
+    flex-wrap: wrap-reverse!important
+}
+
+.flex-fill {
+    flex: 1 1 auto!important
+}
+
+.flex-grow-0 {
+    flex-grow: 0!important
+}
+
+.flex-grow-1 {
+    flex-grow: 1!important
+}
+
+.flex-shrink-0 {
+    flex-shrink: 0!important
+}
+
+.flex-shrink-1 {
+    flex-shrink: 1!important
+}
+
+.justify-content-start {
+    justify-content: flex-start!important
+}
+
+.justify-content-end {
+    justify-content: flex-end!important
+}
+
+.justify-content-center {
+    justify-content: center!important
+}
+
+.justify-content-between {
+    justify-content: space-between!important
+}
+
+.justify-content-around {
+    justify-content: space-around!important
+}
+
+.align-items-start {
+    align-items: flex-start!important
+}
+
+.align-items-end {
+    align-items: flex-end!important
+}
+
+.align-items-center {
+    align-items: center!important
+}
+
+.align-items-baseline {
+    align-items: baseline!important
+}
+
+.align-items-stretch {
+    align-items: stretch!important
+}
+
+.align-content-start {
+    align-content: flex-start!important
+}
+
+.align-content-end {
+    align-content: flex-end!important
+}
+
+.align-content-center {
+    align-content: center!important
+}
+
+.align-content-between {
+    align-content: space-between!important
+}
+
+.align-content-around {
+    align-content: space-around!important
+}
+
+.align-content-stretch {
+    align-content: stretch!important
+}
+
+.align-self-auto {
+    align-self: auto!important
+}
+
+.align-self-start {
+    align-self: flex-start!important
+}
+
+.align-self-end {
+    align-self: flex-end!important
+}
+
+.align-self-center {
+    align-self: center!important
+}
+
+.align-self-baseline {
+    align-self: baseline!important
+}
+
+.align-self-stretch {
+    align-self: stretch!important
+}
+
+@media (min-width: 576px) {
+    .flex-sm-row {
+        flex-direction:row!important
+    }
+
+    .flex-sm-column {
+        flex-direction: column!important
+    }
+
+    .flex-sm-row-reverse {
+        flex-direction: row-reverse!important
+    }
+
+    .flex-sm-column-reverse {
+        flex-direction: column-reverse!important
+    }
+
+    .flex-sm-wrap {
+        flex-wrap: wrap!important
+    }
+
+    .flex-sm-nowrap {
+        flex-wrap: nowrap!important
+    }
+
+    .flex-sm-wrap-reverse {
+        flex-wrap: wrap-reverse!important
+    }
+
+    .flex-sm-fill {
+        flex: 1 1 auto!important
+    }
+
+    .flex-sm-grow-0 {
+        flex-grow: 0!important
+    }
+
+    .flex-sm-grow-1 {
+        flex-grow: 1!important
+    }
+
+    .flex-sm-shrink-0 {
+        flex-shrink: 0!important
+    }
+
+    .flex-sm-shrink-1 {
+        flex-shrink: 1!important
+    }
+
+    .justify-content-sm-start {
+        justify-content: flex-start!important
+    }
+
+    .justify-content-sm-end {
+        justify-content: flex-end!important
+    }
+
+    .justify-content-sm-center {
+        justify-content: center!important
+    }
+
+    .justify-content-sm-between {
+        justify-content: space-between!important
+    }
+
+    .justify-content-sm-around {
+        justify-content: space-around!important
+    }
+
+    .align-items-sm-start {
+        align-items: flex-start!important
+    }
+
+    .align-items-sm-end {
+        align-items: flex-end!important
+    }
+
+    .align-items-sm-center {
+        align-items: center!important
+    }
+
+    .align-items-sm-baseline {
+        align-items: baseline!important
+    }
+
+    .align-items-sm-stretch {
+        align-items: stretch!important
+    }
+
+    .align-content-sm-start {
+        align-content: flex-start!important
+    }
+
+    .align-content-sm-end {
+        align-content: flex-end!important
+    }
+
+    .align-content-sm-center {
+        align-content: center!important
+    }
+
+    .align-content-sm-between {
+        align-content: space-between!important
+    }
+
+    .align-content-sm-around {
+        align-content: space-around!important
+    }
+
+    .align-content-sm-stretch {
+        align-content: stretch!important
+    }
+
+    .align-self-sm-auto {
+        align-self: auto!important
+    }
+
+    .align-self-sm-start {
+        align-self: flex-start!important
+    }
+
+    .align-self-sm-end {
+        align-self: flex-end!important
+    }
+
+    .align-self-sm-center {
+        align-self: center!important
+    }
+
+    .align-self-sm-baseline {
+        align-self: baseline!important
+    }
+
+    .align-self-sm-stretch {
+        align-self: stretch!important
+    }
+}
+
+@media (min-width: 768px) {
+    .flex-md-row {
+        flex-direction:row!important
+    }
+
+    .flex-md-column {
+        flex-direction: column!important
+    }
+
+    .flex-md-row-reverse {
+        flex-direction: row-reverse!important
+    }
+
+    .flex-md-column-reverse {
+        flex-direction: column-reverse!important
+    }
+
+    .flex-md-wrap {
+        flex-wrap: wrap!important
+    }
+
+    .flex-md-nowrap {
+        flex-wrap: nowrap!important
+    }
+
+    .flex-md-wrap-reverse {
+        flex-wrap: wrap-reverse!important
+    }
+
+    .flex-md-fill {
+        flex: 1 1 auto!important
+    }
+
+    .flex-md-grow-0 {
+        flex-grow: 0!important
+    }
+
+    .flex-md-grow-1 {
+        flex-grow: 1!important
+    }
+
+    .flex-md-shrink-0 {
+        flex-shrink: 0!important
+    }
+
+    .flex-md-shrink-1 {
+        flex-shrink: 1!important
+    }
+
+    .justify-content-md-start {
+        justify-content: flex-start!important
+    }
+
+    .justify-content-md-end {
+        justify-content: flex-end!important
+    }
+
+    .justify-content-md-center {
+        justify-content: center!important
+    }
+
+    .justify-content-md-between {
+        justify-content: space-between!important
+    }
+
+    .justify-content-md-around {
+        justify-content: space-around!important
+    }
+
+    .align-items-md-start {
+        align-items: flex-start!important
+    }
+
+    .align-items-md-end {
+        align-items: flex-end!important
+    }
+
+    .align-items-md-center {
+        align-items: center!important
+    }
+
+    .align-items-md-baseline {
+        align-items: baseline!important
+    }
+
+    .align-items-md-stretch {
+        align-items: stretch!important
+    }
+
+    .align-content-md-start {
+        align-content: flex-start!important
+    }
+
+    .align-content-md-end {
+        align-content: flex-end!important
+    }
+
+    .align-content-md-center {
+        align-content: center!important
+    }
+
+    .align-content-md-between {
+        align-content: space-between!important
+    }
+
+    .align-content-md-around {
+        align-content: space-around!important
+    }
+
+    .align-content-md-stretch {
+        align-content: stretch!important
+    }
+
+    .align-self-md-auto {
+        align-self: auto!important
+    }
+
+    .align-self-md-start {
+        align-self: flex-start!important
+    }
+
+    .align-self-md-end {
+        align-self: flex-end!important
+    }
+
+    .align-self-md-center {
+        align-self: center!important
+    }
+
+    .align-self-md-baseline {
+        align-self: baseline!important
+    }
+
+    .align-self-md-stretch {
+        align-self: stretch!important
+    }
+}
+
+@media (min-width: 900px) {
+    .flex-lg-row {
+        flex-direction:row!important
+    }
+
+    .flex-lg-column {
+        flex-direction: column!important
+    }
+
+    .flex-lg-row-reverse {
+        flex-direction: row-reverse!important
+    }
+
+    .flex-lg-column-reverse {
+        flex-direction: column-reverse!important
+    }
+
+    .flex-lg-wrap {
+        flex-wrap: wrap!important
+    }
+
+    .flex-lg-nowrap {
+        flex-wrap: nowrap!important
+    }
+
+    .flex-lg-wrap-reverse {
+        flex-wrap: wrap-reverse!important
+    }
+
+    .flex-lg-fill {
+        flex: 1 1 auto!important
+    }
+
+    .flex-lg-grow-0 {
+        flex-grow: 0!important
+    }
+
+    .flex-lg-grow-1 {
+        flex-grow: 1!important
+    }
+
+    .flex-lg-shrink-0 {
+        flex-shrink: 0!important
+    }
+
+    .flex-lg-shrink-1 {
+        flex-shrink: 1!important
+    }
+
+    .justify-content-lg-start {
+        justify-content: flex-start!important
+    }
+
+    .justify-content-lg-end {
+        justify-content: flex-end!important
+    }
+
+    .justify-content-lg-center {
+        justify-content: center!important
+    }
+
+    .justify-content-lg-between {
+        justify-content: space-between!important
+    }
+
+    .justify-content-lg-around {
+        justify-content: space-around!important
+    }
+
+    .align-items-lg-start {
+        align-items: flex-start!important
+    }
+
+    .align-items-lg-end {
+        align-items: flex-end!important
+    }
+
+    .align-items-lg-center {
+        align-items: center!important
+    }
+
+    .align-items-lg-baseline {
+        align-items: baseline!important
+    }
+
+    .align-items-lg-stretch {
+        align-items: stretch!important
+    }
+
+    .align-content-lg-start {
+        align-content: flex-start!important
+    }
+
+    .align-content-lg-end {
+        align-content: flex-end!important
+    }
+
+    .align-content-lg-center {
+        align-content: center!important
+    }
+
+    .align-content-lg-between {
+        align-content: space-between!important
+    }
+
+    .align-content-lg-around {
+        align-content: space-around!important
+    }
+
+    .align-content-lg-stretch {
+        align-content: stretch!important
+    }
+
+    .align-self-lg-auto {
+        align-self: auto!important
+    }
+
+    .align-self-lg-start {
+        align-self: flex-start!important
+    }
+
+    .align-self-lg-end {
+        align-self: flex-end!important
+    }
+
+    .align-self-lg-center {
+        align-self: center!important
+    }
+
+    .align-self-lg-baseline {
+        align-self: baseline!important
+    }
+
+    .align-self-lg-stretch {
+        align-self: stretch!important
+    }
+}
+
+@media (min-width: 1200px) {
+    .flex-xl-row {
+        flex-direction:row!important
+    }
+
+    .flex-xl-column {
+        flex-direction: column!important
+    }
+
+    .flex-xl-row-reverse {
+        flex-direction: row-reverse!important
+    }
+
+    .flex-xl-column-reverse {
+        flex-direction: column-reverse!important
+    }
+
+    .flex-xl-wrap {
+        flex-wrap: wrap!important
+    }
+
+    .flex-xl-nowrap {
+        flex-wrap: nowrap!important
+    }
+
+    .flex-xl-wrap-reverse {
+        flex-wrap: wrap-reverse!important
+    }
+
+    .flex-xl-fill {
+        flex: 1 1 auto!important
+    }
+
+    .flex-xl-grow-0 {
+        flex-grow: 0!important
+    }
+
+    .flex-xl-grow-1 {
+        flex-grow: 1!important
+    }
+
+    .flex-xl-shrink-0 {
+        flex-shrink: 0!important
+    }
+
+    .flex-xl-shrink-1 {
+        flex-shrink: 1!important
+    }
+
+    .justify-content-xl-start {
+        justify-content: flex-start!important
+    }
+
+    .justify-content-xl-end {
+        justify-content: flex-end!important
+    }
+
+    .justify-content-xl-center {
+        justify-content: center!important
+    }
+
+    .justify-content-xl-between {
+        justify-content: space-between!important
+    }
+
+    .justify-content-xl-around {
+        justify-content: space-around!important
+    }
+
+    .align-items-xl-start {
+        align-items: flex-start!important
+    }
+
+    .align-items-xl-end {
+        align-items: flex-end!important
+    }
+
+    .align-items-xl-center {
+        align-items: center!important
+    }
+
+    .align-items-xl-baseline {
+        align-items: baseline!important
+    }
+
+    .align-items-xl-stretch {
+        align-items: stretch!important
+    }
+
+    .align-content-xl-start {
+        align-content: flex-start!important
+    }
+
+    .align-content-xl-end {
+        align-content: flex-end!important
+    }
+
+    .align-content-xl-center {
+        align-content: center!important
+    }
+
+    .align-content-xl-between {
+        align-content: space-between!important
+    }
+
+    .align-content-xl-around {
+        align-content: space-around!important
+    }
+
+    .align-content-xl-stretch {
+        align-content: stretch!important
+    }
+
+    .align-self-xl-auto {
+        align-self: auto!important
+    }
+
+    .align-self-xl-start {
+        align-self: flex-start!important
+    }
+
+    .align-self-xl-end {
+        align-self: flex-end!important
+    }
+
+    .align-self-xl-center {
+        align-self: center!important
+    }
+
+    .align-self-xl-baseline {
+        align-self: baseline!important
+    }
+
+    .align-self-xl-stretch {
+        align-self: stretch!important
+    }
+}
+
+@media (min-width: 1600px) {
+    .flex-xxl-row {
+        flex-direction:row!important
+    }
+
+    .flex-xxl-column {
+        flex-direction: column!important
+    }
+
+    .flex-xxl-row-reverse {
+        flex-direction: row-reverse!important
+    }
+
+    .flex-xxl-column-reverse {
+        flex-direction: column-reverse!important
+    }
+
+    .flex-xxl-wrap {
+        flex-wrap: wrap!important
+    }
+
+    .flex-xxl-nowrap {
+        flex-wrap: nowrap!important
+    }
+
+    .flex-xxl-wrap-reverse {
+        flex-wrap: wrap-reverse!important
+    }
+
+    .flex-xxl-fill {
+        flex: 1 1 auto!important
+    }
+
+    .flex-xxl-grow-0 {
+        flex-grow: 0!important
+    }
+
+    .flex-xxl-grow-1 {
+        flex-grow: 1!important
+    }
+
+    .flex-xxl-shrink-0 {
+        flex-shrink: 0!important
+    }
+
+    .flex-xxl-shrink-1 {
+        flex-shrink: 1!important
+    }
+
+    .justify-content-xxl-start {
+        justify-content: flex-start!important
+    }
+
+    .justify-content-xxl-end {
+        justify-content: flex-end!important
+    }
+
+    .justify-content-xxl-center {
+        justify-content: center!important
+    }
+
+    .justify-content-xxl-between {
+        justify-content: space-between!important
+    }
+
+    .justify-content-xxl-around {
+        justify-content: space-around!important
+    }
+
+    .align-items-xxl-start {
+        align-items: flex-start!important
+    }
+
+    .align-items-xxl-end {
+        align-items: flex-end!important
+    }
+
+    .align-items-xxl-center {
+        align-items: center!important
+    }
+
+    .align-items-xxl-baseline {
+        align-items: baseline!important
+    }
+
+    .align-items-xxl-stretch {
+        align-items: stretch!important
+    }
+
+    .align-content-xxl-start {
+        align-content: flex-start!important
+    }
+
+    .align-content-xxl-end {
+        align-content: flex-end!important
+    }
+
+    .align-content-xxl-center {
+        align-content: center!important
+    }
+
+    .align-content-xxl-between {
+        align-content: space-between!important
+    }
+
+    .align-content-xxl-around {
+        align-content: space-around!important
+    }
+
+    .align-content-xxl-stretch {
+        align-content: stretch!important
+    }
+
+    .align-self-xxl-auto {
+        align-self: auto!important
+    }
+
+    .align-self-xxl-start {
+        align-self: flex-start!important
+    }
+
+    .align-self-xxl-end {
+        align-self: flex-end!important
+    }
+
+    .align-self-xxl-center {
+        align-self: center!important
+    }
+
+    .align-self-xxl-baseline {
+        align-self: baseline!important
+    }
+
+    .align-self-xxl-stretch {
+        align-self: stretch!important
+    }
+}
+
+@media (min-width: 1800px) {
+    .flex-fhd-row {
+        flex-direction:row!important
+    }
+
+    .flex-fhd-column {
+        flex-direction: column!important
+    }
+
+    .flex-fhd-row-reverse {
+        flex-direction: row-reverse!important
+    }
+
+    .flex-fhd-column-reverse {
+        flex-direction: column-reverse!important
+    }
+
+    .flex-fhd-wrap {
+        flex-wrap: wrap!important
+    }
+
+    .flex-fhd-nowrap {
+        flex-wrap: nowrap!important
+    }
+
+    .flex-fhd-wrap-reverse {
+        flex-wrap: wrap-reverse!important
+    }
+
+    .flex-fhd-fill {
+        flex: 1 1 auto!important
+    }
+
+    .flex-fhd-grow-0 {
+        flex-grow: 0!important
+    }
+
+    .flex-fhd-grow-1 {
+        flex-grow: 1!important
+    }
+
+    .flex-fhd-shrink-0 {
+        flex-shrink: 0!important
+    }
+
+    .flex-fhd-shrink-1 {
+        flex-shrink: 1!important
+    }
+
+    .justify-content-fhd-start {
+        justify-content: flex-start!important
+    }
+
+    .justify-content-fhd-end {
+        justify-content: flex-end!important
+    }
+
+    .justify-content-fhd-center {
+        justify-content: center!important
+    }
+
+    .justify-content-fhd-between {
+        justify-content: space-between!important
+    }
+
+    .justify-content-fhd-around {
+        justify-content: space-around!important
+    }
+
+    .align-items-fhd-start {
+        align-items: flex-start!important
+    }
+
+    .align-items-fhd-end {
+        align-items: flex-end!important
+    }
+
+    .align-items-fhd-center {
+        align-items: center!important
+    }
+
+    .align-items-fhd-baseline {
+        align-items: baseline!important
+    }
+
+    .align-items-fhd-stretch {
+        align-items: stretch!important
+    }
+
+    .align-content-fhd-start {
+        align-content: flex-start!important
+    }
+
+    .align-content-fhd-end {
+        align-content: flex-end!important
+    }
+
+    .align-content-fhd-center {
+        align-content: center!important
+    }
+
+    .align-content-fhd-between {
+        align-content: space-between!important
+    }
+
+    .align-content-fhd-around {
+        align-content: space-around!important
+    }
+
+    .align-content-fhd-stretch {
+        align-content: stretch!important
+    }
+
+    .align-self-fhd-auto {
+        align-self: auto!important
+    }
+
+    .align-self-fhd-start {
+        align-self: flex-start!important
+    }
+
+    .align-self-fhd-end {
+        align-self: flex-end!important
+    }
+
+    .align-self-fhd-center {
+        align-self: center!important
+    }
+
+    .align-self-fhd-baseline {
+        align-self: baseline!important
+    }
+
+    .align-self-fhd-stretch {
+        align-self: stretch!important
+    }
+}
+
+@media (min-width: 2560px) {
+    .flex-qhd-row {
+        flex-direction:row!important
+    }
+
+    .flex-qhd-column {
+        flex-direction: column!important
+    }
+
+    .flex-qhd-row-reverse {
+        flex-direction: row-reverse!important
+    }
+
+    .flex-qhd-column-reverse {
+        flex-direction: column-reverse!important
+    }
+
+    .flex-qhd-wrap {
+        flex-wrap: wrap!important
+    }
+
+    .flex-qhd-nowrap {
+        flex-wrap: nowrap!important
+    }
+
+    .flex-qhd-wrap-reverse {
+        flex-wrap: wrap-reverse!important
+    }
+
+    .flex-qhd-fill {
+        flex: 1 1 auto!important
+    }
+
+    .flex-qhd-grow-0 {
+        flex-grow: 0!important
+    }
+
+    .flex-qhd-grow-1 {
+        flex-grow: 1!important
+    }
+
+    .flex-qhd-shrink-0 {
+        flex-shrink: 0!important
+    }
+
+    .flex-qhd-shrink-1 {
+        flex-shrink: 1!important
+    }
+
+    .justify-content-qhd-start {
+        justify-content: flex-start!important
+    }
+
+    .justify-content-qhd-end {
+        justify-content: flex-end!important
+    }
+
+    .justify-content-qhd-center {
+        justify-content: center!important
+    }
+
+    .justify-content-qhd-between {
+        justify-content: space-between!important
+    }
+
+    .justify-content-qhd-around {
+        justify-content: space-around!important
+    }
+
+    .align-items-qhd-start {
+        align-items: flex-start!important
+    }
+
+    .align-items-qhd-end {
+        align-items: flex-end!important
+    }
+
+    .align-items-qhd-center {
+        align-items: center!important
+    }
+
+    .align-items-qhd-baseline {
+        align-items: baseline!important
+    }
+
+    .align-items-qhd-stretch {
+        align-items: stretch!important
+    }
+
+    .align-content-qhd-start {
+        align-content: flex-start!important
+    }
+
+    .align-content-qhd-end {
+        align-content: flex-end!important
+    }
+
+    .align-content-qhd-center {
+        align-content: center!important
+    }
+
+    .align-content-qhd-between {
+        align-content: space-between!important
+    }
+
+    .align-content-qhd-around {
+        align-content: space-around!important
+    }
+
+    .align-content-qhd-stretch {
+        align-content: stretch!important
+    }
+
+    .align-self-qhd-auto {
+        align-self: auto!important
+    }
+
+    .align-self-qhd-start {
+        align-self: flex-start!important
+    }
+
+    .align-self-qhd-end {
+        align-self: flex-end!important
+    }
+
+    .align-self-qhd-center {
+        align-self: center!important
+    }
+
+    .align-self-qhd-baseline {
+        align-self: baseline!important
+    }
+
+    .align-self-qhd-stretch {
+        align-self: stretch!important
+    }
+}
+
+@media (min-width: 3840px) {
+    .flex-uhd-row {
+        flex-direction:row!important
+    }
+
+    .flex-uhd-column {
+        flex-direction: column!important
+    }
+
+    .flex-uhd-row-reverse {
+        flex-direction: row-reverse!important
+    }
+
+    .flex-uhd-column-reverse {
+        flex-direction: column-reverse!important
+    }
+
+    .flex-uhd-wrap {
+        flex-wrap: wrap!important
+    }
+
+    .flex-uhd-nowrap {
+        flex-wrap: nowrap!important
+    }
+
+    .flex-uhd-wrap-reverse {
+        flex-wrap: wrap-reverse!important
+    }
+
+    .flex-uhd-fill {
+        flex: 1 1 auto!important
+    }
+
+    .flex-uhd-grow-0 {
+        flex-grow: 0!important
+    }
+
+    .flex-uhd-grow-1 {
+        flex-grow: 1!important
+    }
+
+    .flex-uhd-shrink-0 {
+        flex-shrink: 0!important
+    }
+
+    .flex-uhd-shrink-1 {
+        flex-shrink: 1!important
+    }
+
+    .justify-content-uhd-start {
+        justify-content: flex-start!important
+    }
+
+    .justify-content-uhd-end {
+        justify-content: flex-end!important
+    }
+
+    .justify-content-uhd-center {
+        justify-content: center!important
+    }
+
+    .justify-content-uhd-between {
+        justify-content: space-between!important
+    }
+
+    .justify-content-uhd-around {
+        justify-content: space-around!important
+    }
+
+    .align-items-uhd-start {
+        align-items: flex-start!important
+    }
+
+    .align-items-uhd-end {
+        align-items: flex-end!important
+    }
+
+    .align-items-uhd-center {
+        align-items: center!important
+    }
+
+    .align-items-uhd-baseline {
+        align-items: baseline!important
+    }
+
+    .align-items-uhd-stretch {
+        align-items: stretch!important
+    }
+
+    .align-content-uhd-start {
+        align-content: flex-start!important
+    }
+
+    .align-content-uhd-end {
+        align-content: flex-end!important
+    }
+
+    .align-content-uhd-center {
+        align-content: center!important
+    }
+
+    .align-content-uhd-between {
+        align-content: space-between!important
+    }
+
+    .align-content-uhd-around {
+        align-content: space-around!important
+    }
+
+    .align-content-uhd-stretch {
+        align-content: stretch!important
+    }
+
+    .align-self-uhd-auto {
+        align-self: auto!important
+    }
+
+    .align-self-uhd-start {
+        align-self: flex-start!important
+    }
+
+    .align-self-uhd-end {
+        align-self: flex-end!important
+    }
+
+    .align-self-uhd-center {
+        align-self: center!important
+    }
+
+    .align-self-uhd-baseline {
+        align-self: baseline!important
+    }
+
+    .align-self-uhd-stretch {
+        align-self: stretch!important
+    }
+}
+
+.float-left {
+    float: left!important
+}
+
+.float-right {
+    float: right!important
+}
+
+.float-none {
+    float: none!important
+}
+
+@media (min-width: 576px) {
+    .float-sm-left {
+        float:left!important
+    }
+
+    .float-sm-right {
+        float: right!important
+    }
+
+    .float-sm-none {
+        float: none!important
+    }
+}
+
+@media (min-width: 768px) {
+    .float-md-left {
+        float:left!important
+    }
+
+    .float-md-right {
+        float: right!important
+    }
+
+    .float-md-none {
+        float: none!important
+    }
+}
+
+@media (min-width: 900px) {
+    .float-lg-left {
+        float:left!important
+    }
+
+    .float-lg-right {
+        float: right!important
+    }
+
+    .float-lg-none {
+        float: none!important
+    }
+}
+
+@media (min-width: 1200px) {
+    .float-xl-left {
+        float:left!important
+    }
+
+    .float-xl-right {
+        float: right!important
+    }
+
+    .float-xl-none {
+        float: none!important
+    }
+}
+
+@media (min-width: 1600px) {
+    .float-xxl-left {
+        float:left!important
+    }
+
+    .float-xxl-right {
+        float: right!important
+    }
+
+    .float-xxl-none {
+        float: none!important
+    }
+}
+
+@media (min-width: 1800px) {
+    .float-fhd-left {
+        float:left!important
+    }
+
+    .float-fhd-right {
+        float: right!important
+    }
+
+    .float-fhd-none {
+        float: none!important
+    }
+}
+
+@media (min-width: 2560px) {
+    .float-qhd-left {
+        float:left!important
+    }
+
+    .float-qhd-right {
+        float: right!important
+    }
+
+    .float-qhd-none {
+        float: none!important
+    }
+}
+
+@media (min-width: 3840px) {
+    .float-uhd-left {
+        float:left!important
+    }
+
+    .float-uhd-right {
+        float: right!important
+    }
+
+    .float-uhd-none {
+        float: none!important
+    }
+}
+
+.user-select-all {
+    -webkit-user-select: all!important;
+    user-select: all!important
+}
+
+.user-select-auto {
+    -webkit-user-select: auto!important;
+    user-select: auto!important
+}
+
+.user-select-none {
+    -webkit-user-select: none!important;
+    user-select: none!important
+}
+
+.overflow-auto {
+    overflow: auto!important
+}
+
+.overflow-hidden {
+    overflow: hidden!important
+}
+
+.position-static {
+    position: static!important
+}
+
+.position-relative {
+    position: relative!important
+}
+
+.position-absolute {
+    position: absolute!important
+}
+
+.position-fixed {
+    position: fixed!important
+}
+
+.position-sticky {
+    position: sticky!important
+}
+
+.fixed-top {
+    top: 0
+}
+
+.fixed-bottom,.fixed-top {
+    position: fixed;
+    right: 0;
+    left: 0;
+    z-index: 1030
+}
+
+.fixed-bottom {
+    bottom: 0
+}
+
+@supports (position: sticky) {
+    .sticky-top {
+        position:sticky;
+        top: 0;
+        z-index: 1020
+    }
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    border: 0
+}
+
+.sr-only-focusable:active,.sr-only-focusable:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    white-space: normal
+}
+
+.shadow-sm {
+    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important
+}
+
+.shadow {
+    box-shadow: 0 .5rem 1rem #00000026!important
+}
+
+.shadow-lg {
+    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important
+}
+
+.shadow-none {
+    box-shadow: none!important
+}
+
+.w-25 {
+    width: 25%!important
+}
+
+.w-50 {
+    width: 50%!important
+}
+
+.w-75 {
+    width: 75%!important
+}
+
+.w-100 {
+    width: 100%!important
+}
+
+.w-auto {
+    width: auto!important
+}
+
+.h-25 {
+    height: 25%!important
+}
+
+.h-50 {
+    height: 50%!important
+}
+
+.h-75 {
+    height: 75%!important
+}
+
+.h-100 {
+    height: 100%!important
+}
+
+.h-auto {
+    height: auto!important
+}
+
+.mw-100 {
+    max-width: 100%!important
+}
+
+.mh-100 {
+    max-height: 100%!important
+}
+
+.min-vw-100 {
+    min-width: 100vw!important
+}
+
+.min-vh-100 {
+    min-height: 100vh!important
+}
+
+.vw-100 {
+    width: 100vw!important
+}
+
+.vh-100 {
+    height: 100vh!important
+}
+
+.m-0 {
+    margin: 0!important
+}
+
+.mt-0,.my-0 {
+    margin-top: 0!important
+}
+
+.mr-0,.mx-0 {
+    margin-right: 0!important
+}
+
+.mb-0,.my-0 {
+    margin-bottom: 0!important
+}
+
+.ml-0,.mx-0 {
+    margin-left: 0!important
+}
+
+.m-1 {
+    margin: .25rem!important
+}
+
+.mt-1,.my-1 {
+    margin-top: .25rem!important
+}
+
+.mr-1,.mx-1 {
+    margin-right: .25rem!important
+}
+
+.mb-1,.my-1 {
+    margin-bottom: .25rem!important
+}
+
+.ml-1,.mx-1 {
+    margin-left: .25rem!important
+}
+
+.m-2 {
+    margin: .5rem!important
+}
+
+.mt-2,.my-2 {
+    margin-top: .5rem!important
+}
+
+.mr-2,.mx-2 {
+    margin-right: .5rem!important
+}
+
+.mb-2,.my-2 {
+    margin-bottom: .5rem!important
+}
+
+.ml-2,.mx-2 {
+    margin-left: .5rem!important
+}
+
+.m-3 {
+    margin: 1rem!important
+}
+
+.mt-3,.my-3 {
+    margin-top: 1rem!important
+}
+
+.mr-3,.mx-3 {
+    margin-right: 1rem!important
+}
+
+.mb-3,.my-3 {
+    margin-bottom: 1rem!important
+}
+
+.ml-3,.mx-3 {
+    margin-left: 1rem!important
+}
+
+.m-4 {
+    margin: 1.5rem!important
+}
+
+.mt-4,.my-4 {
+    margin-top: 1.5rem!important
+}
+
+.mr-4,.mx-4 {
+    margin-right: 1.5rem!important
+}
+
+.mb-4,.my-4 {
+    margin-bottom: 1.5rem!important
+}
+
+.ml-4,.mx-4 {
+    margin-left: 1.5rem!important
+}
+
+.m-5 {
+    margin: 3rem!important
+}
+
+.mt-5,.my-5 {
+    margin-top: 3rem!important
+}
+
+.mr-5,.mx-5 {
+    margin-right: 3rem!important
+}
+
+.mb-5,.my-5 {
+    margin-bottom: 3rem!important
+}
+
+.ml-5,.mx-5 {
+    margin-left: 3rem!important
+}
+
+.p-0 {
+    padding: 0!important
+}
+
+.pt-0,.py-0 {
+    padding-top: 0!important
+}
+
+.pr-0,.px-0 {
+    padding-right: 0!important
+}
+
+.pb-0,.py-0 {
+    padding-bottom: 0!important
+}
+
+.pl-0,.px-0 {
+    padding-left: 0!important
+}
+
+.p-1 {
+    padding: .25rem!important
+}
+
+.pt-1,.py-1 {
+    padding-top: .25rem!important
+}
+
+.pr-1,.px-1 {
+    padding-right: .25rem!important
+}
+
+.pb-1,.py-1 {
+    padding-bottom: .25rem!important
+}
+
+.pl-1,.px-1 {
+    padding-left: .25rem!important
+}
+
+.p-2 {
+    padding: .5rem!important
+}
+
+.pt-2,.py-2 {
+    padding-top: .5rem!important
+}
+
+.pr-2,.px-2 {
+    padding-right: .5rem!important
+}
+
+.pb-2,.py-2 {
+    padding-bottom: .5rem!important
+}
+
+.pl-2,.px-2 {
+    padding-left: .5rem!important
+}
+
+.p-3 {
+    padding: 1rem!important
+}
+
+.pt-3,.py-3 {
+    padding-top: 1rem!important
+}
+
+.pr-3,.px-3 {
+    padding-right: 1rem!important
+}
+
+.pb-3,.py-3 {
+    padding-bottom: 1rem!important
+}
+
+.pl-3,.px-3 {
+    padding-left: 1rem!important
+}
+
+.p-4 {
+    padding: 1.5rem!important
+}
+
+.pt-4,.py-4 {
+    padding-top: 1.5rem!important
+}
+
+.pr-4,.px-4 {
+    padding-right: 1.5rem!important
+}
+
+.pb-4,.py-4 {
+    padding-bottom: 1.5rem!important
+}
+
+.pl-4,.px-4 {
+    padding-left: 1.5rem!important
+}
+
+.p-5 {
+    padding: 3rem!important
+}
+
+.pt-5,.py-5 {
+    padding-top: 3rem!important
+}
+
+.pr-5,.px-5 {
+    padding-right: 3rem!important
+}
+
+.pb-5,.py-5 {
+    padding-bottom: 3rem!important
+}
+
+.pl-5,.px-5 {
+    padding-left: 3rem!important
+}
+
+.m-n1 {
+    margin: -.25rem!important
+}
+
+.mt-n1,.my-n1 {
+    margin-top: -.25rem!important
+}
+
+.mr-n1,.mx-n1 {
+    margin-right: -.25rem!important
+}
+
+.mb-n1,.my-n1 {
+    margin-bottom: -.25rem!important
+}
+
+.ml-n1,.mx-n1 {
+    margin-left: -.25rem!important
+}
+
+.m-n2 {
+    margin: -.5rem!important
+}
+
+.mt-n2,.my-n2 {
+    margin-top: -.5rem!important
+}
+
+.mr-n2,.mx-n2 {
+    margin-right: -.5rem!important
+}
+
+.mb-n2,.my-n2 {
+    margin-bottom: -.5rem!important
+}
+
+.ml-n2,.mx-n2 {
+    margin-left: -.5rem!important
+}
+
+.m-n3 {
+    margin: -1rem!important
+}
+
+.mt-n3,.my-n3 {
+    margin-top: -1rem!important
+}
+
+.mr-n3,.mx-n3 {
+    margin-right: -1rem!important
+}
+
+.mb-n3,.my-n3 {
+    margin-bottom: -1rem!important
+}
+
+.ml-n3,.mx-n3 {
+    margin-left: -1rem!important
+}
+
+.m-n4 {
+    margin: -1.5rem!important
+}
+
+.mt-n4,.my-n4 {
+    margin-top: -1.5rem!important
+}
+
+.mr-n4,.mx-n4 {
+    margin-right: -1.5rem!important
+}
+
+.mb-n4,.my-n4 {
+    margin-bottom: -1.5rem!important
+}
+
+.ml-n4,.mx-n4 {
+    margin-left: -1.5rem!important
+}
+
+.m-n5 {
+    margin: -3rem!important
+}
+
+.mt-n5,.my-n5 {
+    margin-top: -3rem!important
+}
+
+.mr-n5,.mx-n5 {
+    margin-right: -3rem!important
+}
+
+.mb-n5,.my-n5 {
+    margin-bottom: -3rem!important
+}
+
+.ml-n5,.mx-n5 {
+    margin-left: -3rem!important
+}
+
+.m-auto {
+    margin: auto!important
+}
+
+.mt-auto,.my-auto {
+    margin-top: auto!important
+}
+
+.mr-auto,.mx-auto {
+    margin-right: auto!important
+}
+
+.mb-auto,.my-auto {
+    margin-bottom: auto!important
+}
+
+.ml-auto,.mx-auto {
+    margin-left: auto!important
+}
+
+@media (min-width: 576px) {
+    .m-sm-0 {
+        margin:0!important
+    }
+
+    .mt-sm-0,.my-sm-0 {
+        margin-top: 0!important
+    }
+
+    .mr-sm-0,.mx-sm-0 {
+        margin-right: 0!important
+    }
+
+    .mb-sm-0,.my-sm-0 {
+        margin-bottom: 0!important
+    }
+
+    .ml-sm-0,.mx-sm-0 {
+        margin-left: 0!important
+    }
+
+    .m-sm-1 {
+        margin: .25rem!important
+    }
+
+    .mt-sm-1,.my-sm-1 {
+        margin-top: .25rem!important
+    }
+
+    .mr-sm-1,.mx-sm-1 {
+        margin-right: .25rem!important
+    }
+
+    .mb-sm-1,.my-sm-1 {
+        margin-bottom: .25rem!important
+    }
+
+    .ml-sm-1,.mx-sm-1 {
+        margin-left: .25rem!important
+    }
+
+    .m-sm-2 {
+        margin: .5rem!important
+    }
+
+    .mt-sm-2,.my-sm-2 {
+        margin-top: .5rem!important
+    }
+
+    .mr-sm-2,.mx-sm-2 {
+        margin-right: .5rem!important
+    }
+
+    .mb-sm-2,.my-sm-2 {
+        margin-bottom: .5rem!important
+    }
+
+    .ml-sm-2,.mx-sm-2 {
+        margin-left: .5rem!important
+    }
+
+    .m-sm-3 {
+        margin: 1rem!important
+    }
+
+    .mt-sm-3,.my-sm-3 {
+        margin-top: 1rem!important
+    }
+
+    .mr-sm-3,.mx-sm-3 {
+        margin-right: 1rem!important
+    }
+
+    .mb-sm-3,.my-sm-3 {
+        margin-bottom: 1rem!important
+    }
+
+    .ml-sm-3,.mx-sm-3 {
+        margin-left: 1rem!important
+    }
+
+    .m-sm-4 {
+        margin: 1.5rem!important
+    }
+
+    .mt-sm-4,.my-sm-4 {
+        margin-top: 1.5rem!important
+    }
+
+    .mr-sm-4,.mx-sm-4 {
+        margin-right: 1.5rem!important
+    }
+
+    .mb-sm-4,.my-sm-4 {
+        margin-bottom: 1.5rem!important
+    }
+
+    .ml-sm-4,.mx-sm-4 {
+        margin-left: 1.5rem!important
+    }
+
+    .m-sm-5 {
+        margin: 3rem!important
+    }
+
+    .mt-sm-5,.my-sm-5 {
+        margin-top: 3rem!important
+    }
+
+    .mr-sm-5,.mx-sm-5 {
+        margin-right: 3rem!important
+    }
+
+    .mb-sm-5,.my-sm-5 {
+        margin-bottom: 3rem!important
+    }
+
+    .ml-sm-5,.mx-sm-5 {
+        margin-left: 3rem!important
+    }
+
+    .p-sm-0 {
+        padding: 0!important
+    }
+
+    .pt-sm-0,.py-sm-0 {
+        padding-top: 0!important
+    }
+
+    .pr-sm-0,.px-sm-0 {
+        padding-right: 0!important
+    }
+
+    .pb-sm-0,.py-sm-0 {
+        padding-bottom: 0!important
+    }
+
+    .pl-sm-0,.px-sm-0 {
+        padding-left: 0!important
+    }
+
+    .p-sm-1 {
+        padding: .25rem!important
+    }
+
+    .pt-sm-1,.py-sm-1 {
+        padding-top: .25rem!important
+    }
+
+    .pr-sm-1,.px-sm-1 {
+        padding-right: .25rem!important
+    }
+
+    .pb-sm-1,.py-sm-1 {
+        padding-bottom: .25rem!important
+    }
+
+    .pl-sm-1,.px-sm-1 {
+        padding-left: .25rem!important
+    }
+
+    .p-sm-2 {
+        padding: .5rem!important
+    }
+
+    .pt-sm-2,.py-sm-2 {
+        padding-top: .5rem!important
+    }
+
+    .pr-sm-2,.px-sm-2 {
+        padding-right: .5rem!important
+    }
+
+    .pb-sm-2,.py-sm-2 {
+        padding-bottom: .5rem!important
+    }
+
+    .pl-sm-2,.px-sm-2 {
+        padding-left: .5rem!important
+    }
+
+    .p-sm-3 {
+        padding: 1rem!important
+    }
+
+    .pt-sm-3,.py-sm-3 {
+        padding-top: 1rem!important
+    }
+
+    .pr-sm-3,.px-sm-3 {
+        padding-right: 1rem!important
+    }
+
+    .pb-sm-3,.py-sm-3 {
+        padding-bottom: 1rem!important
+    }
+
+    .pl-sm-3,.px-sm-3 {
+        padding-left: 1rem!important
+    }
+
+    .p-sm-4 {
+        padding: 1.5rem!important
+    }
+
+    .pt-sm-4,.py-sm-4 {
+        padding-top: 1.5rem!important
+    }
+
+    .pr-sm-4,.px-sm-4 {
+        padding-right: 1.5rem!important
+    }
+
+    .pb-sm-4,.py-sm-4 {
+        padding-bottom: 1.5rem!important
+    }
+
+    .pl-sm-4,.px-sm-4 {
+        padding-left: 1.5rem!important
+    }
+
+    .p-sm-5 {
+        padding: 3rem!important
+    }
+
+    .pt-sm-5,.py-sm-5 {
+        padding-top: 3rem!important
+    }
+
+    .pr-sm-5,.px-sm-5 {
+        padding-right: 3rem!important
+    }
+
+    .pb-sm-5,.py-sm-5 {
+        padding-bottom: 3rem!important
+    }
+
+    .pl-sm-5,.px-sm-5 {
+        padding-left: 3rem!important
+    }
+
+    .m-sm-n1 {
+        margin: -.25rem!important
+    }
+
+    .mt-sm-n1,.my-sm-n1 {
+        margin-top: -.25rem!important
+    }
+
+    .mr-sm-n1,.mx-sm-n1 {
+        margin-right: -.25rem!important
+    }
+
+    .mb-sm-n1,.my-sm-n1 {
+        margin-bottom: -.25rem!important
+    }
+
+    .ml-sm-n1,.mx-sm-n1 {
+        margin-left: -.25rem!important
+    }
+
+    .m-sm-n2 {
+        margin: -.5rem!important
+    }
+
+    .mt-sm-n2,.my-sm-n2 {
+        margin-top: -.5rem!important
+    }
+
+    .mr-sm-n2,.mx-sm-n2 {
+        margin-right: -.5rem!important
+    }
+
+    .mb-sm-n2,.my-sm-n2 {
+        margin-bottom: -.5rem!important
+    }
+
+    .ml-sm-n2,.mx-sm-n2 {
+        margin-left: -.5rem!important
+    }
+
+    .m-sm-n3 {
+        margin: -1rem!important
+    }
+
+    .mt-sm-n3,.my-sm-n3 {
+        margin-top: -1rem!important
+    }
+
+    .mr-sm-n3,.mx-sm-n3 {
+        margin-right: -1rem!important
+    }
+
+    .mb-sm-n3,.my-sm-n3 {
+        margin-bottom: -1rem!important
+    }
+
+    .ml-sm-n3,.mx-sm-n3 {
+        margin-left: -1rem!important
+    }
+
+    .m-sm-n4 {
+        margin: -1.5rem!important
+    }
+
+    .mt-sm-n4,.my-sm-n4 {
+        margin-top: -1.5rem!important
+    }
+
+    .mr-sm-n4,.mx-sm-n4 {
+        margin-right: -1.5rem!important
+    }
+
+    .mb-sm-n4,.my-sm-n4 {
+        margin-bottom: -1.5rem!important
+    }
+
+    .ml-sm-n4,.mx-sm-n4 {
+        margin-left: -1.5rem!important
+    }
+
+    .m-sm-n5 {
+        margin: -3rem!important
+    }
+
+    .mt-sm-n5,.my-sm-n5 {
+        margin-top: -3rem!important
+    }
+
+    .mr-sm-n5,.mx-sm-n5 {
+        margin-right: -3rem!important
+    }
+
+    .mb-sm-n5,.my-sm-n5 {
+        margin-bottom: -3rem!important
+    }
+
+    .ml-sm-n5,.mx-sm-n5 {
+        margin-left: -3rem!important
+    }
+
+    .m-sm-auto {
+        margin: auto!important
+    }
+
+    .mt-sm-auto,.my-sm-auto {
+        margin-top: auto!important
+    }
+
+    .mr-sm-auto,.mx-sm-auto {
+        margin-right: auto!important
+    }
+
+    .mb-sm-auto,.my-sm-auto {
+        margin-bottom: auto!important
+    }
+
+    .ml-sm-auto,.mx-sm-auto {
+        margin-left: auto!important
+    }
+}
+
+@media (min-width: 768px) {
+    .m-md-0 {
+        margin:0!important
+    }
+
+    .mt-md-0,.my-md-0 {
+        margin-top: 0!important
+    }
+
+    .mr-md-0,.mx-md-0 {
+        margin-right: 0!important
+    }
+
+    .mb-md-0,.my-md-0 {
+        margin-bottom: 0!important
+    }
+
+    .ml-md-0,.mx-md-0 {
+        margin-left: 0!important
+    }
+
+    .m-md-1 {
+        margin: .25rem!important
+    }
+
+    .mt-md-1,.my-md-1 {
+        margin-top: .25rem!important
+    }
+
+    .mr-md-1,.mx-md-1 {
+        margin-right: .25rem!important
+    }
+
+    .mb-md-1,.my-md-1 {
+        margin-bottom: .25rem!important
+    }
+
+    .ml-md-1,.mx-md-1 {
+        margin-left: .25rem!important
+    }
+
+    .m-md-2 {
+        margin: .5rem!important
+    }
+
+    .mt-md-2,.my-md-2 {
+        margin-top: .5rem!important
+    }
+
+    .mr-md-2,.mx-md-2 {
+        margin-right: .5rem!important
+    }
+
+    .mb-md-2,.my-md-2 {
+        margin-bottom: .5rem!important
+    }
+
+    .ml-md-2,.mx-md-2 {
+        margin-left: .5rem!important
+    }
+
+    .m-md-3 {
+        margin: 1rem!important
+    }
+
+    .mt-md-3,.my-md-3 {
+        margin-top: 1rem!important
+    }
+
+    .mr-md-3,.mx-md-3 {
+        margin-right: 1rem!important
+    }
+
+    .mb-md-3,.my-md-3 {
+        margin-bottom: 1rem!important
+    }
+
+    .ml-md-3,.mx-md-3 {
+        margin-left: 1rem!important
+    }
+
+    .m-md-4 {
+        margin: 1.5rem!important
+    }
+
+    .mt-md-4,.my-md-4 {
+        margin-top: 1.5rem!important
+    }
+
+    .mr-md-4,.mx-md-4 {
+        margin-right: 1.5rem!important
+    }
+
+    .mb-md-4,.my-md-4 {
+        margin-bottom: 1.5rem!important
+    }
+
+    .ml-md-4,.mx-md-4 {
+        margin-left: 1.5rem!important
+    }
+
+    .m-md-5 {
+        margin: 3rem!important
+    }
+
+    .mt-md-5,.my-md-5 {
+        margin-top: 3rem!important
+    }
+
+    .mr-md-5,.mx-md-5 {
+        margin-right: 3rem!important
+    }
+
+    .mb-md-5,.my-md-5 {
+        margin-bottom: 3rem!important
+    }
+
+    .ml-md-5,.mx-md-5 {
+        margin-left: 3rem!important
+    }
+
+    .p-md-0 {
+        padding: 0!important
+    }
+
+    .pt-md-0,.py-md-0 {
+        padding-top: 0!important
+    }
+
+    .pr-md-0,.px-md-0 {
+        padding-right: 0!important
+    }
+
+    .pb-md-0,.py-md-0 {
+        padding-bottom: 0!important
+    }
+
+    .pl-md-0,.px-md-0 {
+        padding-left: 0!important
+    }
+
+    .p-md-1 {
+        padding: .25rem!important
+    }
+
+    .pt-md-1,.py-md-1 {
+        padding-top: .25rem!important
+    }
+
+    .pr-md-1,.px-md-1 {
+        padding-right: .25rem!important
+    }
+
+    .pb-md-1,.py-md-1 {
+        padding-bottom: .25rem!important
+    }
+
+    .pl-md-1,.px-md-1 {
+        padding-left: .25rem!important
+    }
+
+    .p-md-2 {
+        padding: .5rem!important
+    }
+
+    .pt-md-2,.py-md-2 {
+        padding-top: .5rem!important
+    }
+
+    .pr-md-2,.px-md-2 {
+        padding-right: .5rem!important
+    }
+
+    .pb-md-2,.py-md-2 {
+        padding-bottom: .5rem!important
+    }
+
+    .pl-md-2,.px-md-2 {
+        padding-left: .5rem!important
+    }
+
+    .p-md-3 {
+        padding: 1rem!important
+    }
+
+    .pt-md-3,.py-md-3 {
+        padding-top: 1rem!important
+    }
+
+    .pr-md-3,.px-md-3 {
+        padding-right: 1rem!important
+    }
+
+    .pb-md-3,.py-md-3 {
+        padding-bottom: 1rem!important
+    }
+
+    .pl-md-3,.px-md-3 {
+        padding-left: 1rem!important
+    }
+
+    .p-md-4 {
+        padding: 1.5rem!important
+    }
+
+    .pt-md-4,.py-md-4 {
+        padding-top: 1.5rem!important
+    }
+
+    .pr-md-4,.px-md-4 {
+        padding-right: 1.5rem!important
+    }
+
+    .pb-md-4,.py-md-4 {
+        padding-bottom: 1.5rem!important
+    }
+
+    .pl-md-4,.px-md-4 {
+        padding-left: 1.5rem!important
+    }
+
+    .p-md-5 {
+        padding: 3rem!important
+    }
+
+    .pt-md-5,.py-md-5 {
+        padding-top: 3rem!important
+    }
+
+    .pr-md-5,.px-md-5 {
+        padding-right: 3rem!important
+    }
+
+    .pb-md-5,.py-md-5 {
+        padding-bottom: 3rem!important
+    }
+
+    .pl-md-5,.px-md-5 {
+        padding-left: 3rem!important
+    }
+
+    .m-md-n1 {
+        margin: -.25rem!important
+    }
+
+    .mt-md-n1,.my-md-n1 {
+        margin-top: -.25rem!important
+    }
+
+    .mr-md-n1,.mx-md-n1 {
+        margin-right: -.25rem!important
+    }
+
+    .mb-md-n1,.my-md-n1 {
+        margin-bottom: -.25rem!important
+    }
+
+    .ml-md-n1,.mx-md-n1 {
+        margin-left: -.25rem!important
+    }
+
+    .m-md-n2 {
+        margin: -.5rem!important
+    }
+
+    .mt-md-n2,.my-md-n2 {
+        margin-top: -.5rem!important
+    }
+
+    .mr-md-n2,.mx-md-n2 {
+        margin-right: -.5rem!important
+    }
+
+    .mb-md-n2,.my-md-n2 {
+        margin-bottom: -.5rem!important
+    }
+
+    .ml-md-n2,.mx-md-n2 {
+        margin-left: -.5rem!important
+    }
+
+    .m-md-n3 {
+        margin: -1rem!important
+    }
+
+    .mt-md-n3,.my-md-n3 {
+        margin-top: -1rem!important
+    }
+
+    .mr-md-n3,.mx-md-n3 {
+        margin-right: -1rem!important
+    }
+
+    .mb-md-n3,.my-md-n3 {
+        margin-bottom: -1rem!important
+    }
+
+    .ml-md-n3,.mx-md-n3 {
+        margin-left: -1rem!important
+    }
+
+    .m-md-n4 {
+        margin: -1.5rem!important
+    }
+
+    .mt-md-n4,.my-md-n4 {
+        margin-top: -1.5rem!important
+    }
+
+    .mr-md-n4,.mx-md-n4 {
+        margin-right: -1.5rem!important
+    }
+
+    .mb-md-n4,.my-md-n4 {
+        margin-bottom: -1.5rem!important
+    }
+
+    .ml-md-n4,.mx-md-n4 {
+        margin-left: -1.5rem!important
+    }
+
+    .m-md-n5 {
+        margin: -3rem!important
+    }
+
+    .mt-md-n5,.my-md-n5 {
+        margin-top: -3rem!important
+    }
+
+    .mr-md-n5,.mx-md-n5 {
+        margin-right: -3rem!important
+    }
+
+    .mb-md-n5,.my-md-n5 {
+        margin-bottom: -3rem!important
+    }
+
+    .ml-md-n5,.mx-md-n5 {
+        margin-left: -3rem!important
+    }
+
+    .m-md-auto {
+        margin: auto!important
+    }
+
+    .mt-md-auto,.my-md-auto {
+        margin-top: auto!important
+    }
+
+    .mr-md-auto,.mx-md-auto {
+        margin-right: auto!important
+    }
+
+    .mb-md-auto,.my-md-auto {
+        margin-bottom: auto!important
+    }
+
+    .ml-md-auto,.mx-md-auto {
+        margin-left: auto!important
+    }
+}
+
+@media (min-width: 900px) {
+    .m-lg-0 {
+        margin:0!important
+    }
+
+    .mt-lg-0,.my-lg-0 {
+        margin-top: 0!important
+    }
+
+    .mr-lg-0,.mx-lg-0 {
+        margin-right: 0!important
+    }
+
+    .mb-lg-0,.my-lg-0 {
+        margin-bottom: 0!important
+    }
+
+    .ml-lg-0,.mx-lg-0 {
+        margin-left: 0!important
+    }
+
+    .m-lg-1 {
+        margin: .25rem!important
+    }
+
+    .mt-lg-1,.my-lg-1 {
+        margin-top: .25rem!important
+    }
+
+    .mr-lg-1,.mx-lg-1 {
+        margin-right: .25rem!important
+    }
+
+    .mb-lg-1,.my-lg-1 {
+        margin-bottom: .25rem!important
+    }
+
+    .ml-lg-1,.mx-lg-1 {
+        margin-left: .25rem!important
+    }
+
+    .m-lg-2 {
+        margin: .5rem!important
+    }
+
+    .mt-lg-2,.my-lg-2 {
+        margin-top: .5rem!important
+    }
+
+    .mr-lg-2,.mx-lg-2 {
+        margin-right: .5rem!important
+    }
+
+    .mb-lg-2,.my-lg-2 {
+        margin-bottom: .5rem!important
+    }
+
+    .ml-lg-2,.mx-lg-2 {
+        margin-left: .5rem!important
+    }
+
+    .m-lg-3 {
+        margin: 1rem!important
+    }
+
+    .mt-lg-3,.my-lg-3 {
+        margin-top: 1rem!important
+    }
+
+    .mr-lg-3,.mx-lg-3 {
+        margin-right: 1rem!important
+    }
+
+    .mb-lg-3,.my-lg-3 {
+        margin-bottom: 1rem!important
+    }
+
+    .ml-lg-3,.mx-lg-3 {
+        margin-left: 1rem!important
+    }
+
+    .m-lg-4 {
+        margin: 1.5rem!important
+    }
+
+    .mt-lg-4,.my-lg-4 {
+        margin-top: 1.5rem!important
+    }
+
+    .mr-lg-4,.mx-lg-4 {
+        margin-right: 1.5rem!important
+    }
+
+    .mb-lg-4,.my-lg-4 {
+        margin-bottom: 1.5rem!important
+    }
+
+    .ml-lg-4,.mx-lg-4 {
+        margin-left: 1.5rem!important
+    }
+
+    .m-lg-5 {
+        margin: 3rem!important
+    }
+
+    .mt-lg-5,.my-lg-5 {
+        margin-top: 3rem!important
+    }
+
+    .mr-lg-5,.mx-lg-5 {
+        margin-right: 3rem!important
+    }
+
+    .mb-lg-5,.my-lg-5 {
+        margin-bottom: 3rem!important
+    }
+
+    .ml-lg-5,.mx-lg-5 {
+        margin-left: 3rem!important
+    }
+
+    .p-lg-0 {
+        padding: 0!important
+    }
+
+    .pt-lg-0,.py-lg-0 {
+        padding-top: 0!important
+    }
+
+    .pr-lg-0,.px-lg-0 {
+        padding-right: 0!important
+    }
+
+    .pb-lg-0,.py-lg-0 {
+        padding-bottom: 0!important
+    }
+
+    .pl-lg-0,.px-lg-0 {
+        padding-left: 0!important
+    }
+
+    .p-lg-1 {
+        padding: .25rem!important
+    }
+
+    .pt-lg-1,.py-lg-1 {
+        padding-top: .25rem!important
+    }
+
+    .pr-lg-1,.px-lg-1 {
+        padding-right: .25rem!important
+    }
+
+    .pb-lg-1,.py-lg-1 {
+        padding-bottom: .25rem!important
+    }
+
+    .pl-lg-1,.px-lg-1 {
+        padding-left: .25rem!important
+    }
+
+    .p-lg-2 {
+        padding: .5rem!important
+    }
+
+    .pt-lg-2,.py-lg-2 {
+        padding-top: .5rem!important
+    }
+
+    .pr-lg-2,.px-lg-2 {
+        padding-right: .5rem!important
+    }
+
+    .pb-lg-2,.py-lg-2 {
+        padding-bottom: .5rem!important
+    }
+
+    .pl-lg-2,.px-lg-2 {
+        padding-left: .5rem!important
+    }
+
+    .p-lg-3 {
+        padding: 1rem!important
+    }
+
+    .pt-lg-3,.py-lg-3 {
+        padding-top: 1rem!important
+    }
+
+    .pr-lg-3,.px-lg-3 {
+        padding-right: 1rem!important
+    }
+
+    .pb-lg-3,.py-lg-3 {
+        padding-bottom: 1rem!important
+    }
+
+    .pl-lg-3,.px-lg-3 {
+        padding-left: 1rem!important
+    }
+
+    .p-lg-4 {
+        padding: 1.5rem!important
+    }
+
+    .pt-lg-4,.py-lg-4 {
+        padding-top: 1.5rem!important
+    }
+
+    .pr-lg-4,.px-lg-4 {
+        padding-right: 1.5rem!important
+    }
+
+    .pb-lg-4,.py-lg-4 {
+        padding-bottom: 1.5rem!important
+    }
+
+    .pl-lg-4,.px-lg-4 {
+        padding-left: 1.5rem!important
+    }
+
+    .p-lg-5 {
+        padding: 3rem!important
+    }
+
+    .pt-lg-5,.py-lg-5 {
+        padding-top: 3rem!important
+    }
+
+    .pr-lg-5,.px-lg-5 {
+        padding-right: 3rem!important
+    }
+
+    .pb-lg-5,.py-lg-5 {
+        padding-bottom: 3rem!important
+    }
+
+    .pl-lg-5,.px-lg-5 {
+        padding-left: 3rem!important
+    }
+
+    .m-lg-n1 {
+        margin: -.25rem!important
+    }
+
+    .mt-lg-n1,.my-lg-n1 {
+        margin-top: -.25rem!important
+    }
+
+    .mr-lg-n1,.mx-lg-n1 {
+        margin-right: -.25rem!important
+    }
+
+    .mb-lg-n1,.my-lg-n1 {
+        margin-bottom: -.25rem!important
+    }
+
+    .ml-lg-n1,.mx-lg-n1 {
+        margin-left: -.25rem!important
+    }
+
+    .m-lg-n2 {
+        margin: -.5rem!important
+    }
+
+    .mt-lg-n2,.my-lg-n2 {
+        margin-top: -.5rem!important
+    }
+
+    .mr-lg-n2,.mx-lg-n2 {
+        margin-right: -.5rem!important
+    }
+
+    .mb-lg-n2,.my-lg-n2 {
+        margin-bottom: -.5rem!important
+    }
+
+    .ml-lg-n2,.mx-lg-n2 {
+        margin-left: -.5rem!important
+    }
+
+    .m-lg-n3 {
+        margin: -1rem!important
+    }
+
+    .mt-lg-n3,.my-lg-n3 {
+        margin-top: -1rem!important
+    }
+
+    .mr-lg-n3,.mx-lg-n3 {
+        margin-right: -1rem!important
+    }
+
+    .mb-lg-n3,.my-lg-n3 {
+        margin-bottom: -1rem!important
+    }
+
+    .ml-lg-n3,.mx-lg-n3 {
+        margin-left: -1rem!important
+    }
+
+    .m-lg-n4 {
+        margin: -1.5rem!important
+    }
+
+    .mt-lg-n4,.my-lg-n4 {
+        margin-top: -1.5rem!important
+    }
+
+    .mr-lg-n4,.mx-lg-n4 {
+        margin-right: -1.5rem!important
+    }
+
+    .mb-lg-n4,.my-lg-n4 {
+        margin-bottom: -1.5rem!important
+    }
+
+    .ml-lg-n4,.mx-lg-n4 {
+        margin-left: -1.5rem!important
+    }
+
+    .m-lg-n5 {
+        margin: -3rem!important
+    }
+
+    .mt-lg-n5,.my-lg-n5 {
+        margin-top: -3rem!important
+    }
+
+    .mr-lg-n5,.mx-lg-n5 {
+        margin-right: -3rem!important
+    }
+
+    .mb-lg-n5,.my-lg-n5 {
+        margin-bottom: -3rem!important
+    }
+
+    .ml-lg-n5,.mx-lg-n5 {
+        margin-left: -3rem!important
+    }
+
+    .m-lg-auto {
+        margin: auto!important
+    }
+
+    .mt-lg-auto,.my-lg-auto {
+        margin-top: auto!important
+    }
+
+    .mr-lg-auto,.mx-lg-auto {
+        margin-right: auto!important
+    }
+
+    .mb-lg-auto,.my-lg-auto {
+        margin-bottom: auto!important
+    }
+
+    .ml-lg-auto,.mx-lg-auto {
+        margin-left: auto!important
+    }
+}
+
+@media (min-width: 1200px) {
+    .m-xl-0 {
+        margin:0!important
+    }
+
+    .mt-xl-0,.my-xl-0 {
+        margin-top: 0!important
+    }
+
+    .mr-xl-0,.mx-xl-0 {
+        margin-right: 0!important
+    }
+
+    .mb-xl-0,.my-xl-0 {
+        margin-bottom: 0!important
+    }
+
+    .ml-xl-0,.mx-xl-0 {
+        margin-left: 0!important
+    }
+
+    .m-xl-1 {
+        margin: .25rem!important
+    }
+
+    .mt-xl-1,.my-xl-1 {
+        margin-top: .25rem!important
+    }
+
+    .mr-xl-1,.mx-xl-1 {
+        margin-right: .25rem!important
+    }
+
+    .mb-xl-1,.my-xl-1 {
+        margin-bottom: .25rem!important
+    }
+
+    .ml-xl-1,.mx-xl-1 {
+        margin-left: .25rem!important
+    }
+
+    .m-xl-2 {
+        margin: .5rem!important
+    }
+
+    .mt-xl-2,.my-xl-2 {
+        margin-top: .5rem!important
+    }
+
+    .mr-xl-2,.mx-xl-2 {
+        margin-right: .5rem!important
+    }
+
+    .mb-xl-2,.my-xl-2 {
+        margin-bottom: .5rem!important
+    }
+
+    .ml-xl-2,.mx-xl-2 {
+        margin-left: .5rem!important
+    }
+
+    .m-xl-3 {
+        margin: 1rem!important
+    }
+
+    .mt-xl-3,.my-xl-3 {
+        margin-top: 1rem!important
+    }
+
+    .mr-xl-3,.mx-xl-3 {
+        margin-right: 1rem!important
+    }
+
+    .mb-xl-3,.my-xl-3 {
+        margin-bottom: 1rem!important
+    }
+
+    .ml-xl-3,.mx-xl-3 {
+        margin-left: 1rem!important
+    }
+
+    .m-xl-4 {
+        margin: 1.5rem!important
+    }
+
+    .mt-xl-4,.my-xl-4 {
+        margin-top: 1.5rem!important
+    }
+
+    .mr-xl-4,.mx-xl-4 {
+        margin-right: 1.5rem!important
+    }
+
+    .mb-xl-4,.my-xl-4 {
+        margin-bottom: 1.5rem!important
+    }
+
+    .ml-xl-4,.mx-xl-4 {
+        margin-left: 1.5rem!important
+    }
+
+    .m-xl-5 {
+        margin: 3rem!important
+    }
+
+    .mt-xl-5,.my-xl-5 {
+        margin-top: 3rem!important
+    }
+
+    .mr-xl-5,.mx-xl-5 {
+        margin-right: 3rem!important
+    }
+
+    .mb-xl-5,.my-xl-5 {
+        margin-bottom: 3rem!important
+    }
+
+    .ml-xl-5,.mx-xl-5 {
+        margin-left: 3rem!important
+    }
+
+    .p-xl-0 {
+        padding: 0!important
+    }
+
+    .pt-xl-0,.py-xl-0 {
+        padding-top: 0!important
+    }
+
+    .pr-xl-0,.px-xl-0 {
+        padding-right: 0!important
+    }
+
+    .pb-xl-0,.py-xl-0 {
+        padding-bottom: 0!important
+    }
+
+    .pl-xl-0,.px-xl-0 {
+        padding-left: 0!important
+    }
+
+    .p-xl-1 {
+        padding: .25rem!important
+    }
+
+    .pt-xl-1,.py-xl-1 {
+        padding-top: .25rem!important
+    }
+
+    .pr-xl-1,.px-xl-1 {
+        padding-right: .25rem!important
+    }
+
+    .pb-xl-1,.py-xl-1 {
+        padding-bottom: .25rem!important
+    }
+
+    .pl-xl-1,.px-xl-1 {
+        padding-left: .25rem!important
+    }
+
+    .p-xl-2 {
+        padding: .5rem!important
+    }
+
+    .pt-xl-2,.py-xl-2 {
+        padding-top: .5rem!important
+    }
+
+    .pr-xl-2,.px-xl-2 {
+        padding-right: .5rem!important
+    }
+
+    .pb-xl-2,.py-xl-2 {
+        padding-bottom: .5rem!important
+    }
+
+    .pl-xl-2,.px-xl-2 {
+        padding-left: .5rem!important
+    }
+
+    .p-xl-3 {
+        padding: 1rem!important
+    }
+
+    .pt-xl-3,.py-xl-3 {
+        padding-top: 1rem!important
+    }
+
+    .pr-xl-3,.px-xl-3 {
+        padding-right: 1rem!important
+    }
+
+    .pb-xl-3,.py-xl-3 {
+        padding-bottom: 1rem!important
+    }
+
+    .pl-xl-3,.px-xl-3 {
+        padding-left: 1rem!important
+    }
+
+    .p-xl-4 {
+        padding: 1.5rem!important
+    }
+
+    .pt-xl-4,.py-xl-4 {
+        padding-top: 1.5rem!important
+    }
+
+    .pr-xl-4,.px-xl-4 {
+        padding-right: 1.5rem!important
+    }
+
+    .pb-xl-4,.py-xl-4 {
+        padding-bottom: 1.5rem!important
+    }
+
+    .pl-xl-4,.px-xl-4 {
+        padding-left: 1.5rem!important
+    }
+
+    .p-xl-5 {
+        padding: 3rem!important
+    }
+
+    .pt-xl-5,.py-xl-5 {
+        padding-top: 3rem!important
+    }
+
+    .pr-xl-5,.px-xl-5 {
+        padding-right: 3rem!important
+    }
+
+    .pb-xl-5,.py-xl-5 {
+        padding-bottom: 3rem!important
+    }
+
+    .pl-xl-5,.px-xl-5 {
+        padding-left: 3rem!important
+    }
+
+    .m-xl-n1 {
+        margin: -.25rem!important
+    }
+
+    .mt-xl-n1,.my-xl-n1 {
+        margin-top: -.25rem!important
+    }
+
+    .mr-xl-n1,.mx-xl-n1 {
+        margin-right: -.25rem!important
+    }
+
+    .mb-xl-n1,.my-xl-n1 {
+        margin-bottom: -.25rem!important
+    }
+
+    .ml-xl-n1,.mx-xl-n1 {
+        margin-left: -.25rem!important
+    }
+
+    .m-xl-n2 {
+        margin: -.5rem!important
+    }
+
+    .mt-xl-n2,.my-xl-n2 {
+        margin-top: -.5rem!important
+    }
+
+    .mr-xl-n2,.mx-xl-n2 {
+        margin-right: -.5rem!important
+    }
+
+    .mb-xl-n2,.my-xl-n2 {
+        margin-bottom: -.5rem!important
+    }
+
+    .ml-xl-n2,.mx-xl-n2 {
+        margin-left: -.5rem!important
+    }
+
+    .m-xl-n3 {
+        margin: -1rem!important
+    }
+
+    .mt-xl-n3,.my-xl-n3 {
+        margin-top: -1rem!important
+    }
+
+    .mr-xl-n3,.mx-xl-n3 {
+        margin-right: -1rem!important
+    }
+
+    .mb-xl-n3,.my-xl-n3 {
+        margin-bottom: -1rem!important
+    }
+
+    .ml-xl-n3,.mx-xl-n3 {
+        margin-left: -1rem!important
+    }
+
+    .m-xl-n4 {
+        margin: -1.5rem!important
+    }
+
+    .mt-xl-n4,.my-xl-n4 {
+        margin-top: -1.5rem!important
+    }
+
+    .mr-xl-n4,.mx-xl-n4 {
+        margin-right: -1.5rem!important
+    }
+
+    .mb-xl-n4,.my-xl-n4 {
+        margin-bottom: -1.5rem!important
+    }
+
+    .ml-xl-n4,.mx-xl-n4 {
+        margin-left: -1.5rem!important
+    }
+
+    .m-xl-n5 {
+        margin: -3rem!important
+    }
+
+    .mt-xl-n5,.my-xl-n5 {
+        margin-top: -3rem!important
+    }
+
+    .mr-xl-n5,.mx-xl-n5 {
+        margin-right: -3rem!important
+    }
+
+    .mb-xl-n5,.my-xl-n5 {
+        margin-bottom: -3rem!important
+    }
+
+    .ml-xl-n5,.mx-xl-n5 {
+        margin-left: -3rem!important
+    }
+
+    .m-xl-auto {
+        margin: auto!important
+    }
+
+    .mt-xl-auto,.my-xl-auto {
+        margin-top: auto!important
+    }
+
+    .mr-xl-auto,.mx-xl-auto {
+        margin-right: auto!important
+    }
+
+    .mb-xl-auto,.my-xl-auto {
+        margin-bottom: auto!important
+    }
+
+    .ml-xl-auto,.mx-xl-auto {
+        margin-left: auto!important
+    }
+}
+
+@media (min-width: 1600px) {
+    .m-xxl-0 {
+        margin:0!important
+    }
+
+    .mt-xxl-0,.my-xxl-0 {
+        margin-top: 0!important
+    }
+
+    .mr-xxl-0,.mx-xxl-0 {
+        margin-right: 0!important
+    }
+
+    .mb-xxl-0,.my-xxl-0 {
+        margin-bottom: 0!important
+    }
+
+    .ml-xxl-0,.mx-xxl-0 {
+        margin-left: 0!important
+    }
+
+    .m-xxl-1 {
+        margin: .25rem!important
+    }
+
+    .mt-xxl-1,.my-xxl-1 {
+        margin-top: .25rem!important
+    }
+
+    .mr-xxl-1,.mx-xxl-1 {
+        margin-right: .25rem!important
+    }
+
+    .mb-xxl-1,.my-xxl-1 {
+        margin-bottom: .25rem!important
+    }
+
+    .ml-xxl-1,.mx-xxl-1 {
+        margin-left: .25rem!important
+    }
+
+    .m-xxl-2 {
+        margin: .5rem!important
+    }
+
+    .mt-xxl-2,.my-xxl-2 {
+        margin-top: .5rem!important
+    }
+
+    .mr-xxl-2,.mx-xxl-2 {
+        margin-right: .5rem!important
+    }
+
+    .mb-xxl-2,.my-xxl-2 {
+        margin-bottom: .5rem!important
+    }
+
+    .ml-xxl-2,.mx-xxl-2 {
+        margin-left: .5rem!important
+    }
+
+    .m-xxl-3 {
+        margin: 1rem!important
+    }
+
+    .mt-xxl-3,.my-xxl-3 {
+        margin-top: 1rem!important
+    }
+
+    .mr-xxl-3,.mx-xxl-3 {
+        margin-right: 1rem!important
+    }
+
+    .mb-xxl-3,.my-xxl-3 {
+        margin-bottom: 1rem!important
+    }
+
+    .ml-xxl-3,.mx-xxl-3 {
+        margin-left: 1rem!important
+    }
+
+    .m-xxl-4 {
+        margin: 1.5rem!important
+    }
+
+    .mt-xxl-4,.my-xxl-4 {
+        margin-top: 1.5rem!important
+    }
+
+    .mr-xxl-4,.mx-xxl-4 {
+        margin-right: 1.5rem!important
+    }
+
+    .mb-xxl-4,.my-xxl-4 {
+        margin-bottom: 1.5rem!important
+    }
+
+    .ml-xxl-4,.mx-xxl-4 {
+        margin-left: 1.5rem!important
+    }
+
+    .m-xxl-5 {
+        margin: 3rem!important
+    }
+
+    .mt-xxl-5,.my-xxl-5 {
+        margin-top: 3rem!important
+    }
+
+    .mr-xxl-5,.mx-xxl-5 {
+        margin-right: 3rem!important
+    }
+
+    .mb-xxl-5,.my-xxl-5 {
+        margin-bottom: 3rem!important
+    }
+
+    .ml-xxl-5,.mx-xxl-5 {
+        margin-left: 3rem!important
+    }
+
+    .p-xxl-0 {
+        padding: 0!important
+    }
+
+    .pt-xxl-0,.py-xxl-0 {
+        padding-top: 0!important
+    }
+
+    .pr-xxl-0,.px-xxl-0 {
+        padding-right: 0!important
+    }
+
+    .pb-xxl-0,.py-xxl-0 {
+        padding-bottom: 0!important
+    }
+
+    .pl-xxl-0,.px-xxl-0 {
+        padding-left: 0!important
+    }
+
+    .p-xxl-1 {
+        padding: .25rem!important
+    }
+
+    .pt-xxl-1,.py-xxl-1 {
+        padding-top: .25rem!important
+    }
+
+    .pr-xxl-1,.px-xxl-1 {
+        padding-right: .25rem!important
+    }
+
+    .pb-xxl-1,.py-xxl-1 {
+        padding-bottom: .25rem!important
+    }
+
+    .pl-xxl-1,.px-xxl-1 {
+        padding-left: .25rem!important
+    }
+
+    .p-xxl-2 {
+        padding: .5rem!important
+    }
+
+    .pt-xxl-2,.py-xxl-2 {
+        padding-top: .5rem!important
+    }
+
+    .pr-xxl-2,.px-xxl-2 {
+        padding-right: .5rem!important
+    }
+
+    .pb-xxl-2,.py-xxl-2 {
+        padding-bottom: .5rem!important
+    }
+
+    .pl-xxl-2,.px-xxl-2 {
+        padding-left: .5rem!important
+    }
+
+    .p-xxl-3 {
+        padding: 1rem!important
+    }
+
+    .pt-xxl-3,.py-xxl-3 {
+        padding-top: 1rem!important
+    }
+
+    .pr-xxl-3,.px-xxl-3 {
+        padding-right: 1rem!important
+    }
+
+    .pb-xxl-3,.py-xxl-3 {
+        padding-bottom: 1rem!important
+    }
+
+    .pl-xxl-3,.px-xxl-3 {
+        padding-left: 1rem!important
+    }
+
+    .p-xxl-4 {
+        padding: 1.5rem!important
+    }
+
+    .pt-xxl-4,.py-xxl-4 {
+        padding-top: 1.5rem!important
+    }
+
+    .pr-xxl-4,.px-xxl-4 {
+        padding-right: 1.5rem!important
+    }
+
+    .pb-xxl-4,.py-xxl-4 {
+        padding-bottom: 1.5rem!important
+    }
+
+    .pl-xxl-4,.px-xxl-4 {
+        padding-left: 1.5rem!important
+    }
+
+    .p-xxl-5 {
+        padding: 3rem!important
+    }
+
+    .pt-xxl-5,.py-xxl-5 {
+        padding-top: 3rem!important
+    }
+
+    .pr-xxl-5,.px-xxl-5 {
+        padding-right: 3rem!important
+    }
+
+    .pb-xxl-5,.py-xxl-5 {
+        padding-bottom: 3rem!important
+    }
+
+    .pl-xxl-5,.px-xxl-5 {
+        padding-left: 3rem!important
+    }
+
+    .m-xxl-n1 {
+        margin: -.25rem!important
+    }
+
+    .mt-xxl-n1,.my-xxl-n1 {
+        margin-top: -.25rem!important
+    }
+
+    .mr-xxl-n1,.mx-xxl-n1 {
+        margin-right: -.25rem!important
+    }
+
+    .mb-xxl-n1,.my-xxl-n1 {
+        margin-bottom: -.25rem!important
+    }
+
+    .ml-xxl-n1,.mx-xxl-n1 {
+        margin-left: -.25rem!important
+    }
+
+    .m-xxl-n2 {
+        margin: -.5rem!important
+    }
+
+    .mt-xxl-n2,.my-xxl-n2 {
+        margin-top: -.5rem!important
+    }
+
+    .mr-xxl-n2,.mx-xxl-n2 {
+        margin-right: -.5rem!important
+    }
+
+    .mb-xxl-n2,.my-xxl-n2 {
+        margin-bottom: -.5rem!important
+    }
+
+    .ml-xxl-n2,.mx-xxl-n2 {
+        margin-left: -.5rem!important
+    }
+
+    .m-xxl-n3 {
+        margin: -1rem!important
+    }
+
+    .mt-xxl-n3,.my-xxl-n3 {
+        margin-top: -1rem!important
+    }
+
+    .mr-xxl-n3,.mx-xxl-n3 {
+        margin-right: -1rem!important
+    }
+
+    .mb-xxl-n3,.my-xxl-n3 {
+        margin-bottom: -1rem!important
+    }
+
+    .ml-xxl-n3,.mx-xxl-n3 {
+        margin-left: -1rem!important
+    }
+
+    .m-xxl-n4 {
+        margin: -1.5rem!important
+    }
+
+    .mt-xxl-n4,.my-xxl-n4 {
+        margin-top: -1.5rem!important
+    }
+
+    .mr-xxl-n4,.mx-xxl-n4 {
+        margin-right: -1.5rem!important
+    }
+
+    .mb-xxl-n4,.my-xxl-n4 {
+        margin-bottom: -1.5rem!important
+    }
+
+    .ml-xxl-n4,.mx-xxl-n4 {
+        margin-left: -1.5rem!important
+    }
+
+    .m-xxl-n5 {
+        margin: -3rem!important
+    }
+
+    .mt-xxl-n5,.my-xxl-n5 {
+        margin-top: -3rem!important
+    }
+
+    .mr-xxl-n5,.mx-xxl-n5 {
+        margin-right: -3rem!important
+    }
+
+    .mb-xxl-n5,.my-xxl-n5 {
+        margin-bottom: -3rem!important
+    }
+
+    .ml-xxl-n5,.mx-xxl-n5 {
+        margin-left: -3rem!important
+    }
+
+    .m-xxl-auto {
+        margin: auto!important
+    }
+
+    .mt-xxl-auto,.my-xxl-auto {
+        margin-top: auto!important
+    }
+
+    .mr-xxl-auto,.mx-xxl-auto {
+        margin-right: auto!important
+    }
+
+    .mb-xxl-auto,.my-xxl-auto {
+        margin-bottom: auto!important
+    }
+
+    .ml-xxl-auto,.mx-xxl-auto {
+        margin-left: auto!important
+    }
+}
+
+@media (min-width: 1800px) {
+    .m-fhd-0 {
+        margin:0!important
+    }
+
+    .mt-fhd-0,.my-fhd-0 {
+        margin-top: 0!important
+    }
+
+    .mr-fhd-0,.mx-fhd-0 {
+        margin-right: 0!important
+    }
+
+    .mb-fhd-0,.my-fhd-0 {
+        margin-bottom: 0!important
+    }
+
+    .ml-fhd-0,.mx-fhd-0 {
+        margin-left: 0!important
+    }
+
+    .m-fhd-1 {
+        margin: .25rem!important
+    }
+
+    .mt-fhd-1,.my-fhd-1 {
+        margin-top: .25rem!important
+    }
+
+    .mr-fhd-1,.mx-fhd-1 {
+        margin-right: .25rem!important
+    }
+
+    .mb-fhd-1,.my-fhd-1 {
+        margin-bottom: .25rem!important
+    }
+
+    .ml-fhd-1,.mx-fhd-1 {
+        margin-left: .25rem!important
+    }
+
+    .m-fhd-2 {
+        margin: .5rem!important
+    }
+
+    .mt-fhd-2,.my-fhd-2 {
+        margin-top: .5rem!important
+    }
+
+    .mr-fhd-2,.mx-fhd-2 {
+        margin-right: .5rem!important
+    }
+
+    .mb-fhd-2,.my-fhd-2 {
+        margin-bottom: .5rem!important
+    }
+
+    .ml-fhd-2,.mx-fhd-2 {
+        margin-left: .5rem!important
+    }
+
+    .m-fhd-3 {
+        margin: 1rem!important
+    }
+
+    .mt-fhd-3,.my-fhd-3 {
+        margin-top: 1rem!important
+    }
+
+    .mr-fhd-3,.mx-fhd-3 {
+        margin-right: 1rem!important
+    }
+
+    .mb-fhd-3,.my-fhd-3 {
+        margin-bottom: 1rem!important
+    }
+
+    .ml-fhd-3,.mx-fhd-3 {
+        margin-left: 1rem!important
+    }
+
+    .m-fhd-4 {
+        margin: 1.5rem!important
+    }
+
+    .mt-fhd-4,.my-fhd-4 {
+        margin-top: 1.5rem!important
+    }
+
+    .mr-fhd-4,.mx-fhd-4 {
+        margin-right: 1.5rem!important
+    }
+
+    .mb-fhd-4,.my-fhd-4 {
+        margin-bottom: 1.5rem!important
+    }
+
+    .ml-fhd-4,.mx-fhd-4 {
+        margin-left: 1.5rem!important
+    }
+
+    .m-fhd-5 {
+        margin: 3rem!important
+    }
+
+    .mt-fhd-5,.my-fhd-5 {
+        margin-top: 3rem!important
+    }
+
+    .mr-fhd-5,.mx-fhd-5 {
+        margin-right: 3rem!important
+    }
+
+    .mb-fhd-5,.my-fhd-5 {
+        margin-bottom: 3rem!important
+    }
+
+    .ml-fhd-5,.mx-fhd-5 {
+        margin-left: 3rem!important
+    }
+
+    .p-fhd-0 {
+        padding: 0!important
+    }
+
+    .pt-fhd-0,.py-fhd-0 {
+        padding-top: 0!important
+    }
+
+    .pr-fhd-0,.px-fhd-0 {
+        padding-right: 0!important
+    }
+
+    .pb-fhd-0,.py-fhd-0 {
+        padding-bottom: 0!important
+    }
+
+    .pl-fhd-0,.px-fhd-0 {
+        padding-left: 0!important
+    }
+
+    .p-fhd-1 {
+        padding: .25rem!important
+    }
+
+    .pt-fhd-1,.py-fhd-1 {
+        padding-top: .25rem!important
+    }
+
+    .pr-fhd-1,.px-fhd-1 {
+        padding-right: .25rem!important
+    }
+
+    .pb-fhd-1,.py-fhd-1 {
+        padding-bottom: .25rem!important
+    }
+
+    .pl-fhd-1,.px-fhd-1 {
+        padding-left: .25rem!important
+    }
+
+    .p-fhd-2 {
+        padding: .5rem!important
+    }
+
+    .pt-fhd-2,.py-fhd-2 {
+        padding-top: .5rem!important
+    }
+
+    .pr-fhd-2,.px-fhd-2 {
+        padding-right: .5rem!important
+    }
+
+    .pb-fhd-2,.py-fhd-2 {
+        padding-bottom: .5rem!important
+    }
+
+    .pl-fhd-2,.px-fhd-2 {
+        padding-left: .5rem!important
+    }
+
+    .p-fhd-3 {
+        padding: 1rem!important
+    }
+
+    .pt-fhd-3,.py-fhd-3 {
+        padding-top: 1rem!important
+    }
+
+    .pr-fhd-3,.px-fhd-3 {
+        padding-right: 1rem!important
+    }
+
+    .pb-fhd-3,.py-fhd-3 {
+        padding-bottom: 1rem!important
+    }
+
+    .pl-fhd-3,.px-fhd-3 {
+        padding-left: 1rem!important
+    }
+
+    .p-fhd-4 {
+        padding: 1.5rem!important
+    }
+
+    .pt-fhd-4,.py-fhd-4 {
+        padding-top: 1.5rem!important
+    }
+
+    .pr-fhd-4,.px-fhd-4 {
+        padding-right: 1.5rem!important
+    }
+
+    .pb-fhd-4,.py-fhd-4 {
+        padding-bottom: 1.5rem!important
+    }
+
+    .pl-fhd-4,.px-fhd-4 {
+        padding-left: 1.5rem!important
+    }
+
+    .p-fhd-5 {
+        padding: 3rem!important
+    }
+
+    .pt-fhd-5,.py-fhd-5 {
+        padding-top: 3rem!important
+    }
+
+    .pr-fhd-5,.px-fhd-5 {
+        padding-right: 3rem!important
+    }
+
+    .pb-fhd-5,.py-fhd-5 {
+        padding-bottom: 3rem!important
+    }
+
+    .pl-fhd-5,.px-fhd-5 {
+        padding-left: 3rem!important
+    }
+
+    .m-fhd-n1 {
+        margin: -.25rem!important
+    }
+
+    .mt-fhd-n1,.my-fhd-n1 {
+        margin-top: -.25rem!important
+    }
+
+    .mr-fhd-n1,.mx-fhd-n1 {
+        margin-right: -.25rem!important
+    }
+
+    .mb-fhd-n1,.my-fhd-n1 {
+        margin-bottom: -.25rem!important
+    }
+
+    .ml-fhd-n1,.mx-fhd-n1 {
+        margin-left: -.25rem!important
+    }
+
+    .m-fhd-n2 {
+        margin: -.5rem!important
+    }
+
+    .mt-fhd-n2,.my-fhd-n2 {
+        margin-top: -.5rem!important
+    }
+
+    .mr-fhd-n2,.mx-fhd-n2 {
+        margin-right: -.5rem!important
+    }
+
+    .mb-fhd-n2,.my-fhd-n2 {
+        margin-bottom: -.5rem!important
+    }
+
+    .ml-fhd-n2,.mx-fhd-n2 {
+        margin-left: -.5rem!important
+    }
+
+    .m-fhd-n3 {
+        margin: -1rem!important
+    }
+
+    .mt-fhd-n3,.my-fhd-n3 {
+        margin-top: -1rem!important
+    }
+
+    .mr-fhd-n3,.mx-fhd-n3 {
+        margin-right: -1rem!important
+    }
+
+    .mb-fhd-n3,.my-fhd-n3 {
+        margin-bottom: -1rem!important
+    }
+
+    .ml-fhd-n3,.mx-fhd-n3 {
+        margin-left: -1rem!important
+    }
+
+    .m-fhd-n4 {
+        margin: -1.5rem!important
+    }
+
+    .mt-fhd-n4,.my-fhd-n4 {
+        margin-top: -1.5rem!important
+    }
+
+    .mr-fhd-n4,.mx-fhd-n4 {
+        margin-right: -1.5rem!important
+    }
+
+    .mb-fhd-n4,.my-fhd-n4 {
+        margin-bottom: -1.5rem!important
+    }
+
+    .ml-fhd-n4,.mx-fhd-n4 {
+        margin-left: -1.5rem!important
+    }
+
+    .m-fhd-n5 {
+        margin: -3rem!important
+    }
+
+    .mt-fhd-n5,.my-fhd-n5 {
+        margin-top: -3rem!important
+    }
+
+    .mr-fhd-n5,.mx-fhd-n5 {
+        margin-right: -3rem!important
+    }
+
+    .mb-fhd-n5,.my-fhd-n5 {
+        margin-bottom: -3rem!important
+    }
+
+    .ml-fhd-n5,.mx-fhd-n5 {
+        margin-left: -3rem!important
+    }
+
+    .m-fhd-auto {
+        margin: auto!important
+    }
+
+    .mt-fhd-auto,.my-fhd-auto {
+        margin-top: auto!important
+    }
+
+    .mr-fhd-auto,.mx-fhd-auto {
+        margin-right: auto!important
+    }
+
+    .mb-fhd-auto,.my-fhd-auto {
+        margin-bottom: auto!important
+    }
+
+    .ml-fhd-auto,.mx-fhd-auto {
+        margin-left: auto!important
+    }
+}
+
+@media (min-width: 2560px) {
+    .m-qhd-0 {
+        margin:0!important
+    }
+
+    .mt-qhd-0,.my-qhd-0 {
+        margin-top: 0!important
+    }
+
+    .mr-qhd-0,.mx-qhd-0 {
+        margin-right: 0!important
+    }
+
+    .mb-qhd-0,.my-qhd-0 {
+        margin-bottom: 0!important
+    }
+
+    .ml-qhd-0,.mx-qhd-0 {
+        margin-left: 0!important
+    }
+
+    .m-qhd-1 {
+        margin: .25rem!important
+    }
+
+    .mt-qhd-1,.my-qhd-1 {
+        margin-top: .25rem!important
+    }
+
+    .mr-qhd-1,.mx-qhd-1 {
+        margin-right: .25rem!important
+    }
+
+    .mb-qhd-1,.my-qhd-1 {
+        margin-bottom: .25rem!important
+    }
+
+    .ml-qhd-1,.mx-qhd-1 {
+        margin-left: .25rem!important
+    }
+
+    .m-qhd-2 {
+        margin: .5rem!important
+    }
+
+    .mt-qhd-2,.my-qhd-2 {
+        margin-top: .5rem!important
+    }
+
+    .mr-qhd-2,.mx-qhd-2 {
+        margin-right: .5rem!important
+    }
+
+    .mb-qhd-2,.my-qhd-2 {
+        margin-bottom: .5rem!important
+    }
+
+    .ml-qhd-2,.mx-qhd-2 {
+        margin-left: .5rem!important
+    }
+
+    .m-qhd-3 {
+        margin: 1rem!important
+    }
+
+    .mt-qhd-3,.my-qhd-3 {
+        margin-top: 1rem!important
+    }
+
+    .mr-qhd-3,.mx-qhd-3 {
+        margin-right: 1rem!important
+    }
+
+    .mb-qhd-3,.my-qhd-3 {
+        margin-bottom: 1rem!important
+    }
+
+    .ml-qhd-3,.mx-qhd-3 {
+        margin-left: 1rem!important
+    }
+
+    .m-qhd-4 {
+        margin: 1.5rem!important
+    }
+
+    .mt-qhd-4,.my-qhd-4 {
+        margin-top: 1.5rem!important
+    }
+
+    .mr-qhd-4,.mx-qhd-4 {
+        margin-right: 1.5rem!important
+    }
+
+    .mb-qhd-4,.my-qhd-4 {
+        margin-bottom: 1.5rem!important
+    }
+
+    .ml-qhd-4,.mx-qhd-4 {
+        margin-left: 1.5rem!important
+    }
+
+    .m-qhd-5 {
+        margin: 3rem!important
+    }
+
+    .mt-qhd-5,.my-qhd-5 {
+        margin-top: 3rem!important
+    }
+
+    .mr-qhd-5,.mx-qhd-5 {
+        margin-right: 3rem!important
+    }
+
+    .mb-qhd-5,.my-qhd-5 {
+        margin-bottom: 3rem!important
+    }
+
+    .ml-qhd-5,.mx-qhd-5 {
+        margin-left: 3rem!important
+    }
+
+    .p-qhd-0 {
+        padding: 0!important
+    }
+
+    .pt-qhd-0,.py-qhd-0 {
+        padding-top: 0!important
+    }
+
+    .pr-qhd-0,.px-qhd-0 {
+        padding-right: 0!important
+    }
+
+    .pb-qhd-0,.py-qhd-0 {
+        padding-bottom: 0!important
+    }
+
+    .pl-qhd-0,.px-qhd-0 {
+        padding-left: 0!important
+    }
+
+    .p-qhd-1 {
+        padding: .25rem!important
+    }
+
+    .pt-qhd-1,.py-qhd-1 {
+        padding-top: .25rem!important
+    }
+
+    .pr-qhd-1,.px-qhd-1 {
+        padding-right: .25rem!important
+    }
+
+    .pb-qhd-1,.py-qhd-1 {
+        padding-bottom: .25rem!important
+    }
+
+    .pl-qhd-1,.px-qhd-1 {
+        padding-left: .25rem!important
+    }
+
+    .p-qhd-2 {
+        padding: .5rem!important
+    }
+
+    .pt-qhd-2,.py-qhd-2 {
+        padding-top: .5rem!important
+    }
+
+    .pr-qhd-2,.px-qhd-2 {
+        padding-right: .5rem!important
+    }
+
+    .pb-qhd-2,.py-qhd-2 {
+        padding-bottom: .5rem!important
+    }
+
+    .pl-qhd-2,.px-qhd-2 {
+        padding-left: .5rem!important
+    }
+
+    .p-qhd-3 {
+        padding: 1rem!important
+    }
+
+    .pt-qhd-3,.py-qhd-3 {
+        padding-top: 1rem!important
+    }
+
+    .pr-qhd-3,.px-qhd-3 {
+        padding-right: 1rem!important
+    }
+
+    .pb-qhd-3,.py-qhd-3 {
+        padding-bottom: 1rem!important
+    }
+
+    .pl-qhd-3,.px-qhd-3 {
+        padding-left: 1rem!important
+    }
+
+    .p-qhd-4 {
+        padding: 1.5rem!important
+    }
+
+    .pt-qhd-4,.py-qhd-4 {
+        padding-top: 1.5rem!important
+    }
+
+    .pr-qhd-4,.px-qhd-4 {
+        padding-right: 1.5rem!important
+    }
+
+    .pb-qhd-4,.py-qhd-4 {
+        padding-bottom: 1.5rem!important
+    }
+
+    .pl-qhd-4,.px-qhd-4 {
+        padding-left: 1.5rem!important
+    }
+
+    .p-qhd-5 {
+        padding: 3rem!important
+    }
+
+    .pt-qhd-5,.py-qhd-5 {
+        padding-top: 3rem!important
+    }
+
+    .pr-qhd-5,.px-qhd-5 {
+        padding-right: 3rem!important
+    }
+
+    .pb-qhd-5,.py-qhd-5 {
+        padding-bottom: 3rem!important
+    }
+
+    .pl-qhd-5,.px-qhd-5 {
+        padding-left: 3rem!important
+    }
+
+    .m-qhd-n1 {
+        margin: -.25rem!important
+    }
+
+    .mt-qhd-n1,.my-qhd-n1 {
+        margin-top: -.25rem!important
+    }
+
+    .mr-qhd-n1,.mx-qhd-n1 {
+        margin-right: -.25rem!important
+    }
+
+    .mb-qhd-n1,.my-qhd-n1 {
+        margin-bottom: -.25rem!important
+    }
+
+    .ml-qhd-n1,.mx-qhd-n1 {
+        margin-left: -.25rem!important
+    }
+
+    .m-qhd-n2 {
+        margin: -.5rem!important
+    }
+
+    .mt-qhd-n2,.my-qhd-n2 {
+        margin-top: -.5rem!important
+    }
+
+    .mr-qhd-n2,.mx-qhd-n2 {
+        margin-right: -.5rem!important
+    }
+
+    .mb-qhd-n2,.my-qhd-n2 {
+        margin-bottom: -.5rem!important
+    }
+
+    .ml-qhd-n2,.mx-qhd-n2 {
+        margin-left: -.5rem!important
+    }
+
+    .m-qhd-n3 {
+        margin: -1rem!important
+    }
+
+    .mt-qhd-n3,.my-qhd-n3 {
+        margin-top: -1rem!important
+    }
+
+    .mr-qhd-n3,.mx-qhd-n3 {
+        margin-right: -1rem!important
+    }
+
+    .mb-qhd-n3,.my-qhd-n3 {
+        margin-bottom: -1rem!important
+    }
+
+    .ml-qhd-n3,.mx-qhd-n3 {
+        margin-left: -1rem!important
+    }
+
+    .m-qhd-n4 {
+        margin: -1.5rem!important
+    }
+
+    .mt-qhd-n4,.my-qhd-n4 {
+        margin-top: -1.5rem!important
+    }
+
+    .mr-qhd-n4,.mx-qhd-n4 {
+        margin-right: -1.5rem!important
+    }
+
+    .mb-qhd-n4,.my-qhd-n4 {
+        margin-bottom: -1.5rem!important
+    }
+
+    .ml-qhd-n4,.mx-qhd-n4 {
+        margin-left: -1.5rem!important
+    }
+
+    .m-qhd-n5 {
+        margin: -3rem!important
+    }
+
+    .mt-qhd-n5,.my-qhd-n5 {
+        margin-top: -3rem!important
+    }
+
+    .mr-qhd-n5,.mx-qhd-n5 {
+        margin-right: -3rem!important
+    }
+
+    .mb-qhd-n5,.my-qhd-n5 {
+        margin-bottom: -3rem!important
+    }
+
+    .ml-qhd-n5,.mx-qhd-n5 {
+        margin-left: -3rem!important
+    }
+
+    .m-qhd-auto {
+        margin: auto!important
+    }
+
+    .mt-qhd-auto,.my-qhd-auto {
+        margin-top: auto!important
+    }
+
+    .mr-qhd-auto,.mx-qhd-auto {
+        margin-right: auto!important
+    }
+
+    .mb-qhd-auto,.my-qhd-auto {
+        margin-bottom: auto!important
+    }
+
+    .ml-qhd-auto,.mx-qhd-auto {
+        margin-left: auto!important
+    }
+}
+
+@media (min-width: 3840px) {
+    .m-uhd-0 {
+        margin:0!important
+    }
+
+    .mt-uhd-0,.my-uhd-0 {
+        margin-top: 0!important
+    }
+
+    .mr-uhd-0,.mx-uhd-0 {
+        margin-right: 0!important
+    }
+
+    .mb-uhd-0,.my-uhd-0 {
+        margin-bottom: 0!important
+    }
+
+    .ml-uhd-0,.mx-uhd-0 {
+        margin-left: 0!important
+    }
+
+    .m-uhd-1 {
+        margin: .25rem!important
+    }
+
+    .mt-uhd-1,.my-uhd-1 {
+        margin-top: .25rem!important
+    }
+
+    .mr-uhd-1,.mx-uhd-1 {
+        margin-right: .25rem!important
+    }
+
+    .mb-uhd-1,.my-uhd-1 {
+        margin-bottom: .25rem!important
+    }
+
+    .ml-uhd-1,.mx-uhd-1 {
+        margin-left: .25rem!important
+    }
+
+    .m-uhd-2 {
+        margin: .5rem!important
+    }
+
+    .mt-uhd-2,.my-uhd-2 {
+        margin-top: .5rem!important
+    }
+
+    .mr-uhd-2,.mx-uhd-2 {
+        margin-right: .5rem!important
+    }
+
+    .mb-uhd-2,.my-uhd-2 {
+        margin-bottom: .5rem!important
+    }
+
+    .ml-uhd-2,.mx-uhd-2 {
+        margin-left: .5rem!important
+    }
+
+    .m-uhd-3 {
+        margin: 1rem!important
+    }
+
+    .mt-uhd-3,.my-uhd-3 {
+        margin-top: 1rem!important
+    }
+
+    .mr-uhd-3,.mx-uhd-3 {
+        margin-right: 1rem!important
+    }
+
+    .mb-uhd-3,.my-uhd-3 {
+        margin-bottom: 1rem!important
+    }
+
+    .ml-uhd-3,.mx-uhd-3 {
+        margin-left: 1rem!important
+    }
+
+    .m-uhd-4 {
+        margin: 1.5rem!important
+    }
+
+    .mt-uhd-4,.my-uhd-4 {
+        margin-top: 1.5rem!important
+    }
+
+    .mr-uhd-4,.mx-uhd-4 {
+        margin-right: 1.5rem!important
+    }
+
+    .mb-uhd-4,.my-uhd-4 {
+        margin-bottom: 1.5rem!important
+    }
+
+    .ml-uhd-4,.mx-uhd-4 {
+        margin-left: 1.5rem!important
+    }
+
+    .m-uhd-5 {
+        margin: 3rem!important
+    }
+
+    .mt-uhd-5,.my-uhd-5 {
+        margin-top: 3rem!important
+    }
+
+    .mr-uhd-5,.mx-uhd-5 {
+        margin-right: 3rem!important
+    }
+
+    .mb-uhd-5,.my-uhd-5 {
+        margin-bottom: 3rem!important
+    }
+
+    .ml-uhd-5,.mx-uhd-5 {
+        margin-left: 3rem!important
+    }
+
+    .p-uhd-0 {
+        padding: 0!important
+    }
+
+    .pt-uhd-0,.py-uhd-0 {
+        padding-top: 0!important
+    }
+
+    .pr-uhd-0,.px-uhd-0 {
+        padding-right: 0!important
+    }
+
+    .pb-uhd-0,.py-uhd-0 {
+        padding-bottom: 0!important
+    }
+
+    .pl-uhd-0,.px-uhd-0 {
+        padding-left: 0!important
+    }
+
+    .p-uhd-1 {
+        padding: .25rem!important
+    }
+
+    .pt-uhd-1,.py-uhd-1 {
+        padding-top: .25rem!important
+    }
+
+    .pr-uhd-1,.px-uhd-1 {
+        padding-right: .25rem!important
+    }
+
+    .pb-uhd-1,.py-uhd-1 {
+        padding-bottom: .25rem!important
+    }
+
+    .pl-uhd-1,.px-uhd-1 {
+        padding-left: .25rem!important
+    }
+
+    .p-uhd-2 {
+        padding: .5rem!important
+    }
+
+    .pt-uhd-2,.py-uhd-2 {
+        padding-top: .5rem!important
+    }
+
+    .pr-uhd-2,.px-uhd-2 {
+        padding-right: .5rem!important
+    }
+
+    .pb-uhd-2,.py-uhd-2 {
+        padding-bottom: .5rem!important
+    }
+
+    .pl-uhd-2,.px-uhd-2 {
+        padding-left: .5rem!important
+    }
+
+    .p-uhd-3 {
+        padding: 1rem!important
+    }
+
+    .pt-uhd-3,.py-uhd-3 {
+        padding-top: 1rem!important
+    }
+
+    .pr-uhd-3,.px-uhd-3 {
+        padding-right: 1rem!important
+    }
+
+    .pb-uhd-3,.py-uhd-3 {
+        padding-bottom: 1rem!important
+    }
+
+    .pl-uhd-3,.px-uhd-3 {
+        padding-left: 1rem!important
+    }
+
+    .p-uhd-4 {
+        padding: 1.5rem!important
+    }
+
+    .pt-uhd-4,.py-uhd-4 {
+        padding-top: 1.5rem!important
+    }
+
+    .pr-uhd-4,.px-uhd-4 {
+        padding-right: 1.5rem!important
+    }
+
+    .pb-uhd-4,.py-uhd-4 {
+        padding-bottom: 1.5rem!important
+    }
+
+    .pl-uhd-4,.px-uhd-4 {
+        padding-left: 1.5rem!important
+    }
+
+    .p-uhd-5 {
+        padding: 3rem!important
+    }
+
+    .pt-uhd-5,.py-uhd-5 {
+        padding-top: 3rem!important
+    }
+
+    .pr-uhd-5,.px-uhd-5 {
+        padding-right: 3rem!important
+    }
+
+    .pb-uhd-5,.py-uhd-5 {
+        padding-bottom: 3rem!important
+    }
+
+    .pl-uhd-5,.px-uhd-5 {
+        padding-left: 3rem!important
+    }
+
+    .m-uhd-n1 {
+        margin: -.25rem!important
+    }
+
+    .mt-uhd-n1,.my-uhd-n1 {
+        margin-top: -.25rem!important
+    }
+
+    .mr-uhd-n1,.mx-uhd-n1 {
+        margin-right: -.25rem!important
+    }
+
+    .mb-uhd-n1,.my-uhd-n1 {
+        margin-bottom: -.25rem!important
+    }
+
+    .ml-uhd-n1,.mx-uhd-n1 {
+        margin-left: -.25rem!important
+    }
+
+    .m-uhd-n2 {
+        margin: -.5rem!important
+    }
+
+    .mt-uhd-n2,.my-uhd-n2 {
+        margin-top: -.5rem!important
+    }
+
+    .mr-uhd-n2,.mx-uhd-n2 {
+        margin-right: -.5rem!important
+    }
+
+    .mb-uhd-n2,.my-uhd-n2 {
+        margin-bottom: -.5rem!important
+    }
+
+    .ml-uhd-n2,.mx-uhd-n2 {
+        margin-left: -.5rem!important
+    }
+
+    .m-uhd-n3 {
+        margin: -1rem!important
+    }
+
+    .mt-uhd-n3,.my-uhd-n3 {
+        margin-top: -1rem!important
+    }
+
+    .mr-uhd-n3,.mx-uhd-n3 {
+        margin-right: -1rem!important
+    }
+
+    .mb-uhd-n3,.my-uhd-n3 {
+        margin-bottom: -1rem!important
+    }
+
+    .ml-uhd-n3,.mx-uhd-n3 {
+        margin-left: -1rem!important
+    }
+
+    .m-uhd-n4 {
+        margin: -1.5rem!important
+    }
+
+    .mt-uhd-n4,.my-uhd-n4 {
+        margin-top: -1.5rem!important
+    }
+
+    .mr-uhd-n4,.mx-uhd-n4 {
+        margin-right: -1.5rem!important
+    }
+
+    .mb-uhd-n4,.my-uhd-n4 {
+        margin-bottom: -1.5rem!important
+    }
+
+    .ml-uhd-n4,.mx-uhd-n4 {
+        margin-left: -1.5rem!important
+    }
+
+    .m-uhd-n5 {
+        margin: -3rem!important
+    }
+
+    .mt-uhd-n5,.my-uhd-n5 {
+        margin-top: -3rem!important
+    }
+
+    .mr-uhd-n5,.mx-uhd-n5 {
+        margin-right: -3rem!important
+    }
+
+    .mb-uhd-n5,.my-uhd-n5 {
+        margin-bottom: -3rem!important
+    }
+
+    .ml-uhd-n5,.mx-uhd-n5 {
+        margin-left: -3rem!important
+    }
+
+    .m-uhd-auto {
+        margin: auto!important
+    }
+
+    .mt-uhd-auto,.my-uhd-auto {
+        margin-top: auto!important
+    }
+
+    .mr-uhd-auto,.mx-uhd-auto {
+        margin-right: auto!important
+    }
+
+    .mb-uhd-auto,.my-uhd-auto {
+        margin-bottom: auto!important
+    }
+
+    .ml-uhd-auto,.mx-uhd-auto {
+        margin-left: auto!important
+    }
+}
+
+.stretched-link:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    pointer-events: auto;
+    content: "";
+    background-color: #0000
+}
+
+.text-monospace {
+    font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace!important
+}
+
+.text-justify {
+    text-align: justify!important
+}
+
+.text-wrap {
+    white-space: normal!important
+}
+
+.text-nowrap {
+    white-space: nowrap!important
+}
+
+.text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+}
+
+.text-left {
+    text-align: left!important
+}
+
+.text-right {
+    text-align: right!important
+}
+
+.text-center {
+    text-align: center!important
+}
+
+@media (min-width: 576px) {
+    .text-sm-left {
+        text-align:left!important
+    }
+
+    .text-sm-right {
+        text-align: right!important
+    }
+
+    .text-sm-center {
+        text-align: center!important
+    }
+}
+
+@media (min-width: 768px) {
+    .text-md-left {
+        text-align:left!important
+    }
+
+    .text-md-right {
+        text-align: right!important
+    }
+
+    .text-md-center {
+        text-align: center!important
+    }
+}
+
+@media (min-width: 900px) {
+    .text-lg-left {
+        text-align:left!important
+    }
+
+    .text-lg-right {
+        text-align: right!important
+    }
+
+    .text-lg-center {
+        text-align: center!important
+    }
+}
+
+@media (min-width: 1200px) {
+    .text-xl-left {
+        text-align:left!important
+    }
+
+    .text-xl-right {
+        text-align: right!important
+    }
+
+    .text-xl-center {
+        text-align: center!important
+    }
+}
+
+@media (min-width: 1600px) {
+    .text-xxl-left {
+        text-align:left!important
+    }
+
+    .text-xxl-right {
+        text-align: right!important
+    }
+
+    .text-xxl-center {
+        text-align: center!important
+    }
+}
+
+@media (min-width: 1800px) {
+    .text-fhd-left {
+        text-align:left!important
+    }
+
+    .text-fhd-right {
+        text-align: right!important
+    }
+
+    .text-fhd-center {
+        text-align: center!important
+    }
+}
+
+@media (min-width: 2560px) {
+    .text-qhd-left {
+        text-align:left!important
+    }
+
+    .text-qhd-right {
+        text-align: right!important
+    }
+
+    .text-qhd-center {
+        text-align: center!important
+    }
+}
+
+@media (min-width: 3840px) {
+    .text-uhd-left {
+        text-align:left!important
+    }
+
+    .text-uhd-right {
+        text-align: right!important
+    }
+
+    .text-uhd-center {
+        text-align: center!important
+    }
+}
+
+.text-lowercase {
+    text-transform: lowercase!important
+}
+
+.text-uppercase {
+    text-transform: uppercase!important
+}
+
+.text-capitalize {
+    text-transform: capitalize!important
+}
+
+.font-weight-light {
+    font-weight: 300!important
+}
+
+.font-weight-lighter {
+    font-weight: lighter!important
+}
+
+.font-weight-normal {
+    font-weight: 400!important
+}
+
+.font-weight-bold {
+    font-weight: 700!important
+}
+
+.font-weight-bolder {
+    font-weight: bolder!important
+}
+
+.font-italic {
+    font-style: italic!important
+}
+
+.text-white {
+    color: #fff!important
+}
+
+.text-primary {
+    color: #007bff!important
+}
+
+a.text-primary:focus,a.text-primary:hover {
+    color: #0056b3!important
+}
+
+.text-secondary {
+    color: #6c757d!important
+}
+
+a.text-secondary:focus,a.text-secondary:hover {
+    color: #494f54!important
+}
+
+.text-success {
+    color: #39cc0b!important
+}
+
+a.text-success:focus,a.text-success:hover {
+    color: #258307!important
+}
+
+.text-info {
+    color: #17a2b8!important
+}
+
+a.text-info:focus,a.text-info:hover {
+    color: #0f6674!important
+}
+
+.text-warning {
+    color: #ffc107!important
+}
+
+a.text-warning:focus,a.text-warning:hover {
+    color: #ba8b00!important
+}
+
+.text-danger {
+    color: red!important
+}
+
+a.text-danger:focus,a.text-danger:hover {
+    color: #b30000!important
+}
+
+.text-light {
+    color: #f8f9fa!important
+}
+
+a.text-light:focus,a.text-light:hover {
+    color: #cbd3da!important
+}
+
+.text-dark {
+    color: #343a40!important
+}
+
+a.text-dark:focus,a.text-dark:hover {
+    color: #121416!important
+}
+
+.text-body {
+    color: #212529!important
+}
+
+.form-group-description,.text-muted {
+    color: #6c757d!important
+}
+
+.text-black-50 {
+    color: #00000080!important
+}
+
+.text-white-50 {
+    color: #ffffff80!important
+}
+
+.text-hide {
+    font: 0/0 a;
+    color: #0000;
+    text-shadow: none;
+    background-color: initial;
+    border: 0
+}
+
+.text-decoration-none {
+    text-decoration: none!important
+}
+
+.text-break {
+    word-break: break-word!important;
+    word-wrap: break-word!important
+}
+
+.text-reset {
+    color: inherit!important
+}
+
+.visible {
+    visibility: visible!important
+}
+
+.invisible {
+    visibility: hidden!important
+}
+
+/*! Bootstrap3 Glyphicons : Neo (@Neos21) : https://neos21.net/ */
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+@font-face {
+    font-family: Glyphicons Halflings;
+    src: url(glyphicons-halflings-regular.5be1347c682810f199c7.eot);
+    src: url(glyphicons-halflings-regular.5be1347c682810f199c7.eot?#iefix) format("embedded-opentype"),url(glyphicons-halflings-regular.be810be3a3e14c682a25.woff2) format("woff2"),url(glyphicons-halflings-regular.82b1212e45a2bc35dd73.woff) format("woff"),url(glyphicons-halflings-regular.4692b9ec53fd5972caa2.ttf) format("truetype"),url(glyphicons-halflings-regular.060b2710bdbbe3dfe48b.svg#glyphicons_halflingsregular) format("svg")
+}
+
+.glyphicon,p-table th.p-highlight .pi {
+    position: relative;
+    top: 1px;
+    display: inline-block;
+    font-family: Glyphicons Halflings;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale
+}
+
+.glyphicon-asterisk:before {
+    content: "*"
+}
+
+.glyphicon-plus:before {
+    content: "+"
+}
+
+.glyphicon-eur:before,.glyphicon-euro:before {
+    content: "€"
+}
+
+.glyphicon-minus:before {
+    content: "−"
+}
+
+.glyphicon-cloud:before {
+    content: "☁"
+}
+
+.glyphicon-envelope:before {
+    content: "✉"
+}
+
+.glyphicon-pencil:before {
+    content: "✏"
+}
+
+.glyphicon-glass:before {
+    content: ""
+}
+
+.glyphicon-music:before {
+    content: ""
+}
+
+.glyphicon-search:before {
+    content: ""
+}
+
+.glyphicon-heart:before {
+    content: ""
+}
+
+.glyphicon-star:before {
+    content: ""
+}
+
+.glyphicon-star-empty:before {
+    content: ""
+}
+
+.glyphicon-user:before {
+    content: ""
+}
+
+.glyphicon-film:before {
+    content: ""
+}
+
+.glyphicon-th-large:before {
+    content: ""
+}
+
+.glyphicon-th:before {
+    content: ""
+}
+
+.glyphicon-th-list:before {
+    content: ""
+}
+
+.glyphicon-ok:before {
+    content: ""
+}
+
+.glyphicon-remove:before {
+    content: ""
+}
+
+.glyphicon-zoom-in:before {
+    content: ""
+}
+
+.glyphicon-zoom-out:before {
+    content: ""
+}
+
+.glyphicon-off:before {
+    content: ""
+}
+
+.glyphicon-signal:before {
+    content: ""
+}
+
+.glyphicon-cog:before {
+    content: ""
+}
+
+.glyphicon-trash:before {
+    content: ""
+}
+
+.glyphicon-home:before {
+    content: ""
+}
+
+.glyphicon-file:before {
+    content: ""
+}
+
+.glyphicon-time:before {
+    content: ""
+}
+
+.glyphicon-road:before {
+    content: ""
+}
+
+.glyphicon-download-alt:before {
+    content: ""
+}
+
+.glyphicon-download:before {
+    content: ""
+}
+
+.glyphicon-upload:before {
+    content: ""
+}
+
+.glyphicon-inbox:before {
+    content: ""
+}
+
+.glyphicon-play-circle:before {
+    content: ""
+}
+
+.glyphicon-repeat:before {
+    content: ""
+}
+
+.glyphicon-refresh:before {
+    content: ""
+}
+
+.glyphicon-list-alt:before {
+    content: ""
+}
+
+.glyphicon-lock:before {
+    content: ""
+}
+
+.glyphicon-flag:before {
+    content: ""
+}
+
+.glyphicon-headphones:before {
+    content: ""
+}
+
+.glyphicon-volume-off:before {
+    content: ""
+}
+
+.glyphicon-volume-down:before {
+    content: ""
+}
+
+.glyphicon-volume-up:before {
+    content: ""
+}
+
+.glyphicon-qrcode:before {
+    content: ""
+}
+
+.glyphicon-barcode:before {
+    content: ""
+}
+
+.glyphicon-tag:before {
+    content: ""
+}
+
+.glyphicon-tags:before {
+    content: ""
+}
+
+.glyphicon-book:before {
+    content: ""
+}
+
+.glyphicon-bookmark:before {
+    content: ""
+}
+
+.glyphicon-print:before {
+    content: ""
+}
+
+.glyphicon-camera:before {
+    content: ""
+}
+
+.glyphicon-font:before {
+    content: ""
+}
+
+.glyphicon-bold:before {
+    content: ""
+}
+
+.glyphicon-italic:before {
+    content: ""
+}
+
+.glyphicon-text-height:before {
+    content: ""
+}
+
+.glyphicon-text-width:before {
+    content: ""
+}
+
+.glyphicon-align-left:before {
+    content: ""
+}
+
+.glyphicon-align-center:before {
+    content: ""
+}
+
+.glyphicon-align-right:before {
+    content: ""
+}
+
+.glyphicon-align-justify:before {
+    content: ""
+}
+
+.glyphicon-list:before {
+    content: ""
+}
+
+.glyphicon-indent-left:before {
+    content: ""
+}
+
+.glyphicon-indent-right:before {
+    content: ""
+}
+
+.glyphicon-facetime-video:before {
+    content: ""
+}
+
+.glyphicon-picture:before {
+    content: ""
+}
+
+.glyphicon-map-marker:before {
+    content: ""
+}
+
+.glyphicon-adjust:before {
+    content: ""
+}
+
+.glyphicon-tint:before {
+    content: ""
+}
+
+.glyphicon-edit:before {
+    content: ""
+}
+
+.glyphicon-share:before {
+    content: ""
+}
+
+.glyphicon-check:before {
+    content: ""
+}
+
+.glyphicon-move:before {
+    content: ""
+}
+
+.glyphicon-step-backward:before,p-table p-paginator .p-paginator-bottom .p-paginator-first:before,p-table p-paginator .p-paginator-bottom .p-paginator-last.p-paginator-first:before,p-table p-paginator .p-paginator-bottom .p-paginator-next.p-paginator-first:before,p-table p-paginator .p-paginator-bottom .p-paginator-prev.p-paginator-first:before {
+    content: ""
+}
+
+.glyphicon-fast-backward:before {
+    content: ""
+}
+
+.glyphicon-backward:before {
+    content: ""
+}
+
+.glyphicon-play:before {
+    content: ""
+}
+
+.glyphicon-pause:before {
+    content: ""
+}
+
+.glyphicon-stop:before {
+    content: ""
+}
+
+.glyphicon-forward:before {
+    content: ""
+}
+
+.glyphicon-fast-forward:before {
+    content: ""
+}
+
+.glyphicon-step-forward:before,p-table p-paginator .p-paginator-bottom .p-paginator-first.p-paginator-last:before,p-table p-paginator .p-paginator-bottom .p-paginator-last:before,p-table p-paginator .p-paginator-bottom .p-paginator-next.p-paginator-last:before,p-table p-paginator .p-paginator-bottom .p-paginator-prev.p-paginator-last:before {
+    content: ""
+}
+
+.glyphicon-eject:before {
+    content: ""
+}
+
+.glyphicon-chevron-left:before,p-calendar .p-datepicker .p-datepicker-header .p-datepicker-prev:before,p-table p-paginator .p-paginator-bottom .p-paginator-first.p-paginator-prev:before,p-table p-paginator .p-paginator-bottom .p-paginator-last.p-paginator-prev:before,p-table p-paginator .p-paginator-bottom .p-paginator-next.p-paginator-prev:before,p-table p-paginator .p-paginator-bottom .p-paginator-prev:before {
+    content: ""
+}
+
+.glyphicon-chevron-right:before,p-calendar .p-datepicker .p-datepicker-header .p-datepicker-next:before,p-table p-paginator .p-paginator-bottom .p-paginator-first.p-paginator-next:before,p-table p-paginator .p-paginator-bottom .p-paginator-last.p-paginator-next:before,p-table p-paginator .p-paginator-bottom .p-paginator-next:before,p-table p-paginator .p-paginator-bottom .p-paginator-prev.p-paginator-next:before {
+    content: ""
+}
+
+.glyphicon-plus-sign:before {
+    content: ""
+}
+
+.glyphicon-minus-sign:before {
+    content: ""
+}
+
+.glyphicon-remove-sign:before {
+    content: ""
+}
+
+.glyphicon-ok-sign:before {
+    content: ""
+}
+
+.glyphicon-question-sign:before {
+    content: ""
+}
+
+.glyphicon-info-sign:before {
+    content: ""
+}
+
+.glyphicon-screenshot:before {
+    content: ""
+}
+
+.glyphicon-remove-circle:before {
+    content: ""
+}
+
+.glyphicon-ok-circle:before {
+    content: ""
+}
+
+.glyphicon-ban-circle:before {
+    content: ""
+}
+
+.glyphicon-arrow-left:before {
+    content: ""
+}
+
+.glyphicon-arrow-right:before {
+    content: ""
+}
+
+.glyphicon-arrow-up:before {
+    content: ""
+}
+
+.glyphicon-arrow-down:before {
+    content: ""
+}
+
+.glyphicon-share-alt:before {
+    content: ""
+}
+
+.glyphicon-resize-full:before {
+    content: ""
+}
+
+.glyphicon-resize-small:before {
+    content: ""
+}
+
+.glyphicon-exclamation-sign:before {
+    content: ""
+}
+
+.glyphicon-gift:before {
+    content: ""
+}
+
+.glyphicon-leaf:before {
+    content: ""
+}
+
+.glyphicon-fire:before {
+    content: ""
+}
+
+.glyphicon-eye-open:before {
+    content: ""
+}
+
+.glyphicon-eye-close:before {
+    content: ""
+}
+
+.glyphicon-warning-sign:before {
+    content: ""
+}
+
+.glyphicon-plane:before {
+    content: ""
+}
+
+.glyphicon-calendar:before {
+    content: ""
+}
+
+.glyphicon-random:before {
+    content: ""
+}
+
+.glyphicon-comment:before {
+    content: ""
+}
+
+.glyphicon-magnet:before {
+    content: ""
+}
+
+.glyphicon-chevron-up:before,p-calendar .p-datepicker .p-timepicker .pi.pi-chevron-up:before {
+    content: ""
+}
+
+.glyphicon-chevron-down:before,p-calendar .p-datepicker .p-timepicker .pi.pi-chevron-down:before {
+    content: ""
+}
+
+.glyphicon-retweet:before {
+    content: ""
+}
+
+.glyphicon-shopping-cart:before {
+    content: ""
+}
+
+.glyphicon-folder-close:before {
+    content: ""
+}
+
+.glyphicon-folder-open:before {
+    content: ""
+}
+
+.glyphicon-resize-vertical:before {
+    content: ""
+}
+
+.glyphicon-resize-horizontal:before {
+    content: ""
+}
+
+.glyphicon-hdd:before {
+    content: ""
+}
+
+.glyphicon-bullhorn:before {
+    content: ""
+}
+
+.glyphicon-bell:before {
+    content: ""
+}
+
+.glyphicon-certificate:before {
+    content: ""
+}
+
+.glyphicon-thumbs-up:before {
+    content: ""
+}
+
+.glyphicon-thumbs-down:before {
+    content: ""
+}
+
+.glyphicon-hand-right:before {
+    content: ""
+}
+
+.glyphicon-hand-left:before {
+    content: ""
+}
+
+.glyphicon-hand-up:before {
+    content: ""
+}
+
+.glyphicon-hand-down:before {
+    content: ""
+}
+
+.glyphicon-circle-arrow-right:before {
+    content: ""
+}
+
+.glyphicon-circle-arrow-left:before {
+    content: ""
+}
+
+.glyphicon-circle-arrow-up:before {
+    content: ""
+}
+
+.glyphicon-circle-arrow-down:before {
+    content: ""
+}
+
+.glyphicon-globe:before {
+    content: ""
+}
+
+.glyphicon-wrench:before {
+    content: ""
+}
+
+.glyphicon-tasks:before {
+    content: ""
+}
+
+.glyphicon-filter:before {
+    content: ""
+}
+
+.glyphicon-briefcase:before {
+    content: ""
+}
+
+.glyphicon-fullscreen:before {
+    content: ""
+}
+
+.glyphicon-dashboard:before {
+    content: ""
+}
+
+.glyphicon-paperclip:before {
+    content: ""
+}
+
+.glyphicon-heart-empty:before {
+    content: ""
+}
+
+.glyphicon-link:before {
+    content: ""
+}
+
+.glyphicon-phone:before {
+    content: ""
+}
+
+.glyphicon-pushpin:before {
+    content: ""
+}
+
+.glyphicon-usd:before {
+    content: ""
+}
+
+.glyphicon-gbp:before {
+    content: ""
+}
+
+.glyphicon-sort:before {
+    content: ""
+}
+
+.glyphicon-sort-by-alphabet:before {
+    content: ""
+}
+
+.glyphicon-sort-by-alphabet-alt:before {
+    content: ""
+}
+
+.glyphicon-sort-by-order:before {
+    content: ""
+}
+
+.glyphicon-sort-by-order-alt:before {
+    content: ""
+}
+
+.glyphicon-sort-by-attributes:before {
+    content: ""
+}
+
+.glyphicon-sort-by-attributes-alt:before {
+    content: ""
+}
+
+.glyphicon-unchecked:before {
+    content: ""
+}
+
+.glyphicon-expand:before {
+    content: ""
+}
+
+.glyphicon-collapse-down:before {
+    content: ""
+}
+
+.glyphicon-collapse-up:before {
+    content: ""
+}
+
+.glyphicon-log-in:before {
+    content: ""
+}
+
+.glyphicon-flash:before {
+    content: ""
+}
+
+.glyphicon-log-out:before {
+    content: ""
+}
+
+.glyphicon-new-window:before {
+    content: ""
+}
+
+.glyphicon-record:before {
+    content: ""
+}
+
+.glyphicon-save:before {
+    content: ""
+}
+
+.glyphicon-open:before {
+    content: ""
+}
+
+.glyphicon-saved:before {
+    content: ""
+}
+
+.glyphicon-import:before {
+    content: ""
+}
+
+.glyphicon-export:before {
+    content: ""
+}
+
+.glyphicon-send:before {
+    content: ""
+}
+
+.glyphicon-floppy-disk:before {
+    content: ""
+}
+
+.glyphicon-floppy-saved:before {
+    content: ""
+}
+
+.glyphicon-floppy-remove:before {
+    content: ""
+}
+
+.glyphicon-floppy-save:before {
+    content: ""
+}
+
+.glyphicon-floppy-open:before {
+    content: ""
+}
+
+.glyphicon-credit-card:before {
+    content: ""
+}
+
+.glyphicon-transfer:before {
+    content: ""
+}
+
+.glyphicon-cutlery:before {
+    content: ""
+}
+
+.glyphicon-header:before {
+    content: ""
+}
+
+.glyphicon-compressed:before {
+    content: ""
+}
+
+.glyphicon-earphone:before {
+    content: ""
+}
+
+.glyphicon-phone-alt:before {
+    content: ""
+}
+
+.glyphicon-tower:before {
+    content: ""
+}
+
+.glyphicon-stats:before {
+    content: ""
+}
+
+.glyphicon-sd-video:before {
+    content: ""
+}
+
+.glyphicon-hd-video:before {
+    content: ""
+}
+
+.glyphicon-subtitles:before {
+    content: ""
+}
+
+.glyphicon-sound-stereo:before {
+    content: ""
+}
+
+.glyphicon-sound-dolby:before {
+    content: ""
+}
+
+.glyphicon-sound-5-1:before {
+    content: ""
+}
+
+.glyphicon-sound-6-1:before {
+    content: ""
+}
+
+.glyphicon-sound-7-1:before {
+    content: ""
+}
+
+.glyphicon-copyright-mark:before {
+    content: ""
+}
+
+.glyphicon-registration-mark:before {
+    content: ""
+}
+
+.glyphicon-cloud-download:before {
+    content: ""
+}
+
+.glyphicon-cloud-upload:before {
+    content: ""
+}
+
+.glyphicon-tree-conifer:before {
+    content: ""
+}
+
+.glyphicon-tree-deciduous:before {
+    content: ""
+}
+
+.glyphicon-cd:before {
+    content: ""
+}
+
+.glyphicon-save-file:before {
+    content: ""
+}
+
+.glyphicon-open-file:before {
+    content: ""
+}
+
+.glyphicon-level-up:before {
+    content: ""
+}
+
+.glyphicon-copy:before {
+    content: ""
+}
+
+.glyphicon-paste:before {
+    content: ""
+}
+
+.glyphicon-alert:before {
+    content: ""
+}
+
+.glyphicon-equalizer:before {
+    content: ""
+}
+
+.glyphicon-king:before {
+    content: ""
+}
+
+.glyphicon-queen:before {
+    content: ""
+}
+
+.glyphicon-pawn:before {
+    content: ""
+}
+
+.glyphicon-bishop:before {
+    content: ""
+}
+
+.glyphicon-knight:before {
+    content: ""
+}
+
+.glyphicon-baby-formula:before {
+    content: ""
+}
+
+.glyphicon-tent:before {
+    content: "⛺"
+}
+
+.glyphicon-blackboard:before {
+    content: ""
+}
+
+.glyphicon-bed:before {
+    content: ""
+}
+
+.glyphicon-apple:before {
+    content: ""
+}
+
+.glyphicon-erase:before {
+    content: ""
+}
+
+.glyphicon-hourglass:before {
+    content: "⌛"
+}
+
+.glyphicon-lamp:before {
+    content: ""
+}
+
+.glyphicon-duplicate:before {
+    content: ""
+}
+
+.glyphicon-piggy-bank:before {
+    content: ""
+}
+
+.glyphicon-scissors:before {
+    content: ""
+}
+
+.glyphicon-bitcoin:before,.glyphicon-btc:before,.glyphicon-xbt:before {
+    content: ""
+}
+
+.glyphicon-jpy:before,.glyphicon-yen:before {
+    content: "¥"
+}
+
+.glyphicon-rub:before,.glyphicon-ruble:before {
+    content: "₽"
+}
+
+.glyphicon-scale:before {
+    content: ""
+}
+
+.glyphicon-ice-lolly:before {
+    content: ""
+}
+
+.glyphicon-ice-lolly-tasted:before {
+    content: ""
+}
+
+.glyphicon-education:before {
+    content: ""
+}
+
+.glyphicon-option-horizontal:before {
+    content: ""
+}
+
+.glyphicon-option-vertical:before {
+    content: ""
+}
+
+.glyphicon-menu-hamburger:before {
+    content: ""
+}
+
+.glyphicon-modal-window:before {
+    content: ""
+}
+
+.glyphicon-oil:before {
+    content: ""
+}
+
+.glyphicon-grain:before {
+    content: ""
+}
+
+.glyphicon-sunglasses:before {
+    content: ""
+}
+
+.glyphicon-text-size:before {
+    content: ""
+}
+
+.glyphicon-text-color:before {
+    content: ""
+}
+
+.glyphicon-text-background:before {
+    content: ""
+}
+
+.glyphicon-object-align-top:before {
+    content: ""
+}
+
+.glyphicon-object-align-bottom:before {
+    content: ""
+}
+
+.glyphicon-object-align-horizontal:before {
+    content: ""
+}
+
+.glyphicon-object-align-left:before {
+    content: ""
+}
+
+.glyphicon-object-align-vertical:before {
+    content: ""
+}
+
+.glyphicon-object-align-right:before {
+    content: ""
+}
+
+.glyphicon-triangle-right:before {
+    content: ""
+}
+
+.glyphicon-triangle-left:before {
+    content: ""
+}
+
+.glyphicon-triangle-bottom:before,p-table th.p-highlight .pi.pi-sort-amount-down:before {
+    content: ""
+}
+
+.glyphicon-triangle-top:before,p-table th.p-highlight .pi.pi-sort-amount-up-alt:before {
+    content: ""
+}
+
+.glyphicon-console:before {
+    content: ""
+}
+
+.glyphicon-superscript:before {
+    content: ""
+}
+
+.glyphicon-subscript:before {
+    content: ""
+}
+
+.glyphicon-menu-left:before {
+    content: ""
+}
+
+.glyphicon-menu-right:before {
+    content: ""
+}
+
+.glyphicon-menu-down:before {
+    content: ""
+}
+
+.glyphicon-menu-up:before {
+    content: ""
+}
+
+.glyphicon-refresh-animate {
+    animation: spin .7s linear infinite
+}
+
+.glyphicon-duplicate {
+    font-size: 70%
+}
+
+.flex-auto {
+    flex: auto
+}
+
+.c-hand {
+    cursor: pointer
+}
+
+@keyframes spin {
+    0% {
+        transform: scale(1) rotate(0deg)
+    }
+
+    to {
+        transform: scale(1) rotate(1turn)
+    }
+}
+
+.dropdown,.dropup {
+    z-index: 17000!important
+}
+
+.list-overflow-menu,.parent-entry {
+    z-index: 12599!important
+}
+
+.action-dropdown,.btn-group,.column-toggle,.dropdown-root,.input-group-prepend {
+    z-index: inherit!important
+}
+
+.btn-group>.btn:not(:first-child) {
+    border-top-left-radius: 0!important;
+    border-bottom-left-radius: 0!important
+}
+
+.dropdown-menu {
+    z-index: 17001!important;
+    border-radius: 3px;
+    box-shadow: 0 2px 2px 0 #00000024,0 1px 5px 0 #0000001f,0 3px 1px -2px #0003;
+    font-size: 15px
+}
+
+@supports (padding-inline-start: 1rem) {
+    .dropdown-menu .dropdown-header {
+        padding-inline-start:1rem}
+}
+
+@supports not (padding-inline-start: 1rem) {
+    .dropdown-menu .dropdown-header {
+        padding-left: 1rem
+    }
+}
+
+.dropdown-menu .dropdown-item {
+    padding: 3px 15px
+}
+
+.dropdown-menu .dropdown-item.active {
+    color: var(--mainBackgroundColor)!important;
+    background-color: var(--mainHoverColor);
+    opacity: .9
+}
+
+.dropdown-menu .dropdown-item:active {
+    color: var(--mainForegroundColor)!important
+}
+
+.dropdown-menu .dropdown-item:after {
+    display: none
+}
+
+.dropdown-menu button:active,.dropdown-menu button:focus,.dropdown-menu button:hover {
+    text-decoration: none!important;
+    outline: none!important
+}
+
+.dropdown-menu a {
+    color: #000!important
+}
+
+.dropdown-menu a:active,.dropdown-menu a:focus,.dropdown-menu a:hover {
+    text-decoration: none!important;
+    outline: none!important
+}
+
+.badge {
+    line-height: 1.1
+}
+
+@media screen and (min-width: 768px) {
+    .modal:before {
+        vertical-align:middle;
+        content: " ";
+        height: 100%
+    }
+
+    .modal-dialog {
+        text-align: start
+    }
+
+    .modal-dialog:not(.modal-lg):not(.modal-xl) {
+        min-width: 500px;
+        width: 40vw;
+        max-width: 900px
+    }
+}
+
+.modal {
+    text-align: center
+}
+
+.modal .modal-content {
+    background-color: var(--mainBackgroundColor);
+    word-break: break-word
+}
+
+.modal .modal-header {
+    border-bottom: 0;
+    margin-bottom: 5px
+}
+
+.modal .modal-header .modal-title {
+    font-size: 20px;
+    font-weight: 600
+}
+
+.modal .modal-header my-global-icon {
+    width: 22px;
+    height: 22px;
+    position: relative;
+    top: 5px;
+    float: right;
+    margin: 0;
+    padding: 0;
+    opacity: .5
+}
+
+.modal .modal-header my-global-icon,.modal .modal-header my-global-icon[iconName=cross] {
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+    cursor: pointer
+}
+
+.modal .modal-header my-global-icon[iconName=cross] {
+    width: 16px;
+    height: 16px;
+    top: -3px
+}
+
+.modal .inputs {
+    margin-bottom: 0;
+    text-align: end
+}
+
+@supports (margin-inline-start: 10px) {
+    .modal .inputs>.peertube-button:not(:first-child) {
+        margin-inline-start:10px}
+}
+
+@supports not (margin-inline-start: 10px) {
+    .modal .inputs>.peertube-button:not(:first-child) {
+        margin-left: 10px
+    }
+}
+
+.modal-open {
+    overflow-y: scroll!important;
+    width: 100vw
+}
+
+@media (hover: none) and (pointer: coarse) {
+    .menu-open,.modal-open {
+        overflow:hidden!important
+    }
+
+    .menu-open .main-col:before {
+        background-color: #000;
+        width: 100vw;
+        height: 100vh;
+        opacity: .75;
+        content: "";
+        display: block;
+        position: fixed;
+        z-index: 12550
+    }
+}
+
+.nav .nav-link {
+    display: flex!important;
+    align-items: center;
+    height: 30px!important;
+    padding: 10px 15px!important
+}
+
+.nav.nav-pills {
+    font-size: 16px!important;
+    font-weight: 600!important
+}
+
+.nav.nav-pills .nav-link {
+    opacity: .6!important
+}
+
+.nav.nav-pills .nav-link.active,.nav.nav-pills .nav-link:active,.nav.nav-pills .nav-link:focus,.nav.nav-pills .nav-link:hover {
+    opacity: 1!important
+}
+
+.nav.nav-pills a {
+    color: var(--mainForegroundColor)
+}
+
+.nav.nav-pills a:active,.nav.nav-pills a:focus,.nav.nav-pills a:hover {
+    text-decoration: none!important;
+    outline: none!important
+}
+
+.nav-tabs .nav-link {
+    color: var(--mainForegroundColor);
+    font-weight: 600;
+    border: 0;
+    border-bottom: 2px solid #0000;
+    opacity: .6
+}
+
+.nav-tabs .nav-link:active,.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover {
+    text-decoration: none!important;
+    outline: none!important
+}
+
+.nav-tabs .nav-link.active {
+    color: var(--mainForegroundColor);
+    background-color: var(--mainBackgroundColor)!important;
+    border-bottom-color: var(--mainColor)
+}
+
+.nav-tabs .nav-link.active,.nav-tabs .nav-link:active,.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover {
+    opacity: 1
+}
+
+.card {
+    background-color: var(--mainBackgroundColor);
+    border-color: #dee2e6
+}
+
+.collapse-transition {
+    transition: max-height .3s;
+    display: block!important;
+    overflow: hidden!important;
+    max-height: 0
+}
+
+.collapse-transition.show {
+    max-height: 1500px;
+    overflow: inherit!important
+}
+
+.dropdown-divider {
+    margin: .3rem 0
+}
+
+ngb-modal-backdrop {
+    z-index: 15999!important
+}
+
+ngb-modal-window {
+    z-index: 16000!important
+}
+
+ngb-popover-window {
+    z-index: 13000!important
+}
+
+ngb-tooltip-window {
+    z-index: 14000!important
+}
+
+.btn-outline-secondary {
+    border-color: #ced4da
+}
+
+.btn-outline-secondary:focus,.btn-outline-secondary:focus-within,.btn-outline-secondary:hover {
+    color: #fff;
+    background-color: #6c757d
+}
+
+.btn-outline-tertiary {
+    color: var(--secondaryColor);
+    border-color: var(--secondaryColor)
+}
+
+.btn-outline-tertiary:focus,.btn-outline-tertiary:focus-within,.btn-outline-tertiary:hover {
+    color: var(--mainBackgroundColor);
+    background-color: var(--secondaryColor)
+}
+
+.form-control {
+    font-size: 15px;
+    color: var(--mainForegroundColor);
+    background-color: var(--inputBackgroundColor);
+    outline: none
+}
+
+.form-control:focus,.form-control:focus-within {
+    box-shadow: 0 0 0 .2rem var(--mainColorLightest)
+}
+
+.form-control:focus-within.input-error,.form-control:focus.input-error {
+    box-shadow: 0 0 0 .2rem #ff000040
+}
+
+.input-group>.form-control {
+    flex: initial
+}
+
+.input-group input.form-control {
+    width: unset!important;
+    flex-grow: 1
+}
+
+.input-group .input-group-prepend+input {
+    border-top-left-radius: 0!important;
+    border-bottom-left-radius: 0!important
+}
+
+.has-feedback.has-clear {
+    position: relative
+}
+
+@supports (padding-inline-end: 1.5rem !important) {
+    .has-feedback.has-clear input {
+        padding-inline-end:1.5rem!important}
+}
+
+@supports not (padding-inline-end: 1.5rem !important) {
+    .has-feedback.has-clear input {
+        padding-right: 1.5rem!important
+    }
+}
+
+.has-feedback.has-clear .form-control-clear {
+    color: #0006;
+    pointer-events: all;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: .5rem;
+    height: 95%;
+    font-size: 14px
+}
+
+.has-feedback.has-clear .form-control-clear:hover {
+    color: #000000b3;
+    cursor: pointer
+}
+
+.has-feedback.has-clear input:placeholder-shown+.form-control-clear {
+    display: none
+}
+
+.callout {
+    padding: 1.25rem;
+    border: 1px solid #eee;
+    border-radius: .25rem
+}
+
+.callout>label {
+    position: relative;
+    top: -5px;
+    left: -10px;
+    color: #6c757d!important
+}
+
+.callout:not(.callout-light) {
+    border-left-width: .25rem
+}
+
+.callout.callout-info {
+    border-left-color: var(--mainColorLightest);
+    border-color: var(--mainColorLightest) var(--mainColorLightest) var(--mainColorLightest) var(--mainColor)
+}
+
+@supports (margin-inline-start: 0) {
+    .ml-0 {
+        margin-inline-start:0}
+}
+
+@supports not (margin-inline-start: 0) {
+    .ml-0 {
+        margin-left: 0
+    }
+}
+
+@supports (margin-inline-end: 0) {
+    .mr-0 {
+        margin-inline-end:0}
+}
+
+@supports not (margin-inline-end: 0) {
+    .mr-0 {
+        margin-right: 0
+    }
+}
+
+@supports (padding-inline-start: 0) {
+    .pl-0 {
+        padding-inline-start:0}
+}
+
+@supports not (padding-inline-start: 0) {
+    .pl-0 {
+        padding-left: 0
+    }
+}
+
+@supports (padding-inline-end: 0) {
+    .pr-0 {
+        padding-inline-end:0}
+}
+
+@supports not (padding-inline-end: 0) {
+    .pr-0 {
+        padding-right: 0
+    }
+}
+
+@supports (margin-inline-start: 0.25rem) {
+    .ml-1 {
+        margin-inline-start:.25rem}
+}
+
+@supports not (margin-inline-start: 0.25rem) {
+    .ml-1 {
+        margin-left: .25rem
+    }
+}
+
+@supports (margin-inline-end: 0.25rem) {
+    .mr-1 {
+        margin-inline-end:.25rem}
+}
+
+@supports not (margin-inline-end: 0.25rem) {
+    .mr-1 {
+        margin-right: .25rem
+    }
+}
+
+@supports (padding-inline-start: 0.25rem) {
+    .pl-1 {
+        padding-inline-start:.25rem}
+}
+
+@supports not (padding-inline-start: 0.25rem) {
+    .pl-1 {
+        padding-left: .25rem
+    }
+}
+
+@supports (padding-inline-end: 0.25rem) {
+    .pr-1 {
+        padding-inline-end:.25rem}
+}
+
+@supports not (padding-inline-end: 0.25rem) {
+    .pr-1 {
+        padding-right: .25rem
+    }
+}
+
+@supports (margin-inline-start: 0.5rem) {
+    .ml-2 {
+        margin-inline-start:.5rem}
+}
+
+@supports not (margin-inline-start: 0.5rem) {
+    .ml-2 {
+        margin-left: .5rem
+    }
+}
+
+@supports (margin-inline-end: 0.5rem) {
+    .mr-2 {
+        margin-inline-end:.5rem}
+}
+
+@supports not (margin-inline-end: 0.5rem) {
+    .mr-2 {
+        margin-right: .5rem
+    }
+}
+
+@supports (padding-inline-start: 0.5rem) {
+    .pl-2 {
+        padding-inline-start:.5rem}
+}
+
+@supports not (padding-inline-start: 0.5rem) {
+    .pl-2 {
+        padding-left: .5rem
+    }
+}
+
+@supports (padding-inline-end: 0.5rem) {
+    .pr-2 {
+        padding-inline-end:.5rem}
+}
+
+@supports not (padding-inline-end: 0.5rem) {
+    .pr-2 {
+        padding-right: .5rem
+    }
+}
+
+@supports (margin-inline-start: 1rem) {
+    .ml-3 {
+        margin-inline-start:1rem}
+}
+
+@supports not (margin-inline-start: 1rem) {
+    .ml-3 {
+        margin-left: 1rem
+    }
+}
+
+@supports (margin-inline-end: 1rem) {
+    .mr-3 {
+        margin-inline-end:1rem}
+}
+
+@supports not (margin-inline-end: 1rem) {
+    .mr-3 {
+        margin-right: 1rem
+    }
+}
+
+@supports (padding-inline-start: 1rem) {
+    .pl-3 {
+        padding-inline-start:1rem}
+}
+
+@supports not (padding-inline-start: 1rem) {
+    .pl-3 {
+        padding-left: 1rem
+    }
+}
+
+@supports (padding-inline-end: 1rem) {
+    .pr-3 {
+        padding-inline-end:1rem}
+}
+
+@supports not (padding-inline-end: 1rem) {
+    .pr-3 {
+        padding-right: 1rem
+    }
+}
+
+@supports (margin-inline-start: 1.5rem) {
+    .ml-4 {
+        margin-inline-start:1.5rem}
+}
+
+@supports not (margin-inline-start: 1.5rem) {
+    .ml-4 {
+        margin-left: 1.5rem
+    }
+}
+
+@supports (margin-inline-end: 1.5rem) {
+    .mr-4 {
+        margin-inline-end:1.5rem}
+}
+
+@supports not (margin-inline-end: 1.5rem) {
+    .mr-4 {
+        margin-right: 1.5rem
+    }
+}
+
+@supports (padding-inline-start: 1.5rem) {
+    .pl-4 {
+        padding-inline-start:1.5rem}
+}
+
+@supports not (padding-inline-start: 1.5rem) {
+    .pl-4 {
+        padding-left: 1.5rem
+    }
+}
+
+@supports (padding-inline-end: 1.5rem) {
+    .pr-4 {
+        padding-inline-end:1.5rem}
+}
+
+@supports not (padding-inline-end: 1.5rem) {
+    .pr-4 {
+        padding-right: 1.5rem
+    }
+}
+
+@supports (margin-inline-start: 3rem) {
+    .ml-5 {
+        margin-inline-start:3rem}
+}
+
+@supports not (margin-inline-start: 3rem) {
+    .ml-5 {
+        margin-left: 3rem
+    }
+}
+
+@supports (margin-inline-end: 3rem) {
+    .mr-5 {
+        margin-inline-end:3rem}
+}
+
+@supports not (margin-inline-end: 3rem) {
+    .mr-5 {
+        margin-right: 3rem
+    }
+}
+
+@supports (padding-inline-start: 3rem) {
+    .pl-5 {
+        padding-inline-start:3rem}
+}
+
+@supports not (padding-inline-start: 3rem) {
+    .pl-5 {
+        padding-left: 3rem
+    }
+}
+
+@supports (padding-inline-end: 3rem) {
+    .pr-5 {
+        padding-inline-end:3rem}
+}
+
+@supports not (padding-inline-end: 3rem) {
+    .pr-5 {
+        padding-right: 3rem
+    }
+}
+
+.p-component,.p-component * {
+    box-sizing: border-box
+}
+
+.p-hidden {
+    display: none
+}
+
+.p-hidden-space {
+    visibility: hidden
+}
+
+.p-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px
+}
+
+.p-hidden-accessible input,.p-hidden-accessible select {
+    transform: scale(0)
+}
+
+.p-reset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    text-decoration: none;
+    font-size: 100%;
+    list-style: none
+}
+
+.p-disabled,.p-disabled * {
+    cursor: default!important;
+    pointer-events: none
+}
+
+.p-component-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%
+}
+
+.p-overflow-hidden {
+    overflow: hidden
+}
+
+.p-unselectable-text {
+    -webkit-user-select: none;
+    user-select: none
+}
+
+.p-scrollbar-measure {
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+    position: absolute;
+    top: -9999px
+}
+
+@keyframes p-fadein {
+    0% {
+        opacity: 0
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+button,input[type=button],input[type=file]::-webkit-file-upload-button,input[type=reset],input[type=submit] {
+    border-radius: 0
+}
+
+.p-link {
+    text-align: left;
+    background-color: initial;
+    margin: 0;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none
+}
+
+.p-sr-only {
+    border: 0;
+    clip: rect(1px,1px,1px,1px);
+    -webkit-clip-path: inset(50%);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal!important
+}
+
+.p-connected-overlay {
+    opacity: 0;
+    transform: scaleY(.8);
+    transition: transform .12s cubic-bezier(0,0,.2,1),opacity .12s cubic-bezier(0,0,.2,1)
+}
+
+.p-connected-overlay-visible {
+    opacity: 1;
+    transform: scaleY(1)
+}
+
+.p-connected-overlay-hidden {
+    opacity: 0;
+    transform: scaleY(1);
+    transition: opacity .1s linear
+}
+
+.p-toggleable-content.ng-animating {
+    overflow: hidden
+}
+
+.p-badge {
+    display: inline-block;
+    border-radius: 10px;
+    text-align: center;
+    padding: 0 .5rem
+}
+
+.p-overlay-badge {
+    position: relative
+}
+
+.p-overlay-badge .p-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%,-50%);
+    transform-origin: 100% 0;
+    margin: 0
+}
+
+.p-badge-dot {
+    width: .5rem;
+    min-width: .5rem;
+    height: .5rem
+}
+
+.p-badge-dot,.p-badge-no-gutter {
+    border-radius: 50%;
+    padding: 0
+}
+
+.p-button {
+    margin: 0;
+    display: inline-flex;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    align-items: center;
+    vertical-align: bottom;
+    text-align: center;
+    overflow: hidden;
+    position: relative
+}
+
+.p-button-label {
+    flex: 1 1 auto
+}
+
+.p-button-icon-right {
+    order: 1
+}
+
+.p-button:disabled {
+    cursor: default
+}
+
+.p-button-icon-only {
+    justify-content: center
+}
+
+.p-button-icon-only .p-button-label {
+    visibility: hidden;
+    width: 0;
+    flex: 0 0 auto
+}
+
+.p-button-vertical {
+    flex-direction: column
+}
+
+.p-button-icon-bottom {
+    order: 2
+}
+
+.p-buttonset .p-button {
+    margin: 0
+}
+
+.p-buttonset .p-button:not(:last-child) {
+    border-right: 0
+}
+
+.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
+    border-radius: 0
+}
+
+.p-buttonset .p-button:first-of-type {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.p-buttonset .p-button:last-of-type {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.p-buttonset .p-button:focus {
+    position: relative;
+    z-index: 1
+}
+
+.p-button-label {
+    transition: all .2s
+}
+
+.p-checkbox {
+    display: inline-flex;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    vertical-align: bottom
+}
+
+.p-checkbox-disabled {
+    cursor: default!important;
+    pointer-events: none
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center
+}
+
+p-checkbox {
+    display: inline-flex;
+    vertical-align: bottom;
+    align-items: center
+}
+
+.p-checkbox-label {
+    line-height: 1
+}
+
+.p-colorpicker-panel .p-colorpicker-color {
+    background: #0000 url(color.6441e63a57ccc5105bad.png) no-repeat 0 0
+}
+
+.p-colorpicker-panel .p-colorpicker-hue {
+    background: #0000 url(hue.f8505bd4d6f3e3aa435b.png) no-repeat 0 0
+}
+
+.p-inputtext {
+    margin: 0
+}
+
+.p-fluid .p-inputtext {
+    width: 100%
+}
+
+.p-inputgroup {
+    display: flex;
+    align-items: stretch;
+    width: 100%
+}
+
+.p-inputgroup-addon {
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+
+.p-inputgroup .p-float-label {
+    display: flex;
+    align-items: stretch;
+    width: 100%
+}
+
+.p-fluid .p-inputgroup .p-inputtext,.p-inputgroup .p-inputtext {
+    flex: 1 1 auto;
+    width: 1%
+}
+
+.p-float-label {
+    display: block;
+    position: relative
+}
+
+.p-float-label label {
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -.5rem;
+    transition-property: all;
+    transition-timing-function: ease;
+    line-height: 1
+}
+
+.p-float-label textarea~label {
+    top: 1rem
+}
+
+.p-float-label .p-inputwrapper-filled~label,.p-float-label .p-inputwrapper-focus~label,.p-float-label input.p-filled~label,.p-float-label input:focus~label,.p-float-label textarea.p-filled~label,.p-float-label textarea:focus~label {
+    top: -.75rem;
+    font-size: 12px
+}
+
+.p-float-label .input:-webkit-autofill~label {
+    top: -20px;
+    font-size: 12px
+}
+
+.p-input-icon-left,.p-input-icon-right {
+    position: relative;
+    display: inline-block
+}
+
+.p-input-icon-left>i,.p-input-icon-right>i {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem
+}
+
+.p-fluid .p-input-icon-left,.p-fluid .p-input-icon-right {
+    display: block;
+    width: 100%
+}
+
+.p-inputtextarea-resizable {
+    overflow: hidden;
+    resize: none
+}
+
+.p-fluid .p-inputtextarea {
+    width: 100%
+}
+
+.p-password {
+    position: relative;
+    display: inline-flex
+}
+
+.p-password-panel {
+    position: absolute;
+    top: 0;
+    left: 0
+}
+
+.p-password .p-password-panel {
+    min-width: 100%
+}
+
+.p-password-meter {
+    height: 10px
+}
+
+.p-password-strength {
+    height: 100%;
+    width: 0;
+    transition: width 1s ease-in-out
+}
+
+.p-fluid .p-password {
+    display: flex
+}
+
+.p-radiobutton {
+    display: inline-flex;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    vertical-align: bottom
+}
+
+.p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center
+}
+
+.p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(.1);
+    border-radius: 50%;
+    visibility: hidden
+}
+
+.p-radiobutton-box.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1);
+    visibility: visible
+}
+
+p-radiobutton {
+    display: inline-flex;
+    vertical-align: bottom;
+    align-items: center
+}
+
+.p-radiobutton-label {
+    line-height: 1
+}
+
+.p-ripple {
+    overflow: hidden;
+    position: relative
+}
+
+.p-ink {
+    display: block;
+    position: absolute;
+    background: #ffffff80;
+    border-radius: 100%;
+    transform: scale(0)
+}
+
+.p-ink-active {
+    animation: ripple .4s linear
+}
+
+.p-ripple-disabled .p-ink {
+    display: none!important
+}
+
+@keyframes ripple {
+    to {
+        opacity: 0;
+        transform: scale(2.5)
+    }
+}
+
+.p-tooltip {
+    position: absolute;
+    display: none;
+    padding: .25em .5rem;
+    max-width: 12.5rem
+}
+
+.p-tooltip.p-tooltip-left,.p-tooltip.p-tooltip-right {
+    padding: 0 .25rem
+}
+
+.p-tooltip.p-tooltip-bottom,.p-tooltip.p-tooltip-top {
+    padding: .25em 0
+}
+
+.p-tooltip .p-tooltip-text {
+    white-space: pre-line
+}
+
+.p-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: #0000;
+    border-style: solid
+}
+
+.p-tooltip-right .p-tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -.25rem;
+    border-width: .25em .25em .25em 0
+}
+
+.p-tooltip-left .p-tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -.25rem;
+    border-width: .25em 0 .25em .25rem
+}
+
+.p-tooltip.p-tooltip-top {
+    padding: .25em 0
+}
+
+.p-tooltip-top .p-tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -.25rem;
+    border-width: .25em .25em 0
+}
+
+.p-tooltip-bottom .p-tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -.25rem;
+    border-width: 0 .25em .25rem
+}
+
+input[type=button] {
+    border-radius: inherit
+}
+
+p-table .p-datatable-header .caption {
+    margin-bottom: 15px
+}
+
+body .p-disabled {
+    opacity: .5
+}
+
+body .p-checkbox {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    width: 20px;
+    height: 20px
+}
+
+body .p-checkbox .p-checkbox-box {
+    border: 1px solid #a6a6a6;
+    background-color: #fff;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    border-radius: 3px;
+    transition: background-color .2s,border-color .2s,box-shadow .2s
+}
+
+body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
+    border-color: #212121
+}
+
+body .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    overflow: hidden;
+    position: relative;
+    font-size: 18px
+}
+
+body .p-paginator {
+    background-color: #f4f4f4;
+    border: 1px solid #c8c8c8;
+    padding: 0
+}
+
+body .p-paginator .p-paginator-first,body .p-paginator .p-paginator-last,body .p-paginator .p-paginator-next,body .p-paginator .p-paginator-prev {
+    color: #848484;
+    height: 2.286em;
+    min-width: 2.286em;
+    border: 0;
+    line-height: 2.286em;
+    padding: 0;
+    margin: 0;
+    vertical-align: top;
+    transition: box-shadow .2s;
+    border-radius: 0
+}
+
+body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover,body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover {
+    background-color: #e0e0e0;
+    color: #333
+}
+
+body .p-paginator .p-paginator-first:focus,body .p-paginator .p-paginator-last:focus,body .p-paginator .p-paginator-next:focus,body .p-paginator .p-paginator-prev:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 .2em var(--mainColorLightest)
+}
+
+body .p-paginator .p-paginator-current {
+    color: #333;
+    height: 2.286em;
+    min-width: 2.286em;
+    line-height: 2.286em
+}
+
+body .p-paginator .p-dropdown {
+    border: 0
+}
+
+body .p-paginator .p-dropdown .p-dropdown-label,body .p-paginator .p-dropdown .p-dropdown-trigger {
+    color: #848484
+}
+
+body .p-paginator .p-dropdown:hover .p-dropdown-label,body .p-paginator .p-dropdown:hover .p-dropdown-trigger {
+    color: #333
+}
+
+body .p-paginator .p-paginator-first:before,body .p-paginator .p-paginator-last:before,body .p-paginator .p-paginator-next:before,body .p-paginator .p-paginator-prev:before {
+    position: relative;
+    top: 1px
+}
+
+body .p-paginator .p-paginator-pages {
+    vertical-align: top;
+    display: inline-block;
+    padding: 0
+}
+
+body .p-paginator .p-paginator-pages .p-paginator-page {
+    color: #848484;
+    height: 2.286em;
+    min-width: 2.286em;
+    border: 0;
+    line-height: 2.286em;
+    padding: 0;
+    margin: 0;
+    vertical-align: top;
+    transition: box-shadow .2s;
+    border-radius: 0
+}
+
+body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background-color: #e0e0e0;
+    color: #333
+}
+
+body .p-paginator .p-paginator-pages .p-paginator-page:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 .2em var(--mainColorLightest)
+}
+
+body .p-paginator .p-dropdown {
+    height: 2.286em;
+    min-width: auto
+}
+
+@supports (margin-inline-start: 0.5em) {
+    body .p-paginator .p-dropdown {
+        margin-inline-start:.5em}
+}
+
+@supports not (margin-inline-start: 0.5em) {
+    body .p-paginator .p-dropdown {
+        margin-left: .5em
+    }
+}
+
+body .p-dropdown {
+    background: #fff;
+    border: 1px solid #a6a6a6;
+    transition: border-color .2s,box-shadow .2s
+}
+
+body .p-dropdown:not(.p-disabled):hover {
+    border-color: #212121
+}
+
+body .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 .2em var(--mainColorLightest);
+    border-color: var(--mainColor)
+}
+
+@supports (padding-inline-end: 2em) {
+    body .p-dropdown .p-dropdown-label {
+        padding-inline-end:2em}
+}
+
+@supports not (padding-inline-end: 2em) {
+    body .p-dropdown .p-dropdown-label {
+        padding-right: 2em
+    }
+}
+
+body .p-dropdown .p-dropdown-trigger {
+    background-color: #fff;
+    width: 2em;
+    line-height: 2em;
+    text-align: center;
+    padding: 0;
+    color: #848484
+}
+
+body .p-dropdown .p-dropdown-clear-icon {
+    color: #848484
+}
+
+@supports (padding-inline-end: 4em) {
+    body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+        padding-inline-end:4em}
+}
+
+@supports not (padding-inline-end: 4em) {
+    body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+        padding-right: 4em
+    }
+}
+
+body .p-dropdown-panel {
+    padding: 0;
+    border: 1px solid #c8c8c8;
+    background-color: #fff;
+    box-shadow: 0 3px 6px 0 #00000029
+}
+
+body .p-dropdown-panel .p-dropdown-filter-container {
+    padding: .429em .857em;
+    border-bottom: 1px solid #eaeaea;
+    color: #333;
+    background-color: #fff;
+    margin: 0
+}
+
+body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
+    width: 100%
+}
+
+@supports (padding-inline-end: 2em) {
+    body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
+        padding-inline-end:2em}
+}
+
+@supports not (padding-inline-end: 2em) {
+    body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
+        padding-right: 2em
+    }
+}
+
+body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
+    top: 50%;
+    margin-top: -.5em;
+    right: 1.357em;
+    color: var(--mainColor)
+}
+
+body .p-dropdown-panel .p-dropdown-items {
+    padding: 0
+}
+
+body .p-dropdown-panel .p-dropdown-items .p-dropdown-item,body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: .429em .857em;
+    border: 0;
+    color: #333;
+    background-color: initial;
+    border-radius: 0
+}
+
+body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight,body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #fff;
+    background-color: var(--mainColor)
+}
+
+body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover,body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #333;
+    background-color: #eaeaea
+}
+
+body p-dropdown.ng-dirty.ng-invalid>.p-dropdown {
+    border: 1px solid #a80000
+}
+
+body .p-toast .p-toast-message {
+    box-shadow: 0 3px 6px 0 #00000029;
+    margin: 0 0 1em
+}
+
+body .p-datepicker {
+    padding: .857em;
+    min-width: 20em;
+    background-color: #fff;
+    color: #333;
+    border: 1px solid #a6a6a6
+}
+
+body .p-datepicker:not(.p-datepicker-inline) {
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 3px 6px 0 #00000029
+}
+
+body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:focus,body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 .2em var(--mainColorLightest)
+}
+
+body .p-datepicker:not(.p-disabled) .p-monthpicker a.p-monthpicker-month:not(.p-highlight):hover,body .p-datepicker:not(.p-disabled) table td a:not(.p-highlight):not(.p-highlight):hover {
+    background-color: #eaeaea
+}
+
+body .p-datepicker .p-datepicker-header {
+    padding: .429em .857em;
+    background-color: #fff;
+    color: #333;
+    border-radius: 0
+}
+
+body .p-datepicker .p-datepicker-header .p-datepicker-next,body .p-datepicker .p-datepicker-header .p-datepicker-prev {
+    cursor: pointer;
+    top: 0;
+    color: #a6a6a6;
+    transition: color .2s,box-shadow .2s
+}
+
+body .p-datepicker .p-datepicker-header .p-datepicker-title {
+    margin: 0;
+    padding: 0;
+    line-height: 1
+}
+
+body .p-datepicker .p-datepicker-header .p-datepicker-title select {
+    margin-top: -.35em;
+    margin-bottom: 0;
+    transition: color .2s,box-shadow .2s
+}
+
+body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 .2em var(--mainColorLightest)
+}
+
+body .p-datepicker table {
+    font-size: 14px;
+    margin: .857em 0 0
+}
+
+body .p-datepicker table th {
+    padding: .5em
+}
+
+body .p-datepicker table th.p-datepicker-weekheader {
+    border-right: 1px solid #a6a6a6
+}
+
+body .p-datepicker table td {
+    padding: .5em
+}
+
+body .p-datepicker table td>a,body .p-datepicker table td>span {
+    display: block;
+    text-align: center;
+    color: #333;
+    padding: .5em;
+    transition: box-shadow .2s;
+    border-radius: 3px
+}
+
+body .p-datepicker table td>a.p-highlight,body .p-datepicker table td>span.p-highlight {
+    color: #fff;
+    background-color: var(--mainColor)
+}
+
+body .p-datepicker table td>a {
+    cursor: pointer
+}
+
+body .p-datepicker table td>a:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 .2em var(--mainColorLightest)
+}
+
+body .p-datepicker table td.p-datepicker-today>a,body .p-datepicker table td.p-datepicker-today>span {
+    background-color: #d0d0d0;
+    color: #333
+}
+
+body .p-datepicker table td.p-datepicker-today>a.p-highlight,body .p-datepicker table td.p-datepicker-today>span.p-highlight {
+    color: #fff;
+    background-color: var(--mainColor)
+}
+
+body .p-datepicker table td.p-datepicker-weeknumber {
+    border-right: 1px solid #a6a6a6
+}
+
+body .p-datepicker .p-datepicker-buttonbar {
+    border-top: 1px solid #d8dae2
+}
+
+body .p-datepicker .p-timepicker {
+    border: 0;
+    border-top: 1px solid #d8dae2;
+    padding: .857em
+}
+
+body .p-datepicker .p-timepicker a {
+    color: #333;
+    font-size: 1.286em
+}
+
+body .p-datepicker .p-timepicker a:hover {
+    color: var(--mainColor)
+}
+
+body .p-datepicker .p-timepicker span {
+    font-size: 1.286em
+}
+
+body .p-datepicker .p-monthpicker .p-monthpicker-month {
+    color: #333
+}
+
+body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #fff;
+    background-color: var(--mainColor)
+}
+
+body .p-datepicker.p-datepicker-timeonly {
+    padding: 0
+}
+
+body .p-datepicker.p-datepicker-timeonly .p-timepicker {
+    border-top: 0
+}
+
+body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-right: 1px solid #d8dae2;
+    padding-top: 0;
+    padding-bottom: 0
+}
+
+@supports (padding-inline-end: 0.857em) {
+    body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+        padding-inline-end:.857em}
+}
+
+@supports not (padding-inline-end: 0.857em) {
+    body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+        padding-right: .857em
+    }
+}
+
+@supports (padding-inline-start: 0.857em) {
+    body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+        padding-inline-start:.857em}
+}
+
+@supports not (padding-inline-start: 0.857em) {
+    body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+        padding-left: .857em
+    }
+}
+
+@supports (padding-inline-start: 0) {
+    body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+        padding-inline-start:0}
+}
+
+@supports not (padding-inline-start: 0) {
+    body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+        padding-left: 0
+    }
+}
+
+body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    border-right: 0
+}
+
+@supports (padding-inline-end: 0) {
+    body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+        padding-inline-end:0}
+}
+
+@supports not (padding-inline-end: 0) {
+    body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+        padding-right: 0
+    }
+}
+
+body .p-calendar.p-calendar-w-btn .p-inputtext {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 0
+}
+
+body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error),body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error) {
+    border-right: 0
+}
+
+body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
+    width: 2.357em;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+body .ui-fluid .p-calendar.p-calendar-w-btn input.p-inputtext {
+    width: calc(100% - 2.357em)
+}
+
+body p-calendar.ng-dirty.ng-invalid>.p-calendar>.p-inputtext {
+    border: 1px solid #a80000
+}
+
+body .p-timepicker .p-separator {
+    min-width: .75rem
+}
+
+@supports (margin-inline-start: 0) {
+    body .p-timepicker .p-separator {
+        margin-inline-start:0}
+}
+
+@supports not (margin-inline-start: 0) {
+    body .p-timepicker .p-separator {
+        margin-left: 0
+    }
+}
+
+body .p-autocomplete .p-autocomplete-input {
+    padding: .429em
+}
+
+body .p-autocomplete-panel {
+    padding: 0;
+    border: 1px solid #c8c8c8;
+    background-color: #fff;
+    box-shadow: 0 3px 6px 0 #00000029
+}
+
+body .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0
+}
+
+body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: .429em .857em;
+    border: 0;
+    color: #333;
+    background-color: initial;
+    border-radius: 0
+}
+
+body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #fff;
+    background-color: var(--mainColor)
+}
+
+body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
+    padding: .429em .857em;
+    background-color: #d8dae2;
+    color: #333
+}
+
+body p-autocomplete.ng-dirty.ng-invalid>.p-autocomplete>.p-inputtext {
+    border: 1px solid #a80000
+}
+
+body .p-selectbutton .p-button {
+    background-color: #dadada;
+    border: 1px solid #dadada;
+    color: #333;
+    overflow: hidden;
+    transition: background-color .2s,box-shadow .2s
+}
+
+body .p-selectbutton .p-button .p-button-icon-left {
+    color: #666
+}
+
+body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background-color: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #333
+}
+
+body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
+    color: #212121
+}
+
+body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight).ui-state-focus {
+    box-shadow: 0 0 0 .2em #8dcdff;
+    z-index: 1
+}
+
+body .p-selectbutton .p-button.p-highlight {
+    background-color: var(--mainColor);
+    border-color: var(--mainColor);
+    color: #fff
+}
+
+body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
+    color: #fff
+}
+
+body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
+    background-color: var(--mainColorLighter);
+    border-color: var(--mainColorLighter);
+    color: #fff
+}
+
+body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
+    color: #fff
+}
+
+body .p-selectbutton .p-button:first-child {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px
+}
+
+body .p-selectbutton .p-button:last-child {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px
+}
+
+body p-selectbutton.ng-dirty.ng-invalid .p-button {
+    border: 1px solid #a80000
+}
+
+p-table .p-datatable-header {
+    border: none!important;
+    background-color: var(--mainBackgroundColor)!important
+}
+
+p-table .p-datatable-header .caption {
+    height: 40px;
+    width: 100%;
+    display: inline-flex;
+    align-items: center
+}
+
+@supports (padding-inline-start: 15px) {
+    p-table .p-datatable-header .caption .left-buttons {
+        padding-inline-start:15px}
+}
+
+@supports not (padding-inline-start: 15px) {
+    p-table .p-datatable-header .caption .left-buttons {
+        padding-left: 15px
+    }
+}
+
+p-table th {
+    background-color: var(--mainBackgroundColor)!important;
+    outline: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+}
+
+p-table td,p-table th {
+    font-family: Source Sans Pro,sans-serif;
+    font-size: 15px!important;
+    color: var(--mainForegroundColor)!important
+}
+
+@supports (padding-inline-start: 15px !important) {
+    p-table td {
+        padding-inline-start:15px!important}
+}
+
+@supports not (padding-inline-start: 15px !important) {
+    p-table td {
+        padding-left: 15px!important
+    }
+}
+
+p-table td.expand-cell {
+    padding: 10px 15px
+}
+
+p-table td:not(.action-cell):not(.expand-cell):not(.checkbox-cell) {
+    overflow: hidden!important;
+    text-overflow: ellipsis!important;
+    white-space: nowrap!important
+}
+
+p-table tr {
+    outline: 0;
+    background-color: var(--mainBackgroundColor)!important;
+    height: 46px
+}
+
+p-table tr.p-highlight {
+    background-color: var(--submenuBackgroundColor)!important
+}
+
+p-table tr.p-highlight td,p-table tr.p-highlight td>a {
+    color: var(--mainForegroundColor)!important
+}
+
+p-table .p-datatable-tbody tr:hover {
+    background-color: var(--submenuBackgroundColor)!important
+}
+
+p-table .p-datatable-tbody tr td {
+    border: none!important;
+    white-space: normal!important
+}
+
+p-table .p-datatable-tbody tr:first-child td {
+    border-top: none!important
+}
+
+p-table .p-datatable-tbody tr:last-child td {
+    border-bottom: none!important
+}
+
+p-table .p-datatable-tbody tr:focus+tr>td,p-table .p-datatable-tbody tr:focus>td {
+    box-shadow: none!important
+}
+
+p-table .p-datatable-tbody .expander {
+    cursor: pointer;
+    position: relative;
+    top: 1px
+}
+
+p-table th {
+    border-color: currentcolor!important;
+    border-bottom: none!important;
+    border: var(--submenuBackgroundColor)!important;
+    border-bottom: 1px solid var(--submenuBackgroundColor)!important;
+    text-align: left!important;
+    padding: 5px 0 5px 15px!important;
+    font-weight: 600!important;
+    color: var(--mainForegroundColor)!important
+}
+
+p-table th.p-sortable-column:hover {
+    background-color: var(--submenuBackgroundColor)!important;
+    border-color: currentcolor!important;
+    border-width: 1px!important;
+    border-left: 1px solid var(--submenuBackgroundColor)!important;
+    border-bottom: 0 solid var(--submenuBackgroundColor)!important;
+    border-right: 1px solid var(--submenuBackgroundColor)!important;
+    border-top: 0 solid var(--submenuBackgroundColor)!important
+}
+
+p-table th.p-sortable-column:hover:first-child {
+    border-width: 0 1px 0 0!important
+}
+
+p-table th.p-highlight {
+    background-color: var(--submenuBackgroundColor)!important
+}
+
+p-table th.p-highlight .pi {
+    color: #000!important;
+    font-size: 11px!important;
+    top: 0!important
+}
+
+p-table th.p-highlight .pi.pi-sort-amount-down,p-table th.p-highlight .pi.pi-sort-amount-up-alt {
+    color: var(--mainForegroundColor)!important
+}
+
+p-table .action-cell {
+    width: 250px!important
+}
+
+p-table .action-cell .dropdown-root,p-table .action-cell my-button,p-table .action-cell my-delete-button,p-table .action-cell my-edit-button {
+    display: inline-block!important
+}
+
+@supports (margin-inline-start: 5px) {
+    p-table .action-cell .dropdown-root,p-table .action-cell my-button,p-table .action-cell my-delete-button,p-table .action-cell my-edit-button {
+        margin-inline-start:5px}
+}
+
+@supports not (margin-inline-start: 5px) {
+    p-table .action-cell .dropdown-root,p-table .action-cell my-button,p-table .action-cell my-delete-button,p-table .action-cell my-edit-button {
+        margin-left: 5px
+    }
+}
+
+@supports (margin-inline-start: 0) {
+    p-table .action-cell .dropdown-root:first-child,p-table .action-cell my-button:first-child,p-table .action-cell my-delete-button:first-child,p-table .action-cell my-edit-button:first-child {
+        margin-inline-start:0}
+}
+
+@supports not (margin-inline-start: 0) {
+    p-table .action-cell .dropdown-root:first-child,p-table .action-cell my-button:first-child,p-table .action-cell my-delete-button:first-child,p-table .action-cell my-edit-button:first-child {
+        margin-left: 0
+    }
+}
+
+p-table p-paginator .p-paginator-bottom {
+    background-color: var(--mainBackgroundColor)!important;
+    position: relative;
+    border: none;
+    border-color: var(--submenuBackgroundColor)!important;
+    border-top: 1px solid!important;
+    border-top-color: var(--submenuBackgroundColor)!important;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center
+}
+
+p-table p-paginator .p-paginator-bottom .p-dropdown {
+    position: absolute;
+    top: 10px;
+    left: 0
+}
+
+p-table p-paginator .p-paginator-bottom .p-dropdown.p-focus {
+    box-shadow: 0 0 0 .2rem var(--mainColorLightest)
+}
+
+p-table p-paginator .p-paginator-bottom .p-dropdown .p-label {
+    color: var(--inputPlaceholderColor)
+}
+
+p-table p-paginator .p-paginator-bottom .p-paginator-current {
+    position: absolute;
+    right: 0;
+    color: var(--inputPlaceholderColor);
+    overflow: visible
+}
+
+p-table p-paginator .p-paginator-bottom .p-paginator-first,p-table p-paginator .p-paginator-bottom .p-paginator-last,p-table p-paginator .p-paginator-bottom .p-paginator-next,p-table p-paginator .p-paginator-bottom .p-paginator-prev {
+    font-family: Glyphicons Halflings;
+    text-decoration: none!important;
+    color: var(--mainForegroundColor)!important;
+    font-display: swap;
+    padding: 5px 2px;
+    height: auto;
+    outline: none;
+    font-size: 13px;
+    top: -1px
+}
+
+p-table p-paginator .p-paginator-bottom .p-paginator-first.focus-within,p-table p-paginator .p-paginator-bottom .p-paginator-first:focus,p-table p-paginator .p-paginator-bottom .p-paginator-last.focus-within,p-table p-paginator .p-paginator-bottom .p-paginator-last:focus,p-table p-paginator .p-paginator-bottom .p-paginator-next.focus-within,p-table p-paginator .p-paginator-bottom .p-paginator-next:focus,p-table p-paginator .p-paginator-bottom .p-paginator-prev.focus-within,p-table p-paginator .p-paginator-bottom .p-paginator-prev:focus {
+    box-shadow: 0 0 0 .2rem var(--mainColorLightest)
+}
+
+p-table p-paginator .p-paginator-bottom .p-paginator-first.p-disabled:hover,p-table p-paginator .p-paginator-bottom .p-paginator-last.p-disabled:hover,p-table p-paginator .p-paginator-bottom .p-paginator-next.p-disabled:hover,p-table p-paginator .p-paginator-bottom .p-paginator-prev.p-disabled:hover {
+    background-color: #fff!important
+}
+
+@supports (margin-inline-end: 10px) {
+    p-table p-paginator .p-paginator-bottom .p-paginator-first.p-paginator-prev,p-table p-paginator .p-paginator-bottom .p-paginator-last.p-paginator-prev,p-table p-paginator .p-paginator-bottom .p-paginator-next.p-paginator-prev,p-table p-paginator .p-paginator-bottom .p-paginator-prev.p-paginator-prev {
+        margin-inline-end:10px}
+}
+
+@supports not (margin-inline-end: 10px) {
+    p-table p-paginator .p-paginator-bottom .p-paginator-first.p-paginator-prev,p-table p-paginator .p-paginator-bottom .p-paginator-last.p-paginator-prev,p-table p-paginator .p-paginator-bottom .p-paginator-next.p-paginator-prev,p-table p-paginator .p-paginator-bottom .p-paginator-prev.p-paginator-prev {
+        margin-right: 10px
+    }
+}
+
+@supports (margin-inline-start: 10px) {
+    p-table p-paginator .p-paginator-bottom .p-paginator-first.p-paginator-next,p-table p-paginator .p-paginator-bottom .p-paginator-last.p-paginator-next,p-table p-paginator .p-paginator-bottom .p-paginator-next.p-paginator-next,p-table p-paginator .p-paginator-bottom .p-paginator-prev.p-paginator-next {
+        margin-inline-start:10px}
+}
+
+@supports not (margin-inline-start: 10px) {
+    p-table p-paginator .p-paginator-bottom .p-paginator-first.p-paginator-next,p-table p-paginator .p-paginator-bottom .p-paginator-last.p-paginator-next,p-table p-paginator .p-paginator-bottom .p-paginator-next.p-paginator-next,p-table p-paginator .p-paginator-bottom .p-paginator-prev.p-paginator-next {
+        margin-left: 10px
+    }
+}
+
+p-table p-paginator .p-paginator-bottom .p-paginator-pages {
+    height: auto!important
+}
+
+p-table p-paginator .p-paginator-bottom .p-paginator-pages .p-paginator-page {
+    color: var(--mainForegroundColor)!important;
+    font-weight: 600!important;
+    margin: 0 5px!important;
+    outline: 0!important;
+    border-radius: 3px!important;
+    padding: 5px 2px!important;
+    height: auto!important;
+    line-height: normal!important
+}
+
+p-table p-paginator .p-paginator-bottom .p-paginator-pages .p-paginator-page.focus-within,p-table p-paginator .p-paginator-bottom .p-paginator-pages .p-paginator-page:focus {
+    box-shadow: 0 0 0 .2rem var(--mainColorLightest)!important
+}
+
+p-table p-paginator .p-paginator-bottom .p-paginator-pages .p-paginator-page.p-highlight,p-table p-paginator .p-paginator-bottom .p-paginator-pages .p-paginator-page.p-highlight:active,p-table p-paginator .p-paginator-bottom .p-paginator-pages .p-paginator-page.p-highlight:focus,p-table p-paginator .p-paginator-bottom .p-paginator-pages .p-paginator-page.p-highlight:hover {
+    color: #fff!important;
+    background-color: var(--mainColor)!important
+}
+
+p-table .p-datatable-wrapper {
+    overflow-x: auto;
+    max-width: 100%
+}
+
+p-table .p-datatable-wrapper table {
+    min-width: 900px
+}
+
+@media screen and (max-width: 900px) {
+    p-table p-paginator .p-dropdown,p-table p-paginator .p-paginator-current {
+        top:0;
+        margin-top: 30px
+    }
+}
+
+@media screen and (max-width: 500px) {
+    p-table p-paginator .p-paginator-pages>.p-paginator-page:not(.p-highlight) {
+        display:none
+    }
+}
+
+p-calendar .p-datepicker a:active,p-calendar .p-datepicker a:focus,p-calendar .p-datepicker a:hover {
+    text-decoration: none!important;
+    outline: none!important
+}
+
+@supports (margin-inline-start: 5px) {
+    p-calendar .p-datepicker .p-datepicker-header .p-datepicker-year {
+        margin-inline-start:5px}
+}
+
+@supports not (margin-inline-start: 5px) {
+    p-calendar .p-datepicker .p-datepicker-header .p-datepicker-year {
+        margin-left: 5px
+    }
+}
+
+p-calendar .p-datepicker .p-datepicker-header .p-datepicker-next {
+    font-family: Glyphicons Halflings;
+    text-decoration: none!important;
+    color: var(--mainForegroundColor)!important;
+    font-display: swap;
+    color: #000!important;
+    text-align: end
+}
+
+p-calendar .p-datepicker .p-datepicker-header .p-datepicker-next .pi.pi-chevron-right {
+    display: none!important
+}
+
+p-calendar .p-datepicker .p-datepicker-header .p-datepicker-prev {
+    font-family: Glyphicons Halflings;
+    text-decoration: none!important;
+    color: var(--mainForegroundColor)!important;
+    font-display: swap;
+    color: #000!important;
+    text-align: start
+}
+
+p-calendar .p-datepicker .p-datepicker-header .p-datepicker-prev .pi.pi-chevron-left {
+    display: none!important
+}
+
+p-calendar .p-datepicker .p-timepicker .pi.pi-chevron-down,p-calendar .p-datepicker .p-timepicker .pi.pi-chevron-up {
+    font-family: Glyphicons Halflings;
+    text-decoration: none!important;
+    color: var(--mainForegroundColor)!important;
+    font-display: swap;
+    color: #000!important
+}
+
+p-tablecheckbox:hover div .p-checkbox-box {
+    box-shadow: 0 0 0 .1rem #5755d933
+}
+
+.p-checkbox,.p-checkbox .p-checkbox-box {
+    width: 18px!important;
+    height: 18px!important
+}
+
+.p-checkbox .p-checkbox-box.p-highlight {
+    border-color: var(--mainColor)!important;
+    background-color: var(--mainColor)!important
+}
+
+.p-checkbox .p-checkbox-box .p-checkbox-icon {
+    position: relative;
+    overflow: visible!important
+}
+
+.p-checkbox .p-checkbox-box .p-checkbox-icon:after {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: -2px;
+    width: 5px;
+    height: 12px;
+    opacity: 0;
+    transform: rotate(45deg) scale(0);
+    border-right: 2px solid var(--mainBackgroundColor);
+    border-bottom: 2px solid var(--mainBackgroundColor)
+}
+
+.p-checkbox .p-checkbox-box .p-checkbox-icon.pi-check:after {
+    opacity: 1;
+    transform: rotate(45deg) scale(1)
+}
+
+p-toast .p-toast {
+    width: auto;
+    max-width: 300px;
+    min-width: 200px;
+    z-index: 18000!important
+}
+
+p-toast .p-toast .p-toast-icon-close {
+    font-family: Glyphicons Halflings;
+    opacity: 0;
+    position: absolute;
+    right: 5px;
+    top: 5px
+}
+
+p-toast .p-toast .p-toast-icon-close:after {
+    content: ""
+}
+
+p-toast .p-toast:hover .p-toast-icon-close {
+    opacity: .3
+}
+
+p-toast .p-toast-message {
+    font-family: Source Sans Pro,sans-serif;
+    background-color: var(--mainBackgroundColor)!important;
+    color: var(--mainForegroundColor)!important;
+    border-radius: 5px;
+    box-sizing: border-box;
+    border: 1px solid #ebeef5!important;
+    box-shadow: 0 2px 12px 0 #0000001a;
+    overflow: hidden
+}
+
+p-table th.p-highlight p-toast .p-toast-message.p-toast-message-success .pi,p-toast .p-toast-message.p-toast-message-success .glyphicon,p-toast .p-toast-message.p-toast-message-success p-table th.p-highlight .pi {
+    color: #8bc34a!important
+}
+
+p-table th.p-highlight p-toast .p-toast-message.p-toast-message-error .pi,p-toast .p-toast-message.p-toast-message-error .glyphicon,p-toast .p-toast-message.p-toast-message-error p-table th.p-highlight .pi {
+    color: #f44336!important
+}
+
+p-table th.p-highlight p-toast .p-toast-message.p-toast-message-warn .pi,p-toast .p-toast-message.p-toast-message-warn .glyphicon,p-toast .p-toast-message.p-toast-message-warn p-table th.p-highlight .pi {
+    color: #f1680d!important
+}
+
+p-table th.p-highlight p-toast .p-toast-message.p-toast-message-info .pi,p-toast .p-toast-message.p-toast-message-info .glyphicon,p-toast .p-toast-message.p-toast-message-info p-table th.p-highlight .pi {
+    color: #03a9f4!important
+}
+
+p-toast .p-toast-message .notification-block {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 10px 20px
+}
+
+p-toast .p-toast-message .notification-block .message {
+    flex-grow: 1
+}
+
+@supports (margin-inline-end: 20px) {
+    p-toast .p-toast-message .notification-block .message {
+        margin-inline-end:20px}
+}
+
+@supports not (margin-inline-end: 20px) {
+    p-toast .p-toast-message .notification-block .message {
+        margin-right: 20px
+    }
+}
+
+p-toast .p-toast-message .notification-block .message h3 {
+    font-size: 21px
+}
+
+p-toast .p-toast-message .notification-block .message p {
+    font-size: 15px;
+    margin-bottom: 0
+}
+
+p-table th.p-highlight p-toast .p-toast-message .notification-block .pi,p-toast .p-toast-message .notification-block .glyphicon,p-toast .p-toast-message .notification-block p-table th.p-highlight .pi {
+    font-size: 32px
+}
+
+@supports (margin-inline-end: 5px) {
+    p-table th.p-highlight p-toast .p-toast-message .notification-block .pi,p-toast .p-toast-message .notification-block .glyphicon,p-toast .p-toast-message .notification-block p-table th.p-highlight .pi {
+        margin-inline-end:5px}
+}
+
+@supports not (margin-inline-end: 5px) {
+    p-table th.p-highlight p-toast .p-toast-message .notification-block .pi,p-toast .p-toast-message .notification-block .glyphicon,p-toast .p-toast-message .notification-block p-table th.p-highlight .pi {
+        margin-right: 5px
+    }
+}
+
+.p-selectbutton .p-button:focus {
+    outline: none
+}
+
+.p-selectbutton .p-button-label {
+    padding: 5px 15px;
+    font-size: 15px;
+    font-weight: 600
+}
+
+[hidden] {
+    display: none!important
+}
+
+body {
+    --mainColor:#f2690d;--mainColorLighter:#f5873d;--mainColorLightest:#fce1cf;--mainHoverColor:#f47825;--mainBackgroundColor:#fff;--mainForegroundColor:#000;--secondaryColor:#148a99;--greyForegroundColor:#585858;--greyBackgroundColor:#e5e5e5;--menuBackgroundColor:#000;--menuForegroundColor:#fff;--submenuBackgroundColor:#f7f7f7;--channelBackgroundColor:#f6ede8;--inputForegroundColor:#000;--inputBackgroundColor:#fff;--inputPlaceholderColor:#898989;--textareaForegroundColor:#000;--textareaBackgroundColor:#fff;--markdownTextareaBackgroundColor:#efefef;--actionButtonColor:#585858;--supportButtonBackgroundColor:#0000;--supportButtonColor:var(--actionButtonColor);--supportButtonHeartColor:#e83e8c;--activatedActionButtonColor:#000;--horizontalMarginContent:30px;--videosHorizontalMarginContent:6vw;--mainColWidth:calc(100vw - 240px);font-family: Source Sans Pro,sans-serif;
+    font-weight: 400;
+    color: var(--mainForegroundColor);
+    background-color: var(--mainBackgroundColor);
+    font-size: 14px;
+    overflow-y: scroll;
+    text-align: start
+}
+
+::selection {
+    color: var(--mainBackgroundColor);
+    background-color: var(--mainHoverColor)
+}
+
+#incompatible-browser,noscript {
+    display: block;
+    font-size: 1.2rem;
+    max-width: 600px;
+    margin: 1rem auto
+}
+
+strong {
+    font-weight: 600
+}
+
+input.readonly {
+    background-color: var(--inputBackgroundColor)!important
+}
+
+input,textarea {
+    outline: none;
+    color: var(--inputForegroundColor)
+}
+
+button {
+    background: unset
+}
+
+button:focus:not(.focus-visible) {
+    outline: none
+}
+
+label {
+    font-weight: 700;
+    font-size: 15px
+}
+
+code {
+    background-color: var(--greyBackgroundColor);
+    color: var(--greyForegroundColor);
+    border-radius: 3px;
+    padding: .2em .4em;
+    margin: auto .4em;
+    font-size: 75%;
+    display: inline-block;
+    vertical-align: middle
+}
+
+.form-error,.form-warning {
+    display: block;
+    margin-top: 5px
+}
+
+.form-error {
+    color: red
+}
+
+.input-error,my-input-toggle-hidden ::ng-deep input {
+    border-color: red!important
+}
+
+.full-width {
+    width: 100%;
+    margin: 0 auto;
+    max-width: none
+}
+
+.glyphicon-black {
+    color: #000
+}
+
+.row {
+    margin: 0!important
+}
+
+.main-col {
+    width: calc(100% - 240px);
+    outline: none
+}
+
+@supports (margin-inline-start: 240px) {
+    .main-col {
+        margin-inline-start:240px}
+}
+
+@supports not (margin-inline-start: 240px) {
+    .main-col {
+        margin-left: 240px
+    }
+}
+
+.main-col .margin-content {
+    margin: 0 var(--horizontalMarginContent);
+    flex-grow: 1
+}
+
+.main-col .sub-menu {
+    background-color: var(--submenuBackgroundColor);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 var(--horizontalMarginContent);
+    height: 81px;
+    margin-bottom: 30px;
+    overflow-x: auto
+}
+
+.main-col .sub-menu.sub-menu-fixed {
+    position: fixed;
+    z-index: 12499;
+    max-width: var(--mainColWidth)
+}
+
+.main-col .margin-content.offset-content {
+    padding-top: 111px
+}
+
+.main-col.expanded {
+    --horizontalMarginContent:150px;--mainColWidth:100vw;width: 100%
+}
+
+@supports (margin-inline-start: 0) {
+    .main-col.expanded {
+        margin-inline-start:0}
+}
+
+@supports not (margin-inline-start: 0) {
+    .main-col.expanded {
+        margin-left: 0
+    }
+}
+
+.main-col.lock-scroll .main-row>router-outlet+* {
+    position: fixed
+}
+
+.main-col.lock-scroll .main-row>router-outlet+* .sub-menu {
+    overflow-x: hidden
+}
+
+.title-page {
+    opacity: .6;
+    color: var(--mainForegroundColor);
+    font-size: 16px;
+    display: inline-block;
+    font-weight: 600;
+    border-bottom: 2px solid #0000
+}
+
+.title-page:active,.title-page:focus,.title-page:hover {
+    text-decoration: none!important;
+    outline: none!important
+}
+
+@supports (margin-inline-end: 55px) {
+    .title-page {
+        margin-inline-end:55px}
+}
+
+@supports not (margin-inline-end: 55px) {
+    .title-page {
+        margin-right: 55px
+    }
+}
+
+.title-page.title-page-single {
+    margin-top: 30px;
+    margin-bottom: 25px
+}
+
+.title-page.active {
+    border-bottom-color: var(--mainColor)
+}
+
+.title-page.title-page-single {
+    font-size: 125%
+}
+
+.title-page:active,.title-page:focus,.title-page:hover {
+    color: var(--mainForegroundColor)
+}
+
+.title-page.active,.title-page.title-page-single,.title-page:active,.title-page:focus,.title-page:hover {
+    opacity: 1;
+    outline: 0 hidden!important
+}
+
+@media screen and (max-width: 500px) {
+    @supports (margin-inline-start: 15px) {
+        .title-page {
+            margin-inline-start:15px
+        }
+    }
+
+    @supports not (margin-inline-start: 15px) {
+        .title-page {
+            margin-left: 15px
+        }
+    }
+}
+
+.title-page-about,.title-page-settings {
+    white-space: nowrap;
+    font-size: 115%
+}
+
+.admin-sub-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px
+}
+
+.admin-sub-header .form-sub-title {
+    flex-grow: 1
+}
+
+.admin-sub-header .admin-sub-nav a {
+    font-size: 16px;
+    color: var(--mainForegroundColor);
+    padding: 5px 15px;
+    border-radius: .25rem;
+    font-weight: 600;
+    opacity: .6
+}
+
+.admin-sub-header .admin-sub-nav a:active,.admin-sub-header .admin-sub-nav a:focus,.admin-sub-header .admin-sub-nav a:hover {
+    text-decoration: none!important;
+    outline: none!important
+}
+
+.admin-sub-header .admin-sub-nav a.active {
+    background-color: var(--submenuBackgroundColor)
+}
+
+.admin-sub-header .admin-sub-nav a.active,.admin-sub-header .admin-sub-nav a:active,.admin-sub-header .admin-sub-nav a:focus,.admin-sub-header .admin-sub-nav a:hover {
+    opacity: 1
+}
+
+.form-sub-title {
+    font-size: 20px;
+    font-weight: 700
+}
+
+table .action-button-delete.disabled,table .action-button-delete:active,table .action-button-delete:focus,table .action-button-delete:hover,table .action-button-delete[disabled],table .action-button-edit.disabled,table .action-button-edit:active,table .action-button-edit:focus,table .action-button-edit:hover,table .action-button-edit[disabled] {
+    background-color: #e5e5e5!important
+}
+
+.no-results {
+    height: 40vh;
+    max-height: 500px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 600
+}
+
+.dropdown-item {
+    padding: 6px 15px
+}
+
+.dropdown-item my-global-icon {
+    opacity: .7;
+    position: relative;
+    top: -2px
+}
+
+@supports (margin-inline-end: 10px) {
+    .dropdown-item my-global-icon {
+        margin-inline-end:10px}
+}
+
+@supports not (margin-inline-end: 10px) {
+    .dropdown-item my-global-icon {
+        margin-right: 10px
+    }
+}
+
+.dropdown-item my-global-icon {
+    width: 22px;
+    height: 22px
+}
+
+.anchor {
+    position: relative;
+    top: -70px
+}
+
+.offset-content .anchor {
+    top: -151px
+}
+
+.form-group-description {
+    font-size: 90%;
+    margin-top: 10px
+}
+
+ngx-loading-bar {
+    z-index: 17501!important
+}
+
+@media screen and (max-width: 1600px) {
+    .main-col {
+        --horizontalMarginContent:15px;
+        --videosHorizontalMarginContent:30px}
+
+    .main-col.expanded {
+        --horizontalMarginContent:75px}
+}
+
+@media screen and (max-width: 900px) {
+    .main-col {
+        --videosHorizontalMarginContent:var(--horizontalMarginContent)
+    }
+
+    .main-col,.main-col.expanded {
+        --horizontalMarginContent:50px}
+
+    .main-col.expanded .sub-menu,.main-col .sub-menu {
+        padding: 0 50px
+    }
+
+    .main-col.expanded .sub-menu .title-page,.main-col .sub-menu .title-page {
+        font-size: 17px
+    }
+}
+
+@media screen and (min-width: 500px) and (max-width: 800px) {
+    .main-col {
+        width:100%
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .main-col,.main-col.expanded {
+        --horizontalMarginContent:15px
+    }
+
+    @supports (margin-inline-start: 0) {
+        .main-col,.main-col.expanded {
+            margin-inline-start:0}
+    }
+
+    @supports not (margin-inline-start: 0) {
+        .main-col,.main-col.expanded {
+            margin-left: 0
+        }
+    }
+
+    .main-col.expanded .sub-menu,.main-col .sub-menu {
+        width: 100vw;
+        padding: 0 15px;
+        margin-bottom: 10px;
+        overflow-x: auto
+    }
+
+    .main-col.expanded .margin-content.offset-content,.main-col .margin-content.offset-content {
+        padding-top: 91px
+    }
+
+    .main-col .admin-sub-header,.main-col.expanded .admin-sub-header {
+        flex-direction: column
+    }
+
+    .main-col .admin-sub-header .form-sub-title,.main-col.expanded .admin-sub-header .form-sub-title {
+        margin-bottom: 10px;
+        text-align: center
+    }
+
+    @supports (margin-inline-end: 0 !important) {
+        .main-col .admin-sub-header .form-sub-title,.main-col.expanded .admin-sub-header .form-sub-title {
+            margin-inline-end:0!important}
+    }
+
+    @supports not (margin-inline-end: 0 !important) {
+        .main-col .admin-sub-header .form-sub-title,.main-col.expanded .admin-sub-header .form-sub-title {
+            margin-right: 0!important
+        }
+    }
+
+    .main-col .admin-sub-header .admin-sub-nav,.main-col.expanded .admin-sub-header .admin-sub-nav {
+        display: block;
+        overflow-x: auto;
+        white-space: nowrap;
+        height: 50px;
+        padding: 10px 0;
+        width: 100%
+    }
+
+    @supports (margin-inline-start: 5px) {
+        .main-col .admin-sub-header .admin-sub-nav a,.main-col.expanded .admin-sub-header .admin-sub-nav a {
+            margin-inline-start:5px}
+    }
+
+    @supports not (margin-inline-start: 5px) {
+        .main-col .admin-sub-header .admin-sub-nav a,.main-col.expanded .admin-sub-header .admin-sub-nav a {
+            margin-left: 5px
+        }
+    }
+
+    .main-col.expanded my-markdown-textarea .root,.main-col my-markdown-textarea .root {
+        max-width: 100%!important
+    }
+
+    .main-col.expanded .peertube-select-container,.main-col.expanded input[type=email],.main-col.expanded input[type=password],.main-col.expanded input[type=text],.main-col.expanded textarea,.main-col .peertube-select-container,.main-col input[type=email],.main-col input[type=password],.main-col input[type=text],.main-col textarea {
+        flex-grow: 1
+    }
+
+    .main-col .caption input[type=text],.main-col.expanded .caption input[type=text] {
+        width: unset!important;
+        flex-grow: 1
+    }
+}
+
+/*# sourceMappingURL=styles.b0a7806028b73e54111d.css.map*/
diff --git a/public/css/videoslist.css b/public/css/videoslist.css
new file mode 100644
index 0000000..a53bc74
--- /dev/null
+++ b/public/css/videoslist.css
@@ -0,0 +1,147 @@
+.margin-content {
+  margin-inline-end: var(--gridVideosMiniatureMargins)!important;
+}
+
+.margin-content {
+  margin-inline-start: var(--gridVideosMiniatureMargins)!important;
+}
+
+.margin-content {
+  --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
+}
+
+.main-col .margin-content {
+  margin: 0 var(--horizontalMarginContent);
+  flex-grow: 1;
+}
+
+.videos-header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  margin-bottom: 30px;
+}
+
+.videos-header .title {
+  font-size: 18px;
+  color: var(--mainForegroundColor);
+  display: inline-block;
+  font-weight: 600;
+  margin-top: 30px;
+  margin-bottom: 0;
+}
+
+.videos-header .title, .videos-header .title-subscription {
+  grid-column: 1;
+}
+
+.videos-header .title-subscription {
+  grid-row: 2;
+  font-size: 14px;
+  color: var(--greyForegroundColor);
+}
+
+.videos-header .title, .videos-header .title-subscription {
+  grid-column: 1;
+}
+
+.videos-header my-feed {
+  margin-inline-start: 5px;
+}
+
+.videos-header my-feed {
+  display: inline-block;
+  width: 16px;
+  color: var(--mainColor);
+  position: relative;
+  top: -2px;
+}
+
+.feed {
+  width: 100%;
+}
+
+my-global-icon {
+  cursor: pointer;
+  width: 100%;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+.date-title:not(:first-child) {
+  margin-top: .5rem;
+  padding-top: 20px;
+  border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.date-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  grid-column: 1/-1;
+}
+
+@media screen and (min-width: 500px) {
+  .margin-content .videos, .margin-content .playlists {
+    --miniatureMinWidth: 255px;
+    --miniatureMaxWidth: 280px;
+    display: grid;
+    grid-column-gap: 30px;
+    column-gap: 30px;
+    grid-template-columns: repeat(auto-fill,minmax(var(--miniatureMinWidth),1fr));
+  }
+}
+
+.section:first-child {
+  padding-top: 30px;
+}
+
+.section:first-child .section-title {
+  border-top: 0!important;
+}
+
+.section .section-title a:hover, .section .section-title a:focus:not(.focus-visible), .section .section-title a:active {
+  text-decoration: none;
+  outline: none;
+}
+
+.section .section-title:not(h2) {
+  border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.section .section-title {
+  font-size: 24px;
+  font-weight: 600;
+  padding-top: 15px;
+  margin-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.section-title {
+  grid-column: 1/-1;
+}
+
+@media screen and (min-width: 500px) {
+  .margin-content .videos, .margin-content .playlists {
+    --miniatureMinWidth: 255px;
+    --miniatureMaxWidth: 280px;
+    display: grid;
+    grid-column-gap: 30px;
+    column-gap: 30px;
+    grid-template-columns: repeat(auto-fill,minmax(var(--miniatureMinWidth),1fr));
+  }
+}
+
+.section.channel .section-title a {
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  align-items: center;
+}
+
+.section .section-title a {
+  color: var(--mainForegroundColor);
+}
\ No newline at end of file
diff --git a/public/css/watch.css b/public/css/watch.css
new file mode 100644
index 0000000..a728fb7
--- /dev/null
+++ b/public/css/watch.css
@@ -0,0 +1,12 @@
+.avatar-25 {
+  --avatarSize: 25px !important;
+}
+
+.avatar-and-textarea {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.avatar-and-textarea my-actor-avatar {
+  margin-inline-end: 10px;
+}
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..bae711b
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/fonts/jpserriffont.woff b/public/fonts/jpserriffont.woff
new file mode 100644
index 0000000..f7a5706
Binary files /dev/null and b/public/fonts/jpserriffont.woff differ
diff --git a/public/img/antazorg.png b/public/img/antazorg.png
new file mode 100644
index 0000000..baf3855
Binary files /dev/null and b/public/img/antazorg.png differ
diff --git a/public/img/bash/6fd97df9bfea41748061893ce36cefee.jpeg b/public/img/bash/6fd97df9bfea41748061893ce36cefee.jpeg
new file mode 100644
index 0000000..7b16650
Binary files /dev/null and b/public/img/bash/6fd97df9bfea41748061893ce36cefee.jpeg differ
diff --git a/public/img/bash/81004208_p0.jpg b/public/img/bash/81004208_p0.jpg
new file mode 100644
index 0000000..59292cc
Binary files /dev/null and b/public/img/bash/81004208_p0.jpg differ
diff --git a/public/img/bash/app_icon.png b/public/img/bash/app_icon.png
new file mode 100644
index 0000000..990fdb3
Binary files /dev/null and b/public/img/bash/app_icon.png differ
diff --git a/public/img/bash/app_icon.webp b/public/img/bash/app_icon.webp
new file mode 100644
index 0000000..153ac20
Binary files /dev/null and b/public/img/bash/app_icon.webp differ
diff --git a/public/img/bash/bottom_bg.png b/public/img/bash/bottom_bg.png
new file mode 100644
index 0000000..de659aa
Binary files /dev/null and b/public/img/bash/bottom_bg.png differ
diff --git a/public/img/bash/bottom_left.png b/public/img/bash/bottom_left.png
new file mode 100644
index 0000000..b874315
Binary files /dev/null and b/public/img/bash/bottom_left.png differ
diff --git a/public/img/bash/bottom_right.png b/public/img/bash/bottom_right.png
new file mode 100644
index 0000000..ee67520
Binary files /dev/null and b/public/img/bash/bottom_right.png differ
diff --git a/public/img/bash/discord_top_left.png b/public/img/bash/discord_top_left.png
new file mode 100644
index 0000000..3ee0e4a
Binary files /dev/null and b/public/img/bash/discord_top_left.png differ
diff --git a/public/img/bash/left_bg.png b/public/img/bash/left_bg.png
new file mode 100644
index 0000000..f6ed596
Binary files /dev/null and b/public/img/bash/left_bg.png differ
diff --git a/public/img/bash/note_bg.png b/public/img/bash/note_bg.png
new file mode 100644
index 0000000..9d71459
Binary files /dev/null and b/public/img/bash/note_bg.png differ
diff --git a/public/img/bash/note_icon.png b/public/img/bash/note_icon.png
new file mode 100644
index 0000000..9cbb62b
Binary files /dev/null and b/public/img/bash/note_icon.png differ
diff --git a/public/img/bash/note_icon.webp b/public/img/bash/note_icon.webp
new file mode 100644
index 0000000..29bb0b8
Binary files /dev/null and b/public/img/bash/note_icon.webp differ
diff --git a/public/img/bash/note_top_left.png b/public/img/bash/note_top_left.png
new file mode 100644
index 0000000..774f730
Binary files /dev/null and b/public/img/bash/note_top_left.png differ
diff --git a/public/img/bash/right_bg.png b/public/img/bash/right_bg.png
new file mode 100644
index 0000000..b74cb9a
Binary files /dev/null and b/public/img/bash/right_bg.png differ
diff --git a/public/img/bash/root_bg.png b/public/img/bash/root_bg.png
new file mode 100644
index 0000000..a89cbd8
Binary files /dev/null and b/public/img/bash/root_bg.png differ
diff --git a/public/img/bash/top_bg.png b/public/img/bash/top_bg.png
new file mode 100644
index 0000000..a94e7d5
Binary files /dev/null and b/public/img/bash/top_bg.png differ
diff --git a/public/img/bash/top_left.png b/public/img/bash/top_left.png
new file mode 100644
index 0000000..09d1396
Binary files /dev/null and b/public/img/bash/top_left.png differ
diff --git a/public/img/bash/top_max.png b/public/img/bash/top_max.png
new file mode 100644
index 0000000..24e2538
Binary files /dev/null and b/public/img/bash/top_max.png differ
diff --git a/public/img/bash/top_max_hover.png b/public/img/bash/top_max_hover.png
new file mode 100644
index 0000000..d6857d3
Binary files /dev/null and b/public/img/bash/top_max_hover.png differ
diff --git a/public/img/bash/top_min.png b/public/img/bash/top_min.png
new file mode 100644
index 0000000..af37dc1
Binary files /dev/null and b/public/img/bash/top_min.png differ
diff --git a/public/img/bash/top_min_hover.png b/public/img/bash/top_min_hover.png
new file mode 100644
index 0000000..f4d74c0
Binary files /dev/null and b/public/img/bash/top_min_hover.png differ
diff --git a/public/img/bash/top_right.png b/public/img/bash/top_right.png
new file mode 100644
index 0000000..4140138
Binary files /dev/null and b/public/img/bash/top_right.png differ
diff --git a/public/img/bash/top_right_hover.png b/public/img/bash/top_right_hover.png
new file mode 100644
index 0000000..24b2106
Binary files /dev/null and b/public/img/bash/top_right_hover.png differ
diff --git a/public/img/bash/user_bg.png b/public/img/bash/user_bg.png
new file mode 100644
index 0000000..4606381
Binary files /dev/null and b/public/img/bash/user_bg.png differ
diff --git a/public/img/favicon.jpeg b/public/img/favicon.jpeg
new file mode 100644
index 0000000..72d908e
Binary files /dev/null and b/public/img/favicon.jpeg differ
diff --git a/public/img/flag/ASEAN.png b/public/img/flag/ASEAN.png
new file mode 100755
index 0000000..ee121e7
Binary files /dev/null and b/public/img/flag/ASEAN.png differ
diff --git a/public/img/flag/Afghanistan.png b/public/img/flag/Afghanistan.png
new file mode 100755
index 0000000..0402b30
Binary files /dev/null and b/public/img/flag/Afghanistan.png differ
diff --git a/public/img/flag/African Union(OAS).png b/public/img/flag/African Union(OAS).png
new file mode 100755
index 0000000..ffed45d
Binary files /dev/null and b/public/img/flag/African Union(OAS).png differ
diff --git a/public/img/flag/Albania.png b/public/img/flag/Albania.png
new file mode 100755
index 0000000..5eea814
Binary files /dev/null and b/public/img/flag/Albania.png differ
diff --git a/public/img/flag/Algeria.png b/public/img/flag/Algeria.png
new file mode 100755
index 0000000..fe1fc6c
Binary files /dev/null and b/public/img/flag/Algeria.png differ
diff --git a/public/img/flag/American Samoa.png b/public/img/flag/American Samoa.png
new file mode 100755
index 0000000..a24093e
Binary files /dev/null and b/public/img/flag/American Samoa.png differ
diff --git a/public/img/flag/Andorra.png b/public/img/flag/Andorra.png
new file mode 100755
index 0000000..1245d9f
Binary files /dev/null and b/public/img/flag/Andorra.png differ
diff --git a/public/img/flag/Angola.png b/public/img/flag/Angola.png
new file mode 100755
index 0000000..d1deed8
Binary files /dev/null and b/public/img/flag/Angola.png differ
diff --git a/public/img/flag/Anguilla.png b/public/img/flag/Anguilla.png
new file mode 100755
index 0000000..68db17b
Binary files /dev/null and b/public/img/flag/Anguilla.png differ
diff --git a/public/img/flag/Antarctica.png b/public/img/flag/Antarctica.png
new file mode 100755
index 0000000..01bf5a9
Binary files /dev/null and b/public/img/flag/Antarctica.png differ
diff --git a/public/img/flag/Antigua & Barbuda.png b/public/img/flag/Antigua & Barbuda.png
new file mode 100755
index 0000000..062aa70
Binary files /dev/null and b/public/img/flag/Antigua & Barbuda.png differ
diff --git a/public/img/flag/Arab League.png b/public/img/flag/Arab League.png
new file mode 100755
index 0000000..0884708
Binary files /dev/null and b/public/img/flag/Arab League.png differ
diff --git a/public/img/flag/Argentina.png b/public/img/flag/Argentina.png
new file mode 100755
index 0000000..8c8d5c9
Binary files /dev/null and b/public/img/flag/Argentina.png differ
diff --git a/public/img/flag/Armenia.png b/public/img/flag/Armenia.png
new file mode 100755
index 0000000..8e1054e
Binary files /dev/null and b/public/img/flag/Armenia.png differ
diff --git a/public/img/flag/Aruba.png b/public/img/flag/Aruba.png
new file mode 100755
index 0000000..67a8142
Binary files /dev/null and b/public/img/flag/Aruba.png differ
diff --git a/public/img/flag/Australia.png b/public/img/flag/Australia.png
new file mode 100755
index 0000000..b34a13a
Binary files /dev/null and b/public/img/flag/Australia.png differ
diff --git a/public/img/flag/Austria.png b/public/img/flag/Austria.png
new file mode 100755
index 0000000..3d5a4af
Binary files /dev/null and b/public/img/flag/Austria.png differ
diff --git a/public/img/flag/Azerbaijan.png b/public/img/flag/Azerbaijan.png
new file mode 100755
index 0000000..86961f7
Binary files /dev/null and b/public/img/flag/Azerbaijan.png differ
diff --git a/public/img/flag/Bahamas.png b/public/img/flag/Bahamas.png
new file mode 100755
index 0000000..28364ad
Binary files /dev/null and b/public/img/flag/Bahamas.png differ
diff --git a/public/img/flag/Bahrain.png b/public/img/flag/Bahrain.png
new file mode 100755
index 0000000..90fe9a6
Binary files /dev/null and b/public/img/flag/Bahrain.png differ
diff --git a/public/img/flag/Bangladesh.png b/public/img/flag/Bangladesh.png
new file mode 100755
index 0000000..8c4b72c
Binary files /dev/null and b/public/img/flag/Bangladesh.png differ
diff --git a/public/img/flag/Barbados.png b/public/img/flag/Barbados.png
new file mode 100755
index 0000000..dc5bfaa
Binary files /dev/null and b/public/img/flag/Barbados.png differ
diff --git a/public/img/flag/Belarus.png b/public/img/flag/Belarus.png
new file mode 100755
index 0000000..9c8e46c
Binary files /dev/null and b/public/img/flag/Belarus.png differ
diff --git a/public/img/flag/Belgium.png b/public/img/flag/Belgium.png
new file mode 100755
index 0000000..957705c
Binary files /dev/null and b/public/img/flag/Belgium.png differ
diff --git a/public/img/flag/Belize.png b/public/img/flag/Belize.png
new file mode 100755
index 0000000..e2a05a6
Binary files /dev/null and b/public/img/flag/Belize.png differ
diff --git a/public/img/flag/Benin.png b/public/img/flag/Benin.png
new file mode 100755
index 0000000..202dc46
Binary files /dev/null and b/public/img/flag/Benin.png differ
diff --git a/public/img/flag/Bermuda.png b/public/img/flag/Bermuda.png
new file mode 100755
index 0000000..0272cc6
Binary files /dev/null and b/public/img/flag/Bermuda.png differ
diff --git a/public/img/flag/Bhutan.png b/public/img/flag/Bhutan.png
new file mode 100755
index 0000000..2d0b604
Binary files /dev/null and b/public/img/flag/Bhutan.png differ
diff --git a/public/img/flag/Bolivia.png b/public/img/flag/Bolivia.png
new file mode 100755
index 0000000..48760e8
Binary files /dev/null and b/public/img/flag/Bolivia.png differ
diff --git a/public/img/flag/Bosnia & Herzegovina.png b/public/img/flag/Bosnia & Herzegovina.png
new file mode 100755
index 0000000..242e214
Binary files /dev/null and b/public/img/flag/Bosnia & Herzegovina.png differ
diff --git a/public/img/flag/Botswana.png b/public/img/flag/Botswana.png
new file mode 100755
index 0000000..c8b457d
Binary files /dev/null and b/public/img/flag/Botswana.png differ
diff --git a/public/img/flag/Brazil.png b/public/img/flag/Brazil.png
new file mode 100755
index 0000000..5a9cfd4
Binary files /dev/null and b/public/img/flag/Brazil.png differ
diff --git a/public/img/flag/Brunei.png b/public/img/flag/Brunei.png
new file mode 100755
index 0000000..231dd4c
Binary files /dev/null and b/public/img/flag/Brunei.png differ
diff --git a/public/img/flag/Bulgaria.png b/public/img/flag/Bulgaria.png
new file mode 100755
index 0000000..6ba90af
Binary files /dev/null and b/public/img/flag/Bulgaria.png differ
diff --git a/public/img/flag/Burkina Faso.png b/public/img/flag/Burkina Faso.png
new file mode 100755
index 0000000..8bfe4b9
Binary files /dev/null and b/public/img/flag/Burkina Faso.png differ
diff --git a/public/img/flag/Burundi.png b/public/img/flag/Burundi.png
new file mode 100755
index 0000000..a0f67f8
Binary files /dev/null and b/public/img/flag/Burundi.png differ
diff --git a/public/img/flag/CARICOM.png b/public/img/flag/CARICOM.png
new file mode 100755
index 0000000..51bd504
Binary files /dev/null and b/public/img/flag/CARICOM.png differ
diff --git a/public/img/flag/CIS.png b/public/img/flag/CIS.png
new file mode 100755
index 0000000..1aa10bc
Binary files /dev/null and b/public/img/flag/CIS.png differ
diff --git a/public/img/flag/Cambodja.png b/public/img/flag/Cambodja.png
new file mode 100755
index 0000000..a4b77f7
Binary files /dev/null and b/public/img/flag/Cambodja.png differ
diff --git a/public/img/flag/Cameroon.png b/public/img/flag/Cameroon.png
new file mode 100755
index 0000000..cf2b443
Binary files /dev/null and b/public/img/flag/Cameroon.png differ
diff --git a/public/img/flag/Canada.png b/public/img/flag/Canada.png
new file mode 100755
index 0000000..3e691be
Binary files /dev/null and b/public/img/flag/Canada.png differ
diff --git a/public/img/flag/Cape Verde.png b/public/img/flag/Cape Verde.png
new file mode 100755
index 0000000..712253e
Binary files /dev/null and b/public/img/flag/Cape Verde.png differ
diff --git a/public/img/flag/Cayman Islands.png b/public/img/flag/Cayman Islands.png
new file mode 100755
index 0000000..3961af3
Binary files /dev/null and b/public/img/flag/Cayman Islands.png differ
diff --git a/public/img/flag/Central African Republic.png b/public/img/flag/Central African Republic.png
new file mode 100755
index 0000000..5283c59
Binary files /dev/null and b/public/img/flag/Central African Republic.png differ
diff --git a/public/img/flag/Chad.png b/public/img/flag/Chad.png
new file mode 100755
index 0000000..d4c92bd
Binary files /dev/null and b/public/img/flag/Chad.png differ
diff --git a/public/img/flag/Chile.png b/public/img/flag/Chile.png
new file mode 100755
index 0000000..35ddcc1
Binary files /dev/null and b/public/img/flag/Chile.png differ
diff --git a/public/img/flag/China.png b/public/img/flag/China.png
new file mode 100755
index 0000000..86ac698
Binary files /dev/null and b/public/img/flag/China.png differ
diff --git a/public/img/flag/Colombia.png b/public/img/flag/Colombia.png
new file mode 100755
index 0000000..3686249
Binary files /dev/null and b/public/img/flag/Colombia.png differ
diff --git a/public/img/flag/Commonwealth.png b/public/img/flag/Commonwealth.png
new file mode 100755
index 0000000..10c84c5
Binary files /dev/null and b/public/img/flag/Commonwealth.png differ
diff --git a/public/img/flag/Comoros.png b/public/img/flag/Comoros.png
new file mode 100755
index 0000000..a7c03c5
Binary files /dev/null and b/public/img/flag/Comoros.png differ
diff --git a/public/img/flag/Congo-Brazzaville.png b/public/img/flag/Congo-Brazzaville.png
new file mode 100755
index 0000000..88b132b
Binary files /dev/null and b/public/img/flag/Congo-Brazzaville.png differ
diff --git a/public/img/flag/Congo-Kinshasa(Zaire).png b/public/img/flag/Congo-Kinshasa(Zaire).png
new file mode 100755
index 0000000..badf083
Binary files /dev/null and b/public/img/flag/Congo-Kinshasa(Zaire).png differ
diff --git a/public/img/flag/Cook Islands.png b/public/img/flag/Cook Islands.png
new file mode 100755
index 0000000..2e62ed8
Binary files /dev/null and b/public/img/flag/Cook Islands.png differ
diff --git a/public/img/flag/Costa Rica.png b/public/img/flag/Costa Rica.png
new file mode 100755
index 0000000..8559d53
Binary files /dev/null and b/public/img/flag/Costa Rica.png differ
diff --git a/public/img/flag/Cote d'Ivoire.png b/public/img/flag/Cote d'Ivoire.png
new file mode 100755
index 0000000..4c2a467
Binary files /dev/null and b/public/img/flag/Cote d'Ivoire.png differ
diff --git a/public/img/flag/Croatia.png b/public/img/flag/Croatia.png
new file mode 100755
index 0000000..f4e7f56
Binary files /dev/null and b/public/img/flag/Croatia.png differ
diff --git a/public/img/flag/Cuba.png b/public/img/flag/Cuba.png
new file mode 100755
index 0000000..b5d5cfb
Binary files /dev/null and b/public/img/flag/Cuba.png differ
diff --git a/public/img/flag/Cyprus.png b/public/img/flag/Cyprus.png
new file mode 100755
index 0000000..dea6953
Binary files /dev/null and b/public/img/flag/Cyprus.png differ
diff --git a/public/img/flag/Czech Republic.png b/public/img/flag/Czech Republic.png
new file mode 100755
index 0000000..0dd2bb4
Binary files /dev/null and b/public/img/flag/Czech Republic.png differ
diff --git a/public/img/flag/Denmark.png b/public/img/flag/Denmark.png
new file mode 100755
index 0000000..58d47d9
Binary files /dev/null and b/public/img/flag/Denmark.png differ
diff --git a/public/img/flag/Djibouti.png b/public/img/flag/Djibouti.png
new file mode 100755
index 0000000..80c7bda
Binary files /dev/null and b/public/img/flag/Djibouti.png differ
diff --git a/public/img/flag/Dominica.png b/public/img/flag/Dominica.png
new file mode 100755
index 0000000..b8b3ce0
Binary files /dev/null and b/public/img/flag/Dominica.png differ
diff --git a/public/img/flag/Dominican Republic.png b/public/img/flag/Dominican Republic.png
new file mode 100755
index 0000000..46edfad
Binary files /dev/null and b/public/img/flag/Dominican Republic.png differ
diff --git a/public/img/flag/Ecuador.png b/public/img/flag/Ecuador.png
new file mode 100755
index 0000000..61eb262
Binary files /dev/null and b/public/img/flag/Ecuador.png differ
diff --git a/public/img/flag/Egypt.png b/public/img/flag/Egypt.png
new file mode 100755
index 0000000..ac4bab4
Binary files /dev/null and b/public/img/flag/Egypt.png differ
diff --git a/public/img/flag/El Salvador.png b/public/img/flag/El Salvador.png
new file mode 100755
index 0000000..c73bf80
Binary files /dev/null and b/public/img/flag/El Salvador.png differ
diff --git a/public/img/flag/England.png b/public/img/flag/England.png
new file mode 100755
index 0000000..044dcb7
Binary files /dev/null and b/public/img/flag/England.png differ
diff --git a/public/img/flag/Equatorial Guinea.png b/public/img/flag/Equatorial Guinea.png
new file mode 100755
index 0000000..92b3b81
Binary files /dev/null and b/public/img/flag/Equatorial Guinea.png differ
diff --git a/public/img/flag/Eritrea.png b/public/img/flag/Eritrea.png
new file mode 100755
index 0000000..84c0c84
Binary files /dev/null and b/public/img/flag/Eritrea.png differ
diff --git a/public/img/flag/Estonia.png b/public/img/flag/Estonia.png
new file mode 100755
index 0000000..426ab13
Binary files /dev/null and b/public/img/flag/Estonia.png differ
diff --git a/public/img/flag/Ethiopia.png b/public/img/flag/Ethiopia.png
new file mode 100755
index 0000000..e766a48
Binary files /dev/null and b/public/img/flag/Ethiopia.png differ
diff --git a/public/img/flag/European Union.png b/public/img/flag/European Union.png
new file mode 100755
index 0000000..562cd42
Binary files /dev/null and b/public/img/flag/European Union.png differ
diff --git a/public/img/flag/Faroes.png b/public/img/flag/Faroes.png
new file mode 100755
index 0000000..5cdd720
Binary files /dev/null and b/public/img/flag/Faroes.png differ
diff --git a/public/img/flag/Fiji.png b/public/img/flag/Fiji.png
new file mode 100755
index 0000000..43f910b
Binary files /dev/null and b/public/img/flag/Fiji.png differ
diff --git a/public/img/flag/Finland.png b/public/img/flag/Finland.png
new file mode 100755
index 0000000..3a30faf
Binary files /dev/null and b/public/img/flag/Finland.png differ
diff --git a/public/img/flag/France.png b/public/img/flag/France.png
new file mode 100755
index 0000000..21d0419
Binary files /dev/null and b/public/img/flag/France.png differ
diff --git a/public/img/flag/Gabon.png b/public/img/flag/Gabon.png
new file mode 100755
index 0000000..c83fd2a
Binary files /dev/null and b/public/img/flag/Gabon.png differ
diff --git a/public/img/flag/Gambia.png b/public/img/flag/Gambia.png
new file mode 100755
index 0000000..d4d9e52
Binary files /dev/null and b/public/img/flag/Gambia.png differ
diff --git a/public/img/flag/Georgia.png b/public/img/flag/Georgia.png
new file mode 100755
index 0000000..5e2944c
Binary files /dev/null and b/public/img/flag/Georgia.png differ
diff --git a/public/img/flag/Germany.png b/public/img/flag/Germany.png
new file mode 100755
index 0000000..a35292a
Binary files /dev/null and b/public/img/flag/Germany.png differ
diff --git a/public/img/flag/Ghana.png b/public/img/flag/Ghana.png
new file mode 100755
index 0000000..b558e78
Binary files /dev/null and b/public/img/flag/Ghana.png differ
diff --git a/public/img/flag/Gibraltar.png b/public/img/flag/Gibraltar.png
new file mode 100755
index 0000000..2502ad8
Binary files /dev/null and b/public/img/flag/Gibraltar.png differ
diff --git a/public/img/flag/Greece.png b/public/img/flag/Greece.png
new file mode 100755
index 0000000..654f92d
Binary files /dev/null and b/public/img/flag/Greece.png differ
diff --git a/public/img/flag/Greenland.png b/public/img/flag/Greenland.png
new file mode 100755
index 0000000..d1a4189
Binary files /dev/null and b/public/img/flag/Greenland.png differ
diff --git a/public/img/flag/Grenada.png b/public/img/flag/Grenada.png
new file mode 100755
index 0000000..7ced8c8
Binary files /dev/null and b/public/img/flag/Grenada.png differ
diff --git a/public/img/flag/Guadeloupe.png b/public/img/flag/Guadeloupe.png
new file mode 100755
index 0000000..65bfca8
Binary files /dev/null and b/public/img/flag/Guadeloupe.png differ
diff --git a/public/img/flag/Guam.png b/public/img/flag/Guam.png
new file mode 100755
index 0000000..ea3eb76
Binary files /dev/null and b/public/img/flag/Guam.png differ
diff --git a/public/img/flag/Guatemala.png b/public/img/flag/Guatemala.png
new file mode 100755
index 0000000..d20df5a
Binary files /dev/null and b/public/img/flag/Guatemala.png differ
diff --git a/public/img/flag/Guernsey.png b/public/img/flag/Guernsey.png
new file mode 100755
index 0000000..617895b
Binary files /dev/null and b/public/img/flag/Guernsey.png differ
diff --git a/public/img/flag/Guinea-Bissau.png b/public/img/flag/Guinea-Bissau.png
new file mode 100755
index 0000000..b3e1673
Binary files /dev/null and b/public/img/flag/Guinea-Bissau.png differ
diff --git a/public/img/flag/Guinea.png b/public/img/flag/Guinea.png
new file mode 100755
index 0000000..c5fbfa5
Binary files /dev/null and b/public/img/flag/Guinea.png differ
diff --git a/public/img/flag/Guyana.png b/public/img/flag/Guyana.png
new file mode 100755
index 0000000..48db75f
Binary files /dev/null and b/public/img/flag/Guyana.png differ
diff --git a/public/img/flag/Haiti.png b/public/img/flag/Haiti.png
new file mode 100755
index 0000000..cec06f8
Binary files /dev/null and b/public/img/flag/Haiti.png differ
diff --git a/public/img/flag/Honduras.png b/public/img/flag/Honduras.png
new file mode 100755
index 0000000..575430e
Binary files /dev/null and b/public/img/flag/Honduras.png differ
diff --git a/public/img/flag/Hong Kong.png b/public/img/flag/Hong Kong.png
new file mode 100755
index 0000000..b5f8420
Binary files /dev/null and b/public/img/flag/Hong Kong.png differ
diff --git a/public/img/flag/Hungary.png b/public/img/flag/Hungary.png
new file mode 100755
index 0000000..8ec9069
Binary files /dev/null and b/public/img/flag/Hungary.png differ
diff --git a/public/img/flag/Iceland.png b/public/img/flag/Iceland.png
new file mode 100755
index 0000000..f6b5d75
Binary files /dev/null and b/public/img/flag/Iceland.png differ
diff --git a/public/img/flag/India.png b/public/img/flag/India.png
new file mode 100755
index 0000000..ac001d6
Binary files /dev/null and b/public/img/flag/India.png differ
diff --git a/public/img/flag/Indonesia.png b/public/img/flag/Indonesia.png
new file mode 100755
index 0000000..d72a4a4
Binary files /dev/null and b/public/img/flag/Indonesia.png differ
diff --git a/public/img/flag/Iran.png b/public/img/flag/Iran.png
new file mode 100755
index 0000000..071fe8c
Binary files /dev/null and b/public/img/flag/Iran.png differ
diff --git a/public/img/flag/Iraq.png b/public/img/flag/Iraq.png
new file mode 100755
index 0000000..4fbdaa0
Binary files /dev/null and b/public/img/flag/Iraq.png differ
diff --git a/public/img/flag/Ireland.png b/public/img/flag/Ireland.png
new file mode 100755
index 0000000..9cba32b
Binary files /dev/null and b/public/img/flag/Ireland.png differ
diff --git a/public/img/flag/Islamic Conference.png b/public/img/flag/Islamic Conference.png
new file mode 100755
index 0000000..9752bd6
Binary files /dev/null and b/public/img/flag/Islamic Conference.png differ
diff --git a/public/img/flag/Isle of Man.png b/public/img/flag/Isle of Man.png
new file mode 100755
index 0000000..8b9412d
Binary files /dev/null and b/public/img/flag/Isle of Man.png differ
diff --git a/public/img/flag/Israel.png b/public/img/flag/Israel.png
new file mode 100755
index 0000000..c156286
Binary files /dev/null and b/public/img/flag/Israel.png differ
diff --git a/public/img/flag/Italy.png b/public/img/flag/Italy.png
new file mode 100755
index 0000000..18de857
Binary files /dev/null and b/public/img/flag/Italy.png differ
diff --git a/public/img/flag/Jamaica.png b/public/img/flag/Jamaica.png
new file mode 100755
index 0000000..1342c33
Binary files /dev/null and b/public/img/flag/Jamaica.png differ
diff --git a/public/img/flag/Japan.png b/public/img/flag/Japan.png
new file mode 100755
index 0000000..67020df
Binary files /dev/null and b/public/img/flag/Japan.png differ
diff --git a/public/img/flag/Jersey.png b/public/img/flag/Jersey.png
new file mode 100755
index 0000000..4858701
Binary files /dev/null and b/public/img/flag/Jersey.png differ
diff --git a/public/img/flag/Jordan.png b/public/img/flag/Jordan.png
new file mode 100755
index 0000000..bd81547
Binary files /dev/null and b/public/img/flag/Jordan.png differ
diff --git a/public/img/flag/Kazakhstan.png b/public/img/flag/Kazakhstan.png
new file mode 100755
index 0000000..7d2a26e
Binary files /dev/null and b/public/img/flag/Kazakhstan.png differ
diff --git a/public/img/flag/Kenya.png b/public/img/flag/Kenya.png
new file mode 100755
index 0000000..8db89fb
Binary files /dev/null and b/public/img/flag/Kenya.png differ
diff --git a/public/img/flag/Kiribati.png b/public/img/flag/Kiribati.png
new file mode 100755
index 0000000..6ee33b2
Binary files /dev/null and b/public/img/flag/Kiribati.png differ
diff --git a/public/img/flag/Kosovo.png b/public/img/flag/Kosovo.png
new file mode 100755
index 0000000..cf87be1
Binary files /dev/null and b/public/img/flag/Kosovo.png differ
diff --git a/public/img/flag/Kuwait.png b/public/img/flag/Kuwait.png
new file mode 100755
index 0000000..2ece850
Binary files /dev/null and b/public/img/flag/Kuwait.png differ
diff --git a/public/img/flag/Kyrgyzstan.png b/public/img/flag/Kyrgyzstan.png
new file mode 100755
index 0000000..6f46e03
Binary files /dev/null and b/public/img/flag/Kyrgyzstan.png differ
diff --git a/public/img/flag/LIthuania.png b/public/img/flag/LIthuania.png
new file mode 100755
index 0000000..5854c7d
Binary files /dev/null and b/public/img/flag/LIthuania.png differ
diff --git a/public/img/flag/Laos.png b/public/img/flag/Laos.png
new file mode 100755
index 0000000..0851e89
Binary files /dev/null and b/public/img/flag/Laos.png differ
diff --git a/public/img/flag/Latvia.png b/public/img/flag/Latvia.png
new file mode 100755
index 0000000..fa83119
Binary files /dev/null and b/public/img/flag/Latvia.png differ
diff --git a/public/img/flag/Lebanon.png b/public/img/flag/Lebanon.png
new file mode 100755
index 0000000..e71fc2c
Binary files /dev/null and b/public/img/flag/Lebanon.png differ
diff --git a/public/img/flag/Lesotho.png b/public/img/flag/Lesotho.png
new file mode 100755
index 0000000..abadd95
Binary files /dev/null and b/public/img/flag/Lesotho.png differ
diff --git a/public/img/flag/Liberia.png b/public/img/flag/Liberia.png
new file mode 100755
index 0000000..27f2006
Binary files /dev/null and b/public/img/flag/Liberia.png differ
diff --git a/public/img/flag/Libya.png b/public/img/flag/Libya.png
new file mode 100755
index 0000000..afd14b4
Binary files /dev/null and b/public/img/flag/Libya.png differ
diff --git a/public/img/flag/Liechtenstein.png b/public/img/flag/Liechtenstein.png
new file mode 100755
index 0000000..109c752
Binary files /dev/null and b/public/img/flag/Liechtenstein.png differ
diff --git a/public/img/flag/Luxembourg.png b/public/img/flag/Luxembourg.png
new file mode 100755
index 0000000..09328c0
Binary files /dev/null and b/public/img/flag/Luxembourg.png differ
diff --git a/public/img/flag/Macao.png b/public/img/flag/Macao.png
new file mode 100755
index 0000000..099097b
Binary files /dev/null and b/public/img/flag/Macao.png differ
diff --git a/public/img/flag/Macedonia.png b/public/img/flag/Macedonia.png
new file mode 100755
index 0000000..0154725
Binary files /dev/null and b/public/img/flag/Macedonia.png differ
diff --git a/public/img/flag/Madagascar.png b/public/img/flag/Madagascar.png
new file mode 100755
index 0000000..5c92205
Binary files /dev/null and b/public/img/flag/Madagascar.png differ
diff --git a/public/img/flag/Malawi.png b/public/img/flag/Malawi.png
new file mode 100755
index 0000000..54bccd4
Binary files /dev/null and b/public/img/flag/Malawi.png differ
diff --git a/public/img/flag/Malaysia.png b/public/img/flag/Malaysia.png
new file mode 100755
index 0000000..0adbfe0
Binary files /dev/null and b/public/img/flag/Malaysia.png differ
diff --git a/public/img/flag/Maldives.png b/public/img/flag/Maldives.png
new file mode 100755
index 0000000..345d21e
Binary files /dev/null and b/public/img/flag/Maldives.png differ
diff --git a/public/img/flag/Mali.png b/public/img/flag/Mali.png
new file mode 100755
index 0000000..f93bffd
Binary files /dev/null and b/public/img/flag/Mali.png differ
diff --git a/public/img/flag/Malta.png b/public/img/flag/Malta.png
new file mode 100755
index 0000000..e0bf47d
Binary files /dev/null and b/public/img/flag/Malta.png differ
diff --git a/public/img/flag/Marshall Islands.png b/public/img/flag/Marshall Islands.png
new file mode 100755
index 0000000..02fbde6
Binary files /dev/null and b/public/img/flag/Marshall Islands.png differ
diff --git a/public/img/flag/Martinique.png b/public/img/flag/Martinique.png
new file mode 100755
index 0000000..e6b06c3
Binary files /dev/null and b/public/img/flag/Martinique.png differ
diff --git a/public/img/flag/Mauritania.png b/public/img/flag/Mauritania.png
new file mode 100755
index 0000000..b091eef
Binary files /dev/null and b/public/img/flag/Mauritania.png differ
diff --git a/public/img/flag/Mauritius.png b/public/img/flag/Mauritius.png
new file mode 100755
index 0000000..b09576f
Binary files /dev/null and b/public/img/flag/Mauritius.png differ
diff --git a/public/img/flag/Mexico.png b/public/img/flag/Mexico.png
new file mode 100755
index 0000000..e6c2c83
Binary files /dev/null and b/public/img/flag/Mexico.png differ
diff --git a/public/img/flag/Micronesia.png b/public/img/flag/Micronesia.png
new file mode 100755
index 0000000..8321229
Binary files /dev/null and b/public/img/flag/Micronesia.png differ
diff --git a/public/img/flag/Moldova.png b/public/img/flag/Moldova.png
new file mode 100755
index 0000000..0e342f1
Binary files /dev/null and b/public/img/flag/Moldova.png differ
diff --git a/public/img/flag/Monaco.png b/public/img/flag/Monaco.png
new file mode 100755
index 0000000..d72a4a4
Binary files /dev/null and b/public/img/flag/Monaco.png differ
diff --git a/public/img/flag/Mongolia.png b/public/img/flag/Mongolia.png
new file mode 100755
index 0000000..aadc11e
Binary files /dev/null and b/public/img/flag/Mongolia.png differ
diff --git a/public/img/flag/Montenegro.png b/public/img/flag/Montenegro.png
new file mode 100755
index 0000000..ad067f1
Binary files /dev/null and b/public/img/flag/Montenegro.png differ
diff --git a/public/img/flag/Montserrat.png b/public/img/flag/Montserrat.png
new file mode 100755
index 0000000..779babd
Binary files /dev/null and b/public/img/flag/Montserrat.png differ
diff --git a/public/img/flag/Morocco.png b/public/img/flag/Morocco.png
new file mode 100755
index 0000000..4cb8c4f
Binary files /dev/null and b/public/img/flag/Morocco.png differ
diff --git a/public/img/flag/Mozambique.png b/public/img/flag/Mozambique.png
new file mode 100755
index 0000000..f50ae6b
Binary files /dev/null and b/public/img/flag/Mozambique.png differ
diff --git a/public/img/flag/Myanmar(Burma).png b/public/img/flag/Myanmar(Burma).png
new file mode 100755
index 0000000..1ae147c
Binary files /dev/null and b/public/img/flag/Myanmar(Burma).png differ
diff --git a/public/img/flag/NATO.png b/public/img/flag/NATO.png
new file mode 100755
index 0000000..5904306
Binary files /dev/null and b/public/img/flag/NATO.png differ
diff --git a/public/img/flag/Namibia.png b/public/img/flag/Namibia.png
new file mode 100755
index 0000000..7ae4759
Binary files /dev/null and b/public/img/flag/Namibia.png differ
diff --git a/public/img/flag/Nauru.png b/public/img/flag/Nauru.png
new file mode 100755
index 0000000..7aaf39c
Binary files /dev/null and b/public/img/flag/Nauru.png differ
diff --git a/public/img/flag/Nepal.png b/public/img/flag/Nepal.png
new file mode 100755
index 0000000..327eb5f
Binary files /dev/null and b/public/img/flag/Nepal.png differ
diff --git a/public/img/flag/Netherlands Antilles.png b/public/img/flag/Netherlands Antilles.png
new file mode 100755
index 0000000..c7644f8
Binary files /dev/null and b/public/img/flag/Netherlands Antilles.png differ
diff --git a/public/img/flag/Netherlands.png b/public/img/flag/Netherlands.png
new file mode 100755
index 0000000..9073f2c
Binary files /dev/null and b/public/img/flag/Netherlands.png differ
diff --git a/public/img/flag/New Caledonia.png b/public/img/flag/New Caledonia.png
new file mode 100755
index 0000000..e9e4242
Binary files /dev/null and b/public/img/flag/New Caledonia.png differ
diff --git a/public/img/flag/New Zealand.png b/public/img/flag/New Zealand.png
new file mode 100755
index 0000000..498bca3
Binary files /dev/null and b/public/img/flag/New Zealand.png differ
diff --git a/public/img/flag/Nicaragua.png b/public/img/flag/Nicaragua.png
new file mode 100755
index 0000000..67b1f5c
Binary files /dev/null and b/public/img/flag/Nicaragua.png differ
diff --git a/public/img/flag/Niger.png b/public/img/flag/Niger.png
new file mode 100755
index 0000000..c1fdcd1
Binary files /dev/null and b/public/img/flag/Niger.png differ
diff --git a/public/img/flag/Nigeria.png b/public/img/flag/Nigeria.png
new file mode 100755
index 0000000..9310f19
Binary files /dev/null and b/public/img/flag/Nigeria.png differ
diff --git a/public/img/flag/North Korea.png b/public/img/flag/North Korea.png
new file mode 100755
index 0000000..403624e
Binary files /dev/null and b/public/img/flag/North Korea.png differ
diff --git a/public/img/flag/Northern Cyprus.png b/public/img/flag/Northern Cyprus.png
new file mode 100755
index 0000000..9f5577a
Binary files /dev/null and b/public/img/flag/Northern Cyprus.png differ
diff --git a/public/img/flag/Northern Ireland.png b/public/img/flag/Northern Ireland.png
new file mode 100755
index 0000000..bf93ec8
Binary files /dev/null and b/public/img/flag/Northern Ireland.png differ
diff --git a/public/img/flag/Norway.png b/public/img/flag/Norway.png
new file mode 100755
index 0000000..9717bbf
Binary files /dev/null and b/public/img/flag/Norway.png differ
diff --git a/public/img/flag/OPEC.png b/public/img/flag/OPEC.png
new file mode 100755
index 0000000..c879c4f
Binary files /dev/null and b/public/img/flag/OPEC.png differ
diff --git a/public/img/flag/Olimpic Movement.png b/public/img/flag/Olimpic Movement.png
new file mode 100755
index 0000000..bede610
Binary files /dev/null and b/public/img/flag/Olimpic Movement.png differ
diff --git a/public/img/flag/Oman.png b/public/img/flag/Oman.png
new file mode 100755
index 0000000..65901cf
Binary files /dev/null and b/public/img/flag/Oman.png differ
diff --git a/public/img/flag/Pakistan.png b/public/img/flag/Pakistan.png
new file mode 100755
index 0000000..aab99bf
Binary files /dev/null and b/public/img/flag/Pakistan.png differ
diff --git a/public/img/flag/Palau.png b/public/img/flag/Palau.png
new file mode 100755
index 0000000..5afec54
Binary files /dev/null and b/public/img/flag/Palau.png differ
diff --git a/public/img/flag/Palestine.png b/public/img/flag/Palestine.png
new file mode 100755
index 0000000..0d25538
Binary files /dev/null and b/public/img/flag/Palestine.png differ
diff --git a/public/img/flag/Panama.png b/public/img/flag/Panama.png
new file mode 100755
index 0000000..afb4ca9
Binary files /dev/null and b/public/img/flag/Panama.png differ
diff --git a/public/img/flag/Papua New Guinea.png b/public/img/flag/Papua New Guinea.png
new file mode 100755
index 0000000..a239b74
Binary files /dev/null and b/public/img/flag/Papua New Guinea.png differ
diff --git a/public/img/flag/Paraguay.png b/public/img/flag/Paraguay.png
new file mode 100755
index 0000000..73ff28b
Binary files /dev/null and b/public/img/flag/Paraguay.png differ
diff --git a/public/img/flag/Peru.png b/public/img/flag/Peru.png
new file mode 100755
index 0000000..96dc7ef
Binary files /dev/null and b/public/img/flag/Peru.png differ
diff --git a/public/img/flag/Philippines.png b/public/img/flag/Philippines.png
new file mode 100755
index 0000000..f626ed9
Binary files /dev/null and b/public/img/flag/Philippines.png differ
diff --git a/public/img/flag/Poland.png b/public/img/flag/Poland.png
new file mode 100755
index 0000000..088a766
Binary files /dev/null and b/public/img/flag/Poland.png differ
diff --git a/public/img/flag/Portugal.png b/public/img/flag/Portugal.png
new file mode 100755
index 0000000..630a85c
Binary files /dev/null and b/public/img/flag/Portugal.png differ
diff --git a/public/img/flag/Puerto Rico.png b/public/img/flag/Puerto Rico.png
new file mode 100755
index 0000000..79a3c61
Binary files /dev/null and b/public/img/flag/Puerto Rico.png differ
diff --git a/public/img/flag/Qatar.png b/public/img/flag/Qatar.png
new file mode 100755
index 0000000..cd0905c
Binary files /dev/null and b/public/img/flag/Qatar.png differ
diff --git a/public/img/flag/Red Cross.png b/public/img/flag/Red Cross.png
new file mode 100755
index 0000000..223cffa
Binary files /dev/null and b/public/img/flag/Red Cross.png differ
diff --git a/public/img/flag/Reunion.png b/public/img/flag/Reunion.png
new file mode 100755
index 0000000..500f9a1
Binary files /dev/null and b/public/img/flag/Reunion.png differ
diff --git a/public/img/flag/Romania.png b/public/img/flag/Romania.png
new file mode 100755
index 0000000..f815958
Binary files /dev/null and b/public/img/flag/Romania.png differ
diff --git a/public/img/flag/Russian Federation.png b/public/img/flag/Russian Federation.png
new file mode 100755
index 0000000..980c585
Binary files /dev/null and b/public/img/flag/Russian Federation.png differ
diff --git a/public/img/flag/Rwanda.png b/public/img/flag/Rwanda.png
new file mode 100755
index 0000000..0659c26
Binary files /dev/null and b/public/img/flag/Rwanda.png differ
diff --git a/public/img/flag/Saint Lucia.png b/public/img/flag/Saint Lucia.png
new file mode 100755
index 0000000..fea98e3
Binary files /dev/null and b/public/img/flag/Saint Lucia.png differ
diff --git a/public/img/flag/Samoa.png b/public/img/flag/Samoa.png
new file mode 100755
index 0000000..ba47ee7
Binary files /dev/null and b/public/img/flag/Samoa.png differ
diff --git a/public/img/flag/San Marino.png b/public/img/flag/San Marino.png
new file mode 100755
index 0000000..bde1c4e
Binary files /dev/null and b/public/img/flag/San Marino.png differ
diff --git a/public/img/flag/Sao Tome & Principe.png b/public/img/flag/Sao Tome & Principe.png
new file mode 100755
index 0000000..6a9da68
Binary files /dev/null and b/public/img/flag/Sao Tome & Principe.png differ
diff --git a/public/img/flag/Saudi Arabia.png b/public/img/flag/Saudi Arabia.png
new file mode 100755
index 0000000..839d0d9
Binary files /dev/null and b/public/img/flag/Saudi Arabia.png differ
diff --git a/public/img/flag/Scotland.png b/public/img/flag/Scotland.png
new file mode 100755
index 0000000..033de25
Binary files /dev/null and b/public/img/flag/Scotland.png differ
diff --git a/public/img/flag/Senegal.png b/public/img/flag/Senegal.png
new file mode 100755
index 0000000..bf45518
Binary files /dev/null and b/public/img/flag/Senegal.png differ
diff --git a/public/img/flag/Serbia(Yugoslavia).png b/public/img/flag/Serbia(Yugoslavia).png
new file mode 100755
index 0000000..b6b0822
Binary files /dev/null and b/public/img/flag/Serbia(Yugoslavia).png differ
diff --git a/public/img/flag/Seychelles.png b/public/img/flag/Seychelles.png
new file mode 100755
index 0000000..d36d909
Binary files /dev/null and b/public/img/flag/Seychelles.png differ
diff --git a/public/img/flag/Sierra Leone.png b/public/img/flag/Sierra Leone.png
new file mode 100755
index 0000000..ff21325
Binary files /dev/null and b/public/img/flag/Sierra Leone.png differ
diff --git a/public/img/flag/Singapore.png b/public/img/flag/Singapore.png
new file mode 100755
index 0000000..2c0df6e
Binary files /dev/null and b/public/img/flag/Singapore.png differ
diff --git a/public/img/flag/Slovakia.png b/public/img/flag/Slovakia.png
new file mode 100755
index 0000000..a3f0881
Binary files /dev/null and b/public/img/flag/Slovakia.png differ
diff --git a/public/img/flag/Slovenia.png b/public/img/flag/Slovenia.png
new file mode 100755
index 0000000..0cf8890
Binary files /dev/null and b/public/img/flag/Slovenia.png differ
diff --git a/public/img/flag/Solomon Islands.png b/public/img/flag/Solomon Islands.png
new file mode 100755
index 0000000..c1d6b0c
Binary files /dev/null and b/public/img/flag/Solomon Islands.png differ
diff --git a/public/img/flag/Somalia.png b/public/img/flag/Somalia.png
new file mode 100755
index 0000000..8ca6c8f
Binary files /dev/null and b/public/img/flag/Somalia.png differ
diff --git a/public/img/flag/Somaliland.png b/public/img/flag/Somaliland.png
new file mode 100755
index 0000000..6f182cc
Binary files /dev/null and b/public/img/flag/Somaliland.png differ
diff --git a/public/img/flag/South Africa.png b/public/img/flag/South Africa.png
new file mode 100755
index 0000000..dc17e66
Binary files /dev/null and b/public/img/flag/South Africa.png differ
diff --git a/public/img/flag/South Korea.png b/public/img/flag/South Korea.png
new file mode 100755
index 0000000..0e3d706
Binary files /dev/null and b/public/img/flag/South Korea.png differ
diff --git a/public/img/flag/Spain.png b/public/img/flag/Spain.png
new file mode 100755
index 0000000..a4177e9
Binary files /dev/null and b/public/img/flag/Spain.png differ
diff --git a/public/img/flag/Sri Lanka.png b/public/img/flag/Sri Lanka.png
new file mode 100755
index 0000000..99ae232
Binary files /dev/null and b/public/img/flag/Sri Lanka.png differ
diff --git a/public/img/flag/St Kitts & Nevis.png b/public/img/flag/St Kitts & Nevis.png
new file mode 100755
index 0000000..1451f19
Binary files /dev/null and b/public/img/flag/St Kitts & Nevis.png differ
diff --git a/public/img/flag/St Vincent & the Grenadines.png b/public/img/flag/St Vincent & the Grenadines.png
new file mode 100755
index 0000000..0b36139
Binary files /dev/null and b/public/img/flag/St Vincent & the Grenadines.png differ
diff --git a/public/img/flag/Sudan.png b/public/img/flag/Sudan.png
new file mode 100755
index 0000000..3ba6c4e
Binary files /dev/null and b/public/img/flag/Sudan.png differ
diff --git a/public/img/flag/Suriname.png b/public/img/flag/Suriname.png
new file mode 100755
index 0000000..e3d79c8
Binary files /dev/null and b/public/img/flag/Suriname.png differ
diff --git a/public/img/flag/Swaziland.png b/public/img/flag/Swaziland.png
new file mode 100755
index 0000000..5926859
Binary files /dev/null and b/public/img/flag/Swaziland.png differ
diff --git a/public/img/flag/Sweden.png b/public/img/flag/Sweden.png
new file mode 100755
index 0000000..d62df2a
Binary files /dev/null and b/public/img/flag/Sweden.png differ
diff --git a/public/img/flag/Switzerland.png b/public/img/flag/Switzerland.png
new file mode 100755
index 0000000..b62f04b
Binary files /dev/null and b/public/img/flag/Switzerland.png differ
diff --git a/public/img/flag/Syria.png b/public/img/flag/Syria.png
new file mode 100755
index 0000000..a0babec
Binary files /dev/null and b/public/img/flag/Syria.png differ
diff --git a/public/img/flag/Tahiti(French Polinesia).png b/public/img/flag/Tahiti(French Polinesia).png
new file mode 100755
index 0000000..f733ac1
Binary files /dev/null and b/public/img/flag/Tahiti(French Polinesia).png differ
diff --git a/public/img/flag/Taiwan.png b/public/img/flag/Taiwan.png
new file mode 100755
index 0000000..5feb7ee
Binary files /dev/null and b/public/img/flag/Taiwan.png differ
diff --git a/public/img/flag/Tajikistan.png b/public/img/flag/Tajikistan.png
new file mode 100755
index 0000000..829fa7b
Binary files /dev/null and b/public/img/flag/Tajikistan.png differ
diff --git a/public/img/flag/Tanzania.png b/public/img/flag/Tanzania.png
new file mode 100755
index 0000000..59eee14
Binary files /dev/null and b/public/img/flag/Tanzania.png differ
diff --git a/public/img/flag/Thailand.png b/public/img/flag/Thailand.png
new file mode 100755
index 0000000..62b8cce
Binary files /dev/null and b/public/img/flag/Thailand.png differ
diff --git a/public/img/flag/Timor-Leste.png b/public/img/flag/Timor-Leste.png
new file mode 100755
index 0000000..93a45af
Binary files /dev/null and b/public/img/flag/Timor-Leste.png differ
diff --git a/public/img/flag/Togo.png b/public/img/flag/Togo.png
new file mode 100755
index 0000000..a32a0c2
Binary files /dev/null and b/public/img/flag/Togo.png differ
diff --git a/public/img/flag/Tonga.png b/public/img/flag/Tonga.png
new file mode 100755
index 0000000..dac83d8
Binary files /dev/null and b/public/img/flag/Tonga.png differ
diff --git a/public/img/flag/Trinidad & Tobago.png b/public/img/flag/Trinidad & Tobago.png
new file mode 100755
index 0000000..f5e185e
Binary files /dev/null and b/public/img/flag/Trinidad & Tobago.png differ
diff --git a/public/img/flag/Tunisia.png b/public/img/flag/Tunisia.png
new file mode 100755
index 0000000..8869233
Binary files /dev/null and b/public/img/flag/Tunisia.png differ
diff --git a/public/img/flag/Turkey.png b/public/img/flag/Turkey.png
new file mode 100755
index 0000000..dc33119
Binary files /dev/null and b/public/img/flag/Turkey.png differ
diff --git a/public/img/flag/Turkmenistan.png b/public/img/flag/Turkmenistan.png
new file mode 100755
index 0000000..1860480
Binary files /dev/null and b/public/img/flag/Turkmenistan.png differ
diff --git a/public/img/flag/Turks and Caicos Islands.png b/public/img/flag/Turks and Caicos Islands.png
new file mode 100755
index 0000000..63d711e
Binary files /dev/null and b/public/img/flag/Turks and Caicos Islands.png differ
diff --git a/public/img/flag/Tuvalu.png b/public/img/flag/Tuvalu.png
new file mode 100755
index 0000000..9c85af4
Binary files /dev/null and b/public/img/flag/Tuvalu.png differ
diff --git a/public/img/flag/Uganda.png b/public/img/flag/Uganda.png
new file mode 100755
index 0000000..eb91362
Binary files /dev/null and b/public/img/flag/Uganda.png differ
diff --git a/public/img/flag/Ukraine.png b/public/img/flag/Ukraine.png
new file mode 100755
index 0000000..46f59cb
Binary files /dev/null and b/public/img/flag/Ukraine.png differ
diff --git a/public/img/flag/United Arab Emirates.png b/public/img/flag/United Arab Emirates.png
new file mode 100755
index 0000000..5957c42
Binary files /dev/null and b/public/img/flag/United Arab Emirates.png differ
diff --git a/public/img/flag/United Kingdom(Great Britain).png b/public/img/flag/United Kingdom(Great Britain).png
new file mode 100755
index 0000000..82cf5f1
Binary files /dev/null and b/public/img/flag/United Kingdom(Great Britain).png differ
diff --git a/public/img/flag/United Nations.png b/public/img/flag/United Nations.png
new file mode 100755
index 0000000..aaa739c
Binary files /dev/null and b/public/img/flag/United Nations.png differ
diff --git a/public/img/flag/United States of America (USA).png b/public/img/flag/United States of America (USA).png
new file mode 100755
index 0000000..5e4b4d9
Binary files /dev/null and b/public/img/flag/United States of America (USA).png differ
diff --git a/public/img/flag/Uruguay.png b/public/img/flag/Uruguay.png
new file mode 100755
index 0000000..f174217
Binary files /dev/null and b/public/img/flag/Uruguay.png differ
diff --git a/public/img/flag/Uzbekistan.png b/public/img/flag/Uzbekistan.png
new file mode 100755
index 0000000..304c0bd
Binary files /dev/null and b/public/img/flag/Uzbekistan.png differ
diff --git a/public/img/flag/Vanutau.png b/public/img/flag/Vanutau.png
new file mode 100755
index 0000000..10fc79e
Binary files /dev/null and b/public/img/flag/Vanutau.png differ
diff --git a/public/img/flag/Vatican City.png b/public/img/flag/Vatican City.png
new file mode 100755
index 0000000..049f341
Binary files /dev/null and b/public/img/flag/Vatican City.png differ
diff --git a/public/img/flag/Venezuela.png b/public/img/flag/Venezuela.png
new file mode 100755
index 0000000..03a1fca
Binary files /dev/null and b/public/img/flag/Venezuela.png differ
diff --git a/public/img/flag/Viet Nam.png b/public/img/flag/Viet Nam.png
new file mode 100755
index 0000000..f6aaa60
Binary files /dev/null and b/public/img/flag/Viet Nam.png differ
diff --git a/public/img/flag/Virgin Islands British.png b/public/img/flag/Virgin Islands British.png
new file mode 100755
index 0000000..f6c33a3
Binary files /dev/null and b/public/img/flag/Virgin Islands British.png differ
diff --git a/public/img/flag/Virgin Islands US.png b/public/img/flag/Virgin Islands US.png
new file mode 100755
index 0000000..1aa55d3
Binary files /dev/null and b/public/img/flag/Virgin Islands US.png differ
diff --git a/public/img/flag/Wales.png b/public/img/flag/Wales.png
new file mode 100755
index 0000000..409b22b
Binary files /dev/null and b/public/img/flag/Wales.png differ
diff --git a/public/img/flag/Western Sahara.png b/public/img/flag/Western Sahara.png
new file mode 100755
index 0000000..d6fc4b7
Binary files /dev/null and b/public/img/flag/Western Sahara.png differ
diff --git a/public/img/flag/Yemen.png b/public/img/flag/Yemen.png
new file mode 100755
index 0000000..b2358ed
Binary files /dev/null and b/public/img/flag/Yemen.png differ
diff --git a/public/img/flag/Zambia.png b/public/img/flag/Zambia.png
new file mode 100755
index 0000000..3684007
Binary files /dev/null and b/public/img/flag/Zambia.png differ
diff --git a/public/img/flag/Zimbabwe.png b/public/img/flag/Zimbabwe.png
new file mode 100755
index 0000000..74b99fe
Binary files /dev/null and b/public/img/flag/Zimbabwe.png differ
diff --git a/public/img/header.jpeg b/public/img/header.jpeg
new file mode 100644
index 0000000..2e11f2c
Binary files /dev/null and b/public/img/header.jpeg differ
diff --git a/public/img/kerokinsi.png b/public/img/kerokinsi.png
new file mode 100644
index 0000000..624cf55
Binary files /dev/null and b/public/img/kerokinsi.png differ
diff --git a/public/img/keromayokatta.png b/public/img/keromayokatta.png
new file mode 100644
index 0000000..67bc243
Binary files /dev/null and b/public/img/keromayokatta.png differ
diff --git a/public/img/noicon.jpg b/public/img/noicon.jpg
new file mode 100644
index 0000000..b13ed2d
Binary files /dev/null and b/public/img/noicon.jpg differ
diff --git a/public/img/od-box.png b/public/img/od-box.png
new file mode 100644
index 0000000..79c6987
Binary files /dev/null and b/public/img/od-box.png differ
diff --git a/public/img/pixel.gif b/public/img/pixel.gif
new file mode 100644
index 0000000..670932d
Binary files /dev/null and b/public/img/pixel.gif differ
diff --git a/public/img/play-box.png b/public/img/play-box.png
new file mode 100644
index 0000000..697c816
Binary files /dev/null and b/public/img/play-box.png differ
diff --git a/public/img/pt-box.png b/public/img/pt-box.png
new file mode 100644
index 0000000..3c28801
Binary files /dev/null and b/public/img/pt-box.png differ
diff --git a/public/img/swk-box.png b/public/img/swk-box.png
new file mode 100644
index 0000000..eb3692e
Binary files /dev/null and b/public/img/swk-box.png differ
diff --git a/public/img/usericon/1/40313557_p0-icon.jpg b/public/img/usericon/1/40313557_p0-icon.jpg
new file mode 100644
index 0000000..8c510c5
Binary files /dev/null and b/public/img/usericon/1/40313557_p0-icon.jpg differ
diff --git a/public/img/usericon/1/suwakawa.png b/public/img/usericon/1/suwakawa.png
new file mode 100644
index 0000000..bc7a387
Binary files /dev/null and b/public/img/usericon/1/suwakawa.png differ
diff --git a/public/img/usericon/1/suwakowa.png b/public/img/usericon/1/suwakowa.png
new file mode 100644
index 0000000..94255b3
Binary files /dev/null and b/public/img/usericon/1/suwakowa.png differ
diff --git a/public/img/yt-box.png b/public/img/yt-box.png
new file mode 100644
index 0000000..c8d0705
Binary files /dev/null and b/public/img/yt-box.png differ
diff --git a/public/index.php b/public/index.php
new file mode 100644
index 0000000..4584cbc
--- /dev/null
+++ b/public/index.php
@@ -0,0 +1,60 @@
+<?php
+
+/**
+ * Laravel - A PHP Framework For Web Artisans
+ *
+ * @package  Laravel
+ * @author   Taylor Otwell <taylor@laravel.com>
+ */
+
+define('LARAVEL_START', microtime(true));
+
+/*
+|--------------------------------------------------------------------------
+| Register The Auto Loader
+|--------------------------------------------------------------------------
+|
+| Composer provides a convenient, automatically generated class loader for
+| our application. We just need to utilize it! We'll simply require it
+| into the script here so that we don't have to worry about manual
+| loading any of our classes later on. It feels great to relax.
+|
+*/
+
+require __DIR__.'/../vendor/autoload.php';
+
+/*
+|--------------------------------------------------------------------------
+| Turn On The Lights
+|--------------------------------------------------------------------------
+|
+| We need to illuminate PHP development, so let us turn on the lights.
+| This bootstraps the framework and gets it ready for use, then it
+| will load up this application so that we can run it and send
+| the responses back to the browser and delight our users.
+|
+*/
+
+$app = require_once __DIR__.'/../bootstrap/app.php';
+
+/*
+|--------------------------------------------------------------------------
+| Run The Application
+|--------------------------------------------------------------------------
+|
+| Once we have the application, we can handle the incoming request
+| through the kernel, and send the associated response back to
+| the client's browser allowing them to enjoy the creative
+| and wonderful application we have prepared for them.
+|
+*/
+
+$kernel = $app->make(Illuminate\Contracts\Http\Kernel::class);
+
+$response = $kernel->handle(
+    $request = Illuminate\Http\Request::capture()
+);
+
+$response->send();
+
+$kernel->terminate($request, $response);
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..4334ecd
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /bot-trap/
diff --git a/resources/fonts/jpserriffont.woff b/resources/fonts/jpserriffont.woff
new file mode 100644
index 0000000..f7a5706
Binary files /dev/null and b/resources/fonts/jpserriffont.woff differ
diff --git a/resources/img/bash/6fd97df9bfea41748061893ce36cefee.jpeg b/resources/img/bash/6fd97df9bfea41748061893ce36cefee.jpeg
new file mode 100644
index 0000000..7b16650
Binary files /dev/null and b/resources/img/bash/6fd97df9bfea41748061893ce36cefee.jpeg differ
diff --git a/resources/img/bash/81004208_p0.jpg b/resources/img/bash/81004208_p0.jpg
new file mode 100644
index 0000000..59292cc
Binary files /dev/null and b/resources/img/bash/81004208_p0.jpg differ
diff --git a/resources/img/bash/app_icon.png b/resources/img/bash/app_icon.png
new file mode 100644
index 0000000..990fdb3
Binary files /dev/null and b/resources/img/bash/app_icon.png differ
diff --git a/resources/img/bash/app_icon.webp b/resources/img/bash/app_icon.webp
new file mode 100644
index 0000000..153ac20
Binary files /dev/null and b/resources/img/bash/app_icon.webp differ
diff --git a/resources/img/bash/bottom_bg.png b/resources/img/bash/bottom_bg.png
new file mode 100644
index 0000000..de659aa
Binary files /dev/null and b/resources/img/bash/bottom_bg.png differ
diff --git a/resources/img/bash/bottom_left.png b/resources/img/bash/bottom_left.png
new file mode 100644
index 0000000..b874315
Binary files /dev/null and b/resources/img/bash/bottom_left.png differ
diff --git a/resources/img/bash/bottom_right.png b/resources/img/bash/bottom_right.png
new file mode 100644
index 0000000..ee67520
Binary files /dev/null and b/resources/img/bash/bottom_right.png differ
diff --git a/resources/img/bash/discord_top_left.png b/resources/img/bash/discord_top_left.png
new file mode 100644
index 0000000..3ee0e4a
Binary files /dev/null and b/resources/img/bash/discord_top_left.png differ
diff --git a/resources/img/bash/left_bg.png b/resources/img/bash/left_bg.png
new file mode 100644
index 0000000..f6ed596
Binary files /dev/null and b/resources/img/bash/left_bg.png differ
diff --git a/resources/img/bash/note_bg.png b/resources/img/bash/note_bg.png
new file mode 100644
index 0000000..9d71459
Binary files /dev/null and b/resources/img/bash/note_bg.png differ
diff --git a/resources/img/bash/note_icon.png b/resources/img/bash/note_icon.png
new file mode 100644
index 0000000..9cbb62b
Binary files /dev/null and b/resources/img/bash/note_icon.png differ
diff --git a/resources/img/bash/note_icon.webp b/resources/img/bash/note_icon.webp
new file mode 100644
index 0000000..29bb0b8
Binary files /dev/null and b/resources/img/bash/note_icon.webp differ
diff --git a/resources/img/bash/note_top_left.png b/resources/img/bash/note_top_left.png
new file mode 100644
index 0000000..774f730
Binary files /dev/null and b/resources/img/bash/note_top_left.png differ
diff --git a/resources/img/bash/right_bg.png b/resources/img/bash/right_bg.png
new file mode 100644
index 0000000..b74cb9a
Binary files /dev/null and b/resources/img/bash/right_bg.png differ
diff --git a/resources/img/bash/root_bg.png b/resources/img/bash/root_bg.png
new file mode 100644
index 0000000..a89cbd8
Binary files /dev/null and b/resources/img/bash/root_bg.png differ
diff --git a/resources/img/bash/top_bg.png b/resources/img/bash/top_bg.png
new file mode 100644
index 0000000..a94e7d5
Binary files /dev/null and b/resources/img/bash/top_bg.png differ
diff --git a/resources/img/bash/top_left.png b/resources/img/bash/top_left.png
new file mode 100644
index 0000000..09d1396
Binary files /dev/null and b/resources/img/bash/top_left.png differ
diff --git a/resources/img/bash/top_max.png b/resources/img/bash/top_max.png
new file mode 100644
index 0000000..24e2538
Binary files /dev/null and b/resources/img/bash/top_max.png differ
diff --git a/resources/img/bash/top_max_hover.png b/resources/img/bash/top_max_hover.png
new file mode 100644
index 0000000..d6857d3
Binary files /dev/null and b/resources/img/bash/top_max_hover.png differ
diff --git a/resources/img/bash/top_min.png b/resources/img/bash/top_min.png
new file mode 100644
index 0000000..af37dc1
Binary files /dev/null and b/resources/img/bash/top_min.png differ
diff --git a/resources/img/bash/top_min_hover.png b/resources/img/bash/top_min_hover.png
new file mode 100644
index 0000000..f4d74c0
Binary files /dev/null and b/resources/img/bash/top_min_hover.png differ
diff --git a/resources/img/bash/top_right.png b/resources/img/bash/top_right.png
new file mode 100644
index 0000000..4140138
Binary files /dev/null and b/resources/img/bash/top_right.png differ
diff --git a/resources/img/bash/top_right_hover.png b/resources/img/bash/top_right_hover.png
new file mode 100644
index 0000000..24b2106
Binary files /dev/null and b/resources/img/bash/top_right_hover.png differ
diff --git a/resources/img/bash/user_bg.png b/resources/img/bash/user_bg.png
new file mode 100644
index 0000000..4606381
Binary files /dev/null and b/resources/img/bash/user_bg.png differ
diff --git a/resources/img/bt-box.png b/resources/img/bt-box.png
new file mode 100644
index 0000000..c6281a7
Binary files /dev/null and b/resources/img/bt-box.png differ
diff --git a/resources/img/favicon.jpeg b/resources/img/favicon.jpeg
new file mode 100644
index 0000000..72d908e
Binary files /dev/null and b/resources/img/favicon.jpeg differ
diff --git a/resources/img/flags/ASEAN.png b/resources/img/flags/ASEAN.png
new file mode 100755
index 0000000..ee121e7
Binary files /dev/null and b/resources/img/flags/ASEAN.png differ
diff --git a/resources/img/flags/Afghanistan.png b/resources/img/flags/Afghanistan.png
new file mode 100755
index 0000000..0402b30
Binary files /dev/null and b/resources/img/flags/Afghanistan.png differ
diff --git a/resources/img/flags/African Union(OAS).png b/resources/img/flags/African Union(OAS).png
new file mode 100755
index 0000000..ffed45d
Binary files /dev/null and b/resources/img/flags/African Union(OAS).png differ
diff --git a/resources/img/flags/Albania.png b/resources/img/flags/Albania.png
new file mode 100755
index 0000000..5eea814
Binary files /dev/null and b/resources/img/flags/Albania.png differ
diff --git a/resources/img/flags/Algeria.png b/resources/img/flags/Algeria.png
new file mode 100755
index 0000000..fe1fc6c
Binary files /dev/null and b/resources/img/flags/Algeria.png differ
diff --git a/resources/img/flags/American Samoa.png b/resources/img/flags/American Samoa.png
new file mode 100755
index 0000000..a24093e
Binary files /dev/null and b/resources/img/flags/American Samoa.png differ
diff --git a/resources/img/flags/Andorra.png b/resources/img/flags/Andorra.png
new file mode 100755
index 0000000..1245d9f
Binary files /dev/null and b/resources/img/flags/Andorra.png differ
diff --git a/resources/img/flags/Angola.png b/resources/img/flags/Angola.png
new file mode 100755
index 0000000..d1deed8
Binary files /dev/null and b/resources/img/flags/Angola.png differ
diff --git a/resources/img/flags/Anguilla.png b/resources/img/flags/Anguilla.png
new file mode 100755
index 0000000..68db17b
Binary files /dev/null and b/resources/img/flags/Anguilla.png differ
diff --git a/resources/img/flags/Antarctica.png b/resources/img/flags/Antarctica.png
new file mode 100755
index 0000000..01bf5a9
Binary files /dev/null and b/resources/img/flags/Antarctica.png differ
diff --git a/resources/img/flags/Antigua & Barbuda.png b/resources/img/flags/Antigua & Barbuda.png
new file mode 100755
index 0000000..062aa70
Binary files /dev/null and b/resources/img/flags/Antigua & Barbuda.png differ
diff --git a/resources/img/flags/Arab League.png b/resources/img/flags/Arab League.png
new file mode 100755
index 0000000..0884708
Binary files /dev/null and b/resources/img/flags/Arab League.png differ
diff --git a/resources/img/flags/Argentina.png b/resources/img/flags/Argentina.png
new file mode 100755
index 0000000..8c8d5c9
Binary files /dev/null and b/resources/img/flags/Argentina.png differ
diff --git a/resources/img/flags/Armenia.png b/resources/img/flags/Armenia.png
new file mode 100755
index 0000000..8e1054e
Binary files /dev/null and b/resources/img/flags/Armenia.png differ
diff --git a/resources/img/flags/Aruba.png b/resources/img/flags/Aruba.png
new file mode 100755
index 0000000..67a8142
Binary files /dev/null and b/resources/img/flags/Aruba.png differ
diff --git a/resources/img/flags/Australia.png b/resources/img/flags/Australia.png
new file mode 100755
index 0000000..b34a13a
Binary files /dev/null and b/resources/img/flags/Australia.png differ
diff --git a/resources/img/flags/Austria.png b/resources/img/flags/Austria.png
new file mode 100755
index 0000000..3d5a4af
Binary files /dev/null and b/resources/img/flags/Austria.png differ
diff --git a/resources/img/flags/Azerbaijan.png b/resources/img/flags/Azerbaijan.png
new file mode 100755
index 0000000..86961f7
Binary files /dev/null and b/resources/img/flags/Azerbaijan.png differ
diff --git a/resources/img/flags/Bahamas.png b/resources/img/flags/Bahamas.png
new file mode 100755
index 0000000..28364ad
Binary files /dev/null and b/resources/img/flags/Bahamas.png differ
diff --git a/resources/img/flags/Bahrain.png b/resources/img/flags/Bahrain.png
new file mode 100755
index 0000000..90fe9a6
Binary files /dev/null and b/resources/img/flags/Bahrain.png differ
diff --git a/resources/img/flags/Bangladesh.png b/resources/img/flags/Bangladesh.png
new file mode 100755
index 0000000..8c4b72c
Binary files /dev/null and b/resources/img/flags/Bangladesh.png differ
diff --git a/resources/img/flags/Barbados.png b/resources/img/flags/Barbados.png
new file mode 100755
index 0000000..dc5bfaa
Binary files /dev/null and b/resources/img/flags/Barbados.png differ
diff --git a/resources/img/flags/Belarus.png b/resources/img/flags/Belarus.png
new file mode 100755
index 0000000..9c8e46c
Binary files /dev/null and b/resources/img/flags/Belarus.png differ
diff --git a/resources/img/flags/Belgium.png b/resources/img/flags/Belgium.png
new file mode 100755
index 0000000..957705c
Binary files /dev/null and b/resources/img/flags/Belgium.png differ
diff --git a/resources/img/flags/Belize.png b/resources/img/flags/Belize.png
new file mode 100755
index 0000000..e2a05a6
Binary files /dev/null and b/resources/img/flags/Belize.png differ
diff --git a/resources/img/flags/Benin.png b/resources/img/flags/Benin.png
new file mode 100755
index 0000000..202dc46
Binary files /dev/null and b/resources/img/flags/Benin.png differ
diff --git a/resources/img/flags/Bermuda.png b/resources/img/flags/Bermuda.png
new file mode 100755
index 0000000..0272cc6
Binary files /dev/null and b/resources/img/flags/Bermuda.png differ
diff --git a/resources/img/flags/Bhutan.png b/resources/img/flags/Bhutan.png
new file mode 100755
index 0000000..2d0b604
Binary files /dev/null and b/resources/img/flags/Bhutan.png differ
diff --git a/resources/img/flags/Bolivia.png b/resources/img/flags/Bolivia.png
new file mode 100755
index 0000000..48760e8
Binary files /dev/null and b/resources/img/flags/Bolivia.png differ
diff --git a/resources/img/flags/Bosnia & Herzegovina.png b/resources/img/flags/Bosnia & Herzegovina.png
new file mode 100755
index 0000000..242e214
Binary files /dev/null and b/resources/img/flags/Bosnia & Herzegovina.png differ
diff --git a/resources/img/flags/Botswana.png b/resources/img/flags/Botswana.png
new file mode 100755
index 0000000..c8b457d
Binary files /dev/null and b/resources/img/flags/Botswana.png differ
diff --git a/resources/img/flags/Brazil.png b/resources/img/flags/Brazil.png
new file mode 100755
index 0000000..5a9cfd4
Binary files /dev/null and b/resources/img/flags/Brazil.png differ
diff --git a/resources/img/flags/Brunei.png b/resources/img/flags/Brunei.png
new file mode 100755
index 0000000..231dd4c
Binary files /dev/null and b/resources/img/flags/Brunei.png differ
diff --git a/resources/img/flags/Bulgaria.png b/resources/img/flags/Bulgaria.png
new file mode 100755
index 0000000..6ba90af
Binary files /dev/null and b/resources/img/flags/Bulgaria.png differ
diff --git a/resources/img/flags/Burkina Faso.png b/resources/img/flags/Burkina Faso.png
new file mode 100755
index 0000000..8bfe4b9
Binary files /dev/null and b/resources/img/flags/Burkina Faso.png differ
diff --git a/resources/img/flags/Burundi.png b/resources/img/flags/Burundi.png
new file mode 100755
index 0000000..a0f67f8
Binary files /dev/null and b/resources/img/flags/Burundi.png differ
diff --git a/resources/img/flags/CARICOM.png b/resources/img/flags/CARICOM.png
new file mode 100755
index 0000000..51bd504
Binary files /dev/null and b/resources/img/flags/CARICOM.png differ
diff --git a/resources/img/flags/CIS.png b/resources/img/flags/CIS.png
new file mode 100755
index 0000000..1aa10bc
Binary files /dev/null and b/resources/img/flags/CIS.png differ
diff --git a/resources/img/flags/Cambodja.png b/resources/img/flags/Cambodja.png
new file mode 100755
index 0000000..a4b77f7
Binary files /dev/null and b/resources/img/flags/Cambodja.png differ
diff --git a/resources/img/flags/Cameroon.png b/resources/img/flags/Cameroon.png
new file mode 100755
index 0000000..cf2b443
Binary files /dev/null and b/resources/img/flags/Cameroon.png differ
diff --git a/resources/img/flags/Canada.png b/resources/img/flags/Canada.png
new file mode 100755
index 0000000..3e691be
Binary files /dev/null and b/resources/img/flags/Canada.png differ
diff --git a/resources/img/flags/Cape Verde.png b/resources/img/flags/Cape Verde.png
new file mode 100755
index 0000000..712253e
Binary files /dev/null and b/resources/img/flags/Cape Verde.png differ
diff --git a/resources/img/flags/Cayman Islands.png b/resources/img/flags/Cayman Islands.png
new file mode 100755
index 0000000..3961af3
Binary files /dev/null and b/resources/img/flags/Cayman Islands.png differ
diff --git a/resources/img/flags/Central African Republic.png b/resources/img/flags/Central African Republic.png
new file mode 100755
index 0000000..5283c59
Binary files /dev/null and b/resources/img/flags/Central African Republic.png differ
diff --git a/resources/img/flags/Chad.png b/resources/img/flags/Chad.png
new file mode 100755
index 0000000..d4c92bd
Binary files /dev/null and b/resources/img/flags/Chad.png differ
diff --git a/resources/img/flags/Chile.png b/resources/img/flags/Chile.png
new file mode 100755
index 0000000..35ddcc1
Binary files /dev/null and b/resources/img/flags/Chile.png differ
diff --git a/resources/img/flags/China.png b/resources/img/flags/China.png
new file mode 100755
index 0000000..86ac698
Binary files /dev/null and b/resources/img/flags/China.png differ
diff --git a/resources/img/flags/Colombia.png b/resources/img/flags/Colombia.png
new file mode 100755
index 0000000..3686249
Binary files /dev/null and b/resources/img/flags/Colombia.png differ
diff --git a/resources/img/flags/Commonwealth.png b/resources/img/flags/Commonwealth.png
new file mode 100755
index 0000000..10c84c5
Binary files /dev/null and b/resources/img/flags/Commonwealth.png differ
diff --git a/resources/img/flags/Comoros.png b/resources/img/flags/Comoros.png
new file mode 100755
index 0000000..a7c03c5
Binary files /dev/null and b/resources/img/flags/Comoros.png differ
diff --git a/resources/img/flags/Congo-Brazzaville.png b/resources/img/flags/Congo-Brazzaville.png
new file mode 100755
index 0000000..88b132b
Binary files /dev/null and b/resources/img/flags/Congo-Brazzaville.png differ
diff --git a/resources/img/flags/Congo-Kinshasa(Zaire).png b/resources/img/flags/Congo-Kinshasa(Zaire).png
new file mode 100755
index 0000000..badf083
Binary files /dev/null and b/resources/img/flags/Congo-Kinshasa(Zaire).png differ
diff --git a/resources/img/flags/Cook Islands.png b/resources/img/flags/Cook Islands.png
new file mode 100755
index 0000000..2e62ed8
Binary files /dev/null and b/resources/img/flags/Cook Islands.png differ
diff --git a/resources/img/flags/Costa Rica.png b/resources/img/flags/Costa Rica.png
new file mode 100755
index 0000000..8559d53
Binary files /dev/null and b/resources/img/flags/Costa Rica.png differ
diff --git a/resources/img/flags/Cote d'Ivoire.png b/resources/img/flags/Cote d'Ivoire.png
new file mode 100755
index 0000000..4c2a467
Binary files /dev/null and b/resources/img/flags/Cote d'Ivoire.png differ
diff --git a/resources/img/flags/Croatia.png b/resources/img/flags/Croatia.png
new file mode 100755
index 0000000..f4e7f56
Binary files /dev/null and b/resources/img/flags/Croatia.png differ
diff --git a/resources/img/flags/Cuba.png b/resources/img/flags/Cuba.png
new file mode 100755
index 0000000..b5d5cfb
Binary files /dev/null and b/resources/img/flags/Cuba.png differ
diff --git a/resources/img/flags/Cyprus.png b/resources/img/flags/Cyprus.png
new file mode 100755
index 0000000..dea6953
Binary files /dev/null and b/resources/img/flags/Cyprus.png differ
diff --git a/resources/img/flags/Czech Republic.png b/resources/img/flags/Czech Republic.png
new file mode 100755
index 0000000..0dd2bb4
Binary files /dev/null and b/resources/img/flags/Czech Republic.png differ
diff --git a/resources/img/flags/Denmark.png b/resources/img/flags/Denmark.png
new file mode 100755
index 0000000..58d47d9
Binary files /dev/null and b/resources/img/flags/Denmark.png differ
diff --git a/resources/img/flags/Djibouti.png b/resources/img/flags/Djibouti.png
new file mode 100755
index 0000000..80c7bda
Binary files /dev/null and b/resources/img/flags/Djibouti.png differ
diff --git a/resources/img/flags/Dominica.png b/resources/img/flags/Dominica.png
new file mode 100755
index 0000000..b8b3ce0
Binary files /dev/null and b/resources/img/flags/Dominica.png differ
diff --git a/resources/img/flags/Dominican Republic.png b/resources/img/flags/Dominican Republic.png
new file mode 100755
index 0000000..46edfad
Binary files /dev/null and b/resources/img/flags/Dominican Republic.png differ
diff --git a/resources/img/flags/Ecuador.png b/resources/img/flags/Ecuador.png
new file mode 100755
index 0000000..61eb262
Binary files /dev/null and b/resources/img/flags/Ecuador.png differ
diff --git a/resources/img/flags/Egypt.png b/resources/img/flags/Egypt.png
new file mode 100755
index 0000000..ac4bab4
Binary files /dev/null and b/resources/img/flags/Egypt.png differ
diff --git a/resources/img/flags/El Salvador.png b/resources/img/flags/El Salvador.png
new file mode 100755
index 0000000..c73bf80
Binary files /dev/null and b/resources/img/flags/El Salvador.png differ
diff --git a/resources/img/flags/England.png b/resources/img/flags/England.png
new file mode 100755
index 0000000..044dcb7
Binary files /dev/null and b/resources/img/flags/England.png differ
diff --git a/resources/img/flags/Equatorial Guinea.png b/resources/img/flags/Equatorial Guinea.png
new file mode 100755
index 0000000..92b3b81
Binary files /dev/null and b/resources/img/flags/Equatorial Guinea.png differ
diff --git a/resources/img/flags/Eritrea.png b/resources/img/flags/Eritrea.png
new file mode 100755
index 0000000..84c0c84
Binary files /dev/null and b/resources/img/flags/Eritrea.png differ
diff --git a/resources/img/flags/Estonia.png b/resources/img/flags/Estonia.png
new file mode 100755
index 0000000..426ab13
Binary files /dev/null and b/resources/img/flags/Estonia.png differ
diff --git a/resources/img/flags/Ethiopia.png b/resources/img/flags/Ethiopia.png
new file mode 100755
index 0000000..e766a48
Binary files /dev/null and b/resources/img/flags/Ethiopia.png differ
diff --git a/resources/img/flags/European Union.png b/resources/img/flags/European Union.png
new file mode 100755
index 0000000..562cd42
Binary files /dev/null and b/resources/img/flags/European Union.png differ
diff --git a/resources/img/flags/Faroes.png b/resources/img/flags/Faroes.png
new file mode 100755
index 0000000..5cdd720
Binary files /dev/null and b/resources/img/flags/Faroes.png differ
diff --git a/resources/img/flags/Fiji.png b/resources/img/flags/Fiji.png
new file mode 100755
index 0000000..43f910b
Binary files /dev/null and b/resources/img/flags/Fiji.png differ
diff --git a/resources/img/flags/Finland.png b/resources/img/flags/Finland.png
new file mode 100755
index 0000000..3a30faf
Binary files /dev/null and b/resources/img/flags/Finland.png differ
diff --git a/resources/img/flags/France.png b/resources/img/flags/France.png
new file mode 100755
index 0000000..21d0419
Binary files /dev/null and b/resources/img/flags/France.png differ
diff --git a/resources/img/flags/Gabon.png b/resources/img/flags/Gabon.png
new file mode 100755
index 0000000..c83fd2a
Binary files /dev/null and b/resources/img/flags/Gabon.png differ
diff --git a/resources/img/flags/Gambia.png b/resources/img/flags/Gambia.png
new file mode 100755
index 0000000..d4d9e52
Binary files /dev/null and b/resources/img/flags/Gambia.png differ
diff --git a/resources/img/flags/Georgia.png b/resources/img/flags/Georgia.png
new file mode 100755
index 0000000..5e2944c
Binary files /dev/null and b/resources/img/flags/Georgia.png differ
diff --git a/resources/img/flags/Germany.png b/resources/img/flags/Germany.png
new file mode 100755
index 0000000..a35292a
Binary files /dev/null and b/resources/img/flags/Germany.png differ
diff --git a/resources/img/flags/Ghana.png b/resources/img/flags/Ghana.png
new file mode 100755
index 0000000..b558e78
Binary files /dev/null and b/resources/img/flags/Ghana.png differ
diff --git a/resources/img/flags/Gibraltar.png b/resources/img/flags/Gibraltar.png
new file mode 100755
index 0000000..2502ad8
Binary files /dev/null and b/resources/img/flags/Gibraltar.png differ
diff --git a/resources/img/flags/Greece.png b/resources/img/flags/Greece.png
new file mode 100755
index 0000000..654f92d
Binary files /dev/null and b/resources/img/flags/Greece.png differ
diff --git a/resources/img/flags/Greenland.png b/resources/img/flags/Greenland.png
new file mode 100755
index 0000000..d1a4189
Binary files /dev/null and b/resources/img/flags/Greenland.png differ
diff --git a/resources/img/flags/Grenada.png b/resources/img/flags/Grenada.png
new file mode 100755
index 0000000..7ced8c8
Binary files /dev/null and b/resources/img/flags/Grenada.png differ
diff --git a/resources/img/flags/Guadeloupe.png b/resources/img/flags/Guadeloupe.png
new file mode 100755
index 0000000..65bfca8
Binary files /dev/null and b/resources/img/flags/Guadeloupe.png differ
diff --git a/resources/img/flags/Guam.png b/resources/img/flags/Guam.png
new file mode 100755
index 0000000..ea3eb76
Binary files /dev/null and b/resources/img/flags/Guam.png differ
diff --git a/resources/img/flags/Guatemala.png b/resources/img/flags/Guatemala.png
new file mode 100755
index 0000000..d20df5a
Binary files /dev/null and b/resources/img/flags/Guatemala.png differ
diff --git a/resources/img/flags/Guernsey.png b/resources/img/flags/Guernsey.png
new file mode 100755
index 0000000..617895b
Binary files /dev/null and b/resources/img/flags/Guernsey.png differ
diff --git a/resources/img/flags/Guinea-Bissau.png b/resources/img/flags/Guinea-Bissau.png
new file mode 100755
index 0000000..b3e1673
Binary files /dev/null and b/resources/img/flags/Guinea-Bissau.png differ
diff --git a/resources/img/flags/Guinea.png b/resources/img/flags/Guinea.png
new file mode 100755
index 0000000..c5fbfa5
Binary files /dev/null and b/resources/img/flags/Guinea.png differ
diff --git a/resources/img/flags/Guyana.png b/resources/img/flags/Guyana.png
new file mode 100755
index 0000000..48db75f
Binary files /dev/null and b/resources/img/flags/Guyana.png differ
diff --git a/resources/img/flags/Haiti.png b/resources/img/flags/Haiti.png
new file mode 100755
index 0000000..cec06f8
Binary files /dev/null and b/resources/img/flags/Haiti.png differ
diff --git a/resources/img/flags/Honduras.png b/resources/img/flags/Honduras.png
new file mode 100755
index 0000000..575430e
Binary files /dev/null and b/resources/img/flags/Honduras.png differ
diff --git a/resources/img/flags/Hong Kong.png b/resources/img/flags/Hong Kong.png
new file mode 100755
index 0000000..b5f8420
Binary files /dev/null and b/resources/img/flags/Hong Kong.png differ
diff --git a/resources/img/flags/Hungary.png b/resources/img/flags/Hungary.png
new file mode 100755
index 0000000..8ec9069
Binary files /dev/null and b/resources/img/flags/Hungary.png differ
diff --git a/resources/img/flags/Iceland.png b/resources/img/flags/Iceland.png
new file mode 100755
index 0000000..f6b5d75
Binary files /dev/null and b/resources/img/flags/Iceland.png differ
diff --git a/resources/img/flags/India.png b/resources/img/flags/India.png
new file mode 100755
index 0000000..ac001d6
Binary files /dev/null and b/resources/img/flags/India.png differ
diff --git a/resources/img/flags/Indonesia.png b/resources/img/flags/Indonesia.png
new file mode 100755
index 0000000..d72a4a4
Binary files /dev/null and b/resources/img/flags/Indonesia.png differ
diff --git a/resources/img/flags/Iran.png b/resources/img/flags/Iran.png
new file mode 100755
index 0000000..071fe8c
Binary files /dev/null and b/resources/img/flags/Iran.png differ
diff --git a/resources/img/flags/Iraq.png b/resources/img/flags/Iraq.png
new file mode 100755
index 0000000..4fbdaa0
Binary files /dev/null and b/resources/img/flags/Iraq.png differ
diff --git a/resources/img/flags/Ireland.png b/resources/img/flags/Ireland.png
new file mode 100755
index 0000000..9cba32b
Binary files /dev/null and b/resources/img/flags/Ireland.png differ
diff --git a/resources/img/flags/Islamic Conference.png b/resources/img/flags/Islamic Conference.png
new file mode 100755
index 0000000..9752bd6
Binary files /dev/null and b/resources/img/flags/Islamic Conference.png differ
diff --git a/resources/img/flags/Isle of Man.png b/resources/img/flags/Isle of Man.png
new file mode 100755
index 0000000..8b9412d
Binary files /dev/null and b/resources/img/flags/Isle of Man.png differ
diff --git a/resources/img/flags/Israel.png b/resources/img/flags/Israel.png
new file mode 100755
index 0000000..c156286
Binary files /dev/null and b/resources/img/flags/Israel.png differ
diff --git a/resources/img/flags/Italy.png b/resources/img/flags/Italy.png
new file mode 100755
index 0000000..18de857
Binary files /dev/null and b/resources/img/flags/Italy.png differ
diff --git a/resources/img/flags/Jamaica.png b/resources/img/flags/Jamaica.png
new file mode 100755
index 0000000..1342c33
Binary files /dev/null and b/resources/img/flags/Jamaica.png differ
diff --git a/resources/img/flags/Japan.png b/resources/img/flags/Japan.png
new file mode 100755
index 0000000..67020df
Binary files /dev/null and b/resources/img/flags/Japan.png differ
diff --git a/resources/img/flags/Jersey.png b/resources/img/flags/Jersey.png
new file mode 100755
index 0000000..4858701
Binary files /dev/null and b/resources/img/flags/Jersey.png differ
diff --git a/resources/img/flags/Jordan.png b/resources/img/flags/Jordan.png
new file mode 100755
index 0000000..bd81547
Binary files /dev/null and b/resources/img/flags/Jordan.png differ
diff --git a/resources/img/flags/Kazakhstan.png b/resources/img/flags/Kazakhstan.png
new file mode 100755
index 0000000..7d2a26e
Binary files /dev/null and b/resources/img/flags/Kazakhstan.png differ
diff --git a/resources/img/flags/Kenya.png b/resources/img/flags/Kenya.png
new file mode 100755
index 0000000..8db89fb
Binary files /dev/null and b/resources/img/flags/Kenya.png differ
diff --git a/resources/img/flags/Kiribati.png b/resources/img/flags/Kiribati.png
new file mode 100755
index 0000000..6ee33b2
Binary files /dev/null and b/resources/img/flags/Kiribati.png differ
diff --git a/resources/img/flags/Kosovo.png b/resources/img/flags/Kosovo.png
new file mode 100755
index 0000000..cf87be1
Binary files /dev/null and b/resources/img/flags/Kosovo.png differ
diff --git a/resources/img/flags/Kuwait.png b/resources/img/flags/Kuwait.png
new file mode 100755
index 0000000..2ece850
Binary files /dev/null and b/resources/img/flags/Kuwait.png differ
diff --git a/resources/img/flags/Kyrgyzstan.png b/resources/img/flags/Kyrgyzstan.png
new file mode 100755
index 0000000..6f46e03
Binary files /dev/null and b/resources/img/flags/Kyrgyzstan.png differ
diff --git a/resources/img/flags/LIthuania.png b/resources/img/flags/LIthuania.png
new file mode 100755
index 0000000..5854c7d
Binary files /dev/null and b/resources/img/flags/LIthuania.png differ
diff --git a/resources/img/flags/Laos.png b/resources/img/flags/Laos.png
new file mode 100755
index 0000000..0851e89
Binary files /dev/null and b/resources/img/flags/Laos.png differ
diff --git a/resources/img/flags/Latvia.png b/resources/img/flags/Latvia.png
new file mode 100755
index 0000000..fa83119
Binary files /dev/null and b/resources/img/flags/Latvia.png differ
diff --git a/resources/img/flags/Lebanon.png b/resources/img/flags/Lebanon.png
new file mode 100755
index 0000000..e71fc2c
Binary files /dev/null and b/resources/img/flags/Lebanon.png differ
diff --git a/resources/img/flags/Lesotho.png b/resources/img/flags/Lesotho.png
new file mode 100755
index 0000000..abadd95
Binary files /dev/null and b/resources/img/flags/Lesotho.png differ
diff --git a/resources/img/flags/Liberia.png b/resources/img/flags/Liberia.png
new file mode 100755
index 0000000..27f2006
Binary files /dev/null and b/resources/img/flags/Liberia.png differ
diff --git a/resources/img/flags/Libya.png b/resources/img/flags/Libya.png
new file mode 100755
index 0000000..afd14b4
Binary files /dev/null and b/resources/img/flags/Libya.png differ
diff --git a/resources/img/flags/Liechtenstein.png b/resources/img/flags/Liechtenstein.png
new file mode 100755
index 0000000..109c752
Binary files /dev/null and b/resources/img/flags/Liechtenstein.png differ
diff --git a/resources/img/flags/Luxembourg.png b/resources/img/flags/Luxembourg.png
new file mode 100755
index 0000000..09328c0
Binary files /dev/null and b/resources/img/flags/Luxembourg.png differ
diff --git a/resources/img/flags/Macao.png b/resources/img/flags/Macao.png
new file mode 100755
index 0000000..099097b
Binary files /dev/null and b/resources/img/flags/Macao.png differ
diff --git a/resources/img/flags/Macedonia.png b/resources/img/flags/Macedonia.png
new file mode 100755
index 0000000..0154725
Binary files /dev/null and b/resources/img/flags/Macedonia.png differ
diff --git a/resources/img/flags/Madagascar.png b/resources/img/flags/Madagascar.png
new file mode 100755
index 0000000..5c92205
Binary files /dev/null and b/resources/img/flags/Madagascar.png differ
diff --git a/resources/img/flags/Malawi.png b/resources/img/flags/Malawi.png
new file mode 100755
index 0000000..54bccd4
Binary files /dev/null and b/resources/img/flags/Malawi.png differ
diff --git a/resources/img/flags/Malaysia.png b/resources/img/flags/Malaysia.png
new file mode 100755
index 0000000..0adbfe0
Binary files /dev/null and b/resources/img/flags/Malaysia.png differ
diff --git a/resources/img/flags/Maldives.png b/resources/img/flags/Maldives.png
new file mode 100755
index 0000000..345d21e
Binary files /dev/null and b/resources/img/flags/Maldives.png differ
diff --git a/resources/img/flags/Mali.png b/resources/img/flags/Mali.png
new file mode 100755
index 0000000..f93bffd
Binary files /dev/null and b/resources/img/flags/Mali.png differ
diff --git a/resources/img/flags/Malta.png b/resources/img/flags/Malta.png
new file mode 100755
index 0000000..e0bf47d
Binary files /dev/null and b/resources/img/flags/Malta.png differ
diff --git a/resources/img/flags/Marshall Islands.png b/resources/img/flags/Marshall Islands.png
new file mode 100755
index 0000000..02fbde6
Binary files /dev/null and b/resources/img/flags/Marshall Islands.png differ
diff --git a/resources/img/flags/Martinique.png b/resources/img/flags/Martinique.png
new file mode 100755
index 0000000..e6b06c3
Binary files /dev/null and b/resources/img/flags/Martinique.png differ
diff --git a/resources/img/flags/Mauritania.png b/resources/img/flags/Mauritania.png
new file mode 100755
index 0000000..b091eef
Binary files /dev/null and b/resources/img/flags/Mauritania.png differ
diff --git a/resources/img/flags/Mauritius.png b/resources/img/flags/Mauritius.png
new file mode 100755
index 0000000..b09576f
Binary files /dev/null and b/resources/img/flags/Mauritius.png differ
diff --git a/resources/img/flags/Mexico.png b/resources/img/flags/Mexico.png
new file mode 100755
index 0000000..e6c2c83
Binary files /dev/null and b/resources/img/flags/Mexico.png differ
diff --git a/resources/img/flags/Micronesia.png b/resources/img/flags/Micronesia.png
new file mode 100755
index 0000000..8321229
Binary files /dev/null and b/resources/img/flags/Micronesia.png differ
diff --git a/resources/img/flags/Moldova.png b/resources/img/flags/Moldova.png
new file mode 100755
index 0000000..0e342f1
Binary files /dev/null and b/resources/img/flags/Moldova.png differ
diff --git a/resources/img/flags/Monaco.png b/resources/img/flags/Monaco.png
new file mode 100755
index 0000000..d72a4a4
Binary files /dev/null and b/resources/img/flags/Monaco.png differ
diff --git a/resources/img/flags/Mongolia.png b/resources/img/flags/Mongolia.png
new file mode 100755
index 0000000..aadc11e
Binary files /dev/null and b/resources/img/flags/Mongolia.png differ
diff --git a/resources/img/flags/Montenegro.png b/resources/img/flags/Montenegro.png
new file mode 100755
index 0000000..ad067f1
Binary files /dev/null and b/resources/img/flags/Montenegro.png differ
diff --git a/resources/img/flags/Montserrat.png b/resources/img/flags/Montserrat.png
new file mode 100755
index 0000000..779babd
Binary files /dev/null and b/resources/img/flags/Montserrat.png differ
diff --git a/resources/img/flags/Morocco.png b/resources/img/flags/Morocco.png
new file mode 100755
index 0000000..4cb8c4f
Binary files /dev/null and b/resources/img/flags/Morocco.png differ
diff --git a/resources/img/flags/Mozambique.png b/resources/img/flags/Mozambique.png
new file mode 100755
index 0000000..f50ae6b
Binary files /dev/null and b/resources/img/flags/Mozambique.png differ
diff --git a/resources/img/flags/Myanmar(Burma).png b/resources/img/flags/Myanmar(Burma).png
new file mode 100755
index 0000000..1ae147c
Binary files /dev/null and b/resources/img/flags/Myanmar(Burma).png differ
diff --git a/resources/img/flags/NATO.png b/resources/img/flags/NATO.png
new file mode 100755
index 0000000..5904306
Binary files /dev/null and b/resources/img/flags/NATO.png differ
diff --git a/resources/img/flags/Namibia.png b/resources/img/flags/Namibia.png
new file mode 100755
index 0000000..7ae4759
Binary files /dev/null and b/resources/img/flags/Namibia.png differ
diff --git a/resources/img/flags/Nauru.png b/resources/img/flags/Nauru.png
new file mode 100755
index 0000000..7aaf39c
Binary files /dev/null and b/resources/img/flags/Nauru.png differ
diff --git a/resources/img/flags/Nepal.png b/resources/img/flags/Nepal.png
new file mode 100755
index 0000000..327eb5f
Binary files /dev/null and b/resources/img/flags/Nepal.png differ
diff --git a/resources/img/flags/Netherlands Antilles.png b/resources/img/flags/Netherlands Antilles.png
new file mode 100755
index 0000000..c7644f8
Binary files /dev/null and b/resources/img/flags/Netherlands Antilles.png differ
diff --git a/resources/img/flags/Netherlands.png b/resources/img/flags/Netherlands.png
new file mode 100755
index 0000000..9073f2c
Binary files /dev/null and b/resources/img/flags/Netherlands.png differ
diff --git a/resources/img/flags/New Caledonia.png b/resources/img/flags/New Caledonia.png
new file mode 100755
index 0000000..e9e4242
Binary files /dev/null and b/resources/img/flags/New Caledonia.png differ
diff --git a/resources/img/flags/New Zealand.png b/resources/img/flags/New Zealand.png
new file mode 100755
index 0000000..498bca3
Binary files /dev/null and b/resources/img/flags/New Zealand.png differ
diff --git a/resources/img/flags/Nicaragua.png b/resources/img/flags/Nicaragua.png
new file mode 100755
index 0000000..67b1f5c
Binary files /dev/null and b/resources/img/flags/Nicaragua.png differ
diff --git a/resources/img/flags/Niger.png b/resources/img/flags/Niger.png
new file mode 100755
index 0000000..c1fdcd1
Binary files /dev/null and b/resources/img/flags/Niger.png differ
diff --git a/resources/img/flags/Nigeria.png b/resources/img/flags/Nigeria.png
new file mode 100755
index 0000000..9310f19
Binary files /dev/null and b/resources/img/flags/Nigeria.png differ
diff --git a/resources/img/flags/North Korea.png b/resources/img/flags/North Korea.png
new file mode 100755
index 0000000..403624e
Binary files /dev/null and b/resources/img/flags/North Korea.png differ
diff --git a/resources/img/flags/Northern Cyprus.png b/resources/img/flags/Northern Cyprus.png
new file mode 100755
index 0000000..9f5577a
Binary files /dev/null and b/resources/img/flags/Northern Cyprus.png differ
diff --git a/resources/img/flags/Northern Ireland.png b/resources/img/flags/Northern Ireland.png
new file mode 100755
index 0000000..bf93ec8
Binary files /dev/null and b/resources/img/flags/Northern Ireland.png differ
diff --git a/resources/img/flags/Norway.png b/resources/img/flags/Norway.png
new file mode 100755
index 0000000..9717bbf
Binary files /dev/null and b/resources/img/flags/Norway.png differ
diff --git a/resources/img/flags/OPEC.png b/resources/img/flags/OPEC.png
new file mode 100755
index 0000000..c879c4f
Binary files /dev/null and b/resources/img/flags/OPEC.png differ
diff --git a/resources/img/flags/Olimpic Movement.png b/resources/img/flags/Olimpic Movement.png
new file mode 100755
index 0000000..bede610
Binary files /dev/null and b/resources/img/flags/Olimpic Movement.png differ
diff --git a/resources/img/flags/Oman.png b/resources/img/flags/Oman.png
new file mode 100755
index 0000000..65901cf
Binary files /dev/null and b/resources/img/flags/Oman.png differ
diff --git a/resources/img/flags/Pakistan.png b/resources/img/flags/Pakistan.png
new file mode 100755
index 0000000..aab99bf
Binary files /dev/null and b/resources/img/flags/Pakistan.png differ
diff --git a/resources/img/flags/Palau.png b/resources/img/flags/Palau.png
new file mode 100755
index 0000000..5afec54
Binary files /dev/null and b/resources/img/flags/Palau.png differ
diff --git a/resources/img/flags/Palestine.png b/resources/img/flags/Palestine.png
new file mode 100755
index 0000000..0d25538
Binary files /dev/null and b/resources/img/flags/Palestine.png differ
diff --git a/resources/img/flags/Panama.png b/resources/img/flags/Panama.png
new file mode 100755
index 0000000..afb4ca9
Binary files /dev/null and b/resources/img/flags/Panama.png differ
diff --git a/resources/img/flags/Papua New Guinea.png b/resources/img/flags/Papua New Guinea.png
new file mode 100755
index 0000000..a239b74
Binary files /dev/null and b/resources/img/flags/Papua New Guinea.png differ
diff --git a/resources/img/flags/Paraguay.png b/resources/img/flags/Paraguay.png
new file mode 100755
index 0000000..73ff28b
Binary files /dev/null and b/resources/img/flags/Paraguay.png differ
diff --git a/resources/img/flags/Peru.png b/resources/img/flags/Peru.png
new file mode 100755
index 0000000..96dc7ef
Binary files /dev/null and b/resources/img/flags/Peru.png differ
diff --git a/resources/img/flags/Philippines.png b/resources/img/flags/Philippines.png
new file mode 100755
index 0000000..f626ed9
Binary files /dev/null and b/resources/img/flags/Philippines.png differ
diff --git a/resources/img/flags/Poland.png b/resources/img/flags/Poland.png
new file mode 100755
index 0000000..088a766
Binary files /dev/null and b/resources/img/flags/Poland.png differ
diff --git a/resources/img/flags/Portugal.png b/resources/img/flags/Portugal.png
new file mode 100755
index 0000000..630a85c
Binary files /dev/null and b/resources/img/flags/Portugal.png differ
diff --git a/resources/img/flags/Puerto Rico.png b/resources/img/flags/Puerto Rico.png
new file mode 100755
index 0000000..79a3c61
Binary files /dev/null and b/resources/img/flags/Puerto Rico.png differ
diff --git a/resources/img/flags/Qatar.png b/resources/img/flags/Qatar.png
new file mode 100755
index 0000000..cd0905c
Binary files /dev/null and b/resources/img/flags/Qatar.png differ
diff --git a/resources/img/flags/Red Cross.png b/resources/img/flags/Red Cross.png
new file mode 100755
index 0000000..223cffa
Binary files /dev/null and b/resources/img/flags/Red Cross.png differ
diff --git a/resources/img/flags/Reunion.png b/resources/img/flags/Reunion.png
new file mode 100755
index 0000000..500f9a1
Binary files /dev/null and b/resources/img/flags/Reunion.png differ
diff --git a/resources/img/flags/Romania.png b/resources/img/flags/Romania.png
new file mode 100755
index 0000000..f815958
Binary files /dev/null and b/resources/img/flags/Romania.png differ
diff --git a/resources/img/flags/Russian Federation.png b/resources/img/flags/Russian Federation.png
new file mode 100755
index 0000000..980c585
Binary files /dev/null and b/resources/img/flags/Russian Federation.png differ
diff --git a/resources/img/flags/Rwanda.png b/resources/img/flags/Rwanda.png
new file mode 100755
index 0000000..0659c26
Binary files /dev/null and b/resources/img/flags/Rwanda.png differ
diff --git a/resources/img/flags/Saint Lucia.png b/resources/img/flags/Saint Lucia.png
new file mode 100755
index 0000000..fea98e3
Binary files /dev/null and b/resources/img/flags/Saint Lucia.png differ
diff --git a/resources/img/flags/Samoa.png b/resources/img/flags/Samoa.png
new file mode 100755
index 0000000..ba47ee7
Binary files /dev/null and b/resources/img/flags/Samoa.png differ
diff --git a/resources/img/flags/San Marino.png b/resources/img/flags/San Marino.png
new file mode 100755
index 0000000..bde1c4e
Binary files /dev/null and b/resources/img/flags/San Marino.png differ
diff --git a/resources/img/flags/Sao Tome & Principe.png b/resources/img/flags/Sao Tome & Principe.png
new file mode 100755
index 0000000..6a9da68
Binary files /dev/null and b/resources/img/flags/Sao Tome & Principe.png differ
diff --git a/resources/img/flags/Saudi Arabia.png b/resources/img/flags/Saudi Arabia.png
new file mode 100755
index 0000000..839d0d9
Binary files /dev/null and b/resources/img/flags/Saudi Arabia.png differ
diff --git a/resources/img/flags/Scotland.png b/resources/img/flags/Scotland.png
new file mode 100755
index 0000000..033de25
Binary files /dev/null and b/resources/img/flags/Scotland.png differ
diff --git a/resources/img/flags/Senegal.png b/resources/img/flags/Senegal.png
new file mode 100755
index 0000000..bf45518
Binary files /dev/null and b/resources/img/flags/Senegal.png differ
diff --git a/resources/img/flags/Serbia(Yugoslavia).png b/resources/img/flags/Serbia(Yugoslavia).png
new file mode 100755
index 0000000..b6b0822
Binary files /dev/null and b/resources/img/flags/Serbia(Yugoslavia).png differ
diff --git a/resources/img/flags/Seychelles.png b/resources/img/flags/Seychelles.png
new file mode 100755
index 0000000..d36d909
Binary files /dev/null and b/resources/img/flags/Seychelles.png differ
diff --git a/resources/img/flags/Sierra Leone.png b/resources/img/flags/Sierra Leone.png
new file mode 100755
index 0000000..ff21325
Binary files /dev/null and b/resources/img/flags/Sierra Leone.png differ
diff --git a/resources/img/flags/Singapore.png b/resources/img/flags/Singapore.png
new file mode 100755
index 0000000..2c0df6e
Binary files /dev/null and b/resources/img/flags/Singapore.png differ
diff --git a/resources/img/flags/Slovakia.png b/resources/img/flags/Slovakia.png
new file mode 100755
index 0000000..a3f0881
Binary files /dev/null and b/resources/img/flags/Slovakia.png differ
diff --git a/resources/img/flags/Slovenia.png b/resources/img/flags/Slovenia.png
new file mode 100755
index 0000000..0cf8890
Binary files /dev/null and b/resources/img/flags/Slovenia.png differ
diff --git a/resources/img/flags/Solomon Islands.png b/resources/img/flags/Solomon Islands.png
new file mode 100755
index 0000000..c1d6b0c
Binary files /dev/null and b/resources/img/flags/Solomon Islands.png differ
diff --git a/resources/img/flags/Somalia.png b/resources/img/flags/Somalia.png
new file mode 100755
index 0000000..8ca6c8f
Binary files /dev/null and b/resources/img/flags/Somalia.png differ
diff --git a/resources/img/flags/Somaliland.png b/resources/img/flags/Somaliland.png
new file mode 100755
index 0000000..6f182cc
Binary files /dev/null and b/resources/img/flags/Somaliland.png differ
diff --git a/resources/img/flags/South Africa.png b/resources/img/flags/South Africa.png
new file mode 100755
index 0000000..dc17e66
Binary files /dev/null and b/resources/img/flags/South Africa.png differ
diff --git a/resources/img/flags/South Korea.png b/resources/img/flags/South Korea.png
new file mode 100755
index 0000000..0e3d706
Binary files /dev/null and b/resources/img/flags/South Korea.png differ
diff --git a/resources/img/flags/Spain.png b/resources/img/flags/Spain.png
new file mode 100755
index 0000000..a4177e9
Binary files /dev/null and b/resources/img/flags/Spain.png differ
diff --git a/resources/img/flags/Sri Lanka.png b/resources/img/flags/Sri Lanka.png
new file mode 100755
index 0000000..99ae232
Binary files /dev/null and b/resources/img/flags/Sri Lanka.png differ
diff --git a/resources/img/flags/St Kitts & Nevis.png b/resources/img/flags/St Kitts & Nevis.png
new file mode 100755
index 0000000..1451f19
Binary files /dev/null and b/resources/img/flags/St Kitts & Nevis.png differ
diff --git a/resources/img/flags/St Vincent & the Grenadines.png b/resources/img/flags/St Vincent & the Grenadines.png
new file mode 100755
index 0000000..0b36139
Binary files /dev/null and b/resources/img/flags/St Vincent & the Grenadines.png differ
diff --git a/resources/img/flags/Sudan.png b/resources/img/flags/Sudan.png
new file mode 100755
index 0000000..3ba6c4e
Binary files /dev/null and b/resources/img/flags/Sudan.png differ
diff --git a/resources/img/flags/Suriname.png b/resources/img/flags/Suriname.png
new file mode 100755
index 0000000..e3d79c8
Binary files /dev/null and b/resources/img/flags/Suriname.png differ
diff --git a/resources/img/flags/Swaziland.png b/resources/img/flags/Swaziland.png
new file mode 100755
index 0000000..5926859
Binary files /dev/null and b/resources/img/flags/Swaziland.png differ
diff --git a/resources/img/flags/Sweden.png b/resources/img/flags/Sweden.png
new file mode 100755
index 0000000..d62df2a
Binary files /dev/null and b/resources/img/flags/Sweden.png differ
diff --git a/resources/img/flags/Switzerland.png b/resources/img/flags/Switzerland.png
new file mode 100755
index 0000000..b62f04b
Binary files /dev/null and b/resources/img/flags/Switzerland.png differ
diff --git a/resources/img/flags/Syria.png b/resources/img/flags/Syria.png
new file mode 100755
index 0000000..a0babec
Binary files /dev/null and b/resources/img/flags/Syria.png differ
diff --git a/resources/img/flags/Tahiti(French Polinesia).png b/resources/img/flags/Tahiti(French Polinesia).png
new file mode 100755
index 0000000..f733ac1
Binary files /dev/null and b/resources/img/flags/Tahiti(French Polinesia).png differ
diff --git a/resources/img/flags/Taiwan.png b/resources/img/flags/Taiwan.png
new file mode 100755
index 0000000..5feb7ee
Binary files /dev/null and b/resources/img/flags/Taiwan.png differ
diff --git a/resources/img/flags/Tajikistan.png b/resources/img/flags/Tajikistan.png
new file mode 100755
index 0000000..829fa7b
Binary files /dev/null and b/resources/img/flags/Tajikistan.png differ
diff --git a/resources/img/flags/Tanzania.png b/resources/img/flags/Tanzania.png
new file mode 100755
index 0000000..59eee14
Binary files /dev/null and b/resources/img/flags/Tanzania.png differ
diff --git a/resources/img/flags/Thailand.png b/resources/img/flags/Thailand.png
new file mode 100755
index 0000000..62b8cce
Binary files /dev/null and b/resources/img/flags/Thailand.png differ
diff --git a/resources/img/flags/Timor-Leste.png b/resources/img/flags/Timor-Leste.png
new file mode 100755
index 0000000..93a45af
Binary files /dev/null and b/resources/img/flags/Timor-Leste.png differ
diff --git a/resources/img/flags/Togo.png b/resources/img/flags/Togo.png
new file mode 100755
index 0000000..a32a0c2
Binary files /dev/null and b/resources/img/flags/Togo.png differ
diff --git a/resources/img/flags/Tonga.png b/resources/img/flags/Tonga.png
new file mode 100755
index 0000000..dac83d8
Binary files /dev/null and b/resources/img/flags/Tonga.png differ
diff --git a/resources/img/flags/Trinidad & Tobago.png b/resources/img/flags/Trinidad & Tobago.png
new file mode 100755
index 0000000..f5e185e
Binary files /dev/null and b/resources/img/flags/Trinidad & Tobago.png differ
diff --git a/resources/img/flags/Tunisia.png b/resources/img/flags/Tunisia.png
new file mode 100755
index 0000000..8869233
Binary files /dev/null and b/resources/img/flags/Tunisia.png differ
diff --git a/resources/img/flags/Turkey.png b/resources/img/flags/Turkey.png
new file mode 100755
index 0000000..dc33119
Binary files /dev/null and b/resources/img/flags/Turkey.png differ
diff --git a/resources/img/flags/Turkmenistan.png b/resources/img/flags/Turkmenistan.png
new file mode 100755
index 0000000..1860480
Binary files /dev/null and b/resources/img/flags/Turkmenistan.png differ
diff --git a/resources/img/flags/Turks and Caicos Islands.png b/resources/img/flags/Turks and Caicos Islands.png
new file mode 100755
index 0000000..63d711e
Binary files /dev/null and b/resources/img/flags/Turks and Caicos Islands.png differ
diff --git a/resources/img/flags/Tuvalu.png b/resources/img/flags/Tuvalu.png
new file mode 100755
index 0000000..9c85af4
Binary files /dev/null and b/resources/img/flags/Tuvalu.png differ
diff --git a/resources/img/flags/Uganda.png b/resources/img/flags/Uganda.png
new file mode 100755
index 0000000..eb91362
Binary files /dev/null and b/resources/img/flags/Uganda.png differ
diff --git a/resources/img/flags/Ukraine.png b/resources/img/flags/Ukraine.png
new file mode 100755
index 0000000..46f59cb
Binary files /dev/null and b/resources/img/flags/Ukraine.png differ
diff --git a/resources/img/flags/United Arab Emirates.png b/resources/img/flags/United Arab Emirates.png
new file mode 100755
index 0000000..5957c42
Binary files /dev/null and b/resources/img/flags/United Arab Emirates.png differ
diff --git a/resources/img/flags/United Kingdom(Great Britain).png b/resources/img/flags/United Kingdom(Great Britain).png
new file mode 100755
index 0000000..82cf5f1
Binary files /dev/null and b/resources/img/flags/United Kingdom(Great Britain).png differ
diff --git a/resources/img/flags/United Nations.png b/resources/img/flags/United Nations.png
new file mode 100755
index 0000000..aaa739c
Binary files /dev/null and b/resources/img/flags/United Nations.png differ
diff --git a/resources/img/flags/United States of America (USA).png b/resources/img/flags/United States of America (USA).png
new file mode 100755
index 0000000..5e4b4d9
Binary files /dev/null and b/resources/img/flags/United States of America (USA).png differ
diff --git a/resources/img/flags/Uruguay.png b/resources/img/flags/Uruguay.png
new file mode 100755
index 0000000..f174217
Binary files /dev/null and b/resources/img/flags/Uruguay.png differ
diff --git a/resources/img/flags/Uzbekistan.png b/resources/img/flags/Uzbekistan.png
new file mode 100755
index 0000000..304c0bd
Binary files /dev/null and b/resources/img/flags/Uzbekistan.png differ
diff --git a/resources/img/flags/Vanutau.png b/resources/img/flags/Vanutau.png
new file mode 100755
index 0000000..10fc79e
Binary files /dev/null and b/resources/img/flags/Vanutau.png differ
diff --git a/resources/img/flags/Vatican City.png b/resources/img/flags/Vatican City.png
new file mode 100755
index 0000000..049f341
Binary files /dev/null and b/resources/img/flags/Vatican City.png differ
diff --git a/resources/img/flags/Venezuela.png b/resources/img/flags/Venezuela.png
new file mode 100755
index 0000000..03a1fca
Binary files /dev/null and b/resources/img/flags/Venezuela.png differ
diff --git a/resources/img/flags/Viet Nam.png b/resources/img/flags/Viet Nam.png
new file mode 100755
index 0000000..f6aaa60
Binary files /dev/null and b/resources/img/flags/Viet Nam.png differ
diff --git a/resources/img/flags/Virgin Islands British.png b/resources/img/flags/Virgin Islands British.png
new file mode 100755
index 0000000..f6c33a3
Binary files /dev/null and b/resources/img/flags/Virgin Islands British.png differ
diff --git a/resources/img/flags/Virgin Islands US.png b/resources/img/flags/Virgin Islands US.png
new file mode 100755
index 0000000..1aa55d3
Binary files /dev/null and b/resources/img/flags/Virgin Islands US.png differ
diff --git a/resources/img/flags/Wales.png b/resources/img/flags/Wales.png
new file mode 100755
index 0000000..409b22b
Binary files /dev/null and b/resources/img/flags/Wales.png differ
diff --git a/resources/img/flags/Western Sahara.png b/resources/img/flags/Western Sahara.png
new file mode 100755
index 0000000..d6fc4b7
Binary files /dev/null and b/resources/img/flags/Western Sahara.png differ
diff --git a/resources/img/flags/Yemen.png b/resources/img/flags/Yemen.png
new file mode 100755
index 0000000..b2358ed
Binary files /dev/null and b/resources/img/flags/Yemen.png differ
diff --git a/resources/img/flags/Zambia.png b/resources/img/flags/Zambia.png
new file mode 100755
index 0000000..3684007
Binary files /dev/null and b/resources/img/flags/Zambia.png differ
diff --git a/resources/img/flags/Zimbabwe.png b/resources/img/flags/Zimbabwe.png
new file mode 100755
index 0000000..74b99fe
Binary files /dev/null and b/resources/img/flags/Zimbabwe.png differ
diff --git a/resources/img/header.jpeg b/resources/img/header.jpeg
new file mode 100644
index 0000000..8d394a1
Binary files /dev/null and b/resources/img/header.jpeg differ
diff --git a/resources/img/kerokinsi.png b/resources/img/kerokinsi.png
new file mode 100644
index 0000000..624cf55
Binary files /dev/null and b/resources/img/kerokinsi.png differ
diff --git a/resources/img/keromayokatta.png b/resources/img/keromayokatta.png
new file mode 100644
index 0000000..67bc243
Binary files /dev/null and b/resources/img/keromayokatta.png differ
diff --git a/resources/img/nico-box.png b/resources/img/nico-box.png
new file mode 100644
index 0000000..d51300b
Binary files /dev/null and b/resources/img/nico-box.png differ
diff --git a/resources/img/noicon.jpg b/resources/img/noicon.jpg
new file mode 100644
index 0000000..b13ed2d
Binary files /dev/null and b/resources/img/noicon.jpg differ
diff --git a/resources/img/od-box.png b/resources/img/od-box.png
new file mode 100644
index 0000000..79c6987
Binary files /dev/null and b/resources/img/od-box.png differ
diff --git a/resources/img/play-box.png b/resources/img/play-box.png
new file mode 100644
index 0000000..697c816
Binary files /dev/null and b/resources/img/play-box.png differ
diff --git a/resources/img/swk-box.png b/resources/img/swk-box.png
new file mode 100644
index 0000000..eb3692e
Binary files /dev/null and b/resources/img/swk-box.png differ
diff --git a/resources/img/yt-box.png b/resources/img/yt-box.png
new file mode 100644
index 0000000..c8d0705
Binary files /dev/null and b/resources/img/yt-box.png differ
diff --git a/resources/lang/de.json b/resources/lang/de.json
new file mode 100644
index 0000000..2836c89
--- /dev/null
+++ b/resources/lang/de.json
@@ -0,0 +1,233 @@
+{
+  "男性": "männlich",
+  "女性": "Weiblich",
+  "不明": "Unbekannt",
+  "日本": "Japan",
+  "大韓民国": "Südkorea",
+  "中華人民共和国": "Volksrepublik China",
+  "香港": "Hongkong",
+  "台湾": "Taiwan",
+  "赤道ギニア": "Äquatorialguinea",
+  "北アイルランド": "Nordirland",
+  "北朝鮮": "Nord Korea",
+  "北マケドニア": "Nordmakedonien",
+  "中央アフリカ共和国": "Zentralafrikanische Republik",
+  "東ティモール": "Osttimor",
+  "南極": "Antarktis",
+  "南アフリカ": "Südafrika",
+  "西サハラ": "Westsahara",
+  "アイスランド": "Island",
+  "アイルランド": "Irland",
+  "アゼルバイジャン": "Aserbaidschan",
+  "アフガニスタン": "Afghanistan",
+  "アメリカ領ヴァージン諸島": "Amerikanische Jungferninseln",
+  "アメリカ領サモア": "Amerikanischen Samoa-Inseln",
+  "アメリカ合衆国": "vereinigte Staaten von Amerika",
+  "アラブ首長国連邦": "Vereinigte Arabische Emirate",
+  "アルジェリア": "Algerien",
+  "アルゼンチン": "Argentinien",
+  "アルバ": "Aruba",
+  "アルバニア": "Albanien",
+  "アルメニア": "Armenien",
+  "アンゴラ": "Angola",
+  "アングィラ": "Anguilla",
+  "アンティグア・バーブーダ": "Antigua und Barbuda",
+  "アンドラ": "Andorra",
+  "イエメン": "Jemen",
+  "イギリス": "England",
+  "イギリス領バージン諸島": "Britische Jungferninseln",
+  "イスラエル": "Israel",
+  "イタリア": "Italien",
+  "イラク": "Irak",
+  "イラン": "Iran",
+  "イングランド": "England",
+  "インド": "Indien",
+  "インドネシア": "Indonesien",
+  "ウェールズ": "Wales",
+  "ウガンダ": "Uganda",
+  "ウクライナ": "Ukraine",
+  "ウズベキスタン": "Usbekistan",
+  "ウルグアイ": "Uruguay",
+  "エクアドル": "Ecuador",
+  "エジプト": "Ägypten",
+  "エストニア": "Estland",
+  "エスワティニ": "Eswatini",
+  "エチオピア": "Äthiopien",
+  "エリトリア": "Eritrea",
+  "エルサルバドル": "El Salvador",
+  "オーストラリア": "Australien",
+  "オーストリア": "Österreich",
+  "オマーン": "Oman",
+  "オランダ": "Niederlande",
+  "オランダ領アンティル": "Niederländische Antillen",
+  "ガーナ": "Ghana",
+  "カーボベルデ": "Kap Verde",
+  "ガーンジー島": "Guernsey",
+  "ガイアナ": "Guyana",
+  "カザフスタン": "Kasachstan",
+  "カタール": "Katar",
+  "カナダ": "Kanada",
+  "ガボン": "Gabun",
+  "カメルーン": "Kamerun",
+  "ガンビア": "Gambia",
+  "カンボジア": "Kambodscha",
+  "キプロス": "Zypern",
+  "ギニア": "Guinea",
+  "ギニア・ビサウ": "Guinea-Bissau",
+  "キューバ": "Kuba",
+  "ギリシャ": "Griechenland",
+  "キリバス": "Kiribati",
+  "キルギス": "Kirgisistan",
+  "グアテマラ": "Guatemala",
+  "グアドループ": "Guadeloupe",
+  "グアム": "Guam",
+  "クウェート": "Kuwait",
+  "クック諸島": "Cookinseln",
+  "グリーンランド": "Grönland",
+  "グレナダ": "Grenada",
+  "クロアチア": "Kroatien",
+  "ケイマン諸島": "Cayman Inseln",
+  "ケニア": "Kenia",
+  "コートジボワール": "Elfenbeinküste",
+  "コスタリカ": "Costa Rica",
+  "コソボ": "Kosovo",
+  "コモロ": "Komoren",
+  "コロンビア": "Columbia",
+  "コンゴ": "Kongo",
+  "コンゴ民主共和国": "Demokratische Republik Kongo",
+  "サウジアラビア": "Saudi-Arabien",
+  "サモア": "Samoa",
+  "サントメ・プリンシペ": "Sao Tome Principe",
+  "ザンビア": "Sambia",
+  "サン・マリの": "San Mali",
+  "シエラレオネ": "Sierra Leone",
+  "ジブチ": "Dschibuti",
+  "ジブラルタル": "Gibraltar",
+  "シリア": "Syrien",
+  "ジャージー島": "Jersey",
+  "ジャマイカ": "Jamaika",
+  "ジョージア": "Georgia",
+  "シンガポール": "Singapur",
+  "ジンバブエ": "Zimbabwe",
+  "スイス": "Schweiz",
+  "スウェーデン": "Schweden",
+  "スーダン": "Sudan",
+  "スコットランド": "Schottland",
+  "スペイン": "Spanien",
+  "スリナム": "Suriname",
+  "スリランカ": "Sri Lanka",
+  "スロバキア": "Slowakei",
+  "スロベニア": "Slowenien",
+  "セーシェル": "Seychellen",
+  "セネガル": "Senegal",
+  "セルビア": "Serbien",
+  "セントクリストファー・ネービス": "St. Kitts und Nevis",
+  "セントビンセントおよびグレナディーン諸島": "St. Vincent und die Grenadinen",
+  "セントルシア": "St. Lucia",
+  "ソマリア": "Somalia",
+  "ソマリランド": "Somaliland",
+  "ソロモン諸島": "Salomon-Inseln",
+  "タークス・カイコス諸島": "Turks- und Caicosinseln",
+  "タイ": "Thailand",
+  "タジキスタン": "Tadschikistan",
+  "タンザニア": "Tansania",
+  "チャド": "Tschad",
+  "チリ": "Chile",
+  "チェコ": "Tschechisch",
+  "ツバル": "Tuvalu",
+  "チュニジア": "Tunesien",
+  "デンマーク": "Dänemark",
+  "トーゴ": "Gehen",
+  "ドイツ": "Deutschland",
+  "ドミニカ": "Dominica",
+  "ドミニカ共和国": "Dominikanische Republik",
+  "トリニダード・ドバゴ": "Trinidad und Tobago",
+  "トルクメニスタン": "Turkmenistan",
+  "トルコ": "Truthahn",
+  "トンガ": "Tonga",
+  "ナイジェリア": "Nigeria",
+  "ナウル": "Nauru",
+  "ナミビア": "Namibia",
+  "ニカラグア": "Nicaragua",
+  "ニジェール": "Niger",
+  "ニューカレドニア": "Neu-Kaledonien",
+  "ニュージーランド": "Neuseeland",
+  "ネパール": "Nepal",
+  "ノルウェー": "Norwegen",
+  "バーレーン": "Bahrain",
+  "ハイチ": "Haiti",
+  "パキスタン": "Pakistan",
+  "パナマ": "Panama",
+  "バヌアツ": "Vanuatu",
+  "バハマ": "Bahamas",
+  "パプアニューギニア": "Papua Neu-Guinea",
+  "バミューダ諸島": "Bermuda",
+  "パラオ": "Palau",
+  "パラグアイ": "Paraguay",
+  "バルバドス": "Barbados",
+  "ハンガリー": "Ungarn",
+  "バングラデシュ": "Bangladesch",
+  "フィジー": "Fidschi",
+  "フィリピン": "Philippinen",
+  "フィンランド": "Finnland",
+  "プエルトリコ": "Puerto Rico",
+  "ブータン": "Bhutan",
+  "フェロー諸島": "Färöer Inseln",
+  "ブラジル": "Brasilien",
+  "フランス": "Frankreich",
+  "フランス領ポリネシア": "Französisch Polynesien",
+  "ブルガリア": "Bulgarien",
+  "ブルキナ・ファソ": "Burkina Faso",
+  "ブルネイ・ダルサラーム": "Brunei Darussalam",
+  "ブルンジ": "Burundi",
+  "ベトナム": "Vietnam",
+  "ベナン": "Benin",
+  "ベネズエラ": "Venezuela",
+  "ベラルーシ": "Weißrussland",
+  "ベリーズ": "Belize",
+  "ペルー": "Peru",
+  "ベルギー": "Belgien",
+  "ポーランド": "Polen",
+  "ボスニア・ヘルツェゴビナ": "Bosnien-Herzegowina",
+  "ボツワナ": "Botswana",
+  "ボリビア": "Bolivien",
+  "ポルトガル": "Portugal",
+  "ホンジュラス": "Honduras",
+  "マーシャル諸島": "Marshallinseln",
+  "マカオ": "Macau",
+  "マダガスカル": "Madagaskar",
+  "マラウイ": "Malawi",
+  "マリ": "Mali",
+  "マルタ": "Malta",
+  "マルティニーク": "Martinique",
+  "マレーシア": "Malaysia",
+  "マン島": "Isle of Man",
+  "ミクロネシア連邦": "Die Verbündeten Staaten von Micronesia",
+  "ミャンマー（ビルマ）": "Myanmar (Burma)",
+  "モーリシャス": "Mauritius",
+  "モーリタニア": "Mauretanien",
+  "モルディブ": "Malediven",
+  "メキシコ": "Mexiko",
+  "モザンビーク": "Mosambik",
+  "モナコ": "Monaco",
+  "モルドバ": "Moldawien",
+  "モロッコ": "Marokko",
+  "モンゴル": "Mongolei",
+  "モンセラート": "Montserrat",
+  "モンテネグロ": "Montenegro",
+  "ヨルダン": "Jordanien",
+  "ラオス": "Laos",
+  "ラトビア": "Lettland",
+  "リトアニア": "Litauen",
+  "リヒテンシュタイン": "Liechtenstein",
+  "リビア": "Libyen",
+  "リベリア": "Liberia",
+  "ルーマニア": "Rumänien",
+  "ルクセンブルク": "Luxemburg",
+  "ルワンダ": "Ruanda",
+  "レソト": "Lesotho",
+  "レバノン": "Libanon",
+  "レユニオン": "Wiedervereinigung",
+  "ローマ教皇庁 (バチカン)": "Römische Kurie (Vatikan)",
+  "ロシア": "Russland"
+}
\ No newline at end of file
diff --git a/resources/lang/de/site.php b/resources/lang/de/site.php
new file mode 100644
index 0000000..c85585a
--- /dev/null
+++ b/resources/lang/de/site.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+  'tuika' => 'ergänzen',
+  'hensyu' => 'Bearbeiten',
+  'sakujyo' => 'Löschen',
+  'signin' => 'Einloggen',
+  'signout' => 'Ausloggen',
+  'toroku' => 'Anmeldung',
+  'sinkitoroku' => 'Anmelden',
+  'hissu' => 'Verpflichtend',
+  'username' => 'Nutzername',
+  'hyojiname' => 'Anzeigename',
+  'hyojiname_memo' => 'Wenn Sie es nicht eingeben, wird der Benutzername angezeigt.',
+  'password' => 'Passwort',
+  'password_memo' => 'Wenn Sie das Passwort nicht ändern, geben Sie es nicht so ein, wie es ist.',
+  'passwordkakunin' => 'Passwort Bestätigung',
+  'kuni' => 'Land',
+  'seibetu' => 'Sex',
+  'densimail' => 'Email',
+  'de_kokai' => 'Veröffentlicht am :date',
+  'no_icon' => ':namessymbol',
+  'jikosyokai' => 'Vorstellen',
+  'ippan' => 'Allgemeines',
+  'renraku' => 'Kontakt',
+  'gengo' => 'Sprache',
+  'top' => 'oben',
+  'doga' => 'Video',
+  'profilenohyoji' => 'Profil anzeigen',
+  'profilenohensyu' => 'Profil bearbeiten',
+  'tokonotuika' => 'Beitrag hinzufügen',
+  'doganotuika' => 'Video hinzufügen',
+  'comentitiran' => 'Liste der Kommentare',
+  'useritiran' => 'Benutzerliste',
+  'minyukaimono' => 'Nichtmitglieder',
+];
diff --git a/resources/lang/en.json b/resources/lang/en.json
new file mode 100644
index 0000000..987df9f
--- /dev/null
+++ b/resources/lang/en.json
@@ -0,0 +1,233 @@
+{
+  "男性": "male",
+  "女性": "Female",
+  "不明": "unknown",
+  "日本": "Japan",
+  "大韓民国": "South Korea",
+  "中華人民共和国": "People's Republic of China",
+  "香港": "Hong Kong",
+  "台湾": "Taiwan",
+  "赤道ギニア": "Equatorial Guinea",
+  "北アイルランド": "Northern Ireland",
+  "北朝鮮": "North Korea",
+  "北マケドニア": "North Macedonia",
+  "中央アフリカ共和国": "Central African Republic",
+  "東ティモール": "East Timor",
+  "南極": "Antarctic",
+  "南アフリカ": "South Africa",
+  "西サハラ": "Western Sahara",
+  "アイスランド": "Iceland",
+  "アイルランド": "Ireland",
+  "アゼルバイジャン": "Azerbaijan",
+  "アフガニスタン": "Afghanistan",
+  "アメリカ領ヴァージン諸島": "American Virgin Islands",
+  "アメリカ領サモア": "American Samoa",
+  "アメリカ合衆国": "United States of America",
+  "アラブ首長国連邦": "United Arab Emirates",
+  "アルジェリア": "Algeria",
+  "アルゼンチン": "Argentina",
+  "アルバ": "Aruba",
+  "アルバニア": "Albania",
+  "アルメニア": "Armenia",
+  "アンゴラ": "Angola",
+  "アングィラ": "Anguilla",
+  "アンティグア・バーブーダ": "Antigua and Barbuda",
+  "アンドラ": "Andorra",
+  "イエメン": "Yemen",
+  "イギリス": "England",
+  "イギリス領バージン諸島": "British Virgin Islands",
+  "イスラエル": "Israel",
+  "イタリア": "Italy",
+  "イラク": "Iraq",
+  "イラン": "Iran",
+  "イングランド": "England",
+  "インド": "India",
+  "インドネシア": "Indonesia",
+  "ウェールズ": "Wales",
+  "ウガンダ": "Uganda",
+  "ウクライナ": "Ukraine",
+  "ウズベキスタン": "Uzbekistan",
+  "ウルグアイ": "Uruguay",
+  "エクアドル": "Ecuador",
+  "エジプト": "Egypt",
+  "エストニア": "Estonia",
+  "エスワティニ": "Eswatini",
+  "エチオピア": "Ethiopia",
+  "エリトリア": "Eritrea",
+  "エルサルバドル": "El salvador",
+  "オーストラリア": "Australia",
+  "オーストリア": "Austria",
+  "オマーン": "Oman",
+  "オランダ": "Netherlands",
+  "オランダ領アンティル": "Dutch antilles",
+  "ガーナ": "Ghana",
+  "カーボベルデ": "Cape Verde",
+  "ガーンジー島": "Guernsey",
+  "ガイアナ": "Guyana",
+  "カザフスタン": "Kazakhstan",
+  "カタール": "Qatar",
+  "カナダ": "Canada",
+  "ガボン": "Gabon",
+  "カメルーン": "Cameroon",
+  "ガンビア": "Gambia",
+  "カンボジア": "Cambodia",
+  "キプロス": "Cyprus",
+  "ギニア": "Guinea",
+  "ギニア・ビサウ": "Guinea-Bissau",
+  "キューバ": "Cuba",
+  "ギリシャ": "Greece",
+  "キリバス": "Kiribati",
+  "キルギス": "Kyrgyzstan",
+  "グアテマラ": "Guatemala",
+  "グアドループ": "Guadeloupe",
+  "グアム": "Guam",
+  "クウェート": "Kuwait",
+  "クック諸島": "Cook Islands",
+  "グリーンランド": "Greenland",
+  "グレナダ": "Grenada",
+  "クロアチア": "Croatia",
+  "ケイマン諸島": "Cayman Islands",
+  "ケニア": "Kenya",
+  "コートジボワール": "Cote d'Ivoire",
+  "コスタリカ": "Costa Rica",
+  "コソボ": "Kosovo",
+  "コモロ": "Comoros",
+  "コロンビア": "Columbia",
+  "コンゴ": "Congo",
+  "コンゴ民主共和国": "Democratic Republic of the Congo",
+  "サウジアラビア": "Saudi Arabia",
+  "サモア": "Samoa",
+  "サントメ・プリンシペ": "Sao Tome Principe",
+  "ザンビア": "Zambia",
+  "サン・マリの": "San Mali",
+  "シエラレオネ": "Sierra Leone",
+  "ジブチ": "Djibouti",
+  "ジブラルタル": "Gibraltar",
+  "シリア": "Syria",
+  "ジャージー島": "Jersey",
+  "ジャマイカ": "Jamaica",
+  "ジョージア": "Georgia",
+  "シンガポール": "Singapore",
+  "ジンバブエ": "Zimbabwe",
+  "スイス": "Switzerland",
+  "スウェーデン": "Sweden",
+  "スーダン": "Sudan",
+  "スコットランド": "Scotland",
+  "スペイン": "Spain",
+  "スリナム": "Suriname",
+  "スリランカ": "Sri Lanka",
+  "スロバキア": "Slovakia",
+  "スロベニア": "Slovenia",
+  "セーシェル": "Seychelles",
+  "セネガル": "Senegal",
+  "セルビア": "Serbia",
+  "セントクリストファー・ネービス": "Saint Kitts and Nevis",
+  "セントビンセントおよびグレナディーン諸島": "Saint Vincent and the Grenadines",
+  "セントルシア": "Saint Lucia",
+  "ソマリア": "Somalia",
+  "ソマリランド": "Somaliland",
+  "ソロモン諸島": "Solomon Islands",
+  "タークス・カイコス諸島": "Turks and Caicos Islands",
+  "タイ": "Thailand",
+  "タジキスタン": "Tajikistan",
+  "タンザニア": "Tanzania",
+  "チャド": "Chad",
+  "チリ": "Chile",
+  "チェコ": "Czech",
+  "ツバル": "Tuvalu",
+  "チュニジア": "Tunisia",
+  "デンマーク": "Denmark",
+  "トーゴ": "Togo",
+  "ドイツ": "Germany",
+  "ドミニカ": "Dominica",
+  "ドミニカ共和国": "Dominican Republic",
+  "トリニダード・ドバゴ": "Trinidad and Tobago",
+  "トルクメニスタン": "Turkmenistan",
+  "トルコ": "Turkey",
+  "トンガ": "Tonga",
+  "ナイジェリア": "Nigeria",
+  "ナウル": "Nauru",
+  "ナミビア": "Namibia",
+  "ニカラグア": "Nicaragua",
+  "ニジェール": "Niger",
+  "ニューカレドニア": "New Caledonia",
+  "ニュージーランド": "new Zealand",
+  "ネパール": "Nepal",
+  "ノルウェー": "Norway",
+  "バーレーン": "Bahrain",
+  "ハイチ": "Haiti",
+  "パキスタン": "Pakistan",
+  "パナマ": "Panama",
+  "バヌアツ": "Vanuatu",
+  "バハマ": "Bahamas",
+  "パプアニューギニア": "Papua New Guinea",
+  "バミューダ諸島": "Bermuda",
+  "パラオ": "Palau",
+  "パラグアイ": "Paraguay",
+  "バルバドス": "Barbados",
+  "ハンガリー": "Hungary",
+  "バングラデシュ": "Bangladesh",
+  "フィジー": "Fiji",
+  "フィリピン": "Philippines",
+  "フィンランド": "Finland",
+  "プエルトリコ": "Puerto Rico",
+  "ブータン": "Bhutan",
+  "フェロー諸島": "Faroe Islands",
+  "ブラジル": "Brazil",
+  "フランス": "France",
+  "フランス領ポリネシア": "French Polynesia",
+  "ブルガリア": "Bulgaria",
+  "ブルキナ・ファソ": "Burkina Faso",
+  "ブルネイ・ダルサラーム": "Brunei Darussalam",
+  "ブルンジ": "Burundi",
+  "ベトナム": "Vietnam",
+  "ベナン": "Benin",
+  "ベネズエラ": "Venezuela",
+  "ベラルーシ": "Belarus",
+  "ベリーズ": "Belize",
+  "ペルー": "Peru",
+  "ベルギー": "Belgium",
+  "ポーランド": "Poland",
+  "ボスニア・ヘルツェゴビナ": "Bosnia-Herzegovina",
+  "ボツワナ": "Botswana",
+  "ボリビア": "Bolivia",
+  "ポルトガル": "Portugal",
+  "ホンジュラス": "Honduras",
+  "マーシャル諸島": "Marshall Islands",
+  "マカオ": "Macau",
+  "マダガスカル": "Madagascar",
+  "マラウイ": "Malawi",
+  "マリ": "Mali",
+  "マルタ": "Malta",
+  "マルティニーク": "Martinique",
+  "マレーシア": "Malaysia",
+  "マン島": "Isle of Man",
+  "ミクロネシア連邦": "Federated States of Micronesia",
+  "ミャンマー（ビルマ）": "Myanmar (Burma)",
+  "モーリシャス": "Mauritius",
+  "モーリタニア": "Mauritania",
+  "モルディブ": "Maldives",
+  "メキシコ": "Mexico",
+  "モザンビーク": "Mozambique",
+  "モナコ": "Monaco",
+  "モルドバ": "Moldova",
+  "モロッコ": "Morocco",
+  "モンゴル": "Mongolia",
+  "モンセラート": "Montserrat",
+  "モンテネグロ": "Montenegro",
+  "ヨルダン": "Jordan",
+  "ラオス": "Laos",
+  "ラトビア": "Latvia",
+  "リトアニア": "Lithuania",
+  "リヒテンシュタイン": "Liechtenstein",
+  "リビア": "Libya",
+  "リベリア": "Liberia",
+  "ルーマニア": "Romania",
+  "ルクセンブルク": "Luxembourg",
+  "ルワンダ": "Rwanda",
+  "レソト": "Lesotho",
+  "レバノン": "Lebanon",
+  "レユニオン": "Reunion",
+  "ローマ教皇庁 (バチカン)": "Roman Curia (Vatican)",
+  "ロシア": "Russia"
+}
\ No newline at end of file
diff --git a/resources/lang/en/site.php b/resources/lang/en/site.php
new file mode 100644
index 0000000..32e90a6
--- /dev/null
+++ b/resources/lang/en/site.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+  'tuika' => 'add to',
+  'hensyu' => 'Edit',
+  'sakujyo' => 'Delete',
+  'signin' => 'Sign in',
+  'signout' => 'Sign out',
+  'toroku' => 'Registration',
+  'sinkitoroku' => 'sign up',
+  'hissu' => 'Mandatory',
+  'username' => 'username',
+  'hyojiname' => 'Showing name',
+  'hyojiname_memo' => 'If you do not enter it, the user name will be displayed.',
+  'password' => 'password',
+  'password_memo' => 'If you do not change the password, do not enter it as it is.',
+  'passwordkakunin' => 'Password confirmation',
+  'kuni' => 'Country',
+  'seibetu' => 'sex',
+  'densimail' => 'e-mail',
+  'de_kokai' => 'Published by :date',
+  'no_icon' => ':name\'s icon',
+  'jikosyokai' => 'Self-introduction',
+  'ippan' => 'General',
+  'renraku' => 'Contact',
+  'gengo' => 'language',
+  'top' => 'Top',
+  'doga' => 'Video',
+  'profilenohyoji' => 'View profile',
+  'profilenohensyu' => 'Edit profile',
+  'tokonotuika' => 'Add post',
+  'doganotuika' => 'Add video',
+  'comentitiran' => 'List of comments',
+  'useritiran' => 'User list',
+  'minyukaimono' => 'Non-members',
+];
diff --git a/resources/lang/es.json b/resources/lang/es.json
new file mode 100644
index 0000000..6c3cd6c
--- /dev/null
+++ b/resources/lang/es.json
@@ -0,0 +1,233 @@
+{
+  "男性": "masculino",
+  "女性": "Mujer",
+  "不明": "desconocido",
+  "日本": "Japón",
+  "大韓民国": "Corea del Sur",
+  "中華人民共和国": "República Popular de China",
+  "香港": "Hong Kong",
+  "台湾": "Taiwán",
+  "赤道ギニア": "Guinea Ecuatorial",
+  "北アイルランド": "Irlanda del Norte",
+  "北朝鮮": "Corea del Norte",
+  "北マケドニア": "Macedonia del Norte",
+  "中央アフリカ共和国": "República Centroafricana",
+  "東ティモール": "Timor Oriental",
+  "南極": "antártico",
+  "南アフリカ": "Sudáfrica",
+  "西サハラ": "Sahara Occidental",
+  "アイスランド": "Islandia",
+  "アイルランド": "Irlanda",
+  "アゼルバイジャン": "Azerbaiyán",
+  "アフガニスタン": "Afganistán",
+  "アメリカ領ヴァージン諸島": "Islas Vírgenes Americanas",
+  "アメリカ領サモア": "Samoa Americana",
+  "アメリカ合衆国": "Estados Unidos de América",
+  "アラブ首長国連邦": "Emiratos Árabes Unidos",
+  "アルジェリア": "Argelia",
+  "アルゼンチン": "Argentina",
+  "アルバ": "Aruba",
+  "アルバニア": "Albania",
+  "アルメニア": "Armenia",
+  "アンゴラ": "Angola",
+  "アングィラ": "Anguila",
+  "アンティグア・バーブーダ": "Antigua y Barbuda",
+  "アンドラ": "Andorra",
+  "イエメン": "Yemen",
+  "イギリス": "Inglaterra",
+  "イギリス領バージン諸島": "Islas Vírgenes Británicas",
+  "イスラエル": "Israel",
+  "イタリア": "Italia",
+  "イラク": "Irak",
+  "イラン": "Iran",
+  "イングランド": "Inglaterra",
+  "インド": "India",
+  "インドネシア": "Indonesia",
+  "ウェールズ": "Gales",
+  "ウガンダ": "Uganda",
+  "ウクライナ": "Ucrania",
+  "ウズベキスタン": "Uzbekistan",
+  "ウルグアイ": "Uruguay",
+  "エクアドル": "Ecuador",
+  "エジプト": "Egipto",
+  "エストニア": "Estonia",
+  "エスワティニ": "Eswatini",
+  "エチオピア": "Etiopía",
+  "エリトリア": "Eritrea",
+  "エルサルバドル": "El Salvador",
+  "オーストラリア": "Australia",
+  "オーストリア": "Austria",
+  "オマーン": "Omán",
+  "オランダ": "Países Bajos",
+  "オランダ領アンティル": "Antillas holandesas",
+  "ガーナ": "Ghana",
+  "カーボベルデ": "Cabo Verde",
+  "ガーンジー島": "Guernsey",
+  "ガイアナ": "Guayana",
+  "カザフスタン": "Kazajstán",
+  "カタール": "Katar",
+  "カナダ": "Canadá",
+  "ガボン": "Gabón",
+  "カメルーン": "Camerún",
+  "ガンビア": "Gambia",
+  "カンボジア": "Camboya",
+  "キプロス": "Chipre",
+  "ギニア": "Guinea",
+  "ギニア・ビサウ": "Guinea-Bissau",
+  "キューバ": "Cuba",
+  "ギリシャ": "Grecia",
+  "キリバス": "Kiribati",
+  "キルギス": "Kirguistán",
+  "グアテマラ": "Guatemala",
+  "グアドループ": "Guadalupe",
+  "グアム": "Guam",
+  "クウェート": "Kuwait",
+  "クック諸島": "Islas Cook",
+  "グリーンランド": "Groenlandia",
+  "グレナダ": "Granada",
+  "クロアチア": "Croacia",
+  "ケイマン諸島": "Islas Caimán",
+  "ケニア": "Kenia",
+  "コートジボワール": "Costa de Marfil",
+  "コスタリカ": "Costa Rica",
+  "コソボ": "Kosovo",
+  "コモロ": "Comoras",
+  "コロンビア": "Columbia",
+  "コンゴ": "Congo",
+  "コンゴ民主共和国": "República Democrática del Congo",
+  "サウジアラビア": "Arabia Saudita",
+  "サモア": "Samoa",
+  "サントメ・プリンシペ": "Santo Tomé Príncipe",
+  "ザンビア": "Zambia",
+  "サン・マリの": "San Mali",
+  "シエラレオネ": "Sierra Leona",
+  "ジブチ": "Djibouti",
+  "ジブラルタル": "Gibraltar",
+  "シリア": "Siria",
+  "ジャージー島": "Jersey",
+  "ジャマイカ": "Jamaica",
+  "ジョージア": "Georgia",
+  "シンガポール": "Singapur",
+  "ジンバブエ": "Zimbabue",
+  "スイス": "Suiza",
+  "スウェーデン": "Suecia",
+  "スーダン": "Sudán",
+  "スコットランド": "Escocia",
+  "スペイン": "España",
+  "スリナム": "Surinam",
+  "スリランカ": "Sri Lanka",
+  "スロバキア": "Eslovaquia",
+  "スロベニア": "Eslovenia",
+  "セーシェル": "Seychelles",
+  "セネガル": "Senegal",
+  "セルビア": "Serbia",
+  "セントクリストファー・ネービス": "San Cristóbal y Nieves",
+  "セントビンセントおよびグレナディーン諸島": "San Vicente y las Granadinas",
+  "セントルシア": "Santa Lucía",
+  "ソマリア": "Somalia",
+  "ソマリランド": "Somalilandia",
+  "ソロモン諸島": "Islas Salomón",
+  "タークス・カイコス諸島": "Islas Turcas y Caicos",
+  "タイ": "Tailandia",
+  "タジキスタン": "Tayikistán",
+  "タンザニア": "Tanzania",
+  "チャド": "Chad",
+  "チリ": "Chile",
+  "チェコ": "checo",
+  "ツバル": "Tuvalu",
+  "チュニジア": "Túnez",
+  "デンマーク": "Dinamarca",
+  "トーゴ": "Para llevar",
+  "ドイツ": "Alemania",
+  "ドミニカ": "Dominica",
+  "ドミニカ共和国": "República Dominicana",
+  "トリニダード・ドバゴ": "Trinidad y Tobago",
+  "トルクメニスタン": "Turkmenistán",
+  "トルコ": "pavo",
+  "トンガ": "Tonga",
+  "ナイジェリア": "Nigeria",
+  "ナウル": "Nauru",
+  "ナミビア": "Namibia",
+  "ニカラグア": "Nicaragua",
+  "ニジェール": "Níger",
+  "ニューカレドニア": "Nueva Caledonia",
+  "ニュージーランド": "Nueva Zelanda",
+  "ネパール": "Nepal",
+  "ノルウェー": "Noruega",
+  "バーレーン": "Bahréin",
+  "ハイチ": "Haití",
+  "パキスタン": "Pakistán",
+  "パナマ": "Panamá",
+  "バヌアツ": "Vanuatu",
+  "バハマ": "Bahamas",
+  "パプアニューギニア": "Papúa Nueva Guinea",
+  "バミューダ諸島": "islas Bermudas",
+  "パラオ": "Palau",
+  "パラグアイ": "Paraguay",
+  "バルバドス": "Barbados",
+  "ハンガリー": "Hungría",
+  "バングラデシュ": "Bangladesh",
+  "フィジー": "Fiyi",
+  "フィリピン": "Filipinas",
+  "フィンランド": "Finlandia",
+  "プエルトリコ": "Puerto Rico",
+  "ブータン": "Bután",
+  "フェロー諸島": "Islas Faroe",
+  "ブラジル": "Brasil",
+  "フランス": "Francia",
+  "フランス領ポリネシア": "Polinesia francés",
+  "ブルガリア": "Bulgaria",
+  "ブルキナ・ファソ": "Burkina Faso",
+  "ブルネイ・ダルサラーム": "Brunei Darussalam",
+  "ブルンジ": "Burundi",
+  "ベトナム": "Vietnam",
+  "ベナン": "Benin",
+  "ベネズエラ": "Venezuela",
+  "ベラルーシ": "Bielorrusia",
+  "ベリーズ": "Belice",
+  "ペルー": "Perú",
+  "ベルギー": "Bélgica",
+  "ポーランド": "Polonia",
+  "ボスニア・ヘルツェゴビナ": "Bosnia-Herzegovina",
+  "ボツワナ": "Botswana",
+  "ボリビア": "Bolivia",
+  "ポルトガル": "Portugal",
+  "ホンジュラス": "Honduras",
+  "マーシャル諸島": "Islas Marshall",
+  "マカオ": "Macao",
+  "マダガスカル": "Madagascar",
+  "マラウイ": "Malawi",
+  "マリ": "Mali",
+  "マルタ": "Malta",
+  "マルティニーク": "Martinica",
+  "マレーシア": "Malasia",
+  "マン島": "Isla del hombre",
+  "ミクロネシア連邦": "Estados Federados de Micronesia",
+  "ミャンマー（ビルマ）": "Myanmar (Birmania)",
+  "モーリシャス": "Mauricio",
+  "モーリタニア": "Mauritania",
+  "モルディブ": "Maldivas",
+  "メキシコ": "México",
+  "モザンビーク": "Mozambique",
+  "モナコ": "Mónaco",
+  "モルドバ": "Moldavia",
+  "モロッコ": "Marruecos",
+  "モンゴル": "Mongolia",
+  "モンセラート": "Montserrat",
+  "モンテネグロ": "Montenegro",
+  "ヨルダン": "Jordán",
+  "ラオス": "Laos",
+  "ラトビア": "Letonia",
+  "リトアニア": "Lituania",
+  "リヒテンシュタイン": "Liechtenstein",
+  "リビア": "Libia",
+  "リベリア": "Liberia",
+  "ルーマニア": "Rumania",
+  "ルクセンブルク": "Luxemburgo",
+  "ルワンダ": "Ruanda",
+  "レソト": "Lesoto",
+  "レバノン": "Líbano",
+  "レユニオン": "Reunión",
+  "ローマ教皇庁 (バチカン)": "Curia romana (Vaticano)",
+  "ロシア": "Rusia"
+}
\ No newline at end of file
diff --git a/resources/lang/es/site.php b/resources/lang/es/site.php
new file mode 100644
index 0000000..e544ff9
--- /dev/null
+++ b/resources/lang/es/site.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+  'tuika' => 'añadir',
+  'hensyu' => 'Editar',
+  'sakujyo' => 'Borrar',
+  'signin' => 'Registrarse',
+  'signout' => 'desconectar',
+  'toroku' => 'Registro',
+  'sinkitoroku' => 'inscribirse',
+  'hissu' => 'Obligatorio',
+  'username' => 'nombre de usuario',
+  'hyojiname' => 'nombre para mostrar',
+  'hyojiname_memo' => 'Si no lo ingresa, se mostrará el nombre de usuario.',
+  'password' => 'contraseña',
+  'password_memo' => 'Si no cambia la contraseña, no la ingrese como está.',
+  'passwordkakunin' => 'confirmación de contraseña',
+  'kuni' => 'País',
+  'seibetu' => 'sexo',
+  'densimail' => 'Email',
+  'de_kokai' => 'Publicado el :date',
+  'no_icon' => 'icono del :name',
+  'jikosyokai' => 'Auto presentación',
+  'ippan' => 'General',
+  'renraku' => 'Contacto',
+  'gengo' => 'idioma',
+  'top' => 'Cima',
+  'doga' => 'Video',
+  'profilenohyoji' => 'Ver perfil',
+  'profilenohensyu' => 'Editar perfil',
+  'tokonotuika' => 'Agregar publicación',
+  'doganotuika' => 'Añadir video',
+  'comentitiran' => 'Lista de comentarios',
+  'useritiran' => 'Lista de usuarios',
+  'minyukaimono' => 'No miembros',
+];
diff --git a/resources/lang/fr.json b/resources/lang/fr.json
new file mode 100644
index 0000000..1b7db34
--- /dev/null
+++ b/resources/lang/fr.json
@@ -0,0 +1,233 @@
+{
+  "男性": "Masculin",
+  "女性": "Femme",
+  "不明": "inconnu",
+  "日本": "Japon",
+  "大韓民国": "Corée du Sud",
+  "中華人民共和国": "les gens de la République de Chine",
+  "香港": "Hong Kong",
+  "台湾": "Taïwan",
+  "赤道ギニア": "Guinée Équatoriale",
+  "北アイルランド": "Irlande du Nord",
+  "北朝鮮": "Corée du Nord",
+  "北マケドニア": "Macédoine du Nord",
+  "中央アフリカ共和国": "République centrafricaine",
+  "東ティモール": "Timor oriental",
+  "南極": "antarctique",
+  "南アフリカ": "Afrique du Sud",
+  "西サハラ": "Sahara occidental",
+  "アイスランド": "Islande",
+  "アイルランド": "Irlande",
+  "アゼルバイジャン": "Azerbaïdjan",
+  "アフガニスタン": "L'Afghanistan",
+  "アメリカ領ヴァージン諸島": "Iles Vierges Américaines",
+  "アメリカ領サモア": "Samoa américaines",
+  "アメリカ合衆国": "les États-Unis d'Amérique",
+  "アラブ首長国連邦": "Emirats Arabes Unis",
+  "アルジェリア": "Algérie",
+  "アルゼンチン": "Argentine",
+  "アルバ": "Aruba",
+  "アルバニア": "Albanie",
+  "アルメニア": "Arménie",
+  "アンゴラ": "L'Angola",
+  "アングィラ": "Anguilla",
+  "アンティグア・バーブーダ": "Antigua-et-Barbuda",
+  "アンドラ": "Andorre",
+  "イエメン": "Yémen",
+  "イギリス": "Angleterre",
+  "イギリス領バージン諸島": "Îles Vierges britanniques",
+  "イスラエル": "Israël",
+  "イタリア": "Italie",
+  "イラク": "Irak",
+  "イラン": "L'Iran",
+  "イングランド": "Angleterre",
+  "インド": "Inde",
+  "インドネシア": "Indonésie",
+  "ウェールズ": "Pays de Galles",
+  "ウガンダ": "Ouganda",
+  "ウクライナ": "Ukraine",
+  "ウズベキスタン": "Ouzbékistan",
+  "ウルグアイ": "Uruguay",
+  "エクアドル": "Equateur",
+  "エジプト": "Egypte",
+  "エストニア": "Estonie",
+  "エスワティニ": "Eswatini",
+  "エチオピア": "Ethiopie",
+  "エリトリア": "Érythrée",
+  "エルサルバドル": "Le Salvador",
+  "オーストラリア": "Australie",
+  "オーストリア": "L'Autriche",
+  "オマーン": "Oman",
+  "オランダ": "Pays-Bas",
+  "オランダ領アンティル": "Antilles néerlandaises",
+  "ガーナ": "Ghana",
+  "カーボベルデ": "Cap-Vert",
+  "ガーンジー島": "Guernesey",
+  "ガイアナ": "Guyane",
+  "カザフスタン": "Kazakhstan",
+  "カタール": "Qatar",
+  "カナダ": "Canada",
+  "ガボン": "Gabon",
+  "カメルーン": "Cameroun",
+  "ガンビア": "Gambie",
+  "カンボジア": "Cambodge",
+  "キプロス": "Chypre",
+  "ギニア": "Guinée",
+  "ギニア・ビサウ": "Guinée-Bissau",
+  "キューバ": "Cuba",
+  "ギリシャ": "Grèce",
+  "キリバス": "Kiribati",
+  "キルギス": "Kirghizistan",
+  "グアテマラ": "Guatemala",
+  "グアドループ": "Guadeloupe",
+  "グアム": "Guam",
+  "クウェート": "Koweit",
+  "クック諸島": "les Îles Cook",
+  "グリーンランド": "Groenland",
+  "グレナダ": "Grenade",
+  "クロアチア": "Croatie",
+  "ケイマン諸島": "Îles Caïmans",
+  "ケニア": "Kenya",
+  "コートジボワール": "Côte d'Ivoire",
+  "コスタリカ": "Costa Rica",
+  "コソボ": "Kosovo",
+  "コモロ": "Comores",
+  "コロンビア": "Columbia",
+  "コンゴ": "Congo",
+  "コンゴ民主共和国": "République Démocratique du Congo",
+  "サウジアラビア": "Arabie Saoudite",
+  "サモア": "Samoa",
+  "サントメ・プリンシペ": "Sao Tomé Principe",
+  "ザンビア": "Zambie",
+  "サン・マリの": "San Mali",
+  "シエラレオネ": "Sierra Leone",
+  "ジブチ": "Djibouti",
+  "ジブラルタル": "Gibraltar",
+  "シリア": "Syrie",
+  "ジャージー島": "Jersey",
+  "ジャマイカ": "Jamaïque",
+  "ジョージア": "Géorgie",
+  "シンガポール": "Singapour",
+  "ジンバブエ": "Zimbabwe",
+  "スイス": "la Suisse",
+  "スウェーデン": "Suède",
+  "スーダン": "Soudan",
+  "スコットランド": "Écosse",
+  "スペイン": "Espagne",
+  "スリナム": "Suriname",
+  "スリランカ": "Sri Lanka",
+  "スロバキア": "Slovaquie",
+  "スロベニア": "Slovénie",
+  "セーシェル": "les Seychelles",
+  "セネガル": "Sénégal",
+  "セルビア": "Serbie",
+  "セントクリストファー・ネービス": "Saint-Christophe-et-Niévès",
+  "セントビンセントおよびグレナディーン諸島": "Saint-Vincent-et-les-Grenadines",
+  "セントルシア": "Sainte-Lucie",
+  "ソマリア": "Somalie",
+  "ソマリランド": "Somaliland",
+  "ソロモン諸島": "Les îles Salomon",
+  "タークス・カイコス諸島": "îles Turques-et-Caïques",
+  "タイ": "Thaïlande",
+  "タジキスタン": "Tadjikistan",
+  "タンザニア": "Tanzanie",
+  "チャド": "Tchad",
+  "チリ": "Chili",
+  "チェコ": "tchèque",
+  "ツバル": "Tuvalu",
+  "チュニジア": "Tunisie",
+  "デンマーク": "Danemark",
+  "トーゴ": "Aller",
+  "ドイツ": "Allemagne",
+  "ドミニカ": "Dominique",
+  "ドミニカ共和国": "République dominicaine",
+  "トリニダード・ドバゴ": "Trinité-et-Tobago",
+  "トルクメニスタン": "Turkménistan",
+  "トルコ": "dinde",
+  "トンガ": "Tonga",
+  "ナイジェリア": "Nigeria",
+  "ナウル": "Nauru",
+  "ナミビア": "Namibie",
+  "ニカラグア": "Nicaragua",
+  "ニジェール": "Niger",
+  "ニューカレドニア": "Nouvelle Calédonie",
+  "ニュージーランド": "Nouvelle-Zélande",
+  "ネパール": "Népal",
+  "ノルウェー": "Norvège",
+  "バーレーン": "Bahreïn",
+  "ハイチ": "Haïti",
+  "パキスタン": "Pakistan",
+  "パナマ": "Panama",
+  "バヌアツ": "Vanuatu",
+  "バハマ": "Bahamas",
+  "パプアニューギニア": "Papouasie Nouvelle Guinée",
+  "バミューダ諸島": "Bermudes",
+  "パラオ": "Palau",
+  "パラグアイ": "Paraguay",
+  "バルバドス": "Barbade",
+  "ハンガリー": "Hongrie",
+  "バングラデシュ": "Bangladesh",
+  "フィジー": "Fidji",
+  "フィリピン": "Philippines",
+  "フィンランド": "Finlande",
+  "プエルトリコ": "Porto Rico",
+  "ブータン": "Bhoutan",
+  "フェロー諸島": "Îles Féroé",
+  "ブラジル": "Brésil",
+  "フランス": "France",
+  "フランス領ポリネシア": "Polynésie française",
+  "ブルガリア": "Bulgarie",
+  "ブルキナ・ファソ": "Burkina Faso",
+  "ブルネイ・ダルサラーム": "Brunei Darussalam",
+  "ブルンジ": "Burundi",
+  "ベトナム": "Vietnam",
+  "ベナン": "Bénin",
+  "ベネズエラ": "Venezuela",
+  "ベラルーシ": "Biélorussie",
+  "ベリーズ": "Belize",
+  "ペルー": "Pérou",
+  "ベルギー": "Belgique",
+  "ポーランド": "Pologne",
+  "ボスニア・ヘルツェゴビナ": "Bosnie-Herzégovine",
+  "ボツワナ": "Botswana",
+  "ボリビア": "Bolivie",
+  "ポルトガル": "le Portugal",
+  "ホンジュラス": "Honduras",
+  "マーシャル諸島": "Iles Marshall",
+  "マカオ": "Macao",
+  "マダガスカル": "Madagascar",
+  "マラウイ": "Malawi",
+  "マリ": "Mali",
+  "マルタ": "Malte",
+  "マルティニーク": "Martinique",
+  "マレーシア": "Malaisie",
+  "マン島": "île de Man",
+  "ミクロネシア連邦": "États fédérés de Micronésie",
+  "ミャンマー（ビルマ）": "Myanmar (Birmanie)",
+  "モーリシャス": "Ile Maurice",
+  "モーリタニア": "Mauritanie",
+  "モルディブ": "Maldives",
+  "メキシコ": "Mexique",
+  "モザンビーク": "Mozambique",
+  "モナコ": "Monaco",
+  "モルドバ": "Moldavie",
+  "モロッコ": "Maroc",
+  "モンゴル": "Mongolie",
+  "モンセラート": "Montserrat",
+  "モンテネグロ": "Monténégro",
+  "ヨルダン": "Jordan",
+  "ラオス": "Laos",
+  "ラトビア": "Lettonie",
+  "リトアニア": "Lituanie",
+  "リヒテンシュタイン": "Liechtenstein",
+  "リビア": "Libye",
+  "リベリア": "Libéria",
+  "ルーマニア": "Roumanie",
+  "ルクセンブルク": "Luxembourg",
+  "ルワンダ": "Rwanda",
+  "レソト": "Lesotho",
+  "レバノン": "Liban",
+  "レユニオン": "Réunion",
+  "ローマ教皇庁 (バチカン)": "Curie romaine (Vatican)",
+  "ロシア": "Russie"
+}
\ No newline at end of file
diff --git a/resources/lang/fr/site.php b/resources/lang/fr/site.php
new file mode 100644
index 0000000..e9ed7e6
--- /dev/null
+++ b/resources/lang/fr/site.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+  'tuika' => 'Ajouter à',
+  'hensyu' => 'Éditer',
+  'sakujyo' => 'Effacer',
+  'signin' => 'S\'identifier',
+  'signout' => 'Déconnexion',
+  'toroku' => 'Inscription',
+  'sinkitoroku' => 'S\'inscrire',
+  'hissu' => 'Obligatoire',
+  'username' => 'Nom d\'utilisateur',
+  'hyojiname' => 'Afficher un nom',
+  'hyojiname_memo' => 'Si vous ne le saisissez pas, le nom d\'utilisateur s\'affiche.',
+  'password' => 'le mot de passe',
+  'password_memo' => 'Si vous ne modifiez pas le mot de passe, ne le saisissez pas tel quel.',
+  'passwordkakunin' => 'Confirmation mot de passe',
+  'kuni' => 'De campagne',
+  'seibetu' => 'sexe',
+  'densimail' => 'e-mail',
+  'de_kokai' => 'Publié le :date',
+  'no_icon' => 'icône du :name',
+  'jikosyokai' => 'Auto-introduction',
+  'ippan' => 'Général',
+  'renraku' => 'Contacter',
+  'gengo' => 'Langue',
+  'top' => 'Sommet',
+  'doga' => 'Vidéo',
+  'profilenohyoji' => 'Voir le profil',
+  'profilenohensyu' => 'Editer le profil',
+  'tokonotuika' => 'Ajouter un message',
+  'doganotuika' => 'Ajouter une vidéo',
+  'comentitiran' => 'Liste des commentaires',
+  'useritiran' => 'Liste d\'utilisateur',
+  'minyukaimono' => 'Non-membres',
+];
diff --git a/resources/lang/ja.json b/resources/lang/ja.json
new file mode 100644
index 0000000..ad9ac67
--- /dev/null
+++ b/resources/lang/ja.json
@@ -0,0 +1,233 @@
+{
+  "男性": "男性",
+  "女性": "女性",
+  "不明": "不明",
+  "日本": "日本",
+  "大韓民国": "大韓民国",
+  "中華人民共和国": "中華人民共和国",
+  "香港": "香港",
+  "台湾": "台湾",
+  "赤道ギニア": "赤道ギニア",
+  "北アイルランド": "北アイルランド",
+  "北朝鮮": "北朝鮮",
+  "北マケドニア": "北マケドニア",
+  "中央アフリカ共和国": "中央アフリカ共和国",
+  "東ティモール": "東ティモール",
+  "南極": "南極",
+  "南アフリカ": "南アフリカ",
+  "西サハラ": "西サハラ",
+  "アイスランド": "アイスランド",
+  "アイルランド": "アイルランド",
+  "アゼルバイジャン": "アゼルバイジャン",
+  "アフガニスタン": "アフガニスタン",
+  "アメリカ領ヴァージン諸島": "アメリカ領ヴァージン諸島",
+  "アメリカ領サモア": "アメリカ領サモア",
+  "アメリカ合衆国": "アメリカ合衆国",
+  "アラブ首長国連邦": "アラブ首長国連邦",
+  "アルジェリア": "アルジェリア",
+  "アルゼンチン": "アルゼンチン",
+  "アルバ": "アルバ",
+  "アルバニア": "アルバニア",
+  "アルメニア": "アルメニア",
+  "アンゴラ": "アンゴラ",
+  "アングィラ": "アングィラ",
+  "アンティグア・バーブーダ": "アンティグア・バーブーダ",
+  "アンドラ": "アンドラ",
+  "イエメン": "イエメン",
+  "イギリス": "イギリス",
+  "イギリス領バージン諸島": "イギリス領バージン諸島",
+  "イスラエル": "イスラエル",
+  "イタリア": "イタリア",
+  "イラク": "イラク",
+  "イラン": "イラン",
+  "イングランド": "イングランド",
+  "インド": "インド",
+  "インドネシア": "インドネシア",
+  "ウェールズ": "ウェールズ",
+  "ウガンダ": "ウガンダ",
+  "ウクライナ": "ウクライナ",
+  "ウズベキスタン": "ウズベキスタン",
+  "ウルグアイ": "ウルグアイ",
+  "エクアドル": "エクアドル",
+  "エジプト": "エジプト",
+  "エストニア": "エストニア",
+  "エスワティニ": "エスワティニ",
+  "エチオピア": "エチオピア",
+  "エリトリア": "エリトリア",
+  "エルサルバドル": "エルサルバドル",
+  "オーストラリア": "オーストラリア",
+  "オーストリア": "オーストリア",
+  "オマーン": "オマーン",
+  "オランダ": "オランダ",
+  "オランダ領アンティル": "オランダ領アンティル",
+  "ガーナ": "ガーナ",
+  "カーボベルデ": "カーボベルデ",
+  "ガーンジー島": "ガーンジー島",
+  "ガイアナ": "ガイアナ",
+  "カザフスタン": "カザフスタン",
+  "カタール": "カタール",
+  "カナダ": "カナダ",
+  "ガボン": "ガボン",
+  "カメルーン": "カメルーン",
+  "ガンビア": "ガンビア",
+  "カンボジア": "カンボジア",
+  "キプロス": "キプロス",
+  "ギニア": "ギニア",
+  "ギニア・ビサウ": "ギニア・ビサウ",
+  "キューバ": "キューバ",
+  "ギリシャ": "ギリシャ",
+  "キリバス": "キリバス",
+  "キルギス": "キルギス",
+  "グアテマラ": "グアテマラ",
+  "グアドループ": "グアドループ",
+  "グアム": "グアム",
+  "クウェート": "クウェート",
+  "クック諸島": "クック諸島",
+  "グリーンランド": "グリーンランド",
+  "グレナダ": "グレナダ",
+  "クロアチア": "クロアチア",
+  "ケイマン諸島": "ケイマン諸島",
+  "ケニア": "ケニア",
+  "コートジボワール": "コートジボワール",
+  "コスタリカ": "コスタリカ",
+  "コソボ": "コソボ",
+  "コモロ": "コモロ",
+  "コロンビア": "コロンビア",
+  "コンゴ": "コンゴ",
+  "コンゴ民主共和国": "コンゴ民主共和国",
+  "サウジアラビア": "サウジアラビア",
+  "サモア": "サモア",
+  "サントメ・プリンシペ": "サントメ・プリンシペ",
+  "ザンビア": "ザンビア",
+  "サン・マリの": "サン・マリの",
+  "シエラレオネ": "シエラレオネ",
+  "ジブチ": "ジブチ",
+  "ジブラルタル": "ジブラルタル",
+  "シリア": "シリア",
+  "ジャージー島": "ジャージー島",
+  "ジャマイカ": "ジャマイカ",
+  "ジョージア": "ジョージア",
+  "シンガポール": "シンガポール",
+  "ジンバブエ": "ジンバブエ",
+  "スイス": "スイス",
+  "スウェーデン": "スウェーデン",
+  "スーダン": "スーダン",
+  "スコットランド": "スコットランド",
+  "スペイン": "スペイン",
+  "スリナム": "スリナム",
+  "スリランカ": "スリランカ",
+  "スロバキア": "スロバキア",
+  "スロベニア": "スロベニア",
+  "セーシェル": "セーシェル",
+  "セネガル": "セネガル",
+  "セルビア": "セルビア",
+  "セントクリストファー・ネービス": "セントクリストファー・ネービス",
+  "セントビンセントおよびグレナディーン諸島": "セントビンセントおよびグレナディーン諸島",
+  "セントルシア": "セントルシア",
+  "ソマリア": "ソマリア",
+  "ソマリランド": "ソマリランド",
+  "ソロモン諸島": "ソロモン諸島",
+  "タークス・カイコス諸島": "タークス・カイコス諸島",
+  "タイ": "タイ",
+  "タジキスタン": "タジキスタン",
+  "タンザニア": "タンザニア",
+  "チャド": "チャド",
+  "チリ": "チリ",
+  "チェコ": "チェコ",
+  "ツバル": "ツバル",
+  "チュニジア": "チュニジア",
+  "デンマーク": "デンマーク",
+  "トーゴ": "トーゴ",
+  "ドイツ": "ドイツ",
+  "ドミニカ": "ドミニカ",
+  "ドミニカ共和国": "ドミニカ共和国",
+  "トリニダード・ドバゴ": "トリニダード・ドバゴ",
+  "トルクメニスタン": "トルクメニスタン",
+  "トルコ": "トルコ",
+  "トンガ": "トンガ",
+  "ナイジェリア": "ナイジェリア",
+  "ナウル": "ナウル",
+  "ナミビア": "ナミビア",
+  "ニカラグア": "ニカラグア",
+  "ニジェール": "ニジェール",
+  "ニューカレドニア": "ニューカレドニア",
+  "ニュージーランド": "ニュージーランド",
+  "ネパール": "ネパール",
+  "ノルウェー": "ノルウェー",
+  "バーレーン": "バーレーン",
+  "ハイチ": "ハイチ",
+  "パキスタン": "パキスタン",
+  "パナマ": "パナマ",
+  "バヌアツ": "バヌアツ",
+  "バハマ": "バハマ",
+  "パプアニューギニア": "パプアニューギニア",
+  "バミューダ諸島": "バミューダ諸島",
+  "パラオ": "パラオ",
+  "パラグアイ": "パラグアイ",
+  "バルバドス": "バルバドス",
+  "ハンガリー": "ハンガリー",
+  "バングラデシュ": "バングラデシュ",
+  "フィジー": "フィジー",
+  "フィリピン": "フィリピン",
+  "フィンランド": "フィンランド",
+  "プエルトリコ": "プエルトリコ",
+  "ブータン": "ブータン",
+  "フェロー諸島": "フェロー諸島",
+  "ブラジル": "ブラジル",
+  "フランス": "フランス",
+  "フランス領ポリネシア": "フランス領ポリネシア",
+  "ブルガリア": "ブルガリア",
+  "ブルキナ・ファソ": "ブルキナ・ファソ",
+  "ブルネイ・ダルサラーム": "ブルネイ・ダルサラーム",
+  "ブルンジ": "ブルンジ",
+  "ベトナム": "ベトナム",
+  "ベナン": "ベナン",
+  "ベネズエラ": "ベネズエラ",
+  "ベラルーシ": "ベラルーシ",
+  "ベリーズ": "ベリーズ",
+  "ペルー": "ペルー",
+  "ベルギー": "ベルギー",
+  "ポーランド": "ポーランド",
+  "ボスニア・ヘルツェゴビナ": "ボスニア・ヘルツェゴビナ",
+  "ボツワナ": "ボツワナ",
+  "ボリビア": "ボリビア",
+  "ポルトガル": "ポルトガル",
+  "ホンジュラス": "ホンジュラス",
+  "マーシャル諸島": "マーシャル諸島",
+  "マカオ": "マカオ",
+  "マダガスカル": "マダガスカル",
+  "マラウイ": "マラウイ",
+  "マリ": "マリ",
+  "マルタ": "マルタ",
+  "マルティニーク": "マルティニーク",
+  "マレーシア": "マレーシア",
+  "マン島": "マン島",
+  "ミクロネシア連邦": "ミクロネシア連邦",
+  "ミャンマー（ビルマ）": "ミャンマー（ビルマ）",
+  "モーリシャス": "モーリシャス",
+  "モーリタニア": "モーリタニア",
+  "モルディブ": "モルディブ",
+  "メキシコ": "メキシコ",
+  "モザンビーク": "モザンビーク",
+  "モナコ": "モナコ",
+  "モルドバ": "モルドバ",
+  "モロッコ": "モロッコ",
+  "モンゴル": "モンゴル",
+  "モンセラート": "モンセラート",
+  "モンテネグロ": "モンテネグロ",
+  "ヨルダン": "ヨルダン",
+  "ラオス": "ラオス",
+  "ラトビア": "ラトビア",
+  "リトアニア": "リトアニア",
+  "リヒテンシュタイン": "リヒテンシュタイン",
+  "リビア": "リビア",
+  "リベリア": "リベリア",
+  "ルーマニア": "ルーマニア",
+  "ルクセンブルク": "ルクセンブルク",
+  "ルワンダ": "ルワンダ",
+  "レソト": "レソト",
+  "レバノン": "レバノン",
+  "レユニオン": "レユニオン",
+  "ローマ教皇庁 (バチカン)": "ローマ教皇庁 (バチカン)",
+  "ロシア": "ロシア"
+}
\ No newline at end of file
diff --git a/resources/lang/ja/site.php b/resources/lang/ja/site.php
new file mode 100644
index 0000000..9e808a0
--- /dev/null
+++ b/resources/lang/ja/site.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+  'tuika' => '追加',
+  'hensyu' => '編集',
+  'sakujyo' => '削除',
+  'signin' => 'サインイン',
+  'signout' => 'サインアウト',
+  'toroku' => '登録',
+  'sinkitoroku' => '新規登録',
+  'hissu' => '必須',
+  'username' => 'ユーザー名',
+  'hyojiname' => '表示名',
+  'hyojiname_memo' => 'ご入力しない場合は、ユーザー名を表示します。',
+  'password' => 'パスワード',
+  'password_memo' => 'パスワードを変更しなければ、そのまま入力しないで下さい。',
+  'passwordkakunin' => 'パスワード確認',
+  'kuni' => '国',
+  'seibetu' => '性別',
+  'densimail' => '電子メール',
+  'de_kokai' => ':dateで公開',
+  'no_icon' => ':nameさんのアイコン',
+  'jikosyokai' => '自己紹介',
+  'ippan' => '一般',
+  'renraku' => '連絡',
+  'gengo' => '言語',
+  'top' => 'トップ',
+  'doga' => '動画',
+  'profilenohyoji' => 'プロファイルの表示',
+  'profilenohensyu' => 'プロフィールの編集',
+  'tokonotuika' => '投稿の追加',
+  'doganotuika' => '動画の追加',
+  'comentitiran' => 'コメント一覧',
+  'useritiran' => 'ユーザー一覧',
+  'minyukaimono' => '未入会者',
+];
diff --git a/resources/lang/ko.json b/resources/lang/ko.json
new file mode 100644
index 0000000..a958d85
--- /dev/null
+++ b/resources/lang/ko.json
@@ -0,0 +1,233 @@
+{
+  "男性": "남성",
+  "女性": "여성",
+  "不明": "알",
+  "日本": "일본",
+  "大韓民国": "대한민국",
+  "中華人民共和国": "중화 인민 공화국",
+  "香港": "홍콩",
+  "台湾": "대만",
+  "赤道ギニア": "적도",
+  "北アイルランド": "북 아일랜드",
+  "北朝鮮": "북한",
+  "北マケドニア": "북부 마케도니아",
+  "中央アフリカ共和国": "중앙 아프리카 공화국",
+  "東ティモール": "동 티모르",
+  "南極": "남극",
+  "南アフリカ": "남아프리카 공화국",
+  "西サハラ": "서부 사하라",
+  "アイスランド": "아이슬란드",
+  "アイルランド": "아일랜드",
+  "アゼルバイジャン": "아제르바이잔",
+  "アフガニスタン": "아프가니스탄",
+  "アメリカ領ヴァージン諸島": "미국령 버진 아일랜드",
+  "アメリカ領サモア": "아메리칸 사모아",
+  "アメリカ合衆国": "미국",
+  "アラブ首長国連邦": "아랍 에미리트",
+  "アルジェリア": "알제리",
+  "アルゼンチン": "아르헨티나",
+  "アルバ": "알바",
+  "アルバニア": "알바니아",
+  "アルメニア": "아르메니아",
+  "アンゴラ": "앙골라",
+  "アングィラ": "안 길라",
+  "アンティグア・バーブーダ": "앤티가 바부 다",
+  "アンドラ": "안도라",
+  "イエメン": "예멘",
+  "イギリス": "영국",
+  "イギリス領バージン諸島": "영국령 버진 아일랜드",
+  "イスラエル": "이스라엘",
+  "イタリア": "이탈리아",
+  "イラク": "이라크",
+  "イラン": "이란",
+  "イングランド": "잉글랜드",
+  "インド": "인도",
+  "インドネシア": "인도네시아",
+  "ウェールズ": "웨일즈",
+  "ウガンダ": "우간다",
+  "ウクライナ": "우크라이나",
+  "ウズベキスタン": "우즈베키스탄",
+  "ウルグアイ": "우루과이",
+  "エクアドル": "에콰도르",
+  "エジプト": "이집트",
+  "エストニア": "에스토니아",
+  "エスワティニ": "에스와티니",
+  "エチオピア": "에티오피아",
+  "エリトリア": "에리트레아",
+  "エルサルバドル": "엘살바도르",
+  "オーストラリア": "호주",
+  "オーストリア": "오스트리아",
+  "オマーン": "오만",
+  "オランダ": "네덜란드",
+  "オランダ領アンティル": "네덜란드 령 안틸레스",
+  "ガーナ": "가나",
+  "カーボベルデ": "카보 베르데",
+  "ガーンジー島": "건지 섬",
+  "ガイアナ": "가이아나",
+  "カザフスタン": "카자흐스탄",
+  "カタール": "카타르",
+  "カナダ": "캐나다",
+  "ガボン": "가봉",
+  "カメルーン": "카메룬",
+  "ガンビア": "감비아",
+  "カンボジア": "캄보디아",
+  "キプロス": "키프로스",
+  "ギニア": "기니",
+  "ギニア・ビサウ": "기니 비사우",
+  "キューバ": "쿠바",
+  "ギリシャ": "그리스",
+  "キリバス": "키리바시",
+  "キルギス": "키르기스스탄",
+  "グアテマラ": "과테말라",
+  "グアドループ": "과들루프",
+  "グアム": "괌",
+  "クウェート": "쿠웨이트",
+  "クック諸島": "쿡 제도",
+  "グリーンランド": "그린 랜드",
+  "グレナダ": "그라나다",
+  "クロアチア": "크로아티아",
+  "ケイマン諸島": "케이맨 제도",
+  "ケニア": "케냐",
+  "コートジボワール": "코트 디부 아르",
+  "コスタリカ": "코스타리카",
+  "コソボ": "코소보",
+  "コモロ": "코모로",
+  "コロンビア": "콜롬비아",
+  "コンゴ": "콩고",
+  "コンゴ民主共和国": "콩고 민주 공화국",
+  "サウジアラビア": "사우디",
+  "サモア": "사모아",
+  "サントメ・プリンシペ": "상투 메 프린시 페",
+  "ザンビア": "잠비아",
+  "サン・マリの": "산 말리",
+  "シエラレオネ": "리온",
+  "ジブチ": "지부티",
+  "ジブラルタル": "지브롤터",
+  "シリア": "시리아",
+  "ジャージー島": "저지",
+  "ジャマイカ": "자메이카",
+  "ジョージア": "조지아",
+  "シンガポール": "싱가포르",
+  "ジンバブエ": "짐바브웨",
+  "スイス": "스위스",
+  "スウェーデン": "스웨덴",
+  "スーダン": "수단",
+  "スコットランド": "스코틀랜드",
+  "スペイン": "스페인",
+  "スリナム": "수리남",
+  "スリランカ": "스리랑카",
+  "スロバキア": "슬로바키아",
+  "スロベニア": "슬로베니아",
+  "セーシェル": "세이셸",
+  "セネガル": "세네갈",
+  "セルビア": "세르비아",
+  "セントクリストファー・ネービス": "세인트 키츠 네비스",
+  "セントビンセントおよびグレナディーン諸島": "세인트 빈센트 그레나딘",
+  "セントルシア": "루시아",
+  "ソマリア": "소말리아",
+  "ソマリランド": "소 말릴 란드",
+  "ソロモン諸島": "솔로몬 제도",
+  "タークス・カイコス諸島": "터크 스케이 커스 제도",
+  "タイ": "타이",
+  "タジキスタン": "타지키스탄",
+  "タンザニア": "탄자니아",
+  "チャド": "차드",
+  "チリ": "칠레",
+  "チェコ": "체코",
+  "ツバル": "투발루",
+  "チュニジア": "튀니지",
+  "デンマーク": "덴마크",
+  "トーゴ": "토고",
+  "ドイツ": "독일",
+  "ドミニカ": "도미니카",
+  "ドミニカ共和国": "도미니카 공화국",
+  "トリニダード・ドバゴ": "트리니다드 토바고",
+  "トルクメニスタン": "투르크 메니스탄",
+  "トルコ": "터키",
+  "トンガ": "통가",
+  "ナイジェリア": "나이지리아",
+  "ナウル": "나우루",
+  "ナミビア": "나미비아",
+  "ニカラグア": "니카라과",
+  "ニジェール": "니제르",
+  "ニューカレドニア": "뉴 칼레도니아",
+  "ニュージーランド": "뉴질랜드",
+  "ネパール": "네팔",
+  "ノルウェー": "노르웨이",
+  "バーレーン": "바레인",
+  "ハイチ": "아이티",
+  "パキスタン": "파키스탄",
+  "パナマ": "파나마",
+  "バヌアツ": "바누아투",
+  "バハマ": "바하마",
+  "パプアニューギニア": "파푸아 뉴기니",
+  "バミューダ諸島": "버뮤다",
+  "パラオ": "팔라우",
+  "パラグアイ": "파라과이",
+  "バルバドス": "바베이도스",
+  "ハンガリー": "헝가리",
+  "バングラデシュ": "방글라데시",
+  "フィジー": "피지",
+  "フィリピン": "필리핀",
+  "フィンランド": "핀란드",
+  "プエルトリコ": "푸에르토 리코",
+  "ブータン": "부탄",
+  "フェロー諸島": "파로에 군도",
+  "ブラジル": "브라질",
+  "フランス": "프랑스",
+  "フランス領ポリネシア": "프랑스 령 폴리네시아",
+  "ブルガリア": "불가리아",
+  "ブルキナ・ファソ": "부르 키나 파소",
+  "ブルネイ・ダルサラーム": "브루나이",
+  "ブルンジ": "부룬디",
+  "ベトナム": "베트남",
+  "ベナン": "베냉",
+  "ベネズエラ": "베네수엘라",
+  "ベラルーシ": "벨라루스",
+  "ベリーズ": "벨리즈",
+  "ペルー": "페루",
+  "ベルギー": "벨기에",
+  "ポーランド": "폴란드",
+  "ボスニア・ヘルツェゴビナ": "보스니아 헤르체고비나",
+  "ボツワナ": "보츠와나",
+  "ボリビア": "볼리비아",
+  "ポルトガル": "포르투갈",
+  "ホンジュラス": "온두라스",
+  "マーシャル諸島": "마샬 군도",
+  "マカオ": "마카오",
+  "マダガスカル": "마다가스카르",
+  "マラウイ": "말라위",
+  "マリ": "마리",
+  "マルタ": "몰타",
+  "マルティニーク": "마르티니크",
+  "マレーシア": "말레이시아",
+  "マン島": "맨섬",
+  "ミクロネシア連邦": "마이크로 네시아",
+  "ミャンマー（ビルマ）": "미얀마 (버마)",
+  "モーリシャス": "모리셔스",
+  "モーリタニア": "모리타니",
+  "モルディブ": "몰디브",
+  "メキシコ": "멕시코",
+  "モザンビーク": "모잠비크",
+  "モナコ": "모나코",
+  "モルドバ": "몰르",
+  "モロッコ": "모로코",
+  "モンゴル": "몽골",
+  "モンセラート": "몬트 세 라트",
+  "モンテネグロ": "몬테네그로",
+  "ヨルダン": "요르단",
+  "ラオス": "라오스",
+  "ラトビア": "라트비아",
+  "リトアニア": "리투아니아",
+  "リヒテンシュタイン": "리히텐슈타인",
+  "リビア": "리비아",
+  "リベリア": "라이베리아",
+  "ルーマニア": "루마니아",
+  "ルクセンブルク": "룩셈부르크",
+  "ルワンダ": "르완다",
+  "レソト": "레소토",
+  "レバノン": "레바논",
+  "レユニオン": "레위니옹",
+  "ローマ教皇庁 (バチカン)": "교황청 (바티칸)",
+  "ロシア": "러시아"
+}
\ No newline at end of file
diff --git a/resources/lang/ko/site.php b/resources/lang/ko/site.php
new file mode 100644
index 0000000..c6bdd5c
--- /dev/null
+++ b/resources/lang/ko/site.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+  'tuika' => '추가',
+  'hensyu' => '편집',
+  'sakujyo' => '삭제',
+  'signin' => '로그인',
+  'signout' => '로그 아웃',
+  'toroku' => '등록',
+  'sinkitoroku' => '신규 등록',
+  'hissu' => '필수',
+  'username' => '사용자 이름',
+  'hyojiname' => '표시 이름',
+  'hyojiname_memo' => '입력하지 않으면 사용자 이름을 표시합니다.',
+  'password' => '비밀번호',
+  'password_memo' => '암호를 변경하지 않으면 그대로 입력하지 마십시오.',
+  'passwordkakunin' => '비밀번호 확인',
+  'kuni' => '국가',
+  'seibetu' => '성별',
+  'densimail' => '이메일',
+  'de_kokai' => ':date에 공개',
+  'no_icon' => ':name 님의 아이콘',
+  'jikosyokai' => '자기 소개',
+  'ippan' => '일반',
+  'renraku' => '연락',
+  'gengo' => '언어',
+  'top' => '톱',
+  'doga' => '동영상',
+  'profilenohyoji' => '프로필보기',
+  'profilenohensyu' => '프로필 수정',
+  'tokonotuika' => '게시물 추가',
+  'doganotuika' => '동영상 추가',
+  'comentitiran' => '댓글 목록',
+  'useritiran' => '사용자 목록',
+  'minyukaimono' => '미 입회자',
+];
diff --git a/resources/lang/nl.json b/resources/lang/nl.json
new file mode 100644
index 0000000..39caf25
--- /dev/null
+++ b/resources/lang/nl.json
@@ -0,0 +1,233 @@
+{
+  "男性": "mannetje",
+  "女性": "Vrouw",
+  "不明": "onbekend",
+  "日本": "Japan",
+  "大韓民国": "Zuid-Korea",
+  "中華人民共和国": "Volksrepubliek China",
+  "香港": "Hong Kong",
+  "台湾": "Taiwan",
+  "赤道ギニア": "Equatoriaal-Guinea",
+  "北アイルランド": "Noord-Ierland",
+  "北朝鮮": "Noord Korea",
+  "北マケドニア": "Noord-Macedonië",
+  "中央アフリカ共和国": "Centraal Afrikaanse Republiek",
+  "東ティモール": "Oost Timor",
+  "南極": "Antarctica",
+  "南アフリカ": "Zuid-Afrika",
+  "西サハラ": "Westelijke Sahara",
+  "アイスランド": "IJsland",
+  "アイルランド": "Ierland",
+  "アゼルバイジャン": "Azerbeidzjan",
+  "アフガニスタン": "Afghanistan",
+  "アメリカ領ヴァージン諸島": "Amerikaanse Maagdeneilanden",
+  "アメリカ領サモア": "Amerikaans Samoa",
+  "アメリカ合衆国": "Verenigde Staten van Amerika",
+  "アラブ首長国連邦": "Verenigde Arabische Emiraten",
+  "アルジェリア": "Algerije",
+  "アルゼンチン": "Argentinië",
+  "アルバ": "Aruba",
+  "アルバニア": "Albanië",
+  "アルメニア": "Armenië",
+  "アンゴラ": "Angola",
+  "アングィラ": "Anguilla",
+  "アンティグア・バーブーダ": "Antigua en Barbuda",
+  "アンドラ": "Andorra",
+  "イエメン": "Jemen",
+  "イギリス": "Engeland",
+  "イギリス領バージン諸島": "Britse Maagdeneilanden",
+  "イスラエル": "Israël",
+  "イタリア": "Italië",
+  "イラク": "Irak",
+  "イラン": "Iran",
+  "イングランド": "Engeland",
+  "インド": "India",
+  "インドネシア": "Indonesië",
+  "ウェールズ": "Wales",
+  "ウガンダ": "Oeganda",
+  "ウクライナ": "Oekraïne",
+  "ウズベキスタン": "Oezbekistan",
+  "ウルグアイ": "Uruguay",
+  "エクアドル": "Ecuador",
+  "エジプト": "Egypte",
+  "エストニア": "Estland",
+  "エスワティニ": "Eswatini",
+  "エチオピア": "Ethiopië",
+  "エリトリア": "Eritrea",
+  "エルサルバドル": "El salvador",
+  "オーストラリア": "Australië",
+  "オーストリア": "Oostenrijk",
+  "オマーン": "Oman",
+  "オランダ": "Nederland",
+  "オランダ領アンティル": "Nederlandse Antillen",
+  "ガーナ": "Ghana",
+  "カーボベルデ": "Kaapverdië",
+  "ガーンジー島": "Guernsey",
+  "ガイアナ": "Guyana",
+  "カザフスタン": "Kazachstan",
+  "カタール": "Qatar",
+  "カナダ": "Canada",
+  "ガボン": "Gabon",
+  "カメルーン": "Kameroen",
+  "ガンビア": "Gambia",
+  "カンボジア": "Cambodja",
+  "キプロス": "Cyprus",
+  "ギニア": "Guinea",
+  "ギニア・ビサウ": "Guinee-Bissau",
+  "キューバ": "Cuba",
+  "ギリシャ": "Griekenland",
+  "キリバス": "Kiribati",
+  "キルギス": "Kirgizië",
+  "グアテマラ": "Guatemala",
+  "グアドループ": "Guadeloupe",
+  "グアム": "Guam",
+  "クウェート": "Koeweit",
+  "クック諸島": "Cook Eilanden",
+  "グリーンランド": "Groenland",
+  "グレナダ": "Grenada",
+  "クロアチア": "Kroatië",
+  "ケイマン諸島": "Kaaiman Eilanden",
+  "ケニア": "Kenia",
+  "コートジボワール": "Ivoorkust",
+  "コスタリカ": "Costa Rica",
+  "コソボ": "Kosovo",
+  "コモロ": "Comoren",
+  "コロンビア": "Columbia",
+  "コンゴ": "Congo",
+  "コンゴ民主共和国": "Democratische Republiek Congo",
+  "サウジアラビア": "Saoedi-Arabië",
+  "サモア": "Samoa",
+  "サントメ・プリンシペ": "Sao Tome Principe",
+  "ザンビア": "Zambia",
+  "サン・マリの": "San Mali",
+  "シエラレオネ": "Sierra Leone",
+  "ジブチ": "Djibouti",
+  "ジブラルタル": "Gibraltar",
+  "シリア": "Syrië",
+  "ジャージー島": "Jersey",
+  "ジャマイカ": "Jamaica",
+  "ジョージア": "Georgië",
+  "シンガポール": "Singapore",
+  "ジンバブエ": "Zimbabwe",
+  "スイス": "Zwitserland",
+  "スウェーデン": "Zweden",
+  "スーダン": "Soedan",
+  "スコットランド": "Schotland",
+  "スペイン": "Spanje",
+  "スリナム": "Suriname",
+  "スリランカ": "Sri Lanka",
+  "スロバキア": "Slowakije",
+  "スロベニア": "Slovenië",
+  "セーシェル": "Seychellen",
+  "セネガル": "Senegal",
+  "セルビア": "Servië",
+  "セントクリストファー・ネービス": "Saint Kitts en Nevis",
+  "セントビンセントおよびグレナディーン諸島": "Saint Vincent en de Grenadines",
+  "セントルシア": "Saint Lucia",
+  "ソマリア": "Somalië",
+  "ソマリランド": "Somaliland",
+  "ソロモン諸島": "Solomon eilanden",
+  "タークス・カイコス諸島": "Turks- en Caicoseilanden",
+  "タイ": "Thailand",
+  "タジキスタン": "Tadzjikistan",
+  "タンザニア": "Tanzania",
+  "チャド": "Tsjaad",
+  "チリ": "Chili",
+  "チェコ": "Tsjechisch",
+  "ツバル": "Tuvalu",
+  "チュニジア": "Tunesië",
+  "デンマーク": "Denemarken",
+  "トーゴ": "Gaan",
+  "ドイツ": "Duitsland",
+  "ドミニカ": "Dominica",
+  "ドミニカ共和国": "Dominicaanse Republiek",
+  "トリニダード・ドバゴ": "Trinidad en Tobago",
+  "トルクメニスタン": "Turkmenistan",
+  "トルコ": "kalkoen",
+  "トンガ": "Tonga",
+  "ナイジェリア": "Nigeria",
+  "ナウル": "Nauru",
+  "ナミビア": "Namibië",
+  "ニカラグア": "Nicaragua",
+  "ニジェール": "Niger",
+  "ニューカレドニア": "Nieuw-Caledonië",
+  "ニュージーランド": "Nieuw-Zeeland",
+  "ネパール": "Nepal",
+  "ノルウェー": "Noorwegen",
+  "バーレーン": "Bahrein",
+  "ハイチ": "Haïti",
+  "パキスタン": "Pakistan",
+  "パナマ": "Panama",
+  "バヌアツ": "Vanuatu",
+  "バハマ": "Bahamas",
+  "パプアニューギニア": "Papoea-Nieuw-Guinea",
+  "バミューダ諸島": "Bermuda",
+  "パラオ": "Palau",
+  "パラグアイ": "Paraguay",
+  "バルバドス": "Barbados",
+  "ハンガリー": "Hongarije",
+  "バングラデシュ": "Bangladesh",
+  "フィジー": "Fiji",
+  "フィリピン": "Filippijnen",
+  "フィンランド": "Finland",
+  "プエルトリコ": "Puerto Rico",
+  "ブータン": "Bhutan",
+  "フェロー諸島": "Faeröer",
+  "ブラジル": "Brazilië",
+  "フランス": "Frankrijk",
+  "フランス領ポリネシア": "Frans-Polynesië",
+  "ブルガリア": "Bulgarije",
+  "ブルキナ・ファソ": "Burkina Faso",
+  "ブルネイ・ダルサラーム": "Brunei Darussalam",
+  "ブルンジ": "Burundi",
+  "ベトナム": "Vietnam",
+  "ベナン": "Benin",
+  "ベネズエラ": "Venezuela",
+  "ベラルーシ": "Wit-Rusland",
+  "ベリーズ": "Belize",
+  "ペルー": "Peru",
+  "ベルギー": "Belgie",
+  "ポーランド": "Polen",
+  "ボスニア・ヘルツェゴビナ": "Bosnië-Herzegovina",
+  "ボツワナ": "Botswana",
+  "ボリビア": "Bolivia",
+  "ポルトガル": "Portugal",
+  "ホンジュラス": "Honduras",
+  "マーシャル諸島": "Marshall eilanden",
+  "マカオ": "Macau",
+  "マダガスカル": "Madagascar",
+  "マラウイ": "Malawi",
+  "マリ": "Mali",
+  "マルタ": "Malta",
+  "マルティニーク": "Martinique",
+  "マレーシア": "Maleisië",
+  "マン島": "Isle of Man",
+  "ミクロネシア連邦": "Federale Staten van Micronesië",
+  "ミャンマー（ビルマ）": "Myanmar (Birma)",
+  "モーリシャス": "Mauritius",
+  "モーリタニア": "Mauritanië",
+  "モルディブ": "Maldiven",
+  "メキシコ": "Mexico",
+  "モザンビーク": "Mozambique",
+  "モナコ": "Monaco",
+  "モルドバ": "Moldavië",
+  "モロッコ": "Marokko",
+  "モンゴル": "Mongolië",
+  "モンセラート": "Montserrat",
+  "モンテネグロ": "Montenegro",
+  "ヨルダン": "Jordanië",
+  "ラオス": "Laos",
+  "ラトビア": "Letland",
+  "リトアニア": "Litouwen",
+  "リヒテンシュタイン": "Liechtenstein",
+  "リビア": "Libië",
+  "リベリア": "Liberia",
+  "ルーマニア": "Roemenië",
+  "ルクセンブルク": "Luxemburg",
+  "ルワンダ": "Rwanda",
+  "レソト": "Lesotho",
+  "レバノン": "Libanon",
+  "レユニオン": "Bijeenkomst",
+  "ローマ教皇庁 (バチカン)": "Roman Curia (Vaticaan)",
+  "ロシア": "Rusland"
+}
\ No newline at end of file
diff --git a/resources/lang/nl/site.php b/resources/lang/nl/site.php
new file mode 100644
index 0000000..8a1e08f
--- /dev/null
+++ b/resources/lang/nl/site.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+  'tuika' => 'toevoegen aan',
+  'hensyu' => 'Bewerk',
+  'sakujyo' => 'Verwijderen',
+  'signin' => 'Inloggen',
+  'signout' => 'Afmelden',
+  'toroku' => 'Registratie',
+  'sinkitoroku' => 'aanmelden',
+  'hissu' => 'Verplicht',
+  'username' => 'gebruikersnaam',
+  'hyojiname' => 'Weergavenaam',
+  'hyojiname_memo' => 'Als u deze niet invoert, wordt de gebruikersnaam weergegeven.',
+  'password' => 'wachtwoord',
+  'password_memo' => 'Als u het wachtwoord niet wijzigt, voer het dan niet in zoals het is.',
+  'passwordkakunin' => 'wachtwoordbevestiging',
+  'kuni' => 'Land',
+  'seibetu' => 'seks',
+  'densimail' => 'e-mail',
+  'de_kokai' => 'Gepubliceerd op :date',
+  'no_icon' => ':namepictogram',
+  'jikosyokai' => 'Zelfintroductie',
+  'ippan' => 'Algemeen',
+  'renraku' => 'Contact',
+  'gengo' => 'taal',
+  'top' => 'Top',
+  'doga' => 'Video',
+  'profilenohyoji' => 'Bekijk profiel',
+  'profilenohensyu' => 'Bewerk profiel',
+  'tokonotuika' => 'Voeg bericht toe',
+  'doganotuika' => 'Voeg video toe',
+  'comentitiran' => 'Lijst met opmerkingen',
+  'useritiran' => 'Gebruikers lijst',
+  'minyukaimono' => 'Niet-leden',
+];
diff --git a/resources/lang/ru.json b/resources/lang/ru.json
new file mode 100644
index 0000000..ddb951e
--- /dev/null
+++ b/resources/lang/ru.json
@@ -0,0 +1,233 @@
+{
+  "男性": "мужчина",
+  "女性": "женский",
+  "不明": "неизвестный",
+  "日本": "Япония",
+  "大韓民国": "Южная Корея",
+  "中華人民共和国": "Китайская Народная Республика",
+  "香港": "Гонконг",
+  "台湾": "Тайвань",
+  "赤道ギニア": "Экваториальная Гвинея",
+  "北アイルランド": "Северная Ирландия",
+  "北朝鮮": "Северная Корея",
+  "北マケドニア": "Северная Македония",
+  "中央アフリカ共和国": "Центрально-Африканская Республика",
+  "東ティモール": "Восточный Тимор",
+  "南極": "Антарктика",
+  "南アフリカ": "Южная Африка",
+  "西サハラ": "Западная Сахара",
+  "アイスランド": "Исландия",
+  "アイルランド": "Ирландия",
+  "アゼルバイジャン": "Азербайджан",
+  "アフガニスタン": "Афганистан",
+  "アメリカ領ヴァージン諸島": "Американские Виргинские острова",
+  "アメリカ領サモア": "американское Самоа",
+  "アメリカ合衆国": "Соединенные Штаты Америки",
+  "アラブ首長国連邦": "Объединенные Арабские Эмираты",
+  "アルジェリア": "Алжир",
+  "アルゼンチン": "Аргентина",
+  "アルバ": "Аруба",
+  "アルバニア": "Албания",
+  "アルメニア": "Армения",
+  "アンゴラ": "Ангола",
+  "アングィラ": "Ангилья",
+  "アンティグア・バーブーダ": "Антигуа и Барбуда",
+  "アンドラ": "Андорра",
+  "イエメン": "Йемен",
+  "イギリス": "Англия",
+  "イギリス領バージン諸島": "Британские Виргинские острова",
+  "イスラエル": "Израиль",
+  "イタリア": "Италия",
+  "イラク": "Ирак",
+  "イラン": "Иран",
+  "イングランド": "Англия",
+  "インド": "Индия",
+  "インドネシア": "Индонезия",
+  "ウェールズ": "Уэльс",
+  "ウガンダ": "Уганда",
+  "ウクライナ": "Украина",
+  "ウズベキスタン": "Узбекистан",
+  "ウルグアイ": "Уругвай",
+  "エクアドル": "Эквадор",
+  "エジプト": "Египет",
+  "エストニア": "Эстония",
+  "エスワティニ": "Эсватини",
+  "エチオピア": "Эфиопия",
+  "エリトリア": "Эритрея",
+  "エルサルバドル": "Эль Сальвадор",
+  "オーストラリア": "Австралия",
+  "オーストリア": "Австрия",
+  "オマーン": "Оман",
+  "オランダ": "Нидерланды",
+  "オランダ領アンティル": "Голландские антильские острова",
+  "ガーナ": "Гана",
+  "カーボベルデ": "Кабо-Верде",
+  "ガーンジー島": "Гернси",
+  "ガイアナ": "Гайана",
+  "カザフスタン": "Казахстан",
+  "カタール": "Катар",
+  "カナダ": "Канада",
+  "ガボン": "Габон",
+  "カメルーン": "Камерун",
+  "ガンビア": "Гамбия",
+  "カンボジア": "Камбоджа",
+  "キプロス": "Кипр",
+  "ギニア": "Гвинея",
+  "ギニア・ビサウ": "Гвинея-Бисау",
+  "キューバ": "Куба",
+  "ギリシャ": "Греция",
+  "キリバス": "Кирибати",
+  "キルギス": "Кыргызстан",
+  "グアテマラ": "Гватемала",
+  "グアドループ": "Гваделупа",
+  "グアム": "Гуам",
+  "クウェート": "Кувейт",
+  "クック諸島": "Острова Кука",
+  "グリーンランド": "Гренландия",
+  "グレナダ": "Гренада",
+  "クロアチア": "Хорватия",
+  "ケイマン諸島": "Каймановы острова",
+  "ケニア": "Кения",
+  "コートジボワール": "Берег Слоновой Кости",
+  "コスタリカ": "Коста-Рика",
+  "コソボ": "Косово",
+  "コモロ": "Коморские острова",
+  "コロンビア": "Колумбия",
+  "コンゴ": "Конго",
+  "コンゴ民主共和国": "Демократическая Республика Конго",
+  "サウジアラビア": "Саудовская Аравия",
+  "サモア": "Самоа",
+  "サントメ・プリンシペ": "Сан-Томе-Принсипи",
+  "ザンビア": "Замбия",
+  "サン・マリの": "Сан-Мали",
+  "シエラレオネ": "Сьерра-Леоне",
+  "ジブチ": "Джибути",
+  "ジブラルタル": "Гибралтар",
+  "シリア": "Сирия",
+  "ジャージー島": "Джерси",
+  "ジャマイカ": "Ямайка",
+  "ジョージア": "Грузия",
+  "シンガポール": "Сингапур",
+  "ジンバブエ": "Зимбабве",
+  "スイス": "Швейцария",
+  "スウェーデン": "Швеция",
+  "スーダン": "Судан",
+  "スコットランド": "Шотландия",
+  "スペイン": "Испания",
+  "スリナム": "Суринам",
+  "スリランカ": "Шри-Ланка",
+  "スロバキア": "Словакия",
+  "スロベニア": "Словения",
+  "セーシェル": "Сейшельские острова",
+  "セネガル": "Сенегал",
+  "セルビア": "Сербия",
+  "セントクリストファー・ネービス": "Сент-Китс и Невис",
+  "セントビンセントおよびグレナディーン諸島": "Святой Винсент и Гренадины",
+  "セントルシア": "Сент-Люсия",
+  "ソマリア": "Сомали",
+  "ソマリランド": "Сомалиленд",
+  "ソロモン諸島": "Соломоновы острова",
+  "タークス・カイコス諸島": "Острова Теркс и Кайкос",
+  "タイ": "Таиланд",
+  "タジキスタン": "Таджикистан",
+  "タンザニア": "Танзания",
+  "チャド": "Чад",
+  "チリ": "Чили",
+  "チェコ": "Чешский",
+  "ツバル": "Тувалу",
+  "チュニジア": "Тунис",
+  "デンマーク": "Дания",
+  "トーゴ": "Идти",
+  "ドイツ": "Германия",
+  "ドミニカ": "Доминика",
+  "ドミニカ共和国": "Доминиканская Республика",
+  "トリニダード・ドバゴ": "Тринидад и Тобаго",
+  "トルクメニスタン": "Туркменистан",
+  "トルコ": "индюк",
+  "トンガ": "Тонга",
+  "ナイジェリア": "Нигерия",
+  "ナウル": "Науру",
+  "ナミビア": "Намибия",
+  "ニカラグア": "Никарагуа",
+  "ニジェール": "Нигер",
+  "ニューカレドニア": "Новая Каледония",
+  "ニュージーランド": "Новая Зеландия",
+  "ネパール": "Непал",
+  "ノルウェー": "Норвегия",
+  "バーレーン": "Бахрейн",
+  "ハイチ": "Гаити",
+  "パキスタン": "Пакистан",
+  "パナマ": "Панама",
+  "バヌアツ": "Вануату",
+  "バハマ": "Багамы",
+  "パプアニューギニア": "Папуа - Новая Гвинея",
+  "バミューダ諸島": "Бермудские острова",
+  "パラオ": "Палау",
+  "パラグアイ": "Парагвай",
+  "バルバドス": "Барбадос",
+  "ハンガリー": "Венгрия",
+  "バングラデシュ": "Бангладеш",
+  "フィジー": "Фиджи",
+  "フィリピン": "Филиппины",
+  "フィンランド": "Финляндия",
+  "プエルトリコ": "Пуэрто-Рико",
+  "ブータン": "Бутан",
+  "フェロー諸島": "Фарерские острова",
+  "ブラジル": "Бразилия",
+  "フランス": "Франция",
+  "フランス領ポリネシア": "Французская Полинезия",
+  "ブルガリア": "Болгария",
+  "ブルキナ・ファソ": "Буркина-Фасо",
+  "ブルネイ・ダルサラーム": "Бруней-Даруссалам",
+  "ブルンジ": "Бурунди",
+  "ベトナム": "Вьетнам",
+  "ベナン": "Бенин",
+  "ベネズエラ": "Венесуэла",
+  "ベラルーシ": "Беларусь",
+  "ベリーズ": "Белиз",
+  "ペルー": "Перу",
+  "ベルギー": "Бельгия",
+  "ポーランド": "Польша",
+  "ボスニア・ヘルツェゴビナ": "Босния и Герцеговина",
+  "ボツワナ": "Ботсвана",
+  "ボリビア": "Боливия",
+  "ポルトガル": "Португалия",
+  "ホンジュラス": "Гондурас",
+  "マーシャル諸島": "Маршалловы острова",
+  "マカオ": "Макао",
+  "マダガスカル": "Мадагаскар",
+  "マラウイ": "Малави",
+  "マリ": "Мали",
+  "マルタ": "Мальта",
+  "マルティニーク": "Мартиника",
+  "マレーシア": "Малайзия",
+  "マン島": "Остров Мэн",
+  "ミクロネシア連邦": "Федеративные Штаты Микронезии",
+  "ミャンマー（ビルマ）": "Мьянма (Бирма)",
+  "モーリシャス": "Маврикий",
+  "モーリタニア": "Мавритания",
+  "モルディブ": "Мальдивы",
+  "メキシコ": "Мексика",
+  "モザンビーク": "Мозамбик",
+  "モナコ": "Монако",
+  "モルドバ": "Молдова",
+  "モロッコ": "Марокко",
+  "モンゴル": "Монголия",
+  "モンセラート": "Монтсеррат",
+  "モンテネグロ": "Черногория",
+  "ヨルダン": "Иордания",
+  "ラオス": "Лаос",
+  "ラトビア": "Латвия",
+  "リトアニア": "Литва",
+  "リヒテンシュタイン": "Лихтенштейн",
+  "リビア": "Ливия",
+  "リベリア": "Либерия",
+  "ルーマニア": "Румыния",
+  "ルクセンブルク": "Люксембург",
+  "ルワンダ": "Руанда",
+  "レソト": "Лесото",
+  "レバノン": "Ливан",
+  "レユニオン": "Воссоединение",
+  "ローマ教皇庁 (バチカン)": "Римская курия (Ватикан)",
+  "ロシア": "Россия"
+}
\ No newline at end of file
diff --git a/resources/lang/ru/site.php b/resources/lang/ru/site.php
new file mode 100644
index 0000000..08cef5c
--- /dev/null
+++ b/resources/lang/ru/site.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+  'tuika' => 'добавить в',
+  'hensyu' => 'Редактировать',
+  'sakujyo' => 'Удалить',
+  'signin' => 'Войти',
+  'signout' => 'выход',
+  'toroku' => 'Постановка на учет',
+  'sinkitoroku' => 'зарегистрироваться',
+  'hissu' => 'Обязательный',
+  'username' => 'имя пользователя',
+  'hyojiname' => 'показать имя',
+  'hyojiname_memo' => 'Если вы не введете его, будет отображаться имя пользователя.',
+  'password' => 'пароль',
+  'password_memo' => 'Если вы не меняете пароль, не вводите его как есть.',
+  'passwordkakunin' => 'Подтверждение пароля',
+  'kuni' => 'Страна',
+  'seibetu' => 'секс',
+  'densimail' => 'электронное письмо',
+  'de_kokai' => 'Дата публикации :date',
+  'no_icon' => 'значок :name',
+  'jikosyokai' => 'Самостоятельное введение',
+  'ippan' => 'Общий',
+  'renraku' => 'Контакт',
+  'gengo' => 'язык',
+  'top' => 'Вершина',
+  'doga' => 'видео',
+  'profilenohyoji' => 'Просмотреть профиль',
+  'profilenohensyu' => 'Редактировать профиль',
+  'tokonotuika' => 'Добавить сообщение',
+  'doganotuika' => 'Добавить видео',
+  'comentitiran' => 'Список комментариев',
+  'useritiran' => 'Список пользователей',
+  'minyukaimono' => 'Не члены',
+];
diff --git a/resources/lang/vi.json b/resources/lang/vi.json
new file mode 100644
index 0000000..412c700
--- /dev/null
+++ b/resources/lang/vi.json
@@ -0,0 +1,233 @@
+{
+  "男性": "Nam giới",
+  "女性": "Giống cái",
+  "不明": "không xác định",
+  "日本": "Nhật Bản",
+  "大韓民国": "Nam Triều Tiên",
+  "中華人民共和国": "Cộng hòa nhân dân Trung Hoa",
+  "香港": "Hồng Kông",
+  "台湾": "Đài loan",
+  "赤道ギニア": "Equatorial Guinea",
+  "北アイルランド": "Bắc Ireland",
+  "北朝鮮": "Bắc Triều Tiên",
+  "北マケドニア": "Bắc Macedonia",
+  "中央アフリカ共和国": "Cộng hòa trung phi",
+  "東ティモール": "Đông Timor",
+  "南極": "Nam cực",
+  "南アフリカ": "Nam Phi",
+  "西サハラ": "Phía tây Sahara",
+  "アイスランド": "Nước Iceland",
+  "アイルランド": "Ireland",
+  "アゼルバイジャン": "Azerbaijan",
+  "アフガニスタン": "Afghanistan",
+  "アメリカ領ヴァージン諸島": "Quần đảo Virgin thuộc Mỹ",
+  "アメリカ領サモア": "American Samoa",
+  "アメリカ合衆国": "nước Mỹ",
+  "アラブ首長国連邦": "các Tiểu Vương Quốc Ả Rập Thống Nhất",
+  "アルジェリア": "Algeria",
+  "アルゼンチン": "Argentina",
+  "アルバ": "Aruba",
+  "アルバニア": "Albania",
+  "アルメニア": "Armenia",
+  "アンゴラ": "Angola",
+  "アングィラ": "Anguilla",
+  "アンティグア・バーブーダ": "Antigua và Barbuda",
+  "アンドラ": "Andorra",
+  "イエメン": "Yemen",
+  "イギリス": "nước Anh",
+  "イギリス領バージン諸島": "Quần đảo British Virgin",
+  "イスラエル": "Người israel",
+  "イタリア": "Nước Ý",
+  "イラク": "I-rắc",
+  "イラン": "Iran",
+  "イングランド": "nước Anh",
+  "インド": "Ấn Độ",
+  "インドネシア": "Indonesia",
+  "ウェールズ": "Xứ Wales",
+  "ウガンダ": "Uganda",
+  "ウクライナ": "Ukraine",
+  "ウズベキスタン": "U-dơ-bê-ki-xtan",
+  "ウルグアイ": "Uruguay",
+  "エクアドル": "Ecuador",
+  "エジプト": "Ai cập",
+  "エストニア": "Estonia",
+  "エスワティニ": "Eswatini",
+  "エチオピア": "Ethiopia",
+  "エリトリア": "Eritrea",
+  "エルサルバドル": "El Salvador",
+  "オーストラリア": "Châu Úc",
+  "オーストリア": "Áo",
+  "オマーン": "Oman",
+  "オランダ": "nước Hà Lan",
+  "オランダ領アンティル": "Antilles của Hà Lan",
+  "ガーナ": "Ghana",
+  "カーボベルデ": "Cape Verde",
+  "ガーンジー島": "Guernsey",
+  "ガイアナ": "Guyana",
+  "カザフスタン": "Kazakhstan",
+  "カタール": "Qatar",
+  "カナダ": "Canada",
+  "ガボン": "Gabon",
+  "カメルーン": "Cameroon",
+  "ガンビア": "Gambia",
+  "カンボジア": "Campuchia",
+  "キプロス": "Síp",
+  "ギニア": "Guinea",
+  "ギニア・ビサウ": "Guinea-Bissau",
+  "キューバ": "Cuba",
+  "ギリシャ": "Hy Lạp",
+  "キリバス": "Kiribati",
+  "キルギス": "Kyrgyzstan",
+  "グアテマラ": "Guatemala",
+  "グアドループ": "Guadeloupe",
+  "グアム": "Guam",
+  "クウェート": "Kuwait",
+  "クック諸島": "Quần đảo Cook",
+  "グリーンランド": "Greenland",
+  "グレナダ": "Grenada",
+  "クロアチア": "Croatia",
+  "ケイマン諸島": "Quần đảo Cayman",
+  "ケニア": "Kenya",
+  "コートジボワール": "Cote d'Ivoire",
+  "コスタリカ": "Costa Rica",
+  "コソボ": "Kosovo",
+  "コモロ": "Comoros",
+  "コロンビア": "Columbia",
+  "コンゴ": "Congo",
+  "コンゴ民主共和国": "Cộng hòa Dân chủ Congo",
+  "サウジアラビア": "Ả Rập Saudi",
+  "サモア": "Samoa",
+  "サントメ・プリンシペ": "Sao Tome Principe",
+  "ザンビア": "Zambia",
+  "サン・マリの": "San Mali",
+  "シエラレオネ": "Sierra Leone",
+  "ジブチ": "Djibouti",
+  "ジブラルタル": "Gibraltar",
+  "シリア": "Syria",
+  "ジャージー島": "Jersey",
+  "ジャマイカ": "Jamaica",
+  "ジョージア": "Georgia",
+  "シンガポール": "Singapore",
+  "ジンバブエ": "Zimbabwe",
+  "スイス": "Thụy sĩ",
+  "スウェーデン": "Thụy Điển",
+  "スーダン": "Sudan",
+  "スコットランド": "Scotland",
+  "スペイン": "Tây ban nha",
+  "スリナム": "Suriname",
+  "スリランカ": "Sri Lanka",
+  "スロバキア": "Xlô-va-ki-a",
+  "スロベニア": "Slovenia",
+  "セーシェル": "Seychelles",
+  "セネガル": "Senegal",
+  "セルビア": "Xéc-bi-a",
+  "セントクリストファー・ネービス": "Saint Kitts và Nevis",
+  "セントビンセントおよびグレナディーン諸島": "Saint Vincent và Grenadines",
+  "セントルシア": "Saint Lucia",
+  "ソマリア": "Somalia",
+  "ソマリランド": "Somaliland",
+  "ソロモン諸島": "Quần đảo Solomon",
+  "タークス・カイコス諸島": "Quần đảo Turks và Caicos",
+  "タイ": "nước Thái Lan",
+  "タジキスタン": "Tajikistan",
+  "タンザニア": "Tanzania",
+  "チャド": "Chad",
+  "チリ": "Chile",
+  "チェコ": "Tiếng Séc",
+  "ツバル": "Tuvalu",
+  "チュニジア": "Tunisia",
+  "デンマーク": "Đan mạch",
+  "トーゴ": "Đi",
+  "ドイツ": "nước Đức",
+  "ドミニカ": "Dominica",
+  "ドミニカ共和国": "Cộng hòa Dominica",
+  "トリニダード・ドバゴ": "Trinidad và Tobago",
+  "トルクメニスタン": "Turkmenistan",
+  "トルコ": "gà tây",
+  "トンガ": "Tonga",
+  "ナイジェリア": "Nigeria",
+  "ナウル": "Nauru",
+  "ナミビア": "Namibia",
+  "ニカラグア": "Nicaragua",
+  "ニジェール": "Niger",
+  "ニューカレドニア": "New Caledonia",
+  "ニュージーランド": "New Zealand",
+  "ネパール": "Nepal",
+  "ノルウェー": "Na Uy",
+  "バーレーン": "Bahrain",
+  "ハイチ": "Haiti",
+  "パキスタン": "Pakistan",
+  "パナマ": "Panama",
+  "バヌアツ": "Vanuatu",
+  "バハマ": "Bahamas",
+  "パプアニューギニア": "Papua New Guinea",
+  "バミューダ諸島": "Bermuda",
+  "パラオ": "Palau",
+  "パラグアイ": "Paraguay",
+  "バルバドス": "Barbados",
+  "ハンガリー": "Hungary",
+  "バングラデシュ": "Bangladesh",
+  "フィジー": "Fiji",
+  "フィリピン": "Phi-líp-pin",
+  "フィンランド": "Phần Lan",
+  "プエルトリコ": "Puerto Rico",
+  "ブータン": "Bhutan",
+  "フェロー諸島": "Quần đảo Faroe",
+  "ブラジル": "Brazil",
+  "フランス": "Nước pháp",
+  "フランス領ポリネシア": "Polynesia thuộc Pháp",
+  "ブルガリア": "Bungari",
+  "ブルキナ・ファソ": "Burkina Faso",
+  "ブルネイ・ダルサラーム": "Vương quốc Bru-nây",
+  "ブルンジ": "Burundi",
+  "ベトナム": "Việt Nam",
+  "ベナン": "Benin",
+  "ベネズエラ": "Venezuela",
+  "ベラルーシ": "Belarus",
+  "ベリーズ": "Belize",
+  "ペルー": "Peru",
+  "ベルギー": "nước Bỉ",
+  "ポーランド": "Ba lan",
+  "ボスニア・ヘルツェゴビナ": "Bosnia-Herzegovina",
+  "ボツワナ": "Botswana",
+  "ボリビア": "Bolivia",
+  "ポルトガル": "Bồ Đào Nha",
+  "ホンジュラス": "Honduras",
+  "マーシャル諸島": "đảo Marshall",
+  "マカオ": "Ma Cao",
+  "マダガスカル": "Madagascar",
+  "マラウイ": "Malawi",
+  "マリ": "Mali",
+  "マルタ": "Malta",
+  "マルティニーク": "Martinique",
+  "マレーシア": "Malaysia",
+  "マン島": "Đảo Man",
+  "ミクロネシア連邦": "Liên bang Micronesia",
+  "ミャンマー（ビルマ）": "Myanmar (Miến Điện)",
+  "モーリシャス": "Mauritius",
+  "モーリタニア": "Mauritania",
+  "モルディブ": "Maldives",
+  "メキシコ": "Mexico",
+  "モザンビーク": "Mozambique",
+  "モナコ": "Monaco",
+  "モルドバ": "Moldova",
+  "モロッコ": "Maroc",
+  "モンゴル": "Mông Cổ",
+  "モンセラート": "Montserrat",
+  "モンテネグロ": "Montenegro",
+  "ヨルダン": "Jordan",
+  "ラオス": "Nước Lào",
+  "ラトビア": "Latvia",
+  "リトアニア": "Lithuania",
+  "リヒテンシュタイン": "Liechtenstein",
+  "リビア": "Libya",
+  "リベリア": "Liberia",
+  "ルーマニア": "Romania",
+  "ルクセンブルク": "Luxembourg",
+  "ルワンダ": "Rwanda",
+  "レソト": "Lesotho",
+  "レバノン": "Lebanon",
+  "レユニオン": "Sum họp",
+  "ローマ教皇庁 (バチカン)": "Giáo triều La Mã (Vatican)",
+  "ロシア": "Nga"
+}
\ No newline at end of file
diff --git a/resources/lang/vi/site.php b/resources/lang/vi/site.php
new file mode 100644
index 0000000..b3d9531
--- /dev/null
+++ b/resources/lang/vi/site.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+  'tuika' => 'thêm vào',
+  'hensyu' => 'Biên tập',
+  'sakujyo' => 'Xóa bỏ',
+  'signin' => 'Đăng nhập',
+  'signout' => 'Đăng xuất',
+  'toroku' => 'Đăng ký',
+  'sinkitoroku' => 'đăng ký',
+  'hissu' => 'Bắt buộc',
+  'username' => 'tên tài khoản',
+  'hyojiname' => 'tên hiển thị',
+  'hyojiname_memo' => 'Nếu bạn không nhập, tên người dùng sẽ được hiển thị.',
+  'password' => 'mật khẩu',
+  'password_memo' => 'Nếu bạn không thay đổi mật khẩu, không nhập mật khẩu như nó vốn có.',
+  'passwordkakunin' => 'xác nhận mật khẩu',
+  'kuni' => 'Quốc gia',
+  'seibetu' => 'tình dục',
+  'densimail' => 'e-mail',
+  'de_kokai' => 'Xuất bản vào :date',
+  'no_icon' => ': biểu tượng của :name',
+  'jikosyokai' => 'Tự giới thiệu',
+  'ippan' => 'Chung',
+  'renraku' => 'Tiếp xúc',
+  'gengo' => 'ngôn ngữ',
+  'top' => 'Hàng đầu',
+  'doga' => 'Video',
+  'profilenohyoji' => 'Xem lí lịch',
+  'profilenohensyu' => 'Chỉnh sửa hồ sơ',
+  'tokonotuika' => 'Thêm bài đăng',
+  'doganotuika' => 'Thêm video',
+  'comentitiran' => 'Danh sách các bình luận',
+  'useritiran' => 'Danh sách người dùng',
+  'minyukaimono' => 'Không phải thành viên',
+];
diff --git a/resources/lang/zh-CN.json b/resources/lang/zh-CN.json
new file mode 100644
index 0000000..873067b
--- /dev/null
+++ b/resources/lang/zh-CN.json
@@ -0,0 +1,233 @@
+{
+  "男性": "男性",
+  "女性": "女性",
+  "不明": "未知",
+  "日本": "日本",
+  "大韓民国": "南韩",
+  "中華人民共和国": "中华人民共和国",
+  "香港": "香港",
+  "台湾": "台湾",
+  "赤道ギニア": "赤道几内亚",
+  "北アイルランド": "北爱尔兰",
+  "北朝鮮": "北朝鲜",
+  "北マケドニア": "北马其顿",
+  "中央アフリカ共和国": "中非共和国",
+  "東ティモール": "东帝汶",
+  "南極": "南极",
+  "南アフリカ": "南非",
+  "西サハラ": "西撒哈拉",
+  "アイスランド": "冰岛",
+  "アイルランド": "爱尔兰",
+  "アゼルバイジャン": "阿塞拜疆",
+  "アフガニスタン": "阿富汗",
+  "アメリカ領ヴァージン諸島": "美属维尔京群岛",
+  "アメリカ領サモア": "美属萨摩亚",
+  "アメリカ合衆国": "美国",
+  "アラブ首長国連邦": "阿拉伯联合酋长国",
+  "アルジェリア": "阿尔及利亚",
+  "アルゼンチン": "阿根廷",
+  "アルバ": "阿鲁巴岛",
+  "アルバニア": "阿尔巴尼亚",
+  "アルメニア": "亚美尼亚",
+  "アンゴラ": "安哥拉",
+  "アングィラ": "安圭拉岛",
+  "アンティグア・バーブーダ": "安提瓜和巴布达",
+  "アンドラ": "安道尔",
+  "イエメン": "也门",
+  "イギリス": "英国",
+  "イギリス領バージン諸島": "英属维尔京群岛",
+  "イスラエル": "以色列",
+  "イタリア": "意大利",
+  "イラク": "伊拉克",
+  "イラン": "伊朗",
+  "イングランド": "英国",
+  "インド": "印度",
+  "インドネシア": "印度尼西亚",
+  "ウェールズ": "威尔士",
+  "ウガンダ": "乌干达",
+  "ウクライナ": "乌克兰",
+  "ウズベキスタン": "乌兹别克斯坦",
+  "ウルグアイ": "乌拉圭",
+  "エクアドル": "厄瓜多尔",
+  "エジプト": "埃及",
+  "エストニア": "爱沙尼亚",
+  "エスワティニ": "埃斯瓦蒂尼",
+  "エチオピア": "埃塞俄比亚",
+  "エリトリア": "厄立特里亚",
+  "エルサルバドル": "萨尔瓦多",
+  "オーストラリア": "澳大利亚",
+  "オーストリア": "奥地利",
+  "オマーン": "阿曼",
+  "オランダ": "荷兰",
+  "オランダ領アンティル": "荷属安的列斯群岛",
+  "ガーナ": "加纳",
+  "カーボベルデ": "佛得角",
+  "ガーンジー島": "根西岛",
+  "ガイアナ": "圭亚那",
+  "カザフスタン": "哈萨克斯坦",
+  "カタール": "卡塔尔",
+  "カナダ": "加拿大",
+  "ガボン": "加蓬",
+  "カメルーン": "喀麦隆",
+  "ガンビア": "冈比亚",
+  "カンボジア": "柬埔寨",
+  "キプロス": "塞浦路斯",
+  "ギニア": "几内亚",
+  "ギニア・ビサウ": "几内亚比绍",
+  "キューバ": "古巴",
+  "ギリシャ": "希腊",
+  "キリバス": "基里巴斯",
+  "キルギス": "吉尔吉斯斯坦",
+  "グアテマラ": "危地马拉",
+  "グアドループ": "瓜德罗普岛",
+  "グアム": "关岛",
+  "クウェート": "科威特",
+  "クック諸島": "库克群岛",
+  "グリーンランド": "格陵兰",
+  "グレナダ": "格林纳达",
+  "クロアチア": "克罗地亚",
+  "ケイマン諸島": "开曼群岛",
+  "ケニア": "肯尼亚",
+  "コートジボワール": "科特迪瓦",
+  "コスタリカ": "哥斯达黎加",
+  "コソボ": "科索沃",
+  "コモロ": "科摩罗",
+  "コロンビア": "哥伦比亚",
+  "コンゴ": "刚果",
+  "コンゴ民主共和国": "刚果民主共和国",
+  "サウジアラビア": "沙特阿拉伯",
+  "サモア": "萨摩亚",
+  "サントメ・プリンシペ": "圣多美普林西比",
+  "ザンビア": "赞比亚",
+  "サン・マリの": "圣马里",
+  "シエラレオネ": "塞拉利昂",
+  "ジブチ": "吉布地",
+  "ジブラルタル": "直布罗陀",
+  "シリア": "叙利亚",
+  "ジャージー島": "球衣",
+  "ジャマイカ": "的牙买加",
+  "ジョージア": "乔治亚州",
+  "シンガポール": "新加坡",
+  "ジンバブエ": "津巴布韦",
+  "スイス": "瑞士",
+  "スウェーデン": "瑞典",
+  "スーダン": "苏丹",
+  "スコットランド": "苏格兰",
+  "スペイン": "西班牙",
+  "スリナム": "苏里南",
+  "スリランカ": "斯里兰卡",
+  "スロバキア": "斯洛伐克",
+  "スロベニア": "斯洛文尼亚",
+  "セーシェル": "塞舌尔",
+  "セネガル": "塞内加尔",
+  "セルビア": "塞尔维亚",
+  "セントクリストファー・ネービス": "圣基茨和尼维斯",
+  "セントビンセントおよびグレナディーン諸島": "圣文森特和格林纳丁斯",
+  "セントルシア": "圣卢西亚",
+  "ソマリア": "索马里",
+  "ソマリランド": "索马里兰",
+  "ソロモン諸島": "所罗门群岛",
+  "タークス・カイコス諸島": "特克斯和凯科斯群岛",
+  "タイ": "泰国",
+  "タジキスタン": "塔吉克斯坦",
+  "タンザニア": "坦桑尼亚",
+  "チャド": "乍得",
+  "チリ": "智利",
+  "チェコ": "捷克文",
+  "ツバル": "图瓦卢",
+  "チュニジア": "突尼斯",
+  "デンマーク": "丹麦",
+  "トーゴ": "多哥",
+  "ドイツ": "德国",
+  "ドミニカ": "多米尼加",
+  "ドミニカ共和国": "多明尼加共和国",
+  "トリニダード・ドバゴ": "特立尼达和多巴哥",
+  "トルクメニスタン": "土库曼斯坦",
+  "トルコ": "火鸡",
+  "トンガ": "汤加",
+  "ナイジェリア": "奈及利亚",
+  "ナウル": "瑙鲁",
+  "ナミビア": "纳米比亚",
+  "ニカラグア": "尼加拉瓜",
+  "ニジェール": "尼日尔",
+  "ニューカレドニア": "新喀里多尼亚",
+  "ニュージーランド": "新西兰",
+  "ネパール": "尼尼泊尔",
+  "ノルウェー": "挪威",
+  "バーレーン": "巴林",
+  "ハイチ": "海地",
+  "パキスタン": "巴基斯坦",
+  "パナマ": "巴拿马",
+  "バヌアツ": "瓦努阿图",
+  "バハマ": "巴哈马",
+  "パプアニューギニア": "巴布亚新几内亚",
+  "バミューダ諸島": "百慕大",
+  "パラオ": "u琉",
+  "パラグアイ": "巴拉圭",
+  "バルバドス": "巴巴多斯",
+  "ハンガリー": "匈牙利",
+  "バングラデシュ": "孟加拉国",
+  "フィジー": "斐济",
+  "フィリピン": "菲律宾",
+  "フィンランド": "芬兰",
+  "プエルトリコ": "波多黎各",
+  "ブータン": "不丹",
+  "フェロー諸島": "法罗群岛",
+  "ブラジル": "巴西",
+  "フランス": "法国",
+  "フランス領ポリネシア": "法属波利尼西亚",
+  "ブルガリア": "保加利亚",
+  "ブルキナ・ファソ": "布基纳法索",
+  "ブルネイ・ダルサラーム": "文莱达鲁萨兰国",
+  "ブルンジ": "布隆迪",
+  "ベトナム": "越南",
+  "ベナン": "贝宁",
+  "ベネズエラ": "委内瑞拉",
+  "ベラルーシ": "白俄罗斯",
+  "ベリーズ": "伯利兹",
+  "ペルー": "秘鲁",
+  "ベルギー": "比利时",
+  "ポーランド": "波兰",
+  "ボスニア・ヘルツェゴビナ": "波斯尼亚和黑塞哥维那",
+  "ボツワナ": "博茨瓦纳",
+  "ボリビア": "玻利维亚",
+  "ポルトガル": "葡萄牙",
+  "ホンジュラス": "洪都拉斯",
+  "マーシャル諸島": "马绍尔群岛",
+  "マカオ": "澳门澳门",
+  "マダガスカル": "马达加斯加",
+  "マラウイ": "马拉维",
+  "マリ": "马里",
+  "マルタ": "马耳他",
+  "マルティニーク": "马提尼克岛",
+  "マレーシア": "马来西亚",
+  "マン島": "马恩岛",
+  "ミクロネシア連邦": "密克罗尼西亚联邦",
+  "ミャンマー（ビルマ）": "缅甸",
+  "モーリシャス": "毛里求斯",
+  "モーリタニア": "毛里塔尼亚",
+  "モルディブ": "马尔代夫",
+  "メキシコ": "墨西哥",
+  "モザンビーク": "莫桑比克",
+  "モナコ": "摩纳哥",
+  "モルドバ": "摩尔多瓦",
+  "モロッコ": "摩洛哥",
+  "モンゴル": "蒙古",
+  "モンセラート": "蒙特塞拉特",
+  "モンテネグロ": "黑山共和国",
+  "ヨルダン": "约旦",
+  "ラオス": "老挝",
+  "ラトビア": "拉脱维亚",
+  "リトアニア": "立陶宛",
+  "リヒテンシュタイン": "列支敦士登",
+  "リビア": "利比亚",
+  "リベリア": "利比里亚",
+  "ルーマニア": "罗马尼亚",
+  "ルクセンブルク": "卢森堡",
+  "ルワンダ": "卢旺达",
+  "レソト": "莱索托",
+  "レバノン": "黎巴嫩的",
+  "レユニオン": "团圆",
+  "ローマ教皇庁 (バチカン)": "罗马库里亚（梵蒂冈）",
+  "ロシア": "俄罗斯"
+}
\ No newline at end of file
diff --git a/resources/lang/zh-CN/site.php b/resources/lang/zh-CN/site.php
new file mode 100644
index 0000000..37ec7f4
--- /dev/null
+++ b/resources/lang/zh-CN/site.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+  'tuika' => '添加',
+  'hensyu' => '编辑',
+  'sakujyo' => '删除',
+  'signin' => '登入',
+  'signout' => '登出',
+  'toroku' => '登记',
+  'sinkitoroku' => '报名',
+  'hissu' => '强制的',
+  'username' => '用户名',
+  'hyojiname' => '显示名称',
+  'hyojiname_memo' => '如果不输入，将显示用户名。',
+  'password' => '密码',
+  'password_memo' => '如果您不更改密码，请不要直接输入密码。',
+  'passwordkakunin' => '确认密码',
+  'kuni' => '国家',
+  'seibetu' => '性别',
+  'densimail' => '电子邮件',
+  'de_kokai' => '发布时间:date',
+  'no_icon' => ':name的图标',
+  'jikosyokai' => '自我介绍',
+  'ippan' => '一般的',
+  'renraku' => '接触',
+  'gengo' => '语言',
+  'top' => '最佳',
+  'doga' => '视频',
+  'profilenohyoji' => '查看资料',
+  'profilenohensyu' => '编辑个人资料',
+  'tokonotuika' => '新增讯息',
+  'doganotuika' => '新增影片',
+  'comentitiran' => '评论清单',
+  'useritiran' => '用户清单',
+  'minyukaimono' => '非会员',
+];
diff --git a/resources/lang/zh-TW.json b/resources/lang/zh-TW.json
new file mode 100644
index 0000000..7c1804f
--- /dev/null
+++ b/resources/lang/zh-TW.json
@@ -0,0 +1,233 @@
+{
+  "男性": "男性",
+  "女性": "女性",
+  "不明": "未知",
+  "日本": "日本",
+  "大韓民国": "南韓",
+  "中華人民共和国": "中華人民共和國",
+  "香港": "香港",
+  "台湾": "台灣",
+  "赤道ギニア": "赤道幾內亞",
+  "北アイルランド": "北愛爾蘭",
+  "北朝鮮": "北朝鮮",
+  "北マケドニア": "北馬其頓",
+  "中央アフリカ共和国": "中非共和國",
+  "東ティモール": "東帝汶",
+  "南極": "南極",
+  "南アフリカ": "南非",
+  "西サハラ": "西撒哈拉",
+  "アイスランド": "冰島",
+  "アイルランド": "愛爾蘭",
+  "アゼルバイジャン": "阿塞拜疆",
+  "アフガニスタン": "阿富汗",
+  "アメリカ領ヴァージン諸島": "美屬維爾京群島",
+  "アメリカ領サモア": "美屬薩摩亞",
+  "アメリカ合衆国": "美國",
+  "アラブ首長国連邦": "阿拉伯聯合酋長國",
+  "アルジェリア": "阿爾及利亞",
+  "アルゼンチン": "阿根廷",
+  "アルバ": "阿魯巴島",
+  "アルバニア": "阿爾巴尼亞",
+  "アルメニア": "亞美尼亞",
+  "アンゴラ": "安哥拉",
+  "アングィラ": "安圭拉島",
+  "アンティグア・バーブーダ": "安提瓜和巴布達",
+  "アンドラ": "安道爾",
+  "イエメン": "也門",
+  "イギリス": "英國",
+  "イギリス領バージン諸島": "英屬維爾京群島",
+  "イスラエル": "以色列",
+  "イタリア": "意大利",
+  "イラク": "伊拉克",
+  "イラン": "伊朗",
+  "イングランド": "英國",
+  "インド": "印度",
+  "インドネシア": "印度尼西亞",
+  "ウェールズ": "威爾士",
+  "ウガンダ": "烏干達",
+  "ウクライナ": "烏克蘭",
+  "ウズベキスタン": "烏茲別克斯坦",
+  "ウルグアイ": "烏拉圭",
+  "エクアドル": "厄瓜多爾",
+  "エジプト": "埃及",
+  "エストニア": "愛沙尼亞",
+  "エスワティニ": "埃斯瓦蒂尼",
+  "エチオピア": "埃塞俄比亞",
+  "エリトリア": "厄立特里亞",
+  "エルサルバドル": "薩爾瓦多",
+  "オーストラリア": "澳大利亞",
+  "オーストリア": "奧地利",
+  "オマーン": "阿曼",
+  "オランダ": "荷蘭",
+  "オランダ領アンティル": "荷屬安的列斯群島",
+  "ガーナ": "加納",
+  "カーボベルデ": "佛得角",
+  "ガーンジー島": "根西島",
+  "ガイアナ": "圭亞那",
+  "カザフスタン": "哈薩克斯坦",
+  "カタール": "卡塔爾",
+  "カナダ": "加拿大",
+  "ガボン": "加蓬",
+  "カメルーン": "喀麥隆",
+  "ガンビア": "岡比亞",
+  "カンボジア": "柬埔寨",
+  "キプロス": "塞浦路斯",
+  "ギニア": "幾內亞",
+  "ギニア・ビサウ": "幾內亞比紹",
+  "キューバ": "古巴",
+  "ギリシャ": "希臘",
+  "キリバス": "基里巴斯",
+  "キルギス": "吉爾吉斯斯坦",
+  "グアテマラ": "危地馬拉",
+  "グアドループ": "瓜德羅普島",
+  "グアム": "關島",
+  "クウェート": "科威特",
+  "クック諸島": "庫克群島",
+  "グリーンランド": "格陵蘭",
+  "グレナダ": "格林納達",
+  "クロアチア": "克羅地亞",
+  "ケイマン諸島": "開曼群島",
+  "ケニア": "肯尼亞",
+  "コートジボワール": "科特迪瓦",
+  "コスタリカ": "哥斯達黎加",
+  "コソボ": "科索沃",
+  "コモロ": "科摩羅",
+  "コロンビア": "哥倫比亞",
+  "コンゴ": "剛果",
+  "コンゴ民主共和国": "剛果民主共和國",
+  "サウジアラビア": "沙特阿拉伯",
+  "サモア": "薩摩亞",
+  "サントメ・プリンシペ": "聖多美普林西比",
+  "ザンビア": "贊比亞",
+  "サン・マリの": "聖馬里",
+  "シエラレオネ": "塞拉利昂",
+  "ジブチ": "吉布地",
+  "ジブラルタル": "直布羅陀",
+  "シリア": "敘利亞",
+  "ジャージー島": "球衣",
+  "ジャマイカ": "的牙買加",
+  "ジョージア": "喬治亞州",
+  "シンガポール": "新加坡",
+  "ジンバブエ": "津巴布韋",
+  "スイス": "瑞士",
+  "スウェーデン": "瑞典",
+  "スーダン": "蘇丹",
+  "スコットランド": "蘇格蘭",
+  "スペイン": "西班牙",
+  "スリナム": "蘇里南",
+  "スリランカ": "斯里蘭卡",
+  "スロバキア": "斯洛伐克",
+  "スロベニア": "斯洛文尼亞",
+  "セーシェル": "塞舌爾",
+  "セネガル": "塞內加爾",
+  "セルビア": "塞爾維亞",
+  "セントクリストファー・ネービス": "聖基茨和尼維斯",
+  "セントビンセントおよびグレナディーン諸島": "聖文森特和格林納丁斯",
+  "セントルシア": "聖盧西亞",
+  "ソマリア": "索馬里",
+  "ソマリランド": "索馬里蘭",
+  "ソロモン諸島": "所羅門群島",
+  "タークス・カイコス諸島": "特克斯和凱科斯群島",
+  "タイ": "泰國",
+  "タジキスタン": "塔吉克斯坦",
+  "タンザニア": "坦桑尼亞",
+  "チャド": "乍得",
+  "チリ": "智利",
+  "チェコ": "捷克文",
+  "ツバル": "圖瓦盧",
+  "チュニジア": "突尼斯",
+  "デンマーク": "丹麥",
+  "トーゴ": "多哥",
+  "ドイツ": "德國",
+  "ドミニカ": "多米尼加",
+  "ドミニカ共和国": "多明尼加共和國",
+  "トリニダード・ドバゴ": "特立尼達和多巴哥",
+  "トルクメニスタン": "土庫曼斯坦",
+  "トルコ": "火雞",
+  "トンガ": "湯加",
+  "ナイジェリア": "奈及利亞",
+  "ナウル": "瑙魯",
+  "ナミビア": "納米比亞",
+  "ニカラグア": "尼加拉瓜",
+  "ニジェール": "尼日爾",
+  "ニューカレドニア": "新喀裡多尼亞",
+  "ニュージーランド": "新西蘭",
+  "ネパール": "尼尼泊爾",
+  "ノルウェー": "挪威",
+  "バーレーン": "巴林",
+  "ハイチ": "海地",
+  "パキスタン": "巴基斯坦",
+  "パナマ": "巴拿馬",
+  "バヌアツ": "瓦努阿圖",
+  "バハマ": "巴哈馬",
+  "パプアニューギニア": "巴布亞新幾內亞",
+  "バミューダ諸島": "百慕大",
+  "パラオ": "u琉",
+  "パラグアイ": "巴拉圭",
+  "バルバドス": "巴巴多斯",
+  "ハンガリー": "匈牙利",
+  "バングラデシュ": "孟加拉國",
+  "フィジー": "斐濟",
+  "フィリピン": "菲律賓",
+  "フィンランド": "芬蘭",
+  "プエルトリコ": "波多黎各",
+  "ブータン": "不丹",
+  "フェロー諸島": "法羅群島",
+  "ブラジル": "巴西",
+  "フランス": "法國",
+  "フランス領ポリネシア": "法屬波利尼西亞",
+  "ブルガリア": "保加利亞",
+  "ブルキナ・ファソ": "布基納法索",
+  "ブルネイ・ダルサラーム": "文萊達魯薩蘭國",
+  "ブルンジ": "布隆迪",
+  "ベトナム": "越南",
+  "ベナン": "貝寧",
+  "ベネズエラ": "委內瑞拉",
+  "ベラルーシ": "白俄羅斯",
+  "ベリーズ": "伯利茲",
+  "ペルー": "秘魯",
+  "ベルギー": "比利時",
+  "ポーランド": "波蘭",
+  "ボスニア・ヘルツェゴビナ": "波斯尼亞和黑塞哥維那",
+  "ボツワナ": "博茨瓦納",
+  "ボリビア": "玻利維亞",
+  "ポルトガル": "葡萄牙",
+  "ホンジュラス": "洪都拉斯",
+  "マーシャル諸島": "馬紹爾群島",
+  "マカオ": "澳門澳門",
+  "マダガスカル": "馬達加斯加",
+  "マラウイ": "馬拉維",
+  "マリ": "馬里",
+  "マルタ": "馬耳他",
+  "マルティニーク": "馬提尼克島",
+  "マレーシア": "馬來西亞",
+  "マン島": "馬恩島",
+  "ミクロネシア連邦": "密克羅尼西亞聯邦",
+  "ミャンマー（ビルマ）": "緬甸",
+  "モーリシャス": "毛里求斯",
+  "モーリタニア": "毛里塔尼亞",
+  "モルディブ": "馬爾代夫",
+  "メキシコ": "墨西哥",
+  "モザンビーク": "莫桑比克",
+  "モナコ": "摩納哥",
+  "モルドバ": "摩爾多瓦",
+  "モロッコ": "摩洛哥",
+  "モンゴル": "蒙古",
+  "モンセラート": "蒙特塞拉特",
+  "モンテネグロ": "黑山共和國",
+  "ヨルダン": "約旦",
+  "ラオス": "老撾",
+  "ラトビア": "拉脫維亞",
+  "リトアニア": "立陶宛",
+  "リヒテンシュタイン": "列支敦士登",
+  "リビア": "利比亞",
+  "リベリア": "利比里亞",
+  "ルーマニア": "羅馬尼亞",
+  "ルクセンブルク": "盧森堡",
+  "ルワンダ": "盧旺達",
+  "レソト": "萊索托",
+  "レバノン": "黎巴嫩的",
+  "レユニオン": "團圓",
+  "ローマ教皇庁 (バチカン)": "羅馬庫里亞（梵蒂岡）",
+  "ロシア": "俄羅斯"
+}
\ No newline at end of file
diff --git a/resources/lang/zh-TW/site.php b/resources/lang/zh-TW/site.php
new file mode 100644
index 0000000..327214b
--- /dev/null
+++ b/resources/lang/zh-TW/site.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+  'tuika' => '添加',
+  'hensyu' => '編輯',
+  'sakujyo' => '刪除',
+  'signin' => '登入',
+  'signout' => '登出',
+  'toroku' => '登記',
+  'sinkitoroku' => '報名',
+  'hissu' => '強制的',
+  'username' => '用戶名',
+  'hyojiname' => '顯示名稱',
+  'hyojiname_memo' => '如果不輸入，將顯示用戶名。',
+  'password' => '密碼',
+  'password_memo' => '如果您不更改密碼，請不要直接輸入密碼。',
+  'passwordkakunin' => '確認密碼',
+  'kuni' => '國家',
+  'seibetu' => '性別',
+  'densimail' => '電子郵件',
+  'de_kokai' => '發佈時間:date',
+  'no_icon' => ':name的圖標',
+  'jikosyokai' => '自我介紹',
+  'ippan' => '一般的',
+  'renraku' => '接觸',
+  'gengo' => '語言',
+  'top' => '最佳',
+  'doga' => '視頻',
+  'profilenohyoji' => '查看資料',
+  'profilenohensyu' => '編輯個人資料',
+  'tokonotuika' => '新增訊息',
+  'doganotuika' => '新增影片',
+  'comentitiran' => '評論清單',
+  'useritiran' => '用戶清單',
+  'minyukaimono' => '非會員',
+];
diff --git a/resources/views/errors/400.blade.php b/resources/views/errors/400.blade.php
new file mode 100644
index 0000000..d42a9ee
--- /dev/null
+++ b/resources/views/errors/400.blade.php
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>076エラー - リクエストが不正である</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div style="text-align: center;">
+            <h1>【４００】リクエストが不正である</h1>
+            <hr />
+            <p>076グループのサイト・サービス・顧客様です。<br /><a href="https://www.076.ne.jp">https://www.076.ne.jp</a></p>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/401.blade.php b/resources/views/errors/401.blade.php
new file mode 100644
index 0000000..d460835
--- /dev/null
+++ b/resources/views/errors/401.blade.php
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>076エラー - 認証が必要である</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div style="text-align: center;">
+            <h1>【４０１】認証が必要である</h1>
+            <hr />
+            <p>076グループのサイト・サービス・顧客様です。<br /><a href="https://www.076.ne.jp">https://www.076.ne.jp</a></p>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/403.blade.php b/resources/views/errors/403.blade.php
new file mode 100644
index 0000000..b70a03e
--- /dev/null
+++ b/resources/views/errors/403.blade.php
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>076エラー - 禁止されている</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div style="text-align: center;">
+            <h1>【４０３】禁止されている</h1>
+            <hr />
+            <p>076グループのサイト・サービス・顧客様です。<br /><a href="https://www.076.ne.jp">https://www.076.ne.jp</a></p>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
new file mode 100644
index 0000000..a0b9c74
--- /dev/null
+++ b/resources/views/errors/404.blade.php
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>076エラー - 未検出</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div style="text-align: center;">
+            <h1>【４０４】未検出</h1>
+            <hr />
+            <p>076グループのサイト・サービス・顧客様です。<br /><a href="https://www.076.ne.jp">https://www.076.ne.jp</a></p>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/405.blade.php b/resources/views/errors/405.blade.php
new file mode 100644
index 0000000..453bb1b
--- /dev/null
+++ b/resources/views/errors/405.blade.php
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>076エラー - 許可されていないメソッド</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div style="text-align: center;">
+            <h1>【４０５】許可されていないメソッド</h1>
+            <hr />
+            <p>076グループのサイト・サービス・顧客様です。<br /><a href="https://www.076.ne.jp">https://www.076.ne.jp</a></p>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/419.blade.php b/resources/views/errors/419.blade.php
new file mode 100644
index 0000000..c09216e
--- /dev/null
+++ b/resources/views/errors/419.blade.php
@@ -0,0 +1,5 @@
+@extends('errors::minimal')
+
+@section('title', __('Page Expired'))
+@section('code', '419')
+@section('message', __('Page Expired'))
diff --git a/resources/views/errors/429.blade.php b/resources/views/errors/429.blade.php
new file mode 100644
index 0000000..f01b07b
--- /dev/null
+++ b/resources/views/errors/429.blade.php
@@ -0,0 +1,5 @@
+@extends('errors::minimal')
+
+@section('title', __('Too Many Requests'))
+@section('code', '429')
+@section('message', __('Too Many Requests'))
diff --git a/resources/views/errors/500.blade.php b/resources/views/errors/500.blade.php
new file mode 100644
index 0000000..9f8c5c3
--- /dev/null
+++ b/resources/views/errors/500.blade.php
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>076エラー - サーバーの内部エラー</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div style="text-align: center;">
+            <h1>【５００】サーバーの内部エラー</h1>
+            <hr />
+            <p>076グループのサイト・サービス・顧客様です。<br /><a href="https://www.076.ne.jp">https://www.076.ne.jp</a></p>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/502.blade.php b/resources/views/errors/502.blade.php
new file mode 100644
index 0000000..2890f69
--- /dev/null
+++ b/resources/views/errors/502.blade.php
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>076エラー - 不正なゲートウェイ</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div style="text-align: center;">
+            <h1>【５０２】不正なゲートウェイ</h1>
+            <hr />
+            <p>076グループのサイト・サービス・顧客様です。<br /><a href="https://www.076.ne.jp">https://www.076.ne.jp</a></p>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/503.blade.php b/resources/views/errors/503.blade.php
new file mode 100644
index 0000000..ca14502
--- /dev/null
+++ b/resources/views/errors/503.blade.php
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>076エラー - このサービスは利用できません</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div style="text-align: center;">
+            <h1>【５０３】このサービスは利用できません</h1>
+            <hr />
+            <p>076グループのサイト・サービス・顧客様です。<br /><a href="https://www.076.ne.jp">https://www.076.ne.jp</a></p>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/504.blade.php b/resources/views/errors/504.blade.php
new file mode 100644
index 0000000..17c8f38
--- /dev/null
+++ b/resources/views/errors/504.blade.php
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>076エラー - ゲートウェイタイムアウト</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div style="text-align: center;">
+            <h1>【５０４】ゲートウェイタイムアウト</h1>
+            <hr />
+            <p>076グループのサイト・サービス・顧客様です。<br /><a href="https://www.076.ne.jp">https://www.076.ne.jp</a></p>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/595.blade.php b/resources/views/errors/595.blade.php
new file mode 100644
index 0000000..1710d5b
--- /dev/null
+++ b/resources/views/errors/595.blade.php
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>076エラー - 中止</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div style="text-align: center;">
+            <h1>【５９５】このサイトは中止しました</h1>
+            <p>
+                サイトオーナー様または会社長様は中止決定しました。
+                <br />
+                ご不便のほど、是非申し訳ありませんでした。
+            </p>
+            <hr />
+            <h5>サイトオーナー様または会社長様ですが、またサイトは復活するの場合は、076グループにメールを送信してお願い致します。</h5>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/596.blade.php b/resources/views/errors/596.blade.php
new file mode 100644
index 0000000..a7b695f
--- /dev/null
+++ b/resources/views/errors/596.blade.php
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>076エラー - 未払い</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div style="text-align: center;">
+            <h1>【５９６】このサイトは未払いがあります</h1>
+            <p>
+                サイトオーナー様または会社長様は未払いがあります。
+                <br />
+                ご不便のほど、是非申し訳ありませんでした。
+            </p>
+            <hr />
+            <h5>サイトオーナー様または会社長様ですが、お支払できるの場合は、076グループにメールを送信してお願い致します。</h5>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/illustrated-layout.blade.php b/resources/views/errors/illustrated-layout.blade.php
new file mode 100644
index 0000000..5fab02b
--- /dev/null
+++ b/resources/views/errors/illustrated-layout.blade.php
@@ -0,0 +1,486 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <title>@yield('title')</title>
+
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        <!-- Fonts -->
+        <link rel="dns-prefetch" href="//fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
+
+        <!-- Styles -->
+        <style>
+        html {
+            line-height: 1.15;
+                -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        body {
+            margin: 0;
+        }
+
+        header,
+        nav,
+        section {
+            display: block;
+        }
+
+        figcaption,
+        main {
+            display: block;
+        }
+
+        a {
+            background-color: transparent;
+            -webkit-text-decoration-skip: objects;
+        }
+
+        strong {
+            font-weight: inherit;
+        }
+
+        strong {
+            font-weight: bolder;
+        }
+
+        code {
+            font-family: monospace, monospace;
+            font-size: 1em;
+        }
+
+        dfn {
+            font-style: italic;
+        }
+
+        svg:not(:root) {
+            overflow: hidden;
+        }
+
+        button,
+        input {
+            font-family: sans-serif;
+            font-size: 100%;
+            line-height: 1.15;
+            margin: 0;
+        }
+
+        button,
+        input {
+            overflow: visible;
+        }
+
+        button {
+            text-transform: none;
+        }
+
+        button,
+        html [type="button"],
+        [type="reset"],
+        [type="submit"] {
+            -webkit-appearance: button;
+        }
+
+        button::-moz-focus-inner,
+        [type="button"]::-moz-focus-inner,
+        [type="reset"]::-moz-focus-inner,
+        [type="submit"]::-moz-focus-inner {
+            border-style: none;
+            padding: 0;
+        }
+
+        button:-moz-focusring,
+        [type="button"]:-moz-focusring,
+        [type="reset"]:-moz-focusring,
+        [type="submit"]:-moz-focusring {
+            outline: 1px dotted ButtonText;
+        }
+
+        legend {
+            -webkit-box-sizing: border-box;
+                    box-sizing: border-box;
+            color: inherit;
+            display: table;
+            max-width: 100%;
+            padding: 0;
+            white-space: normal;
+        }
+
+        [type="checkbox"],
+        [type="radio"] {
+            -webkit-box-sizing: border-box;
+                    box-sizing: border-box;
+            padding: 0;
+        }
+
+        [type="number"]::-webkit-inner-spin-button,
+        [type="number"]::-webkit-outer-spin-button {
+            height: auto;
+        }
+
+        [type="search"] {
+            -webkit-appearance: textfield;
+            outline-offset: -2px;
+        }
+
+        [type="search"]::-webkit-search-cancel-button,
+        [type="search"]::-webkit-search-decoration {
+            -webkit-appearance: none;
+        }
+
+        ::-webkit-file-upload-button {
+            -webkit-appearance: button;
+            font: inherit;
+        }
+
+        menu {
+            display: block;
+        }
+
+        canvas {
+            display: inline-block;
+        }
+
+        template {
+            display: none;
+        }
+
+        [hidden] {
+            display: none;
+        }
+
+        html {
+            -webkit-box-sizing: border-box;
+                    box-sizing: border-box;
+            font-family: sans-serif;
+        }
+
+        *,
+        *::before,
+        *::after {
+            -webkit-box-sizing: inherit;
+                    box-sizing: inherit;
+        }
+
+        p {
+            margin: 0;
+        }
+
+        button {
+            background: transparent;
+            padding: 0;
+        }
+
+        button:focus {
+            outline: 1px dotted;
+            outline: 5px auto -webkit-focus-ring-color;
+        }
+
+        *,
+        *::before,
+        *::after {
+            border-width: 0;
+            border-style: solid;
+            border-color: #dae1e7;
+        }
+
+        button,
+        [type="button"],
+        [type="reset"],
+        [type="submit"] {
+            border-radius: 0;
+        }
+
+        button,
+        input {
+            font-family: inherit;
+        }
+
+        input::-webkit-input-placeholder {
+            color: inherit;
+            opacity: .5;
+        }
+
+        input:-ms-input-placeholder {
+            color: inherit;
+            opacity: .5;
+        }
+
+        input::-ms-input-placeholder {
+            color: inherit;
+            opacity: .5;
+        }
+
+        input::placeholder {
+            color: inherit;
+            opacity: .5;
+        }
+
+        button,
+        [role=button] {
+            cursor: pointer;
+        }
+
+        .bg-transparent {
+            background-color: transparent;
+        }
+
+        .bg-white {
+            background-color: #fff;
+        }
+
+        .bg-teal-light {
+            background-color: #64d5ca;
+        }
+
+        .bg-blue-dark {
+            background-color: #2779bd;
+        }
+
+        .bg-indigo-light {
+            background-color: #7886d7;
+        }
+
+        .bg-purple-light {
+            background-color: #a779e9;
+        }
+
+        .bg-no-repeat {
+            background-repeat: no-repeat;
+        }
+
+        .bg-cover {
+            background-size: cover;
+        }
+
+        .border-grey-light {
+            border-color: #dae1e7;
+        }
+
+        .hover\:border-grey:hover {
+            border-color: #b8c2cc;
+        }
+
+        .rounded-lg {
+            border-radius: .5rem;
+        }
+
+        .border-2 {
+            border-width: 2px;
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        .flex {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+        }
+
+        .items-center {
+            -webkit-box-align: center;
+                -ms-flex-align: center;
+                    align-items: center;
+        }
+
+        .justify-center {
+            -webkit-box-pack: center;
+                -ms-flex-pack: center;
+                    justify-content: center;
+        }
+
+        .font-sans {
+            font-family: Nunito, sans-serif;
+        }
+
+        .font-light {
+            font-weight: 300;
+        }
+
+        .font-bold {
+            font-weight: 700;
+        }
+
+        .font-black {
+            font-weight: 900;
+        }
+
+        .h-1 {
+            height: .25rem;
+        }
+
+        .leading-normal {
+            line-height: 1.5;
+        }
+
+        .m-8 {
+            margin: 2rem;
+        }
+
+        .my-3 {
+            margin-top: .75rem;
+            margin-bottom: .75rem;
+        }
+
+        .mb-8 {
+            margin-bottom: 2rem;
+        }
+
+        .max-w-sm {
+            max-width: 30rem;
+        }
+
+        .min-h-screen {
+            min-height: 100vh;
+        }
+
+        .py-3 {
+            padding-top: .75rem;
+            padding-bottom: .75rem;
+        }
+
+        .px-6 {
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+        }
+
+        .pb-full {
+            padding-bottom: 100%;
+        }
+
+        .absolute {
+            position: absolute;
+        }
+
+        .relative {
+            position: relative;
+        }
+
+        .pin {
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
+
+        .text-black {
+            color: #22292f;
+        }
+
+        .text-grey-darkest {
+            color: #3d4852;
+        }
+
+        .text-grey-darker {
+            color: #606f7b;
+        }
+
+        .text-2xl {
+            font-size: 1.5rem;
+        }
+
+        .text-5xl {
+            font-size: 3rem;
+        }
+
+        .uppercase {
+            text-transform: uppercase;
+        }
+
+        .antialiased {
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        .tracking-wide {
+            letter-spacing: .05em;
+        }
+
+        .w-16 {
+            width: 4rem;
+        }
+
+        .w-full {
+            width: 100%;
+        }
+
+        @media (min-width: 768px) {
+            .md\:bg-left {
+                background-position: left;
+            }
+
+            .md\:bg-right {
+                background-position: right;
+            }
+
+            .md\:flex {
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+            }
+
+            .md\:my-6 {
+                margin-top: 1.5rem;
+                margin-bottom: 1.5rem;
+            }
+
+            .md\:min-h-screen {
+                min-height: 100vh;
+            }
+
+            .md\:pb-0 {
+                padding-bottom: 0;
+            }
+
+            .md\:text-3xl {
+                font-size: 1.875rem;
+            }
+
+            .md\:text-15xl {
+                font-size: 9rem;
+            }
+
+            .md\:w-1\/2 {
+                width: 50%;
+            }
+        }
+
+        @media (min-width: 992px) {
+            .lg\:bg-center {
+                background-position: center;
+            }
+        }
+        </style>
+    </head>
+    <body class="antialiased font-sans">
+        <div class="md:flex min-h-screen">
+            <div class="w-full md:w-1/2 bg-white flex items-center justify-center">
+                <div class="max-w-sm m-8">
+                    <div class="text-black text-5xl md:text-15xl font-black">
+                        @yield('code', __('Oh no'))
+                    </div>
+
+                    <div class="w-16 h-1 bg-purple-light my-3 md:my-6"></div>
+
+                    <p class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
+                        @yield('message')
+                    </p>
+
+                    <a href="{{ app('router')->has('home') ? route('home') : url('/') }}">
+                        <button class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">
+                            {{ __('Go Home') }}
+                        </button>
+                    </a>
+                </div>
+            </div>
+
+            <div class="relative pb-full md:flex md:pb-0 md:min-h-screen w-full md:w-1/2">
+                @yield('image')
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/layout.blade.php b/resources/views/errors/layout.blade.php
new file mode 100644
index 0000000..2c51d4f
--- /dev/null
+++ b/resources/views/errors/layout.blade.php
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>@yield('title')</title>
+
+        <!-- Fonts -->
+        <link rel="dns-prefetch" href="//fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
+
+        <!-- Styles -->
+        <style>
+            html, body {
+                background-color: #fff;
+                color: #636b6f;
+                font-family: 'Nunito', sans-serif;
+                font-weight: 100;
+                height: 100vh;
+                margin: 0;
+            }
+
+            .full-height {
+                height: 100vh;
+            }
+
+            .flex-center {
+                align-items: center;
+                display: flex;
+                justify-content: center;
+            }
+
+            .position-ref {
+                position: relative;
+            }
+
+            .content {
+                text-align: center;
+            }
+
+            .title {
+                font-size: 36px;
+                padding: 20px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="flex-center position-ref full-height">
+            <div class="content">
+                <div class="title">
+                    @yield('message')
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/errors/minimal.blade.php b/resources/views/errors/minimal.blade.php
new file mode 100644
index 0000000..1157501
--- /dev/null
+++ b/resources/views/errors/minimal.blade.php
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>@yield('title')</title>
+
+        <!-- Fonts -->
+        <link rel="dns-prefetch" href="//fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
+
+        <!-- Styles -->
+        <style>
+            html, body {
+                background-color: #fff;
+                color: #636b6f;
+                font-family: 'Nunito', sans-serif;
+                font-weight: 100;
+                height: 100vh;
+                margin: 0;
+            }
+
+            .full-height {
+                height: 100vh;
+            }
+
+            .flex-center {
+                align-items: center;
+                display: flex;
+                justify-content: center;
+            }
+
+            .position-ref {
+                position: relative;
+            }
+
+            .code {
+                border-right: 2px solid;
+                font-size: 26px;
+                padding: 0 15px 0 15px;
+                text-align: center;
+            }
+
+            .message {
+                font-size: 18px;
+                text-align: center;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="flex-center position-ref full-height">
+            <div class="code">
+                @yield('code')
+            </div>
+
+            <div class="message" style="padding: 10px;">
+                @yield('message')
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
new file mode 100644
index 0000000..f2e3a8a
--- /dev/null
+++ b/resources/views/layout.blade.php
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    @include('layout.component.manifest')
+    @include('layout.component.style')
+    @include('layout.component.meta')
+    @include('layout.component.stylelink')
+  </head>
+
+  <body id="custom-css">
+    <div class="peertube-container user-logged-in">
+      @include('layout.component.header')
+      <div class="sub-header-container">
+        @include('layout.component.menu')
+        @yield('content')
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/resources/views/layout/component/a/channels.blade.php b/resources/views/layout/component/a/channels.blade.php
new file mode 100644
index 0000000..c02f31f
--- /dev/null
+++ b/resources/views/layout/component/a/channels.blade.php
@@ -0,0 +1,14 @@
+<my-account-video-channels class="ng-star-inserted">
+  <div class="margin-content">
+    <div class="channels">
+      @foreach ($res['channel']->data as $ch)
+        <?php $fullchan = $ch->name.($ch->host != 'video.076.ne.jp' ? '@'.$ch->host : ''); ?>
+        <div class="channel ng-star-inserted">
+          @include('layout.component.a.channels.avatar')
+          @include('layout.component.common.subscribe')
+          @include('layout.component.a.channels.videos')
+        </div>
+      @endforeach
+    </div>
+  </div>
+</my-account-video-channels>
diff --git a/resources/views/layout/component/a/channels/avatar.blade.php b/resources/views/layout/component/a/channels/avatar.blade.php
new file mode 100644
index 0000000..14e0c72
--- /dev/null
+++ b/resources/views/layout/component/a/channels/avatar.blade.php
@@ -0,0 +1,18 @@
+<div class="channel-avatar-row">
+  <my-actor-avatar title="この動画チャンネルを見る">
+    <a title="この動画チャンネルを見る" href="/c/{{ $fullchan }}" class="ng-star-inserted">
+      <img class="avatar channel ng-star-inserted" src="{{ ptAvatar($ch) }}" alt="チャンネルのアバター">
+    </a>
+  </my-actor-avatar>
+  <h2>
+    <a title="この動画チャンネルを見る" href="/c/{{ $fullchan }}"> {{ $ch->displayName }} </a>
+  </h2>
+  <div class="actor-counters">
+    <div class="followers">{{ $ch->followersCount }}人登録者</div>・<span class="videos-count ng-star-inserted"> {{ $ch->video->total }}枚動画 </span>
+  </div>
+  <div class="description-html">
+    <p>
+      <?php echo $ch->description; ?>
+    </p>
+  </div>
+</div>
diff --git a/resources/views/layout/component/a/channels/videos.blade.php b/resources/views/layout/component/a/channels/videos.blade.php
new file mode 100644
index 0000000..0d488cd
--- /dev/null
+++ b/resources/views/layout/component/a/channels/videos.blade.php
@@ -0,0 +1,54 @@
+<div class="videos">
+  @foreach ($ch->video->data as $v)
+    <my-video-miniature class="ng-star-inserted">
+      <div class="video-miniature">
+        <my-video-thumbnail>
+          <a class="video-thumbnail ng-star-inserted" href="/w/{{ $v->shortUUID }}">
+            <img alt="" aria-label="{{ $v->name }}" src="https://video.076.ne.jp/{{ $v->thumbnailPath }}" class="ng-star-inserted">
+            <div class="video-thumbnail-label-overlay warning ng-star-inserted"></div>
+            <div class="video-thumbnail-label-overlay danger ng-star-inserted"></div>
+            @php
+              $seconds = $v->duration;
+              $hours = floor($seconds / 3600);
+              $seconds -= $hours * 3600;
+              $minutes = sprintf("%02d", floor($seconds / 60));
+              $seconds -= sprintf("%02d", $minutes * 60);
+            @endphp
+            <div class="video-thumbnail-duration-overlay ng-star-inserted">{{ $hours != 0 ? $hours.':' : '' }}{{ $minutes != 0 ? $minutes.':' : '0:' }}{{ $seconds }}</div>
+            <div class="play-overlay ng-star-inserted">
+              <div class="icon"></div>
+            </div>
+            <div class="progress-bar ng-star-inserted">
+              <div style="width: 100%;"></div>
+            </div>
+          </a>
+        </my-video-thumbnail>
+        <div class="video-bottom">
+          <div class="video-miniature-information">
+            <div class="d-flex video-miniature-meta">
+              <div class="w-100 d-flex flex-column">
+                <my-link tabindex="-1" class="video-miniature-name" style="max-height: 3em;">
+                  <a tabindex="-1" title="{{ $v->name }}" href="/w/{{ $v->shortUUID }}" class="ng-star-inserted"> {{ $v->name }} </a>
+                </my-link>
+                <span class="video-miniature-created-at-views">
+                  <my-date-toggle class="ng-star-inserted">
+                    <span class="date-toggle" title="{{ date('Y/m/d', strtotime($v->publishedAt)) }}"> {{ date('Y/m/d', strtotime($v->publishedAt)) }} </span>
+                  </my-date-toggle>
+                  <span class="views" title=""> • 
+                    <my-video-views-counter class="ng-star-inserted">
+                      <span title=""> {{ $v->views }} 回視聴</span>
+                    </my-video-views-counter>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </my-video-miniature>
+  @endforeach
+
+  <div class="miniature-show-channel ng-star-inserted">
+    <a href="/c/{{ $fullchan }}">このチャンネルを表示&gt;</a>
+  </div>
+</div>
diff --git a/resources/views/layout/component/a/info.blade.php b/resources/views/layout/component/a/info.blade.php
new file mode 100644
index 0000000..98e5fe4
--- /dev/null
+++ b/resources/views/layout/component/a/info.blade.php
@@ -0,0 +1,33 @@
+<div class="account-info">
+  <div class="account-avatar-row">
+    <my-actor-avatar class="main-avatar">
+      <img class="account avatar ng-star-inserted" src="{{ ptAvatar($res['owner']) }}" alt="アカウントのアバター">
+    </my-actor-avatar>
+    <div>
+      <div class="section-label">アカウント</div>
+      <div class="actor-info">
+        <div>
+          <div class="actor-display-name">
+            <h1 title="Created on {{ date('Y/m/d', strtotime($res['owner']->createdAt)) }}">{{ $res['owner']->displayName }}</h1>
+          </div>
+          <div class="actor-handle">
+            <span>{{ '@'.ptFullHandle($res['owner']) }}</span>
+          </div>
+          <div class="actor-counters">
+            <span>{{ $res['owner']->followersCount }}人登録者</span>・<span class="videos-count ng-star-inserted"> {{ $res['owner']->totalVideo }}枚動画 </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="description">
+    <div class="description-html">
+      <p>
+        {{ $res['owner']->description }}
+      </p>
+    </div>
+  </div>
+  <div class="buttons">
+    @include('layout.component.common.subscribe')
+  </div>
+</div>
diff --git a/resources/views/layout/component/a/links.blade.php b/resources/views/layout/component/a/links.blade.php
new file mode 100644
index 0000000..6299017
--- /dev/null
+++ b/resources/views/layout/component/a/links.blade.php
@@ -0,0 +1,22 @@
+<div class="links on-channel-page">
+  <my-list-overflow>
+    <div class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
+      <span id="pe_0" class="ng-star-inserted" style="visibility: inherit;">
+        <a class="title-page ng-star-inserted active" href="/a/{{ ptFullHandle($res['owner']) }}/video-channels">チャンネル</a>
+      </span>
+      <span id="pe_1" class="ng-star-inserted" style="visibility: inherit;">
+        <a class="title-page ng-star-inserted" href="/a/{{ ptFullHandle($res['owner']) }}/videos">動画</a>
+      </span>
+    </div>
+  </my-list-overflow>
+  <my-simple-search-input name="search-videos" icon-title="Search account videos" placeholder="アカウントの動画を検索する">
+    <div class="root" style="display: flex;">
+      <div class="input-group has-feedback has-clear">
+        <input type="text" placeholder="アカウントの動画を検索する" class="ng-untouched ng-pristine ng-valid">
+      </div>
+      <my-global-icon class="myglobalicon-alt" iconname="search" aria-label="Search" role="button" title="検索">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+      </my-global-icon>
+    </div>
+  </my-simple-search-input>
+</div>
diff --git a/resources/views/layout/component/c/head.blade.php b/resources/views/layout/component/c/head.blade.php
new file mode 100644
index 0000000..7c74b3f
--- /dev/null
+++ b/resources/views/layout/component/c/head.blade.php
@@ -0,0 +1,7 @@
+<div class="main-row">
+  <div class="root ng-star-inserted">
+    @include('layout.component.c.head.banner')
+    @include('layout.component.c.head.info')
+    @include('layout.component.c.head.owner', ['class' => 'bottom-owner'])
+  </div>
+</div>
diff --git a/resources/views/layout/component/c/head/banner.blade.php b/resources/views/layout/component/c/head/banner.blade.php
new file mode 100644
index 0000000..7c7cd56
--- /dev/null
+++ b/resources/views/layout/component/c/head/banner.blade.php
@@ -0,0 +1,5 @@
+@if (!is_null($res['channel']->banner))
+  <div class="banner ng-star-inserted">
+    <img alt="Channel banner" src="https://video.076.ne.jp{{ $res['channel']->banner->path }}">
+  </div>
+@endif
\ No newline at end of file
diff --git a/resources/views/layout/component/c/head/info.blade.php b/resources/views/layout/component/c/head/info.blade.php
new file mode 100644
index 0000000..68d52e0
--- /dev/null
+++ b/resources/views/layout/component/c/head/info.blade.php
@@ -0,0 +1,48 @@
+<div class="channel-info">
+  <div class="channel-avatar-row">
+    <my-actor-avatar class="main-avatar">
+      <img class="avatar channel ng-star-inserted" src="{{ ptAvatar($res['channel']) }}" alt="チャンネルのアバター">
+    </my-actor-avatar>
+    <div>
+      <div class="section-label">動画チャンネル</div>
+      <div class="actor-info">
+        <div>
+          <div class="actor-display-name">
+            <h1 title="Channel created on {{ date('Y/m/d', strtotime($res['channel']->createdAt)) }}">{{ $res['channel']->displayName }}</h1>
+          </div>
+          <div class="actor-handle">
+            <span>{{ '@'.ptFullHandle($res['channel']) }}</span>
+          </div>
+          <div class="actor-counters">
+            <span>{{ $res['channel']->followersCount }}人登録者</span>
+            <span class="videos-count ng-star-inserted"> {{ $res['video']->total }}枚動画 </span>
+          </div>
+        </div>
+        <div class="channel-buttons right">
+          @include('layout.component.common.subscribe')
+          <button class="support-button peertube-button orange-button-inverted ng-star-inserted">
+            <my-global-icon iconname="support" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 947.70386 999.3125" width="947.70386" height="999.3125">
+                <g transform="translate(2.669496,27.625894)">
+                  <g transform="matrix(0.1,0,0,-0.1,0,511)">
+                    <path d="m 3744.3542,4564.3712 c -217.4,-34.2 -520.3,-200.3 -693.7,-376.2 -263.8,-263.8 -388.4,-571.6 -388.4,-952.6 0,-256.5 44,-437.2 173.4,-684 75.7,-144.1 197.9,-280.9 747.5,-842.7 1106.5,-1133.40001 1138.2,-1165.20001 1253,-1194.50001 188.1,-51.3 214.9,-29.3 1162.7,938.00001 498.3,508.1 911.1,950.2 962.4,1030.8 263.8,415.3 283.3,964.9 48.8,1409.4 -180.8,342 -581.3,620.4 -972.2,676.6 -332.2,48.9 -671.7,-36.6 -967.3,-236.9 l -156.3,-109.9 -119.7,87.9 c -158.8,117.2 -351.8,202.7 -554.5,244.3 -183.1,39.1 -295.4,41.6 -495.7,9.8 z" fill="currentColor"></path>
+                    <path d="m 7991.4051,47.633899 c -39.1,-19.5 -473.9,-437.299999 -964.9,-925.800029 l -891.6,-891.59997 h -830.5 c -757.2,0 -837.8,4.9 -913.6,44 -207.6,112.4 -227.2,415.2 -39.1,561.8 66,53.7 83,53.7 950.2,53.7 989.3,0 1008.8,2.5 1094.3,173.49997 56.2,105 56.2,317.50003 4.9,427.50003 -83.1,175.9 4.8,168.5 -1915.1,168.5 h -1722 l -173.4,-63.5 c -95.3,-34.2 -232.1,-102.6 -305.3,-151.5 -73.3,-48.9 -442.1,-400.60003 -823.2,-779.2 l -688.80006,-693.7 664.40006,-647.3 c 366.4,-354.2 779.2,-754.8 918.4,-889.1 l 251.6,-241.8 481.2,481.2 481.2,481.2 h 1487.6 c 1294.6,0 1494.9,4.9 1565.8,39.1 58.6,26.9 339.6,368.8 1028.4,1248.2 522.8,666.89997 964.9,1243.3 982,1284.9 41.5,92.8 2.5,212.499999 -95.3,297.999999 -66,53.7 -95.3,61.1 -273.6,61.1 -132,-0.1 -224.8,-12.3 -273.6,-39.2 z" fill="currentColor"></path>
+                  </g>
+                </g>
+              </svg>
+            </my-global-icon>
+            <span class="icon-text">支持</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="channel-description">
+    <div class="description-html">
+      <p>
+        <?php echo nl2br($res['channel']->description); ?>
+      </p>
+    </div>
+  </div>
+  @include('layout.component.c.head.owner', ['class' => 'owner-card'])
+</div>
diff --git a/resources/views/layout/component/c/head/owner.blade.php b/resources/views/layout/component/c/head/owner.blade.php
new file mode 100644
index 0000000..4496951
--- /dev/null
+++ b/resources/views/layout/component/c/head/owner.blade.php
@@ -0,0 +1,22 @@
+<div class="{{ $class }}">
+  <div class="owner-block ng-star-inserted">
+    <div class="section-label">OWNER ACCOUNT</div>
+    <div class="avatar-row">
+      <my-actor-avatar class="account-avatar">
+        <a title="{{ ptFullHandle($res['channel']->ownerAccount) }} (アカウントページへ) " href="/a/{{ ptFullHandle($res['channel']->ownerAccount) }}" class="ng-star-inserted">
+          <img class="account avatar ng-star-inserted" src="{{ ptAvatar($res['channel']->ownerAccount) }}" alt="アカウントのアバター">
+        </a>
+      </my-actor-avatar>
+      <div class="actor-info">
+      <h4>
+        <a title="視聴回数" href="/a/{{ ptFullHandle($res['channel']->ownerAccount) }}">{{ $res['channel']->ownerAccount->displayName }}</a>
+      </h4>
+      <div class="actor-handle">{{ '@'.ptFullHandle($res['channel']->ownerAccount) }}</div>
+    </div>
+  </div>
+  <div class="owner-description">
+    <div class="description-html"></div>
+  </div>
+  <a class="view-account short" href="/a/{{ ptFullHandle($res['channel']->ownerAccount) }}">視聴回数</a>
+  <a class="view-account complete" href="/a/{{ ptFullHandle($res['channel']->ownerAccount) }}"> View owner account </a>
+</div>
diff --git a/resources/views/layout/component/c/links.blade.php b/resources/views/layout/component/c/links.blade.php
new file mode 100644
index 0000000..d22704c
--- /dev/null
+++ b/resources/views/layout/component/c/links.blade.php
@@ -0,0 +1,12 @@
+<div class="links">
+  <my-list-overflow>
+    <div class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
+      <span id="pe_0" class="ng-star-inserted" style="visibility: inherit;">
+        <a class="title-page ng-star-inserted{{ $res['cat'] == 'videos' ? ' active' : '' }}" href="/c/{{ ptFullHandle($res['channel']) }}/videos">動画</a>
+      </span>
+      <span id="pe_1" class="ng-star-inserted" style="visibility: inherit;">
+        <a class="title-page ng-star-inserted{{ $res['cat'] == 'video-playlists' ? ' active' : '' }}" href="/c/{{ ptFullHandle($res['channel']) }}/video-playlists">プレイリスト</a>
+      </span>
+    </div>
+  </my-list-overflow>
+</div>
diff --git a/resources/views/layout/component/c/playlists.blade.php b/resources/views/layout/component/c/playlists.blade.php
new file mode 100644
index 0000000..8414675
--- /dev/null
+++ b/resources/views/layout/component/c/playlists.blade.php
@@ -0,0 +1,30 @@
+<div class="margin-content">
+  <div class="title-page title-page-single ng-star-inserted"> 再生リスト数：{{ $res['video']->total }} </div>
+  <div class="playlists">
+    @foreach ($res['video']->data as $v)
+      <div class="playlist-wrapper ng-star-inserted">
+        <my-video-playlist-miniature>
+          <div class="miniature">
+            <my-link class="miniature-thumbnail">
+              <a tabindex="0" href="/w/p/{{ $v->shortUUID }}" class="ng-star-inserted">
+                <img alt="" aria-labelledby="{{ $v->displayName }}" src="{{ !is_null($v->thumbnailPath) ? 'https://video.076.ne.jp'.$v->thumbnailPath : '/img/noicon.jpg' }}" class="ng-star-inserted">
+                <div class="miniature-playlist-info-overlay ng-star-inserted">動画数：{{ $v->videosLength }} </div>
+                <div class="play-overlay ng-star-inserted">
+                  <div class="icon"></div>
+                </div>
+              </a>
+            </my-link>
+            <div class="miniature-info">
+              <my-link tabindex="-1" class="miniature-name">
+                <a tabindex="-1" href="/w/p/ocDHV9wrgt4BhWZ3STJrfg" class="ng-star-inserted"> {{ $v->displayName }} </a>
+              </my-link>
+              <div class="privacy-date">
+                <span class="updated-at">最新更新： {{ date('Y年m月d日', strtotime($v->updatedAt)) }}</span>
+              </div>
+            </div>
+          </div>
+        </my-video-playlist-miniature>
+      </div>
+    @endforeach
+  </div>
+</div>
diff --git a/resources/views/layout/component/c/videos.blade.php b/resources/views/layout/component/c/videos.blade.php
new file mode 100644
index 0000000..3b82394
--- /dev/null
+++ b/resources/views/layout/component/c/videos.blade.php
@@ -0,0 +1,27 @@
+<my-video-channel-videos class="ng-star-inserted" style="">
+  <my-videos-list class="ng-star-inserted">
+    <div class="margin-content">
+      <div class="videos-header">
+        <div class="title-subscription no-title ng-star-inserted">
+          Subscribe to RSS feed "動画"
+          <my-feed>
+            <div class="feed">
+              <my-global-icon role="button" aria-label="Open syndication dropdown" placement="bottom left auto" iconname="syndication" class="icon-syndication ng-star-inserted">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
+              </my-global-icon>
+            </div>
+          </my-feed>
+        </div>
+        <div class="action-block"></div>
+      </div>
+      <div class="videos">
+        @foreach ($res['video']->data as $v)
+          @include('layout.component.common.videominature')
+        @endforeach
+      </div>
+      @include('layout.component.common.paginate', [
+        'root' => '/c/'.$res['channel']->name.($res['channel']->host != 'video.076.ne.jp' ? '@'.$res['channel']->host : '').'/'.$res['cat']
+      ])
+    </div>
+  </my-videos-list>
+</my-video-channel-videos>
diff --git a/resources/views/layout/component/common/paginate.blade.php b/resources/views/layout/component/common/paginate.blade.php
new file mode 100644
index 0000000..c70e127
--- /dev/null
+++ b/resources/views/layout/component/common/paginate.blade.php
@@ -0,0 +1,2 @@
+@if ($res['paginate'] != 0) <a href="{{ $root }}/{{ $res['paginate']-1 }}" class="block-title">戻り</a> @endif
+@if (($res['paginate']*25) < $res['pagetotal']) <a href="{{ $root }}/{{ $res['paginate']+1 }}" class="block-title">次</a> @endif
\ No newline at end of file
diff --git a/resources/views/layout/component/common/subscribe.blade.php b/resources/views/layout/component/common/subscribe.blade.php
new file mode 100644
index 0000000..c0e805d
--- /dev/null
+++ b/resources/views/layout/component/common/subscribe.blade.php
@@ -0,0 +1,7 @@
+<my-subscribe-button size="small">
+  <div class="btn-group-subscribe btn subscribe-button">
+    <button type="button" role="button" class="btn btn-sm ng-star-inserted">登録</button>
+    <button type="button" role="button" class="btn btn-sm ng-star-inserted">リモート登録</button>
+    <button type="button" role="button" class="btn btn-sm ng-star-inserted">RSSで登録</button>
+  </div>
+</my-subscribe-button>
\ No newline at end of file
diff --git a/resources/views/layout/component/common/videominature.blade.php b/resources/views/layout/component/common/videominature.blade.php
new file mode 100644
index 0000000..849f8fe
--- /dev/null
+++ b/resources/views/layout/component/common/videominature.blade.php
@@ -0,0 +1,60 @@
+<div class="video-wrapper ng-star-inserted">
+  <my-video-miniature>
+    <div class="video-miniature">
+      <my-video-thumbnail>
+        <a class="video-thumbnail ng-star-inserted" href="/w/{{ $v->shortUUID }}">
+          <img alt="" aria-label="{{ $v->name }}" src="https://video.076.ne.jp{{ $v->thumbnailPath }}" class="ng-star-inserted">
+          <div class="video-thumbnail-actions-overlay ng-star-inserted">
+            <div placement="left" container="body" class="video-thumbnail-watch-later-overlay ng-star-inserted">
+              <my-global-icon iconname="clock" role="button" aria-label="「後で見る」に追加する">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
+              </my-global-icon>
+            </div>
+          </div>
+          <div class="video-thumbnail-label-overlay warning ng-star-inserted"></div>
+          <div class="video-thumbnail-label-overlay danger ng-star-inserted"></div>
+          @php
+            $seconds = $v->duration;
+            $hours = floor($seconds / 3600);
+            $seconds -= $hours * 3600;
+            $minutes = sprintf("%02d", floor($seconds / 60));
+            $seconds -= sprintf("%02d", $minutes * 60);
+          @endphp
+          <div class="video-thumbnail-duration-overlay ng-star-inserted">{{ $hours != 0 ? $hours.':' : '' }}{{ $minutes != 0 ? $minutes.':' : '0:' }}{{ $seconds }}</div>
+          <div class="play-overlay ng-star-inserted">
+            <div class="icon"></div>
+          </div>
+          <div class="progress-bar ng-star-inserted">
+            <div style="width: 100%;"></div>
+          </div>
+        </a>
+      </my-video-thumbnail>
+      <div class="video-bottom">
+        <div class="video-miniature-information">
+          <div class="d-flex video-miniature-meta">
+            <div class="w-100 d-flex flex-column">
+              <my-link tabindex="-1" class="video-miniature-name" style="max-height: 3em;">
+                <a tabindex="-1" title="{{ $v->name }}" href="/w/{{ $v->shortUUID }}" class="ng-star-inserted"> {{ $v->name }} </a>
+              </my-link>
+              <span class="video-miniature-created-at-views">
+                <my-date-toggle class="ng-star-inserted">
+                  <span class="date-toggle" title="{{ date('Y/m/d', strtotime($v->createdAt)) }}"> {{ date('Y年m月d日 H:i:s T', strtotime($v->createdAt)) }} </span>
+                </my-date-toggle>
+                <span class="views" title=""> • 
+                  <my-video-views-counter class="ng-star-inserted">
+                    <span title=""> {{ $v->views }} 回視聴 </span>
+                  </my-video-views-counter>
+                </span>
+              </span>
+              @if ($res['page'] != 'channel')
+                <a tabindex="-1" class="video-miniature-channel ng-star-inserted" href="/c/{{ ptFullHandle($v->channel) }}"> {{ $v->channel->displayName }} </a>
+              @endif
+              <div class="video-info-privacy"></div>
+            </div>
+          </div>
+        </div>
+        <div class="video-actions"></div>
+      </div>
+    </div>
+  </my-video-miniature>
+</div>
diff --git a/resources/views/layout/component/common/videosbydate.blade.php b/resources/views/layout/component/common/videosbydate.blade.php
new file mode 100644
index 0000000..5d7407a
--- /dev/null
+++ b/resources/views/layout/component/common/videosbydate.blade.php
@@ -0,0 +1,43 @@
+<div class="videos">
+  @if (!empty($res['video']['today']))
+    <h2 class="date-title ng-star-inserted"> 今日 </h2>
+    @foreach ($res['video']['today'] as $v)
+      @include('layout.component.common.videominature')
+    @endforeach
+  @endif
+
+  @if (!empty($res['video']['yesterday']))
+    <h2 class="date-title ng-star-inserted"> 今日 </h2>
+    @foreach ($res['video']['today'] as $v)
+      @include('layout.component.common.videominature')
+    @endforeach
+  @endif
+
+  @if (!empty($res['video']['week']))
+    <h2 class="date-title ng-star-inserted"> 今週 </h2>
+    @foreach ($res['video']['week'] as $v)
+      @include('layout.component.common.videominature')
+    @endforeach
+  @endif
+
+  @if (!empty($res['video']['month']))
+    <h2 class="date-title ng-star-inserted"> 今月 </h2>
+    @foreach ($res['video']['month'] as $v)
+      @include('layout.component.common.videominature')
+    @endforeach
+  @endif
+
+  @if (!empty($res['video']['lastmonth']))
+    <h2 class="date-title ng-star-inserted"> 先月 </h2>
+    @foreach ($res['video']['lastmonth'] as $v)
+      @include('layout.component.common.videominature')
+    @endforeach
+  @endif
+
+  @if (!empty($res['video']['moreearly']))
+    <h2 class="date-title ng-star-inserted"> もっと前 </h2>
+    @foreach ($res['video']['moreearly'] as $v)
+      @include('layout.component.common.videominature')
+    @endforeach
+  @endif
+</div>
diff --git a/resources/views/layout/component/header.blade.php b/resources/views/layout/component/header.blade.php
new file mode 100644
index 0000000..fb8c273
--- /dev/null
+++ b/resources/views/layout/component/header.blade.php
@@ -0,0 +1,64 @@
+<div class="header">
+  <div class="top-left-block">
+    <a class="peertube-title c-hand">
+      <span class="icon icon-logo"></span>
+      <span class="instance-name">076動画</span>
+    </a>
+    <a class="peertube-title c-hand" href="http://{{ env('ONION_HOST') }}">
+      <span class="icon icon-logo"></span>
+      <span class="publish-button-label">Tor</span>
+    </a>
+    <a class="peertube-title c-hand" href="/feed">
+      <span class="icon icon-logo"></span>
+      <span class="publish-button-label">RSS</span>
+    </a>
+  </div>
+  <div class="header-right">
+    <my-header class="w-100 d-flex justify-content-end">
+      <my-search-typeahead class="w-100 d-flex justify-content-end">
+        <div id="typeahead-container" class="d-inline-flex position-relative">
+          <input type="text" id="search-video" name="search-video" placeholder="動画、プレイリスト、チャンネルを検索する…" aria-label="Search" autocomplete="off" class="ng-untouched ng-pristine ng-valid">
+          <my-global-icon title="検索" role="button" iconname="search" class="icon icon-search">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+          </my-global-icon>
+          <!--div class="position-absolute jump-to-suggestions">
+            <ul role="listbox" class="p-0 m-0" hidden="">
+            </ul>
+            <div id="typeahead-instructions" class="overflow-hidden ng-star-inserted">
+              <span class="text-muted">Your query will be matched against video names or descriptions, channel names.</span>
+              <div class="d-flex justify-content-between mt-3">
+                <label class="small-title">高度な検索</label>
+                <div class="advanced-search-status c-help">
+                  <span title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows." class="text-success">
+                    <span class="mr-1 ng-star-inserted">any instance</span>
+                    <i class="glyphicon glyphicon-ok-sign"></i>
+                  </span>
+                </div>
+              </div>
+              <ul>
+                <li>
+                  <em>@channel_id@domain</em>
+                  <span class="flex-auto text-muted">検索にマッチしたチャンネルを表示します</span>
+                </li>
+                <li>
+                  <em>URL</em>
+                  <span class="text-muted">検索にマッチしたチャンネルを表示します</span>
+                </li>
+                <li>
+                  <em>UUID</em>
+                  <span class="text-muted">検索にマッチした動画を表示します</span>
+                </li>
+              </ul>
+            </div>
+          </div-->
+        </div>
+      </my-search-typeahead>
+      <a class="publish-button" href="/videos/upload">
+        <my-global-icon iconname="upload" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
+        </my-global-icon>
+        <span class="publish-button-label">投稿</span>
+      </a>
+    </my-header>
+  </div>
+</div>
diff --git a/resources/views/layout/component/home/newest.blade.php b/resources/views/layout/component/home/newest.blade.php
new file mode 100644
index 0000000..ae23937
--- /dev/null
+++ b/resources/views/layout/component/home/newest.blade.php
@@ -0,0 +1,8 @@
+<div class="section channel videos ng-star-inserted">
+  <div class="section-title">
+    <h2 class="section-title">最新投稿された動画</h2>
+  </div>
+  @foreach ($res['new']->data as $v)
+    @include('layout.component.common.videominature')
+  @endforeach
+</div>
diff --git a/resources/views/layout/component/home/popularest.blade.php b/resources/views/layout/component/home/popularest.blade.php
new file mode 100644
index 0000000..00c8311
--- /dev/null
+++ b/resources/views/layout/component/home/popularest.blade.php
@@ -0,0 +1,8 @@
+<div class="section channel videos ng-star-inserted">
+  <div class="section-title">
+    <h2 class="section-title">人気な動画</h2>
+  </div>
+  @foreach ($res['hot']->data as $v)
+    @include('layout.component.common.videominature')
+  @endforeach
+</div>
diff --git a/resources/views/layout/component/manifest.blade.php b/resources/views/layout/component/manifest.blade.php
new file mode 100644
index 0000000..80bf33d
--- /dev/null
+++ b/resources/views/layout/component/manifest.blade.php
@@ -0,0 +1,35 @@
+<?php
+  $name = '';
+
+  if (isset($res['page'])) {
+    if ($res['page'] == 'watch') $name = $res['detail']->name;
+    else if ($res['page'] == 'account') $name = $res['owner']->displayName.'さんのチャンネル一覧';
+    else if ($res['page'] == 'channel') $name = $res['channel']->displayName.'さんのチャンネル';
+    else if ($res['page'] == 'home') $name = 'トップページ';
+    else if ($res['page'] == 'overview') $name = 'ディスカバー';
+    else if ($res['page'] == 'trending') $name = 'トレンド';
+    else if ($res['page'] == 'recently-added') $name = '最近投稿された動画';
+    else if ($res['page'] == 'local') $name = 'ローカル動画';
+    else if ($res['page'] == 'about') $name = 'このアプリについて';
+    else if ($res['page'] == 'notification') $name = '通知';
+  }
+?>
+
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<meta name="theme-color" content="#fff">
+<meta property="og:platform" content="PeerTube">
+
+<link rel="manifest" href="https://video.076.ne.jp/manifest.webmanifest?bb691a77622cbc0c1178f4dbf7d7e93daaecb079">
+
+<link rel="icon" type="image/png" href="/img/favicon.jpeg">
+<link rel="apple-touch-icon" href="/img/favicon.jpeg" sizes="144x144">
+<link rel="apple-touch-icon" href="/img/favicon.jpeg" sizes="192x192">
+
+<base href="{{ env('APP_URL') }}/client/ja-JP/">
+
+<title>
+  {{ $name }} - 076動画
+</title>
+<meta name="description" content="テクニカル諏訪子様の動画サイト" />
diff --git a/resources/views/layout/component/menu.blade.php b/resources/views/layout/component/menu.blade.php
new file mode 100644
index 0000000..cf253c1
--- /dev/null
+++ b/resources/views/layout/component/menu.blade.php
@@ -0,0 +1,8 @@
+<my-menu class="ng-star-inserted">
+  <div class="menu-wrapper">
+    <menu class="is-logged-in">
+      @include('layout.component.menu.top')
+      @include('layout.component.menu.footer')
+    </menu>
+  </div>
+</my-menu>
diff --git a/resources/views/layout/component/menu/footer.blade.php b/resources/views/layout/component/menu/footer.blade.php
new file mode 100644
index 0000000..dc92b8f
--- /dev/null
+++ b/resources/views/layout/component/menu/footer.blade.php
@@ -0,0 +1,10 @@
+<div class="footer">
+  <div class="footer-block">
+    <a class="menu-link" href="/about">
+      <my-global-icon iconname="help" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+      </my-global-icon>
+      このアプリについて
+    </a>
+  </div>
+</div>
diff --git a/resources/views/layout/component/menu/top.blade.php b/resources/views/layout/component/menu/top.blade.php
new file mode 100644
index 0000000..2eaf617
--- /dev/null
+++ b/resources/views/layout/component/menu/top.blade.php
@@ -0,0 +1,9 @@
+<div class="top-menu">
+  @if (!is_null($res['userinfo']) && (isset($res['userinfo']['me']) && !is_null($res['userinfo']['me'])))
+    @include('layout.component.menu.top.loggedin')
+    @include('layout.component.menu.top.inmylibrary')
+  @else
+    @include('layout.component.menu.top.loginmenu')
+  @endif
+  @include('layout.component.menu.top.oninstance')
+</div>
diff --git a/resources/views/layout/component/menu/top/inmylibrary.blade.php b/resources/views/layout/component/menu/top/inmylibrary.blade.php
new file mode 100644
index 0000000..3c46348
--- /dev/null
+++ b/resources/views/layout/component/menu/top/inmylibrary.blade.php
@@ -0,0 +1,29 @@
+<div class="in-my-library menu-block ng-star-inserted">
+  <div class="block-title">
+    In my library
+  </div>
+  <a class="menu-link ng-star-inserted" href="/my-library/videos">
+    <my-global-icon aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="material" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"></path><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z"></path></svg>
+    </my-global-icon>
+    動画
+  </a>
+  <a class="menu-link ng-star-inserted" href="/my-library/video-playlists">
+    <my-global-icon aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
+    </my-global-icon>
+    再生リスト
+  </a>
+  <a class="menu-link ng-star-inserted" href="/videos/subscriptions">
+    <my-global-icon aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="material" width="24px" height="24px"><path d="M20 8H4V6h16v2zm-2-6H6v2h12V2zm4 10v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-8c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2zm-6 4l-6-3.27v6.53L16 16z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
+    </my-global-icon>
+    登録チャンネル
+  </a>
+  <a class="menu-link ng-star-inserted" href="/my-library/history/videos">
+    <my-global-icon aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="material" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"></path><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"></path></svg>
+    </my-global-icon>
+    履歴
+  </a>
+</div>
diff --git a/resources/views/layout/component/menu/top/loggedin.blade.php b/resources/views/layout/component/menu/top/loggedin.blade.php
new file mode 100644
index 0000000..dd6ecbf
--- /dev/null
+++ b/resources/views/layout/component/menu/top/loggedin.blade.php
@@ -0,0 +1,48 @@
+<div class="logged-in-block ng-star-inserted">
+  <div>
+    <div placement="bottom-left auto" autoclose="outside" class="logged-in-more dropdown">
+      <a href="/a/{{ ptFullHandle($res['userinfo']['me']->account) }}">
+        <div class="dropdown-toggle" aria-expanded="false">
+          <my-actor-avatar size="34">
+            <img class="account avatar avatar-34 ng-star-inserted" src="{{ ptAvatar($res['userinfo']['me']->account) }}" alt="アカウントのアバター">
+          </my-actor-avatar>
+          <div class="logged-in-info">
+            <div class="logged-in-display-name">{{ $res['userinfo']['me']->account->displayName }}</div>
+            <div class="logged-in-username">{{ '@'.ptFullHandle($res['userinfo']['me']->account) }}</div>
+          </div>
+        </div>
+      </a>
+    </div>
+    @include('layout.component.menu.top.notification')
+  </div>
+  <div class="logged-in-menu">
+    <a class="menu-link" href="/my-account">
+      <my-global-icon iconname="user" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+      </my-global-icon>
+      自分のアカウント
+    </a>
+    <a class="menu-link" href="/my-library">
+      <my-global-icon iconname="channel" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tv"><rect x="2" y="7" width="20" height="15" rx="2" ry="2"></rect><polyline points="17 2 12 7 7 2"></polyline></svg>
+      </my-global-icon>
+      自分のライブラリ
+    </a>
+    @if (!is_null($res['userinfo']) && (isset($res['userinfo']['me']) && !is_null($res['userinfo']['me']) && $res['userinfo']['me']->adminFlags == 1))
+      <a class="menu-link ng-star-inserted" href="/admin/users">
+        <my-global-icon iconname="cog" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+        </my-global-icon>
+        管理
+      </a>
+    @endif
+    @if (!is_null($res['userinfo']) && (isset($res['userinfo']['me']) && !is_null($res['userinfo']['me'])))
+      <a class="menu-link ng-star-inserted" href="/logout">
+        <my-global-icon iconname="cog" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+        </my-global-icon>
+        ログアウト
+      </a>
+    @endif
+  </div>
+</div>
diff --git a/resources/views/layout/component/menu/top/loginmenu.blade.php b/resources/views/layout/component/menu/top/loginmenu.blade.php
new file mode 100644
index 0000000..266bc92
--- /dev/null
+++ b/resources/views/layout/component/menu/top/loginmenu.blade.php
@@ -0,0 +1,4 @@
+<div class="login-buttons-block ng-star-inserted">
+  <a class="peertube-button-link orange-button" href="/login">ログイン</a>
+  <a class="peertube-button-link create-account-button ng-star-inserted" href="/signup">登録</a>
+</div>
diff --git a/resources/views/layout/component/menu/top/notification.blade.php b/resources/views/layout/component/menu/top/notification.blade.php
new file mode 100644
index 0000000..9dc9838
--- /dev/null
+++ b/resources/views/layout/component/menu/top/notification.blade.php
@@ -0,0 +1,10 @@
+<my-notification>
+  <div autoclose="outside" placement="bottom" container="{this}" popoverclass="popover-notifications" title="通知を表示" class="notification-inbox-popover">
+    <a href="/my-account/notifications" style="color: var(--menuForegroundColor);">
+      @if ($res['userinfo']['notify']->total > 0) <div class="unread-notifications ng-star-inserted">{{ $res['userinfo']['notify']->total }}</div> @endif
+      <my-global-icon iconname="bell">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+      </my-global-icon>
+    </a>
+  </div>
+</my-notification>
diff --git a/resources/views/layout/component/menu/top/oninstance.blade.php b/resources/views/layout/component/menu/top/oninstance.blade.php
new file mode 100644
index 0000000..d6f2940
--- /dev/null
+++ b/resources/views/layout/component/menu/top/oninstance.blade.php
@@ -0,0 +1,33 @@
+<div class="on-instance menu-block ng-star-inserted">
+  <div class="block-title">ON 076動画</div>
+  <a class="menu-link ng-star-inserted" href="/home">
+    <my-global-icon aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+    </my-global-icon>
+    ホーム
+  </a>
+  <a class="menu-link ng-star-inserted" href="/videos/overview">
+    <my-global-icon aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
+    </my-global-icon>
+    ディスカバー
+  </a>
+  <a class="menu-link ng-star-inserted" href="/videos/trending">
+    <my-global-icon aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+    </my-global-icon>
+    トレンド
+  </a>
+  <a class="menu-link ng-star-inserted" href="/videos/recently-added">
+    <my-global-icon aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+    </my-global-icon>
+    最近投稿された動画
+  </a>
+  <a class="menu-link ng-star-inserted" href="/videos/local">
+    <my-global-icon aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.4666667 8.4666667" x="0px" y="0px" class="misc"><path fill="currentColor" d="m 4.2330754,3.0330699e-4 c -1.9062912,0 -3.45664101,1.55086299301 -3.45663572,3.45715399301 0,1.041342 0.84545222,2.220339 1.65622812,3.201355 0.8107786,0.981014 1.6190225,1.736328 1.6190225,1.736328 a 0.26460984,0.26460984 0 0 0 0.3612197,0 c 0,0 0.8082439,-0.755314 1.6190224,-1.736328 0.810776,-0.981016 1.6582946,-2.160013 1.6582946,-3.201355 0,-1.906291 -1.5508605,-3.45715399301 -3.4571516,-3.45715399301 z m 0,0.52968500301 c 1.6203083,0 2.9279876,1.30716399 2.9279849,2.92746899 0,0.721961 -0.7497154,1.914917 -1.5353056,2.865459 -0.6952271,0.8412 -1.2416102,1.3482 -1.3926793,1.491898 C 4.0825513,7.6716453 3.5360226,7.1646033 2.840396,6.3229163 2.0548058,5.3723743 1.3035373,4.1794183 1.3035373,3.4574573 1.3035347,1.8371523 2.6127671,0.52998831 4.2330754,0.52998831 Z m 0.00878,0.91518899 a 0.26460979,0.26460979 0 0 0 -0.026355,5.16e-4 0.26460979,0.26460979 0 0 0 -0.1405599,0.05116 L 2.444037,2.6998813 a 0.26474432,0.26474432 0 1 0 0.3147086,0.425813 l 0.056327,-0.04134 v 1.224733 a 0.26460979,0.26460979 0 0 0 0.2640673,0.265615 h 2.30632 a 0.26460979,0.26460979 0 0 0 0.2656152,-0.265615 v -1.223698 l 0.054777,0.04031 A 0.2647471,0.2647471 0 1 0 6.0205633,2.6998813 L 5.5513406,2.3536473 a 0.26460979,0.26460979 0 0 0 -0.00775,-0.0057 L 4.3896558,1.4968523 a 0.26460979,0.26460979 0 0 0 -0.1477963,-0.05168 z m -0.00878,0.594278 0.8888333,0.655775 v 0.217556 1.132747 H 4.4971428 v -0.437697 a 0.26460984,0.26460984 0 0 0 -0.2676843,-0.267684 0.26460984,0.26460984 0 0 0 -0.262001,0.267684 v 0.437697 H 3.344758 v -1.132747 -0.219107 z"></path></svg>
+    </my-global-icon>
+    ローカル動画
+  </a>
+</div>
diff --git a/resources/views/layout/component/meta.blade.php b/resources/views/layout/component/meta.blade.php
new file mode 100644
index 0000000..33d44be
--- /dev/null
+++ b/resources/views/layout/component/meta.blade.php
@@ -0,0 +1,36 @@
+<?php
+  $name = '';
+
+  if (isset($res['page'])) {
+    if ($res['page'] == 'watch') $name = $res['detail']->name;
+    else if ($res['page'] == 'account') $name = $res['owner']->displayName.'さんのチャンネル一覧';
+    else if ($res['page'] == 'channel') $name = $res['channel']->displayName.'さんのチャンネル';
+    else if ($res['page'] == 'home') $name = 'トップページ';
+    else if ($res['page'] == 'overview') $name = 'ディスカバー';
+    else if ($res['page'] == 'trending') $name = 'トレンド';
+    else if ($res['page'] == 'recently-added') $name = '最近投稿された動画';
+    else if ($res['page'] == 'local') $name = 'ローカル動画';
+    else if ($res['page'] == 'about') $name = 'このアプリについて';
+    else if ($res['page'] == 'notification') $name = '通知';
+  }
+?>
+
+<meta property="og:type" content="video" />
+<meta property="og:site_name" content="076動画" />
+<meta property="og:title" content="{{ $name }}" />
+<meta property="og:image" content="https://video.076.ne.jp/lazy-static/previews/8d97cbd1-50bb-4de3-9eb6-914027346996.jpg" />
+<meta property="og:url" content="{{ env('APP_URL') }}/w/b8oKB37kqyCdt7gBtPWeWV" />
+<meta property="og:description" content="" />
+<meta property="og:video:url" content="https://video.076.ne.jp/videos/embed/52039d41-8b56-4690-b6fa-25dedfedd5c5" />
+<meta property="og:video:secure_url" content="https://video.076.ne.jp/videos/embed/52039d41-8b56-4690-b6fa-25dedfedd5c5" />
+<meta property="og:video:type" content="text/html" />
+<meta property="og:video:width" content="560" />
+<meta property="og:video:height" content="315" />
+<meta property="name" content="{{ $name }}" />
+<meta property="description" content="" />
+<meta property="image" content="https://video.076.ne.jp/lazy-static/previews/8d97cbd1-50bb-4de3-9eb6-914027346996.jpg" />
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:site" content="@TechnicalSuwako" />
+<meta property="twitter:title" content="{{ $name }}" />
+<meta property="twitter:description" content="" />
+<meta property="twitter:image" content="https://video.076.ne.jp/lazy-static/previews/8d97cbd1-50bb-4de3-9eb6-914027346996.jpg" />
diff --git a/resources/views/layout/component/my-account/filter.blade.php b/resources/views/layout/component/my-account/filter.blade.php
new file mode 100644
index 0000000..1a1b19a
--- /dev/null
+++ b/resources/views/layout/component/my-account/filter.blade.php
@@ -0,0 +1,24 @@
+<div class="header-filter">
+  <a fragment="notifications" href="/my-account/settings#notifications">
+    <my-global-icon iconname="cog" aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+    </my-global-icon>
+    通知設定
+  </a>
+  <div class="peertube-select-container peertube-select-button ml-2 mr-2">
+    <select class="form-control ng-untouched ng-pristine ng-valid">
+      <option value="undefined" disabled="">Sort by</option>
+      <option value="createdAt">Newest first</option>
+      <option value="read">Unread first</option>
+    </select>
+  </div>
+  <form class="btn ml-auto" action="/my-account/notifications/readAll" method="post">
+    @csrf
+    <button{{ $res['userinfo']['notify']->total == 0 ? ' disabled' : '' }}>
+      <my-global-icon iconname="tick" aria-hidden="true" class="ng-star-inserted">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
+      </my-global-icon>
+      <span class="ng-star-inserted">全てを既読にする</span>
+    </button>
+  </form>
+</div>
diff --git a/resources/views/layout/component/my-account/menu.blade.php b/resources/views/layout/component/my-account/menu.blade.php
new file mode 100644
index 0000000..900d8bf
--- /dev/null
+++ b/resources/views/layout/component/my-account/menu.blade.php
@@ -0,0 +1,18 @@
+<?php
+  $menu = [
+    'settings' => '設定',
+    'notifications' => '通知',
+    'applications' => 'アプリケーション',
+    'blocklist/accounts' => 'ミュートにしたアカウント',
+    'blocklist/servers' => 'ミュートにしたサーバー',
+    'abuses' => 'Abuse reports',
+  ];
+?>
+
+<my-top-menu-dropdown>
+  <div class="sub-menu sub-menu-fixed">
+    @foreach ($menu as $k => $v)
+      <a class="title-page title-page-settings ng-star-inserted{{ $active == $k ? ' active' : '' }}" href="/my-account/{{ $k }}">{{ $v }}</a>
+    @endforeach
+  </div>
+</my-top-menu-dropdown>
diff --git a/resources/views/layout/component/my-account/notifications.blade.php b/resources/views/layout/component/my-account/notifications.blade.php
new file mode 100644
index 0000000..61518ed
--- /dev/null
+++ b/resources/views/layout/component/my-account/notifications.blade.php
@@ -0,0 +1,38 @@
+<my-user-notifications>
+  <div class="notifications">
+    @foreach ($res['notification']->data as $n)
+      <div class="notification{{ !$n->read ? ' unread' : '' }} ng-star-inserted">
+        @if (isset($n->comment))
+          @include('layout.component.my-account.notifications.comment')
+        @elseif (isset($n->account))
+          @include('layout.component.my-account.notifications.account')
+        @elseif (isset($n->actorFollow))
+          @include('layout.component.my-account.notifications.actorfollow')
+        @elseif (isset($n->video))
+          @include('layout.component.my-account.notifications.video')
+        @elseif (isset($n->videoAbuse))
+          @include('layout.component.my-account.notifications.account')
+        @elseif (isset($n->videoBlacklist))
+          @include('layout.component.my-account.notifications.blacklist')
+        @elseif (isset($n->videoImport))
+          @include('layout.component.my-account.notifications.import')
+        @elseif (isset($n->plugin))
+          @include('layout.component.my-account.notifications.plugin')
+        @endif
+        <form action="/my-account/notifications/read" method="post">
+          @csrf
+          <input type="hidden" name="id" value="{{ $n->id }}" />
+          <button style="background-color: var(--mainHoverColor); color: var(--whiteColor);" class="btn ml-auto"{{ $n->read ? ' disabled' : '' }}>
+            <span class="ng-star-inserted">既読</span>
+          </button>
+        </form>
+        <div class="from-date" title="{{ date('Y/m/d', strtotime($n->createdAt)) }}">
+          {{ date('Y/m/d', strtotime($n->createdAt)) }}
+        </div>
+      </div>
+    @endforeach
+  </div>
+  @include('layout.component.common.paginate', [
+    'root' => '/my-account/notifications'
+  ])
+</my-user-notifications>
diff --git a/resources/views/layout/component/my-account/notifications/abuse.blade.php b/resources/views/layout/component/my-account/notifications/abuse.blade.php
new file mode 100644
index 0000000..49f5b24
--- /dev/null
+++ b/resources/views/layout/component/my-account/notifications/abuse.blade.php
@@ -0,0 +1 @@
+<div>dummy</div>
\ No newline at end of file
diff --git a/resources/views/layout/component/my-account/notifications/account.blade.php b/resources/views/layout/component/my-account/notifications/account.blade.php
new file mode 100644
index 0000000..87f5a83
--- /dev/null
+++ b/resources/views/layout/component/my-account/notifications/account.blade.php
@@ -0,0 +1,6 @@
+<my-global-icon iconname="user-add" aria-hidden="true" class="ng-star-inserted">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
+</my-global-icon>
+<div class="message ng-star-inserted">
+  <a href="/a/{{ ptFullHandle($n->account) }}">{{ $n->account->displayName }}</a>さんがこのインスタンスに登録しました
+</div>
diff --git a/resources/views/layout/component/my-account/notifications/actorfollow.blade.php b/resources/views/layout/component/my-account/notifications/actorfollow.blade.php
new file mode 100644
index 0000000..499fef9
--- /dev/null
+++ b/resources/views/layout/component/my-account/notifications/actorfollow.blade.php
@@ -0,0 +1,22 @@
+@if ($n->actorFollow->following->type == 'instance')
+  <my-global-icon iconname="users" aria-hidden="true" class="ng-star-inserted">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+  </my-global-icon>
+@elseif ($n->actorFollow->following->type == 'account')
+  <a href="/a/{{ ptFullHandle($n->actorFollow->follower) }}" class="ng-star-inserted">
+    <img alt="" aria-labelledby="avatar" class="avatar" src="{{ ptAvatar($n->actorFollow->follower) }}">
+  </a>
+@endif
+<div class="message ng-star-inserted">
+  @if ($n->actorFollow->following->type == 'instance')
+    @if ($n->actorFollow->follower->id == 1)
+      あなたのインスタンスは<a href="/admin/follows/following-list"> {{ $n->actorFollow->following->host }}</a>を自動でフォローされています
+    @else
+      あなたのインスタンスに<a href="/admin/follows/followers-list">新しいフォロワー</a>が登録されました ({{ $n->actorFollow->follower->host }})
+    @endif
+  @elseif ($n->actorFollow->following->type == 'account')
+    <a href="/a/{{ ptFullHandle($n->actorFollow->follower) }}">{{ $n->actorFollow->follower->displayName }}</a>さんはああたをフォローしています
+  @elseif ($n->actorFollow->following->type == 'channel')
+    <a href="/a/{{ ptFullHandle($n->actorFollow->follower) }}">{{ $n->actorFollow->follower->displayName }}</a>さんは「{{ $n->actorFollow->following->displayName }}」というチャンネルをフォローしています
+  @endif
+</div>
diff --git a/resources/views/layout/component/my-account/notifications/blacklist.blade.php b/resources/views/layout/component/my-account/notifications/blacklist.blade.php
new file mode 100644
index 0000000..49f5b24
--- /dev/null
+++ b/resources/views/layout/component/my-account/notifications/blacklist.blade.php
@@ -0,0 +1 @@
+<div>dummy</div>
\ No newline at end of file
diff --git a/resources/views/layout/component/my-account/notifications/comment.blade.php b/resources/views/layout/component/my-account/notifications/comment.blade.php
new file mode 100644
index 0000000..7e11b09
--- /dev/null
+++ b/resources/views/layout/component/my-account/notifications/comment.blade.php
@@ -0,0 +1,12 @@
+<a href="/a/{{ ptFullHandle($n->comment->account) }}" class="ng-star-inserted">
+  <img alt="" aria-labelledby="avatar" class="avatar" src="{{ ptAvatar($n->comment->account) }}">
+</a>
+@if ($n->type == 11)
+  <div class="message ng-star-inserted">
+    <a href="/a/{{ ptFullHandle($n->comment->account) }}">{{ $n->comment->account->displayName }}</a>さんは<a href="/w/{{ $n->comment->video->shortUUID }}#threadId={{ $n->comment->threadId }}">{{ $n->comment->video->name }}</a>という動画でメンションされました。
+  </div>
+@elseif ($n->type == 2)
+  <div class="message ng-star-inserted">
+    <a href="/a/{{ ptFullHandle($n->comment->account) }}">{{ $n->comment->account->displayName }}</a>さんは<a href="/w/{{ $n->comment->video->shortUUID }}#threadId={{ $n->comment->threadId }}">{{ $n->comment->video->name }}</a>でコメントを投稿しました
+  </div>
+@endif
diff --git a/resources/views/layout/component/my-account/notifications/import.blade.php b/resources/views/layout/component/my-account/notifications/import.blade.php
new file mode 100644
index 0000000..4103f34
--- /dev/null
+++ b/resources/views/layout/component/my-account/notifications/import.blade.php
@@ -0,0 +1,6 @@
+<my-global-icon iconname="cloud-download" aria-hidden="true" class="ng-star-inserted">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-linejoin="round" d="M8 17H5h0a4 4 0 111-7.9v-.6a5.5 5.5 0 0110.8-1.4A5 5 0 0123 12a5 5 0 01-5 5h-2"></path><path d="M12 13v8"></path><path stroke-linejoin="round" d="M15 20l-3 3-3-3"></path></g></svg>
+</my-global-icon>
+<div class="message ng-star-inserted">
+  <a href="/w/hVqERbk4AQgdjEQXiXwsLm">動画のインポートに成功しました</a> https://www.youtube.com/watch?v=7cTSM-NEUqM
+</div>
diff --git a/resources/views/layout/component/my-account/notifications/mention.blade.php b/resources/views/layout/component/my-account/notifications/mention.blade.php
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/layout/component/my-account/notifications/plugin.blade.php b/resources/views/layout/component/my-account/notifications/plugin.blade.php
new file mode 100644
index 0000000..6126ffa
--- /dev/null
+++ b/resources/views/layout/component/my-account/notifications/plugin.blade.php
@@ -0,0 +1,6 @@
+<my-global-icon iconname="cog" aria-hidden="true" class="ng-star-inserted">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+</my-global-icon>
+<div class="message ng-star-inserted">
+  <a href="/admin/plugins/list-installed?pluginType={{ $n->plugin->type }}">{{ $n->plugin->name }}</a>というプラグイン・テーマの最新バージョンまで更新できるようになりました: {{ $n->plugin->latestVersion }}
+</div>
\ No newline at end of file
diff --git a/resources/views/layout/component/my-account/notifications/video.blade.php b/resources/views/layout/component/my-account/notifications/video.blade.php
new file mode 100644
index 0000000..069c87c
--- /dev/null
+++ b/resources/views/layout/component/my-account/notifications/video.blade.php
@@ -0,0 +1,6 @@
+<a class="ng-star-inserted">
+  <img alt="" aria-labelledby="avatar" class="avatar" src="{{ ptAvatar($n->video->channel) }}">
+</a>
+<div class="message ng-star-inserted">
+  {{ $n->video->channel->displayName }}さんは新しい動画を投稿しました: <a href="/w/{{ $n->video->shortUUID }}">{{ $n->video->name }}</a>
+</div>
diff --git a/resources/views/layout/component/style.blade.php b/resources/views/layout/component/style.blade.php
new file mode 100644
index 0000000..d9c941f
--- /dev/null
+++ b/resources/views/layout/component/style.blade.php
@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="{{ asset('css/common.css') }}" />
+@if (isset($res['style']))
+  <link rel="stylesheet" href="{{ asset('css/'.$res['style'].'.css') }}" />
+@endif
diff --git a/resources/views/layout/component/stylelink.blade.php b/resources/views/layout/component/stylelink.blade.php
new file mode 100644
index 0000000..a83764e
--- /dev/null
+++ b/resources/views/layout/component/stylelink.blade.php
@@ -0,0 +1,28 @@
+<?php
+  $name = '';
+  $canonical = '';
+
+  if (isset($res['page'])) {
+    if ($res['page'] == 'watch') {
+      $name = $res['detail']->name;
+      $canonical .= '/videos/watch/'.$res['detail']->uuid;
+    }
+    else if ($res['page'] == 'account') $name = $res['owner']->displayName.'さんのチャンネル一覧';
+    else if ($res['page'] == 'channel') $name = $res['channel']->displayName.'さんのチャンネル';
+    else if ($res['page'] == 'home') $name = 'トップページ';
+    else if ($res['page'] == 'overview') $name = 'ディスカバー';
+    else if ($res['page'] == 'trending') $name = 'トレンド';
+    else if ($res['page'] == 'recently-added') $name = '最近投稿された動画';
+    else if ($res['page'] == 'local') $name = 'ローカル動画';
+    else if ($res['page'] == 'about') $name = 'このアプリについて';
+    else if ($res['page'] == 'notification') $name = '通知';
+  }
+?>
+
+<link rel="alternate" type="application/json+oembed" href="https://video.076.ne.jp/services/oembed?url=https%3A%2F%2Fvideo.076.ne.jp%2Fw%2Fb8oKB37kqyCdt7gBtPWeWV" title="{{ $name }}" />
+<link rel="canonical" href="{{ $canonical }}" />
+
+<link rel="stylesheet" href="/css/styles.css" />
+<link rel="stylesheet" href="/css/global.css" />
+<link rel="stylesheet" href="/css/style.css" />
+<link rel="stylesheet" href="/css/custom.css" />
diff --git a/resources/views/layout/component/videos/categories.blade.php b/resources/views/layout/component/videos/categories.blade.php
new file mode 100644
index 0000000..d16d8b4
--- /dev/null
+++ b/resources/views/layout/component/videos/categories.blade.php
@@ -0,0 +1,8 @@
+<div class="section videos ng-star-inserted">
+  <h1 class="section-title">
+    <a href="/search?categoryOneOf={{ $res['video']->categories[0]->category->id }}">{{ $res['video']->categories[0]->category->label }}</a>
+  </h1>
+  @foreach ($res['video']->categories[0]->videos as $k => $v)
+    @include('layout.component.common.videominature')
+  @endforeach
+</div>
diff --git a/resources/views/layout/component/videos/channels.blade.php b/resources/views/layout/component/videos/channels.blade.php
new file mode 100644
index 0000000..7616f20
--- /dev/null
+++ b/resources/views/layout/component/videos/channels.blade.php
@@ -0,0 +1,13 @@
+<div class="section channel videos ng-star-inserted">
+  <div class="section-title">
+    <a href="/c/{{ ptFullHandle($res['video']->channels[0]->channel) }}">
+      <my-actor-avatar>
+        <img class="avatar channel ng-star-inserted" src="{{ ptAvatar($res['video']->channels[0]->channel) }}" alt="チャンネルのアバター">
+      </my-actor-avatar>
+      <h2 class="section-title">{{ $res['video']->channels[0]->channel->displayName }}</h2>
+    </a>
+  </div>
+  @foreach ($res['video']->channels[0]->videos as $k => $v)
+    @include('layout.component.common.videominature')
+  @endforeach
+</div>
diff --git a/resources/views/layout/component/videos/tags.blade.php b/resources/views/layout/component/videos/tags.blade.php
new file mode 100644
index 0000000..38f8381
--- /dev/null
+++ b/resources/views/layout/component/videos/tags.blade.php
@@ -0,0 +1,8 @@
+<div class="section videos ng-star-inserted">
+  <h2 class="section-title">
+    <a href="/search?tagsOneOf=vampiros">{{ '#'.$res['video']->tags[0]->tag }}</a>
+  </h2>
+  @foreach ($res['video']->tags[0]->videos as $k => $v)
+    @include('layout.component.common.videominature')
+  @endforeach
+</div>
diff --git a/resources/views/layout/component/w/info.blade.php b/resources/views/layout/component/w/info.blade.php
new file mode 100644
index 0000000..6dbc5f6
--- /dev/null
+++ b/resources/views/layout/component/w/info.blade.php
@@ -0,0 +1,9 @@
+<div class="margin-content video-bottom ng-star-inserted">
+  <div class="video-info">
+    @include('layout.component.w.info.first')
+    @include('layout.component.w.info.description')
+    @include('layout.component.w.info.attrib')
+    @include('layout.component.w.info.comments')
+  </div>
+  @include('layout.component.w.videorecommend')
+</div>
diff --git a/resources/views/layout/component/w/info/attrib.blade.php b/resources/views/layout/component/w/info/attrib.blade.php
new file mode 100644
index 0000000..8fb4fba
--- /dev/null
+++ b/resources/views/layout/component/w/info/attrib.blade.php
@@ -0,0 +1,53 @@
+<my-video-attributes>
+  <div class="attribute">
+    <span class="attribute-label">公開設定</span>
+    <span class="attribute-value ng-star-inserted">{{ $res['detail']->privacy->label }}</span>
+  </div>
+
+  <div class="attribute">
+    <span class="attribute-label">カテゴリ</span>
+    @if (is_null($res['detail']->category->id)) <span class="attribute-value ng-star-inserted">{{ $res['detail']->category->label }}</span>
+    @else <a class="attribute-value ng-star-inserted" href="/search?categoryOneOf={{ $res['detail']->category->id }}">{{ $res['detail']->category->label }}</a> @endif
+  </div>
+
+  @if (!is_null($res['detail']->originallyPublishedAt))
+    <div class="attribute">
+      <span class="attribute-label">投稿日</span>
+      <span class="attribute-value ng-star-inserted">{{ date('Y年m月d日', strtotime($res['detail']->originallyPublishedAt)) }}</span>
+    </div>
+  @endif
+
+  <div class="attribute">
+    <span class="attribute-label">ライセンス</span>
+    <span class="attribute-value ng-star-inserted">{{ $res['detail']->licence->label }}</span>
+  </div>
+
+  <div class="attribute">
+    <span class="attribute-label">言語</span>
+    @if (is_null($res['detail']->language->id)) <span class="attribute-value ng-star-inserted">{{ $res['detail']->language->label }}</span>
+    @else <a class="attribute-value ng-star-inserted" href="/search?languageOneOf={{ $res['detail']->language->id }}">{{ $res['detail']->language->label }}</a> @endif
+  </div>
+
+  <div class="attribute attribute-tags">
+    <span class="attribute-label">タグ</span>
+    @if (count($res['detail']->tags) > 0)
+      <span class="attribute-label">
+        @foreach ($res['detail']->tags as $k => $v)
+          <a class="attribute-value ng-star-inserted" href="/search?tagsOneOf={{ $v }}">{{ $v }}</a>{{ count($res['detail']->tags)-1 != $k ? ', ' : '' }}
+        @endforeach
+      </span>
+    @endif
+  </div>
+
+  <div class="attribute ng-star-inserted">
+    <span class="attribute-label">再生時間</span>
+    @php
+      $seconds = $res['detail']->duration;
+      $hours = floor($seconds / 3600);
+      $seconds -= $hours * 3600;
+      $minutes = floor($seconds / 60);
+      $seconds -= $minutes * 60;
+    @endphp
+    <span class="attribute-value">{{ $hours != 0 ? $hours.'時' : '' }}{{ $minutes != 0 ? $minutes.'分' : '' }}{{ $seconds.'秒' }}</span>
+  </div>
+</my-video-attributes>
diff --git a/resources/views/layout/component/w/info/channel.blade.php b/resources/views/layout/component/w/info/channel.blade.php
new file mode 100644
index 0000000..1c4498f
--- /dev/null
+++ b/resources/views/layout/component/w/info/channel.blade.php
@@ -0,0 +1,22 @@
+<div class="video-info-channel-left d-flex">
+  <my-video-avatar-channel>
+    <div class="wrapper">
+      <my-actor-avatar class="channel">
+        <a title="{{ ptFullHandle($res['detail']->channel) }} (チャンネルページへ) " href="/c/{{ ptFullHandle($res['detail']->channel) }}" class="ng-star-inserted">
+          <img class="avatar channel ng-star-inserted" src="{{ ptAvatar($res['detail']->channel) }}" alt="チャンネルのアバター">
+        </a>
+      </my-actor-avatar>
+      <my-actor-avatar class="account">
+        <a title="{{ ptFullHandle($res['detail']->account) }} (アカウントページへ) " href="/a/{{ ptFullHandle($res['detail']->account) }}" class="ng-star-inserted">
+          <img class="account avatar ng-star-inserted" src="{{ ptAvatar($res['detail']->account) }}" alt="アカウントのアバター">
+        </a>
+      </my-actor-avatar>
+    </div>
+  </my-video-avatar-channel>
+  <div class="video-info-channel-left-links ml-1">
+    <a title="チャンネルページ" href="/c/{{ ptFullHandle($res['detail']->channel) }}" class="ng-star-inserted"> {{ $res['detail']->channel->displayName }} </a>
+    <a title="アカウントページ" href="/a/{{ ptFullHandle($res['detail']->account) }}" class="ng-star-inserted">
+      <span>{{ ptFullHandle($res['detail']->account) }} 制作</span>
+    </a>
+  </div>
+</div>
diff --git a/resources/views/layout/component/w/info/comments.blade.php b/resources/views/layout/component/w/info/comments.blade.php
new file mode 100644
index 0000000..8315a73
--- /dev/null
+++ b/resources/views/layout/component/w/info/comments.blade.php
@@ -0,0 +1,113 @@
+<my-video-comments class="border-top">
+  <div>
+    <div class="title-block">
+      <h2 class="title-page title-page-single"> {{ $res['comment']->totalNotDeletedComments }} コメント </h2>
+      <my-feed>
+        <div class="feed">
+          <my-global-icon role="button" aria-label="Open syndication dropdown" placement="bottom left auto" iconname="syndication" class="icon-syndication ng-star-inserted">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
+          </my-global-icon>
+        </div>
+      </my-feed>
+      <!--div class="d-inline-block ml-4 dropdown-root dropdown">
+        <button id="dropdown-sort-comments" class="dropdown-toggle btn btn-sm btn-outline-secondary" aria-expanded="false">並べ替え</button>
+        <div aria-labelledby="dropdown-sort-comments" x-placement="bottom-left" class="dropdown-menu">
+          <button class="dropdown-item">新しい順（デフォルト）</button>
+          <button class="dropdown-item">多かった順</button>
+        </div>
+      </div-->
+    </div>
+    <my-video-comment-add class="ng-star-inserted">
+      <form novalidate="" class="ng-untouched ng-pristine ng-invalid">
+        <div class="avatar-and-textarea">
+          <my-actor-avatar size="25">
+            <img class="account avatar avatar-25 ng-star-inserted" src="https://video.076.ne.jp/lazy-static/avatars/aa9883c7-d4d0-48c3-8e3a-72a9f2d96784.png" alt="アカウントのアバター">
+          </my-actor-avatar>
+          <div class="form-group">
+            <textarea placeholder="コメントを入力..." myautoresize="" formcontrolname="text" rows="1" class="ng-untouched ng-pristine ng-invalid" style="overflow: hidden; height: 32px;"></textarea>
+          </div>
+        </div>
+        <div class="comment-buttons"></div>
+      </form>
+    </my-video-comment-add>
+    @if (count($res['comment']->data) == 0)
+      <div class="ng-star-inserted">コメントがありません。</div>
+    @else
+      @foreach ($res['comment']->data as $k => $v)
+        @if (!$v->isDeleted)
+          <div class="comment-threads ng-star-inserted">
+            <div>
+              <div id="highlighted-comment" class="anchor"></div>
+              <my-video-comment class="ng-star-inserted">
+                <div class="root-comment ng-star-inserted">
+                  <div class="left">
+
+                    <my-actor-avatar class="ng-star-inserted">
+                      <a target="_blank" rel="noopener noreferrer" href="{{ $v->account->url }}" title="{{ $v->account->name }} (アカウントページへ) " class="ng-star-inserted">
+                        <img class="account avatar ng-star-inserted" src="{{ ptAvatar($v->account) }}" alt="アカウントのアバター">
+                      </a>
+                    </my-actor-avatar>
+
+                    <div class="vertical-border"></div>
+                  </div>
+                  <div class="right mb-3">
+                    <div class="comment">
+                      @php
+                        $comsrc = ptComeSrc($v->src);
+                      @endphp
+                      <div class="highlighted-comment ng-star-inserted" style="background-color: {{ $comsrc->bg }}; color: {{ $comsrc->fg }};">{{ $comsrc->tx }}</div>
+                      <div class="comment-account-date ng-star-inserted">
+                        <div class="comment-account">
+                          @if ($v->src != 'TS' && $v->src != 'PT')
+                            <a href="{{ $v->account->url }}">
+                              <span class="comment-account-name"> {{ $v->account->displayName }} </span>
+                            </a>
+                          @elseif ($v->src == 'TS')
+                            @if (!is_null($v->account->user_id))
+                              <a href="{{ $v->account->url }}" style="{{ $v->account->nameStyle }}">
+                            @else
+                              <span style="font-size: 16px; font-style: normal; color: #20ec77;">
+                            @endif
+                            {{ $v->account->displayName }}
+                            @if (!is_null($v->account->user_id))
+                              </a>
+                            @else
+                              </span>
+                            @endif
+                          @else
+                            <a href="/a/{{ ptFullHandle($v->account) }}">
+                              <span class="comment-account-name"> {{ $v->account->displayName }} </span>
+                              <span class="comment-account-fid ml-1">{{ ptFullHandle($v->account) }}</span>
+                            </a>
+                          @endif
+                        </div>
+                        <a class="comment-date" title="{{ date('Y/m/d', strtotime($v->createdAt)) }}" href="/w/{{ request()->route('id') }}#threadId={{ $v->threadId }}"> 
+                          {{ date('Y年m月d日 H:i:s T', strtotime($v->createdAt)) }}
+                        </a>
+                      </div>
+                      <div mytimestamproutetransformer="" class="comment-html ng-star-inserted">
+                        <?php echo $v->text; ?>
+                      </div>
+                      @if ($v->src == 'TS' || $v->src == 'PT')
+                        <div class="comment-actions ng-star-inserted">
+                          <div tabindex="0" class="comment-action-reply">返事</div>
+                        </div>
+                      @endif
+                      <div class="ng-star-inserted"></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="ng-star-inserted"></div>
+              </my-video-comment>
+            </div>
+          </div>
+        @endif
+      @endforeach
+    @endif
+    <div class="comment-threads ng-star-inserted">
+      <div>
+        <div id="highlighted-comment" class="anchor"></div>
+      </div>
+    </div>
+  </div>
+</my-video-comments>
diff --git a/resources/views/layout/component/w/info/description.blade.php b/resources/views/layout/component/w/info/description.blade.php
new file mode 100644
index 0000000..c0d1cea
--- /dev/null
+++ b/resources/views/layout/component/w/info/description.blade.php
@@ -0,0 +1,7 @@
+<my-video-description>
+  <div class="video-info-description">
+    <div mytimestamproutetransformer="" class="video-info-description-html">
+      <?php echo nl2br($res['detail']->description); ?>
+    </div>
+  </div>
+</my-video-description>
\ No newline at end of file
diff --git a/resources/views/layout/component/w/info/first.blade.php b/resources/views/layout/component/w/info/first.blade.php
new file mode 100644
index 0000000..4edfa22
--- /dev/null
+++ b/resources/views/layout/component/w/info/first.blade.php
@@ -0,0 +1,27 @@
+<div class="video-info-first-row">
+  <div>
+    <div class="d-flex justify-content-between flex-direction-column">
+      <div class="d-none d-md-block">
+        <h1 class="video-info-name">{{ $res['detail']->name }}</h1>
+      </div>
+      <div class="video-info-first-row-bottom">
+        @include('layout.component.w.info.viewsdate')
+        <my-action-buttons>
+          <div class="video-actions-rates">
+            <div class="video-actions full-width justify-content-end">
+              @include('layout.component.w.info.videorate')
+              @include('layout.component.w.info.support')
+              @include('layout.component.w.info.share')
+              @include('layout.component.w.info.save')
+              @include('layout.component.w.info.more')
+            </div>
+          </div>
+        </my-action-buttons>
+      </div>
+    </div>
+    <div class="pt-3 border-top video-info-channel d-flex">
+      @include('layout.component.w.info.channel')
+      @include('layout.component.common.subscribe')
+    </div>
+  </div>
+</div>
diff --git a/resources/views/layout/component/w/info/more.blade.php b/resources/views/layout/component/w/info/more.blade.php
new file mode 100644
index 0000000..b2b2661
--- /dev/null
+++ b/resources/views/layout/component/w/info/more.blade.php
@@ -0,0 +1,6 @@
+<button class="action-button">
+  <my-global-icon iconname="download" aria-hidden="true">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+  </my-global-icon>
+  <span class="icon-text">ダウンロード</span>
+</button>
\ No newline at end of file
diff --git a/resources/views/layout/component/w/info/save.blade.php b/resources/views/layout/component/w/info/save.blade.php
new file mode 100644
index 0000000..1c2bd85
--- /dev/null
+++ b/resources/views/layout/component/w/info/save.blade.php
@@ -0,0 +1,53 @@
+<!--div placement="bottom auto" role="button" autoclose="outside" class="action-dropdown ng-star-inserted dropdown">
+  <button class="dropdown-toggle action-button action-button-save" aria-expanded="false">
+    <my-global-icon iconname="playlist-add" aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.7 426.7">
+        <defs></defs>
+        <path fill="currentColor" d="M0 64h256v42.7H0zM0 149.3h256V192H0zM0 234.7h170.7v42.7H0z"></path>
+        <path fill="currentColor" d="M341.3 234.7v-85.4h-42.6v85.4h-85.4v42.6h85.4v85.4h42.6v-85.4h85.4v-42.6z"></path>
+      </svg>
+    </my-global-icon>
+    <span class="icon-text">保存する</span>
+  </button>
+  <div x-placement="bottom" class="dropdown-menu">
+    <my-video-add-to-playlist>
+      <div class="root">
+        <div class="header">
+          <div class="first-row">
+            <div class="title">保存</div>
+          </div>
+        </div>
+        <div class="input-container">
+          <input type="text" placeholder="再生リストを検索" class="ng-untouched ng-pristine ng-valid">
+        </div>
+        <div class="playlists">
+          <div class="playlist dropdown-item ng-star-inserted">
+            <div class="primary-row">
+              <my-peertube-checkbox class="ng-untouched ng-pristine ng-valid">
+                <div class="root flex-column">
+                  <div class="d-flex">
+                    <label class="form-group-checkbox">
+                      <input type="checkbox" id="in-playlist-primary-4584" class="ng-untouched ng-pristine ng-valid">
+                      <span role="checkbox" aria-checked="false"></span>
+                    </label>
+                  </div>
+                  <div class="ml-4 d-flex flex-column">
+                    <small class="wrapper mt-2 text-muted"></small>
+                    <span class="wrapper mt-3"></span>
+                  </div>
+                </div>
+              </my-peertube-checkbox>
+              <label class="display-name"> 東方夢時空 ～ Phantasmagoria of Dim.Dream 全曲Win風アレンジ </label>
+            </div>
+          </div>
+        </div>
+        <div class="new-playlist-button dropdown-item">
+          <my-global-icon iconname="add" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+          </my-global-icon>
+          <span>非公開プレイリストを作成</span>
+        </div>
+      </div>
+    </my-video-add-to-playlist>
+  </div>
+</div-->
\ No newline at end of file
diff --git a/resources/views/layout/component/w/info/share.blade.php b/resources/views/layout/component/w/info/share.blade.php
new file mode 100644
index 0000000..69b8eec
--- /dev/null
+++ b/resources/views/layout/component/w/info/share.blade.php
@@ -0,0 +1,6 @@
+<button class="action-button">
+  <my-global-icon iconname="share" aria-hidden="true">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
+  </my-global-icon>
+  <span class="icon-text">シェアする</span>
+</button>
\ No newline at end of file
diff --git a/resources/views/layout/component/w/info/support.blade.php b/resources/views/layout/component/w/info/support.blade.php
new file mode 100644
index 0000000..b449730
--- /dev/null
+++ b/resources/views/layout/component/w/info/support.blade.php
@@ -0,0 +1,13 @@
+<button placement="bottom auto" class="action-button action-button-support ng-star-inserted" aria-label="この動画への寄付方法">
+  <my-global-icon iconname="support" aria-hidden="true">
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 947.70386 999.3125" width="947.70386" height="999.3125">
+      <g transform="translate(2.669496,27.625894)">
+        <g transform="matrix(0.1,0,0,-0.1,0,511)">
+          <path d="m 3744.3542,4564.3712 c -217.4,-34.2 -520.3,-200.3 -693.7,-376.2 -263.8,-263.8 -388.4,-571.6 -388.4,-952.6 0,-256.5 44,-437.2 173.4,-684 75.7,-144.1 197.9,-280.9 747.5,-842.7 1106.5,-1133.40001 1138.2,-1165.20001 1253,-1194.50001 188.1,-51.3 214.9,-29.3 1162.7,938.00001 498.3,508.1 911.1,950.2 962.4,1030.8 263.8,415.3 283.3,964.9 48.8,1409.4 -180.8,342 -581.3,620.4 -972.2,676.6 -332.2,48.9 -671.7,-36.6 -967.3,-236.9 l -156.3,-109.9 -119.7,87.9 c -158.8,117.2 -351.8,202.7 -554.5,244.3 -183.1,39.1 -295.4,41.6 -495.7,9.8 z" fill="currentColor"></path>
+          <path d="m 7991.4051,47.633899 c -39.1,-19.5 -473.9,-437.299999 -964.9,-925.800029 l -891.6,-891.59997 h -830.5 c -757.2,0 -837.8,4.9 -913.6,44 -207.6,112.4 -227.2,415.2 -39.1,561.8 66,53.7 83,53.7 950.2,53.7 989.3,0 1008.8,2.5 1094.3,173.49997 56.2,105 56.2,317.50003 4.9,427.50003 -83.1,175.9 4.8,168.5 -1915.1,168.5 h -1722 l -173.4,-63.5 c -95.3,-34.2 -232.1,-102.6 -305.3,-151.5 -73.3,-48.9 -442.1,-400.60003 -823.2,-779.2 l -688.80006,-693.7 664.40006,-647.3 c 366.4,-354.2 779.2,-754.8 918.4,-889.1 l 251.6,-241.8 481.2,481.2 481.2,481.2 h 1487.6 c 1294.6,0 1494.9,4.9 1565.8,39.1 58.6,26.9 339.6,368.8 1028.4,1248.2 522.8,666.89997 964.9,1243.3 982,1284.9 41.5,92.8 2.5,212.499999 -95.3,297.999999 -66,53.7 -95.3,61.1 -273.6,61.1 -132,-0.1 -224.8,-12.3 -273.6,-39.2 z" fill="currentColor"></path>
+        </g>
+      </g>
+    </svg>
+  </my-global-icon>
+  <span class="icon-text">寄付する</span>
+</button>
\ No newline at end of file
diff --git a/resources/views/layout/component/w/info/videorate.blade.php b/resources/views/layout/component/w/info/videorate.blade.php
new file mode 100644
index 0000000..db05a34
--- /dev/null
+++ b/resources/views/layout/component/w/info/videorate.blade.php
@@ -0,0 +1,14 @@
+<my-video-rate>
+  <button placement="bottom auto" class="action-button action-button-like" aria-pressed="false" aria-label="動画を高く評価">
+    <my-global-icon iconname="like">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
+    </my-global-icon>
+    @if ($res['detail']->likes > 0) <span class="count ng-star-inserted">{{ $res['detail']->likes }}</span> @endif
+  </button>
+  <button placement="bottom auto" class="action-button action-button-dislike" aria-pressed="false" aria-label="動画を低く評価">
+    <my-global-icon iconname="dislike">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-down"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>
+    </my-global-icon>
+    @if ($res['detail']->dislikes > 0) <span class="count ng-star-inserted">{{ $res['detail']->dislikes }}</span> @endif
+  </button>
+</my-video-rate>
\ No newline at end of file
diff --git a/resources/views/layout/component/w/info/viewsdate.blade.php b/resources/views/layout/component/w/info/viewsdate.blade.php
new file mode 100644
index 0000000..b222dd5
--- /dev/null
+++ b/resources/views/layout/component/w/info/viewsdate.blade.php
@@ -0,0 +1,10 @@
+<div class="d-none d-md-block video-info-date-views">
+  <my-date-toggle class="ng-star-inserted">
+    <span class="date-toggle" title="{{ date('Y/m/d', strtotime($res['detail']->publishedAt)) }}">{{ date('Y年m月d日 H:i:s T', strtotime($res['detail']->publishedAt)) }}</span>
+  </my-date-toggle>
+  に投稿
+  •
+  <my-video-views-counter class="ng-star-inserted">
+    <span title="">{{ $res['detail']->views }} 回視聴</span>
+  </my-video-views-counter>
+</div>
\ No newline at end of file
diff --git a/resources/views/layout/component/w/player.blade.php b/resources/views/layout/component/w/player.blade.php
new file mode 100644
index 0000000..4b57285
--- /dev/null
+++ b/resources/views/layout/component/w/player.blade.php
@@ -0,0 +1,30 @@
+<div id="video-wrapper">
+  <div id="videojs-wrapper">
+    <div id="vjs_video_3"
+      playsinline="true"
+      tabindex="-1"
+      lang="ja"
+      role="region"
+      aria-label="動画プレーヤー"
+      style="outline: none;"
+    >
+      <video
+        playsinline="playsinline"
+        tabindex="-1"
+        poster="https://video.076.ne.jp{{ $res['detail']->previewPath }}"
+        style="width: 100%; max-height: 720px;"
+        controls=""
+      >
+        @if (!empty($res['detail']->streamingPlaylists))
+          @foreach ($res['detail']->streamingPlaylists[0]->files as $k => $v)
+            <source src="{{ $v->fileUrl }}">
+          @endforeach
+        @else
+          @foreach ($res['detail']->files as $k => $v)
+            <source src="{{ $v->fileUrl }}">
+          @endforeach
+        @endif
+      </video>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/layout/component/w/videorecommend.blade.php b/resources/views/layout/component/w/videorecommend.blade.php
new file mode 100644
index 0000000..ed6e7e7
--- /dev/null
+++ b/resources/views/layout/component/w/videorecommend.blade.php
@@ -0,0 +1,61 @@
+<my-recommended-videos>
+  <div class="other-videos">
+    <div class="title-page-container ng-star-inserted">
+      <h2 class="title-page title-page-single">他の動画</h2>
+    </div>
+    @foreach ($res['recommend']->data as $k => $v)
+      <my-video-miniature actorimagesize="32" class="ng-star-inserted">
+        <div class="video-miniature">
+          <my-video-thumbnail>
+            <a class="video-thumbnail ng-star-inserted" href="/w/{{ $v->shortUUID }}">
+              <img alt="" aria-label="{{ $v->name }}" src="https://video.076.ne.jp{{ $v->thumbnailPath }}" class="ng-star-inserted">
+              <div class="video-thumbnail-label-overlay warning ng-star-inserted"></div>
+              <div class="video-thumbnail-label-overlay danger ng-star-inserted"></div>
+              @php
+                $seconds = $res['detail']->duration;
+                $hours = floor($seconds / 3600);
+                $seconds -= $hours * 3600;
+                $minutes = floor($seconds / 60);
+                $seconds -= $minutes * 60;
+              @endphp
+              <div class="video-thumbnail-duration-overlay ng-star-inserted">{{ $hours != 0 ? $hours.':' : '' }}{{ $minutes != 0 ? $minutes.':' : '0:' }}{{ $seconds }}</div>
+              <div class="play-overlay ng-star-inserted">
+                <div class="icon"></div>
+              </div>
+            </a>
+          </my-video-thumbnail>
+          <div class="video-bottom">
+            <div class="video-miniature-information">
+              <div class="d-flex video-miniature-meta">
+                <my-actor-avatar class="ng-star-inserted">
+                  <a title="{{ $v->channel->name }} (チャンネルページへ) " href="/c/{{ $v->channel->name }}" class="ng-star-inserted">
+                    <img class="avatar avatar-32 channel ng-star-inserted" src="{{ ptAvatar($v->channel) }}" alt="チャンネルのアバター">
+                  </a>
+                </my-actor-avatar>
+                <div class="w-100 d-flex flex-column">
+                  <my-link tabindex="-1" class="video-miniature-name" style="max-height: 3em;">
+                    <a tabindex="-1" title="{{ $v->name }}" href="/w/{{ $v->shortUUID }}" class="ng-star-inserted"> {{ $v->name }} </a>
+                  </my-link>
+                  <span class="video-miniature-created-at-views">
+                    <my-date-toggle class="ng-star-inserted">
+                      <span class="date-toggle" title="{{ date('Y年m月d日 H:i:s T', strtotime($v->createdAt)) }}">{{ date('Y/m/d', strtotime($v->createdAt)) }} </span>
+                    </my-date-toggle>
+                    <span class="views" title=""> • 
+                      <my-video-views-counter class="ng-star-inserted">
+                        <span title=""> {{ $v->views }} 回視聴</span>
+                      </my-video-views-counter>
+                    </span>
+                  </span>
+                  <a tabindex="-1" class="video-miniature-account ng-star-inserted" href="/c/{{ ptFullHandle($v->channel) }}"> {{ ptFullHandle($v->account) }} </a>
+                  <div class="video-info-privacy"></div>
+                </div>
+              </div>
+            </div>
+            <div class="video-actions"></div>
+          </div>
+        </div>
+      </my-video-miniature>
+      <hr class="ng-star-inserted">
+    @endforeach
+  </div>
+</my-recommended-videos>
diff --git a/resources/views/pages/common/comments.blade.php b/resources/views/pages/common/comments.blade.php
new file mode 100644
index 0000000..1a0241b
--- /dev/null
+++ b/resources/views/pages/common/comments.blade.php
@@ -0,0 +1,103 @@
+<div id="comments" class="comments-area clearfix">
+	<h3 class="comments-count section-heading uppercase"><span>{{ $comment['total'] }} 件のコメント</span></h3>
+  <div style="margin: 12px 0;">
+    <div style="display: none; padding: 20px;" class="alert alert-warning" id="jswarning">コメントを投稿するには、JavaScriptをOFFにして下さい。</div>
+    <noscript>
+      @if ($isvideo !== 'n')
+        <form action="/comment/new" method="post">
+          @csrf
+          @if ($user == new stdClass())
+            <div class="form-group row">
+              <div class="col-md-4 col-lg-3">名前</div>
+              <div class="input-group col-md col-lg">
+                <input type="text" name="newname" class="form-control" value="" placeholder="ご入力しない場合、名前は「名無しのテクニシャン」になります。" />
+              </div>
+            </div>
+            <div class="form-group row">
+              <div class="col-md-4 col-lg-3">メールアドレス</div>
+              <div class="input-group col-md col-lg">
+                <input type="text" name="newmail" class="form-control" value="" placeholder="返信される場合、メールに通知を送ります。" />
+              </div>
+            </div>
+          @else
+            <div class="form-group row">
+              <div class="col-md-4 col-lg-3">名前</div>
+              <div class="input-group col-md col-lg">
+                <a href="/profile/{{ $user['user_id'] }}" style="{{ $user['showcol'] }}"><img style="width: 24px; height: 24px;" src="{{ $user['avatar'] }}" alt="{{ $user['showname'] }}さんのアイコン"> {{ $user['showname'] }}</a>
+              </div>
+            </div>
+          @endif
+          <div class="row">
+            <div class="col-md-4 col-lg-3">本文 <span class="badge badge-danger">必須</span></div>
+            <div class="col-md col-lg">
+              <textarea class="form-control" name="newmessage" rows="4"></textarea>
+            </div>
+          </div>
+          <input type="hidden" name="slug" value="{{ $slug }}" />
+          <div class="row" style="margin-top: 16px;">
+            <div class="col">
+              <input name="submit" type="submit" class="btn btn-block btn-primary" value="送信" />
+            </div>
+          </div>
+        </form>
+      @endif
+    </noscript>
+    <hr />
+    @if ($comment['total'] == 0) コメントがありません。
+    @else
+      @foreach ($comment['come'] as $i => $c)
+        <ul class="commentlist">
+          <li class="comment even thread-even depth-1" id="li-comment-{{ $c->id }}">
+            <div class="commentnumber">{{ (int)$i+1 }}({{ $c->src }})</div>
+            <div id="comment-{{ $c->id }}">
+              <div>
+                <cite class="fn">
+                  @if ($c->isvideo == 'n')
+                    <img style="height: 24px;" src="{{ $c->icon }}" alt="{{ $c->name }}さんのアイコン">
+                    <a href="{{ $c->channel }}" style="overflow-wrap: break-word;">{{ ($c->name ?: '名無しのテクニシャン') }}</a>
+                  @else
+                    @if ($c->user_id)
+                      <a href="/profile/{{ $c->user_id }}" style="{{ $c->showcol }}"><img style="width: 24px; height: 24px;" src="{{ $c->avatar }}" alt="{{ $c->showname }}さんのアイコン"> {{ $c->showname }}</a>
+                    @else
+                      {{ ($c->name ?: '名無しのテクニシャン') }}
+                    @endif
+                  @endif
+                </cite> <span class="says">より:</span>
+                <span class="comment-meta commentmetadata" id="#comment-{{ $c->id }}"> <a href="#comment-{{ $c->id }}">{{ $c->created }}</a></span>
+              </div>
+              <p style="white-space: pre-wrap; word-wrap: break-word; width: 500px;"><?php echo $c->message; ?></p>
+              <div class="reply">返信（{{ $c->replyCount }}）</div>
+            </div>
+          </li>
+          @if (isset($c->replies))
+            @foreach ($c->replies as $j => $r)
+              <ul class="commentlist">
+                <li class="comment even thread-even depth-2" id="li-comment-${{ $r['id'] }}">
+                  <div class="commentnumber">{{ $i+1 }}/{{ $j+1 }}({{ $c->src }})</div>
+                  <div id="comment-{{ $r['id'] }}">
+                    <div>
+                      <cite class="fn">
+                        @if ($c->isvideo != 'f')
+                          <img style="height: 24px;" src="{{ $r['icon'] }}" alt="{{ $r['name'] }}さんのアイコン">
+                          <a href="{{ $r['channel'] }}">{{ ($r['name'] ?: '名無しのテクニシャン') }}</a>
+                        @else
+                          @if ($r['user_id'])
+                            <a href="/profile/{{ $r['user_id'] }}" style="{{ $r['showcol'] }}"><img style="width: 24px; height: 24px;" src="{{ $r['avatar'] }}" alt="{{ $r['showname'] }}さんのアイコン"> {{ $r['showname'] }}</a>
+                          @else
+                            {{ ($r['name'] ?: '名無しのテクニシャン') }}
+                          @endif
+                        @endif
+                      </cite> <span class="says">より:</span>
+                      <span class="comment-meta commentmetadata" id="#comment-{{ $r['id'] }}"> <a href="#comment-{{ $r['id'] }}">{{ $r['created'] }}</a></span>
+                    </div>
+                    <p style="white-space: pre-wrap; word-wrap: break-word; width: 500px;"><?php echo $r['message']; ?></p>
+                  </div>
+                </li>
+              </ul>
+            @endforeach
+          @endif
+        </ul>
+      @endforeach
+    @endif
+	</div>
+</div>
diff --git a/resources/views/pages/common/contenttype.blade.php b/resources/views/pages/common/contenttype.blade.php
new file mode 100644
index 0000000..4b3eca9
--- /dev/null
+++ b/resources/views/pages/common/contenttype.blade.php
@@ -0,0 +1,48 @@
+<div class="row body">
+  <div class="col-md-3"><b>種類</b></div>
+  <div class="col">
+    <div class="form-check">
+      <input class="form-check-input" name="isPost" type="radio" id="typepost" value="1" @if ($ip == 1) checked @endif />
+      <label class="form-check-label" for="typepost">ポスト</label>
+    </div>
+    <div class="form-check">
+      <input class="form-check-input" name="isPost" type="radio" id="typepage" value="0" @if ($ip == 0) checked @endif />
+      <label class="form-check-label" for="typepage">ページ</label>
+    </div>
+  </div>
+</div>
+<div style="font-weight: bolder;">ポスト</div>
+<div class="row body">
+  <div class="col-md-3"><b>公開設定</b></div>
+  <div class="col">
+    <select id="public_status" name="public_status" class="form-control">
+      <option value="0" @if ($is == 0) selected @endif >公開</option>
+      <option value="1" @if ($is == 1) selected @endif >スケジュールを設定</option>
+      <option value="2" @if ($is == 2) selected @endif >限定公開</option>
+      <option value="3" @if ($is == 3) selected @endif >非公開</option>
+      <option value="4" @if ($is == 4) selected @endif >下書き</option>
+    </select>
+  </div>
+</div>
+<div style="font-weight: bold;">スケジュールの場合</div>
+<div class="row body">
+  <div class="col-md-3"><b>公開日時</b></div>
+  <div class="col">
+    <?php
+      $pd = date('Y-m-d\TH:i', ($pd != 0 && is_int($pd) ? $pd : (is_string($pd) ? strtotime($pd) : time())));
+      $max = new \DateTime($pd);
+      $max = $max->modify('+1 year')->format('Y-m-d\TH:i');
+    ?>
+    <input type="datetime-local" name="publish_date" id="publish_date" value="{{ date('Y-m-d\TH:i', strtotime($pd)) }}" min="{{ date('Y-m-d\TH:i', strtotime($pd)) }}" max="{{ date('Y-m-d\TH:i', strtotime($max)) }}" />
+  </div>
+</div>
+<div style="font-weight: bolder;">ページ</div>
+<div class="row body">
+  <div class="col-md-3"><b>メニュー</b></div>
+  <div class="col">
+    <div class="form-group form-check">
+      <input type="checkbox" name="isMenu" class="form-check-input" id="menu" @if ($im) checked @endif />
+      <label class="form-check-label" for="menu">メニューに表示する</label>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/pages/peertube/a.blade.php b/resources/views/pages/peertube/a.blade.php
new file mode 100644
index 0000000..195abe7
--- /dev/null
+++ b/resources/views/pages/peertube/a.blade.php
@@ -0,0 +1,13 @@
+@extends('layout')
+
+@section('content')
+  <div id="content" tabindex="-1" class="main-col">
+    <div class="main-row">
+      <div class="root ng-star-inserted">
+        @include('layout.component.a.info')
+        @include('layout.component.a.links')
+        @include('layout.component.a.channels')
+      </div>
+    </div>
+  </div>
+@endsection
diff --git a/resources/views/pages/peertube/c.blade.php b/resources/views/pages/peertube/c.blade.php
new file mode 100644
index 0000000..3e12c34
--- /dev/null
+++ b/resources/views/pages/peertube/c.blade.php
@@ -0,0 +1,9 @@
+@extends('layout')
+
+@section('content')
+  <div id="content" tabindex="-1" class="main-col">
+    @include('layout.component.c.head')
+    @include('layout.component.c.links')
+    @include('layout.component.c.'.($res['cat'] == 'video-playlists' ? 'playlists' : 'videos'))
+  </div>
+@endsection
diff --git a/resources/views/pages/peertube/home.blade.php b/resources/views/pages/peertube/home.blade.php
new file mode 100644
index 0000000..761f7cd
--- /dev/null
+++ b/resources/views/pages/peertube/home.blade.php
@@ -0,0 +1,17 @@
+@extends('layout')
+
+@section('content')
+  <div id="content" tabindex="-1" class="main-col">
+    <div class="main-row">
+      <ng-component class="ng-star-inserted">
+        <ng-component class="ng-star-inserted">
+          <h1 class="sr-only">トップページ</h1>
+          <div class="margin-content">
+            @include('layout.component.home.newest')
+            @include('layout.component.home.popularest')
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
diff --git a/resources/views/pages/peertube/login.blade.php b/resources/views/pages/peertube/login.blade.php
new file mode 100644
index 0000000..2dbaebc
--- /dev/null
+++ b/resources/views/pages/peertube/login.blade.php
@@ -0,0 +1,76 @@
+@extends('layout')
+
+@section('content')
+  <div id="content" tabindex="-1" class="main-col">
+    <div class="main-row">
+      <my-login class="ng-star-inserted">
+        <div class="margin-content">
+          <div class="title-page title-page-single">ログイン</div>
+          @if (!is_null($res['err'])) <div _ngcontent-fjg-c238="" class="alert alert-danger ng-star-inserted">{{ $err }}</div> @endif
+          <div class="wrapper ng-star-inserted">
+            <div class="login-form-and-externals">
+              <form action="/login" method="post" role="form" id="plugin-selector-login-form" class="ng-pristine ng-invalid ng-touched">
+                @csrf
+                <div class="form-group">
+                  <div>
+                    <label for="username">ユーザー</label>
+                    <input type="text" name="username" placeholder="ユーザー名かメールアドレス" required="" tabindex="1" myautofocus="" class="form-control ng-pristine ng-invalid ng-touched">
+                  </div>
+                </div>
+                <div class="form-group">
+                  <label for="password">パスワード</label>
+                  <input type="password" class="form-control ng-untouched ng-pristine ng-valid" name="password" autocomplete="current-password" placeholder="パスワード" tabindex="2">
+                </div>
+                <input type="submit" value="ログイン" class="peertube-button orange-button">
+                <div class="additionnal-links">
+                  <a title="クリックしてパスワードをリセットします" class="forgot-password-button">パスワードを忘れました</a>
+                  <div class="signup-link ng-star-inserted">
+                    <span>·</span><a class="create-an-account" href="/signup">アカウントを作成する</a>
+                  </div>
+                </div>
+                <div role="alert" class="looking-for-account alert alert-info">
+                  <h6 class="alert-heading">あなたのアカウントでログインする事で、コンテンツを公開することができます</h6>
+                  <div class="ng-star-inserted"> This instance allows registration. However, be careful to check the Terms before creating an account. You may also search for another instance to match your exact needs at: <br><a href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer" class="alert-link">https://joinpeertube.org/instances</a>. </div>
+                </div>
+              </form>
+            </div>
+            <div class="instance-information">
+              <my-instance-about-accordion>
+                <h2 class="instance-name">076動画</h2>
+                <div class="instance-short-description">JSのないPeerTube</div>
+                <ngb-accordion role="tablist" class="accordion" aria-multiselectable="false">
+                  <div class="card ng-star-inserted">
+                    <div role="tabpanel" id="terms" aria-labelledby="terms-header" class="ng-star-inserted collapse show">
+                      <div class="card-body">
+                        <div _ngcontent-fjg-c88="" class="block ng-star-inserted">
+                          <p>
+                            ・デフォルトで各ユーザーは一日2GBまで、総合50GBまでアップ出来ますが、信頼があれば、限界を段々増大するかもしれません。<br>
+                            ・差別は禁止です。人種、宗教、国籍、性別、ワクチン状況等込み。冗談はOKです。<br>
+                            ・リアポルノは禁止です。2D画像又はCGIはOKです。（例えば、児ポはNGですが、ロリコン・ショタコンはOKです）<br>
+                            ・無駄な報告を見逃します。０７６のルール違反じゃなければ、反応しません。著作権（DMCA込み）について報告は迷惑メールとして扱います。著作権＝権威主義（共産主義）の詐欺ですから。<br>
+                            ・政治について会話は禁止じゃないですが、出来れば喧嘩をご遠慮下さい。<br>
+                            ・詐欺、スパムBOT等はすぐBANします。<br>
+                            ・管理者はテクニカル諏訪子しかいません。ユーザーでの問題があれば、まずはあのユーザーで解いてみて下さい。
+                          </p>
+                          <p>
+                            ・By default, each user can increase up to 2GB per day, up to 50GB in total, but if you have confidence, the limit may gradually increase.<br>
+                            ・Discrimination is prohibited. Includes race, religion, nationality, gender, vaccine status, etc. The joke is OK.<br>
+                            ・Rear porn is prohibited. 2D image or GCI is OK. (For example, child po is NG, but lolicon and shotacon are OK)<br>
+                            ・Miss useless reports. Unless it violates the 076 rule, it will not respond. Report on copyright (including DMCA) will be treated as junk mail. Copyright = authoritarian (communist) fraud.<br>
+                            ・Conversations about politics are not prohibited, but please refrain from fighting if possible.<br>
+                            ・Fraud, spam BOT, etc. will be banned immediately.<br>
+                            ・The only administrator is TechnicalSuwako. If you have a problem with a user, please try to solve it with that user first.
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </ngb-accordion>
+              </my-instance-about-accordion>
+            </div>
+          </div>
+        </div>
+      </my-login>
+    </div>
+  </div>
+@endsection
diff --git a/resources/views/pages/peertube/my-account/notifications.blade.php b/resources/views/pages/peertube/my-account/notifications.blade.php
new file mode 100644
index 0000000..a5d4fc9
--- /dev/null
+++ b/resources/views/pages/peertube/my-account/notifications.blade.php
@@ -0,0 +1,20 @@
+@extends('layout')
+
+@section('content')
+  <div id="content" tabindex="-1" class="main-col">
+    <div class="main-row">
+      <my-my-account class="ng-star-inserted">
+        <div class="row">
+          @include('layout.component.my-account.menu', ['active' => 'notifications'])
+          <div class="margin-content pb-5 offset-content">
+            <ng-component class="ng-star-inserted">
+              <h1 class="sr-only">通知</h1>
+              @include('layout.component.my-account.filter')
+              @include('layout.component.my-account.notifications')
+            </ng-component>
+          </div>
+        </div>
+      </my-my-account>
+    </div>
+  </div>
+@endsection
diff --git a/resources/views/pages/peertube/notyet.blade.php b/resources/views/pages/peertube/notyet.blade.php
new file mode 100644
index 0000000..0ac7e00
--- /dev/null
+++ b/resources/views/pages/peertube/notyet.blade.php
@@ -0,0 +1,7 @@
+@extends('layout')
+
+@section('content')
+  <div id="content" tabindex="-1" class="main-col">
+    開発中
+  </div>
+@endsection
diff --git a/resources/views/pages/peertube/videos/local.blade.php b/resources/views/pages/peertube/videos/local.blade.php
new file mode 100644
index 0000000..b1387e1
--- /dev/null
+++ b/resources/views/pages/peertube/videos/local.blade.php
@@ -0,0 +1,34 @@
+@extends('layout')
+
+@section('content')
+  <div id="content" tabindex="-1" class="main-col">
+    <div class="main-row">
+      <ng-component class="ng-star-inserted">
+        <ng-component class="ng-star-inserted">
+          <my-videos-list>
+            <div class="margin-content">
+              <div class="videos-header">
+                <h1 placement="bottom" container="body" class="title ng-star-inserted"> ローカル動画 </h1>
+                <div class="title-subscription ng-star-inserted">
+                  Subscribe to RSS feed "ローカル動画"
+                  <my-feed>
+                    <div class="feed">
+                      <my-global-icon role="button" aria-label="Open syndication dropdown" placement="bottom left auto" iconname="syndication" class="icon-syndication ng-star-inserted">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
+                      </my-global-icon>
+                    </div>
+                  </my-feed>
+                </div>
+                <div class="action-block"></div>
+              </div>
+              @include('layout.component.common.videosbydate')
+              @include('layout.component.common.paginate', [
+                'root' => '/videos/local'
+              ])
+            </div>
+          </my-videos-list>
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
diff --git a/resources/views/pages/peertube/videos/overview.blade.php b/resources/views/pages/peertube/videos/overview.blade.php
new file mode 100644
index 0000000..02d8ef4
--- /dev/null
+++ b/resources/views/pages/peertube/videos/overview.blade.php
@@ -0,0 +1,22 @@
+@extends('layout')
+
+@section('content')
+  <div id="content" tabindex="-1" class="main-col">
+    <div class="main-row">
+      <ng-component class="ng-star-inserted">
+        <ng-component class="ng-star-inserted">
+          <h1 class="sr-only">ディスカバー</h1>
+          <div class="margin-content">
+            @if (!empty($res['video']->categories)) @include('layout.component.videos.categories') @endif
+            @if (!empty($res['video']->tags)) @include('layout.component.videos.tags') @endif
+            @if (!empty($res['video']->channels)) @include('layout.component.videos.channels') @endif
+            <div style="margin-top: 16px;"></div>
+            @include('layout.component.common.paginate', [
+              'root' => '/videos/overview'
+            ])
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
diff --git a/resources/views/pages/peertube/videos/recentlyadded.blade.php b/resources/views/pages/peertube/videos/recentlyadded.blade.php
new file mode 100644
index 0000000..5765ac1
--- /dev/null
+++ b/resources/views/pages/peertube/videos/recentlyadded.blade.php
@@ -0,0 +1,34 @@
+@extends('layout')
+
+@section('content')
+  <div id="content" tabindex="-1" class="main-col">
+    <div class="main-row">
+      <ng-component class="ng-star-inserted">
+        <ng-component class="ng-star-inserted">
+          <my-videos-list>
+            <div class="margin-content">
+              <div class="videos-header">
+                <h1 placement="bottom" container="body" class="title ng-star-inserted"> 最近投稿された動画 </h1>
+                <div class="title-subscription ng-star-inserted">
+                  Subscribe to RSS feed "最近投稿された動画"
+                  <my-feed>
+                    <div class="feed">
+                      <my-global-icon role="button" aria-label="Open syndication dropdown" placement="bottom left auto" iconname="syndication" class="icon-syndication ng-star-inserted">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
+                      </my-global-icon>
+                    </div>
+                  </my-feed>
+                </div>
+                <div class="action-block"></div>
+              </div>
+              @include('layout.component.common.videosbydate')
+              @include('layout.component.common.paginate', [
+                'root' => '/videos/recently-added'
+              ])
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
diff --git a/resources/views/pages/peertube/videos/trending.blade.php b/resources/views/pages/peertube/videos/trending.blade.php
new file mode 100644
index 0000000..c16c4e9
--- /dev/null
+++ b/resources/views/pages/peertube/videos/trending.blade.php
@@ -0,0 +1,38 @@
+@extends('layout')
+
+@section('content')
+  <div id="content" tabindex="-1" class="main-col">
+    <div class="main-row">
+      <ng-component class="ng-star-inserted">
+        <ng-component class="ng-star-inserted">
+          <my-videos-list>
+            <div class="margin-content">
+              <div class="videos-header">
+                <h1 placement="bottom" container="body" class="title ng-star-inserted"> トレンド </h1>
+                <div class="title-subscription ng-star-inserted">
+                  Subscribe to RSS feed "トレンド"
+                  <my-feed>
+                    <div class="feed">
+                      <my-global-icon role="button" aria-label="Open syndication dropdown" placement="bottom left auto" iconname="syndication" class="icon-syndication ng-star-inserted">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
+                      </my-global-icon>
+                    </div>
+                  </my-feed>
+                </div>
+                <div class="action-block"></div>
+              </div>
+              <div class="videos">
+                @foreach ($res['video']->data as $v)
+                  @include('layout.component.common.videominature')
+                @endforeach
+              </div>
+              @include('layout.component.common.paginate', [
+                'root' => '/videos/trending'
+              ])
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
diff --git a/resources/views/pages/peertube/w.blade.php b/resources/views/pages/peertube/w.blade.php
new file mode 100644
index 0000000..c695c1e
--- /dev/null
+++ b/resources/views/pages/peertube/w.blade.php
@@ -0,0 +1,14 @@
+@extends('layout')
+
+@section('content')
+  <div id="content" tabindex="-1" class="main-col">
+    <div class="main-row">
+      <my-video-watch class="ng-star-inserted">
+        <div class="root">
+          @include('layout.component.w.player')
+          @include('layout.component.w.info')
+        </div>
+      </my-video-watch>
+    </div>
+  </div>
+@endsection
diff --git a/resources/views/rss/feed.blade.php b/resources/views/rss/feed.blade.php
new file mode 100644
index 0000000..e4b0e6e
--- /dev/null
+++ b/resources/views/rss/feed.blade.php
@@ -0,0 +1,22 @@
+<?=
+  '<?xml version="1.0" encoding="UTF-8"?>'.PHP_EOL
+?>
+<rss version="2.0">
+  <channel>
+    <title><![CDATA[{{ env('APP_NAME') }}]]></title>
+    <link><![CDATA[{{ env('APP_URL') }}/feed ]]></link>
+    <description><![CDATA[ テクニカル諏訪子のホームページです。ゲーム及びテクノロジー関係ブログですわ♡ ]]></description>
+    <language>ja</language>
+    <pubDate>{{ now() }}</pubDate>
+
+    @foreach($posts as $post)
+      <item>
+        <title><![CDATA[{{ $post->title }}]]></title>
+        <link>{{ env('APP_URL') }}/blog/{{ $post->slug }}</link>
+        <description><![CDATA[{!! $post->message !!}]]></description>
+        <author><![CDATA[{{ $post->user }}]]></author>
+        <pubDate>{{ date('Y-m-d H:i:s', $post->publish_date) }}</pubDate>
+      </item>
+    @endforeach
+  </channel>
+</rss>
\ No newline at end of file
diff --git a/routes/api.php b/routes/api.php
new file mode 100644
index 0000000..bcb8b18
--- /dev/null
+++ b/routes/api.php
@@ -0,0 +1,19 @@
+<?php
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Route;
+
+/*
+|--------------------------------------------------------------------------
+| API Routes
+|--------------------------------------------------------------------------
+|
+| Here is where you can register API routes for your application. These
+| routes are loaded by the RouteServiceProvider within a group which
+| is assigned the "api" middleware group. Enjoy building your API!
+|
+*/
+
+Route::middleware('auth:api')->get('/user', function (Request $request) {
+    return $request->user();
+});
diff --git a/routes/channels.php b/routes/channels.php
new file mode 100644
index 0000000..963b0d2
--- /dev/null
+++ b/routes/channels.php
@@ -0,0 +1,18 @@
+<?php
+
+use Illuminate\Support\Facades\Broadcast;
+
+/*
+|--------------------------------------------------------------------------
+| Broadcast Channels
+|--------------------------------------------------------------------------
+|
+| Here you may register all of the event broadcasting channels that your
+| application supports. The given channel authorization callbacks are
+| used to check if an authenticated user can listen to the channel.
+|
+*/
+
+Broadcast::channel('App.User.{id}', function ($user, $id) {
+    return (int) $user->id === (int) $id;
+});
diff --git a/routes/console.php b/routes/console.php
new file mode 100644
index 0000000..da55196
--- /dev/null
+++ b/routes/console.php
@@ -0,0 +1,19 @@
+<?php
+
+use Illuminate\Foundation\Inspiring;
+use Illuminate\Support\Facades\Artisan;
+
+/*
+|--------------------------------------------------------------------------
+| Console Routes
+|--------------------------------------------------------------------------
+|
+| This file is where you may define all of your Closure based console
+| commands. Each Closure is bound to a command instance allowing a
+| simple approach to interacting with each command's IO methods.
+|
+*/
+
+Artisan::command('inspire', function () {
+    $this->comment(Inspiring::quote());
+})->describe('Display an inspiring quote');
diff --git a/routes/web.php b/routes/web.php
new file mode 100644
index 0000000..5139dd0
--- /dev/null
+++ b/routes/web.php
@@ -0,0 +1,62 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+
+Route::any('/', 'Peertube\Home@index');
+Route::any('/home', 'Peertube\Home@index');
+
+Route::any('/a/{id}/{cat?}', 'Peertube\Account@index');
+Route::any('/c/{id}/{cat?}/{page?}', 'Peertube\Channel@index');
+Route::any('/w/{id}', 'Peertube\Watch@index');
+
+Route::get('/logout', 'Peertube\Logout@logout');
+Route::group(['prefix' => 'login'], function () {
+  Route::get('/', 'Peertube\Login@index');
+  Route::post('/', 'Peertube\Login@login');
+});
+Route::any('/signup', 'Peertube\Signup@index');
+
+Route::any('/about', 'Peertube\About@index');
+
+Route::group(['prefix' => 'my-account'], function () {
+  Route::any('/', 'Peertube\Myaccount\Settings@index');
+  Route::any('/settings', 'Peertube\Myaccount\Settings@index');
+  Route::group(['prefix' => 'notifications'], function () {
+    Route::post('/read', 'Peertube\Myaccount\Notification@read');
+    Route::post('/readAll', 'Peertube\Myaccount\Notification@readAll');
+    Route::get('/{page?}', 'Peertube\Myaccount\Notification@index');
+  });
+  Route::any('/applications', 'Peertube\Myaccount\Applications@index');
+  Route::group(['prefix' => 'blocklist'], function () {
+    Route::any('/', 'Peertube\Myaccount\Blocklist\Accounts@index');
+    Route::any('/accounts', 'Peertube\Myaccount\Blocklist\Accounts@index');
+    Route::any('/servers', 'Peertube\Myaccount\Blocklist\Servers@index');
+  });
+});
+Route::any('/my-library', 'Peertube\Mylibrary@index');
+
+Route::group(['prefix' => 'admin'], function () {
+  Route::any('/', 'Peertube\Admin\Users@index');
+  Route::any('/users', 'Peertube\Admin\Users@index');
+});
+
+Route::group(['prefix' => 'my-library'], function () {
+  Route::any('/', 'Peertube\Mylibrary\Videochannels@index');
+  Route::any('/videos', 'Peertube\Mylibrary\Videos@index');
+  Route::any('/video-playlists', 'Peertube\Mylibrary\Videoplaylists@index');
+
+  Route::group(['prefix' => 'history'], function () {
+    Route::any('/', 'Peertube\Mylibrary\History@index');
+    Route::any('/videos', 'Peertube\Mylibrary\History\Videos@index');
+  });
+});
+
+Route::group(['prefix' => 'videos'], function () {
+  Route::any('/', 'Peertube\Videos\Local@index');
+  Route::any('/subscriptions', 'Peertube\Videos\Subscriptions@index');
+  Route::any('/overview/{page?}', 'Peertube\Videos\Overview@index');
+  Route::any('/trending/{page?}', 'Peertube\Videos\Trending@index');
+  Route::any('/recently-added/{page?}', 'Peertube\Videos\Recentlyadded@index');
+  Route::any('/local/{page?}', 'Peertube\Videos\Local@index');
+  Route::any('/upload', 'Peertube\Videos\Upload@index');
+});
diff --git a/server.php b/server.php
new file mode 100644
index 0000000..5fb6379
--- /dev/null
+++ b/server.php
@@ -0,0 +1,21 @@
+<?php
+
+/**
+ * Laravel - A PHP Framework For Web Artisans
+ *
+ * @package  Laravel
+ * @author   Taylor Otwell <taylor@laravel.com>
+ */
+
+$uri = urldecode(
+    parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)
+);
+
+// This file allows us to emulate Apache's "mod_rewrite" functionality from the
+// built-in PHP web server. This provides a convenient way to test a Laravel
+// application without having installed a "real" web server software here.
+if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
+    return false;
+}
+
+require_once __DIR__.'/public/index.php';
diff --git a/storage/app/.gitignore b/storage/app/.gitignore
new file mode 100644
index 0000000..8f4803c
--- /dev/null
+++ b/storage/app/.gitignore
@@ -0,0 +1,3 @@
+*
+!public/
+!.gitignore
diff --git a/storage/app/public/.gitignore b/storage/app/public/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/app/public/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/storage/framework/.gitignore b/storage/framework/.gitignore
new file mode 100644
index 0000000..b02b700
--- /dev/null
+++ b/storage/framework/.gitignore
@@ -0,0 +1,8 @@
+config.php
+routes.php
+schedule-*
+compiled.php
+services.json
+events.scanned.php
+routes.scanned.php
+down
diff --git a/storage/framework/cache/.gitignore b/storage/framework/cache/.gitignore
new file mode 100644
index 0000000..01e4a6c
--- /dev/null
+++ b/storage/framework/cache/.gitignore
@@ -0,0 +1,3 @@
+*
+!data/
+!.gitignore
diff --git a/storage/framework/cache/data/.gitignore b/storage/framework/cache/data/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/framework/cache/data/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/storage/framework/sessions/.gitignore b/storage/framework/sessions/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/framework/sessions/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/storage/framework/testing/.gitignore b/storage/framework/testing/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/framework/testing/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/storage/framework/views/.gitignore b/storage/framework/views/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/framework/views/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/storage/logs/.gitignore b/storage/logs/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/logs/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/tests/CreatesApplication.php b/tests/CreatesApplication.php
new file mode 100644
index 0000000..547152f
--- /dev/null
+++ b/tests/CreatesApplication.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace Tests;
+
+use Illuminate\Contracts\Console\Kernel;
+
+trait CreatesApplication
+{
+    /**
+     * Creates the application.
+     *
+     * @return \Illuminate\Foundation\Application
+     */
+    public function createApplication()
+    {
+        $app = require __DIR__.'/../bootstrap/app.php';
+
+        $app->make(Kernel::class)->bootstrap();
+
+        return $app;
+    }
+}
diff --git a/tests/Feature/ExampleTest.php b/tests/Feature/ExampleTest.php
new file mode 100644
index 0000000..cdb5111
--- /dev/null
+++ b/tests/Feature/ExampleTest.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class ExampleTest extends TestCase
+{
+    /**
+     * A basic test example.
+     *
+     * @return void
+     */
+    public function testBasicTest()
+    {
+        $response = $this->get('/');
+
+        $response->assertStatus(200);
+    }
+}
diff --git a/tests/TestCase.php b/tests/TestCase.php
new file mode 100644
index 0000000..2932d4a
--- /dev/null
+++ b/tests/TestCase.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace Tests;
+
+use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
+
+abstract class TestCase extends BaseTestCase
+{
+    use CreatesApplication;
+}
diff --git a/tests/Unit/ExampleTest.php b/tests/Unit/ExampleTest.php
new file mode 100644
index 0000000..358cfc8
--- /dev/null
+++ b/tests/Unit/ExampleTest.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace Tests\Unit;
+
+use PHPUnit\Framework\TestCase;
+
+class ExampleTest extends TestCase
+{
+    /**
+     * A basic test example.
+     *
+     * @return void
+     */
+    public function testBasicTest()
+    {
+        $this->assertTrue(true);
+    }
+}