diff options
Diffstat (limited to 'docs/src')
59 files changed, 9239 insertions, 0 deletions
diff --git a/docs/src/config.toml b/docs/src/config.toml new file mode 100644 index 00000000..c9cecd8b --- /dev/null +++ b/docs/src/config.toml @@ -0,0 +1,9 @@ +baseURL = "" +languageCode = "en-us" +title = "mitmproxy.org docs" +theme = "mitmproxydocs" +publishDir = "../public" +RelativeURLs = true + +[indexes] + tag = "tags" diff --git a/docs/src/content/_index.md b/docs/src/content/_index.md new file mode 100644 index 00000000..a977e2db --- /dev/null +++ b/docs/src/content/_index.md @@ -0,0 +1,32 @@ +--- +title: "Introduction" +menu: + overview: + weight: 1 +--- + +# Introduction + +**mitmproxy** is an interactive man-in-the-middle proxy for HTTP and HTTPS +with a console interface. + +**mitmdump** is the command-line version of mitmproxy. Think tcpdump for HTTP. + +**mitmweb** is a web-based interface for mitmproxy. + +Documentation, tutorials and distribution packages can be found on the +[mitmproxy website](https://mitmproxy.org). + + +## Features + +- Intercept HTTP & HTTPS requests and responses and modify them on the fly +- Save complete HTTP conversations for later replay and analysis +- Replay the client-side of an HTTP conversations +- Replay HTTP responses of a previously recorded server +- Reverse proxy mode to forward traffic to a specified server +- Transparent proxy mode on OSX and Linux +- Make scripted changes to HTTP traffic using Python +- SSL/TLS certificates for interception are generated on the fly +- And much, much more... + diff --git a/docs/src/content/addons-commands.md b/docs/src/content/addons-commands.md new file mode 100644 index 00000000..f689d763 --- /dev/null +++ b/docs/src/content/addons-commands.md @@ -0,0 +1,134 @@ +--- +title: "Commands" +menu: + addons: + weight: 4 +--- + +# Commands + +Commands allow users to actively interact with addons - querying their state, +commanding them to perform actions, and having them transform data. Like +[options]({{< relref addons-options >}}), commands are typed, and both +invocations and data returned from commands are checked at runtime. Commands are +a very powerful construct - for instance, all user interaction in mitmproxy +console are built by binding commands to keys. + + +## Simple example + +Let's begin with a simple example. + +{{< example src="examples/addons/commands-simple.py" lang="py" >}} + +To see this example in action, start mitmproxy console with the addon loaded: + +{{< highlight bash >}} +> mitmproxy -s ./examples/addons/commands-simple.py +{{< /highlight >}} + +Now, make sure the event log is showing, and then execute the command at the +prompt (started by typing ":"): + +{{< highlight none>}} +:myaddon.inc +{{< /highlight >}} + +Notice that tab completion works - our addon command has complete parity with +builtin commands. There are a few things to note about this example: + +- Commands are declared through the `command.command` decorator. Each command + has a unique name - by convention, we use period-separated names, with the + name of the addon as a prefix. +- Annotating commands with types is mandatory, including the return type (in + this case `None`). This allows mitmproxy to support addon commands throughout + its toolset - runtime invocations are type checked, addon commands are + included in the built-in help, the command editor in mitmproxy console can + perform sophisticated completion and error checking, and so forth. + + +## Working with flows + +Since command arguments are typed, we can provide special conveniences for +working with certain important data types. The most useful of these are the +`Flows` classes that represent mitmproxy traffic. + +Consider the following addon: + +{{< example src="examples/addons/commands-flows.py" lang="py" >}} + +The `myaddon.addheader` command is quite simple: it takes a sequence of flows, +and adds a header to every request. The really interesting aspect of this +example is how users specify flows. Because mitmproxy can inspect the type +signature, it can expand a text flow selector into a sequence of flows for us +transparently. This means that the user has the full flexibility of [flow +filters]({{< relref addons-options >}}) available. Let's try it out. + +Start by loading the addon into mitmproxy and sending some traffic through so we +have flows to work with: + +{{< highlight bash >}} +> mitmproxy -s ./examples/addons/commands-flows.py +{{< /highlight >}} + +We can now invoke our toy command in various ways. Let's begin by running it +just on the currently focused flow: + +{{< highlight none >}} +:myaddon.addheader @focus +{{< /highlight >}} + +We can also invoke it on all flows: + +{{< highlight none >}} +:myaddon.addheader @all +{{< /highlight >}} + +Or only flows from **google.com**: + +{{< highlight none >}} +:myaddon.addheader ~d google.com +{{< /highlight >}} + +What's more, we can trivially bind these commands to keyboard shortcuts within +mitmproxy if we plan to use them frequently. Flow selectors combined with +commands are amazingly powerful, and lets us build and expose re-usable functions +for operating on flows. + + +## Paths + +Commands can take an arbitrary number of arguments. Let's build on the previous +example to illustrate this, and also demonstrate another special type: paths. + +{{< example src="examples/addons/commands-paths.py" lang="py" >}} + +Our command calculates a histogram of the domains in the specified set of flows, +and writes it to a path which is specified as the second argument to the +command. Try invoking it like this: + +{{< highlight none >}} +:myaddon.histogram @all /tmp/xxx +{{< /highlight >}} + +Notice that mitmproxy provides tab completion both for the flow specification +and the path. + + + +## Supported Types + +The following types are supported for options. If you need to use a type not +listed here, please send us a pull request. + +- Primitive types: `str`, `int`, `bool` +- Sequences: `typing.Sequence[str]` +- Flows and flow sequences: `flow.Flow` and `typing.Sequence[flow.Flow]` +- Multiple choice strings: `types.Choice` +- Meta-types: `types.Command` and `types.Arg`. These are for constructing + commands that invoke other commands. This is most commonly useful in + keybinding - see the built-in mitmproxy console keybindings for a rich suite + of examples. +- Data types: `types.CutSpec` and `types.Data`. The cuts mechanism is in alpha + at the moment, and provides a convenient way to snip up flow data. +- Path: `types.Path` diff --git a/docs/src/content/addons-events.md b/docs/src/content/addons-events.md new file mode 100644 index 00000000..489ea342 --- /dev/null +++ b/docs/src/content/addons-events.md @@ -0,0 +1,24 @@ +--- +title: "Events" +menu: + addons: + weight: 2 +--- + +# Events + +Addons hook into mitmproxy's internal mechanisms through events. These are +implemented on addons as methods with a set of well-known names. Many events +receive `Flow` objects as arguments - by modifying these objects, addons can +change traffic on the fly. For instance, here is an addon that adds a response +header with a count of the number of responses seen: + +{{< example src="examples/addons/addheader.py" lang="py" >}} + + +## Supported Events + +Below is an addon class that implements stubs for all events. We've added +annotations to illustrate the argument types for the various events. + +{{< example src="examples/addons/events.py" lang="py" >}}
\ No newline at end of file diff --git a/docs/src/content/addons-options.md b/docs/src/content/addons-options.md new file mode 100644 index 00000000..930847d0 --- /dev/null +++ b/docs/src/content/addons-options.md @@ -0,0 +1,101 @@ +--- +title: "Options" +menu: + addons: + weight: 3 +--- + +# Options + +At the heart of mitmproxy is a global options store, containing the settings +that determine the behaviour of both mitmproxy and its addons. Options can be +read from a configuration file, set on the command-line and changed +interactively by users on the fly. + +All options are annotated with one of a set of supported types. Mitmproxy knows +how to serialise and deserialise these types, and has standard ways of +presenting typed values for editing in interactive programs. Attempting to set a +value with the wrong type will result in an error. This means that addon options +get full support throughout mitmproxy's toolchain simply by declaring a type. + + +## Simple example + +{{< example src="examples/addons/options-simple.py" lang="py" >}} + +The `load` event receives an instance of `mitmproxy.addonmanager.Loader`, which +allows addons declare options and commands. In this case, the addon adds a +single `addheader` option with type `bool`. Let's try this out by running the +script in mitmproxy console: + +{{< highlight bash >}} +> mitmproxy -s ./examples/addons/options-simple.py +{{< /highlight >}} + +You can now use CURL to make a request through the proxy like this: + +{{< highlight bash >}} +> env http_proxy=http://localhost:8080 curl -I http://google.com +{{< /highlight >}} + +If you run this request immediately, you'll notice that no count header is +added. This is because our default value for the option was `false`. Press `O` +to enter the options editor, and find the `addheader` option. You'll notice that +mitmproxy knows this is a boolean, and lets you toggle the value between true +and false. Set the value to `true`, and you should see a result something like +this: + +{{< highlight bash >}} +> env http_proxy=http://localhost:8080 curl -I http://google.com +HTTP/1.1 301 Moved Permanently +Location: http://www.google.com/ +Content-Length: 219 +count: 1 +{{< /highlight >}} + +When this addon is loaded, the `addheader` setting is available in the +persistent [YAML configuration file]({{< relref "concepts-options" >}}). You can +also over-ride the value directly from the command-line for any of the tools +using the `--set` flag: + +{{< highlight bash >}} +mitmproxy -s ./examples/addons/options-simple.py --set addheader=true +{{< /highlight >}} + + +## Handling configuration updates + +Sometimes, simply testing the value of an option from an event is not +sufficient. Instead, we want to act immediately when an option is changed by the +user. This is what the `configure` event is for - when it is triggered, it +receives a set of changed options. An addon can check if an option is in this +set, and then read the value from the options object on the context. + +One common use for this function is to check that an option is valid, and give +the user feedback if it's not. If an `exceptions.OptionsError` exception is +raised during configure, all the changes in the update are automatically rolled +back, and an error is displayed to the user. Let's see an example. + +{{< example src="examples/addons/options-configure.py" lang="py" >}} + +There are a few things to note here. First, the option we add uses +`typing.Optional`. This signals to mitmproxy that `None` is a valid value for +this option - that is, it can be unset. Second, the `configure` method is first +called with our default value (`None`), and then later with an updated value if +the option is changed. If we try to load the script with an incorrect value, we +now see an error: + +{{< highlight none >}} +> mitmdump -s ./examples/addons/options-configure.py --set addheader=1000 +Loading script: ./examples/addons/options-configure.py +/Users/cortesi/mitmproxy/mitmproxy/venv/bin/mitmdump: addheader must be <= 100 +{{< /highlight >}} + + +## Supported Types + +The following types are supported for options. + +- Primitive types - `str`, `int`, `float`, `bool`. +- Optional values, annotated using `typing.Optional`. +- Sequences of values, annotated using `typing.Sequence`. diff --git a/docs/src/content/addons-overview.md b/docs/src/content/addons-overview.md new file mode 100644 index 00000000..6aa1207e --- /dev/null +++ b/docs/src/content/addons-overview.md @@ -0,0 +1,74 @@ +--- +title: "Addons" +menu: + addons: + weight: 1 +--- + +# Addons + +Mitmproxy's addon mechanism consists of a set of APIs that support components of +any complexity. Addons interact with mitmproxy by responding to **events**, +which allow them to hook into and change mitmproxy's behaviour. They are +configured through **[options]({{< relref concepts-options >}})**, which can be +set in mitmproxy's config file, changed interactively by users, or passed on the +command-line. Finally, they can expose **commands**, which allows users to +invoke their actions either directly or by binding them to keys in the +interactive tools. + +Addons are an exceptionally powerful part of mitmproxy. In fact, much of +mitmproxy's own functionality is defined in [a suite of built-in +addons](https://github.com/mitmproxy/mitmproxy/tree/master/mitmproxy/addons), +implementing everything from functionality like [anticaching]({{< relref +"overview-features#anticache" >}}) and [sticky cookies]({{< relref +"overview-features#sticky-cookies" >}}) to our onboarding webapp. The built-in +addons make for instructive reading, and you will quickly see that quite complex +functionality can often boil down to a very small, completely self-contained +modules. Mitmproxy provides the exact same set of facilities it uses for its own +functionality to third-party scripters and extenders. + +This document will show you how to build addons using **events**, **options** +and **commands**. However, this is not an API manual, and the mitmproxy source +code remains the canonical reference. One easy way to explore the API from the +command-line is to use [pydoc](https://docs.python.org/3/library/pydoc.html). +Here, for example, is a command that shows the API documentation for the +mitmproxy's HTTP flow classes: + +{{< highlight bash >}} +pydoc mimtproxy.http +{{< /highlight >}} + +You will be referring to the mitmproxy API documentation frequently, so keep +**pydoc** or an equivalent handy. + +# Anatomy of an addon + +{{< example src="examples/addons/anatomy.py" lang="py" >}} + +Above is a simple addon that keeps track of the number of flows (or more +specifically HTTP requests) we've seen. Every time it sees a new flow, it uses +mitmproxy's internal logging mechanism to announce its tally. The output can be +found in the event log in the interactive tools, or on the console in mitmdump. + +Take it for a spin and make sure that it does what it's supposed to, by loading +it into your mitmproxy tool of choice. We'll use mitmpdump in these examples, +but the flag is identical for all tools: + +{{< highlight bash >}} +> mitmdump -s ./anatomy.py +{{< /highlight >}} + +Here are a few things to note about the code above: + +- Mitmproxy picks up the contents of the `addons` global list and loads what it + finds into the addons mechanism. +- Addons are just objects - in this case our addon is an instance of `Counter`. +- The `request` method is an example of an **event**. Addons simply implement a + method for each event they wan to handle. Each event has a signature + consisting of arguments that are passed to the method. For `request`, this is + an instance of `mitmproxy.http.HTTPFlow`. +- Finally, the `ctx` module is a holdall module that exposes a set of standard + objects that are commonly used in addons. We could pass a `ctx` object as the + first parameter to every event, but we've found it neater to just expose it as + an importable global. In this case, we're using the `ctx.log` object to do our + logging.
\ No newline at end of file diff --git a/docs/src/content/addons-scripting.md b/docs/src/content/addons-scripting.md new file mode 100644 index 00000000..e31d291a --- /dev/null +++ b/docs/src/content/addons-scripting.md @@ -0,0 +1,17 @@ +--- +title: "Scripting" +menu: + addons: + weight: 5 +--- + +# Scripting + +Sometimes, we would like to write a quick script without going through the +trouble of creating a class. The addons mechanism has a shorthand that allows a +module as a whole to be treated as an addon object. This lets us place event +handler functions in the module scope. For instance, here is a complete script +that adds a header to every request. + + +{{< example src="examples/addons/scripting.py" lang="py" >}}
\ No newline at end of file diff --git a/docs/src/content/concepts-certificates.md b/docs/src/content/concepts-certificates.md new file mode 100644 index 00000000..6956ff3f --- /dev/null +++ b/docs/src/content/concepts-certificates.md @@ -0,0 +1,164 @@ +--- +title: "Certificates" +menu: + concepts: + weight: 3 +--- + +# About Certificates + +Mitmproxy can decrypt encrypted traffic on the fly, as long as the client trusts +its built-in certificate authority. Usually this means that the mitmproxy CA +certificates have to be installed on the client device. + +## Quick Setup + +By far the easiest way to install the mitmproxy certificates is to use the +built-in certificate installation app. To do this, just start mitmproxy and +configure your target device with the correct proxy settings. Now start a +browser on the device, and visit the magic domain **mitm.it**. You should see +something like this: + +{{< figure src="/certinstall-webapp.png" >}} + +Click on the relevant icon, follow the setup instructions for the platform +you're on and you are good to go. + +## Installing the mitmproxy CA certificate manually + +Sometimes using the quick install app is not an option - Java or the iOS +Simulator spring to mind - or you just need to do it manually for some other +reason. Below is a list of pointers to manual certificate installation +documentation for some common platforms. The mitmproxy CA cert is located in +`~/.mitmproxy` after it has been generated at the first start of mitmproxy. + +- [IOS](http://jasdev.me/intercepting-ios-traffic) On + iOS 10.3 and onwards, you also need to enable full trust for the mitmproxy + root certificate: + 1. Go to Settings > General > About > Certificate Trust Settings. + 2. Under "Enable full trust for root certificates", turn on trust for + the mitmproxy certificate. +- [IOS Simulator](https://github.com/ADVTOOLS/ADVTrustStore#how-to-use-advtruststore) +- [Java](https://docs.oracle.com/cd/E19906-01/820-4916/geygn/index.html) +- [Android/Android Simulator](http://wiki.cacert.org/FAQ/ImportRootCert#Android_Phones_.26_Tablets) +- [Windows](https://web.archive.org/web/20160612045445/http://windows.microsoft.com/en-ca/windows/import-export-certificates-private-keys#1TC=windows-7) +- [Windows (automated)](https://technet.microsoft.com/en-us/library/cc732443.aspx) + +{{< highlight bash >}} +certutil.exe -importpfx Root mitmproxy-ca-cert.p12 +{{< / highlight >}} + +- [Mac OS X](https://support.apple.com/kb/PH7297?locale=en_US) +- [Ubuntu/Debian]( https://askubuntu.com/questions/73287/how-do-i-install-a-root-certificate/94861#94861) +- [Mozilla Firefox](https://wiki.mozilla.org/MozillaRootCertificate#Mozilla_Firefox) +- [Chrome on Linux](https://stackoverflow.com/a/15076602/198996) + +## The mitmproxy certificate authority + +The first time **mitmproxy** or **mitmdump** is run, the mitmproxy Certificate +Authority (CA) is created in the config directory (`~/.mitmproxy` by default). +This CA is used for on-the-fly generation of dummy certificates for each of the +SSL sites that your client visits. Since your browser won't trust the mitmproxy +CA out of the box, you will see an SSL certificate warning every time you visit +a new SSL domain through mitmproxy. When you are testing a single site through a +browser, just accepting the bogus SSL cert manually is not too much trouble, but +there are a many circumstances where you will want to configure your testing +system or browser to trust the mitmproxy CA as a signing root authority. For +security reasons, the mitmproxy CA is generated uniquely on the first start and +is not shared between mitmproxy installations on different devices. + +### Certificate Pinning + +Some applications employ [Certificate +Pinning](https://en.wikipedia.org/wiki/HTTP_Public_Key_Pinning) to prevent +man-in-the-middle attacks. This means that **mitmproxy** and **mitmdump's** +certificates will not be accepted by these applications without modifying them. +It is recommended to use the passthrough feature in order to prevent +**mitmproxy** and **mitmdump** from intercepting traffic to these specific +domains. If you want to intercept the pinned connections, you need to patch the +application manually. For Android and (jailbroken) iOS devices, various tools +exist to accomplish this. + +## CA and cert files + +The files created by mitmproxy in the .mitmproxy directory are as follows: + +| | | +| --------------------- | ------------------------------------------------------------------------------------ | +| mitmproxy-ca.pem | The certificate **and the private key** in PEM format. | +| mitmproxy-ca-cert.pem | The certificate in PEM format. Use this to distribute on most non-Windows platforms. | +| mitmproxy-ca-cert.p12 | The certificate in PKCS12 format. For use on Windows. | +| mitmproxy-ca-cert.cer | Same file as .pem, but with an extension expected by some Android devices. | + +## Using a custom certificate + +You can use your own (leaf) certificate by passing the `--cert +[domain=]path_to_certificate` option to mitmproxy. Mitmproxy then uses the +provided certificate for interception of the specified domain instead of +generating a certificate signed by its own CA. + +The certificate file is expected to be in the PEM format. You can include +intermediary certificates right below your leaf certificate, so that your PEM +file roughly looks like this: + + -----BEGIN PRIVATE KEY----- + <private key> + -----END PRIVATE KEY----- + -----BEGIN CERTIFICATE----- + <cert> + -----END CERTIFICATE----- + -----BEGIN CERTIFICATE----- + <intermediary cert (optional)> + -----END CERTIFICATE----- + +For example, you can generate a certificate in this format using these +instructions: + +{{< highlight bash >}} +openssl genrsa -out cert.key 2048 +# (Specify the mitm domain as Common Name, e.g. \*.google.com) +openssl req -new -x509 -key cert.key -out cert.crt +cat cert.key cert.crt \> cert.pem +{{< / highlight >}} + +Now, you can run mitmproxy with the generated certificate: + +**For all domain names** + +{{< highlight bash >}} +mitmproxy --cert *=cert.pem +{{< / highlight >}} + +**For specific domain names** + +{{< highlight bash >}} +mitmproxy --cert *.example.com=cert.pem +{{< / highlight >}} + +**Note:** `*.example.com` is for all the subdomains. You can also use +`www.example.com` for a particular subdomain. + +## Using a custom certificate authority + +By default, mitmproxy will use `~/.mitmproxy/mitmproxy-ca.pem` as the +certificate authority to generate certificates for all domains for which +no custom certificate is provided (see above). You can use your own +certificate authority by passing the `--cadir DIRECTORY` option to +mitmproxy. Mitmproxy will then look for `mitmproxy-ca.pem` in the +specified directory. If no such file exists, it will be generated +automatically. + +## Using a client side certificate + +You can use a client certificate by passing the `--client-certs DIRECTORY|FILE` +option to mitmproxy. Using a directory allows certs to be selected based on +hostname, while using a filename allows a single specific certificate to be used +for all SSL connections. Certificate files must be in the PEM format and should +contain both the unencrypted private key and the certificate. + +### Multiple certs by Hostname + +You can specify a directory to `--client-certs`, in which case the matching +certificate is looked up by filename. So, if you visit example.org, mitmproxy +looks for a file named `example.org.pem` in the specified directory and uses +this as the client cert. diff --git a/docs/src/content/concepts-commands.md b/docs/src/content/concepts-commands.md new file mode 100644 index 00000000..72f17252 --- /dev/null +++ b/docs/src/content/concepts-commands.md @@ -0,0 +1,72 @@ +--- +title: "Commands" +menu: + concepts: + weight: 6 +--- + +# Commands + +Commands are the mechanism that allows users to actively interact with addons. +Perhaps the most prominent example of this is the mitmproxy console user +interface - every interaction in this tool consists of commands bound to keys. +Commands also form a flexible and very powerful way to interact with mitmproxy +from the command prompt. In mitmproxy console you can enter the command prompt +with the `:` key. The prompt has intelligent tab completion for command names +and many of the built-in argument types - give it a try. + +The canonical reference for commands is the `--commands` flag, which is exposed +by each of the mitmproxy tools. Passing this flag will dump an annotated list of +all registered commands, their arguments and their return values to screen. In +mimtproxy console you can also view a palette of all commands in the command +browser (by default accessible with the `C` key binding). + + +# Working with flows + +Many of mitmproxy's commands take flows as arguments. For instance, the +signature for the client replay commands looks like this: + +{{< highlight none >}} +replay.client [flow] +{{< /highlight >}} + + +That means that it expects a sequence of one or more flows. This is where [flow +specifications]({{< relref concepts-filters >}}) come in - mitmproxy will +intelligently expand a flexible flow selection language to a list of flows when +invoking commands. + +Fire up mitmproxy console, and intercept some traffic so we have flows to work +with. Now type the following command: + +{{< highlight none >}} +:replay.client @focus +{{< /highlight >}} + +Make sure you try using tab completion for the command name and the flow +specification. The `@focus` specifiers expands to the currently focused flow, so +you should see this flow replay. However, replay can take any number of flows. +Try the following command: + +{{< highlight none >}} +:replay.client @all +{{< /highlight >}} + +Now you should see all flows replay one by one. We have the full power of the +mitmproxy filter language at our disposal here, so we could also, for example, +just replay flows for a specific domain: + +{{< highlight none >}} +:replay.client "~d google.com" +{{< /highlight >}} + + + + + + + + + + diff --git a/docs/src/content/concepts-filters.md b/docs/src/content/concepts-filters.md new file mode 100644 index 00000000..ada24e32 --- /dev/null +++ b/docs/src/content/concepts-filters.md @@ -0,0 +1,81 @@ +--- +title: "Filter expressions" +menu: + concepts: + weight: 4 +--- + +# Filter expressions + +Many commands in the mitmproxy tool make use of filter expressions. Filter +expressions consist of the following operators: + + +<table class="table filtertable"><tbody> +<tr><th>~a</th><td>Match asset in response: CSS, Javascript, Flash, images.</td></tr> +<tr><th>~b regex</th><td>Body</td></tr> +<tr><th>~bq regex</th><td>Request body</td></tr> +<tr><th>~bs regex</th><td>Response body</td></tr> +<tr><th>~c int</th><td>HTTP response code</td></tr> +<tr><th>~d regex</th><td>Domain</td></tr> +<tr><th>~dst regex</th><td>Match destination address</td></tr> +<tr><th>~e</th><td>Match error</td></tr> +<tr><th>~h regex</th><td>Header</td></tr> +<tr><th>~hq regex</th><td>Request header</td></tr> +<tr><th>~hs regex</th><td>Response header</td></tr> +<tr><th>~http</th><td>Match HTTP flows</td></tr> +<tr><th>~m regex</th><td>Method</td></tr> +<tr><th>~marked</th><td>Match marked flows</td></tr> +<tr><th>~q</th><td>Match request with no response</td></tr> +<tr><th>~s</th><td>Match response</td></tr> +<tr><th>~src regex</th><td>Match source address</td></tr> +<tr><th>~t regex</th><td>Content-type header</td></tr> +<tr><th>~tcp</th><td>Match TCP flows</td></tr> +<tr><th>~tq regex</th><td>Request Content-Type header</td></tr> +<tr><th>~ts regex</th><td>Response Content-Type header</td></tr> +<tr><th>~u regex</th><td>URL</td></tr> +<tr><th>~websocket</th><td>Match WebSocket flows</td></tr> +<tr><th>!</th><td>unary not</td></tr> +<tr><th>&</th><td>and</td></tr> +<tr><th>|</th><td>or</td></tr> +<tr><th>(...)</th><td>grouping</td></tr> +</tbody></table> + + +- Regexes are Python-style +- Regexes can be specified as quoted strings +- Header matching (~h, ~hq, ~hs) is against a string of the form "name: value". +- Strings with no operators are matched against the request URL. +- The default binary operator is &. + + +## View flow selectors + +In interactive contexts, mitmproxy has a set of convenient flow selectors that +operate on the current view: + +<table class="table filtertable"><tbody> +<tr><th>@all</th><td>All flows</td></tr> +<tr><th>@focus</th><td>The currently focused flow</td></tr> +<tr><th>@shown</th><td>All flows currently shown</td></tr> +<tr><th>@hidden</th><td>All flows currently hidden</td></tr> +<tr><th>@marked</th><td>All marked flows</td></tr> +<tr><th>@unmarked</th><td>All unmarked flows</td></tr> +</tbody></table> + +These are frequently used in commands and key bindings. + + +## Examples + +URL containing "google.com": + + google\.com + +Requests whose body contains the string "test": + + ~q ~b test + +Anything but requests with a text/html content type: + + !(~q & ~t "text/html") diff --git a/docs/src/content/concepts-howmitmproxyworks.md b/docs/src/content/concepts-howmitmproxyworks.md new file mode 100644 index 00000000..d747d71c --- /dev/null +++ b/docs/src/content/concepts-howmitmproxyworks.md @@ -0,0 +1,252 @@ +--- +title: "How mitmproxy works" +menu: + concepts: + weight: 1 +--- + +# How mitmproxy works + +Mitmproxy is an enormously flexible tool. Knowing exactly how the proxying +process works will help you deploy it creatively, and take into account its +fundamental assumptions and how to work around them. This document explains +mitmproxy's proxy mechanism in detail, starting with the simplest unencrypted +explicit proxying, and working up to the most complicated interaction +-transparent proxying of TLS-protected traffic[^1] in the presence of [Server +Name Indication](https://en.wikipedia.org/wiki/Server_Name_Indication). + +## Explicit HTTP + +Configuring the client to use mitmproxy as an explicit proxy is the +simplest and most reliable way to intercept traffic. The proxy protocol +is codified in the [HTTP RFC](https://tools.ietf.org/html/rfc7230), so +the behaviour of both the client and the server is well defined, and +usually reliable. In the simplest possible interaction with mitmproxy, a +client connects directly to the proxy, and makes a request that looks +like this: + +{{< highlight http >}} +GET http://example.com/index.html HTTP/1.1 +{{< / highlight >}} + +This is a proxy GET request - an extended form of the vanilla HTTP GET +request that includes a schema and host specification, and it includes +all the information mitmproxy needs to proceed. + + +{{< figure src="/schematics/how-mitmproxy-works-explicit.png" title="Explicit" >}} + + +1. The client connects to the proxy and makes a request. +2. Mitmproxy connects to the upstream server and simply forwards the request on. + + +## Explicit HTTPS + +The process for an explicitly proxied HTTPS connection is quite +different. The client connects to the proxy and makes a request that +looks like this: + +{{< highlight http >}} +CONNECT example.com:443 HTTP/1.1 +{{< / highlight >}} + +A conventional proxy can neither view nor manipulate a TLS-encrypted +data stream, so a CONNECT request simply asks the proxy to open a pipe +between the client and server. The proxy here is just a facilitator - it +blindly forwards data in both directions without knowing anything about +the contents. The negotiation of the TLS connection happens over this +pipe, and the subsequent flow of requests and responses are completely +opaque to the proxy. + +### The MITM in mitmproxy + +This is where mitmproxy's fundamental trick comes into play. The MITM +in its name stands for Man-In-The-Middle - a reference to the process we +use to intercept and interfere with these theoretically opaque data +streams. The basic idea is to pretend to be the server to the client, +and pretend to be the client to the server, while we sit in the middle +decoding traffic from both sides. The tricky part is that the +[Certificate +Authority](https://en.wikipedia.org/wiki/Certificate_authority) system +is designed to prevent exactly this attack, by allowing a trusted +third-party to cryptographically sign a server's certificates to verify +that they are legit. If this signature doesn't match or is from a +non-trusted party, a secure client will simply drop the connection and +refuse to proceed. Despite the many shortcomings of the CA system as it +exists today, this is usually fatal to attempts to MITM a TLS connection +for analysis. Our answer to this conundrum is to become a trusted +Certificate Authority ourselves. Mitmproxy includes a full CA +implementation that generates interception certificates on the fly. To +get the client to trust these certificates, we +[register mitmproxy as a trusted CA with the device +manually]({{< relref concepts-certificates >}}). + +### Complication 1: What's the remote hostname? + +To proceed with this plan, we need to know the domain name to use in the +interception certificate - the client will verify that the certificate is for +the domain it's connecting to, and abort if this is not the case. At first +blush, it seems that the CONNECT request above gives us all we need - in this +example, both of these values are "example.com". But what if the client had +initiated the connection as follows: + +{{< highlight http >}} +CONNECT 10.1.1.1:443 HTTP/1.1 +{{< / highlight >}} + +Using the IP address is perfectly legitimate because it gives us enough +information to initiate the pipe, even though it doesn't reveal the +remote hostname. + +Mitmproxy has a cunning mechanism that smooths this over - [upstream certificate +sniffing]({{< relref "overview-features#upstream-certificates" >}}). As soon as +we see the CONNECT request, we pause the client part of the conversation, and +initiate a simultaneous connection to the server. We complete the TLS handshake +with the server, and inspect the certificates it used. Now, we use the Common +Name in the upstream certificates to generate the dummy certificate for the +client. Voila, we have the correct hostname to present to the client, even if it +was never specified. + +### Complication 2: Subject Alternative Name + +Enter the next complication. Sometimes, the certificate Common Name is +not, in fact, the hostname that the client is connecting to. This is +because of the optional [Subject Alternative +Name](https://en.wikipedia.org/wiki/SubjectAltName) field in the +certificate that allows an arbitrary number of alternative domains to be +specified. If the expected domain matches any of these, the client will +proceed, even though the domain doesn't match the certificate CN. The +answer here is simple: when we extract the CN from the upstream cert, we +also extract the SANs, and add them to the generated dummy certificate. + +### Complication 3: Server Name Indication + +One of the big limitations of vanilla TLS is that each certificate +requires its own IP address. This means that you couldn't do virtual +hosting where multiple domains with independent certificates share the +same IP address. In a world with a rapidly shrinking IPv4 address pool +this is a problem, and we have a solution in the form of the [Server +Name Indication](https://en.wikipedia.org/wiki/Server_Name_Indication) +extension to the TLS protocols. This lets the client specify the remote +server name at the start of the TLS handshake, which then lets the +server select the right certificate to complete the process. + +SNI breaks our upstream certificate sniffing process, because when we +connect without using SNI, we get served a default certificate that may +have nothing to do with the certificate expected by the client. The +solution is another tricky complication to the client connection +process. After the client connects, we allow the TLS handshake to +continue until just **after** the SNI value has been passed to us. Now +we can pause the conversation, and initiate an upstream connection using +the correct SNI value, which then serves us the correct upstream +certificate, from which we can extract the expected CN and SANs. + +### Putting it all together + +Lets put all of this together into the complete explicitly proxied HTTPS +flow. + +{{< figure src="/schematics/how-mitmproxy-works-explicit-https.png" title="Explicit HTTPS" >}} + +1. The client makes a connection to mitmproxy, and issues an HTTP CONNECT + request. +2. Mitmproxy responds with a `200 Connection Established`, as if it has set up + the CONNECT pipe. +3. The client believes it's talking to the remote server, and initiates the TLS + connection. It uses SNI to indicate the hostname it is connecting to. +4. Mitmproxy connects to the server, and establishes a TLS connection using the + SNI hostname indicated by the client. +5. The server responds with the matching certificate, which contains the CN and + SAN values needed to generate the interception certificate. +6. Mitmproxy generates the interception cert, and continues the client TLS + handshake paused in step 3. +7. The client sends the request over the established TLS connection. +8. Mitmproxy passes the request on to the server over the TLS connection + initiated in step 4. + +## Transparent HTTP + +When a transparent proxy is used, the connection is redirected into a +proxy at the network layer, without any client configuration being +required. This makes transparent proxying ideal for those situations +where you can't change client behaviour - proxy-oblivious Android +applications being a common example. + +To achieve this, we need to introduce two extra components. The first is +a redirection mechanism that transparently reroutes a TCP connection +destined for a server on the Internet to a listening proxy server. This +usually takes the form of a firewall on the same host as the proxy +server - [iptables](http://www.netfilter.org/) on Linux or +[pf](https://en.wikipedia.org/wiki/PF_\(firewall\)) on OSX. Once the +client has initiated the connection, it makes a vanilla HTTP request, +which might look something like this: + +{{< highlight http >}} +GET /index.html HTTP/1.1 +{{< / highlight >}} + +Note that this request differs from the explicit proxy variation, in +that it omits the scheme and hostname. How, then, do we know which +upstream host to forward the request to? The routing mechanism that has +performed the redirection keeps track of the original destination for +us. Each routing mechanism has a different way of exposing this data, so +this introduces the second component required for working transparent +proxying: a host module that knows how to retrieve the original +destination address from the router. In mitmproxy, this takes the form +of a built-in set of +[modules](https://github.com/mitmproxy/mitmproxy/tree/master/mitmproxy/platform) +that know how to talk to each platform's redirection mechanism. Once we +have this information, the process is fairly straight-forward. + +{{< figure src="/schematics/how-mitmproxy-works-transparent.png" title="Transparent" >}} + +1. The client makes a connection to the server. +2. The router redirects the connection to mitmproxy, which is typically + listening on a local port of the same host. Mitmproxy then consults + the routing mechanism to establish what the original destination + was. +3. Now, we simply read the client's request... +4. ... and forward it upstream. + +## Transparent HTTPS + +The first step is to determine whether we should treat an incoming +connection as HTTPS. The mechanism for doing this is simple - we use the +routing mechanism to find out what the original destination port is. All +incoming connections pass through different layers which can determine +the actual protocol to use. Automatic TLS detection works for SSLv3, TLS +1.0, TLS 1.1, and TLS 1.2 by looking for a *ClientHello* message at the +beginning of each connection. This works independently of the used TCP +port. + +From here, the process is a merger of the methods we've described for +transparently proxying HTTP, and explicitly proxying HTTPS. We use the +routing mechanism to establish the upstream server address, and then +proceed as for explicit HTTPS connections to establish the CN and SANs, +and cope with SNI. + +{{< figure src="/schematics/how-mitmproxy-works-transparent-https.png" title="Transparent HTTPS" >}} + +1. The client makes a connection to the server. +2. The router redirects the connection to mitmproxy, which is typically + listening on a local port of the same host. Mitmproxy then consults the + routing mechanism to establish what the original destination was. +3. The client believes it's talking to the remote server, and + initiates the TLS connection. It uses SNI to indicate the hostname + it is connecting to. +4. Mitmproxy connects to the server, and establishes a TLS connection + using the SNI hostname indicated by the client. +5. The server responds with the matching certificate, which contains + the CN and SAN values needed to generate the interception + certificate. +6. Mitmproxy generates the interception cert, and continues the client + TLS handshake paused in step 3. +7. The client sends the request over the established TLS connection. +8. Mitmproxy passes the request on to the server over the TLS + connection initiated in step 4. + +### Footnotes + +[^1]: The use of "TLS" refers to both SSL (outdated and insecure) and TLS (1.0 + and up) in the generic sense, unless otherwise specified. diff --git a/docs/src/content/concepts-modes.md b/docs/src/content/concepts-modes.md new file mode 100644 index 00000000..86bb7b0f --- /dev/null +++ b/docs/src/content/concepts-modes.md @@ -0,0 +1,215 @@ +--- +title: "Modes of operation" +menu: + concepts: + weight: 2 +--- + +# Modes of Operation + +- [Regular](#regular-proxy) (the default) +- [Transparent](#transparent-proxy) +- [Reverse Proxy](#reverse-proxy) +- [Upstream Proxy](#upstream-proxy) +- [SOCKS Proxy](#socks-proxy) + +Now, which one should you pick? Use this flow chart: + +{{< figure src="/schematics/proxy-modes-flowchart.png" >}} + + +## Regular Proxy + +Mitmproxy's regular mode is the simplest and the easiest to set up. + +1. Start mitmproxy. +2. Configure your client to use mitmproxy by explicitly setting an HTTP + proxy. +3. Quick Check: You should already be able to visit an unencrypted HTTP + site through the proxy. +4. Open the magic domain **mitm.it** and install the certificate for your + device. + +{{< note >}} +Unfortunately, some applications bypass the system HTTP proxy settings - +Android applications are a common example. In these cases, you need to +use mitmproxy's transparent mode. +{{< /note >}} + +If you are proxying an external device, your network will probably look +like this: + +{{< figure src="/schematics/proxy-modes-regular.png" >}} + +The square brackets signify the source and destination IP addresses. +Your client explicitly connects to mitmproxy and mitmproxy explicitly +connects to the target server. + +## Transparent Proxy + +In transparent mode, traffic is directed into a proxy at the network +layer, without any client configuration required. This makes transparent +proxying ideal for situations where you can't change client behaviour. +In the graphic below, a machine running mitmproxy has been inserted +between the router and the internet: + +{{< figure src="/schematics/proxy-modes-transparent-1.png" >}} + +The square brackets signify the source and destination IP addresses. +Round brackets mark the next hop on the *Ethernet/data link* layer. This +distinction is important: when the packet arrives at the mitmproxy +machine, it must still be addressed to the target server. This means +that Network Address Translation should not be applied before the +traffic reaches mitmproxy, since this would remove the target +information, leaving mitmproxy unable to determine the real destination. + +{{< figure src="/schematics/proxy-modes-transparent-wrong.png" title="Modes Transparent Wrong" >}} + +### Common Configurations + +There are many ways to configure your network for transparent proxying. +We'll look at two common scenarios: + +1. Configuring the client to use a custom gateway/router/"next hop" +2. Implementing custom routing on the router + +In most cases, the first option is recommended due to its ease of use. + +#### (a) Custom Gateway + +One simple way to get traffic to the mitmproxy machine with the +destination IP intact, is to simply configure the client with the +mitmproxy box as the default gateway. + +{{< figure src="/schematics/proxy-modes-transparent-2.png" >}} + +In this scenario, we would: + +1. Configure the proxy machine for transparent mode. You can find instructions + in the [transparent]({{< relref "howto-transparent" + >}}) section. +2. Configure the client to use the proxy machine's IP as the default gateway. +3. Quick Check: At this point, you should already be able to visit an + unencrypted HTTP site over the proxy. +4. Open the magic domain **mitm.it** and install the certificate for your + device. + +Setting the custom gateway on clients can be automated by serving the +settings out to clients over DHCP. This lets set up an interception +network where all clients are proxied automatically, which can save time +and effort. + +{{% note %}} + +### Troubleshooting Transparent Mode + +Incorrect transparent mode configurations are a frequent source of +error. If it doesn't work for you, try the following things: + +- Open mitmproxy's event log - do you see clientconnect messages? If not, the + packets are not arriving at the proxy. One common cause is the occurrence of + ICMP redirects, which means that your machine is telling the client that + there's a faster way to the internet by contacting your router directly (see + the [transparent]({{< relref "howto-transparent" + >}}) section on how to disable them). If in doubt, + [Wireshark](https://wireshark.org/) may help you to see whether something + arrives at your machine or not. +- Make sure you have not explicitly configured an HTTP proxy on the client. This + is not needed in transparent mode. +- Re-check the instructions in the [transparent]({{< relref "howto-transparent" + >}}) section. Anything you missed? + +If you encounter any other pitfalls that should be listed here, please +let us know! +{{% /note %}} + +#### (b) Custom Routing + +In some cases, you may need more fine-grained control of which traffic +reaches the mitmproxy instance, and which doesn't. You may, for +instance, choose only to divert traffic to some hosts into the +transparent proxy. There are a huge number of ways to accomplish this, +and much will depend on the router or packet filter you're using. In +most cases, the configuration will look like this: + +{{< figure src="/schematics/proxy-modes-transparent-3.png" >}} + +## Reverse Proxy + +mitmproxy is usually used with a client that uses the proxy to access +the Internet. Using reverse proxy mode, you can use mitmproxy to act +like a normal HTTP server: + +{{< figure src="/schematics/proxy-modes-reverse.png" >}} + +There are various use-cases: + +- Say you have an internal API running at <http://example.local/>. You could now + set up mitmproxy in reverse proxy mode at <http://debug.example.local/> and + dynamically point clients to this new API endpoint, which provides them with + the same data and you with debug information. Similarly, you could move your + real server to a different IP/port and set up mitmproxy in the original + place to debug and or redirect all sessions. +- Say you're a web developer working on <http://example.com/> (with a + development version running on <http://localhost:8000/>). You can modify + your hosts file so that example.com points to 127.0.0.1 and then run + mitmproxy in reverse proxy mode on port 80. You can test your app on the + example.com domain and get all requests recorded in mitmproxy. +- Say you have some toy project that should get SSL support. Simply set up + mitmproxy as a reverse proxy on port 443 and you're done (`mitmdump -p 443 + -R http://localhost:80/`). Mitmproxy auto-detects TLS traffic and intercepts + it dynamically. There are better tools for this specific task, but mitmproxy + is very quick and simple way to set up an SSL-speaking server. +- Want to add a non-SSL-capable compression proxy in front of your server? You + could even spawn a mitmproxy instance that terminates SSL (`-R http://...`), + point it to the compression proxy and let the compression proxy point to a + SSL-initiating mitmproxy (`-R https://...`), which then points to the real + server. As you see, it's a fairly flexible thing. + +### Host Header + +In reverse proxy mode, mitmproxy automatically rewrites the Host header to match +the upstream server. This allows mitmproxy to easily connect to existing +endpoints on the open web (e.g. `mitmproxy -R https://example.com`). You can +disable this behaviour with the `keep_host_header` option. + +However, keep in mind that absolute URLs within the returned document or HTTP +redirects will NOT be rewritten by mitmproxy. This means that if you click on a +link for "<http://example.com>" in the returned web page, you will be taken +directly to that URL, bypassing mitmproxy. + +One possible way to address this is to modify the hosts file of your OS so that +"example.com" resolves to your proxy's IP, and then access the proxy by going +directly to example.com. Make sure that your proxy can still resolve the +original IP, or specify an IP in mitmproxy. + + +{{% note %}} + +### Caveat: Interactive Use + +Reverse Proxy mode is usually not sufficient to create a copy of an +interactive website at different URL. The HTML served to the client +remains unchanged - as soon as the user clicks on an non-relative URL +(or downloads a non-relative image resource), traffic no longer passes +through mitmproxy. +{{% /note %}} + + +## Upstream Proxy + +If you want to chain proxies by adding mitmproxy in front of a different +proxy appliance, you can use mitmproxy's upstream mode. In upstream +mode, all requests are unconditionally transferred to an upstream proxy +of your choice. + +{{< figure src="/schematics/proxy-modes-upstream.png" >}} + +mitmproxy supports both explicit HTTP and explicit HTTPS in upstream +proxy mode. You could in theory chain multiple mitmproxy instances in a +row, but that doesn't make any sense in practice (i.e. outside of our +tests). + + +## SOCKS Proxy + diff --git a/docs/src/content/concepts-options.md b/docs/src/content/concepts-options.md new file mode 100644 index 00000000..18776841 --- /dev/null +++ b/docs/src/content/concepts-options.md @@ -0,0 +1,66 @@ +--- +title: "Options" +menu: + concepts: + weight: 5 +--- + +# Options + +The mitmproxy tools share a common [YAML](http://yaml.org/) configuration file +located at `~/.mitmproxy/config.yaml`. This file controls **options** - typed +values that determine the behaviour of mitmproxy. The options mechanism is very +comprehensive - in fact, options control all of mitmproxy's runtime behaviour. +Most command-line flags are simply aliases for underlying options, and +interactive settings changes made in **mitmproxy** and **mitmweb** just change +values in our runtime options store. This means that almost any facet of +mitmproxy's behaviour can be controlled through options. + +The canonical reference for options is the `--options` flag, which is exposed by +each of the mitmproxy tools. Passing this flag will dump an annotated YAML +configuration to console, which includes all options and their default values. + +The options mechanism is extensible - third-party addons can define options that +are treated exactly like mitmproxy's own. This means that addons can also be +configured through the central configuration file, and their options will appear +in the options editors in interactive tools. + + +## Tools + +Both **mitmproxy** and **mitmweb** have built-in editors that let you view and +manipulate the complete configuration state of mitmproxy. Values you change +interactively have immediate effect in the running instance, and can be made +persistent by saving the settings out to a YAML configuration file (please see +the specific tool's interactive help for details on how to do this). + +For all tools, options can be set directly by name using the `--set` command-line +option. Please see the command-line help (`--help`) for usage. + + +## Example + +Here is an excerpt showing the first few lines of the complete `--options` +output: + +{{< highlight yaml >}} + +# Add all certificates of the upstream server to the certificate chain +# that will be served to the proxy client, as extras. Type bool. +add_upstream_certs_to_client_chain: false + +# Allow remote clients to connect to proxy. If set to false, client will +# not be able to connect to proxy unless it is on the same network or +# the proxyauth option is set Type bool. +allow_remote: false + +# Strip out request headers that might cause the server to return +# 304-not-modified. Type bool. +anticache: false + +# Try to convince servers to send us un-compressed data. Type bool. +anticomp: false + +{{< /highlight >}} + + diff --git a/docs/src/content/howto-ignoredomains.md b/docs/src/content/howto-ignoredomains.md new file mode 100644 index 00000000..b1b14831 --- /dev/null +++ b/docs/src/content/howto-ignoredomains.md @@ -0,0 +1,102 @@ +--- +title: "Ignoring Domains" +menu: + howto: + weight: 2 +--- + +# Ignoring Domains + +There are two main reasons why you may want to exempt some traffic from +mitmproxy's interception mechanism: + +- **Certificate pinning:** Some traffic is is protected using [Certificate + Pinning](https://security.stackexchange.com/questions/29988/what-is-certificate-pinning) + and mitmproxy's interception leads to errors. For example, the Twitter app, + Windows Update or the Apple App Store fail to work if mitmproxy is active. +- **Convenience:** You really don't care about some parts of the traffic and + just want them to go away. Note that mitmproxy's "Limit" option is often the + better alternative here, as it is not affected by the limitations listed + below. + +If you want to peek into (SSL-protected) non-HTTP connections, check out the +**tcp_proxy** feature. If you want to ignore traffic from mitmproxy's processing +because of large response bodies, take a look at the [streaming]({{< relref "overview-features#streaming" >}}) feature. + + +## ignore_hosts + +The `ignore_hosts` option allows you to specify a regex which is matched against +a `host:port` string (e.g. "example.com:443") of a connection. Matching hosts +are excluded from interception, and passed on unmodified. + +| | | +| ------------------ | ------------------------------------------------------------------ | +| command-line alias | `--ignore-hosts regex` | +| mitmproxy option | `ignore_hosts` | + + +## Limitations + +There are two important quirks to consider: + +- **In transparent mode, the ignore pattern is matched against the IP and + ClientHello SNI host.** While we usually infer the hostname from the Host + header if the `ignore_hosts` option is set, we do not have access to this + information before the SSL handshake. If the client uses SNI however, then we + treat the SNI host as an ignore target. +- **In regular and upstream proxy mode, explicit HTTP requests are never + ignored.**\[1\] The ignore pattern is applied on CONNECT requests, which + initiate HTTPS or clear-text WebSocket connections. + +## Tutorial + +If you just want to ignore one specific domain, there's usually a bulletproof +method to do so: + +1. Run mitmproxy or mitmdump in verbose mode (`-v`) and observe the `host:port` + information in the serverconnect messages. mitmproxy will filter on these. +2. Take the `host:port` string, surround it with ^ and $, escape all dots (. + becomes \\.) and use this as your ignore pattern: + + +{{< highlight none >}} +>>> mitmdump -v +127.0.0.1:50588: clientconnect +127.0.0.1:50588: request + -> CONNECT example.com:443 HTTP/1.1 +127.0.0.1:50588: Set new server address: example.com:443 +127.0.0.1:50588: serverconnect + -> example.com:443 +^C +>>> mitmproxy --ignore-hosts ^example\.com:443$ +{{< /highlight >}} + +Here are some other examples for ignore +patterns: + +{{< highlight none >}} +# Exempt traffic from the iOS App Store (the regex is lax, but usually just works): +--ignore-hosts apple.com:443 +# "Correct" version without false-positives: +--ignore-hosts '^(.+\.)?apple\.com:443$' + +# Ignore example.com, but not its subdomains: +--ignore-hosts '^example.com:' + +# Ignore everything but example.com and mitmproxy.org: +--ignore-hosts '^(?!example\.com)(?!mitmproxy\.org)' + +# Transparent mode: +--ignore-hosts 17\.178\.96\.59:443 +# IP address range: +--ignore-hosts 17\.178\.\d+\.\d+:443 +{{< / highlight >}} + +**Footnotes** + +1. This stems from an limitation of explicit HTTP proxying: A single connection + can be re-used for multiple target domains - a `GET http://example.com/` + request may be followed by a `GET http://evil.com/` request on the same + connection. If we start to ignore the connection after the first request, we + would miss the relevant second one. diff --git a/docs/src/content/howto-transparent-vms.md b/docs/src/content/howto-transparent-vms.md new file mode 100644 index 00000000..b186fd39 --- /dev/null +++ b/docs/src/content/howto-transparent-vms.md @@ -0,0 +1,114 @@ +--- +title: "Transparently Proxying VMs" +menu: + howto: + weight: 3 +--- + +# Transparently proxify virtual machines + +This walkthrough illustrates how to set up transparent proxying with +mitmproxy. We use VirtualBox VMs with an Ubuntu proxy machine in this +example, but the general *Internet \<--\> Proxy VM \<--\> (Virtual) +Internal Network* setup can be applied to other setups. + +## 1. Configure Proxy VM + +On the proxy machine, **eth0** is connected to the internet. **eth1** is +connected to the internal network that will be proxified and configured +to use a static ip (192.168.3.1). + +### VirtualBox configuration + + +{{< figure src="/transparent-vms/step1_vbox_eth0.png" >}} + +{{< figure src="/transparent-vms/step1_vbox_eth1.png" >}} + + +### VM Network Configuration + +{{< figure src="/transparent-vms/step1_proxy.png" >}} + +## 2. Configure DHCP and DNS + +We use dnsmasq to provide DHCP and DNS in our internal network. Dnsmasq is a +lightweight server designed to provide DNS (and optionally DHCP and TFTP) +services to a small-scale network. Before we get to that, we need to fix some +Ubuntu quirks: **Ubuntu \>12.04** runs an internal dnsmasq instance (listening +on loopback only) by default +[\[1\]](https://www.stgraber.org/2012/02/24/dns-in-ubuntu-12-04/). For our use +case, this needs to be disabled by changing `dns=dnsmasq` to `#dns=dnsmasq` in +**/etc/NetworkManager/NetworkManager.conf** and if on Ubuntu 16.04 or newer +running: + +{{< highlight bash >}} +sudo systemctl restart NetworkManager +{{< / highlight >}} + +If on Ubuntu 12.04 or 14.04 running: + +{{< highlight bash >}} +sudo restart network-manager +{{< / highlight >}} + +afterwards. + +Now, dnsmasq can be be installed and configured: + +{{< highlight bash >}} +sudo apt-get install dnsmasq +{{< / highlight >}} + +Replace **/etc/dnsmasq.conf** with the following configuration: + +{{< highlight none >}} +# Listen for DNS requests on the internal network +interface=eth1 +# Act as a DHCP server, assign IP addresses to clients +dhcp-range=192.168.3.10,192.168.3.100,96h +# Broadcast gateway and dns server information +dhcp-option=option:router,192.168.3.1 +dhcp-option=option:dns-server,192.168.3.1 +{{< / highlight >}} + +Apply changes: + +If on Ubuntu 16.04 or newer: + +{{< highlight bash >}} +sudo systemctl restart dnsmasq +{{< / highlight >}} + +If on Ubuntu 12.04 or 14.04: + +{{< highlight bash >}} +sudo service dnsmasq restart +{{< / highlight >}} + +Your **proxied machine** in the internal virtual network should now receive an +IP address via DHCP: + +{{< figure src="/transparent-vms/step2_proxied_vm.png" >}} + +## 3. Redirect traffic to mitmproxy + +To redirect traffic to mitmproxy, we need to add two iptables +rules: + +{{< highlight bash >}} +sudo iptables -t nat -A PREROUTING -i eth1 -p tcp --dport 80 -j REDIRECT --to-port 8080 +sudo iptables -t nat -A PREROUTING -i eth1 -p tcp --dport 443 -j REDIRECT --to-port 8080 +{{< / highlight >}} + +## 4. Run mitmproxy + +Finally, we can run mitmproxy in transparent mode with + +{{< highlight bash >}} +mitmproxy -T +{{< / highlight >}} + +The proxied machine cannot to leak any data outside of HTTP or DNS requests. If +required, you can now [install the mitmproxy certificates on the proxied +machine]({{< relref "concepts-certificates" >}}). diff --git a/docs/src/content/howto-transparent.md b/docs/src/content/howto-transparent.md new file mode 100644 index 00000000..224cb5ee --- /dev/null +++ b/docs/src/content/howto-transparent.md @@ -0,0 +1,269 @@ +--- +title: "Transparent Proxying" +menu: + howto: + weight: 1 +--- + +# Transparent Proxying + +When a transparent proxy is used, traffic is redirected into a proxy at the +network layer, without any client configuration being required. This makes +transparent proxying ideal for those situations where you can't change client +behaviour - proxy-oblivious mobile applications being a common example. + +To set up transparent proxying, we need two new components. The first is a +redirection mechanism that transparently reroutes a TCP connection destined for +a server on the Internet to a listening proxy server. This usually takes the +form of a firewall on the same host as the proxy server - +[iptables](http://www.netfilter.org/) on Linux or +[pf](https://en.wikipedia.org/wiki/PF_(firewall)) on OSX. When the proxy +receives a redirected connection, it sees a vanilla HTTP request, without a host +specification. This is where the second new component comes in - a host module +that allows us to query the redirector for the original destination of the TCP +connection. + +At the moment, mitmproxy supports transparent proxying on OSX Lion and above, +and all current flavors of Linux. + + +## Linux fully transparent mode + +By default mitmproxy will use its own local IP address for its server-side +connections. In case this isn't desired, the --spoof-source-address argument can +be used to use the client's IP address for server-side connections. The +following config is required for this mode to work: + +{{< highlight bash >}} +CLIENT_NET=192.168.1.0/24 +TABLE_ID=100 +MARK=1 + +echo "$TABLE_ID mitmproxy" >> /etc/iproute2/rt_tables +iptables -t mangle -A PREROUTING -d $CLIENT_NET -j MARK --set-mark $MARK +iptables -t nat \ + -A PREROUTING -p tcp -s $CLIENT_NET \ + --match multiport --dports 80,443 -j \ + REDIRECT --to-port 8080 + +ip rule add fwmark $MARK lookup $TABLE_ID +ip route add local $CLIENT_NET dev lo table $TABLE_ID +{{< / highlight >}} + +This mode does require root privileges though. There's a wrapper in the examples +directory called 'mitmproxy_shim.c', which will enable you to use this mode with +dropped privileges. It can be used as follows: + +{{< highlight bash >}} +gcc examples/complex/full_transparency_shim.c -o mitmproxy_shim -lcap +sudo chown root:root mitmproxy_shim +sudo chmod u+s mitmproxy_shim +./mitmproxy_shim $(which mitmproxy) -T --spoof-source-address +{{< / highlight >}} + + + +## Linux + +On Linux, mitmproxy integrates with the iptables redirection mechanism to +achieve transparent mode. + +### 1. [Install the mitmproxy certificate on the test device]({{< relref "concepts-certificates" >}}) + +### 2. Enable IP forwarding: + +{{< highlight bash >}} +sysctl -w net.ipv4.ip_forward=1 +sysctl -w net.ipv6.conf.all.forwarding=1 +{{< / highlight >}} + +You may also want to consider enabling this permanently in `/etc/sysctl.conf` or +newly created `/etc/sysctl.d/mitmproxy.conf`, see +[here](https://superuser.com/a/625852). + +### 3. If your target machine is on the same physical network and you configured it to use a custom gateway, disable ICMP redirects: + +{{< highlight bash >}} +sysctl -w net.ipv4.conf.all.send_redirects=0 +{{< / highlight >}} + +You may also want to consider enabling this permanently in `/etc/sysctl.conf` or +a newly created `/etc/sysctl.d/mitmproxy.conf`, see +[here](https://superuser.com/a/625852). + +### 4. Create an iptables ruleset that redirects the desired traffic to the mitmproxy port + +Details will differ according to your setup, but the ruleset should look +something like this: + +{{< highlight bash >}} + iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080 + iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 443 -j REDIRECT --to-port 8080 + ip6tables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080 + ip6tables -t nat -A PREROUTING -i eth0 -p tcp --dport 443 -j REDIRECT --to-port 8080 +{{< / highlight >}} + +Â Â You may also want to consider enabling this permanently with the +`iptables-persistent` package, see +[here](http://www.microhowto.info/howto/make_the_configuration_of_iptables_persistent_on_debian.html). + +### 5. Fire up mitmproxy + +You probably want a command like this: + +{{< highlight bash >}} +mitmproxy -T --host +{{< / highlight >}} + +The `-T` flag turns on transparent mode, and the `--host` argument tells + mitmproxy to use the value of the Host header for URL display. + +### 6. Finally, configure your test device + +Set the test device up to use the host on which mitmproxy is running as the +default gateway. For a detailed walkthrough, have a look at the [tutorial for +transparently proxying VMs]({{< relref "howto-transparent-vms" >}}). + + +## OpenBSD + +### 1 [Install the mitmproxy certificate on the test device]({{< relref "concepts-certificates" >}}) + +### 2. Enable IP forwarding + +{{< highlight bash >}} +sudo sysctl -w net.inet.ip.forwarding=1 +{{< / highlight >}} + +### 3. Place the following two lines in **/etc/pf.conf** + +{{< highlight none >}} +mitm_if = "re2" +pass in quick proto tcp from $mitm_if to port { 80, 443 } divert-to 127.0.0.1 port 8080 +{{< / highlight >}} + +These rules tell pf to divert all traffic from `$mitm_if` destined for port 80 +or 443 to the local mitmproxy instance running on port 8080. You should replace +`$mitm_if` value with the interface on which your test device will appear. + +### 4. Enable the pf ruleset and enable it + +{{< highlight bash >}} +doas pfctl -f /etc/pf.conf +{{< / highlight >}} + +And now enable it: + +{{< highlight bash >}} +doas pfctl -e +{{< / highlight >}} + +### 5. Fire up mitmproxy + +You probably want a command like this: + +{{< highlight bash >}} +mitmproxy -T --host +{{< / highlight >}} + +The `-T` flag turns on transparent mode, and the `--host` argument tells +mitmproxy to use the value of the Host header for URL display. + +### 6. Finally, configure your test device + +Set the test device up to use the host on which mitmproxy is running as the +default gateway. + + +{{% note %}} +Note that the **divert-to** rules in the pf.conf given above only apply +to inbound traffic. **This means that they will NOT redirect traffic +coming from the box running pf itself.** We can't distinguish between an +outbound connection from a non-mitmproxy app, and an outbound connection +from mitmproxy itself - if you want to intercept your traffic, you +should use an external host to run mitmproxy. Nonetheless, pf is +flexible to cater for a range of creative possibilities, like +intercepting traffic emanating from VMs. See the **pf.conf** man page +for more. +{{% /note %}} + + +## macOS + +OSX Lion integrated the [pf](https://en.wikipedia.org/wiki/PF_(firewall)) +packet filter from the OpenBSD project, which mitmproxy uses to implement +transparent mode on OSX. Note that this means we don't support transparent mode +for earlier versions of OSX. + +### 1. [Install the mitmproxy certificate on the test device]({{< relref "concepts-certificates" >}}) + +### 2. Enable IP forwarding + +{{< highlight bash >}} +sudo sysctl -w net.inet.ip.forwarding=1 +{{< / highlight >}} + +### 3. Place the following two lines in a file called, say, **pf.conf** + + +{{< highlight none >}} +rdr on en0 inet proto tcp to any port {80, 443} -> 127.0.0.1 port 8080 +{{< / highlight >}} + +These rules tell pf to redirect all traffic destined for port 80 or 443 +to the local mitmproxy instance running on port 8080. You should replace +`en2` with the interface on which your test device will appear. + +### 4. Configure pf with the rules + +{{< highlight bash >}} +sudo pfctl -f pf.conf +{{< / highlight >}} + +### 5. And now enable it + +{{< highlight bash >}} +sudo pfctl -e +{{< / highlight >}} + +### 6. Configure sudoers to allow mitmproxy to access pfctl + +Edit the file **/etc/sudoers** on your system as root. Add the following line to +the end of the file: + +{{< highlight none >}} +ALL ALL=NOPASSWD: /sbin/pfctl -s state +{{< / highlight >}} + +Note that this allows any user on the system to run the command `/sbin/pfctl -s +state` as root without a password. This only allows inspection of the state +table, so should not be an undue security risk. If you're special feel free to +tighten the restriction up to the user running mitmproxy. + +### 7. Fire up mitmproxy + +You probably want a command like this: + +{{< highlight bash >}} +mitmproxy -T --host +{{< / highlight >}} + +The `-T` flag turns on transparent mode, and the `--host` argument tells +mitmproxy to use the value of the Host header for URL display. + +### 6. Finally, configure your test device + +Set the test device up to use the host on which mitmproxy is running as the +default gateway. + +{{% note %}} +Note that the **rdr** rules in the pf.conf given above only apply to +inbound traffic. **This means that they will NOT redirect traffic coming +from the box running pf itself.** We can't distinguish between an +outbound connection from a non-mitmproxy app, and an outbound connection +from mitmproxy itself - if you want to intercept your OSX traffic, you +should use an external host to run mitmproxy. Nonetheless, pf is +flexible to cater for a range of creative possibilities, like +intercepting traffic emanating from VMs. See the **pf.conf** man page +for more. +{{% /note %}} diff --git a/docs/src/content/overview-features.md b/docs/src/content/overview-features.md new file mode 100644 index 00000000..9a4c5468 --- /dev/null +++ b/docs/src/content/overview-features.md @@ -0,0 +1,219 @@ +--- +title: "Features" +menu: "overview" +menu: + overview: + weight: 4 +--- + +# Mitmproxy Core Features + + +- [Anticache](#anticache) +- [Client-side replay](#client-side-replay) +- [Proxy Authentication](#proxy-authentication) +- [Replacements](#replacements) +- [Server-side replay](#server-side-replay) +- [Set Headers](#set-headers) +- [Sticky Auth](#sticky-auth) +- [Sticky Cookies](#sticky-cookies) +- [Streaming](#streaming) +- [Upstream Certificates](#upstream-certificates) + + +## Anticache + +When the `anticache` option is set, it removes headers (`if-none-match` and +`if-modified-since`) that might elicit a `304 not modified` response from the +server. This is useful when you want to make sure you capture an HTTP exchange +in its totality. It's also often used during client-side replay, when you want +to make sure the server responds with complete data. + + +## Client-side replay + +Client-side replay does what it says on the tin: you provide a previously saved +HTTP conversation, and mitmproxy replays the client requests one by one. Note +that mitmproxy serialises the requests, waiting for a response from the server +before starting the next request. This might differ from the recorded +conversation, where requests may have been made concurrently. + +You may want to use client-side replay in conjunction with the `anticache` +option, to make sure the server responds with complete data. + +## Proxy Authentication + +Asks the user for authentication before they are permitted to use the proxy. +Authentication headers are stripped from the flows, so they are not passed to +upstream servers. For now, only HTTP Basic authentication is supported. The +proxy auth options are not compatible with the transparent, socks or reverse +proxy mode. + + +## Replacements + +The `replacements` option lets you specify an arbitrary number of patterns that +define text replacements within flows. A replacement pattern looks like this: + +{{< highlight none >}} +/patt/regex/replacement +{{< / highlight >}} + +Here, **patt** is a mitmproxy filter expression that defines which flows a +replacement applies to, **regex** is a valid Python regular expression that +defines what gets replaced, and **replacement** is a string literal that is +substituted in. The separator is arbitrary, and defined by the first character. +If the replacement string literal starts with `@`, it is treated as a file path +from which the replacement is read. + +Replace hooks fire when either a client request or a server response is +received. Only the matching flow component is affected: so, for example, +if a replace hook is triggered on server response, the replacement is +only run on the Response object leaving the Request intact. You control +whether the hook triggers on the request, response or both using the +filter pattern. If you need finer-grained control than this, it's simple +to create a script using the replacement API on Flow components. + +### Examples + +Replace `foo` with `bar` in requests: + +{{< highlight none >}} +:~q:foo:bar +{{< / highlight >}} + +Replace `foo` with with the data read from `~/xss-exploit`: + +{{< highlight bash >}} +mitmdump --replacements :~q:foo:@~/xss-exploit +{{< / highlight >}} + + +## Server-side replay + +The `server_replay` option lets us replay server responses from saved HTTP +conversations. To do this, we use a set of heuristics to match incoming requests +with saved responses. By default, we exclude request headers when matching +incoming requests with responses from the replay file, and use only the URL and +request method for matching. This works in most circumstances, and makes it +possible to replay server responses in situations where request headers would +naturally vary, e.g. using a different user agent. + +There is a slew of ways to customise the matching heuristic, including +specifying headers to include, request parameters to exclude, etc. These options +are collected under the `server_replay` prefix - please see the built-in +documentation for details. + +### Response refreshing + +Simply replaying server responses without modification will often result in +unexpected behaviour. For example cookie timeouts that were in the future at the +time a conversation was recorded might be in the past at the time it is +replayed. By default, mitmproxy refreshes server responses before sending them +to the client. The **date**, **expires** and **last-modified** headers are all +updated to have the same relative time offset as they had at the time of +recording. So, if they were in the past at the time of recording, they will be +in the past at the time of replay, and vice versa. Cookie expiry times are +updated in a similar way. + +You can turn off this behaviour by setting the `server_replay_refresh` option to +`false`. + +### Replaying a session recorded in Reverse-proxy Mode + +If you have captured the session in reverse proxy mode, in order to replay it +you still have to specify the server URL, otherwise you may get the error: 'HTTP +protocol error in client request: Invalid HTTP request form (expected authority +or absolute...)'. + +During replay, when the client's requests match previously recorded requests, +then the respective recorded responses are simply replayed by mitmproxy. +Otherwise, the unmatched requests is forwarded to the upstream server. If +forwarding is not desired, you can use the --kill (-k) switch to prevent that. + +## Set Headers + +The `setheaders` option lets you specify a set of headers to be added to +requests or responses, based on a filter pattern. A `setheaders` expression +looks like this: + +{{< highlight none >}} +/patt/name/value +{{< / highlight >}} + +Here, **patt** is a mitmproxy filter expression that defines which flows to set +headers on, and **name** and **value** are the header name and the value to set +respectively. + +## Sticky auth + +The `stickyauth` option is analogous to the sticky cookie option, in that HTTP +**Authorization** headers are simply replayed to the server once they have been +seen. This is enough to allow you to access a server resource using HTTP Basic +authentication through the proxy. Note that <span +data-role="program">mitmproxy</span> doesn't (yet) support replay of HTTP Digest +authentication. + +## Sticky cookies + +When the `stickycookie` option is set, **mitmproxy** will add the cookie most +recently set by the server to any cookie-less request. Consider a service that +sets a cookie to track the session after authentication. Using sticky cookies, +you can fire up mitmproxy, and authenticate to a service as you usually would +using a browser. After authentication, you can request authenticated resources +through mitmproxy as if they were unauthenticated, because mitmproxy will +automatically add the session tracking cookie to requests. Among other things, +this lets you script interactions with authenticated resources (using tools like +wget or curl) without having to worry about authentication. + +Sticky cookies are especially powerful when used in conjunction with [client +replay]({{< relref "#client-side-replay" >}}) - you can record the +authentication process once, and simply replay it on startup every time you need +to interact with the secured resources. + +## Streaming + +By default, mitmproxy will read an entire request/response, perform any +indicated manipulations on it, and then send the message on to the other party. +This can be problematic when downloading or uploading large files. When +streaming is enabled, message bodies are not buffered on the proxy but instead +sent directly to the server/client. HTTP headers are still fully buffered before +being sent. + +Request/response streaming is enabled by specifying a size cutoff in the +`stream_large_bodies` option. + +### Customizing Streaming + +You can also use a script to customise exactly which requests or responses are +streamed. Requests/Responses that should be tagged for streaming by setting +their ``.stream`` attribute to ``True``: + +{{< example src="examples/complex/stream.py" lang="py" >}} + + +### Websockets + +The `stream_websockets` option enables an analogous behaviour for websockets. +When WebSocket streaming is enabled, portions of the code which may perform +changes to the WebSocket message payloads will not have any effect on the actual +payload sent to the server as the frames are immediately forwarded to the +server. In contrast to HTTP streaming, where the body is not stored, the message +payload will still be stored in the WebSocket flow. + +## Upstream Certificates + +When mitmproxy receives a connection destined for an SSL-protected service, it +freezes the connection before reading its request data, and makes a connection +to the upstream server to "sniff" the contents of its SSL certificate. The +information gained - the **Common Name** and **Subject Alternative Names** - is +then used to generate the interception certificate, which is sent to the client +so the connection can continue. + +This rather intricate little dance lets us seamlessly generate correct +certificates even if the client has specified only an IP address rather than the +hostname. It also means that we don't need to sniff additional data to generate +certs in transparent mode. + +Upstream cert sniffing is on by default, and can optionally be turned off with +the `upstream_cert` option.
\ No newline at end of file diff --git a/docs/src/content/overview-installation.md b/docs/src/content/overview-installation.md new file mode 100644 index 00000000..00941cb8 --- /dev/null +++ b/docs/src/content/overview-installation.md @@ -0,0 +1,117 @@ +--- +title: "Installation" +menu: "overview" +menu: + overview: + weight: 2 +--- + +# Installation + +Please follow the steps for your operating system. + +## macOS + +The recommended way to install mitmproxy on macOS is to use +[Homebrew](https://brew.sh/): + +{{< highlight bash >}} +brew install mitmproxy +{{< / highlight >}} + +Alternatively you can download the binary-packages from our +[releases](https://github.com/mitmproxy/mitmproxy/releases/latest) page. + +## Linux + +The recommended way to install mitmproxy on Linux is to download the +binary-packages from our +[releases](https://github.com/mitmproxy/mitmproxy/releases/latest) page. + +Some Linux distributions provide community-supported mitmproxy packages through +their native package repositories (e.g., Arch Linux, Debian, Ubuntu, Kali Linux, +OpenSUSE, etc.). We are not involved in the maintenance of downstream packaging +efforts, and they often lag behind the current mitmproxy release. Please contact +the repository maintainers directly for issues with native packages. + +## Windows + +The recommended way to install mitmproxy on Windows is to download our +binary-packages from our +[releases](https://github.com/mitmproxy/mitmproxy/releases/latest) page. + +FIXME: WSL + +After installation, you'll find shortcuts for mitmweb and mitmdump in the start +menu. Both executables are added to your PATH and can be invoked from the +command line. The console interface is not supported on native Windows. + + +# Advanced Installation + +## Self-contained Pre-built Binary Packages + +For some platforms we provide pre-built binary packages containing +ready-to-run executables. This includes a self-contained Python 3 +environment, a recent OpenSSL that support ALPN and HTTP/2, and other +dependencies that would otherwise we cumbersome to compile and install. + +Please be advised that we do not update these binaries after the initial +release. This means we do not include security-related updates of our +dependencies in already released mitmproxy versions. If there is a +severe issue, we might consider releasing a bugfix release of mitmproxy +and corresponding binary packages. + +We only support the latest version of mitmproxy with bugfix and security +updates through regular minor releases. + +## Docker Images + +You can use the official mitmproxy images from +[DockerHub](https://hub.docker.com/r/mitmproxy/mitmproxy/). The same +security considerations apply as for our binary packages. + +## Installation on Linux via pip3 + +Please make sure to install Python 3.5 (or higher) and pip3 for your +distribution. If your distribution does not provide a suitable Python +version, you can use [pyenv](https://github.com/yyuu/pyenv) to get a +recent Python environment. + +{{< highlight bash >}} +sudo apt install python3-pip # Debian 8 or higher, Ubuntu 16.04 or higher +sudo dnf install python3-pip # Fedora 24 or higher +sudo pacman -S python-pip # Arch Linux +{{< / highlight >}} + +Please make sure to upgrade pip3 itself: + +{{< highlight bash >}} +sudo pip3 install -U pip +{{< / highlight >}} + +Now you can install mitmproxy via pip3: + +{{< highlight bash >}} +sudo pip3 install mitmproxy +{{< / highlight >}} + +## Installation on Windows via pip3 + +First, install the latest version of Python 3.5 or higher from the +[Python website](https://www.python.org/downloads/windows/). During +installation, make sure to select Add Python to PATH. There are no other +dependencies on Windows. + +Now you can install mitmproxy via pip3: + +{{< highlight bash >}} +pip3 install mitmproxy +{{< / highlight >}} + +## Installation from Source + +If you would like to install mitmproxy directly from source code or the +GitHub master branch, please see the our +[README](https://github.com/mitmproxy/mitmproxy/blob/master/README.rst) +on GitHub. diff --git a/docs/src/content/overview-tools.md b/docs/src/content/overview-tools.md new file mode 100644 index 00000000..7612383a --- /dev/null +++ b/docs/src/content/overview-tools.md @@ -0,0 +1,105 @@ +--- +title: "Tools" +menu: "overview" +menu: + overview: + weight: 3 +--- + +# Overview + +You should thin of the mitmproxy project's tools as a set of front-ends that +expose the same underlying functionality. We aim to have feature parity across +all of our tooling, and all tools share a common configuration mechanism and +most command-line options. + +## mitmproxy + +{{< figure src="/screenshots/mitmproxy.png" >}} + +**mitmproxy** is a console tool that allows interactive examination and +modification of HTTP traffic. It differs from mitmdump in that all flows are +kept in memory, which means that it's intended for taking and manipulating +small-ish samples. Use the `?` shortcut key to view, context-sensitive +documentation from any **mitmproxy** screen. + + +## mitmweb + +{{< figure src="/screenshots/mitmweb.png" >}} + +**mitmweb** is mitmproxy's web-based user interface that allows +interactive examination and modification of HTTP traffic. Like +mitmproxy, it differs from mitmdump in that all flows are kept in +memory, which means that it's intended for taking and manipulating +small-ish samples. + +{{% note %}} +Mitmweb is currently in beta. We consider it stable for all features +currently exposed in the UI, but it still misses a lot of mitmproxy's +features. +{{% /note %}} + + +## mitmdump + +**mitmdump** is the command-line companion to mitmproxy. It provides +tcpdump-like functionality to let you view, record, and programmatically +transform HTTP traffic. See the `--help` flag output for complete +documentation. + + +### Example: Saving traffic + +{{< highlight bash >}} +mitmdump -w outfile +{{< / highlight >}} + +Start up mitmdump in proxy mode, and write all traffic to **outfile**. + +### Filtering saved traffic + +{{< highlight bash >}} +mitmdump -nr infile -w outfile "~m post" +{{< / highlight >}} + +Start mitmdump without binding to the proxy port (`-n`), read all flows +from infile, apply the specified filter expression (only match POSTs), +and write to outfile. + +### Client replay + +{{< highlight bash >}} +mitmdump -nc outfile +{{< / highlight >}} + +Start mitmdump without binding to the proxy port (`-n`), then replay all +requests from outfile (`-c filename`). Flags combine in the obvious way, +so you can replay requests from one file, and write the resulting flows +to another: + +{{< highlight bash >}} +mitmdump -nc srcfile -w dstfile +{{< / highlight >}} + +See the [client-side replay]({{< relref "overview-features#client-side-replay" +>}}) section for more information. + +### Running a script + +{{< highlight bash >}} +mitmdump -s examples/add_header.py +{{< / highlight >}} + +This runs the **add_header.py** example script, which simply adds a new +header to all responses. + +### Scripted data transformation + +{{< highlight bash >}} +mitmdump -ns examples/add_header.py -r srcfile -w dstfile +{{< / highlight >}} + +This command loads flows from **srcfile**, transforms it according to +the specified script, then writes it back to **dstfile**. + diff --git a/docs/src/content/tute-clientreplay.md b/docs/src/content/tute-clientreplay.md new file mode 100644 index 00000000..1bf69031 --- /dev/null +++ b/docs/src/content/tute-clientreplay.md @@ -0,0 +1,69 @@ +--- +title: "Client replay" +menu: + tutes: + weight: 1 +--- + +# Client playback: a 30 second example + +My local cafe is serviced by a rickety and unreliable wireless network, +generously sponsored with ratepayers' money by our city council. After +connecting, you are redirected to an SSL-protected page that prompts you for a +username and password. Once you've entered your details, you are free to enjoy +the intermittent dropouts, treacle-like speeds and incorrectly configured +transparent proxy. + +I tend to automate this kind of thing at the first opportunity, on the theory +that time spent now will be more than made up in the long run. In this case, I +might use [Firebug](https://getfirebug.com/) to ferret out the form post +parameters and target URL, then fire up an editor to write a little script using +Python's [urllib](https://docs.python.org/library/urllib.html) to simulate a +submission. That's a lot of futzing about. With mitmproxy we can do the job in +literally 30 seconds, without having to worry about any of the details. Here's +how. + +## 1. Run mitmdump to record our HTTP conversation to a file. + +{{< highlight bash >}} +mitmdump -w wireless-login +{{< / highlight >}} + +## 2. Point your browser at the mitmdump instance. + +I use a tiny Firefox addon called [Toggle +Proxy](https://addons.mozilla.org/en-us/firefox/addon/toggle-proxy-51740/) to +switch quickly to and from mitmproxy. I'm assuming you've already [configured +your browser with mitmproxy's SSL certificate authority]({{< relref +"concepts-certificates" >}}). + +## 3. Log in as usual + +And that's it\! You now have a serialised version of the login process +in the file wireless-login, and you can replay it at any time like this: + +{{< highlight bash >}} +mitmdump -c wireless-login +{{< / highlight >}} + +## Embellishments + +We're really done at this point, but there are a couple of embellishments we +could make if we wanted. I use [wicd](https://launchpad.net/wicd) to +automatically join wireless networks I frequent, and it lets me specify a +command to run after connecting. I used the client replay command above and +voila\! - totally hands-free wireless network startup. + +We might also want to prune requests that download CSS, JS, images and so forth. +These add only a few moments to the time it takes to replay, but they're not +really needed and I somehow feel compelled to trim them anyway. So, we fire up +the mitmproxy console tool on our serialised conversation, like so: + +{{< highlight bash >}} +mitmproxy -r wireless-login +{{< / highlight >}} + +We can now go through and manually delete (using the <span +data-role="kbd">d</span> keyboard shortcut) everything we want to trim. When +we're done, we use <span data-role="kbd">w</span> to save the conversation back +to the file. diff --git a/docs/src/content/tute-highscores.md b/docs/src/content/tute-highscores.md new file mode 100644 index 00000000..f5cbd7bc --- /dev/null +++ b/docs/src/content/tute-highscores.md @@ -0,0 +1,123 @@ +--- +title: "Setting highscores on Apple GameCenter" +menu: + tutes: + weight: 2 +--- + +# Setting highscores on Apple's GameCenter + +## The setup + +In this tutorial, I'm going to show you how simple it is to creatively interfere +with Apple Game Center traffic using mitmproxy. To set things up, [install the +mitmproxy root certificate]({{< relref concepts-certificates >}}). Then start +mitmproxy on your desktop, and configure the iPhone to use it as a proxy. + +## Taking a look at the Game Center traffic + +Lets take a first look at the Game Center traffic. The game I'll use in this +tutorial is [Super Mega +Worm](https://itunes.apple.com/us/app/super-mega-worm/id388541990?mt=8) - a +great little retro-apocalyptic sidescroller for the iPhone: + +{{< figure src="/tute-highscores/supermega.png" >}} + +After finishing a game (take your time), watch the traffic flowing through +mitmproxy: + +{{< figure src="/tute-highscores/one.png" >}} + +We see a bunch of things we might expect - initialisation, the retrieval +of leaderboards and so forth. Then, right at the end, there's a POST to +this tantalising +URL: + +{{< highlight none >}} +https://service.gc.apple.com/WebObjects/GKGameStatsService.woa/wa/submitScore +{{< / highlight >}} + +The contents of the submission are particularly interesting: + +{{< highlight xml >}} +<plist version="1.0"> + <dict> + <key>scores</key> + <array> + <dict> + <key>category</key> + <string>SMW_Adv_USA1</string> + <key>context</key> + <integer>0</integer> + <key>score-value</key> + <integer>55</integer> + <key>timestamp</key> + <integer>1363515361321</integer> + </dict> + </array> + </dict> +</plist> +{{< / highlight >}} + +This is a [property list](https://en.wikipedia.org/wiki/Property_list), +containing an identifier for the game, a score (55, in this case), and a +timestamp. Looks pretty simple to mess with. + +## Modifying and replaying the score submission + +Lets edit the score submission. First, select it in mitmproxy, then +press <span data-role="kbd">enter</span> to view it. Make sure you're +viewing the request, not the response -you can use +<span data-role="kbd">tab</span> to flick between the two. Now press +<span data-role="kbd">e</span> for edit. You'll be prompted for the part +of the request you want to change - press <span data-role="kbd">r</span> +for raw body. Your preferred editor (taken from the EDITOR environment +variable) will now fire up. Lets bump the score up to something a bit +more ambitious: + +{{< highlight xml >}} +<plist version="1.0"> + <dict> + <key>scores</key> + <array> + <dict> + <key>category</key> + <string>SMW_Adv_USA1</string> + <key>context</key> + <integer>0</integer> + <key>score-value</key> + <integer>2200272667</integer> + <key>timestamp</key> + <integer>1363515361321</integer> + </dict> + </array> + </dict> +</plist> +{{< / highlight >}} + +Save the file and exit your editor. + +The final step is to replay this modified request. Simply press +<span data-role="kbd">r</span> for replay. + +## The glorious result and some intrigue + +{{< figure src="/tute-highscores/leaderboard.png" >}} + +And that's it - according to the records, I am the greatest Super Mega Worm +player of all time. + +There's a curious addendum to this tale. When I first wrote this tutorial, all +the top competitors' scores were the same: 2,147,483,647 (this is no longer the +case, because there are now so many fellow cheaters using this tutorial). If you +think that number seems familiar, you're right: it's 2^31-1, the maximum value +you can fit into a signed 32-bit int. Now let me tell you another peculiar thing +about Super Mega Worm - at the end of every game, it submits your highest +previous score to the Game Center, not your current score. This means that it +stores your highscore somewhere, and I'm guessing that it reads that stored +score back into a signed integer. So, if you **were** to cheat by the relatively +pedestrian means of modifying the saved score on your jailbroken phone, then +2^31-1 might well be the maximum score you could get. Then again, if the game +itself stores its score in a signed 32-bit int, you could get the same score +through perfect play, effectively beating the game. So, which is it in this +case? I'll leave that for you to decide. diff --git a/docs/src/examples b/docs/src/examples new file mode 120000 index 00000000..d15735c1 --- /dev/null +++ b/docs/src/examples @@ -0,0 +1 @@ +../../examples
\ No newline at end of file diff --git a/docs/src/layouts/_default/single.html b/docs/src/layouts/_default/single.html new file mode 100644 index 00000000..4a8baf53 --- /dev/null +++ b/docs/src/layouts/_default/single.html @@ -0,0 +1,10 @@ +{{ partial "header.html" . }} +<div class="columns"> + <div class="column is-one-quarter sidebody"> + {{ partial "sidebar.html" . }} + </div> + <div class="column content mainbody"> + {{.Content}} + </div> +</div> +{{ partial "footer.html" . }} diff --git a/docs/src/layouts/index.html b/docs/src/layouts/index.html new file mode 100644 index 00000000..4a8baf53 --- /dev/null +++ b/docs/src/layouts/index.html @@ -0,0 +1,10 @@ +{{ partial "header.html" . }} +<div class="columns"> + <div class="column is-one-quarter sidebody"> + {{ partial "sidebar.html" . }} + </div> + <div class="column content mainbody"> + {{.Content}} + </div> +</div> +{{ partial "footer.html" . }} diff --git a/docs/src/layouts/partials/sidebar.html b/docs/src/layouts/partials/sidebar.html new file mode 100644 index 00000000..ef853fc6 --- /dev/null +++ b/docs/src/layouts/partials/sidebar.html @@ -0,0 +1,24 @@ +<div class="sidebar"> + <div class="brand"> + <img src='{{"logo-docs.png" | relURL}}' alt="mitmproxy docs"> + </div> + <div class="version"> + <span class="tag is-info is-rounded is-medium">v3.x</span> + </div> + <aside class="menu"> + <p class="menu-label"> Overview </p> + {{ partial "sidemenu" (dict "ctx" . "menuname" "overview") }} + + <p class="menu-label">Core concepts</p> + {{ partial "sidemenu" (dict "ctx" . "menuname" "concepts") }} + + <p class="menu-label"> Addon Development </p> + {{ partial "sidemenu" (dict "ctx" . "menuname" "addons") }} + + <p class="menu-label"> HOWTOs </p> + {{ partial "sidemenu" (dict "ctx" . "menuname" "howto") }} + + <p class="menu-label"> Tutorials </p> + {{ partial "sidemenu" (dict "ctx" . "menuname" "tutes") }} + </aside> +</div>
\ No newline at end of file diff --git a/docs/src/layouts/partials/sidemenu.html b/docs/src/layouts/partials/sidemenu.html new file mode 100644 index 00000000..035cc59e --- /dev/null +++ b/docs/src/layouts/partials/sidemenu.html @@ -0,0 +1,11 @@ +<ul class="menu-list"> + {{$menu := (index .ctx.Site.Menus .menuname) }} + {{ $currentPage := .ctx }} + {{ $menuname := .menuname }} + {{ range $menu.ByWeight }} + <li > + <a class="{{ if $currentPage.IsMenuCurrent $menuname . }}is-active{{ end }}" + href="{{.URL}}">{{ .Name }}</a> + </li> + {{end}} +</ul>
\ No newline at end of file diff --git a/docs/src/layouts/shortcodes/example.html b/docs/src/layouts/shortcodes/example.html new file mode 100644 index 00000000..d23cabb6 --- /dev/null +++ b/docs/src/layouts/shortcodes/example.html @@ -0,0 +1,5 @@ + +<div class="example"> +{{ highlight (trim (readFile (.Get "src")) "\n\r") (.Get "lang") "" }} +<div class="path">{{ (.Get "src" )}}</div> +</div>
\ No newline at end of file diff --git a/docs/src/layouts/shortcodes/note.html b/docs/src/layouts/shortcodes/note.html new file mode 100644 index 00000000..f3db72c4 --- /dev/null +++ b/docs/src/layouts/shortcodes/note.html @@ -0,0 +1 @@ +<div class="notification is-info">{{.Inner}}</div> diff --git a/docs/src/static/certinstall-webapp.png b/docs/src/static/certinstall-webapp.png Binary files differnew file mode 100644 index 00000000..10e795cd --- /dev/null +++ b/docs/src/static/certinstall-webapp.png diff --git a/docs/src/static/logo-docs.png b/docs/src/static/logo-docs.png Binary files differnew file mode 100644 index 00000000..b37dbd85 --- /dev/null +++ b/docs/src/static/logo-docs.png diff --git a/docs/src/static/schematics/how-mitmproxy-works-explicit-https.png b/docs/src/static/schematics/how-mitmproxy-works-explicit-https.png Binary files differnew file mode 100644 index 00000000..1f1ca023 --- /dev/null +++ b/docs/src/static/schematics/how-mitmproxy-works-explicit-https.png diff --git a/docs/src/static/schematics/how-mitmproxy-works-explicit.png b/docs/src/static/schematics/how-mitmproxy-works-explicit.png Binary files differnew file mode 100644 index 00000000..c9ba26a7 --- /dev/null +++ b/docs/src/static/schematics/how-mitmproxy-works-explicit.png diff --git a/docs/src/static/schematics/how-mitmproxy-works-transparent-https.png b/docs/src/static/schematics/how-mitmproxy-works-transparent-https.png Binary files differnew file mode 100644 index 00000000..559cddd2 --- /dev/null +++ b/docs/src/static/schematics/how-mitmproxy-works-transparent-https.png diff --git a/docs/src/static/schematics/how-mitmproxy-works-transparent.png b/docs/src/static/schematics/how-mitmproxy-works-transparent.png Binary files differnew file mode 100644 index 00000000..3994d681 --- /dev/null +++ b/docs/src/static/schematics/how-mitmproxy-works-transparent.png diff --git a/docs/src/static/schematics/proxy-modes-flowchart.png b/docs/src/static/schematics/proxy-modes-flowchart.png Binary files differnew file mode 100644 index 00000000..e9568dac --- /dev/null +++ b/docs/src/static/schematics/proxy-modes-flowchart.png diff --git a/docs/src/static/schematics/proxy-modes-regular.png b/docs/src/static/schematics/proxy-modes-regular.png Binary files differnew file mode 100644 index 00000000..95bada08 --- /dev/null +++ b/docs/src/static/schematics/proxy-modes-regular.png diff --git a/docs/src/static/schematics/proxy-modes-reverse.png b/docs/src/static/schematics/proxy-modes-reverse.png Binary files differnew file mode 100644 index 00000000..071d3fc8 --- /dev/null +++ b/docs/src/static/schematics/proxy-modes-reverse.png diff --git a/docs/src/static/schematics/proxy-modes-transparent-1.png b/docs/src/static/schematics/proxy-modes-transparent-1.png Binary files differnew file mode 100644 index 00000000..002e0e76 --- /dev/null +++ b/docs/src/static/schematics/proxy-modes-transparent-1.png diff --git a/docs/src/static/schematics/proxy-modes-transparent-2.png b/docs/src/static/schematics/proxy-modes-transparent-2.png Binary files differnew file mode 100644 index 00000000..41997b05 --- /dev/null +++ b/docs/src/static/schematics/proxy-modes-transparent-2.png diff --git a/docs/src/static/schematics/proxy-modes-transparent-3.png b/docs/src/static/schematics/proxy-modes-transparent-3.png Binary files differnew file mode 100644 index 00000000..ee26cb4f --- /dev/null +++ b/docs/src/static/schematics/proxy-modes-transparent-3.png diff --git a/docs/src/static/schematics/proxy-modes-transparent-wrong.png b/docs/src/static/schematics/proxy-modes-transparent-wrong.png Binary files differnew file mode 100644 index 00000000..ca501e93 --- /dev/null +++ b/docs/src/static/schematics/proxy-modes-transparent-wrong.png diff --git a/docs/src/static/schematics/proxy-modes-upstream.png b/docs/src/static/schematics/proxy-modes-upstream.png Binary files differnew file mode 100644 index 00000000..d40a6494 --- /dev/null +++ b/docs/src/static/schematics/proxy-modes-upstream.png diff --git a/docs/src/static/schematics/proxy-modes.pdf b/docs/src/static/schematics/proxy-modes.pdf Binary files differnew file mode 100644 index 00000000..f07ea05e --- /dev/null +++ b/docs/src/static/schematics/proxy-modes.pdf diff --git a/docs/src/static/screenshots/mitmproxy.png b/docs/src/static/screenshots/mitmproxy.png Binary files differnew file mode 100644 index 00000000..3fd14b9d --- /dev/null +++ b/docs/src/static/screenshots/mitmproxy.png diff --git a/docs/src/static/screenshots/mitmweb.png b/docs/src/static/screenshots/mitmweb.png Binary files differnew file mode 100644 index 00000000..5f0cc925 --- /dev/null +++ b/docs/src/static/screenshots/mitmweb.png diff --git a/docs/src/static/transparent-vms/step1_proxy.png b/docs/src/static/transparent-vms/step1_proxy.png Binary files differnew file mode 100644 index 00000000..a0c94484 --- /dev/null +++ b/docs/src/static/transparent-vms/step1_proxy.png diff --git a/docs/src/static/transparent-vms/step1_vbox_eth0.png b/docs/src/static/transparent-vms/step1_vbox_eth0.png Binary files differnew file mode 100644 index 00000000..4b7b4e9b --- /dev/null +++ b/docs/src/static/transparent-vms/step1_vbox_eth0.png diff --git a/docs/src/static/transparent-vms/step1_vbox_eth1.png b/docs/src/static/transparent-vms/step1_vbox_eth1.png Binary files differnew file mode 100644 index 00000000..b994d4cb --- /dev/null +++ b/docs/src/static/transparent-vms/step1_vbox_eth1.png diff --git a/docs/src/static/transparent-vms/step2_proxied_vm.png b/docs/src/static/transparent-vms/step2_proxied_vm.png Binary files differnew file mode 100644 index 00000000..2046cc57 --- /dev/null +++ b/docs/src/static/transparent-vms/step2_proxied_vm.png diff --git a/docs/src/static/tute-highscores/leaderboard.png b/docs/src/static/tute-highscores/leaderboard.png Binary files differnew file mode 100644 index 00000000..c1be8df5 --- /dev/null +++ b/docs/src/static/tute-highscores/leaderboard.png diff --git a/docs/src/static/tute-highscores/one.png b/docs/src/static/tute-highscores/one.png Binary files differnew file mode 100644 index 00000000..78a636cf --- /dev/null +++ b/docs/src/static/tute-highscores/one.png diff --git a/docs/src/static/tute-highscores/supermega.png b/docs/src/static/tute-highscores/supermega.png Binary files differnew file mode 100644 index 00000000..d416f71f --- /dev/null +++ b/docs/src/static/tute-highscores/supermega.png diff --git a/docs/src/themes/mitmproxydocs/archetypes/default.md b/docs/src/themes/mitmproxydocs/archetypes/default.md new file mode 100644 index 00000000..03855e35 --- /dev/null +++ b/docs/src/themes/mitmproxydocs/archetypes/default.md @@ -0,0 +1,4 @@ ++++ +title = "" +date = "" ++++
\ No newline at end of file diff --git a/docs/src/themes/mitmproxydocs/layouts/_default/list.html b/docs/src/themes/mitmproxydocs/layouts/_default/list.html new file mode 100644 index 00000000..b88c94ad --- /dev/null +++ b/docs/src/themes/mitmproxydocs/layouts/_default/list.html @@ -0,0 +1,25 @@ +{{ partial "header.html" . }} +<div class="section"> + <div class="container"> + <div class="columns"> + <div class="column is-8 is-offset-2"> + <div class="section"> + <div class="content"> + {{ range .Data.Pages.GroupByDate "2006" }} + <h2>{{ .Key }}</h2> + <ul> + {{ range .Pages }} + <li> + <time>{{.Date.Format "02 Jan 2006" }}</time> - + <a href="{{ .Permalink }}">{{ .Title }}</a> + </li> + {{ end }} + </ul> + {{ end }} + </div> + </div> + </div> + </div> + </div> +</div> +{{ partial "footer.html" . }} diff --git a/docs/src/themes/mitmproxydocs/layouts/_default/single.html b/docs/src/themes/mitmproxydocs/layouts/_default/single.html new file mode 100644 index 00000000..83016450 --- /dev/null +++ b/docs/src/themes/mitmproxydocs/layouts/_default/single.html @@ -0,0 +1,7 @@ +{{ partial "header.html" . }} +<div class="section"> + <div class="container"> + {{ .Content }} + </div> +</div> +{{ partial "footer.html" . }} diff --git a/docs/src/themes/mitmproxydocs/layouts/partials/footer.html b/docs/src/themes/mitmproxydocs/layouts/partials/footer.html new file mode 100644 index 00000000..308b1d01 --- /dev/null +++ b/docs/src/themes/mitmproxydocs/layouts/partials/footer.html @@ -0,0 +1,2 @@ +</body> +</html> diff --git a/docs/src/themes/mitmproxydocs/layouts/partials/header.html b/docs/src/themes/mitmproxydocs/layouts/partials/header.html new file mode 100644 index 00000000..559115f0 --- /dev/null +++ b/docs/src/themes/mitmproxydocs/layouts/partials/header.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="{{ .Site.LanguageCode | default " en-us" }}"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + + <link rel="icon" type="image/png" href="/favicon.ico"> + <title>{{ .Title }}</title> + {{ with .Site.Params.description }} + <meta name="description" content="{{ . }}"> + {{ end }} + {{ with .Site.Params.author }} + <meta name="author" content="{{ . }}"> + {{ end }} + <link rel="stylesheet" href="/css/style.css"> + {{ if .RSSLink -}} + <link href="{{ .RSSLink }}" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}"> + {{- end }} + {{ .Hugo.Generator }} +</head> +<body> diff --git a/docs/src/themes/mitmproxydocs/static/css/style.css b/docs/src/themes/mitmproxydocs/static/css/style.css new file mode 100644 index 00000000..14823447 --- /dev/null +++ b/docs/src/themes/mitmproxydocs/static/css/style.css @@ -0,0 +1,6756 @@ +/* Background */ +.chroma { + color: #f8f8f2; + background-color: #272822; } + +/* Error */ +.chroma .err { + color: #960050; + background-color: #1e0010; } + +/* LineTableTD */ +.chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; } + +/* LineTable */ +.chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + width: 100%; + overflow: auto; + display: block; } + +/* LineHighlight */ +.chroma .hl { + display: block; + width: 100%; + background-color: #ffffcc; } + +/* LineNumbersTable */ +.chroma .lnt { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + display: block; } + +/* LineNumbers */ +.chroma .ln { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; } + +/* Keyword */ +.chroma .k { + color: #66d9ef; } + +/* KeywordConstant */ +.chroma .kc { + color: #66d9ef; } + +/* KeywordDeclaration */ +.chroma .kd { + color: #66d9ef; } + +/* KeywordNamespace */ +.chroma .kn { + color: #f92672; } + +/* KeywordPseudo */ +.chroma .kp { + color: #66d9ef; } + +/* KeywordReserved */ +.chroma .kr { + color: #66d9ef; } + +/* KeywordType */ +.chroma .kt { + color: #66d9ef; } + +/* NameAttribute */ +.chroma .na { + color: #a6e22e; } + +/* NameClass */ +.chroma .nc { + color: #a6e22e; } + +/* NameConstant */ +.chroma .no { + color: #66d9ef; } + +/* NameDecorator */ +.chroma .nd { + color: #a6e22e; } + +/* NameException */ +.chroma .ne { + color: #a6e22e; } + +/* NameFunction */ +.chroma .nf { + color: #a6e22e; } + +/* NameOther */ +.chroma .nx { + color: #a6e22e; } + +/* NameTag */ +.chroma .nt { + color: #f92672; } + +/* Literal */ +.chroma .l { + color: #ae81ff; } + +/* LiteralDate */ +.chroma .ld { + color: #e6db74; } + +/* LiteralString */ +.chroma .s { + color: #e6db74; } + +/* LiteralStringAffix */ +.chroma .sa { + color: #e6db74; } + +/* LiteralStringBacktick */ +.chroma .sb { + color: #e6db74; } + +/* LiteralStringChar */ +.chroma .sc { + color: #e6db74; } + +/* LiteralStringDelimiter */ +.chroma .dl { + color: #e6db74; } + +/* LiteralStringDoc */ +.chroma .sd { + color: #e6db74; } + +/* LiteralStringDouble */ +.chroma .s2 { + color: #e6db74; } + +/* LiteralStringEscape */ +.chroma .se { + color: #ae81ff; } + +/* LiteralStringHeredoc */ +.chroma .sh { + color: #e6db74; } + +/* LiteralStringInterpol */ +.chroma .si { + color: #e6db74; } + +/* LiteralStringOther */ +.chroma .sx { + color: #e6db74; } + +/* LiteralStringRegex */ +.chroma .sr { + color: #e6db74; } + +/* LiteralStringSingle */ +.chroma .s1 { + color: #e6db74; } + +/* LiteralStringSymbol */ +.chroma .ss { + color: #e6db74; } + +/* LiteralNumber */ +.chroma .m { + color: #ae81ff; } + +/* LiteralNumberBin */ +.chroma .mb { + color: #ae81ff; } + +/* LiteralNumberFloat */ +.chroma .mf { + color: #ae81ff; } + +/* LiteralNumberHex */ +.chroma .mh { + color: #ae81ff; } + +/* LiteralNumberInteger */ +.chroma .mi { + color: #ae81ff; } + +/* LiteralNumberIntegerLong */ +.chroma .il { + color: #ae81ff; } + +/* LiteralNumberOct */ +.chroma .mo { + color: #ae81ff; } + +/* Operator */ +.chroma .o { + color: #f92672; } + +/* OperatorWord */ +.chroma .ow { + color: #f92672; } + +/* Comment */ +.chroma .c { + color: #75715e; } + +/* CommentHashbang */ +.chroma .ch { + color: #75715e; } + +/* CommentMultiline */ +.chroma .cm { + color: #75715e; } + +/* CommentSingle */ +.chroma .c1 { + color: #75715e; } + +/* CommentSpecial */ +.chroma .cs { + color: #75715e; } + +/* CommentPreproc */ +.chroma .cp { + color: #75715e; } + +/* CommentPreprocFile */ +.chroma .cpf { + color: #75715e; } + +/* GenericDeleted */ +.chroma .gd { + color: #f92672; } + +/* GenericEmph */ +.chroma .ge { + font-style: italic; } + +/* GenericInserted */ +.chroma .gi { + color: #a6e22e; } + +/* GenericStrong */ +.chroma .gs { + font-weight: bold; } + +/* GenericSubheading */ +.chroma .gu { + color: #75715e; } + +@keyframes spinAround { + from { + transform: rotate(0deg); } + to { + transform: rotate(359deg); } } + +/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */ +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; } + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; + font-weight: normal; } + +ul { + list-style: none; } + +button, +input, +select, +textarea { + margin: 0; } + +html { + box-sizing: border-box; } + +* { + box-sizing: inherit; } + *:before, *:after { + box-sizing: inherit; } + +img, +embed, +object, +audio, +video { + max-width: 100%; } + +iframe { + border: 0; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +td, +th { + padding: 0; + text-align: left; } + +html { + background-color: white; + font-size: 16px; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + min-width: 300px; + overflow-x: hidden; + overflow-y: scroll; + text-rendering: optimizeLegibility; + text-size-adjust: 100%; } + +article, +aside, +figure, +footer, +header, +hgroup, +section { + display: block; } + +body, +button, +input, +select, +textarea { + font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif, "Font Awesome 5 Free", "Font Awesome 5 Brands"; } + +code, +pre { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: auto; + font-family: monospace; } + +body { + color: #4a4a4a; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; } + +a { + color: #3273dc; + cursor: pointer; + text-decoration: none; } + a strong { + color: currentColor; } + a:hover { + color: #363636; } + +code { + background-color: whitesmoke; + color: #ff3860; + font-size: 0.875em; + font-weight: normal; + padding: 0.25em 0.5em 0.25em; } + +hr { + background-color: #dbdbdb; + border: none; + display: block; + height: 1px; + margin: 1.5rem 0; } + +img { + height: auto; + max-width: 100%; } + +input[type="checkbox"], +input[type="radio"] { + vertical-align: baseline; } + +small { + font-size: 0.875em; } + +span { + font-style: inherit; + font-weight: inherit; } + +strong { + color: #363636; + font-weight: 700; } + +pre { + -webkit-overflow-scrolling: touch; + background-color: whitesmoke; + color: #4a4a4a; + font-size: 0.875em; + overflow-x: auto; + padding: 1.25rem 1.5rem; + white-space: pre; + word-wrap: normal; } + pre code { + background-color: transparent; + color: currentColor; + font-size: 1em; + padding: 0; } + +table td, +table th { + text-align: left; + vertical-align: top; } + +table th { + color: #363636; } + +.is-clearfix:after { + clear: both; + content: " "; + display: table; } + +.is-pulled-left { + float: left !important; } + +.is-pulled-right { + float: right !important; } + +.is-clipped { + overflow: hidden !important; } + +.is-overlay { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; } + +.is-size-1 { + font-size: 3rem !important; } + +.is-size-2 { + font-size: 2.5rem !important; } + +.is-size-3 { + font-size: 2rem !important; } + +.is-size-4 { + font-size: 1.5rem !important; } + +.is-size-5 { + font-size: 1.25rem !important; } + +.is-size-6 { + font-size: 1rem !important; } + +.is-size-7 { + font-size: 0.75rem !important; } + +@media screen and (max-width: 768px) { + .is-size-1-mobile { + font-size: 3rem !important; } + .is-size-2-mobile { + font-size: 2.5rem !important; } + .is-size-3-mobile { + font-size: 2rem !important; } + .is-size-4-mobile { + font-size: 1.5rem !important; } + .is-size-5-mobile { + font-size: 1.25rem !important; } + .is-size-6-mobile { + font-size: 1rem !important; } + .is-size-7-mobile { + font-size: 0.75rem !important; } } + +@media screen and (min-width: 769px), print { + .is-size-1-tablet { + font-size: 3rem !important; } + .is-size-2-tablet { + font-size: 2.5rem !important; } + .is-size-3-tablet { + font-size: 2rem !important; } + .is-size-4-tablet { + font-size: 1.5rem !important; } + .is-size-5-tablet { + font-size: 1.25rem !important; } + .is-size-6-tablet { + font-size: 1rem !important; } + .is-size-7-tablet { + font-size: 0.75rem !important; } } + +@media screen and (max-width: 1023px) { + .is-size-1-touch { + font-size: 3rem !important; } + .is-size-2-touch { + font-size: 2.5rem !important; } + .is-size-3-touch { + font-size: 2rem !important; } + .is-size-4-touch { + font-size: 1.5rem !important; } + .is-size-5-touch { + font-size: 1.25rem !important; } + .is-size-6-touch { + font-size: 1rem !important; } + .is-size-7-touch { + font-size: 0.75rem !important; } } + +@media screen and (min-width: 1024px) { + .is-size-1-desktop { + font-size: 3rem !important; } + .is-size-2-desktop { + font-size: 2.5rem !important; } + .is-size-3-desktop { + font-size: 2rem !important; } + .is-size-4-desktop { + font-size: 1.5rem !important; } + .is-size-5-desktop { + font-size: 1.25rem !important; } + .is-size-6-desktop { + font-size: 1rem !important; } + .is-size-7-desktop { + font-size: 0.75rem !important; } } + +@media screen and (min-width: 1216px) { + .is-size-1-widescreen { + font-size: 3rem !important; } + .is-size-2-widescreen { + font-size: 2.5rem !important; } + .is-size-3-widescreen { + font-size: 2rem !important; } + .is-size-4-widescreen { + font-size: 1.5rem !important; } + .is-size-5-widescreen { + font-size: 1.25rem !important; } + .is-size-6-widescreen { + font-size: 1rem !important; } + .is-size-7-widescreen { + font-size: 0.75rem !important; } } + +@media screen and (min-width: 1408px) { + .is-size-1-fullhd { + font-size: 3rem !important; } + .is-size-2-fullhd { + font-size: 2.5rem !important; } + .is-size-3-fullhd { + font-size: 2rem !important; } + .is-size-4-fullhd { + font-size: 1.5rem !important; } + .is-size-5-fullhd { + font-size: 1.25rem !important; } + .is-size-6-fullhd { + font-size: 1rem !important; } + .is-size-7-fullhd { + font-size: 0.75rem !important; } } + +.has-text-centered { + text-align: center !important; } + +@media screen and (max-width: 768px) { + .has-text-centered-mobile { + text-align: center !important; } } + +@media screen and (min-width: 769px), print { + .has-text-centered-tablet { + text-align: center !important; } } + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-centered-tablet-only { + text-align: center !important; } } + +@media screen and (max-width: 1023px) { + .has-text-centered-touch { + text-align: center !important; } } + +@media screen and (min-width: 1024px) { + .has-text-centered-desktop { + text-align: center !important; } } + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-centered-desktop-only { + text-align: center !important; } } + +@media screen and (min-width: 1216px) { + .has-text-centered-widescreen { + text-align: center !important; } } + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-centered-widescreen-only { + text-align: center !important; } } + +@media screen and (min-width: 1408px) { + .has-text-centered-fullhd { + text-align: center !important; } } + +.has-text-justified { + text-align: justify !important; } + +@media screen and (max-width: 768px) { + .has-text-justified-mobile { + text-align: justify !important; } } + +@media screen and (min-width: 769px), print { + .has-text-justified-tablet { + text-align: justify !important; } } + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-justified-tablet-only { + text-align: justify !important; } } + +@media screen and (max-width: 1023px) { + .has-text-justified-touch { + text-align: justify !important; } } + +@media screen and (min-width: 1024px) { + .has-text-justified-desktop { + text-align: justify !important; } } + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-justified-desktop-only { + text-align: justify !important; } } + +@media screen and (min-width: 1216px) { + .has-text-justified-widescreen { + text-align: justify !important; } } + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-justified-widescreen-only { + text-align: justify !important; } } + +@media screen and (min-width: 1408px) { + .has-text-justified-fullhd { + text-align: justify !important; } } + +.has-text-left { + text-align: left !important; } + +@media screen and (max-width: 768px) { + .has-text-left-mobile { + text-align: left !important; } } + +@media screen and (min-width: 769px), print { + .has-text-left-tablet { + text-align: left !important; } } + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-left-tablet-only { + text-align: left !important; } } + +@media screen and (max-width: 1023px) { + .has-text-left-touch { + text-align: left !important; } } + +@media screen and (min-width: 1024px) { + .has-text-left-desktop { + text-align: left !important; } } + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-left-desktop-only { + text-align: left !important; } } + +@media screen and (min-width: 1216px) { + .has-text-left-widescreen { + text-align: left !important; } } + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-left-widescreen-only { + text-align: left !important; } } + +@media screen and (min-width: 1408px) { + .has-text-left-fullhd { + text-align: left !important; } } + +.has-text-right { + text-align: right !important; } + +@media screen and (max-width: 768px) { + .has-text-right-mobile { + text-align: right !important; } } + +@media screen and (min-width: 769px), print { + .has-text-right-tablet { + text-align: right !important; } } + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-right-tablet-only { + text-align: right !important; } } + +@media screen and (max-width: 1023px) { + .has-text-right-touch { + text-align: right !important; } } + +@media screen and (min-width: 1024px) { + .has-text-right-desktop { + text-align: right !important; } } + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-right-desktop-only { + text-align: right !important; } } + +@media screen and (min-width: 1216px) { + .has-text-right-widescreen { + text-align: right !important; } } + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-right-widescreen-only { + text-align: right !important; } } + +@media screen and (min-width: 1408px) { + .has-text-right-fullhd { + text-align: right !important; } } + +.is-capitalized { + text-transform: capitalize !important; } + +.is-lowercase { + text-transform: lowercase !important; } + +.is-uppercase { + text-transform: uppercase !important; } + +.has-text-white { + color: white !important; } + +a.has-text-white:hover, a.has-text-white:focus { + color: #e6e6e6 !important; } + +.has-text-black { + color: #0a0a0a !important; } + +a.has-text-black:hover, a.has-text-black:focus { + color: black !important; } + +.has-text-light { + color: whitesmoke !important; } + +a.has-text-light:hover, a.has-text-light:focus { + color: #dbdbdb !important; } + +.has-text-dark { + color: #363636 !important; } + +a.has-text-dark:hover, a.has-text-dark:focus { + color: #1c1c1c !important; } + +.has-text-primary { + color: #C93312 !important; } + +a.has-text-primary:hover, a.has-text-primary:focus { + color: #9a270e !important; } + +.has-text-link { + color: #3273dc !important; } + +a.has-text-link:hover, a.has-text-link:focus { + color: #205bbc !important; } + +.has-text-info { + color: #209cee !important; } + +a.has-text-info:hover, a.has-text-info:focus { + color: #0f81cc !important; } + +.has-text-success { + color: #23d160 !important; } + +a.has-text-success:hover, a.has-text-success:focus { + color: #1ca64c !important; } + +.has-text-warning { + color: #ffdd57 !important; } + +a.has-text-warning:hover, a.has-text-warning:focus { + color: #ffd324 !important; } + +.has-text-danger { + color: #ff3860 !important; } + +a.has-text-danger:hover, a.has-text-danger:focus { + color: #ff0537 !important; } + +.has-text-black-bis { + color: #121212 !important; } + +.has-text-black-ter { + color: #242424 !important; } + +.has-text-grey-darker { + color: #363636 !important; } + +.has-text-grey-dark { + color: #4a4a4a !important; } + +.has-text-grey { + color: #7a7a7a !important; } + +.has-text-grey-light { + color: #b5b5b5 !important; } + +.has-text-grey-lighter { + color: #dbdbdb !important; } + +.has-text-white-ter { + color: whitesmoke !important; } + +.has-text-white-bis { + color: #fafafa !important; } + +.has-text-weight-light { + font-weight: 300 !important; } + +.has-text-weight-normal { + font-weight: 400 !important; } + +.has-text-weight-semibold { + font-weight: 600 !important; } + +.has-text-weight-bold { + font-weight: 700 !important; } + +.is-block { + display: block !important; } + +@media screen and (max-width: 768px) { + .is-block-mobile { + display: block !important; } } + +@media screen and (min-width: 769px), print { + .is-block-tablet { + display: block !important; } } + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-block-tablet-only { + display: block !important; } } + +@media screen and (max-width: 1023px) { + .is-block-touch { + display: block !important; } } + +@media screen and (min-width: 1024px) { + .is-block-desktop { + display: block !important; } } + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-block-desktop-only { + display: block !important; } } + +@media screen and (min-width: 1216px) { + .is-block-widescreen { + display: block !important; } } + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-block-widescreen-only { + display: block !important; } } + +@media screen and (min-width: 1408px) { + .is-block-fullhd { + display: block !important; } } + +.is-flex { + display: flex !important; } + +@media screen and (max-width: 768px) { + .is-flex-mobile { + display: flex !important; } } + +@media screen and (min-width: 769px), print { + .is-flex-tablet { + display: flex !important; } } + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-flex-tablet-only { + display: flex !important; } } + +@media screen and (max-width: 1023px) { + .is-flex-touch { + display: flex !important; } } + +@media screen and (min-width: 1024px) { + .is-flex-desktop { + display: flex !important; } } + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-flex-desktop-only { + display: flex !important; } } + +@media screen and (min-width: 1216px) { + .is-flex-widescreen { + display: flex !important; } } + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-flex-widescreen-only { + display: flex !important; } } + +@media screen and (min-width: 1408px) { + .is-flex-fullhd { + display: flex !important; } } + +.is-inline { + display: inline !important; } + +@media screen and (max-width: 768px) { + .is-inline-mobile { + display: inline !important; } } + +@media screen and (min-width: 769px), print { + .is-inline-tablet { + display: inline !important; } } + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-inline-tablet-only { + display: inline !important; } } + +@media screen and (max-width: 1023px) { + .is-inline-touch { + display: inline !important; } } + +@media screen and (min-width: 1024px) { + .is-inline-desktop { + display: inline !important; } } + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-inline-desktop-only { + display: inline !important; } } + +@media screen and (min-width: 1216px) { + .is-inline-widescreen { + display: inline !important; } } + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-inline-widescreen-only { + display: inline !important; } } + +@media screen and (min-width: 1408px) { + .is-inline-fullhd { + display: inline !important; } } + +.is-inline-block { + display: inline-block !important; } + +@media screen and (max-width: 768px) { + .is-inline-block-mobile { + display: inline-block !important; } } + +@media screen and (min-width: 769px), print { + .is-inline-block-tablet { + display: inline-block !important; } } + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-inline-block-tablet-only { + display: inline-block !important; } } + +@media screen and (max-width: 1023px) { + .is-inline-block-touch { + display: inline-block !important; } } + +@media screen and (min-width: 1024px) { + .is-inline-block-desktop { + display: inline-block !important; } } + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-inline-block-desktop-only { + display: inline-block !important; } } + +@media screen and (min-width: 1216px) { + .is-inline-block-widescreen { + display: inline-block !important; } } + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-inline-block-widescreen-only { + display: inline-block !important; } } + +@media screen and (min-width: 1408px) { + .is-inline-block-fullhd { + display: inline-block !important; } } + +.is-inline-flex { + display: inline-flex !important; } + +@media screen and (max-width: 768px) { + .is-inline-flex-mobile { + display: inline-flex !important; } } + +@media screen and (min-width: 769px), print { + .is-inline-flex-tablet { + display: inline-flex !important; } } + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-inline-flex-tablet-only { + display: inline-flex !important; } } + +@media screen and (max-width: 1023px) { + .is-inline-flex-touch { + display: inline-flex !important; } } + +@media screen and (min-width: 1024px) { + .is-inline-flex-desktop { + display: inline-flex !important; } } + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-inline-flex-desktop-only { + display: inline-flex !important; } } + +@media screen and (min-width: 1216px) { + .is-inline-flex-widescreen { + display: inline-flex !important; } } + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-inline-flex-widescreen-only { + display: inline-flex !important; } } + +@media screen and (min-width: 1408px) { + .is-inline-flex-fullhd { + display: inline-flex !important; } } + +.is-hidden { + display: none !important; } + +@media screen and (max-width: 768px) { + .is-hidden-mobile { + display: none !important; } } + +@media screen and (min-width: 769px), print { + .is-hidden-tablet { + display: none !important; } } + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-hidden-tablet-only { + display: none !important; } } + +@media screen and (max-width: 1023px) { + .is-hidden-touch { + display: none !important; } } + +@media screen and (min-width: 1024px) { + .is-hidden-desktop { + display: none !important; } } + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-hidden-desktop-only { + display: none !important; } } + +@media screen and (min-width: 1216px) { + .is-hidden-widescreen { + display: none !important; } } + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-hidden-widescreen-only { + display: none !important; } } + +@media screen and (min-width: 1408px) { + .is-hidden-fullhd { + display: none !important; } } + +.is-invisible { + visibility: hidden !important; } + +@media screen and (max-width: 768px) { + .is-invisible-mobile { + visibility: hidden !important; } } + +@media screen and (min-width: 769px), print { + .is-invisible-tablet { + visibility: hidden !important; } } + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-invisible-tablet-only { + visibility: hidden !important; } } + +@media screen and (max-width: 1023px) { + .is-invisible-touch { + visibility: hidden !important; } } + +@media screen and (min-width: 1024px) { + .is-invisible-desktop { + visibility: hidden !important; } } + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-invisible-desktop-only { + visibility: hidden !important; } } + +@media screen and (min-width: 1216px) { + .is-invisible-widescreen { + visibility: hidden !important; } } + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-invisible-widescreen-only { + visibility: hidden !important; } } + +@media screen and (min-width: 1408px) { + .is-invisible-fullhd { + visibility: hidden !important; } } + +.is-marginless { + margin: 0 !important; } + +.is-paddingless { + padding: 0 !important; } + +.is-radiusless { + border-radius: 0 !important; } + +.is-shadowless { + box-shadow: none !important; } + +.is-unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.column { + display: block; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + padding: 0.75rem; } + .columns.is-mobile > .column.is-narrow { + flex: none; } + .columns.is-mobile > .column.is-full { + flex: none; + width: 100%; } + .columns.is-mobile > .column.is-three-quarters { + flex: none; + width: 75%; } + .columns.is-mobile > .column.is-two-thirds { + flex: none; + width: 66.6666%; } + .columns.is-mobile > .column.is-half { + flex: none; + width: 50%; } + .columns.is-mobile > .column.is-one-third { + flex: none; + width: 33.3333%; } + .columns.is-mobile > .column.is-one-quarter { + flex: none; + width: 25%; } + .columns.is-mobile > .column.is-one-fifth { + flex: none; + width: 20%; } + .columns.is-mobile > .column.is-two-fifths { + flex: none; + width: 40%; } + .columns.is-mobile > .column.is-three-fifths { + flex: none; + width: 60%; } + .columns.is-mobile > .column.is-four-fifths { + flex: none; + width: 80%; } + .columns.is-mobile > .column.is-offset-three-quarters { + margin-left: 75%; } + .columns.is-mobile > .column.is-offset-two-thirds { + margin-left: 66.6666%; } + .columns.is-mobile > .column.is-offset-half { + margin-left: 50%; } + .columns.is-mobile > .column.is-offset-one-third { + margin-left: 33.3333%; } + .columns.is-mobile > .column.is-offset-one-quarter { + margin-left: 25%; } + .columns.is-mobile > .column.is-offset-one-fifth { + margin-left: 20%; } + .columns.is-mobile > .column.is-offset-two-fifths { + margin-left: 40%; } + .columns.is-mobile > .column.is-offset-three-fifths { + margin-left: 60%; } + .columns.is-mobile > .column.is-offset-four-fifths { + margin-left: 80%; } + .columns.is-mobile > .column.is-1 { + flex: none; + width: 8.33333%; } + .columns.is-mobile > .column.is-offset-1 { + margin-left: 8.33333%; } + .columns.is-mobile > .column.is-2 { + flex: none; + width: 16.66667%; } + .columns.is-mobile > .column.is-offset-2 { + margin-left: 16.66667%; } + .columns.is-mobile > .column.is-3 { + flex: none; + width: 25%; } + .columns.is-mobile > .column.is-offset-3 { + margin-left: 25%; } + .columns.is-mobile > .column.is-4 { + flex: none; + width: 33.33333%; } + .columns.is-mobile > .column.is-offset-4 { + margin-left: 33.33333%; } + .columns.is-mobile > .column.is-5 { + flex: none; + width: 41.66667%; } + .columns.is-mobile > .column.is-offset-5 { + margin-left: 41.66667%; } + .columns.is-mobile > .column.is-6 { + flex: none; + width: 50%; } + .columns.is-mobile > .column.is-offset-6 { + margin-left: 50%; } + .columns.is-mobile > .column.is-7 { + flex: none; + width: 58.33333%; } + .columns.is-mobile > .column.is-offset-7 { + margin-left: 58.33333%; } + .columns.is-mobile > .column.is-8 { + flex: none; + width: 66.66667%; } + .columns.is-mobile > .column.is-offset-8 { + margin-left: 66.66667%; } + .columns.is-mobile > .column.is-9 { + flex: none; + width: 75%; } + .columns.is-mobile > .column.is-offset-9 { + margin-left: 75%; } + .columns.is-mobile > .column.is-10 { + flex: none; + width: 83.33333%; } + .columns.is-mobile > .column.is-offset-10 { + margin-left: 83.33333%; } + .columns.is-mobile > .column.is-11 { + flex: none; + width: 91.66667%; } + .columns.is-mobile > .column.is-offset-11 { + margin-left: 91.66667%; } + .columns.is-mobile > .column.is-12 { + flex: none; + width: 100%; } + .columns.is-mobile > .column.is-offset-12 { + margin-left: 100%; } + @media screen and (max-width: 768px) { + .column.is-narrow-mobile { + flex: none; } + .column.is-full-mobile { + flex: none; + width: 100%; } + .column.is-three-quarters-mobile { + flex: none; + width: 75%; } + .column.is-two-thirds-mobile { + flex: none; + width: 66.6666%; } + .column.is-half-mobile { + flex: none; + width: 50%; } + .column.is-one-third-mobile { + flex: none; + width: 33.3333%; } + .column.is-one-quarter-mobile { + flex: none; + width: 25%; } + .column.is-one-fifth-mobile { + flex: none; + width: 20%; } + .column.is-two-fifths-mobile { + flex: none; + width: 40%; } + .column.is-three-fifths-mobile { + flex: none; + width: 60%; } + .column.is-four-fifths-mobile { + flex: none; + width: 80%; } + .column.is-offset-three-quarters-mobile { + margin-left: 75%; } + .column.is-offset-two-thirds-mobile { + margin-left: 66.6666%; } + .column.is-offset-half-mobile { + margin-left: 50%; } + .column.is-offset-one-third-mobile { + margin-left: 33.3333%; } + .column.is-offset-one-quarter-mobile { + margin-left: 25%; } + .column.is-offset-one-fifth-mobile { + margin-left: 20%; } + .column.is-offset-two-fifths-mobile { + margin-left: 40%; } + .column.is-offset-three-fifths-mobile { + margin-left: 60%; } + .column.is-offset-four-fifths-mobile { + margin-left: 80%; } + .column.is-1-mobile { + flex: none; + width: 8.33333%; } + .column.is-offset-1-mobile { + margin-left: 8.33333%; } + .column.is-2-mobile { + flex: none; + width: 16.66667%; } + .column.is-offset-2-mobile { + margin-left: 16.66667%; } + .column.is-3-mobile { + flex: none; + width: 25%; } + .column.is-offset-3-mobile { + margin-left: 25%; } + .column.is-4-mobile { + flex: none; + width: 33.33333%; } + .column.is-offset-4-mobile { + margin-left: 33.33333%; } + .column.is-5-mobile { + flex: none; + width: 41.66667%; } + .column.is-offset-5-mobile { + margin-left: 41.66667%; } + .column.is-6-mobile { + flex: none; + width: 50%; } + .column.is-offset-6-mobile { + margin-left: 50%; } + .column.is-7-mobile { + flex: none; + width: 58.33333%; } + .column.is-offset-7-mobile { + margin-left: 58.33333%; } + .column.is-8-mobile { + flex: none; + width: 66.66667%; } + .column.is-offset-8-mobile { + margin-left: 66.66667%; } + .column.is-9-mobile { + flex: none; + width: 75%; } + .column.is-offset-9-mobile { + margin-left: 75%; } + .column.is-10-mobile { + flex: none; + width: 83.33333%; } + .column.is-offset-10-mobile { + margin-left: 83.33333%; } + .column.is-11-mobile { + flex: none; + width: 91.66667%; } + .column.is-offset-11-mobile { + margin-left: 91.66667%; } + .column.is-12-mobile { + flex: none; + width: 100%; } + .column.is-offset-12-mobile { + margin-left: 100%; } } + @media screen and (min-width: 769px), print { + .column.is-narrow, .column.is-narrow-tablet { + flex: none; } + .column.is-full, .column.is-full-tablet { + flex: none; + width: 100%; } + .column.is-three-quarters, .column.is-three-quarters-tablet { + flex: none; + width: 75%; } + .column.is-two-thirds, .column.is-two-thirds-tablet { + flex: none; + width: 66.6666%; } + .column.is-half, .column.is-half-tablet { + flex: none; + width: 50%; } + .column.is-one-third, .column.is-one-third-tablet { + flex: none; + width: 33.3333%; } + .column.is-one-quarter, .column.is-one-quarter-tablet { + flex: none; + width: 25%; } + .column.is-one-fifth, .column.is-one-fifth-tablet { + flex: none; + width: 20%; } + .column.is-two-fifths, .column.is-two-fifths-tablet { + flex: none; + width: 40%; } + .column.is-three-fifths, .column.is-three-fifths-tablet { + flex: none; + width: 60%; } + .column.is-four-fifths, .column.is-four-fifths-tablet { + flex: none; + width: 80%; } + .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet { + margin-left: 75%; } + .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet { + margin-left: 66.6666%; } + .column.is-offset-half, .column.is-offset-half-tablet { + margin-left: 50%; } + .column.is-offset-one-third, .column.is-offset-one-third-tablet { + margin-left: 33.3333%; } + .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet { + margin-left: 25%; } + .column.is-offset-one-fifth, .column.is-offset-one-fifth-tablet { + margin-left: 20%; } + .column.is-offset-two-fifths, .column.is-offset-two-fifths-tablet { + margin-left: 40%; } + .column.is-offset-three-fifths, .column.is-offset-three-fifths-tablet { + margin-left: 60%; } + .column.is-offset-four-fifths, .column.is-offset-four-fifths-tablet { + margin-left: 80%; } + .column.is-1, .column.is-1-tablet { + flex: none; + width: 8.33333%; } + .column.is-offset-1, .column.is-offset-1-tablet { + margin-left: 8.33333%; } + .column.is-2, .column.is-2-tablet { + flex: none; + width: 16.66667%; } + .column.is-offset-2, .column.is-offset-2-tablet { + margin-left: 16.66667%; } + .column.is-3, .column.is-3-tablet { + flex: none; + width: 25%; } + .column.is-offset-3, .column.is-offset-3-tablet { + margin-left: 25%; } + .column.is-4, .column.is-4-tablet { + flex: none; + width: 33.33333%; } + .column.is-offset-4, .column.is-offset-4-tablet { + margin-left: 33.33333%; } + .column.is-5, .column.is-5-tablet { + flex: none; + width: 41.66667%; } + .column.is-offset-5, .column.is-offset-5-tablet { + margin-left: 41.66667%; } + .column.is-6, .column.is-6-tablet { + flex: none; + width: 50%; } + .column.is-offset-6, .column.is-offset-6-tablet { + margin-left: 50%; } + .column.is-7, .column.is-7-tablet { + flex: none; + width: 58.33333%; } + .column.is-offset-7, .column.is-offset-7-tablet { + margin-left: 58.33333%; } + .column.is-8, .column.is-8-tablet { + flex: none; + width: 66.66667%; } + .column.is-offset-8, .column.is-offset-8-tablet { + margin-left: 66.66667%; } + .column.is-9, .column.is-9-tablet { + flex: none; + width: 75%; } + .column.is-offset-9, .column.is-offset-9-tablet { + margin-left: 75%; } + .column.is-10, .column.is-10-tablet { + flex: none; + width: 83.33333%; } + .column.is-offset-10, .column.is-offset-10-tablet { + margin-left: 83.33333%; } + .column.is-11, .column.is-11-tablet { + flex: none; + width: 91.66667%; } + .column.is-offset-11, .column.is-offset-11-tablet { + margin-left: 91.66667%; } + .column.is-12, .column.is-12-tablet { + flex: none; + width: 100%; } + .column.is-offset-12, .column.is-offset-12-tablet { + margin-left: 100%; } } + @media screen and (max-width: 1023px) { + .column.is-narrow-touch { + flex: none; } + .column.is-full-touch { + flex: none; + width: 100%; } + .column.is-three-quarters-touch { + flex: none; + width: 75%; } + .column.is-two-thirds-touch { + flex: none; + width: 66.6666%; } + .column.is-half-touch { + flex: none; + width: 50%; } + .column.is-one-third-touch { + flex: none; + width: 33.3333%; } + .column.is-one-quarter-touch { + flex: none; + width: 25%; } + .column.is-one-fifth-touch { + flex: none; + width: 20%; } + .column.is-two-fifths-touch { + flex: none; + width: 40%; } + .column.is-three-fifths-touch { + flex: none; + width: 60%; } + .column.is-four-fifths-touch { + flex: none; + width: 80%; } + .column.is-offset-three-quarters-touch { + margin-left: 75%; } + .column.is-offset-two-thirds-touch { + margin-left: 66.6666%; } + .column.is-offset-half-touch { + margin-left: 50%; } + .column.is-offset-one-third-touch { + margin-left: 33.3333%; } + .column.is-offset-one-quarter-touch { + margin-left: 25%; } + .column.is-offset-one-fifth-touch { + margin-left: 20%; } + .column.is-offset-two-fifths-touch { + margin-left: 40%; } + .column.is-offset-three-fifths-touch { + margin-left: 60%; } + .column.is-offset-four-fifths-touch { + margin-left: 80%; } + .column.is-1-touch { + flex: none; + width: 8.33333%; } + .column.is-offset-1-touch { + margin-left: 8.33333%; } + .column.is-2-touch { + flex: none; + width: 16.66667%; } + .column.is-offset-2-touch { + margin-left: 16.66667%; } + .column.is-3-touch { + flex: none; + width: 25%; } + .column.is-offset-3-touch { + margin-left: 25%; } + .column.is-4-touch { + flex: none; + width: 33.33333%; } + .column.is-offset-4-touch { + margin-left: 33.33333%; } + .column.is-5-touch { + flex: none; + width: 41.66667%; } + .column.is-offset-5-touch { + margin-left: 41.66667%; } + .column.is-6-touch { + flex: none; + width: 50%; } + .column.is-offset-6-touch { + margin-left: 50%; } + .column.is-7-touch { + flex: none; + width: 58.33333%; } + .column.is-offset-7-touch { + margin-left: 58.33333%; } + .column.is-8-touch { + flex: none; + width: 66.66667%; } + .column.is-offset-8-touch { + margin-left: 66.66667%; } + .column.is-9-touch { + flex: none; + width: 75%; } + .column.is-offset-9-touch { + margin-left: 75%; } + .column.is-10-touch { + flex: none; + width: 83.33333%; } + .column.is-offset-10-touch { + margin-left: 83.33333%; } + .column.is-11-touch { + flex: none; + width: 91.66667%; } + .column.is-offset-11-touch { + margin-left: 91.66667%; } + .column.is-12-touch { + flex: none; + width: 100%; } + .column.is-offset-12-touch { + margin-left: 100%; } } + @media screen and (min-width: 1024px) { + .column.is-narrow-desktop { + flex: none; } + .column.is-full-desktop { + flex: none; + width: 100%; } + .column.is-three-quarters-desktop { + flex: none; + width: 75%; } + .column.is-two-thirds-desktop { + flex: none; + width: 66.6666%; } + .column.is-half-desktop { + flex: none; + width: 50%; } + .column.is-one-third-desktop { + flex: none; + width: 33.3333%; } + .column.is-one-quarter-desktop { + flex: none; + width: 25%; } + .column.is-one-fifth-desktop { + flex: none; + width: 20%; } + .column.is-two-fifths-desktop { + flex: none; + width: 40%; } + .column.is-three-fifths-desktop { + flex: none; + width: 60%; } + .column.is-four-fifths-desktop { + flex: none; + width: 80%; } + .column.is-offset-three-quarters-desktop { + margin-left: 75%; } + .column.is-offset-two-thirds-desktop { + margin-left: 66.6666%; } + .column.is-offset-half-desktop { + margin-left: 50%; } + .column.is-offset-one-third-desktop { + margin-left: 33.3333%; } + .column.is-offset-one-quarter-desktop { + margin-left: 25%; } + .column.is-offset-one-fifth-desktop { + margin-left: 20%; } + .column.is-offset-two-fifths-desktop { + margin-left: 40%; } + .column.is-offset-three-fifths-desktop { + margin-left: 60%; } + .column.is-offset-four-fifths-desktop { + margin-left: 80%; } + .column.is-1-desktop { + flex: none; + width: 8.33333%; } + .column.is-offset-1-desktop { + margin-left: 8.33333%; } + .column.is-2-desktop { + flex: none; + width: 16.66667%; } + .column.is-offset-2-desktop { + margin-left: 16.66667%; } + .column.is-3-desktop { + flex: none; + width: 25%; } + .column.is-offset-3-desktop { + margin-left: 25%; } + .column.is-4-desktop { + flex: none; + width: 33.33333%; } + .column.is-offset-4-desktop { + margin-left: 33.33333%; } + .column.is-5-desktop { + flex: none; + width: 41.66667%; } + .column.is-offset-5-desktop { + margin-left: 41.66667%; } + .column.is-6-desktop { + flex: none; + width: 50%; } + .column.is-offset-6-desktop { + margin-left: 50%; } + .column.is-7-desktop { + flex: none; + width: 58.33333%; } + .column.is-offset-7-desktop { + margin-left: 58.33333%; } + .column.is-8-desktop { + flex: none; + width: 66.66667%; } + .column.is-offset-8-desktop { + margin-left: 66.66667%; } + .column.is-9-desktop { + flex: none; + width: 75%; } + .column.is-offset-9-desktop { + margin-left: 75%; } + .column.is-10-desktop { + flex: none; + width: 83.33333%; } + .column.is-offset-10-desktop { + margin-left: 83.33333%; } + .column.is-11-desktop { + flex: none; + width: 91.66667%; } + .column.is-offset-11-desktop { + margin-left: 91.66667%; } + .column.is-12-desktop { + flex: none; + width: 100%; } + .column.is-offset-12-desktop { + margin-left: 100%; } } + @media screen and (min-width: 1216px) { + .column.is-narrow-widescreen { + flex: none; } + .column.is-full-widescreen { + flex: none; + width: 100%; } + .column.is-three-quarters-widescreen { + flex: none; + width: 75%; } + .column.is-two-thirds-widescreen { + flex: none; + width: 66.6666%; } + .column.is-half-widescreen { + flex: none; + width: 50%; } + .column.is-one-third-widescreen { + flex: none; + width: 33.3333%; } + .column.is-one-quarter-widescreen { + flex: none; + width: 25%; } + .column.is-one-fifth-widescreen { + flex: none; + width: 20%; } + .column.is-two-fifths-widescreen { + flex: none; + width: 40%; } + .column.is-three-fifths-widescreen { + flex: none; + width: 60%; } + .column.is-four-fifths-widescreen { + flex: none; + width: 80%; } + .column.is-offset-three-quarters-widescreen { + margin-left: 75%; } + .column.is-offset-two-thirds-widescreen { + margin-left: 66.6666%; } + .column.is-offset-half-widescreen { + margin-left: 50%; } + .column.is-offset-one-third-widescreen { + margin-left: 33.3333%; } + .column.is-offset-one-quarter-widescreen { + margin-left: 25%; } + .column.is-offset-one-fifth-widescreen { + margin-left: 20%; } + .column.is-offset-two-fifths-widescreen { + margin-left: 40%; } + .column.is-offset-three-fifths-widescreen { + margin-left: 60%; } + .column.is-offset-four-fifths-widescreen { + margin-left: 80%; } + .column.is-1-widescreen { + flex: none; + width: 8.33333%; } + .column.is-offset-1-widescreen { + margin-left: 8.33333%; } + .column.is-2-widescreen { + flex: none; + width: 16.66667%; } + .column.is-offset-2-widescreen { + margin-left: 16.66667%; } + .column.is-3-widescreen { + flex: none; + width: 25%; } + .column.is-offset-3-widescreen { + margin-left: 25%; } + .column.is-4-widescreen { + flex: none; + width: 33.33333%; } + .column.is-offset-4-widescreen { + margin-left: 33.33333%; } + .column.is-5-widescreen { + flex: none; + width: 41.66667%; } + .column.is-offset-5-widescreen { + margin-left: 41.66667%; } + .column.is-6-widescreen { + flex: none; + width: 50%; } + .column.is-offset-6-widescreen { + margin-left: 50%; } + .column.is-7-widescreen { + flex: none; + width: 58.33333%; } + .column.is-offset-7-widescreen { + margin-left: 58.33333%; } + .column.is-8-widescreen { + flex: none; + width: 66.66667%; } + .column.is-offset-8-widescreen { + margin-left: 66.66667%; } + .column.is-9-widescreen { + flex: none; + width: 75%; } + .column.is-offset-9-widescreen { + margin-left: 75%; } + .column.is-10-widescreen { + flex: none; + width: 83.33333%; } + .column.is-offset-10-widescreen { + margin-left: 83.33333%; } + .column.is-11-widescreen { + flex: none; + width: 91.66667%; } + .column.is-offset-11-widescreen { + margin-left: 91.66667%; } + .column.is-12-widescreen { + flex: none; + width: 100%; } + .column.is-offset-12-widescreen { + margin-left: 100%; } } + @media screen and (min-width: 1408px) { + .column.is-narrow-fullhd { + flex: none; } + .column.is-full-fullhd { + flex: none; + width: 100%; } + .column.is-three-quarters-fullhd { + flex: none; + width: 75%; } + .column.is-two-thirds-fullhd { + flex: none; + width: 66.6666%; } + .column.is-half-fullhd { + flex: none; + width: 50%; } + .column.is-one-third-fullhd { + flex: none; + width: 33.3333%; } + .column.is-one-quarter-fullhd { + flex: none; + width: 25%; } + .column.is-one-fifth-fullhd { + flex: none; + width: 20%; } + .column.is-two-fifths-fullhd { + flex: none; + width: 40%; } + .column.is-three-fifths-fullhd { + flex: none; + width: 60%; } + .column.is-four-fifths-fullhd { + flex: none; + width: 80%; } + .column.is-offset-three-quarters-fullhd { + margin-left: 75%; } + .column.is-offset-two-thirds-fullhd { + margin-left: 66.6666%; } + .column.is-offset-half-fullhd { + margin-left: 50%; } + .column.is-offset-one-third-fullhd { + margin-left: 33.3333%; } + .column.is-offset-one-quarter-fullhd { + margin-left: 25%; } + .column.is-offset-one-fifth-fullhd { + margin-left: 20%; } + .column.is-offset-two-fifths-fullhd { + margin-left: 40%; } + .column.is-offset-three-fifths-fullhd { + margin-left: 60%; } + .column.is-offset-four-fifths-fullhd { + margin-left: 80%; } + .column.is-1-fullhd { + flex: none; + width: 8.33333%; } + .column.is-offset-1-fullhd { + margin-left: 8.33333%; } + .column.is-2-fullhd { + flex: none; + width: 16.66667%; } + .column.is-offset-2-fullhd { + margin-left: 16.66667%; } + .column.is-3-fullhd { + flex: none; + width: 25%; } + .column.is-offset-3-fullhd { + margin-left: 25%; } + .column.is-4-fullhd { + flex: none; + width: 33.33333%; } + .column.is-offset-4-fullhd { + margin-left: 33.33333%; } + .column.is-5-fullhd { + flex: none; + width: 41.66667%; } + .column.is-offset-5-fullhd { + margin-left: 41.66667%; } + .column.is-6-fullhd { + flex: none; + width: 50%; } + .column.is-offset-6-fullhd { + margin-left: 50%; } + .column.is-7-fullhd { + flex: none; + width: 58.33333%; } + .column.is-offset-7-fullhd { + margin-left: 58.33333%; } + .column.is-8-fullhd { + flex: none; + width: 66.66667%; } + .column.is-offset-8-fullhd { + margin-left: 66.66667%; } + .column.is-9-fullhd { + flex: none; + width: 75%; } + .column.is-offset-9-fullhd { + margin-left: 75%; } + .column.is-10-fullhd { + flex: none; + width: 83.33333%; } + .column.is-offset-10-fullhd { + margin-left: 83.33333%; } + .column.is-11-fullhd { + flex: none; + width: 91.66667%; } + .column.is-offset-11-fullhd { + margin-left: 91.66667%; } + .column.is-12-fullhd { + flex: none; + width: 100%; } + .column.is-offset-12-fullhd { + margin-left: 100%; } } + +.columns { + margin-left: -0.75rem; + margin-right: -0.75rem; + margin-top: -0.75rem; } + .columns:last-child { + margin-bottom: -0.75rem; } + .columns:not(:last-child) { + margin-bottom: calc(1.5rem - 0.75rem); } + .columns.is-centered { + justify-content: center; } + .columns.is-gapless { + margin-left: 0; + margin-right: 0; + margin-top: 0; } + .columns.is-gapless > .column { + margin: 0; + padding: 0 !important; } + .columns.is-gapless:not(:last-child) { + margin-bottom: 1.5rem; } + .columns.is-gapless:last-child { + margin-bottom: 0; } + .columns.is-mobile { + display: flex; } + .columns.is-multiline { + flex-wrap: wrap; } + .columns.is-vcentered { + align-items: center; } + @media screen and (min-width: 769px), print { + .columns:not(.is-desktop) { + display: flex; } } + @media screen and (min-width: 1024px) { + .columns.is-desktop { + display: flex; } } + +.columns.is-variable { + --columnGap: 0.75rem; + margin-left: calc(-1 * var(--columnGap)); + margin-right: calc(-1 * var(--columnGap)); } + .columns.is-variable .column { + padding-left: var(--columnGap); + padding-right: var(--columnGap); } + .columns.is-variable.is-0 { + --columnGap: 0rem; } + .columns.is-variable.is-1 { + --columnGap: 0.25rem; } + .columns.is-variable.is-2 { + --columnGap: 0.5rem; } + .columns.is-variable.is-3 { + --columnGap: 0.75rem; } + .columns.is-variable.is-4 { + --columnGap: 1rem; } + .columns.is-variable.is-5 { + --columnGap: 1.25rem; } + .columns.is-variable.is-6 { + --columnGap: 1.5rem; } + .columns.is-variable.is-7 { + --columnGap: 1.75rem; } + .columns.is-variable.is-8 { + --columnGap: 2rem; } + +.tile { + align-items: stretch; + display: block; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + min-height: min-content; } + .tile.is-ancestor { + margin-left: -0.75rem; + margin-right: -0.75rem; + margin-top: -0.75rem; } + .tile.is-ancestor:last-child { + margin-bottom: -0.75rem; } + .tile.is-ancestor:not(:last-child) { + margin-bottom: 0.75rem; } + .tile.is-child { + margin: 0 !important; } + .tile.is-parent { + padding: 0.75rem; } + .tile.is-vertical { + flex-direction: column; } + .tile.is-vertical > .tile.is-child:not(:last-child) { + margin-bottom: 1.5rem !important; } + @media screen and (min-width: 769px), print { + .tile:not(.is-child) { + display: flex; } + .tile.is-1 { + flex: none; + width: 8.33333%; } + .tile.is-2 { + flex: none; + width: 16.66667%; } + .tile.is-3 { + flex: none; + width: 25%; } + .tile.is-4 { + flex: none; + width: 33.33333%; } + .tile.is-5 { + flex: none; + width: 41.66667%; } + .tile.is-6 { + flex: none; + width: 50%; } + .tile.is-7 { + flex: none; + width: 58.33333%; } + .tile.is-8 { + flex: none; + width: 66.66667%; } + .tile.is-9 { + flex: none; + width: 75%; } + .tile.is-10 { + flex: none; + width: 83.33333%; } + .tile.is-11 { + flex: none; + width: 91.66667%; } + .tile.is-12 { + flex: none; + width: 100%; } } + +.box { + background-color: white; + border-radius: 5px; + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + color: #4a4a4a; + display: block; + padding: 1.25rem; } + .box:not(:last-child) { + margin-bottom: 1.5rem; } + +a.box:hover, a.box:focus { + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc; } + +a.box:active { + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc; } + +.button { + -moz-appearance: none; + -webkit-appearance: none; + align-items: center; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: none; + display: inline-flex; + font-size: 1rem; + height: 2.25em; + justify-content: flex-start; + line-height: 1.5; + padding-bottom: calc(0.375em - 1px); + padding-left: calc(0.625em - 1px); + padding-right: calc(0.625em - 1px); + padding-top: calc(0.375em - 1px); + position: relative; + vertical-align: top; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: white; + border-color: #dbdbdb; + color: #363636; + cursor: pointer; + justify-content: center; + padding-left: 0.75em; + padding-right: 0.75em; + text-align: center; + white-space: nowrap; } + .button:focus, .button.is-focused, .button:active, .button.is-active { + outline: none; } + .button[disabled] { + cursor: not-allowed; } + .button strong { + color: inherit; } + .button .icon, .button .icon.is-small, .button .icon.is-medium, .button .icon.is-large { + height: 1.5em; + width: 1.5em; } + .button .icon:first-child:not(:last-child) { + margin-left: calc(-0.375em - 1px); + margin-right: 0.1875em; } + .button .icon:last-child:not(:first-child) { + margin-left: 0.1875em; + margin-right: calc(-0.375em - 1px); } + .button .icon:first-child:last-child { + margin-left: calc(-0.375em - 1px); + margin-right: calc(-0.375em - 1px); } + .button:hover, .button.is-hovered { + border-color: #b5b5b5; + color: #363636; } + .button:focus, .button.is-focused { + border-color: #3273dc; + color: #363636; } + .button:focus:not(:active), .button.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } + .button:active, .button.is-active { + border-color: #4a4a4a; + color: #363636; } + .button.is-text { + background-color: transparent; + border-color: transparent; + color: #4a4a4a; + text-decoration: underline; } + .button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused { + background-color: whitesmoke; + color: #363636; } + .button.is-text:active, .button.is-text.is-active { + background-color: #e8e8e8; + color: #363636; } + .button.is-text[disabled] { + background-color: transparent; + border-color: transparent; + box-shadow: none; } + .button.is-white { + background-color: white; + border-color: transparent; + color: #0a0a0a; } + .button.is-white:hover, .button.is-white.is-hovered { + background-color: #f9f9f9; + border-color: transparent; + color: #0a0a0a; } + .button.is-white:focus, .button.is-white.is-focused { + border-color: transparent; + color: #0a0a0a; } + .button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); } + .button.is-white:active, .button.is-white.is-active { + background-color: #f2f2f2; + border-color: transparent; + color: #0a0a0a; } + .button.is-white[disabled] { + background-color: white; + border-color: transparent; + box-shadow: none; } + .button.is-white.is-inverted { + background-color: #0a0a0a; + color: white; } + .button.is-white.is-inverted:hover { + background-color: black; } + .button.is-white.is-inverted[disabled] { + background-color: #0a0a0a; + border-color: transparent; + box-shadow: none; + color: white; } + .button.is-white.is-loading:after { + border-color: transparent transparent #0a0a0a #0a0a0a !important; } + .button.is-white.is-outlined { + background-color: transparent; + border-color: white; + color: white; } + .button.is-white.is-outlined:hover, .button.is-white.is-outlined:focus { + background-color: white; + border-color: white; + color: #0a0a0a; } + .button.is-white.is-outlined.is-loading:after { + border-color: transparent transparent white white !important; } + .button.is-white.is-outlined[disabled] { + background-color: transparent; + border-color: white; + box-shadow: none; + color: white; } + .button.is-white.is-inverted.is-outlined { + background-color: transparent; + border-color: #0a0a0a; + color: #0a0a0a; } + .button.is-white.is-inverted.is-outlined:hover, .button.is-white.is-inverted.is-outlined:focus { + background-color: #0a0a0a; + color: white; } + .button.is-white.is-inverted.is-outlined[disabled] { + background-color: transparent; + border-color: #0a0a0a; + box-shadow: none; + color: #0a0a0a; } + .button.is-black { + background-color: #0a0a0a; + border-color: transparent; + color: white; } + .button.is-black:hover, .button.is-black.is-hovered { + background-color: #040404; + border-color: transparent; + color: white; } + .button.is-black:focus, .button.is-black.is-focused { + border-color: transparent; + color: white; } + .button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } + .button.is-black:active, .button.is-black.is-active { + background-color: black; + border-color: transparent; + color: white; } + .button.is-black[disabled] { + background-color: #0a0a0a; + border-color: transparent; + box-shadow: none; } + .button.is-black.is-inverted { + background-color: white; + color: #0a0a0a; } + .button.is-black.is-inverted:hover { + background-color: #f2f2f2; } + .button.is-black.is-inverted[disabled] { + background-color: white; + border-color: transparent; + box-shadow: none; + color: #0a0a0a; } + .button.is-black.is-loading:after { + border-color: transparent transparent white white !important; } + .button.is-black.is-outlined { + background-color: transparent; + border-color: #0a0a0a; + color: #0a0a0a; } + .button.is-black.is-outlined:hover, .button.is-black.is-outlined:focus { + background-color: #0a0a0a; + border-color: #0a0a0a; + color: white; } + .button.is-black.is-outlined.is-loading:after { + border-color: transparent transparent #0a0a0a #0a0a0a !important; } + .button.is-black.is-outlined[disabled] { + background-color: transparent; + border-color: #0a0a0a; + box-shadow: none; + color: #0a0a0a; } + .button.is-black.is-inverted.is-outlined { + background-color: transparent; + border-color: white; + color: white; } + .button.is-black.is-inverted.is-outlined:hover, .button.is-black.is-inverted.is-outlined:focus { + background-color: white; + color: #0a0a0a; } + .button.is-black.is-inverted.is-outlined[disabled] { + background-color: transparent; + border-color: white; + box-shadow: none; + color: white; } + .button.is-light { + background-color: whitesmoke; + border-color: transparent; + color: #363636; } + .button.is-light:hover, .button.is-light.is-hovered { + background-color: #eeeeee; + border-color: transparent; + color: #363636; } + .button.is-light:focus, .button.is-light.is-focused { + border-color: transparent; + color: #363636; } + .button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } + .button.is-light:active, .button.is-light.is-active { + background-color: #e8e8e8; + border-color: transparent; + color: #363636; } + .button.is-light[disabled] { + background-color: whitesmoke; + border-color: transparent; + box-shadow: none; } + .button.is-light.is-inverted { + background-color: #363636; + color: whitesmoke; } + .button.is-light.is-inverted:hover { + background-color: #292929; } + .button.is-light.is-inverted[disabled] { + background-color: #363636; + border-color: transparent; + box-shadow: none; + color: whitesmoke; } + .button.is-light.is-loading:after { + border-color: transparent transparent #363636 #363636 !important; } + .button.is-light.is-outlined { + background-color: transparent; + border-color: whitesmoke; + color: whitesmoke; } + .button.is-light.is-outlined:hover, .button.is-light.is-outlined:focus { + background-color: whitesmoke; + border-color: whitesmoke; + color: #363636; } + .button.is-light.is-outlined.is-loading:after { + border-color: transparent transparent whitesmoke whitesmoke !important; } + .button.is-light.is-outlined[disabled] { + background-color: transparent; + border-color: whitesmoke; + box-shadow: none; + color: whitesmoke; } + .button.is-light.is-inverted.is-outlined { + background-color: transparent; + border-color: #363636; + color: #363636; } + .button.is-light.is-inverted.is-outlined:hover, .button.is-light.is-inverted.is-outlined:focus { + background-color: #363636; + color: whitesmoke; } + .button.is-light.is-inverted.is-outlined[disabled] { + background-color: transparent; + border-color: #363636; + box-shadow: none; + color: #363636; } + .button.is-dark { + background-color: #363636; + border-color: transparent; + color: whitesmoke; } + .button.is-dark:hover, .button.is-dark.is-hovered { + background-color: #2f2f2f; + border-color: transparent; + color: whitesmoke; } + .button.is-dark:focus, .button.is-dark.is-focused { + border-color: transparent; + color: whitesmoke; } + .button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); } + .button.is-dark:active, .button.is-dark.is-active { + background-color: #292929; + border-color: transparent; + color: whitesmoke; } + .button.is-dark[disabled] { + background-color: #363636; + border-color: transparent; + box-shadow: none; } + .button.is-dark.is-inverted { + background-color: whitesmoke; + color: #363636; } + .button.is-dark.is-inverted:hover { + background-color: #e8e8e8; } + .button.is-dark.is-inverted[disabled] { + background-color: whitesmoke; + border-color: transparent; + box-shadow: none; + color: #363636; } + .button.is-dark.is-loading:after { + border-color: transparent transparent whitesmoke whitesmoke !important; } + .button.is-dark.is-outlined { + background-color: transparent; + border-color: #363636; + color: #363636; } + .button.is-dark.is-outlined:hover, .button.is-dark.is-outlined:focus { + background-color: #363636; + border-color: #363636; + color: whitesmoke; } + .button.is-dark.is-outlined.is-loading:after { + border-color: transparent transparent #363636 #363636 !important; } + .button.is-dark.is-outlined[disabled] { + background-color: transparent; + border-color: #363636; + box-shadow: none; + color: #363636; } + .button.is-dark.is-inverted.is-outlined { + background-color: transparent; + border-color: whitesmoke; + color: whitesmoke; } + .button.is-dark.is-inverted.is-outlined:hover, .button.is-dark.is-inverted.is-outlined:focus { + background-color: whitesmoke; + color: #363636; } + .button.is-dark.is-inverted.is-outlined[disabled] { + background-color: transparent; + border-color: whitesmoke; + box-shadow: none; + color: whitesmoke; } + .button.is-primary { + background-color: #C93312; + border-color: transparent; + color: #fff; } + .button.is-primary:hover, .button.is-primary.is-hovered { + background-color: #bd3011; + border-color: transparent; + color: #fff; } + .button.is-primary:focus, .button.is-primary.is-focused { + border-color: transparent; + color: #fff; } + .button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(201, 51, 18, 0.25); } + .button.is-primary:active, .button.is-primary.is-active { + background-color: #b22d10; + border-color: transparent; + color: #fff; } + .button.is-primary[disabled] { + background-color: #C93312; + border-color: transparent; + box-shadow: none; } + .button.is-primary.is-inverted { + background-color: #fff; + color: #C93312; } + .button.is-primary.is-inverted:hover { + background-color: #f2f2f2; } + .button.is-primary.is-inverted[disabled] { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #C93312; } + .button.is-primary.is-loading:after { + border-color: transparent transparent #fff #fff !important; } + .button.is-primary.is-outlined { + background-color: transparent; + border-color: #C93312; + color: #C93312; } + .button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus { + background-color: #C93312; + border-color: #C93312; + color: #fff; } + .button.is-primary.is-outlined.is-loading:after { + border-color: transparent transparent #C93312 #C93312 !important; } + .button.is-primary.is-outlined[disabled] { + background-color: transparent; + border-color: #C93312; + box-shadow: none; + color: #C93312; } + .button.is-primary.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; } + .button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined:focus { + background-color: #fff; + color: #C93312; } + .button.is-primary.is-inverted.is-outlined[disabled] { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; } + .button.is-link { + background-color: #3273dc; + border-color: transparent; + color: #fff; } + .button.is-link:hover, .button.is-link.is-hovered { + background-color: #276cda; + border-color: transparent; + color: #fff; } + .button.is-link:focus, .button.is-link.is-focused { + border-color: transparent; + color: #fff; } + .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } + .button.is-link:active, .button.is-link.is-active { + background-color: #2366d1; + border-color: transparent; + color: #fff; } + .button.is-link[disabled] { + background-color: #3273dc; + border-color: transparent; + box-shadow: none; } + .button.is-link.is-inverted { + background-color: #fff; + color: #3273dc; } + .button.is-link.is-inverted:hover { + background-color: #f2f2f2; } + .button.is-link.is-inverted[disabled] { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #3273dc; } + .button.is-link.is-loading:after { + border-color: transparent transparent #fff #fff !important; } + .button.is-link.is-outlined { + background-color: transparent; + border-color: #3273dc; + color: #3273dc; } + .button.is-link.is-outlined:hover, .button.is-link.is-outlined:focus { + background-color: #3273dc; + border-color: #3273dc; + color: #fff; } + .button.is-link.is-outlined.is-loading:after { + border-color: transparent transparent #3273dc #3273dc !important; } + .button.is-link.is-outlined[disabled] { + background-color: transparent; + border-color: #3273dc; + box-shadow: none; + color: #3273dc; } + .button.is-link.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; } + .button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined:focus { + background-color: #fff; + color: #3273dc; } + .button.is-link.is-inverted.is-outlined[disabled] { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; } + .button.is-info { + background-color: #209cee; + border-color: transparent; + color: #fff; } + .button.is-info:hover, .button.is-info.is-hovered { + background-color: #1496ed; + border-color: transparent; + color: #fff; } + .button.is-info:focus, .button.is-info.is-focused { + border-color: transparent; + color: #fff; } + .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); } + .button.is-info:active, .button.is-info.is-active { + background-color: #118fe4; + border-color: transparent; + color: #fff; } + .button.is-info[disabled] { + background-color: #209cee; + border-color: transparent; + box-shadow: none; } + .button.is-info.is-inverted { + background-color: #fff; + color: #209cee; } + .button.is-info.is-inverted:hover { + background-color: #f2f2f2; } + .button.is-info.is-inverted[disabled] { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #209cee; } + .button.is-info.is-loading:after { + border-color: transparent transparent #fff #fff !important; } + .button.is-info.is-outlined { + background-color: transparent; + border-color: #209cee; + color: #209cee; } + .button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus { + background-color: #209cee; + border-color: #209cee; + color: #fff; } + .button.is-info.is-outlined.is-loading:after { + border-color: transparent transparent #209cee #209cee !important; } + .button.is-info.is-outlined[disabled] { + background-color: transparent; + border-color: #209cee; + box-shadow: none; + color: #209cee; } + .button.is-info.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; } + .button.is-info.is-inverted.is-outlined:hover, .button.is-info.is-inverted.is-outlined:focus { + background-color: #fff; + color: #209cee; } + .button.is-info.is-inverted.is-outlined[disabled] { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; } + .button.is-success { + background-color: #23d160; + border-color: transparent; + color: #fff; } + .button.is-success:hover, .button.is-success.is-hovered { + background-color: #22c65b; + border-color: transparent; + color: #fff; } + .button.is-success:focus, .button.is-success.is-focused { + border-color: transparent; + color: #fff; } + .button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); } + .button.is-success:active, .button.is-success.is-active { + background-color: #20bc56; + border-color: transparent; + color: #fff; } + .button.is-success[disabled] { + background-color: #23d160; + border-color: transparent; + box-shadow: none; } + .button.is-success.is-inverted { + background-color: #fff; + color: #23d160; } + .button.is-success.is-inverted:hover { + background-color: #f2f2f2; } + .button.is-success.is-inverted[disabled] { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #23d160; } + .button.is-success.is-loading:after { + border-color: transparent transparent #fff #fff !important; } + .button.is-success.is-outlined { + background-color: transparent; + border-color: #23d160; + color: #23d160; } + .button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus { + background-color: #23d160; + border-color: #23d160; + color: #fff; } + .button.is-success.is-outlined.is-loading:after { + border-color: transparent transparent #23d160 #23d160 !important; } + .button.is-success.is-outlined[disabled] { + background-color: transparent; + border-color: #23d160; + box-shadow: none; + color: #23d160; } + .button.is-success.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; } + .button.is-success.is-inverted.is-outlined:hover, .button.is-success.is-inverted.is-outlined:focus { + background-color: #fff; + color: #23d160; } + .button.is-success.is-inverted.is-outlined[disabled] { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; } + .button.is-warning { + background-color: #ffdd57; + border-color: transparent; + color: #FFFFFF; } + .button.is-warning:hover, .button.is-warning.is-hovered { + background-color: #ffdb4a; + border-color: transparent; + color: #FFFFFF; } + .button.is-warning:focus, .button.is-warning.is-focused { + border-color: transparent; + color: #FFFFFF; } + .button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); } + .button.is-warning:active, .button.is-warning.is-active { + background-color: #ffd83d; + border-color: transparent; + color: #FFFFFF; } + .button.is-warning[disabled] { + background-color: #ffdd57; + border-color: transparent; + box-shadow: none; } + .button.is-warning.is-inverted { + background-color: #FFFFFF; + color: #ffdd57; } + .button.is-warning.is-inverted:hover { + background-color: #f2f2f2; } + .button.is-warning.is-inverted[disabled] { + background-color: #FFFFFF; + border-color: transparent; + box-shadow: none; + color: #ffdd57; } + .button.is-warning.is-loading:after { + border-color: transparent transparent #FFFFFF #FFFFFF !important; } + .button.is-warning.is-outlined { + background-color: transparent; + border-color: #ffdd57; + color: #ffdd57; } + .button.is-warning.is-outlined:hover, .button.is-warning.is-outlined:focus { + background-color: #ffdd57; + border-color: #ffdd57; + color: #FFFFFF; } + .button.is-warning.is-outlined.is-loading:after { + border-color: transparent transparent #ffdd57 #ffdd57 !important; } + .button.is-warning.is-outlined[disabled] { + background-color: transparent; + border-color: #ffdd57; + box-shadow: none; + color: #ffdd57; } + .button.is-warning.is-inverted.is-outlined { + background-color: transparent; + border-color: #FFFFFF; + color: #FFFFFF; } + .button.is-warning.is-inverted.is-outlined:hover, .button.is-warning.is-inverted.is-outlined:focus { + background-color: #FFFFFF; + color: #ffdd57; } + .button.is-warning.is-inverted.is-outlined[disabled] { + background-color: transparent; + border-color: #FFFFFF; + box-shadow: none; + color: #FFFFFF; } + .button.is-danger { + background-color: #ff3860; + border-color: transparent; + color: #fff; } + .button.is-danger:hover, .button.is-danger.is-hovered { + background-color: #ff2b56; + border-color: transparent; + color: #fff; } + .button.is-danger:focus, .button.is-danger.is-focused { + border-color: transparent; + color: #fff; } + .button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); } + .button.is-danger:active, .button.is-danger.is-active { + background-color: #ff1f4b; + border-color: transparent; + color: #fff; } + .button.is-danger[disabled] { + background-color: #ff3860; + border-color: transparent; + box-shadow: none; } + .button.is-danger.is-inverted { + background-color: #fff; + color: #ff3860; } + .button.is-danger.is-inverted:hover { + background-color: #f2f2f2; } + .button.is-danger.is-inverted[disabled] { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #ff3860; } + .button.is-danger.is-loading:after { + border-color: transparent transparent #fff #fff !important; } + .button.is-danger.is-outlined { + background-color: transparent; + border-color: #ff3860; + color: #ff3860; } + .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus { + background-color: #ff3860; + border-color: #ff3860; + color: #fff; } + .button.is-danger.is-outlined.is-loading:after { + border-color: transparent transparent #ff3860 #ff3860 !important; } + .button.is-danger.is-outlined[disabled] { + background-color: transparent; + border-color: #ff3860; + box-shadow: none; + color: #ff3860; } + .button.is-danger.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; } + .button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined:focus { + background-color: #fff; + color: #ff3860; } + .button.is-danger.is-inverted.is-outlined[disabled] { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; } + .button.is-small { + border-radius: 2px; + font-size: 0.75rem; } + .button.is-medium { + font-size: 1.25rem; } + .button.is-large { + font-size: 1.5rem; } + .button[disabled] { + background-color: white; + border-color: #dbdbdb; + box-shadow: none; + opacity: 0.5; } + .button.is-fullwidth { + display: flex; + width: 100%; } + .button.is-loading { + color: transparent !important; + pointer-events: none; } + .button.is-loading:after { + animation: spinAround 500ms infinite linear; + border: 2px solid #dbdbdb; + border-radius: 290486px; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; + position: absolute; + left: calc(50% - (1em / 2)); + top: calc(50% - (1em / 2)); + position: absolute !important; } + .button.is-static { + background-color: whitesmoke; + border-color: #dbdbdb; + color: #7a7a7a; + box-shadow: none; + pointer-events: none; } + +.buttons { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; } + .buttons .button { + margin-bottom: 0.5rem; } + .buttons .button:not(:last-child) { + margin-right: 0.5rem; } + .buttons:last-child { + margin-bottom: -0.5rem; } + .buttons:not(:last-child) { + margin-bottom: 1rem; } + .buttons.has-addons .button:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + .buttons.has-addons .button:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + margin-right: -1px; } + .buttons.has-addons .button:last-child { + margin-right: 0; } + .buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered { + z-index: 2; } + .buttons.has-addons .button:focus, .buttons.has-addons .button.is-focused, .buttons.has-addons .button:active, .buttons.has-addons .button.is-active, .buttons.has-addons .button.is-selected { + z-index: 3; } + .buttons.has-addons .button:focus:hover, .buttons.has-addons .button.is-focused:hover, .buttons.has-addons .button:active:hover, .buttons.has-addons .button.is-active:hover, .buttons.has-addons .button.is-selected:hover { + z-index: 4; } + .buttons.is-centered { + justify-content: center; } + .buttons.is-right { + justify-content: flex-end; } + +.container { + margin: 0 auto; + position: relative; } + @media screen and (min-width: 1024px) { + .container { + max-width: 960px; + width: 960px; } + .container.is-fluid { + margin-left: 32px; + margin-right: 32px; + max-width: none; + width: auto; } } + @media screen and (max-width: 1215px) { + .container.is-widescreen { + max-width: 1152px; + width: auto; } } + @media screen and (max-width: 1407px) { + .container.is-fullhd { + max-width: 1344px; + width: auto; } } + @media screen and (min-width: 1216px) { + .container { + max-width: 1152px; + width: 1152px; } } + @media screen and (min-width: 1408px) { + .container { + max-width: 1344px; + width: 1344px; } } + +.content:not(:last-child) { + margin-bottom: 1.5rem; } + +.content li + li { + margin-top: 0.25em; } + +.content p:not(:last-child), +.content dl:not(:last-child), +.content ol:not(:last-child), +.content ul:not(:last-child), +.content blockquote:not(:last-child), +.content pre:not(:last-child), +.content table:not(:last-child) { + margin-bottom: 1em; } + +.content h1, +.content h2, +.content h3, +.content h4, +.content h5, +.content h6 { + color: #363636; + font-weight: 400; + line-height: 1.125; } + +.content h1 { + font-size: 2em; + margin-bottom: 0.5em; } + .content h1:not(:first-child) { + margin-top: 1em; } + +.content h2 { + font-size: 1.75em; + margin-bottom: 0.5714em; } + .content h2:not(:first-child) { + margin-top: 1.1428em; } + +.content h3 { + font-size: 1.5em; + margin-bottom: 0.6666em; } + .content h3:not(:first-child) { + margin-top: 1.3333em; } + +.content h4 { + font-size: 1.25em; + margin-bottom: 0.8em; } + +.content h5 { + font-size: 1.125em; + margin-bottom: 0.8888em; } + +.content h6 { + font-size: 1em; + margin-bottom: 1em; } + +.content blockquote { + background-color: whitesmoke; + border-left: 5px solid #dbdbdb; + padding: 1.25em 1.5em; } + +.content ol { + list-style: decimal outside; + margin-left: 2em; + margin-top: 1em; } + +.content ul { + list-style: disc outside; + margin-left: 2em; + margin-top: 1em; } + .content ul ul { + list-style-type: circle; + margin-top: 0.5em; } + .content ul ul ul { + list-style-type: square; } + +.content dd { + margin-left: 2em; } + +.content figure { + margin-left: 2em; + margin-right: 2em; + text-align: center; } + .content figure:not(:first-child) { + margin-top: 2em; } + .content figure:not(:last-child) { + margin-bottom: 2em; } + .content figure img { + display: inline-block; } + .content figure figcaption { + font-style: italic; } + +.content pre { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + padding: 1.25em 1.5em; + white-space: pre; + word-wrap: normal; } + +.content sup, +.content sub { + font-size: 75%; } + +.content table { + width: 100%; } + .content table td, + .content table th { + border: 1px solid #dbdbdb; + border-width: 0 0 1px; + padding: 0.5em 0.75em; + vertical-align: top; } + .content table th { + color: #363636; + text-align: left; } + .content table tr:hover { + background-color: whitesmoke; } + .content table thead td, + .content table thead th { + border-width: 0 0 2px; + color: #363636; } + .content table tfoot td, + .content table tfoot th { + border-width: 2px 0 0; + color: #363636; } + .content table tbody tr:last-child td, + .content table tbody tr:last-child th { + border-bottom-width: 0; } + +.content.is-small { + font-size: 0.75rem; } + +.content.is-medium { + font-size: 1.25rem; } + +.content.is-large { + font-size: 1.5rem; } + +.input, +.textarea { + -moz-appearance: none; + -webkit-appearance: none; + align-items: center; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: none; + display: inline-flex; + font-size: 1rem; + height: 2.25em; + justify-content: flex-start; + line-height: 1.5; + padding-bottom: calc(0.375em - 1px); + padding-left: calc(0.625em - 1px); + padding-right: calc(0.625em - 1px); + padding-top: calc(0.375em - 1px); + position: relative; + vertical-align: top; + background-color: white; + border-color: #dbdbdb; + color: #363636; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); + max-width: 100%; + width: 100%; } + .input:focus, .input.is-focused, .input:active, .input.is-active, + .textarea:focus, + .textarea.is-focused, + .textarea:active, + .textarea.is-active { + outline: none; } + .input[disabled], + .textarea[disabled] { + cursor: not-allowed; } + .input::-moz-placeholder, + .textarea::-moz-placeholder { + color: rgba(54, 54, 54, 0.3); } + .input::-webkit-input-placeholder, + .textarea::-webkit-input-placeholder { + color: rgba(54, 54, 54, 0.3); } + .input:-moz-placeholder, + .textarea:-moz-placeholder { + color: rgba(54, 54, 54, 0.3); } + .input:-ms-input-placeholder, + .textarea:-ms-input-placeholder { + color: rgba(54, 54, 54, 0.3); } + .input:hover, .input.is-hovered, + .textarea:hover, + .textarea.is-hovered { + border-color: #b5b5b5; } + .input:focus, .input.is-focused, .input:active, .input.is-active, + .textarea:focus, + .textarea.is-focused, + .textarea:active, + .textarea.is-active { + border-color: #3273dc; + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } + .input[disabled], + .textarea[disabled] { + background-color: whitesmoke; + border-color: whitesmoke; + box-shadow: none; + color: #7a7a7a; } + .input[disabled]::-moz-placeholder, + .textarea[disabled]::-moz-placeholder { + color: rgba(122, 122, 122, 0.3); } + .input[disabled]::-webkit-input-placeholder, + .textarea[disabled]::-webkit-input-placeholder { + color: rgba(122, 122, 122, 0.3); } + .input[disabled]:-moz-placeholder, + .textarea[disabled]:-moz-placeholder { + color: rgba(122, 122, 122, 0.3); } + .input[disabled]:-ms-input-placeholder, + .textarea[disabled]:-ms-input-placeholder { + color: rgba(122, 122, 122, 0.3); } + .input[type="search"], + .textarea[type="search"] { + border-radius: 290486px; } + .input[readonly], + .textarea[readonly] { + box-shadow: none; } + .input.is-white, + .textarea.is-white { + border-color: white; } + .input.is-white:focus, .input.is-white.is-focused, .input.is-white:active, .input.is-white.is-active, + .textarea.is-white:focus, + .textarea.is-white.is-focused, + .textarea.is-white:active, + .textarea.is-white.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); } + .input.is-black, + .textarea.is-black { + border-color: #0a0a0a; } + .input.is-black:focus, .input.is-black.is-focused, .input.is-black:active, .input.is-black.is-active, + .textarea.is-black:focus, + .textarea.is-black.is-focused, + .textarea.is-black:active, + .textarea.is-black.is-active { + box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } + .input.is-light, + .textarea.is-light { + border-color: whitesmoke; } + .input.is-light:focus, .input.is-light.is-focused, .input.is-light:active, .input.is-light.is-active, + .textarea.is-light:focus, + .textarea.is-light.is-focused, + .textarea.is-light:active, + .textarea.is-light.is-active { + box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } + .input.is-dark, + .textarea.is-dark { + border-color: #363636; } + .input.is-dark:focus, .input.is-dark.is-focused, .input.is-dark:active, .input.is-dark.is-active, + .textarea.is-dark:focus, + .textarea.is-dark.is-focused, + .textarea.is-dark:active, + .textarea.is-dark.is-active { + box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); } + .input.is-primary, + .textarea.is-primary { + border-color: #C93312; } + .input.is-primary:focus, .input.is-primary.is-focused, .input.is-primary:active, .input.is-primary.is-active, + .textarea.is-primary:focus, + .textarea.is-primary.is-focused, + .textarea.is-primary:active, + .textarea.is-primary.is-active { + box-shadow: 0 0 0 0.125em rgba(201, 51, 18, 0.25); } + .input.is-link, + .textarea.is-link { + border-color: #3273dc; } + .input.is-link:focus, .input.is-link.is-focused, .input.is-link:active, .input.is-link.is-active, + .textarea.is-link:focus, + .textarea.is-link.is-focused, + .textarea.is-link:active, + .textarea.is-link.is-active { + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } + .input.is-info, + .textarea.is-info { + border-color: #209cee; } + .input.is-info:focus, .input.is-info.is-focused, .input.is-info:active, .input.is-info.is-active, + .textarea.is-info:focus, + .textarea.is-info.is-focused, + .textarea.is-info:active, + .textarea.is-info.is-active { + box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); } + .input.is-success, + .textarea.is-success { + border-color: #23d160; } + .input.is-success:focus, .input.is-success.is-focused, .input.is-success:active, .input.is-success.is-active, + .textarea.is-success:focus, + .textarea.is-success.is-focused, + .textarea.is-success:active, + .textarea.is-success.is-active { + box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); } + .input.is-warning, + .textarea.is-warning { + border-color: #ffdd57; } + .input.is-warning:focus, .input.is-warning.is-focused, .input.is-warning:active, .input.is-warning.is-active, + .textarea.is-warning:focus, + .textarea.is-warning.is-focused, + .textarea.is-warning:active, + .textarea.is-warning.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); } + .input.is-danger, + .textarea.is-danger { + border-color: #ff3860; } + .input.is-danger:focus, .input.is-danger.is-focused, .input.is-danger:active, .input.is-danger.is-active, + .textarea.is-danger:focus, + .textarea.is-danger.is-focused, + .textarea.is-danger:active, + .textarea.is-danger.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); } + .input.is-small, + .textarea.is-small { + border-radius: 2px; + font-size: 0.75rem; } + .input.is-medium, + .textarea.is-medium { + font-size: 1.25rem; } + .input.is-large, + .textarea.is-large { + font-size: 1.5rem; } + .input.is-fullwidth, + .textarea.is-fullwidth { + display: block; + width: 100%; } + .input.is-inline, + .textarea.is-inline { + display: inline; + width: auto; } + +.input.is-static { + background-color: transparent; + border-color: transparent; + box-shadow: none; + padding-left: 0; + padding-right: 0; } + +.textarea { + display: block; + max-width: 100%; + min-width: 100%; + padding: 0.625em; + resize: vertical; } + .textarea:not([rows]) { + max-height: 600px; + min-height: 120px; } + .textarea[rows] { + height: unset; } + .textarea.has-fixed-size { + resize: none; } + +.checkbox, +.radio { + cursor: pointer; + display: inline-block; + line-height: 1.25; + position: relative; } + .checkbox input, + .radio input { + cursor: pointer; } + .checkbox:hover, + .radio:hover { + color: #363636; } + .checkbox[disabled], + .radio[disabled] { + color: #7a7a7a; + cursor: not-allowed; } + +.radio + .radio { + margin-left: 0.5em; } + +.select { + display: inline-block; + max-width: 100%; + position: relative; + vertical-align: top; } + .select:not(.is-multiple) { + height: 2.25em; } + .select:not(.is-multiple)::after { + border: 1px solid #3273dc; + border-right: 0; + border-top: 0; + content: " "; + display: block; + height: 0.5em; + pointer-events: none; + position: absolute; + transform: rotate(-45deg); + transform-origin: center; + width: 0.5em; + margin-top: -0.375em; + right: 1.125em; + top: 50%; + z-index: 4; } + .select select { + -moz-appearance: none; + -webkit-appearance: none; + align-items: center; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: none; + display: inline-flex; + font-size: 1rem; + height: 2.25em; + justify-content: flex-start; + line-height: 1.5; + padding-bottom: calc(0.375em - 1px); + padding-left: calc(0.625em - 1px); + padding-right: calc(0.625em - 1px); + padding-top: calc(0.375em - 1px); + position: relative; + vertical-align: top; + background-color: white; + border-color: #dbdbdb; + color: #363636; + cursor: pointer; + display: block; + font-size: 1em; + max-width: 100%; + outline: none; } + .select select:focus, .select select.is-focused, .select select:active, .select select.is-active { + outline: none; } + .select select[disabled] { + cursor: not-allowed; } + .select select::-moz-placeholder { + color: rgba(54, 54, 54, 0.3); } + .select select::-webkit-input-placeholder { + color: rgba(54, 54, 54, 0.3); } + .select select:-moz-placeholder { + color: rgba(54, 54, 54, 0.3); } + .select select:-ms-input-placeholder { + color: rgba(54, 54, 54, 0.3); } + .select select:hover, .select select.is-hovered { + border-color: #b5b5b5; } + .select select:focus, .select select.is-focused, .select select:active, .select select.is-active { + border-color: #3273dc; + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } + .select select[disabled] { + background-color: whitesmoke; + border-color: whitesmoke; + box-shadow: none; + color: #7a7a7a; } + .select select[disabled]::-moz-placeholder { + color: rgba(122, 122, 122, 0.3); } + .select select[disabled]::-webkit-input-placeholder { + color: rgba(122, 122, 122, 0.3); } + .select select[disabled]:-moz-placeholder { + color: rgba(122, 122, 122, 0.3); } + .select select[disabled]:-ms-input-placeholder { + color: rgba(122, 122, 122, 0.3); } + .select select::-ms-expand { + display: none; } + .select select[disabled]:hover { + border-color: whitesmoke; } + .select select:not([multiple]) { + padding-right: 2.5em; } + .select select[multiple] { + height: unset; + padding: 0; } + .select select[multiple] option { + padding: 0.5em 1em; } + .select:hover::after { + border-color: #363636; } + .select.is-white select { + border-color: white; } + .select.is-white select:focus, .select.is-white select.is-focused, .select.is-white select:active, .select.is-white select.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); } + .select.is-black select { + border-color: #0a0a0a; } + .select.is-black select:focus, .select.is-black select.is-focused, .select.is-black select:active, .select.is-black select.is-active { + box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } + .select.is-light select { + border-color: whitesmoke; } + .select.is-light select:focus, .select.is-light select.is-focused, .select.is-light select:active, .select.is-light select.is-active { + box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } + .select.is-dark select { + border-color: #363636; } + .select.is-dark select:focus, .select.is-dark select.is-focused, .select.is-dark select:active, .select.is-dark select.is-active { + box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); } + .select.is-primary select { + border-color: #C93312; } + .select.is-primary select:focus, .select.is-primary select.is-focused, .select.is-primary select:active, .select.is-primary select.is-active { + box-shadow: 0 0 0 0.125em rgba(201, 51, 18, 0.25); } + .select.is-link select { + border-color: #3273dc; } + .select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active { + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } + .select.is-info select { + border-color: #209cee; } + .select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active { + box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); } + .select.is-success select { + border-color: #23d160; } + .select.is-success select:focus, .select.is-success select.is-focused, .select.is-success select:active, .select.is-success select.is-active { + box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); } + .select.is-warning select { + border-color: #ffdd57; } + .select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); } + .select.is-danger select { + border-color: #ff3860; } + .select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); } + .select.is-small { + border-radius: 2px; + font-size: 0.75rem; } + .select.is-medium { + font-size: 1.25rem; } + .select.is-large { + font-size: 1.5rem; } + .select.is-disabled::after { + border-color: #7a7a7a; } + .select.is-fullwidth { + width: 100%; } + .select.is-fullwidth select { + width: 100%; } + .select.is-loading::after { + animation: spinAround 500ms infinite linear; + border: 2px solid #dbdbdb; + border-radius: 290486px; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; + margin-top: 0; + position: absolute; + right: 0.625em; + top: 0.625em; + transform: none; } + .select.is-loading.is-small:after { + font-size: 0.75rem; } + .select.is-loading.is-medium:after { + font-size: 1.25rem; } + .select.is-loading.is-large:after { + font-size: 1.5rem; } + +.file { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + align-items: stretch; + display: flex; + justify-content: flex-start; + position: relative; } + .file.is-white .file-cta { + background-color: white; + border-color: transparent; + color: #0a0a0a; } + .file.is-white:hover .file-cta, .file.is-white.is-hovered .file-cta { + background-color: #f9f9f9; + border-color: transparent; + color: #0a0a0a; } + .file.is-white:focus .file-cta, .file.is-white.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25); + color: #0a0a0a; } + .file.is-white:active .file-cta, .file.is-white.is-active .file-cta { + background-color: #f2f2f2; + border-color: transparent; + color: #0a0a0a; } + .file.is-black .file-cta { + background-color: #0a0a0a; + border-color: transparent; + color: white; } + .file.is-black:hover .file-cta, .file.is-black.is-hovered .file-cta { + background-color: #040404; + border-color: transparent; + color: white; } + .file.is-black:focus .file-cta, .file.is-black.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25); + color: white; } + .file.is-black:active .file-cta, .file.is-black.is-active .file-cta { + background-color: black; + border-color: transparent; + color: white; } + .file.is-light .file-cta { + background-color: whitesmoke; + border-color: transparent; + color: #363636; } + .file.is-light:hover .file-cta, .file.is-light.is-hovered .file-cta { + background-color: #eeeeee; + border-color: transparent; + color: #363636; } + .file.is-light:focus .file-cta, .file.is-light.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25); + color: #363636; } + .file.is-light:active .file-cta, .file.is-light.is-active .file-cta { + background-color: #e8e8e8; + border-color: transparent; + color: #363636; } + .file.is-dark .file-cta { + background-color: #363636; + border-color: transparent; + color: whitesmoke; } + .file.is-dark:hover .file-cta, .file.is-dark.is-hovered .file-cta { + background-color: #2f2f2f; + border-color: transparent; + color: whitesmoke; } + .file.is-dark:focus .file-cta, .file.is-dark.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25); + color: whitesmoke; } + .file.is-dark:active .file-cta, .file.is-dark.is-active .file-cta { + background-color: #292929; + border-color: transparent; + color: whitesmoke; } + .file.is-primary .file-cta { + background-color: #C93312; + border-color: transparent; + color: #fff; } + .file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta { + background-color: #bd3011; + border-color: transparent; + color: #fff; } + .file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(201, 51, 18, 0.25); + color: #fff; } + .file.is-primary:active .file-cta, .file.is-primary.is-active .file-cta { + background-color: #b22d10; + border-color: transparent; + color: #fff; } + .file.is-link .file-cta { + background-color: #3273dc; + border-color: transparent; + color: #fff; } + .file.is-link:hover .file-cta, .file.is-link.is-hovered .file-cta { + background-color: #276cda; + border-color: transparent; + color: #fff; } + .file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25); + color: #fff; } + .file.is-link:active .file-cta, .file.is-link.is-active .file-cta { + background-color: #2366d1; + border-color: transparent; + color: #fff; } + .file.is-info .file-cta { + background-color: #209cee; + border-color: transparent; + color: #fff; } + .file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta { + background-color: #1496ed; + border-color: transparent; + color: #fff; } + .file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(32, 156, 238, 0.25); + color: #fff; } + .file.is-info:active .file-cta, .file.is-info.is-active .file-cta { + background-color: #118fe4; + border-color: transparent; + color: #fff; } + .file.is-success .file-cta { + background-color: #23d160; + border-color: transparent; + color: #fff; } + .file.is-success:hover .file-cta, .file.is-success.is-hovered .file-cta { + background-color: #22c65b; + border-color: transparent; + color: #fff; } + .file.is-success:focus .file-cta, .file.is-success.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25); + color: #fff; } + .file.is-success:active .file-cta, .file.is-success.is-active .file-cta { + background-color: #20bc56; + border-color: transparent; + color: #fff; } + .file.is-warning .file-cta { + background-color: #ffdd57; + border-color: transparent; + color: #FFFFFF; } + .file.is-warning:hover .file-cta, .file.is-warning.is-hovered .file-cta { + background-color: #ffdb4a; + border-color: transparent; + color: #FFFFFF; } + .file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25); + color: #FFFFFF; } + .file.is-warning:active .file-cta, .file.is-warning.is-active .file-cta { + background-color: #ffd83d; + border-color: transparent; + color: #FFFFFF; } + .file.is-danger .file-cta { + background-color: #ff3860; + border-color: transparent; + color: #fff; } + .file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta { + background-color: #ff2b56; + border-color: transparent; + color: #fff; } + .file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25); + color: #fff; } + .file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta { + background-color: #ff1f4b; + border-color: transparent; + color: #fff; } + .file.is-small { + font-size: 0.75rem; } + .file.is-medium { + font-size: 1.25rem; } + .file.is-medium .file-icon .fa { + font-size: 21px; } + .file.is-large { + font-size: 1.5rem; } + .file.is-large .file-icon .fa { + font-size: 28px; } + .file.has-name .file-cta { + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + .file.has-name .file-name { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + .file.has-name.is-empty .file-cta { + border-radius: 3px; } + .file.has-name.is-empty .file-name { + display: none; } + .file.is-centered { + justify-content: center; } + .file.is-right { + justify-content: flex-end; } + .file.is-boxed .file-label { + flex-direction: column; } + .file.is-boxed .file-cta { + flex-direction: column; + height: auto; + padding: 1em 3em; } + .file.is-boxed .file-name { + border-width: 0 1px 1px; } + .file.is-boxed .file-icon { + height: 1.5em; + width: 1.5em; } + .file.is-boxed .file-icon .fa { + font-size: 21px; } + .file.is-boxed.is-small .file-icon .fa { + font-size: 14px; } + .file.is-boxed.is-medium .file-icon .fa { + font-size: 28px; } + .file.is-boxed.is-large .file-icon .fa { + font-size: 35px; } + .file.is-boxed.has-name .file-cta { + border-radius: 3px 3px 0 0; } + .file.is-boxed.has-name .file-name { + border-radius: 0 0 3px 3px; + border-width: 0 1px 1px; } + .file.is-right .file-cta { + border-radius: 0 3px 3px 0; } + .file.is-right .file-name { + border-radius: 3px 0 0 3px; + border-width: 1px 0 1px 1px; + order: -1; } + .file.is-fullwidth .file-label { + width: 100%; } + .file.is-fullwidth .file-name { + flex-grow: 1; + max-width: none; } + +.file-label { + align-items: stretch; + display: flex; + cursor: pointer; + justify-content: flex-start; + overflow: hidden; + position: relative; } + .file-label:hover .file-cta { + background-color: #eeeeee; + color: #363636; } + .file-label:hover .file-name { + border-color: #d5d5d5; } + .file-label:active .file-cta { + background-color: #e8e8e8; + color: #363636; } + .file-label:active .file-name { + border-color: #cfcfcf; } + +.file-input { + height: 0.01em; + left: 0; + outline: none; + position: absolute; + top: 0; + width: 0.01em; } + +.file-cta, +.file-name { + -moz-appearance: none; + -webkit-appearance: none; + align-items: center; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: none; + display: inline-flex; + font-size: 1rem; + height: 2.25em; + justify-content: flex-start; + line-height: 1.5; + padding-bottom: calc(0.375em - 1px); + padding-left: calc(0.625em - 1px); + padding-right: calc(0.625em - 1px); + padding-top: calc(0.375em - 1px); + position: relative; + vertical-align: top; + border-color: #dbdbdb; + border-radius: 3px; + font-size: 1em; + padding-left: 1em; + padding-right: 1em; + white-space: nowrap; } + .file-cta:focus, .file-cta.is-focused, .file-cta:active, .file-cta.is-active, + .file-name:focus, + .file-name.is-focused, + .file-name:active, + .file-name.is-active { + outline: none; } + .file-cta[disabled], + .file-name[disabled] { + cursor: not-allowed; } + +.file-cta { + background-color: whitesmoke; + color: #4a4a4a; } + +.file-name { + border-color: #dbdbdb; + border-style: solid; + border-width: 1px 1px 1px 0; + display: block; + max-width: 16em; + overflow: hidden; + text-align: left; + text-overflow: ellipsis; } + +.file-icon { + align-items: center; + display: flex; + height: 1em; + justify-content: center; + margin-right: 0.5em; + width: 1em; } + .file-icon .fa { + font-size: 14px; } + +.label { + color: #363636; + display: block; + font-size: 1rem; + font-weight: 700; } + .label:not(:last-child) { + margin-bottom: 0.5em; } + .label.is-small { + font-size: 0.75rem; } + .label.is-medium { + font-size: 1.25rem; } + .label.is-large { + font-size: 1.5rem; } + +.help { + display: block; + font-size: 0.75rem; + margin-top: 0.25rem; } + .help.is-white { + color: white; } + .help.is-black { + color: #0a0a0a; } + .help.is-light { + color: whitesmoke; } + .help.is-dark { + color: #363636; } + .help.is-primary { + color: #C93312; } + .help.is-link { + color: #3273dc; } + .help.is-info { + color: #209cee; } + .help.is-success { + color: #23d160; } + .help.is-warning { + color: #ffdd57; } + .help.is-danger { + color: #ff3860; } + +.field:not(:last-child) { + margin-bottom: 0.75rem; } + +.field.has-addons { + display: flex; + justify-content: flex-start; } + .field.has-addons .control:not(:last-child) { + margin-right: -1px; } + .field.has-addons .control:first-child .button, + .field.has-addons .control:first-child .input, + .field.has-addons .control:first-child .select select { + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; } + .field.has-addons .control:last-child .button, + .field.has-addons .control:last-child .input, + .field.has-addons .control:last-child .select select { + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; } + .field.has-addons .control .button, + .field.has-addons .control .input, + .field.has-addons .control .select select { + border-radius: 0; } + .field.has-addons .control .button:hover, .field.has-addons .control .button.is-hovered, + .field.has-addons .control .input:hover, + .field.has-addons .control .input.is-hovered, + .field.has-addons .control .select select:hover, + .field.has-addons .control .select select.is-hovered { + z-index: 2; } + .field.has-addons .control .button:focus, .field.has-addons .control .button.is-focused, .field.has-addons .control .button:active, .field.has-addons .control .button.is-active, + .field.has-addons .control .input:focus, + .field.has-addons .control .input.is-focused, + .field.has-addons .control .input:active, + .field.has-addons .control .input.is-active, + .field.has-addons .control .select select:focus, + .field.has-addons .control .select select.is-focused, + .field.has-addons .control .select select:active, + .field.has-addons .control .select select.is-active { + z-index: 3; } + .field.has-addons .control .button:focus:hover, .field.has-addons .control .button.is-focused:hover, .field.has-addons .control .button:active:hover, .field.has-addons .control .button.is-active:hover, + .field.has-addons .control .input:focus:hover, + .field.has-addons .control .input.is-focused:hover, + .field.has-addons .control .input:active:hover, + .field.has-addons .control .input.is-active:hover, + .field.has-addons .control .select select:focus:hover, + .field.has-addons .control .select select.is-focused:hover, + .field.has-addons .control .select select:active:hover, + .field.has-addons .control .select select.is-active:hover { + z-index: 4; } + .field.has-addons .control.is-expanded { + flex-grow: 1; } + .field.has-addons.has-addons-centered { + justify-content: center; } + .field.has-addons.has-addons-right { + justify-content: flex-end; } + .field.has-addons.has-addons-fullwidth .control { + flex-grow: 1; + flex-shrink: 0; } + +.field.is-grouped { + display: flex; + justify-content: flex-start; } + .field.is-grouped > .control { + flex-shrink: 0; } + .field.is-grouped > .control:not(:last-child) { + margin-bottom: 0; + margin-right: 0.75rem; } + .field.is-grouped > .control.is-expanded { + flex-grow: 1; + flex-shrink: 1; } + .field.is-grouped.is-grouped-centered { + justify-content: center; } + .field.is-grouped.is-grouped-right { + justify-content: flex-end; } + .field.is-grouped.is-grouped-multiline { + flex-wrap: wrap; } + .field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) { + margin-bottom: 0.75rem; } + .field.is-grouped.is-grouped-multiline:last-child { + margin-bottom: -0.75rem; } + .field.is-grouped.is-grouped-multiline:not(:last-child) { + margin-bottom: 0; } + +@media screen and (min-width: 769px), print { + .field.is-horizontal { + display: flex; } } + +.field-label .label { + font-size: inherit; } + +@media screen and (max-width: 768px) { + .field-label { + margin-bottom: 0.5rem; } } + +@media screen and (min-width: 769px), print { + .field-label { + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + margin-right: 1.5rem; + text-align: right; } + .field-label.is-small { + font-size: 0.75rem; + padding-top: 0.375em; } + .field-label.is-normal { + padding-top: 0.375em; } + .field-label.is-medium { + font-size: 1.25rem; + padding-top: 0.375em; } + .field-label.is-large { + font-size: 1.5rem; + padding-top: 0.375em; } } + +.field-body .field .field { + margin-bottom: 0; } + +@media screen and (min-width: 769px), print { + .field-body { + display: flex; + flex-basis: 0; + flex-grow: 5; + flex-shrink: 1; } + .field-body .field { + margin-bottom: 0; } + .field-body > .field { + flex-shrink: 1; } + .field-body > .field:not(.is-narrow) { + flex-grow: 1; } + .field-body > .field:not(:last-child) { + margin-right: 0.75rem; } } + +.control { + font-size: 1rem; + position: relative; + text-align: left; } + .control.has-icon .icon { + color: #dbdbdb; + height: 2.25em; + pointer-events: none; + position: absolute; + top: 0; + width: 2.25em; + z-index: 4; } + .control.has-icon .input:focus + .icon { + color: #7a7a7a; } + .control.has-icon .input.is-small + .icon { + font-size: 0.75rem; } + .control.has-icon .input.is-medium + .icon { + font-size: 1.25rem; } + .control.has-icon .input.is-large + .icon { + font-size: 1.5rem; } + .control.has-icon:not(.has-icon-right) .icon { + left: 0; } + .control.has-icon:not(.has-icon-right) .input { + padding-left: 2.25em; } + .control.has-icon.has-icon-right .icon { + right: 0; } + .control.has-icon.has-icon-right .input { + padding-right: 2.25em; } + .control.has-icons-left .input:focus ~ .icon, + .control.has-icons-left .select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon, + .control.has-icons-right .select:focus ~ .icon { + color: #7a7a7a; } + .control.has-icons-left .input.is-small ~ .icon, + .control.has-icons-left .select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon, + .control.has-icons-right .select.is-small ~ .icon { + font-size: 0.75rem; } + .control.has-icons-left .input.is-medium ~ .icon, + .control.has-icons-left .select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon, + .control.has-icons-right .select.is-medium ~ .icon { + font-size: 1.25rem; } + .control.has-icons-left .input.is-large ~ .icon, + .control.has-icons-left .select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon, + .control.has-icons-right .select.is-large ~ .icon { + font-size: 1.5rem; } + .control.has-icons-left .icon, .control.has-icons-right .icon { + color: #dbdbdb; + height: 2.25em; + pointer-events: none; + position: absolute; + top: 0; + width: 2.25em; + z-index: 4; } + .control.has-icons-left .input, + .control.has-icons-left .select select { + padding-left: 2.25em; } + .control.has-icons-left .icon.is-left { + left: 0; } + .control.has-icons-right .input, + .control.has-icons-right .select select { + padding-right: 2.25em; } + .control.has-icons-right .icon.is-right { + right: 0; } + .control.is-loading::after { + animation: spinAround 500ms infinite linear; + border: 2px solid #dbdbdb; + border-radius: 290486px; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; + position: absolute !important; + right: 0.625em; + top: 0.625em; } + .control.is-loading.is-small:after { + font-size: 0.75rem; } + .control.is-loading.is-medium:after { + font-size: 1.25rem; } + .control.is-loading.is-large:after { + font-size: 1.5rem; } + +.icon { + align-items: center; + display: inline-flex; + justify-content: center; + height: 1.5rem; + width: 1.5rem; } + .icon.is-small { + height: 1rem; + width: 1rem; } + .icon.is-medium { + height: 2rem; + width: 2rem; } + .icon.is-large { + height: 3rem; + width: 3rem; } + +.image { + display: block; + position: relative; } + .image img { + display: block; + height: auto; + width: 100%; } + .image.is-square img, .image.is-1by1 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-16by9 img, .image.is-2by1 img { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; } + .image.is-square, .image.is-1by1 { + padding-top: 100%; } + .image.is-4by3 { + padding-top: 75%; } + .image.is-3by2 { + padding-top: 66.6666%; } + .image.is-16by9 { + padding-top: 56.25%; } + .image.is-2by1 { + padding-top: 50%; } + .image.is-16x16 { + height: 16px; + width: 16px; } + .image.is-24x24 { + height: 24px; + width: 24px; } + .image.is-32x32 { + height: 32px; + width: 32px; } + .image.is-48x48 { + height: 48px; + width: 48px; } + .image.is-64x64 { + height: 64px; + width: 64px; } + .image.is-96x96 { + height: 96px; + width: 96px; } + .image.is-128x128 { + height: 128px; + width: 128px; } + +.notification { + background-color: whitesmoke; + border-radius: 3px; + padding: 1.25rem 2.5rem 1.25rem 1.5rem; + position: relative; } + .notification:not(:last-child) { + margin-bottom: 1.5rem; } + .notification a:not(.button) { + color: currentColor; + text-decoration: underline; } + .notification strong { + color: currentColor; } + .notification code, + .notification pre { + background: white; } + .notification pre code { + background: transparent; } + .notification > .delete { + position: absolute; + right: 0.5em; + top: 0.5em; } + .notification .title, + .notification .subtitle, + .notification .content { + color: currentColor; } + .notification.is-white { + background-color: white; + color: #0a0a0a; } + .notification.is-black { + background-color: #0a0a0a; + color: white; } + .notification.is-light { + background-color: whitesmoke; + color: #363636; } + .notification.is-dark { + background-color: #363636; + color: whitesmoke; } + .notification.is-primary { + background-color: #C93312; + color: #fff; } + .notification.is-link { + background-color: #3273dc; + color: #fff; } + .notification.is-info { + background-color: #209cee; + color: #fff; } + .notification.is-success { + background-color: #23d160; + color: #fff; } + .notification.is-warning { + background-color: #ffdd57; + color: #FFFFFF; } + .notification.is-danger { + background-color: #ff3860; + color: #fff; } + +.progress { + -moz-appearance: none; + -webkit-appearance: none; + border: none; + border-radius: 290486px; + display: block; + height: 1rem; + overflow: hidden; + padding: 0; + width: 100%; } + .progress:not(:last-child) { + margin-bottom: 1.5rem; } + .progress::-webkit-progress-bar { + background-color: #dbdbdb; } + .progress::-webkit-progress-value { + background-color: #4a4a4a; } + .progress::-moz-progress-bar { + background-color: #4a4a4a; } + .progress::-ms-fill { + background-color: #4a4a4a; + border: none; } + .progress.is-white::-webkit-progress-value { + background-color: white; } + .progress.is-white::-moz-progress-bar { + background-color: white; } + .progress.is-white::-ms-fill { + background-color: white; } + .progress.is-black::-webkit-progress-value { + background-color: #0a0a0a; } + .progress.is-black::-moz-progress-bar { + background-color: #0a0a0a; } + .progress.is-black::-ms-fill { + background-color: #0a0a0a; } + .progress.is-light::-webkit-progress-value { + background-color: whitesmoke; } + .progress.is-light::-moz-progress-bar { + background-color: whitesmoke; } + .progress.is-light::-ms-fill { + background-color: whitesmoke; } + .progress.is-dark::-webkit-progress-value { + background-color: #363636; } + .progress.is-dark::-moz-progress-bar { + background-color: #363636; } + .progress.is-dark::-ms-fill { + background-color: #363636; } + .progress.is-primary::-webkit-progress-value { + background-color: #C93312; } + .progress.is-primary::-moz-progress-bar { + background-color: #C93312; } + .progress.is-primary::-ms-fill { + background-color: #C93312; } + .progress.is-link::-webkit-progress-value { + background-color: #3273dc; } + .progress.is-link::-moz-progress-bar { + background-color: #3273dc; } + .progress.is-link::-ms-fill { + background-color: #3273dc; } + .progress.is-info::-webkit-progress-value { + background-color: #209cee; } + .progress.is-info::-moz-progress-bar { + background-color: #209cee; } + .progress.is-info::-ms-fill { + background-color: #209cee; } + .progress.is-success::-webkit-progress-value { + background-color: #23d160; } + .progress.is-success::-moz-progress-bar { + background-color: #23d160; } + .progress.is-success::-ms-fill { + background-color: #23d160; } + .progress.is-warning::-webkit-progress-value { + background-color: #ffdd57; } + .progress.is-warning::-moz-progress-bar { + background-color: #ffdd57; } + .progress.is-warning::-ms-fill { + background-color: #ffdd57; } + .progress.is-danger::-webkit-progress-value { + background-color: #ff3860; } + .progress.is-danger::-moz-progress-bar { + background-color: #ff3860; } + .progress.is-danger::-ms-fill { + background-color: #ff3860; } + .progress.is-small { + height: 0.75rem; } + .progress.is-medium { + height: 1.25rem; } + .progress.is-large { + height: 1.5rem; } + +.table { + background-color: white; + color: #363636; + margin-bottom: 1.5rem; } + .table td, + .table th { + border: 1px solid #dbdbdb; + border-width: 0 0 1px; + padding: 0.5em 0.75em; + vertical-align: top; } + .table td.is-white, + .table th.is-white { + background-color: white; + border-color: white; + color: #0a0a0a; } + .table td.is-black, + .table th.is-black { + background-color: #0a0a0a; + border-color: #0a0a0a; + color: white; } + .table td.is-light, + .table th.is-light { + background-color: whitesmoke; + border-color: whitesmoke; + color: #363636; } + .table td.is-dark, + .table th.is-dark { + background-color: #363636; + border-color: #363636; + color: whitesmoke; } + .table td.is-primary, + .table th.is-primary { + background-color: #C93312; + border-color: #C93312; + color: #fff; } + .table td.is-link, + .table th.is-link { + background-color: #3273dc; + border-color: #3273dc; + color: #fff; } + .table td.is-info, + .table th.is-info { + background-color: #209cee; + border-color: #209cee; + color: #fff; } + .table td.is-success, + .table th.is-success { + background-color: #23d160; + border-color: #23d160; + color: #fff; } + .table td.is-warning, + .table th.is-warning { + background-color: #ffdd57; + border-color: #ffdd57; + color: #FFFFFF; } + .table td.is-danger, + .table th.is-danger { + background-color: #ff3860; + border-color: #ff3860; + color: #fff; } + .table td.is-narrow, + .table th.is-narrow { + white-space: nowrap; + width: 1%; } + .table td.is-selected, + .table th.is-selected { + background-color: #C93312; + color: #fff; } + .table td.is-selected a, + .table td.is-selected strong, + .table th.is-selected a, + .table th.is-selected strong { + color: currentColor; } + .table th { + color: #363636; + text-align: left; } + .table tr.is-selected { + background-color: #C93312; + color: #fff; } + .table tr.is-selected a, + .table tr.is-selected strong { + color: currentColor; } + .table tr.is-selected td, + .table tr.is-selected th { + border-color: #fff; + color: currentColor; } + .table thead td, + .table thead th { + border-width: 0 0 2px; + color: #363636; } + .table tfoot td, + .table tfoot th { + border-width: 2px 0 0; + color: #363636; } + .table tbody tr:last-child td, + .table tbody tr:last-child th { + border-bottom-width: 0; } + .table.is-bordered td, + .table.is-bordered th { + border-width: 1px; } + .table.is-bordered tr:last-child td, + .table.is-bordered tr:last-child th { + border-bottom-width: 1px; } + .table.is-fullwidth { + width: 100%; } + .table.is-hoverable tbody tr:not(.is-selected):hover { + background-color: #fafafa; } + .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover { + background-color: whitesmoke; } + .table.is-narrow td, + .table.is-narrow th { + padding: 0.25em 0.5em; } + .table.is-striped tbody tr:not(.is-selected):nth-child(even) { + background-color: #fafafa; } + +.tags { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; } + .tags .tag { + margin-bottom: 0.5rem; } + .tags .tag:not(:last-child) { + margin-right: 0.5rem; } + .tags:last-child { + margin-bottom: -0.5rem; } + .tags:not(:last-child) { + margin-bottom: 1rem; } + .tags.has-addons .tag { + margin-right: 0; } + .tags.has-addons .tag:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + .tags.has-addons .tag:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + .tags.is-centered { + justify-content: center; } + .tags.is-centered .tag { + margin-right: 0.25rem; + margin-left: 0.25rem; } + .tags.is-right { + justify-content: flex-end; } + .tags.is-right .tag:not(:first-child) { + margin-left: 0.5rem; } + .tags.is-right .tag:not(:last-child) { + margin-right: 0; } + +.tag:not(body) { + align-items: center; + background-color: whitesmoke; + border-radius: 3px; + color: #4a4a4a; + display: inline-flex; + font-size: 0.75rem; + height: 2em; + justify-content: center; + line-height: 1.5; + padding-left: 0.75em; + padding-right: 0.75em; + white-space: nowrap; } + .tag:not(body) .delete { + margin-left: 0.25em; + margin-right: -0.375em; } + .tag:not(body).is-white { + background-color: white; + color: #0a0a0a; } + .tag:not(body).is-black { + background-color: #0a0a0a; + color: white; } + .tag:not(body).is-light { + background-color: whitesmoke; + color: #363636; } + .tag:not(body).is-dark { + background-color: #363636; + color: whitesmoke; } + .tag:not(body).is-primary { + background-color: #C93312; + color: #fff; } + .tag:not(body).is-link { + background-color: #3273dc; + color: #fff; } + .tag:not(body).is-info { + background-color: #209cee; + color: #fff; } + .tag:not(body).is-success { + background-color: #23d160; + color: #fff; } + .tag:not(body).is-warning { + background-color: #ffdd57; + color: #FFFFFF; } + .tag:not(body).is-danger { + background-color: #ff3860; + color: #fff; } + .tag:not(body).is-medium { + font-size: 1rem; } + .tag:not(body).is-large { + font-size: 1.25rem; } + .tag:not(body) .icon:first-child:not(:last-child) { + margin-left: -0.375em; + margin-right: 0.1875em; } + .tag:not(body) .icon:last-child:not(:first-child) { + margin-left: 0.1875em; + margin-right: -0.375em; } + .tag:not(body) .icon:first-child:last-child { + margin-left: -0.375em; + margin-right: -0.375em; } + .tag:not(body).is-delete { + margin-left: 1px; + padding: 0; + position: relative; + width: 2em; } + .tag:not(body).is-delete:before, .tag:not(body).is-delete:after { + background-color: currentColor; + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; } + .tag:not(body).is-delete:before { + height: 1px; + width: 50%; } + .tag:not(body).is-delete:after { + height: 50%; + width: 1px; } + .tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus { + background-color: #e8e8e8; } + .tag:not(body).is-delete:active { + background-color: #dbdbdb; } + .tag:not(body).is-rounded { + border-radius: 290486px; } + +a.tag:hover { + text-decoration: underline; } + +.title, +.subtitle { + word-break: break-word; } + .title:not(:last-child), + .subtitle:not(:last-child) { + margin-bottom: 1.5rem; } + .title em, + .title span, + .subtitle em, + .subtitle span { + font-weight: inherit; } + .title .tag, + .subtitle .tag { + vertical-align: middle; } + +.title { + color: #363636; + font-size: 2rem; + font-weight: 600; + line-height: 1.125; } + .title strong { + color: inherit; + font-weight: inherit; } + .title + .highlight { + margin-top: -0.75rem; } + .title:not(.is-spaced) + .subtitle { + margin-top: -1.5rem; } + .title.is-1 { + font-size: 3rem; } + .title.is-2 { + font-size: 2.5rem; } + .title.is-3 { + font-size: 2rem; } + .title.is-4 { + font-size: 1.5rem; } + .title.is-5 { + font-size: 1.25rem; } + .title.is-6 { + font-size: 1rem; } + .title.is-7 { + font-size: 0.75rem; } + +.subtitle { + color: #4a4a4a; + font-size: 1.25rem; + font-weight: 400; + line-height: 1.25; } + .subtitle strong { + color: #363636; + font-weight: 600; } + .subtitle:not(.is-spaced) + .title { + margin-top: -1.5rem; } + .subtitle.is-1 { + font-size: 3rem; } + .subtitle.is-2 { + font-size: 2.5rem; } + .subtitle.is-3 { + font-size: 2rem; } + .subtitle.is-4 { + font-size: 1.5rem; } + .subtitle.is-5 { + font-size: 1.25rem; } + .subtitle.is-6 { + font-size: 1rem; } + .subtitle.is-7 { + font-size: 0.75rem; } + +.block:not(:last-child) { + margin-bottom: 1.5rem; } + +.delete { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -moz-appearance: none; + -webkit-appearance: none; + background-color: rgba(10, 10, 10, 0.2); + border: none; + border-radius: 290486px; + cursor: pointer; + display: inline-block; + flex-grow: 0; + flex-shrink: 0; + font-size: 0; + height: 20px; + max-height: 20px; + max-width: 20px; + min-height: 20px; + min-width: 20px; + outline: none; + position: relative; + vertical-align: top; + width: 20px; } + .delete:before, .delete:after { + background-color: white; + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; } + .delete:before { + height: 2px; + width: 50%; } + .delete:after { + height: 50%; + width: 2px; } + .delete:hover, .delete:focus { + background-color: rgba(10, 10, 10, 0.3); } + .delete:active { + background-color: rgba(10, 10, 10, 0.4); } + .delete.is-small { + height: 16px; + max-height: 16px; + max-width: 16px; + min-height: 16px; + min-width: 16px; + width: 16px; } + .delete.is-medium { + height: 24px; + max-height: 24px; + max-width: 24px; + min-height: 24px; + min-width: 24px; + width: 24px; } + .delete.is-large { + height: 32px; + max-height: 32px; + max-width: 32px; + min-height: 32px; + min-width: 32px; + width: 32px; } + +.heading { + display: block; + font-size: 11px; + letter-spacing: 1px; + margin-bottom: 5px; + text-transform: uppercase; } + +.highlight { + font-weight: 400; + max-width: 100%; + overflow: hidden; + padding: 0; } + .highlight:not(:last-child) { + margin-bottom: 1.5rem; } + .highlight pre { + overflow: auto; + max-width: 100%; } + +.loader { + animation: spinAround 500ms infinite linear; + border: 2px solid #dbdbdb; + border-radius: 290486px; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; } + +.number { + align-items: center; + background-color: whitesmoke; + border-radius: 290486px; + display: inline-flex; + font-size: 1.25rem; + height: 2em; + justify-content: center; + margin-right: 1.5rem; + min-width: 2.5em; + padding: 0.25rem 0.5rem; + text-align: center; + vertical-align: top; } + +.breadcrumb { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + align-items: stretch; + display: flex; + font-size: 1rem; + overflow: hidden; + overflow-x: auto; + white-space: nowrap; } + .breadcrumb:not(:last-child) { + margin-bottom: 1.5rem; } + .breadcrumb a { + align-items: center; + color: #3273dc; + display: flex; + justify-content: center; + padding: 0.5em 0.75em; } + .breadcrumb a:hover { + color: #363636; } + .breadcrumb li { + align-items: center; + display: flex; } + .breadcrumb li:first-child a { + padding-left: 0; } + .breadcrumb li.is-active a { + color: #363636; + cursor: default; + pointer-events: none; } + .breadcrumb li + li::before { + color: #4a4a4a; + content: "\0002f"; } + .breadcrumb ul, .breadcrumb ol { + align-items: center; + display: flex; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-start; } + .breadcrumb .icon:first-child { + margin-right: 0.5em; } + .breadcrumb .icon:last-child { + margin-left: 0.5em; } + .breadcrumb.is-centered ol, .breadcrumb.is-centered ul { + justify-content: center; } + .breadcrumb.is-right ol, .breadcrumb.is-right ul { + justify-content: flex-end; } + .breadcrumb.is-small { + font-size: 0.75rem; } + .breadcrumb.is-medium { + font-size: 1.25rem; } + .breadcrumb.is-large { + font-size: 1.5rem; } + .breadcrumb.has-arrow-separator li + li::before { + content: "\02192"; } + .breadcrumb.has-bullet-separator li + li::before { + content: "\02022"; } + .breadcrumb.has-dot-separator li + li::before { + content: "\000b7"; } + .breadcrumb.has-succeeds-separator li + li::before { + content: "\0227B"; } + +.card { + background-color: white; + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + color: #4a4a4a; + max-width: 100%; + position: relative; } + +.card-header { + align-items: stretch; + box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1); + display: flex; } + +.card-header-title { + align-items: center; + color: #363636; + display: flex; + flex-grow: 1; + font-weight: 700; + padding: 0.75rem; } + .card-header-title.is-centered { + justify-content: center; } + +.card-header-icon { + align-items: center; + cursor: pointer; + display: flex; + justify-content: center; + padding: 0.75rem; } + +.card-image { + display: block; + position: relative; } + +.card-content { + padding: 1.5rem; } + +.card-footer { + border-top: 1px solid #dbdbdb; + align-items: stretch; + display: flex; } + +.card-footer-item { + align-items: center; + display: flex; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + justify-content: center; + padding: 0.75rem; } + .card-footer-item:not(:last-child) { + border-right: 1px solid #dbdbdb; } + +.card .media:not(:last-child) { + margin-bottom: 0.75rem; } + +.dropdown { + display: inline-flex; + position: relative; + vertical-align: top; } + .dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu { + display: block; } + .dropdown.is-right .dropdown-menu { + left: auto; + right: 0; } + .dropdown.is-up .dropdown-menu { + bottom: 100%; + padding-bottom: 4px; + padding-top: unset; + top: auto; } + +.dropdown-menu { + display: none; + left: 0; + min-width: 12rem; + padding-top: 4px; + position: absolute; + top: 100%; + z-index: 20; } + +.dropdown-content { + background-color: white; + border-radius: 3px; + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + padding-bottom: 0.5rem; + padding-top: 0.5rem; } + +.dropdown-item { + color: #4a4a4a; + display: block; + font-size: 0.875rem; + line-height: 1.5; + padding: 0.375rem 1rem; + position: relative; } + +a.dropdown-item { + padding-right: 3rem; + white-space: nowrap; } + a.dropdown-item:hover { + background-color: whitesmoke; + color: #0a0a0a; } + a.dropdown-item.is-active { + background-color: #3273dc; + color: #fff; } + +.dropdown-divider { + background-color: #dbdbdb; + border: none; + display: block; + height: 1px; + margin: 0.5rem 0; } + +.level { + align-items: center; + justify-content: space-between; } + .level:not(:last-child) { + margin-bottom: 1.5rem; } + .level code { + border-radius: 3px; } + .level img { + display: inline-block; + vertical-align: top; } + .level.is-mobile { + display: flex; } + .level.is-mobile .level-left, + .level.is-mobile .level-right { + display: flex; } + .level.is-mobile .level-left + .level-right { + margin-top: 0; } + .level.is-mobile .level-item { + margin-right: 0.75rem; } + .level.is-mobile .level-item:not(:last-child) { + margin-bottom: 0; } + .level.is-mobile .level-item:not(.is-narrow) { + flex-grow: 1; } + @media screen and (min-width: 769px), print { + .level { + display: flex; } + .level > .level-item:not(.is-narrow) { + flex-grow: 1; } } + +.level-item { + align-items: center; + display: flex; + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; } + .level-item .title, + .level-item .subtitle { + margin-bottom: 0; } + @media screen and (max-width: 768px) { + .level-item:not(:last-child) { + margin-bottom: 0.75rem; } } + +.level-left, +.level-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; } + .level-left .level-item.is-flexible, + .level-right .level-item.is-flexible { + flex-grow: 1; } + @media screen and (min-width: 769px), print { + .level-left .level-item:not(:last-child), + .level-right .level-item:not(:last-child) { + margin-right: 0.75rem; } } + +.level-left { + align-items: center; + justify-content: flex-start; } + @media screen and (max-width: 768px) { + .level-left + .level-right { + margin-top: 1.5rem; } } + @media screen and (min-width: 769px), print { + .level-left { + display: flex; } } + +.level-right { + align-items: center; + justify-content: flex-end; } + @media screen and (min-width: 769px), print { + .level-right { + display: flex; } } + +.media { + align-items: flex-start; + display: flex; + text-align: left; } + .media .content:not(:last-child) { + margin-bottom: 0.75rem; } + .media .media { + border-top: 1px solid rgba(219, 219, 219, 0.5); + display: flex; + padding-top: 0.75rem; } + .media .media .content:not(:last-child), + .media .media .control:not(:last-child) { + margin-bottom: 0.5rem; } + .media .media .media { + padding-top: 0.5rem; } + .media .media .media + .media { + margin-top: 0.5rem; } + .media + .media { + border-top: 1px solid rgba(219, 219, 219, 0.5); + margin-top: 1rem; + padding-top: 1rem; } + .media.is-large + .media { + margin-top: 1.5rem; + padding-top: 1.5rem; } + +.media-left, +.media-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; } + +.media-left { + margin-right: 1rem; } + +.media-right { + margin-left: 1rem; } + +.media-content { + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; + text-align: left; } + +.menu { + font-size: 1rem; } + .menu.is-small { + font-size: 0.75rem; } + .menu.is-medium { + font-size: 1.25rem; } + .menu.is-large { + font-size: 1.5rem; } + +.menu-list { + line-height: 1.25; } + .menu-list a { + border-radius: 2px; + color: #4a4a4a; + display: block; + padding: 0.5em 0.75em; } + .menu-list a:hover { + background-color: whitesmoke; + color: #363636; } + .menu-list a.is-active { + background-color: #3273dc; + color: #fff; } + .menu-list li ul { + border-left: 1px solid #dbdbdb; + margin: 0.75em; + padding-left: 0.75em; } + +.menu-label { + color: #7a7a7a; + font-size: 0.75em; + letter-spacing: 0.1em; + text-transform: uppercase; } + .menu-label:not(:first-child) { + margin-top: 1em; } + .menu-label:not(:last-child) { + margin-bottom: 1em; } + +.message { + background-color: whitesmoke; + border-radius: 3px; + font-size: 1rem; } + .message:not(:last-child) { + margin-bottom: 1.5rem; } + .message strong { + color: currentColor; } + .message a:not(.button):not(.tag) { + color: currentColor; + text-decoration: underline; } + .message.is-small { + font-size: 0.75rem; } + .message.is-medium { + font-size: 1.25rem; } + .message.is-large { + font-size: 1.5rem; } + .message.is-white { + background-color: white; } + .message.is-white .message-header { + background-color: white; + color: #0a0a0a; } + .message.is-white .message-body { + border-color: white; + color: #4d4d4d; } + .message.is-black { + background-color: #fafafa; } + .message.is-black .message-header { + background-color: #0a0a0a; + color: white; } + .message.is-black .message-body { + border-color: #0a0a0a; + color: #090909; } + .message.is-light { + background-color: #fafafa; } + .message.is-light .message-header { + background-color: whitesmoke; + color: #363636; } + .message.is-light .message-body { + border-color: whitesmoke; + color: #505050; } + .message.is-dark { + background-color: #fafafa; } + .message.is-dark .message-header { + background-color: #363636; + color: whitesmoke; } + .message.is-dark .message-body { + border-color: #363636; + color: #2a2a2a; } + .message.is-primary { + background-color: #fef7f6; } + .message.is-primary .message-header { + background-color: #C93312; + color: #fff; } + .message.is-primary .message-body { + border-color: #C93312; + color: #8a2711; } + .message.is-link { + background-color: #f6f9fe; } + .message.is-link .message-header { + background-color: #3273dc; + color: #fff; } + .message.is-link .message-body { + border-color: #3273dc; + color: #22509a; } + .message.is-info { + background-color: #f6fbfe; } + .message.is-info .message-header { + background-color: #209cee; + color: #fff; } + .message.is-info .message-body { + border-color: #209cee; + color: #12537e; } + .message.is-success { + background-color: #f6fef9; } + .message.is-success .message-header { + background-color: #23d160; + color: #fff; } + .message.is-success .message-body { + border-color: #23d160; + color: #0e301a; } + .message.is-warning { + background-color: #fffdf5; } + .message.is-warning .message-header { + background-color: #ffdd57; + color: #FFFFFF; } + .message.is-warning .message-body { + border-color: #ffdd57; + color: #3b3108; } + .message.is-danger { + background-color: #fff5f7; } + .message.is-danger .message-header { + background-color: #ff3860; + color: #fff; } + .message.is-danger .message-body { + border-color: #ff3860; + color: #cd0930; } + +.message-header { + align-items: center; + background-color: #4a4a4a; + border-radius: 3px 3px 0 0; + color: #fff; + display: flex; + justify-content: space-between; + line-height: 1.25; + padding: 0.5em 0.75em; + position: relative; } + .message-header .delete { + flex-grow: 0; + flex-shrink: 0; + margin-left: 0.75em; } + .message-header + .message-body { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-top: none; } + +.message-body { + border: 1px solid #dbdbdb; + border-radius: 3px; + color: #4a4a4a; + padding: 1em 1.25em; } + .message-body code, + .message-body pre { + background-color: white; } + .message-body pre code { + background-color: transparent; } + +.modal { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + align-items: center; + display: none; + justify-content: center; + overflow: hidden; + position: fixed; + z-index: 20; } + .modal.is-active { + display: flex; } + +.modal-background { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + background-color: rgba(10, 10, 10, 0.86); } + +.modal-content, +.modal-card { + margin: 0 20px; + max-height: calc(100vh - 160px); + overflow: auto; + position: relative; + width: 100%; } + @media screen and (min-width: 769px), print { + .modal-content, + .modal-card { + margin: 0 auto; + max-height: calc(100vh - 40px); + width: 640px; } } + +.modal-close { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -moz-appearance: none; + -webkit-appearance: none; + background-color: rgba(10, 10, 10, 0.2); + border: none; + border-radius: 290486px; + cursor: pointer; + display: inline-block; + flex-grow: 0; + flex-shrink: 0; + font-size: 0; + height: 20px; + max-height: 20px; + max-width: 20px; + min-height: 20px; + min-width: 20px; + outline: none; + position: relative; + vertical-align: top; + width: 20px; + background: none; + height: 40px; + position: fixed; + right: 20px; + top: 20px; + width: 40px; } + .modal-close:before, .modal-close:after { + background-color: white; + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; } + .modal-close:before { + height: 2px; + width: 50%; } + .modal-close:after { + height: 50%; + width: 2px; } + .modal-close:hover, .modal-close:focus { + background-color: rgba(10, 10, 10, 0.3); } + .modal-close:active { + background-color: rgba(10, 10, 10, 0.4); } + .modal-close.is-small { + height: 16px; + max-height: 16px; + max-width: 16px; + min-height: 16px; + min-width: 16px; + width: 16px; } + .modal-close.is-medium { + height: 24px; + max-height: 24px; + max-width: 24px; + min-height: 24px; + min-width: 24px; + width: 24px; } + .modal-close.is-large { + height: 32px; + max-height: 32px; + max-width: 32px; + min-height: 32px; + min-width: 32px; + width: 32px; } + +.modal-card { + display: flex; + flex-direction: column; + max-height: calc(100vh - 40px); + overflow: hidden; } + +.modal-card-head, +.modal-card-foot { + align-items: center; + background-color: whitesmoke; + display: flex; + flex-shrink: 0; + justify-content: flex-start; + padding: 20px; + position: relative; } + +.modal-card-head { + border-bottom: 1px solid #dbdbdb; + border-top-left-radius: 5px; + border-top-right-radius: 5px; } + +.modal-card-title { + color: #363636; + flex-grow: 1; + flex-shrink: 0; + font-size: 1.5rem; + line-height: 1; } + +.modal-card-foot { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-top: 1px solid #dbdbdb; } + .modal-card-foot .button:not(:last-child) { + margin-right: 10px; } + +.modal-card-body { + -webkit-overflow-scrolling: touch; + background-color: white; + flex-grow: 1; + flex-shrink: 1; + overflow: auto; + padding: 20px; } + +.navbar { + background-color: white; + min-height: 3.25rem; + position: relative; } + .navbar.is-white { + background-color: white; + color: #0a0a0a; } + .navbar.is-white .navbar-brand > .navbar-item, + .navbar.is-white .navbar-brand .navbar-link { + color: #0a0a0a; } + .navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active, + .navbar.is-white .navbar-brand .navbar-link:hover, + .navbar.is-white .navbar-brand .navbar-link.is-active { + background-color: #f2f2f2; + color: #0a0a0a; } + .navbar.is-white .navbar-brand .navbar-link::after { + border-color: #0a0a0a; } + @media screen and (min-width: 1024px) { + .navbar.is-white .navbar-start > .navbar-item, + .navbar.is-white .navbar-start .navbar-link, + .navbar.is-white .navbar-end > .navbar-item, + .navbar.is-white .navbar-end .navbar-link { + color: #0a0a0a; } + .navbar.is-white .navbar-start > a.navbar-item:hover, .navbar.is-white .navbar-start > a.navbar-item.is-active, + .navbar.is-white .navbar-start .navbar-link:hover, + .navbar.is-white .navbar-start .navbar-link.is-active, + .navbar.is-white .navbar-end > a.navbar-item:hover, + .navbar.is-white .navbar-end > a.navbar-item.is-active, + .navbar.is-white .navbar-end .navbar-link:hover, + .navbar.is-white .navbar-end .navbar-link.is-active { + background-color: #f2f2f2; + color: #0a0a0a; } + .navbar.is-white .navbar-start .navbar-link::after, + .navbar.is-white .navbar-end .navbar-link::after { + border-color: #0a0a0a; } + .navbar.is-white .navbar-item.has-dropdown:hover .navbar-link, + .navbar.is-white .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #f2f2f2; + color: #0a0a0a; } + .navbar.is-white .navbar-dropdown a.navbar-item.is-active { + background-color: white; + color: #0a0a0a; } } + .navbar.is-black { + background-color: #0a0a0a; + color: white; } + .navbar.is-black .navbar-brand > .navbar-item, + .navbar.is-black .navbar-brand .navbar-link { + color: white; } + .navbar.is-black .navbar-brand > a.navbar-item:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active, + .navbar.is-black .navbar-brand .navbar-link:hover, + .navbar.is-black .navbar-brand .navbar-link.is-active { + background-color: black; + color: white; } + .navbar.is-black .navbar-brand .navbar-link::after { + border-color: white; } + @media screen and (min-width: 1024px) { + .navbar.is-black .navbar-start > .navbar-item, + .navbar.is-black .navbar-start .navbar-link, + .navbar.is-black .navbar-end > .navbar-item, + .navbar.is-black .navbar-end .navbar-link { + color: white; } + .navbar.is-black .navbar-start > a.navbar-item:hover, .navbar.is-black .navbar-start > a.navbar-item.is-active, + .navbar.is-black .navbar-start .navbar-link:hover, + .navbar.is-black .navbar-start .navbar-link.is-active, + .navbar.is-black .navbar-end > a.navbar-item:hover, + .navbar.is-black .navbar-end > a.navbar-item.is-active, + .navbar.is-black .navbar-end .navbar-link:hover, + .navbar.is-black .navbar-end .navbar-link.is-active { + background-color: black; + color: white; } + .navbar.is-black .navbar-start .navbar-link::after, + .navbar.is-black .navbar-end .navbar-link::after { + border-color: white; } + .navbar.is-black .navbar-item.has-dropdown:hover .navbar-link, + .navbar.is-black .navbar-item.has-dropdown.is-active .navbar-link { + background-color: black; + color: white; } + .navbar.is-black .navbar-dropdown a.navbar-item.is-active { + background-color: #0a0a0a; + color: white; } } + .navbar.is-light { + background-color: whitesmoke; + color: #363636; } + .navbar.is-light .navbar-brand > .navbar-item, + .navbar.is-light .navbar-brand .navbar-link { + color: #363636; } + .navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active, + .navbar.is-light .navbar-brand .navbar-link:hover, + .navbar.is-light .navbar-brand .navbar-link.is-active { + background-color: #e8e8e8; + color: #363636; } + .navbar.is-light .navbar-brand .navbar-link::after { + border-color: #363636; } + @media screen and (min-width: 1024px) { + .navbar.is-light .navbar-start > .navbar-item, + .navbar.is-light .navbar-start .navbar-link, + .navbar.is-light .navbar-end > .navbar-item, + .navbar.is-light .navbar-end .navbar-link { + color: #363636; } + .navbar.is-light .navbar-start > a.navbar-item:hover, .navbar.is-light .navbar-start > a.navbar-item.is-active, + .navbar.is-light .navbar-start .navbar-link:hover, + .navbar.is-light .navbar-start .navbar-link.is-active, + .navbar.is-light .navbar-end > a.navbar-item:hover, + .navbar.is-light .navbar-end > a.navbar-item.is-active, + .navbar.is-light .navbar-end .navbar-link:hover, + .navbar.is-light .navbar-end .navbar-link.is-active { + background-color: #e8e8e8; + color: #363636; } + .navbar.is-light .navbar-start .navbar-link::after, + .navbar.is-light .navbar-end .navbar-link::after { + border-color: #363636; } + .navbar.is-light .navbar-item.has-dropdown:hover .navbar-link, + .navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #e8e8e8; + color: #363636; } + .navbar.is-light .navbar-dropdown a.navbar-item.is-active { + background-color: whitesmoke; + color: #363636; } } + .navbar.is-dark { + background-color: #363636; + color: whitesmoke; } + .navbar.is-dark .navbar-brand > .navbar-item, + .navbar.is-dark .navbar-brand .navbar-link { + color: whitesmoke; } + .navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active, + .navbar.is-dark .navbar-brand .navbar-link:hover, + .navbar.is-dark .navbar-brand .navbar-link.is-active { + background-color: #292929; + color: whitesmoke; } + .navbar.is-dark .navbar-brand .navbar-link::after { + border-color: whitesmoke; } + @media screen and (min-width: 1024px) { + .navbar.is-dark .navbar-start > .navbar-item, + .navbar.is-dark .navbar-start .navbar-link, + .navbar.is-dark .navbar-end > .navbar-item, + .navbar.is-dark .navbar-end .navbar-link { + color: whitesmoke; } + .navbar.is-dark .navbar-start > a.navbar-item:hover, .navbar.is-dark .navbar-start > a.navbar-item.is-active, + .navbar.is-dark .navbar-start .navbar-link:hover, + .navbar.is-dark .navbar-start .navbar-link.is-active, + .navbar.is-dark .navbar-end > a.navbar-item:hover, + .navbar.is-dark .navbar-end > a.navbar-item.is-active, + .navbar.is-dark .navbar-end .navbar-link:hover, + .navbar.is-dark .navbar-end .navbar-link.is-active { + background-color: #292929; + color: whitesmoke; } + .navbar.is-dark .navbar-start .navbar-link::after, + .navbar.is-dark .navbar-end .navbar-link::after { + border-color: whitesmoke; } + .navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link, + .navbar.is-dark .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #292929; + color: whitesmoke; } + .navbar.is-dark .navbar-dropdown a.navbar-item.is-active { + background-color: #363636; + color: whitesmoke; } } + .navbar.is-primary { + background-color: #C93312; + color: #fff; } + .navbar.is-primary .navbar-brand > .navbar-item, + .navbar.is-primary .navbar-brand .navbar-link { + color: #fff; } + .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active, + .navbar.is-primary .navbar-brand .navbar-link:hover, + .navbar.is-primary .navbar-brand .navbar-link.is-active { + background-color: #b22d10; + color: #fff; } + .navbar.is-primary .navbar-brand .navbar-link::after { + border-color: #fff; } + @media screen and (min-width: 1024px) { + .navbar.is-primary .navbar-start > .navbar-item, + .navbar.is-primary .navbar-start .navbar-link, + .navbar.is-primary .navbar-end > .navbar-item, + .navbar.is-primary .navbar-end .navbar-link { + color: #fff; } + .navbar.is-primary .navbar-start > a.navbar-item:hover, .navbar.is-primary .navbar-start > a.navbar-item.is-active, + .navbar.is-primary .navbar-start .navbar-link:hover, + .navbar.is-primary .navbar-start .navbar-link.is-active, + .navbar.is-primary .navbar-end > a.navbar-item:hover, + .navbar.is-primary .navbar-end > a.navbar-item.is-active, + .navbar.is-primary .navbar-end .navbar-link:hover, + .navbar.is-primary .navbar-end .navbar-link.is-active { + background-color: #b22d10; + color: #fff; } + .navbar.is-primary .navbar-start .navbar-link::after, + .navbar.is-primary .navbar-end .navbar-link::after { + border-color: #fff; } + .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link, + .navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #b22d10; + color: #fff; } + .navbar.is-primary .navbar-dropdown a.navbar-item.is-active { + background-color: #C93312; + color: #fff; } } + .navbar.is-link { + background-color: #3273dc; + color: #fff; } + .navbar.is-link .navbar-brand > .navbar-item, + .navbar.is-link .navbar-brand .navbar-link { + color: #fff; } + .navbar.is-link .navbar-brand > a.navbar-item:hover, .navbar.is-link .navbar-brand > a.navbar-item.is-active, + .navbar.is-link .navbar-brand .navbar-link:hover, + .navbar.is-link .navbar-brand .navbar-link.is-active { + background-color: #2366d1; + color: #fff; } + .navbar.is-link .navbar-brand .navbar-link::after { + border-color: #fff; } + @media screen and (min-width: 1024px) { + .navbar.is-link .navbar-start > .navbar-item, + .navbar.is-link .navbar-start .navbar-link, + .navbar.is-link .navbar-end > .navbar-item, + .navbar.is-link .navbar-end .navbar-link { + color: #fff; } + .navbar.is-link .navbar-start > a.navbar-item:hover, .navbar.is-link .navbar-start > a.navbar-item.is-active, + .navbar.is-link .navbar-start .navbar-link:hover, + .navbar.is-link .navbar-start .navbar-link.is-active, + .navbar.is-link .navbar-end > a.navbar-item:hover, + .navbar.is-link .navbar-end > a.navbar-item.is-active, + .navbar.is-link .navbar-end .navbar-link:hover, + .navbar.is-link .navbar-end .navbar-link.is-active { + background-color: #2366d1; + color: #fff; } + .navbar.is-link .navbar-start .navbar-link::after, + .navbar.is-link .navbar-end .navbar-link::after { + border-color: #fff; } + .navbar.is-link .navbar-item.has-dropdown:hover .navbar-link, + .navbar.is-link .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #2366d1; + color: #fff; } + .navbar.is-link .navbar-dropdown a.navbar-item.is-active { + background-color: #3273dc; + color: #fff; } } + .navbar.is-info { + background-color: #209cee; + color: #fff; } + .navbar.is-info .navbar-brand > .navbar-item, + .navbar.is-info .navbar-brand .navbar-link { + color: #fff; } + .navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active, + .navbar.is-info .navbar-brand .navbar-link:hover, + .navbar.is-info .navbar-brand .navbar-link.is-active { + background-color: #118fe4; + color: #fff; } + .navbar.is-info .navbar-brand .navbar-link::after { + border-color: #fff; } + @media screen and (min-width: 1024px) { + .navbar.is-info .navbar-start > .navbar-item, + .navbar.is-info .navbar-start .navbar-link, + .navbar.is-info .navbar-end > .navbar-item, + .navbar.is-info .navbar-end .navbar-link { + color: #fff; } + .navbar.is-info .navbar-start > a.navbar-item:hover, .navbar.is-info .navbar-start > a.navbar-item.is-active, + .navbar.is-info .navbar-start .navbar-link:hover, + .navbar.is-info .navbar-start .navbar-link.is-active, + .navbar.is-info .navbar-end > a.navbar-item:hover, + .navbar.is-info .navbar-end > a.navbar-item.is-active, + .navbar.is-info .navbar-end .navbar-link:hover, + .navbar.is-info .navbar-end .navbar-link.is-active { + background-color: #118fe4; + color: #fff; } + .navbar.is-info .navbar-start .navbar-link::after, + .navbar.is-info .navbar-end .navbar-link::after { + border-color: #fff; } + .navbar.is-info .navbar-item.has-dropdown:hover .navbar-link, + .navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #118fe4; + color: #fff; } + .navbar.is-info .navbar-dropdown a.navbar-item.is-active { + background-color: #209cee; + color: #fff; } } + .navbar.is-success { + background-color: #23d160; + color: #fff; } + .navbar.is-success .navbar-brand > .navbar-item, + .navbar.is-success .navbar-brand .navbar-link { + color: #fff; } + .navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active, + .navbar.is-success .navbar-brand .navbar-link:hover, + .navbar.is-success .navbar-brand .navbar-link.is-active { + background-color: #20bc56; + color: #fff; } + .navbar.is-success .navbar-brand .navbar-link::after { + border-color: #fff; } + @media screen and (min-width: 1024px) { + .navbar.is-success .navbar-start > .navbar-item, + .navbar.is-success .navbar-start .navbar-link, + .navbar.is-success .navbar-end > .navbar-item, + .navbar.is-success .navbar-end .navbar-link { + color: #fff; } + .navbar.is-success .navbar-start > a.navbar-item:hover, .navbar.is-success .navbar-start > a.navbar-item.is-active, + .navbar.is-success .navbar-start .navbar-link:hover, + .navbar.is-success .navbar-start .navbar-link.is-active, + .navbar.is-success .navbar-end > a.navbar-item:hover, + .navbar.is-success .navbar-end > a.navbar-item.is-active, + .navbar.is-success .navbar-end .navbar-link:hover, + .navbar.is-success .navbar-end .navbar-link.is-active { + background-color: #20bc56; + color: #fff; } + .navbar.is-success .navbar-start .navbar-link::after, + .navbar.is-success .navbar-end .navbar-link::after { + border-color: #fff; } + .navbar.is-success .navbar-item.has-dropdown:hover .navbar-link, + .navbar.is-success .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #20bc56; + color: #fff; } + .navbar.is-success .navbar-dropdown a.navbar-item.is-active { + background-color: #23d160; + color: #fff; } } + .navbar.is-warning { + background-color: #ffdd57; + color: #FFFFFF; } + .navbar.is-warning .navbar-brand > .navbar-item, + .navbar.is-warning .navbar-brand .navbar-link { + color: #FFFFFF; } + .navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active, + .navbar.is-warning .navbar-brand .navbar-link:hover, + .navbar.is-warning .navbar-brand .navbar-link.is-active { + background-color: #ffd83d; + color: #FFFFFF; } + .navbar.is-warning .navbar-brand .navbar-link::after { + border-color: #FFFFFF; } + @media screen and (min-width: 1024px) { + .navbar.is-warning .navbar-start > .navbar-item, + .navbar.is-warning .navbar-start .navbar-link, + .navbar.is-warning .navbar-end > .navbar-item, + .navbar.is-warning .navbar-end .navbar-link { + color: #FFFFFF; } + .navbar.is-warning .navbar-start > a.navbar-item:hover, .navbar.is-warning .navbar-start > a.navbar-item.is-active, + .navbar.is-warning .navbar-start .navbar-link:hover, + .navbar.is-warning .navbar-start .navbar-link.is-active, + .navbar.is-warning .navbar-end > a.navbar-item:hover, + .navbar.is-warning .navbar-end > a.navbar-item.is-active, + .navbar.is-warning .navbar-end .navbar-link:hover, + .navbar.is-warning .navbar-end .navbar-link.is-active { + background-color: #ffd83d; + color: #FFFFFF; } + .navbar.is-warning .navbar-start .navbar-link::after, + .navbar.is-warning .navbar-end .navbar-link::after { + border-color: #FFFFFF; } + .navbar.is-warning .navbar-item.has-dropdown:hover .navbar-link, + .navbar.is-warning .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #ffd83d; + color: #FFFFFF; } + .navbar.is-warning .navbar-dropdown a.navbar-item.is-active { + background-color: #ffdd57; + color: #FFFFFF; } } + .navbar.is-danger { + background-color: #ff3860; + color: #fff; } + .navbar.is-danger .navbar-brand > .navbar-item, + .navbar.is-danger .navbar-brand .navbar-link { + color: #fff; } + .navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active, + .navbar.is-danger .navbar-brand .navbar-link:hover, + .navbar.is-danger .navbar-brand .navbar-link.is-active { + background-color: #ff1f4b; + color: #fff; } + .navbar.is-danger .navbar-brand .navbar-link::after { + border-color: #fff; } + @media screen and (min-width: 1024px) { + .navbar.is-danger .navbar-start > .navbar-item, + .navbar.is-danger .navbar-start .navbar-link, + .navbar.is-danger .navbar-end > .navbar-item, + .navbar.is-danger .navbar-end .navbar-link { + color: #fff; } + .navbar.is-danger .navbar-start > a.navbar-item:hover, .navbar.is-danger .navbar-start > a.navbar-item.is-active, + .navbar.is-danger .navbar-start .navbar-link:hover, + .navbar.is-danger .navbar-start .navbar-link.is-active, + .navbar.is-danger .navbar-end > a.navbar-item:hover, + .navbar.is-danger .navbar-end > a.navbar-item.is-active, + .navbar.is-danger .navbar-end .navbar-link:hover, + .navbar.is-danger .navbar-end .navbar-link.is-active { + background-color: #ff1f4b; + color: #fff; } + .navbar.is-danger .navbar-start .navbar-link::after, + .navbar.is-danger .navbar-end .navbar-link::after { + border-color: #fff; } + .navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link, + .navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #ff1f4b; + color: #fff; } + .navbar.is-danger .navbar-dropdown a.navbar-item.is-active { + background-color: #ff3860; + color: #fff; } } + .navbar > .container { + align-items: stretch; + display: flex; + min-height: 3.25rem; + width: 100%; } + .navbar.has-shadow { + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); } + .navbar.is-fixed-bottom, .navbar.is-fixed-top { + left: 0; + position: fixed; + right: 0; + z-index: 30; } + .navbar.is-fixed-bottom { + bottom: 0; } + .navbar.is-fixed-bottom.has-shadow { + box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); } + .navbar.is-fixed-top { + top: 0; } + +html.has-navbar-fixed-top { + padding-top: 3.25rem; } + +html.has-navbar-fixed-bottom { + padding-bottom: 3.25rem; } + +.navbar-brand, +.navbar-tabs { + align-items: stretch; + display: flex; + flex-shrink: 0; + min-height: 3.25rem; } + +.navbar-tabs { + -webkit-overflow-scrolling: touch; + max-width: 100vw; + overflow-x: auto; + overflow-y: hidden; } + +.navbar-burger { + cursor: pointer; + display: block; + height: 3.25rem; + position: relative; + width: 3.25rem; + margin-left: auto; } + .navbar-burger span { + background-color: currentColor; + display: block; + height: 1px; + left: calc(50% - 8px); + position: absolute; + transform-origin: center; + transition-duration: 86ms; + transition-property: background-color, opacity, transform; + transition-timing-function: ease-out; + width: 16px; } + .navbar-burger span:nth-child(1) { + top: calc(50% - 6px); } + .navbar-burger span:nth-child(2) { + top: calc(50% - 1px); } + .navbar-burger span:nth-child(3) { + top: calc(50% + 4px); } + .navbar-burger:hover { + background-color: rgba(0, 0, 0, 0.05); } + .navbar-burger.is-active span:nth-child(1) { + transform: translateY(5px) rotate(45deg); } + .navbar-burger.is-active span:nth-child(2) { + opacity: 0; } + .navbar-burger.is-active span:nth-child(3) { + transform: translateY(-5px) rotate(-45deg); } + +.navbar-menu { + display: none; } + +.navbar-item, +.navbar-link { + color: #4a4a4a; + display: block; + line-height: 1.5; + padding: 0.5rem 1rem; + position: relative; } + +a.navbar-item:hover, a.navbar-item.is-active, +a.navbar-link:hover, +a.navbar-link.is-active { + background-color: whitesmoke; + color: #3273dc; } + +.navbar-item { + flex-grow: 0; + flex-shrink: 0; } + .navbar-item img { + max-height: 1.75rem; } + .navbar-item.has-dropdown { + padding: 0; } + .navbar-item.is-expanded { + flex-grow: 1; + flex-shrink: 1; } + .navbar-item.is-tab { + border-bottom: 1px solid transparent; + min-height: 3.25rem; + padding-bottom: calc(0.5rem - 1px); } + .navbar-item.is-tab:hover { + background-color: transparent; + border-bottom-color: #3273dc; } + .navbar-item.is-tab.is-active { + background-color: transparent; + border-bottom-color: #3273dc; + border-bottom-style: solid; + border-bottom-width: 3px; + color: #3273dc; + padding-bottom: calc(0.5rem - 3px); } + +.navbar-content { + flex-grow: 1; + flex-shrink: 1; } + +.navbar-link { + padding-right: 2.5em; } + +.navbar-dropdown { + font-size: 0.875rem; + padding-bottom: 0.5rem; + padding-top: 0.5rem; } + .navbar-dropdown .navbar-item { + padding-left: 1.5rem; + padding-right: 1.5rem; } + +.navbar-divider { + background-color: #dbdbdb; + border: none; + display: none; + height: 1px; + margin: 0.5rem 0; } + +@media screen and (max-width: 1023px) { + .navbar > .container { + display: block; } + .navbar-brand .navbar-item, + .navbar-tabs .navbar-item { + align-items: center; + display: flex; } + .navbar-menu { + background-color: white; + box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); + padding: 0.5rem 0; } + .navbar-menu.is-active { + display: block; } + .navbar.is-fixed-bottom-touch, .navbar.is-fixed-top-touch { + left: 0; + position: fixed; + right: 0; + z-index: 30; } + .navbar.is-fixed-bottom-touch { + bottom: 0; } + .navbar.is-fixed-bottom-touch.has-shadow { + box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); } + .navbar.is-fixed-top-touch { + top: 0; } + .navbar.is-fixed-top .navbar-menu, .navbar.is-fixed-top-touch .navbar-menu { + -webkit-overflow-scrolling: touch; + max-height: calc(100vh - 3.25rem); + overflow: auto; } + html.has-navbar-fixed-top-touch { + padding-top: 3.25rem; } + html.has-navbar-fixed-bottom-touch { + padding-bottom: 3.25rem; } } + +@media screen and (min-width: 1024px) { + .navbar, + .navbar-menu, + .navbar-start, + .navbar-end { + align-items: stretch; + display: flex; } + .navbar { + min-height: 3.25rem; } + .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active, + .navbar.is-transparent a.navbar-link:hover, + .navbar.is-transparent a.navbar-link.is-active { + background-color: transparent !important; } + .navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link { + background-color: transparent !important; } + .navbar.is-transparent .navbar-dropdown a.navbar-item:hover { + background-color: whitesmoke; + color: #0a0a0a; } + .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active { + background-color: whitesmoke; + color: #3273dc; } + .navbar-burger { + display: none; } + .navbar-item, + .navbar-link { + align-items: center; + display: flex; } + .navbar-item.has-dropdown { + align-items: stretch; } + .navbar-item.has-dropdown-up .navbar-link::after { + transform: rotate(135deg) translate(0.25em, -0.25em); } + .navbar-item.has-dropdown-up .navbar-dropdown { + border-bottom: 1px solid #dbdbdb; + border-radius: 5px 5px 0 0; + border-top: none; + bottom: 100%; + box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1); + top: auto; } + .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown { + display: block; } + .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed { + opacity: 1; + pointer-events: auto; + transform: translateY(0); } + .navbar-link::after { + border: 1px solid #3273dc; + border-right: 0; + border-top: 0; + content: " "; + display: block; + height: 0.5em; + pointer-events: none; + position: absolute; + transform: rotate(-45deg); + transform-origin: center; + width: 0.5em; + margin-top: -0.375em; + right: 1.125em; + top: 50%; } + .navbar-menu { + flex-grow: 1; + flex-shrink: 0; } + .navbar-start { + justify-content: flex-start; + margin-right: auto; } + .navbar-end { + justify-content: flex-end; + margin-left: auto; } + .navbar-dropdown { + background-color: white; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-top: 1px solid #dbdbdb; + box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); + display: none; + font-size: 0.875rem; + left: 0; + min-width: 100%; + position: absolute; + top: 100%; + z-index: 20; } + .navbar-dropdown .navbar-item { + padding: 0.375rem 1rem; + white-space: nowrap; } + .navbar-dropdown a.navbar-item { + padding-right: 3rem; } + .navbar-dropdown a.navbar-item:hover { + background-color: whitesmoke; + color: #0a0a0a; } + .navbar-dropdown a.navbar-item.is-active { + background-color: whitesmoke; + color: #3273dc; } + .navbar-dropdown.is-boxed { + border-radius: 5px; + border-top: none; + box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + display: block; + opacity: 0; + pointer-events: none; + top: calc(100% + (-4px)); + transform: translateY(-5px); + transition-duration: 86ms; + transition-property: opacity, transform; } + .navbar-dropdown.is-right { + left: auto; + right: 0; } + .navbar-divider { + display: block; } + .navbar > .container .navbar-brand, + .container > .navbar .navbar-brand { + margin-left: -1rem; } + .navbar > .container .navbar-menu, + .container > .navbar .navbar-menu { + margin-right: -1rem; } + .navbar.is-fixed-bottom-desktop, .navbar.is-fixed-top-desktop { + left: 0; + position: fixed; + right: 0; + z-index: 30; } + .navbar.is-fixed-bottom-desktop { + bottom: 0; } + .navbar.is-fixed-bottom-desktop.has-shadow { + box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); } + .navbar.is-fixed-top-desktop { + top: 0; } + html.has-navbar-fixed-top-desktop { + padding-top: 3.25rem; } + html.has-navbar-fixed-bottom-desktop { + padding-bottom: 3.25rem; } + a.navbar-item.is-active, + a.navbar-link.is-active { + color: #0a0a0a; } + a.navbar-item.is-active:not(:hover), + a.navbar-link.is-active:not(:hover) { + background-color: transparent; } + .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link { + background-color: whitesmoke; } } + +.pagination { + font-size: 1rem; + margin: -0.25rem; } + .pagination.is-small { + font-size: 0.75rem; } + .pagination.is-medium { + font-size: 1.25rem; } + .pagination.is-large { + font-size: 1.5rem; } + +.pagination, +.pagination-list { + align-items: center; + display: flex; + justify-content: center; + text-align: center; } + +.pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis { + -moz-appearance: none; + -webkit-appearance: none; + align-items: center; + border: 1px solid transparent; + border-radius: 3px; + box-shadow: none; + display: inline-flex; + font-size: 1rem; + height: 2.25em; + justify-content: flex-start; + line-height: 1.5; + padding-bottom: calc(0.375em - 1px); + padding-left: calc(0.625em - 1px); + padding-right: calc(0.625em - 1px); + padding-top: calc(0.375em - 1px); + position: relative; + vertical-align: top; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-size: 1em; + padding-left: 0.5em; + padding-right: 0.5em; + justify-content: center; + margin: 0.25rem; + text-align: center; } + .pagination-previous:focus, .pagination-previous.is-focused, .pagination-previous:active, .pagination-previous.is-active, + .pagination-next:focus, + .pagination-next.is-focused, + .pagination-next:active, + .pagination-next.is-active, + .pagination-link:focus, + .pagination-link.is-focused, + .pagination-link:active, + .pagination-link.is-active, + .pagination-ellipsis:focus, + .pagination-ellipsis.is-focused, + .pagination-ellipsis:active, + .pagination-ellipsis.is-active { + outline: none; } + .pagination-previous[disabled], + .pagination-next[disabled], + .pagination-link[disabled], + .pagination-ellipsis[disabled] { + cursor: not-allowed; } + +.pagination-previous, +.pagination-next, +.pagination-link { + border-color: #dbdbdb; + min-width: 2.25em; } + .pagination-previous:hover, + .pagination-next:hover, + .pagination-link:hover { + border-color: #b5b5b5; + color: #363636; } + .pagination-previous:focus, + .pagination-next:focus, + .pagination-link:focus { + border-color: #3273dc; } + .pagination-previous:active, + .pagination-next:active, + .pagination-link:active { + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); } + .pagination-previous[disabled], + .pagination-next[disabled], + .pagination-link[disabled] { + background-color: #dbdbdb; + border-color: #dbdbdb; + box-shadow: none; + color: #7a7a7a; + opacity: 0.5; } + +.pagination-previous, +.pagination-next { + padding-left: 0.75em; + padding-right: 0.75em; + white-space: nowrap; } + +.pagination-link.is-current { + background-color: #3273dc; + border-color: #3273dc; + color: #fff; } + +.pagination-ellipsis { + color: #b5b5b5; + pointer-events: none; } + +.pagination-list { + flex-wrap: wrap; } + +@media screen and (max-width: 768px) { + .pagination { + flex-wrap: wrap; } + .pagination-previous, + .pagination-next { + flex-grow: 1; + flex-shrink: 1; } + .pagination-list li { + flex-grow: 1; + flex-shrink: 1; } } + +@media screen and (min-width: 769px), print { + .pagination-list { + flex-grow: 1; + flex-shrink: 1; + justify-content: flex-start; + order: 1; } + .pagination-previous { + order: 2; } + .pagination-next { + order: 3; } + .pagination { + justify-content: space-between; } + .pagination.is-centered .pagination-previous { + order: 1; } + .pagination.is-centered .pagination-list { + justify-content: center; + order: 2; } + .pagination.is-centered .pagination-next { + order: 3; } + .pagination.is-right .pagination-previous { + order: 1; } + .pagination.is-right .pagination-next { + order: 2; } + .pagination.is-right .pagination-list { + justify-content: flex-end; + order: 3; } } + +.panel { + font-size: 1rem; } + .panel:not(:last-child) { + margin-bottom: 1.5rem; } + +.panel-heading, +.panel-tabs, +.panel-block { + border-bottom: 1px solid #dbdbdb; + border-left: 1px solid #dbdbdb; + border-right: 1px solid #dbdbdb; } + .panel-heading:first-child, + .panel-tabs:first-child, + .panel-block:first-child { + border-top: 1px solid #dbdbdb; } + +.panel-heading { + background-color: whitesmoke; + border-radius: 3px 3px 0 0; + color: #363636; + font-size: 1.25em; + font-weight: 300; + line-height: 1.25; + padding: 0.5em 0.75em; } + +.panel-tabs { + align-items: flex-end; + display: flex; + font-size: 0.875em; + justify-content: center; } + .panel-tabs a { + border-bottom: 1px solid #dbdbdb; + margin-bottom: -1px; + padding: 0.5em; } + .panel-tabs a.is-active { + border-bottom-color: #4a4a4a; + color: #363636; } + +.panel-list a { + color: #4a4a4a; } + .panel-list a:hover { + color: #3273dc; } + +.panel-block { + align-items: center; + color: #363636; + display: flex; + justify-content: flex-start; + padding: 0.5em 0.75em; } + .panel-block input[type="checkbox"] { + margin-right: 0.75em; } + .panel-block > .control { + flex-grow: 1; + flex-shrink: 1; + width: 100%; } + .panel-block.is-wrapped { + flex-wrap: wrap; } + .panel-block.is-active { + border-left-color: #3273dc; + color: #363636; } + .panel-block.is-active .panel-icon { + color: #3273dc; } + +a.panel-block, +label.panel-block { + cursor: pointer; } + a.panel-block:hover, + label.panel-block:hover { + background-color: whitesmoke; } + +.panel-icon { + display: inline-block; + font-size: 14px; + height: 1em; + line-height: 1em; + text-align: center; + vertical-align: top; + width: 1em; + color: #7a7a7a; + margin-right: 0.75em; } + .panel-icon .fa { + font-size: inherit; + line-height: inherit; } + +.tabs { + -webkit-overflow-scrolling: touch; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + align-items: stretch; + display: flex; + font-size: 1rem; + justify-content: space-between; + overflow: hidden; + overflow-x: auto; + white-space: nowrap; } + .tabs:not(:last-child) { + margin-bottom: 1.5rem; } + .tabs a { + align-items: center; + border-bottom-color: #dbdbdb; + border-bottom-style: solid; + border-bottom-width: 1px; + color: #4a4a4a; + display: flex; + justify-content: center; + margin-bottom: -1px; + padding: 0.5em 1em; + vertical-align: top; } + .tabs a:hover { + border-bottom-color: #363636; + color: #363636; } + .tabs li { + display: block; } + .tabs li.is-active a { + border-bottom-color: #3273dc; + color: #3273dc; } + .tabs ul { + align-items: center; + border-bottom-color: #dbdbdb; + border-bottom-style: solid; + border-bottom-width: 1px; + display: flex; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-start; } + .tabs ul.is-left { + padding-right: 0.75em; } + .tabs ul.is-center { + flex: none; + justify-content: center; + padding-left: 0.75em; + padding-right: 0.75em; } + .tabs ul.is-right { + justify-content: flex-end; + padding-left: 0.75em; } + .tabs .icon:first-child { + margin-right: 0.5em; } + .tabs .icon:last-child { + margin-left: 0.5em; } + .tabs.is-centered ul { + justify-content: center; } + .tabs.is-right ul { + justify-content: flex-end; } + .tabs.is-boxed a { + border: 1px solid transparent; + border-radius: 3px 3px 0 0; } + .tabs.is-boxed a:hover { + background-color: whitesmoke; + border-bottom-color: #dbdbdb; } + .tabs.is-boxed li.is-active a { + background-color: white; + border-color: #dbdbdb; + border-bottom-color: transparent !important; } + .tabs.is-fullwidth li { + flex-grow: 1; + flex-shrink: 0; } + .tabs.is-toggle a { + border-color: #dbdbdb; + border-style: solid; + border-width: 1px; + margin-bottom: 0; + position: relative; } + .tabs.is-toggle a:hover { + background-color: whitesmoke; + border-color: #b5b5b5; + z-index: 2; } + .tabs.is-toggle li + li { + margin-left: -1px; } + .tabs.is-toggle li:first-child a { + border-radius: 3px 0 0 3px; } + .tabs.is-toggle li:last-child a { + border-radius: 0 3px 3px 0; } + .tabs.is-toggle li.is-active a { + background-color: #3273dc; + border-color: #3273dc; + color: #fff; + z-index: 1; } + .tabs.is-toggle ul { + border-bottom: none; } + .tabs.is-small { + font-size: 0.75rem; } + .tabs.is-medium { + font-size: 1.25rem; } + .tabs.is-large { + font-size: 1.5rem; } + +.hero { + align-items: stretch; + display: flex; + flex-direction: column; + justify-content: space-between; } + .hero .navbar { + background: none; } + .hero .tabs ul { + border-bottom: none; } + .hero.is-white { + background-color: white; + color: #0a0a0a; } + .hero.is-white a:not(.button), + .hero.is-white strong { + color: inherit; } + .hero.is-white .title { + color: #0a0a0a; } + .hero.is-white .subtitle { + color: rgba(10, 10, 10, 0.9); } + .hero.is-white .subtitle a:not(.button), + .hero.is-white .subtitle strong { + color: #0a0a0a; } + @media screen and (max-width: 1023px) { + .hero.is-white .navbar-menu { + background-color: white; } } + .hero.is-white .navbar-item, + .hero.is-white .navbar-link { + color: rgba(10, 10, 10, 0.7); } + .hero.is-white a.navbar-item:hover, .hero.is-white a.navbar-item.is-active, + .hero.is-white .navbar-link:hover, + .hero.is-white .navbar-link.is-active { + background-color: #f2f2f2; + color: #0a0a0a; } + .hero.is-white .tabs a { + color: #0a0a0a; + opacity: 0.9; } + .hero.is-white .tabs a:hover { + opacity: 1; } + .hero.is-white .tabs li.is-active a { + opacity: 1; } + .hero.is-white .tabs.is-boxed a, .hero.is-white .tabs.is-toggle a { + color: #0a0a0a; } + .hero.is-white .tabs.is-boxed a:hover, .hero.is-white .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); } + .hero.is-white .tabs.is-boxed li.is-active a, .hero.is-white .tabs.is-boxed li.is-active a:hover, .hero.is-white .tabs.is-toggle li.is-active a, .hero.is-white .tabs.is-toggle li.is-active a:hover { + background-color: #0a0a0a; + border-color: #0a0a0a; + color: white; } + .hero.is-white.is-bold { + background-image: linear-gradient(141deg, #e6e6e6 0%, white 71%, white 100%); } + @media screen and (max-width: 768px) { + .hero.is-white.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #e6e6e6 0%, white 71%, white 100%); } } + .hero.is-black { + background-color: #0a0a0a; + color: white; } + .hero.is-black a:not(.button), + .hero.is-black strong { + color: inherit; } + .hero.is-black .title { + color: white; } + .hero.is-black .subtitle { + color: rgba(255, 255, 255, 0.9); } + .hero.is-black .subtitle a:not(.button), + .hero.is-black .subtitle strong { + color: white; } + @media screen and (max-width: 1023px) { + .hero.is-black .navbar-menu { + background-color: #0a0a0a; } } + .hero.is-black .navbar-item, + .hero.is-black .navbar-link { + color: rgba(255, 255, 255, 0.7); } + .hero.is-black a.navbar-item:hover, .hero.is-black a.navbar-item.is-active, + .hero.is-black .navbar-link:hover, + .hero.is-black .navbar-link.is-active { + background-color: black; + color: white; } + .hero.is-black .tabs a { + color: white; + opacity: 0.9; } + .hero.is-black .tabs a:hover { + opacity: 1; } + .hero.is-black .tabs li.is-active a { + opacity: 1; } + .hero.is-black .tabs.is-boxed a, .hero.is-black .tabs.is-toggle a { + color: white; } + .hero.is-black .tabs.is-boxed a:hover, .hero.is-black .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); } + .hero.is-black .tabs.is-boxed li.is-active a, .hero.is-black .tabs.is-boxed li.is-active a:hover, .hero.is-black .tabs.is-toggle li.is-active a, .hero.is-black .tabs.is-toggle li.is-active a:hover { + background-color: white; + border-color: white; + color: #0a0a0a; } + .hero.is-black.is-bold { + background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%); } + @media screen and (max-width: 768px) { + .hero.is-black.is-bold .navbar-menu { + background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%); } } + .hero.is-light { + background-color: whitesmoke; + color: #363636; } + .hero.is-light a:not(.button), + .hero.is-light strong { + color: inherit; } + .hero.is-light .title { + color: #363636; } + .hero.is-light .subtitle { + color: rgba(54, 54, 54, 0.9); } + .hero.is-light .subtitle a:not(.button), + .hero.is-light .subtitle strong { + color: #363636; } + @media screen and (max-width: 1023px) { + .hero.is-light .navbar-menu { + background-color: whitesmoke; } } + .hero.is-light .navbar-item, + .hero.is-light .navbar-link { + color: rgba(54, 54, 54, 0.7); } + .hero.is-light a.navbar-item:hover, .hero.is-light a.navbar-item.is-active, + .hero.is-light .navbar-link:hover, + .hero.is-light .navbar-link.is-active { + background-color: #e8e8e8; + color: #363636; } + .hero.is-light .tabs a { + color: #363636; + opacity: 0.9; } + .hero.is-light .tabs a:hover { + opacity: 1; } + .hero.is-light .tabs li.is-active a { + opacity: 1; } + .hero.is-light .tabs.is-boxed a, .hero.is-light .tabs.is-toggle a { + color: #363636; } + .hero.is-light .tabs.is-boxed a:hover, .hero.is-light .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); } + .hero.is-light .tabs.is-boxed li.is-active a, .hero.is-light .tabs.is-boxed li.is-active a:hover, .hero.is-light .tabs.is-toggle li.is-active a, .hero.is-light .tabs.is-toggle li.is-active a:hover { + background-color: #363636; + border-color: #363636; + color: whitesmoke; } + .hero.is-light.is-bold { + background-image: linear-gradient(141deg, #dfd8d9 0%, whitesmoke 71%, white 100%); } + @media screen and (max-width: 768px) { + .hero.is-light.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #dfd8d9 0%, whitesmoke 71%, white 100%); } } + .hero.is-dark { + background-color: #363636; + color: whitesmoke; } + .hero.is-dark a:not(.button), + .hero.is-dark strong { + color: inherit; } + .hero.is-dark .title { + color: whitesmoke; } + .hero.is-dark .subtitle { + color: rgba(245, 245, 245, 0.9); } + .hero.is-dark .subtitle a:not(.button), + .hero.is-dark .subtitle strong { + color: whitesmoke; } + @media screen and (max-width: 1023px) { + .hero.is-dark .navbar-menu { + background-color: #363636; } } + .hero.is-dark .navbar-item, + .hero.is-dark .navbar-link { + color: rgba(245, 245, 245, 0.7); } + .hero.is-dark a.navbar-item:hover, .hero.is-dark a.navbar-item.is-active, + .hero.is-dark .navbar-link:hover, + .hero.is-dark .navbar-link.is-active { + background-color: #292929; + color: whitesmoke; } + .hero.is-dark .tabs a { + color: whitesmoke; + opacity: 0.9; } + .hero.is-dark .tabs a:hover { + opacity: 1; } + .hero.is-dark .tabs li.is-active a { + opacity: 1; } + .hero.is-dark .tabs.is-boxed a, .hero.is-dark .tabs.is-toggle a { + color: whitesmoke; } + .hero.is-dark .tabs.is-boxed a:hover, .hero.is-dark .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); } + .hero.is-dark .tabs.is-boxed li.is-active a, .hero.is-dark .tabs.is-boxed li.is-active a:hover, .hero.is-dark .tabs.is-toggle li.is-active a, .hero.is-dark .tabs.is-toggle li.is-active a:hover { + background-color: whitesmoke; + border-color: whitesmoke; + color: #363636; } + .hero.is-dark.is-bold { + background-image: linear-gradient(141deg, #1f191a 0%, #363636 71%, #46403f 100%); } + @media screen and (max-width: 768px) { + .hero.is-dark.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #1f191a 0%, #363636 71%, #46403f 100%); } } + .hero.is-primary { + background-color: #C93312; + color: #fff; } + .hero.is-primary a:not(.button), + .hero.is-primary strong { + color: inherit; } + .hero.is-primary .title { + color: #fff; } + .hero.is-primary .subtitle { + color: rgba(255, 255, 255, 0.9); } + .hero.is-primary .subtitle a:not(.button), + .hero.is-primary .subtitle strong { + color: #fff; } + @media screen and (max-width: 1023px) { + .hero.is-primary .navbar-menu { + background-color: #C93312; } } + .hero.is-primary .navbar-item, + .hero.is-primary .navbar-link { + color: rgba(255, 255, 255, 0.7); } + .hero.is-primary a.navbar-item:hover, .hero.is-primary a.navbar-item.is-active, + .hero.is-primary .navbar-link:hover, + .hero.is-primary .navbar-link.is-active { + background-color: #b22d10; + color: #fff; } + .hero.is-primary .tabs a { + color: #fff; + opacity: 0.9; } + .hero.is-primary .tabs a:hover { + opacity: 1; } + .hero.is-primary .tabs li.is-active a { + opacity: 1; } + .hero.is-primary .tabs.is-boxed a, .hero.is-primary .tabs.is-toggle a { + color: #fff; } + .hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); } + .hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #C93312; } + .hero.is-primary.is-bold { + background-image: linear-gradient(141deg, #a30805 0%, #C93312 71%, #e7590e 100%); } + @media screen and (max-width: 768px) { + .hero.is-primary.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #a30805 0%, #C93312 71%, #e7590e 100%); } } + .hero.is-link { + background-color: #3273dc; + color: #fff; } + .hero.is-link a:not(.button), + .hero.is-link strong { + color: inherit; } + .hero.is-link .title { + color: #fff; } + .hero.is-link .subtitle { + color: rgba(255, 255, 255, 0.9); } + .hero.is-link .subtitle a:not(.button), + .hero.is-link .subtitle strong { + color: #fff; } + @media screen and (max-width: 1023px) { + .hero.is-link .navbar-menu { + background-color: #3273dc; } } + .hero.is-link .navbar-item, + .hero.is-link .navbar-link { + color: rgba(255, 255, 255, 0.7); } + .hero.is-link a.navbar-item:hover, .hero.is-link a.navbar-item.is-active, + .hero.is-link .navbar-link:hover, + .hero.is-link .navbar-link.is-active { + background-color: #2366d1; + color: #fff; } + .hero.is-link .tabs a { + color: #fff; + opacity: 0.9; } + .hero.is-link .tabs a:hover { + opacity: 1; } + .hero.is-link .tabs li.is-active a { + opacity: 1; } + .hero.is-link .tabs.is-boxed a, .hero.is-link .tabs.is-toggle a { + color: #fff; } + .hero.is-link .tabs.is-boxed a:hover, .hero.is-link .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); } + .hero.is-link .tabs.is-boxed li.is-active a, .hero.is-link .tabs.is-boxed li.is-active a:hover, .hero.is-link .tabs.is-toggle li.is-active a, .hero.is-link .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #3273dc; } + .hero.is-link.is-bold { + background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%); } + @media screen and (max-width: 768px) { + .hero.is-link.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%); } } + .hero.is-info { + background-color: #209cee; + color: #fff; } + .hero.is-info a:not(.button), + .hero.is-info strong { + color: inherit; } + .hero.is-info .title { + color: #fff; } + .hero.is-info .subtitle { + color: rgba(255, 255, 255, 0.9); } + .hero.is-info .subtitle a:not(.button), + .hero.is-info .subtitle strong { + color: #fff; } + @media screen and (max-width: 1023px) { + .hero.is-info .navbar-menu { + background-color: #209cee; } } + .hero.is-info .navbar-item, + .hero.is-info .navbar-link { + color: rgba(255, 255, 255, 0.7); } + .hero.is-info a.navbar-item:hover, .hero.is-info a.navbar-item.is-active, + .hero.is-info .navbar-link:hover, + .hero.is-info .navbar-link.is-active { + background-color: #118fe4; + color: #fff; } + .hero.is-info .tabs a { + color: #fff; + opacity: 0.9; } + .hero.is-info .tabs a:hover { + opacity: 1; } + .hero.is-info .tabs li.is-active a { + opacity: 1; } + .hero.is-info .tabs.is-boxed a, .hero.is-info .tabs.is-toggle a { + color: #fff; } + .hero.is-info .tabs.is-boxed a:hover, .hero.is-info .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); } + .hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #209cee; } + .hero.is-info.is-bold { + background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%); } + @media screen and (max-width: 768px) { + .hero.is-info.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%); } } + .hero.is-success { + background-color: #23d160; + color: #fff; } + .hero.is-success a:not(.button), + .hero.is-success strong { + color: inherit; } + .hero.is-success .title { + color: #fff; } + .hero.is-success .subtitle { + color: rgba(255, 255, 255, 0.9); } + .hero.is-success .subtitle a:not(.button), + .hero.is-success .subtitle strong { + color: #fff; } + @media screen and (max-width: 1023px) { + .hero.is-success .navbar-menu { + background-color: #23d160; } } + .hero.is-success .navbar-item, + .hero.is-success .navbar-link { + color: rgba(255, 255, 255, 0.7); } + .hero.is-success a.navbar-item:hover, .hero.is-success a.navbar-item.is-active, + .hero.is-success .navbar-link:hover, + .hero.is-success .navbar-link.is-active { + background-color: #20bc56; + color: #fff; } + .hero.is-success .tabs a { + color: #fff; + opacity: 0.9; } + .hero.is-success .tabs a:hover { + opacity: 1; } + .hero.is-success .tabs li.is-active a { + opacity: 1; } + .hero.is-success .tabs.is-boxed a, .hero.is-success .tabs.is-toggle a { + color: #fff; } + .hero.is-success .tabs.is-boxed a:hover, .hero.is-success .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); } + .hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #23d160; } + .hero.is-success.is-bold { + background-image: linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%); } + @media screen and (max-width: 768px) { + .hero.is-success.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%); } } + .hero.is-warning { + background-color: #ffdd57; + color: #FFFFFF; } + .hero.is-warning a:not(.button), + .hero.is-warning strong { + color: inherit; } + .hero.is-warning .title { + color: #FFFFFF; } + .hero.is-warning .subtitle { + color: rgba(255, 255, 255, 0.9); } + .hero.is-warning .subtitle a:not(.button), + .hero.is-warning .subtitle strong { + color: #FFFFFF; } + @media screen and (max-width: 1023px) { + .hero.is-warning .navbar-menu { + background-color: #ffdd57; } } + .hero.is-warning .navbar-item, + .hero.is-warning .navbar-link { + color: rgba(255, 255, 255, 0.7); } + .hero.is-warning a.navbar-item:hover, .hero.is-warning a.navbar-item.is-active, + .hero.is-warning .navbar-link:hover, + .hero.is-warning .navbar-link.is-active { + background-color: #ffd83d; + color: #FFFFFF; } + .hero.is-warning .tabs a { + color: #FFFFFF; + opacity: 0.9; } + .hero.is-warning .tabs a:hover { + opacity: 1; } + .hero.is-warning .tabs li.is-active a { + opacity: 1; } + .hero.is-warning .tabs.is-boxed a, .hero.is-warning .tabs.is-toggle a { + color: #FFFFFF; } + .hero.is-warning .tabs.is-boxed a:hover, .hero.is-warning .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); } + .hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, .hero.is-warning .tabs.is-toggle li.is-active a:hover { + background-color: #FFFFFF; + border-color: #FFFFFF; + color: #ffdd57; } + .hero.is-warning.is-bold { + background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%); } + @media screen and (max-width: 768px) { + .hero.is-warning.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%); } } + .hero.is-danger { + background-color: #ff3860; + color: #fff; } + .hero.is-danger a:not(.button), + .hero.is-danger strong { + color: inherit; } + .hero.is-danger .title { + color: #fff; } + .hero.is-danger .subtitle { + color: rgba(255, 255, 255, 0.9); } + .hero.is-danger .subtitle a:not(.button), + .hero.is-danger .subtitle strong { + color: #fff; } + @media screen and (max-width: 1023px) { + .hero.is-danger .navbar-menu { + background-color: #ff3860; } } + .hero.is-danger .navbar-item, + .hero.is-danger .navbar-link { + color: rgba(255, 255, 255, 0.7); } + .hero.is-danger a.navbar-item:hover, .hero.is-danger a.navbar-item.is-active, + .hero.is-danger .navbar-link:hover, + .hero.is-danger .navbar-link.is-active { + background-color: #ff1f4b; + color: #fff; } + .hero.is-danger .tabs a { + color: #fff; + opacity: 0.9; } + .hero.is-danger .tabs a:hover { + opacity: 1; } + .hero.is-danger .tabs li.is-active a { + opacity: 1; } + .hero.is-danger .tabs.is-boxed a, .hero.is-danger .tabs.is-toggle a { + color: #fff; } + .hero.is-danger .tabs.is-boxed a:hover, .hero.is-danger .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); } + .hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #ff3860; } + .hero.is-danger.is-bold { + background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%); } + @media screen and (max-width: 768px) { + .hero.is-danger.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%); } } + .hero.is-small .hero-body { + padding-bottom: 1.5rem; + padding-top: 1.5rem; } + @media screen and (min-width: 769px), print { + .hero.is-medium .hero-body { + padding-bottom: 9rem; + padding-top: 9rem; } } + @media screen and (min-width: 769px), print { + .hero.is-large .hero-body { + padding-bottom: 18rem; + padding-top: 18rem; } } + .hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body { + align-items: center; + display: flex; } + .hero.is-halfheight .hero-body > .container, .hero.is-fullheight .hero-body > .container { + flex-grow: 1; + flex-shrink: 1; } + .hero.is-halfheight { + min-height: 50vh; } + .hero.is-fullheight { + min-height: 100vh; } + +.hero-video { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + overflow: hidden; } + .hero-video video { + left: 50%; + min-height: 100%; + min-width: 100%; + position: absolute; + top: 50%; + transform: translate3d(-50%, -50%, 0); } + .hero-video.is-transparent { + opacity: 0.3; } + @media screen and (max-width: 768px) { + .hero-video { + display: none; } } + +.hero-buttons { + margin-top: 1.5rem; } + @media screen and (max-width: 768px) { + .hero-buttons .button { + display: flex; } + .hero-buttons .button:not(:last-child) { + margin-bottom: 0.75rem; } } + @media screen and (min-width: 769px), print { + .hero-buttons { + display: flex; + justify-content: center; } + .hero-buttons .button:not(:last-child) { + margin-right: 1.5rem; } } + +.hero-head, +.hero-foot { + flex-grow: 0; + flex-shrink: 0; } + +.hero-body { + flex-grow: 1; + flex-shrink: 0; + padding: 3rem 1.5rem; } + +.section { + padding: 3rem 1.5rem; } + @media screen and (min-width: 1024px) { + .section.is-medium { + padding: 9rem 1.5rem; } + .section.is-large { + padding: 18rem 1.5rem; } } + +.footer { + background-color: whitesmoke; + padding: 3rem 1.5rem 6rem; } + +.sidebody { + height: 100vh; + overflow-x: hidden; + overflow-y: scroll; } + +.example { + margin-bottom: 1em; } + .example .highlight { + margin: 0; } + .example .path { + font-style: italic; + width: 100%; + text-align: right; } + +.sidebar .version { + padding: 1em; } + +.sidebar .brand { + background-color: #303030; + color: #c0c0c0; + padding: 1em; + top: 0; } + +.sidebar .menu { + padding: 1em; } + +.mainbody { + padding: 3em; } + +code { + color: #1a9f1a; + font-size: 0.875em; + font-weight: normal; } + +.content h2 { + padding-top: 1em; + border-top: 1px solid #c0c0c0; } diff --git a/docs/src/themes/mitmproxydocs/theme.toml b/docs/src/themes/mitmproxydocs/theme.toml new file mode 100644 index 00000000..5909676b --- /dev/null +++ b/docs/src/themes/mitmproxydocs/theme.toml @@ -0,0 +1,2 @@ +name = "mitmproxy" +description = "mitmproxy's internal theme"
\ No newline at end of file |
