diff options
author | Jorik Schellekens <joriks@matrix.org> | 2019-08-15 13:23:20 +0100 |
---|---|---|
committer | Jorik Schellekens <joriks@matrix.org> | 2019-08-28 15:59:54 +0100 |
commit | c747fca2e896fdf1b65ae301ad4ae22426e0121a (patch) | |
tree | 8d111e6caadd8f2606e5040bb3121236db47bd91 /synapse_topology/webui/src | |
parent | Where did this come from? (diff) | |
download | synapse-c747fca2e896fdf1b65ae301ad4ae22426e0121a.tar.xz |
Add some structure.
Diffstat (limited to 'synapse_topology/webui/src')
65 files changed, 2579 insertions, 0 deletions
diff --git a/synapse_topology/webui/src/fonts/LiberationSans-Bold.ttf b/synapse_topology/webui/src/fonts/LiberationSans-Bold.ttf new file mode 100644 index 0000000000..4581ebf3ee --- /dev/null +++ b/synapse_topology/webui/src/fonts/LiberationSans-Bold.ttf Binary files differdiff --git a/synapse_topology/webui/src/fonts/LiberationSans-BoldItalic.ttf b/synapse_topology/webui/src/fonts/LiberationSans-BoldItalic.ttf new file mode 100644 index 0000000000..bfbcd26b55 --- /dev/null +++ b/synapse_topology/webui/src/fonts/LiberationSans-BoldItalic.ttf Binary files differdiff --git a/synapse_topology/webui/src/fonts/LiberationSans-Italic.ttf b/synapse_topology/webui/src/fonts/LiberationSans-Italic.ttf new file mode 100644 index 0000000000..fcdab8850b --- /dev/null +++ b/synapse_topology/webui/src/fonts/LiberationSans-Italic.ttf Binary files differdiff --git a/synapse_topology/webui/src/fonts/LiberationSans-Regular.ttf b/synapse_topology/webui/src/fonts/LiberationSans-Regular.ttf new file mode 100644 index 0000000000..626dd9364f --- /dev/null +++ b/synapse_topology/webui/src/fonts/LiberationSans-Regular.ttf Binary files differdiff --git a/synapse_topology/webui/src/fonts/SIL Open Font License.txt b/synapse_topology/webui/src/fonts/SIL Open Font License.txt new file mode 100644 index 0000000000..f2473f9cce --- /dev/null +++ b/synapse_topology/webui/src/fonts/SIL Open Font License.txt @@ -0,0 +1,46 @@ +Digitized data copyright (c) 2010 Google Corporation + with Reserved Font Arimo, Tinos and Cousine. +Copyright (c) 2012 Red Hat, Inc. + with Reserved Font Name Liberation. + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. + +The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the copyright statement(s). + +"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. + +"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. + +5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. \ No newline at end of file diff --git a/synapse_topology/webui/src/fonts/matrix-logo.svg b/synapse_topology/webui/src/fonts/matrix-logo.svg new file mode 100644 index 0000000000..d4a95e248e --- /dev/null +++ b/synapse_topology/webui/src/fonts/matrix-logo.svg @@ -0,0 +1,5 @@ +<svg width="75" height="32" xmlns="http://www.w3.org/2000/svg"> + <g fill="#2D2D2D" fill-rule="nonzero"> + <path d="M.936.732V31.25H3.13v.732H.095V0h3.034v.732zM9.386 10.407v1.544h.044a4.461 4.461 0 0 1 1.487-1.368c.58-.323 1.245-.485 1.993-.485.72 0 1.377.14 1.972.42.595.279 1.047.771 1.355 1.477.338-.5.796-.941 1.377-1.323.58-.383 1.266-.574 2.06-.574.602 0 1.16.074 1.674.22.514.148.954.383 1.322.707.366.323.653.746.859 1.268.205.522.308 1.15.308 1.887v7.633H20.71v-6.464c0-.383-.015-.743-.044-1.082a2.305 2.305 0 0 0-.242-.882 1.473 1.473 0 0 0-.584-.596c-.257-.146-.606-.22-1.047-.22-.44 0-.796.085-1.068.253-.272.17-.485.39-.639.662a2.654 2.654 0 0 0-.308.927 7.074 7.074 0 0 0-.078 1.048v6.354h-3.128v-6.398c0-.338-.007-.673-.021-1.004a2.825 2.825 0 0 0-.188-.916 1.411 1.411 0 0 0-.55-.673c-.258-.168-.636-.253-1.135-.253a2.33 2.33 0 0 0-.584.1 1.94 1.94 0 0 0-.705.374c-.228.184-.422.449-.584.794-.161.346-.242.798-.242 1.357v6.619H6.434V10.407h2.952zM25.842 12.084a3.751 3.751 0 0 1 1.233-1.17 5.37 5.37 0 0 1 1.685-.629 9.579 9.579 0 0 1 1.884-.187c.573 0 1.153.04 1.74.121.588.081 1.124.24 1.609.475.484.235.88.562 1.19.981.308.42.462.975.462 1.666v5.934c0 .516.03 1.008.088 1.478.058.471.161.824.308 1.06H32.87a4.435 4.435 0 0 1-.22-1.104c-.5.515-1.087.876-1.762 1.081a7.084 7.084 0 0 1-2.071.31c-.544 0-1.05-.067-1.52-.2a3.472 3.472 0 0 1-1.234-.617 2.87 2.87 0 0 1-.826-1.059c-.199-.426-.298-.934-.298-1.522 0-.647.114-1.18.342-1.6.227-.419.52-.753.881-1.004.36-.25.771-.437 1.234-.562.462-.125.929-.224 1.399-.298.47-.073.932-.132 1.387-.176.456-.044.86-.11 1.212-.199.353-.088.631-.217.837-.386.206-.169.301-.415.287-.74 0-.337-.055-.606-.166-.804a1.217 1.217 0 0 0-.44-.464 1.737 1.737 0 0 0-.639-.22 5.292 5.292 0 0 0-.782-.055c-.617 0-1.101.132-1.454.397-.352.264-.558.706-.617 1.323h-3.128c.044-.735.227-1.345.55-1.83zm6.179 4.423a5.095 5.095 0 0 1-.639.165 9.68 9.68 0 0 1-.716.11c-.25.03-.5.067-.749.11a5.616 5.616 0 0 0-.694.177 2.057 2.057 0 0 0-.594.298c-.17.125-.305.284-.408.474-.103.192-.154.434-.154.728 0 .28.051.515.154.706.103.192.242.342.419.453.176.11.381.187.617.231.234.044.477.066.726.066.617 0 1.094-.102 1.432-.309.338-.205.587-.452.75-.739.16-.286.26-.576.297-.87.036-.295.055-.53.055-.707v-1.17a1.4 1.4 0 0 1-.496.277zM43.884 10.407v2.096h-2.291v5.647c0 .53.088.883.264 1.059.176.177.529.265 1.057.265.177 0 .345-.007.507-.022.161-.015.316-.037.463-.066v2.426a7.49 7.49 0 0 1-.882.089 21.67 21.67 0 0 1-.947.022c-.484 0-.944-.034-1.377-.1a3.233 3.233 0 0 1-1.145-.386 2.04 2.04 0 0 1-.782-.816c-.191-.353-.287-.816-.287-1.39v-6.728H36.57v-2.096h1.894v-3.42h3.129v3.42h2.29zM48.355 10.407v2.118h.044a3.907 3.907 0 0 1 1.454-1.754 4.213 4.213 0 0 1 1.036-.497 3.734 3.734 0 0 1 1.145-.176c.206 0 .433.037.683.11v2.912a5.862 5.862 0 0 0-.528-.077 5.566 5.566 0 0 0-.595-.033c-.573 0-1.058.096-1.454.287a2.52 2.52 0 0 0-.958.783 3.143 3.143 0 0 0-.518 1.158 6.32 6.32 0 0 0-.154 1.434v5.14h-3.128V10.407h2.973zM54.039 8.642V6.06h3.128v2.582H54.04zm3.128 1.765v11.405H54.04V10.407h3.128zM58.797 10.407h3.569l2.005 2.978 1.982-2.978h3.459l-3.745 5.339 4.208 6.067h-3.57l-2.378-3.596-2.38 3.596h-3.502l4.097-6.001zM74.094 31.25V.732H71.9V0h3.035v31.982H71.9v-.732z"/> + </g> +</svg> \ No newline at end of file diff --git a/synapse_topology/webui/src/index.html b/synapse_topology/webui/src/index.html new file mode 100644 index 0000000000..6eac2d5e13 --- /dev/null +++ b/synapse_topology/webui/src/index.html @@ -0,0 +1,15 @@ +<html> + +<head> + <meta charset="utf-8"> + <title>Topology - The synapse configuration tool</title> +</head> + +<link rel="stylesheet" href="scss/bootstrap.min.css"> + +<body> + <div id="content" /> + <script src="dist/bundle.js" type="text/javascript"></script> +</body> + +</html> \ No newline at end of file diff --git a/synapse_topology/webui/src/js/actions/constants.js b/synapse_topology/webui/src/js/actions/constants.js new file mode 100644 index 0000000000..6fbe7d57f6 --- /dev/null +++ b/synapse_topology/webui/src/js/actions/constants.js @@ -0,0 +1,24 @@ +export const DELEGATION_TYPES = { + LOCAL: "local", + WELL_KNOWN: ".well_known", + DNS: "DNS SRV", +} + +export const REVERSE_PROXY_TYPES = { + CADDY: "CADDY", + APACHE: "APACHE", + HAPROXY: "HAPROXY", + NGINX: "NGINX", + OTHER: "OTHER", +} + +export const TLS_TYPES = { + ACME: "ACME", + TLS: "TLS", + REVERSE_PROXY: "REVERSE_PROXY", +} + +export const DATABASE_TYPES = { + SQLITE3: "sqlite3", + POSTGRES: "psycopg2", +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/actions/index.js b/synapse_topology/webui/src/js/actions/index.js new file mode 100644 index 0000000000..1c68daf3f5 --- /dev/null +++ b/synapse_topology/webui/src/js/actions/index.js @@ -0,0 +1,254 @@ +import { + ADVANCE_UI, + BACK_UI, + SET_SERVERNAME, + SET_STATS, + BASE_CONFIG_CHECKED, + FAIL, + SET_SECRET_KEY, + GETTING_SECRET_KEY, + SET_DELEGATION, + SET_DELEGATION_SERVERNAME, + SET_DELEGATION_PORTS, + SET_REVERSE_PROXY, + SET_TLS, + TESTING_TLS_CERT_PATHS, + SET_TLS_CERT_PATHS, + SET_TLS_CERT_PATHS_VALIDITY, + SET_TLS_CERT_FILES, + UPLOADING_TLS_CERT_PATHS, + TESTING_SYNAPSE_PORTS, + SET_SYNAPSE_PORTS, + SET_SYNAPSE_PORTS_FREE, + SET_DATABASE, + SET_CONFIG_DIR, + WRITE_CONFIG, +} from './types'; + +import { + get_server_setup, + post_server_name, + get_secretkey, + post_cert_paths, + post_certs, + test_ports, + post_config, + start_synapse, +} from '../api'; +import { CONFIG_LOCK, CONFIG_DIR } from '../api/constants'; +import { base_config_to_synapse_config } from '../utils/yaml'; + +export const startup = () => { + return dispatch => { + get_server_setup().then( + result => { + dispatch(start(result[CONFIG_LOCK])); + dispatch(set_config_dir(result[CONFIG_DIR])); + }, + error => dispatch(fail(error)), + ) + } +} + +const set_config_dir = dir => ({ + type: SET_CONFIG_DIR, + config_dir: dir, +}); + +export const generate_secret_keys = consent => { + return (dispatch, getState) => { + dispatch(getting_secret_keys()); + post_server_name(getState().base_config.servername, consent) + .then( + result => dispatch(get_secret_key()), + error => dispatch(fail(error)) + ) + } +} + +export const set_tls_cert_paths = (cert_path, cert_key_path, callback) => { + return dispatch => { + dispatch(testing_tls_cert_paths(true)); + post_cert_paths(cert_path, cert_key_path) + .then( + result => dispatch(check_tls_cert_path_validity(result, callback)), + error => dispatch(fail(error)) + ) + } +} + +const set_tls_certs = (cert_path, cert_key_path) => ({ + type: SET_TLS_CERT_PATHS, + cert_path, + cert_key_path, +}) + +const testing_tls_cert_paths = testing => ({ + type: TESTING_TLS_CERT_PATHS, + testing, +}); + +const check_tls_cert_path_validity = ({ cert_path, cert_key_path }, callback) => { + return dispatch => { + dispatch(testing_tls_cert_paths(false)); + dispatch(set_tls_certs(cert_path.absolute_path, cert_key_path.absolute_path)) + dispatch(set_cert_path_validity({ cert_path, cert_key_path })); + if (!cert_path.invalid && !cert_key_path.invalid) { + dispatch(advance_ui()); + callback(); + } + } +} + +export const upload_tls_cert_files = (tls_cert_file, tls_cert_key_file) => + dispatch => { + dispatch(set_tls_cert_files(tls_cert_file, tls_cert_key_file)); + dispatch(uploading_tls_cert_files(true)); + post_certs(tls_cert_file, tls_cert_key_file) + .then( + result => { + dispatch(uploading_tls_cert_files(false)); + dispatch(advance_ui()) + }, + error => dispatch(fail(error)), + ) + } + +const uploading_tls_cert_files = uploading => ({ + type: UPLOADING_TLS_CERT_PATHS, + uploading +}) + +export const set_tls_cert_files = (tls_cert_file, tls_cert_key_file) => ({ + type: SET_TLS_CERT_FILES, + tls_cert_file, + tls_cert_key_file, +}) +const set_cert_path_validity = ({ cert_path, cert_key_path }) => ({ + type: SET_TLS_CERT_PATHS_VALIDITY, + cert_path_invalid: cert_path.invalid, + cert_key_path_invalid: cert_key_path.invalid, +}); + +export const getting_secret_keys = () => ({ + type: GETTING_SECRET_KEY, +}); + +export const get_secret_key = () => { + return dispatch => { + get_secretkey().then( + result => dispatch(set_secret_key(result)), + error => dispatch(fail(error)), + ) + } +} + +export const set_secret_key = key => ({ + type: SET_SECRET_KEY, + key, +}); + +export const start = setup_done => ({ + type: BASE_CONFIG_CHECKED, + setup_done, +}); + +export const fail = reason => ({ + type: FAIL, + reason, +}); + +export const advance_ui = option => ({ + type: ADVANCE_UI, + option, +}); + +export const set_servername = servername => ({ + type: SET_SERVERNAME, + servername, +}); + +export const set_stats = consent => ({ + type: SET_STATS, + consent, +}); + +export const set_delegation = delegation_type => ({ + type: SET_DELEGATION, + delegation_type, +}); + +export const set_delegation_servername = servername => ({ + type: SET_DELEGATION_SERVERNAME, + servername, +}); + +export const set_delegation_ports = (federation_port, client_port) => ({ + type: SET_DELEGATION_PORTS, + federation_port, + client_port, +}); + +export const set_reverse_proxy = proxy_type => ({ + type: SET_REVERSE_PROXY, + proxy_type, +}); + +export const set_tls = tls_type => ({ + type: SET_TLS, + tls_type, +}); + +export const set_synapse_ports = (federation_port, client_port, callback) => { + const fed_port_priv = federation_port < 1024; + const client_port_priv = client_port < 1024; + return dispatch => { + dispatch(testing_synapse_ports(true)); + dispatch({ + type: SET_SYNAPSE_PORTS, + federation_port, + client_port, + }) + test_ports([federation_port, client_port]) + .then( + results => dispatch(update_ports_free( + fed_port_priv ? true : results.ports[0], + client_port_priv ? true : results.ports[1], + callback, + )), + error => dispatch(fail(error)), + ) + } +}; + +export const update_ports_free = (synapse_federation_port_free, synapse_client_port_free, callback) => { + return dispatch => { + dispatch(testing_synapse_ports(false)); + dispatch({ + type: SET_SYNAPSE_PORTS_FREE, + synapse_federation_port_free, + synapse_client_port_free, + }); + if (synapse_federation_port_free && synapse_client_port_free) { + callback(); + dispatch(advance_ui()); + } + } +} + +export const testing_synapse_ports = verifying => ({ + type: TESTING_SYNAPSE_PORTS, + verifying, +}) + +export const set_database = database => ({ + type: SET_DATABASE, + database, +}) + +export const write_config = (config, sub_config_name) => { + return (dispatch, getState) => { + post_config(base_config_to_synapse_config(getState().base_config), sub_config_name) + .then(res => start_synapse(), error => dispatch(fail(error))) + } +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/actions/types.js b/synapse_topology/webui/src/js/actions/types.js new file mode 100644 index 0000000000..24d3f23cc1 --- /dev/null +++ b/synapse_topology/webui/src/js/actions/types.js @@ -0,0 +1,24 @@ +export const ADVANCE_UI = 'ADVANCE_UI'; +export const BACK_UI = 'BACK_UI'; +export const SET_SERVERNAME = 'SET_SERVERNAME'; +export const SET_STATS = 'SET_STATS'; +export const BASE_CONFIG_CHECKED = 'BASE_CONFIG_CHECKED'; +export const FAIL = 'NETWORK_FAIL'; +export const SET_SECRET_KEY = 'SET_SECRET_KEY'; +export const GETTING_SECRET_KEY = 'GETTING_SECRET_KEY'; +export const SET_DELEGATION = 'SET_DELEGATION'; +export const SET_DELEGATION_SERVERNAME = 'SET_DELEGATION_SERVERNAME'; +export const SET_DELEGATION_PORTS = 'SET_DELEGATION_PORTS'; +export const SET_REVERSE_PROXY = 'SET_REVERSE_PROXY'; +export const TESTING_TLS_CERT_PATHS = 'TESTING_TLS_CERT_PATHS'; +export const UPLOADING_TLS_CERT_PATHS = 'UPLOADING_TLS_CERT_PATHS'; +export const SET_TLS = 'SET_TLS'; +export const SET_TLS_CERT_PATHS = 'SET_TLS_CERT_PATHS'; +export const SET_TLS_CERT_PATHS_VALIDITY = 'SET_TLS_CERT_PATHS_VALIDITY'; +export const SET_TLS_CERT_FILES = 'SET_TLS_CERT_FILES'; +export const TESTING_SYNAPSE_PORTS = 'TESTING_SYNAPSE_PORTS'; +export const SET_SYNAPSE_PORTS = 'SET_SYNAPSE_PORTS'; +export const SET_SYNAPSE_PORTS_FREE = 'SET_SYNAPSE_PORTS_IN_USE'; +export const SET_DATABASE = 'SET_DATABASE'; +export const SET_CONFIG_DIR = 'SET_CONFIG_DIR'; +export const WRITE_CONFIG = 'WRITE_CONFIG'; \ No newline at end of file diff --git a/synapse_topology/webui/src/js/api/constants.js b/synapse_topology/webui/src/js/api/constants.js new file mode 100644 index 0000000000..89f8996d39 --- /dev/null +++ b/synapse_topology/webui/src/js/api/constants.js @@ -0,0 +1,11 @@ +export const API_URL = "http://localhost:8888/"; +export const SERVER_NAME = "/servername"; +export const SECRET_KEY = "/secretkey"; +export const CONFIG = "/config"; +export const CONFIG_SOMETHING = "/config_something"; +export const SETUP_CHECK = "/setup"; +export const CERT_PATHS = "/testcertpaths"; +export const TEST_PORTS = "/ports"; +export const CONFIG_LOCK = "server_config_in_use"; +export const CONFIG_DIR = "config_dir"; +export const START = "/start"; \ No newline at end of file diff --git a/synapse_topology/webui/src/js/api/index.js b/synapse_topology/webui/src/js/api/index.js new file mode 100644 index 0000000000..521a5a5393 --- /dev/null +++ b/synapse_topology/webui/src/js/api/index.js @@ -0,0 +1,89 @@ +import fetchAbsolute from 'fetch-absolute'; +import { + API_URL, + CONFIG, + SECRET_KEY, + SERVER_NAME, + SETUP_CHECK, + CERT_PATHS, + TEST_PORTS, + START, +} from './constants'; + +const fetchAbs = fetchAbsolute(fetch)(API_URL) + +export const get_server_name = () => + fetchAbs(SERVER_NAME) + .then(res => res.json()) + +export const post_server_name = (servername, consent) => + fetchAbs( + SERVER_NAME, + { + method: 'POST', + body: JSON.stringify({ + "server_name": servername, + "report_stats": consent + }) + } + ) + +export const post_cert_paths = (cert_path, cert_key_path) => + fetchAbs( + CERT_PATHS, + { + method: 'POST', + body: JSON.stringify({ + cert_path, + cert_key_path, + }) + } + ).then(res => res.json()) + +export const post_certs = (cert, cert_key) => + fetchAbs( + CERT_PATHS, + { + method: 'POST', + body: JSON.stringify({ + cert, + cert_key, + }) + } + ) + +export const test_ports = (ports) => + fetchAbs( + TEST_PORTS, + { + method: 'POST', + body: JSON.stringify({ + ports + }) + } + ).then(res => res.json()) + +export const get_secretkey = () => + fetchAbs(SECRET_KEY) + .then(res => res.json()) + .then(json => json.secret_key) + +export const get_config = () => { + +}; + +export const post_config = (config, sub_config_name) => + fetchAbs( + sub_config_name ? CONFIG + "/" + sub_config_name : CONFIG, + { + method: 'POST', + body: JSON.stringify(config), + } + ) + + +// Checks if the server's base config has been setup. +export const get_server_setup = () => fetchAbs(SETUP_CHECK) + .then(res => res.json()) + +export const start_synapse = () => fetchAbs(START) \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/AccordionToggle.jsx b/synapse_topology/webui/src/js/components/AccordionToggle.jsx new file mode 100644 index 0000000000..c53ec75c4d --- /dev/null +++ b/synapse_topology/webui/src/js/components/AccordionToggle.jsx @@ -0,0 +1,9 @@ +import React from 'react'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; + +export default ({ active, children, eventKey, as }) => { + console.log(children) + const decoratedOnClick = active ? useAccordionToggle(eventKey) : undefined; + const As = as; + return <As onClick={decoratedOnClick} > {children}</As> +} diff --git a/synapse_topology/webui/src/js/components/BaseIntro.jsx b/synapse_topology/webui/src/js/components/BaseIntro.jsx new file mode 100644 index 0000000000..35824fb36d --- /dev/null +++ b/synapse_topology/webui/src/js/components/BaseIntro.jsx @@ -0,0 +1,12 @@ +import React from 'react'; + +import style from '../../scss/main.scss'; +import ContentWrapper from '../containers/ContentWrapper'; +import ButtonDisplay from './ButtonDisplay'; + +export default ({ onClick }) => + <ContentWrapper> + <h1>Synapse Topology</h1> + <p>Let's get started.</p> + <ButtonDisplay><button onClick={onClick}>SETUP</button></ButtonDisplay> + </ContentWrapper> \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/ButtonDisplay.jsx b/synapse_topology/webui/src/js/components/ButtonDisplay.jsx new file mode 100644 index 0000000000..8f3cade0c2 --- /dev/null +++ b/synapse_topology/webui/src/js/components/ButtonDisplay.jsx @@ -0,0 +1,5 @@ +import React from 'react'; + +import style from '../../scss/main.scss'; + +export default ({ children }) => <div className={style.buttonDisplay}>{children}</div> \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/CompleteSetup.jsx b/synapse_topology/webui/src/js/components/CompleteSetup.jsx new file mode 100644 index 0000000000..6dfb172b81 --- /dev/null +++ b/synapse_topology/webui/src/js/components/CompleteSetup.jsx @@ -0,0 +1,63 @@ +import React, { useState } from 'react'; + +import Accordion from 'react-bootstrap/Accordion'; +import Card from 'react-bootstrap/Card'; + +import ReverseProxySampleConfig from '../containers/ReverseProxySampleConfig' +import DelegationSampleConfig from '../containers/DelegationSampleConfig'; +import AccordionToggle from '../containers/AccordionToggle'; + +import { TLS_TYPES, DELEGATION_TYPES } from '../actions/constants'; +import { COMPLETE_UI } from '../reducers/ui_constants'; + +export default ({ + tlsType, + delegationType, + onClick, +}) => { + const [body, setBody] = useState(); + + const revProxyBody = <Card.Body> + <ReverseProxySampleConfig /> + <button + onClick={ + () => delegationType != DELEGATION_TYPES.LOCAL ? + setBody(delegationBody) : + setBody(finishedBody) + } + >Next</button> + </Card.Body > + + const delegationBody = <Card.Body> + <DelegationSampleConfig /> + <button + onClick={ + () => setBody(finishedBody) + } + >Next</button> + </Card.Body> + + const finishedBody = <Card.Body> + <p>You done</p> + <button onClick={onClick}>Start Synapse</button> + </Card.Body> + + if (!body) { + setBody( + tlsType == TLS_TYPES.REVERSE_PROXY ? + revProxyBody : + delegationType != DELEGATION_TYPES.LOCAL ? + delegationBody : + finishedBody + ) + } + + return <Card> + <AccordionToggle as={Card.Header} eventKey={COMPLETE_UI}> + Setup Complete + </AccordionToggle> + <Accordion.Collapse eventKey={COMPLETE_UI}> + {body} + </Accordion.Collapse> + </Card> +} diff --git a/synapse_topology/webui/src/js/components/ConfigSelector.jsx b/synapse_topology/webui/src/js/components/ConfigSelector.jsx new file mode 100644 index 0000000000..23f0f162ec --- /dev/null +++ b/synapse_topology/webui/src/js/components/ConfigSelector.jsx @@ -0,0 +1,10 @@ +import React, { useState } from 'react'; +import ContentWrapper from '../containers/ContentWrapper'; + +export default () => { + return <ContentWrapper> + <h1>Config selection</h1> + <p>The base config has already been setup. Please select a config to edit:</p> + <p>TODO: .. well .. this.</p> + </ContentWrapper>; +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/ContentWrapper.jsx b/synapse_topology/webui/src/js/components/ContentWrapper.jsx new file mode 100644 index 0000000000..dfd68a6adb --- /dev/null +++ b/synapse_topology/webui/src/js/components/ContentWrapper.jsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import style from '../../scss/main.scss'; + +export default ({ servername, children }) => { + if (servername) { + return <div> + <p className={style.servername}>{servername}</p> + <div className={style.contentWrapper}> + {children} + </div> + </div> + } else { + return <div className={style.contentWrapper}>{children}</div> + } +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/Database.jsx b/synapse_topology/webui/src/js/components/Database.jsx new file mode 100644 index 0000000000..cb6b877322 --- /dev/null +++ b/synapse_topology/webui/src/js/components/Database.jsx @@ -0,0 +1,45 @@ +import React, { useState } from 'react'; + +import Accordion from 'react-bootstrap/Accordion'; +import Card from 'react-bootstrap/Card'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; + +import { + DATABASE_TYPES +} from '../actions/constants' + +import { DATABASE_UI } from '../reducers/ui_constants'; + +import AccordionToggle from '../containers/AccordionToggle'; + +import { next_ui } from '../reducers/setup-ui-reducer'; + +export default ({ + onClick, +}) => { + const defaultDatabase = DATABASE_TYPES.POSTGRES; + const [database, setDatabase] = useState(defaultDatabase) + + const toggle = useAccordionToggle(next_ui(DATABASE_UI)); + + return <Card> + <AccordionToggle as={Card.Header} eventKey={DATABASE_UI}> + Database + </AccordionToggle> + <Accordion.Collapse eventKey={DATABASE_UI}> + <Card.Body> + <p>Synapse can use either SQLite3 or Postgres as it's database.</p> + <p>Postgres is recommended</p> + + <select defaultValue={defaultDatabase} onChange={event => setDatabase(event.target.value)}> + <option value={DATABASE_TYPES.POSTGRES}>PostgreSQL</option> + <option value={DATABASE_TYPES.SQLITE3}>SQLite3</option> + </select> + <button onClick={() => { + toggle(); + onClick(database) + }}>Next</button> + </Card.Body> + </Accordion.Collapse> + </Card> +} diff --git a/synapse_topology/webui/src/js/components/DelegationOptions.jsx b/synapse_topology/webui/src/js/components/DelegationOptions.jsx new file mode 100644 index 0000000000..b63ed47795 --- /dev/null +++ b/synapse_topology/webui/src/js/components/DelegationOptions.jsx @@ -0,0 +1,138 @@ +import React, { useState } from 'react'; + +import style from '../../scss/main.scss'; + +import Accordion from 'react-bootstrap/Accordion'; +import Card from 'react-bootstrap/Card'; +import Tabs from 'react-bootstrap/Tabs'; +import Tab from 'react-bootstrap/Tab'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; + +import { DELEGATION_TYPES } from '../actions/constants'; +import { DELEGATION_OPTIONS_UI } from '../reducers/ui_constants'; +import AccordionToggle from '../containers/AccordionToggle'; +import { next_ui } from '../reducers/setup-ui-reducer'; + +export default ({ servername, skip, onClick }) => { + const defaultType = DELEGATION_TYPES.DNS; + const [type, setType] = useState(defaultType); + + const [delegatedServername, setDelegatedServerName] = useState(""); + + const [fedPort, setFedPort] = useState(""); + const [clientPort, setClientPort] = useState(""); + + const [clientPortValid, setClientPortValid] = useState(true) + const [fedPortValid, setFedPortValid] = useState(true) + + const updateValidity = (port, setValid) => setValid( + !port || + (!isNaN(port) && 0 < port && port <= 65535) + ) + + const onFederationChange = event => { + const val = event.target.value; + setFedPort(val); + updateValidity(val, setFedPortValid); + } + + const onClientChange = event => { + const val = event.target.value; + setClientPort(val); + updateValidity(val, setClientPortValid); + } + + const toggle = useAccordionToggle(next_ui(DELEGATION_OPTIONS_UI)); + + return <Card> + <AccordionToggle as={Card.Header} eventKey={DELEGATION_OPTIONS_UI}> + Delegation (optional) + <button onClick={() => { + toggle(); + skip(); + }}> + Skip + </button> + </AccordionToggle> + <Accordion.Collapse eventKey={DELEGATION_OPTIONS_UI}> + <Card.Body> + <p> + If you'd like your synapse to be hosted on a different server to the + one known on the network by '{servername}' you can use delegation. + </p> + <a href="https://github.com/matrix-org/synapse/blob/master/docs/federate.md" target="_blank"> + Learn more + </a> + <p> + Other federation servers will connect to {servername}:8448 over the network. + </p> + <p> + There are two forms of delegation: + </p> + + <Tabs defaultActiveKey={defaultType} onSelect={k => setType(k)}> + <Tab eventKey={DELEGATION_TYPES.DNS} title={DELEGATION_TYPES.DNS}> + <p> + You will need access to {servername}'s domain zone DNS records. + This method also requires the synapse install's server to provide + a valid TLS cert for {servername} + </p> + <p> + You will need to add an SRV record to {servername}'s DNS zone. (Once + again, we'll print the SRV record out for you later.) + </p> + </Tab> + <Tab eventKey={DELEGATION_TYPES.WELL_KNOWN} title={DELEGATION_TYPES.WELL_KNOWN}> + <p> + {servername} provides the url + https://{servername}/.well-known/matrix/server which gives + federating servers information about how to contact the actual + server hosting the synapse install. (Don't worry! We'll print out + the .well-known file for you later.) + </p> + </Tab> + </Tabs> + + <p>Please enter the domain name of the server synapse is installed on.</p> + <input + type="text" + onChange={e => setDelegatedServerName(e.target.value)} + autoFocus + placeholder="Enter server name" + /> + + <p> + Homeserver Port + </p> + <input + type="text" + onChange={onFederationChange} + className={fedPortValid ? undefined : "invalid"} + autoFocus + placeholder="Use Default 8448" + /> + {fedPortValid ? undefined : <p>Invalid port</p> } + <p> + Client Port + </p> + <input + type="text" + onChange={onClientChange} + className={clientPortValid ? undefined : "invalid"} + autoFocus + placeholder="Use Default 443" + /> + {clientPortValid ? undefined : <p>Invalid port</p> } + <button disabled={delegatedServername && clientPortValid && fedPortValid ? undefined : true} + onClick={() => { + toggle(); + onClick(type, delegatedServername, fedPort, clientPort) + }} + > + Use {type} + </button> + + </Card.Body> + </Accordion.Collapse> + </Card> +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/DelegationSampleConfig.jsx b/synapse_topology/webui/src/js/components/DelegationSampleConfig.jsx new file mode 100644 index 0000000000..ab4dd7d280 --- /dev/null +++ b/synapse_topology/webui/src/js/components/DelegationSampleConfig.jsx @@ -0,0 +1,66 @@ +import React from 'react'; + +import ContentWrapper from '../containers/ContentWrapper'; +import ButtonDisplay from './ButtonDisplay'; +import DownloadOrCopy from './DownloadOrCopy'; +import { DELEGATION_TYPES } from '../actions/constants'; + +export default ({ + delegationType, + serverConfig, + clientConfig, + serverConfigFileName, + clientConfigFileName, + serverName, + onClick +}) => { + if (delegationType == DELEGATION_TYPES.DNS) { + + return <ContentWrapper> + <h1>ConfigureDelegation</h1> + <p> + You will need to add the following SRV record to your DNS zone. + </p> + <pre> + <code> + {clientConfig} + </code> + </pre> + <DownloadOrCopy content={clientConfig} fileName={clientConfigFileName} /> + <ButtonDisplay> + <button onClick={onClick}>Continue</button> + </ButtonDisplay> + </ContentWrapper> + + } else { + + return <ContentWrapper> + <h1>Configure delegation</h1> + <p> + The delegation configuration needs to take place outside the installer. + </p> + <p> + You'll need to host the following at https://{serverName}/.well-known/matrix/server + </p> + <pre> + <code> + {serverConfig} + </code> + </pre> + <DownloadOrCopy content={serverConfig} fileName={serverConfigFileName} /> + <p> + You'll also need to host the following at https://{serverName}/.well-known/matrix/client + </p> + <pre> + <code> + {clientConfig} + </code> + </pre> + <DownloadOrCopy content={clientConfig} fileName={clientConfigFileName} /> + <ButtonDisplay> + <button onClick={onClick}>Continue</button> + </ButtonDisplay> + </ContentWrapper>; + + } +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx b/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx new file mode 100644 index 0000000000..34e2302755 --- /dev/null +++ b/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import ButtonDisplay from './ButtonDisplay'; + +const download = (filename, text) => { + const e = document.createElement('a'); + e.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); + e.setAttribute('download', filename); + + e.style.display = 'none'; + document.body.appendChild(e); + + e.click(); + + document.body.removeChild(e); +} + +export default ({ content, fileName }) => + <ButtonDisplay> + <button onClick={() => download(fileName, content)}>Download</button> + <button onClick={() => navigator.clipboard.writeText(content)}>Copy</button> + </ButtonDisplay> \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/Error.jsx b/synapse_topology/webui/src/js/components/Error.jsx new file mode 100644 index 0000000000..6f01286340 --- /dev/null +++ b/synapse_topology/webui/src/js/components/Error.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import style from '../../scss/main.scss'; +import ContentWrapper from '../containers/ContentWrapper'; + +export default () => { + return <ContentWrapper> + <h1>Damn!</h1> + <p>Has the config server been started?</p> + </ContentWrapper>; +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/ExportKeys.jsx b/synapse_topology/webui/src/js/components/ExportKeys.jsx new file mode 100644 index 0000000000..16b01ab69e --- /dev/null +++ b/synapse_topology/webui/src/js/components/ExportKeys.jsx @@ -0,0 +1,47 @@ +import React from 'react'; + +import Accordion from 'react-bootstrap/Accordion'; +import Card from 'react-bootstrap/Card'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; + +import ButtonDisplay from './ButtonDisplay'; +import DownloadOrCopy from './DownloadOrCopy'; + +import { KEY_EXPORT_UI } from '../reducers/ui_constants'; +import AccordionToggle from '../containers/AccordionToggle'; +import { next_ui } from '../reducers/setup-ui-reducer'; + + +export default ({ secret_key_loaded, secret_key, onClick }) => { + const toggle = useAccordionToggle(next_ui(KEY_EXPORT_UI)); + + const decoratedOnClick = () => { + toggle(); + onClick(); + } + var body; + if (!secret_key_loaded) { + body = <Card.Body>Generating secret key</Card.Body> + } else { + body = <Card.Body> + <p> + Your server uses a secret key to identify itself to other servers. Keep + a copy of it to retain ownership of the server name in case the server + is inaccessible: + </p> + <pre><code>{secret_key}</code></pre> + <p>Keep a copy of this key somewhere safe</p> + <DownloadOrCopy content={secret_key} fileName="secret_key.txt" /> + <ButtonDisplay><button onClick={decoratedOnClick}>Next</button></ButtonDisplay> + </Card.Body> + } + + return <Card> + <AccordionToggle as={Card.Header} eventKey={KEY_EXPORT_UI}> + Secret Key + </AccordionToggle> + <Accordion.Collapse eventKey={KEY_EXPORT_UI}> + {body} + </Accordion.Collapse> + </Card> +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/Loading.jsx b/synapse_topology/webui/src/js/components/Loading.jsx new file mode 100644 index 0000000000..8b8c598dff --- /dev/null +++ b/synapse_topology/webui/src/js/components/Loading.jsx @@ -0,0 +1,10 @@ +import React from 'react'; + +import style from '../../scss/main.scss'; +import ContentWrapper from '../containers/ContentWrapper'; + +export default () => { + return <ContentWrapper> + <h1>loading..</h1> + </ContentWrapper>; +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/PortSelection.jsx b/synapse_topology/webui/src/js/components/PortSelection.jsx new file mode 100644 index 0000000000..273f79f3e9 --- /dev/null +++ b/synapse_topology/webui/src/js/components/PortSelection.jsx @@ -0,0 +1,133 @@ +import React, { useState } from 'react'; + +import Accordion from 'react-bootstrap/Accordion'; +import Card from 'react-bootstrap/Card'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; + +import { PORT_SELECTION_UI } from '../reducers/ui_constants'; + +import AccordionToggle from '../containers/AccordionToggle'; +import ContentWrapper from '../containers/ContentWrapper'; + +import { next_ui } from '../reducers/setup-ui-reducer'; + +export default ({ + servername, + verifyingPorts, + fedPortInUse, + clientPortInUse, + canChangePorts, + defaultFedPort, + defaultClientPort, + onClick, +}) => { + if (verifyingPorts) { + return <ContentWrapper><h1>Verifying ports.</h1></ContentWrapper> + } + + const [fedPort, setFedPort] = useState(defaultFedPort); + const [clientPort, setClientPort] = useState(defaultClientPort); + + const [clientPortValid, setClientPortValid] = useState(true) + const [fedPortValid, setFedPortValid] = useState(true) + + const [clientPortPriv, setClientPortPriv] = useState(defaultClientPort < 1024) + const [fedPortPriv, setFedPortPriv] = useState(defaultFedPort < 1024) + + const [_fedPortInUse, set_fedPortInUse] = useState(fedPortInUse) + const [_clientPortInUse, set_clientPortInUse] = useState(clientPortInUse) + + const updateValidity = (port, setValid) => setValid( + !isNaN(port) && 0 < port && port <= 65535 + ) + + const updatePriv = (port, setPriv) => setPriv( + port < 1024 + ) + + const onFederationChange = event => { + const val = event.target.value ? event.target.value : defaultFedPort; + set_fedPortInUse(false); + setFedPort(val); + updatePriv(val, setFedPortPriv); + updateValidity(val, setFedPortValid); + } + + const onClientChange = event => { + const val = event.target.value ? event.target.value : defaultClientPort; + set_clientPortInUse(false); + setClientPort(val); + updatePriv(val, setClientPortPriv); + updateValidity(val, setClientPortValid); + } + + const toggle = useAccordionToggle(next_ui(PORT_SELECTION_UI)); + + return <Card> + <AccordionToggle as={Card.Header} eventKey={PORT_SELECTION_UI}> + {servername}'s ports + </AccordionToggle> + <Accordion.Collapse eventKey={PORT_SELECTION_UI}> + <Card.Body> + + <p> + Synapse will be listening on the following ports on localhost. + </p> + { + canChangePorts ? + <p> + Since you're using a reverse proxy you can change these to anything you + like as long as synapse can bind to them. We recommend not using privileged + ports within the range 0 to 1024. + </p> + : + <p> + Since you're not using a reverse proxy synapse will have to listen on + these ports. If any of these ports are already in use (we'll test them when + you click the button) you will either need to reconfigure the ports used on + localhost, setup up delegation or use a reverse proxy. + </p> + } + + <p> + We will check that the ports are not in use. + </p> + <p> + Note: we can't check whether privileged ports are in use. If you've + set a privileged port <b>we will skip the check for that port</b>. + </p> + + <h3>Federation Port</h3> + <input + type="text" + className={_fedPortInUse|!fedPortValid?"invalid":undefined} + onChange={onFederationChange} + disabled={canChangePorts ? undefined : true} + autoFocus + placeholder={defaultFedPort} + /> + {_fedPortInUse ? <p>This port is in use.</p> : undefined} + {fedPortValid ? undefined : <p>Invalid port</p> } + {fedPortPriv ? <p>This is a privileged port.</p> : undefined} + <h3>Client Port</h3> + <input + type="text" + className={_clientPortInUse|!clientPortValid?"invalid":undefined} + onChange={onClientChange} + disabled={canChangePorts ? undefined : true} + autoFocus + placeholder={defaultClientPort} + /> + {_clientPortInUse ? <p>This port is in use.</p> : undefined} + {clientPortValid ? undefined : <p>Invalid port</p> } + {clientPortPriv ? <p>This is a privileged port.</p> : undefined} + <div> + <button + disabled={clientPortValid && fedPortValid ? undefined : true} + onClick={() => onClick(parseInt(fedPort), parseInt(clientPort), toggle)} + >Verify These Ports</button> + </div> + </Card.Body> + </Accordion.Collapse> + </Card> +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/ReverseProxySampleConfig.jsx b/synapse_topology/webui/src/js/components/ReverseProxySampleConfig.jsx new file mode 100644 index 0000000000..a5e7adea95 --- /dev/null +++ b/synapse_topology/webui/src/js/components/ReverseProxySampleConfig.jsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import ContentWrapper from '../containers/ContentWrapper'; +import ButtonDisplay from './ButtonDisplay'; +import DownloadOrCopy from './DownloadOrCopy'; +import { REVERSE_PROXY_TYPES } from '../actions/constants'; + +export default ({ proxyType, sampleConfig, fileName }) => { + return <ContentWrapper> + <h1>Configure the ReverseProxy</h1> + <p> + It's time for you to setup the reverse proxy outside of this installer. + </p> + { + proxyType == REVERSE_PROXY_TYPES.OTHER ? + <p> + Here's a sample config for Apache. Since you chose 'other' for your reverse proxy. + You'll have to figure it out for yourself. We believe in you. + </p> + : + <p> + We can't do it for you + but here's the sample configuration for your {proxyType} proxy. + </p> + } + <pre> + <code> + {sampleConfig} + </code> + </pre> + <DownloadOrCopy content={sampleConfig} fileName={fileName} /> + </ContentWrapper>; +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/ServerName.jsx b/synapse_topology/webui/src/js/components/ServerName.jsx new file mode 100644 index 0000000000..e2f160a17b --- /dev/null +++ b/synapse_topology/webui/src/js/components/ServerName.jsx @@ -0,0 +1,44 @@ +import React, { useState } from 'react'; + +import Accordion from 'react-bootstrap/Accordion'; +import Card from 'react-bootstrap/Card'; +import { SERVER_NAME_UI } from '../reducers/ui_constants'; +import AccordionToggle from '../containers/AccordionToggle'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; +import { next_ui } from '../reducers/setup-ui-reducer'; + +export default ({ onClick }) => { + const [servername, setServerName] = useState(""); + + const onChange = event => { + setServerName(event.target.value); + }; + + const toggle = useAccordionToggle(next_ui(SERVER_NAME_UI)); + const decoratedOnClick = () => { + toggle(); + onClick(servername); + } + + return <Card> + <AccordionToggle as={Card.Header} eventKey={SERVER_NAME_UI} > + Name your server + </AccordionToggle> + <Accordion.Collapse eventKey={SERVER_NAME_UI}> + <Card.Body> + <p> + Your server name usually matches your domain. For example, the + matrix.org server is simply called `matrix.org`. + </p> + <p> + Your server name will be used to establish User IDs (e.g. + `@user:server.name`) and Room Aliases (e.g. `#room:server.name`). + </p> + <input type="text" onChange={onChange} autoFocus placeholder="Enter server name"></input> + <div> + <button disabled={servername ? undefined : true} onClick={decoratedOnClick}>Next</button> + </div> + </Card.Body> + </Accordion.Collapse> + </Card>; +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/StatsReporter.jsx b/synapse_topology/webui/src/js/components/StatsReporter.jsx new file mode 100644 index 0000000000..1ca896ca42 --- /dev/null +++ b/synapse_topology/webui/src/js/components/StatsReporter.jsx @@ -0,0 +1,42 @@ +import React, { useState } from 'react'; + +import Accordion from 'react-bootstrap/Accordion'; +import Card from 'react-bootstrap/Card'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; + +import { STATS_REPORT_UI } from '../reducers/ui_constants'; +import AccordionToggle from '../containers/AccordionToggle'; +import { next_ui } from '../reducers/setup-ui-reducer'; + + +export default ({ onClick }) => { + const [consent, setConsent] = useState(false); + const toggle = useAccordionToggle(next_ui(STATS_REPORT_UI)); + const decoratedOnClick = () => { + toggle(); + onClick(consent); + } + + return <Card> + <AccordionToggle as={Card.Header} eventKey={STATS_REPORT_UI}> + Anonymous Statistics + </AccordionToggle> + <Accordion.Collapse eventKey={STATS_REPORT_UI}> + <Card.Body> + <p> + Would you like to report anonymous statistics to matrix.org? + Your server will send anonymised, aggregated statistics to matrix.org + on user usage so we can measure the health of the Matrix ecosystem. + </p> + <label> + <input + type="checkbox" + onChange={event => setConsent(event.target.checked)} + /> + Yes, send anonymous statistics + </label> + <button onClick={decoratedOnClick}>Next</button> + </Card.Body> + </Accordion.Collapse> + </Card > +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/TLS.jsx b/synapse_topology/webui/src/js/components/TLS.jsx new file mode 100644 index 0000000000..584a658608 --- /dev/null +++ b/synapse_topology/webui/src/js/components/TLS.jsx @@ -0,0 +1,157 @@ +import React, { useState } from 'react'; + +import style from '../../scss/main.scss'; + +import Accordion from 'react-bootstrap/Accordion'; +import Card from 'react-bootstrap/Card'; +import Tabs from 'react-bootstrap/Tabs'; +import Tab from 'react-bootstrap/Tab'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; + +import { TLS_UI } from '../reducers/ui_constants'; +import { TLS_TYPES, REVERSE_PROXY_TYPES } from '../actions/constants'; +import AccordionToggle from '../containers/AccordionToggle'; +import { next_ui } from '../reducers/setup-ui-reducer'; + +const tlsLink = "https://en.wikipedia.org/wiki/Transport_Layer_Security"; +const apacheLink = "http://httpd.apache.org/"; +const caddyLink = "https://caddyserver.com/"; +const haproxyLink = "http://www.haproxy.org/"; +const nginxLink = "https://www.nginx.com/"; +const proxyInfoLink = "https://github.com/matrix-org/synapse/blob/master/docs/reverse_proxy.rst"; + +export default ({ testingCertPaths, uploadingCerts, certPathInvalid, certKeyPathInvalid, onClickCertPath, onClickCertUpload, onClickACME, onClickReverseProxy }) => { + const defaultType = TLS_TYPES.REVERSE_PROXY; + + const [type, setType] = useState(defaultType); + + const [certPath, setCertPath] = useState(""); + const [certKeyPath, setCertKeyPath] = useState(""); + const [certFile, setCertFile] = useState(); + const [certKeyFile, setCertKeyFile] = useState(); + + const defaultValue = REVERSE_PROXY_TYPES.NGINX; + const [reverseProxy, setReverseProxy] = useState(defaultValue); + + const toggle = useAccordionToggle(next_ui(TLS_UI)); + + return <Card> + <AccordionToggle as={Card.Header} eventKey={TLS_UI}> + TLS + </AccordionToggle> + <Accordion.Collapse eventKey={TLS_UI}> + <Card.Body> + <p> + Synapse uses TLS to ensure communication between homeservers is + secure. To use TLS, you’ll need a TLS certificate. Synapse supports + ACME, providing your own certificates, or reverse proxy handling TLS + certificates. + </p> + <Tabs defaultActiveKey={defaultType} onSelect={k => setType(k)}> + <Tab eventKey={TLS_TYPES.REVERSE_PROXY} title="Reverse Proxy"> + <p> + It is recommended to run Synapse behind a reverse proxy such as <a target="_blank" href={apacheLink}>Apache</a>, <a target="_blank" href={caddyLink}>Caddy</a>, <a target="_blank" href={haproxyLink}>HAProxy</a>, or <a target="_blank" href={nginxLink}>NGiNX</a>. + </p> + <p> + The main benefit to this is that the reverse proxy can listen on + the privileged port 443 (which clients like Riot expect to connect + to) on behalf of synapse. The incoming traffic is then forwarded + to Synapse on a non privileged port. + </p> + <p> + You need root to listen on ports 0 to 1024 inclusive and running + synapse with root privileges is <b>strongly discouraged</b>. + Reverse proxies are more secure, run with root and pass things on + like nobody's business. + </p> + <p> + (Note: you can also have synapse use a non privileged port by + using one of the delegation methods mentioned earlier.) + </p> + <p> + If you choose to use a Reverse Proxy we'll provide you with + configuration templates later. + </p> + <p>More information about Reverse Proxies + <a href="https://github.com/matrix-org/synapse/blob/master/docs/reverse_proxy.rst"> + in the docs</a>. + </p> + <p> + Please choose the reverse proxy you're using. This is just so we can provide + you with a template later, if you already know how you're going to set yours + up don't worry too much about this. + </p> + <select defaultValue={defaultValue} onChange={e => setReverseProxy(e.target.value)} > + <option value={REVERSE_PROXY_TYPES.APACHE}>Apache</option> + <option value={REVERSE_PROXY_TYPES.CADDY}>Caddy</option> + <option value={REVERSE_PROXY_TYPES.HAPROXY}>HAProxy</option> + <option value={REVERSE_PROXY_TYPES.NGINX}>NGiNX</option> + <option value={REVERSE_PROXY_TYPES.OTHER}>Some other Reverse Proxy</option> + </select> + <div> + <button onClick={() => { + toggle(); + onClickReverseProxy(reverseProxy) + }}> + I already/will use a Reverse Proxy with TLS + </button> + </div> + </Tab> + <Tab eventKey={TLS_TYPES.ACME} title="ACME"> + <p> + ACME is a protocol that allows TLS certificates to be requested + automagically. Synapse supports ACME by requesting certs from + Let's Encrypt, which is one of the easiest ways to manage your + certificates. + </p> + <p> + If you wish to use ACME you will need access to port 80 which + usually requires root privileges. Do not run Synapse as root. Use + a Reverse Proxy or Authbind + </p> + <button onClick={() => { + toggle(); + onClickACME() + }}>Use ACME</button> + </Tab> + <Tab eventKey={TLS_TYPES.TLS} title="Provide your own TLS certs"> + <p> + Specify a path to or upload TLS certs for the domain. + </p> + <p>Please enter {certPathInvalid ? "a valid" : "the"} path to the cert</p> + <input + className={certPathInvalid ? style.invalidInput : undefined} + type="text" + placeholder="/path/to/your/cert.pem" + value={certPath ? certPath : undefined} + onChange={e => setCertPath(e.target.value)} + /> + + <p>Please enter {certKeyPathInvalid ? "a valid" : "the"} path to the cert's key</p> + <input + className={certKeyPathInvalid ? style.invalidInput : undefined} + type="text" + placeholder="/path/to/your/cert/key.tls.key" + value={certKeyPath ? certKeyPath : undefined} + onChange={e => setCertKeyPath(e.target.value)} + /> + + <button + disabled={certPath && certKeyPath ? undefined : true} + onClick={() => onClickCertPath(certPath, certKeyPath, toggle)} + >Use TLS Path</button> + + <h3>OR..</h3> + <h1>Upload a TLS cert</h1> + <p>Upload a cert file.</p> + <input type="file" name="cert" onChange={e => setCertFile(e.target.files[0])} /> + <p>Upload the cert's private key file.</p> + <input type="file" name="certkey" onChange={e => setCertKeyFile(e.target.files[0])} /> + <button disabled={certFile && certKeyFile ? undefined : true} onClick={() => onClickCertUpload(certFile, certKeyFile, toggle)}>Upload cert</button> + + </Tab> + </Tabs> + </Card.Body> + </Accordion.Collapse> + </Card> +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/UI.jsx b/synapse_topology/webui/src/js/components/UI.jsx new file mode 100644 index 0000000000..b5c3297adf --- /dev/null +++ b/synapse_topology/webui/src/js/components/UI.jsx @@ -0,0 +1,92 @@ +import React from 'react'; + +import style from '../../scss/main.scss'; + +import Accordion from 'react-bootstrap/Accordion'; +import Card from 'react-bootstrap/Card'; + +import { + SETUP_INTRO_UI, + SERVER_NAME_UI, + STATS_REPORT_UI, + KEY_EXPORT_UI, + DELEGATION_OPTIONS_UI, + TLS_UI, + PORT_SELECTION_UI, + REVERSE_PROXY_TEMPLATE_UI, + LOADING_UI, + ERROR_UI, + DELEGATION_TEMPLATE_UI, + DATABASE_UI, + COMPLETE_UI, + SETUP_ORDER, +} from '../reducers/ui_constants'; + +import Error from './Error'; +import Loading from './Loading'; + +import IntroUi from '../containers/BaseIntro'; +import ServerName from '../containers/ServerName'; +import StatsReporter from '../containers/StatsReporter'; +import ExportKeys from '../containers/ExportKeys'; +import DelegationOptions from '../containers/DelegationOptions'; +import TLS from '../containers/TLS'; +import PortSelection from '../containers/PortSelection'; +import ReverseProxySampleConfig from '../containers/ReverseProxySampleConfig'; +import DelegationSampleConfig from '../containers/DelegationSampleConfig'; +import Database from '../containers/Database'; +import ConfigSelector from './ConfigSelector'; +import CompleteSetup from '../containers/CompleteSetup'; + +const block_mapping = ui_block => { + console.log(`fetching ${ui_block}`) + switch (ui_block) { + case LOADING_UI: + return <Loading key={ui_block} /> + case ERROR_UI: + return <Error key={ui_block} /> + case SETUP_INTRO_UI: + return < IntroUi key={ui_block} /> + case SERVER_NAME_UI: + return <ServerName key={ui_block} /> + case STATS_REPORT_UI: + return <StatsReporter key={ui_block} /> + case KEY_EXPORT_UI: + return <ExportKeys key={ui_block} /> + case DELEGATION_OPTIONS_UI: + return <DelegationOptions key={ui_block} /> + case TLS_UI: + return <TLS key={ui_block} /> + case PORT_SELECTION_UI: + return <PortSelection key={ui_block} /> + case REVERSE_PROXY_TEMPLATE_UI: + return <ReverseProxySampleConfig key={ui_block} /> + case DELEGATION_TEMPLATE_UI: + return <DelegationSampleConfig key={ui_block} /> + case DATABASE_UI: + return <Database key={ui_block} /> + case COMPLETE_UI: + return <CompleteSetup key={ui_block} /> + default: + return <h1>how did i get here?</h1> + } +} + +export default ({ setup_ui, config_ui, base_config }) => { + + if (!base_config.base_config_checked) { + return <Loading /> + } + + if (base_config.setup_done) { + console.log(`switching to ui ${config_ui}`); + return <ConfigSelector></ConfigSelector> + } + + if (!base_config.setup_done) { + console.log(setup_ui); + return <Accordion defaultActiveKey="0"> + {SETUP_ORDER.map(block_mapping)} + </Accordion > + } +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/WalkThrough.jsx b/synapse_topology/webui/src/js/components/WalkThrough.jsx new file mode 100644 index 0000000000..f353e5c477 --- /dev/null +++ b/synapse_topology/webui/src/js/components/WalkThrough.jsx @@ -0,0 +1,6 @@ +import React from 'react'; + +import ButtonDisplay from './ButtonDisplay'; + +export default ({ children }) => + <div>{children}</div> \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/AccordionToggle.js b/synapse_topology/webui/src/js/containers/AccordionToggle.js new file mode 100644 index 0000000000..95816f2679 --- /dev/null +++ b/synapse_topology/webui/src/js/containers/AccordionToggle.js @@ -0,0 +1,18 @@ +import { connect } from 'react-redux'; + +import AccordionToggle from '../components/AccordionToggle'; + +const mapStateToProps = (state, { eventKey, as, children }) => ({ + active: state.setup_ui.active_blocks.includes(eventKey), + eventKey, + as, + children, +}); + +const mapDispathToProps = (dispatch) => ({ +}); + +export default connect( + mapStateToProps, + mapDispathToProps +)(AccordionToggle); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/BaseIntro.js b/synapse_topology/webui/src/js/containers/BaseIntro.js new file mode 100644 index 0000000000..3095fec0a2 --- /dev/null +++ b/synapse_topology/webui/src/js/containers/BaseIntro.js @@ -0,0 +1,18 @@ +import { connect } from 'react-redux'; + +import BaseIntro from '../components/BaseIntro'; + +import { advance_ui } from '../actions'; + +const mapStateToProps = (state, ownProps) => ({ + +}); + +const mapDispathToProps = (dispatch) => ({ + onClick: () => dispatch(advance_ui()) +}); + +export default connect( + null, + mapDispathToProps +)(BaseIntro); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/CompleteSetup.js b/synapse_topology/webui/src/js/containers/CompleteSetup.js new file mode 100644 index 0000000000..7c926b4f74 --- /dev/null +++ b/synapse_topology/webui/src/js/containers/CompleteSetup.js @@ -0,0 +1,21 @@ +import { connect } from 'react-redux'; + +import CompleteSetup from '../components/CompleteSetup'; +import { write_config } from '../actions'; + +const mapStateToProps = (state) => ({ + tlsType: state.base_config.tls, + delegationType: state.base_config.delegation_type, +}); + + +const mapDispatchToProps = (dispatch) => ({ + onClick: () => { + dispatch(write_config()) + }, +}); + +export default connect( + mapStateToProps, + mapDispatchToProps, +)(CompleteSetup); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/ContentWrapper.js b/synapse_topology/webui/src/js/containers/ContentWrapper.js new file mode 100644 index 0000000000..47ebcadb21 --- /dev/null +++ b/synapse_topology/webui/src/js/containers/ContentWrapper.js @@ -0,0 +1,16 @@ +import { connect } from 'react-redux'; + +import ContentWrapper from '../components/ContentWrapper'; + +const mapStateToProps = (state, { children }) => ({ + servername: state.base_config.servername, + children, +}) + + +const mapDispatchToProps = (dispatch) => ({ +}); + +export default connect( + mapStateToProps +)(ContentWrapper); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/Database.js b/synapse_topology/webui/src/js/containers/Database.js new file mode 100644 index 0000000000..e590831405 --- /dev/null +++ b/synapse_topology/webui/src/js/containers/Database.js @@ -0,0 +1,20 @@ +import { connect } from 'react-redux'; + +import Database from '../components/Database'; +import { set_database, advance_ui } from '../actions'; + +const mapStateToProps = (state) => { +} + + +const mapDispatchToProps = (dispatch) => ({ + onClick: database => { + dispatch(set_database(database)); + dispatch(advance_ui()); + } +}); + +export default connect( + null, + mapDispatchToProps, +)(Database); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/DelegationOptions.js b/synapse_topology/webui/src/js/containers/DelegationOptions.js new file mode 100644 index 0000000000..ce5855969e --- /dev/null +++ b/synapse_topology/webui/src/js/containers/DelegationOptions.js @@ -0,0 +1,31 @@ +import { connect } from 'react-redux'; + +import DelegationOptions from '../components/DelegationOptions'; +import { set_delegation, advance_ui, set_delegation_servername, set_delegation_ports } from '../actions'; +import { DELEGATION_TYPES } from '../actions/constants'; + +const mapStateToProps = (state, { children }) => { + return { + servername: state.base_config.servername, + } +} + + +const mapDispatchToProps = (dispatch) => ({ + onClick: (type, servername, fedPort, clientPort) => { + dispatch(advance_ui()); + dispatch(set_delegation(type)); + dispatch(set_delegation_servername(servername)); + dispatch(set_delegation_ports(fedPort, clientPort)); + }, + + skip: () => { + dispatch(advance_ui()); + dispatch(set_delegation(DELEGATION_TYPES.LOCAL)); + } +}); + +export default connect( + mapStateToProps, + mapDispatchToProps, +)(DelegationOptions); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/DelegationSampleConfig.js b/synapse_topology/webui/src/js/containers/DelegationSampleConfig.js new file mode 100644 index 0000000000..82deabef2f --- /dev/null +++ b/synapse_topology/webui/src/js/containers/DelegationSampleConfig.js @@ -0,0 +1,56 @@ +import { connect } from 'react-redux'; + +import DelegationSampleConfig from '../components/DelegationSampleConfig'; + +import { advance_ui } from '../actions'; + +import DNSConfig from '../templates/dns-srv'; +import FedWellKnownConfig from '../templates/federation-well-known' +import ClientWellKnownConfig from '../templates/client-well-known' +import { DELEGATION_TYPES } from '../actions/constants'; + +// synapseServerName: state.base_config.delegation_server_name ? state.base_config.delegation_server_name : state.base_config.servername, + +const serverConfig = state => { + if (state.delegation_type == DELEGATION_TYPES.DNS) { + return undefined; + } else { + return FedWellKnownConfig({ + synapseServerName: state.delegation_servername, + delegationSynapsePort: state.delegation_federation_port ? state.delegation_federation_port : 8448, + }); + } +} + +const clientConfig = state => { + if (state.delegation_type == DELEGATION_TYPES.WELL_KNOWN) { + return ClientWellKnownConfig({ + synapseServerName: state.delegation_servername, + delegationClientPort: state.delegation_client_port ? state.delegation_client_port : 443, + }); + } else { + return DNSConfig({ + serverName: state.servername, + synapseServerName: state.delegation_servername, + delegationClientPort: state.delegation_client_port ? state.delegation_client_port : 443, + }) + } +} + +const mapStateToProps = state => ({ + delegationType: state.base_config.delegation_type, + serverConfig: serverConfig(state.base_config), + clientConfig: clientConfig(state.base_config), + serverConfigFileName: `${state.base_config.servername}_delegation.conf`, + clientConfigFileName: `${state.base_config.servername}_client_delegation.conf`, + serverName: state.base_config.servername, +}); + +const mapDispatchToProps = dispatch => ({ + onClick: () => dispatch(advance_ui()), +}); + +export default connect( + mapStateToProps, + mapDispatchToProps +)(DelegationSampleConfig); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/ExportKeys.js b/synapse_topology/webui/src/js/containers/ExportKeys.js new file mode 100644 index 0000000000..095d63b644 --- /dev/null +++ b/synapse_topology/webui/src/js/containers/ExportKeys.js @@ -0,0 +1,23 @@ +import { connect } from 'react-redux'; + +import ExportKeys from '../components/ExportKeys'; + +import { advance_ui } from '../actions'; + +const mapStateToProps = (state, ownProps) => { + const secret_key_loaded = state.base_config.secret_key_loaded; + const secret_key = state.base_config.secret_key; + return { + secret_key_loaded, + secret_key, + } +}; + +const mapDispatchToProps = (dispatch) => ({ + onClick: () => dispatch(advance_ui()) +}); + +export default connect( + mapStateToProps, + mapDispatchToProps +)(ExportKeys); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/PortSelection.js b/synapse_topology/webui/src/js/containers/PortSelection.js new file mode 100644 index 0000000000..93c3ac7f89 --- /dev/null +++ b/synapse_topology/webui/src/js/containers/PortSelection.js @@ -0,0 +1,44 @@ +import { connect } from 'react-redux'; + +import PortSelection from '../components/PortSelection'; + +import { set_synapse_ports } from '../actions'; +import { TLS_TYPES } from '../actions/constants'; + +const defaultFedPort = state => { + console.log(state) + if (state.tls == TLS_TYPES.REVERSE_PROXY) { + return 8008; + } + + return state.delegation_federation_port ? state.delegation_federation_port : 8448; +} + +const defaultClientPort = state => { + if (state.tls == TLS_TYPES.REVERSE_PROXY) { + return 8008; + } + + return state.delegation_federation_port ? state.delegation_federation_port : 443; +} + +const mapStateToProps = ({ base_config }) => ({ + servername: base_config.servername, + verifyingPorts: base_config.verifying_ports, + fedPortInUse: base_config.synapse_federation_port_free != undefined ? !base_config.synapse_federation_port_free : false, + clientPortInUse: base_config.synapse_client_port_free != undefined ? !base_config.synapse_client_port_free : false, + canChangePorts: base_config.tls == TLS_TYPES.REVERSE_PROXY, + defaultFedPort: defaultFedPort(base_config), + defaultClientPort: defaultClientPort(base_config), +}); + +const mapDispathToProps = (dispatch) => ({ + onClick: (fedPort, clientPort, callback) => { + dispatch(set_synapse_ports(fedPort, clientPort, callback)); + } +}); + +export default connect( + mapStateToProps, + mapDispathToProps +)(PortSelection); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/ReverseProxySampleConfig.js b/synapse_topology/webui/src/js/containers/ReverseProxySampleConfig.js new file mode 100644 index 0000000000..4c6bb94eb0 --- /dev/null +++ b/synapse_topology/webui/src/js/containers/ReverseProxySampleConfig.js @@ -0,0 +1,47 @@ +import { connect } from 'react-redux'; + +import ReverseProxySampleConfig from '../components/ReverseProxySampleConfig'; + +import { advance_ui } from '../actions'; +import { REVERSE_PROXY_TYPES } from '../actions/constants'; + +import apacheConfig from '../templates/apache'; +import caddyConfig from '../templates/caddy'; +import haproxyConfig from '../templates/haproxy'; +import nginxConfig from '../templates/nginx'; + +const sampleConfig = reverseProxyType => { + switch (reverseProxyType) { + case REVERSE_PROXY_TYPES.APACHE: + return apacheConfig; + case REVERSE_PROXY_TYPES.CADDY: + return caddyConfig; + case REVERSE_PROXY_TYPES.HAPROXY: + return haproxyConfig; + case REVERSE_PROXY_TYPES.NGINX: + return nginxConfig; + case REVERSE_PROXY_TYPES.OTHER: + return otherConfig; + } +} + +const mapStateToProps = state => ({ + proxyType: state.base_config.reverse_proxy, + sampleConfig: sampleConfig(state.base_config.reverse_proxy)({ + delegationFedPort: state.base_config.delegation_federation_port ? state.base_config.delegation_federation_port : 8448, + delegationClientPort: state.base_config.delegation_client_port ? state.base_config.delegation_client_port : 443, + fedPort: state.base_config.synapse_federation_port, + clientPort: state.base_config.synapse_client_port, + synapseServerName: state.base_config.delegation_server_name ? state.base_config.delegation_server_name : state.base_config.servername, + }), + fileName: "synapse_reverse_proxy.conf", +}); + +const mapDispatchToProps = dispatch => ({ + onClick: () => dispatch(advance_ui()), +}); + +export default connect( + mapStateToProps, + mapDispatchToProps +)(ReverseProxySampleConfig); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/ServerName.js b/synapse_topology/webui/src/js/containers/ServerName.js new file mode 100644 index 0000000000..b7fa07982b --- /dev/null +++ b/synapse_topology/webui/src/js/containers/ServerName.js @@ -0,0 +1,21 @@ +import { connect } from 'react-redux'; + +import ServerName from '../components/ServerName'; + +import { advance_ui, set_servername } from '../actions'; + +const mapStateToProps = (state, ownProps) => ({ + +}); + +const mapDispathToProps = (dispatch) => ({ + onClick: servername => { + dispatch(advance_ui()); + dispatch(set_servername(servername)); + } +}); + +export default connect( + null, + mapDispathToProps +)(ServerName); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/StatsReporter.js b/synapse_topology/webui/src/js/containers/StatsReporter.js new file mode 100644 index 0000000000..2ff9fd64e0 --- /dev/null +++ b/synapse_topology/webui/src/js/containers/StatsReporter.js @@ -0,0 +1,22 @@ +import { connect } from 'react-redux'; + +import StatsReporter from '../components/StatsReporter'; + +import { advance_ui, set_stats, generate_secret_keys } from '../actions'; + +const mapStateToProps = (state, ownProps) => ({ + +}); + +const mapDispathToProps = (dispatch) => ({ + onClick: consent => { + dispatch(advance_ui()); + dispatch(set_stats(consent)); + dispatch(generate_secret_keys(consent)) + } +}); + +export default connect( + null, + mapDispathToProps +)(StatsReporter); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/TLS.js b/synapse_topology/webui/src/js/containers/TLS.js new file mode 100644 index 0000000000..cca3f1fa94 --- /dev/null +++ b/synapse_topology/webui/src/js/containers/TLS.js @@ -0,0 +1,38 @@ +import { connect } from 'react-redux'; + +import TLS from '../components/TLS'; + +import { advance_ui, set_tls, set_tls_cert_paths, set_tls_cert_files, set_reverse_proxy } from '../actions'; + +import { TLS_TYPES } from '../actions/constants'; + +const mapStateToProps = (state, ownProps) => ({ + testingCertPaths: state.base_config.testing_cert_paths, + uploadingCertPaths: state.base_config.uploading_certs, + certPathInvalid: state.base_config.cert_path_invalid, + certKeyPathInvalid: state.base_config.cert_key_path_invalid, +}); + +const mapDispathToProps = (dispatch) => ({ + onClickACME: () => { + dispatch(advance_ui(TLS_TYPES.ACME)); + dispatch(set_tls(TLS_TYPES.ACME)); + }, + onClickReverseProxy: proxy_type => { + dispatch(advance_ui()); + dispatch(set_tls(TLS_TYPES.REVERSE_PROXY)) + dispatch(set_reverse_proxy(proxy_type)) + }, + onClickCertPath: (cert_path, cert_key_path, callback) => { + dispatch(set_tls_cert_paths(cert_path, cert_key_path, callback)); + }, + onClickCertUpload: (tls_cert_file, tls_key_file, callback) => { + dispatch(set_tls_cert_files(tls_cert_file, tls_key_file)); + callback(); + }, +}); + +export default connect( + null, + mapDispathToProps +)(TLS) \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/UI.js b/synapse_topology/webui/src/js/containers/UI.js new file mode 100644 index 0000000000..15acab3953 --- /dev/null +++ b/synapse_topology/webui/src/js/containers/UI.js @@ -0,0 +1,18 @@ +import { connect } from 'react-redux'; +import UI from '../components/UI'; + +const mapStateToProps = ({ setup_done, setup_ui, config_ui, base_config }) => ({ + setup_done, + setup_ui, + config_ui, + base_config, +}) + + +const mapDispathToProps = (dispatch, ownProps) => ({ + +}) + +export default connect( + mapStateToProps, +)(UI) \ No newline at end of file diff --git a/synapse_topology/webui/src/js/index.jsx b/synapse_topology/webui/src/js/index.jsx new file mode 100644 index 0000000000..e576539c7c --- /dev/null +++ b/synapse_topology/webui/src/js/index.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { render } from 'react-dom'; +import { Provider } from 'react-redux'; +import { createStore, applyMiddleware } from 'redux' +import thunk from 'redux-thunk'; +import rootReducer from './reducers'; +import UI from './containers/UI'; +import style from '../scss/main.scss'; +import logo from '../fonts/matrix-logo.svg'; + +import { startup } from './actions'; + +const store = createStore( + rootReducer, + applyMiddleware(thunk), + //+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() +); + +store.dispatch(startup()); + +render( + <Provider store={store}> + {/* <img className={style.logo} src={logo} /> */} + <UI /> + </Provider>, + document.body, +); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/base-config-reducer.js b/synapse_topology/webui/src/js/reducers/base-config-reducer.js new file mode 100644 index 0000000000..fc7c9b0027 --- /dev/null +++ b/synapse_topology/webui/src/js/reducers/base-config-reducer.js @@ -0,0 +1,136 @@ +import { + SET_SERVERNAME, + SET_STATS, + SET_SECRET_KEY, + GETTING_SECRET_KEY, + SET_DELEGATION, + SET_DELEGATION_SERVERNAME, + SET_REVERSE_PROXY, + SET_TLS, + TESTING_TLS_CERT_PATHS, + SET_TLS_CERT_PATHS, + SET_TLS_CERT_PATHS_VALIDITY, + SET_TLS_CERT_FILES, + UPLOADING_TLS_CERT_PATHS, + TESTING_SYNAPSE_PORTS, + SET_SYNAPSE_PORTS, + SET_SYNAPSE_PORTS_FREE, + SET_DATABASE, + SET_CONFIG_DIR, + BASE_CONFIG_CHECKED, +} from "../actions/types"; + +export default (state, action) => { + switch (action.type) { + case BASE_CONFIG_CHECKED: + return { + ...state, + base_config_checked: true, + setup_done: action.setup_done, + } + case SET_SERVERNAME: + return { + ...state, + servername: action.servername, + } + case SET_STATS: + return { + ...state, + report_stats: action.consent, + } + case GETTING_SECRET_KEY: + return { + ...state, + secret_key_loaded: false, + } + case SET_SECRET_KEY: + return { + ...state, + secret_key_loaded: true, + secret_key: action.key, + }; + case SET_DELEGATION: + return { + ...state, + delegation_type: action.delegation_type, + } + case SET_DELEGATION_SERVERNAME: + return { + ...state, + delegation_servername: action.servername, + } + case SET_DELEGATION_SERVERNAME: + return { + ...state, + delegation_federation_port: action.federation_port, + delegation_client_port: action.client_port, + } + case SET_REVERSE_PROXY: + return { + ...state, + reverse_proxy: action.proxy_type, + } + case SET_TLS: + return { + ...state, + tls: action.tls_type, + } + case TESTING_TLS_CERT_PATHS: + return { + ...state, + testing_cert_paths: action.testing, + } + case SET_TLS_CERT_PATHS_VALIDITY: + return { + ...state, + cert_path_invalid: action.cert_path_invalid, + cert_key_path_invalid: action.cert_key_path_invalid, + } + case SET_TLS_CERT_PATHS: + return { + ...state, + tls_cert_path: action.cert_path, + tls_cert_key_path: action.cert_key_path, + } + case SET_TLS_CERT_FILES: + return { + ...state, + tls_cert_file: action.tls_cert_file, + tls_cert_key_file: action.tls_cert_key_file, + } + case UPLOADING_TLS_CERT_PATHS: + return { + ...state, + uploading_certs: action.uploading, + } + case TESTING_SYNAPSE_PORTS: + return { + ...state, + verifying_ports: action.verifying, + } + case SET_SYNAPSE_PORTS: + return { + ...state, + synapse_federation_port: action.federation_port, + synapse_client_port: action.client_port, + } + case SET_SYNAPSE_PORTS_FREE: + return { + ...state, + synapse_federation_port_free: action.synapse_federation_port_free, + synapse_client_port_free: action.synapse_client_port_free, + } + case SET_DATABASE: + return { + ...state, + database: action.database, + } + case SET_CONFIG_DIR: + return { + ...state, + config_dir: action.config_dir, + } + default: + return state; + } +}; \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/config-ui-reducer.js b/synapse_topology/webui/src/js/reducers/config-ui-reducer.js new file mode 100644 index 0000000000..d9a268c681 --- /dev/null +++ b/synapse_topology/webui/src/js/reducers/config-ui-reducer.js @@ -0,0 +1,13 @@ +const ADVANCED_CONFIG_UI_COMPONENTS = { + CONFIG_SELECTION_UI: "config_selection_ui" +} + +export default ({ config_ui, base_config }, action) => { + if (!base_config.base_config_checked) { + return config_ui; + } + if (!base_config.setup_done) { + return config_ui; + } + return config_ui; +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/index.js b/synapse_topology/webui/src/js/reducers/index.js new file mode 100644 index 0000000000..4c31d3931b --- /dev/null +++ b/synapse_topology/webui/src/js/reducers/index.js @@ -0,0 +1,22 @@ +import base_config_reducer from './base-config-reducer'; + +import config_ui_reducer from './config-ui-reducer'; +import setup_ui_reducer from './setup-ui-reducer'; + +import { SETUP_INTRO_UI, SERVER_NAME_UI } from './ui_constants'; + + +export default (state = { + setup_ui: { + active_blocks: [SETUP_INTRO_UI, SERVER_NAME_UI], + }, + config_ui: { + }, + base_config: { + base_config_checked: false, + } +}, action) => ({ + config_ui: config_ui_reducer(state, action), + setup_ui: setup_ui_reducer(state, action), + base_config: base_config_reducer(state.base_config, action) +}); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/setup-ui-reducer.js b/synapse_topology/webui/src/js/reducers/setup-ui-reducer.js new file mode 100644 index 0000000000..720f85ebed --- /dev/null +++ b/synapse_topology/webui/src/js/reducers/setup-ui-reducer.js @@ -0,0 +1,30 @@ +import { ADVANCE_UI, BACK_UI, BASE_CONFIG_CHECKED } from '../actions/types'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle' +import { + SETUP_ORDER, +} from './ui_constants'; + + +const new_active_blocks = active_blocks => { + return SETUP_ORDER.slice(0, active_blocks.length + 1) +} + +export default ({ setup_ui, base_config }, action) => { + if (!base_config.base_config_checked) { + return setup_ui; + } + if (base_config.setup_done) { + return setup_ui; + } + switch (action.type) { + case ADVANCE_UI: + return { + active_blocks: new_active_blocks(setup_ui.active_blocks), + } + case BACK_UI: + default: + return setup_ui; + } +} + +export const next_ui = current => SETUP_ORDER[SETUP_ORDER.lastIndexOf(current) + 1] \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/state.js b/synapse_topology/webui/src/js/reducers/state.js new file mode 100644 index 0000000000..398887221c --- /dev/null +++ b/synapse_topology/webui/src/js/reducers/state.js @@ -0,0 +1,38 @@ +const state = { + setup_ui: { + active_blocks: ["block1"], + }, + config_ui: { + + }, + base_config: { + setup_done: true, + base_config_checked: false, + servername: "server_name", + report_stats: false, + getting_secret_key: false, + secret_key: "asdfsadf", + delegation_type: "local|well_known|DNS_SRV", + delegation_server_name: "name", + delegation_federation_port: "\"\"|325", + delegation_client_port: "\"\"|325", + reverse_proxy: "nginx|caddy|apache|haproxy|other|none", + tls: "acme|tls|reverseproxy", + testing_cert_paths: true, + uploading_certs: true, + cert_path_invalid: true, + cert_key_path_invalid: true, + tls_cert_path: "sadfaf", + tls_cert_key_path: "sdfasdf", + tls_cert_file: "sadfa;dlf;sad;fkla;sdlfjkas;dlfkjas;dflkja;sdfkljadf ------", + tls_cert_key_file: "sadfa;dlf;sad;fkla;sdlfjkas;dlfkjas;dflkja;sdfkljadf ------", + tls_path: "sdasfaf/a/fdasfd/a/fasd/", + verifying_ports: true, + synapse_federation_port_free: true, + synapse_client_port_free: true, + synapse_federation_port: 1234, + synapse_client_port: 1234, + database: "sqlite3|postgres", + config_dir: "sadfasdf", + } +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/ui_constants.js b/synapse_topology/webui/src/js/reducers/ui_constants.js new file mode 100644 index 0000000000..911ff5769e --- /dev/null +++ b/synapse_topology/webui/src/js/reducers/ui_constants.js @@ -0,0 +1,35 @@ +// Setup +export const SETUP_INTRO_UI = "setup_intro_ui"; +export const SERVER_NAME_UI = "server_name_ui"; +export const STATS_REPORT_UI = "stats_report_ui"; +export const KEY_EXPORT_UI = "key_export_ui"; +export const DELEGATION_OPTIONS_UI = "delegation_options_ui"; +export const TLS_UI = "tls_ui"; +export const PORT_SELECTION_UI = "port_selection_ui"; +export const REVERSE_PROXY_TEMPLATE_UI = "reverse_proxy_tamplate_ui"; +export const DELEGATION_TEMPLATE_UI = "delegation_tamplate_ui"; +export const DATABASE_UI = "database_ui"; +export const COMPLETE_UI = "complete_ui"; + +// Setup order +export const SETUP_ORDER = [ + SETUP_INTRO_UI, + SERVER_NAME_UI, + STATS_REPORT_UI, + KEY_EXPORT_UI, + DELEGATION_OPTIONS_UI, + TLS_UI, + PORT_SELECTION_UI, + DATABASE_UI, + COMPLETE_UI +]; + + +// Config +export const CONFIG_SELECTION_UI = "config_selection_ui"; + +// Loading screen: +export const LOADING_UI = "loading_ui"; + +// Error screen: +export const ERROR_UI = "error_ui"; diff --git a/synapse_topology/webui/src/js/templates/apache.js b/synapse_topology/webui/src/js/templates/apache.js new file mode 100644 index 0000000000..1c9a489fe3 --- /dev/null +++ b/synapse_topology/webui/src/js/templates/apache.js @@ -0,0 +1,25 @@ +export default ({ + delegationFedPort, + delegationClientPort, + fedPort, + clientPort, + synapseServerName, +}) => ` +<VirtualHost *:${delegationClientPort}> + SSLEngine on + ServerName ${synapseServerName}; + + AllowEncodedSlashes NoDecode + ProxyPass /_matrix http://127.0.0.1:${clientPort}/_matrix nocanon + ProxyPassReverse /_matrix http://127.0.0.1:${clientPort}/_matrix +</VirtualHost> + +<VirtualHost *:${delegationFedPort}> + SSLEngine on + ServerName ${synapseServerName}; + + AllowEncodedSlashes NoDecode + ProxyPass /_matrix http://127.0.0.1:${fedPort}/_matrix nocanon + ProxyPassReverse /_matrix http://127.0.0.1:${fedPort}/_matrix +</VirtualHost> +` \ No newline at end of file diff --git a/synapse_topology/webui/src/js/templates/caddy.js b/synapse_topology/webui/src/js/templates/caddy.js new file mode 100644 index 0000000000..d073358811 --- /dev/null +++ b/synapse_topology/webui/src/js/templates/caddy.js @@ -0,0 +1,17 @@ +export default ({ + delegationFedPort, + delegationClientPort, + fedPort, + clientPort, + synapseServerName, +}) => `${synapseServerName}:${delegationClientPort} { + proxy /_matrix http://localhost:${clientPort} { + transparent + } +} + +${synapseServerName}:${delegationFedPort} { + proxy / http://localhost:${fedPort} { + transparent + } +}` \ No newline at end of file diff --git a/synapse_topology/webui/src/js/templates/client-well-known.js b/synapse_topology/webui/src/js/templates/client-well-known.js new file mode 100644 index 0000000000..2919695eab --- /dev/null +++ b/synapse_topology/webui/src/js/templates/client-well-known.js @@ -0,0 +1,12 @@ +export default ({ + synapseServerName, + delegationClientPort, +}) => `{ + "m.homeserver": { + "base_url": "https://${synapseServerName}${delegationClientPort ? `:${delegationClientPort}` : ""}" + }, +}` +// TODO: Maybe include this? +// "m.identity_server": { +// "base_url": "https://identity.example.com" +// }, \ No newline at end of file diff --git a/synapse_topology/webui/src/js/templates/dns-srv.js b/synapse_topology/webui/src/js/templates/dns-srv.js new file mode 100644 index 0000000000..40826d6eb0 --- /dev/null +++ b/synapse_topology/webui/src/js/templates/dns-srv.js @@ -0,0 +1,8 @@ +export default ({ + delegationFedPort, + delegationClientPort, + fedPort, + clientPort, + serverName, + synapseServerName, +}) => `_matrix._tcp.${serverName} 3600 IN SRV 10 5 ${delegationClientPort} ${synapseServerName}` \ No newline at end of file diff --git a/synapse_topology/webui/src/js/templates/federation-well-known.js b/synapse_topology/webui/src/js/templates/federation-well-known.js new file mode 100644 index 0000000000..39c9f15c0a --- /dev/null +++ b/synapse_topology/webui/src/js/templates/federation-well-known.js @@ -0,0 +1,6 @@ +export default ({ + synapseServerName, + delegationSynapsePort, +}) => `{ + "m.server": "${synapseServerName}:${delegationSynapsePort}" +}` \ No newline at end of file diff --git a/synapse_topology/webui/src/js/templates/haproxy.js b/synapse_topology/webui/src/js/templates/haproxy.js new file mode 100644 index 0000000000..25b9cf1734 --- /dev/null +++ b/synapse_topology/webui/src/js/templates/haproxy.js @@ -0,0 +1,44 @@ +export default ({ + delegationFedPort, + delegationClientPort, + fedPort, + clientPort, + synapseServerName, +}) => { + if (fedPort == clientPort) { + return `frontend https + bind :::${delegationClientPort} v4v6 ssl crt /etc/ssl/haproxy/ strict-sni alpn h2,http/1.1 + + # Matrix client traffic + acl matrix-host hdr(host) -i ${synapseServerName} + acl matrix-path path_beg /_matrix + + use_backend matrix if matrix-host matrix-path + +frontend matrix-federation + bind :::${delegationFedPort} v4v6 ssl crt /etc/ssl/haproxy/<your_tls_cert>.pem alpn h2,http/1.1 + default_backend matrix + +backend matrix + server matrix 127.0.0.1:${fedPort} +` + } else { + return `frontend https + bind:::${delegationClientPort} v4v6 ssl crt /etc/ssl/haproxy/ strict-sni alpn h2, http / 1.1 + +# Matrix client traffic +acl matrix-host hdr(host) -i ${synapseServerName} +acl matrix-path path_beg /_matrix + +use_backend matrix-client if matrix-host matrix-path + +frontend matrix - federation +bind::: ${delegationFedPort} v4v6 ssl crt /etc/ssl/haproxy/<your_tls_cert>.pem alpn h2,http/1.1 +default_backend matrix + +backend matrix + server matrix 127.0.0.1:${fedPort} + +backend matrix-client 127.0.0.1:${clientPort}` + } +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/templates/nginx.js b/synapse_topology/webui/src/js/templates/nginx.js new file mode 100644 index 0000000000..294f47baf7 --- /dev/null +++ b/synapse_topology/webui/src/js/templates/nginx.js @@ -0,0 +1,27 @@ +import React from 'react'; +export default ({ + delegationFedPort, + delegationClientPort, + fedPort, + clientPort, + synapseServerName, +}) => `listen {delegationClientPort} ssl; +listen [::]:${delegationClientPort} ssl; +server_name ${synapseServerName}; + + location /_matrix { + proxy_pass http://localhost:${clientPort}; + proxy_set_header X-Forwarded-For $remote_addr; + } +} + +server { + listen ${delegationFedPort} ssl default_server; + listen [::]:${delegationFedPort} ssl default_server; + server_name ${synapseServerName}; + + location / { + proxy_pass http://localhost:${fedPort}; + proxy_set_header X-Forwarded-For $remote_addr; + } +}` \ No newline at end of file diff --git a/synapse_topology/webui/src/js/utils/yaml.js b/synapse_topology/webui/src/js/utils/yaml.js new file mode 100644 index 0000000000..6b8dc5c6fb --- /dev/null +++ b/synapse_topology/webui/src/js/utils/yaml.js @@ -0,0 +1,117 @@ +import yaml from 'yaml'; +import { TLS_TYPES, REVERSE_PROXY_TYPES } from '../actions/constants'; +import { CONFIG_LOCK } from '../api/constants'; + +const listeners = config => { + const listeners = []; + if (config.tls == TLS_TYPES.TLS) { + listeners.push({ + port: config.synapse_federation_port, + tls: true, + bind_addresses: ['::1', '127.0.0.1'], + type: "http", + x_forwarded: true, + + resources: [{ + names: ["federation"], + compress: false, + }], + }); + } else { + listeners.push({ + port: config.synapse_federation_port, + tls: true, + type: "http", + + resources: [{ + names: ["federation"], + }], + }); + } + + if (config.synapse_client_port == config.synapse_federation_port) { + listeners[0].resources[0].names.push("client"); + } else if (config.tls == TLS_TYPES.TLS) { + listeners.push({ + port: config.synapse_client_port, + tls: true, + bind_addresses: ['::1', '127.0.0.1'], + type: "http", + x_forwarded: true, + + resources: [{ + names: ["client"], + compress: false, + }], + }); + } else { + listeners.push({ + port: config.synapse_client_port, + tls: true, + type: "http", + + resources: [{ + names: ["client"], + }], + }); + } + return { listeners: listeners }; +} + +const tls_paths = config => { + if (config.reverse_proxy == REVERSE_PROXY_TYPES.TLS) { + return { + tls_certificate_path: config.tls_cert_path, + tls_private_key_path: config.tls_cert_key_path, + } + } else if (config.reverser_proxy == REVERSE_PROXY_TYPES.ACME) { + return { + tls_certificate_path: config.config_dir + "/" + config.server_name + ".tls.cert", + tls_private_key_path: config.config_dir + "/" + config.server_name + ".tls.key", + } + } else { + return {} + } +} + +const acme = config => { + if (config.tls == TLS_TYPES.ACME) { + return { + acme: { + url: "https://acme-v01.api.letsencrypt.org/directory", + port: 80, + bind_addresses: ['::', '0.0.0.0'], + reprovision_threshold: 30, + domain: config.delegation_server_name ? config.delegation_server_name : servername, + account_key_file: config.config_dir + "/data/acme_account.key", + } + } + } else { + return {} + } +} + +const database = config => ({ + database: { + name: config.database, + args: config.config_dir + "/data/homeserver.db" + } +}) + +export const base_config_to_synapse_config = config => { + const conf = { + server_name: config.servername, + report_stats: config.report_stats, + log_config: config.config_dir + "/" + config.servername + ".log.config", + media_store_path: config.config_dir + "/data/media_store", + uploads_path: config.config_dir + "/data/uploads", + pid_file: config.config_dir + "/data/homeserver.pid", + ...listeners(config), + ...tls_paths(config), + ...acme(config), + ...database(config), + [CONFIG_LOCK]: true, + } + console.log(conf) + return conf +} diff --git a/synapse_topology/webui/src/scss/animations.scss b/synapse_topology/webui/src/scss/animations.scss new file mode 100644 index 0000000000..5f0f5aea53 --- /dev/null +++ b/synapse_topology/webui/src/scss/animations.scss @@ -0,0 +1,38 @@ +@mixin rippler { + position: relative; + overflow: hidden; + transform: translate3d(0, 0, 0); + + &:after { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); + background-repeat: no-repeat; + background-position: 50%; + transform: scale(10, 10); + opacity: 0; + transition: transform .5s, opacity 1s; + } + + &:active:after { + transform: scale(0, 0); + opacity: .3; + transition: 0s; + } +} + + +@mixin dropshadowed { + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + transition: all 0.3s cubic-bezier(.25,.8,.25,1); + + &:hover { + box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); + } +} diff --git a/synapse_topology/webui/src/scss/bootstrap.min.css b/synapse_topology/webui/src/scss/bootstrap.min.css new file mode 100644 index 0000000000..92e3fe8712 --- /dev/null +++ b/synapse_topology/webui/src/scss/bootstrap.min.css @@ -0,0 +1,7 @@ +/*! + * Bootstrap v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:80%;font-weight:400}.mark,mark{padding:.2em;background-color:#fcf8e3}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:90%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote-footer{display:block;font-size:80%;color:#6c757d}.blockquote-footer::before{content:"\2014\00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#6c757d}code{font-size:87.5%;color:#e83e8c;word-break:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:#212529}pre code{font-size:inherit;color:inherit;word-break:normal}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-first{-ms-flex-order:-1;order:-1}.order-last{-ms-flex-order:13;order:13}.order-0{-ms-flex-order:0;order:0}.order-1{-ms-flex-order:1;order:1}.order-2{-ms-flex-order:2;order:2}.order-3{-ms-flex-order:3;order:3}.order-4{-ms-flex-order:4;order:4}.order-5{-ms-flex-order:5;order:5}.order-6{-ms-flex-order:6;order:6}.order-7{-ms-flex-order:7;order:7}.order-8{-ms-flex-order:8;order:8}.order-9{-ms-flex-order:9;order:9}.order-10{-ms-flex-order:10;order:10}.order-11{-ms-flex-order:11;order:11}.order-12{-ms-flex-order:12;order:12}.offset-1{margin-left:8.333333%}.offset-2{margin-left:16.666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333333%}.offset-5{margin-left:41.666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333333%}.offset-8{margin-left:66.666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333333%}.offset-11{margin-left:91.666667%}@media (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-sm-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-sm-first{-ms-flex-order:-1;order:-1}.order-sm-last{-ms-flex-order:13;order:13}.order-sm-0{-ms-flex-order:0;order:0}.order-sm-1{-ms-flex-order:1;order:1}.order-sm-2{-ms-flex-order:2;order:2}.order-sm-3{-ms-flex-order:3;order:3}.order-sm-4{-ms-flex-order:4;order:4}.order-sm-5{-ms-flex-order:5;order:5}.order-sm-6{-ms-flex-order:6;order:6}.order-sm-7{-ms-flex-order:7;order:7}.order-sm-8{-ms-flex-order:8;order:8}.order-sm-9{-ms-flex-order:9;order:9}.order-sm-10{-ms-flex-order:10;order:10}.order-sm-11{-ms-flex-order:11;order:11}.order-sm-12{-ms-flex-order:12;order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-md-first{-ms-flex-order:-1;order:-1}.order-md-last{-ms-flex-order:13;order:13}.order-md-0{-ms-flex-order:0;order:0}.order-md-1{-ms-flex-order:1;order:1}.order-md-2{-ms-flex-order:2;order:2}.order-md-3{-ms-flex-order:3;order:3}.order-md-4{-ms-flex-order:4;order:4}.order-md-5{-ms-flex-order:5;order:5}.order-md-6{-ms-flex-order:6;order:6}.order-md-7{-ms-flex-order:7;order:7}.order-md-8{-ms-flex-order:8;order:8}.order-md-9{-ms-flex-order:9;order:9}.order-md-10{-ms-flex-order:10;order:10}.order-md-11{-ms-flex-order:11;order:11}.order-md-12{-ms-flex-order:12;order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.333333%}.offset-md-2{margin-left:16.666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.333333%}.offset-md-5{margin-left:41.666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.333333%}.offset-md-8{margin-left:66.666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.333333%}.offset-md-11{margin-left:91.666667%}}@media (min-width:992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-lg-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-lg-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-lg-first{-ms-flex-order:-1;order:-1}.order-lg-last{-ms-flex-order:13;order:13}.order-lg-0{-ms-flex-order:0;order:0}.order-lg-1{-ms-flex-order:1;order:1}.order-lg-2{-ms-flex-order:2;order:2}.order-lg-3{-ms-flex-order:3;order:3}.order-lg-4{-ms-flex-order:4;order:4}.order-lg-5{-ms-flex-order:5;order:5}.order-lg-6{-ms-flex-order:6;order:6}.order-lg-7{-ms-flex-order:7;order:7}.order-lg-8{-ms-flex-order:8;order:8}.order-lg-9{-ms-flex-order:9;order:9}.order-lg-10{-ms-flex-order:10;order:10}.order-lg-11{-ms-flex-order:11;order:11}.order-lg-12{-ms-flex-order:12;order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.333333%}.offset-lg-2{margin-left:16.666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.333333%}.offset-lg-5{margin-left:41.666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.333333%}.offset-lg-8{margin-left:66.666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.333333%}.offset-lg-11{margin-left:91.666667%}}@media (min-width:1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-xl-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-xl-first{-ms-flex-order:-1;order:-1}.order-xl-last{-ms-flex-order:13;order:13}.order-xl-0{-ms-flex-order:0;order:0}.order-xl-1{-ms-flex-order:1;order:1}.order-xl-2{-ms-flex-order:2;order:2}.order-xl-3{-ms-flex-order:3;order:3}.order-xl-4{-ms-flex-order:4;order:4}.order-xl-5{-ms-flex-order:5;order:5}.order-xl-6{-ms-flex-order:6;order:6}.order-xl-7{-ms-flex-order:7;order:7}.order-xl-8{-ms-flex-order:8;order:8}.order-xl-9{-ms-flex-order:9;order:9}.order-xl-10{-ms-flex-order:10;order:10}.order-xl-11{-ms-flex-order:11;order:11}.order-xl-12{-ms-flex-order:12;order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}}.table{width:100%;margin-bottom:1rem;color:#212529}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table tbody+tbody{border-top:2px solid #dee2e6}.table-sm td,.table-sm th{padding:.3rem}.table-bordered{border:1px solid #dee2e6}.table-bordered td,.table-bordered th{border:1px solid #dee2e6}.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th{border:0}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-hover tbody tr:hover{color:#212529;background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#b8daff}.table-primary tbody+tbody,.table-primary td,.table-primary th,.table-primary thead th{border-color:#7abaff}.table-hover .table-primary:hover{background-color:#9fcdff}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#9fcdff}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#d6d8db}.table-secondary tbody+tbody,.table-secondary td,.table-secondary th,.table-secondary thead th{border-color:#b3b7bb}.table-hover .table-secondary:hover{background-color:#c8cbcf}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#c8cbcf}.table-success,.table-success>td,.table-success>th{background-color:#c3e6cb}.table-success tbody+tbody,.table-success td,.table-success th,.table-success thead th{border-color:#8fd19e}.table-hover .table-success:hover{background-color:#b1dfbb}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#b1dfbb}.table-info,.table-info>td,.table-info>th{background-color:#bee5eb}.table-info tbody+tbody,.table-info td,.table-info th,.table-info thead th{border-color:#86cfda}.table-hover .table-info:hover{background-color:#abdde5}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#abdde5}.table-warning,.table-warning>td,.table-warning>th{background-color:#ffeeba}.table-warning tbody+tbody,.table-warning td,.table-warning th,.table-warning thead th{border-color:#ffdf7e}.table-hover .table-warning:hover{background-color:#ffe8a1}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffe8a1}.table-danger,.table-danger>td,.table-danger>th{background-color:#f5c6cb}.table-danger tbody+tbody,.table-danger td,.table-danger th,.table-danger thead th{border-color:#ed969e}.table-hover .table-danger:hover{background-color:#f1b0b7}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f1b0b7}.table-light,.table-light>td,.table-light>th{background-color:#fdfdfe}.table-light tbody+tbody,.table-light td,.table-light th,.table-light thead th{border-color:#fbfcfc}.table-hover .table-light:hover{background-color:#ececf6}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#ececf6}.table-dark,.table-dark>td,.table-dark>th{background-color:#c6c8ca}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#95999c}.table-hover .table-dark:hover{background-color:#b9bbbe}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#b9bbbe}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.table .thead-dark th{color:#fff;background-color:#343a40;border-color:#454d55}.table .thead-light th{color:#495057;background-color:#e9ecef;border-color:#dee2e6}.table-dark{color:#fff;background-color:#343a40}.table-dark td,.table-dark th,.table-dark thead th{border-color:#454d55}.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{color:#fff;background-color:rgba(255,255,255,.075)}@media (max-width:575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-sm>.table-bordered{border:0}}@media (max-width:767.98px){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-md>.table-bordered{border:0}}@media (max-width:991.98px){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-lg>.table-bordered{border:0}}@media (max-width:1199.98px){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive>.table-bordered{border:0}.form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.form-control::-webkit-input-placeholder{color:#6c757d;opacity:1}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control:-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}.form-control-file,.form-control-range{display:block;width:100%}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:1.25rem;line-height:1.5}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-bottom:calc(.25rem + 1px);font-size:.875rem;line-height:1.5}.form-control-plaintext{display:block;width:100%;padding-top:.375rem;padding-bottom:.375rem;margin-bottom:0;line-height:1.5;color:#212529;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{height:calc(1.5em + .5rem + 2px);padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.form-control-lg{height:calc(1.5em + 1rem + 2px);padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}select.form-control[multiple],select.form-control[size]{height:auto}textarea.form-control{height:auto}.form-group{margin-bottom:1rem}.form-text{display:block;margin-top:.25rem}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}.form-check{position:relative;display:block;padding-left:1.25rem}.form-check-input{position:absolute;margin-top:.3rem;margin-left:-1.25rem}.form-check-input:disabled~.form-check-label{color:#6c757d}.form-check-label{margin-bottom:0}.form-check-inline{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;padding-left:0;margin-right:.75rem}.form-check-inline .form-check-input{position:static;margin-top:0;margin-right:.3125rem;margin-left:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#28a745}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;line-height:1.5;color:#fff;background-color:rgba(40,167,69,.9);border-radius:.25rem}.form-control.is-valid,.was-validated .form-control:valid{border-color:#28a745;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center right calc(.375em + .1875rem);background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.form-control.is-valid~.valid-feedback,.form-control.is-valid~.valid-tooltip,.was-validated .form-control:valid~.valid-feedback,.was-validated .form-control:valid~.valid-tooltip{display:block}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.custom-select.is-valid,.was-validated .custom-select:valid{border-color:#28a745;padding-right:calc((1em + .75rem) * 3 / 4 + 1.75rem);background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px,url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem)}.custom-select.is-valid:focus,.was-validated .custom-select:valid:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.custom-select.is-valid~.valid-feedback,.custom-select.is-valid~.valid-tooltip,.was-validated .custom-select:valid~.valid-feedback,.was-validated .custom-select:valid~.valid-tooltip{display:block}.form-control-file.is-valid~.valid-feedback,.form-control-file.is-valid~.valid-tooltip,.was-validated .form-control-file:valid~.valid-feedback,.was-validated .form-control-file:valid~.valid-tooltip{display:block}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#28a745}.form-check-input.is-valid~.valid-feedback,.form-check-input.is-valid~.valid-tooltip,.was-validated .form-check-input:valid~.valid-feedback,.was-validated .form-check-input:valid~.valid-tooltip{display:block}.custom-control-input.is-valid~.custom-control-label,.was-validated .custom-control-input:valid~.custom-control-label{color:#28a745}.custom-control-input.is-valid~.custom-control-label::before,.was-validated .custom-control-input:valid~.custom-control-label::before{border-color:#28a745}.custom-control-input.is-valid~.valid-feedback,.custom-control-input.is-valid~.valid-tooltip,.was-validated .custom-control-input:valid~.valid-feedback,.was-validated .custom-control-input:valid~.valid-tooltip{display:block}.custom-control-input.is-valid:checked~.custom-control-label::before,.was-validated .custom-control-input:valid:checked~.custom-control-label::before{border-color:#34ce57;background-color:#34ce57}.custom-control-input.is-valid:focus~.custom-control-label::before,.was-validated .custom-control-input:valid:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.custom-control-input.is-valid:focus:not(:checked)~.custom-control-label::before,.was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label::before{border-color:#28a745}.custom-file-input.is-valid~.custom-file-label,.was-validated .custom-file-input:valid~.custom-file-label{border-color:#28a745}.custom-file-input.is-valid~.valid-feedback,.custom-file-input.is-valid~.valid-tooltip,.was-validated .custom-file-input:valid~.valid-feedback,.was-validated .custom-file-input:valid~.valid-tooltip{display:block}.custom-file-input.is-valid:focus~.custom-file-label,.was-validated .custom-file-input:valid:focus~.custom-file-label{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;line-height:1.5;color:#fff;background-color:rgba(220,53,69,.9);border-radius:.25rem}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#dc3545;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");background-repeat:no-repeat;background-position:center right calc(.375em + .1875rem);background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.form-control.is-invalid~.invalid-feedback,.form-control.is-invalid~.invalid-tooltip,.was-validated .form-control:invalid~.invalid-feedback,.was-validated .form-control:invalid~.invalid-tooltip{display:block}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.custom-select.is-invalid,.was-validated .custom-select:invalid{border-color:#dc3545;padding-right:calc((1em + .75rem) * 3 / 4 + 1.75rem);background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px,url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem)}.custom-select.is-invalid:focus,.was-validated .custom-select:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.custom-select.is-invalid~.invalid-feedback,.custom-select.is-invalid~.invalid-tooltip,.was-validated .custom-select:invalid~.invalid-feedback,.was-validated .custom-select:invalid~.invalid-tooltip{display:block}.form-control-file.is-invalid~.invalid-feedback,.form-control-file.is-invalid~.invalid-tooltip,.was-validated .form-control-file:invalid~.invalid-feedback,.was-validated .form-control-file:invalid~.invalid-tooltip{display:block}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#dc3545}.form-check-input.is-invalid~.invalid-feedback,.form-check-input.is-invalid~.invalid-tooltip,.was-validated .form-check-input:invalid~.invalid-feedback,.was-validated .form-check-input:invalid~.invalid-tooltip{display:block}.custom-control-input.is-invalid~.custom-control-label,.was-validated .custom-control-input:invalid~.custom-control-label{color:#dc3545}.custom-control-input.is-invalid~.custom-control-label::before,.was-validated .custom-control-input:invalid~.custom-control-label::before{border-color:#dc3545}.custom-control-input.is-invalid~.invalid-feedback,.custom-control-input.is-invalid~.invalid-tooltip,.was-validated .custom-control-input:invalid~.invalid-feedback,.was-validated .custom-control-input:invalid~.invalid-tooltip{display:block}.custom-control-input.is-invalid:checked~.custom-control-label::before,.was-validated .custom-control-input:invalid:checked~.custom-control-label::before{border-color:#e4606d;background-color:#e4606d}.custom-control-input.is-invalid:focus~.custom-control-label::before,.was-validated .custom-control-input:invalid:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.custom-control-input.is-invalid:focus:not(:checked)~.custom-control-label::before,.was-validated .custom-control-input:invalid:focus:not(:checked)~.custom-control-label::before{border-color:#dc3545}.custom-file-input.is-invalid~.custom-file-label,.was-validated .custom-file-input:invalid~.custom-file-label{border-color:#dc3545}.custom-file-input.is-invalid~.invalid-feedback,.custom-file-input.is-invalid~.invalid-tooltip,.was-validated .custom-file-input:invalid~.invalid-feedback,.was-validated .custom-file-input:invalid~.invalid-tooltip{display:block}.custom-file-input.is-invalid:focus~.custom-file-label,.was-validated .custom-file-input:invalid:focus~.custom-file-label{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.form-inline{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center}.form-inline .form-check{width:100%}@media (min-width:576px){.form-inline label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0}.form-inline .form-group{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;margin-bottom:0}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-plaintext{display:inline-block}.form-inline .custom-select,.form-inline .input-group{width:auto}.form-inline .form-check{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-left:0}.form-inline .form-check-input{position:relative;-ms-flex-negative:0;flex-shrink:0;margin-top:0;margin-right:.25rem;margin-left:0}.form-inline .custom-control{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.form-inline .custom-control-label{margin-bottom:0}}.btn{display:inline-block;font-weight:400;color:#212529;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529;text-decoration:none}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.btn.disabled,.btn:disabled{opacity:.65}a.btn.disabled,fieldset:disabled a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0062cc;border-color:#005cbf}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5a6268;border-color:#545b62}.btn-secondary.focus,.btn-secondary:focus{box-shadow:0 0 0 .2rem rgba(130,138,145,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#545b62;border-color:#4e555b}.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(130,138,145,.5)}.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}.btn-success.focus,.btn-success:focus{box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#1e7e34;border-color:#1c7430}.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}.btn-info{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-info.focus,.btn-info:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-warning{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#212529;background-color:#e0a800;border-color:#d39e00}.btn-warning.focus,.btn-warning:focus{box-shadow:0 0 0 .2rem rgba(222,170,12,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle{color:#212529;background-color:#d39e00;border-color:#c69500}.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(222,170,12,.5)}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#c82333;border-color:#bd2130}.btn-danger.focus,.btn-danger:focus{box-shadow:0 0 0 .2rem rgba(225,83,97,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#bd2130;border-color:#b21f2d}.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,83,97,.5)}.btn-light{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#212529;background-color:#e2e6ea;border-color:#dae0e5}.btn-light.focus,.btn-light:focus{box-shadow:0 0 0 .2rem rgba(216,217,219,.5)}.btn-light.disabled,.btn-light:disabled{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle{color:#212529;background-color:#dae0e5;border-color:#d3d9df}.btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(216,217,219,.5)}.btn-dark{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:hover{color:#fff;background-color:#23272b;border-color:#1d2124}.btn-dark.focus,.btn-dark:focus{box-shadow:0 0 0 .2rem rgba(82,88,93,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1d2124;border-color:#171a1d}.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(82,88,93,.5)}.btn-outline-primary{color:#007bff;border-color:#007bff}.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#007bff;background-color:transparent}.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-secondary{color:#6c757d;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-success{color:#28a745;border-color:#28a745}.btn-outline-success:hover{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#28a745;background-color:transparent}.btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success:not(:disabled):not(.disabled).active:focus,.btn-outline-success:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-info{color:#17a2b8;border-color:#17a2b8}.btn-outline-info:hover{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#17a2b8;background-color:transparent}.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-warning{color:#ffc107;border-color:#ffc107}.btn-outline-warning:hover{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-danger{color:#dc3545;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-light{color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:hover{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-dark{color:#343a40;border-color:#343a40}.btn-outline-dark:hover{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#343a40;background-color:transparent}.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-link{font-weight:400;color:#007bff;text-decoration:none}.btn-link:hover{color:#0056b3;text-decoration:underline}.btn-link.focus,.btn-link:focus{text-decoration:underline;box-shadow:none}.btn-link.disabled,.btn-link:disabled{color:#6c757d;pointer-events:none}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.dropdown,.dropleft,.dropright,.dropup{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu-left{right:auto;left:0}.dropdown-menu-right{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-left{right:auto;left:0}.dropdown-menu-sm-right{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-left{right:auto;left:0}.dropdown-menu-md-right{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-left{right:auto;left:0}.dropdown-menu-lg-right{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-left{right:auto;left:0}.dropdown-menu-xl-right{right:0;left:auto}}.dropup .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-menu{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropright .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropright .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropleft .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropleft .dropdown-toggle::after{display:none}.dropleft .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropleft .dropdown-toggle:empty::after{margin-left:0}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=top]{right:auto;bottom:auto}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#f8f9fa}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#6c757d;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1.5rem;color:#212529}.btn-group,.btn-group-vertical{position:relative;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.btn-group-vertical>.btn:hover,.btn-group>.btn:hover{z-index:1}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus{z-index:1}.btn-toolbar{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn-group:not(:first-child),.btn-group>.btn:not(:first-child){margin-left:-1px}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropright .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropleft .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;width:100%}.input-group>.custom-file,.input-group>.custom-select,.input-group>.form-control,.input-group>.form-control-plaintext{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;margin-bottom:0}.input-group>.custom-file+.custom-file,.input-group>.custom-file+.custom-select,.input-group>.custom-file+.form-control,.input-group>.custom-select+.custom-file,.input-group>.custom-select+.custom-select,.input-group>.custom-select+.form-control,.input-group>.form-control+.custom-file,.input-group>.form-control+.custom-select,.input-group>.form-control+.form-control,.input-group>.form-control-plaintext+.custom-file,.input-group>.form-control-plaintext+.custom-select,.input-group>.form-control-plaintext+.form-control{margin-left:-1px}.input-group>.custom-file .custom-file-input:focus~.custom-file-label,.input-group>.custom-select:focus,.input-group>.form-control:focus{z-index:3}.input-group>.custom-file .custom-file-input:focus{z-index:4}.input-group>.custom-select:not(:last-child),.input-group>.form-control:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.custom-select:not(:first-child),.input-group>.form-control:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.custom-file{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input-group>.custom-file:not(:last-child) .custom-file-label,.input-group>.custom-file:not(:last-child) .custom-file-label::after{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.custom-file:not(:first-child) .custom-file-label{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-append,.input-group-prepend{display:-ms-flexbox;display:flex}.input-group-append .btn,.input-group-prepend .btn{position:relative;z-index:2}.input-group-append .btn:focus,.input-group-prepend .btn:focus{z-index:3}.input-group-append .btn+.btn,.input-group-append .btn+.input-group-text,.input-group-append .input-group-text+.btn,.input-group-append .input-group-text+.input-group-text,.input-group-prepend .btn+.btn,.input-group-prepend .btn+.input-group-text,.input-group-prepend .input-group-text+.btn,.input-group-prepend .input-group-text+.input-group-text{margin-left:-1px}.input-group-prepend{margin-right:-1px}.input-group-append{margin-left:-1px}.input-group-text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:.375rem .75rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:.25rem}.input-group-text input[type=checkbox],.input-group-text input[type=radio]{margin-top:0}.input-group-lg>.custom-select,.input-group-lg>.form-control:not(textarea){height:calc(1.5em + 1rem + 2px)}.input-group-lg>.custom-select,.input-group-lg>.form-control,.input-group-lg>.input-group-append>.btn,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-prepend>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.input-group-sm>.custom-select,.input-group-sm>.form-control:not(textarea){height:calc(1.5em + .5rem + 2px)}.input-group-sm>.custom-select,.input-group-sm>.form-control,.input-group-sm>.input-group-append>.btn,.input-group-sm>.input-group-append>.input-group-text,.input-group-sm>.input-group-prepend>.btn,.input-group-sm>.input-group-prepend>.input-group-text{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.input-group-lg>.custom-select,.input-group-sm>.custom-select{padding-right:1.75rem}.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),.input-group>.input-group-append:not(:last-child)>.btn,.input-group>.input-group-append:not(:last-child)>.input-group-text,.input-group>.input-group-prepend>.btn,.input-group>.input-group-prepend>.input-group-text{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text,.input-group>.input-group-prepend:first-child>.btn:not(:first-child),.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),.input-group>.input-group-prepend:not(:first-child)>.btn,.input-group>.input-group-prepend:not(:first-child)>.input-group-text{border-top-left-radius:0;border-bottom-left-radius:0}.custom-control{position:relative;display:block;min-height:1.5rem;padding-left:1.5rem}.custom-control-inline{display:-ms-inline-flexbox;display:inline-flex;margin-right:1rem}.custom-control-input{position:absolute;z-index:-1;opacity:0}.custom-control-input:checked~.custom-control-label::before{color:#fff;border-color:#007bff;background-color:#007bff}.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:#80bdff}.custom-control-input:not(:disabled):active~.custom-control-label::before{color:#fff;background-color:#b3d7ff;border-color:#b3d7ff}.custom-control-input:disabled~.custom-control-label{color:#6c757d}.custom-control-input:disabled~.custom-control-label::before{background-color:#e9ecef}.custom-control-label{position:relative;margin-bottom:0;vertical-align:top}.custom-control-label::before{position:absolute;top:.25rem;left:-1.5rem;display:block;width:1rem;height:1rem;pointer-events:none;content:"";background-color:#fff;border:#adb5bd solid 1px}.custom-control-label::after{position:absolute;top:.25rem;left:-1.5rem;display:block;width:1rem;height:1rem;content:"";background:no-repeat 50%/50% 50%}.custom-checkbox .custom-control-label::before{border-radius:.25rem}.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e")}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before{border-color:#007bff;background-color:#007bff}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e")}.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-radio .custom-control-label::before{border-radius:50%}.custom-radio .custom-control-input:checked~.custom-control-label::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-switch{padding-left:2.25rem}.custom-switch .custom-control-label::before{left:-2.25rem;width:1.75rem;pointer-events:all;border-radius:.5rem}.custom-switch .custom-control-label::after{top:calc(.25rem + 2px);left:calc(-2.25rem + 2px);width:calc(1rem - 4px);height:calc(1rem - 4px);background-color:#adb5bd;border-radius:.5rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out}@media (prefers-reduced-motion:reduce){.custom-switch .custom-control-label::after{transition:none}}.custom-switch .custom-control-input:checked~.custom-control-label::after{background-color:#fff;-webkit-transform:translateX(.75rem);transform:translateX(.75rem)}.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-select{display:inline-block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem 1.75rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;vertical-align:middle;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-select:focus::-ms-value{color:#495057;background-color:#fff}.custom-select[multiple],.custom-select[size]:not([size="1"]){height:auto;padding-right:.75rem;background-image:none}.custom-select:disabled{color:#6c757d;background-color:#e9ecef}.custom-select::-ms-expand{display:none}.custom-select-sm{height:calc(1.5em + .5rem + 2px);padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem}.custom-select-lg{height:calc(1.5em + 1rem + 2px);padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem}.custom-file{position:relative;display:inline-block;width:100%;height:calc(1.5em + .75rem + 2px);margin-bottom:0}.custom-file-input{position:relative;z-index:2;width:100%;height:calc(1.5em + .75rem + 2px);margin:0;opacity:0}.custom-file-input:focus~.custom-file-label{border-color:#80bdff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-file-input:disabled~.custom-file-label{background-color:#e9ecef}.custom-file-input:lang(en)~.custom-file-label::after{content:"Browse"}.custom-file-input~.custom-file-label[data-browse]::after{content:attr(data-browse)}.custom-file-label{position:absolute;top:0;right:0;left:0;z-index:1;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem}.custom-file-label::after{position:absolute;top:0;right:0;bottom:0;z-index:3;display:block;height:calc(1.5em + .75rem);padding:.375rem .75rem;line-height:1.5;color:#495057;content:"Browse";background-color:#e9ecef;border-left:inherit;border-radius:0 .25rem .25rem 0}.custom-range{width:100%;height:calc(1rem + .4rem);padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-range:focus{outline:0}.custom-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range:focus::-ms-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range::-moz-focus-outer{border:0}.custom-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;background-color:#007bff;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.custom-range::-webkit-slider-thumb{transition:none}}.custom-range::-webkit-slider-thumb:active{background-color:#b3d7ff}.custom-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.custom-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#007bff;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.custom-range::-moz-range-thumb{transition:none}}.custom-range::-moz-range-thumb:active{background-color:#b3d7ff}.custom-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.custom-range::-ms-thumb{width:1rem;height:1rem;margin-top:0;margin-right:.2rem;margin-left:.2rem;background-color:#007bff;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}@media (prefers-reduced-motion:reduce){.custom-range::-ms-thumb{transition:none}}.custom-range::-ms-thumb:active{background-color:#b3d7ff}.custom-range::-ms-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:transparent;border-color:transparent;border-width:.5rem}.custom-range::-ms-fill-lower{background-color:#dee2e6;border-radius:1rem}.custom-range::-ms-fill-upper{margin-right:15px;background-color:#dee2e6;border-radius:1rem}.custom-range:disabled::-webkit-slider-thumb{background-color:#adb5bd}.custom-range:disabled::-webkit-slider-runnable-track{cursor:default}.custom-range:disabled::-moz-range-thumb{background-color:#adb5bd}.custom-range:disabled::-moz-range-track{cursor:default}.custom-range:disabled::-ms-thumb{background-color:#adb5bd}.custom-control-label::before,.custom-file-label,.custom-select{transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.custom-control-label::before,.custom-file-label,.custom-select{transition:none}}.nav{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link:focus,.nav-link:hover{text-decoration:none}.nav-link.disabled{color:#6c757d;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #dee2e6}.nav-tabs .nav-item{margin-bottom:-1px}.nav-tabs .nav-link{border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#e9ecef #e9ecef #dee2e6}.nav-tabs .nav-link.disabled{color:#6c757d;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:.25rem}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#007bff}.nav-fill .nav-item{-ms-flex:1 1 auto;flex:1 1 auto;text-align:center}.nav-justified .nav-item{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem 1rem}.navbar>.container,.navbar>.container-fluid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static;float:none}.navbar-text{display:inline-block;padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{-ms-flex-preferred-size:100%;flex-basis:100%;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}.navbar-toggler:focus,.navbar-toggler:hover{text-decoration:none}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:no-repeat center center;background-size:100% 100%}@media (max-width:575.98px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:576px){.navbar-expand-sm{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-sm .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-sm .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (max-width:767.98px){.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:768px){.navbar-expand-md{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-md .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-md .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (max-width:991.98px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:992px){.navbar-expand-lg{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-lg .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-lg .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (max-width:1199.98px){.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:1200px){.navbar-expand-xl{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-xl .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-xl .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}.navbar-expand{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand>.container,.navbar-expand>.container-fluid{padding-right:0;padding-left:0}.navbar-expand .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand>.container,.navbar-expand>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-light .navbar-text{color:rgba(0,0,0,.5)}.navbar-light .navbar-text a{color:rgba(0,0,0,.9)}.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-dark .navbar-text{color:rgba(255,255,255,.5)}.navbar-dark .navbar-text a{color:#fff}.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-body{-ms-flex:1 1 auto;flex:1 1 auto;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-header+.list-group .list-group-item:first-child{border-top:0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img{width:100%;border-radius:calc(.25rem - 1px)}.card-img-top{width:100%;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img-bottom{width:100%;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card-deck{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.card-deck .card{margin-bottom:15px}@media (min-width:576px){.card-deck{-ms-flex-flow:row wrap;flex-flow:row wrap;margin-right:-15px;margin-left:-15px}.card-deck .card{display:-ms-flexbox;display:flex;-ms-flex:1 0 0%;flex:1 0 0%;-ms-flex-direction:column;flex-direction:column;margin-right:15px;margin-bottom:0;margin-left:15px}}.card-group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.card-group>.card{margin-bottom:15px}@media (min-width:576px){.card-group{-ms-flex-flow:row wrap;flex-flow:row wrap}.card-group>.card{-ms-flex:1 0 0%;flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.card-columns .card{margin-bottom:.75rem}@media (min-width:576px){.card-columns{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem;orphans:1;widows:1}.card-columns .card{display:inline-block;width:100%}}.accordion>.card{overflow:hidden}.accordion>.card:not(:first-of-type) .card-header:first-child{border-radius:0}.accordion>.card:not(:first-of-type):not(:last-of-type){border-bottom:0;border-radius:0}.accordion>.card:first-of-type{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion>.card:last-of-type{border-top-left-radius:0;border-top-right-radius:0}.accordion>.card .card-header{margin-bottom:-1px}.breadcrumb{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;color:#6c757d;content:"/"}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}.breadcrumb-item.active{color:#6c757d}.pagination{display:-ms-flexbox;display:flex;padding-left:0;list-style:none;border-radius:.25rem}.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}.page-link:hover{z-index:2;color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:2;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.page-item.active .page-link{z-index:1;color:#fff;background-color:#007bff;border-color:#007bff}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;cursor:auto;background-color:#fff;border-color:#dee2e6}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.badge{transition:none}}a.badge:focus,a.badge:hover{text-decoration:none}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.badge-primary{color:#fff;background-color:#007bff}a.badge-primary:focus,a.badge-primary:hover{color:#fff;background-color:#0062cc}a.badge-primary.focus,a.badge-primary:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.badge-secondary{color:#fff;background-color:#6c757d}a.badge-secondary:focus,a.badge-secondary:hover{color:#fff;background-color:#545b62}a.badge-secondary.focus,a.badge-secondary:focus{outline:0;box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.badge-success{color:#fff;background-color:#28a745}a.badge-success:focus,a.badge-success:hover{color:#fff;background-color:#1e7e34}a.badge-success.focus,a.badge-success:focus{outline:0;box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.badge-info{color:#fff;background-color:#17a2b8}a.badge-info:focus,a.badge-info:hover{color:#fff;background-color:#117a8b}a.badge-info.focus,a.badge-info:focus{outline:0;box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.badge-warning{color:#212529;background-color:#ffc107}a.badge-warning:focus,a.badge-warning:hover{color:#212529;background-color:#d39e00}a.badge-warning.focus,a.badge-warning:focus{outline:0;box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.badge-danger{color:#fff;background-color:#dc3545}a.badge-danger:focus,a.badge-danger:hover{color:#fff;background-color:#bd2130}a.badge-danger.focus,a.badge-danger:focus{outline:0;box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.badge-light{color:#212529;background-color:#f8f9fa}a.badge-light:focus,a.badge-light:hover{color:#212529;background-color:#dae0e5}a.badge-light.focus,a.badge-light:focus{outline:0;box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.badge-dark{color:#fff;background-color:#343a40}a.badge-dark:focus,a.badge-dark:hover{color:#fff;background-color:#1d2124}a.badge-dark.focus,a.badge-dark:focus{outline:0;box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.jumbotron{padding:2rem 1rem;margin-bottom:2rem;background-color:#e9ecef;border-radius:.3rem}@media (min-width:576px){.jumbotron{padding:4rem 2rem}}.jumbotron-fluid{padding-right:0;padding-left:0;border-radius:0}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}.alert-primary hr{border-top-color:#9fcdff}.alert-primary .alert-link{color:#002752}.alert-secondary{color:#383d41;background-color:#e2e3e5;border-color:#d6d8db}.alert-secondary hr{border-top-color:#c8cbcf}.alert-secondary .alert-link{color:#202326}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-success hr{border-top-color:#b1dfbb}.alert-success .alert-link{color:#0b2e13}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-info hr{border-top-color:#abdde5}.alert-info .alert-link{color:#062c33}.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-warning hr{border-top-color:#ffe8a1}.alert-warning .alert-link{color:#533f03}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}.alert-danger .alert-link{color:#491217}.alert-light{color:#818182;background-color:#fefefe;border-color:#fdfdfe}.alert-light hr{border-top-color:#ececf6}.alert-light .alert-link{color:#686868}.alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}.alert-dark hr{border-top-color:#b9bbbe}.alert-dark .alert-link{color:#040505}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}.progress{display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.progress-bar{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:#fff;text-align:center;white-space:nowrap;background-color:#007bff;transition:width .6s ease}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}@media (prefers-reduced-motion:reduce){.progress-bar-animated{-webkit-animation:none;animation:none}}.media{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.media-body{-ms-flex:1;flex:1}.list-group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#212529;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.list-group-item.disabled,.list-group-item:disabled{color:#6c757d;pointer-events:none;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}.list-group-horizontal{-ms-flex-direction:row;flex-direction:row}.list-group-horizontal .list-group-item{margin-right:-1px;margin-bottom:0}.list-group-horizontal .list-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal .list-group-item:last-child{margin-right:0;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0}@media (min-width:576px){.list-group-horizontal-sm{-ms-flex-direction:row;flex-direction:row}.list-group-horizontal-sm .list-group-item{margin-right:-1px;margin-bottom:0}.list-group-horizontal-sm .list-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-sm .list-group-item:last-child{margin-right:0;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0}}@media (min-width:768px){.list-group-horizontal-md{-ms-flex-direction:row;flex-direction:row}.list-group-horizontal-md .list-group-item{margin-right:-1px;margin-bottom:0}.list-group-horizontal-md .list-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-md .list-group-item:last-child{margin-right:0;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0}}@media (min-width:992px){.list-group-horizontal-lg{-ms-flex-direction:row;flex-direction:row}.list-group-horizontal-lg .list-group-item{margin-right:-1px;margin-bottom:0}.list-group-horizontal-lg .list-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-lg .list-group-item:last-child{margin-right:0;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0}}@media (min-width:1200px){.list-group-horizontal-xl{-ms-flex-direction:row;flex-direction:row}.list-group-horizontal-xl .list-group-item{margin-right:-1px;margin-bottom:0}.list-group-horizontal-xl .list-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-xl .list-group-item:last-child{margin-right:0;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0}}.list-group-flush .list-group-item{border-right:0;border-left:0;border-radius:0}.list-group-flush .list-group-item:last-child{margin-bottom:-1px}.list-group-flush:first-child .list-group-item:first-child{border-top:0}.list-group-flush:last-child .list-group-item:last-child{margin-bottom:0;border-bottom:0}.list-group-item-primary{color:#004085;background-color:#b8daff}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#004085;background-color:#9fcdff}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#004085;border-color:#004085}.list-group-item-secondary{color:#383d41;background-color:#d6d8db}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#383d41;background-color:#c8cbcf}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#383d41;border-color:#383d41}.list-group-item-success{color:#155724;background-color:#c3e6cb}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#155724;background-color:#b1dfbb}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#155724;border-color:#155724}.list-group-item-info{color:#0c5460;background-color:#bee5eb}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#0c5460;background-color:#abdde5}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#0c5460;border-color:#0c5460}.list-group-item-warning{color:#856404;background-color:#ffeeba}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#856404;background-color:#ffe8a1}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#856404;border-color:#856404}.list-group-item-danger{color:#721c24;background-color:#f5c6cb}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#721c24;background-color:#f1b0b7}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#721c24;border-color:#721c24}.list-group-item-light{color:#818182;background-color:#fdfdfe}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#818182;background-color:#ececf6}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#818182;border-color:#818182}.list-group-item-dark{color:#1b1e21;background-color:#c6c8ca}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#1b1e21;background-color:#b9bbbe}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#1b1e21;border-color:#1b1e21}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:hover{color:#000;text-decoration:none}.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover{opacity:.75}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}a.close.disabled{pointer-events:none}.toast{max-width:350px;overflow:hidden;font-size:.875rem;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(0,0,0,.1);box-shadow:0 .25rem .75rem rgba(0,0,0,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;border-radius:.25rem}.toast:not(:last-child){margin-bottom:.75rem}.toast.showing{opacity:1}.toast.show{display:block;opacity:1}.toast.hide{display:none}.toast-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:.25rem .75rem;color:#6c757d;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05)}.toast-body{padding:.75rem}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-50px);transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{-webkit-transform:none;transform:none}.modal-dialog-scrollable{display:-ms-flexbox;display:flex;max-height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 1rem);overflow:hidden}.modal-dialog-scrollable .modal-footer,.modal-dialog-scrollable .modal-header{-ms-flex-negative:0;flex-shrink:0}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:calc(100% - 1rem)}.modal-dialog-centered::before{display:block;height:calc(100vh - 1rem);content:""}.modal-dialog-centered.modal-dialog-scrollable{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;height:100%}.modal-dialog-centered.modal-dialog-scrollable .modal-content{max-height:none}.modal-dialog-centered.modal-dialog-scrollable::before{content:none}.modal-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:.3rem;border-top-right-radius:.3rem}.modal-header .close{padding:1rem 1rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}.modal-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:1rem;border-top:1px solid #dee2e6;border-bottom-right-radius:.3rem;border-bottom-left-radius:.3rem}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-scrollable{max-height:calc(100% - 3.5rem)}.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-dialog-centered::before{height:calc(100vh - 3.5rem)}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{max-width:800px}}@media (min-width:1200px){.modal-xl{max-width:1140px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[x-placement^=top] .arrow,.bs-tooltip-top .arrow{bottom:0}.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before{top:0;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right{padding:0 .4rem}.bs-tooltip-auto[x-placement^=right] .arrow,.bs-tooltip-right .arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=right] .arrow::before,.bs-tooltip-right .arrow::before{right:0;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[x-placement^=bottom] .arrow,.bs-tooltip-bottom .arrow{top:0}.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before{bottom:0;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left{padding:0 .4rem}.bs-tooltip-auto[x-placement^=left] .arrow,.bs-tooltip-left .arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=left] .arrow::before,.bs-tooltip-left .arrow::before{left:0;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .arrow::after,.popover .arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[x-placement^=top],.bs-popover-top{margin-bottom:.5rem}.bs-popover-auto[x-placement^=top]>.arrow,.bs-popover-top>.arrow{bottom:calc((.5rem + 1px) * -1)}.bs-popover-auto[x-placement^=top]>.arrow::before,.bs-popover-top>.arrow::before{bottom:0;border-width:.5rem .5rem 0;border-top-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=top]>.arrow::after,.bs-popover-top>.arrow::after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}.bs-popover-auto[x-placement^=right],.bs-popover-right{margin-left:.5rem}.bs-popover-auto[x-placement^=right]>.arrow,.bs-popover-right>.arrow{left:calc((.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=right]>.arrow::before,.bs-popover-right>.arrow::before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom{margin-top:.5rem}.bs-popover-auto[x-placement^=bottom]>.arrow,.bs-popover-bottom>.arrow{top:calc((.5rem + 1px) * -1)}.bs-popover-auto[x-placement^=bottom]>.arrow::before,.bs-popover-bottom>.arrow::before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=bottom]>.arrow::after,.bs-popover-bottom>.arrow::after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f7f7f7}.bs-popover-auto[x-placement^=left],.bs-popover-left{margin-right:.5rem}.bs-popover-auto[x-placement^=left]>.arrow,.bs-popover-left>.arrow{right:calc((.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=left]>.arrow::before,.bs-popover-left>.arrow::before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=left]>.arrow::after,.bs-popover-left>.arrow::after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}.popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:.5rem .75rem;color:#212529}.carousel{position:relative}.carousel.pointer-event{-ms-touch-action:pan-y;touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out;transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-right,.carousel-item-next:not(.carousel-item-left){-webkit-transform:translateX(100%);transform:translateX(100%)}.active.carousel-item-left,.carousel-item-prev:not(.carousel-item-right){-webkit-transform:translateX(-100%);transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;-webkit-transform:none;transform:none}.carousel-fade .carousel-item-next.carousel-item-left,.carousel-fade .carousel-item-prev.carousel-item-right,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{z-index:0;opacity:0;transition:0s .6s opacity}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:20px;height:20px;background:no-repeat 50%/100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:15;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{box-sizing:content-box;-ms-flex:0 1 auto;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators li{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}@-webkit-keyframes spinner-border{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner-border{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:text-bottom;border:.25em solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:spinner-border .75s linear infinite;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:1rem;height:1rem;border-width:.2em}@-webkit-keyframes spinner-grow{0%{-webkit-transform:scale(0);transform:scale(0)}50%{opacity:1}}@keyframes spinner-grow{0%{-webkit-transform:scale(0);transform:scale(0)}50%{opacity:1}}.spinner-grow{display:inline-block;width:2rem;height:2rem;vertical-align:text-bottom;background-color:currentColor;border-radius:50%;opacity:0;-webkit-animation:spinner-grow .75s linear infinite;animation:spinner-grow .75s linear infinite}.spinner-grow-sm{width:1rem;height:1rem}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.bg-primary{background-color:#007bff!important}a.bg-primary:focus,a.bg-primary:hover,button.bg-primary:focus,button.bg-primary:hover{background-color:#0062cc!important}.bg-secondary{background-color:#6c757d!important}a.bg-secondary:focus,a.bg-secondary:hover,button.bg-secondary:focus,button.bg-secondary:hover{background-color:#545b62!important}.bg-success{background-color:#28a745!important}a.bg-success:focus,a.bg-success:hover,button.bg-success:focus,button.bg-success:hover{background-color:#1e7e34!important}.bg-info{background-color:#17a2b8!important}a.bg-info:focus,a.bg-info:hover,button.bg-info:focus,button.bg-info:hover{background-color:#117a8b!important}.bg-warning{background-color:#ffc107!important}a.bg-warning:focus,a.bg-warning:hover,button.bg-warning:focus,button.bg-warning:hover{background-color:#d39e00!important}.bg-danger{background-color:#dc3545!important}a.bg-danger:focus,a.bg-danger:hover,button.bg-danger:focus,button.bg-danger:hover{background-color:#bd2130!important}.bg-light{background-color:#f8f9fa!important}a.bg-light:focus,a.bg-light:hover,button.bg-light:focus,button.bg-light:hover{background-color:#dae0e5!important}.bg-dark{background-color:#343a40!important}a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover{background-color:#1d2124!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.border{border:1px solid #dee2e6!important}.border-top{border-top:1px solid #dee2e6!important}.border-right{border-right:1px solid #dee2e6!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.border-left{border-left:1px solid #dee2e6!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-primary{border-color:#007bff!important}.border-secondary{border-color:#6c757d!important}.border-success{border-color:#28a745!important}.border-info{border-color:#17a2b8!important}.border-warning{border-color:#ffc107!important}.border-danger{border-color:#dc3545!important}.border-light{border-color:#f8f9fa!important}.border-dark{border-color:#343a40!important}.border-white{border-color:#fff!important}.rounded-sm{border-radius:.2rem!important}.rounded{border-radius:.25rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}.rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-lg{border-radius:.3rem!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.rounded-0{border-radius:0!important}.clearfix::after{display:block;clear:both;content:""}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:-ms-flexbox!important;display:flex!important}.d-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:-ms-flexbox!important;display:flex!important}.d-sm-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:768px){.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:-ms-flexbox!important;display:flex!important}.d-md-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:-ms-flexbox!important;display:flex!important}.d-lg-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:1200px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:-ms-flexbox!important;display:flex!important}.d-xl-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:-ms-flexbox!important;display:flex!important}.d-print-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.857143%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.flex-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-center{-ms-flex-align:center!important;align-items:center!important}.align-items-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}@media (min-width:576px){.flex-sm-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-sm-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-sm-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-sm-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-sm-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-sm-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-sm-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-sm-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-sm-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-sm-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-sm-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-sm-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-sm-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-sm-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-sm-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-sm-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-sm-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-sm-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-sm-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-sm-center{-ms-flex-align:center!important;align-items:center!important}.align-items-sm-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-sm-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-sm-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-sm-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-sm-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-sm-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-sm-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-sm-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-sm-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-sm-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-sm-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-sm-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-sm-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-sm-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:768px){.flex-md-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-md-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-md-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-md-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-md-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-md-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-md-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-md-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-md-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-md-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-md-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-md-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-md-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-md-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-md-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-md-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-md-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-md-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-md-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-md-center{-ms-flex-align:center!important;align-items:center!important}.align-items-md-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-md-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-md-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-md-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-md-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-md-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-md-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-md-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-md-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-md-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-md-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-md-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-md-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-md-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:992px){.flex-lg-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-lg-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-lg-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-lg-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-lg-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-lg-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-lg-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-lg-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-lg-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-lg-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-lg-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-lg-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-lg-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-lg-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-lg-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-lg-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-lg-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-lg-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-lg-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-lg-center{-ms-flex-align:center!important;align-items:center!important}.align-items-lg-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-lg-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-lg-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-lg-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-lg-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-lg-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-lg-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-lg-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-lg-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-lg-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-lg-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-lg-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-lg-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-lg-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:1200px){.flex-xl-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-xl-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-xl-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-xl-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-xl-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-xl-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-xl-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-xl-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-xl-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-xl-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-xl-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-xl-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-xl-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-xl-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-xl-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-xl-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-xl-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-xl-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-xl-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-xl-center{-ms-flex-align:center!important;align-items:center!important}.align-items-xl-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-xl-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-xl-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-xl-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-xl-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-xl-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-xl-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-xl-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-xl-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-xl-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-xl-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-xl-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-xl-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-xl-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}@media (min-width:576px){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}}@media (min-width:768px){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}}@media (min-width:992px){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}}@media (min-width:1200px){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}.min-vw-100{min-width:100vw!important}.min-vh-100{min-height:100vh!important}.vw-100{width:100vw!important}.vh-100{height:100vh!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:rgba(0,0,0,0)}.m-0{margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}.m-1{margin:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1,.mx-1{margin-right:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mr-3,.mx-3{margin-right:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.m-4{margin:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.m-5{margin:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mr-5,.mx-5{margin-right:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pr-5,.px-5{padding-right:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.m-n1{margin:-.25rem!important}.mt-n1,.my-n1{margin-top:-.25rem!important}.mr-n1,.mx-n1{margin-right:-.25rem!important}.mb-n1,.my-n1{margin-bottom:-.25rem!important}.ml-n1,.mx-n1{margin-left:-.25rem!important}.m-n2{margin:-.5rem!important}.mt-n2,.my-n2{margin-top:-.5rem!important}.mr-n2,.mx-n2{margin-right:-.5rem!important}.mb-n2,.my-n2{margin-bottom:-.5rem!important}.ml-n2,.mx-n2{margin-left:-.5rem!important}.m-n3{margin:-1rem!important}.mt-n3,.my-n3{margin-top:-1rem!important}.mr-n3,.mx-n3{margin-right:-1rem!important}.mb-n3,.my-n3{margin-bottom:-1rem!important}.ml-n3,.mx-n3{margin-left:-1rem!important}.m-n4{margin:-1.5rem!important}.mt-n4,.my-n4{margin-top:-1.5rem!important}.mr-n4,.mx-n4{margin-right:-1.5rem!important}.mb-n4,.my-n4{margin-bottom:-1.5rem!important}.ml-n4,.mx-n4{margin-left:-1.5rem!important}.m-n5{margin:-3rem!important}.mt-n5,.my-n5{margin-top:-3rem!important}.mr-n5,.mx-n5{margin-right:-3rem!important}.mb-n5,.my-n5{margin-bottom:-3rem!important}.ml-n5,.mx-n5{margin-left:-3rem!important}.m-auto{margin:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto,.mx-auto{margin-right:auto!important}.mb-auto,.my-auto{margin-bottom:auto!important}.ml-auto,.mx-auto{margin-left:auto!important}@media (min-width:576px){.m-sm-0{margin:0!important}.mt-sm-0,.my-sm-0{margin-top:0!important}.mr-sm-0,.mx-sm-0{margin-right:0!important}.mb-sm-0,.my-sm-0{margin-bottom:0!important}.ml-sm-0,.mx-sm-0{margin-left:0!important}.m-sm-1{margin:.25rem!important}.mt-sm-1,.my-sm-1{margin-top:.25rem!important}.mr-sm-1,.mx-sm-1{margin-right:.25rem!important}.mb-sm-1,.my-sm-1{margin-bottom:.25rem!important}.ml-sm-1,.mx-sm-1{margin-left:.25rem!important}.m-sm-2{margin:.5rem!important}.mt-sm-2,.my-sm-2{margin-top:.5rem!important}.mr-sm-2,.mx-sm-2{margin-right:.5rem!important}.mb-sm-2,.my-sm-2{margin-bottom:.5rem!important}.ml-sm-2,.mx-sm-2{margin-left:.5rem!important}.m-sm-3{margin:1rem!important}.mt-sm-3,.my-sm-3{margin-top:1rem!important}.mr-sm-3,.mx-sm-3{margin-right:1rem!important}.mb-sm-3,.my-sm-3{margin-bottom:1rem!important}.ml-sm-3,.mx-sm-3{margin-left:1rem!important}.m-sm-4{margin:1.5rem!important}.mt-sm-4,.my-sm-4{margin-top:1.5rem!important}.mr-sm-4,.mx-sm-4{margin-right:1.5rem!important}.mb-sm-4,.my-sm-4{margin-bottom:1.5rem!important}.ml-sm-4,.mx-sm-4{margin-left:1.5rem!important}.m-sm-5{margin:3rem!important}.mt-sm-5,.my-sm-5{margin-top:3rem!important}.mr-sm-5,.mx-sm-5{margin-right:3rem!important}.mb-sm-5,.my-sm-5{margin-bottom:3rem!important}.ml-sm-5,.mx-sm-5{margin-left:3rem!important}.p-sm-0{padding:0!important}.pt-sm-0,.py-sm-0{padding-top:0!important}.pr-sm-0,.px-sm-0{padding-right:0!important}.pb-sm-0,.py-sm-0{padding-bottom:0!important}.pl-sm-0,.px-sm-0{padding-left:0!important}.p-sm-1{padding:.25rem!important}.pt-sm-1,.py-sm-1{padding-top:.25rem!important}.pr-sm-1,.px-sm-1{padding-right:.25rem!important}.pb-sm-1,.py-sm-1{padding-bottom:.25rem!important}.pl-sm-1,.px-sm-1{padding-left:.25rem!important}.p-sm-2{padding:.5rem!important}.pt-sm-2,.py-sm-2{padding-top:.5rem!important}.pr-sm-2,.px-sm-2{padding-right:.5rem!important}.pb-sm-2,.py-sm-2{padding-bottom:.5rem!important}.pl-sm-2,.px-sm-2{padding-left:.5rem!important}.p-sm-3{padding:1rem!important}.pt-sm-3,.py-sm-3{padding-top:1rem!important}.pr-sm-3,.px-sm-3{padding-right:1rem!important}.pb-sm-3,.py-sm-3{padding-bottom:1rem!important}.pl-sm-3,.px-sm-3{padding-left:1rem!important}.p-sm-4{padding:1.5rem!important}.pt-sm-4,.py-sm-4{padding-top:1.5rem!important}.pr-sm-4,.px-sm-4{padding-right:1.5rem!important}.pb-sm-4,.py-sm-4{padding-bottom:1.5rem!important}.pl-sm-4,.px-sm-4{padding-left:1.5rem!important}.p-sm-5{padding:3rem!important}.pt-sm-5,.py-sm-5{padding-top:3rem!important}.pr-sm-5,.px-sm-5{padding-right:3rem!important}.pb-sm-5,.py-sm-5{padding-bottom:3rem!important}.pl-sm-5,.px-sm-5{padding-left:3rem!important}.m-sm-n1{margin:-.25rem!important}.mt-sm-n1,.my-sm-n1{margin-top:-.25rem!important}.mr-sm-n1,.mx-sm-n1{margin-right:-.25rem!important}.mb-sm-n1,.my-sm-n1{margin-bottom:-.25rem!important}.ml-sm-n1,.mx-sm-n1{margin-left:-.25rem!important}.m-sm-n2{margin:-.5rem!important}.mt-sm-n2,.my-sm-n2{margin-top:-.5rem!important}.mr-sm-n2,.mx-sm-n2{margin-right:-.5rem!important}.mb-sm-n2,.my-sm-n2{margin-bottom:-.5rem!important}.ml-sm-n2,.mx-sm-n2{margin-left:-.5rem!important}.m-sm-n3{margin:-1rem!important}.mt-sm-n3,.my-sm-n3{margin-top:-1rem!important}.mr-sm-n3,.mx-sm-n3{margin-right:-1rem!important}.mb-sm-n3,.my-sm-n3{margin-bottom:-1rem!important}.ml-sm-n3,.mx-sm-n3{margin-left:-1rem!important}.m-sm-n4{margin:-1.5rem!important}.mt-sm-n4,.my-sm-n4{margin-top:-1.5rem!important}.mr-sm-n4,.mx-sm-n4{margin-right:-1.5rem!important}.mb-sm-n4,.my-sm-n4{margin-bottom:-1.5rem!important}.ml-sm-n4,.mx-sm-n4{margin-left:-1.5rem!important}.m-sm-n5{margin:-3rem!important}.mt-sm-n5,.my-sm-n5{margin-top:-3rem!important}.mr-sm-n5,.mx-sm-n5{margin-right:-3rem!important}.mb-sm-n5,.my-sm-n5{margin-bottom:-3rem!important}.ml-sm-n5,.mx-sm-n5{margin-left:-3rem!important}.m-sm-auto{margin:auto!important}.mt-sm-auto,.my-sm-auto{margin-top:auto!important}.mr-sm-auto,.mx-sm-auto{margin-right:auto!important}.mb-sm-auto,.my-sm-auto{margin-bottom:auto!important}.ml-sm-auto,.mx-sm-auto{margin-left:auto!important}}@media (min-width:768px){.m-md-0{margin:0!important}.mt-md-0,.my-md-0{margin-top:0!important}.mr-md-0,.mx-md-0{margin-right:0!important}.mb-md-0,.my-md-0{margin-bottom:0!important}.ml-md-0,.mx-md-0{margin-left:0!important}.m-md-1{margin:.25rem!important}.mt-md-1,.my-md-1{margin-top:.25rem!important}.mr-md-1,.mx-md-1{margin-right:.25rem!important}.mb-md-1,.my-md-1{margin-bottom:.25rem!important}.ml-md-1,.mx-md-1{margin-left:.25rem!important}.m-md-2{margin:.5rem!important}.mt-md-2,.my-md-2{margin-top:.5rem!important}.mr-md-2,.mx-md-2{margin-right:.5rem!important}.mb-md-2,.my-md-2{margin-bottom:.5rem!important}.ml-md-2,.mx-md-2{margin-left:.5rem!important}.m-md-3{margin:1rem!important}.mt-md-3,.my-md-3{margin-top:1rem!important}.mr-md-3,.mx-md-3{margin-right:1rem!important}.mb-md-3,.my-md-3{margin-bottom:1rem!important}.ml-md-3,.mx-md-3{margin-left:1rem!important}.m-md-4{margin:1.5rem!important}.mt-md-4,.my-md-4{margin-top:1.5rem!important}.mr-md-4,.mx-md-4{margin-right:1.5rem!important}.mb-md-4,.my-md-4{margin-bottom:1.5rem!important}.ml-md-4,.mx-md-4{margin-left:1.5rem!important}.m-md-5{margin:3rem!important}.mt-md-5,.my-md-5{margin-top:3rem!important}.mr-md-5,.mx-md-5{margin-right:3rem!important}.mb-md-5,.my-md-5{margin-bottom:3rem!important}.ml-md-5,.mx-md-5{margin-left:3rem!important}.p-md-0{padding:0!important}.pt-md-0,.py-md-0{padding-top:0!important}.pr-md-0,.px-md-0{padding-right:0!important}.pb-md-0,.py-md-0{padding-bottom:0!important}.pl-md-0,.px-md-0{padding-left:0!important}.p-md-1{padding:.25rem!important}.pt-md-1,.py-md-1{padding-top:.25rem!important}.pr-md-1,.px-md-1{padding-right:.25rem!important}.pb-md-1,.py-md-1{padding-bottom:.25rem!important}.pl-md-1,.px-md-1{padding-left:.25rem!important}.p-md-2{padding:.5rem!important}.pt-md-2,.py-md-2{padding-top:.5rem!important}.pr-md-2,.px-md-2{padding-right:.5rem!important}.pb-md-2,.py-md-2{padding-bottom:.5rem!important}.pl-md-2,.px-md-2{padding-left:.5rem!important}.p-md-3{padding:1rem!important}.pt-md-3,.py-md-3{padding-top:1rem!important}.pr-md-3,.px-md-3{padding-right:1rem!important}.pb-md-3,.py-md-3{padding-bottom:1rem!important}.pl-md-3,.px-md-3{padding-left:1rem!important}.p-md-4{padding:1.5rem!important}.pt-md-4,.py-md-4{padding-top:1.5rem!important}.pr-md-4,.px-md-4{padding-right:1.5rem!important}.pb-md-4,.py-md-4{padding-bottom:1.5rem!important}.pl-md-4,.px-md-4{padding-left:1.5rem!important}.p-md-5{padding:3rem!important}.pt-md-5,.py-md-5{padding-top:3rem!important}.pr-md-5,.px-md-5{padding-right:3rem!important}.pb-md-5,.py-md-5{padding-bottom:3rem!important}.pl-md-5,.px-md-5{padding-left:3rem!important}.m-md-n1{margin:-.25rem!important}.mt-md-n1,.my-md-n1{margin-top:-.25rem!important}.mr-md-n1,.mx-md-n1{margin-right:-.25rem!important}.mb-md-n1,.my-md-n1{margin-bottom:-.25rem!important}.ml-md-n1,.mx-md-n1{margin-left:-.25rem!important}.m-md-n2{margin:-.5rem!important}.mt-md-n2,.my-md-n2{margin-top:-.5rem!important}.mr-md-n2,.mx-md-n2{margin-right:-.5rem!important}.mb-md-n2,.my-md-n2{margin-bottom:-.5rem!important}.ml-md-n2,.mx-md-n2{margin-left:-.5rem!important}.m-md-n3{margin:-1rem!important}.mt-md-n3,.my-md-n3{margin-top:-1rem!important}.mr-md-n3,.mx-md-n3{margin-right:-1rem!important}.mb-md-n3,.my-md-n3{margin-bottom:-1rem!important}.ml-md-n3,.mx-md-n3{margin-left:-1rem!important}.m-md-n4{margin:-1.5rem!important}.mt-md-n4,.my-md-n4{margin-top:-1.5rem!important}.mr-md-n4,.mx-md-n4{margin-right:-1.5rem!important}.mb-md-n4,.my-md-n4{margin-bottom:-1.5rem!important}.ml-md-n4,.mx-md-n4{margin-left:-1.5rem!important}.m-md-n5{margin:-3rem!important}.mt-md-n5,.my-md-n5{margin-top:-3rem!important}.mr-md-n5,.mx-md-n5{margin-right:-3rem!important}.mb-md-n5,.my-md-n5{margin-bottom:-3rem!important}.ml-md-n5,.mx-md-n5{margin-left:-3rem!important}.m-md-auto{margin:auto!important}.mt-md-auto,.my-md-auto{margin-top:auto!important}.mr-md-auto,.mx-md-auto{margin-right:auto!important}.mb-md-auto,.my-md-auto{margin-bottom:auto!important}.ml-md-auto,.mx-md-auto{margin-left:auto!important}}@media (min-width:992px){.m-lg-0{margin:0!important}.mt-lg-0,.my-lg-0{margin-top:0!important}.mr-lg-0,.mx-lg-0{margin-right:0!important}.mb-lg-0,.my-lg-0{margin-bottom:0!important}.ml-lg-0,.mx-lg-0{margin-left:0!important}.m-lg-1{margin:.25rem!important}.mt-lg-1,.my-lg-1{margin-top:.25rem!important}.mr-lg-1,.mx-lg-1{margin-right:.25rem!important}.mb-lg-1,.my-lg-1{margin-bottom:.25rem!important}.ml-lg-1,.mx-lg-1{margin-left:.25rem!important}.m-lg-2{margin:.5rem!important}.mt-lg-2,.my-lg-2{margin-top:.5rem!important}.mr-lg-2,.mx-lg-2{margin-right:.5rem!important}.mb-lg-2,.my-lg-2{margin-bottom:.5rem!important}.ml-lg-2,.mx-lg-2{margin-left:.5rem!important}.m-lg-3{margin:1rem!important}.mt-lg-3,.my-lg-3{margin-top:1rem!important}.mr-lg-3,.mx-lg-3{margin-right:1rem!important}.mb-lg-3,.my-lg-3{margin-bottom:1rem!important}.ml-lg-3,.mx-lg-3{margin-left:1rem!important}.m-lg-4{margin:1.5rem!important}.mt-lg-4,.my-lg-4{margin-top:1.5rem!important}.mr-lg-4,.mx-lg-4{margin-right:1.5rem!important}.mb-lg-4,.my-lg-4{margin-bottom:1.5rem!important}.ml-lg-4,.mx-lg-4{margin-left:1.5rem!important}.m-lg-5{margin:3rem!important}.mt-lg-5,.my-lg-5{margin-top:3rem!important}.mr-lg-5,.mx-lg-5{margin-right:3rem!important}.mb-lg-5,.my-lg-5{margin-bottom:3rem!important}.ml-lg-5,.mx-lg-5{margin-left:3rem!important}.p-lg-0{padding:0!important}.pt-lg-0,.py-lg-0{padding-top:0!important}.pr-lg-0,.px-lg-0{padding-right:0!important}.pb-lg-0,.py-lg-0{padding-bottom:0!important}.pl-lg-0,.px-lg-0{padding-left:0!important}.p-lg-1{padding:.25rem!important}.pt-lg-1,.py-lg-1{padding-top:.25rem!important}.pr-lg-1,.px-lg-1{padding-right:.25rem!important}.pb-lg-1,.py-lg-1{padding-bottom:.25rem!important}.pl-lg-1,.px-lg-1{padding-left:.25rem!important}.p-lg-2{padding:.5rem!important}.pt-lg-2,.py-lg-2{padding-top:.5rem!important}.pr-lg-2,.px-lg-2{padding-right:.5rem!important}.pb-lg-2,.py-lg-2{padding-bottom:.5rem!important}.pl-lg-2,.px-lg-2{padding-left:.5rem!important}.p-lg-3{padding:1rem!important}.pt-lg-3,.py-lg-3{padding-top:1rem!important}.pr-lg-3,.px-lg-3{padding-right:1rem!important}.pb-lg-3,.py-lg-3{padding-bottom:1rem!important}.pl-lg-3,.px-lg-3{padding-left:1rem!important}.p-lg-4{padding:1.5rem!important}.pt-lg-4,.py-lg-4{padding-top:1.5rem!important}.pr-lg-4,.px-lg-4{padding-right:1.5rem!important}.pb-lg-4,.py-lg-4{padding-bottom:1.5rem!important}.pl-lg-4,.px-lg-4{padding-left:1.5rem!important}.p-lg-5{padding:3rem!important}.pt-lg-5,.py-lg-5{padding-top:3rem!important}.pr-lg-5,.px-lg-5{padding-right:3rem!important}.pb-lg-5,.py-lg-5{padding-bottom:3rem!important}.pl-lg-5,.px-lg-5{padding-left:3rem!important}.m-lg-n1{margin:-.25rem!important}.mt-lg-n1,.my-lg-n1{margin-top:-.25rem!important}.mr-lg-n1,.mx-lg-n1{margin-right:-.25rem!important}.mb-lg-n1,.my-lg-n1{margin-bottom:-.25rem!important}.ml-lg-n1,.mx-lg-n1{margin-left:-.25rem!important}.m-lg-n2{margin:-.5rem!important}.mt-lg-n2,.my-lg-n2{margin-top:-.5rem!important}.mr-lg-n2,.mx-lg-n2{margin-right:-.5rem!important}.mb-lg-n2,.my-lg-n2{margin-bottom:-.5rem!important}.ml-lg-n2,.mx-lg-n2{margin-left:-.5rem!important}.m-lg-n3{margin:-1rem!important}.mt-lg-n3,.my-lg-n3{margin-top:-1rem!important}.mr-lg-n3,.mx-lg-n3{margin-right:-1rem!important}.mb-lg-n3,.my-lg-n3{margin-bottom:-1rem!important}.ml-lg-n3,.mx-lg-n3{margin-left:-1rem!important}.m-lg-n4{margin:-1.5rem!important}.mt-lg-n4,.my-lg-n4{margin-top:-1.5rem!important}.mr-lg-n4,.mx-lg-n4{margin-right:-1.5rem!important}.mb-lg-n4,.my-lg-n4{margin-bottom:-1.5rem!important}.ml-lg-n4,.mx-lg-n4{margin-left:-1.5rem!important}.m-lg-n5{margin:-3rem!important}.mt-lg-n5,.my-lg-n5{margin-top:-3rem!important}.mr-lg-n5,.mx-lg-n5{margin-right:-3rem!important}.mb-lg-n5,.my-lg-n5{margin-bottom:-3rem!important}.ml-lg-n5,.mx-lg-n5{margin-left:-3rem!important}.m-lg-auto{margin:auto!important}.mt-lg-auto,.my-lg-auto{margin-top:auto!important}.mr-lg-auto,.mx-lg-auto{margin-right:auto!important}.mb-lg-auto,.my-lg-auto{margin-bottom:auto!important}.ml-lg-auto,.mx-lg-auto{margin-left:auto!important}}@media (min-width:1200px){.m-xl-0{margin:0!important}.mt-xl-0,.my-xl-0{margin-top:0!important}.mr-xl-0,.mx-xl-0{margin-right:0!important}.mb-xl-0,.my-xl-0{margin-bottom:0!important}.ml-xl-0,.mx-xl-0{margin-left:0!important}.m-xl-1{margin:.25rem!important}.mt-xl-1,.my-xl-1{margin-top:.25rem!important}.mr-xl-1,.mx-xl-1{margin-right:.25rem!important}.mb-xl-1,.my-xl-1{margin-bottom:.25rem!important}.ml-xl-1,.mx-xl-1{margin-left:.25rem!important}.m-xl-2{margin:.5rem!important}.mt-xl-2,.my-xl-2{margin-top:.5rem!important}.mr-xl-2,.mx-xl-2{margin-right:.5rem!important}.mb-xl-2,.my-xl-2{margin-bottom:.5rem!important}.ml-xl-2,.mx-xl-2{margin-left:.5rem!important}.m-xl-3{margin:1rem!important}.mt-xl-3,.my-xl-3{margin-top:1rem!important}.mr-xl-3,.mx-xl-3{margin-right:1rem!important}.mb-xl-3,.my-xl-3{margin-bottom:1rem!important}.ml-xl-3,.mx-xl-3{margin-left:1rem!important}.m-xl-4{margin:1.5rem!important}.mt-xl-4,.my-xl-4{margin-top:1.5rem!important}.mr-xl-4,.mx-xl-4{margin-right:1.5rem!important}.mb-xl-4,.my-xl-4{margin-bottom:1.5rem!important}.ml-xl-4,.mx-xl-4{margin-left:1.5rem!important}.m-xl-5{margin:3rem!important}.mt-xl-5,.my-xl-5{margin-top:3rem!important}.mr-xl-5,.mx-xl-5{margin-right:3rem!important}.mb-xl-5,.my-xl-5{margin-bottom:3rem!important}.ml-xl-5,.mx-xl-5{margin-left:3rem!important}.p-xl-0{padding:0!important}.pt-xl-0,.py-xl-0{padding-top:0!important}.pr-xl-0,.px-xl-0{padding-right:0!important}.pb-xl-0,.py-xl-0{padding-bottom:0!important}.pl-xl-0,.px-xl-0{padding-left:0!important}.p-xl-1{padding:.25rem!important}.pt-xl-1,.py-xl-1{padding-top:.25rem!important}.pr-xl-1,.px-xl-1{padding-right:.25rem!important}.pb-xl-1,.py-xl-1{padding-bottom:.25rem!important}.pl-xl-1,.px-xl-1{padding-left:.25rem!important}.p-xl-2{padding:.5rem!important}.pt-xl-2,.py-xl-2{padding-top:.5rem!important}.pr-xl-2,.px-xl-2{padding-right:.5rem!important}.pb-xl-2,.py-xl-2{padding-bottom:.5rem!important}.pl-xl-2,.px-xl-2{padding-left:.5rem!important}.p-xl-3{padding:1rem!important}.pt-xl-3,.py-xl-3{padding-top:1rem!important}.pr-xl-3,.px-xl-3{padding-right:1rem!important}.pb-xl-3,.py-xl-3{padding-bottom:1rem!important}.pl-xl-3,.px-xl-3{padding-left:1rem!important}.p-xl-4{padding:1.5rem!important}.pt-xl-4,.py-xl-4{padding-top:1.5rem!important}.pr-xl-4,.px-xl-4{padding-right:1.5rem!important}.pb-xl-4,.py-xl-4{padding-bottom:1.5rem!important}.pl-xl-4,.px-xl-4{padding-left:1.5rem!important}.p-xl-5{padding:3rem!important}.pt-xl-5,.py-xl-5{padding-top:3rem!important}.pr-xl-5,.px-xl-5{padding-right:3rem!important}.pb-xl-5,.py-xl-5{padding-bottom:3rem!important}.pl-xl-5,.px-xl-5{padding-left:3rem!important}.m-xl-n1{margin:-.25rem!important}.mt-xl-n1,.my-xl-n1{margin-top:-.25rem!important}.mr-xl-n1,.mx-xl-n1{margin-right:-.25rem!important}.mb-xl-n1,.my-xl-n1{margin-bottom:-.25rem!important}.ml-xl-n1,.mx-xl-n1{margin-left:-.25rem!important}.m-xl-n2{margin:-.5rem!important}.mt-xl-n2,.my-xl-n2{margin-top:-.5rem!important}.mr-xl-n2,.mx-xl-n2{margin-right:-.5rem!important}.mb-xl-n2,.my-xl-n2{margin-bottom:-.5rem!important}.ml-xl-n2,.mx-xl-n2{margin-left:-.5rem!important}.m-xl-n3{margin:-1rem!important}.mt-xl-n3,.my-xl-n3{margin-top:-1rem!important}.mr-xl-n3,.mx-xl-n3{margin-right:-1rem!important}.mb-xl-n3,.my-xl-n3{margin-bottom:-1rem!important}.ml-xl-n3,.mx-xl-n3{margin-left:-1rem!important}.m-xl-n4{margin:-1.5rem!important}.mt-xl-n4,.my-xl-n4{margin-top:-1.5rem!important}.mr-xl-n4,.mx-xl-n4{margin-right:-1.5rem!important}.mb-xl-n4,.my-xl-n4{margin-bottom:-1.5rem!important}.ml-xl-n4,.mx-xl-n4{margin-left:-1.5rem!important}.m-xl-n5{margin:-3rem!important}.mt-xl-n5,.my-xl-n5{margin-top:-3rem!important}.mr-xl-n5,.mx-xl-n5{margin-right:-3rem!important}.mb-xl-n5,.my-xl-n5{margin-bottom:-3rem!important}.ml-xl-n5,.mx-xl-n5{margin-left:-3rem!important}.m-xl-auto{margin:auto!important}.mt-xl-auto,.my-xl-auto{margin-top:auto!important}.mr-xl-auto,.mx-xl-auto{margin-right:auto!important}.mb-xl-auto,.my-xl-auto{margin-bottom:auto!important}.ml-xl-auto,.mx-xl-auto{margin-left:auto!important}}.text-monospace{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important}.text-justify{text-align:justify!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}@media (min-width:576px){.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.font-weight-light{font-weight:300!important}.font-weight-lighter{font-weight:lighter!important}.font-weight-normal{font-weight:400!important}.font-weight-bold{font-weight:700!important}.font-weight-bolder{font-weight:bolder!important}.font-italic{font-style:italic!important}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:focus,a.text-primary:hover{color:#0056b3!important}.text-secondary{color:#6c757d!important}a.text-secondary:focus,a.text-secondary:hover{color:#494f54!important}.text-success{color:#28a745!important}a.text-success:focus,a.text-success:hover{color:#19692c!important}.text-info{color:#17a2b8!important}a.text-info:focus,a.text-info:hover{color:#0f6674!important}.text-warning{color:#ffc107!important}a.text-warning:focus,a.text-warning:hover{color:#ba8b00!important}.text-danger{color:#dc3545!important}a.text-danger:focus,a.text-danger:hover{color:#a71d2a!important}.text-light{color:#f8f9fa!important}a.text-light:focus,a.text-light:hover{color:#cbd3da!important}.text-dark{color:#343a40!important}a.text-dark:focus,a.text-dark:hover{color:#121416!important}.text-body{color:#212529!important}.text-muted{color:#6c757d!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-decoration-none{text-decoration:none!important}.text-break{word-break:break-word!important;overflow-wrap:break-word!important}.text-reset{color:inherit!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #adb5bd;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #dee2e6!important}.table-dark{color:inherit}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#dee2e6}.table .thead-dark th{color:inherit;border-color:#dee2e6}} +/*# sourceMappingURL=bootstrap.min.css.map */ \ No newline at end of file diff --git a/synapse_topology/webui/src/scss/main.scss b/synapse_topology/webui/src/scss/main.scss new file mode 100644 index 0000000000..02528d0ebf --- /dev/null +++ b/synapse_topology/webui/src/scss/main.scss @@ -0,0 +1,148 @@ +@import './themes.scss'; +@import './animations.scss'; +@import './bootstrap.min.css'; +@mixin theme { + @include dark; +} + +html { + box-sizing: border-box; + font-family: Ariel, sans-serif; + font-size: 2rem; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + @include theme; + background-color: $primary; + color: $font; + margin: 0; +} + +a { + @include theme; + color: $link; + text-decoration: none; +} + +.invalid { + border-color: red; +} +.logo { + position: absolute; + top:0; + right: 0; + margin: 0.5rem; +} + +.servername { + position: absolute; + margin-top: 0.5rem; + margin-left: 0.5rem; + color: darken(silver, 20%); +} + + +.contentWrapper { + @include theme; + margin: 0 20% 2rem 20%; + display: flex; + flex-direction: column; + text-align: center; + justify-content: space-evenly; + min-height: 100%; + + .buttonDisplay { + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + .keyDisplay { + word-wrap: break-word; + } + + button { + @include rippler; + @include dropshadowed; + border-radius: 0.5rem; + font-size: 1rem; + padding: 0.6rem; + color: $font; + background-color: $tertiary; + border: none; + display: inline-block; + text-transform: capitalize; + font-style: bold; + color: $primary; + margin-left: 0.4rem; + margin-right: 0.4rem; + } + + + button[disabled] { + background-color: darken($secondary, 20%); + color: lighten($font, 20%); + } + + @mixin select { + padding: 0.4rem; + font-size: 1rem; + background-color: $secondary; + border-width: 0.1rem; + border-radius: 0.5rem; + color: lighten($font, 20%); + margin-bottom: 1rem; + border-style: solid; + border-color: darken($secondary, 50%); + } + + input { + @include select; + } + + select { + @include select; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + &:after { + content: ▸; + transform: rotate(90deg); + position: absolute; + } + } + + pre { + padding: 0.4rem; + font-size: 0.6rem; + text-align: left; + border-style: solid; + border-color: darken($secondary, 50%); + border-radius: 0.5rem; + text-decoration: none; + } + + .redButton { + background-color: red; + } + + .invalidInput { + border-color: red; + } + p { + text-align: justify; + text-align-last: center; + } +} + +h1 { + @include theme; + font-size: 2rem; +} \ No newline at end of file diff --git a/synapse_topology/webui/src/scss/themes.scss b/synapse_topology/webui/src/scss/themes.scss new file mode 100644 index 0000000000..8192a690e0 --- /dev/null +++ b/synapse_topology/webui/src/scss/themes.scss @@ -0,0 +1,8 @@ +@mixin dark { + $primary: #ffffff !global; + $secondary: #f4f4f4 !global; + $tertiary: #3b444b !global; + $font: #333 !global; + $highlight: #4AEFF0 !global; + $link: #0098d4 !global; +} \ No newline at end of file |