<%= get_flash(@conn, :info) %>
17 |<%= get_flash(@conn, :error) %>
18 | 19 | <%= render @view_module, @view_template, assigns %> 20 | 21 |├── .gitignore ├── LICENSE ├── README.md ├── config ├── config.exs ├── dev.exs ├── prod.exs └── test.exs ├── lib ├── phoenix_react_redux_example.ex └── phoenix_react_redux_example │ ├── endpoint.ex │ └── todo_server.ex ├── mix.exs ├── mix.lock ├── package.json ├── priv └── static │ ├── css │ └── app.css │ ├── favicon.ico │ ├── images │ └── phoenix.png │ ├── js │ └── phoenix.js │ └── robots.txt ├── test ├── controllers │ └── page_controller_test.exs ├── support │ ├── channel_case.ex │ └── conn_case.ex ├── test_helper.exs └── views │ ├── error_view_test.exs │ ├── layout_view_test.exs │ └── page_view_test.exs ├── web ├── channels │ ├── todo_channel.ex │ └── todo_socket.ex ├── controllers │ └── page_controller.ex ├── router.ex ├── static │ ├── css │ │ └── app.scss │ └── js │ │ ├── actions.js │ │ ├── channel.js │ │ ├── components │ │ ├── AddTodo.js │ │ ├── Footer.js │ │ ├── Todo.js │ │ └── TodoList.js │ │ ├── containers │ │ └── App.js │ │ ├── index.js │ │ └── reducers.js ├── templates │ ├── layout │ │ └── app.html.eex │ └── page │ │ └── index.html.eex ├── views │ ├── error_view.ex │ ├── layout_view.ex │ └── page_view.ex └── web.ex └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # App artifacts 2 | /_build 3 | /db 4 | /deps 5 | /*.ez 6 | 7 | # Generate on crash by the VM 8 | erl_crash.dump 9 | 10 | # Static artifacts 11 | /node_modules 12 | /priv/static/js/app.js 13 | 14 | # The config/prod.secret.exs file by default contains sensitive 15 | # data and you should not commit it into version control. 16 | # 17 | # Alternatively, you may comment the line below and commit the 18 | # secrets file as long as you replace its contents by environment 19 | # variables. 20 | /config/prod.secret.exs -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Ben Smith 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Phoenix + React + Redux Example 2 | 3 | [Integrating React and Redux with the Phoenix web framework](http://10consulting.com/2015/11/18/phoenix-react-redux-example/). 4 | 5 | Heavily inspired by @[ryanswapp](https://github.com/ryanswapp)'s [elixir-react-redux-example](https://github.com/ryanswapp/elixir-react-redux-example). 6 | 7 | Implementation of the basic TODO example from the [Redux documentation](http://rackt.org/redux/docs/basics/UsageWithReact.html). 8 | 9 | Uses an Elixir agent for in-memory persistence of the TODO list. 10 | 11 | Phoenix channels (websocket) are used for client <=> server communication and to support multiple users. 12 | 13 | Demonstrates an end-to-end integration of the following tools. 14 | 15 | - [Phoenix web framework](http://phoenixframework.org) 16 | - [React](https://facebook.github.io/react/) 17 | - [Redux](https://github.com/rackt/redux) (`redux`) 18 | - [React Redux](https://github.com/rackt/react-redux) (`react-redux`) 19 | - [Webpack](https://webpack.github.io/) 20 | 21 | ## Quickstart guide 22 | 23 | 1. Clone repository with `git clone https://github.com/slashdotdash/phoenix-react-redux-example.git` 24 | 2. Install npm dependencies with `npm install` 25 | 3. Install Phoenix dependencies with `mix deps.get` 26 | 4. Start Phoenix endpoint with `mix phoenix.server` 27 | 28 | Now you can visit [`localhost:4000`](http://localhost:4000) from your browser. 29 | -------------------------------------------------------------------------------- /config/config.exs: -------------------------------------------------------------------------------- 1 | # This file is responsible for configuring your application 2 | # and its dependencies with the aid of the Mix.Config module. 3 | # 4 | # This configuration file is loaded before any dependency and 5 | # is restricted to this project. 6 | use Mix.Config 7 | 8 | # Configures the endpoint 9 | config :phoenix_react_redux_example, PhoenixReactReduxExample.Endpoint, 10 | url: [host: "localhost"], 11 | root: Path.dirname(__DIR__), 12 | secret_key_base: "sEE3bU6zBp2GSnxhod9D2JJyJlsM/IEfhe7FkWLzMleHiJmlawIILFtM/egm9c29", 13 | render_errors: [accepts: ~w(html json)], 14 | pubsub: [name: PhoenixReactReduxExample.PubSub, 15 | adapter: Phoenix.PubSub.PG2] 16 | 17 | # Configures Elixir's Logger 18 | config :logger, :console, 19 | format: "$time $metadata[$level] $message\n", 20 | metadata: [:request_id] 21 | 22 | # Import environment specific config. This must remain at the bottom 23 | # of this file so it overrides the configuration defined above. 24 | import_config "#{Mix.env}.exs" 25 | -------------------------------------------------------------------------------- /config/dev.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # For development, we disable any cache and enable 4 | # debugging and code reloading. 5 | # 6 | # The watchers configuration can be used to run external 7 | # watchers to your application. For example, we use it 8 | # with brunch.io to recompile .js and .css sources. 9 | config :phoenix_react_redux_example, PhoenixReactReduxExample.Endpoint, 10 | http: [port: 4000], 11 | debug_errors: true, 12 | code_reloader: true, 13 | cache_static_lookup: false, 14 | check_origin: false, 15 | watchers: [] 16 | 17 | # Watch static and templates for browser reloading. 18 | config :phoenix_react_redux_example, PhoenixReactReduxExample.Endpoint, 19 | live_reload: [ 20 | patterns: [ 21 | ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$}, 22 | ~r{web/views/.*(ex)$}, 23 | ~r{web/templates/.*(eex)$} 24 | ] 25 | ] 26 | 27 | # Do not include metadata nor timestamps in development logs 28 | config :logger, :console, format: "[$level] $message\n" 29 | 30 | # Set a higher stacktrace during development. 31 | # Do not configure such in production as keeping 32 | # and calculating stacktraces is usually expensive. 33 | config :phoenix, :stacktrace_depth, 20 34 | -------------------------------------------------------------------------------- /config/prod.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # For production, we configure the host to read the PORT 4 | # from the system environment. Therefore, you will need 5 | # to set PORT=80 before running your server. 6 | # 7 | # You should also configure the url host to something 8 | # meaningful, we use this information when generating URLs. 9 | # 10 | # Finally, we also include the path to a manifest 11 | # containing the digested version of static files. This 12 | # manifest is generated by the mix phoenix.digest task 13 | # which you typically run after static files are built. 14 | config :phoenix_react_redux_example, PhoenixReactReduxExample.Endpoint, 15 | http: [port: {:system, "PORT"}], 16 | url: [host: "example.com", port: 80], 17 | cache_static_manifest: "priv/static/manifest.json" 18 | 19 | # Do not print debug messages in production 20 | config :logger, level: :info 21 | 22 | # ## SSL Support 23 | # 24 | # To get SSL working, you will need to add the `https` key 25 | # to the previous section and set your `:url` port to 443: 26 | # 27 | # config :phoenix_react_redux_example, PhoenixReactReduxExample.Endpoint, 28 | # ... 29 | # url: [host: "example.com", port: 443], 30 | # https: [port: 443, 31 | # keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"), 32 | # certfile: System.get_env("SOME_APP_SSL_CERT_PATH")] 33 | # 34 | # Where those two env variables return an absolute path to 35 | # the key and cert in disk or a relative path inside priv, 36 | # for example "priv/ssl/server.key". 37 | # 38 | # We also recommend setting `force_ssl`, ensuring no data is 39 | # ever sent via http, always redirecting to https: 40 | # 41 | # config :phoenix_react_redux_example, PhoenixReactReduxExample.Endpoint, 42 | # force_ssl: [hsts: true] 43 | # 44 | # Check `Plug.SSL` for all available options in `force_ssl`. 45 | 46 | # ## Using releases 47 | # 48 | # If you are doing OTP releases, you need to instruct Phoenix 49 | # to start the server for all endpoints: 50 | # 51 | # config :phoenix, :serve_endpoints, true 52 | # 53 | # Alternatively, you can configure exactly which server to 54 | # start per endpoint: 55 | # 56 | # config :phoenix_react_redux_example, PhoenixReactReduxExample.Endpoint, server: true 57 | # 58 | 59 | # Finally import the config/prod.secret.exs 60 | # which should be versioned separately. 61 | import_config "prod.secret.exs" 62 | -------------------------------------------------------------------------------- /config/test.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # We don't run a server during test. If one is required, 4 | # you can enable the server option below. 5 | config :phoenix_react_redux_example, PhoenixReactReduxExample.Endpoint, 6 | http: [port: 4001], 7 | server: false 8 | 9 | # Print only warnings and errors during test 10 | config :logger, level: :warn 11 | -------------------------------------------------------------------------------- /lib/phoenix_react_redux_example.ex: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample do 2 | use Application 3 | 4 | # See http://elixir-lang.org/docs/stable/elixir/Application.html 5 | # for more information on OTP Applications 6 | def start(_type, _args) do 7 | import Supervisor.Spec, warn: false 8 | 9 | children = [ 10 | # Start the endpoint when the application starts 11 | supervisor(PhoenixReactReduxExample.Endpoint, []), 12 | # Here you could define other workers and supervisors as children 13 | # worker(PhoenixReactReduxExample.Worker, [arg1, arg2, arg3]), 14 | worker(PhoenixReactReduxExample.TodoServer, []) 15 | ] 16 | 17 | # See http://elixir-lang.org/docs/stable/elixir/Supervisor.html 18 | # for other strategies and supported options 19 | opts = [strategy: :one_for_one, name: PhoenixReactReduxExample.Supervisor] 20 | Supervisor.start_link(children, opts) 21 | end 22 | 23 | # Tell Phoenix to update the endpoint configuration 24 | # whenever the application is updated. 25 | def config_change(changed, _new, removed) do 26 | PhoenixReactReduxExample.Endpoint.config_change(changed, removed) 27 | :ok 28 | end 29 | end 30 | -------------------------------------------------------------------------------- /lib/phoenix_react_redux_example/endpoint.ex: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.Endpoint do 2 | use Phoenix.Endpoint, otp_app: :phoenix_react_redux_example 3 | 4 | socket "/ws", PhoenixReactReduxExample.TodoSocket 5 | 6 | # Serve at "/" the static files from "priv/static" directory. 7 | # 8 | # You should set gzip to true if you are running phoenix.digest 9 | # when deploying your static files in production. 10 | plug Plug.Static, 11 | at: "/", from: :phoenix_react_redux_example, gzip: false, 12 | only: ~w(css fonts images js favicon.ico robots.txt) 13 | 14 | # Code reloading can be explicitly enabled under the 15 | # :code_reloader configuration of your endpoint. 16 | if code_reloading? do 17 | socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket 18 | plug Phoenix.LiveReloader 19 | plug Phoenix.CodeReloader 20 | end 21 | 22 | plug Plug.RequestId 23 | plug Plug.Logger 24 | 25 | plug Plug.Parsers, 26 | parsers: [:urlencoded, :multipart, :json], 27 | pass: ["*/*"], 28 | json_decoder: Poison 29 | 30 | plug Plug.MethodOverride 31 | plug Plug.Head 32 | 33 | plug Plug.Session, 34 | store: :cookie, 35 | key: "_phoenix_react_redux_example_key", 36 | signing_salt: "PQVeJMy/" 37 | 38 | plug PhoenixReactReduxExample.Router 39 | end 40 | -------------------------------------------------------------------------------- /lib/phoenix_react_redux_example/todo_server.ex: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.TodoServer do 2 | def start_link do 3 | Agent.start_link(fn -> [] end, name: __MODULE__) 4 | end 5 | 6 | @doc "Get list of all TODOs" 7 | def all() do 8 | Agent.get(__MODULE__, fn todos -> todos end) 9 | end 10 | 11 | @doc "Add a new incomplete TODO" 12 | def add(text) do 13 | todo = %{ 14 | :text => text, 15 | :completed => false 16 | } 17 | Agent.update(__MODULE__, fn todos -> todos ++ [todo] end) 18 | end 19 | end -------------------------------------------------------------------------------- /mix.exs: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.Mixfile do 2 | use Mix.Project 3 | 4 | def project do 5 | [app: :phoenix_react_redux_example, 6 | version: "0.0.1", 7 | elixir: "~> 1.0", 8 | elixirc_paths: elixirc_paths(Mix.env), 9 | compilers: [:phoenix] ++ Mix.compilers, 10 | build_embedded: Mix.env == :prod, 11 | start_permanent: Mix.env == :prod, 12 | deps: deps] 13 | end 14 | 15 | # Configuration for the OTP application. 16 | # 17 | # Type `mix help compile.app` for more information. 18 | def application do 19 | [mod: {PhoenixReactReduxExample, []}, 20 | applications: [:phoenix, :phoenix_html, :cowboy, :logger]] 21 | end 22 | 23 | # Specifies which paths to compile per environment. 24 | defp elixirc_paths(:test), do: ["lib", "web", "test/support"] 25 | defp elixirc_paths(_), do: ["lib", "web"] 26 | 27 | # Specifies your project dependencies. 28 | # 29 | # Type `mix help deps` for examples and options. 30 | defp deps do 31 | [{:phoenix, "~> 1.2.1"}, 32 | {:phoenix_pubsub, "~> 1.0"}, 33 | {:phoenix_html, "~> 2.6"}, 34 | {:phoenix_live_reload, "~> 1.0", only: :dev}, 35 | {:gettext, "~> 0.11"}, 36 | {:cowboy, "~> 1.0"}] 37 | end 38 | end 39 | -------------------------------------------------------------------------------- /mix.lock: -------------------------------------------------------------------------------- 1 | %{"cowboy": {:hex, :cowboy, "1.1.2", "61ac29ea970389a88eca5a65601460162d370a70018afe6f949a29dca91f3bb0", [:rebar3], [{:cowlib, "~> 1.0.2", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "~> 1.3.2", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm"}, 2 | "cowlib": {:hex, :cowlib, "1.0.2", "9d769a1d062c9c3ac753096f868ca121e2730b9a377de23dec0f7e08b1df84ee", [:make], [], "hexpm"}, 3 | "fs": {:hex, :fs, "0.9.2", "ed17036c26c3f70ac49781ed9220a50c36775c6ca2cf8182d123b6566e49ec59", [:rebar], [], "hexpm"}, 4 | "gettext": {:hex, :gettext, "0.13.1", "5e0daf4e7636d771c4c71ad5f3f53ba09a9ae5c250e1ab9c42ba9edccc476263", [:mix], [], "hexpm"}, 5 | "mime": {:hex, :mime, "1.1.0", "01c1d6f4083d8aa5c7b8c246ade95139620ef8effb009edde934e0ec3b28090a", [:mix], [], "hexpm"}, 6 | "phoenix": {:hex, :phoenix, "1.2.4", "4172479b5e21806a5e4175b54820c239e0d4effb0b07912e631aa31213a05bae", [:mix], [{:cowboy, "~> 1.0", [hex: :cowboy, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 1.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:plug, "~> 1.4 or ~> 1.3.3 or ~> 1.2.4 or ~> 1.1.8 or ~> 1.0.5", [hex: :plug, repo: "hexpm", optional: false]}, {:poison, "~> 1.5 or ~> 2.0", [hex: :poison, repo: "hexpm", optional: false]}], "hexpm"}, 7 | "phoenix_html": {:hex, :phoenix_html, "2.9.3", "1b5a2122cbf743aa242f54dced8a4f1cc778b8bd304f4b4c0043a6250c58e258", [:mix], [{:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"}, 8 | "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.0.8", "4333f9c74190f485a74866beff2f9304f069d53f047f5fbb0fb8d1ee4c495f73", [:mix], [{:fs, "~> 0.9.1", [hex: :fs, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.0 or ~> 1.2-rc", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm"}, 9 | "phoenix_pubsub": {:hex, :phoenix_pubsub, "1.0.2", "bfa7fd52788b5eaa09cb51ff9fcad1d9edfeb68251add458523f839392f034c1", [:mix], [], "hexpm"}, 10 | "plug": {:hex, :plug, "1.3.5", "7503bfcd7091df2a9761ef8cecea666d1f2cc454cbbaf0afa0b6e259203b7031", [:mix], [{:cowboy, "~> 1.0.1 or ~> 1.1", [hex: :cowboy, repo: "hexpm", optional: true]}, {:mime, "~> 1.0", [hex: :mime, repo: "hexpm", optional: false]}], "hexpm"}, 11 | "poison": {:hex, :poison, "2.2.0", "4763b69a8a77bd77d26f477d196428b741261a761257ff1cf92753a0d4d24a63", [:mix], [], "hexpm"}, 12 | "ranch": {:hex, :ranch, "1.3.2", "e4965a144dc9fbe70e5c077c65e73c57165416a901bd02ea899cfd95aa890986", [:rebar3], [], "hexpm"}} 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phoenix_react_redux_example", 3 | "version": "0.0.1", 4 | "description": "Phoenix framework example using React and Redux", 5 | "scripts": {}, 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/slashdotdash/phoenix-react-redux-example.git" 9 | }, 10 | "keywords": [ 11 | "phoenix", 12 | "react", 13 | "redux" 14 | ], 15 | "author": "Ben Smith (ben@10consulting.com)", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/slashdotdash/phoenix-react-redux-example/issues" 19 | }, 20 | "homepage": "https://github.com/slashdotdash/phoenix-react-redux-example#readme", 21 | "dependencies": { 22 | "react": "^0.14.2", 23 | "react-redux": "^4.0.0", 24 | "react-router": "^0.13.5", 25 | "redux": "^3.0.4", 26 | "redux-logger": "^2.0.4", 27 | "redux-thunk": "^1.0.0" 28 | }, 29 | "devDependencies": { 30 | "babel-core": "^6.1.2", 31 | "babel-loader": "^6.0.1", 32 | "babel-preset-es2015": "^6.1.2", 33 | "babel-preset-react": "^6.1.2", 34 | "copy-webpack-plugin": "^0.2.0", 35 | "css-loader": "^0.22.0", 36 | "extract-text-webpack-plugin": "^0.9.1", 37 | "node-libs-browser": "^0.5.3", 38 | "node-sass": "^3.4.1", 39 | "react-dom": "^0.14.2", 40 | "redux-devtools": "^2.1.5", 41 | "sass-loader": "^3.1.1", 42 | "style-loader": "^0.13.0", 43 | "webpack": "^1.12.2" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /priv/static/css/app.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.1.1 (http://getbootstrap.com) 3 | * Copyright 2011-2014 Twitter, Inc. 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */ 6 | 7 | /*! normalize.css v3.0.0 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@media print{*{text-shadow:none!important;color:#000!important;background:transparent!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}select{background:#fff!important}.navbar{display:none}.table td,.table th{background-color:#fff!important}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table-bordered th,.table-bordered td{border:1px solid #ddd!important}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#428bca;text-decoration:none}a:hover,a:focus{color:#2a6496;text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive,.thumbnail>img,.thumbnail a>img,.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{font-weight:400;line-height:1;color:#999}h1,.h1,h2,.h2,h3,.h3{margin-top:20px;margin-bottom:10px}h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size:65%}h4,.h4,h5,.h5,h6,.h6{margin-top:10px;margin-bottom:10px}h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small{font-size:75%}h1,.h1{font-size:36px}h2,.h2{font-size:30px}h3,.h3{font-size:24px}h4,.h4{font-size:18px}h5,.h5{font-size:14px}h6,.h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}small,.small{font-size:85%}cite{font-style:normal}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-muted{color:#999}.text-primary{color:#428bca}a.text-primary:hover{color:#3071a9}.text-success{color:#3c763d}a.text-success:hover{color:#2b542c}.text-info{color:#31708f}a.text-info:hover{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:hover{color:#66512c}.text-danger{color:#a94442}a.text-danger:hover{color:#843534}.bg-primary{color:#fff;background-color:#428bca}a.bg-primary:hover{background-color:#3071a9}.bg-success{background-color:#dff0d8}a.bg-success:hover{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:hover{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:hover{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:hover{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ul,ol{margin-top:0;margin-bottom:10px}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none;margin-left:-5px}.list-inline>li{display:inline-block;padding-left:5px;padding-right:5px}dl{margin-top:0;margin-bottom:20px}dt,dd{line-height:1.42857143}dt{font-weight:700}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom:0}blockquote footer,blockquote small,blockquote .small{display:block;font-size:80%;line-height:1.42857143;color:#999}blockquote footer:before,blockquote small:before,blockquote .small:before{content:'\2014 \00A0'}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;border-right:5px solid #eee;border-left:0;text-align:right}.blockquote-reverse footer:before,blockquote.pull-right footer:before,.blockquote-reverse small:before,blockquote.pull-right small:before,.blockquote-reverse .small:before,blockquote.pull-right .small:before{content:''}.blockquote-reverse footer:after,blockquote.pull-right footer:after,.blockquote-reverse small:after,blockquote.pull-right small:after,.blockquote-reverse .small:after,blockquote.pull-right .small:after{content:'\00A0 \2014'}blockquote:before,blockquote:after{content:""}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;white-space:nowrap;border-radius:4px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;word-break:break-all;word-wrap:break-word;color:#333;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.row{margin-left:-15px;margin-right:-15px}.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:0}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:0}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.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{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:0}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:0}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.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{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:0}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:0}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.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{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:0}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:0}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{max-width:100%;background-color:transparent}th{text-align:left}.table{width:100%;margin-bottom:20px}.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>th,.table>caption+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>td,.table>thead:first-child>tr:first-child>td{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>thead>tr>th,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>tbody>tr>td,.table-condensed>tfoot>tr>td{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px}.table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.table-hover>tbody>tr:hover>td,.table-hover>tbody>tr:hover>th{background-color:#f5f5f5}table col[class*=col-]{position:static;float:none;display:table-column}table td[class*=col-],table th[class*=col-]{position:static;float:none;display:table-cell}.table>thead>tr>td.active,.table>tbody>tr>td.active,.table>tfoot>tr>td.active,.table>thead>tr>th.active,.table>tbody>tr>th.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>tbody>tr.active>td,.table>tfoot>tr.active>td,.table>thead>tr.active>th,.table>tbody>tr.active>th,.table>tfoot>tr.active>th{background-color:#f5f5f5}.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover,.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th{background-color:#e8e8e8}.table>thead>tr>td.success,.table>tbody>tr>td.success,.table>tfoot>tr>td.success,.table>thead>tr>th.success,.table>tbody>tr>th.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>tbody>tr.success>td,.table>tfoot>tr.success>td,.table>thead>tr.success>th,.table>tbody>tr.success>th,.table>tfoot>tr.success>th{background-color:#dff0d8}.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover,.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th{background-color:#d0e9c6}.table>thead>tr>td.info,.table>tbody>tr>td.info,.table>tfoot>tr>td.info,.table>thead>tr>th.info,.table>tbody>tr>th.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>tbody>tr.info>td,.table>tfoot>tr.info>td,.table>thead>tr.info>th,.table>tbody>tr.info>th,.table>tfoot>tr.info>th{background-color:#d9edf7}.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover,.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th{background-color:#c4e3f3}.table>thead>tr>td.warning,.table>tbody>tr>td.warning,.table>tfoot>tr>td.warning,.table>thead>tr>th.warning,.table>tbody>tr>th.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>tbody>tr.warning>td,.table>tfoot>tr.warning>td,.table>thead>tr.warning>th,.table>tbody>tr.warning>th,.table>tfoot>tr.warning>th{background-color:#fcf8e3}.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover,.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th{background-color:#faf2cc}.table>thead>tr>td.danger,.table>tbody>tr>td.danger,.table>tfoot>tr>td.danger,.table>thead>tr>th.danger,.table>tbody>tr>th.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>tbody>tr.danger>td,.table>tfoot>tr.danger>td,.table>thead>tr.danger>th,.table>tbody>tr.danger>th,.table>tfoot>tr.danger>th{background-color:#f2dede}.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover,.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th{background-color:#ebcccc}@media (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd;-webkit-overflow-scrolling:touch}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>thead>tr>th,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tfoot>tr>td{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>thead>tr>th:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child{border-left:0}.table-responsive>.table-bordered>thead>tr>th:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>th,.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>td{border-bottom:0}}fieldset{padding:0;margin:0;border:0;min-width:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;margin-bottom:5px;font-weight:700}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type=radio],input[type=checkbox]{margin:4px 0 0;margin-top:1px \9;line-height:normal}input[type=file]{display:block}input[type=range]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type=file]:focus,input[type=radio]:focus,input[type=checkbox]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#555}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{cursor:not-allowed;background-color:#eee;opacity:1}textarea.form-control{height:auto}input[type=search]{-webkit-appearance:none}input[type=date]{line-height:34px}.form-group{margin-bottom:15px}.radio,.checkbox{display:block;min-height:20px;margin-top:10px;margin-bottom:10px;padding-left:20px}.radio label,.checkbox label{display:inline;font-weight:400;cursor:pointer}.radio input[type=radio],.radio-inline input[type=radio],.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox]{float:left;margin-left:-20px}.radio+.radio,.checkbox+.checkbox{margin-top:-5px}.radio-inline,.checkbox-inline{display:inline-block;padding-left:20px;margin-bottom:0;vertical-align:middle;font-weight:400;cursor:pointer}.radio-inline+.radio-inline,.checkbox-inline+.checkbox-inline{margin-top:0;margin-left:10px}input[type=radio][disabled],input[type=checkbox][disabled],.radio[disabled],.radio-inline[disabled],.checkbox[disabled],.checkbox-inline[disabled],fieldset[disabled] input[type=radio],fieldset[disabled] input[type=checkbox],fieldset[disabled] .radio,fieldset[disabled] .radio-inline,fieldset[disabled] .checkbox,fieldset[disabled] .checkbox-inline{cursor:not-allowed}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm{height:30px;line-height:30px}textarea.input-sm,select[multiple].input-sm{height:auto}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}select.input-lg{height:46px;line-height:46px}textarea.input-lg,select[multiple].input-lg{height:auto}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.has-feedback .form-control-feedback{position:absolute;top:25px;right:0;display:block;width:34px;height:34px;line-height:34px;text-align:center}.has-success .help-block,.has-success .control-label,.has-success .radio,.has-success .checkbox,.has-success .radio-inline,.has-success .checkbox-inline{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;border-color:#3c763d;background-color:#dff0d8}.has-success .form-control-feedback{color:#3c763d}.has-warning .help-block,.has-warning .control-label,.has-warning .radio,.has-warning .checkbox,.has-warning .radio-inline,.has-warning .checkbox-inline{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;border-color:#8a6d3b;background-color:#fcf8e3}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .help-block,.has-error .control-label,.has-error .radio,.has-error .checkbox,.has-error .radio-inline,.has-error .checkbox-inline{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;border-color:#a94442;background-color:#f2dede}.has-error .form-control-feedback{color:#a94442}.form-control-static{margin-bottom:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .radio,.form-inline .checkbox{display:inline-block;margin-top:0;margin-bottom:0;padding-left:0;vertical-align:middle}.form-inline .radio input[type=radio],.form-inline .checkbox input[type=checkbox]{float:none;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .control-label,.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline{margin-top:0;margin-bottom:0;padding-top:7px}.form-horizontal .radio,.form-horizontal .checkbox{min-height:27px}.form-horizontal .form-group{margin-left:-15px;margin-right:-15px}.form-horizontal .form-control-static{padding-top:7px}@media (min-width:768px){.form-horizontal .control-label{text-align:right}}.form-horizontal .has-feedback .form-control-feedback{top:0;right:15px}.btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:active:focus,.btn.active:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:hover,.btn:focus{color:#333;text-decoration:none}.btn:active,.btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;pointer-events:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default{color:#333;background-color:#ebebeb;border-color:#adadad}.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default{background-image:none}.btn-default.disabled,.btn-default[disabled],fieldset[disabled] .btn-default,.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled:active,.btn-default[disabled]:active,fieldset[disabled] .btn-default:active,.btn-default.disabled.active,.btn-default[disabled].active,fieldset[disabled] .btn-default.active{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{color:#fff;background-color:#3276b1;border-color:#285e8e}.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled,.btn-primary[disabled],fieldset[disabled] .btn-primary,.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled] .btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary.active{background-color:#428bca;border-color:#357ebd}.btn-primary .badge{color:#428bca;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{color:#fff;background-color:#47a447;border-color:#398439}.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{background-image:none}.btn-success.disabled,.btn-success[disabled],fieldset[disabled] .btn-success,.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled:active,.btn-success[disabled]:active,fieldset[disabled] .btn-success:active,.btn-success.disabled.active,.btn-success[disabled].active,fieldset[disabled] .btn-success.active{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{color:#fff;background-color:#39b3d7;border-color:#269abc}.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{background-image:none}.btn-info.disabled,.btn-info[disabled],fieldset[disabled] .btn-info,.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled:active,.btn-info[disabled]:active,fieldset[disabled] .btn-info:active,.btn-info.disabled.active,.btn-info[disabled].active,fieldset[disabled] .btn-info.active{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active,.open .dropdown-toggle.btn-warning{color:#fff;background-color:#ed9c28;border-color:#d58512}.btn-warning:active,.btn-warning.active,.open .dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-warning,.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled:active,.btn-warning[disabled]:active,fieldset[disabled] .btn-warning:active,.btn-warning.disabled.active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning.active{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{color:#fff;background-color:#d2322d;border-color:#ac2925}.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{color:#428bca;font-weight:400;cursor:pointer;border-radius:0}.btn-link,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent}.btn-link:hover,.btn-link:focus{color:#2a6496;text-decoration:underline;background-color:transparent}.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:#999;text-decoration:none}.btn-lg,.btn-group-lg>.btn{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.btn-sm,.btn-group-sm>.btn{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-xs,.btn-group-xs>.btn{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%;padding-left:0;padding-right:0}.btn-block+.btn-block{margin-top:5px}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}.dropdown{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;font-size:14px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175);background-clip:padding-box}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{text-decoration:none;color:#262626;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#fff;text-decoration:none;outline:0;background-color:#428bca}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{color:#999}.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{text-decoration:none;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);cursor:not-allowed}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{left:auto;right:0}.dropdown-menu-left{left:0;right:auto}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#999}.dropdown-backdrop{position:fixed;left:0;right:0;bottom:0;top:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{border-top:0;border-bottom:4px solid;content:""}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:1px}@media (min-width:768px){.navbar-right .dropdown-menu{left:auto;right:0}.navbar-right .dropdown-menu-left{left:0;right:auto}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;float:left}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover,.btn-group>.btn:focus,.btn-group-vertical>.btn:focus,.btn-group>.btn:active,.btn-group-vertical>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn.active{z-index:2}.btn-group>.btn:focus,.btn-group-vertical>.btn:focus{outline:0}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child>.btn:last-child,.btn-group>.btn-group:first-child>.dropdown-toggle{border-bottom-right-radius:0;border-top-right-radius:0}.btn-group>.btn-group:last-child>.btn:first-child{border-bottom-left-radius:0;border-top-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-left:8px;padding-right:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-left:12px;padding-right:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-bottom-left-radius:4px;border-top-right-radius:0;border-top-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-right-radius:0;border-top-left-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{float:none;display:table-cell;width:1%}.btn-group-justified>.btn-group .btn{width:100%}[data-toggle=buttons]>.btn>input[type=radio],[data-toggle=buttons]>.btn>input[type=checkbox]{display:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*=col-]{float:none;padding-left:0;padding-right:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn,select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn,select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn{height:auto}.input-group-addon,.input-group-btn,.input-group .form-control{display:table-cell}.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:4px}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type=radio],.input-group-addon input[type=checkbox]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:last-child>.btn-group:not(:last-child)>.btn{border-bottom-right-radius:0;border-top-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:first-child>.btn-group:not(:first-child)>.btn{border-bottom-left-radius:0;border-top-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:hover,.input-group-btn>.btn:focus,.input-group-btn>.btn:active{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{margin-left:-1px}.nav{margin-bottom:0;padding-left:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#999}.nav>li.disabled>a:hover,.nav>li.disabled>a:focus{color:#999;text-decoration:none;background-color:transparent;cursor:not-allowed}.nav .open>a,.nav .open>a:hover,.nav .open>a:focus{background-color:#eee;border-color:#428bca}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:#555;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{text-align:center;margin-bottom:5px}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{color:#fff;background-color:#428bca}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{text-align:center;margin-bottom:5px}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:hover,.nav-tabs-justified>.active>a:focus{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:hover,.nav-tabs-justified>.active>a:focus{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-right-radius:0;border-top-left-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{max-height:340px;overflow-x:visible;padding-right:15px;padding-left:15px;border-top:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);-webkit-overflow-scrolling:touch}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{padding-left:0;padding-right:0}}.container>.navbar-header,.container-fluid>.navbar-header,.container>.navbar-collapse,.container-fluid>.navbar-collapse{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container>.navbar-header,.container-fluid>.navbar-header,.container>.navbar-collapse,.container-fluid>.navbar-collapse{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-fixed-top,.navbar-fixed-bottom{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar-fixed-top,.navbar-fixed-bottom{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.navbar-brand{float:left;padding:15px;font-size:18px;line-height:20px;height:50px}.navbar-brand:hover,.navbar-brand:focus{text-decoration:none}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;margin-right:15px;padding:9px 10px;margin-top:8px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;box-shadow:none}.navbar-nav .open .dropdown-menu>li>a,.navbar-nav .open .dropdown-menu .dropdown-header{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:hover,.navbar-nav .open .dropdown-menu>li>a:focus{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}.navbar-nav.navbar-right:last-child{margin-right:-15px}}@media (min-width:768px){.navbar-left{float:left!important}.navbar-right{float:right!important}}.navbar-form{margin-left:-15px;margin-right:-15px;padding:10px 15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);margin-top:8px;margin-bottom:8px}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .radio,.navbar-form .checkbox{display:inline-block;margin-top:0;margin-bottom:0;padding-left:0;vertical-align:middle}.navbar-form .radio input[type=radio],.navbar-form .checkbox input[type=checkbox]{float:none;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}}@media (min-width:768px){.navbar-form{width:auto;border:0;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;-webkit-box-shadow:none;box-shadow:none}.navbar-form.navbar-right:last-child{margin-right:-15px}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:8px;margin-bottom:8px}.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}.navbar-text{margin-top:15px;margin-bottom:15px}@media (min-width:768px){.navbar-text{float:left;margin-left:15px;margin-right:15px}.navbar-text.navbar-right:last-child{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:hover,.navbar-default .navbar-nav>.disabled>a:focus{color:#ccc;background-color:transparent}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus{background-color:#e7e7e7;color:#555}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus{color:#ccc;background-color:transparent}}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#999}.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#999}.navbar-inverse .navbar-nav>li>a{color:#999}.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:hover,.navbar-inverse .navbar-nav>.disabled>a:focus{color:#444;background-color:transparent}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a:focus{background-color:#080808;color:#fff}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#999}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus{color:#444;background-color:transparent}}.navbar-inverse .navbar-link{color:#999}.navbar-inverse .navbar-link:hover{color:#fff}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{content:"/\00a0";padding:0 5px;color:#ccc}.breadcrumb>.active{color:#999}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;line-height:1.42857143;text-decoration:none;color:#428bca;background-color:#fff;border:1px solid #ddd;margin-left:-1px}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-bottom-left-radius:4px;border-top-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-bottom-right-radius:4px;border-top-right-radius:4px}.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{color:#2a6496;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus{z-index:2;color:#fff;background-color:#428bca;border-color:#428bca;cursor:default}.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#999;background-color:#fff;border-color:#ddd;cursor:not-allowed}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-bottom-left-radius:6px;border-top-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-bottom-right-radius:6px;border-top-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-bottom-left-radius:3px;border-top-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-bottom-right-radius:3px;border-top-right-radius:3px}.pager{padding-left:0;margin:20px 0;list-style:none;text-align:center}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:hover,.pager li>a:focus{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{color:#999;background-color:#fff;cursor:not-allowed}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}.label[href]:hover,.label[href]:focus{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#999}.label-default[href]:hover,.label-default[href]:focus{background-color:gray}.label-primary{background-color:#428bca}.label-primary[href]:hover,.label-primary[href]:focus{background-color:#3071a9}.label-success{background-color:#5cb85c}.label-success[href]:hover,.label-success[href]:focus{background-color:#449d44}.label-info{background-color:#5bc0de}.label-info[href]:hover,.label-info[href]:focus{background-color:#31b0d5}.label-warning{background-color:#f0ad4e}.label-warning[href]:hover,.label-warning[href]:focus{background-color:#ec971f}.label-danger{background-color:#d9534f}.label-danger[href]:hover,.label-danger[href]:focus{background-color:#c9302c}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:700;color:#fff;line-height:1;vertical-align:baseline;white-space:nowrap;text-align:center;background-color:#999;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-xs .badge{top:0;padding:1px 5px}a.badge:hover,a.badge:focus{color:#fff;text-decoration:none;cursor:pointer}a.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#428bca;background-color:#fff}.nav-pills>li>a>.badge{margin-left:3px}.jumbotron{padding:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1,.jumbotron .h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.container .jumbotron{border-radius:6px}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron{padding-left:60px;padding-right:60px}.jumbotron h1,.jumbotron .h1{font-size:63px}}.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.thumbnail>img,.thumbnail a>img{margin-left:auto;margin-right:auto}a.thumbnail:hover,a.thumbnail:focus,a.thumbnail.active{border-color:#428bca}.thumbnail .caption{padding:9px;color:#333}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable{padding-right:35px}.alert-dismissable .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{background-color:#dff0d8;border-color:#d6e9c6;color:#3c763d}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{background-color:#d9edf7;border-color:#bce8f1;color:#31708f}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{background-color:#fcf8e3;border-color:#faebcc;color:#8a6d3b}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{background-color:#f2dede;border-color:#ebccd1;color:#a94442}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{overflow:hidden;height:20px;margin-bottom:20px;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#428bca;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:40px 40px}.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.media,.media-body{overflow:hidden;zoom:1}.media,.media .media{margin-top:15px}.media:first-child{margin-top:0}.media-object{display:block}.media-heading{margin:0 0 5px}.media>.pull-left{margin-right:10px}.media>.pull-right{margin-left:10px}.media-list{padding-left:0;list-style:none}.list-group{margin-bottom:20px;padding-left:0}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}a.list-group-item{color:#555}a.list-group-item .list-group-item-heading{color:#333}a.list-group-item:hover,a.list-group-item:focus{text-decoration:none;background-color:#f5f5f5}a.list-group-item.active,a.list-group-item.active:hover,a.list-group-item.active:focus{z-index:2;color:#fff;background-color:#428bca;border-color:#428bca}a.list-group-item.active .list-group-item-heading,a.list-group-item.active:hover .list-group-item-heading,a.list-group-item.active:focus .list-group-item-heading{color:inherit}a.list-group-item.active .list-group-item-text,a.list-group-item.active:hover .list-group-item-text,a.list-group-item.active:focus .list-group-item-text{color:#e1edf7}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:hover,a.list-group-item-success:focus{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,a.list-group-item-success.active:hover,a.list-group-item-success.active:focus{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#31708f;background-color:#d9edf7}a.list-group-item-info{color:#31708f}a.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:hover,a.list-group-item-info:focus{color:#31708f;background-color:#c4e3f3}a.list-group-item-info.active,a.list-group-item-info.active:hover,a.list-group-item-info.active:focus{color:#fff;background-color:#31708f;border-color:#31708f}.list-group-item-warning{color:#8a6d3b;background-color:#fcf8e3}a.list-group-item-warning{color:#8a6d3b}a.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:hover,a.list-group-item-warning:focus{color:#8a6d3b;background-color:#faf2cc}a.list-group-item-warning.active,a.list-group-item-warning.active:hover,a.list-group-item-warning.active:focus{color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:hover,a.list-group-item-danger:focus{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,a.list-group-item-danger.active:hover,a.list-group-item-danger.active:focus{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-right-radius:3px;border-top-left-radius:3px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.list-group{margin-bottom:0}.panel>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-right-radius:3px;border-top-left-radius:3px}.panel>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.panel>.table,.panel>.table-responsive>.table{margin-bottom:0}.panel>.table:first-child,.panel>.table-responsive:first-child>.table:first-child{border-top-right-radius:3px;border-top-left-radius:3px}.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child{border-top-left-radius:3px}.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child{border-top-right-radius:3px}.panel>.table:last-child,.panel>.table-responsive:last-child>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px}.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child th,.panel>.table>tbody:first-child>tr:first-child td{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child{border-left:0}.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child{border-right:0}.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{border:0;margin-bottom:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:4px;overflow:hidden}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse .panel-body{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#ddd}.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}.panel-default>.panel-heading+.panel-collapse .panel-body{border-top-color:#ddd}.panel-default>.panel-footer+.panel-collapse .panel-body{border-bottom-color:#ddd}.panel-primary{border-color:#428bca}.panel-primary>.panel-heading{color:#fff;background-color:#428bca;border-color:#428bca}.panel-primary>.panel-heading+.panel-collapse .panel-body{border-top-color:#428bca}.panel-primary>.panel-footer+.panel-collapse .panel-body{border-bottom-color:#428bca}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse .panel-body{border-top-color:#d6e9c6}.panel-success>.panel-footer+.panel-collapse .panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#bce8f1}.panel-info>.panel-heading{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.panel-info>.panel-heading+.panel-collapse .panel-body{border-top-color:#bce8f1}.panel-info>.panel-footer+.panel-collapse .panel-body{border-bottom-color:#bce8f1}.panel-warning{border-color:#faebcc}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.panel-warning>.panel-heading+.panel-collapse .panel-body{border-top-color:#faebcc}.panel-warning>.panel-footer+.panel-collapse .panel-body{border-bottom-color:#faebcc}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse .panel-body{border-top-color:#ebccd1}.panel-danger>.panel-footer+.panel-collapse .panel-body{border-bottom-color:#ebccd1}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,.15)}.well-lg{padding:24px;border-radius:6px}.well-sm{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.modal-open{overflow:hidden}.modal{display:none;overflow:auto;overflow-y:scroll;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);background-clip:padding-box;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0;filter:alpha(opacity=0)}.modal-backdrop.in{opacity:.5;filter:alpha(opacity=50)}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5;min-height:16.42857143px}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:20px}.modal-footer{margin-top:15px;padding:19px 20px 20px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-left:5px;margin-bottom:0}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.tooltip{position:absolute;z-index:1030;display:block;visibility:visible;font-size:12px;line-height:1.4;opacity:0;filter:alpha(opacity=0)}.tooltip.in{opacity:.9;filter:alpha(opacity=90)}.tooltip.top{margin-top:-3px;padding:5px 0}.tooltip.right{margin-left:3px;padding:0 5px}.tooltip.bottom{margin-top:3px;padding:5px 0}.tooltip.left{margin-left:-3px;padding:0 5px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{bottom:0;left:5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;right:5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;left:5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;right:5px;border-width:0 5px 5px;border-bottom-color:#000}.popover{position:absolute;top:0;left:0;z-index:1010;display:none;max-width:276px;padding:1px;text-align:left;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);white-space:normal}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover-title{margin:0;padding:8px 14px;font-size:14px;font-weight:400;line-height:18px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow{border-width:11px}.popover>.arrow:after{border-width:10px;content:""}.popover.top>.arrow{left:50%;margin-left:-11px;border-bottom-width:0;border-top-color:#999;border-top-color:rgba(0,0,0,.25);bottom:-11px}.popover.top>.arrow:after{content:" ";bottom:1px;margin-left:-10px;border-bottom-width:0;border-top-color:#fff}.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-left-width:0;border-right-color:#999;border-right-color:rgba(0,0,0,.25)}.popover.right>.arrow:after{content:" ";left:1px;bottom:-10px;border-left-width:0;border-right-color:#fff}.popover.bottom>.arrow{left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25);top:-11px}.popover.bottom>.arrow:after{content:" ";top:1px;margin-left:-10px;border-top-width:0;border-bottom-color:#fff}.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover.left>.arrow:after{content:" ";right:1px;border-right-width:0;border-left-color:#fff;bottom:-10px}.carousel{position:relative}.carousel-inner{position:relative;overflow:hidden;width:100%}.carousel-inner>.item{display:none;position:relative;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>img,.carousel-inner>.item>a>img{line-height:1}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;left:0;bottom:0;width:15%;opacity:.5;filter:alpha(opacity=50);font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-control.left{background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.5) 0),color-stop(rgba(0,0,0,.0001) 100%));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)}.carousel-control.right{left:auto;right:0;background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.0001) 0),color-stop(rgba(0,0,0,.5) 100%));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)}.carousel-control:hover,.carousel-control:focus{outline:0;color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .icon-prev,.carousel-control .icon-next,.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .icon-prev,.carousel-control .glyphicon-chevron-left{left:50%}.carousel-control .icon-next,.carousel-control .glyphicon-chevron-right{right:50%}.carousel-control .icon-prev,.carousel-control .icon-next{width:20px;height:20px;margin-top:-10px;margin-left:-10px;font-family:serif}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;margin-left:-30%;padding-left:0;list-style:none;text-align:center}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;border:1px solid #fff;border-radius:10px;cursor:pointer;background-color:#000 \9;background-color:rgba(0,0,0,0)}.carousel-indicators .active{margin:0;width:12px;height:12px;background-color:#fff}.carousel-caption{position:absolute;left:15%;right:15%;bottom:20px;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-prev,.carousel-control .icon-next{width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px}.carousel-caption{left:20%;right:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after,.form-horizontal .form-group:before,.form-horizontal .form-group:after,.btn-toolbar:before,.btn-toolbar:after,.btn-group-vertical>.btn-group:before,.btn-group-vertical>.btn-group:after,.nav:before,.nav:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after,.navbar-collapse:before,.navbar-collapse:after,.pager:before,.pager:after,.panel-body:before,.panel-body:after,.modal-footer:before,.modal-footer:after{content:" ";display:table}.clearfix:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical>.btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.pager:after,.panel-body:after,.modal-footer:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important;visibility:hidden!important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table}tr.visible-xs{display:table-row!important}th.visible-xs,td.visible-xs{display:table-cell!important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table}tr.visible-sm{display:table-row!important}th.visible-sm,td.visible-sm{display:table-cell!important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table}tr.visible-md{display:table-row!important}th.visible-md,td.visible-md{display:table-cell!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table}tr.visible-lg{display:table-row!important}th.visible-lg,td.visible-lg{display:table-cell!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:block!important}table.visible-print{display:table}tr.visible-print{display:table-row!important}th.visible-print,td.visible-print{display:table-cell!important}}@media print{.hidden-print{display:none!important}} 8 | 9 | /* Space out content a bit */ 10 | body, form, ul, table { 11 | margin-top: 20px; 12 | margin-bottom: 20px; 13 | } 14 | 15 | /* Phoenix flash messages */ 16 | .alert:empty { display: none; } 17 | 18 | /* Phoenix inline forms in links and buttons */ 19 | form.link, form.button { 20 | display: inline; 21 | } 22 | 23 | /* Custom page header */ 24 | .header { 25 | border-bottom: 1px solid #e5e5e5; 26 | } 27 | .logo { 28 | width: 519px; 29 | height: 71px; 30 | display: inline-block; 31 | margin-bottom: 1em; 32 | background-image: url("/images/phoenix.png"); 33 | background-size: 519px 71px; 34 | } 35 | 36 | /* Everything but the jumbotron gets side spacing for mobile first views */ 37 | .header, 38 | .marketing { 39 | padding-right: 15px; 40 | padding-left: 15px; 41 | } 42 | 43 | /* Customize container */ 44 | @media (min-width: 768px) { 45 | .container { 46 | max-width: 730px; 47 | } 48 | } 49 | .container-narrow > hr { 50 | margin: 30px 0; 51 | } 52 | 53 | /* Main marketing message */ 54 | .jumbotron { 55 | text-align: center; 56 | border-bottom: 1px solid #e5e5e5; 57 | } 58 | 59 | /* Supporting marketing content */ 60 | .marketing { 61 | margin: 35px 0; 62 | } 63 | 64 | /* Responsive: Portrait tablets and up */ 65 | @media screen and (min-width: 768px) { 66 | /* Remove the padding we set earlier */ 67 | .header, 68 | .marketing { 69 | padding-right: 0; 70 | padding-left: 0; 71 | } 72 | /* Space out the masthead */ 73 | .header { 74 | margin-bottom: 30px; 75 | } 76 | /* Remove the bottom border on the jumbotron for visual effect */ 77 | .jumbotron { 78 | border-bottom: 0; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /priv/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slashdotdash/phoenix-react-redux-example/08029900f02bc0be88f06f93992cde0dd060fefa/priv/static/favicon.ico -------------------------------------------------------------------------------- /priv/static/images/phoenix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slashdotdash/phoenix-react-redux-example/08029900f02bc0be88f06f93992cde0dd060fefa/priv/static/images/phoenix.png -------------------------------------------------------------------------------- /priv/static/js/phoenix.js: -------------------------------------------------------------------------------- 1 | (function(/*! Brunch !*/) { 2 | 'use strict'; 3 | 4 | var globals = typeof window !== 'undefined' ? window : global; 5 | if (typeof globals.require === 'function') return; 6 | 7 | var modules = {}; 8 | var cache = {}; 9 | 10 | var has = function(object, name) { 11 | return ({}).hasOwnProperty.call(object, name); 12 | }; 13 | 14 | var expand = function(root, name) { 15 | var results = [], parts, part; 16 | if (/^\.\.?(\/|$)/.test(name)) { 17 | parts = [root, name].join('/').split('/'); 18 | } else { 19 | parts = name.split('/'); 20 | } 21 | for (var i = 0, length = parts.length; i < length; i++) { 22 | part = parts[i]; 23 | if (part === '..') { 24 | results.pop(); 25 | } else if (part !== '.' && part !== '') { 26 | results.push(part); 27 | } 28 | } 29 | return results.join('/'); 30 | }; 31 | 32 | var dirname = function(path) { 33 | return path.split('/').slice(0, -1).join('/'); 34 | }; 35 | 36 | var localRequire = function(path) { 37 | return function(name) { 38 | var dir = dirname(path); 39 | var absolute = expand(dir, name); 40 | return globals.require(absolute, path); 41 | }; 42 | }; 43 | 44 | var initModule = function(name, definition) { 45 | var module = {id: name, exports: {}}; 46 | cache[name] = module; 47 | definition(module.exports, localRequire(name), module); 48 | return module.exports; 49 | }; 50 | 51 | var require = function(name, loaderPath) { 52 | var path = expand(name, '.'); 53 | if (loaderPath == null) loaderPath = '/'; 54 | 55 | if (has(cache, path)) return cache[path].exports; 56 | if (has(modules, path)) return initModule(path, modules[path]); 57 | 58 | var dirIndex = expand(path, './index'); 59 | if (has(cache, dirIndex)) return cache[dirIndex].exports; 60 | if (has(modules, dirIndex)) return initModule(dirIndex, modules[dirIndex]); 61 | 62 | throw new Error('Cannot find module "' + name + '" from '+ '"' + loaderPath + '"'); 63 | }; 64 | 65 | var define = function(bundle, fn) { 66 | if (typeof bundle === 'object') { 67 | for (var key in bundle) { 68 | if (has(bundle, key)) { 69 | modules[key] = bundle[key]; 70 | } 71 | } 72 | } else { 73 | modules[bundle] = fn; 74 | } 75 | }; 76 | 77 | var list = function() { 78 | var result = []; 79 | for (var item in modules) { 80 | if (has(modules, item)) { 81 | result.push(item); 82 | } 83 | } 84 | return result; 85 | }; 86 | 87 | globals.require = require; 88 | globals.require.define = define; 89 | globals.require.register = define; 90 | globals.require.list = list; 91 | globals.require.brunch = true; 92 | })(); 93 | require.define({'phoenix': function(exports, require, module){ "use strict"; 94 | 95 | var _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); }; 96 | 97 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; 98 | 99 | // Phoenix Channels JavaScript client 100 | // 101 | // ## Socket Connection 102 | // 103 | // A single connection is established to the server and 104 | // channels are mulitplexed over the connection. 105 | // Connect to the server using the `Socket` class: 106 | // 107 | // let socket = new Socket("/ws", {params: {userToken: "123"}}) 108 | // socket.connect() 109 | // 110 | // The `Socket` constructor takes the mount point of the socket, 111 | // the authentication params, as well as options that can be found in 112 | // the Socket docs, such as configuring the `LongPoll` transport, and 113 | // heartbeat. 114 | // 115 | // ## Channels 116 | // 117 | // Channels are isolated, concurrent processes on the server that 118 | // subscribe to topics and broker events between the client and server. 119 | // To join a channel, you must provide the topic, and channel params for 120 | // authorization. Here's an example chat room example where `"new_msg"` 121 | // events are listened for, messages are pushed to the server, and 122 | // the channel is joined with ok/error matches, and `after` hook: 123 | // 124 | // let channel = socket.channel("rooms:123", {token: roomToken}) 125 | // channel.on("new_msg", msg => console.log("Got message", msg) ) 126 | // $input.onEnter( e => { 127 | // channel.push("new_msg", {body: e.target.val}) 128 | // .receive("ok", (msg) => console.log("created message", msg) ) 129 | // .receive("error", (reasons) => console.log("create failed", reasons) ) 130 | // .after(10000, () => console.log("Networking issue. Still waiting...") ) 131 | // }) 132 | // channel.join() 133 | // .receive("ok", ({messages}) => console.log("catching up", messages) ) 134 | // .receive("error", ({reason}) => console.log("failed join", reason) ) 135 | // .after(10000, () => console.log("Networking issue. Still waiting...") ) 136 | // 137 | // 138 | // ## Joining 139 | // 140 | // Joining a channel with `channel.join(topic, params)`, binds the params to 141 | // `channel.params`. Subsequent rejoins will send up the modified params for 142 | // updating authorization params, or passing up last_message_id information. 143 | // Successful joins receive an "ok" status, while unsuccessful joins 144 | // receive "error". 145 | // 146 | // 147 | // ## Pushing Messages 148 | // 149 | // From the previous example, we can see that pushing messages to the server 150 | // can be done with `channel.push(eventName, payload)` and we can optionally 151 | // receive responses from the push. Additionally, we can use 152 | // `after(millsec, callback)` to abort waiting for our `receive` hooks and 153 | // take action after some period of waiting. 154 | // 155 | // 156 | // ## Socket Hooks 157 | // 158 | // Lifecycle events of the multiplexed connection can be hooked into via 159 | // `socket.onError()` and `socket.onClose()` events, ie: 160 | // 161 | // socket.onError( () => console.log("there was an error with the connection!") ) 162 | // socket.onClose( () => console.log("the connection dropped") ) 163 | // 164 | // 165 | // ## Channel Hooks 166 | // 167 | // For each joined channel, you can bind to `onError` and `onClose` events 168 | // to monitor the channel lifecycle, ie: 169 | // 170 | // channel.onError( () => console.log("there was an error!") ) 171 | // channel.onClose( () => console.log("the channel has gone away gracefully") ) 172 | // 173 | // ### onError hooks 174 | // 175 | // `onError` hooks are invoked if the socket connection drops, or the channel 176 | // crashes on the server. In either case, a channel rejoin is attemtped 177 | // automatically in an exponential backoff manner. 178 | // 179 | // ### onClose hooks 180 | // 181 | // `onClose` hooks are invoked only in two cases. 1) the channel explicitly 182 | // closed on the server, or 2). The client explicitly closed, by calling 183 | // `channel.leave()` 184 | // 185 | 186 | var VSN = "1.0.0"; 187 | var SOCKET_STATES = { connecting: 0, open: 1, closing: 2, closed: 3 }; 188 | var CHANNEL_STATES = { 189 | closed: "closed", 190 | errored: "errored", 191 | joined: "joined", 192 | joining: "joining" }; 193 | var CHANNEL_EVENTS = { 194 | close: "phx_close", 195 | error: "phx_error", 196 | join: "phx_join", 197 | reply: "phx_reply", 198 | leave: "phx_leave" 199 | }; 200 | var TRANSPORTS = { 201 | longpoll: "longpoll", 202 | websocket: "websocket" 203 | }; 204 | 205 | var Push = (function () { 206 | 207 | // Initializes the Push 208 | // 209 | // channel - The Channel 210 | // event - The event, for example `"phx_join"` 211 | // payload - The payload, for example `{user_id: 123}` 212 | // 213 | 214 | function Push(channel, event, payload) { 215 | _classCallCheck(this, Push); 216 | 217 | this.channel = channel; 218 | this.event = event; 219 | this.payload = payload || {}; 220 | this.receivedResp = null; 221 | this.afterHook = null; 222 | this.recHooks = []; 223 | this.sent = false; 224 | } 225 | 226 | _prototypeProperties(Push, null, { 227 | send: { 228 | value: function send() { 229 | var _this = this; 230 | 231 | var ref = this.channel.socket.makeRef(); 232 | this.refEvent = this.channel.replyEventName(ref); 233 | this.receivedResp = null; 234 | this.sent = false; 235 | 236 | this.channel.on(this.refEvent, function (payload) { 237 | _this.receivedResp = payload; 238 | _this.matchReceive(payload); 239 | _this.cancelRefEvent(); 240 | _this.cancelAfter(); 241 | }); 242 | 243 | this.startAfter(); 244 | this.sent = true; 245 | this.channel.socket.push({ 246 | topic: this.channel.topic, 247 | event: this.event, 248 | payload: this.payload, 249 | ref: ref 250 | }); 251 | }, 252 | writable: true, 253 | configurable: true 254 | }, 255 | receive: { 256 | value: function receive(status, callback) { 257 | if (this.receivedResp && this.receivedResp.status === status) { 258 | callback(this.receivedResp.response); 259 | } 260 | 261 | this.recHooks.push({ status: status, callback: callback }); 262 | return this; 263 | }, 264 | writable: true, 265 | configurable: true 266 | }, 267 | after: { 268 | value: function after(ms, callback) { 269 | if (this.afterHook) { 270 | throw "only a single after hook can be applied to a push"; 271 | } 272 | var timer = null; 273 | if (this.sent) { 274 | timer = setTimeout(callback, ms); 275 | } 276 | this.afterHook = { ms: ms, callback: callback, timer: timer }; 277 | return this; 278 | }, 279 | writable: true, 280 | configurable: true 281 | }, 282 | matchReceive: { 283 | 284 | // private 285 | 286 | value: function matchReceive(_ref) { 287 | var status = _ref.status; 288 | var response = _ref.response; 289 | var ref = _ref.ref; 290 | 291 | this.recHooks.filter(function (h) { 292 | return h.status === status; 293 | }).forEach(function (h) { 294 | return h.callback(response); 295 | }); 296 | }, 297 | writable: true, 298 | configurable: true 299 | }, 300 | cancelRefEvent: { 301 | value: function cancelRefEvent() { 302 | this.channel.off(this.refEvent); 303 | }, 304 | writable: true, 305 | configurable: true 306 | }, 307 | cancelAfter: { 308 | value: function cancelAfter() { 309 | if (!this.afterHook) { 310 | return; 311 | } 312 | clearTimeout(this.afterHook.timer); 313 | this.afterHook.timer = null; 314 | }, 315 | writable: true, 316 | configurable: true 317 | }, 318 | startAfter: { 319 | value: function startAfter() { 320 | var _this = this; 321 | 322 | if (!this.afterHook) { 323 | return; 324 | } 325 | var callback = function () { 326 | _this.cancelRefEvent(); 327 | _this.afterHook.callback(); 328 | }; 329 | this.afterHook.timer = setTimeout(callback, this.afterHook.ms); 330 | }, 331 | writable: true, 332 | configurable: true 333 | } 334 | }); 335 | 336 | return Push; 337 | })(); 338 | 339 | var Channel = exports.Channel = (function () { 340 | function Channel(topic, params, socket) { 341 | var _this = this; 342 | 343 | _classCallCheck(this, Channel); 344 | 345 | this.state = CHANNEL_STATES.closed; 346 | this.topic = topic; 347 | this.params = params || {}; 348 | this.socket = socket; 349 | this.bindings = []; 350 | this.joinedOnce = false; 351 | this.joinPush = new Push(this, CHANNEL_EVENTS.join, this.params); 352 | this.pushBuffer = []; 353 | this.rejoinTimer = new Timer(function () { 354 | return _this.rejoinUntilConnected(); 355 | }, this.socket.reconnectAfterMs); 356 | this.joinPush.receive("ok", function () { 357 | _this.state = CHANNEL_STATES.joined; 358 | _this.rejoinTimer.reset(); 359 | }); 360 | this.onClose(function () { 361 | _this.socket.log("channel", "close " + _this.topic); 362 | _this.state = CHANNEL_STATES.closed; 363 | _this.socket.remove(_this); 364 | }); 365 | this.onError(function (reason) { 366 | _this.socket.log("channel", "error " + _this.topic, reason); 367 | _this.state = CHANNEL_STATES.errored; 368 | _this.rejoinTimer.setTimeout(); 369 | }); 370 | this.on(CHANNEL_EVENTS.reply, function (payload, ref) { 371 | _this.trigger(_this.replyEventName(ref), payload); 372 | }); 373 | } 374 | 375 | _prototypeProperties(Channel, null, { 376 | rejoinUntilConnected: { 377 | value: function rejoinUntilConnected() { 378 | this.rejoinTimer.setTimeout(); 379 | if (this.socket.isConnected()) { 380 | this.rejoin(); 381 | } 382 | }, 383 | writable: true, 384 | configurable: true 385 | }, 386 | join: { 387 | value: function join() { 388 | if (this.joinedOnce) { 389 | throw "tried to join multiple times. 'join' can only be called a single time per channel instance"; 390 | } else { 391 | this.joinedOnce = true; 392 | } 393 | this.sendJoin(); 394 | return this.joinPush; 395 | }, 396 | writable: true, 397 | configurable: true 398 | }, 399 | onClose: { 400 | value: function onClose(callback) { 401 | this.on(CHANNEL_EVENTS.close, callback); 402 | }, 403 | writable: true, 404 | configurable: true 405 | }, 406 | onError: { 407 | value: function onError(callback) { 408 | this.on(CHANNEL_EVENTS.error, function (reason) { 409 | return callback(reason); 410 | }); 411 | }, 412 | writable: true, 413 | configurable: true 414 | }, 415 | on: { 416 | value: function on(event, callback) { 417 | this.bindings.push({ event: event, callback: callback }); 418 | }, 419 | writable: true, 420 | configurable: true 421 | }, 422 | off: { 423 | value: function off(event) { 424 | this.bindings = this.bindings.filter(function (bind) { 425 | return bind.event !== event; 426 | }); 427 | }, 428 | writable: true, 429 | configurable: true 430 | }, 431 | canPush: { 432 | value: function canPush() { 433 | return this.socket.isConnected() && this.state === CHANNEL_STATES.joined; 434 | }, 435 | writable: true, 436 | configurable: true 437 | }, 438 | push: { 439 | value: function push(event, payload) { 440 | if (!this.joinedOnce) { 441 | throw "tried to push '" + event + "' to '" + this.topic + "' before joining. Use channel.join() before pushing events"; 442 | } 443 | var pushEvent = new Push(this, event, payload); 444 | if (this.canPush()) { 445 | pushEvent.send(); 446 | } else { 447 | this.pushBuffer.push(pushEvent); 448 | } 449 | 450 | return pushEvent; 451 | }, 452 | writable: true, 453 | configurable: true 454 | }, 455 | leave: { 456 | 457 | // Leaves the channel 458 | // 459 | // Unsubscribes from server events, and 460 | // instructs channel to terminate on server 461 | // 462 | // Triggers onClose() hooks 463 | // 464 | // To receive leave acknowledgements, use the a `receive` 465 | // hook to bind to the server ack, ie: 466 | // 467 | // channel.leave().receive("ok", () => alert("left!") ) 468 | // 469 | 470 | value: function leave() { 471 | var _this = this; 472 | 473 | return this.push(CHANNEL_EVENTS.leave).receive("ok", function () { 474 | _this.socket.log("channel", "leave " + _this.topic); 475 | _this.trigger(CHANNEL_EVENTS.close, "leave"); 476 | }); 477 | }, 478 | writable: true, 479 | configurable: true 480 | }, 481 | onMessage: { 482 | 483 | // Overridable message hook 484 | // 485 | // Receives all events for specialized message handling 486 | 487 | value: function onMessage(event, payload, ref) {}, 488 | writable: true, 489 | configurable: true 490 | }, 491 | isMember: { 492 | 493 | // private 494 | 495 | value: function isMember(topic) { 496 | return this.topic === topic; 497 | }, 498 | writable: true, 499 | configurable: true 500 | }, 501 | sendJoin: { 502 | value: function sendJoin() { 503 | this.state = CHANNEL_STATES.joining; 504 | this.joinPush.send(); 505 | }, 506 | writable: true, 507 | configurable: true 508 | }, 509 | rejoin: { 510 | value: function rejoin() { 511 | this.sendJoin(); 512 | this.pushBuffer.forEach(function (pushEvent) { 513 | return pushEvent.send(); 514 | }); 515 | this.pushBuffer = []; 516 | }, 517 | writable: true, 518 | configurable: true 519 | }, 520 | trigger: { 521 | value: function trigger(triggerEvent, payload, ref) { 522 | this.onMessage(triggerEvent, payload, ref); 523 | this.bindings.filter(function (bind) { 524 | return bind.event === triggerEvent; 525 | }).map(function (bind) { 526 | return bind.callback(payload, ref); 527 | }); 528 | }, 529 | writable: true, 530 | configurable: true 531 | }, 532 | replyEventName: { 533 | value: function replyEventName(ref) { 534 | return "chan_reply_" + ref; 535 | }, 536 | writable: true, 537 | configurable: true 538 | } 539 | }); 540 | 541 | return Channel; 542 | })(); 543 | 544 | var Socket = exports.Socket = (function () { 545 | 546 | // Initializes the Socket 547 | // 548 | // endPoint - The string WebSocket endpoint, ie, "ws://example.com/ws", 549 | // "wss://example.com" 550 | // "/ws" (inherited host & protocol) 551 | // opts - Optional configuration 552 | // transport - The Websocket Transport, for example WebSocket or Phoenix.LongPoll. 553 | // Defaults to WebSocket with automatic LongPoll fallback. 554 | // heartbeatIntervalMs - The millisec interval to send a heartbeat message 555 | // reconnectAfterMs - The optional function that returns the millsec 556 | // reconnect interval. Defaults to stepped backoff of: 557 | // 558 | // function(tries){ 559 | // return [1000, 5000, 10000][tries - 1] || 10000 560 | // } 561 | // 562 | // logger - The optional function for specialized logging, ie: 563 | // `logger: (kind, msg, data) => { console.log(`${kind}: ${msg}`, data) } 564 | // 565 | // longpollerTimeout - The maximum timeout of a long poll AJAX request. 566 | // Defaults to 20s (double the server long poll timer). 567 | // 568 | // params - The optional params to pass when connecting 569 | // 570 | // For IE8 support use an ES5-shim (https://github.com/es-shims/es5-shim) 571 | // 572 | 573 | function Socket(endPoint) { 574 | var _this = this; 575 | 576 | var opts = arguments[1] === undefined ? {} : arguments[1]; 577 | 578 | _classCallCheck(this, Socket); 579 | 580 | this.stateChangeCallbacks = { open: [], close: [], error: [], message: [] }; 581 | this.channels = []; 582 | this.sendBuffer = []; 583 | this.ref = 0; 584 | this.transport = opts.transport || window.WebSocket || LongPoll; 585 | this.heartbeatIntervalMs = opts.heartbeatIntervalMs || 30000; 586 | this.reconnectAfterMs = opts.reconnectAfterMs || function (tries) { 587 | return [1000, 5000, 10000][tries - 1] || 10000; 588 | }; 589 | this.logger = opts.logger || function () {}; // noop 590 | this.longpollerTimeout = opts.longpollerTimeout || 20000; 591 | this.params = opts.params || {}; 592 | this.endPoint = "" + endPoint + "/" + TRANSPORTS.websocket; 593 | this.reconnectTimer = new Timer(function () { 594 | _this.disconnect(function () { 595 | return _this.connect(); 596 | }); 597 | }, this.reconnectAfterMs); 598 | } 599 | 600 | _prototypeProperties(Socket, null, { 601 | protocol: { 602 | value: function protocol() { 603 | return location.protocol.match(/^https/) ? "wss" : "ws"; 604 | }, 605 | writable: true, 606 | configurable: true 607 | }, 608 | endPointURL: { 609 | value: function endPointURL() { 610 | var uri = Ajax.appendParams(Ajax.appendParams(this.endPoint, this.params), { vsn: VSN }); 611 | if (uri.charAt(0) !== "/") { 612 | return uri; 613 | } 614 | if (uri.charAt(1) === "/") { 615 | return "" + this.protocol() + ":" + uri; 616 | } 617 | 618 | return "" + this.protocol() + "://" + location.host + "" + uri; 619 | }, 620 | writable: true, 621 | configurable: true 622 | }, 623 | disconnect: { 624 | value: function disconnect(callback, code, reason) { 625 | if (this.conn) { 626 | this.conn.onclose = function () {}; // noop 627 | if (code) { 628 | this.conn.close(code, reason || ""); 629 | } else { 630 | this.conn.close(); 631 | } 632 | this.conn = null; 633 | } 634 | callback && callback(); 635 | }, 636 | writable: true, 637 | configurable: true 638 | }, 639 | connect: { 640 | 641 | // params - The params to send when connecting, for example `{user_id: userToken}` 642 | 643 | value: function connect(params) { 644 | var _this = this; 645 | 646 | if (params) { 647 | console && console.log("passing params to connect is deprecated. Instead pass :params to the Socket constructor"); 648 | this.params = params; 649 | } 650 | if (this.conn) { 651 | return; 652 | } 653 | 654 | this.conn = new this.transport(this.endPointURL()); 655 | this.conn.timeout = this.longpollerTimeout; 656 | this.conn.onopen = function () { 657 | return _this.onConnOpen(); 658 | }; 659 | this.conn.onerror = function (error) { 660 | return _this.onConnError(error); 661 | }; 662 | this.conn.onmessage = function (event) { 663 | return _this.onConnMessage(event); 664 | }; 665 | this.conn.onclose = function (event) { 666 | return _this.onConnClose(event); 667 | }; 668 | }, 669 | writable: true, 670 | configurable: true 671 | }, 672 | log: { 673 | 674 | // Logs the message. Override `this.logger` for specialized logging. noops by default 675 | 676 | value: function log(kind, msg, data) { 677 | this.logger(kind, msg, data); 678 | }, 679 | writable: true, 680 | configurable: true 681 | }, 682 | onOpen: { 683 | 684 | // Registers callbacks for connection state change events 685 | // 686 | // Examples 687 | // 688 | // socket.onError(function(error){ alert("An error occurred") }) 689 | // 690 | 691 | value: function onOpen(callback) { 692 | this.stateChangeCallbacks.open.push(callback); 693 | }, 694 | writable: true, 695 | configurable: true 696 | }, 697 | onClose: { 698 | value: function onClose(callback) { 699 | this.stateChangeCallbacks.close.push(callback); 700 | }, 701 | writable: true, 702 | configurable: true 703 | }, 704 | onError: { 705 | value: function onError(callback) { 706 | this.stateChangeCallbacks.error.push(callback); 707 | }, 708 | writable: true, 709 | configurable: true 710 | }, 711 | onMessage: { 712 | value: function onMessage(callback) { 713 | this.stateChangeCallbacks.message.push(callback); 714 | }, 715 | writable: true, 716 | configurable: true 717 | }, 718 | onConnOpen: { 719 | value: function onConnOpen() { 720 | var _this = this; 721 | 722 | this.log("transport", "connected to " + this.endPointURL(), this.transport.prototype); 723 | this.flushSendBuffer(); 724 | this.reconnectTimer.reset(); 725 | if (!this.conn.skipHeartbeat) { 726 | clearInterval(this.heartbeatTimer); 727 | this.heartbeatTimer = setInterval(function () { 728 | return _this.sendHeartbeat(); 729 | }, this.heartbeatIntervalMs); 730 | } 731 | this.stateChangeCallbacks.open.forEach(function (callback) { 732 | return callback(); 733 | }); 734 | }, 735 | writable: true, 736 | configurable: true 737 | }, 738 | onConnClose: { 739 | value: function onConnClose(event) { 740 | this.log("transport", "close", event); 741 | this.triggerChanError(); 742 | clearInterval(this.heartbeatTimer); 743 | this.reconnectTimer.setTimeout(); 744 | this.stateChangeCallbacks.close.forEach(function (callback) { 745 | return callback(event); 746 | }); 747 | }, 748 | writable: true, 749 | configurable: true 750 | }, 751 | onConnError: { 752 | value: function onConnError(error) { 753 | this.log("transport", error); 754 | this.triggerChanError(); 755 | this.stateChangeCallbacks.error.forEach(function (callback) { 756 | return callback(error); 757 | }); 758 | }, 759 | writable: true, 760 | configurable: true 761 | }, 762 | triggerChanError: { 763 | value: function triggerChanError() { 764 | this.channels.forEach(function (channel) { 765 | return channel.trigger(CHANNEL_EVENTS.error); 766 | }); 767 | }, 768 | writable: true, 769 | configurable: true 770 | }, 771 | connectionState: { 772 | value: function connectionState() { 773 | switch (this.conn && this.conn.readyState) { 774 | case SOCKET_STATES.connecting: 775 | return "connecting"; 776 | case SOCKET_STATES.open: 777 | return "open"; 778 | case SOCKET_STATES.closing: 779 | return "closing"; 780 | default: 781 | return "closed"; 782 | } 783 | }, 784 | writable: true, 785 | configurable: true 786 | }, 787 | isConnected: { 788 | value: function isConnected() { 789 | return this.connectionState() === "open"; 790 | }, 791 | writable: true, 792 | configurable: true 793 | }, 794 | remove: { 795 | value: function remove(channel) { 796 | this.channels = this.channels.filter(function (c) { 797 | return !c.isMember(channel.topic); 798 | }); 799 | }, 800 | writable: true, 801 | configurable: true 802 | }, 803 | channel: { 804 | value: function channel(topic) { 805 | var chanParams = arguments[1] === undefined ? {} : arguments[1]; 806 | 807 | var channel = new Channel(topic, chanParams, this); 808 | this.channels.push(channel); 809 | return channel; 810 | }, 811 | writable: true, 812 | configurable: true 813 | }, 814 | push: { 815 | value: function push(data) { 816 | var _this = this; 817 | 818 | var topic = data.topic; 819 | var event = data.event; 820 | var payload = data.payload; 821 | var ref = data.ref; 822 | 823 | var callback = function () { 824 | return _this.conn.send(JSON.stringify(data)); 825 | }; 826 | this.log("push", "" + topic + " " + event + " (" + ref + ")", payload); 827 | if (this.isConnected()) { 828 | callback(); 829 | } else { 830 | this.sendBuffer.push(callback); 831 | } 832 | }, 833 | writable: true, 834 | configurable: true 835 | }, 836 | makeRef: { 837 | 838 | // Return the next message ref, accounting for overflows 839 | 840 | value: function makeRef() { 841 | var newRef = this.ref + 1; 842 | if (newRef === this.ref) { 843 | this.ref = 0; 844 | } else { 845 | this.ref = newRef; 846 | } 847 | 848 | return this.ref.toString(); 849 | }, 850 | writable: true, 851 | configurable: true 852 | }, 853 | sendHeartbeat: { 854 | value: function sendHeartbeat() { 855 | this.push({ topic: "phoenix", event: "heartbeat", payload: {}, ref: this.makeRef() }); 856 | }, 857 | writable: true, 858 | configurable: true 859 | }, 860 | flushSendBuffer: { 861 | value: function flushSendBuffer() { 862 | if (this.isConnected() && this.sendBuffer.length > 0) { 863 | this.sendBuffer.forEach(function (callback) { 864 | return callback(); 865 | }); 866 | this.sendBuffer = []; 867 | } 868 | }, 869 | writable: true, 870 | configurable: true 871 | }, 872 | onConnMessage: { 873 | value: function onConnMessage(rawMessage) { 874 | var msg = JSON.parse(rawMessage.data); 875 | var topic = msg.topic; 876 | var event = msg.event; 877 | var payload = msg.payload; 878 | var ref = msg.ref; 879 | 880 | this.log("receive", "" + (payload.status || "") + " " + topic + " " + event + " " + (ref && "(" + ref + ")" || ""), payload); 881 | this.channels.filter(function (channel) { 882 | return channel.isMember(topic); 883 | }).forEach(function (channel) { 884 | return channel.trigger(event, payload, ref); 885 | }); 886 | this.stateChangeCallbacks.message.forEach(function (callback) { 887 | return callback(msg); 888 | }); 889 | }, 890 | writable: true, 891 | configurable: true 892 | } 893 | }); 894 | 895 | return Socket; 896 | })(); 897 | 898 | var LongPoll = exports.LongPoll = (function () { 899 | function LongPoll(endPoint) { 900 | _classCallCheck(this, LongPoll); 901 | 902 | this.endPoint = null; 903 | this.token = null; 904 | this.skipHeartbeat = true; 905 | this.onopen = function () {}; // noop 906 | this.onerror = function () {}; // noop 907 | this.onmessage = function () {}; // noop 908 | this.onclose = function () {}; // noop 909 | this.pollEndpoint = this.normalizeEndpoint(endPoint); 910 | this.readyState = SOCKET_STATES.connecting; 911 | 912 | this.poll(); 913 | } 914 | 915 | _prototypeProperties(LongPoll, null, { 916 | normalizeEndpoint: { 917 | value: function normalizeEndpoint(endPoint) { 918 | return endPoint.replace("ws://", "http://").replace("wss://", "https://").replace(new RegExp("(.*)/" + TRANSPORTS.websocket), "$1/" + TRANSPORTS.longpoll); 919 | }, 920 | writable: true, 921 | configurable: true 922 | }, 923 | endpointURL: { 924 | value: function endpointURL() { 925 | return Ajax.appendParams(this.pollEndpoint, { token: this.token }); 926 | }, 927 | writable: true, 928 | configurable: true 929 | }, 930 | closeAndRetry: { 931 | value: function closeAndRetry() { 932 | this.close(); 933 | this.readyState = SOCKET_STATES.connecting; 934 | }, 935 | writable: true, 936 | configurable: true 937 | }, 938 | ontimeout: { 939 | value: function ontimeout() { 940 | this.onerror("timeout"); 941 | this.closeAndRetry(); 942 | }, 943 | writable: true, 944 | configurable: true 945 | }, 946 | poll: { 947 | value: function poll() { 948 | var _this = this; 949 | 950 | if (!(this.readyState === SOCKET_STATES.open || this.readyState === SOCKET_STATES.connecting)) { 951 | return; 952 | } 953 | 954 | Ajax.request("GET", this.endpointURL(), "application/json", null, this.timeout, this.ontimeout.bind(this), function (resp) { 955 | if (resp) { 956 | var status = resp.status; 957 | var token = resp.token; 958 | var messages = resp.messages; 959 | 960 | _this.token = token; 961 | } else { 962 | var status = 0; 963 | } 964 | 965 | switch (status) { 966 | case 200: 967 | messages.forEach(function (msg) { 968 | return _this.onmessage({ data: JSON.stringify(msg) }); 969 | }); 970 | _this.poll(); 971 | break; 972 | case 204: 973 | _this.poll(); 974 | break; 975 | case 410: 976 | _this.readyState = SOCKET_STATES.open; 977 | _this.onopen(); 978 | _this.poll(); 979 | break; 980 | case 0: 981 | case 500: 982 | _this.onerror(); 983 | _this.closeAndRetry(); 984 | break; 985 | default: 986 | throw "unhandled poll status " + status; 987 | } 988 | }); 989 | }, 990 | writable: true, 991 | configurable: true 992 | }, 993 | send: { 994 | value: function send(body) { 995 | var _this = this; 996 | 997 | Ajax.request("POST", this.endpointURL(), "application/json", body, this.timeout, this.onerror.bind(this, "timeout"), function (resp) { 998 | if (!resp || resp.status !== 200) { 999 | _this.onerror(status); 1000 | _this.closeAndRetry(); 1001 | } 1002 | }); 1003 | }, 1004 | writable: true, 1005 | configurable: true 1006 | }, 1007 | close: { 1008 | value: function close(code, reason) { 1009 | this.readyState = SOCKET_STATES.closed; 1010 | this.onclose(); 1011 | }, 1012 | writable: true, 1013 | configurable: true 1014 | } 1015 | }); 1016 | 1017 | return LongPoll; 1018 | })(); 1019 | 1020 | var Ajax = exports.Ajax = (function () { 1021 | function Ajax() { 1022 | _classCallCheck(this, Ajax); 1023 | } 1024 | 1025 | _prototypeProperties(Ajax, { 1026 | request: { 1027 | value: function request(method, endPoint, accept, body, timeout, ontimeout, callback) { 1028 | if (window.XDomainRequest) { 1029 | var req = new XDomainRequest(); // IE8, IE9 1030 | this.xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback); 1031 | } else { 1032 | var req = window.XMLHttpRequest ? new XMLHttpRequest() : // IE7+, Firefox, Chrome, Opera, Safari 1033 | new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 1034 | this.xhrRequest(req, method, endPoint, accept, body, timeout, ontimeout, callback); 1035 | } 1036 | }, 1037 | writable: true, 1038 | configurable: true 1039 | }, 1040 | xdomainRequest: { 1041 | value: function xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback) { 1042 | var _this = this; 1043 | 1044 | req.timeout = timeout; 1045 | req.open(method, endPoint); 1046 | req.onload = function () { 1047 | var response = _this.parseJSON(req.responseText); 1048 | callback && callback(response); 1049 | }; 1050 | if (ontimeout) { 1051 | req.ontimeout = ontimeout; 1052 | } 1053 | 1054 | // Work around bug in IE9 that requires an attached onprogress handler 1055 | req.onprogress = function () {}; 1056 | 1057 | req.send(body); 1058 | }, 1059 | writable: true, 1060 | configurable: true 1061 | }, 1062 | xhrRequest: { 1063 | value: function xhrRequest(req, method, endPoint, accept, body, timeout, ontimeout, callback) { 1064 | var _this = this; 1065 | 1066 | req.timeout = timeout; 1067 | req.open(method, endPoint, true); 1068 | req.setRequestHeader("Content-Type", accept); 1069 | req.onerror = function () { 1070 | callback && callback(null); 1071 | }; 1072 | req.onreadystatechange = function () { 1073 | if (req.readyState === _this.states.complete && callback) { 1074 | var response = _this.parseJSON(req.responseText); 1075 | callback(response); 1076 | } 1077 | }; 1078 | if (ontimeout) { 1079 | req.ontimeout = ontimeout; 1080 | } 1081 | 1082 | req.send(body); 1083 | }, 1084 | writable: true, 1085 | configurable: true 1086 | }, 1087 | parseJSON: { 1088 | value: function parseJSON(resp) { 1089 | return resp && resp !== "" ? JSON.parse(resp) : null; 1090 | }, 1091 | writable: true, 1092 | configurable: true 1093 | }, 1094 | serialize: { 1095 | value: function serialize(obj, parentKey) { 1096 | var queryStr = []; 1097 | for (var key in obj) { 1098 | if (!obj.hasOwnProperty(key)) { 1099 | continue; 1100 | } 1101 | var paramKey = parentKey ? "" + parentKey + "[" + key + "]" : key; 1102 | var paramVal = obj[key]; 1103 | if (typeof paramVal === "object") { 1104 | queryStr.push(this.serialize(paramVal, paramKey)); 1105 | } else { 1106 | queryStr.push(encodeURIComponent(paramKey) + "=" + encodeURIComponent(paramVal)); 1107 | } 1108 | } 1109 | return queryStr.join("&"); 1110 | }, 1111 | writable: true, 1112 | configurable: true 1113 | }, 1114 | appendParams: { 1115 | value: function appendParams(url, params) { 1116 | if (Object.keys(params).length === 0) { 1117 | return url; 1118 | } 1119 | 1120 | var prefix = url.match(/\?/) ? "&" : "?"; 1121 | return "" + url + "" + prefix + "" + this.serialize(params); 1122 | }, 1123 | writable: true, 1124 | configurable: true 1125 | } 1126 | }); 1127 | 1128 | return Ajax; 1129 | })(); 1130 | 1131 | Ajax.states = { complete: 4 }; 1132 | 1133 | // Creates a timer that accepts a `timerCalc` function to perform 1134 | // calculated timeout retries, such as exponential backoff. 1135 | // 1136 | // ## Examples 1137 | // 1138 | // let reconnectTimer = new Timer(() => this.connect(), function(tries){ 1139 | // return [1000, 5000, 10000][tries - 1] || 10000 1140 | // }) 1141 | // reconnectTimer.setTimeout() // fires after 1000 1142 | // reconnectTimer.setTimeout() // fires after 5000 1143 | // reconnectTimer.reset() 1144 | // reconnectTimer.setTimeout() // fires after 1000 1145 | // 1146 | 1147 | var Timer = (function () { 1148 | function Timer(callback, timerCalc) { 1149 | _classCallCheck(this, Timer); 1150 | 1151 | this.callback = callback; 1152 | this.timerCalc = timerCalc; 1153 | this.timer = null; 1154 | this.tries = 0; 1155 | } 1156 | 1157 | _prototypeProperties(Timer, null, { 1158 | reset: { 1159 | value: function reset() { 1160 | this.tries = 0; 1161 | clearTimeout(this.timer); 1162 | }, 1163 | writable: true, 1164 | configurable: true 1165 | }, 1166 | setTimeout: { 1167 | 1168 | // Cancels any previous setTimeout and schedules callback 1169 | 1170 | value: (function (_setTimeout) { 1171 | var _setTimeoutWrapper = function setTimeout() { 1172 | return _setTimeout.apply(this, arguments); 1173 | }; 1174 | 1175 | _setTimeoutWrapper.toString = function () { 1176 | return _setTimeout.toString(); 1177 | }; 1178 | 1179 | return _setTimeoutWrapper; 1180 | })(function () { 1181 | var _this = this; 1182 | 1183 | clearTimeout(this.timer); 1184 | 1185 | this.timer = setTimeout(function () { 1186 | _this.tries = _this.tries + 1; 1187 | _this.callback(); 1188 | }, this.timerCalc(this.tries + 1)); 1189 | }), 1190 | writable: true, 1191 | configurable: true 1192 | } 1193 | }); 1194 | 1195 | return Timer; 1196 | })(); 1197 | 1198 | Object.defineProperty(exports, "__esModule", { 1199 | value: true 1200 | }); 1201 | }}); 1202 | if(typeof(window) === 'object' && !window.Phoenix){ window.Phoenix = require('phoenix') }; -------------------------------------------------------------------------------- /priv/static/robots.txt: -------------------------------------------------------------------------------- 1 | # See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file 2 | # 3 | # To ban all spiders from the entire site uncomment the next two lines: 4 | # User-agent: * 5 | # Disallow: / 6 | -------------------------------------------------------------------------------- /test/controllers/page_controller_test.exs: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.PageControllerTest do 2 | use PhoenixReactReduxExample.ConnCase 3 | 4 | test "GET /" do 5 | conn = get conn(), "/" 6 | assert html_response(conn, 200) =~ "Welcome to Phoenix!" 7 | end 8 | end 9 | -------------------------------------------------------------------------------- /test/support/channel_case.ex: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.ChannelCase do 2 | @moduledoc """ 3 | This module defines the test case to be used by 4 | channel tests. 5 | 6 | Such tests rely on `Phoenix.ChannelTest` and also 7 | imports other functionality to make it easier 8 | to build and query models. 9 | 10 | Finally, if the test case interacts with the database, 11 | it cannot be async. For this reason, every test runs 12 | inside a transaction which is reset at the beginning 13 | of the test unless the test case is marked as async. 14 | """ 15 | 16 | use ExUnit.CaseTemplate 17 | 18 | using do 19 | quote do 20 | # Import conveniences for testing with channels 21 | use Phoenix.ChannelTest 22 | 23 | 24 | # The default endpoint for testing 25 | @endpoint PhoenixReactReduxExample.Endpoint 26 | end 27 | end 28 | 29 | setup tags do 30 | 31 | :ok 32 | end 33 | end 34 | -------------------------------------------------------------------------------- /test/support/conn_case.ex: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.ConnCase do 2 | @moduledoc """ 3 | This module defines the test case to be used by 4 | tests that require setting up a connection. 5 | 6 | Such tests rely on `Phoenix.ConnTest` and also 7 | imports other functionality to make it easier 8 | to build and query models. 9 | 10 | Finally, if the test case interacts with the database, 11 | it cannot be async. For this reason, every test runs 12 | inside a transaction which is reset at the beginning 13 | of the test unless the test case is marked as async. 14 | """ 15 | 16 | use ExUnit.CaseTemplate 17 | 18 | using do 19 | quote do 20 | # Import conveniences for testing with connections 21 | use Phoenix.ConnTest 22 | 23 | import PhoenixReactReduxExample.Router.Helpers 24 | 25 | # The default endpoint for testing 26 | @endpoint PhoenixReactReduxExample.Endpoint 27 | end 28 | end 29 | 30 | setup tags do 31 | 32 | :ok 33 | end 34 | end 35 | -------------------------------------------------------------------------------- /test/test_helper.exs: -------------------------------------------------------------------------------- 1 | ExUnit.start 2 | 3 | -------------------------------------------------------------------------------- /test/views/error_view_test.exs: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.ErrorViewTest do 2 | use PhoenixReactReduxExample.ConnCase, async: true 3 | 4 | # Bring render/3 and render_to_string/3 for testing custom views 5 | import Phoenix.View 6 | 7 | test "renders 404.html" do 8 | assert render_to_string(PhoenixReactReduxExample.ErrorView, "404.html", []) == 9 | "Page not found" 10 | end 11 | 12 | test "render 500.html" do 13 | assert render_to_string(PhoenixReactReduxExample.ErrorView, "500.html", []) == 14 | "Server internal error" 15 | end 16 | 17 | test "render any other" do 18 | assert render_to_string(PhoenixReactReduxExample.ErrorView, "505.html", []) == 19 | "Server internal error" 20 | end 21 | end 22 | -------------------------------------------------------------------------------- /test/views/layout_view_test.exs: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.LayoutViewTest do 2 | use PhoenixReactReduxExample.ConnCase, async: true 3 | end -------------------------------------------------------------------------------- /test/views/page_view_test.exs: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.PageViewTest do 2 | use PhoenixReactReduxExample.ConnCase, async: true 3 | end 4 | -------------------------------------------------------------------------------- /web/channels/todo_channel.ex: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.TodoChannel do 2 | use PhoenixReactReduxExample.Web, :channel 3 | 4 | alias PhoenixReactReduxExample.TodoServer 5 | 6 | def join("todos", _params, socket) do 7 | todos = TodoServer.all() 8 | 9 | {:ok, %{ todos: todos }, socket } 10 | end 11 | 12 | def handle_in("new:todo", params, socket) do 13 | todo = params["text"] 14 | 15 | TodoServer.add(todo) 16 | 17 | broadcast! socket, "new:todo", %{ 18 | text: todo 19 | } 20 | 21 | {:noreply, socket} 22 | end 23 | end -------------------------------------------------------------------------------- /web/channels/todo_socket.ex: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.TodoSocket do 2 | use Phoenix.Socket 3 | 4 | ## Channels 5 | channel "todos", PhoenixReactReduxExample.TodoChannel 6 | 7 | ## Transports 8 | transport :websocket, Phoenix.Transports.WebSocket 9 | # transport :longpoll, Phoenix.Transports.LongPoll 10 | 11 | # Socket params are passed from the client and can 12 | # be used to verify and authenticate a user. After 13 | # verification, you can put default assigns into 14 | # the socket that will be set for all channels, ie 15 | # 16 | # {:ok, assign(socket, :user_id, verified_user_id)} 17 | # 18 | # To deny connection, return `:error`. 19 | # 20 | # See `Phoenix.Token` documentation for examples in 21 | # performing token verification on connect. 22 | def connect(_params, socket) do 23 | {:ok, socket} 24 | end 25 | 26 | # Socket id's are topics that allow you to identify all sockets for a given user: 27 | # 28 | # def id(socket), do: "users_socket:#{socket.assigns.user_id}" 29 | # 30 | # Would allow you to broadcast a "disconnect" event and terminate 31 | # all active sockets and channels for a given user: 32 | # 33 | # PhoenixReactReduxExample.Endpoint.broadcast("users_socket:" <> user.id, "disconnect", %{}) 34 | # 35 | # Returning `nil` makes this socket anonymous. 36 | def id(_socket), do: nil 37 | end -------------------------------------------------------------------------------- /web/controllers/page_controller.ex: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.PageController do 2 | use PhoenixReactReduxExample.Web, :controller 3 | 4 | def index(conn, _params) do 5 | render conn, "index.html" 6 | end 7 | end 8 | -------------------------------------------------------------------------------- /web/router.ex: -------------------------------------------------------------------------------- 1 | defmodule PhoenixReactReduxExample.Router do 2 | use PhoenixReactReduxExample.Web, :router 3 | 4 | pipeline :browser do 5 | plug :accepts, ["html"] 6 | plug :fetch_session 7 | plug :fetch_flash 8 | plug :protect_from_forgery 9 | plug :put_secure_browser_headers 10 | end 11 | 12 | pipeline :api do 13 | plug :accepts, ["json"] 14 | end 15 | 16 | scope "/", PhoenixReactReduxExample do 17 | pipe_through :browser # Use the default browser stack 18 | 19 | get "/", PageController, :index 20 | end 21 | 22 | # Other scopes may use custom stacks. 23 | # scope "/api", PhoenixReactReduxExample do 24 | # pipe_through :api 25 | # end 26 | end 27 | -------------------------------------------------------------------------------- /web/static/css/app.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slashdotdash/phoenix-react-redux-example/08029900f02bc0be88f06f93992cde0dd060fefa/web/static/css/app.scss -------------------------------------------------------------------------------- /web/static/js/actions.js: -------------------------------------------------------------------------------- 1 | import { configureChannel } from './channel'; 2 | 3 | let socket = configureChannel(); 4 | let channel = socket.channel('todos'); 5 | 6 | /* 7 | * action types 8 | */ 9 | 10 | export const FETCH_TODOS_REQUEST = 'FETCH_TODOS_REQUEST'; 11 | export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS'; 12 | export const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE'; 13 | 14 | export const ADD_TODO_REQUEST = 'ADD_TODO_REQUEST'; 15 | export const ADD_TODO_SUCCESS = 'ADD_TODO_SUCCESS'; 16 | export const ADD_TODO_FAILURE = 'ADD_TODO_FAILURE'; 17 | 18 | export const COMPLETE_TODO = 'COMPLETE_TODO'; 19 | export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'; 20 | 21 | /* 22 | * other constants 23 | */ 24 | 25 | export const VisibilityFilters = { 26 | SHOW_ALL: 'SHOW_ALL', 27 | SHOW_COMPLETED: 'SHOW_COMPLETED', 28 | SHOW_ACTIVE: 'SHOW_ACTIVE' 29 | }; 30 | 31 | /* 32 | * action creators 33 | */ 34 | 35 | function fetchTodosRequest() { 36 | return { type: FETCH_TODOS_REQUEST }; 37 | } 38 | 39 | function fetchTodosSuccess(todos) { 40 | return { type: FETCH_TODOS_SUCCESS, todos }; 41 | } 42 | 43 | function fetchTodosFailure(error) { 44 | return { type: FETCH_TODOS_FAILURE, error }; 45 | } 46 | 47 | function addTodoRequest(text) { 48 | return { type: ADD_TODO_REQUEST, text }; 49 | } 50 | 51 | function addTodoSuccess(text) { 52 | return { type: ADD_TODO_SUCCESS, text }; 53 | } 54 | 55 | function addTodoFailure(text, error) { 56 | return { type: ADD_TODO_FAILURE, text, error }; 57 | } 58 | 59 | export function addTodo(text) { 60 | return dispatch => { 61 | dispatch(addTodoRequest(text)); 62 | 63 | let payload = { 64 | text: text 65 | }; 66 | 67 | channel.push('new:todo', payload) 68 | .receive('ok', response => { 69 | console.log('created TODO', response); 70 | }) 71 | .receive('error', error => { 72 | console.error(error); 73 | dispatch(addTodoFailure(text, error)); 74 | }); 75 | }; 76 | } 77 | 78 | export function fetchTodos() { 79 | return dispatch => { 80 | dispatch(fetchTodosRequest()); 81 | 82 | channel.join() 83 | .receive('ok', messages => { 84 | console.log('catching up', messages); 85 | dispatch(fetchTodosSuccess(messages.todos)); 86 | }) 87 | .receive('error', reason => { 88 | console.log('failed join', reason); 89 | dispatch(fetchTodosFailure(reason)); 90 | }) 91 | //.after(10000, () => console.log('Networking issue. Still waiting...')); 92 | 93 | channel.on('new:todo', msg => { 94 | console.log('new:todo', msg); 95 | dispatch(addTodoSuccess(msg.text)); 96 | }); 97 | }; 98 | } 99 | 100 | export function completeTodo(index) { 101 | return { type: COMPLETE_TODO, index }; 102 | } 103 | 104 | export function setVisibilityFilter(filter) { 105 | return { type: SET_VISIBILITY_FILTER, filter }; 106 | } 107 | -------------------------------------------------------------------------------- /web/static/js/channel.js: -------------------------------------------------------------------------------- 1 | import { Socket } from 'phoenix'; 2 | 3 | export function configureChannel() { 4 | let socket = new Socket('/ws', { 5 | logger: (kind, msg, data) => { console.log(`${kind}: ${msg}`, data); } 6 | }); 7 | 8 | socket.connect(); 9 | 10 | return socket; 11 | } -------------------------------------------------------------------------------- /web/static/js/components/AddTodo.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | 3 | export default class AddTodo extends Component { 4 | render() { 5 | return ( 6 |
22 | Show: 23 | {' '} 24 | {this.renderFilter('SHOW_ALL', 'All')} 25 | {', '} 26 | {this.renderFilter('SHOW_COMPLETED', 'Completed')} 27 | {', '} 28 | {this.renderFilter('SHOW_ACTIVE', 'Active')} 29 | . 30 |
31 | ) 32 | } 33 | } 34 | 35 | Footer.propTypes = { 36 | onFilterChange: PropTypes.func.isRequired, 37 | filter: PropTypes.oneOf([ 38 | 'SHOW_ALL', 39 | 'SHOW_COMPLETED', 40 | 'SHOW_ACTIVE' 41 | ]).isRequired 42 | }; -------------------------------------------------------------------------------- /web/static/js/components/Todo.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | 3 | export default class Todo extends Component { 4 | render() { 5 | return ( 6 |Loading ...
9 | ); 10 | } 11 | 12 | return ( 13 |<%= get_flash(@conn, :info) %>
17 |<%= get_flash(@conn, :error) %>
18 | 19 | <%= render @view_module, @view_template, assigns %> 20 | 21 |