diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml new file mode 100644 index 0000000..5c0c8d4 --- /dev/null +++ b/.github/workflows/docker-publish.yml @@ -0,0 +1,53 @@ +name: Docker Build & Publish + +on: + push: + branches: + - main + - master + tags: + - '*' + +env: + REGISTRY: ghcr.io + IMAGE_NAME: ${{ github.repository }} + + +jobs: + push: + runs-on: ubuntu-latest + permissions: + packages: write + contents: read + + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Setup Docker buildx + uses: docker/setup-buildx-action@79abd3f86f79a9d68a23c75a09a9a85889262adf + + - name: Log into registry ${{ env.REGISTRY }} + if: github.event_name != 'pull_request' + uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c + with: + registry: ${{ env.REGISTRY }} + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Extract Docker metadata + id: meta + uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38 + with: + images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} + + - name: Build and push Docker image + id: build-and-push + uses: docker/build-push-action@ac9327eae2b366085ac7f6a2d02df8aa8ead720a + with: + context: . + push: ${{ github.event_name != 'pull_request' }} + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + cache-from: type=gha + cache-to: type=gha,mode=max diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..979641a --- /dev/null +++ b/.gitignore @@ -0,0 +1,145 @@ +# Byte-compiled / optimized / DLL files +__pycache__/ +*.py[cod] +*$py.class + +# C extensions +*.so + +# Distribution / packaging +.Python +build/ +develop-eggs/ +dist/ +downloads/ +eggs/ +.eggs/ +lib/ +lib64/ +parts/ +sdist/ +var/ +wheels/ +pip-wheel-metadata/ +share/python-wheels/ +*.egg-info/ +.installed.cfg +*.egg +MANIFEST + +# PyInstaller +# Usually these files are written by a python script from a template +# before PyInstaller builds the exe, so as to inject date/other infos into it. +*.manifest +*.spec + +# Installer apps_logs +pip-log.txt +pip-delete-this-directory.txt + +# Unit test / coverage reports +htmlcov/ +.tox/ +.nox/ +.coverage +.coverage.* +.cache +nosetests.xml +coverage.xml +*.cover +*.py,cover +.hypothesis/ +.pytest_cache/ + +# Translations +*.mo +*.pot + +# Django stuff: +*.log +local_settings.py +db.sqlite3 +db.sqlite3-journal + +# Flask stuff: +instance/ +.webassets-cache + +# Scrapy stuff: +.scrapy + +# Sphinx documentation +docs/_build/ + +# PyBuilder +target/ + +# Jupyter Notebook +.ipynb_checkpoints + +# IPython +profile_default/ +ipython_config.py + +# pyenv +.python-version + +# pipenv +# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. +# However, in case of collaboration, if having platform-specific dependencies or dependencies +# having no cross-platform support, pipenv may install dependencies that don't work, or not +# install all needed dependencies. +#Pipfile.lock + +# PEP 582; used by e.g. github.com/David-OConnor/pyflow +__pypackages__/ + +# Celery stuff +celerybeat-schedule +celerybeat.pid + +# SageMath parsed files +*.sage.py + +# Environments +.env +.venv +env/ +venv/ +ENV/ +env.bak/ +venv.bak/ + +# Spyder project settings +.spyderproject +.spyproject + +# Rope project settings +.ropeproject + +# mkdocs documentation +/site + +# mypy +.mypy_cache/ +.dmypy.json +dmypy.json + +# Pyre type checker +.pyre/ + +.idea/* +data/* +.DS_Store* +.pem* +dependencies* + +# MISC +app_dc/* + +logs/app.log +app/config/.env +app/data/* +*tests/ +webex_call_block.db +app/webex_call_block.db diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..b86d304 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,45 @@ +# Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as maintainers of this Cisco Sample Code pledge to making participation with our project a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Showing empathy towards other people + +Examples of unacceptable behavior include: + +* The use of sexualized language or imagery and unwelcome sexual attention or advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other interactions with this project that are not aligned to this Code of Conduct, or to ban temporarily or permanently any person for other behaviors that they deem inappropriate, threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project. Examples of representing a project include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the Cisco SE GitHub team at ciscose-github@cisco.com. The team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project or Cisco SE Leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] + +[homepage]: http://contributor-covenant.org +[version]: http://contributor-covenant.org/version/1/4/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..8370d5e --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,11 @@ +# Cisco Sample Code + +This project, and the code contained herein, is provided for example and/or demonstration purposes by Cisco for use by our partners and customers in working with Cisco's products and services. While Cisco's customers and partners are free to use this code pursuant to the terms set forth in the [LICENSE][LICENSE], this is not an Open Source project as we are not seeking to build a community around this project and its capabilities. + + +We do desire to provide functional and high-quality examples and demonstrations. If you should discover some bug, issue, or opportunity for enhancement with the code contained in this project, please do notify us by: + +1. **Reviewing Open Issues** to verify that the issue hasn't already been reported. +2. **Opening a New Issue** to report the bug, issue, or enhancement opportunity. + +[LICENSE]: ../LICENSE diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..c04fccc --- /dev/null +++ b/Dockerfile @@ -0,0 +1,10 @@ +FROM python:3.11-slim-buster + +WORKDIR /app + +COPY requirements.txt requirements.txt +RUN pip install -r requirements.txt + +COPY . . + +CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"] \ No newline at end of file diff --git a/IMAGES/0image.png b/IMAGES/0image.png new file mode 100644 index 0000000..1244d96 Binary files /dev/null and b/IMAGES/0image.png differ diff --git a/IMAGES/call_monitor.gif b/IMAGES/call_monitor.gif new file mode 100644 index 0000000..8aa085a Binary files /dev/null and b/IMAGES/call_monitor.gif differ diff --git a/IMAGES/psql_setup.gif b/IMAGES/psql_setup.gif new file mode 100644 index 0000000..0a714ac Binary files /dev/null and b/IMAGES/psql_setup.gif differ diff --git a/IMAGES/setup.gif b/IMAGES/setup.gif new file mode 100644 index 0000000..24e01a8 Binary files /dev/null and b/IMAGES/setup.gif differ diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..45bbf3c --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,81 @@ +CISCO SAMPLE CODE LICENSE + Version 1.1 + Copyright (c) 2024 Cisco and/or its affiliates + + These terms govern this Cisco Systems, Inc. ("Cisco"), example or demo + source code and its associated documentation (together, the "Sample + Code"). By downloading, copying, modifying, compiling, or redistributing + the Sample Code, you accept and agree to be bound by the following terms + and conditions (the "License"). If you are accepting the License on + behalf of an entity, you represent that you have the authority to do so + (either you or the entity, "you"). Sample Code is not supported by Cisco + TAC and is not tested for quality or performance. This is your only + license to the Sample Code and all rights not expressly granted are + reserved. + + 1. LICENSE GRANT: Subject to the terms and conditions of this License, + Cisco hereby grants to you a perpetual, worldwide, non-exclusive, non- + transferable, non-sublicensable, royalty-free license to copy and + modify the Sample Code in source code form, and compile and + redistribute the Sample Code in binary/object code or other executable + forms, in whole or in part, solely for use with Cisco products and + services. For interpreted languages like Java and Python, the + executable form of the software may include source code and + compilation is not required. + + 2. CONDITIONS: You shall not use the Sample Code independent of, or to + replicate or compete with, a Cisco product or service. Cisco products + and services are licensed under their own separate terms and you shall + not use the Sample Code in any way that violates or is inconsistent + with those terms (for more information, please visit: + www.cisco.com/go/terms). + + 3. OWNERSHIP: Cisco retains sole and exclusive ownership of the Sample + Code, including all intellectual property rights therein, except with + respect to any third-party material that may be used in or by the + Sample Code. Any such third-party material is licensed under its own + separate terms (such as an open source license) and all use must be in + full accordance with the applicable license. This License does not + grant you permission to use any trade names, trademarks, service + marks, or product names of Cisco. If you provide any feedback to Cisco + regarding the Sample Code, you agree that Cisco, its partners, and its + customers shall be free to use and incorporate such feedback into the + Sample Code, and Cisco products and services, for any purpose, and + without restriction, payment, or additional consideration of any kind. + If you initiate or participate in any litigation against Cisco, its + partners, or its customers (including cross-claims and counter-claims) + alleging that the Sample Code and/or its use infringe any patent, + copyright, or other intellectual property right, then all rights + granted to you under this License shall terminate immediately without + notice. + + 4. LIMITATION OF LIABILITY: CISCO SHALL HAVE NO LIABILITY IN CONNECTION + WITH OR RELATING TO THIS LICENSE OR USE OF THE SAMPLE CODE, FOR + DAMAGES OF ANY KIND, INCLUDING BUT NOT LIMITED TO DIRECT, INCIDENTAL, + AND CONSEQUENTIAL DAMAGES, OR FOR ANY LOSS OF USE, DATA, INFORMATION, + PROFITS, BUSINESS, OR GOODWILL, HOWEVER CAUSED, EVEN IF ADVISED OF THE + POSSIBILITY OF SUCH DAMAGES. + + 5. DISCLAIMER OF WARRANTY: SAMPLE CODE IS INTENDED FOR EXAMPLE PURPOSES + ONLY AND IS PROVIDED BY CISCO "AS IS" WITH ALL FAULTS AND WITHOUT + WARRANTY OR SUPPORT OF ANY KIND. TO THE MAXIMUM EXTENT PERMITTED BY + LAW, ALL EXPRESS AND IMPLIED CONDITIONS, REPRESENTATIONS, AND + WARRANTIES INCLUDING, WITHOUT LIMITATION, ANY IMPLIED WARRANTY OR + CONDITION OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON- + INFRINGEMENT, SATISFACTORY QUALITY, NON-INTERFERENCE, AND ACCURACY, + ARE HEREBY EXCLUDED AND EXPRESSLY DISCLAIMED BY CISCO. CISCO DOES NOT + WARRANT THAT THE SAMPLE CODE IS SUITABLE FOR PRODUCTION OR COMMERCIAL + USE, WILL OPERATE PROPERLY, IS ACCURATE OR COMPLETE, OR IS WITHOUT + ERROR OR DEFECT. + + 6. GENERAL: This License shall be governed by and interpreted in + accordance with the laws of the State of California, excluding its + conflict of laws provisions. You agree to comply with all applicable + United States export laws, rules, and regulations. If any provision of + this License is judged illegal, invalid, or otherwise unenforceable, + that provision shall be severed and the rest of the License shall + remain in full force and effect. No failure by Cisco to enforce any of + its rights related to the Sample Code or to a breach of this License + in a particular situation will act as a waiver of such rights. In the + event of any inconsistencies with any other terms, this License shall + take precedence. diff --git a/README.md b/README.md new file mode 100644 index 0000000..5458bd7 --- /dev/null +++ b/README.md @@ -0,0 +1,272 @@ +# gve_devnet_webex_xsi_call_block +This program utilizes Webex's External Service Interface (XSI) events and real-time geolocation tracking to dynamically manage call permissions within an organization, allowing or blocking calls based on users' compliance with predefined geographical boundaries. Leveraging OAuth for secure authentication and JavaScript for continuous geolocation updates, it ensures that only authorized users within specific locations can initiate or receive calls, enhancing the organization's security and compliance posture. + +## Contacts +* Mark Orszycki +* Gerardo Chaves + +## Features +- Monitoring and managing call events in real-time using Webex XSI events +- OAuth for secure authentication and user identification +- Continuous geolocation updates / tracking using JavaScript - sends geolocation updates to the server every 30 seconds +- Dynamic call permission management based on geolocation data +- Blocking calls for users outside predefined geographical boundaries +- Secure session management and token refresh for continuous application use +- Database operations using SQLAlchemy for data storage and retrieval +- PostgreSQL database for storing user data, session tokens, and geolocation information + +## Solution Overview +### Admin Starting Point: Environment Setup +* Administrators start the setup process for the application, which includes creating and loading environment variables. +* The setup process is initiated by first navigating to /setup with `cd setup` & running the run command `python setup.py run`. This command manages environment variable configuration & project setup using the EM Class. This class provides methods to create and load the .env file, prompt for env variables if missing, reload the environment, validate environment variables, and set environment variables. +* This includes setting up the Webex Integration Client ID and Client Secret, the required scope of access, the public URL of the application, and the geolocation boundaries for call permissions. (refer to setup gif below) +* Once the environment variables are set, the application is ready to run with the necessary configurations. +* To run the application, return to root directory with `cd ..`, navigate to the app directory with `cd app`, & run the FastAPI application with `uvicorn main:app`. +* Login to admin/login route with your Webex credentials to access the admin dashboard & initiate call monitoring. +* If the server restarts, the application will automatically reload the environment variables from the .env file and call monitoring will resume. +* If the server is stopped, call monitoring will resume on restart as long as the admin token is still valid. + +### User Starting Point: The Webex Shortcut +* Users access the application through a Webex shortcut that directs them to the application's /user/login. This serves as the entry point to the system, differentiating between user and admin functionalities. + +### User Authentication and Geolocation Tracking +* Upon clicking the shortcut, users are prompted to log in through a Webex OAuth flow, ensuring secure access based on their role. +* After successful authentication, users land on a page where they're asked to share their geolocation. This crucial step enables the application to track the user's location in real-time. +* The application continues to send geolocation updates to the server every 30 seconds. This persistent tracking is key to the dynamic management of call permissions. + +### Dynamic Call Permissions Based on Geolocation +* The system uses the continuously updated geolocation data to make real-time decisions about call permissions. If a user's location is detected outside predefined country bounds, any outgoing or incoming calls are automatically blocked. +* This geolocation-based call blocking mechanism ensures that only users within specific geographical boundaries can make or receive calls, adhering to regulatory compliance and enhancing security. + +### Backend Processing and Secure Session Management +* The application's backend is responsible for handling OAuth callbacks, managing session tokens securely, processing geolocation updates, and monitoring call events. +* It captures and processes call events, applying logic based on user permissions and geolocation to allow, reject, or terminate calls accordingly. + +### Database Operations & Models +* The application uses SQLAlchemy to interact with the database. It provides CRUD operations for different tables such as AdminToken, UserList, AllowList, and TimeLocation. +* The application uses SQLAlchemy ORM to define models for the AdminToken, UserList, AllowList, and TimeLocation tables. +* The AdminToken model stores the admin token, which is used to authenticate the admin user and initiate call monitoring. +* The UserList model stores the user's Webex ID, email, and geolocation data. +* The AllowList model stores the user's Webex ID, and if they are allowed to make calls. +* The TimeLocation model stores the user's Webex ID, if they are allowed to make calls, and their geolocation data. +* These models are used to store and retrieve data from the database, enabling dynamic call permission management based on user roles and geolocation. +* SQLAlchemy engine and session configurations used to interact with the database, ensuring data integrity and consistency. +* Pydantic models used for data validation and serialization, ensuring that the data passed between the frontend and backend is accurate and secure. + +### Logging and Console Output +* The application uses the LoggerManager class to manage logging and console output. This class provides methods for setting up the logger, thread-safe printing, logging and printing messages, and displaying data in a rich table format. +* Once 'call monitoring' has been initiated, a queue of Webex Calling Events will be logged to /app/logger/logs/app.log & displayed to the console, showing the call events that have been processed by the application. +* The LoggerManager class ensures that the application's logging and console output are well-organized, making it easier to track and debug call events and geolocation updates. +* The LoggerManager class also provides a rich table format for displaying data, making it easier to read and understand the application's output. + +## Key Components +- **Cisco Webex**: A cloud-based collaboration platform that provides video conferencing, team messaging, and file sharing, used here to authenticate users and manage call events. +- **Cisco Webex XSI**: A RESTful API that provides access to call control and call event data, used here to monitor and manage call events in real-time. +- **Cisco Webex OAuth**: An authentication mechanism that allows users to log in to the application securely using their Webex credentials. +- **Cisco Webex Integration**: A mechanism that allows the application to access the Webex REST API on behalf of another Webex Teams user, used here to request permission to invoke the Webex REST API. +- **Python**: The primary programming language for the application. +- **FastAPI**: A modern, high-performance web framework for building APIs with Python, used here for creating the web interface and managing API requests and responses. +- **Uvicorn**: An efficient ASGI server implementation for Python, responsible for running the FastAPI application with excellent performance and concurrency handling. +- **Jinja2**: A powerful template engine for Python, employed to render dynamic HTML templates, for consistent application user interface. +- **HTML & CSS**: HTML provides the structure for web pages, while CSS is used for layout and design. +- **JavaScript**: Used to track geolocation updates and send them to the server in real-time. +- **PostgreSQL Database**: A powerful, open-source relational database system, used here to store user data, session tokens, and geolocation information. +- **SQLAlchemy**: A powerful SQL toolkit and Object-Relational Mapping (ORM) library for Python, used to interact with the SQLite database. +- **Docker**: A platform for developing, shipping, and running applications in containers, used to package the application and its dependencies into a standardized unit for software development. + +## Prerequisites +### Webex Prerequisites +**Webex API Access Token**: +1. To use the Webex REST API, you need a Webex account backed by Cisco Webex Common Identity (CI). If you already have a Webex account, you're all set. Otherwise, go ahead and [sign up for a Webex account](https://cart.webex.com/sign-up). +2. When making request to the Webex REST API, the request must contain a header that includes the access token. A personal access token can be obtained [here](https://developer.webex.com/docs/getting-started). +3. Retrieve your PAT. This will be used during the setup process to fetch the admin Webex user ID; user ID is used to verify admin when attempting to initiate call monitoring. + +**OAuth Integrations**: +1. Integrations are how you request permission to invoke the Webex REST API on behalf of another Webex Teams user. To do this in a secure way, the API supports the OAuth2 standard which allows third-party integrations to get a temporary access token for authenticating API calls instead of asking users for their password. To register an integration with Webex Teams: +2. Log in to `developer.webex.com` +3. Click on your avatar at the top of the page and then select `My Webex Apps` +4. Click `Create a New App` +5. Click `Create an Integration` to start the wizard +6. Follow the instructions of the wizard and provide your integration's name, description, and logo +7. After successful registration, you'll be taken to a different screen containing your integration's newly created Client ID and Client Secret +8. Copy the secret and store it safely. Please note that the Client Secret will only be shown once for security purposes +9. Note that access token may not include all the scopes necessary for this prototype by default. To include the necessary scopes, select `My Webex Apps` under your avatar once again. Then click on the name of the integration you just created. Scroll down to the `Scopes` section. From there, select all the scopes needed for this integration. +10. To read more about Webex Integrations & Authorization and to find information about the different scopes, you can find information [here](https://developer.webex.com/docs/integrations) +11. Configure the following scopes for the Webex Integration: `spark:all,spark-admin:xsi,spark:xsi,spark-admin:locations_read,spark-admin:people_read,spark-admin:licenses_read` + +### PostgreSQL Database Installation +1. PostgreSQL is used as the database for this application. You can download PostgreSQL [here](https://www.postgresql.org/download/). (If you fancy a Homebrew, see the instructions below.) +2. Create a database in PostgreSQL and update the database URL in the .env file: `SQLALCHEMY_DATABASE_URL="postgresql://YOUR_USN:YOUR_PASSWORD@localhost/YOUR_DB_NAME"` + +#### Optional: PostgreSQL Installation with Homebrew +*PostgreSQL install with Homebrew:* +1. PostgreSQL Install & Setup with Homebrew +```script +brew install postgresql // Install PostgreSQL with Homebrew +brew services start postgresql // Start the PostgreSQL service +postgres -V +psql -d postgres +CREATE ROLE some_test_user WITH LOGIN SUPERUSER; +ALTER ROLE some_test_user WITH PASSWORD 'YOUR_NEW_PASSWORD'; +\q +psql -U some_test_user postgres +CREATE DATABASE webex_call_blocking; +``` + +2. PostgreSQL Commands +```script +psql -U postgres // Connect to the default database with the new role +\l // List all databases +\c YOUR_DB_NAME // Connect to a specific database +\dt // List all tables in the current database +SELECT * FROM YOUR_TABLE_NAME; // Query a table +DELETE FROM YOUR_TABLE_NAME; // Delete all rows from a table + +``` +*Note: SQLAlchemy Database URL: `SQLALCHEMY_DATABASE_URL="postgresql://postgres:YOUR_PASSWORDWlocalhost/YOUR_DB_NAME"`* + +## Installation/Configuration +1. Clone this repository with `git clone https://github.com/gve-sw/gve_devnet_webex_call_block.git` +2. Set up a Python virtual environment. Make sure Python 3 is installed in your environment, and if not, you may download Python [here](https://www.python.org/downloads/). Once Python 3 is installed in your environment, you can activate the virtual environment with the instructions found [here](https://docs.python.org/3/tutorial/venv.html). +3. Install the requirements into virtual environment with 'pip3 install -r requirements.txt' +4. Run the setup script to configure the environment variables and project setup: + ```script + cd app/config + python setup.py run + ``` +5. Once setting all .env variables and settings.py, start the FastAPI application with the following command: + ```script + uvicorn main:app + ``` + +### Option: Manually Create and Update the `.env` & update settings.py file: +If you prefer to manually create and update the `.env` file instead of using the setup script, follow these steps: +To configure the application, you need to update the `.env` file with the appropriate values. +This file contains key settings that the application uses to interact with the Webex APIs and to set up its environment. +#### Manually Setting Up the `.env` File: +1. **Create & update .env in app/config/**: + ```script + cd app/config + touch .env + open .env + ``` +2. **Client ID and Secret**: + - `CLIENT_ID`: Your Webex Integration Client ID. + - `CLIENT_SECRET`: Your Webex Integration Client Secret. +3. **Webex Admin User ID**: + - `WEBEX_ADMIN_UID`: The Webex admin user ID. This is used to fetch the Webex organization's details and used to verify the user's role in the organization after authentication. +4. **Database Configuration**: + - `SQLALCHEMY_DATABASE_URL`: The database URL for the application. The default is a PostgreSQL database, but you can replace it with a different database URL if needed. + +#### Manually Setting Up the `settings.py` File: +1. **Configure Geolocation Boundaries**: + - `LAT_MAX`: `LAT_MIN`, `LAT_MAX`, `LON_MIN`, `LON_MAX` are the latitude and longitude boundaries for the geofencing feature. Update these in settings.py as well. +2. **Geolocation Timeout**: + - `GEOLOCATION_TIMEOUT`: The time interval (in seconds) for sending geolocation updates to the server. The default is 300 seconds. + +Once you have updated and saved the `.env` file with the correct values, the application will be configured to run with these settings. +Example `.env`: + ```script + WEBEX_ADMIN_UID=YOUR_WEBEX_ADMIN_UID + CLIENT_ID=YOUR_WEBEX_INTEGRATION_CLIENT_ID + CLIENT_SECRET=YOUR_WEBEX_INTEGRATION_CLIENT_SECRET + SQLALCHEMY_DATABASE_URL="postgresql://YOUR_USN:YOUR_PASSWORD@localhost/YOUR_DB_NAME" + ``` + +Example settings.py: +```script +# Required Environment Variables (app/config/.env file) +REQUIRED_ENV_VARS: List[str] = ['WEBEX_ADMIN_UID', 'CLIENT_ID', 'CLIENT_SECRET', 'SQLALCHEMY_DATABASE_URL'] + +# Required Settings +REQUIRED_SETTINGS: List[str] = ['LAT_MIN', 'LAT_MAX', 'LON_MIN', 'LON_MAX', 'GEOLOCATION_TIMEOUT'] + +# FastAPI Settings +APP_NAME: str = 'Webex Call Blocking by Geolocation' +APP_VERSION: str = 'POC v1.0' +UVICORN_LOG_LEVEL: str = 'WARNING' + +# Webex Integration URLs +AUTHORIZATION_BASE_URL = 'https://api.ciscospark.com/v1/authorize' +TOKEN_URL = 'https://api.ciscospark.com/v1/access_token' +WEBEX_BASE_URL = 'https://webexapis.com/v1/' +SCOPE: List[str] = ['spark:all,spark-admin:xsi,spark:xsi,spark-admin:locations_read,spark-admin:people_read,spark-admin:licenses_read'] +PUBLIC_URL: str = 'http://127.0.0.1:8000' + +# Geolocation bounding boxes & +LAT_MIN: float = 10.0 +LAT_MAX: float = 20.0 +LON_MIN: float = 100.0 +LON_MAX: float = 30.1 +GEOLOCATION_TIMEOUT: int = 20 +``` + +## Usage +### Start the Application +To initiate the prototype, start the FastAPI application: +``` +$ cd app +$ uvicorn main:app +$ uvicorn main:app --log-level warning +``` + +## Application Structure +The application is structured into several Python files and HTML templates: +- `app/`: Contains the main application code, including the FastAPI application and the Webex event handling logic. +- `main.py`: The main entry point of the application. It handles the routing and main logic of the application. +- `routes.py`: Contains the FastAPI routes for the application's API. +- `schemas.py`: Contains Pydantic models for data validation and serialization. +- `call_monitor.py`: Contains the logic for monitoring and processing call events using the Webex XSI events. +- `funcs.py`: Contains helper functions used throughout the application. +- `db.py`: Contains the SQLAlchemy engine and session configurations. +- `models.py`: Contains the SQLAlchemy ORM models for the application's database. +- `crud.py`: Contains the CRUD operations for the application's database. +- `logger/`: Contains the LoggerManager class for managing logging and console output. +- `templates/`: Contains the HTML templates for the application's frontend. +- `static/`: Contains the static files (e.g., CSS, JavaScript) for the application's frontend. +- `Dockerfile`: Contains the Docker configuration for building the application image. +- `docker-compose.yml`: Contains the Docker Compose configuration for running the application. +- `setup/`: Contains the setup script for configuring the environment variables. +- `config/`: Contains the configuration files for the application. +- `.env/`: Will need to be created in the config folder to store environment variables. + +## Screenshots/GIFs +### Environment Variables & Settings Setup:
+![/IMAGES/setup.gif](/IMAGES/setup.gif)
+ +### PostgreSQL Setup: +![/IMAGES/psql_setup.gif](/IMAGES/psql_setup.gif)
+ +### Webex Calling Event Monitoring Setup: +![/IMAGES/call_monitor.gif](/IMAGES/call_monitor.gif)
+ + +## Additional Information +### Token Management +*Webex Token Management:* +> Access Token (14 days): Used for authenticating API requests. Checked for validity and refreshed as needed. +> Refresh Token (90 days): Used to obtain a new access token when the current one expires. Checked for its expiry and triggers re-authentication if expired. +> Admin token PostgreSQL database, allowing call monitoring initiation upon server restart with re-authentication. + +### Troubleshooting +* If you encounter any issues with the application, please refer to the logs in the `app/logger/logs` directory for more information. + +### LICENSE +Provided under Cisco Sample Code License, for details see [LICENSE](LICENSE.md) + +### CODE_OF_CONDUCT +Our code of conduct is available [here](CODE_OF_CONDUCT.md) + +### CONTRIBUTING +See our contributing guidelines [here](CONTRIBUTING.md) + +#### DISCLAIMER: +Please note: This script is meant for demo purposes only. All tools/ scripts in this repo are released for use +"AS IS" without any warranties of any kind, including, but not limited to their installation, use, or performance. +Any use of these scripts and tools is at your own risk. There is no guarantee that they have been through thorough +testing in a comparable environment and we are not responsible for any damage or data loss incurred with their use. +You are responsible for reviewing and testing any scripts you run thoroughly before use in any non-testing environment. + + + + diff --git a/app/__init__.py b/app/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/app/call_monitor.py b/app/call_monitor.py new file mode 100644 index 0000000..765684b --- /dev/null +++ b/app/call_monitor.py @@ -0,0 +1,363 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +import queue +import threading +import time +import traceback + +import wxcadm + +from database.crud import CRUDOperations +from database.db import SessionLocal +from funcs import ( + is_geolocation_timeout, + is_token_expired, + is_refresh_token_expired +) +from logger.logrr import lm + +from fastapi.responses import JSONResponse + + +class CallMonitor: + """ + The CallMonitor class handles the monitoring of calls for the Webex organization. It initializes and maintains + a mapping between Webex users and their corresponding call sessions and tracks active and ended calls. + + Attributes: + access_token (str): Webex API access token. + webex (wxcadm.Webex): Webex API instance. + all_people (list): List of all people in the organization. + xsi_user_map (dict): Mapping of person ID to their display name and ID. + call_to_user_map (dict): Mapping of call to user. + + Methods: + extract_event_details(event: dict) -> dict: + Extracts the event details from the event data. + reject_call(user_id: str, call_id: str) -> None: + Rejects the call for the given user_id and call_id. + register_call(call_id: str, user_id: str) -> None: + Associates a given call_id with a user_id. + check_user_permission(user_id: str) -> bool: + Checks if the user has permission to make a call. + handle_internal_call(xsi_user_id: str, xsi_target_id: str, call_id: str) -> None: + Handles a call where both parties are internal. + handle_external_call(internal_xsi_user_id: str, call_id: str, event_type: str) -> None: + Handles a call where one party is external. + handle_call_event(event_details: dict) -> None: + Handles a call event. + handle_event(event: dict) -> None: + Handles an event. + monitor_calls(events_queue: queue.Queue) -> None: + Monitors all calls for the Webex organization. + setup_xsi_events() -> None: + Initializes XSI events and sets up a thread to monitor calls continuously. + """ + + def __init__(self, access_token): + """ + Initialize CallMonitor with given access token. + Args: + access_token (str): Webex API access token. + """ + self.access_token = access_token + self.webex = wxcadm.Webex(access_token) # Initialize XSI API + self.webex.org.get_xsi_endpoints() # Fetch the XSI endpoints for the organization + self.all_people = self.webex.org.wxc_people # Fetch all people in the organization + self.xsi_user_map = {} # Mapping of person ID to their display name and ID + self.call_to_user_map = {} # Track / map call to user + + # Initialize the xsi_user_map with users and their respective details. + for person in self.all_people: + person.start_xsi() # Start the XSI for each person + person_id = person.id # Fetch the person ID + xsi_instance = wxcadm.xsi.XSI(parent=person) # Create the XSI instance for each person + + phone_numbers_info = person.wxc_numbers.get('phoneNumbers', []) if isinstance(person.wxc_numbers, dict) else [] # Fetch the phone numbers for the person + primary_phone_number = next((pn for pn in phone_numbers_info if pn.get('primary', False)), + phone_numbers_info[0] if phone_numbers_info else None) # Fetch the primary phone number + direct_number = primary_phone_number.get('directNumber') if primary_phone_number else "No number available" # Fetch the direct number + extension = primary_phone_number.get('extension') if primary_phone_number and 'extension' in primary_phone_number else "" # Fetch the extension + + profile_info = xsi_instance.profile # Fetch the profile information for the XSI user instance + xsi_user_id = profile_info.get('user_id') # Fetch the xsi user ID + + # Store the user details in the xsi_user_map for easy access + self.xsi_user_map[xsi_user_id] = { + "remote_party_name": person.name, + "xsi_user_id": xsi_user_id, # Store the XSI user ID + "webex_user_id": person_id, # Store the Webex user ID + "phone_number": direct_number, # Store the concatenated phone number and extension + "extension": extension, # Store the extension + "xsi_instance": xsi_instance, # Store the XSI instance + # "profile_info": profile_info # Store all the profile information + } + + lm.print_xsi_user_map(self.xsi_user_map) # Print the XSI user map + lm.lnp(f"\nCall Monitoring Initiated for {len(self.xsi_user_map)} users.") # Print the number of users being monitored + + @staticmethod + def extract_event_details(event): + """ + Extract the event details from the event data. + Args: + event (dict): The event data. + """ + try: + event_data = event.get('xsi:Event', {}).get('xsi:eventData', {}) + event_type = event_data.get('@xsi1:type', {}) + call_info = event_data.get('xsi:call', {}) + xsitargetId = event.get('xsi:Event', {}).get('xsi:targetId', {}) + call_id = call_info.get('xsi:callId', '') + remote_party_info = call_info.get('xsi:remoteParty', {}) + userId = remote_party_info.get('xsi:userId', {}) + remote_party_name = remote_party_info.get('xsi:name', '').lower() + userDN = remote_party_info.get('xsi:userDN', {}).get('#text', '') or remote_party_info.get('xsi:address', {}).get('#text', '') + + event_details = { + "event_type": event_type, + "call_id": call_id, + "user_id": userId, + "target_id": xsitargetId, + } + + # lm.lnp(f"Event details: {event_details}", style="webex") + return event_details + except Exception as e: + lm.lnp(f"Error extracting event details: {e}", style="error", level="error") + return {} + + @staticmethod + def check_user_permission(user_id): + """ + Check if the user has permission to make a call. + :param user_id: + :type user_id: + :return: + :rtype: + """ + session = SessionLocal() # Create a new session + crud = CRUDOperations(session) # Create a CRUDOperations instance + user_allow_list_entry = crud.get_allow_list_entry_by_user_id(user_id=user_id) # Fetch the allow list entry for the user + + if user_allow_list_entry and user_allow_list_entry['geolocation_data']: # Check if the user is in the allow list and has geolocation data + latest_time_location = max(user_allow_list_entry['geolocation_data'], key=lambda x: x['last_update']) # Fetch the latest geolocation data + if latest_time_location: + lm.lnp(f"Latest geolocation data for user {user_id}: {latest_time_location}") + if not is_geolocation_timeout(latest_time_location): + lm.lnp(f"ALLOWED: User {user_id} is within geolocation update period.", style="success") + return True # Return True if the user is within the geolocation update period + else: + lm.lnp(f"BLOCKED: User {user_id}'s geolocation update has timed out.", style="error") + else: + lm.lnp(f"No geolocation data found for user {user_id}.", style="error") + else: + lm.lnp(f"User {user_id} is not in the allow list or has no geolocation data.", style="error") + return False # Return False if the user is not in the allow list or has no geolocation data + + def reject_call(self, user_id, call_id): + """ + Reject the call for the given user_id and call_id + Args: + call_id (str): The unique ID of the call. + :param call_id: + :type call_id: + :param user_id: + :type user_id: + """ + # Retrieve the XSI instance associated with the user ID from the xsi_user_map + user_entry = self.xsi_user_map.get(user_id) + if not user_entry: + lm.logger.error(f"No XSI instance found for User ID: {user_id}") + return + + xsi_instance = user_entry.get('xsi_instance') + if xsi_instance: + try: + # Use the XSI instance to end the call + active_calls = xsi_instance.calls + for call in active_calls: + try: + call.hangup() + lm.lnp(f"Ended call with Call ID: {call.id}") + except Exception as e: + lm.lnp(f"Failed to end the call with Call ID: {call_id}. Error: {e}") + except Exception as e: + lm.lnp(f"Failed to end the call with Call ID: {call_id}. Error: {e}") + else: + lm.lnp(f"No active call found for Call ID: {call_id}.") + + def register_call(self, call_id, user_id): + """ + Associate a given call_id with a user_id. + Args: + call_id (str): The unique ID of the call. + user_id (str): The ID of the user. + """ + lm.lnp(f"Associating Call ID {call_id} with User ID {user_id}") + self.call_to_user_map[call_id] = user_id + + def handle_internal_call(self, xsi_user_id, xsi_target_id, call_id): + """ + Handle a call where both parties are internal. + """ + caller_entry = self.xsi_user_map.get(xsi_user_id) if xsi_user_id else None + receiver_entry = self.xsi_user_map.get(xsi_target_id) if xsi_target_id else None + if caller_entry and receiver_entry: + lm.lnp(f"Both parties are internal, allowing call {call_id}") + + def handle_external_call(self, internal_xsi_user_id, call_id, event_type): + """ + Handle a call where one party is external. + """ + entry = self.xsi_user_map.get(internal_xsi_user_id) + internal_webex_user_id = entry.get('webex_user_id') if entry else None + + if event_type == "xsi:CallReceivedEvent" and internal_webex_user_id: + if self.check_user_permission(internal_webex_user_id): + lm.lnp(f"External to internal call (inbound) and internal user {internal_webex_user_id} is in country, allowing call {call_id}") + else: + lm.lnp(f"External to internal call and internal user {internal_webex_user_id} is out of country, blocking call {call_id}") + self.reject_call(internal_xsi_user_id, call_id) + elif event_type == "xsi:CallOriginatedEvent" and internal_webex_user_id: + if self.check_user_permission(internal_webex_user_id): + lm.lnp(f"Internal to External call (outbound) and internal user {internal_webex_user_id} is in country; allowing call {call_id}") + else: + lm.lnp(f"Internal to External call and internal user {internal_webex_user_id} is out of country; blocking call {call_id}") + self.reject_call(internal_xsi_user_id, call_id) + + def handle_event(self, event): + """ + Handle an event. + """ + # lm.lnp(f"Event Received: \n: {event}") # Print the event data + event_details = self.extract_event_details(event) # Extract the event details + event_type = event_details.get('event_type') # Fetch the event type + + if not event_details: # Check if event_details is empty + lm.lnp("Event details could not be extracted.") + return # Early return if event_details is empty + try: + if event_type in ["xsi:CallReceivedEvent", "xsi:CallOriginatedEvent"]: # Check if the event type is a call event + lm.lnp(f"Processing {event_type}. Details: {event_details}") + call_id = event_details.get('call_id') # Fetch the call ID + xsi_user_id = event_details.get('user_id') # Fetch the user ID + xsi_target_id = event_details.get('target_id') # Fetch the target ID + + lm.lnp(f"Handling call event. Type: {event_type}, Call ID: {call_id}, Caller: {xsi_user_id}, Call Receiver: {xsi_target_id}") + internal_xsi_user_id = xsi_target_id if xsi_target_id else xsi_user_id # Fetch the internal user ID + + if xsi_user_id and xsi_target_id: # Both Internal check + # lm.lnp("Both calls internal... handling") + self.handle_internal_call(xsi_user_id, xsi_target_id, call_id) + elif internal_xsi_user_id: # Caller external check + self.handle_external_call(xsi_target_id, call_id, event_type) + else: + lm.lnp(f"Unhandled event type {event_type}") + except Exception as e: + lm.lnp(f"Error handling call event {e}", style='error') + traceback.print_exc() + + def monitor_calls(self, events_queue): + """ + Monitor all calls for the Webex organization. + Args: + events_queue (queue.Queue): The queue storing the events. + """ + # lm.lnp('monitor_calls called') + + while True: # Start an infinite loop to get the messages as they are placed in Queue + try: + event = events_queue.get() # Get the event from the queue + if event: + self.handle_event(event) # Handle the event + time.sleep(0.5) + except Exception as e: + lm.lnp(traceback.format_exc(), style='debug') + lm.lnp(f"Error in the monitoring loop: {e}", style="error", level="error") + + def setup_xsi_events(self): + """Initialize XSI events and set up a thread to monitor calls continuously.""" + try: + lm.lnp("Initializing CallMonitor with provided access token.") + + events = wxcadm.XSIEvents(self.webex.org) + events_queue = queue.Queue() + channel = events.open_channel(events_queue) + subscription_response = channel.subscribe("Advanced Call") # Subscribe to the Advanced Call event package + + if subscription_response: + lm.lnp(f"Subscribed to 'Advanced Call' event package {subscription_response}", level="info") + else: + lm.lnp("Failed to subscribe to 'Advanced Call' event package.", level="error") + return False + + lm.lnp("Starting thread to monitor calls...", style="info", level="info") + monitor_thread = threading.Thread(target=self.monitor_calls, args=(events_queue,), daemon=True) + monitor_thread.start() + + if monitor_thread.is_alive(): + lm.lnp("Event monitoring thread is running.", style="success", level="info") + lm.lnp("\n") + lm.p_panel( + "[bright_red]Call Monitoring has been started for the organization...[/bright_red]", + title="[white]Webex setup complete. Ready for calls.[/white]", + style="webex", + expand=False + ) + return True + else: + lm.lnp("Event monitoring thread failed to start.", level="error") + return False + except Exception as e: + lm.logger.exception("Failed to setup webex call monitoring: ", exc_info=e) + return False + +async def check_token(db): + try: + crud = CRUDOperations(db) + admin_token_info = crud.read_admin_token() + if admin_token_info and not is_token_expired(admin_token_info) and not is_refresh_token_expired(admin_token_info): + admin_access_token = admin_token_info["access_token"] + return True, admin_access_token # Return both validation result and token + except Exception as e: + lm.logger.error(f"Error accessing admin token: {e}") + return False, None # Return False and None if token is invalid or an error occurred + + +async def start_call_monitoring(): + """ + Start the call monitoring process by initializing the CallMonitor class and setting up XSI events on server start if the admin token is valid in the database. + """ + db = SessionLocal() + try: + token_valid, admin_access_token = await check_token(db) # Check if the admin token is valid + if not token_valid: + lm.logger.error("Invalid or expired admin token.") + return JSONResponse(content={"message": "Invalid or expired admin token"}, status_code=403) + + lm.logger.info("Admin token in DB is valid, starting call monitoring") + call_monitor = CallMonitor(admin_access_token) + call_monitor.setup_xsi_events() # Setup monitoring of XSI events + return JSONResponse(content={"message": "Call monitoring started successfully"}, status_code=200) + except Exception as e: + lm.logger.error(f"Failed to initiate call monitoring: {e}") + return JSONResponse(status_code=500, content={"message": f"Failed to initiate call monitoring: {str(e)}"}) + finally: + db.close() diff --git a/app/config/__init__.py b/app/config/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/app/config/config.py b/app/config/config.py new file mode 100644 index 0000000..ce7dae0 --- /dev/null +++ b/app/config/config.py @@ -0,0 +1,79 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +import importlib +import pathlib +import secrets +from typing import Optional, ClassVar, Dict, Any +from dotenv import dotenv_values +from pathlib import Path + + +class Config: + _instance: ClassVar[Optional['Config']] = None + env_vars: Dict[str, Any] = {} # Initializing as a class attribute + + # DIR PATHS + DIR_PATH: ClassVar[pathlib.Path] = pathlib.Path(__file__).parents[2] + ENV_FILE_PATH: ClassVar[pathlib.Path] = Path(pathlib.Path(__file__).parents[0] / '.env') + SETTINGS_FILE_PATH: ClassVar[str] = str(pathlib.Path(__file__).parents[0] / 'settings.py') + APP_SECRET_KEY: ClassVar[str] = secrets.token_hex(32) + + def __init__(self): + # Load only the variables defined in the .env file + self.env_vars = dotenv_values(self.ENV_FILE_PATH) + for key, value in self.env_vars.items(): + setattr(self, key, value) + + # Load variables from user provided settings module + # self.settings_module = importlib.import_module("settings") + self.settings_module = importlib.import_module("config.settings") + self._load_settings_vars() + + public_url = getattr(self, 'PUBLIC_URL', "http://localhost:8000") + if public_url: + self.USER_REDIRECT_URI = f"{public_url}/user/callback" + self.ADMIN_REDIRECT_URI = f"{public_url}/admin/callback" + else: + self.USER_REDIRECT_URI = None + self.ADMIN_REDIRECT_URI = None + + def _load_settings_vars(self): + for attribute_name in dir(self.settings_module): + if not attribute_name.startswith('__') and not attribute_name.endswith('__'): + attribute_value = getattr(self.settings_module, attribute_name) + # Filter out functions and classes, only load non-callable attributes + if not callable(attribute_value): + setattr(self, attribute_name, attribute_value) + + # Add to Environment Variable Dict for printing + self.env_vars[attribute_name] = attribute_value + + @classmethod + def get_instance(cls): + if cls._instance is None: + cls._instance = cls() + return cls._instance + + @classmethod + def reload_config(cls): + cls._instance = None # Reset the singleton instance + return cls.get_instance() + + +c = Config.get_instance() # Singleton instance of Config diff --git a/app/config/settings.py b/app/config/settings.py new file mode 100644 index 0000000..0f9981b --- /dev/null +++ b/app/config/settings.py @@ -0,0 +1,28 @@ +# Non-sensitive settings +from typing import List + +# Required Environment Variables (app/config/.env file) +REQUIRED_ENV_VARS: List[str] = ['WEBEX_ADMIN_UID', 'CLIENT_ID', 'CLIENT_SECRET', 'SQLALCHEMY_DATABASE_URL'] + +# Required Settings +REQUIRED_SETTINGS: List[str] = ['LAT_MIN', 'LAT_MAX', 'LON_MIN', 'LON_MAX', 'GEOLOCATION_TIMEOUT'] + +# FastAPI Settings +APP_NAME: str = 'Webex Call Blocking by Geolocation' +APP_VERSION: str = 'POC v1.0' +UVICORN_LOG_LEVEL: str = 'WARNING' + +# Webex Integration URLs +AUTHORIZATION_BASE_URL = 'https://api.ciscospark.com/v1/authorize' +TOKEN_URL = 'https://api.ciscospark.com/v1/access_token' +WEBEX_BASE_URL = 'https://webexapis.com/v1/' +SCOPE: List[str] = ['spark:all', 'spark-admin:xsi', 'spark:xsi', 'spark-admin:locations_read', 'spark-admin:people_read', 'spark-admin:licenses_read'] +PUBLIC_URL: str = 'http://127.0.0.1:8000' + +# Geolocation bounding boxes & +LAT_MIN: float = 10.0 +LAT_MAX: float = 20.0 +LON_MIN: float = 30.0 +LON_MAX: float = 100.0 +GEOLOCATION_TIMEOUT: int = 30 + diff --git a/app/config/setup.py b/app/config/setup.py new file mode 100644 index 0000000..88f6572 --- /dev/null +++ b/app/config/setup.py @@ -0,0 +1,63 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +import typer +from app.env_manager.em import em +from app.config.settings import REQUIRED_SETTINGS, REQUIRED_ENV_VARS +from rich.console import Console + +console = Console() # Create a rich console +app = typer.Typer() # Create a Typer app + + +def print_start(): + console.print(f"[blue]\nWelcome to the app setup for Webex Call Blocking by Geolocation![/blue]") + console.print(f"To start, env variables must be setup. You will be prompted to enter all necessary env variables. Reference the README for additional information.\n" + f"1. First, login (admin) to Webex for Developers portal here: https://developer.webex.com/docs/getting-started & copy/save the Personal " + f"Access token. This will be used to retrieve/save the Webex Admin User ID to .env for FastAPI route dependency (security).") + console.print(f"2. Next, navigate to https://developer.webex.com/my-apps/new (admin) and select 'Create an Integration'\n" + f"3. Name the integration, select an icon, add App Hub Description, " + f"add Redirect URI(s): 'PUBLIC_URL/admin/callback' & 'PUBLIC_URL/user/callback', " + f"select scopes: spark:all, spark-admin:xsi,spark:xsi, spark-admin:locations_read, spark-admin:people_read, spark-admin:licenses_read" + f"4. Create Integration'") + console.print(f"5. Copy/save the Client ID & Client Secret!\n") + console.print(f"Starting the setup process...", style="bold bright_green") + + +@app.command() +def main_callback(): + """ + This callback is run before any command. + """ + print_start() + + +@app.command() +def run(): + """ + Run the setup process for the app. + """ + em.create_and_load_env_if_missing() # Create and load the .env file in app/config/.env if missing + em.ensure_vars_set(REQUIRED_ENV_VARS) + print("\n") + em.ensure_settings_set(REQUIRED_SETTINGS) + # lm.print_config_table(config_instance=c) + + +if __name__ == "__main__": + app() diff --git a/app/database/__init__.py b/app/database/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/app/database/crud.py b/app/database/crud.py new file mode 100644 index 0000000..bb88baf --- /dev/null +++ b/app/database/crud.py @@ -0,0 +1,428 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +from datetime import datetime, timezone, timedelta +from threading import local + +from sqlalchemy.exc import SQLAlchemyError +from sqlalchemy.orm import Session + +from app.logger.logrr import lm +from app.database.models import AdminToken, UserList, AllowList, TimeLocation + + +def extract_access_token(token_object): + """ Extract Webex access token from token object """ + if token_object and "access_token" in token_object: + return token_object["access_token"] + else: + raise ValueError("Access token not found in the provided token object.") + + +class CRUDOperations: + """ + Class for performing CRUD operations on the database. + + Attributes: + _instance (CRUDOperations): The instance of the CRUDOperations class. + _local (local): The threading.local object. + """ + _instance = None + _local = local() + + def __new__(cls, *args, **kwargs): + if not isinstance(cls._instance, cls): + cls._instance = super(CRUDOperations, cls).__new__(cls) + return cls._instance + + def __init__(self, db: Session): + self._local.db = db + + @property + def db(self): + return self._local.db + + def commit_db(self, db_item, operation_name): + """ + Common command call. Commits the db_item to the database and handles any SQLAlchemyError. + + Args: + db_item: The database item to commit. + operation_name (str): The name of the operation being performed. + """ + self.db.add(db_item) + try: + self.db.commit() + except SQLAlchemyError as e: + lm.lnp(f"Error occurred while committing {operation_name} to the database: {e}") + return db_item + + def create_admin_token(self, access_token: str, expires_in: int, refresh_token: str, refresh_token_expires_in: int, token_type: str, + scope: list, expires_at: float, session_token: str): + """ + Creates a new AdminToken entry in the database. + + Args: + access_token (str): The access token. + expires_in (int): The duration in seconds that the access token is valid. + refresh_token (str): The refresh token. + refresh_token_expires_in (int): The duration in seconds that the refresh token is valid. + token_type (str): The type of the token. + scope (str): The scope of the token. + expires_at (float): The timestamp when the token expires. + """ + # Convert the scope list to a string + scope_str = ' '.join(scope) + + db_item = AdminToken( + access_token=access_token, + expires_in=expires_in, + refresh_token=refresh_token, + refresh_token_expires_in=refresh_token_expires_in, + token_type=token_type, + scope=scope_str, + expires_at=expires_at, + session_token=session_token, + ) + return self.commit_db(db_item=db_item, operation_name='create_admin_token') + + def read_admin_token(self): + """ + Retrieves the AdminToken entry from the database. + """ + admin_token_entry = self.db.query(AdminToken).first() + if admin_token_entry is not None: + admin_token_data = { + "access_token": admin_token_entry.access_token, + "expires_in": admin_token_entry.expires_in, + "refresh_token": admin_token_entry.refresh_token, + "refresh_token_expires_in": admin_token_entry.refresh_token_expires_in, + "token_type": admin_token_entry.token_type, + "scope": admin_token_entry.scope, + "expires_at": admin_token_entry.expires_at, + "session_token": admin_token_entry.session_token + } + # lm.lnp(f"Retrieved admin token from the database: {admin_token_data}") + return admin_token_data + else: + lm.lnp("No admin token entry found.", level="warning", style="warning") + return None + + def update_admin_token(self, access_token: str, expires_in: int, refresh_token: str, refresh_token_expires_in: int, token_type: str, scope: list, expires_at: float, + session_token: str): + """ + Replaces the admin token in the database. Deletes all existing entries and adds a new one. + + Args: + access_token (str): The access token. + expires_in (int): The duration in seconds that the access token is valid. + refresh_token (str): The refresh token. + refresh_token_expires_in (int): The duration in seconds that the refresh token is valid. + token_type (str): The type of the token. + scope (str): The scope of the token. + expires_at (float): The timestamp when the token expires. + """ + self.delete_all_admin_tokens() + return self.create_admin_token(access_token, expires_in, refresh_token, refresh_token_expires_in, token_type, scope, expires_at, session_token) + + def delete_all_admin_tokens(self): + """ + Deletes all AdminToken entries from the database. + """ + self.db.query(AdminToken).delete() + try: + self.db.commit() + except SQLAlchemyError as e: + lm.lnp(f"Error occurred while deleting all admin tokens from the database: {e}", level="error", style="error") + + def get_admin_access_token(self): + admin_token_object = self.read_admin_token() + if not admin_token_object: + raise ValueError("Admin token object is missing or invalid.") + return extract_access_token(admin_token_object) + + def create_user_list_entry(self, user_id: str, session_token: str): + """ + Creates a new UserList entry in the database. + + Args: + db (Session): The database session. + user_id (str): The user ID. + session_token (str): The session token. + """ + db_item = UserList( + user_id=user_id, + session_token=session_token + ) + return self.commit_db(db_item=db_item, operation_name='create_user_list_entry') + + def read_user_list(self, user_id: str = None, session_token: str = None): + """ + Retrieves the UserList entry from the database using the user_id or session_token. + + Args: + user_id (str, optional): The user ID. + session_token (str, optional): The session token. + """ + if user_id: + user_list_entry = self.db.query(UserList).filter(UserList.user_id == user_id).first() + search_param = user_id + search_type = 'user ID' + elif session_token: + user_list_entry = self.db.query(UserList).filter(UserList.session_token == session_token).first() + search_param = session_token + search_type = 'session token' + else: + raise ValueError("Either user_id or session_token must be provided.") + + if user_list_entry is not None: + user_list_data = { + "user_id": user_list_entry.user_id, + "session_token": user_list_entry.session_token + } + # lm.lnp(f"Retrieved user list from the database: {user_list_data}") + return user_list_data + else: + lm.lnp(f"No user list entry found for the provided {search_type}: {search_param}") + return None + + def update_user_list_entry(self, user_id: str, session_token: str): + """ + Updates an existing UserList entry in the database. + + Args: + db (Session): The database session. + user_id (str): The user ID. + session_token (str): The session token. + """ + db_item = self.db.query(UserList).filter(UserList.user_id == user_id).first() + + if db_item: + # If a user exists, update the session_token + db_item.session_token = session_token + return self.commit_db(db_item=db_item, operation_name='update_user_list_entry') + else: + raise ValueError(f"No UserList entry found for user_id: {user_id}") + + def delete_user_list_entry(self, user_id: str): + """ + Deletes the UserList entry from the database using the user ID. + + Args: + user_id (str): The user ID. + """ + # Query for the entry + db_item = self.db.query(UserList).filter(UserList.user_id == user_id).first() + + # If the entry exists, delete it + if db_item: + self.db.delete(db_item) + return self.commit_db(db_item=db_item, operation_name='delete_user_list_entry') + + def create_allow_list_entry(self, user_id: str, allow_caller: bool): + """ + Creates a new AllowList entry in the database. + + Args: + db (Session): The database session. + user_id (str): The user ID. + allow_caller (bool): Whether the user is allowed to call. + """ + + db_item = AllowList( + user_id=user_id, allow_caller=allow_caller + ) + self.db.add(db_item) + return self.commit_db(db_item=db_item, operation_name='create_allow_list_entry') + + def update_allow_list_entry(self, user_id: str, allow_caller: bool): + """ + Updates an existing AllowList entry in the database. + + Args: + user_id (str): The user ID. + allow_caller (bool): Whether the user is allowed to call. + """ + db_item = self.db.query(AllowList).filter(AllowList.user_id == user_id).first() + + if db_item: + # If a user exists, update the allow_caller + db_item.allow_caller = allow_caller + return self.commit_db(db_item=db_item, operation_name='update_allow_list_entry') + else: + raise ValueError(f"No AllowList entry found for user_id: {user_id}") + + def read_allow_list(self): + """ + Retrieves all AllowList entries from the database. + """ + allow_list_entries = self.db.query(AllowList).all() + if allow_list_entries: + allow_list_data = [ + { + "user_id": entry.user_id, + "allow_caller": entry.allow_caller, + "geolocation_data": [ + { + "time": time_location.time, + "latitude": time_location.latitude, + "longitude": time_location.longitude, + "last_update": time_location.last_update + } + for time_location in entry.time_locations + ] + } + for entry in allow_list_entries + ] + # lm.pp(f"Retrieved allow list from the database: {allow_list_data}") + return allow_list_data + else: + lm.lnp("No allow list entries found.", level="warning", style="warning") + return None + + def get_allow_list_entry_by_user_id(self, user_id: str): + """ + Retrieves a specific AllowList entry from the database using the user ID, including the related TimeLocation data. + + Args: + user_id (str): The user ID for which to retrieve the AllowList entry. + + Returns: + A dictionary containing the AllowList entry and its related TimeLocation data, or None if not found. + """ + allow_list_entry = self.db.query(AllowList).filter(AllowList.user_id == user_id).first() # Query for the entry + if allow_list_entry: # If the entry exists + # Create a dictionary containing the AllowList entry and its related TimeLocation data + allow_list_data = { + "user_id": allow_list_entry.user_id, + "allow_caller": allow_list_entry.allow_caller, + "geolocation_data": [ + { + "time": time_location.time, + "latitude": time_location.latitude, + "longitude": time_location.longitude, + "last_update": time_location.last_update + } + for time_location in allow_list_entry.time_locations # Iterate over the related TimeLocation data + ] + } + # lm.pp(f"Retrieved allow list entry from the database: {allow_list_data}") + return allow_list_data + else: + lm.lnp(f"No allow list entry found for user_id: {user_id}.") + return None + + def delete_allow_list_entry(self, user_id: str): + """ + Deletes the AllowList entry from the database using the user ID. + + Args: + db (Session): The database session. + user_id (str): The user ID. + """ + db_item = self.db.query(AllowList).filter(AllowList.user_id == user_id).first() # Query for the entry + + if db_item: + self.db.delete(db_item) # If the entry exists, delete it + try: + self.db.commit() # Commit the deletion + except Exception as e: + lm.lnp(f"Error occurred while deleting allow list entry from the database: {e}", level="error", style="error") + + def create_time_location_entry(self, user_id: str, session_token: str, time: str, latitude: float, longitude: float): + """ + Creates a new TimeLocation entry in the database. + + Args: + user_id (str): The user ID. + session_token (str): The session token. + time (str): The time of the location data. + latitude (float): The latitude of the location. + longitude (float): The longitude of the location. + """ + db_item = TimeLocation( + user_id=user_id, + session_token=session_token, + time=time, latitude=latitude, + longitude=longitude, + last_update=datetime.now(timezone.utc).timestamp() + ) + return self.commit_db(db_item=db_item, operation_name='create_time_location_entry') + + def update_time_location_entry(self, user_id: str, session_token: str, time: str, latitude: float, longitude: float): + """ + Updates an existing TimeLocation entry in the database. If no entry exists, creates a new one. + + Args: + user_id (str): The user ID. + session_token (str): The session token. + time (str): The time of the location data. + latitude (float): The latitude of the location. + longitude (float): The longitude of the location. + """ + db_item = self.db.query(TimeLocation).filter(TimeLocation.user_id == user_id).first() + + if db_item: + # If a TimeLocation entry exists, update the fields + db_item.session_token = session_token + db_item.time = time + db_item.latitude = latitude + db_item.longitude = longitude + db_item.last_update = datetime.now(timezone.utc).timestamp() + return self.commit_db(db_item=db_item, operation_name='update_time_location_entry') + else: + # If no TimeLocation entry exists for the user_id, create a new one + return self.create_time_location_entry(user_id=user_id, session_token=session_token, time=time, latitude=latitude, longitude=longitude) + + def delete_time_location_entry(self, user_id: str): + """ + Deletes the TimeLocation entry from the database using the user ID. + + Args: + user_id (str): The user ID. + """ + # Query for the entry + db_item = self.db.query(TimeLocation).filter(TimeLocation.user_id == user_id).first() + + # If the entry exists, delete it + if db_item: + self.db.delete(db_item) + return self.commit_db(db_item=db_item, operation_name='delete_time_location_entry') + + def remove_expired_allow_list_entries(self): + """ + Iterates over all entries in the AllowList table, checks the last_update field of the related TimeLocation entry, + and removes the user from the AllowList if the last_update is more than 5 minutes ago. + """ + # Get the current time + current_time = datetime.now(timezone.utc) + + # Get all entries from the AllowList table + allow_list_entries = self.read_allow_list() + + for entry in allow_list_entries: + # Get the related TimeLocation entry + time_location_entry = self.db.query(TimeLocation).filter(TimeLocation.user_id == entry.user_id).first() + + if time_location_entry: + # Calculate the time difference between the current time and the last update + time_difference = current_time - datetime.fromtimestamp(time_location_entry.last_update, tz=timezone.utc) + + # If the last update was more than 5 minutes ago, remove the user from the AllowList + if time_difference > timedelta(minutes=5): + self.delete_allow_list_entry(user_id=entry.user_id) diff --git a/app/database/db.py b/app/database/db.py new file mode 100644 index 0000000..0a685d0 --- /dev/null +++ b/app/database/db.py @@ -0,0 +1,28 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +from sqlalchemy import create_engine +from sqlalchemy.ext.declarative import declarative_base +from sqlalchemy.orm import sessionmaker +from app.config.config import c + +SQLALCHEMY_DATABASE_URL = c.SQLALCHEMY_DATABASE_URL # Get the SQLAlchemy database URL from the config +engine = create_engine(SQLALCHEMY_DATABASE_URL) # Create the SQLAlchemy engine +SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine) # Create the SQLAlchemy session +Base = declarative_base() # Declare the Base class for SQLAlchemy ORM + diff --git a/app/database/models.py b/app/database/models.py new file mode 100644 index 0000000..ff4c2f8 --- /dev/null +++ b/app/database/models.py @@ -0,0 +1,77 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +from sqlalchemy import Column, Integer, String, Float, Boolean, ForeignKey +from sqlalchemy.orm import relationship +from app.database.db import Base + + +class AdminToken(Base): + """ + This class represents the AdminToken table in the database. + It stores the access token, refresh token, and other related information for the admin user. + """ + __tablename__ = 'admin_tokens' + id = Column(Integer, primary_key=True, index=True) # Primary key - index + access_token = Column(String, nullable=False) # Webex access token for the admin user + expires_in = Column(Integer) # Expiry time for the access token + refresh_token = Column(String) # Webex refresh token for the admin user + refresh_token_expires_in = Column(Integer) # Expiry time for the refresh token + token_type = Column(String) # Type of token + scope = Column(String) # Scope of the token + expires_at = Column(Float) # Expiry time for the access token + session_token = Column(String, nullable=False) # Web session token for the admin user + + +class UserList(Base): + """ + This class represents the UserList table in the database. + It stores the user_id and session_token for each user. + """ + __tablename__ = 'user_list' + user_id = Column(String, primary_key=True, index=True) # Primary key - Webex User ID + session_token = Column(String, nullable=False) # Web session token for the user + + +class AllowList(Base): + """ + This class represents the AllowList table in the database. + It stores the user_id and a boolean indicating if the user is allowed to make calls. + It also has a relationship with the TimeLocation table. + """ + __tablename__ = 'allow_list' + user_id = Column(String, primary_key=True, index=True) # Primary key - Webex User ID + allow_caller = Column(Boolean, default=False) # Boolean indicating if the user is allowed to make calls + time_locations = relationship("TimeLocation", back_populates="allow_list") # Relationship to TimeLocation + + +class TimeLocation(Base): + """ + This class represents the TimeLocation table in the database. + It stores the user_id, session_token, time, latitude, longitude, and last_update for each user. + It also has a relationship with the AllowList table. + """ + __tablename__ = 'time_locations' + id = Column(Integer, primary_key=True, index=True) # Primary key - index + user_id = Column(String, ForeignKey('allow_list.user_id'), nullable=False) # Foreign key to UserList - Webex User ID + session_token = Column(String, nullable=False) # Web session token for the user + time = Column(String, nullable=False) # Time of the location update + latitude = Column(Float, nullable=False) # Latitude of the location + longitude = Column(Float, nullable=False) # Longitude of the location + last_update = Column(Float, nullable=False) # Last update time + allow_list = relationship("AllowList", back_populates="time_locations") # Relationship to AllowList diff --git a/app/env_manager/__init__.py b/app/env_manager/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/app/env_manager/em.py b/app/env_manager/em.py new file mode 100644 index 0000000..54762e9 --- /dev/null +++ b/app/env_manager/em.py @@ -0,0 +1,114 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +from dotenv import load_dotenv, set_key +import os +from pathlib import Path +import typer +from app.config.config import c +from typing import ClassVar, Optional, List +from rich.console import Console + +ENV_FILE_PATH = c.ENV_FILE_PATH +ENV_PATH = ENV_FILE_PATH +console = Console() + + +class EM: + """ + Environment Manager class to manage environment variables and configuration. + """ + _instance: ClassVar[Optional['EM']] = None + + def __init__(self, env_path: Path): + """ + Initialize the Environment Manager with the path to the .env file. + """ + self.env_path = ENV_FILE_PATH + + @classmethod + def get_instance(cls) -> 'EM': + """ + Returns a singleton instance of Environment Manager. + """ + if cls._instance is None: + cls._instance = cls(env_path=ENV_FILE_PATH) + return cls._instance + + def create_and_load_env_if_missing(self): + """ + Create the .env file if it doesn't exist and load the environment variables from it. + """ + if not self.env_path.exists(): + self.env_path.touch() + load_dotenv(dotenv_path=self.env_path) + # console.print(f"Loaded environment variables from {self.env_path}: {os.environ}") + + def ensure_vars_set(self, var_names: List[str]): + """ + Ensure that the specified environment variables are set and are strings. + """ + load_dotenv(dotenv_path=self.env_path) + for var_name in var_names: + var_value = os.getenv(var_name) + if var_value is None or not isinstance(var_value, str) or var_value == '': + new_value = typer.prompt(f"Please enter a value for {var_name}") + os.environ[var_name] = new_value + set_key(self.env_path.as_posix(), var_name, new_value, quote_mode="never") + load_dotenv(dotenv_path=self.env_path) + else: + console.print(f"{var_name} is already set.", style="bright_green") + + def ensure_settings_set(self, setting_names: List[str]): + """ + Ensure that the specified settings are set and are of the correct type. + """ + settings_file_path = c.SETTINGS_FILE_PATH # Path to the settings.py file + for setting_name in setting_names: + setting_value = getattr(c, setting_name, None) + if setting_value is None or (setting_name == 'GEOLOCATION_TIMEOUT' and not isinstance(setting_value, int)) or ( + setting_name != 'GEOLOCATION_TIMEOUT' and not isinstance(setting_value, float)): + while True: # Loop until the user enters a valid value + new_value = typer.prompt(f"Please enter a value for {setting_name}") + try: + # Attempt to convert the user input to the correct type + if setting_name == 'GEOLOCATION_TIMEOUT': + new_value = int(new_value) + else: + new_value = float(new_value) + break # If the conversion is successful, break the loop + except ValueError: + console.print(f"Invalid value. Please enter a {'integer' if setting_name == 'GEOLOCATION_TIMEOUT' else 'float'} for {setting_name}.", + style="bright_red") + # Read the settings.py file + with open(settings_file_path, 'r') as file: + lines = file.readlines() + # Replace the line that contains the setting + for i, line in enumerate(lines): + if line.startswith(setting_name): + lines[i] = f"{setting_name}: {type(new_value).__name__} = {new_value}\n" + break + # Write the changes back to the settings.py file + with open(settings_file_path, 'w') as file: + file.writelines(lines) + else: + + console.print(f"{setting_name} is already set.", style="bright_green") + + +em = EM.get_instance() diff --git a/app/funcs.py b/app/funcs.py new file mode 100644 index 0000000..d80cca2 --- /dev/null +++ b/app/funcs.py @@ -0,0 +1,76 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +import secrets +from config.config import c +from datetime import datetime, timezone +from logger.logrr import lm + + +def in_country(latitude: float, longitude: float): + """ + Check if given latitude and longitude are within the bounds of the country. + """ + LAT_MIN = c.LAT_MIN # Latitude minimum and maximum values for the country + LAT_MAX = c.LAT_MAX # Latitude minimum and maximum values for the country + LON_MIN = c.LON_MIN # Longitude minimum and maximum values for the country + LON_MAX = c.LON_MAX # Longitude minimum and maximum values for the country + return LAT_MIN <= latitude <= LAT_MAX and LON_MIN <= longitude <= LON_MAX # Check if the coordinates are within the bounds + + +def is_geolocation_timeout(geolocation_data): + """Check if the geolocation data is outdated.""" + geolocation_timeout = c.GEOLOCATION_TIMEOUT # Timeout in seconds, set in .env + last_update = geolocation_data.get('last_update') # Last update time + if last_update is None: # Check if the last update time is missing + lm.lnp("No last update time found; defaulting to timeout.", style="warning", level="warning") + return True + + current_time = datetime.now(timezone.utc).timestamp() # Current time in UTC + if current_time - last_update > geolocation_timeout: # Check if the geolocation data is outdated + lm.lnp(f"Geolocation update for user {geolocation_data.get('user_id', 'Unknown')} has timed out.", style="warning", level="warning") + return True + lm.lnp(f"Geolocation update for user {geolocation_data.get('user_id', 'Unknown')} is within the allowed period.", style="success", level="info") + return False + + +def is_token_expired(token): + """Check if the token is expired.""" + try: + return datetime.now().timestamp() > token.get('expires_at', 0) # Check if the token has expired + except Exception as e: + lm.lnp(f"Error checking token expiration: {e}", style="error", level="error") + return True # Assume the token is expired if an error occurs + + +def is_refresh_token_expired(token): + """Check if the refresh token is expired.""" + try: + refresh_token_lifespan = token.get('refresh_token_expires_in', 0) # lifespan in seconds + token_acquired_time = token.get('acquired_at', datetime.now().timestamp()) # Time when the token was saved + refresh_token_expiry_time = token_acquired_time + refresh_token_lifespan # Time when the token will expire + return datetime.now().timestamp() > refresh_token_expiry_time # Check if the token has expired + except Exception as e: + lm.lnp(f"Error checking refresh token expiration: {e}", style="error", level="error") + return True # Assume the refresh token is expired if an error occurs + + +def generate_session_token(token_len: int = 24): + """Generate a random session token.""" + token: str = secrets.token_urlsafe(token_len) + return token diff --git a/app/logger/__init__.py b/app/logger/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/app/logger/custom_themes.py b/app/logger/custom_themes.py new file mode 100644 index 0000000..ffeacb6 --- /dev/null +++ b/app/logger/custom_themes.py @@ -0,0 +1,18 @@ +# Define custom themes for the rich console here +from rich.theme import Theme + +ct = Theme( + { + 'default': 'bright_white', + 'info': 'bright_white', + 'error': 'bold italic red', + 'debug': 'orange1', + 'warning': 'dark_orange', + 'webhook': 'orange1', + 'env': 'aquamarine1', + 'success': 'bright_green', + 'meraki': 'bright_green', + 'webex': 'blue', + 'maverick': 'dark_orange', + } +) diff --git a/app/logger/logrr.py b/app/logger/logrr.py new file mode 100644 index 0000000..cd63f39 --- /dev/null +++ b/app/logger/logrr.py @@ -0,0 +1,202 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +from rich.console import Console +from rich.pretty import Pretty +from rich.table import Table +from rich.panel import Panel +import logging +import logging.handlers +import queue +from rich.logging import RichHandler +from logging.handlers import TimedRotatingFileHandler +from rich import inspect +from threading import Lock +import os +from .custom_themes import ct + + +class LoggerManager: + """ + Logger Manager class to manage logging and console output. + """ + _instance = None + _lock = Lock() + + def __new__(cls, *args, **kwargs): + with cls._lock: + if cls._instance is None: + cls._instance = super(LoggerManager, cls).__new__(cls) + return cls._instance + + def __init__(self): + self.listener = None + self.console = Console(theme=ct) # Uses custom themes Class + self.log_queue = queue.Queue(-1) # No limit on size + self.queue_handler = logging.handlers.QueueHandler(self.log_queue) + self.log_dir = "logger/logs" + self.log_file = self.log_dir + "/app.log" + self.logger = self.setup() + self.original_log_level = self.logger.level + self.session_logs = {} # This will store all the logs per session + self.logger.propagate = False + self.lock = Lock() + + def setup(self): + """Set up the logger with handlers for both console and file output.""" + log_format = "%(asctime)s - %(name)s - %(levelname)s - %(message)s" + + log_directory = self.log_dir # Create the log directory if it doesn't exist + if not os.path.exists(log_directory): # Create the log directory if it doesn't exist + os.makedirs(log_directory) # Create the log directory if it doesn't exist + + file_handler = logging.FileHandler(self.log_file) # Create a file handler + + # Set up a TimedRotatingFileHandler + # file_handler = TimedRotatingFileHandler( + # filename=self.log_file, # Set the log file name + # when="D", # Rotate daily + # backupCount=28, # Keep 28 days of logs + # encoding='utf-8', # Set the encoding + # delay=False # Do not delay the file creation + # ) + file_handler.setLevel(logging.DEBUG) # Set the file handler level to DEBUG + file_handler.setFormatter(logging.Formatter(log_format)) # Set the file handler format + + console_handler = RichHandler(console=self.console, rich_tracebacks=True) # Create a console handler + console_handler.setLevel(logging.DEBUG) # Set the console handler level to DEBUG + + logger = logging.getLogger(__name__) # Get the logger + logger.setLevel(logging.DEBUG) + logger.addHandler(file_handler) # Add the file handler to the logger + logger.propagate = False + + self.listener = logging.handlers.QueueListener( + self.log_queue, console_handler, file_handler, respect_handler_level=True + ) + self.listener.start() # Start the listener + return logger # Return the logger + + def tsp(self, *args, **kwargs): + """Thread safe print.""" + with self.lock: # Use the lock to ensure thread safety + self.console.print(*args, **kwargs) # Print the args + + def pp(self, *args, style="info", level="info"): + """Pretty printing with thread safe print.""" + # Check if there are arguments to print + if args: + pretty_args = Pretty(args) # Format the args using Pretty + self.tsp(pretty_args) # Print the pretty-formatted args + # Convert the args to a single string for logging + message = ' '.join(map(str, args)) + self.lnp(message, style=style, level=level) # Log the message + + def lnp(self, message, style="info", level="info", **kwargs): + """ Log n' print the message + Log the message at the given level and print it to the console with the given style.""" + level_method = getattr(self.logger, # Get the method from the logger + level.lower(), # Convert the level to lowercase + self.logger.info # Default to info if the level is not found + ) + level_method(message, **kwargs) # Log the message + self.tsp(message, style=style, **kwargs) # Print the message + + def p_panel(self, *args, **kwargs): + """Create and print a Rich Panel in a thread-safe manner.""" + panel = Panel(*args, **kwargs) # Create a Rich Panel + self.lnp(panel) # Log and print the panel + + def lnp_wbx_oauth(self, message: str, style: str = 'webex', expand: bool = False): + """ + Wrap a message with a specific style for Webex Oauth messages and print it to the console with a Rich Panel. + """ + lm.p_panel(f'[bright_white]{message}[/bright_white]', style=style, expand=expand) + + def print_2_column_rich_table(self, data, title: str = "Table Name"): + """ + Display data in a rich table format. + """ + table = Table(title=title) + table.add_column("Variable", justify="left", style="bright_white", width=30) + table.add_column("Value", style="bright_white", width=60) + + for var_name, var_value in data: + table.add_row(var_name, str(var_value) if var_value not in [None, ""] else "Not Set") + self.tsp(table) + + def print_config_table(self, config_instance: object): + config_data = [(name, value) for name, value in config_instance.env_vars.items()] + self.print_2_column_rich_table(data=config_data, title="Environment Variables & Settings") + + def display_list_as_rich_table(self, data_list, title, headers=None): + """Display a list of dictionaries in a rich table format.""" + if not data_list or not all(isinstance(item, dict) for item in data_list): + self.tsp("Invalid data provided for the table.") + return + + headers = headers or data_list[0].keys() + table = Table(title=title) + for header in headers: + table.add_column(header, style="bright_white") + + self._add_rows_to_table(table, data_list, headers) + self.tsp(table) + + def print_start_panel(self, app_name=""): + self.lnp(Panel.fit(f'[bold bright_white]{app_name}[/bold bright_white]', title='Start', style='webex')) + + def print_exit_panel(self): + self.lnp("\n") + self.lnp(Panel.fit('Shutting down...', title='[bright_red]Exit[/bright_red]', border_style='red')) + + def debug_inspect(self, obj): + """ + Inspect an object using Rich and log the representation. + """ + inspect(obj, console=self.console, methods=True) + self.tsp(f"Inspected object: {type(obj).__name__}") + + def exception(self, message, extra_data=None): + """Log an exception along with a custom message.""" + if extra_data: + message += f' - Extra data: {extra_data}' + self.logger.exception(message) + + def print_admin_start_panel(self, public_url: str): + self.p_panel( + f'[bright_white]Hello Admin. Please login here to proceed: {public_url}/admin/login[/bright_white]', + style="orange1", + expand=False + ) + + def print_xsi_user_map(self, xsi_user_map): + # Convert the xsi_user_map dictionary to a list of dictionaries + data_list = [value for value in xsi_user_map.values()] + + # Print the data in a table format + self.display_list_as_rich_table(data_list, title="XSI User Map") + + def _add_rows_to_table(self, table, data_list, headers): + """Helper method to add rows to a table.""" + for item in data_list: + row = [str(item.get(header, '')) for header in headers] + table.add_row(*row) + + +lm = LoggerManager() diff --git a/app/main.py b/app/main.py new file mode 100644 index 0000000..2299dd9 --- /dev/null +++ b/app/main.py @@ -0,0 +1,78 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +from fastapi import FastAPI +import uvicorn +from routes import webex_router +from config.config import c +from fastapi.middleware.cors import CORSMiddleware +from fastapi.staticfiles import StaticFiles +import os +from logger.logrr import lm +from starlette.middleware.sessions import SessionMiddleware +from databases import Database +from sqlalchemy import create_engine +from app.database.models import Base +from call_monitor import start_call_monitoring + + +def create_app() -> FastAPI: + os.environ['OAUTHLIB_INSECURE_TRANSPORT'] = '1' # Allows use of localhost for testing Oauth flow + fastapi_app = FastAPI(title=c.APP_NAME, version=c.APP_VERSION) # Create the FastAPI app + + # Add CORS middleware + fastapi_app.add_middleware( + CORSMiddleware, + allow_origins=["*"], # For development, use ["*"]. For production, specify your frontend's domain + allow_credentials=True, # Allows cookies + allow_methods=["*"], # Specifies the methods (GET, POST, etc.) allowed + allow_headers=["*"], # Allows all headers + ) + + database = Database(c.SQLALCHEMY_DATABASE_URL) # Create the database object + engine = create_engine(c.SQLALCHEMY_DATABASE_URL) # Create the database engine + + @fastapi_app.on_event("startup") + async def on_startup(): + lm.print_start_panel(app_name=c.APP_NAME) # Print the start info message to console + lm.print_admin_start_panel(public_url=c.PUBLIC_URL) # Print the start info message to console + # lm.print_config_table(config_instance=c) # Print the config table to console + await database.connect() # Connect to the database + Base.metadata.create_all(bind=engine) # Create tables in the database + + # Uncomment the following lines to start call monitoring upon app startup if admin token in DB is present & valid + # try: + # await start_call_monitoring() + # except Exception as e: + # lm.error(f"Error starting call monitoring: {e}") + fastapi_app.mount("/static", StaticFiles(directory="static"), name="static") # Serve static files + + @fastapi_app.on_event("shutdown") + async def on_shutdown(): + lm.print_exit_panel() # Print the exit info message to console + await database.disconnect() # Disconnect from the database + + fastapi_app.include_router(webex_router) # Include the router + fastapi_app.add_middleware(SessionMiddleware, secret_key=c.APP_SECRET_KEY) # Add session middleware + return fastapi_app + + +app = create_app() # Create the FastAPI app + +if __name__ == "__main__": + uvicorn.run("main:app", host="0.0.0.0", port=8000, log_level="critical", reload=True) diff --git a/app/routes.py b/app/routes.py new file mode 100644 index 0000000..7747bf8 --- /dev/null +++ b/app/routes.py @@ -0,0 +1,334 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +from fastapi import Request, APIRouter, HTTPException, Depends +from fastapi.responses import HTMLResponse, RedirectResponse +from fastapi.responses import JSONResponse +from fastapi.templating import Jinja2Templates +from requests_oauthlib import OAuth2Session +from sqlalchemy.exc import SQLAlchemyError + +from call_monitor import CallMonitor +from config.config import c +from database.crud import CRUDOperations +from database.db import SessionLocal +from sqlalchemy.orm import Session + +from funcs import ( + is_token_expired, + is_refresh_token_expired, + in_country, + generate_session_token, +) +from logger.logrr import lm +from schemas import TimeLocationData +from webex_api import MyWebex + +# Importing constants/load config settings +CLIENT_ID = c.CLIENT_ID +CLIENT_SECRET = c.CLIENT_SECRET +SCOPE = c.SCOPE +PUBLIC_URL = c.PUBLIC_URL +AUTHORIZATION_BASE_URL = c.AUTHORIZATION_BASE_URL +TOKEN_URL = c.TOKEN_URL +USER_REDIRECT_URI = c.USER_REDIRECT_URI +ADMIN_REDIRECT_URI = c.ADMIN_REDIRECT_URI +WEBEX_ADMIN_UID = c.WEBEX_ADMIN_UID + +webex_router = APIRouter() +templates = Jinja2Templates(directory="templates") + + +# Dependency Injections +async def dependency_db(): + """ Using FastAPIs dependency injection system to close the database session after the request is complete. """ + db = SessionLocal() # Create a new database session + try: + yield db # Yield the database session to the route function + finally: + db.close() # Close the database session after the request is complete + + +@webex_router.get("/user/login") +async def start_user_oauth(): + """ + Initiates the OAuth flow for user authentication with Webex. + """ + try: + lm.lnp_wbx_oauth("1. Initiating OAuth flow for user authentication with Webex.") # Log the start of the OAuth flow + auth_client = OAuth2Session(CLIENT_ID, scope=SCOPE, redirect_uri=USER_REDIRECT_URI) # Create an OAuth2Session instance for the user + authorization_url, state = auth_client.authorization_url(AUTHORIZATION_BASE_URL) # Generate the authorization URL + response = RedirectResponse(url=authorization_url) # Redirect to the authorization URL + response.set_cookie(key="oauth_state", value=state) # Set the state as a cookie in the response + lm.lnp_wbx_oauth("2. OAuth flow started. Redirecting to Webex authorization URL.") # Log the redirection + return response + except Exception as e: + lm.lnp(f'Error during OAuth start: {e}', style='error', level='error') + return RedirectResponse(url="/error") # Redirect to an error page or handle error differently + + +@webex_router.get("/user/callback") +async def user_oauth_callback(request: Request, db: Session = Depends(dependency_db)): + """ + Handles the OAuth callback for the user. Fetches the access token and stores it in the database. + """ + try: + lm.lnp_wbx_oauth('3. Received OAuth callback. Attempting to fetch access token...') # Log the start of the Webex OAuth callback + state = request.cookies.get("oauth_state") # Retrieve the OAuth state from the cookie + auth_client = OAuth2Session(CLIENT_ID, state=state, redirect_uri=USER_REDIRECT_URI) # Create an OAuth2Session instance for the user + token = auth_client.fetch_token(TOKEN_URL, client_secret=CLIENT_SECRET, authorization_response=str(request.url)) # Fetch the Webex access token + if token: + lm.lnp_wbx_oauth('Access token successfully obtained') + session_token = generate_session_token() # Generate a unique session token for the user + my_webex = MyWebex(access_token=token['access_token']) # Create an instance of MyWebex with user's access token + + user_info = my_webex.get_user_info() # Retrieve user information using MyWebex instance + user_id = user_info.get('id') # Get the Webex user ID from the user information + + # Save the user_id and session_token to the UserList table + try: + crud = CRUDOperations(db) + user_list_entry = crud.read_user_list(user_id=user_id) + if user_list_entry is None: + crud.create_user_list_entry(user_id=user_id, session_token=session_token) + else: + crud.update_user_list_entry(user_id=user_id, session_token=session_token) + except Exception as e: + db.rollback() # Rollback the changes in case of an error + lm.lnp(f"Error occurred while saving user to the database: {e}", style='error', level='error') + + # Create a response and set a cookie with the session token + response = RedirectResponse(url="/user_oauth_success") + response.set_cookie(key="session_token", value=session_token, httponly=True) # Use httponly for security + return response + else: + lm.p_panel('[bright_white]Failed to obtain access token in OAuth callback.', style='error', expand=False) + return RedirectResponse(url="/error") + except Exception as e: + lm.lnp(f'Error in user OAuth callback: {e}', style='error', level='error') + return RedirectResponse(url="/error") + + +@webex_router.get("/user_oauth_success", response_class=HTMLResponse) +async def user_oauth_success(request: Request): + """ + Handles the successful OAuth authentication for the user. + Checks for the session token in the cookies. + If the token is found, the user is authenticated. + """ + session_token = request.cookies.get("session_token") # Retrieve the session token from the cookies + if session_token is None: # If the session token is not found, return an error + raise HTTPException(status_code=400, detail="User unauthorized, session token not found in cookies") + lm.lnp(f"User successfully authenticated. Session token: {session_token}. Client: {request.client.host}") # Else, log the successful authentication + return templates.TemplateResponse(name='user_oauth_success.html', context={'request': request, 'session_token': session_token}) # Return the success page + + +@webex_router.get("/admin/home") +async def admin_home(request: Request): + """ + Displays the home page for the admin. + """ + return templates.TemplateResponse("admin_home.html", {"request": request}) + + +@webex_router.get("/admin/login") +async def admin_oauth_login(): + """ + Initiates the OAuth flow for admin authentication with Webex. + """ + try: + lm.lnp_wbx_oauth("1. Initiating OAuth flow for admin authentication with Webex.") + # Start the OAuth flow if no valid token is found or if there was an error reading the token from db + auth_client = OAuth2Session(c.CLIENT_ID, scope=SCOPE, redirect_uri=ADMIN_REDIRECT_URI) + authorization_url, state = auth_client.authorization_url(c.AUTHORIZATION_BASE_URL) + response = RedirectResponse(url=authorization_url) + response.set_cookie(key="oauth_state", value=state, httponly=True, samesite='lax') + return response + except Exception as e: + lm.lnp(f'Error during OAuth start: {e}', style='error', level='error') + return RedirectResponse(url="/error") # Redirect to an error page or handle error differently + + +@webex_router.get("/admin/callback") +async def admin_callback(request: Request, db: Session = Depends(dependency_db)): + """ + Handles the OAuth callback for the admin. Fetches the access token and stores it in the database. + """ + + try: + state = request.cookies.get("oauth_state") # Retrieve the state from the cookie + auth_client = OAuth2Session(CLIENT_ID, state=state, redirect_uri=ADMIN_REDIRECT_URI) # Create an OAuth2Session instance for the admin + token = auth_client.fetch_token(TOKEN_URL, client_secret=CLIENT_SECRET, authorization_response=str(request.url)) # Fetch the access token + admin_session_token = generate_session_token(token_len=32) # Generate a unique session token for the admin + lm.lnp(f"Generated 'admin' session token: {admin_session_token} for client: {request.client.host}") + access_token = token.get("access_token") + if access_token: + my_webex = MyWebex(access_token=access_token) # Create an instance of MyWebex with admin's access token + # Retrieve user information using MyWebex instance + user_info = my_webex.get_user_info() + user_id = user_info.get('id') + user_name = user_info.get("displayName") + # lm.lnp(f"admin/login attempt by user_id: {user_id}, user_name: {user_name}", style='webex', level='info') + + if user_id != c.WEBEX_ADMIN_UID: + raise HTTPException(status_code=403, detail="Unauthorized: Admin ID does not match.") + elif user_id == c.WEBEX_ADMIN_UID: + lm.lnp(f"Admin successfully authenticated.") + # lm.lnp(f"Admin {user_id}, user_name: {user_name} successfully authenticated.", style="success", level='info') + crud = CRUDOperations(db) + crud.update_admin_token(**token, session_token=admin_session_token) # Process and store the admin token securely + response = RedirectResponse(url="/admin_success") # Redirect to the login page + response.set_cookie(key="session_token", value=admin_session_token, httponly=True) # Set the session token as a cookie in the response + response.set_cookie(key="is_admin_authenticated", value="true", httponly=True) # Set a flag in the cookie + return response + except HTTPException as e: + return JSONResponse(content={"message": f"Error during admin OAuth callback {e}"}, status_code=e.status_code) + except Exception as e: + lm.lnp(f"Error during admin callback: {e}", level='error', style='error') + return JSONResponse(content={"message": f"Error during admin OAuth callback {e}"}, status_code=500) + + +@webex_router.get("/admin_success", response_class=HTMLResponse) +async def admin_success(request: Request): + """ + Handles the successful OAuth authentication for the admin. + """ + # Check if the admin has been authenticated through the callback + is_admin_authenticated = request.cookies.get("is_admin_authenticated") == "true" + if not is_admin_authenticated: + return JSONResponse(content={"message": "Unauthorized access. Admin login required."}, status_code=403) + session_token = request.cookies.get("session_token") + lm.lnp(f"Admin successfully authenticated. Session token: {session_token}. Client: {request.client.host}") + return templates.TemplateResponse(name='admin_success.html', context={'request': request, 'session_token': session_token}) + + +@webex_router.get("/admin/refresh_token") +async def refresh_token(db: Session = Depends(dependency_db)): + """ + Refreshes the admin's access token. + """ + token = CRUDOperations(db).read_admin_token() + + lm.lnp('Starting token refresh process...', style='webex') + if token and 'refresh_token' in token: + try: + lm.lnp('Refreshing access token...', style='webex') + auth_client = OAuth2Session(CLIENT_ID, token=token) + new_token = auth_client.refresh_token(TOKEN_URL, client_id=CLIENT_ID, client_secret=CLIENT_SECRET) + CRUDOperations(db).update_admin_token(**new_token) + return RedirectResponse(url="/admin_success") + except Exception as e: + lm.lnp(f'Error refreshing token: {e}', style='error', level='error') + return RedirectResponse(url="/admin/login") + else: + lm.lnp('No refresh token found.', style='error', level='error') + return RedirectResponse(url="/admin/login") + + +@webex_router.post("/start-call-monitoring") +async def start_call_monitoring(request: Request, db: Session = Depends(dependency_db)): + """ + Start the call monitoring process for Webex Organization. + """ + lm.lnp_wbx_oauth("Attempting to start call monitoring process for Webex Organization...") + is_admin_authenticated = request.cookies.get("is_admin_authenticated") == "true" # Check if the admin has been authenticated through the callback + if not is_admin_authenticated: # If the admin is not authenticated, return an error + lm.lnp("Unauthorized access. Admin login required.", level="error") + return JSONResponse(content={"message": "Unauthorized access. Admin login required."}, status_code=403) + + crud = CRUDOperations(db) # Create an instance of CRUDOperations + admin_access_token = crud.get_admin_access_token() # Retrieve the admin access token from the database + if not admin_access_token: # If the admin access token is not found, return an error + lm.lnp("Admin token retrieval failed", level="error") + return JSONResponse(status_code=500, content={"message": "Admin token retrieval failed"}) + + try: + call_monitor = CallMonitor(admin_access_token) + setup_result = call_monitor.setup_xsi_events() # Setup monitoring of XSI events + if setup_result: + lm.lnp("Call monitoring process started successfully.", level="success") + return JSONResponse(content={"redirect": "/admin_success"}, status_code=200) + else: + lm.lnp("Failed to start call monitoring process.", level="error") + return JSONResponse(content={"message": "Failed to initiate call monitoring"}, status_code=500) + except Exception as e: + lm.lnp(f"Failed to initiate call monitoring: {e}", level="error") + return JSONResponse(status_code=500, content={"message": f"Failed to initiate call monitoring: {str(e)}"}) + + +@webex_router.post("/update-time-location-db") +async def update_time_location_db(data: TimeLocationData, db: Session = Depends(dependency_db)): + """ + Update the TimeLocation table in the database with the received data. + """ + crud = CRUDOperations(db) + try: + lm.lnp(f"Geolocation update received for user session: {data.sessionToken}") + lm.lnp(f"Geolocation update received with data:{data}") + + user_list_entry = crud.read_user_list(session_token=data.sessionToken) # Check if the session token exists in the UserList table + if user_list_entry is None: # If the session token is not found, return an error + return JSONResponse(content={"message": "Invalid session token"}, status_code=401) + + user_id = user_list_entry['user_id'] # Get the user_id from the UserList entry + + user_is_in_country = in_country(data.latitude, data.longitude) # Check if the user is in the allowed country + if not user_is_in_country: # If the user is not in the allowed country, return an error + lm.lnp(f"Geolocation update received for user session: {data.sessionToken}. User unauthorized: user location outside boundaries of allowed country", style='error', level='error') + + return JSONResponse(content={"message": "User unauthorized: user location outside boundaries of allowed country"}, status_code=403) + + allow_list_entry = crud.get_allow_list_entry_by_user_id(user_id=user_id) # Check if the user is in the AllowList + if allow_list_entry: # If the user is in the AllowList, update the TimeLocation table + crud.update_time_location_entry( + user_id=user_id, + session_token=data.sessionToken, + time=data.time, + latitude=data.latitude, + longitude=data.longitude + ) + return JSONResponse(content={"message": "Geolocation updated successfully in database"}) + else: + lm.lnp(f"User {user_id} not in allow list but within geolocation boundaries, adding to allow list.", style='maverick') + crud.create_allow_list_entry(user_id=user_id, allow_caller=True) # Add to the allow_list if not present and user is in the allowed country + # Update the TimeLocation table after adding to user AllowList + crud.update_time_location_entry( + user_id=user_id, + session_token=data.sessionToken, + time=data.time, + latitude=data.latitude, + longitude=data.longitude + ) + return JSONResponse(content={"message": "Geolocation updated and user added to AllowList"}) + except SQLAlchemyError as e: + db.rollback() # Rollback the changes in case of an error + lm.lnp(f"Database error occurred while updating geolocation: {e}", style='error', level='error') # Log the error + return JSONResponse(content={"message": f"Database error occurred while updating geolocation: {e}"}, status_code=500) # Return an error response + except HTTPException as e: + db.rollback() # Rollback the changes in case of an error + lm.lnp(f"HTTP error occurred while updating geolocation: {e.detail}", style='error', level='error') # Log the error + return JSONResponse(content={"message": f"HTTP error occurred while updating geolocation: {e.detail}"}, status_code=e.status_code) # Return an error response + except Exception as e: + db.rollback() # Rollback the changes in case of an error + lm.lnp(f"Unexpected error occurred while updating geolocation: {e}", style='error', level='error') # Log the error + return JSONResponse(content={"message": f"Unexpected error occurred while updating geolocation: {e}"}, status_code=500) # Return an error response + + +@webex_router.get("/error") +async def get_error(request: Request): + return templates.TemplateResponse("error.html", {"request": request}) diff --git a/app/schemas.py b/app/schemas.py new file mode 100644 index 0000000..987d0bc --- /dev/null +++ b/app/schemas.py @@ -0,0 +1,29 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +from pydantic import BaseModel, Field + + +class TimeLocationData(BaseModel): + """ + Pydantic model for the TimeLocation data. + """ + sessionToken: str = Field(..., alias='sessionToken') # Webex session token + time: str # Time in HH:MM format + latitude: float # Latitude + longitude: float # Longitude diff --git a/app/static/Chart.js-2.9.3/bower.json b/app/static/Chart.js-2.9.3/bower.json new file mode 100644 index 0000000..588bcfd --- /dev/null +++ b/app/static/Chart.js-2.9.3/bower.json @@ -0,0 +1,16 @@ +{ + "name": "chart.js", + "description": "Simple HTML5 charts using the canvas element.", + "homepage": "https://www.chartjs.org", + "license": "MIT", + "version": "2.9.3", + "main": "./dist/Chart.js", + "ignore": [ + ".github", + ".codeclimate.yml", + ".gitignore", + ".npmignore", + ".travis.yml", + "scripts" + ] +} \ No newline at end of file diff --git a/app/static/css/cui-standard.css b/app/static/css/cui-standard.css new file mode 100644 index 0000000..b62cbac --- /dev/null +++ b/app/static/css/cui-standard.css @@ -0,0 +1,16467 @@ +@charset "UTF-8"; +/*! + * cisco-ui - Cisco UI Kit + * @version 2.0.4 + * @home https://www.cisco.com + * @license 2020 Cisco Systems, Inc. All rights reserved. Terms and Conditions: http://cisco.com/en/US/swassets/sw293/sitewide_important_notices.html + */:root { + --cui-font-size:14px; + --cui-font-size-xs:10px; + --cui-font-size-sm:12px; + --cui-font-size-lg:16px; + --cui-font-size-18:18px; + --cui-font-size-20:20px; + --cui-font-size-24:24px; + --cui-font-stack:'CiscoSans', + 'Arial', + sans-serif; + --cui-font-mono-stack:Monaco, + Inconsolata, + Consolas, + 'Courier New', + Courier, + 'Lucida Console', + monospace; + --cui-font-weight:normal; + --cui-header-height:50px; + --cui-item-height:34px; + --cui-line-height:1.5; + --cui-spacing:16px; + --cui-spacing-qtr:calc(var(--cui-spacing) * .25); + --cui-spacing-half:calc(var(--cui-spacing) * .5); + --cui-spacing-triqtr:calc(var(--cui-spacing) * .75); + --cui-spacing-dbl:calc(var(--cui-spacing) * 2); + --cui-color-white:#ffffff; + --cui-color-gray-100:#f8f8f8; + --cui-color-gray-200:#f2f2f2; + --cui-color-gray-300:#dee2e6; + --cui-color-gray-400:#ced4da; + --cui-color-gray-500:#adb5bd; + --cui-color-gray-600:#6c757d; + --cui-color-gray-700:#495057; + --cui-color-gray-800:#343a40; + --cui-color-gray-900:#212529; + --cui-color-black:#000000; + --cui-color-danger:#e2231a; + --cui-color-info:#64bbe3; + --cui-color-midnight:#0d274d; + --cui-color-ocean:#1e4471; + --cui-color-sky:#00bceb; + --cui-color-sky-rgb:0, + 188, + 235; + --cui-color-success:#6abf4b; + --cui-color-warning:#fbab18; + --cui-color-warning-alt:#eed202; + --cui-color-link:#0175a2; + --cui-color-dark:var(--cui-font-color); + --cui-color-light:var(--cui-color-white); + --cui-theme-primary:var(--cui-color-sky); + --cui-theme-primary-darker:#00a3d2; + --cui-theme-primary-lighter:#1ad6ff; + --cui-theme-primary-color:var(--cui-color-dark); + --cui-theme-primary-rgb:0, + 188, + 235; + --cui-theme-secondary:var(--cui-color-ocean); + --cui-theme-secondary-darker:#052b58; + --cui-theme-secondary-lighter:#385e8b; + --cui-theme-secondary-color:var(--cui-color-light); + --cui-theme-secondary-rgb:30, + 68, + 113; + --cui-theme-primary-link-decoration:none; + --cui-theme-tertiary:var(--cui-color-midnight); + --cui-theme-tertiary-darker:#000E34; + --cui-theme-tertiary-lighter:#274167; + --cui-theme-tertiary-color:var(--cui-color-light); + --cui-theme-tertiary-rgb:13 39 77; + --cui-theme-tertiary-link-decoration:underline; + --cui-theme-success:var(--cui-color-success); + --cui-theme-success-darker:#51a632; + --cui-theme-success-lighter:#84d965; + --cui-theme-success-color:var(--cui-color-dark); + --cui-theme-success-rgb:106, + 191, + 75; + --cui-theme-success-link-decoration:none; + --cui-theme-info:var(--cui-color-info); + --cui-theme-info-darker:#4BA2CA; + --cui-theme-info-lighter:#7ED5FD; + --cui-theme-info-color:var(--cui-color-dark); + --cui-theme-info-rgb:100, + 187, + 227; + --cui-theme-info-link-decoration:none; + --cui-theme-warning-alt:var(--cui-color-warning-alt); + --cui-theme-warning-alt-darker:#d75d17; + --cui-theme-warning-alt-lighter:#f17630; + --cui-theme-warning-alt-color:var(--cui-color-dark); + --cui-theme-warning-alt-rgb:239, + 103, + 25; + --cui-theme-warning-alt-link-decoration:underline; + --cui-theme-warning:var(--cui-color-warning); + --cui-theme-warning-darker:#E29200; + --cui-theme-warning-lighter:#FFC532; + --cui-theme-warning-color:var(--cui-color-dark); + --cui-theme-warning-rgb:251, + 171, + 24; + --cui-theme-warning-link-decoration:underline; + --cui-theme-danger:var(--cui-color-danger); + --cui-theme-danger-darker:#C90A01; + --cui-theme-danger-lighter:#FC3D34; + --cui-theme-danger-color:var(--cui-color-light); + --cui-theme-danger-rgb:226, + 35, + 26; + --cui-theme-danger-link-decoration:underline; + --cui-theme-dark:var(--cui-color-gray-700); + --cui-theme-dark-darker:#30373e; + --cui-theme-dark-lighter:#636a71; + --cui-theme-dark-color:var(--cui-color-light); + --cui-theme-dark-rgb:88, + 88, + 91; + --cui-theme-dark-link-decoration:underline; + --cui-theme-light:var(--cui-color-gray-400); + --cui-theme-light-darker:var(--cui-color-gray-500); + --cui-theme-light-lighter:var(--cui-color-gray-300); + --cui-theme-light-color:var(--cui-color-dark); + --cui-theme-light-rgb:206, + 212, + 218; + --cui-theme-light-link-decoration:none; + --cui-brand-colors:sky, + midnight, + ocean; + --cui-theme-colors:primary,secondary,tertiary,success,danger,warning-alt,warning,dark,light; + --cui-gray-colors:white, + gray-100, + gray-200, + gray-300, + gray-400, + gray-500, + gray-600, + gray-700, + gray-800, + gray-900, + black; + --cui-status-colors:success, + info, + warning, + warning-alt, + danger; + --cui-misc-colors:link; + --cui-accent-color:var(--cui-color-sky); + --cui-accent-color-rgb:var(--cui-color-sky-rgb); + --cui-accent-thickness:3px; + --cui-backdrop-color:var(--cui-color-gray-400); + --cui-backdrop-opacity:.5; + --cui-background-color:var(--cui-color-white); + --cui-background-active:var(--cui-color-gray-200); + --cui-background-inactive:var(--cui-color-gray-100); + --cui-background-alt:var(--cui-color-gray-200); + --cui-background-hover:var(--cui-color-gray-100); + --cui-background-selection:var(--cui-accent-color); + --cui-background-selected:var(--cui-color-gray-300); + --cui-border-form-color:var(--cui-color-gray-500); + --cui-border-color:var(--cui-color-gray-300); + --cui-border-radius:2px; + --cui-border-radius-round:2rem; + --cui-border-thickness:1px; + --cui-border:var(--cui-border-thickness) solid var(--cui-border-color); + --cui-headings-line-height:1.2; + --cui-headings-margin:var(--cui-spacing-half); + --cui-shadow-inset:inset 0 4px 8px -4px rgba(0, + 0, + 0, + .25); + --cui-shadow-inset-sm:inset 0 2px 4px -2px rgba(0, + 0, + 0, + .25); + --cui-shadow-inset-lg:inset 0 8px 16px -8px rgba(0, + 0, + 0, + .25); + --cui-shadow-outset-color:rgba(0, + 0, + 0, + .15); + --cui-shadow-outset:0 4px 8px var(--cui-shadow-outset-color); + --cui-shadow-outset-sm:0 2px 4px var(--cui-shadow-outset-color); + --cui-shadow-outset-lg:0 8px 16px var(--cui-shadow-outset-color); + --cui-sidebar-width:270px; + --cui-focus-opacity:.25; + --cui-focus-thickness:3px; + --cui-focus-color:var(--cui-accent-color-rgb); + --cui-font-color:var(--cui-color-gray-900); + --cui-active-color:var(--cui-font-color); + --cui-inactive-color:var(--cui-color-gray-700); + --cui-link-color:var(--cui-color-link); + --cui-link-color-active:var(--cui-color-ocean); + --cui-link-font-weight:var(--cui-font-weight); + --cui-default-page-width:1600px; + --cui-min-page-width:320px; + --cui-max-page-width:2560px; + --cui-max-zindex:1000; + --cui-icon-size:var(--cui-spacing); + --cui-animate-speed:.25s; + --cui-animate-timing-function:ease +} +.cui .blockquote, +.cui blockquote { + --cui-blockquote-margin:var(--cui-spacing-half) 0 var(--cui-spacing) 0; + --cui-blockquote-default-position:left; + --cui-blockquote-default-padding:var(--cui-spacing-half); + --cui-blockquote-compressed-padding:var(--cui-spacing-qtr); + --cui-blockquote-regular-padding:var(--cui-blockquote-default-padding); + --cui-blockquote-loose-padding:var(--cui-spacing) +} +.cui .btn, +.cui .btn-group { + --cui-button-border-radius:var(--cui-border-radius-round); + --cui-button-border-thickness:var(--cui-border-thickness); + --cui-button-font-weight:normal; + --cui-button-hover-opacity:.9; + --cui-button-spacing:var(--cui-spacing-half); + --cui-button-text-transform:none; + --cui-button-wide-padding:calc(var(--cui-spacing) * 3); + --cui-button-colors:primary,secondary,success,dark +} +.cui .footer { + --cui-footer-padding:var(--cui-spacing) +} +.cui .checkbox, +.cui .form-group, +.cui .radio, +.cui .select, +.cui .switch { + --cui-form-background:transparent; + --cui-form-icon-dropdown-font-size:var(--cui-font-size-xs); + --cui-form-help-font-size:90%; + --cui-form-help-transform:none; + --cui-form-icon-size:var(--cui-font-size); + --cui-form-icon-yoffset:calc(calc(var(--cui-form-size) * .5) - (calc(var(--cui-form-icon-dropdown-font-size) * .5))); + --cui-form-label-color:var(--cui-active-color); + --cui-form-label-spacing:var(--cui-spacing-qtr); + --cui-form-label-transform:normal; + --cui-form-label-font-size:var(--cui-font-size); + --cui-form-label-font-weight:var(--cui-font-weight); + --cui-form-line-height:1.2; + --cui-form-padding:var(--cui-spacing-half); + --cui-form-placeholder-font-size:var(--cui-font-size-sm); + --cui-form-size:35px; + --cui-form-value-color:var(--cui-active-color); + --cui-form-value-font-weight:var(--cui-font-weight) +} +.cui .loader, +.cui .loading-spinner { + --cui-loader-animation-speed:1.1s; + --cui-loader-border-thickness:var(--cui-border-thickness); + --cui-loader-border-color:var(--cui-border-color); + --cui-loader-spinner-color:var(--cui-accent-color); + --cui-loader-zindex:var(--cui-max-zindex) +} +.cui .panel { + --cui-panel-border-radius:0; + --cui-panel-well:var(--cui-shadow-inset); + --cui-panel-default-padding:var(--cui-spacing-half); + --cui-panel-none-padding:0; + --cui-panel-compressed-padding:var(--cui-spacing-qtr); + --cui-panel-regular-padding:var(--cui-panel-default-padding); + --cui-panel-loose-padding:var(--cui-spacing) +} +.cui .step, +.cui .ui-step { + --cui-step-background-visited:var(--cui-background-inactive); + --cui-step-line-thickness-visited:var(--cui-border-thickness); + --cui-step-line-thickness-inactive:var(--cui-border-thickness); + --cui-step-size:40px; + --cui-step-font-size:var(--cui-font-size); + --cui-step-size-dot:12px; + --cui-step-font-size-dot:0; + --cui-step-size-small:32px; + --cui-step-font-size-small:var(--cui-font-size-sm); + --cui-step-size-large:48px; + --cui-step-font-size-large:var(--cui-font-size-lg) +} +.cui [data-balloon] { + --cui-tooltip-background:var(--cui-color-gray-700); + --cui-tooltip-border-radius:var(--cui-border-radius); + --cui-tooltip-padding:var(--cui-spacing-qtr) var(--cui-spacing-half) +} +:root .cui[data-theme=dark] { + --cui-font-weight:normal; + --cui-color-dark:var(--cui-color-gray-900); + --cui-color-light:var(--cui-color-white); + --cui-background-alt:var(--cui-color-gray-700); + --cui-background-color:var(--cui-color-gray-900); + --cui-background-active:var(--cui-color-gray-700); + --cui-background-inactive:var(--cui-color-gray-800); + --cui-background-hover:var(--cui-color-gray-700); + --cui-background-selected:var(--cui-color-gray-600); + --cui-theme-secondary:var(--cui-color-white); + --cui-theme-secondary-darker:var(--cui-color-gray-100); + --cui-theme-secondary-lighter:var(--cui-color-white); + --cui-theme-secondary-color:var(--cui-color-dark); + --cui-theme-secondary-rgb:30,68,113; + --cui-theme-primary-link-decoration:none; + --cui-border-color:var(--cui-color-gray-700); + --cui-border:1px solid var(--cui-border-color); + --cui-border-radius:0px; + --cui-shadow-outset-color:var(--cui-color-black); + --cui-font-color:var(--cui-color-white); + --cui-active-color:var(--cui-color-white); + --cui-inactive-color:var(--cui-color-gray-500); + --cui-link-color:var(--cui-accent-color); + --cui-link-color-active:var(--cui-accent-color) +} +.cui[data-theme=dark] .alert { + --cui-alert-background-opacity:.4 +} +.cui[data-theme=dark] .dropdown { + --cui-dropdown-background-color:var(--cui-color-gray-800); + --cui-dropdown-icon-selected:var(--cui-color-white) +} +.cui[data-theme=dark] .checkbox, +.cui[data-theme=dark] .form-group, +.cui[data-theme=dark] .radio, +.cui[data-theme=dark] .select, +.cui[data-theme=dark] .switch { + --cui-form-label-spacing:7px; + --cui-form-background:var(--cui-color-gray-800) +} +.cui[data-theme=dark] .header { + --cui-header-border-bottom:none; + --cui-header-background:var(--cui-color-gray-800) +} +.cui[data-theme=dark] .modal { + --cui-modal-background:var(--cui-color-gray-700) +} +.cui[data-theme=dark] .pagination { + --cui-pagination-background:var(--cui-color-gray-700) +} +.cui[data-theme=dark] .radio { + --cui-radio-border-thickness:2px; + --cui-radio-knob-background:var(--cui-background-color) +} +.cui[data-theme=dark] .switch { + --cui-switch-slider-background:var(--cui-color-gray-600) +} +.full-page { + position:fixed; + top:0; + right:0; + bottom:0; + left:0 +} +.divider--vertical>:after { + color:var(--cui-border-color); + content:'|'; + margin:0 var(--cui-spacing-qtr); + padding:0 +} +.container, +.container-fluid { + padding-right:10px; + padding-left:10px; + margin-right:auto; + margin-left:auto; + width:100% +} +@media (min-width:576px) { + .container { + max-width:540px + } +} +@media (min-width:768px) { + .container { + max-width:720px + } +} +@media (min-width:992px) { + .container { + max-width:992px + } +} +@media (min-width:1200px) { + .container { + max-width:1440px + } +} +@media (min-width:1440px) { + .container { + max-width:2560px + } +} +@media (min-width:1600px) { + .container { + max-width:2560px + } +} +@media (min-width:1840px) { + .container { + max-width:2560px + } +} +@media (min-width:2100px) { + .container { + max-width:2560px + } +} +.row { + display:flex; + flex-wrap:wrap; + margin-right:-10px; + margin-left:-10px +} +.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-2xl, +.col-2xl-1, +.col-2xl-10, +.col-2xl-11, +.col-2xl-12, +.col-2xl-2, +.col-2xl-3, +.col-2xl-4, +.col-2xl-5, +.col-2xl-6, +.col-2xl-7, +.col-2xl-8, +.col-2xl-9, +.col-2xl-auto, +.col-3, +.col-3xl, +.col-3xl-1, +.col-3xl-10, +.col-3xl-11, +.col-3xl-12, +.col-3xl-2, +.col-3xl-3, +.col-3xl-4, +.col-3xl-5, +.col-3xl-6, +.col-3xl-7, +.col-3xl-8, +.col-3xl-9, +.col-3xl-auto, +.col-4, +.col-4xl, +.col-4xl-1, +.col-4xl-10, +.col-4xl-11, +.col-4xl-12, +.col-4xl-2, +.col-4xl-3, +.col-4xl-4, +.col-4xl-5, +.col-4xl-6, +.col-4xl-7, +.col-4xl-8, +.col-4xl-9, +.col-4xl-auto, +.col-5, +.col-5xl, +.col-5xl-1, +.col-5xl-10, +.col-5xl-11, +.col-5xl-12, +.col-5xl-2, +.col-5xl-3, +.col-5xl-4, +.col-5xl-5, +.col-5xl-6, +.col-5xl-7, +.col-5xl-8, +.col-5xl-9, +.col-5xl-auto, +.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%; + min-height:1px; + padding-right:10px; + padding-left:10px +} +[data-balloon]:after, +[data-balloon]:before { + -khtml-opacity:0; + pointer-events:none; + transition:all .18s ease-out .18s; + position:absolute; + z-index:10 +} +.col { + flex-basis:0; + flex-grow:1; + max-width:100% +} +.col-auto { + flex:0 0 auto; + width:auto; + max-width:none +} +.col-1 { + flex:0 0 8.33333%; + max-width:8.33333% +} +.col-2 { + flex:0 0 16.66667%; + max-width:16.66667% +} +.col-3 { + flex:0 0 25%; + max-width:25% +} +.col-4 { + flex:0 0 33.33333%; + max-width:33.33333% +} +.col-5 { + flex:0 0 41.66667%; + max-width:41.66667% +} +.col-6 { + flex:0 0 50%; + max-width:50% +} +.col-7 { + flex:0 0 58.33333%; + max-width:58.33333% +} +.col-8 { + flex:0 0 66.66667%; + max-width:66.66667% +} +.col-9 { + flex:0 0 75%; + max-width:75% +} +.col-10 { + flex:0 0 83.33333%; + max-width:83.33333% +} +.col-11 { + flex:0 0 91.66667%; + max-width:91.66667% +} +.col-12 { + flex:0 0 100%; + max-width:100% +} +.order-first { + order:-1 +} +.order-last { + order:13 +} +.order-0 { + order:0 +} +.cui .timeline.timeline--right .timeline__item .timeline__icon, +.order-1 { + order:1 +} +.order-2 { + order:2 +} +.order-3 { + order:3 +} +.order-4 { + order:4 +} +.order-5 { + order:5 +} +.order-6 { + order:6 +} +.order-7 { + order:7 +} +.order-8 { + order:8 +} +.order-9 { + order:9 +} +.order-10 { + order:10 +} +.order-11 { + order:11 +} +.order-12 { + order:12 +} +.offset-1 { + margin-left:8.33333% +} +.offset-2 { + margin-left:16.66667% +} +.offset-3 { + margin-left:25% +} +.offset-4 { + margin-left:33.33333% +} +.offset-5 { + margin-left:41.66667% +} +.offset-6 { + margin-left:50% +} +.offset-7 { + margin-left:58.33333% +} +.offset-8 { + margin-left:66.66667% +} +.offset-9 { + margin-left:75% +} +.offset-10 { + margin-left:83.33333% +} +.offset-11 { + margin-left:91.66667% +} +@media (min-width:576px) { + .col-sm { + flex-basis:0; + flex-grow:1; + max-width:100% + } + .col-sm-auto { + flex:0 0 auto; + width:auto; + max-width:none + } + .col-sm-1 { + flex:0 0 8.33333%; + max-width:8.33333% + } + .col-sm-2 { + flex:0 0 16.66667%; + max-width:16.66667% + } + .col-sm-3 { + flex:0 0 25%; + max-width:25% + } + .col-sm-4 { + flex:0 0 33.33333%; + max-width:33.33333% + } + .col-sm-5 { + flex:0 0 41.66667%; + max-width:41.66667% + } + .col-sm-6 { + flex:0 0 50%; + max-width:50% + } + .col-sm-7 { + flex:0 0 58.33333%; + max-width:58.33333% + } + .col-sm-8 { + flex:0 0 66.66667%; + max-width:66.66667% + } + .col-sm-9 { + flex:0 0 75%; + max-width:75% + } + .col-sm-10 { + flex:0 0 83.33333%; + max-width:83.33333% + } + .col-sm-11 { + flex:0 0 91.66667%; + max-width:91.66667% + } + .col-sm-12 { + flex:0 0 100%; + max-width:100% + } + .order-sm-first { + order:-1 + } + .order-sm-last { + order:13 + } + .order-sm-0 { + order:0 + } + .order-sm-1 { + order:1 + } + .order-sm-2 { + order:2 + } + .order-sm-3 { + order:3 + } + .order-sm-4 { + order:4 + } + .order-sm-5 { + order:5 + } + .order-sm-6 { + order:6 + } + .order-sm-7 { + order:7 + } + .order-sm-8 { + order:8 + } + .order-sm-9 { + order:9 + } + .order-sm-10 { + order:10 + } + .order-sm-11 { + order:11 + } + .order-sm-12 { + order:12 + } + .offset-sm-0 { + margin-left:0 + } + .offset-sm-1 { + margin-left:8.33333% + } + .offset-sm-2 { + margin-left:16.66667% + } + .offset-sm-3 { + margin-left:25% + } + .offset-sm-4 { + margin-left:33.33333% + } + .offset-sm-5 { + margin-left:41.66667% + } + .offset-sm-6 { + margin-left:50% + } + .offset-sm-7 { + margin-left:58.33333% + } + .offset-sm-8 { + margin-left:66.66667% + } + .offset-sm-9 { + margin-left:75% + } + .offset-sm-10 { + margin-left:83.33333% + } + .offset-sm-11 { + margin-left:91.66667% + } +} +@media (min-width:768px) { + .col-md { + flex-basis:0; + flex-grow:1; + max-width:100% + } + .col-md-auto { + flex:0 0 auto; + width:auto; + max-width:none + } + .col-md-1 { + flex:0 0 8.33333%; + max-width:8.33333% + } + .col-md-2 { + flex:0 0 16.66667%; + max-width:16.66667% + } + .col-md-3 { + flex:0 0 25%; + max-width:25% + } + .col-md-4 { + flex:0 0 33.33333%; + max-width:33.33333% + } + .col-md-5 { + flex:0 0 41.66667%; + max-width:41.66667% + } + .col-md-6 { + flex:0 0 50%; + max-width:50% + } + .col-md-7 { + flex:0 0 58.33333%; + max-width:58.33333% + } + .col-md-8 { + flex:0 0 66.66667%; + max-width:66.66667% + } + .col-md-9 { + flex:0 0 75%; + max-width:75% + } + .col-md-10 { + flex:0 0 83.33333%; + max-width:83.33333% + } + .col-md-11 { + flex:0 0 91.66667%; + max-width:91.66667% + } + .col-md-12 { + flex:0 0 100%; + max-width:100% + } + .order-md-first { + order:-1 + } + .order-md-last { + order:13 + } + .order-md-0 { + order:0 + } + .order-md-1 { + order:1 + } + .order-md-2 { + order:2 + } + .order-md-3 { + order:3 + } + .order-md-4 { + order:4 + } + .order-md-5 { + order:5 + } + .order-md-6 { + order:6 + } + .order-md-7 { + order:7 + } + .order-md-8 { + order:8 + } + .order-md-9 { + order:9 + } + .order-md-10 { + order:10 + } + .order-md-11 { + order:11 + } + .order-md-12 { + order:12 + } + .offset-md-0 { + margin-left:0 + } + .offset-md-1 { + margin-left:8.33333% + } + .offset-md-2 { + margin-left:16.66667% + } + .offset-md-3 { + margin-left:25% + } + .offset-md-4 { + margin-left:33.33333% + } + .offset-md-5 { + margin-left:41.66667% + } + .offset-md-6 { + margin-left:50% + } + .offset-md-7 { + margin-left:58.33333% + } + .offset-md-8 { + margin-left:66.66667% + } + .offset-md-9 { + margin-left:75% + } + .offset-md-10 { + margin-left:83.33333% + } + .offset-md-11 { + margin-left:91.66667% + } +} +@media (min-width:992px) { + .col-lg { + flex-basis:0; + flex-grow:1; + max-width:100% + } + .col-lg-auto { + flex:0 0 auto; + width:auto; + max-width:none + } + .col-lg-1 { + flex:0 0 8.33333%; + max-width:8.33333% + } + .col-lg-2 { + flex:0 0 16.66667%; + max-width:16.66667% + } + .col-lg-3 { + flex:0 0 25%; + max-width:25% + } + .col-lg-4 { + flex:0 0 33.33333%; + max-width:33.33333% + } + .col-lg-5 { + flex:0 0 41.66667%; + max-width:41.66667% + } + .col-lg-6 { + flex:0 0 50%; + max-width:50% + } + .col-lg-7 { + flex:0 0 58.33333%; + max-width:58.33333% + } + .col-lg-8 { + flex:0 0 66.66667%; + max-width:66.66667% + } + .col-lg-9 { + flex:0 0 75%; + max-width:75% + } + .col-lg-10 { + flex:0 0 83.33333%; + max-width:83.33333% + } + .col-lg-11 { + flex:0 0 91.66667%; + max-width:91.66667% + } + .col-lg-12 { + flex:0 0 100%; + max-width:100% + } + .order-lg-first { + order:-1 + } + .order-lg-last { + order:13 + } + .order-lg-0 { + order:0 + } + .order-lg-1 { + order:1 + } + .order-lg-2 { + order:2 + } + .order-lg-3 { + order:3 + } + .order-lg-4 { + order:4 + } + .order-lg-5 { + order:5 + } + .order-lg-6 { + order:6 + } + .order-lg-7 { + order:7 + } + .order-lg-8 { + order:8 + } + .order-lg-9 { + order:9 + } + .order-lg-10 { + order:10 + } + .order-lg-11 { + order:11 + } + .order-lg-12 { + order:12 + } + .offset-lg-0 { + margin-left:0 + } + .offset-lg-1 { + margin-left:8.33333% + } + .offset-lg-2 { + margin-left:16.66667% + } + .offset-lg-3 { + margin-left:25% + } + .offset-lg-4 { + margin-left:33.33333% + } + .offset-lg-5 { + margin-left:41.66667% + } + .offset-lg-6 { + margin-left:50% + } + .offset-lg-7 { + margin-left:58.33333% + } + .offset-lg-8 { + margin-left:66.66667% + } + .offset-lg-9 { + margin-left:75% + } + .offset-lg-10 { + margin-left:83.33333% + } + .offset-lg-11 { + margin-left:91.66667% + } +} +@media (min-width:1200px) { + .col-xl { + flex-basis:0; + flex-grow:1; + max-width:100% + } + .col-xl-auto { + flex:0 0 auto; + width:auto; + max-width:none + } + .col-xl-1 { + flex:0 0 8.33333%; + max-width:8.33333% + } + .col-xl-2 { + flex:0 0 16.66667%; + max-width:16.66667% + } + .col-xl-3 { + flex:0 0 25%; + max-width:25% + } + .col-xl-4 { + flex:0 0 33.33333%; + max-width:33.33333% + } + .col-xl-5 { + flex:0 0 41.66667%; + max-width:41.66667% + } + .col-xl-6 { + flex:0 0 50%; + max-width:50% + } + .col-xl-7 { + flex:0 0 58.33333%; + max-width:58.33333% + } + .col-xl-8 { + flex:0 0 66.66667%; + max-width:66.66667% + } + .col-xl-9 { + flex:0 0 75%; + max-width:75% + } + .col-xl-10 { + flex:0 0 83.33333%; + max-width:83.33333% + } + .col-xl-11 { + flex:0 0 91.66667%; + max-width:91.66667% + } + .col-xl-12 { + flex:0 0 100%; + max-width:100% + } + .order-xl-first { + order:-1 + } + .order-xl-last { + order:13 + } + .order-xl-0 { + order:0 + } + .order-xl-1 { + order:1 + } + .order-xl-2 { + order:2 + } + .order-xl-3 { + order:3 + } + .order-xl-4 { + order:4 + } + .order-xl-5 { + order:5 + } + .order-xl-6 { + order:6 + } + .order-xl-7 { + order:7 + } + .order-xl-8 { + order:8 + } + .order-xl-9 { + order:9 + } + .order-xl-10 { + order:10 + } + .order-xl-11 { + order:11 + } + .order-xl-12 { + order:12 + } + .offset-xl-0 { + margin-left:0 + } + .offset-xl-1 { + margin-left:8.33333% + } + .offset-xl-2 { + margin-left:16.66667% + } + .offset-xl-3 { + margin-left:25% + } + .offset-xl-4 { + margin-left:33.33333% + } + .offset-xl-5 { + margin-left:41.66667% + } + .offset-xl-6 { + margin-left:50% + } + .offset-xl-7 { + margin-left:58.33333% + } + .offset-xl-8 { + margin-left:66.66667% + } + .offset-xl-9 { + margin-left:75% + } + .offset-xl-10 { + margin-left:83.33333% + } + .offset-xl-11 { + margin-left:91.66667% + } +} +@media (min-width:1440px) { + .col-2xl { + flex-basis:0; + flex-grow:1; + max-width:100% + } + .col-2xl-auto { + flex:0 0 auto; + width:auto; + max-width:none + } + .col-2xl-1 { + flex:0 0 8.33333%; + max-width:8.33333% + } + .col-2xl-2 { + flex:0 0 16.66667%; + max-width:16.66667% + } + .col-2xl-3 { + flex:0 0 25%; + max-width:25% + } + .col-2xl-4 { + flex:0 0 33.33333%; + max-width:33.33333% + } + .col-2xl-5 { + flex:0 0 41.66667%; + max-width:41.66667% + } + .col-2xl-6 { + flex:0 0 50%; + max-width:50% + } + .col-2xl-7 { + flex:0 0 58.33333%; + max-width:58.33333% + } + .col-2xl-8 { + flex:0 0 66.66667%; + max-width:66.66667% + } + .col-2xl-9 { + flex:0 0 75%; + max-width:75% + } + .col-2xl-10 { + flex:0 0 83.33333%; + max-width:83.33333% + } + .col-2xl-11 { + flex:0 0 91.66667%; + max-width:91.66667% + } + .col-2xl-12 { + flex:0 0 100%; + max-width:100% + } + .order-2xl-first { + order:-1 + } + .order-2xl-last { + order:13 + } + .order-2xl-0 { + order:0 + } + .order-2xl-1 { + order:1 + } + .order-2xl-2 { + order:2 + } + .order-2xl-3 { + order:3 + } + .order-2xl-4 { + order:4 + } + .order-2xl-5 { + order:5 + } + .order-2xl-6 { + order:6 + } + .order-2xl-7 { + order:7 + } + .order-2xl-8 { + order:8 + } + .order-2xl-9 { + order:9 + } + .order-2xl-10 { + order:10 + } + .order-2xl-11 { + order:11 + } + .order-2xl-12 { + order:12 + } + .offset-2xl-0 { + margin-left:0 + } + .offset-2xl-1 { + margin-left:8.33333% + } + .offset-2xl-2 { + margin-left:16.66667% + } + .offset-2xl-3 { + margin-left:25% + } + .offset-2xl-4 { + margin-left:33.33333% + } + .offset-2xl-5 { + margin-left:41.66667% + } + .offset-2xl-6 { + margin-left:50% + } + .offset-2xl-7 { + margin-left:58.33333% + } + .offset-2xl-8 { + margin-left:66.66667% + } + .offset-2xl-9 { + margin-left:75% + } + .offset-2xl-10 { + margin-left:83.33333% + } + .offset-2xl-11 { + margin-left:91.66667% + } +} +@media (min-width:1600px) { + .col-3xl { + flex-basis:0; + flex-grow:1; + max-width:100% + } + .col-3xl-auto { + flex:0 0 auto; + width:auto; + max-width:none + } + .col-3xl-1 { + flex:0 0 8.33333%; + max-width:8.33333% + } + .col-3xl-2 { + flex:0 0 16.66667%; + max-width:16.66667% + } + .col-3xl-3 { + flex:0 0 25%; + max-width:25% + } + .col-3xl-4 { + flex:0 0 33.33333%; + max-width:33.33333% + } + .col-3xl-5 { + flex:0 0 41.66667%; + max-width:41.66667% + } + .col-3xl-6 { + flex:0 0 50%; + max-width:50% + } + .col-3xl-7 { + flex:0 0 58.33333%; + max-width:58.33333% + } + .col-3xl-8 { + flex:0 0 66.66667%; + max-width:66.66667% + } + .col-3xl-9 { + flex:0 0 75%; + max-width:75% + } + .col-3xl-10 { + flex:0 0 83.33333%; + max-width:83.33333% + } + .col-3xl-11 { + flex:0 0 91.66667%; + max-width:91.66667% + } + .col-3xl-12 { + flex:0 0 100%; + max-width:100% + } + .order-3xl-first { + order:-1 + } + .order-3xl-last { + order:13 + } + .order-3xl-0 { + order:0 + } + .order-3xl-1 { + order:1 + } + .order-3xl-2 { + order:2 + } + .order-3xl-3 { + order:3 + } + .order-3xl-4 { + order:4 + } + .order-3xl-5 { + order:5 + } + .order-3xl-6 { + order:6 + } + .order-3xl-7 { + order:7 + } + .order-3xl-8 { + order:8 + } + .order-3xl-9 { + order:9 + } + .order-3xl-10 { + order:10 + } + .order-3xl-11 { + order:11 + } + .order-3xl-12 { + order:12 + } + .offset-3xl-0 { + margin-left:0 + } + .offset-3xl-1 { + margin-left:8.33333% + } + .offset-3xl-2 { + margin-left:16.66667% + } + .offset-3xl-3 { + margin-left:25% + } + .offset-3xl-4 { + margin-left:33.33333% + } + .offset-3xl-5 { + margin-left:41.66667% + } + .offset-3xl-6 { + margin-left:50% + } + .offset-3xl-7 { + margin-left:58.33333% + } + .offset-3xl-8 { + margin-left:66.66667% + } + .offset-3xl-9 { + margin-left:75% + } + .offset-3xl-10 { + margin-left:83.33333% + } + .offset-3xl-11 { + margin-left:91.66667% + } +} +@media (min-width:1840px) { + .col-4xl { + flex-basis:0; + flex-grow:1; + max-width:100% + } + .col-4xl-auto { + flex:0 0 auto; + width:auto; + max-width:none + } + .col-4xl-1 { + flex:0 0 8.33333%; + max-width:8.33333% + } + .col-4xl-2 { + flex:0 0 16.66667%; + max-width:16.66667% + } + .col-4xl-3 { + flex:0 0 25%; + max-width:25% + } + .col-4xl-4 { + flex:0 0 33.33333%; + max-width:33.33333% + } + .col-4xl-5 { + flex:0 0 41.66667%; + max-width:41.66667% + } + .col-4xl-6 { + flex:0 0 50%; + max-width:50% + } + .col-4xl-7 { + flex:0 0 58.33333%; + max-width:58.33333% + } + .col-4xl-8 { + flex:0 0 66.66667%; + max-width:66.66667% + } + .col-4xl-9 { + flex:0 0 75%; + max-width:75% + } + .col-4xl-10 { + flex:0 0 83.33333%; + max-width:83.33333% + } + .col-4xl-11 { + flex:0 0 91.66667%; + max-width:91.66667% + } + .col-4xl-12 { + flex:0 0 100%; + max-width:100% + } + .order-4xl-first { + order:-1 + } + .order-4xl-last { + order:13 + } + .order-4xl-0 { + order:0 + } + .order-4xl-1 { + order:1 + } + .order-4xl-2 { + order:2 + } + .order-4xl-3 { + order:3 + } + .order-4xl-4 { + order:4 + } + .order-4xl-5 { + order:5 + } + .order-4xl-6 { + order:6 + } + .order-4xl-7 { + order:7 + } + .order-4xl-8 { + order:8 + } + .order-4xl-9 { + order:9 + } + .order-4xl-10 { + order:10 + } + .order-4xl-11 { + order:11 + } + .order-4xl-12 { + order:12 + } + .offset-4xl-0 { + margin-left:0 + } + .offset-4xl-1 { + margin-left:8.33333% + } + .offset-4xl-2 { + margin-left:16.66667% + } + .offset-4xl-3 { + margin-left:25% + } + .offset-4xl-4 { + margin-left:33.33333% + } + .offset-4xl-5 { + margin-left:41.66667% + } + .offset-4xl-6 { + margin-left:50% + } + .offset-4xl-7 { + margin-left:58.33333% + } + .offset-4xl-8 { + margin-left:66.66667% + } + .offset-4xl-9 { + margin-left:75% + } + .offset-4xl-10 { + margin-left:83.33333% + } + .offset-4xl-11 { + margin-left:91.66667% + } +} +@media (min-width:2100px) { + .col-5xl { + flex-basis:0; + flex-grow:1; + max-width:100% + } + .col-5xl-auto { + flex:0 0 auto; + width:auto; + max-width:none + } + .col-5xl-1 { + flex:0 0 8.33333%; + max-width:8.33333% + } + .col-5xl-2 { + flex:0 0 16.66667%; + max-width:16.66667% + } + .col-5xl-3 { + flex:0 0 25%; + max-width:25% + } + .col-5xl-4 { + flex:0 0 33.33333%; + max-width:33.33333% + } + .col-5xl-5 { + flex:0 0 41.66667%; + max-width:41.66667% + } + .col-5xl-6 { + flex:0 0 50%; + max-width:50% + } + .col-5xl-7 { + flex:0 0 58.33333%; + max-width:58.33333% + } + .col-5xl-8 { + flex:0 0 66.66667%; + max-width:66.66667% + } + .col-5xl-9 { + flex:0 0 75%; + max-width:75% + } + .col-5xl-10 { + flex:0 0 83.33333%; + max-width:83.33333% + } + .col-5xl-11 { + flex:0 0 91.66667%; + max-width:91.66667% + } + .col-5xl-12 { + flex:0 0 100%; + max-width:100% + } + .order-5xl-first { + order:-1 + } + .order-5xl-last { + order:13 + } + .order-5xl-0 { + order:0 + } + .order-5xl-1 { + order:1 + } + .order-5xl-2 { + order:2 + } + .order-5xl-3 { + order:3 + } + .order-5xl-4 { + order:4 + } + .order-5xl-5 { + order:5 + } + .order-5xl-6 { + order:6 + } + .order-5xl-7 { + order:7 + } + .order-5xl-8 { + order:8 + } + .order-5xl-9 { + order:9 + } + .order-5xl-10 { + order:10 + } + .order-5xl-11 { + order:11 + } + .order-5xl-12 { + order:12 + } + .offset-5xl-0 { + margin-left:0 + } + .offset-5xl-1 { + margin-left:8.33333% + } + .offset-5xl-2 { + margin-left:16.66667% + } + .offset-5xl-3 { + margin-left:25% + } + .offset-5xl-4 { + margin-left:33.33333% + } + .offset-5xl-5 { + margin-left:41.66667% + } + .offset-5xl-6 { + margin-left:50% + } + .offset-5xl-7 { + margin-left:58.33333% + } + .offset-5xl-8 { + margin-left:66.66667% + } + .offset-5xl-9 { + margin-left:75% + } + .offset-5xl-10 { + margin-left:83.33333% + } + .offset-5xl-11 { + margin-left:91.66667% + } +} +.cui, +.cui.cui--wide .container { + max-width:var(--cui-max-page-width) +} +.cui .form-group .form-group__text input, +.cui .form-group .form-group__text select, +.cui .form-group .form-group__text textarea, +.cui .form-group .form-group__text textarea input, +.cui .form-group .form-group__text textarea select, +.cui .form-group .form-group__text textarea textarea, +.cui .form-group .form-group__text.select input, +.cui .form-group .form-group__text.select select, +.cui .form-group .form-group__text.select textarea { + order:3; + min-height:var(--cui-form-size) +} +.flex-row { + flex-direction:row!important +} +.flex-column { + flex-direction:column!important +} +.flex-row-reverse { + flex-direction:row-reverse!important +} +.flex-column-reverse { + flex-direction:column-reverse!important +} +.flex-wrap { + flex-wrap:wrap!important +} +.flex-nowrap { + flex-wrap:nowrap!important +} +.flex-wrap-reverse { + flex-wrap:wrap-reverse!important +} +.flex-fill { + flex:1 1 auto!important +} +.flex-grow-0 { + flex-grow:0!important +} +.flex-grow-1 { + flex-grow:1!important +} +.flex-shrink-0 { + flex-shrink:0!important +} +.flex-shrink-1 { + flex-shrink:1!important +} +.justify-content-start { + justify-content:flex-start!important +} +.justify-content-end { + justify-content:flex-end!important +} +.justify-content-center { + justify-content:center!important +} +.justify-content-between { + justify-content:space-between!important +} +.justify-content-around { + justify-content:space-around!important +} +.align-items-start { + align-items:flex-start!important +} +.align-items-end { + align-items:flex-end!important +} +.align-items-center { + align-items:center!important +} +.align-items-baseline { + align-items:baseline!important +} +.align-items-stretch { + align-items:stretch!important +} +.align-content-start { + align-content:flex-start!important +} +.align-content-end { + align-content:flex-end!important +} +.align-content-center { + align-content:center!important +} +.align-content-between { + align-content:space-between!important +} +.align-content-around { + align-content:space-around!important +} +.align-content-stretch { + align-content:stretch!important +} +.align-self-auto { + align-self:auto!important +} +.align-self-start { + align-self:flex-start!important +} +.align-self-end { + align-self:flex-end!important +} +.align-self-center { + align-self:center!important +} +.align-self-baseline { + align-self:baseline!important +} +.align-self-stretch { + align-self:stretch!important +} +@media (min-width:576px) { + .flex-sm-row { + flex-direction:row!important + } + .flex-sm-column { + flex-direction:column!important + } + .flex-sm-row-reverse { + flex-direction:row-reverse!important + } + .flex-sm-column-reverse { + flex-direction:column-reverse!important + } + .flex-sm-wrap { + flex-wrap:wrap!important + } + .flex-sm-nowrap { + flex-wrap:nowrap!important + } + .flex-sm-wrap-reverse { + flex-wrap:wrap-reverse!important + } + .flex-sm-fill { + flex:1 1 auto!important + } + .flex-sm-grow-0 { + flex-grow:0!important + } + .flex-sm-grow-1 { + flex-grow:1!important + } + .flex-sm-shrink-0 { + flex-shrink:0!important + } + .flex-sm-shrink-1 { + flex-shrink:1!important + } + .justify-content-sm-start { + justify-content:flex-start!important + } + .justify-content-sm-end { + justify-content:flex-end!important + } + .justify-content-sm-center { + justify-content:center!important + } + .justify-content-sm-between { + justify-content:space-between!important + } + .justify-content-sm-around { + justify-content:space-around!important + } + .align-items-sm-start { + align-items:flex-start!important + } + .align-items-sm-end { + align-items:flex-end!important + } + .align-items-sm-center { + align-items:center!important + } + .align-items-sm-baseline { + align-items:baseline!important + } + .align-items-sm-stretch { + align-items:stretch!important + } + .align-content-sm-start { + align-content:flex-start!important + } + .align-content-sm-end { + align-content:flex-end!important + } + .align-content-sm-center { + align-content:center!important + } + .align-content-sm-between { + align-content:space-between!important + } + .align-content-sm-around { + align-content:space-around!important + } + .align-content-sm-stretch { + align-content:stretch!important + } + .align-self-sm-auto { + align-self:auto!important + } + .align-self-sm-start { + align-self:flex-start!important + } + .align-self-sm-end { + align-self:flex-end!important + } + .align-self-sm-center { + align-self:center!important + } + .align-self-sm-baseline { + align-self:baseline!important + } + .align-self-sm-stretch { + align-self:stretch!important + } +} +@media (min-width:768px) { + .flex-md-row { + flex-direction:row!important + } + .flex-md-column { + flex-direction:column!important + } + .flex-md-row-reverse { + flex-direction:row-reverse!important + } + .flex-md-column-reverse { + flex-direction:column-reverse!important + } + .flex-md-wrap { + flex-wrap:wrap!important + } + .flex-md-nowrap { + flex-wrap:nowrap!important + } + .flex-md-wrap-reverse { + flex-wrap:wrap-reverse!important + } + .flex-md-fill { + flex:1 1 auto!important + } + .flex-md-grow-0 { + flex-grow:0!important + } + .flex-md-grow-1 { + flex-grow:1!important + } + .flex-md-shrink-0 { + flex-shrink:0!important + } + .flex-md-shrink-1 { + flex-shrink:1!important + } + .justify-content-md-start { + justify-content:flex-start!important + } + .justify-content-md-end { + justify-content:flex-end!important + } + .justify-content-md-center { + justify-content:center!important + } + .justify-content-md-between { + justify-content:space-between!important + } + .justify-content-md-around { + justify-content:space-around!important + } + .align-items-md-start { + align-items:flex-start!important + } + .align-items-md-end { + align-items:flex-end!important + } + .align-items-md-center { + align-items:center!important + } + .align-items-md-baseline { + align-items:baseline!important + } + .align-items-md-stretch { + align-items:stretch!important + } + .align-content-md-start { + align-content:flex-start!important + } + .align-content-md-end { + align-content:flex-end!important + } + .align-content-md-center { + align-content:center!important + } + .align-content-md-between { + align-content:space-between!important + } + .align-content-md-around { + align-content:space-around!important + } + .align-content-md-stretch { + align-content:stretch!important + } + .align-self-md-auto { + align-self:auto!important + } + .align-self-md-start { + align-self:flex-start!important + } + .align-self-md-end { + align-self:flex-end!important + } + .align-self-md-center { + align-self:center!important + } + .align-self-md-baseline { + align-self:baseline!important + } + .align-self-md-stretch { + align-self:stretch!important + } +} +@media (min-width:992px) { + .flex-lg-row { + flex-direction:row!important + } + .flex-lg-column { + flex-direction:column!important + } + .flex-lg-row-reverse { + flex-direction:row-reverse!important + } + .flex-lg-column-reverse { + flex-direction:column-reverse!important + } + .flex-lg-wrap { + flex-wrap:wrap!important + } + .flex-lg-nowrap { + flex-wrap:nowrap!important + } + .flex-lg-wrap-reverse { + flex-wrap:wrap-reverse!important + } + .flex-lg-fill { + flex:1 1 auto!important + } + .flex-lg-grow-0 { + flex-grow:0!important + } + .flex-lg-grow-1 { + flex-grow:1!important + } + .flex-lg-shrink-0 { + flex-shrink:0!important + } + .flex-lg-shrink-1 { + flex-shrink:1!important + } + .justify-content-lg-start { + justify-content:flex-start!important + } + .justify-content-lg-end { + justify-content:flex-end!important + } + .justify-content-lg-center { + justify-content:center!important + } + .justify-content-lg-between { + justify-content:space-between!important + } + .justify-content-lg-around { + justify-content:space-around!important + } + .align-items-lg-start { + align-items:flex-start!important + } + .align-items-lg-end { + align-items:flex-end!important + } + .align-items-lg-center { + align-items:center!important + } + .align-items-lg-baseline { + align-items:baseline!important + } + .align-items-lg-stretch { + align-items:stretch!important + } + .align-content-lg-start { + align-content:flex-start!important + } + .align-content-lg-end { + align-content:flex-end!important + } + .align-content-lg-center { + align-content:center!important + } + .align-content-lg-between { + align-content:space-between!important + } + .align-content-lg-around { + align-content:space-around!important + } + .align-content-lg-stretch { + align-content:stretch!important + } + .align-self-lg-auto { + align-self:auto!important + } + .align-self-lg-start { + align-self:flex-start!important + } + .align-self-lg-end { + align-self:flex-end!important + } + .align-self-lg-center { + align-self:center!important + } + .align-self-lg-baseline { + align-self:baseline!important + } + .align-self-lg-stretch { + align-self:stretch!important + } +} +@media (min-width:1200px) { + .flex-xl-row { + flex-direction:row!important + } + .flex-xl-column { + flex-direction:column!important + } + .flex-xl-row-reverse { + flex-direction:row-reverse!important + } + .flex-xl-column-reverse { + flex-direction:column-reverse!important + } + .flex-xl-wrap { + flex-wrap:wrap!important + } + .flex-xl-nowrap { + flex-wrap:nowrap!important + } + .flex-xl-wrap-reverse { + flex-wrap:wrap-reverse!important + } + .flex-xl-fill { + flex:1 1 auto!important + } + .flex-xl-grow-0 { + flex-grow:0!important + } + .flex-xl-grow-1 { + flex-grow:1!important + } + .flex-xl-shrink-0 { + flex-shrink:0!important + } + .flex-xl-shrink-1 { + flex-shrink:1!important + } + .justify-content-xl-start { + justify-content:flex-start!important + } + .justify-content-xl-end { + justify-content:flex-end!important + } + .justify-content-xl-center { + justify-content:center!important + } + .justify-content-xl-between { + justify-content:space-between!important + } + .justify-content-xl-around { + justify-content:space-around!important + } + .align-items-xl-start { + align-items:flex-start!important + } + .align-items-xl-end { + align-items:flex-end!important + } + .align-items-xl-center { + align-items:center!important + } + .align-items-xl-baseline { + align-items:baseline!important + } + .align-items-xl-stretch { + align-items:stretch!important + } + .align-content-xl-start { + align-content:flex-start!important + } + .align-content-xl-end { + align-content:flex-end!important + } + .align-content-xl-center { + align-content:center!important + } + .align-content-xl-between { + align-content:space-between!important + } + .align-content-xl-around { + align-content:space-around!important + } + .align-content-xl-stretch { + align-content:stretch!important + } + .align-self-xl-auto { + align-self:auto!important + } + .align-self-xl-start { + align-self:flex-start!important + } + .align-self-xl-end { + align-self:flex-end!important + } + .align-self-xl-center { + align-self:center!important + } + .align-self-xl-baseline { + align-self:baseline!important + } + .align-self-xl-stretch { + align-self:stretch!important + } +} +@media (min-width:1440px) { + .flex-2xl-row { + flex-direction:row!important + } + .flex-2xl-column { + flex-direction:column!important + } + .flex-2xl-row-reverse { + flex-direction:row-reverse!important + } + .flex-2xl-column-reverse { + flex-direction:column-reverse!important + } + .flex-2xl-wrap { + flex-wrap:wrap!important + } + .flex-2xl-nowrap { + flex-wrap:nowrap!important + } + .flex-2xl-wrap-reverse { + flex-wrap:wrap-reverse!important + } + .flex-2xl-fill { + flex:1 1 auto!important + } + .flex-2xl-grow-0 { + flex-grow:0!important + } + .flex-2xl-grow-1 { + flex-grow:1!important + } + .flex-2xl-shrink-0 { + flex-shrink:0!important + } + .flex-2xl-shrink-1 { + flex-shrink:1!important + } + .justify-content-2xl-start { + justify-content:flex-start!important + } + .justify-content-2xl-end { + justify-content:flex-end!important + } + .justify-content-2xl-center { + justify-content:center!important + } + .justify-content-2xl-between { + justify-content:space-between!important + } + .justify-content-2xl-around { + justify-content:space-around!important + } + .align-items-2xl-start { + align-items:flex-start!important + } + .align-items-2xl-end { + align-items:flex-end!important + } + .align-items-2xl-center { + align-items:center!important + } + .align-items-2xl-baseline { + align-items:baseline!important + } + .align-items-2xl-stretch { + align-items:stretch!important + } + .align-content-2xl-start { + align-content:flex-start!important + } + .align-content-2xl-end { + align-content:flex-end!important + } + .align-content-2xl-center { + align-content:center!important + } + .align-content-2xl-between { + align-content:space-between!important + } + .align-content-2xl-around { + align-content:space-around!important + } + .align-content-2xl-stretch { + align-content:stretch!important + } + .align-self-2xl-auto { + align-self:auto!important + } + .align-self-2xl-start { + align-self:flex-start!important + } + .align-self-2xl-end { + align-self:flex-end!important + } + .align-self-2xl-center { + align-self:center!important + } + .align-self-2xl-baseline { + align-self:baseline!important + } + .align-self-2xl-stretch { + align-self:stretch!important + } +} +@media (min-width:1600px) { + .flex-3xl-row { + flex-direction:row!important + } + .flex-3xl-column { + flex-direction:column!important + } + .flex-3xl-row-reverse { + flex-direction:row-reverse!important + } + .flex-3xl-column-reverse { + flex-direction:column-reverse!important + } + .flex-3xl-wrap { + flex-wrap:wrap!important + } + .flex-3xl-nowrap { + flex-wrap:nowrap!important + } + .flex-3xl-wrap-reverse { + flex-wrap:wrap-reverse!important + } + .flex-3xl-fill { + flex:1 1 auto!important + } + .flex-3xl-grow-0 { + flex-grow:0!important + } + .flex-3xl-grow-1 { + flex-grow:1!important + } + .flex-3xl-shrink-0 { + flex-shrink:0!important + } + .flex-3xl-shrink-1 { + flex-shrink:1!important + } + .justify-content-3xl-start { + justify-content:flex-start!important + } + .justify-content-3xl-end { + justify-content:flex-end!important + } + .justify-content-3xl-center { + justify-content:center!important + } + .justify-content-3xl-between { + justify-content:space-between!important + } + .justify-content-3xl-around { + justify-content:space-around!important + } + .align-items-3xl-start { + align-items:flex-start!important + } + .align-items-3xl-end { + align-items:flex-end!important + } + .align-items-3xl-center { + align-items:center!important + } + .align-items-3xl-baseline { + align-items:baseline!important + } + .align-items-3xl-stretch { + align-items:stretch!important + } + .align-content-3xl-start { + align-content:flex-start!important + } + .align-content-3xl-end { + align-content:flex-end!important + } + .align-content-3xl-center { + align-content:center!important + } + .align-content-3xl-between { + align-content:space-between!important + } + .align-content-3xl-around { + align-content:space-around!important + } + .align-content-3xl-stretch { + align-content:stretch!important + } + .align-self-3xl-auto { + align-self:auto!important + } + .align-self-3xl-start { + align-self:flex-start!important + } + .align-self-3xl-end { + align-self:flex-end!important + } + .align-self-3xl-center { + align-self:center!important + } + .align-self-3xl-baseline { + align-self:baseline!important + } + .align-self-3xl-stretch { + align-self:stretch!important + } +} +@media (min-width:1840px) { + .flex-4xl-row { + flex-direction:row!important + } + .flex-4xl-column { + flex-direction:column!important + } + .flex-4xl-row-reverse { + flex-direction:row-reverse!important + } + .flex-4xl-column-reverse { + flex-direction:column-reverse!important + } + .flex-4xl-wrap { + flex-wrap:wrap!important + } + .flex-4xl-nowrap { + flex-wrap:nowrap!important + } + .flex-4xl-wrap-reverse { + flex-wrap:wrap-reverse!important + } + .flex-4xl-fill { + flex:1 1 auto!important + } + .flex-4xl-grow-0 { + flex-grow:0!important + } + .flex-4xl-grow-1 { + flex-grow:1!important + } + .flex-4xl-shrink-0 { + flex-shrink:0!important + } + .flex-4xl-shrink-1 { + flex-shrink:1!important + } + .justify-content-4xl-start { + justify-content:flex-start!important + } + .justify-content-4xl-end { + justify-content:flex-end!important + } + .justify-content-4xl-center { + justify-content:center!important + } + .justify-content-4xl-between { + justify-content:space-between!important + } + .justify-content-4xl-around { + justify-content:space-around!important + } + .align-items-4xl-start { + align-items:flex-start!important + } + .align-items-4xl-end { + align-items:flex-end!important + } + .align-items-4xl-center { + align-items:center!important + } + .align-items-4xl-baseline { + align-items:baseline!important + } + .align-items-4xl-stretch { + align-items:stretch!important + } + .align-content-4xl-start { + align-content:flex-start!important + } + .align-content-4xl-end { + align-content:flex-end!important + } + .align-content-4xl-center { + align-content:center!important + } + .align-content-4xl-between { + align-content:space-between!important + } + .align-content-4xl-around { + align-content:space-around!important + } + .align-content-4xl-stretch { + align-content:stretch!important + } + .align-self-4xl-auto { + align-self:auto!important + } + .align-self-4xl-start { + align-self:flex-start!important + } + .align-self-4xl-end { + align-self:flex-end!important + } + .align-self-4xl-center { + align-self:center!important + } + .align-self-4xl-baseline { + align-self:baseline!important + } + .align-self-4xl-stretch { + align-self:stretch!important + } +} +@media (min-width:2100px) { + .flex-5xl-row { + flex-direction:row!important + } + .flex-5xl-column { + flex-direction:column!important + } + .flex-5xl-row-reverse { + flex-direction:row-reverse!important + } + .flex-5xl-column-reverse { + flex-direction:column-reverse!important + } + .flex-5xl-wrap { + flex-wrap:wrap!important + } + .flex-5xl-nowrap { + flex-wrap:nowrap!important + } + .flex-5xl-wrap-reverse { + flex-wrap:wrap-reverse!important + } + .flex-5xl-fill { + flex:1 1 auto!important + } + .flex-5xl-grow-0 { + flex-grow:0!important + } + .flex-5xl-grow-1 { + flex-grow:1!important + } + .flex-5xl-shrink-0 { + flex-shrink:0!important + } + .flex-5xl-shrink-1 { + flex-shrink:1!important + } + .justify-content-5xl-start { + justify-content:flex-start!important + } + .justify-content-5xl-end { + justify-content:flex-end!important + } + .justify-content-5xl-center { + justify-content:center!important + } + .justify-content-5xl-between { + justify-content:space-between!important + } + .justify-content-5xl-around { + justify-content:space-around!important + } + .align-items-5xl-start { + align-items:flex-start!important + } + .align-items-5xl-end { + align-items:flex-end!important + } + .align-items-5xl-center { + align-items:center!important + } + .align-items-5xl-baseline { + align-items:baseline!important + } + .align-items-5xl-stretch { + align-items:stretch!important + } + .align-content-5xl-start { + align-content:flex-start!important + } + .align-content-5xl-end { + align-content:flex-end!important + } + .align-content-5xl-center { + align-content:center!important + } + .align-content-5xl-between { + align-content:space-between!important + } + .align-content-5xl-around { + align-content:space-around!important + } + .align-content-5xl-stretch { + align-content:stretch!important + } + .align-self-5xl-auto { + align-self:auto!important + } + .align-self-5xl-start { + align-self:flex-start!important + } + .align-self-5xl-end { + align-self:flex-end!important + } + .align-self-5xl-center { + align-self:center!important + } + .align-self-5xl-baseline { + align-self:baseline!important + } + .align-self-5xl-stretch { + align-self:stretch!important + } +} +button[data-balloon] { + overflow:visible +} +[data-balloon] { + position:relative +} +[data-balloon]:after { + filter:alpha(opactiy=0); + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + -moz-opacity:0; + opacity:0; + font-weight:400; + font-style:normal; + text-shadow:none; + font-size:1.2rem!important; + background:rgba(88,88,91,.99); + border-radius:4px; + color:#fff; + content:attr(data-balloon); + padding:.5em 1em; + white-space:nowrap +} +[data-balloon]:before { + background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(88, 88, 91, 0.99)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat; + background-size:100% auto; + width:18px; + height:6px; + filter:alpha(opactiy=0); + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + -moz-opacity:0; + opacity:0; + content:'' +} +[data-balloon]:hover:after, +[data-balloon]:hover:before, +[data-balloon][data-balloon-visible]:after, +[data-balloon][data-balloon-visible]:before { + filter:alpha(opactiy=100); + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + -moz-opacity:1; + -khtml-opacity:1; + opacity:1; + pointer-events:auto +} +[data-balloon].font-awesome:after { + font-family:FontAwesome +} +[data-balloon][data-balloon-break]:after { + white-space:pre-wrap!important +} +[data-balloon][data-balloon-blunt]:after, +[data-balloon][data-balloon-blunt]:before { + transition:none +} +[data-balloon][data-balloon-pos=up]:after { + bottom:100%; + left:50%; + margin-bottom:11px; + transform:translate(-50%,10px); + transform-origin:top +} +[data-balloon][data-balloon-pos=up]:before { + bottom:100%; + left:50%; + margin-bottom:5px; + transform:translate(-50%,10px); + transform-origin:top +} +[data-balloon][data-balloon-pos=up]:hover:after, +[data-balloon][data-balloon-pos=up]:hover:before, +[data-balloon][data-balloon-pos=up][data-balloon-visible]:after, +[data-balloon][data-balloon-pos=up][data-balloon-visible]:before, +[data-balloon][data-balloon-pos=down]:hover:after, +[data-balloon][data-balloon-pos=down]:hover:before, +[data-balloon][data-balloon-pos=down][data-balloon-visible]:after, +[data-balloon][data-balloon-pos=down][data-balloon-visible]:before { + transform:translate(-50%,0) +} +[data-balloon][data-balloon-pos=up-left]:after { + bottom:100%; + left:0; + margin-bottom:11px; + transform:translate(0,10px); + transform-origin:top +} +[data-balloon][data-balloon-pos=up-left]:before { + bottom:100%; + left:5px; + margin-bottom:5px; + transform:translate(0,10px); + transform-origin:top +} +[data-balloon][data-balloon-pos=up-left]:hover:after, +[data-balloon][data-balloon-pos=up-left]:hover:before, +[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after, +[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before, +[data-balloon][data-balloon-pos=up-right]:hover:after, +[data-balloon][data-balloon-pos=up-right]:hover:before, +[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after, +[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before, +[data-balloon][data-balloon-pos=down-left]:hover:after, +[data-balloon][data-balloon-pos=down-left]:hover:before, +[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:after, +[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:before, +[data-balloon][data-balloon-pos=down-right]:hover:after, +[data-balloon][data-balloon-pos=down-right]:hover:before, +[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:after, +[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:before { + transform:translate(0,0) +} +[data-balloon][data-balloon-pos=up-right]:after { + bottom:100%; + right:0; + margin-bottom:11px; + transform:translate(0,10px); + transform-origin:top +} +[data-balloon][data-balloon-pos=up-right]:before { + bottom:100%; + right:5px; + margin-bottom:5px; + transform:translate(0,10px); + transform-origin:top +} +.cui .absolute-bottom, +.cui .fixed-bottom { + bottom:0!important +} +[data-balloon][data-balloon-pos=down]:after { + left:50%; + margin-top:11px; + top:100%; + transform:translate(-50%,-10px) +} +[data-balloon][data-balloon-pos=down]:before { + background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(88, 88, 91, 0.99)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat; + background-size:100% auto; + width:18px; + height:6px; + left:50%; + margin-top:5px; + top:100%; + transform:translate(-50%,-10px) +} +[data-balloon][data-balloon-pos=down-left]:after { + left:0; + margin-top:11px; + top:100%; + transform:translate(0,-10px) +} +[data-balloon][data-balloon-pos=down-left]:before { + background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(88, 88, 91, 0.99)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat; + background-size:100% auto; + width:18px; + height:6px; + left:5px; + margin-top:5px; + top:100%; + transform:translate(0,-10px) +} +[data-balloon][data-balloon-pos=down-right]:after { + right:0; + margin-top:11px; + top:100%; + transform:translate(0,-10px) +} +[data-balloon][data-balloon-pos=down-right]:before { + background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(88, 88, 91, 0.99)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat; + background-size:100% auto; + width:18px; + height:6px; + right:5px; + margin-top:5px; + top:100%; + transform:translate(0,-10px) +} +[data-balloon][data-balloon-pos=left]:after { + margin-right:11px; + right:100%; + top:50%; + transform:translate(10px,-50%) +} +[data-balloon][data-balloon-pos=left]:before { + background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(88, 88, 91, 0.99)%22%20transform%3D%22rotate(-90 18 18)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat; + background-size:100% auto; + width:6px; + height:18px; + margin-right:5px; + right:100%; + top:50%; + transform:translate(10px,-50%) +} +.cui .absolute-right, +.cui .fixed-right { + right:0!important +} +[data-balloon][data-balloon-pos=left]:hover:after, +[data-balloon][data-balloon-pos=left]:hover:before, +[data-balloon][data-balloon-pos=left][data-balloon-visible]:after, +[data-balloon][data-balloon-pos=left][data-balloon-visible]:before, +[data-balloon][data-balloon-pos=right]:hover:after, +[data-balloon][data-balloon-pos=right]:hover:before, +[data-balloon][data-balloon-pos=right][data-balloon-visible]:after, +[data-balloon][data-balloon-pos=right][data-balloon-visible]:before { + transform:translate(0,-50%) +} +[data-balloon][data-balloon-pos=right]:after { + left:100%; + margin-left:11px; + top:50%; + transform:translate(-10px,-50%) +} +[data-balloon][data-balloon-pos=right]:before { + background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(88, 88, 91, 0.99)%22%20transform%3D%22rotate(90 6 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat; + background-size:100% auto; + width:6px; + height:18px; + left:100%; + margin-left:5px; + top:50%; + transform:translate(-10px,-50%) +} +[data-balloon][data-balloon-length=small]:after { + white-space:normal; + width:80px +} +[data-balloon][data-balloon-length=medium]:after { + white-space:normal; + width:150px +} +[data-balloon][data-balloon-length=large]:after { + white-space:normal; + width:260px +} +[data-balloon][data-balloon-length=xlarge]:after { + white-space:normal; + width:380px +} +@media screen and (max-width:768px) { + [data-balloon][data-balloon-length=xlarge]:after { + white-space:normal; + width:90vw + } +} +[data-balloon][data-balloon-length=fit]:after { + white-space:normal; + width:100% +} +html { + --cui-html-font-size:62.5%; + height:100%; + font-size:var(--cui-html-font-size) +} +html ::-webkit-scrollbar { + width:8px; + height:var(--cui-spacing-qtr) +} +html ::-webkit-scrollbar-track { + background:var(--cui-background-color) +} +html ::-webkit-scrollbar-thumb { + background:var(--cui-background-selected); + border-radius:var(--cui-spacing-half); + border:1px solid var(--cui-background-color) +} +html ::-webkit-scrollbar-thumb:hover { + background:var(--cui-background-hover) +} +@font-face { + font-family:CiscoSans; + font-style:normal; + font-weight:100; + src:url(../fonts/CiscoSans/CiscoSansTTThin.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTThin.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:oblique; + font-weight:100; + src:url(../fonts/CiscoSans/CiscoSansTTThinOblique.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTThinOblique.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:normal; + font-weight:200; + src:url(../fonts/CiscoSans/CiscoSansTTExtraLight.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTExtraLight.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:oblique; + font-weight:200; + src:url(../fonts/CiscoSans/CiscoSansTTExtraLightOblique.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTExtraLightOblique.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:normal; + font-weight:300; + src:url(../fonts/CiscoSans/CiscoSansTTLight.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTLight.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:oblique; + font-weight:300; + src:url(../fonts/CiscoSans/CiscoSansTTLightOblique.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTLightOblique.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:normal; + font-weight:400; + src:url(../fonts/CiscoSans/CiscoSansTTRegular.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTRegular.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:oblique; + font-weight:400; + src:url(../fonts/CiscoSans/CiscoSansTTRegularOblique.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTRegularOblique.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:normal; + font-weight:600; + src:url(../fonts/CiscoSans/CiscoSansTTMedium.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTMedium.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:oblique; + font-weight:600; + src:url(../fonts/CiscoSans/CiscoSansTTMediumOblique.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTMediumOblique.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:bold; + font-weight:700; + src:url(../fonts/CiscoSans/CiscoSansTTBold.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTBold.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:oblique; + font-weight:700; + src:url(../fonts/CiscoSans/CiscoSansTTBoldOblique.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTBoldOblique.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:normal; + font-weight:900; + src:url(../fonts/CiscoSans/CiscoSansTTHeavy.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTHeavy.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +@font-face { + font-family:CiscoSans; + font-style:oblique; + font-weight:900; + src:url(../fonts/CiscoSans/CiscoSansTTHeavyOblique.woff2) format("woff2"), + url(../fonts/CiscoSans/CiscoSansTTHeavyOblique.woff) format("woff"); + unicode-range:U+0000-00FF, + U+0131, + U+0152-0153, + U+02C6, + U+02DA, + U+02DC, + U+2000-206F, + U+2074, + U+20AC, + U+2212, + U+2215, + U+E0FF, + U+EFFD, + U+F000 +} +.cui { + color:var(--cui-font-color); + line-height:var(--cui-line-height); + position:relative; + font-family:var(--cui-font-stack); + font-weight:var(--cui-font-weight); + font-size:var(--cui-font-size); + min-width:var(--cui-min-page-width); + height:auto; + min-height:100%; + margin:0 auto; + padding:0; + overflow-x:hidden; + overflow-y:auto; + background-color:var(--cui-background-color); + direction:ltr; + text-align:left; + box-sizing:border-box; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale +} +.cui .h1, +.cui .h2, +.cui .h3, +.cui .h4, +.cui .h5, +.cui .h6, +.cui h1, +.cui h2, +.cui h3, +.cui h4, +.cui h5, +.cui h6 { + margin:0 0 var(--cui-headings-margin); + font-family:inherit; + line-height:var(--cui-headings-line-height) +} +.cui .h1, +.cui h1 { + font-size:4rem; + font-weight:100 +} +.cui .h2, +.cui h2 { + font-size:3.2rem; + font-weight:200 +} +.cui .h3, +.cui h3 { + font-size:2.8rem; + font-weight:200 +} +.cui .h4, +.cui h4 { + font-size:2.4rem; + font-weight:300 +} +.cui .h5, +.cui h5 { + font-size:2rem; + font-weight:300 +} +.cui .h6, +.cui h6 { + font-size:1.6rem; + font-weight:300 +} +.cui .display-0, +.cui .display-1, +.cui .display-2, +.cui .display-3, +.cui .display-4 { + font-weight:var(--cui-headings-line-height) +} +.cui .display-0 { + font-size:8rem!important +} +.cui .display-1 { + font-size:6rem!important +} +.cui .display-2 { + font-size:5.5rem!important +} +.cui .display-3 { + font-size:4.5rem!important +} +.cui .display-4 { + font-size:3.5rem!important +} +@media (max-width:575.98px) { + .cui .display-0-xs, + .cui .display-1-xs, + .cui .display-2-xs, + .cui .display-3-xs, + .cui .display-4-xs { + font-weight:var(--cui-headings-line-height) + } + .cui .display-0-xs { + font-size:8rem!important + } + .cui .display-1-xs { + font-size:6rem!important + } + .cui .display-2-xs { + font-size:5.5rem!important + } + .cui .display-3-xs { + font-size:4.5rem!important + } + .cui .display-4-xs { + font-size:3.5rem!important + } +} +@media (max-width:767.98px) { + .cui .display-0-sm, + .cui .display-1-sm, + .cui .display-2-sm, + .cui .display-3-sm, + .cui .display-4-sm { + font-weight:var(--cui-headings-line-height) + } + .cui .display-0-sm { + font-size:8rem!important + } + .cui .display-1-sm { + font-size:6rem!important + } + .cui .display-2-sm { + font-size:5.5rem!important + } + .cui .display-3-sm { + font-size:4.5rem!important + } + .cui .display-4-sm { + font-size:3.5rem!important + } +} +@media (max-width:991.98px) { + .cui .display-0-md, + .cui .display-1-md, + .cui .display-2-md, + .cui .display-3-md, + .cui .display-4-md { + font-weight:var(--cui-headings-line-height) + } + .cui .display-0-md { + font-size:8rem!important + } + .cui .display-1-md { + font-size:6rem!important + } + .cui .display-2-md { + font-size:5.5rem!important + } + .cui .display-3-md { + font-size:4.5rem!important + } + .cui .display-4-md { + font-size:3.5rem!important + } +} +.cui .subheader, +.cui .subtitle { + text-transform:uppercase; + font-weight:400 +} +.cui .subheading { + color:var(--cui-inactive-color) +} +.cui .subheader { + letter-spacing:.05rem; + margin:0 0 var(--cui-spacing-half); + font-size:var(--cui-font-size-sm) +} +@media (max-width:575.98px) { + .cui .subheader { + font-size:var(--cui-font-size-xs)!important + } +} +.cui .lead, +.cui .subtitle { + font-size:var(--cui-font-size-lg) +} +.cui .subheader~.subheader { + margin-top:var(--cui-spacing) +} +.cui canvas, +.cui img, +.cui video { + max-width:100%; + height:auto; + box-sizing:border-box +} +.cui fieldset { + padding:0; + border:0 +} +.cui fieldset>:last-child { + margin-bottom:0 +} +.cui address, +.cui dl, +.cui fieldset, +.cui figure, +.cui p, +.cui pre { + margin:0 0 var(--cui-spacing) +} +.cui *+address, +.cui *+dl, +.cui *+fieldset, +.cui *+figure, +.cui *+ol, +.cui *+p, +.cui *+pre, +.cui *+ul { + margin-top:var(--cui-spacing-half) +} +.cui ol, +.cui ul { + margin:0; + padding-left:var(--cui-spacing) +} +.cui ol.list, +.cui ul.list { + list-style:none +} +.cui ol.list--inline, +.cui ul.list--inline { + display:inline-flex +} +.cui ol.list--inline li+li, +.cui ul.list--inline li+li { + margin-left:var(--cui-spacing-half) +} +.cui ol.list--loose li+li, +.cui ul.list--loose li+li { + margin-left:var(--cui-spacing) +} +.cui .lead { + margin-top:var(--cui-spacing-half) +} +.cui hr { + border-bottom:var(--cui-border); + border-left:none; + border-right:none; + border-top:none; + border-color:var(--cui-border-color); + margin:var(--cui-spacing) 0 +} +.cui img.img--fluid { + display:block; + width:100%; + height:auto +} +.cui pre { + margin:0; + white-space:pre-wrap +} +.cui * { + box-sizing:inherit +} +.cui button, +.cui input, +.cui select, +.cui textarea { + color:var(--cui-font-color); + font-size:var(--cui-font-size); + font-family:var(--cui-font-stack); + font-weight:inherit +} +.cui iframe { + width:100%; + height:100%; + border:var(--cui-border); + margin:var(--cui-spacing-half) 0; + display:inline-block +} +.cui .content { + flex:1; + overflow:hidden; + min-height:100vh; + -webkit-overflow-scrolling:touch +} +.cui .content.content--alt { + background-color:var(--cui-background-alt) +} +.cui .container, +.cui .container-fluid { + padding-right:var(--cui-spacing); + padding-left:var(--cui-spacing) +} +@media (max-width:991.98px) { + .cui .container, + .cui .container-fluid { + padding-right:var(--cui-spacing-half); + padding-left:var(--cui-spacing-half) + } +} +.cui .container { + max-width:var(--cui-default-page-width) +} +.cui .container-fluid { + max-width:var(--cui-max-page-width) +} +.cui .section { + padding-left:0; + padding-right:0; + padding:var(--cui-spacing) 0 +} +.cui .section:after { + clear:both!important; + content:""!important; + display:table!important +} +.cui .section.section--compressed { + padding:var(--cui-spacing-qtr) 0 +} +.cui .section.section--loose { + padding:var(--cui-spacing-dbl) 0 +} +.cui .section+.section { + padding-top:0 +} +@font-face { + font-family:cui-font; + src:url(../fonts/cui-font.eot); + src:url(../fonts/cui-font.eot?#iefix) format("eot"), + url(../fonts/cui-font.woff2) format("woff2"), + url(../fonts/cui-font.woff) format("woff"), + url(../fonts/cui-font.ttf) format("truetype"), + url(../fonts/cui-font.svg#cui-font) format("svg") +} +.cui .dropdown .dropdown__menu a.selected:after, +.cui .timeline .timeline__item .timeline__icon.timeline--danger:before, +.cui .timeline .timeline__item .timeline__icon.timeline--info:before, +.cui .timeline .timeline__item .timeline__icon.timeline--success:before, +.cui .timeline .timeline__item .timeline__icon.timeline--warning:before, +[class*=icon-] { + position:relative; + display:inline-block; + font-family:cui-font; + font-size:inherit; + font-style:normal; + font-weight:400; + speak:none; + text-decoration:inherit; + text-transform:none; + text-rendering:optimizeLegibility; + vertical-align:middle; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale +} +.icon-account:before { + content:"" +} +.icon-acessibility:before { + content:"" +} +.icon-activities:before { + content:"" +} +.icon-add-contact:before { + content:"" +} +.icon-add-contain:before { + content:"" +} +.icon-add-outline:before { + content:"" +} +.icon-add:before { + content:"" +} +.icon-admin:before { + content:"" +} +.icon-all-calls:before { + content:"" +} +.icon-analysis:before { + content:"" +} +.icon-android-home:before { + content:"" +} +.icon-animation:before { + content:"" +} +.icon-annotation:before { + content:"" +} +.icon-answer-oldest:before { + content:"" +} +.icon-applause:before { + content:"" +} +.icon-application:before { + content:"" +} +.icon-applications:before { + content:"" +} +.icon-apps:before { + content:"" +} +.icon-asterisk:before { + content:"" +} +.icon-at-contain:before { + content:"" +} +.icon-at:before { + content:"" +} +.icon-attachment:before { + content:"" +} +.icon-backup-data:before { + content:"" +} +.icon-blocked:before { + content:"" +} +.icon-bookmark:before { + content:"" +} +.icon-briefcase:before { + content:"" +} +.icon-broken-image:before { + content:"" +} +.icon-browser:before { + content:"" +} +.icon-bug:before { + content:"" +} +.icon-call-log:before { + content:"" +} +.icon-call-rate:before { + content:"" +} +.icon-callback:before { + content:"" +} +.icon-camera:before { + content:"" +} +.icon-cart:before { + content:"" +} +.icon-chapters:before { + content:"" +} +.icon-chats:before { + content:"" +} +.icon-circle:before { + content:"" +} +.icon-cisco:before { + content:"" +} +.icon-clipboard-md:before { + content:"" +} +.icon-clipboard-sm:before { + content:"" +} +.icon-clipboard:before { + content:"" +} +.icon-clone:before { + content:"" +} +.icon-close:before { + content:"" +} +.icon-cloud:before { + content:"" +} +.icon-cog:before { + content:"" +} +.icon-comment:before { + content:"" +} +.icon-communities:before { + content:"" +} +.icon-community:before { + content:"" +} +.icon-compass:before { + content:"" +} +.icon-compliance:before { + content:"" +} +.icon-computer-queue:before { + content:"" +} +.icon-computer:before { + content:"" +} +.icon-conference:before { + content:"" +} +.icon-configurations:before { + content:"" +} +.icon-contact-card:before { + content:"" +} +.icon-contact:before { + content:"" +} +.icon-contract-login-md:before { + content:"" +} +.icon-contract-login-sm:before { + content:"" +} +.icon-contract-login:before { + content:"" +} +.icon-create-page:before { + content:"" +} +.icon-data-usage:before { + content:"" +} +.icon-default-app:before { + content:"" +} +.icon-delete:before { + content:"" +} +.icon-diagnostics:before { + content:"" +} +.icon-dial:before { + content:"" +} +.icon-directory:before { + content:"" +} +.icon-disc:before { + content:"" +} +.icon-display:before { + content:"" +} +.icon-document:before { + content:"" +} +.icon-draggable:before { + content:"" +} +.icon-email:before { + content:"" +} +.icon-emoticons:before { + content:"" +} +.icon-exit-contain:before { + content:"" +} +.icon-exit-fullscreen:before { + content:"" +} +.icon-exit-outline:before { + content:"" +} +.icon-exit:before { + content:"" +} +.icon-eye-closed:before { + content:"" +} +.icon-eye:before { + content:"" +} +.icon-features:before { + content:"" +} +.icon-feedback-clear:before { + content:"" +} +.icon-feedback-result:before { + content:"" +} +.icon-feedback:before { + content:"" +} +.icon-filter:before { + content:"" +} +.icon-fullscreen:before { + content:"" +} +.icon-google-analytics:before { + content:"" +} +.icon-graph:before { + content:"" +} +.icon-grid-view:before { + content:"" +} +.icon-group-chat:before { + content:"" +} +.icon-help-alt:before { + content:"" +} +.icon-help-outline:before { + content:"" +} +.icon-help:before { + content:"" +} +.icon-home:before { + content:"" +} +.icon-hue:before { + content:"" +} +.icon-hunt-group:before { + content:"" +} +.icon-idefix:before { + content:"" +} +.icon-inbox:before { + content:"" +} +.icon-insights:before { + content:"" +} +.icon-instant-meeting:before { + content:"" +} +.icon-invite:before { + content:"" +} +.icon-keyboard:before { + content:"" +} +.icon-language:before { + content:"" +} +.icon-layers:before { + content:"" +} +.icon-layout:before { + content:"" +} +.icon-learning:before { + content:"" +} +.icon-lifecycle:before { + content:"" +} +.icon-lightbulb:before { + content:"" +} +.icon-like:before { + content:"" +} +.icon-list-menu:before { + content:"" +} +.icon-list-view:before { + content:"" +} +.icon-location:before { + content:"" +} +.icon-lock-contain:before { + content:"" +} +.icon-lock:before { + content:"" +} +.icon-mail-read:before { + content:"" +} +.icon-mail:before { + content:"" +} +.icon-meeting-room:before { + content:"" +} +.icon-message:before { + content:"" +} +.icon-micro-blog:before { + content:"" +} +.icon-mobile-phone:before { + content:"" +} +.icon-mobile-presenter:before { + content:"" +} +.icon-more:before { + content:"" +} +.icon-notebook-in:before { + content:"" +} +.icon-outbox:before { + content:"" +} +.icon-participant-list:before { + content:"" +} +.icon-pass-mouse:before { + content:"" +} +.icon-pause:before { + content:"" +} +.icon-persistent-chat:before { + content:"" +} +.icon-pin:before { + content:"" +} +.icon-playlist:before { + content:"" +} +.icon-plugin:before { + content:"" +} +.icon-plus:before { + content:"" +} +.icon-point:before { + content:"" +} +.icon-poll:before { + content:"" +} +.icon-popout:before { + content:"" +} +.icon-popup-dialogue:before { + content:"" +} +.icon-prevent-download-contain:before { + content:"" +} +.icon-prevent-download:before { + content:"" +} +.icon-print:before { + content:"" +} +.icon-privacy:before { + content:"" +} +.icon-private:before { + content:"" +} +.icon-profile-settings:before { + content:"" +} +.icon-proximity-not-connected:before { + content:"" +} +.icon-proximity:before { + content:"" +} +.icon-quality:before { + content:"" +} +.icon-question-circle:before { + content:"" +} +.icon-raise-hand:before { + content:"" +} +.icon-read-email:before { + content:"" +} +.icon-recent-apps:before { + content:"" +} +.icon-refresh:before { + content:"" +} +.icon-remove-contact:before { + content:"" +} +.icon-remove-contain:before { + content:"" +} +.icon-remove-outline:before { + content:"" +} +.icon-remove:before { + content:"" +} +.icon-reset:before { + content:"" +} +.icon-rtprx-rtptx-duplex:before { + content:"" +} +.icon-rtprx:before { + content:"" +} +.icon-rtptx:before { + content:"" +} +.icon-schedule-add:before { + content:"" +} +.icon-search:before { + content:"" +} +.icon-send:before { + content:"" +} +.icon-setup-assistant:before { + content:"" +} +.icon-shipment:before { + content:"" +} +.icon-sign-in:before { + content:"" +} +.icon-sign-out:before { + content:"" +} +.icon-signal-1:before { + content:"" +} +.icon-signal-2:before { + content:"" +} +.icon-signal-3:before { + content:"" +} +.icon-signal-4:before { + content:"" +} +.icon-slides:before { + content:"" +} +.icon-software-certified-md:before { + content:"" +} +.icon-software-certified-sm:before { + content:"" +} +.icon-software-certified:before { + content:"" +} +.icon-software-suggested-md:before { + content:"" +} +.icon-software-suggested-sm:before { + content:"" +} +.icon-software-suggested:before { + content:"" +} +.icon-software:before { + content:"" +} +.icon-space:before { + content:"" +} +.icon-speed-dial:before { + content:"" +} +.icon-square-o-checked:before { + content:"" +} +.icon-square-o:before { + content:"" +} +.icon-stability:before { + content:"" +} +.icon-storage:before { + content:"" +} +.icon-subscribe:before { + content:"" +} +.icon-swap-calls:before { + content:"" +} +.icon-tables:before { + content:"" +} +.icon-tags:before { + content:"" +} +.icon-team-collapsed-view:before { + content:"" +} +.icon-team-expanded-view:before { + content:"" +} +.icon-terminalalt:before { + content:"" +} +.icon-text:before { + content:"" +} +.icon-thumbnail-view:before { + content:"" +} +.icon-tine:before { + content:"" +} +.icon-toggle-menu:before { + content:"" +} +.icon-too-fast:before { + content:"" +} +.icon-too-slow:before { + content:"" +} +.icon-tools:before { + content:"" +} +.icon-touch-gesture:before { + content:"" +} +.icon-touch-point:before { + content:"" +} +.icon-touch:before { + content:"" +} +.icon-transcript:before { + content:"" +} +.icon-transit:before { + content:"" +} +.icon-trash:before { + content:"" +} +.icon-tree-closed:before { + content:"" +} +.icon-tree-opened:before { + content:"" +} +.icon-uikit:before { + content:"" +} +.icon-universal-inbox:before { + content:"" +} +.icon-unlock:before { + content:"" +} +.icon-user-queue:before { + content:"" +} +.icon-user:before { + content:"" +} +.icon-vibrate:before { + content:"" +} +.icon-voicemail:before { + content:"" +} +.icon-waiting-silence:before { + content:"" +} +.icon-wallpaper:before { + content:"" +} +.icon-watchlist:before { + content:"" +} +.icon-web-sharing:before { + content:"" +} +.icon-webhook:before { + content:"" +} +.icon-whiteboard-cross:before { + content:"" +} +.icon-whiteboard:before { + content:"" +} +.icon-work:before { + content:"" +} +.icon-zip:before { + content:"" +} +.icon-active-speaker-cross:before { + content:"" +} +.icon-active-speaker:before { + content:"" +} +.icon-audio-broadcast:before { + content:"" +} +.icon-audio-min:before { + content:"" +} +.icon-audio-plus:before { + content:"" +} +.icon-audio-settings:before { + content:"" +} +.icon-broadcast-message:before { + content:"" +} +.icon-dual-line:before { + content:"" +} +.icon-headset-cross:before { + content:"" +} +.icon-headset:before { + content:"" +} +.icon-intercom-duplex-connected:before { + content:"" +} +.icon-intercom-whisper:before { + content:"" +} +.icon-intercom:before { + content:"" +} +.icon-line-out-left:before { + content:"" +} +.icon-line-out-right:before { + content:"" +} +.icon-locked-speaker:before { + content:"" +} +.icon-mic-in:before { + content:"" +} +.icon-microphone:before { + content:"" +} +.icon-missed-call:before { + content:"" +} +.icon-music:before { + content:"" +} +.icon-mute:before { + content:"" +} +.icon-new-call:before { + content:"" +} +.icon-off-hook:before { + content:"" +} +.icon-other-phone:before { + content:"" +} +.icon-outgoing-call:before { + content:"" +} +.icon-paired-audio:before { + content:"" +} +.icon-paired-call:before { + content:"" +} +.icon-parked:before { + content:"" +} +.icon-phone-cross:before { + content:"" +} +.icon-phone:before { + content:"" +} +.icon-redial:before { + content:"" +} +.icon-ringer-settings:before { + content:"" +} +.icon-sound:before { + content:"" +} +.icon-speaker-cross:before { + content:"" +} +.icon-speaker-out-left:before { + content:"" +} +.icon-speaker:before { + content:"" +} +.icon-volume-cross:before { + content:"" +} +.icon-volume:before { + content:"" +} +.icon-ac-power:before { + content:"" +} +.icon-accesspoint-outline:before { + content:"" +} +.icon-accesspoint:before { + content:"" +} +.icon-cpu-chip:before { + content:"" +} +.icon-dc-power:before { + content:"" +} +.icon-desk-phone:before { + content:"" +} +.icon-devices:before { + content:"" +} +.icon-endpoint:before { + content:"" +} +.icon-gpu-graphicscard:before { + content:"" +} +.icon-key-expansion-module:before { + content:"" +} +.icon-manage-cable:before { + content:"" +} +.icon-memory-ram:before { + content:"" +} +.icon-network:before { + content:"" +} +.icon-pc:before { + content:"" +} +.icon-power-contain:before { + content:"" +} +.icon-power:before { + content:"" +} +.icon-router-outline:before { + content:"" +} +.icon-router:before { + content:"" +} +.icon-soft-phone:before { + content:"" +} +.icon-switch-outline:before { + content:"" +} +.icon-switch:before { + content:"" +} +.icon-tablet:before { + content:"" +} +.icon-virtual-machine:before { + content:"" +} +.icon-web-camera:before { + content:"" +} +.icon-wlc-outline:before { + content:"" +} +.icon-wlc:before { + content:"" +} +.icon-4-way-nav:before { + content:"" +} +.icon-arrow-down-tail:before { + content:"" +} +.icon-arrow-left-tail:before { + content:"" +} +.icon-arrow-right-tail:before { + content:"" +} +.icon-arrow-up-tail:before { + content:"" +} +.icon-arrow:before { + content:"" +} +.icon-back:before { + content:"" +} +.icon-call-forward-divert:before { + content:"" +} +.icon-call-handling:before { + content:"" +} +.icon-chevron-down:before { + content:"" +} +.icon-chevron-left-double:before { + content:"" +} +.icon-chevron-left:before { + content:"" +} +.icon-chevron-right-circle:before { + content:"" +} +.icon-chevron-right-double:before { + content:"" +} +.icon-chevron-right:before { + content:"" +} +.icon-chevron-up:before { + content:"" +} +.icon-close-keyboard:before { + content:"" +} +.icon-cloud-upload:before { + content:"" +} +.icon-download-contain:before { + content:"" +} +.icon-download:before { + content:"" +} +.icon-dropdown:before { + content:"" +} +.icon-export-16:before { + content:"" +} +.icon-export-24:before { + content:"" +} +.icon-export-48:before { + content:"" +} +.icon-export:before { + content:"" +} +.icon-fbw:before { + content:"" +} +.icon-forced-sign-in:before { + content:"" +} +.icon-forward-to-mobility:before { + content:"" +} +.icon-general-source-cross:before { + content:"" +} +.icon-general-source:before { + content:"" +} +.icon-group-call:before { + content:"" +} +.icon-import-16:before { + content:"" +} +.icon-import-24:before { + content:"" +} +.icon-import-48:before { + content:"" +} +.icon-import:before { + content:"" +} +.icon-incoming-call:before { + content:"" +} +.icon-jump-out:before { + content:"" +} +.icon-keyboard-close:before { + content:"" +} +.icon-leave-meeting:before { + content:"" +} +.icon-left-arrow:before { + content:"" +} +.icon-maximize:before { + content:"" +} +.icon-meet-me:before { + content:"" +} +.icon-merge-call:before { + content:"" +} +.icon-minimize:before { + content:"" +} +.icon-move-page:before { + content:"" +} +.icon-numbered-input:before { + content:"" +} +.icon-numbered-output:before { + content:"" +} +.icon-panel-shift-left:before { + content:"" +} +.icon-panel-shift-right:before { + content:"" +} +.icon-reply-all:before { + content:"" +} +.icon-right-arrow-closed-contained:before { + content:"" +} +.icon-right-arrow-closed-outline:before { + content:"" +} +.icon-right-arrow-contain:before { + content:"" +} +.icon-right-arrow-contained:before { + content:"" +} +.icon-right-arrow-outline:before { + content:"" +} +.icon-right-arrow:before { + content:"" +} +.icon-send-email:before { + content:"" +} +.icon-share-contain:before { + content:"" +} +.icon-share-content:before { + content:"" +} +.icon-share:before { + content:"" +} +.icon-transfer-to-mobile:before { + content:"" +} +.icon-transfer:before { + content:"" +} +.icon-upload-contain:before { + content:"" +} +.icon-upload:before { + content:"" +} +.icon-whisper:before { + content:"" +} +.icon-draw:before { + content:"" +} +.icon-edit-call:before { + content:"" +} +.icon-edit:before { + content:"" +} +.icon-eraser:before { + content:"" +} +.icon-hide-editor:before { + content:"" +} +.icon-highlight-line:before { + content:"" +} +.icon-highlight:before { + content:"" +} +.icon-highlighter-check:before { + content:"" +} +.icon-highlighter:before { + content:"" +} +.icon-keywords:before { + content:"" +} +.icon-link-broken:before { + content:"" +} +.icon-link:before { + content:"" +} +.icon-pencil:before { + content:"" +} +.icon-rotate-object-ccw:before { + content:"" +} +.icon-rotate-object-cw:before { + content:"" +} +.icon-save:before { + content:"" +} +.icon-screen-capture-square:before { + content:"" +} +.icon-screen-capture:before { + content:"" +} +.icon-show-editor:before { + content:"" +} +.icon-sort-amount-asc:before { + content:"" +} +.icon-sort-amount-desc:before { + content:"" +} +.icon-text-color:before { + content:"" +} +.icon-text-format:before { + content:"" +} +.icon-text-size:before { + content:"" +} +.icon-zoom-in:before { + content:"" +} +.icon-zoom-out:before { + content:"" +} +.icon-file-archive-o:before { + content:"" +} +.icon-file-audio-o:before { + content:"" +} +.icon-file-code-o:before { + content:"" +} +.icon-file-excel-o:before { + content:"" +} +.icon-file-image-o:before { + content:"" +} +.icon-file-o:before { + content:"" +} +.icon-file-pdf-o:before { + content:"" +} +.icon-file-powerpoint-o:before { + content:"" +} +.icon-file-text-o:before { + content:"" +} +.icon-file-text:before { + content:"" +} +.icon-file-video-o:before { + content:"" +} +.icon-file-word-o:before { + content:"" +} +.icon-file:before { + content:"" +} +.icon-folder:before { + content:"" +} +.icon-notes:before { + content:"" +} +.icon-report:before { + content:"" +} +.icon-spam:before { + content:"" +} +.icon-syslog:before { + content:"" +} +.icon-social-facebook:before { + content:"" +} +.icon-social-linkedin:before { + content:"" +} +.icon-social-twitter:before { + content:"" +} +.icon-alarm:before { + content:"" +} +.icon-alert-blank:before { + content:"" +} +.icon-alert:before { + content:"" +} +.icon-alerting:before { + content:"" +} +.icon-battery-0:before { + content:"" +} +.icon-battery-25:before { + content:"" +} +.icon-battery-50:before { + content:"" +} +.icon-battery-75:before { + content:"" +} +.icon-battery-full:before { + content:"" +} +.icon-battery:before { + content:"" +} +.icon-bell-cross:before { + content:"" +} +.icon-bell:before { + content:"" +} +.icon-certified:before { + content:"" +} +.icon-charging:before { + content:"" +} +.icon-check-outline:before { + content:"" +} +.icon-check-square-o:before { + content:"" +} +.icon-check-square:before { + content:"" +} +.cui .dropdown .dropdown__menu a.selected:after, +.icon-check:before { + content:"" +} +.icon-checklist:before { + content:"" +} +.icon-device-crash:before { + content:"" +} +.icon-device-faults:before { + content:"" +} +.icon-device-reload:before { + content:"" +} +.icon-disc-not-connected:before { + content:"" +} +.icon-error-outline:before { + content:"" +} +.icon-error:before { + content:"" +} +.icon-exclamation-circle:before { + content:"" +} +.icon-exclamation-triangle:before { + content:"" +} +.icon-flagged:before { + content:"" +} +.icon-info-circle:before { + content:"" +} +.icon-info-outline:before { + content:"" +} +.icon-info:before { + content:"" +} +.icon-no-signal:before { + content:"" +} +.icon-presence-available:before { + content:"" +} +.icon-presence-end:before { + content:"" +} +.icon-presence-offline:before { + content:"" +} +.icon-priority:before { + content:"" +} +.icon-running-application:before { + content:"" +} +.icon-sent:before { + content:"" +} +.icon-spinner:before { + content:"" +} +.icon-star-empty:before { + content:"" +} +.icon-star-half:before { + content:"" +} +.icon-star:before { + content:"" +} +.icon-warning-outline:before { + content:"" +} +.icon-warning:before { + content:"" +} +.icon-aci:before { + content:"" +} +.icon-bdb:before { + content:"" +} +.icon-bluetooth-contain-cross:before { + content:"" +} +.icon-bluetooth-contained:before { + content:"" +} +.icon-bluetooth-outline:before { + content:"" +} +.icon-bluetooth:before { + content:"" +} +.icon-dms:before { + content:"" +} +.icon-dna:before { + content:"" +} +.icon-ethernet:before { + content:"" +} +.icon-extension-mobility:before { + content:"" +} +.icon-ground:before { + content:"" +} +.icon-mlpp-1:before { + content:"" +} +.icon-mlpp-2:before { + content:"" +} +.icon-mlpp-3:before { + content:"" +} +.icon-mlpp-4:before { + content:"" +} +.icon-mlpp-5:before { + content:"" +} +.icon-sd:before { + content:"" +} +.icon-spark:before { + content:"" +} +.icon-usb:before { + content:"" +} +.icon-webex-meetings-16:before { + content:"" +} +.icon-webex-meetings-24:before { + content:"" +} +.icon-webex-meetings-48:before { + content:"" +} +.icon-webex-teams-16:before { + content:"" +} +.icon-webex-teams-24:before { + content:"" +} +.icon-webex-teams-48:before { + content:"" +} +.icon-webex:before { + content:"" +} +.icon-wifi-1:before { + content:"" +} +.icon-wifi-2:before { + content:"" +} +.icon-wifi-3:before { + content:"" +} +.icon-wifi:before { + content:"" +} +.icon-calendar-meetings:before { + content:"" +} +.icon-calendar-weekly:before { + content:"" +} +.icon-calendar:before { + content:"" +} +.icon-clock:before { + content:"" +} +.icon-day:before { + content:"" +} +.icon-exernal-calendar:before { + content:"" +} +.icon-history:before { + content:"" +} +.icon-month:before { + content:"" +} +.icon-time:before { + content:"" +} +.icon-timeline:before { + content:"" +} +.icon-aux-camera:before { + content:"" +} +.icon-brightness:before { + content:"" +} +.icon-document-camera-cross:before { + content:"" +} +.icon-document-camera:before { + content:"" +} +.icon-ffw:before { + content:"" +} +.icon-image-contain:before { + content:"" +} +.icon-image:before { + content:"" +} +.icon-laser-pointer:before { + content:"" +} +.icon-media-viewer:before { + content:"" +} +.icon-multi-display:before { + content:"" +} +.icon-picture-in-picture:before { + content:"" +} +.icon-pip-0:before { + content:"" +} +.icon-pip-1:before { + content:"" +} +.icon-pip-2:before { + content:"" +} +.icon-pip-3:before { + content:"" +} +.icon-pip:before { + content:"" +} +.icon-play-contained:before { + content:"" +} +.icon-play:before { + content:"" +} +.icon-presentation:before { + content:"" +} +.icon-record:before { + content:"" +} +.icon-self-view-alt:before { + content:"" +} +.icon-self-view-crossed:before { + content:"" +} +.icon-self-view:before { + content:"" +} +.icon-skip-bw:before { + content:"" +} +.icon-skip-fw:before { + content:"" +} +.icon-step-backward:before { + content:"" +} +.icon-step-forward:before { + content:"" +} +.icon-step-next:before { + content:"" +} +.icon-step-prev:before { + content:"" +} +.icon-stop:before { + content:"" +} +.icon-swap-camera:before { + content:"" +} +.icon-swap-video-camera:before { + content:"" +} +.icon-video-cross:before { + content:"" +} +.icon-video-input:before { + content:"" +} +.icon-video-layout:before { + content:"" +} +.icon-video-settings:before { + content:"" +} +.icon-video-tips:before { + content:"" +} +.icon-video:before { + content:"" +} +.icon-view-feed-dual:before { + content:"" +} +.icon-view-feed-multi:before { + content:"" +} +.icon-view-feed-single:before { + content:"" +} +.icon-view-preview-telepresence:before { + content:"" +} +.icon-view-side-by-side:before { + content:"" +} +.icon-view-split:before { + content:"" +} +.icon-view-stacked:before { + content:"" +} +.cui .disabled, +.cui [disabled] { + opacity:.5; + cursor:not-allowed!important; + pointer-events:none!important; + z-index:0!important +} +.cui .disable-pointer { + pointer-events:none!important +} +.cui .readonly { + opacity:.5; + cursor:not-allowed; + z-index:0 +} +.cui .clearfix:after { + clear:both!important; + content:""!important; + display:table!important +} +.cui .pull-left { + float:left!important +} +.cui .pull-right { + float:right!important +} +.cui [class*=hover-emboss], +.cui [class*=hover-engrave] { + transition:box-shadow .2s ease-in +} +.cui .hover-emboss--small:hover { + box-shadow:var(--cui-shadow-outset-sm) +} +.cui .hover-emboss--medium:hover, +.cui .hover-emboss:hover { + box-shadow:var(--cui-shadow-outset) +} +.cui .hover-emboss--large:hover { + box-shadow:var(--cui-shadow-outset-lg) +} +.cui .hover-engrave--small:hover { + box-shadow:var(--cui-shadow-inset-sm) +} +.cui .hover-engrave--medium:hover, +.cui .hover-engrave:hover { + box-shadow:var(--cui-shadow-inset) +} +.cui .hover-engrave--large:hover { + box-shadow:var(--cui-shadow-inset-lg) +} +.cui .emboss--small:hover { + box-shadow:var(--cui-shadow-outset-sm) +} +.cui .emboss, +.cui .emboss--medium { + box-shadow:var(--cui-shadow-outset) +} +.cui .emboss--large { + box-shadow:var(--cui-shadow-outset-lg) +} +.cui .opacity-10 { + opacity:.1!important +} +.cui .opacity-20 { + opacity:.2!important +} +.cui .opacity-30 { + opacity:.3!important +} +.cui .opacity-40 { + opacity:.4!important +} +.cui .opacity-50 { + opacity:.5!important +} +.cui .opacity-60 { + opacity:.6!important +} +.cui .opacity-70 { + opacity:.7!important +} +.cui .opacity-80 { + opacity:.8!important +} +.cui .opacity-90 { + opacity:.9!important +} +.cui .rotate-30 { + transform:rotate(30deg)!important +} +.cui .rotate-45 { + transform:rotate(45deg)!important +} +.cui .rotate-60 { + transform:rotate(60deg)!important +} +.cui .rotate-90 { + transform:rotate(90deg)!important +} +.cui .rotate-135 { + transform:rotate(135deg)!important +} +.cui .rotate-180 { + transform:rotate(180deg)!important +} +.cui .rotate-225 { + transform:rotate(225deg)!important +} +.cui .rotate-270 { + transform:rotate(270deg)!important +} +.cui .rotate-315 { + transform:rotate(315deg)!important +} +.cui .icon-size-10 { + line-height:1rem!important; + font-size:1rem!important +} +.cui .icon-size-12 { + line-height:1.2rem!important; + font-size:1.2rem!important +} +.cui .icon-size-14 { + line-height:1.4rem!important; + font-size:1.4rem!important +} +.cui .icon-size-16 { + line-height:1.6rem!important; + font-size:1.6rem!important +} +.cui .icon-size-18 { + line-height:1.8rem!important; + font-size:1.8rem!important +} +.cui .icon-size-20 { + line-height:2rem!important; + font-size:2rem!important +} +.cui .icon-size-24 { + line-height:2.4rem!important; + font-size:2.4rem!important +} +.cui .icon-size-28 { + line-height:2.8rem!important; + font-size:2.8rem!important +} +.cui .icon-size-32 { + line-height:3.2rem!important; + font-size:3.2rem!important +} +.cui .icon-size-36 { + line-height:3.6rem!important; + font-size:3.6rem!important +} +.cui .icon-size-48 { + line-height:4.8rem!important; + font-size:4.8rem!important +} +.cui .icon-size-64 { + line-height:6.4rem!important; + font-size:6.4rem!important +} +.cui .icon-size-96 { + line-height:9.6rem!important; + font-size:9.6rem!important +} +.cui .icon-size-128 { + line-height:12.8rem!important; + font-size:12.8rem!important +} +.icon-huge .cui:before { + line-height:8.4rem!important; + font-size:8.4rem!important +} +.icon-large .cui:before { + line-height:5.6rem!important; + font-size:5.6rem!important +} +.icon-medium-large .cui:before { + line-height:3.6rem!important; + font-size:3.6rem!important +} +.icon-medium .cui:before { + line-height:2.8rem!important; + font-size:2.8rem!important +} +.icon-medium-small .cui:before { + line-height:2.4rem!important; + font-size:2.4rem!important +} +.icon-small .cui:before { + line-height:1.6rem!important; + font-size:1.6rem!important +} +.cui .text-size-10, +.icon-tiny .cui:before { + font-size:1rem!important +} +.icon-tiny .cui:before { + line-height:1rem!important +} +.cui .inline-qtr-spacing>*+* { + margin-left:var(--cui-spacing-qtr) +} +.cui .no-margin { + margin:0!important +} +.cui .no-margin-top { + margin-top:0!important +} +.cui .no-margin-right { + margin-right:0!important +} +.cui .no-margin-bottom { + margin-bottom:0!important +} +.cui .no-margin-left { + margin-left:0!important +} +.cui .qtr-margin { + margin:var(--cui-spacing-qtr)!important +} +.cui .qtr-margin-top { + margin-top:var(--cui-spacing-qtr)!important +} +.cui .qtr-margin-right { + margin-right:var(--cui-spacing-qtr)!important +} +.cui .qtr-margin-bottom { + margin-bottom:var(--cui-spacing-qtr)!important +} +.cui .qtr-margin-left { + margin-left:var(--cui-spacing-qtr)!important +} +.cui .half-margin { + margin:var(--cui-spacing-half)!important +} +.cui .half-margin-top { + margin-top:var(--cui-spacing-half)!important +} +.cui .half-margin-right { + margin-right:var(--cui-spacing-half)!important +} +.cui .half-margin-bottom { + margin-bottom:var(--cui-spacing-half)!important +} +.cui .half-margin-left { + margin-left:var(--cui-spacing-half)!important +} +.cui .base-margin { + margin:var(--cui-spacing)!important +} +.cui .base-margin-top { + margin-top:var(--cui-spacing)!important +} +.cui .base-margin-right { + margin-right:var(--cui-spacing)!important +} +.cui .base-margin-bottom { + margin-bottom:var(--cui-spacing)!important +} +.cui .base-margin-left { + margin-left:var(--cui-spacing)!important +} +.cui .dbl-margin { + margin:var(--cui-spacing-dbl)!important +} +.cui .dbl-margin-top { + margin-top:var(--cui-spacing-dbl)!important +} +.cui .dbl-margin-right { + margin-right:var(--cui-spacing-dbl)!important +} +.cui .dbl-margin-bottom { + margin-bottom:var(--cui-spacing-dbl)!important +} +.cui .dbl-margin-left { + margin-left:var(--cui-spacing-dbl)!important +} +.cui .no-padding { + padding:0!important +} +.cui .no-padding-top { + padding-top:0!important +} +.cui .no-padding-right { + padding-right:0!important +} +.cui .no-padding-bottom { + padding-bottom:0!important +} +.cui .no-padding-left { + padding-left:0!important +} +.cui .qtr-padding { + padding:var(--cui-spacing-qtr)!important +} +.cui .qtr-padding-top { + padding-top:var(--cui-spacing-qtr)!important +} +.cui .qtr-padding-right { + padding-right:var(--cui-spacing-qtr)!important +} +.cui .qtr-padding-bottom { + padding-bottom:var(--cui-spacing-qtr)!important +} +.cui .qtr-padding-left { + padding-left:var(--cui-spacing-qtr)!important +} +.cui .half-padding { + padding:var(--cui-spacing-half)!important +} +.cui .half-padding-top { + padding-top:var(--cui-spacing-half)!important +} +.cui .half-padding-right { + padding-right:var(--cui-spacing-half)!important +} +.cui .half-padding-bottom { + padding-bottom:var(--cui-spacing-half)!important +} +.cui .half-padding-left { + padding-left:var(--cui-spacing-half)!important +} +.cui .base-padding { + padding:var(--cui-spacing)!important +} +.cui .base-padding-top { + padding-top:var(--cui-spacing)!important +} +.cui .base-padding-right { + padding-right:var(--cui-spacing)!important +} +.cui .base-padding-bottom { + padding-bottom:var(--cui-spacing)!important +} +.cui .base-padding-left { + padding-left:var(--cui-spacing)!important +} +.cui .dbl-padding { + padding:var(--cui-spacing-dbl)!important +} +.cui .dbl-padding-top { + padding-top:var(--cui-spacing-dbl)!important +} +.cui .dbl-padding-right { + padding-right:var(--cui-spacing-dbl)!important +} +.cui .dbl-padding-bottom { + padding-bottom:var(--cui-spacing-dbl)!important +} +.cui .dbl-padding-left { + padding-left:var(--cui-spacing-dbl)!important +} +.cui .absolute, +.cui [class*=absolute-] { + position:absolute!important +} +.cui .relative { + position:relative!important +} +.cui .absolute-center { + z-index:10!important; + position:absolute!important; + top:50%!important; + left:50%!important; + transform:translate(-50%,-50%)!important +} +.cui .fixed-bottom, +.cui .fixed-bottom-5xl-down, +.cui .fixed-bottom-xs-up, +.cui .fixed-left, +.cui .fixed-left-5xl-down, +.cui .fixed-left-xs-up, +.cui .fixed-right, +.cui .fixed-right-5xl-down, +.cui .fixed-top, +.cui .fixed-top-5xl-down, +.cui .fixed-top-xs-up { + position:fixed!important +} +.cui .absolute-center--top { + top:30%!important +} +.cui .absolute-center--right { + left:70%!important +} +.cui .absolute-center--bottom { + top:70%!important +} +.cui .absolute-center--left { + left:30%!important +} +.cui .absolute-left, +.cui .fixed-left { + left:0!important +} +.cui .absolute-top { + top:0!important +} +.cui .absolute-top-half-negative { + top:-50% +} +.cui .fixed-top { + top:0!important +} +.cui .fixed-top-xs-up { + top:0 +} +.cui .fixed-right-xs-up { + position:fixed!important; + right:0 +} +.cui .fixed-bottom-xs-up { + bottom:0 +} +.cui .fixed-left-xs-up { + left:0 +} +.cui .fixed-top-5xl-down { + top:0 +} +.cui .fixed-right-5xl-down { + right:0 +} +.cui .fixed-bottom-5xl-down { + bottom:0 +} +.cui .fixed-left-5xl-down { + left:0 +} +.cui .hide, +.cui [class*=visible-] { + display:none!important +} +.cui .show { + display:block!important +} +.cui .visible { + visibility:visible!important +} +.cui .invisible { + visibility:hidden!important +} +.cui .overflow-auto { + overflow:auto!important +} +.cui .overflow-hidden { + overflow:hidden!important +} +@media (max-width:575.98px) { + .cui .fixed-top-xs-down { + position:fixed!important; + top:0 + } + .cui .fixed-right-xs-down { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-xs-down { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-xs-down { + position:fixed!important; + left:0 + } + .cui .hidden-xs-down { + display:none!important + } + .cui .visible-xs-down { + display:block!important + } +} +@media (max-width:767.98px) { + .cui .fixed-top-sm-down { + position:fixed!important; + top:0 + } + .cui .fixed-right-sm-down { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-sm-down { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-sm-down { + position:fixed!important; + left:0 + } + .cui .hidden-sm-down { + display:none!important + } + .cui .visible-sm-down { + display:block!important + } +} +@media (max-width:991.98px) { + .cui .fixed-top-md-down { + position:fixed!important; + top:0 + } + .cui .fixed-right-md-down { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-md-down { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-md-down { + position:fixed!important; + left:0 + } + .cui .hidden-md-down { + display:none!important + } + .cui .visible-md-down { + display:block!important + } +} +@media (max-width:1199.98px) { + .cui .fixed-top-lg-down { + position:fixed!important; + top:0 + } + .cui .fixed-right-lg-down { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-lg-down { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-lg-down { + position:fixed!important; + left:0 + } + .cui .hidden-lg-down { + display:none!important + } + .cui .visible-lg-down { + display:block!important + } +} +@media (max-width:1439.98px) { + .cui .fixed-top-xl-down { + position:fixed!important; + top:0 + } + .cui .fixed-right-xl-down { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-xl-down { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-xl-down { + position:fixed!important; + left:0 + } + .cui .hidden-xl-down { + display:none!important + } + .cui .visible-xl-down { + display:block!important + } +} +@media (max-width:1599.98px) { + .cui .fixed-top-2xl-down { + position:fixed!important; + top:0 + } + .cui .fixed-right-2xl-down { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-2xl-down { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-2xl-down { + position:fixed!important; + left:0 + } + .cui .hidden-2xl-down { + display:none!important + } + .cui .visible-2xl-down { + display:block!important + } +} +@media (max-width:1839.98px) { + .cui .fixed-top-3xl-down { + position:fixed!important; + top:0 + } + .cui .fixed-right-3xl-down { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-3xl-down { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-3xl-down { + position:fixed!important; + left:0 + } + .cui .hidden-3xl-down { + display:none!important + } + .cui .visible-3xl-down { + display:block!important + } +} +@media (max-width:2099.98px) { + .cui .fixed-top-4xl-down { + position:fixed!important; + top:0 + } + .cui .fixed-right-4xl-down { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-4xl-down { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-4xl-down { + position:fixed!important; + left:0 + } + .cui .hidden-4xl-down { + display:none!important + } + .cui .visible-4xl-down { + display:block!important + } +} +.cui .hidden-5xl-down { + display:none!important +} +.cui .visible-5xl-down { + display:block!important +} +.cui .hidden-xs-up { + display:none!important +} +.cui .visible-xs-up { + display:block!important +} +@media (min-width:576px) { + .cui .fixed-top-sm-up { + position:fixed!important; + top:0 + } + .cui .fixed-right-sm-up { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-sm-up { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-sm-up { + position:fixed!important; + left:0 + } + .cui .hidden-sm-up { + display:none!important + } + .cui .visible-sm-up { + display:block!important + } +} +@media (min-width:768px) { + .cui .fixed-top-md-up { + position:fixed!important; + top:0 + } + .cui .fixed-right-md-up { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-md-up { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-md-up { + position:fixed!important; + left:0 + } + .cui .hidden-md-up { + display:none!important + } + .cui .visible-md-up { + display:block!important + } +} +@media (min-width:992px) { + .cui .fixed-top-lg-up { + position:fixed!important; + top:0 + } + .cui .fixed-right-lg-up { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-lg-up { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-lg-up { + position:fixed!important; + left:0 + } + .cui .hidden-lg-up { + display:none!important + } + .cui .visible-lg-up { + display:block!important + } +} +@media (min-width:1200px) { + .cui .fixed-top-xl-up { + position:fixed!important; + top:0 + } + .cui .fixed-right-xl-up { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-xl-up { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-xl-up { + position:fixed!important; + left:0 + } + .cui .hidden-xl-up { + display:none!important + } + .cui .visible-xl-up { + display:block!important + } +} +@media (min-width:1440px) { + .cui .fixed-top-2xl-up { + position:fixed!important; + top:0 + } + .cui .fixed-right-2xl-up { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-2xl-up { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-2xl-up { + position:fixed!important; + left:0 + } + .cui .hidden-2xl-up { + display:none!important + } + .cui .visible-2xl-up { + display:block!important + } +} +@media (min-width:1600px) { + .cui .fixed-top-3xl-up { + position:fixed!important; + top:0 + } + .cui .fixed-right-3xl-up { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-3xl-up { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-3xl-up { + position:fixed!important; + left:0 + } + .cui .hidden-3xl-up { + display:none!important + } + .cui .visible-3xl-up { + display:block!important + } +} +@media (min-width:1840px) { + .cui .fixed-top-4xl-up { + position:fixed!important; + top:0 + } + .cui .fixed-right-4xl-up { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-4xl-up { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-4xl-up { + position:fixed!important; + left:0 + } + .cui .hidden-4xl-up { + display:none!important + } + .cui .visible-4xl-up { + display:block!important + } +} +@media (min-width:2100px) { + .cui .fixed-top-5xl-up { + position:fixed!important; + top:0 + } + .cui .fixed-right-5xl-up { + position:fixed!important; + right:0 + } + .cui .fixed-bottom-5xl-up { + position:fixed!important; + bottom:0 + } + .cui .fixed-left-5xl-up { + position:fixed!important; + left:0 + } + .cui .hidden-5xl-up { + display:none!important + } + .cui .visible-5xl-up { + display:block!important + } +} +@media (max-width:575px) { + .cui .hidden-xs { + display:none!important + } +} +@media (min-width:576px) and (max-width:767px) { + .cui .hidden-sm { + display:none!important + } +} +@media (min-width:768px) and (max-width:991px) { + .cui .hidden-md { + display:none!important + } +} +@media (min-width:992px) and (max-width:1199px) { + .cui .hidden-lg { + display:none!important + } +} +@media (min-width:1200px) { + .cui .hidden-xl { + display:none!important + } + .cui .visible-xl { + display:block!important + } +} +@media (max-width:575px) { + .cui .visible-xs { + display:block!important + } +} +@media (min-width:576px) and (max-width:767px) { + .cui .visible-sm { + display:block!important + } +} +@media (min-width:768px) and (max-width:991px) { + .cui .visible-md { + display:block!important + } +} +@media (min-width:992px) and (max-width:1199px) { + .cui .visible-lg { + display:block!important + } +} +.cui .v-separator { + border-right:1px solid var(--cui-border-color); + margin:var(--cui-spacing-qtr) var(--cui-spacing-half) var(--cui-spacing-qtr) 0; + padding-left:var(--cui-spacing-half); + display:inline-flex; + vertical-align:middle; + height:var(--cui-spacing-triqtr) +} +.cui blockquote, +.cui blockquote cite, +.cui blockquote.blockquote--primary, +.cui blockquote.blockquote--primary cite { + border-color:var(--cui-theme-primary) +} +.cui blockquote, +.cui blockquote.blockquote--left { + border-width:0; + border-style:none none none solid +} +.cui .v-separator--small { + height:var(--cui-spacing-half) +} +.cui .v-separator--large { + height:var(--cui-spacing) +} +.cui .v-separator--huge { + height:var(--cui-spacing-dbl) +} +@media (max-width:767px) { + .cui .center-xs { + text-align:center!important + } + .cui .pull-right-xs { + float:right!important + } + .cui .pull-left-xs { + float:left!important + } + .cui .text-left-xs { + text-align:left + } + .cui .visible-inline-xs { + display:inline-block!important + } +} +.cui .row.no-gutters { + margin-right:0!important; + margin-left:0!important +} +.cui .row.no-gutters>[class*=" col-"], +.cui .row.no-gutters>[class^=col-] { + padding-right:0!important; + padding-left:0!important +} +.cui .max-height { + height:100%!important +} +.cui .max-width { + width:100%!important +} +.cui .bg-primary { + background-color:var(--cui-theme-primary)!important +} +.cui .bg-secondary { + background-color:var(--cui-theme-secondary)!important +} +.cui .bg-tertiary { + background-color:var(--cui-theme-tertiary)!important +} +.cui .bg-success { + background-color:var(--cui-theme-success)!important +} +.cui .bg-info { + background-color:var(--cui-theme-info)!important +} +.cui .bg-warning-alt { + background-color:var(--cui-theme-warning-alt)!important +} +.cui .bg-warning { + background-color:var(--cui-theme-warning)!important +} +.cui .bg-danger { + background-color:var(--cui-theme-danger)!important +} +.cui .bg-dark { + background-color:var(--cui-theme-dark)!important +} +.cui .bg-light { + background-color:var(--cui-theme-light)!important +} +.cui .bg-gray-white { + background-color:var(--cui-color-white)!important +} +.cui .bg-gray-100 { + background-color:var(--cui-color-gray-100)!important +} +.cui .bg-gray-200 { + background-color:var(--cui-color-gray-200)!important +} +.cui .bg-gray-300 { + background-color:var(--cui-color-gray-300)!important +} +.cui .bg-gray-400 { + background-color:var(--cui-color-gray-400)!important +} +.cui .bg-gray-500 { + background-color:var(--cui-color-gray-500)!important +} +.cui .bg-gray-600 { + background-color:var(--cui-color-gray-600)!important +} +.cui .bg-gray-700 { + background-color:var(--cui-color-gray-700)!important +} +.cui .bg-gray-800 { + background-color:var(--cui-color-gray-800)!important +} +.cui .bg-gray-900 { + background-color:var(--cui-color-gray-900)!important +} +.cui .bg-gray-black { + background-color:var(--cui-color-black)!important +} +.cui .pill-border-radius { + border-radius:50px!important +} +.cui .flex { + display:flex +} +.cui .flex-inline { + display:inline-flex +} +.cui .flex-align-start, +.cui .flex-left { + justify-content:flex-start +} +.cui .flex-center, +.cui .flex-center-horizontal { + justify-content:center +} +.cui .flex-align-end, +.cui .flex-right { + justify-content:flex-end +} +.cui .flex-around { + justify-content:space-around +} +.cui .flex-between { + justify-content:space-between +} +.cui .flex-top { + align-items:flex-start +} +.cui .flex-center-vertical, +.cui .flex-middle { + display:flex; + align-items:center +} +.cui .flex-bottom { + align-items:flex-end +} +.cui .flex-stretch { + align-items:stretch +} +.cui .flex-wrap { + flex-wrap:wrap +} +.cui .flex-nowrap { + flex-wrap:nowrap +} +.cui .flex-wrap-reverse { + flex-wrap:wrap-reverse +} +.cui .flex-fluid { + flex:1!important; + flex-shrink:1!important; + flex-wrap:wrap!important +} +.cui .flex-panel { + display:flex; + flex:1; + align-items:center +} +@media (max-width:575.98px) { + .cui .flex-center-xs { + display:flex!important; + align-items:center!important; + justify-content:center!important + } +} +@media (max-width:767.98px) { + .cui .flex-center-sm, + .cui .flex-center-sm-down { + flex:1!important; + flex-shrink:1!important; + flex-wrap:wrap!important; + display:flex!important; + align-items:center!important; + justify-content:center!important + } +} +@media (max-width:991.98px) { + .cui .flex-center-md, + .cui .flex-center-md-down { + flex:1!important; + flex-shrink:1!important; + flex-wrap:wrap!important; + display:flex!important; + align-items:center!important; + justify-content:center!important + } +} +.cui .text-left { + text-align:left!important +} +.cui .text-center { + text-align:center!important +} +.cui .text-right { + text-align:right!important +} +.cui .text-justify { + text-align:justify!important +} +@media (max-width:767.98px) { + .cui .text-left-sm-down { + text-align:left!important + } +} +@media (max-width:991.98px) { + .cui .text-left-md-down { + text-align:left!important + } +} +@media (max-width:1199.98px) { + .cui .flex-center-lg, + .cui .flex-center-lg-down { + flex:1!important; + flex-shrink:1!important; + flex-wrap:wrap!important; + display:flex!important; + align-items:center!important; + justify-content:center!important + } + .cui .text-left-lg-down { + text-align:left!important + } +} +@media (max-width:1439.98px) { + .cui .text-left-xl-down { + text-align:left!important + } +} +@media (max-width:1599.98px) { + .cui .text-left-2xl-down { + text-align:left!important + } +} +@media (max-width:1839.98px) { + .cui .text-left-3xl-down { + text-align:left!important + } +} +@media (max-width:2099.98px) { + .cui .text-left-4xl-down { + text-align:left!important + } +} +.cui .text-left-5xl-down { + text-align:left!important +} +@media (max-width:575.98px) { + .cui .text-left-xs-down { + text-align:left!important + } + .cui .text-center-xs-down { + text-align:center!important + } +} +@media (max-width:767.98px) { + .cui .text-center-sm-down { + text-align:center!important + } +} +@media (max-width:991.98px) { + .cui .text-center-md-down { + text-align:center!important + } +} +@media (max-width:1199.98px) { + .cui .text-center-lg-down { + text-align:center!important + } +} +@media (max-width:1439.98px) { + .cui .text-center-xl-down { + text-align:center!important + } +} +@media (max-width:1599.98px) { + .cui .text-center-2xl-down { + text-align:center!important + } +} +@media (max-width:1839.98px) { + .cui .text-center-3xl-down { + text-align:center!important + } +} +@media (max-width:2099.98px) { + .cui .text-center-4xl-down { + text-align:center!important + } +} +.cui .text-center-5xl-down { + text-align:center!important +} +@media (max-width:575.98px) { + .cui .text-right-xs-down { + text-align:right!important + } +} +@media (max-width:767.98px) { + .cui .text-right-sm-down { + text-align:right!important + } +} +@media (max-width:991.98px) { + .cui .text-right-md-down { + text-align:right!important + } +} +@media (max-width:1199.98px) { + .cui .text-right-lg-down { + text-align:right!important + } +} +@media (max-width:1439.98px) { + .cui .text-right-xl-down { + text-align:right!important + } +} +@media (max-width:1599.98px) { + .cui .text-right-2xl-down { + text-align:right!important + } +} +@media (max-width:1839.98px) { + .cui .text-right-3xl-down { + text-align:right!important + } +} +@media (max-width:2099.98px) { + .cui .text-right-4xl-down { + text-align:right!important + } +} +.cui .text-right-5xl-down { + text-align:right!important +} +.cui .text-primary { + color:var(--cui-theme-primary)!important +} +.cui .text-secondary { + color:var(--cui-theme-secondary)!important +} +.cui .text-tertiary { + color:var(--cui-theme-tertiary)!important +} +.cui .text-success { + color:var(--cui-theme-success)!important +} +.cui .text-info { + color:var(--cui-theme-info)!important +} +.cui .text-warning-alt { + color:var(--cui-theme-warning-alt)!important +} +.cui .text-warning { + color:var(--cui-theme-warning)!important +} +.cui .text-danger { + color:var(--cui-theme-danger)!important +} +.cui .text-dark { + color:var(--cui-theme-dark)!important +} +.cui .text-light { + color:var(--cui-theme-light)!important +} +.cui .text-gray-white { + color:var(--cui-color-white)!important +} +.cui .text-gray-100 { + color:var(--cui-color-gray-100)!important +} +.cui .text-gray-200 { + color:var(--cui-color-gray-200)!important +} +.cui .text-gray-300 { + color:var(--cui-color-gray-300)!important +} +.cui .text-gray-400 { + color:var(--cui-color-gray-400)!important +} +.cui .text-gray-500 { + color:var(--cui-color-gray-500)!important +} +.cui .text-gray-600 { + color:var(--cui-color-gray-600)!important +} +.cui .text-gray-700 { + color:var(--cui-color-gray-700)!important +} +.cui .text-gray-800 { + color:var(--cui-color-gray-800)!important +} +.cui .text-gray-900 { + color:var(--cui-color-gray-900)!important +} +.cui .text-black, +.cui .text-gray-black { + color:var(--cui-color-black)!important +} +.cui .text-white { + color:var(--cui-color-white)!important +} +.cui .text-link { + color:var(--cui-link-color)!important +} +.cui .text-muted { + color:var(--cui-inactive-color)!important +} +.cui .text-size-12 { + font-size:1.2rem!important +} +.cui .text-size-14 { + font-size:1.4rem!important +} +.cui .text-size-16 { + font-size:1.6rem!important +} +.cui .text-size-18 { + font-size:1.8rem!important +} +.cui .text-size-20 { + font-size:2rem!important +} +.cui .text-size-24 { + font-size:2.4rem!important +} +.cui .text-size-28 { + font-size:2.8rem!important +} +.cui .text-size-32 { + font-size:3.2rem!important +} +.cui .text-size-36 { + font-size:3.6rem!important +} +.cui .text-size-48 { + font-size:4.8rem!important +} +.cui .text-size-64 { + font-size:6.4rem!important +} +.cui .text-size-96 { + font-size:9.6rem!important +} +.cui .text-size-128 { + font-size:12.8rem!important +} +.cui .text-xsmall { + font-size:var(--cui-font-size-xs)!important +} +.cui .text-small { + font-size:var(--cui-font-size-sm)!important +} +.cui .text-medium { + font-size:var(--cui-font-size)!important +} +.cui .text-large { + font-size:var(--cui-font-size-lg)!important +} +.cui .text-weight-100 { + font-weight:100!important +} +.cui .text-weight-200 { + font-weight:200!important +} +.cui .text-weight-300 { + font-weight:300!important +} +.cui .text-weight-400 { + font-weight:400!important +} +.cui .text-weight-600 { + font-weight:600!important +} +.cui .text-weight-700 { + font-weight:700!important +} +.cui .text-weight-900 { + font-weight:900!important +} +.cui .text-light { + font-weight:lighter!important +} +.cui .text-normal { + font-weight:400!important +} +.cui .text-bold { + font-weight:700!important +} +.cui .text-nowrap { + white-space:nowrap!important +} +.cui .text-lowercase { + text-transform:lowercase!important +} +.cui .text-uppercase { + text-transform:uppercase!important +} +.cui .text-capitalize { + text-transform:capitalize!important +} +.cui .text-italic { + font-style:italic!important +} +.cui .text-monospace { + font-family:var(--cui-font-mono-stack)!important +} +.cui .text-ellipsis { + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap +} +.cui .text-noellipsis { + white-space:normal +} +.cui .text-noselect { + -webkit-user-select:none!important; + -moz-user-select:none!important; + -ms-user-select:none!important; + user-select:none!important +} +.cui .text-break { + word-wrap:break-word!important; + word-break:break-all!important +} +@-webkit-keyframes blink { + from, + to { + opacity:1 + } + 50% { + opacity:0 + } +} +@keyframes blink { + from, + to { + opacity:1 + } + 50% { + opacity:0 + } +} +@-webkit-keyframes blowup { + 0% { + transform:scale(0) + } + 100% { + transform:scale(1) + } +} +@keyframes blowup { + 0% { + transform:scale(0) + } + 100% { + transform:scale(1) + } +} +@-webkit-keyframes blowdown { + 0% { + transform:scale(1) + } + 100% { + transform:scale(0) + } +} +@keyframes blowdown { + 0% { + transform:scale(1) + } + 100% { + transform:scale(0) + } +} +@-webkit-keyframes bounce { + 0%, + 100%, + 20%, + 40%, + 60%, + 80% { + transition-timing-function:cubic-bezier(.215,.61,.355,1) + } + 0% { + transform:scale3d(.3,.3,.3) + } + 20% { + transform:scale3d(1.1,1.1,1.1) + } + 40% { + transform:scale3d(.9,.9,.9) + } + 60% { + transform:scale3d(1.03,1.03,1.03) + } + 80% { + transform:scale3d(.97,.97,.97) + } + 100% { + transform:scale3d(1,1,1) + } +} +@keyframes bounce { + 0%, + 100%, + 20%, + 40%, + 60%, + 80% { + transition-timing-function:cubic-bezier(.215,.61,.355,1) + } + 0% { + transform:scale3d(.3,.3,.3) + } + 20% { + transform:scale3d(1.1,1.1,1.1) + } + 40% { + transform:scale3d(.9,.9,.9) + } + 60% { + transform:scale3d(1.03,1.03,1.03) + } + 80% { + transform:scale3d(.97,.97,.97) + } + 100% { + transform:scale3d(1,1,1) + } +} +@-webkit-keyframes click-wave { + 0% { + height:40px; + width:40px; + opacity:.35; + position:relative + } + 100% { + height:200px; + width:200px; + margin-left:-80px; + margin-top:-80px; + opacity:0 + } +} +@keyframes click-wave { + 0% { + height:40px; + width:40px; + opacity:.35; + position:relative + } + 100% { + height:200px; + width:200px; + margin-left:-80px; + margin-top:-80px; + opacity:0 + } +} +@-webkit-keyframes load { + 0% { + transform:rotate(7deg) + } + 100% { + transform:rotate(360deg) + } +} +@keyframes load { + 0% { + transform:rotate(7deg) + } + 100% { + transform:rotate(360deg) + } +} +@-webkit-keyframes pop { + 0% { + transform:scale3d(.9,.9,.9) + } + 33% { + transform:scale3d(1.05,1.05,1.05) + } + 66% { + transform:scale3d(.95,.95,.95) + } + 100% { + transform:scale3d(1,1,1) + } +} +@keyframes pop { + 0% { + transform:scale3d(.9,.9,.9) + } + 33% { + transform:scale3d(1.05,1.05,1.05) + } + 66% { + transform:scale3d(.95,.95,.95) + } + 100% { + transform:scale3d(1,1,1) + } +} +@-webkit-keyframes pulse { + 0%, + 100%, + 80% { + transform:scale3d(0,0,0) + } + 40% { + transform:scale3d(1,1,1) + } +} +@keyframes pulse { + 0%, + 100%, + 80% { + transform:scale3d(0,0,0) + } + 40% { + transform:scale3d(1,1,1) + } +} +@-webkit-keyframes pulseShadow { + 0%, + 100% { + box-shadow:0 0 0 0 var(--cui-font-color) + } + 70% { + box-shadow:0 0 0 10px var(--cui-font-color) + } +} +@keyframes pulseShadow { + 0%, + 100% { + box-shadow:0 0 0 0 var(--cui-font-color) + } + 70% { + box-shadow:0 0 0 10px var(--cui-font-color) + } +} +@-webkit-keyframes pulseShadowInfo { + 0%, + 100% { + box-shadow:0 0 0 0 var(--cui-accent-color) + } + 70% { + box-shadow:0 0 0 10px var(--cui-accent-color) + } +} +@keyframes pulseShadowInfo { + 0%, + 100% { + box-shadow:0 0 0 0 var(--cui-accent-color) + } + 70% { + box-shadow:0 0 0 10px var(--cui-accent-color) + } +} +@-webkit-keyframes pulseShadowSuccess { + 0%, + 100% { + box-shadow:0 0 0 0 var(--cui-theme-success) + } + 70% { + box-shadow:0 0 0 10px var(--cui-theme-success) + } +} +@keyframes pulseShadowSuccess { + 0%, + 100% { + box-shadow:0 0 0 0 var(--cui-theme-success) + } + 70% { + box-shadow:0 0 0 10px var(--cui-theme-success) + } +} +@-webkit-keyframes pulseShadowWarning { + 0%, + 100% { + box-shadow:0 0 0 0 var(--cui-theme-warning) + } + 70% { + box-shadow:0 0 0 10px var(--cui-theme-warning) + } +} +@keyframes pulseShadowWarning { + 0%, + 100% { + box-shadow:0 0 0 0 var(--cui-theme-warning) + } + 70% { + box-shadow:0 0 0 10px var(--cui-theme-warning) + } +} +@-webkit-keyframes pulseShadowDanger { + 0%, + 100% { + box-shadow:0 0 0 0 var(--cui-theme-danger) + } + 70% { + box-shadow:0 0 0 10px var(--cui-theme-danger) + } +} +@keyframes pulseShadowDanger { + 0%, + 100% { + box-shadow:0 0 0 0 var(--cui-theme-danger) + } + 70% { + box-shadow:0 0 0 10px var(--cui-theme-danger) + } +} +.cui .btn.btn--primary.focus, +.cui .btn.btn--primary:focus, +.cui .btn.focus, +.cui .btn:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-theme-primary-rgb),var(--cui-focus-opacity)); + outline:transparent var(--cui-focus-thickness) +} +@-webkit-keyframes spin { + 0% { + transform:rotate(0) + } + 100% { + transform:rotate(359deg) + } +} +@keyframes spin { + 0% { + transform:rotate(0) + } + 100% { + transform:rotate(359deg) + } +} +@-webkit-keyframes fade-in { + from { + opacity:0 + } + 100% { + opacity:1 + } +} +@keyframes fade-in { + from { + opacity:0 + } + 100% { + opacity:1 + } +} +@-webkit-keyframes slideInTop { + from { + opacity:0; + transform:translate3d(0,-50%,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@keyframes slideInTop { + from { + opacity:0; + transform:translate3d(0,-50%,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@-webkit-keyframes slideInLeftSmall { + from { + opacity:0; + transform:translate3d(-50%,0,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@keyframes slideInLeftSmall { + from { + opacity:0; + transform:translate3d(-50%,0,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@-webkit-keyframes slideInLeft { + from { + opacity:0; + transform:translate3d(-100%,0,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@keyframes slideInLeft { + from { + opacity:0; + transform:translate3d(-100%,0,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@-webkit-keyframes slideInRightSmall { + from { + opacity:0; + transform:translate3d(50%,0,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@keyframes slideInRightSmall { + from { + opacity:0; + transform:translate3d(50%,0,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@-webkit-keyframes slideInRight { + from { + opacity:0; + transform:translate3d(100%,0,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@keyframes slideInRight { + from { + opacity:0; + transform:translate3d(100%,0,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@-webkit-keyframes slideInBottomSmall { + from { + opacity:0; + transform:translate3d(0,50%,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@keyframes slideInBottomSmall { + from { + opacity:0; + transform:translate3d(0,50%,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@-webkit-keyframes slideInBottom { + from { + opacity:0; + transform:translate3d(0,100%,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +@keyframes slideInBottom { + from { + opacity:0; + transform:translate3d(0,100%,0) + } + to { + opacity:1; + transform:translate3d(0,0,0) + } +} +.cui .ripple { + -webkit-animation:click-wave .75s; + animation:click-wave .75s +} +.cui [class*=motion-] { + -webkit-animation-duration:.5s; + animation-duration:.5s; + -webkit-animation-timing-function:ease-out; + animation-timing-function:ease-out; + -webkit-animation-fill-mode:both; + animation-fill-mode:both +} +.cui .motion-fade-in { + -webkit-animation-name:fade-in; + animation-name:fade-in +} +.cui .motion-slide-in-top { + -webkit-animation-name:slideInTop; + animation-name:slideInTop +} +.cui .motion-slide-in-bottom { + -webkit-animation-name:slideInBottom; + animation-name:slideInBottom +} +.cui .motion-slide-in-left { + -webkit-animation-name:slideInLeft; + animation-name:slideInLeft +} +.cui .motion-slide-in-right { + -webkit-animation-name:slideInRight; + animation-name:slideInRight +} +.cui .spin { + -webkit-animation:spin 2s infinite linear; + animation:spin 2s infinite linear +} +.cui .fadeIn { + -webkit-animation:fadeIn 1s; + animation:fadeIn 1s +} +.cui .fade-in-pop { + -webkit-animation:pop 1.5s 1 linear,fade-in 1.5s 1 linear; + animation:pop 1.5s 1 linear,fade-in 1.5s 1 linear +} +.cui .fade-in-and-out { + transition:opacity .15s ease-in-out +} +.cui .rotate-left, +.cui .rotate-right { + transition:transform .2s ease-in-out +} +.cui .rotate-right { + transform:rotate(90deg) +} +.cui .rotate-left { + transform:rotate(270deg) +} +.cui .motion-delay--100 { + -webkit-animation-delay:.1s; + animation-delay:.1s +} +.cui .motion-delay--250 { + -webkit-animation-delay:.25s; + animation-delay:.25s +} +.cui .motion-delay--500 { + -webkit-animation-delay:.5s; + animation-delay:.5s +} +.cui .motion-delay--750 { + -webkit-animation-delay:.75s; + animation-delay:.75s +} +.cui .motion-speed--slow { + -webkit-animation-duration:1s; + animation-duration:1s +} +.cui .motion-speed--medium { + -webkit-animation-duration:.5s; + animation-duration:.5s +} +.cui .motion-speed--fast { + -webkit-animation-duration:.1s; + animation-duration:.1s +} +.cui .motion-panels>:nth-child(1) { + -webkit-animation:slideInRight .25s linear .1s; + animation:slideInRight .25s linear .1s +} +.cui .motion-panels>:nth-child(2) { + -webkit-animation:slideInRight .25s linear .2s; + animation:slideInRight .25s linear .2s +} +.cui .motion-panels>:nth-child(3) { + -webkit-animation:slideInRight .25s linear .3s; + animation:slideInRight .25s linear .3s +} +.cui .motion-panels>:nth-child(4) { + -webkit-animation:slideInRight .25s linear .4s; + animation:slideInRight .25s linear .4s +} +.cui .motion-panels>:nth-child(5) { + -webkit-animation:slideInRight .25s linear .5s; + animation:slideInRight .25s linear .5s +} +.cui .motion-panels>:nth-child(6) { + -webkit-animation:slideInRight .25s linear .6s; + animation:slideInRight .25s linear .6s +} +.cui .motion-panels>:nth-child(7) { + -webkit-animation:slideInRight .25s linear .7s; + animation:slideInRight .25s linear .7s +} +.cui .motion-panels>:nth-child(8) { + -webkit-animation:slideInRight .25s linear .8s; + animation:slideInRight .25s linear .8s +} +.cui blockquote { + margin:var(--cui-blockquote-margin); + padding:0 var(--cui-blockquote-default-padding); + border-left-width:var(--cui-accent-thickness) +} +.cui blockquote.blockquote--compressed { + padding:0 var(--cui-blockquote-compressed-padding) +} +.cui blockquote.blockquote--regular { + padding:0 var(--cui-blockquote-regular-padding) +} +.cui blockquote.blockquote--loose { + padding:0 var(--cui-blockquote-loose-padding) +} +.cui blockquote.blockquote--secondary, +.cui blockquote.blockquote--secondary cite { + border-color:var(--cui-theme-secondary) +} +.cui blockquote.blockquote--tertiary, +.cui blockquote.blockquote--tertiary cite { + border-color:var(--cui-theme-tertiary) +} +.cui blockquote.blockquote--success, +.cui blockquote.blockquote--success cite { + border-color:var(--cui-theme-success) +} +.cui blockquote.blockquote--info, +.cui blockquote.blockquote--info cite { + border-color:var(--cui-theme-info) +} +.cui blockquote.blockquote--warning-alt, +.cui blockquote.blockquote--warning-alt cite { + border-color:var(--cui-theme-warning-alt) +} +.cui blockquote.blockquote--warning, +.cui blockquote.blockquote--warning cite { + border-color:var(--cui-theme-warning) +} +.cui blockquote.blockquote--danger, +.cui blockquote.blockquote--danger cite { + border-color:var(--cui-theme-danger) +} +.cui blockquote.blockquote--dark, +.cui blockquote.blockquote--dark cite { + border-color:var(--cui-theme-dark) +} +.cui blockquote.blockquote--light, +.cui blockquote.blockquote--light cite { + border-color:var(--cui-theme-light) +} +.cui blockquote.blockquote--left { + border-left-width:var(--cui-accent-thickness) +} +.cui blockquote.blockquote--center { + border-width:0; + border-style:none; + text-align:center +} +.cui blockquote.blockquote--center cite { + width:50%; + padding-top:var(--cui-spacing-half); + border-top-width:var(--cui-accent-thickness); + border-top-style:solid +} +.cui blockquote.blockquote--right { + border-width:0; + border-style:none solid none none; + text-align:right; + border-right-width:var(--cui-accent-thickness) +} +.cui cite { + display:inline-block; + color:var(--cui-inactive-color); + font-style:italic +} +.cui cite:before { + content:"\2014 \00A0" +} +.cui .breadcrumb { + --cui-breadcrumb-padding:0 2px 0 6px; + --cui-breadcrumb-separator:'/\00a0'; + list-style:none; + margin:0; + padding:0; + background:0 none; + display:inline-flex; + flex-wrap:wrap; + align-items:center +} +.cui .breadcrumb:after { + clear:both!important; + content:""!important; + display:table!important +} +.cui .breadcrumb>li a { + text-decoration:none +} +.cui .breadcrumb>li.active { + color:var(--cui-active-color) +} +.cui .btn, +.cui .btn.hover, +.cui .btn:hover { + color:var(--cui-theme-primary-color); + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function) +} +.cui .breadcrumb>li+li:before { + padding:var(--cui-breadcrumb-padding); + content:var(--cui-breadcrumb-separator) +} +.cui .btn { + cursor:pointer; + position:relative; + display:inline-block; + text-align:center; + text-decoration:none; + text-transform:var(--cui-button-text-transform); + border-width:var(--cui-button-border-thickness); + border-radius:var(--cui-button-border-radius); + border-style:solid; + font-weight:var(--cui-button-font-weight); + line-height:2.8rem; + padding:0 25px; + font-size:var(--cui-font-size); + background-color:var(--cui-theme-primary); + border-color:var(--cui-theme-primary) +} +.cui .btn::-moz-focus-inner { + border:0; + padding:0 +} +.cui .btn.btn--small { + line-height:2.2rem; + padding:0 15px; + font-size:var(--cui-font-size-sm) +} +.cui .btn.btn--large { + line-height:3.8rem; + padding:0 40px; + font-size:var(--cui-font-size-lg) +} +.cui .btn.hover, +.cui .btn:hover { + background-color:var(--cui-theme-primary-lighter) +} +.cui .btn.focus, +.cui .btn:focus { + opacity:1; + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .btn.disabled, +.cui .btn[disabled] { + background-color:transparent; + border:1px dotted var(--cui-inactive-color); + color:var(--cui-inactive-color); + opacity:1 +} +.cui .btn.active, +.cui .btn.selected, +.cui .btn:active { + background-color:var(--cui-theme-primary-darker); + color:var(--cui-theme-primary-color) +} +.cui .btn.active:after, +.cui .btn.selected:after, +.cui .btn:active:after { + border-top-color:var(--cui-theme-primary-color) +} +.cui .btn.btn--primary { + background-color:var(--cui-theme-primary); + border-color:var(--cui-theme-primary); + color:var(--cui-theme-primary-color) +} +.cui .btn.btn--primary.hover, +.cui .btn.btn--primary:hover { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function); + background-color:var(--cui-theme-primary-lighter); + color:var(--cui-theme-primary-color) +} +.cui .btn.btn--primary.focus, +.cui .btn.btn--primary:focus { + opacity:1; + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .btn.btn--primary.disabled, +.cui .btn.btn--primary[disabled] { + background-color:transparent; + border:1px dotted var(--cui-inactive-color); + color:var(--cui-inactive-color); + opacity:1 +} +.cui .btn.btn--primary.active, +.cui .btn.btn--primary.selected, +.cui .btn.btn--primary:active { + background-color:var(--cui-theme-primary-darker); + color:var(--cui-theme-primary-color) +} +.cui .btn.btn--primary.active:after, +.cui .btn.btn--primary.selected:after, +.cui .btn.btn--primary:active:after { + border-top-color:var(--cui-theme-primary-color) +} +.cui .btn.btn--secondary { + background-color:var(--cui-theme-secondary); + border-color:var(--cui-theme-secondary); + color:var(--cui-theme-secondary-color) +} +.cui .btn.btn--secondary.hover, +.cui .btn.btn--secondary:hover { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function); + background-color:var(--cui-theme-secondary-lighter); + color:var(--cui-theme-secondary-color) +} +.cui .btn.btn--secondary.focus, +.cui .btn.btn--secondary:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-theme-secondary-rgb),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .btn.btn--secondary.disabled, +.cui .btn.btn--secondary[disabled] { + background-color:transparent; + border:1px dotted var(--cui-inactive-color); + color:var(--cui-inactive-color); + opacity:1 +} +.cui .btn.btn--secondary.active, +.cui .btn.btn--secondary.selected, +.cui .btn.btn--secondary:active { + background-color:var(--cui-theme-secondary-darker); + color:var(--cui-theme-secondary-color) +} +.cui .btn.btn--secondary.active:after, +.cui .btn.btn--secondary.selected:after, +.cui .btn.btn--secondary:active:after { + border-top-color:var(--cui-theme-secondary-color) +} +.cui .btn.btn--success { + background-color:var(--cui-theme-success); + border-color:var(--cui-theme-success); + color:var(--cui-theme-success-color) +} +.cui .btn.btn--success.hover, +.cui .btn.btn--success:hover { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function); + background-color:var(--cui-theme-success-lighter); + color:var(--cui-theme-success-color) +} +.cui .btn.btn--success.focus, +.cui .btn.btn--success:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-theme-success-rgb),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .btn.btn--success.disabled, +.cui .btn.btn--success[disabled] { + background-color:transparent; + border:1px dotted var(--cui-inactive-color); + color:var(--cui-inactive-color); + opacity:1 +} +.cui .btn.btn--success.active, +.cui .btn.btn--success.selected, +.cui .btn.btn--success:active { + background-color:var(--cui-theme-success-darker); + color:var(--cui-theme-success-color) +} +.cui .btn.btn--success.active:after, +.cui .btn.btn--success.selected:after, +.cui .btn.btn--success:active:after { + border-top-color:var(--cui-theme-success-color) +} +.cui .btn.btn--danger { + background-color:var(--cui-theme-danger); + border-color:var(--cui-theme-danger); + color:var(--cui-theme-danger-color) +} +.cui .btn.btn--danger.hover, +.cui .btn.btn--danger:hover { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function); + background-color:var(--cui-theme-danger-lighter); + color:var(--cui-theme-danger-color) +} +.cui .btn.btn--danger.focus, +.cui .btn.btn--danger:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-theme-danger-rgb),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .btn.btn--dark.focus, +.cui .btn.btn--dark:focus, +.cui .btn.btn--ghost.focus, +.cui .btn.btn--ghost:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-theme-dark-rgb),var(--cui-focus-opacity)); + opacity:1 +} +.cui .btn.btn--danger.disabled, +.cui .btn.btn--danger[disabled] { + background-color:transparent; + border:1px dotted var(--cui-inactive-color); + color:var(--cui-inactive-color); + opacity:1 +} +.cui .btn.btn--danger.active, +.cui .btn.btn--danger.selected, +.cui .btn.btn--danger:active { + background-color:var(--cui-theme-danger-darker); + color:var(--cui-theme-danger-color) +} +.cui .btn.btn--danger.active:after, +.cui .btn.btn--danger.selected:after, +.cui .btn.btn--danger:active:after { + border-top-color:var(--cui-theme-danger-color) +} +.cui .btn.btn--dark { + background-color:var(--cui-theme-dark); + border-color:var(--cui-theme-dark); + color:var(--cui-theme-dark-color) +} +.cui .btn.btn--dark.hover, +.cui .btn.btn--dark:hover { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function); + background-color:var(--cui-theme-dark-lighter); + color:var(--cui-theme-dark-color) +} +.cui .btn.btn--dark.focus, +.cui .btn.btn--dark:focus { + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .btn.btn--dark.disabled, +.cui .btn.btn--dark[disabled] { + background-color:transparent; + border:1px dotted var(--cui-inactive-color); + color:var(--cui-inactive-color); + opacity:1 +} +.cui .btn.btn--dark.active, +.cui .btn.btn--dark.selected, +.cui .btn.btn--dark:active { + background-color:var(--cui-theme-dark-darker); + color:var(--cui-theme-dark-color) +} +.cui .btn.btn--dark.active:after, +.cui .btn.btn--dark.selected:after, +.cui .btn.btn--dark:active:after { + border-top-color:var(--cui-theme-dark-color) +} +.cui .btn.btn--ghost { + background-color:transparent; + border-color:var(--cui-theme-dark); + color:var(--cui-font-color) +} +.cui .btn.btn--ghost.hover, +.cui .btn.btn--ghost:hover { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function); + background-color:var(--cui-theme-dark-lighter); + color:var(--cui-theme-dark-color) +} +.cui .btn.btn--ghost.focus, +.cui .btn.btn--ghost:focus { + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .btn-group>.btn:active, +.cui .btn-group>.btn:focus, +.cui .btn-group>.btn:hover, +.cui .btn-group>.dropdown:active, +.cui .btn-group>.dropdown:focus, +.cui .btn-group>.dropdown:hover, +.cui .btn.btn--link.focus, +.cui .btn.btn--link:focus { + outline:0; + box-shadow:none +} +.cui .btn.btn--ghost.disabled, +.cui .btn.btn--ghost[disabled] { + background-color:transparent; + border:1px dotted var(--cui-inactive-color); + color:var(--cui-inactive-color); + opacity:1 +} +.cui .btn.btn--ghost.active, +.cui .btn.btn--ghost.selected, +.cui .btn.btn--ghost:active { + background-color:var(--cui-theme-dark-darker); + color:var(--cui-theme-dark-color) +} +.cui .btn.btn--ghost.active:after, +.cui .btn.btn--ghost.selected:after, +.cui .btn.btn--ghost:active:after { + border-top-color:var(--cui-theme-dark-color) +} +.cui .btn.btn--link { + background-color:transparent; + border-color:transparent; + color:var(--cui-link-color) +} +.cui .btn.btn--link.hover, +.cui .btn.btn--link:hover { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function); + background-color:transparent; + color:var(--cui-link-color-active) +} +.cui .btn.btn--link.disabled, +.cui .btn.btn--link[disabled] { + background-color:transparent; + border:1px dotted var(--cui-inactive-color); + color:var(--cui-inactive-color); + opacity:1 +} +.cui .btn.btn--link.active, +.cui .btn.btn--link.selected, +.cui .btn.btn--link:active { + background-color:transparent; + color:var(--cui-link-color-active) +} +.cui .checkbox input.active~.checkbox__input, +.cui .checkbox input.checked~.checkbox__input, +.cui .checkbox input:active~.checkbox__input, +.cui .checkbox input:checked~.checkbox__input { + background-color:var(--cui-checkbox-background-active); + border:var(--cui-checkbox-border-active) +} +.cui .btn.btn--link.active:after, +.cui .btn.btn--link.selected:after, +.cui .btn.btn--link:active:after { + border-top-color:var(--cui-link-color-active) +} +.cui .btn.btn--circle, +.cui .btn.btn--icon { + min-width:28px; + min-height:28px; + width:28px; + height:28px; + line-height:1; + padding:0; + border-radius:100%; + font-size:var(--cui-font-size) +} +.cui .btn.btn--circle.btn--small, +.cui .btn.btn--icon.btn--small { + min-width:22px; + min-height:22px; + width:22px; + height:22px; + line-height:1; + padding:0; + border-radius:100%; + font-size:var(--cui-font-size-sm) +} +.cui .btn.btn--circle.btn--small span[class^=icon-]:before, +.cui .btn.btn--icon.btn--small span[class^=icon-]:before { + font-size:var(--cui-font-size-sm) +} +.cui .btn.btn--circle span[class^=icon-]:before, +.cui .btn.btn--icon span[class^=icon-]:before { + font-size:var(--cui-font-size) +} +.cui .btn.btn--circle.btn--large, +.cui .btn.btn--icon.btn--large { + min-width:38px; + min-height:38px; + width:38px; + height:38px; + line-height:1; + padding:0; + border-radius:100%; + font-size:var(--cui-font-size-lg) +} +.cui .btn.btn--circle.btn--large span[class^=icon-]:before, +.cui .btn.btn--icon.btn--large span[class^=icon-]:before { + font-size:var(--cui-font-size-lg) +} +.cui .btn.btn--wide { + padding-left:var(--cui-button-wide-padding); + padding-right:var(--cui-button-wide-padding) +} +.cui .btn.btn--justified { + display:block; + width:100% +} +.cui .btn-group, +.cui .checkbox { + position:relative; + display:inline-flex +} +.cui .btn-group { + align-items:center; + justify-content:center +} +.cui .btn-group>.btn:first-child, +.cui .btn-group>.dropdown:first-child { + margin-left:0 +} +.cui .btn-group>.btn:not(:last-child), +.cui .btn-group>.btn:not(:last-child)>.btn, +.cui .btn-group>.dropdown:not(:last-child), +.cui .btn-group>.dropdown:not(:last-child)>.btn { + border-top-right-radius:0; + border-bottom-right-radius:0 +} +.cui .btn-group>.btn:not(:first-child), +.cui .btn-group>.btn:not(:first-child)>.btn, +.cui .btn-group>.dropdown:not(:first-child), +.cui .btn-group>.dropdown:not(:first-child)>.btn { + border-top-left-radius:0; + border-bottom-left-radius:0 +} +.cui .btn-group>.btn:nth-child(n+2), +.cui .btn-group>.dropdown:nth-child(n+2) { + margin-left:-1px +} +.cui .btn-group.btn-group--square>.btn:first-child { + border-top-left-radius:var(--cui-border-radius); + border-bottom-left-radius:var(--cui-border-radius) +} +.cui .btn-group.btn-group--square>.btn:last-child { + border-top-right-radius:var(--cui-border-radius); + border-bottom-right-radius:var(--cui-border-radius) +} +.cui .btn-group.btn-group--divider { + width:100%; + text-align:center +} +.cui .btn-group.btn-group--divider:after, +.cui .btn-group.btn-group--divider:before { + content:''; + border-top:var(--cui-border); + border-left:0; + border-bottom:0; + border-right:0; + width:100% +} +.cui .checkbox .checkbox__input, +.cui .checkbox input { + width:var(--cui-checkbox-size); + height:var(--cui-checkbox-size) +} +.cui .btn+.btn, +.cui .btn+.btn-group, +.cui .btn-group+.btn, +.cui .btn-group+.btn-group { + margin-left:var(--cui-button-spacing) +} +.cui .checkbox { + --cui-checkbox-background:transparent; + --cui-checkbox-background-active:transparent; + --cui-checkbox-border-thickness:var(--cui-border-thickness); + --cui-checkbox-border:var(--cui-checkbox-border-thickness) solid var(--cui-border-form-color); + --cui-checkbox-border-active:var(--cui-checkbox-border-thickness) solid var(--cui-border-form-color); + --cui-checkbox-border-hover:var(--cui-checkbox-border-thickness) solid var(--cui-accent-color); + --cui-checkbox-border-radius:0px; + --cui-checkbox-icon-color:var(--cui-accent-color); + --cui-checkbox-icon-size:var(--cui-font-size-sm); + --cui-checkbox-size:var(--cui-spacing); + cursor:pointer; + align-items:center +} +.cui .checkbox input { + display:block; + position:absolute; + padding:0; + border:0; + overflow:hidden; + clip:rect(0 0 0 0); + font-weight:var(--cui-form-value-font-weight); + margin:0 +} +.cui .checkbox input.hover~.checkbox__input, +.cui .checkbox input:hover~.checkbox__input { + border:var(--cui-checkbox-border-hover) +} +.cui .checkbox input.hover~.checkbox__input:before, +.cui .checkbox input:hover~.checkbox__input:before { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-focus-color),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .checkbox input.checked~.checkbox__input:after, +.cui .checkbox input:checked~.checkbox__input:after { + opacity:1 +} +.cui .checkbox input.focus~.checkbox__input, +.cui .checkbox input:focus~.checkbox__input { + border:var(--cui-checkbox-border-active) +} +.cui .checkbox input.focus~.checkbox__input:before, +.cui .checkbox input:focus~.checkbox__input:before { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-focus-color),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .checkbox input.active~.checkbox__input:before, +.cui .checkbox input:active~.checkbox__input:before { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-focus-color),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .checkbox input.disabled~.checkbox__input, +.cui .checkbox input:disabled~.checkbox__input { + background-color:var(--cui-checkbox-background-disabled) +} +.cui .checkbox .checkbox__input { + position:relative; + display:inline-flex; + min-width:var(--cui-checkbox-size); + border:var(--cui-checkbox-border); + outline:transparent var(--cui-checkbox-border-thickness); + border-radius:var(--cui-checkbox-border-radius); + background-color:var(--cui-checkbox-background) +} +.cui .label, +.cui .label.label--primary { + background-color:var(--cui-theme-primary) +} +.cui .checkbox .checkbox__input:after, +.cui .checkbox .checkbox__input:before { + position:absolute; + top:0; + right:0; + bottom:0; + left:0; + width:auto; + height:auto; + content:''; + pointer-events:none; + opacity:0; + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function) +} +.cui .checkbox .checkbox__input:before { + border-radius:var(--cui-checkbox-border-radius); + opacity:0 +} +.cui .checkbox .checkbox__input:after { + position:absolute; + display:block; + left:5px; + top:1px; + width:3px; + height:8px; + color:transparent; + border:var(--cui-accent-color) solid; + border-width:0 2px 2px 0; + transform:rotate(45deg) +} +.cui .checkbox .checkbox__label { + color:var(--cui-form-label-color); + font-size:var(--cui-form-label-font-size); + font-weight:var(--cui-form-label-font-weight); + text-transform:var(--cui-form-label-transform); + margin-left:var(--cui-form-label-spacing) +} +.cui .swatch { + color:var(--cui-font-color); + cursor:pointer; + display:inline-flex; + flex-direction:column; + margin:0 var(--cui-spacing) var(--cui-spacing) 0; + justify-content:center +} +.cui .swatch:active .swatch__color, +.cui .swatch:focus .swatch__color, +.cui .swatch:hover .swatch__color { + transform:scale(1.1); + z-index:2 +} +.cui .swatch .swatch__color, +.cui a>img.thumb { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function); + transform:scale(1) +} +.cui .swatch .swatch__color { + border-radius:50px; + padding:var(--cui-spacing-half); + width:50px; + height:100px; + z-index:1 +} +.cui .swatch .swatch__title { + font-weight:700; + text-transform:capitalize; + margin-top:var(--cui-spacing-half) +} +.cui ::-moz-placeholder { + color:var(--cui-inactive-color) +} +.cui :-ms-input-placeholder { + color:var(--cui-inactive-color) +} +.cui ::-ms-input-placeholder { + color:var(--cui-inactive-color) +} +.cui ::placeholder { + color:var(--cui-inactive-color) +} +.cui .form-group { + margin:0; + padding:0; + line-height:var(--cui-form-line-height) +} +.cui .form-group .form-group__text input, +.cui .form-group .form-group__text select, +.cui .form-group .form-group__text textarea input, +.cui .form-group .form-group__text textarea select { + line-height:2.4rem; + max-height:var(--cui-form-size); + height:var(--cui-form-size) +} +.cui .form-group .form-group__help, +.cui .form-group .help-block { + display:block; + text-align:right; + text-transform:var(--cui-form-help-transform); + color:var(--cui-inactive-color); + font-size:var(--cui-form-help-font-size); + margin-top:var(--cui-form-label-spacing) +} +.cui .form-group .form-group__help span[class^=icon-]+span, +.cui .form-group .help-block span[class^=icon-]+span { + margin-left:var(--cui-spacing-qtr) +} +.cui .form-group.sr-enabled { + padding-top:calc(var(--cui-spacing) + var(--cui-form-label-spacing)) +} +.cui .form-group.sr-enabled label { + position:absolute; + width:1px; + height:1px; + padding:0; + overflow:hidden; + clip:rect(0,0,0,0); + white-space:nowrap; + border:0 +} +.cui .form-group.form-group--inline.sr-enabled { + padding-top:0 +} +.cui .form-group.form-group--error .form-group__text input, +.cui .form-group.form-group--error .form-group__text input .focus, +.cui .form-group.form-group--error .form-group__text input.hover, +.cui .form-group.form-group--error .form-group__text input:focus, +.cui .form-group.form-group--error .form-group__text input:hover, +.cui .form-group.form-group--error .form-group__text select, +.cui .form-group.form-group--error .form-group__text select .focus, +.cui .form-group.form-group--error .form-group__text select.hover, +.cui .form-group.form-group--error .form-group__text select:focus, +.cui .form-group.form-group--error .form-group__text select:hover, +.cui .form-group.form-group--error .form-group__text textarea, +.cui .form-group.form-group--error .form-group__text textarea .focus, +.cui .form-group.form-group--error .form-group__text textarea.hover, +.cui .form-group.form-group--error .form-group__text textarea:focus, +.cui .form-group.form-group--error .form-group__text textarea:hover { + border-color:var(--cui-theme-danger) +} +.cui .form-group.form-group--error .form-group__text input .focus~button.link, +.cui .form-group.form-group--error .form-group__text input.hover~button.link, +.cui .form-group.form-group--error .form-group__text input:focus~button.link, +.cui .form-group.form-group--error .form-group__text input:hover~button.link, +.cui .form-group.form-group--error .form-group__text select .focus~button.link, +.cui .form-group.form-group--error .form-group__text select.hover~button.link, +.cui .form-group.form-group--error .form-group__text select:focus~button.link, +.cui .form-group.form-group--error .form-group__text select:hover~button.link, +.cui .form-group.form-group--error .form-group__text textarea .focus~button.link, +.cui .form-group.form-group--error .form-group__text textarea.hover~button.link, +.cui .form-group.form-group--error .form-group__text textarea:focus~button.link, +.cui .form-group.form-group--error .form-group__text textarea:hover~button.link { + color:var(--cui-theme-danger) +} +.cui .form-group.form-group--error .form-group__text input .focus, +.cui .form-group.form-group--error .form-group__text input:focus, +.cui .form-group.form-group--error .form-group__text select .focus, +.cui .form-group.form-group--error .form-group__text select:focus, +.cui .form-group.form-group--error .form-group__text textarea .focus, +.cui .form-group.form-group--error .form-group__text textarea:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-theme-danger-rgb),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .form-group.form-group--inline, +.cui .form-group.form-group--inline.dropdown { + display:inline-flex; + margin:0 +} +.cui .form-group.form-group--inline .form-group__help, +.cui .form-group.form-group--inline.dropdown .form-group__help { + display:inline-flex; + text-align:left; + margin-left:var(--cui-spacing); + align-self:center +} +.cui .form-group.form-group--horizontal .form-group__text { + flex-direction:row +} +.cui .form-group.form-group--horizontal .form-group__text label { + align-self:center; + padding-left:0 +} +.cui .form-group.form-group--inline .form-group__text, +.cui .form-group.form-group--inline .form-group__text.select { + flex-direction:row +} +.cui .form-group.form-group--inline .form-group__text label, +.cui .form-group.form-group--inline .form-group__text.select label { + align-self:center; + margin:0 var(--cui-form-label-spacing) 0 0 +} +.cui .form-group.form-group--icon .form-group__text input, +.cui .form-group.input--icon .form-group__text input { + padding-left:var(--cui-form-size) +} +.cui .form-group.form-group--icon .form-group__text input+button, +.cui .form-group.form-group--icon .form-group__text label+button, +.cui .form-group.input--icon .form-group__text input+button, +.cui .form-group.input--icon .form-group__text label+button { + font-size:var(--cui-form-icon-size); + position:absolute; + display:inline-flex; + height:var(--cui-form-size); + width:var(--cui-form-size); + align-items:center; + justify-content:center; + bottom:0; + padding:0; + margin:0 +} +.cui .label, +.cui .radio { + position:relative; + align-items:center +} +.cui .form-group.form-group--icon .form-group__text input+button:active, +.cui .form-group.form-group--icon .form-group__text input+button:focus, +.cui .form-group.form-group--icon .form-group__text input+button:hover, +.cui .form-group.form-group--icon .form-group__text label+button:active, +.cui .form-group.form-group--icon .form-group__text label+button:focus, +.cui .form-group.form-group--icon .form-group__text label+button:hover, +.cui .form-group.input--icon .form-group__text input+button:active, +.cui .form-group.input--icon .form-group__text input+button:focus, +.cui .form-group.input--icon .form-group__text input+button:hover, +.cui .form-group.input--icon .form-group__text label+button:active, +.cui .form-group.input--icon .form-group__text label+button:focus, +.cui .form-group.input--icon .form-group__text label+button:hover { + color:var(--cui-link-color); + text-decoration:none +} +.cui .label, +.cui .label .icon-close, +.cui .label.label--primary, +.cui .label.label--primary .icon-close { + color:var(--cui-theme-primary-color) +} +.cui .form-group.dropdown { + display:block +} +.cui .form-group.form-group--inline.form-group--compressed+.form-group.form-group--inline.form-group--compressed { + margin:0 0 0 var(--cui-spacing-half) +} +.cui .form-group.form-group--inline+.form-group.form-group--inline { + margin:0 0 0 var(--cui-spacing) +} +.cui .form-group.form-group--inline.form-group--loose+.form-group.form-group--inline.form-group--loose { + margin:0 0 0 var(--cui-spacing-dbl) +} +.cui .form-group.form-group--compressed+.form-group.form-group--compressed { + margin:var(--cui-spacing-half) 0 0 +} +.cui .form-group+.form-group { + margin:var(--cui-spacing) 0 0 +} +.cui .form-group.form-group--loose+.form-group.form-group--loose { + margin:var(--cui-spacing-dbl) 0 0 +} +.cui .form-group+.form-group[class*=col-] { + margin:0 +} +.cui a:hover>img.thumb { + transform:scale(1.1); + border-color:var(--cui-accent-color) +} +.cui img.thumb { + border:3px solid var(--cui-border-color); + box-shadow:var(--cui-shadow-outset-lg); + height:100%; + width:100% +} +.cui .label.label--raised, +.cui .panel.panel--raised, +.cui a.panel.panel--raised { + box-shadow:var(--cui-shadow-outset) +} +.cui img.image-fluid { + width:100%; + height:auto +} +.cui img.image-fluid-horizontal { + max-width:100%; + height:auto +} +.cui img.image-fluid-vertical { + max-height:100%; + width:auto; + max-width:none +} +.cui img.image-rounded { + border-radius:50% +} +.cui img.image-size-10 { + height:10px; + width:10px +} +.cui img.image-horizontal-size-10 { + width:10px; + height:auto +} +.cui img.image-vertical-size-10 { + height:10px; + width:auto +} +.cui img.image-size-12 { + height:12px; + width:12px +} +.cui img.image-horizontal-size-12 { + width:12px; + height:auto +} +.cui img.image-vertical-size-12 { + height:12px; + width:auto +} +.cui img.image-size-14 { + height:14px; + width:14px +} +.cui img.image-horizontal-size-14 { + width:14px; + height:auto +} +.cui img.image-vertical-size-14 { + height:14px; + width:auto +} +.cui img.image-size-16 { + height:16px; + width:16px +} +.cui img.image-horizontal-size-16 { + width:16px; + height:auto +} +.cui img.image-vertical-size-16 { + height:16px; + width:auto +} +.cui img.image-size-18 { + height:18px; + width:18px +} +.cui img.image-horizontal-size-18 { + width:18px; + height:auto +} +.cui img.image-vertical-size-18 { + height:18px; + width:auto +} +.cui img.image-size-20 { + height:20px; + width:20px +} +.cui img.image-horizontal-size-20 { + width:20px; + height:auto +} +.cui img.image-vertical-size-20 { + height:20px; + width:auto +} +.cui img.image-size-24 { + height:24px; + width:24px +} +.cui img.image-horizontal-size-24 { + width:24px; + height:auto +} +.cui img.image-vertical-size-24 { + height:24px; + width:auto +} +.cui img.image-size-28 { + height:28px; + width:28px +} +.cui img.image-horizontal-size-28 { + width:28px; + height:auto +} +.cui img.image-vertical-size-28 { + height:28px; + width:auto +} +.cui img.image-size-32 { + height:32px; + width:32px +} +.cui img.image-horizontal-size-32 { + width:32px; + height:auto +} +.cui img.image-vertical-size-32 { + height:32px; + width:auto +} +.cui img.image-size-36 { + height:36px; + width:36px +} +.cui img.image-horizontal-size-36 { + width:36px; + height:auto +} +.cui img.image-vertical-size-36 { + height:36px; + width:auto +} +.cui img.image-size-48 { + height:48px; + width:48px +} +.cui img.image-horizontal-size-48 { + width:48px; + height:auto +} +.cui img.image-vertical-size-48 { + height:48px; + width:auto +} +.cui img.image-size-64 { + height:64px; + width:64px +} +.cui img.image-horizontal-size-64 { + width:64px; + height:auto +} +.cui img.image-vertical-size-64 { + height:64px; + width:auto +} +.cui img.image-size-96 { + height:96px; + width:96px +} +.cui img.image-horizontal-size-96 { + width:96px; + height:auto +} +.cui img.image-vertical-size-96 { + height:96px; + width:auto +} +.cui img.image-size-128 { + height:128px; + width:128px +} +.cui img.image-horizontal-size-128 { + width:128px; + height:auto +} +.cui img.image-vertical-size-128 { + height:128px; + width:auto +} +.cui .label { + --cui-label-border-thickness:var(--cui-border-thickness); + --cui-label-font-weight:var(--cui-font-weight); + --cui-label-default-height:30px; + --cui-label-default-padding:0px var(--cui-spacing-half); + --cui-label-default-font-size:var(--cui-font-size); + --cui-label-tiny-height:18px; + --cui-label-tiny-padding:0px var(--cui-spacing-qtr); + --cui-label-tiny-font-size:var(--cui-font-size-xs); + --cui-label-small-height:24px; + --cui-label-small-padding:0px var(--cui-spacing-qtr); + --cui-label-small-font-size:var(--cui-font-size-sm); + --cui-label-large-height:40px; + --cui-label-large-padding:0px var(--cui-spacing); + --cui-label-large-font-size:var(--cui-font-size-lg); + display:inline-flex; + border-radius:var(--cui-border-radius); + font-weight:var(--cui-label-font-weight); + height:var(--cui-label-default-height); + padding:var(--cui-label-default-padding); + font-size:var(--cui-label-default-font-size); + border:var(--cui-label-border-thickness) solid var(--cui-theme-primary) +} +.cui .label+.label { + margin-bottom:var(--cui-spacing-qtr) +} +.cui .label.label--tiny { + height:var(--cui-label-tiny-height); + padding:var(--cui-label-tiny-padding); + font-size:var(--cui-label-tiny-font-size) +} +.cui .label.label--small { + height:var(--cui-label-small-height); + padding:var(--cui-label-small-padding); + font-size:var(--cui-label-small-font-size) +} +.cui .label.label--large { + height:var(--cui-label-large-height); + padding:var(--cui-label-large-padding); + font-size:var(--cui-label-large-font-size) +} +.cui .label .icon-close, +.cui .label.label--danger .icon-close, +.cui .label.label--dark .icon-close, +.cui .label.label--light .icon-close, +.cui .label.label--primary .icon-close, +.cui .label.label--secondary .icon-close, +.cui .label.label--success .icon-close, +.cui .label.label--tertiary .icon-close, +.cui .label.label--warning .icon-close, +.cui .label.label--warning-alt .icon-close { + font-size:var(--cui-font-size-xs); + font-weight:700; + margin-left:var(--cui-spacing-qtr); + cursor:pointer +} +.cui .label .icon-close:hover { + opacity:1; + text-decoration:none +} +.cui .label.label--primary { + border:var(--cui-label-border-thickness) solid var(--cui-theme-primary) +} +.cui .label.label--primary .icon-close:hover { + opacity:1; + text-decoration:none +} +.cui .label.label--secondary { + background-color:var(--cui-theme-secondary); + border:var(--cui-label-border-thickness) solid var(--cui-theme-secondary); + color:var(--cui-theme-secondary-color) +} +.cui .label.label--secondary .icon-close { + color:var(--cui-theme-secondary-color) +} +.cui .label.label--secondary .icon-close:hover { + opacity:1; + text-decoration:none +} +.cui .label.label--tertiary { + background-color:var(--cui-theme-tertiary); + border:var(--cui-label-border-thickness) solid var(--cui-theme-tertiary); + color:var(--cui-theme-tertiary-color) +} +.cui .label.label--tertiary .icon-close { + color:var(--cui-theme-tertiary-color) +} +.cui .label.label--tertiary .icon-close:hover { + opacity:1; + text-decoration:none +} +.cui .label.label--success { + background-color:var(--cui-theme-success); + border:var(--cui-label-border-thickness) solid var(--cui-theme-success); + color:var(--cui-theme-success-color) +} +.cui .label.label--success .icon-close { + color:var(--cui-theme-success-color) +} +.cui .label.label--success .icon-close:hover { + opacity:1; + text-decoration:none +} +.cui .label.label--info { + background-color:var(--cui-theme-info); + border:var(--cui-label-border-thickness) solid var(--cui-theme-info); + color:var(--cui-theme-info-color) +} +.cui .label.label--info .icon-close { + color:var(--cui-theme-info-color); + cursor:pointer; + font-size:var(--cui-font-size-xs); + font-weight:700; + margin-left:var(--cui-spacing-qtr) +} +.cui .label.label--info .icon-close:hover { + opacity:1; + text-decoration:none +} +.cui .label.label--warning-alt { + background-color:var(--cui-theme-warning-alt); + border:var(--cui-label-border-thickness) solid var(--cui-theme-warning-alt); + color:var(--cui-theme-warning-alt-color) +} +.cui .label.label--warning-alt .icon-close { + color:var(--cui-theme-warning-alt-color) +} +.cui .label.label--warning-alt .icon-close:hover { + opacity:1; + text-decoration:none +} +.cui .label.label--warning { + background-color:var(--cui-theme-warning); + border:var(--cui-label-border-thickness) solid var(--cui-theme-warning); + color:var(--cui-theme-warning-color) +} +.cui .label.label--warning .icon-close { + color:var(--cui-theme-warning-color) +} +.cui .label.label--warning .icon-close:hover { + opacity:1; + text-decoration:none +} +.cui .label.label--danger { + background-color:var(--cui-theme-danger); + border:var(--cui-label-border-thickness) solid var(--cui-theme-danger); + color:var(--cui-theme-danger-color) +} +.cui .label.label--danger .icon-close { + color:var(--cui-theme-danger-color) +} +.cui .label.label--danger .icon-close:hover { + opacity:1; + text-decoration:none +} +.cui .label.label--dark { + background-color:var(--cui-theme-dark); + border:var(--cui-label-border-thickness) solid var(--cui-theme-dark); + color:var(--cui-theme-dark-color) +} +.cui .label.label--dark .icon-close { + color:var(--cui-theme-dark-color) +} +.cui .label.label--dark .icon-close:hover { + opacity:1; + text-decoration:none +} +.cui .label.label--light { + background-color:var(--cui-theme-light); + border:var(--cui-label-border-thickness) solid var(--cui-theme-light); + color:var(--cui-theme-light-color) +} +.cui .label.label--light .icon-close { + color:var(--cui-theme-light-color) +} +.cui .label.label--light .icon-close:hover { + opacity:1; + text-decoration:none +} +.cui .label.label--bordered, +.cui .label.label--outlined { + background-color:transparent; + color:var(--cui-font-color) +} +.cui .link, +.cui a:not(.btn) { + -moz-appearance:none; + -webkit-appearance:none; + border-width:0; + cursor:pointer; + -webkit-font-smoothing:inherit; + display:inline-flex; + flex-wrap:wrap; + color:var(--cui-link-color); + font-weight:var(--cui-link-font-weight); + background:0 0; + text-decoration:none +} +.cui .link:active, +.cui .link:focus, +.cui .link:hover, +.cui a:not(.btn):active, +.cui a:not(.btn):focus, +.cui a:not(.btn):hover { + color:var(--cui-link-color-active); + text-decoration:underline +} +.cui .link:focus, +.cui a:not(.btn):focus { + outline:0 +} +.cui .link.link--ghost, +.cui a:not(.btn).link--ghost { + color:var(--cui-color-white); + opacity:.75 +} +.cui .link.link--ghost:hover, +.cui a:not(.btn).link--ghost:hover { + opacity:1 +} +.cui .link { + color:var(--cui-inactive-color) +} +.cui span[class^=icon-]:before { + display:inline-block; + text-decoration:none +} +.cui .panel, +.cui a.panel { + display:block; + position:relative; + margin:0; + border:0; + border-radius:var(--cui-panel-border-radius); + height:auto; + -webkit-tap-highlight-color:transparent; + background-color:var(--cui-background-color); + color:var(--cui-font-color); + padding:var(--cui-panel-default-padding) +} +.cui .radio .radio__input, +.cui .radio input { + width:var(--cui-radio-size); + height:var(--cui-radio-size) +} +.cui .panel a, +.cui a.panel a { + color:var(--cui-link-color); + text-decoration:none +} +.cui .panel a:hover, +.cui a.panel a:hover { + color:var(--cui-link-color-active) +} +.cui .panel a:active, +.cui .panel a:focus, +.cui .panel a:hover, +.cui a.panel a:active, +.cui a.panel a:focus, +.cui a.panel a:hover { + text-decoration:underline +} +.cui .panel.panel--primary, +.cui a.panel.panel--primary { + background-color:var(--cui-theme-primary); + color:var(--cui-theme-primary-color) +} +.cui .panel.panel--primary a, +.cui a.panel.panel--primary a { + color:var(--cui-theme-primary-color); + -webkit-text-decoration:var(--cui-theme-primary-link-decoration); + text-decoration:var(--cui-theme-primary-link-decoration) +} +.cui .panel.panel--primary a:hover, +.cui a.panel.panel--primary a:hover { + color:var(--cui-theme-primary-color) +} +.cui .panel.panel--primary a:active, +.cui .panel.panel--primary a:focus, +.cui .panel.panel--primary a:hover, +.cui a.panel.panel--primary a:active, +.cui a.panel.panel--primary a:focus, +.cui a.panel.panel--primary a:hover { + text-decoration:underline +} +.cui .panel.panel--secondary, +.cui a.panel.panel--secondary { + background-color:var(--cui-theme-secondary); + color:var(--cui-theme-secondary-color) +} +.cui .panel.panel--secondary a, +.cui a.panel.panel--secondary a { + color:var(--cui-theme-secondary-color); + -webkit-text-decoration:var(--cui-theme-secondary-link-decoration); + text-decoration:var(--cui-theme-secondary-link-decoration) +} +.cui .panel.panel--secondary a:hover, +.cui a.panel.panel--secondary a:hover { + color:var(--cui-theme-secondary-color) +} +.cui .panel.panel--secondary a:active, +.cui .panel.panel--secondary a:focus, +.cui .panel.panel--secondary a:hover, +.cui a.panel.panel--secondary a:active, +.cui a.panel.panel--secondary a:focus, +.cui a.panel.panel--secondary a:hover { + text-decoration:underline +} +.cui .panel.panel--tertiary, +.cui a.panel.panel--tertiary { + background-color:var(--cui-theme-tertiary); + color:var(--cui-theme-tertiary-color) +} +.cui .panel.panel--tertiary a, +.cui a.panel.panel--tertiary a { + color:var(--cui-theme-tertiary-color); + -webkit-text-decoration:var(--cui-theme-tertiary-link-decoration); + text-decoration:var(--cui-theme-tertiary-link-decoration) +} +.cui .panel.panel--tertiary a:hover, +.cui a.panel.panel--tertiary a:hover { + color:var(--cui-theme-tertiary-color) +} +.cui .panel.panel--tertiary a:active, +.cui .panel.panel--tertiary a:focus, +.cui .panel.panel--tertiary a:hover, +.cui a.panel.panel--tertiary a:active, +.cui a.panel.panel--tertiary a:focus, +.cui a.panel.panel--tertiary a:hover { + text-decoration:underline +} +.cui .panel.panel--success, +.cui a.panel.panel--success { + background-color:var(--cui-theme-success); + color:var(--cui-theme-success-color) +} +.cui .panel.panel--success a, +.cui a.panel.panel--success a { + color:var(--cui-theme-success-color); + -webkit-text-decoration:var(--cui-theme-success-link-decoration); + text-decoration:var(--cui-theme-success-link-decoration) +} +.cui .panel.panel--success a:hover, +.cui a.panel.panel--success a:hover { + color:var(--cui-theme-success-color) +} +.cui .panel.panel--success a:active, +.cui .panel.panel--success a:focus, +.cui .panel.panel--success a:hover, +.cui a.panel.panel--success a:active, +.cui a.panel.panel--success a:focus, +.cui a.panel.panel--success a:hover { + text-decoration:underline +} +.cui .panel.panel--info, +.cui a.panel.panel--info { + background-color:var(--cui-theme-info); + color:var(--cui-theme-info-color) +} +.cui .panel.panel--info a, +.cui a.panel.panel--info a { + color:var(--cui-theme-info-color); + -webkit-text-decoration:var(--cui-theme-info-link-decoration); + text-decoration:var(--cui-theme-info-link-decoration) +} +.cui .panel.panel--info a:hover, +.cui a.panel.panel--info a:hover { + color:var(--cui-theme-info-color) +} +.cui .panel.panel--info a:active, +.cui .panel.panel--info a:focus, +.cui .panel.panel--info a:hover, +.cui a.panel.panel--info a:active, +.cui a.panel.panel--info a:focus, +.cui a.panel.panel--info a:hover { + text-decoration:underline +} +.cui .panel.panel--warning-alt, +.cui a.panel.panel--warning-alt { + background-color:var(--cui-theme-warning-alt); + color:var(--cui-theme-warning-alt-color) +} +.cui .panel.panel--warning-alt a, +.cui a.panel.panel--warning-alt a { + color:var(--cui-theme-warning-alt-color); + -webkit-text-decoration:var(--cui-theme-warning-alt-link-decoration); + text-decoration:var(--cui-theme-warning-alt-link-decoration) +} +.cui .panel.panel--warning-alt a:hover, +.cui a.panel.panel--warning-alt a:hover { + color:var(--cui-theme-warning-alt-color) +} +.cui .panel.panel--warning-alt a:active, +.cui .panel.panel--warning-alt a:focus, +.cui .panel.panel--warning-alt a:hover, +.cui a.panel.panel--warning-alt a:active, +.cui a.panel.panel--warning-alt a:focus, +.cui a.panel.panel--warning-alt a:hover { + text-decoration:underline +} +.cui .panel.panel--warning, +.cui a.panel.panel--warning { + background-color:var(--cui-theme-warning); + color:var(--cui-theme-warning-color) +} +.cui .panel.panel--warning a, +.cui a.panel.panel--warning a { + color:var(--cui-theme-warning-color); + -webkit-text-decoration:var(--cui-theme-warning-link-decoration); + text-decoration:var(--cui-theme-warning-link-decoration) +} +.cui .panel.panel--warning a:hover, +.cui a.panel.panel--warning a:hover { + color:var(--cui-theme-warning-color) +} +.cui .panel.panel--warning a:active, +.cui .panel.panel--warning a:focus, +.cui .panel.panel--warning a:hover, +.cui a.panel.panel--warning a:active, +.cui a.panel.panel--warning a:focus, +.cui a.panel.panel--warning a:hover { + text-decoration:underline +} +.cui .panel.panel--danger, +.cui a.panel.panel--danger { + background-color:var(--cui-theme-danger); + color:var(--cui-theme-danger-color) +} +.cui .panel.panel--danger a, +.cui a.panel.panel--danger a { + color:var(--cui-theme-danger-color); + -webkit-text-decoration:var(--cui-theme-danger-link-decoration); + text-decoration:var(--cui-theme-danger-link-decoration) +} +.cui .panel.panel--danger a:hover, +.cui a.panel.panel--danger a:hover { + color:var(--cui-theme-danger-color) +} +.cui .panel.panel--danger a:active, +.cui .panel.panel--danger a:focus, +.cui .panel.panel--danger a:hover, +.cui a.panel.panel--danger a:active, +.cui a.panel.panel--danger a:focus, +.cui a.panel.panel--danger a:hover { + text-decoration:underline +} +.cui .panel.panel--dark, +.cui a.panel.panel--dark { + background-color:var(--cui-theme-dark); + color:var(--cui-theme-dark-color) +} +.cui .panel.panel--dark a, +.cui a.panel.panel--dark a { + color:var(--cui-theme-dark-color); + -webkit-text-decoration:var(--cui-theme-dark-link-decoration); + text-decoration:var(--cui-theme-dark-link-decoration) +} +.cui .panel.panel--dark a:hover, +.cui a.panel.panel--dark a:hover { + color:var(--cui-theme-dark-color) +} +.cui .panel.panel--dark a:active, +.cui .panel.panel--dark a:focus, +.cui .panel.panel--dark a:hover, +.cui a.panel.panel--dark a:active, +.cui a.panel.panel--dark a:focus, +.cui a.panel.panel--dark a:hover { + text-decoration:underline +} +.cui .panel.panel--light, +.cui a.panel.panel--light { + background-color:var(--cui-theme-light); + color:var(--cui-theme-light-color) +} +.cui .panel.panel--light a, +.cui a.panel.panel--light a { + color:var(--cui-theme-light-color); + -webkit-text-decoration:var(--cui-theme-light-link-decoration); + text-decoration:var(--cui-theme-light-link-decoration) +} +.cui .panel.panel--light a:hover, +.cui a.panel.panel--light a:hover { + color:var(--cui-theme-light-color) +} +.cui .panel.panel--light a:active, +.cui .panel.panel--light a:focus, +.cui .panel.panel--light a:hover, +.cui a.panel.panel--light a:active, +.cui a.panel.panel--light a:focus, +.cui a.panel.panel--light a:hover { + text-decoration:underline +} +.cui .panel.panel--none, +.cui a.panel.panel--none { + padding:var(--cui-panel-none-padding) +} +.cui .panel.panel--compressed, +.cui a.panel.panel--compressed { + padding:var(--cui-panel-compressed-padding) +} +.cui .panel.panel--regular, +.cui a.panel.panel--regular { + padding:var(--cui-panel-regular-padding) +} +.cui .panel.panel--loose, +.cui a.panel.panel--loose { + padding:var(--cui-panel-loose-padding) +} +.cui .panel.panel--bordered, +.cui a.panel.panel--bordered { + border:var(--cui-border) +} +.cui .panel.panel--bordered-top, +.cui a.panel.panel--bordered-top { + border-top:var(--cui-border) +} +.cui .panel.panel--bordered-right, +.cui a.panel.panel--bordered-right { + border-right:var(--cui-border) +} +.cui .panel.panel--bordered-bottom, +.cui a.panel.panel--bordered-bottom { + border-bottom:var(--cui-border) +} +.cui .panel.panel--bordered-left, +.cui a.panel.panel--bordered-left { + border-left:var(--cui-border) +} +.cui .panel.panel--well, +.cui a.panel.panel--well { + box-shadow:var(--cui-shadow-inset) +} +.cui .panel.panel--hover:hover, +.cui a.panel.panel--hover:hover { + box-shadow:var(--cui-shadow-outset) +} +.cui .radio { + --cui-radio-background:transparent; + --cui-radio-background-active:transparent; + --cui-radio-border-thickness:var(--cui-border-thickness); + --cui-radio-border:var(--cui-radio-border-thickness) solid var(--cui-border-form-color); + --cui-radio-border-active:var(--cui-radio-border-thickness) solid var(--cui-border-form-color); + --cui-radio-border-hover:var(--cui-radio-border-thickness) solid var(--cui-accent-color); + --cui-radio-border-radius:var(--cui-border-radius-round); + --cui-radio-knob-background:var(--cui-color-white); + --cui-radio-knob-color:var(--cui-accent-color); + --cui-radio-knob-size:3px; + --cui-radio-size:var(--cui-spacing); + cursor:pointer; + display:inline-flex +} +.cui .radio input { + display:block; + position:absolute; + padding:0; + border:0; + overflow:hidden; + clip:rect(0 0 0 0); + font-weight:var(--cui-form-value-font-weight); + margin:0 +} +.cui .form-group .form-group__text.select label, +.cui .radio .radio__label { + color:var(--cui-form-label-color); + font-weight:var(--cui-form-label-font-weight); + font-size:var(--cui-form-label-font-size); + text-transform:var(--cui-form-label-transform) +} +.cui .radio input.hover~.radio__input, +.cui .radio input:hover~.radio__input { + border:var(--cui-radio-border-hover) +} +.cui .radio input.checked~.radio__input, +.cui .radio input:checked~.radio__input { + background-color:var(--cui-radio-background-active); + border:var(--cui-radio-border-active) +} +.cui .radio input.checked~.radio__input:after, +.cui .radio input:checked~.radio__input:after { + border-width:var(--cui-radio-knob-size); + opacity:1 +} +.cui .radio input.focus~.radio__input, +.cui .radio input:focus~.radio__input { + border:var(--cui-radio-border-active) +} +.cui .radio input.focus~.radio__input:before, +.cui .radio input:focus~.radio__input:before { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-focus-color),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .radio input.active~.radio__input, +.cui .radio input:active~.radio__input { + background-color:var(--cui-radio-background-active); + border:var(--cui-radio-border-active) +} +.cui .radio .radio__input { + position:relative; + display:inline-flex; + min-width:var(--cui-radio-size); + border:var(--cui-radio-border); + outline:transparent var(--cui-radio-border-thickness); + border-radius:var(--cui-radio-border-radius); + background-color:var(--cui-radio-background) +} +.cui .radio .radio__input:after, +.cui .radio .radio__input:before { + position:absolute; + top:0; + right:0; + bottom:0; + left:0; + width:auto; + height:auto; + content:''; + pointer-events:none; + opacity:0 +} +.cui .radio .radio__input:before { + transition:all var(--cui-animate-speed) ease-in-out; + border-radius:var(--cui-radio-border-radius) +} +.cui .radio .radio__input:after { + transition:all var(--cui-animate-speed) cubic-bezier(.2,.8,.2,1.2); + opacity:0; + border-radius:var(--cui-radio-border-radius); + background-color:var(--cui-radio-knob-color); + border:1px solid var(--cui-radio-knob-background) +} +.cui .radio .radio__label { + margin-left:var(--cui-form-label-spacing) +} +.cui .form-group .form-group__text.select { + position:relative; + display:flex; + flex-direction:column +} +.cui .form-group .form-group__text.select input, +.cui .form-group .form-group__text.select select { + height:var(--cui-form-size); + max-height:var(--cui-form-size); + line-height:2.4rem +} +.cui .form-group .form-group__text.select input, +.cui .form-group .form-group__text.select select, +.cui .form-group .form-group__text.select textarea { + padding:var(--cui-form-padding) +} +.cui .form-group .form-group__text.select select { + padding:0 var(--cui-spacing-dbl) 0 var(--cui-form-padding) +} +.cui .form-group .form-group__text.select label { + margin-bottom:var(--cui-form-label-spacing) +} +.cui .form-group .form-group__text.select input, +.cui .form-group .form-group__text.select select, +.cui .form-group .form-group__text.select textarea { + font-weight:var(--cui-form-value-font-weight); + color:var(--cui-form-value-color); + flex:1; + flex-shrink:0; + order:3; + background:var(--cui-form-background); + border:var(--cui-border); + border-radius:var(--cui-border-radius); + box-shadow:none; + -moz-appearance:none; + -webkit-appearance:none; + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function) +} +.cui .form-group .form-group__text.select input.focus, +.cui .form-group .form-group__text.select input.hover, +.cui .form-group .form-group__text.select input:focus, +.cui .form-group .form-group__text.select input:hover, +.cui .form-group .form-group__text.select select.focus, +.cui .form-group .form-group__text.select select.hover, +.cui .form-group .form-group__text.select select:focus, +.cui .form-group .form-group__text.select select:hover, +.cui .form-group .form-group__text.select textarea.focus, +.cui .form-group .form-group__text.select textarea.hover, +.cui .form-group .form-group__text.select textarea:focus, +.cui .form-group .form-group__text.select textarea:hover { + border-color:var(--cui-accent-color) +} +.cui .form-group .form-group__text.select input.focus~button.link, +.cui .form-group .form-group__text.select input.hover~button.link, +.cui .form-group .form-group__text.select input:focus~button.link, +.cui .form-group .form-group__text.select input:hover~button.link, +.cui .form-group .form-group__text.select select.focus~button.link, +.cui .form-group .form-group__text.select select.hover~button.link, +.cui .form-group .form-group__text.select select:focus~button.link, +.cui .form-group .form-group__text.select select:hover~button.link, +.cui .form-group .form-group__text.select textarea.focus~button.link, +.cui .form-group .form-group__text.select textarea.hover~button.link, +.cui .form-group .form-group__text.select textarea:focus~button.link, +.cui .form-group .form-group__text.select textarea:hover~button.link { + color:var(--cui-accent-color) +} +.cui .form-group .form-group__text.select input.focus, +.cui .form-group .form-group__text.select input:focus, +.cui .form-group .form-group__text.select select.focus, +.cui .form-group .form-group__text.select select:focus, +.cui .form-group .form-group__text.select textarea.focus, +.cui .form-group .form-group__text.select textarea:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-focus-color),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .form-group .form-group__text.select input.disabled~label, +.cui .form-group .form-group__text.select input[disabled]~label, +.cui .form-group .form-group__text.select select.disabled~label, +.cui .form-group .form-group__text.select select[disabled]~label, +.cui .form-group .form-group__text.select textarea.disabled~label, +.cui .form-group .form-group__text.select textarea[disabled]~label { + opacity:.5; + cursor:not-allowed!important; + pointer-events:none!important; + z-index:0!important +} +.cui .form-group .form-group__text.select input { + width:100%; + cursor:default; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; + font-weight:var(--cui-form-value-font-weight) +} +.cui .sortable, +.cui .switch, +.cui .table.table--highlight>tbody>tr:hover, +.cui .table.table--selectable>tbody>tr td:hover { + cursor:pointer +} +.cui .dropdown .dropdown__menu, +.cui .nav-tabs>li>a, +.cui .tabs>li>a { + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none +} +.cui .form-group .form-group__text.select:after { + bottom:var(--cui-form-icon-yoffset); + transform:rotate(0); + transition:transform var(--cui-animate-speed) var(--cui-animate-timing-function); + content:''; + width:0; + height:0; + display:inline-flex; + align-items:center; + opacity:1; + border-radius:2px; + margin-bottom:2px; + border-left:5px solid transparent; + border-right:5px solid transparent; + border-top:5px solid var(--cui-font-color); + position:absolute; + right:var(--cui-spacing-half) +} +.cui .form-group.active .form-group__text.select:after { + transition:transform var(--cui-animate-speed) var(--cui-animate-timing-function); + transform:rotate(180deg) +} +.cui .form-group.active .form-group__text.select input { + border-bottom-left-radius:0; + border-bottom-right-radius:0 +} +.cui .switch { + --cui-switch-knob-background:var(--cui-color-gray-500); + --cui-switch-knob-background-active:var(--cui-color-white); + --cui-switch-knob-border:transparent; + --cui-switch-knob-border-width:var(--cui-border-thickness); + --cui-switch-knob-border-width-hover:var(--cui-border-thickness); + --cui-switch-knob-border-active:var(--cui-accent-color); + --cui-switch-knob-border-hover:var(--cui-accent-color); + --cui-switch-size:var(--cui-spacing); + --cui-switch-slider-background:var(--cui-color-gray-300); + --cui-switch-slider-background-active:var(--cui-accent-color); + --cui-switch-slider-border-radius:var(--cui-border-radius-round); + --cui-switch-slider-height:12px; + position:relative; + display:inline-flex; + align-items:center +} +.cui .switch input { + display:block; + position:absolute; + width:1px; + height:1px; + padding:0; + border:0; + overflow:hidden; + clip:rect(0 0 0 0); + font-weight:var(--cui-form-value-font-weight); + margin:0 +} +.cui .switch input.hover~.switch__input:after, +.cui .switch input:hover~.switch__input:after { + border-color:var(--cui-switch-knob-border-hover); + border-width:var(--cui-switch-knob-border-width-hover); + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-focus-color),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .switch input.checked~.switch__input, +.cui .switch input:checked~.switch__input { + background-color:var(--cui-switch-slider-background-active) +} +.cui .switch input.checked~.switch__input:after, +.cui .switch input:checked~.switch__input:after { + background-color:var(--cui-switch-knob-background-active); + border-color:var(--cui-switch-knob-border-active); + transform:translateX(100%) +} +.cui .switch input.focus~.switch__input:after, +.cui .switch input:focus~.switch__input:after { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-focus-color),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .switch .switch__input { + transition:all var(--cui-animate-speed) ease-in-out; + position:relative; + display:flex; + align-items:center; + justify-content:center; + background:var(--cui-switch-slider-background); + height:var(--cui-switch-slider-height); + width:calc(var(--cui-switch-size) * 2); + border-radius:var(--cui-switch-slider-border-radius) +} +.cui .switch .switch__input:after, +.cui .switch .switch__input:before { + position:absolute; + content:''; + left:0 +} +.cui .switch .switch__input:before { + top:0; + right:0; + bottom:0; + width:auto; + height:auto; + pointer-events:none; + opacity:0; + border-radius:var(--cui-switch-slider-border-radius) +} +.cui .form-group .form-group__text textarea:after, +.cui .form-group .form-group__text:after { + bottom:var(--cui-form-icon-yoffset) +} +.cui .switch .switch__input:after { + transition:all var(--cui-animate-speed) cubic-bezier(.2,.8,.2,1.2); + display:block; + cursor:pointer; + height:var(--cui-switch-size); + width:var(--cui-switch-size); + background-color:var(--cui-switch-knob-background); + border-radius:50%; + border-width:var(--cui-switch-knob-border-width); + border-style:solid; + border-color:var(--cui-switch-knob-border); + transform:translateX(0) +} +.cui .form-group .form-group__text input, +.cui .form-group .form-group__text select, +.cui .form-group .form-group__text textarea, +.cui .table.table--highlight>tbody>tr:hover td:first-child, +.cui .table.table--hover>tbody>tr:hover, +.cui .table.table--selectable>tbody>tr, +.cui .table.table--selectable>tbody>tr.active, +.cui .table.table--selectable>tbody>tr:hover { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function) +} +.cui .switch .switch__label { + color:var(--cui-form-label-color); + font-size:var(--cui-form-label-font-size); + font-weight:var(--cui-form-label-font-weight); + text-transform:var(--cui-form-label-transform) +} +.cui .switch .switch__input+.switch__label, +.cui .switch .switch__label+.switch__input { + margin-left:calc(var(--cui-form-label-spacing) * 2) +} +.cui .responsive-table { + display:block; + max-width:100%; + overflow:auto +} +.cui .table th:last-child:after, +.cui .table.table--compressed th:after, +.cui .table.table--loose th:after, +.cui .table.table--nopadding th:after { + display:none +} +.cui .badge, +.cui .badge.badge--dot, +.cui .badge.badge--large, +.cui .badge.badge--medium, +.cui .badge.badge--small, +.cui .badge.badge--tiny { + max-width:var(--cui-badge-max-width) +} +.cui .table { + --cui-table-border:var(--cui-border); + --cui-table-striping-odd:var(--cui-background-alt); + --cui-table-striping-even:var(--cui-background-color); + --cui-table-padding:var(--cui-spacing-half); + --cui-table-padding-compressed:calc(var(--cui-spacing-half) * .75); + --cui-table-padding-loose:calc(var(--cui-spacing-half) * 1.25); + --cui-table-font-size:var(--cui-font-size); + --cui-table-font-size-compressed:var(--cui-font-size-sm); + --cui-table-font-size-loose:var(--cui-font-size); + --cui-table-header-separator:2px solid var(--cui-border-color); + width:100%; + border-collapse:separate; + border-spacing:0; + font-feature-settings:"kern","liga","tnum" +} +.cui .table>tbody>tr.well>td { + padding:0; + border-top:0 none +} +.cui .table .table--highlight>tbody>tr.well:hover td:first-child, +.cui .table>tbody>tr.well td:first-child, +.cui .table>tbody>tr.well:hover td:first-child { + border-left:0 none +} +.cui .table th { + background:0 none; + position:relative; + text-align:left +} +.cui .table th input { + font-weight:400 +} +.cui .table td>* { + vertical-align:middle +} +.cui .table td, +.cui .table th, +.cui .table tr { + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; + padding:var(--cui-table-padding); + vertical-align:middle +} +.cui .table td:first-child, +.cui .table th:first-child, +.cui .table tr:first-child { + width:1px +} +.cui .table tr td:first-child, +.cui .table tr th:first-child { + border-left:var(--cui-accent-thickness) solid transparent +} +.cui .table tr td:first-child label.checkbox, +.cui .table tr th:first-child label.checkbox { + margin:0; + vertical-align:middle +} +.cui .table.table--lined { + border:0 +} +.cui .table.table--lined td, +.cui .table.table--lined th, +.cui .table.table--lined tr { + border:0; + background:0 0 +} +.cui .table.table--lined>tbody>tr:nth-child(even), +.cui .table.table--lined>tbody>tr:nth-child(odd) { + background:0 0 +} +.cui .table.table--lined th { + border-bottom:var(--cui-table-header-separator) +} +.cui .table.table--lined td { + border-bottom:var(--cui-table-border) +} +.cui .table.table--lined:not(.table--selectable) td:first-child, +.cui .table.table--lined:not(.table--selectable) th:first-child { + padding-left:1px +} +.cui .table.table--lined:not(.table--selectable) td:last-child, +.cui .table.table--lined:not(.table--selectable) th:last-child { + padding-right:1px +} +.cui .table.table--bordered { + border:var(--cui-table-border) +} +.cui .table.table--bordered th { + border-right:var(--cui-table-border) +} +.cui .table.table--bordered th:after { + visibility:hidden +} +.cui .table.table--bordered th:last-child { + border-right:0 none +} +.cui .table.table--bordered td { + border-top:var(--cui-table-border); + border-right:var(--cui-table-border) +} +.cui .table.table--bordered td:last-child { + border-right:1px solid transparent +} +.cui .table.table--bordered-inner { + border:0 +} +.cui .table.table--highlight>tbody>tr:hover td:first-child, +.cui .table.table--striped>tbody>tr.active td:first-child { + border-left:var(--cui-accent-thickness) solid var(--cui-accent-color) +} +.cui .table.table--striped>tbody>tr:nth-child(odd) { + background-color:var(--cui-table-striping-odd) +} +.cui .table.table--striped>tbody>tr:nth-child(even) { + background-color:var(--cui-table-striping-even) +} +.cui .table.table--wrap td, +.cui .table.table--wrap th, +.cui .table.table--wrap tr, +.cui .table.table--wrapped td, +.cui .table.table--wrapped th, +.cui .table.table--wrapped tr { + white-space:normal; + overflow:visible +} +@media (max-width:991.98px) { + .cui .table.table--wrap-md td, + .cui .table.table--wrap-md th, + .cui .table.table--wrap-md tr, + .cui .table.table--wrapped-md td, + .cui .table.table--wrapped-md th, + .cui .table.table--wrapped-md tr { + white-space:normal; + overflow:visible + } +} +@media (max-width:767.98px) { + .cui .table.table--wrap-sm td, + .cui .table.table--wrap-sm th, + .cui .table.table--wrap-sm tr, + .cui .table.table--wrapped-sm td, + .cui .table.table--wrapped-sm th, + .cui .table.table--wrapped-sm tr { + white-space:normal; + overflow:visible + } +} +@media (max-width:575.98px) { + .cui .table.table--wrap-xs td, + .cui .table.table--wrap-xs th, + .cui .table.table--wrap-xs tr, + .cui .table.table--wrapped-xs td, + .cui .table.table--wrapped-xs th, + .cui .table.table--wrapped-xs tr { + white-space:normal; + overflow:visible + } +} +.cui .table.table--nowrap--col--1 td:nth-child(1), +.cui .table.table--nowrap--col--1 th:nth-child(1) { + white-space:nowrap +} +.cui .table.table--nostripes th { + background:0 none +} +.cui .table.table--nostripes>tbody>tr:nth-child(even), +.cui .table.table--nostripes>tbody>tr:nth-child(odd) { + background:0 0 +} +.cui .table.table--nopadding td, +.cui .table.table--nopadding th, +.cui .table.table--nopadding tr { + padding:var(--cui-spacing-qtr); + font-size:0 +} +.cui .table.table--compressed td, +.cui .table.table--compressed th, +.cui .table.table--compressed tr { + padding:var(--cui-table-padding-compressed); + font-size:var(--cui-table-font-size-compressed) +} +.cui .table.table--loose td, +.cui .table.table--loose th, +.cui .table.table--loose tr { + padding:var(--cui-table-padding-loose); + font-size:var(--cui-table-font-size-loose) +} +.cui .table.table--fixed { + table-layout:fixed +} +.cui .table.table--fixed td:first-child, +.cui .table.table--fixed th:first-child, +.cui .table.table--fixed tr:first-child { + width:auto +} +.cui .table.table--nohighlight>tbody>tr:hover td:first-child { + border-left-color:transparent +} +.cui .table.table--hover>tbody>tr:hover { + background-color:var(--cui-background-hover) +} +.cui .table.table--selectable>tbody>tr>td:first-child, +.cui .table.table--selectable>thead>th:first-child { + border-left:var(--cui-accent-thickness) solid transparent +} +.cui .table.table--selectable>tbody>tr.active>td:first-child, +.cui .table.table--selectable>tbody>tr:hover>td:first-child { + border-left:var(--cui-accent-thickness) solid var(--cui-accent-color) +} +.cui .table.table--selectable>tbody>tr:hover { + background:var(--cui-background-hover) +} +.cui .table.table--selectable>tbody>tr.active { + background:var(--cui-background-active) +} +.cui .sort-indicator { + content:''; + width:0; + height:0; + display:inline-flex; + align-items:center; + position:relative; + opacity:1; + border-radius:2px; + margin-bottom:2px; + border-left:5px solid transparent; + border-right:5px solid transparent; + border-top:5px solid var(--cui-font-color); + font-size:0; + margin-left:1px +} +.cui .fixed-header, +.cui .fixed-header .responsive-table, +.cui .form-group .form-group__text input, +.cui .form-group .form-group__text textarea input { + width:100% +} +.cui .fixed-header { + position:relative; + padding:36px 0 0 +} +.cui .fixed-header .responsive-table thead tr { + position:absolute; + left:0; + top:0; + width:100%; + margin:0; + padding:0 +} +.cui .form-group .form-group__text label, +.cui .form-group .form-group__text textarea label { + font-size:var(--cui-form-label-font-size); + text-transform:var(--cui-form-label-transform); + margin-bottom:var(--cui-form-label-spacing) +} +.cui .form-group .form-group__text textarea { + resize:none; + position:relative; + display:flex; + flex-direction:column +} +.cui .form-group .form-group__text textarea input, +.cui .form-group .form-group__text textarea select, +.cui .form-group .form-group__text textarea textarea { + padding:var(--cui-form-padding) +} +.cui .form-group .form-group__text textarea select { + padding:0 var(--cui-spacing-dbl) 0 var(--cui-form-padding) +} +.cui .form-group .form-group__text textarea label { + color:var(--cui-form-label-color); + font-weight:var(--cui-form-label-font-weight) +} +.cui .form-group .form-group__text textarea input, +.cui .form-group .form-group__text textarea select, +.cui .form-group .form-group__text textarea textarea { + font-weight:var(--cui-form-value-font-weight); + color:var(--cui-form-value-color); + flex:1; + flex-shrink:0; + order:3; + background:var(--cui-form-background); + border:var(--cui-border); + border-radius:var(--cui-border-radius); + box-shadow:none; + -moz-appearance:none; + -webkit-appearance:none; + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function) +} +.cui .form-group .form-group__text textarea input.focus, +.cui .form-group .form-group__text textarea input.hover, +.cui .form-group .form-group__text textarea input:focus, +.cui .form-group .form-group__text textarea input:hover, +.cui .form-group .form-group__text textarea select.focus, +.cui .form-group .form-group__text textarea select.hover, +.cui .form-group .form-group__text textarea select:focus, +.cui .form-group .form-group__text textarea select:hover, +.cui .form-group .form-group__text textarea textarea.focus, +.cui .form-group .form-group__text textarea textarea.hover, +.cui .form-group .form-group__text textarea textarea:focus, +.cui .form-group .form-group__text textarea textarea:hover { + border-color:var(--cui-accent-color) +} +.cui .form-group .form-group__text textarea input.focus~button.link, +.cui .form-group .form-group__text textarea input.hover~button.link, +.cui .form-group .form-group__text textarea input:focus~button.link, +.cui .form-group .form-group__text textarea input:hover~button.link, +.cui .form-group .form-group__text textarea select.focus~button.link, +.cui .form-group .form-group__text textarea select.hover~button.link, +.cui .form-group .form-group__text textarea select:focus~button.link, +.cui .form-group .form-group__text textarea select:hover~button.link, +.cui .form-group .form-group__text textarea textarea.focus~button.link, +.cui .form-group .form-group__text textarea textarea.hover~button.link, +.cui .form-group .form-group__text textarea textarea:focus~button.link, +.cui .form-group .form-group__text textarea textarea:hover~button.link { + color:var(--cui-accent-color) +} +.cui .form-group .form-group__text textarea input.focus, +.cui .form-group .form-group__text textarea input:focus, +.cui .form-group .form-group__text textarea select.focus, +.cui .form-group .form-group__text textarea select:focus, +.cui .form-group .form-group__text textarea textarea.focus, +.cui .form-group .form-group__text textarea textarea:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-focus-color),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .form-group .form-group__text textarea input.disabled~label, +.cui .form-group .form-group__text textarea input[disabled]~label, +.cui .form-group .form-group__text textarea select.disabled~label, +.cui .form-group .form-group__text textarea select[disabled]~label, +.cui .form-group .form-group__text textarea textarea.disabled~label, +.cui .form-group .form-group__text textarea textarea[disabled]~label { + opacity:.5; + cursor:not-allowed!important; + pointer-events:none!important; + z-index:0!important +} +.cui .form-group.form-group--inline .form-group__text textarea~label { + align-self:flex-start +} +.cui .form-group .form-group__text { + position:relative; + display:flex; + flex-direction:column +} +.cui .form-group .form-group__text input, +.cui .form-group .form-group__text select, +.cui .form-group .form-group__text textarea { + padding:var(--cui-form-padding) +} +.cui .form-group .form-group__text select { + padding:0 var(--cui-spacing-dbl) 0 var(--cui-form-padding) +} +.cui .form-group .form-group__text label { + color:var(--cui-form-label-color); + font-weight:var(--cui-form-label-font-weight) +} +.cui .form-group .form-group__text input, +.cui .form-group .form-group__text select, +.cui .form-group .form-group__text textarea { + font-weight:var(--cui-form-value-font-weight); + color:var(--cui-form-value-color); + flex:1; + flex-shrink:0; + order:3; + background:var(--cui-form-background); + border:var(--cui-border); + border-radius:var(--cui-border-radius); + box-shadow:none; + -moz-appearance:none; + -webkit-appearance:none +} +.cui .form-group .form-group__text input.focus, +.cui .form-group .form-group__text input.hover, +.cui .form-group .form-group__text input:focus, +.cui .form-group .form-group__text input:hover, +.cui .form-group .form-group__text select.focus, +.cui .form-group .form-group__text select.hover, +.cui .form-group .form-group__text select:focus, +.cui .form-group .form-group__text select:hover, +.cui .form-group .form-group__text textarea.focus, +.cui .form-group .form-group__text textarea.hover, +.cui .form-group .form-group__text textarea:focus, +.cui .form-group .form-group__text textarea:hover { + border-color:var(--cui-accent-color) +} +.cui .form-group .form-group__text input.focus~button.link, +.cui .form-group .form-group__text input.hover~button.link, +.cui .form-group .form-group__text input:focus~button.link, +.cui .form-group .form-group__text input:hover~button.link, +.cui .form-group .form-group__text select.focus~button.link, +.cui .form-group .form-group__text select.hover~button.link, +.cui .form-group .form-group__text select:focus~button.link, +.cui .form-group .form-group__text select:hover~button.link, +.cui .form-group .form-group__text textarea.focus~button.link, +.cui .form-group .form-group__text textarea.hover~button.link, +.cui .form-group .form-group__text textarea:focus~button.link, +.cui .form-group .form-group__text textarea:hover~button.link { + color:var(--cui-accent-color) +} +.cui .form-group .form-group__text input.focus, +.cui .form-group .form-group__text input:focus, +.cui .form-group .form-group__text select.focus, +.cui .form-group .form-group__text select:focus, +.cui .form-group .form-group__text textarea.focus, +.cui .form-group .form-group__text textarea:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-focus-color),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .form-group .form-group__text input.disabled~label, +.cui .form-group .form-group__text input[disabled]~label, +.cui .form-group .form-group__text select.disabled~label, +.cui .form-group .form-group__text select[disabled]~label, +.cui .form-group .form-group__text textarea.disabled~label, +.cui .form-group .form-group__text textarea[disabled]~label { + opacity:.5; + cursor:not-allowed!important; + pointer-events:none!important; + z-index:0!important +} +.cui .form-group .form-group__text input[type=password] { + font:caption; + font-size:var(--cui-font-size-lg) +} +.cui .form-group .form-group__text input.form-group--plaintext { + border-color:transparent; + background-color:transparent; + padding-left:0 +} +.cui .form-group .form-group__text input.form-group--plaintext:focus, +.cui .form-group .form-group__text input.form-group--plaintext:hover { + border-color:transparent; + box-shadow:none +} +.cui .form-group .form-group__text input.form-group--plaintext.readonly, +.cui .form-group .form-group__text input.form-group--plaintext[readonly] { + background-color:transparent; + color:var(--cui-font-color) +} +.cui .form-group .form-group__text.form-group--error .form-group__text input, +.cui .form-group .form-group__text.form-group--error .form-group__text input .focus, +.cui .form-group .form-group__text.form-group--error .form-group__text input.hover, +.cui .form-group .form-group__text.form-group--error .form-group__text input:focus, +.cui .form-group .form-group__text.form-group--error .form-group__text input:hover, +.cui .form-group .form-group__text.form-group--error .form-group__text select, +.cui .form-group .form-group__text.form-group--error .form-group__text select .focus, +.cui .form-group .form-group__text.form-group--error .form-group__text select.hover, +.cui .form-group .form-group__text.form-group--error .form-group__text select:focus, +.cui .form-group .form-group__text.form-group--error .form-group__text select:hover, +.cui .form-group .form-group__text.form-group--error .form-group__text textarea, +.cui .form-group .form-group__text.form-group--error .form-group__text textarea .focus, +.cui .form-group .form-group__text.form-group--error .form-group__text textarea.hover, +.cui .form-group .form-group__text.form-group--error .form-group__text textarea:focus, +.cui .form-group .form-group__text.form-group--error .form-group__text textarea:hover { + border-color:var(--cui-theme-danger) +} +.cui .accordion.accordion--bordered .accordion__title, +.cui .dropdown .dropdown__menu .dropdown__group { + border-bottom:var(--cui-border) +} +.cui .form-group .form-group__text.form-group--error .form-group__text input .focus~button.link, +.cui .form-group .form-group__text.form-group--error .form-group__text input.hover~button.link, +.cui .form-group .form-group__text.form-group--error .form-group__text input:focus~button.link, +.cui .form-group .form-group__text.form-group--error .form-group__text input:hover~button.link, +.cui .form-group .form-group__text.form-group--error .form-group__text select .focus~button.link, +.cui .form-group .form-group__text.form-group--error .form-group__text select.hover~button.link, +.cui .form-group .form-group__text.form-group--error .form-group__text select:focus~button.link, +.cui .form-group .form-group__text.form-group--error .form-group__text select:hover~button.link, +.cui .form-group .form-group__text.form-group--error .form-group__text textarea .focus~button.link, +.cui .form-group .form-group__text.form-group--error .form-group__text textarea.hover~button.link, +.cui .form-group .form-group__text.form-group--error .form-group__text textarea:focus~button.link, +.cui .form-group .form-group__text.form-group--error .form-group__text textarea:hover~button.link { + color:var(--cui-theme-danger) +} +.cui .form-group .form-group__text.form-group--error .form-group__text input .focus, +.cui .form-group .form-group__text.form-group--error .form-group__text input:focus, +.cui .form-group .form-group__text.form-group--error .form-group__text select .focus, +.cui .form-group .form-group__text.form-group--error .form-group__text select:focus, +.cui .form-group .form-group__text.form-group--error .form-group__text textarea .focus, +.cui .form-group .form-group__text.form-group--error .form-group__text textarea:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-theme-danger-rgb),var(--cui-focus-opacity)); + opacity:1; + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .form-group .form-group__text.form-group--icon .form-group__text input, +.cui .form-group .form-group__text.input--icon .form-group__text input { + padding-left:var(--cui-form-size) +} +.cui .form-group .form-group__text.form-group--icon .form-group__text input+button, +.cui .form-group .form-group__text.form-group--icon .form-group__text label+button, +.cui .form-group .form-group__text.input--icon .form-group__text input+button, +.cui .form-group .form-group__text.input--icon .form-group__text label+button { + font-size:var(--cui-form-icon-size); + position:absolute; + display:inline-flex; + height:var(--cui-form-size); + width:var(--cui-form-size); + align-items:center; + justify-content:center; + bottom:0; + padding:0; + margin:0 +} +.cui .form-group .form-group__text.form-group--icon .form-group__text input+button:active, +.cui .form-group .form-group__text.form-group--icon .form-group__text input+button:focus, +.cui .form-group .form-group__text.form-group--icon .form-group__text input+button:hover, +.cui .form-group .form-group__text.form-group--icon .form-group__text label+button:active, +.cui .form-group .form-group__text.form-group--icon .form-group__text label+button:focus, +.cui .form-group .form-group__text.form-group--icon .form-group__text label+button:hover, +.cui .form-group .form-group__text.input--icon .form-group__text input+button:active, +.cui .form-group .form-group__text.input--icon .form-group__text input+button:focus, +.cui .form-group .form-group__text.input--icon .form-group__text input+button:hover, +.cui .form-group .form-group__text.input--icon .form-group__text label+button:active, +.cui .form-group .form-group__text.input--icon .form-group__text label+button:focus, +.cui .form-group .form-group__text.input--icon .form-group__text label+button:hover { + color:var(--cui-link-color); + text-decoration:none +} +.cui .accordion { + list-style:none; + padding:0 +} +.cui .accordion>li { + display:flex; + flex-direction:column +} +.cui .accordion>li>a { + text-decoration:none +} +.cui .accordion>li.active .accordion__title { + color:var(--cui-active-color) +} +.cui .accordion>li.active .accordion__title .accordion__toggle { + transition:transform var(--cui-animate-speed) var(--cui-animate-timing-function); + transform:rotate(180deg) +} +.cui .accordion>li.active .accordion__content { + max-height:80em; + opacity:1; + transition:visibility 0s var(--cui-animate-timing-function),max-height 2s var(--cui-animate-timing-function),opacity 2s var(--cui-animate-timing-function); + transition-delay:0s; + visibility:visible +} +.cui .accordion>li a.accordion__title { + display:inline-flex; + justify-content:space-between; + color:var(--cui-inactive-color); + padding:var(--cui-spacing-qtr) 0 +} +.cui .accordion>li a.accordion__title:focus, +.cui .accordion>li a.accordion__title:hover { + text-decoration:none; + color:var(--cui-active-color) +} +.cui .accordion>li a.accordion__title .accordion__toggle { + align-self:center; + justify-content:flex-end; + transform:rotate(0); + transition:transform var(--cui-animate-speed) var(--cui-animate-timing-function) +} +.cui .accordion>li .accordion__content { + max-height:0; + margin-top:var(--cui-spacing-half); + opacity:0; + overflow:hidden; + visibility:hidden; + transition:visibility 2s var(--cui-animate-timing-function),max-height .5s var(--cui-animate-timing-function),opacity 1s var(--cui-animate-timing-function) +} +.cui .alert { + --cui-alert-background-opacity:.1; + --cui-alert-close-icon-size:var(--cui-icon-size); + --cui-alert-icon-size:calc(var(--cui-icon-size) * 1.5); + --cui-alert-margin:var(--cui-spacing-half) 0 var(--cui-spacing) 0; + --cui-alert-padding:var(--cui-spacing); + display:flex; + position:relative; + border-radius:var(--cui-border-radius); + margin:var(--cui-alert-margin); + padding:var(--cui-alert-padding); + background-color:rgba(var(--cui-theme-info-rgb),var(--cui-alert-background-opacity)); + border-left:var(--cui-accent-thickness) solid rgba(var(--cui-theme-info-rgb),1) +} +.cui .alert .alert__icon { + color:rgba(var(--cui-theme-info-rgb),1) +} +.cui .alert.alert--success { + background-color:rgba(var(--cui-theme-success-rgb),var(--cui-alert-background-opacity)); + border-left:var(--cui-accent-thickness) solid rgba(var(--cui-theme-success-rgb),1) +} +.cui .alert.alert--success .alert__icon { + color:rgba(var(--cui-theme-success-rgb),1) +} +.cui .alert.alert--info { + background-color:rgba(var(--cui-theme-info-rgb),var(--cui-alert-background-opacity)); + border-left:var(--cui-accent-thickness) solid rgba(var(--cui-theme-info-rgb),1) +} +.cui .alert.alert--info .alert__icon { + color:rgba(var(--cui-theme-info-rgb),1) +} +.cui .alert.alert--warning-alt { + background-color:rgba(var(--cui-theme-warning-alt-rgb),var(--cui-alert-background-opacity)); + border-left:var(--cui-accent-thickness) solid rgba(var(--cui-theme-warning-alt-rgb),1) +} +.cui .alert.alert--warning-alt .alert__icon { + color:rgba(var(--cui-theme-warning-alt-rgb),1) +} +.cui .alert.alert--warning { + background-color:rgba(var(--cui-theme-warning-rgb),var(--cui-alert-background-opacity)); + border-left:var(--cui-accent-thickness) solid rgba(var(--cui-theme-warning-rgb),1) +} +.cui .alert.alert--warning .alert__icon { + color:rgba(var(--cui-theme-warning-rgb),1) +} +.cui .alert.alert--danger { + background-color:rgba(var(--cui-theme-danger-rgb),var(--cui-alert-background-opacity)); + border-left:var(--cui-accent-thickness) solid rgba(var(--cui-theme-danger-rgb),1) +} +.cui .alert.alert--danger .alert__icon { + color:rgba(var(--cui-theme-danger-rgb),1) +} +.cui .alert.alert--dark { + background-color:rgba(var(--cui-theme-dark-rgb),var(--cui-alert-background-opacity)); + border-left:var(--cui-accent-thickness) solid rgba(var(--cui-theme-dark-rgb),1) +} +.cui .alert.alert--dark .alert__icon { + color:rgba(var(--cui-theme-dark-rgb),1) +} +.cui .alert.alert--light { + background-color:rgba(var(--cui-theme-light-rgb),var(--cui-alert-background-opacity)); + border-left:var(--cui-accent-thickness) solid rgba(var(--cui-theme-light-rgb),1) +} +.cui .alert.alert--light .alert__icon { + color:rgba(var(--cui-theme-light-rgb),1) +} +.cui .alert .alert__close, +.cui .alert .alert__icon, +.cui .alert .alert__message { + align-self:flex-start +} +.cui .alert .alert__close { + color:var(--cui-inactive-color); + font-size:var(--cui-alert-close-icon-size); + line-height:1; + padding-left:var(--cui-alert-padding) +} +.cui .alert .alert__close:hover { + color:var(--cui-active-color); + text-decoration:none +} +.cui .badge, +.cui .badge.badge--primary { + background-color:var(--cui-theme-primary); + color:var(--cui-theme-primary-color) +} +.cui .alert .alert__icon { + font-size:var(--cui-alert-icon-size); + line-height:1; + padding-right:var(--cui-alert-padding) +} +.cui .badge-wrapper { + position:relative; + display:inline-block +} +.cui .badge-wrapper .badge { + position:absolute; + right:10%; + top:5%; + transform:translate(50%,-50%) +} +.cui .badge { + --cui-badge-border-color:var(--cui-background-color); + --cui-badge-border-radius:var(--cui-border-radius-round); + --cui-badge-border-width:3px; + --cui-badge-default-size:20px; + --cui-badge-default-font-size:var(--cui-font-size-sm); + --cui-badge-font-weight:var(--cui-font-weight); + --cui-badge-max-width:calc(var(--cui-badge-default-size) * 2); + --cui-badge-padding:0 3px; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; + border-radius:var(--cui-badge-border-radius); + box-shadow:0 0 0 var(--cui-badge-border-width) var(--cui-badge-border-color); + display:inline-block; + font-weight:var(--cui-badge-font-weight); + padding:var(--cui-badge-padding); + text-align:center; + vertical-align:middle; + width:auto; + z-index:10; + min-width:var(--cui-badge-default-size); + font-size:var(--cui-badge-default-font-size); + height:var(--cui-badge-default-size); + line-height:var(--cui-badge-default-size) +} +.cui .badge.badge--dot { + min-width:12px; + font-size:0; + height:12px; + line-height:1.2rem +} +.cui .badge.badge--tiny { + min-width:14px; + font-size:.9rem; + height:14px; + line-height:1.4rem +} +.cui .badge.badge--small { + min-width:16px; + font-size:var(--cui-font-size-xs); + height:16px; + line-height:1.6rem +} +.cui .badge.badge--medium { + min-width:var(--cui-badge-default-size); + font-size:var(--cui-badge-default-font-size); + height:var(--cui-badge-default-size); + line-height:var(--cui-badge-default-size) +} +.cui .badge.badge--large { + min-width:24px; + font-size:var(--cui-font-size); + height:24px; + line-height:2.4rem +} +.cui .badge.badge--secondary { + background-color:var(--cui-theme-secondary); + color:var(--cui-theme-secondary-color) +} +.cui .badge.badge--tertiary { + background-color:var(--cui-theme-tertiary); + color:var(--cui-theme-tertiary-color) +} +.cui .badge.badge--success { + background-color:var(--cui-theme-success); + color:var(--cui-theme-success-color) +} +.cui .badge.badge--info { + background-color:var(--cui-theme-info); + color:var(--cui-theme-info-color) +} +.cui .badge.badge--warning-alt { + background-color:var(--cui-theme-warning-alt); + color:var(--cui-theme-warning-alt-color) +} +.cui .badge.badge--warning { + background-color:var(--cui-theme-warning); + color:var(--cui-theme-warning-color) +} +.cui .badge.badge--danger { + background-color:var(--cui-theme-danger); + color:var(--cui-theme-danger-color) +} +.cui .badge.badge--dark { + background-color:var(--cui-theme-dark); + color:var(--cui-theme-dark-color) +} +.cui .badge.badge--light { + background-color:var(--cui-theme-light); + color:var(--cui-theme-light-color) +} +.cui .dropdown { + --cui-dropdown-zindex:900; + --cui-dropdown-background-color:var(--cui-background-color); + --cui-dropdown-icon-selected:var(--cui-accent-color); + --cui-dropdown-max-height:75vh; + --cui-dropdown-menu-min-width:200px; + --cui-dropdown-menu-item-height:35px; + --cui-dropdown-menu-item-padding:0 var(--cui-spacing-dbl) 0 var(--cui-spacing-half); + display:inline-flex; + position:relative; + cursor:pointer; + outline:0 +} +.cui .dropdown .dropdown__menu { + list-style:none; + display:inline-flex; + flex-direction:column; + opacity:0; + background:var(--cui-dropdown-background-color); + border:var(--cui-border); + border-top:var(--cui-accent-thickness) solid var(--cui-accent-color); + border-radius:var(--cui-border-radius); + color:var(--cui-font-color); + overflow:hidden auto; + position:absolute; + pointer-events:auto; + top:calc(100% + var(--cui-spacing-qtr)); + height:0; + min-width:var(--cui-dropdown-menu-min-width); + max-height:var(--cui-dropdown-max-height); + transition:opacity var(--cui-animate-speed); + text-align:left; + box-shadow:var(--cui-shadow-outset); + visibility:hidden; + user-select:none; + z-index:var(--cui-dropdown-zindex) +} +.cui .dropdown .dropdown__menu .dropdown__group>a { + padding-left:calc(var(--cui-spacing) + var(--cui-spacing-qtr)) +} +.cui .dropdown .dropdown__menu .divider, +.cui .dropdown .dropdown__menu .dropdown__divider { + height:1px; + overflow:hidden; + background-color:var(--cui-border-color) +} +.cui .dropdown .dropdown__menu .dropdown__group-header, +.cui .dropdown .dropdown__menu a { + height:var(--cui-dropdown-menu-item-height); + line-height:inherit; + display:inline-flex; + align-items:center; + width:100%; + position:relative; + overflow:hidden; + text-overflow:ellipsis; + text-decoration:none; + white-space:nowrap; + padding:var(--cui-dropdown-menu-item-padding) +} +.cui .dropdown .dropdown__menu .dropdown__group-header { + font-weight:400; + font-style:italic; + letter-spacing:.05rem; + pointer-events:none; + cursor:default +} +.cui .dropdown .dropdown__menu a { + color:var(--cui-inactive-color); + transition:color .5s var(--cui-animate-timing-function),background-color .25s var(--cui-animate-timing-function),box-shadow .5s var(--cui-animate-timing-function) +} +.cui .dropdown .dropdown__menu a:hover { + color:var(--cui-active-color) +} +.cui .dropdown .dropdown__menu a .checkbox { + margin-right:calc(var(--cui-spacing) * .5) +} +.cui .dropdown .dropdown__menu a:focus, +.cui .dropdown .dropdown__menu a:hover { + color:var(--cui-active-color); + background-color:var(--cui-background-hover); + text-decoration:none +} +.cui .dropdown .dropdown__menu a.selected { + color:var(--cui-active-color); + background-color:var(--cui-background-active) +} +.cui .dropdown .dropdown__menu a.selected:after { + color:var(--cui-dropdown-icon-selected); + position:absolute; + right:var(--cui-spacing-half); + font-weight:700 +} +.cui .dropdown.active>span[class^=icon-] { + color:var(--cui-link-color) +} +.cui .dropdown.active .dropdown__menu { + opacity:1; + visibility:visible; + height:auto; + border-top-left-radius:0; + border-top-right-radius:0; + transition:opacity var(--cui-animate-speed) +} +.cui .dropdown.active .dropdown__menu a { + z-index:calc(var(--cui-dropdown-zindex) + 1) +} +.cui .dropdown--tail .dropdown__menu:after { + content:''; + display:block; + width:calc(var(--cui-spacing) * .5); + height:calc(var(--cui-spacing) * .5); + margin:0; + position:absolute; + transform:rotate(45deg); + left:calc(var(--cui-spacing) * .5); + right:auto; + top:calc(calc(var(--cui-spacing) * .25) * -1); + box-shadow:-1px -1px 0 0 var(--cui-border-color); + background:var(--cui-dropdown-background-color) +} +.cui .dropdown--left .dropdown__menu { + right:0 +} +.cui .dropdown--left .dropdown__menu:after { + left:auto; + right:calc(var(--cui-spacing) * .5) +} +.cui .dropdown--center .dropdown__menu { + left:50% +} +.cui .dropdown--center .dropdown__menu:after { + left:0; + right:0; + margin:auto +} +.cui .dropdown.dropdown--up .dropdown__menu { + top:auto; + bottom:calc(100% + var(--cui-spacing-qtr)); + border:var(--cui-border); + border-bottom:var(--cui-accent-thickness) solid var(--cui-accent-color) +} +.cui .dropdown.dropdown--up.form-group.form-group--inline .form-group__text.select~.dropdown__menu { + bottom:calc(100% + var(--cui-spacing-qtr)) +} +.cui .dropdown.dropdown--up.form-group .form-group__text.select~.dropdown__menu { + bottom:calc(100% - var(--cui-spacing)) +} +.cui .dropdown.active.dropdown--center .dropdown__menu { + transform:translate(-50%,0) +} +.cui .dropdown .dropdown__menu, +.cui .dropdown .form-group, +.cui .form-group.dropdown .dropdown__menu { + width:100% +} +.cui .dropdown.active .btn:after, +.cui .dropdown.active>a:after { + transition:transform var(--cui-animate-speed) var(--cui-animate-timing-function); + transform:rotate(180deg) +} +.cui .dropdown .btn, +.cui .dropdown>a { + text-decoration:none +} +.cui .dropdown .btn:after, +.cui .dropdown>a:after { + transform:rotate(0); + transition:transform var(--cui-animate-speed) var(--cui-animate-timing-function); + content:''; + width:0; + height:0; + display:inline-flex; + align-items:center; + position:relative; + opacity:1; + border-radius:2px; + margin-bottom:2px; + border-left:5px solid transparent; + border-right:5px solid transparent; + border-top:5px solid var(--cui-font-color); + align-self:center; + margin-left:var(--cui-spacing-qtr); + color:inherit; + text-decoration:none +} +.cui .gauge, +.cui .gauge.gauge--small { + display:inline-block; + position:relative +} +.cui .dropdown .btn:active, +.cui .dropdown .btn:focus, +.cui .dropdown .btn:hover, +.cui .dropdown>a:active, +.cui .dropdown>a:focus, +.cui .dropdown>a:hover { + text-decoration:none +} +.cui .gauge { + --cui-gauge-background:var(--cui-background-color); + --cui-gauge-inset-border:2px solid var(--cui-background-color); + --cui-gauge-inset-shadow:inset 0 0 0 1px var(--cui-border-color); + width:100px; + height:100px; + background-color:var(--cui-gauge-background); + border-radius:50% +} +.cui .gauge.gauge--small { + width:50px; + height:50px; + background-color:var(--cui-gauge-background); + border-radius:50% +} +.cui .gauge .gauge__inset, +.cui .gauge.gauge--small .gauge__inset { + display:flex; + align-items:center; + margin-left:3px; + margin-top:3px; + box-shadow:var(--cui-gauge-inset-shadow); + background-color:var(--cui-gauge-background) +} +.cui .gauge.gauge--small .gauge__circle .fill, +.cui .gauge.gauge--small .gauge__circle .mask, +.cui .gauge.gauge--small .gauge__circle .shadow { + width:50px; + height:50px; + position:absolute; + border-radius:50% +} +.cui .gauge.gauge--small .gauge__circle .fill, +.cui .gauge.gauge--small .gauge__circle .mask { + -webkit-backface-visibility:hidden; + transition:transform 1s; + border-radius:50% +} +.cui .gauge.gauge--small .gauge__circle .mask { + clip:rect(0,50px,50px,25px) +} +.cui .gauge.gauge--small .gauge__circle .mask .fill { + clip:rect(0,25px,50px,0) +} +.cui .gauge.gauge--small .gauge__inset { + justify-content:center; + width:44px; + height:44px; + position:absolute; + border-radius:50%; + border:var(--cui-gauge-inset-border) +} +.cui .gauge.gauge--small .gauge__inset .gauge__percentage { + font-size:1.5rem; + font-weight:200 +} +.cui .gauge.gauge--small[data-percentage="1"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="1"] .gauge__circle .mask.full { + transform:rotate(1.8deg) +} +.cui .gauge.gauge--small[data-percentage="1"] .gauge__circle .fill.fix, +.cui .gauge.gauge--small[data-percentage="2"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="2"] .gauge__circle .mask.full { + transform:rotate(3.6deg) +} +.cui .gauge.gauge--small[data-percentage="2"] .gauge__circle .fill.fix { + transform:rotate(7.2deg) +} +.cui .gauge.gauge--small[data-percentage="3"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="3"] .gauge__circle .mask.full { + transform:rotate(5.4deg) +} +.cui .gauge.gauge--small[data-percentage="3"] .gauge__circle .fill.fix { + transform:rotate(10.8deg) +} +.cui .gauge.gauge--small[data-percentage="4"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="4"] .gauge__circle .mask.full { + transform:rotate(7.2deg) +} +.cui .gauge.gauge--small[data-percentage="4"] .gauge__circle .fill.fix { + transform:rotate(14.4deg) +} +.cui .gauge.gauge--small[data-percentage="5"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="5"] .gauge__circle .mask.full { + transform:rotate(9deg) +} +.cui .gauge.gauge--small[data-percentage="5"] .gauge__circle .fill.fix { + transform:rotate(18deg) +} +.cui .gauge.gauge--small[data-percentage="6"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="6"] .gauge__circle .mask.full { + transform:rotate(10.8deg) +} +.cui .gauge.gauge--small[data-percentage="6"] .gauge__circle .fill.fix { + transform:rotate(21.6deg) +} +.cui .gauge.gauge--small[data-percentage="7"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="7"] .gauge__circle .mask.full { + transform:rotate(12.6deg) +} +.cui .gauge.gauge--small[data-percentage="7"] .gauge__circle .fill.fix { + transform:rotate(25.2deg) +} +.cui .gauge.gauge--small[data-percentage="8"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="8"] .gauge__circle .mask.full { + transform:rotate(14.4deg) +} +.cui .gauge.gauge--small[data-percentage="8"] .gauge__circle .fill.fix { + transform:rotate(28.8deg) +} +.cui .gauge.gauge--small[data-percentage="9"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="9"] .gauge__circle .mask.full { + transform:rotate(16.2deg) +} +.cui .gauge.gauge--small[data-percentage="9"] .gauge__circle .fill.fix { + transform:rotate(32.4deg) +} +.cui .gauge.gauge--small[data-percentage="10"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="10"] .gauge__circle .mask.full { + transform:rotate(18deg) +} +.cui .gauge.gauge--small[data-percentage="10"] .gauge__circle .fill.fix { + transform:rotate(36deg) +} +.cui .gauge.gauge--small[data-percentage="11"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="11"] .gauge__circle .mask.full { + transform:rotate(19.8deg) +} +.cui .gauge.gauge--small[data-percentage="11"] .gauge__circle .fill.fix { + transform:rotate(39.6deg) +} +.cui .gauge.gauge--small[data-percentage="12"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="12"] .gauge__circle .mask.full { + transform:rotate(21.6deg) +} +.cui .gauge.gauge--small[data-percentage="12"] .gauge__circle .fill.fix { + transform:rotate(43.2deg) +} +.cui .gauge.gauge--small[data-percentage="13"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="13"] .gauge__circle .mask.full { + transform:rotate(23.4deg) +} +.cui .gauge.gauge--small[data-percentage="13"] .gauge__circle .fill.fix { + transform:rotate(46.8deg) +} +.cui .gauge.gauge--small[data-percentage="14"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="14"] .gauge__circle .mask.full { + transform:rotate(25.2deg) +} +.cui .gauge.gauge--small[data-percentage="14"] .gauge__circle .fill.fix { + transform:rotate(50.4deg) +} +.cui .gauge.gauge--small[data-percentage="15"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="15"] .gauge__circle .mask.full { + transform:rotate(27deg) +} +.cui .gauge.gauge--small[data-percentage="15"] .gauge__circle .fill.fix { + transform:rotate(54deg) +} +.cui .gauge.gauge--small[data-percentage="16"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="16"] .gauge__circle .mask.full { + transform:rotate(28.8deg) +} +.cui .gauge.gauge--small[data-percentage="16"] .gauge__circle .fill.fix { + transform:rotate(57.6deg) +} +.cui .gauge.gauge--small[data-percentage="17"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="17"] .gauge__circle .mask.full { + transform:rotate(30.6deg) +} +.cui .gauge.gauge--small[data-percentage="17"] .gauge__circle .fill.fix { + transform:rotate(61.2deg) +} +.cui .gauge.gauge--small[data-percentage="18"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="18"] .gauge__circle .mask.full { + transform:rotate(32.4deg) +} +.cui .gauge.gauge--small[data-percentage="18"] .gauge__circle .fill.fix { + transform:rotate(64.8deg) +} +.cui .gauge.gauge--small[data-percentage="19"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="19"] .gauge__circle .mask.full { + transform:rotate(34.2deg) +} +.cui .gauge.gauge--small[data-percentage="19"] .gauge__circle .fill.fix { + transform:rotate(68.4deg) +} +.cui .gauge.gauge--small[data-percentage="20"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="20"] .gauge__circle .mask.full { + transform:rotate(36deg) +} +.cui .gauge.gauge--small[data-percentage="20"] .gauge__circle .fill.fix { + transform:rotate(72deg) +} +.cui .gauge.gauge--small[data-percentage="21"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="21"] .gauge__circle .mask.full { + transform:rotate(37.8deg) +} +.cui .gauge.gauge--small[data-percentage="21"] .gauge__circle .fill.fix { + transform:rotate(75.6deg) +} +.cui .gauge.gauge--small[data-percentage="22"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="22"] .gauge__circle .mask.full { + transform:rotate(39.6deg) +} +.cui .gauge.gauge--small[data-percentage="22"] .gauge__circle .fill.fix { + transform:rotate(79.2deg) +} +.cui .gauge.gauge--small[data-percentage="23"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="23"] .gauge__circle .mask.full { + transform:rotate(41.4deg) +} +.cui .gauge.gauge--small[data-percentage="23"] .gauge__circle .fill.fix { + transform:rotate(82.8deg) +} +.cui .gauge.gauge--small[data-percentage="24"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="24"] .gauge__circle .mask.full { + transform:rotate(43.2deg) +} +.cui .gauge.gauge--small[data-percentage="24"] .gauge__circle .fill.fix { + transform:rotate(86.4deg) +} +.cui .gauge.gauge--small[data-percentage="25"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="25"] .gauge__circle .mask.full { + transform:rotate(45deg) +} +.cui .gauge.gauge--small[data-percentage="25"] .gauge__circle .fill.fix { + transform:rotate(90deg) +} +.cui .gauge.gauge--small[data-percentage="26"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="26"] .gauge__circle .mask.full { + transform:rotate(46.8deg) +} +.cui .gauge.gauge--small[data-percentage="26"] .gauge__circle .fill.fix { + transform:rotate(93.6deg) +} +.cui .gauge.gauge--small[data-percentage="27"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="27"] .gauge__circle .mask.full { + transform:rotate(48.6deg) +} +.cui .gauge.gauge--small[data-percentage="27"] .gauge__circle .fill.fix { + transform:rotate(97.2deg) +} +.cui .gauge.gauge--small[data-percentage="28"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="28"] .gauge__circle .mask.full { + transform:rotate(50.4deg) +} +.cui .gauge.gauge--small[data-percentage="28"] .gauge__circle .fill.fix { + transform:rotate(100.8deg) +} +.cui .gauge.gauge--small[data-percentage="29"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="29"] .gauge__circle .mask.full { + transform:rotate(52.2deg) +} +.cui .gauge.gauge--small[data-percentage="29"] .gauge__circle .fill.fix { + transform:rotate(104.4deg) +} +.cui .gauge.gauge--small[data-percentage="30"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="30"] .gauge__circle .mask.full { + transform:rotate(54deg) +} +.cui .gauge.gauge--small[data-percentage="30"] .gauge__circle .fill.fix { + transform:rotate(108deg) +} +.cui .gauge.gauge--small[data-percentage="31"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="31"] .gauge__circle .mask.full { + transform:rotate(55.8deg) +} +.cui .gauge.gauge--small[data-percentage="31"] .gauge__circle .fill.fix { + transform:rotate(111.6deg) +} +.cui .gauge.gauge--small[data-percentage="32"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="32"] .gauge__circle .mask.full { + transform:rotate(57.6deg) +} +.cui .gauge.gauge--small[data-percentage="32"] .gauge__circle .fill.fix { + transform:rotate(115.2deg) +} +.cui .gauge.gauge--small[data-percentage="33"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="33"] .gauge__circle .mask.full { + transform:rotate(59.4deg) +} +.cui .gauge.gauge--small[data-percentage="33"] .gauge__circle .fill.fix { + transform:rotate(118.8deg) +} +.cui .gauge.gauge--small[data-percentage="34"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="34"] .gauge__circle .mask.full { + transform:rotate(61.2deg) +} +.cui .gauge.gauge--small[data-percentage="34"] .gauge__circle .fill.fix { + transform:rotate(122.4deg) +} +.cui .gauge.gauge--small[data-percentage="35"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="35"] .gauge__circle .mask.full { + transform:rotate(63deg) +} +.cui .gauge.gauge--small[data-percentage="35"] .gauge__circle .fill.fix { + transform:rotate(126deg) +} +.cui .gauge.gauge--small[data-percentage="36"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="36"] .gauge__circle .mask.full { + transform:rotate(64.8deg) +} +.cui .gauge.gauge--small[data-percentage="36"] .gauge__circle .fill.fix { + transform:rotate(129.6deg) +} +.cui .gauge.gauge--small[data-percentage="37"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="37"] .gauge__circle .mask.full { + transform:rotate(66.6deg) +} +.cui .gauge.gauge--small[data-percentage="37"] .gauge__circle .fill.fix { + transform:rotate(133.2deg) +} +.cui .gauge.gauge--small[data-percentage="38"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="38"] .gauge__circle .mask.full { + transform:rotate(68.4deg) +} +.cui .gauge.gauge--small[data-percentage="38"] .gauge__circle .fill.fix { + transform:rotate(136.8deg) +} +.cui .gauge.gauge--small[data-percentage="39"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="39"] .gauge__circle .mask.full { + transform:rotate(70.2deg) +} +.cui .gauge.gauge--small[data-percentage="39"] .gauge__circle .fill.fix { + transform:rotate(140.4deg) +} +.cui .gauge.gauge--small[data-percentage="40"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="40"] .gauge__circle .mask.full { + transform:rotate(72deg) +} +.cui .gauge.gauge--small[data-percentage="40"] .gauge__circle .fill.fix { + transform:rotate(144deg) +} +.cui .gauge.gauge--small[data-percentage="41"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="41"] .gauge__circle .mask.full { + transform:rotate(73.8deg) +} +.cui .gauge.gauge--small[data-percentage="41"] .gauge__circle .fill.fix { + transform:rotate(147.6deg) +} +.cui .gauge.gauge--small[data-percentage="42"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="42"] .gauge__circle .mask.full { + transform:rotate(75.6deg) +} +.cui .gauge.gauge--small[data-percentage="42"] .gauge__circle .fill.fix { + transform:rotate(151.2deg) +} +.cui .gauge.gauge--small[data-percentage="43"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="43"] .gauge__circle .mask.full { + transform:rotate(77.4deg) +} +.cui .gauge.gauge--small[data-percentage="43"] .gauge__circle .fill.fix { + transform:rotate(154.8deg) +} +.cui .gauge.gauge--small[data-percentage="44"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="44"] .gauge__circle .mask.full { + transform:rotate(79.2deg) +} +.cui .gauge.gauge--small[data-percentage="44"] .gauge__circle .fill.fix { + transform:rotate(158.4deg) +} +.cui .gauge.gauge--small[data-percentage="45"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="45"] .gauge__circle .mask.full { + transform:rotate(81deg) +} +.cui .gauge.gauge--small[data-percentage="45"] .gauge__circle .fill.fix { + transform:rotate(162deg) +} +.cui .gauge.gauge--small[data-percentage="46"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="46"] .gauge__circle .mask.full { + transform:rotate(82.8deg) +} +.cui .gauge.gauge--small[data-percentage="46"] .gauge__circle .fill.fix { + transform:rotate(165.6deg) +} +.cui .gauge.gauge--small[data-percentage="47"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="47"] .gauge__circle .mask.full { + transform:rotate(84.6deg) +} +.cui .gauge.gauge--small[data-percentage="47"] .gauge__circle .fill.fix { + transform:rotate(169.2deg) +} +.cui .gauge.gauge--small[data-percentage="48"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="48"] .gauge__circle .mask.full { + transform:rotate(86.4deg) +} +.cui .gauge.gauge--small[data-percentage="48"] .gauge__circle .fill.fix { + transform:rotate(172.8deg) +} +.cui .gauge.gauge--small[data-percentage="49"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="49"] .gauge__circle .mask.full { + transform:rotate(88.2deg) +} +.cui .gauge.gauge--small[data-percentage="49"] .gauge__circle .fill.fix { + transform:rotate(176.4deg) +} +.cui .gauge.gauge--small[data-percentage="50"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="50"] .gauge__circle .mask.full { + transform:rotate(90deg) +} +.cui .gauge.gauge--small[data-percentage="50"] .gauge__circle .fill.fix { + transform:rotate(180deg) +} +.cui .gauge.gauge--small[data-percentage="51"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="51"] .gauge__circle .mask.full { + transform:rotate(91.8deg) +} +.cui .gauge.gauge--small[data-percentage="51"] .gauge__circle .fill.fix { + transform:rotate(183.6deg) +} +.cui .gauge.gauge--small[data-percentage="52"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="52"] .gauge__circle .mask.full { + transform:rotate(93.6deg) +} +.cui .gauge.gauge--small[data-percentage="52"] .gauge__circle .fill.fix { + transform:rotate(187.2deg) +} +.cui .gauge.gauge--small[data-percentage="53"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="53"] .gauge__circle .mask.full { + transform:rotate(95.4deg) +} +.cui .gauge.gauge--small[data-percentage="53"] .gauge__circle .fill.fix { + transform:rotate(190.8deg) +} +.cui .gauge.gauge--small[data-percentage="54"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="54"] .gauge__circle .mask.full { + transform:rotate(97.2deg) +} +.cui .gauge.gauge--small[data-percentage="54"] .gauge__circle .fill.fix { + transform:rotate(194.4deg) +} +.cui .gauge.gauge--small[data-percentage="55"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="55"] .gauge__circle .mask.full { + transform:rotate(99deg) +} +.cui .gauge.gauge--small[data-percentage="55"] .gauge__circle .fill.fix { + transform:rotate(198deg) +} +.cui .gauge.gauge--small[data-percentage="56"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="56"] .gauge__circle .mask.full { + transform:rotate(100.8deg) +} +.cui .gauge.gauge--small[data-percentage="56"] .gauge__circle .fill.fix { + transform:rotate(201.6deg) +} +.cui .gauge.gauge--small[data-percentage="57"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="57"] .gauge__circle .mask.full { + transform:rotate(102.6deg) +} +.cui .gauge.gauge--small[data-percentage="57"] .gauge__circle .fill.fix { + transform:rotate(205.2deg) +} +.cui .gauge.gauge--small[data-percentage="58"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="58"] .gauge__circle .mask.full { + transform:rotate(104.4deg) +} +.cui .gauge.gauge--small[data-percentage="58"] .gauge__circle .fill.fix { + transform:rotate(208.8deg) +} +.cui .gauge.gauge--small[data-percentage="59"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="59"] .gauge__circle .mask.full { + transform:rotate(106.2deg) +} +.cui .gauge.gauge--small[data-percentage="59"] .gauge__circle .fill.fix { + transform:rotate(212.4deg) +} +.cui .gauge.gauge--small[data-percentage="60"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="60"] .gauge__circle .mask.full { + transform:rotate(108deg) +} +.cui .gauge.gauge--small[data-percentage="60"] .gauge__circle .fill.fix { + transform:rotate(216deg) +} +.cui .gauge.gauge--small[data-percentage="61"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="61"] .gauge__circle .mask.full { + transform:rotate(109.8deg) +} +.cui .gauge.gauge--small[data-percentage="61"] .gauge__circle .fill.fix { + transform:rotate(219.6deg) +} +.cui .gauge.gauge--small[data-percentage="62"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="62"] .gauge__circle .mask.full { + transform:rotate(111.6deg) +} +.cui .gauge.gauge--small[data-percentage="62"] .gauge__circle .fill.fix { + transform:rotate(223.2deg) +} +.cui .gauge.gauge--small[data-percentage="63"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="63"] .gauge__circle .mask.full { + transform:rotate(113.4deg) +} +.cui .gauge.gauge--small[data-percentage="63"] .gauge__circle .fill.fix { + transform:rotate(226.8deg) +} +.cui .gauge.gauge--small[data-percentage="64"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="64"] .gauge__circle .mask.full { + transform:rotate(115.2deg) +} +.cui .gauge.gauge--small[data-percentage="64"] .gauge__circle .fill.fix { + transform:rotate(230.4deg) +} +.cui .gauge.gauge--small[data-percentage="65"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="65"] .gauge__circle .mask.full { + transform:rotate(117deg) +} +.cui .gauge.gauge--small[data-percentage="65"] .gauge__circle .fill.fix { + transform:rotate(234deg) +} +.cui .gauge.gauge--small[data-percentage="66"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="66"] .gauge__circle .mask.full { + transform:rotate(118.8deg) +} +.cui .gauge.gauge--small[data-percentage="66"] .gauge__circle .fill.fix { + transform:rotate(237.6deg) +} +.cui .gauge.gauge--small[data-percentage="67"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="67"] .gauge__circle .mask.full { + transform:rotate(120.6deg) +} +.cui .gauge.gauge--small[data-percentage="67"] .gauge__circle .fill.fix { + transform:rotate(241.2deg) +} +.cui .gauge.gauge--small[data-percentage="68"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="68"] .gauge__circle .mask.full { + transform:rotate(122.4deg) +} +.cui .gauge.gauge--small[data-percentage="68"] .gauge__circle .fill.fix { + transform:rotate(244.8deg) +} +.cui .gauge.gauge--small[data-percentage="69"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="69"] .gauge__circle .mask.full { + transform:rotate(124.2deg) +} +.cui .gauge.gauge--small[data-percentage="69"] .gauge__circle .fill.fix { + transform:rotate(248.4deg) +} +.cui .gauge.gauge--small[data-percentage="70"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="70"] .gauge__circle .mask.full { + transform:rotate(126deg) +} +.cui .gauge.gauge--small[data-percentage="70"] .gauge__circle .fill.fix { + transform:rotate(252deg) +} +.cui .gauge.gauge--small[data-percentage="71"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="71"] .gauge__circle .mask.full { + transform:rotate(127.8deg) +} +.cui .gauge.gauge--small[data-percentage="71"] .gauge__circle .fill.fix { + transform:rotate(255.6deg) +} +.cui .gauge.gauge--small[data-percentage="72"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="72"] .gauge__circle .mask.full { + transform:rotate(129.6deg) +} +.cui .gauge.gauge--small[data-percentage="72"] .gauge__circle .fill.fix { + transform:rotate(259.2deg) +} +.cui .gauge.gauge--small[data-percentage="73"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="73"] .gauge__circle .mask.full { + transform:rotate(131.4deg) +} +.cui .gauge.gauge--small[data-percentage="73"] .gauge__circle .fill.fix { + transform:rotate(262.8deg) +} +.cui .gauge.gauge--small[data-percentage="74"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="74"] .gauge__circle .mask.full { + transform:rotate(133.2deg) +} +.cui .gauge.gauge--small[data-percentage="74"] .gauge__circle .fill.fix { + transform:rotate(266.4deg) +} +.cui .gauge.gauge--small[data-percentage="75"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="75"] .gauge__circle .mask.full { + transform:rotate(135deg) +} +.cui .gauge.gauge--small[data-percentage="75"] .gauge__circle .fill.fix { + transform:rotate(270deg) +} +.cui .gauge.gauge--small[data-percentage="76"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="76"] .gauge__circle .mask.full { + transform:rotate(136.8deg) +} +.cui .gauge.gauge--small[data-percentage="76"] .gauge__circle .fill.fix { + transform:rotate(273.6deg) +} +.cui .gauge.gauge--small[data-percentage="77"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="77"] .gauge__circle .mask.full { + transform:rotate(138.6deg) +} +.cui .gauge.gauge--small[data-percentage="77"] .gauge__circle .fill.fix { + transform:rotate(277.2deg) +} +.cui .gauge.gauge--small[data-percentage="78"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="78"] .gauge__circle .mask.full { + transform:rotate(140.4deg) +} +.cui .gauge.gauge--small[data-percentage="78"] .gauge__circle .fill.fix { + transform:rotate(280.8deg) +} +.cui .gauge.gauge--small[data-percentage="79"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="79"] .gauge__circle .mask.full { + transform:rotate(142.2deg) +} +.cui .gauge.gauge--small[data-percentage="79"] .gauge__circle .fill.fix { + transform:rotate(284.4deg) +} +.cui .gauge.gauge--small[data-percentage="80"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="80"] .gauge__circle .mask.full { + transform:rotate(144deg) +} +.cui .gauge.gauge--small[data-percentage="80"] .gauge__circle .fill.fix { + transform:rotate(288deg) +} +.cui .gauge.gauge--small[data-percentage="81"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="81"] .gauge__circle .mask.full { + transform:rotate(145.8deg) +} +.cui .gauge.gauge--small[data-percentage="81"] .gauge__circle .fill.fix { + transform:rotate(291.6deg) +} +.cui .gauge.gauge--small[data-percentage="82"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="82"] .gauge__circle .mask.full { + transform:rotate(147.6deg) +} +.cui .gauge.gauge--small[data-percentage="82"] .gauge__circle .fill.fix { + transform:rotate(295.2deg) +} +.cui .gauge.gauge--small[data-percentage="83"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="83"] .gauge__circle .mask.full { + transform:rotate(149.4deg) +} +.cui .gauge.gauge--small[data-percentage="83"] .gauge__circle .fill.fix { + transform:rotate(298.8deg) +} +.cui .gauge.gauge--small[data-percentage="84"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="84"] .gauge__circle .mask.full { + transform:rotate(151.2deg) +} +.cui .gauge.gauge--small[data-percentage="84"] .gauge__circle .fill.fix { + transform:rotate(302.4deg) +} +.cui .gauge.gauge--small[data-percentage="85"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="85"] .gauge__circle .mask.full { + transform:rotate(153deg) +} +.cui .gauge.gauge--small[data-percentage="85"] .gauge__circle .fill.fix { + transform:rotate(306deg) +} +.cui .gauge.gauge--small[data-percentage="86"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="86"] .gauge__circle .mask.full { + transform:rotate(154.8deg) +} +.cui .gauge.gauge--small[data-percentage="86"] .gauge__circle .fill.fix { + transform:rotate(309.6deg) +} +.cui .gauge.gauge--small[data-percentage="87"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="87"] .gauge__circle .mask.full { + transform:rotate(156.6deg) +} +.cui .gauge.gauge--small[data-percentage="87"] .gauge__circle .fill.fix { + transform:rotate(313.2deg) +} +.cui .gauge.gauge--small[data-percentage="88"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="88"] .gauge__circle .mask.full { + transform:rotate(158.4deg) +} +.cui .gauge.gauge--small[data-percentage="88"] .gauge__circle .fill.fix { + transform:rotate(316.8deg) +} +.cui .gauge.gauge--small[data-percentage="89"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="89"] .gauge__circle .mask.full { + transform:rotate(160.2deg) +} +.cui .gauge.gauge--small[data-percentage="89"] .gauge__circle .fill.fix { + transform:rotate(320.4deg) +} +.cui .gauge.gauge--small[data-percentage="90"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="90"] .gauge__circle .mask.full { + transform:rotate(162deg) +} +.cui .gauge.gauge--small[data-percentage="90"] .gauge__circle .fill.fix { + transform:rotate(324deg) +} +.cui .gauge.gauge--small[data-percentage="91"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="91"] .gauge__circle .mask.full { + transform:rotate(163.8deg) +} +.cui .gauge.gauge--small[data-percentage="91"] .gauge__circle .fill.fix { + transform:rotate(327.6deg) +} +.cui .gauge.gauge--small[data-percentage="92"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="92"] .gauge__circle .mask.full { + transform:rotate(165.6deg) +} +.cui .gauge.gauge--small[data-percentage="92"] .gauge__circle .fill.fix { + transform:rotate(331.2deg) +} +.cui .gauge.gauge--small[data-percentage="93"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="93"] .gauge__circle .mask.full { + transform:rotate(167.4deg) +} +.cui .gauge.gauge--small[data-percentage="93"] .gauge__circle .fill.fix { + transform:rotate(334.8deg) +} +.cui .gauge.gauge--small[data-percentage="94"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="94"] .gauge__circle .mask.full { + transform:rotate(169.2deg) +} +.cui .gauge.gauge--small[data-percentage="94"] .gauge__circle .fill.fix { + transform:rotate(338.4deg) +} +.cui .gauge.gauge--small[data-percentage="95"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="95"] .gauge__circle .mask.full { + transform:rotate(171deg) +} +.cui .gauge.gauge--small[data-percentage="95"] .gauge__circle .fill.fix { + transform:rotate(342deg) +} +.cui .gauge.gauge--small[data-percentage="96"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="96"] .gauge__circle .mask.full { + transform:rotate(172.8deg) +} +.cui .gauge.gauge--small[data-percentage="96"] .gauge__circle .fill.fix { + transform:rotate(345.6deg) +} +.cui .gauge.gauge--small[data-percentage="97"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="97"] .gauge__circle .mask.full { + transform:rotate(174.6deg) +} +.cui .gauge.gauge--small[data-percentage="97"] .gauge__circle .fill.fix { + transform:rotate(349.2deg) +} +.cui .gauge.gauge--small[data-percentage="98"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="98"] .gauge__circle .mask.full { + transform:rotate(176.4deg) +} +.cui .gauge.gauge--small[data-percentage="98"] .gauge__circle .fill.fix { + transform:rotate(352.8deg) +} +.cui .gauge.gauge--small[data-percentage="99"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="99"] .gauge__circle .mask.full { + transform:rotate(178.2deg) +} +.cui .gauge.gauge--small[data-percentage="99"] .gauge__circle .fill.fix { + transform:rotate(356.4deg) +} +.cui .gauge.gauge--small[data-percentage="100"] .gauge__circle .fill, +.cui .gauge.gauge--small[data-percentage="100"] .gauge__circle .mask.full { + transform:rotate(180deg) +} +.cui .gauge.gauge--small[data-percentage="100"] .gauge__circle .fill.fix { + transform:rotate(360deg) +} +.cui .gauge .gauge__circle .fill, +.cui .gauge .gauge__circle .mask, +.cui .gauge .gauge__circle .shadow { + width:100px; + height:100px; + position:absolute; + border-radius:50% +} +.cui .gauge .gauge__circle .fill, +.cui .gauge .gauge__circle .mask { + -webkit-backface-visibility:hidden; + transition:transform 1s; + border-radius:50% +} +.cui .gauge .gauge__circle .mask { + clip:rect(0,100px,100px,50px) +} +.cui .gauge .gauge__circle .mask .fill { + clip:rect(0,50px,100px,0) +} +.cui .gauge .gauge__inset { + justify-content:center; + width:94px; + height:94px; + position:absolute; + border-radius:50%; + border:var(--cui-gauge-inset-border) +} +.cui .gauge .gauge__inset .gauge__percentage { + font-size:3rem; + font-weight:200 +} +.cui .gauge[data-percentage="1"] .gauge__circle .fill, +.cui .gauge[data-percentage="1"] .gauge__circle .mask.full { + transform:rotate(1.8deg) +} +.cui .gauge[data-percentage="1"] .gauge__circle .fill.fix, +.cui .gauge[data-percentage="2"] .gauge__circle .fill, +.cui .gauge[data-percentage="2"] .gauge__circle .mask.full { + transform:rotate(3.6deg) +} +.cui .gauge[data-percentage="2"] .gauge__circle .fill.fix { + transform:rotate(7.2deg) +} +.cui .gauge[data-percentage="3"] .gauge__circle .fill, +.cui .gauge[data-percentage="3"] .gauge__circle .mask.full { + transform:rotate(5.4deg) +} +.cui .gauge[data-percentage="3"] .gauge__circle .fill.fix { + transform:rotate(10.8deg) +} +.cui .gauge[data-percentage="4"] .gauge__circle .fill, +.cui .gauge[data-percentage="4"] .gauge__circle .mask.full { + transform:rotate(7.2deg) +} +.cui .gauge[data-percentage="4"] .gauge__circle .fill.fix { + transform:rotate(14.4deg) +} +.cui .gauge[data-percentage="5"] .gauge__circle .fill, +.cui .gauge[data-percentage="5"] .gauge__circle .mask.full { + transform:rotate(9deg) +} +.cui .gauge[data-percentage="5"] .gauge__circle .fill.fix { + transform:rotate(18deg) +} +.cui .gauge[data-percentage="6"] .gauge__circle .fill, +.cui .gauge[data-percentage="6"] .gauge__circle .mask.full { + transform:rotate(10.8deg) +} +.cui .gauge[data-percentage="6"] .gauge__circle .fill.fix { + transform:rotate(21.6deg) +} +.cui .gauge[data-percentage="7"] .gauge__circle .fill, +.cui .gauge[data-percentage="7"] .gauge__circle .mask.full { + transform:rotate(12.6deg) +} +.cui .gauge[data-percentage="7"] .gauge__circle .fill.fix { + transform:rotate(25.2deg) +} +.cui .gauge[data-percentage="8"] .gauge__circle .fill, +.cui .gauge[data-percentage="8"] .gauge__circle .mask.full { + transform:rotate(14.4deg) +} +.cui .gauge[data-percentage="8"] .gauge__circle .fill.fix { + transform:rotate(28.8deg) +} +.cui .gauge[data-percentage="9"] .gauge__circle .fill, +.cui .gauge[data-percentage="9"] .gauge__circle .mask.full { + transform:rotate(16.2deg) +} +.cui .gauge[data-percentage="9"] .gauge__circle .fill.fix { + transform:rotate(32.4deg) +} +.cui .gauge[data-percentage="10"] .gauge__circle .fill, +.cui .gauge[data-percentage="10"] .gauge__circle .mask.full { + transform:rotate(18deg) +} +.cui .gauge[data-percentage="10"] .gauge__circle .fill.fix { + transform:rotate(36deg) +} +.cui .gauge[data-percentage="11"] .gauge__circle .fill, +.cui .gauge[data-percentage="11"] .gauge__circle .mask.full { + transform:rotate(19.8deg) +} +.cui .gauge[data-percentage="11"] .gauge__circle .fill.fix { + transform:rotate(39.6deg) +} +.cui .gauge[data-percentage="12"] .gauge__circle .fill, +.cui .gauge[data-percentage="12"] .gauge__circle .mask.full { + transform:rotate(21.6deg) +} +.cui .gauge[data-percentage="12"] .gauge__circle .fill.fix { + transform:rotate(43.2deg) +} +.cui .gauge[data-percentage="13"] .gauge__circle .fill, +.cui .gauge[data-percentage="13"] .gauge__circle .mask.full { + transform:rotate(23.4deg) +} +.cui .gauge[data-percentage="13"] .gauge__circle .fill.fix { + transform:rotate(46.8deg) +} +.cui .gauge[data-percentage="14"] .gauge__circle .fill, +.cui .gauge[data-percentage="14"] .gauge__circle .mask.full { + transform:rotate(25.2deg) +} +.cui .gauge[data-percentage="14"] .gauge__circle .fill.fix { + transform:rotate(50.4deg) +} +.cui .gauge[data-percentage="15"] .gauge__circle .fill, +.cui .gauge[data-percentage="15"] .gauge__circle .mask.full { + transform:rotate(27deg) +} +.cui .gauge[data-percentage="15"] .gauge__circle .fill.fix { + transform:rotate(54deg) +} +.cui .gauge[data-percentage="16"] .gauge__circle .fill, +.cui .gauge[data-percentage="16"] .gauge__circle .mask.full { + transform:rotate(28.8deg) +} +.cui .gauge[data-percentage="16"] .gauge__circle .fill.fix { + transform:rotate(57.6deg) +} +.cui .gauge[data-percentage="17"] .gauge__circle .fill, +.cui .gauge[data-percentage="17"] .gauge__circle .mask.full { + transform:rotate(30.6deg) +} +.cui .gauge[data-percentage="17"] .gauge__circle .fill.fix { + transform:rotate(61.2deg) +} +.cui .gauge[data-percentage="18"] .gauge__circle .fill, +.cui .gauge[data-percentage="18"] .gauge__circle .mask.full { + transform:rotate(32.4deg) +} +.cui .gauge[data-percentage="18"] .gauge__circle .fill.fix { + transform:rotate(64.8deg) +} +.cui .gauge[data-percentage="19"] .gauge__circle .fill, +.cui .gauge[data-percentage="19"] .gauge__circle .mask.full { + transform:rotate(34.2deg) +} +.cui .gauge[data-percentage="19"] .gauge__circle .fill.fix { + transform:rotate(68.4deg) +} +.cui .gauge[data-percentage="20"] .gauge__circle .fill, +.cui .gauge[data-percentage="20"] .gauge__circle .mask.full { + transform:rotate(36deg) +} +.cui .gauge[data-percentage="20"] .gauge__circle .fill.fix { + transform:rotate(72deg) +} +.cui .gauge[data-percentage="21"] .gauge__circle .fill, +.cui .gauge[data-percentage="21"] .gauge__circle .mask.full { + transform:rotate(37.8deg) +} +.cui .gauge[data-percentage="21"] .gauge__circle .fill.fix { + transform:rotate(75.6deg) +} +.cui .gauge[data-percentage="22"] .gauge__circle .fill, +.cui .gauge[data-percentage="22"] .gauge__circle .mask.full { + transform:rotate(39.6deg) +} +.cui .gauge[data-percentage="22"] .gauge__circle .fill.fix { + transform:rotate(79.2deg) +} +.cui .gauge[data-percentage="23"] .gauge__circle .fill, +.cui .gauge[data-percentage="23"] .gauge__circle .mask.full { + transform:rotate(41.4deg) +} +.cui .gauge[data-percentage="23"] .gauge__circle .fill.fix { + transform:rotate(82.8deg) +} +.cui .gauge[data-percentage="24"] .gauge__circle .fill, +.cui .gauge[data-percentage="24"] .gauge__circle .mask.full { + transform:rotate(43.2deg) +} +.cui .gauge[data-percentage="24"] .gauge__circle .fill.fix { + transform:rotate(86.4deg) +} +.cui .gauge[data-percentage="25"] .gauge__circle .fill, +.cui .gauge[data-percentage="25"] .gauge__circle .mask.full { + transform:rotate(45deg) +} +.cui .gauge[data-percentage="25"] .gauge__circle .fill.fix { + transform:rotate(90deg) +} +.cui .gauge[data-percentage="26"] .gauge__circle .fill, +.cui .gauge[data-percentage="26"] .gauge__circle .mask.full { + transform:rotate(46.8deg) +} +.cui .gauge[data-percentage="26"] .gauge__circle .fill.fix { + transform:rotate(93.6deg) +} +.cui .gauge[data-percentage="27"] .gauge__circle .fill, +.cui .gauge[data-percentage="27"] .gauge__circle .mask.full { + transform:rotate(48.6deg) +} +.cui .gauge[data-percentage="27"] .gauge__circle .fill.fix { + transform:rotate(97.2deg) +} +.cui .gauge[data-percentage="28"] .gauge__circle .fill, +.cui .gauge[data-percentage="28"] .gauge__circle .mask.full { + transform:rotate(50.4deg) +} +.cui .gauge[data-percentage="28"] .gauge__circle .fill.fix { + transform:rotate(100.8deg) +} +.cui .gauge[data-percentage="29"] .gauge__circle .fill, +.cui .gauge[data-percentage="29"] .gauge__circle .mask.full { + transform:rotate(52.2deg) +} +.cui .gauge[data-percentage="29"] .gauge__circle .fill.fix { + transform:rotate(104.4deg) +} +.cui .gauge[data-percentage="30"] .gauge__circle .fill, +.cui .gauge[data-percentage="30"] .gauge__circle .mask.full { + transform:rotate(54deg) +} +.cui .gauge[data-percentage="30"] .gauge__circle .fill.fix { + transform:rotate(108deg) +} +.cui .gauge[data-percentage="31"] .gauge__circle .fill, +.cui .gauge[data-percentage="31"] .gauge__circle .mask.full { + transform:rotate(55.8deg) +} +.cui .gauge[data-percentage="31"] .gauge__circle .fill.fix { + transform:rotate(111.6deg) +} +.cui .gauge[data-percentage="32"] .gauge__circle .fill, +.cui .gauge[data-percentage="32"] .gauge__circle .mask.full { + transform:rotate(57.6deg) +} +.cui .gauge[data-percentage="32"] .gauge__circle .fill.fix { + transform:rotate(115.2deg) +} +.cui .gauge[data-percentage="33"] .gauge__circle .fill, +.cui .gauge[data-percentage="33"] .gauge__circle .mask.full { + transform:rotate(59.4deg) +} +.cui .gauge[data-percentage="33"] .gauge__circle .fill.fix { + transform:rotate(118.8deg) +} +.cui .gauge[data-percentage="34"] .gauge__circle .fill, +.cui .gauge[data-percentage="34"] .gauge__circle .mask.full { + transform:rotate(61.2deg) +} +.cui .gauge[data-percentage="34"] .gauge__circle .fill.fix { + transform:rotate(122.4deg) +} +.cui .gauge[data-percentage="35"] .gauge__circle .fill, +.cui .gauge[data-percentage="35"] .gauge__circle .mask.full { + transform:rotate(63deg) +} +.cui .gauge[data-percentage="35"] .gauge__circle .fill.fix { + transform:rotate(126deg) +} +.cui .gauge[data-percentage="36"] .gauge__circle .fill, +.cui .gauge[data-percentage="36"] .gauge__circle .mask.full { + transform:rotate(64.8deg) +} +.cui .gauge[data-percentage="36"] .gauge__circle .fill.fix { + transform:rotate(129.6deg) +} +.cui .gauge[data-percentage="37"] .gauge__circle .fill, +.cui .gauge[data-percentage="37"] .gauge__circle .mask.full { + transform:rotate(66.6deg) +} +.cui .gauge[data-percentage="37"] .gauge__circle .fill.fix { + transform:rotate(133.2deg) +} +.cui .gauge[data-percentage="38"] .gauge__circle .fill, +.cui .gauge[data-percentage="38"] .gauge__circle .mask.full { + transform:rotate(68.4deg) +} +.cui .gauge[data-percentage="38"] .gauge__circle .fill.fix { + transform:rotate(136.8deg) +} +.cui .gauge[data-percentage="39"] .gauge__circle .fill, +.cui .gauge[data-percentage="39"] .gauge__circle .mask.full { + transform:rotate(70.2deg) +} +.cui .gauge[data-percentage="39"] .gauge__circle .fill.fix { + transform:rotate(140.4deg) +} +.cui .gauge[data-percentage="40"] .gauge__circle .fill, +.cui .gauge[data-percentage="40"] .gauge__circle .mask.full { + transform:rotate(72deg) +} +.cui .gauge[data-percentage="40"] .gauge__circle .fill.fix { + transform:rotate(144deg) +} +.cui .gauge[data-percentage="41"] .gauge__circle .fill, +.cui .gauge[data-percentage="41"] .gauge__circle .mask.full { + transform:rotate(73.8deg) +} +.cui .gauge[data-percentage="41"] .gauge__circle .fill.fix { + transform:rotate(147.6deg) +} +.cui .gauge[data-percentage="42"] .gauge__circle .fill, +.cui .gauge[data-percentage="42"] .gauge__circle .mask.full { + transform:rotate(75.6deg) +} +.cui .gauge[data-percentage="42"] .gauge__circle .fill.fix { + transform:rotate(151.2deg) +} +.cui .gauge[data-percentage="43"] .gauge__circle .fill, +.cui .gauge[data-percentage="43"] .gauge__circle .mask.full { + transform:rotate(77.4deg) +} +.cui .gauge[data-percentage="43"] .gauge__circle .fill.fix { + transform:rotate(154.8deg) +} +.cui .gauge[data-percentage="44"] .gauge__circle .fill, +.cui .gauge[data-percentage="44"] .gauge__circle .mask.full { + transform:rotate(79.2deg) +} +.cui .gauge[data-percentage="44"] .gauge__circle .fill.fix { + transform:rotate(158.4deg) +} +.cui .gauge[data-percentage="45"] .gauge__circle .fill, +.cui .gauge[data-percentage="45"] .gauge__circle .mask.full { + transform:rotate(81deg) +} +.cui .gauge[data-percentage="45"] .gauge__circle .fill.fix { + transform:rotate(162deg) +} +.cui .gauge[data-percentage="46"] .gauge__circle .fill, +.cui .gauge[data-percentage="46"] .gauge__circle .mask.full { + transform:rotate(82.8deg) +} +.cui .gauge[data-percentage="46"] .gauge__circle .fill.fix { + transform:rotate(165.6deg) +} +.cui .gauge[data-percentage="47"] .gauge__circle .fill, +.cui .gauge[data-percentage="47"] .gauge__circle .mask.full { + transform:rotate(84.6deg) +} +.cui .gauge[data-percentage="47"] .gauge__circle .fill.fix { + transform:rotate(169.2deg) +} +.cui .gauge[data-percentage="48"] .gauge__circle .fill, +.cui .gauge[data-percentage="48"] .gauge__circle .mask.full { + transform:rotate(86.4deg) +} +.cui .gauge[data-percentage="48"] .gauge__circle .fill.fix { + transform:rotate(172.8deg) +} +.cui .gauge[data-percentage="49"] .gauge__circle .fill, +.cui .gauge[data-percentage="49"] .gauge__circle .mask.full { + transform:rotate(88.2deg) +} +.cui .gauge[data-percentage="49"] .gauge__circle .fill.fix { + transform:rotate(176.4deg) +} +.cui .gauge[data-percentage="50"] .gauge__circle .fill, +.cui .gauge[data-percentage="50"] .gauge__circle .mask.full { + transform:rotate(90deg) +} +.cui .gauge[data-percentage="50"] .gauge__circle .fill.fix { + transform:rotate(180deg) +} +.cui .gauge[data-percentage="51"] .gauge__circle .fill, +.cui .gauge[data-percentage="51"] .gauge__circle .mask.full { + transform:rotate(91.8deg) +} +.cui .gauge[data-percentage="51"] .gauge__circle .fill.fix { + transform:rotate(183.6deg) +} +.cui .gauge[data-percentage="52"] .gauge__circle .fill, +.cui .gauge[data-percentage="52"] .gauge__circle .mask.full { + transform:rotate(93.6deg) +} +.cui .gauge[data-percentage="52"] .gauge__circle .fill.fix { + transform:rotate(187.2deg) +} +.cui .gauge[data-percentage="53"] .gauge__circle .fill, +.cui .gauge[data-percentage="53"] .gauge__circle .mask.full { + transform:rotate(95.4deg) +} +.cui .gauge[data-percentage="53"] .gauge__circle .fill.fix { + transform:rotate(190.8deg) +} +.cui .gauge[data-percentage="54"] .gauge__circle .fill, +.cui .gauge[data-percentage="54"] .gauge__circle .mask.full { + transform:rotate(97.2deg) +} +.cui .gauge[data-percentage="54"] .gauge__circle .fill.fix { + transform:rotate(194.4deg) +} +.cui .gauge[data-percentage="55"] .gauge__circle .fill, +.cui .gauge[data-percentage="55"] .gauge__circle .mask.full { + transform:rotate(99deg) +} +.cui .gauge[data-percentage="55"] .gauge__circle .fill.fix { + transform:rotate(198deg) +} +.cui .gauge[data-percentage="56"] .gauge__circle .fill, +.cui .gauge[data-percentage="56"] .gauge__circle .mask.full { + transform:rotate(100.8deg) +} +.cui .gauge[data-percentage="56"] .gauge__circle .fill.fix { + transform:rotate(201.6deg) +} +.cui .gauge[data-percentage="57"] .gauge__circle .fill, +.cui .gauge[data-percentage="57"] .gauge__circle .mask.full { + transform:rotate(102.6deg) +} +.cui .gauge[data-percentage="57"] .gauge__circle .fill.fix { + transform:rotate(205.2deg) +} +.cui .gauge[data-percentage="58"] .gauge__circle .fill, +.cui .gauge[data-percentage="58"] .gauge__circle .mask.full { + transform:rotate(104.4deg) +} +.cui .gauge[data-percentage="58"] .gauge__circle .fill.fix { + transform:rotate(208.8deg) +} +.cui .gauge[data-percentage="59"] .gauge__circle .fill, +.cui .gauge[data-percentage="59"] .gauge__circle .mask.full { + transform:rotate(106.2deg) +} +.cui .gauge[data-percentage="59"] .gauge__circle .fill.fix { + transform:rotate(212.4deg) +} +.cui .gauge[data-percentage="60"] .gauge__circle .fill, +.cui .gauge[data-percentage="60"] .gauge__circle .mask.full { + transform:rotate(108deg) +} +.cui .gauge[data-percentage="60"] .gauge__circle .fill.fix { + transform:rotate(216deg) +} +.cui .gauge[data-percentage="61"] .gauge__circle .fill, +.cui .gauge[data-percentage="61"] .gauge__circle .mask.full { + transform:rotate(109.8deg) +} +.cui .gauge[data-percentage="61"] .gauge__circle .fill.fix { + transform:rotate(219.6deg) +} +.cui .gauge[data-percentage="62"] .gauge__circle .fill, +.cui .gauge[data-percentage="62"] .gauge__circle .mask.full { + transform:rotate(111.6deg) +} +.cui .gauge[data-percentage="62"] .gauge__circle .fill.fix { + transform:rotate(223.2deg) +} +.cui .gauge[data-percentage="63"] .gauge__circle .fill, +.cui .gauge[data-percentage="63"] .gauge__circle .mask.full { + transform:rotate(113.4deg) +} +.cui .gauge[data-percentage="63"] .gauge__circle .fill.fix { + transform:rotate(226.8deg) +} +.cui .gauge[data-percentage="64"] .gauge__circle .fill, +.cui .gauge[data-percentage="64"] .gauge__circle .mask.full { + transform:rotate(115.2deg) +} +.cui .gauge[data-percentage="64"] .gauge__circle .fill.fix { + transform:rotate(230.4deg) +} +.cui .gauge[data-percentage="65"] .gauge__circle .fill, +.cui .gauge[data-percentage="65"] .gauge__circle .mask.full { + transform:rotate(117deg) +} +.cui .gauge[data-percentage="65"] .gauge__circle .fill.fix { + transform:rotate(234deg) +} +.cui .gauge[data-percentage="66"] .gauge__circle .fill, +.cui .gauge[data-percentage="66"] .gauge__circle .mask.full { + transform:rotate(118.8deg) +} +.cui .gauge[data-percentage="66"] .gauge__circle .fill.fix { + transform:rotate(237.6deg) +} +.cui .gauge[data-percentage="67"] .gauge__circle .fill, +.cui .gauge[data-percentage="67"] .gauge__circle .mask.full { + transform:rotate(120.6deg) +} +.cui .gauge[data-percentage="67"] .gauge__circle .fill.fix { + transform:rotate(241.2deg) +} +.cui .gauge[data-percentage="68"] .gauge__circle .fill, +.cui .gauge[data-percentage="68"] .gauge__circle .mask.full { + transform:rotate(122.4deg) +} +.cui .gauge[data-percentage="68"] .gauge__circle .fill.fix { + transform:rotate(244.8deg) +} +.cui .gauge[data-percentage="69"] .gauge__circle .fill, +.cui .gauge[data-percentage="69"] .gauge__circle .mask.full { + transform:rotate(124.2deg) +} +.cui .gauge[data-percentage="69"] .gauge__circle .fill.fix { + transform:rotate(248.4deg) +} +.cui .gauge[data-percentage="70"] .gauge__circle .fill, +.cui .gauge[data-percentage="70"] .gauge__circle .mask.full { + transform:rotate(126deg) +} +.cui .gauge[data-percentage="70"] .gauge__circle .fill.fix { + transform:rotate(252deg) +} +.cui .gauge[data-percentage="71"] .gauge__circle .fill, +.cui .gauge[data-percentage="71"] .gauge__circle .mask.full { + transform:rotate(127.8deg) +} +.cui .gauge[data-percentage="71"] .gauge__circle .fill.fix { + transform:rotate(255.6deg) +} +.cui .gauge[data-percentage="72"] .gauge__circle .fill, +.cui .gauge[data-percentage="72"] .gauge__circle .mask.full { + transform:rotate(129.6deg) +} +.cui .gauge[data-percentage="72"] .gauge__circle .fill.fix { + transform:rotate(259.2deg) +} +.cui .gauge[data-percentage="73"] .gauge__circle .fill, +.cui .gauge[data-percentage="73"] .gauge__circle .mask.full { + transform:rotate(131.4deg) +} +.cui .gauge[data-percentage="73"] .gauge__circle .fill.fix { + transform:rotate(262.8deg) +} +.cui .gauge[data-percentage="74"] .gauge__circle .fill, +.cui .gauge[data-percentage="74"] .gauge__circle .mask.full { + transform:rotate(133.2deg) +} +.cui .gauge[data-percentage="74"] .gauge__circle .fill.fix { + transform:rotate(266.4deg) +} +.cui .gauge[data-percentage="75"] .gauge__circle .fill, +.cui .gauge[data-percentage="75"] .gauge__circle .mask.full { + transform:rotate(135deg) +} +.cui .gauge[data-percentage="75"] .gauge__circle .fill.fix { + transform:rotate(270deg) +} +.cui .gauge[data-percentage="76"] .gauge__circle .fill, +.cui .gauge[data-percentage="76"] .gauge__circle .mask.full { + transform:rotate(136.8deg) +} +.cui .gauge[data-percentage="76"] .gauge__circle .fill.fix { + transform:rotate(273.6deg) +} +.cui .gauge[data-percentage="77"] .gauge__circle .fill, +.cui .gauge[data-percentage="77"] .gauge__circle .mask.full { + transform:rotate(138.6deg) +} +.cui .gauge[data-percentage="77"] .gauge__circle .fill.fix { + transform:rotate(277.2deg) +} +.cui .gauge[data-percentage="78"] .gauge__circle .fill, +.cui .gauge[data-percentage="78"] .gauge__circle .mask.full { + transform:rotate(140.4deg) +} +.cui .gauge[data-percentage="78"] .gauge__circle .fill.fix { + transform:rotate(280.8deg) +} +.cui .gauge[data-percentage="79"] .gauge__circle .fill, +.cui .gauge[data-percentage="79"] .gauge__circle .mask.full { + transform:rotate(142.2deg) +} +.cui .gauge[data-percentage="79"] .gauge__circle .fill.fix { + transform:rotate(284.4deg) +} +.cui .gauge[data-percentage="80"] .gauge__circle .fill, +.cui .gauge[data-percentage="80"] .gauge__circle .mask.full { + transform:rotate(144deg) +} +.cui .gauge[data-percentage="80"] .gauge__circle .fill.fix { + transform:rotate(288deg) +} +.cui .gauge[data-percentage="81"] .gauge__circle .fill, +.cui .gauge[data-percentage="81"] .gauge__circle .mask.full { + transform:rotate(145.8deg) +} +.cui .gauge[data-percentage="81"] .gauge__circle .fill.fix { + transform:rotate(291.6deg) +} +.cui .gauge[data-percentage="82"] .gauge__circle .fill, +.cui .gauge[data-percentage="82"] .gauge__circle .mask.full { + transform:rotate(147.6deg) +} +.cui .gauge[data-percentage="82"] .gauge__circle .fill.fix { + transform:rotate(295.2deg) +} +.cui .gauge[data-percentage="83"] .gauge__circle .fill, +.cui .gauge[data-percentage="83"] .gauge__circle .mask.full { + transform:rotate(149.4deg) +} +.cui .gauge[data-percentage="83"] .gauge__circle .fill.fix { + transform:rotate(298.8deg) +} +.cui .gauge[data-percentage="84"] .gauge__circle .fill, +.cui .gauge[data-percentage="84"] .gauge__circle .mask.full { + transform:rotate(151.2deg) +} +.cui .gauge[data-percentage="84"] .gauge__circle .fill.fix { + transform:rotate(302.4deg) +} +.cui .gauge[data-percentage="85"] .gauge__circle .fill, +.cui .gauge[data-percentage="85"] .gauge__circle .mask.full { + transform:rotate(153deg) +} +.cui .gauge[data-percentage="85"] .gauge__circle .fill.fix { + transform:rotate(306deg) +} +.cui .gauge[data-percentage="86"] .gauge__circle .fill, +.cui .gauge[data-percentage="86"] .gauge__circle .mask.full { + transform:rotate(154.8deg) +} +.cui .gauge[data-percentage="86"] .gauge__circle .fill.fix { + transform:rotate(309.6deg) +} +.cui .gauge[data-percentage="87"] .gauge__circle .fill, +.cui .gauge[data-percentage="87"] .gauge__circle .mask.full { + transform:rotate(156.6deg) +} +.cui .gauge[data-percentage="87"] .gauge__circle .fill.fix { + transform:rotate(313.2deg) +} +.cui .gauge[data-percentage="88"] .gauge__circle .fill, +.cui .gauge[data-percentage="88"] .gauge__circle .mask.full { + transform:rotate(158.4deg) +} +.cui .gauge[data-percentage="88"] .gauge__circle .fill.fix { + transform:rotate(316.8deg) +} +.cui .gauge[data-percentage="89"] .gauge__circle .fill, +.cui .gauge[data-percentage="89"] .gauge__circle .mask.full { + transform:rotate(160.2deg) +} +.cui .gauge[data-percentage="89"] .gauge__circle .fill.fix { + transform:rotate(320.4deg) +} +.cui .gauge[data-percentage="90"] .gauge__circle .fill, +.cui .gauge[data-percentage="90"] .gauge__circle .mask.full { + transform:rotate(162deg) +} +.cui .gauge[data-percentage="90"] .gauge__circle .fill.fix { + transform:rotate(324deg) +} +.cui .gauge[data-percentage="91"] .gauge__circle .fill, +.cui .gauge[data-percentage="91"] .gauge__circle .mask.full { + transform:rotate(163.8deg) +} +.cui .gauge[data-percentage="91"] .gauge__circle .fill.fix { + transform:rotate(327.6deg) +} +.cui .gauge[data-percentage="92"] .gauge__circle .fill, +.cui .gauge[data-percentage="92"] .gauge__circle .mask.full { + transform:rotate(165.6deg) +} +.cui .gauge[data-percentage="92"] .gauge__circle .fill.fix { + transform:rotate(331.2deg) +} +.cui .gauge[data-percentage="93"] .gauge__circle .fill, +.cui .gauge[data-percentage="93"] .gauge__circle .mask.full { + transform:rotate(167.4deg) +} +.cui .gauge[data-percentage="93"] .gauge__circle .fill.fix { + transform:rotate(334.8deg) +} +.cui .gauge[data-percentage="94"] .gauge__circle .fill, +.cui .gauge[data-percentage="94"] .gauge__circle .mask.full { + transform:rotate(169.2deg) +} +.cui .gauge[data-percentage="94"] .gauge__circle .fill.fix { + transform:rotate(338.4deg) +} +.cui .gauge[data-percentage="95"] .gauge__circle .fill, +.cui .gauge[data-percentage="95"] .gauge__circle .mask.full { + transform:rotate(171deg) +} +.cui .gauge[data-percentage="95"] .gauge__circle .fill.fix { + transform:rotate(342deg) +} +.cui .gauge[data-percentage="96"] .gauge__circle .fill, +.cui .gauge[data-percentage="96"] .gauge__circle .mask.full { + transform:rotate(172.8deg) +} +.cui .gauge[data-percentage="96"] .gauge__circle .fill.fix { + transform:rotate(345.6deg) +} +.cui .gauge[data-percentage="97"] .gauge__circle .fill, +.cui .gauge[data-percentage="97"] .gauge__circle .mask.full { + transform:rotate(174.6deg) +} +.cui .gauge[data-percentage="97"] .gauge__circle .fill.fix { + transform:rotate(349.2deg) +} +.cui .gauge[data-percentage="98"] .gauge__circle .fill, +.cui .gauge[data-percentage="98"] .gauge__circle .mask.full { + transform:rotate(176.4deg) +} +.cui .gauge[data-percentage="98"] .gauge__circle .fill.fix { + transform:rotate(352.8deg) +} +.cui .gauge[data-percentage="99"] .gauge__circle .fill, +.cui .gauge[data-percentage="99"] .gauge__circle .mask.full { + transform:rotate(178.2deg) +} +.cui .gauge[data-percentage="99"] .gauge__circle .fill.fix { + transform:rotate(356.4deg) +} +.cui .gauge[data-percentage="100"] .gauge__circle .fill, +.cui .gauge[data-percentage="100"] .gauge__circle .mask.full { + transform:rotate(180deg) +} +.cui .gauge[data-percentage="100"] .gauge__circle .fill.fix { + transform:rotate(360deg) +} +.cui .gauge.gauge--large { + display:inline-block; + position:relative; + width:150px; + height:150px; + background-color:var(--cui-gauge-background); + border-radius:50% +} +.cui .gauge.gauge--large .gauge__circle .fill, +.cui .gauge.gauge--large .gauge__circle .mask, +.cui .gauge.gauge--large .gauge__circle .shadow { + width:150px; + height:150px; + position:absolute; + border-radius:50% +} +.cui .gauge.gauge--large .gauge__circle .fill, +.cui .gauge.gauge--large .gauge__circle .mask { + -webkit-backface-visibility:hidden; + transition:transform 1s; + border-radius:50% +} +.cui .gauge.gauge--large .gauge__circle .mask { + clip:rect(0,150px,150px,75px) +} +.cui .gauge.gauge--large .gauge__circle .mask .fill { + clip:rect(0,75px,150px,0) +} +.cui .gauge.gauge--large .gauge__inset { + display:flex; + align-items:center; + justify-content:center; + width:144px; + height:144px; + position:absolute; + margin-left:3px; + margin-top:3px; + border-radius:50%; + border:var(--cui-gauge-inset-border); + box-shadow:var(--cui-gauge-inset-shadow); + background-color:var(--cui-gauge-background) +} +.cui .gauge.gauge--large .gauge__inset .gauge__percentage { + font-size:6rem; + font-weight:100 +} +.cui .gauge.gauge--large[data-percentage="1"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="1"] .gauge__circle .mask.full { + transform:rotate(1.8deg) +} +.cui .gauge.gauge--large[data-percentage="1"] .gauge__circle .fill.fix, +.cui .gauge.gauge--large[data-percentage="2"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="2"] .gauge__circle .mask.full { + transform:rotate(3.6deg) +} +.cui .gauge.gauge--large[data-percentage="2"] .gauge__circle .fill.fix { + transform:rotate(7.2deg) +} +.cui .gauge.gauge--large[data-percentage="3"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="3"] .gauge__circle .mask.full { + transform:rotate(5.4deg) +} +.cui .gauge.gauge--large[data-percentage="3"] .gauge__circle .fill.fix { + transform:rotate(10.8deg) +} +.cui .gauge.gauge--large[data-percentage="4"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="4"] .gauge__circle .mask.full { + transform:rotate(7.2deg) +} +.cui .gauge.gauge--large[data-percentage="4"] .gauge__circle .fill.fix { + transform:rotate(14.4deg) +} +.cui .gauge.gauge--large[data-percentage="5"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="5"] .gauge__circle .mask.full { + transform:rotate(9deg) +} +.cui .gauge.gauge--large[data-percentage="5"] .gauge__circle .fill.fix { + transform:rotate(18deg) +} +.cui .gauge.gauge--large[data-percentage="6"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="6"] .gauge__circle .mask.full { + transform:rotate(10.8deg) +} +.cui .gauge.gauge--large[data-percentage="6"] .gauge__circle .fill.fix { + transform:rotate(21.6deg) +} +.cui .gauge.gauge--large[data-percentage="7"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="7"] .gauge__circle .mask.full { + transform:rotate(12.6deg) +} +.cui .gauge.gauge--large[data-percentage="7"] .gauge__circle .fill.fix { + transform:rotate(25.2deg) +} +.cui .gauge.gauge--large[data-percentage="8"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="8"] .gauge__circle .mask.full { + transform:rotate(14.4deg) +} +.cui .gauge.gauge--large[data-percentage="8"] .gauge__circle .fill.fix { + transform:rotate(28.8deg) +} +.cui .gauge.gauge--large[data-percentage="9"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="9"] .gauge__circle .mask.full { + transform:rotate(16.2deg) +} +.cui .gauge.gauge--large[data-percentage="9"] .gauge__circle .fill.fix { + transform:rotate(32.4deg) +} +.cui .gauge.gauge--large[data-percentage="10"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="10"] .gauge__circle .mask.full { + transform:rotate(18deg) +} +.cui .gauge.gauge--large[data-percentage="10"] .gauge__circle .fill.fix { + transform:rotate(36deg) +} +.cui .gauge.gauge--large[data-percentage="11"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="11"] .gauge__circle .mask.full { + transform:rotate(19.8deg) +} +.cui .gauge.gauge--large[data-percentage="11"] .gauge__circle .fill.fix { + transform:rotate(39.6deg) +} +.cui .gauge.gauge--large[data-percentage="12"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="12"] .gauge__circle .mask.full { + transform:rotate(21.6deg) +} +.cui .gauge.gauge--large[data-percentage="12"] .gauge__circle .fill.fix { + transform:rotate(43.2deg) +} +.cui .gauge.gauge--large[data-percentage="13"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="13"] .gauge__circle .mask.full { + transform:rotate(23.4deg) +} +.cui .gauge.gauge--large[data-percentage="13"] .gauge__circle .fill.fix { + transform:rotate(46.8deg) +} +.cui .gauge.gauge--large[data-percentage="14"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="14"] .gauge__circle .mask.full { + transform:rotate(25.2deg) +} +.cui .gauge.gauge--large[data-percentage="14"] .gauge__circle .fill.fix { + transform:rotate(50.4deg) +} +.cui .gauge.gauge--large[data-percentage="15"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="15"] .gauge__circle .mask.full { + transform:rotate(27deg) +} +.cui .gauge.gauge--large[data-percentage="15"] .gauge__circle .fill.fix { + transform:rotate(54deg) +} +.cui .gauge.gauge--large[data-percentage="16"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="16"] .gauge__circle .mask.full { + transform:rotate(28.8deg) +} +.cui .gauge.gauge--large[data-percentage="16"] .gauge__circle .fill.fix { + transform:rotate(57.6deg) +} +.cui .gauge.gauge--large[data-percentage="17"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="17"] .gauge__circle .mask.full { + transform:rotate(30.6deg) +} +.cui .gauge.gauge--large[data-percentage="17"] .gauge__circle .fill.fix { + transform:rotate(61.2deg) +} +.cui .gauge.gauge--large[data-percentage="18"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="18"] .gauge__circle .mask.full { + transform:rotate(32.4deg) +} +.cui .gauge.gauge--large[data-percentage="18"] .gauge__circle .fill.fix { + transform:rotate(64.8deg) +} +.cui .gauge.gauge--large[data-percentage="19"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="19"] .gauge__circle .mask.full { + transform:rotate(34.2deg) +} +.cui .gauge.gauge--large[data-percentage="19"] .gauge__circle .fill.fix { + transform:rotate(68.4deg) +} +.cui .gauge.gauge--large[data-percentage="20"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="20"] .gauge__circle .mask.full { + transform:rotate(36deg) +} +.cui .gauge.gauge--large[data-percentage="20"] .gauge__circle .fill.fix { + transform:rotate(72deg) +} +.cui .gauge.gauge--large[data-percentage="21"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="21"] .gauge__circle .mask.full { + transform:rotate(37.8deg) +} +.cui .gauge.gauge--large[data-percentage="21"] .gauge__circle .fill.fix { + transform:rotate(75.6deg) +} +.cui .gauge.gauge--large[data-percentage="22"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="22"] .gauge__circle .mask.full { + transform:rotate(39.6deg) +} +.cui .gauge.gauge--large[data-percentage="22"] .gauge__circle .fill.fix { + transform:rotate(79.2deg) +} +.cui .gauge.gauge--large[data-percentage="23"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="23"] .gauge__circle .mask.full { + transform:rotate(41.4deg) +} +.cui .gauge.gauge--large[data-percentage="23"] .gauge__circle .fill.fix { + transform:rotate(82.8deg) +} +.cui .gauge.gauge--large[data-percentage="24"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="24"] .gauge__circle .mask.full { + transform:rotate(43.2deg) +} +.cui .gauge.gauge--large[data-percentage="24"] .gauge__circle .fill.fix { + transform:rotate(86.4deg) +} +.cui .gauge.gauge--large[data-percentage="25"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="25"] .gauge__circle .mask.full { + transform:rotate(45deg) +} +.cui .gauge.gauge--large[data-percentage="25"] .gauge__circle .fill.fix { + transform:rotate(90deg) +} +.cui .gauge.gauge--large[data-percentage="26"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="26"] .gauge__circle .mask.full { + transform:rotate(46.8deg) +} +.cui .gauge.gauge--large[data-percentage="26"] .gauge__circle .fill.fix { + transform:rotate(93.6deg) +} +.cui .gauge.gauge--large[data-percentage="27"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="27"] .gauge__circle .mask.full { + transform:rotate(48.6deg) +} +.cui .gauge.gauge--large[data-percentage="27"] .gauge__circle .fill.fix { + transform:rotate(97.2deg) +} +.cui .gauge.gauge--large[data-percentage="28"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="28"] .gauge__circle .mask.full { + transform:rotate(50.4deg) +} +.cui .gauge.gauge--large[data-percentage="28"] .gauge__circle .fill.fix { + transform:rotate(100.8deg) +} +.cui .gauge.gauge--large[data-percentage="29"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="29"] .gauge__circle .mask.full { + transform:rotate(52.2deg) +} +.cui .gauge.gauge--large[data-percentage="29"] .gauge__circle .fill.fix { + transform:rotate(104.4deg) +} +.cui .gauge.gauge--large[data-percentage="30"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="30"] .gauge__circle .mask.full { + transform:rotate(54deg) +} +.cui .gauge.gauge--large[data-percentage="30"] .gauge__circle .fill.fix { + transform:rotate(108deg) +} +.cui .gauge.gauge--large[data-percentage="31"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="31"] .gauge__circle .mask.full { + transform:rotate(55.8deg) +} +.cui .gauge.gauge--large[data-percentage="31"] .gauge__circle .fill.fix { + transform:rotate(111.6deg) +} +.cui .gauge.gauge--large[data-percentage="32"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="32"] .gauge__circle .mask.full { + transform:rotate(57.6deg) +} +.cui .gauge.gauge--large[data-percentage="32"] .gauge__circle .fill.fix { + transform:rotate(115.2deg) +} +.cui .gauge.gauge--large[data-percentage="33"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="33"] .gauge__circle .mask.full { + transform:rotate(59.4deg) +} +.cui .gauge.gauge--large[data-percentage="33"] .gauge__circle .fill.fix { + transform:rotate(118.8deg) +} +.cui .gauge.gauge--large[data-percentage="34"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="34"] .gauge__circle .mask.full { + transform:rotate(61.2deg) +} +.cui .gauge.gauge--large[data-percentage="34"] .gauge__circle .fill.fix { + transform:rotate(122.4deg) +} +.cui .gauge.gauge--large[data-percentage="35"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="35"] .gauge__circle .mask.full { + transform:rotate(63deg) +} +.cui .gauge.gauge--large[data-percentage="35"] .gauge__circle .fill.fix { + transform:rotate(126deg) +} +.cui .gauge.gauge--large[data-percentage="36"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="36"] .gauge__circle .mask.full { + transform:rotate(64.8deg) +} +.cui .gauge.gauge--large[data-percentage="36"] .gauge__circle .fill.fix { + transform:rotate(129.6deg) +} +.cui .gauge.gauge--large[data-percentage="37"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="37"] .gauge__circle .mask.full { + transform:rotate(66.6deg) +} +.cui .gauge.gauge--large[data-percentage="37"] .gauge__circle .fill.fix { + transform:rotate(133.2deg) +} +.cui .gauge.gauge--large[data-percentage="38"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="38"] .gauge__circle .mask.full { + transform:rotate(68.4deg) +} +.cui .gauge.gauge--large[data-percentage="38"] .gauge__circle .fill.fix { + transform:rotate(136.8deg) +} +.cui .gauge.gauge--large[data-percentage="39"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="39"] .gauge__circle .mask.full { + transform:rotate(70.2deg) +} +.cui .gauge.gauge--large[data-percentage="39"] .gauge__circle .fill.fix { + transform:rotate(140.4deg) +} +.cui .gauge.gauge--large[data-percentage="40"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="40"] .gauge__circle .mask.full { + transform:rotate(72deg) +} +.cui .gauge.gauge--large[data-percentage="40"] .gauge__circle .fill.fix { + transform:rotate(144deg) +} +.cui .gauge.gauge--large[data-percentage="41"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="41"] .gauge__circle .mask.full { + transform:rotate(73.8deg) +} +.cui .gauge.gauge--large[data-percentage="41"] .gauge__circle .fill.fix { + transform:rotate(147.6deg) +} +.cui .gauge.gauge--large[data-percentage="42"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="42"] .gauge__circle .mask.full { + transform:rotate(75.6deg) +} +.cui .gauge.gauge--large[data-percentage="42"] .gauge__circle .fill.fix { + transform:rotate(151.2deg) +} +.cui .gauge.gauge--large[data-percentage="43"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="43"] .gauge__circle .mask.full { + transform:rotate(77.4deg) +} +.cui .gauge.gauge--large[data-percentage="43"] .gauge__circle .fill.fix { + transform:rotate(154.8deg) +} +.cui .gauge.gauge--large[data-percentage="44"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="44"] .gauge__circle .mask.full { + transform:rotate(79.2deg) +} +.cui .gauge.gauge--large[data-percentage="44"] .gauge__circle .fill.fix { + transform:rotate(158.4deg) +} +.cui .gauge.gauge--large[data-percentage="45"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="45"] .gauge__circle .mask.full { + transform:rotate(81deg) +} +.cui .gauge.gauge--large[data-percentage="45"] .gauge__circle .fill.fix { + transform:rotate(162deg) +} +.cui .gauge.gauge--large[data-percentage="46"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="46"] .gauge__circle .mask.full { + transform:rotate(82.8deg) +} +.cui .gauge.gauge--large[data-percentage="46"] .gauge__circle .fill.fix { + transform:rotate(165.6deg) +} +.cui .gauge.gauge--large[data-percentage="47"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="47"] .gauge__circle .mask.full { + transform:rotate(84.6deg) +} +.cui .gauge.gauge--large[data-percentage="47"] .gauge__circle .fill.fix { + transform:rotate(169.2deg) +} +.cui .gauge.gauge--large[data-percentage="48"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="48"] .gauge__circle .mask.full { + transform:rotate(86.4deg) +} +.cui .gauge.gauge--large[data-percentage="48"] .gauge__circle .fill.fix { + transform:rotate(172.8deg) +} +.cui .gauge.gauge--large[data-percentage="49"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="49"] .gauge__circle .mask.full { + transform:rotate(88.2deg) +} +.cui .gauge.gauge--large[data-percentage="49"] .gauge__circle .fill.fix { + transform:rotate(176.4deg) +} +.cui .gauge.gauge--large[data-percentage="50"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="50"] .gauge__circle .mask.full { + transform:rotate(90deg) +} +.cui .gauge.gauge--large[data-percentage="50"] .gauge__circle .fill.fix { + transform:rotate(180deg) +} +.cui .gauge.gauge--large[data-percentage="51"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="51"] .gauge__circle .mask.full { + transform:rotate(91.8deg) +} +.cui .gauge.gauge--large[data-percentage="51"] .gauge__circle .fill.fix { + transform:rotate(183.6deg) +} +.cui .gauge.gauge--large[data-percentage="52"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="52"] .gauge__circle .mask.full { + transform:rotate(93.6deg) +} +.cui .gauge.gauge--large[data-percentage="52"] .gauge__circle .fill.fix { + transform:rotate(187.2deg) +} +.cui .gauge.gauge--large[data-percentage="53"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="53"] .gauge__circle .mask.full { + transform:rotate(95.4deg) +} +.cui .gauge.gauge--large[data-percentage="53"] .gauge__circle .fill.fix { + transform:rotate(190.8deg) +} +.cui .gauge.gauge--large[data-percentage="54"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="54"] .gauge__circle .mask.full { + transform:rotate(97.2deg) +} +.cui .gauge.gauge--large[data-percentage="54"] .gauge__circle .fill.fix { + transform:rotate(194.4deg) +} +.cui .gauge.gauge--large[data-percentage="55"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="55"] .gauge__circle .mask.full { + transform:rotate(99deg) +} +.cui .gauge.gauge--large[data-percentage="55"] .gauge__circle .fill.fix { + transform:rotate(198deg) +} +.cui .gauge.gauge--large[data-percentage="56"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="56"] .gauge__circle .mask.full { + transform:rotate(100.8deg) +} +.cui .gauge.gauge--large[data-percentage="56"] .gauge__circle .fill.fix { + transform:rotate(201.6deg) +} +.cui .gauge.gauge--large[data-percentage="57"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="57"] .gauge__circle .mask.full { + transform:rotate(102.6deg) +} +.cui .gauge.gauge--large[data-percentage="57"] .gauge__circle .fill.fix { + transform:rotate(205.2deg) +} +.cui .gauge.gauge--large[data-percentage="58"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="58"] .gauge__circle .mask.full { + transform:rotate(104.4deg) +} +.cui .gauge.gauge--large[data-percentage="58"] .gauge__circle .fill.fix { + transform:rotate(208.8deg) +} +.cui .gauge.gauge--large[data-percentage="59"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="59"] .gauge__circle .mask.full { + transform:rotate(106.2deg) +} +.cui .gauge.gauge--large[data-percentage="59"] .gauge__circle .fill.fix { + transform:rotate(212.4deg) +} +.cui .gauge.gauge--large[data-percentage="60"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="60"] .gauge__circle .mask.full { + transform:rotate(108deg) +} +.cui .gauge.gauge--large[data-percentage="60"] .gauge__circle .fill.fix { + transform:rotate(216deg) +} +.cui .gauge.gauge--large[data-percentage="61"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="61"] .gauge__circle .mask.full { + transform:rotate(109.8deg) +} +.cui .gauge.gauge--large[data-percentage="61"] .gauge__circle .fill.fix { + transform:rotate(219.6deg) +} +.cui .gauge.gauge--large[data-percentage="62"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="62"] .gauge__circle .mask.full { + transform:rotate(111.6deg) +} +.cui .gauge.gauge--large[data-percentage="62"] .gauge__circle .fill.fix { + transform:rotate(223.2deg) +} +.cui .gauge.gauge--large[data-percentage="63"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="63"] .gauge__circle .mask.full { + transform:rotate(113.4deg) +} +.cui .gauge.gauge--large[data-percentage="63"] .gauge__circle .fill.fix { + transform:rotate(226.8deg) +} +.cui .gauge.gauge--large[data-percentage="64"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="64"] .gauge__circle .mask.full { + transform:rotate(115.2deg) +} +.cui .gauge.gauge--large[data-percentage="64"] .gauge__circle .fill.fix { + transform:rotate(230.4deg) +} +.cui .gauge.gauge--large[data-percentage="65"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="65"] .gauge__circle .mask.full { + transform:rotate(117deg) +} +.cui .gauge.gauge--large[data-percentage="65"] .gauge__circle .fill.fix { + transform:rotate(234deg) +} +.cui .gauge.gauge--large[data-percentage="66"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="66"] .gauge__circle .mask.full { + transform:rotate(118.8deg) +} +.cui .gauge.gauge--large[data-percentage="66"] .gauge__circle .fill.fix { + transform:rotate(237.6deg) +} +.cui .gauge.gauge--large[data-percentage="67"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="67"] .gauge__circle .mask.full { + transform:rotate(120.6deg) +} +.cui .gauge.gauge--large[data-percentage="67"] .gauge__circle .fill.fix { + transform:rotate(241.2deg) +} +.cui .gauge.gauge--large[data-percentage="68"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="68"] .gauge__circle .mask.full { + transform:rotate(122.4deg) +} +.cui .gauge.gauge--large[data-percentage="68"] .gauge__circle .fill.fix { + transform:rotate(244.8deg) +} +.cui .gauge.gauge--large[data-percentage="69"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="69"] .gauge__circle .mask.full { + transform:rotate(124.2deg) +} +.cui .gauge.gauge--large[data-percentage="69"] .gauge__circle .fill.fix { + transform:rotate(248.4deg) +} +.cui .gauge.gauge--large[data-percentage="70"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="70"] .gauge__circle .mask.full { + transform:rotate(126deg) +} +.cui .gauge.gauge--large[data-percentage="70"] .gauge__circle .fill.fix { + transform:rotate(252deg) +} +.cui .gauge.gauge--large[data-percentage="71"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="71"] .gauge__circle .mask.full { + transform:rotate(127.8deg) +} +.cui .gauge.gauge--large[data-percentage="71"] .gauge__circle .fill.fix { + transform:rotate(255.6deg) +} +.cui .gauge.gauge--large[data-percentage="72"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="72"] .gauge__circle .mask.full { + transform:rotate(129.6deg) +} +.cui .gauge.gauge--large[data-percentage="72"] .gauge__circle .fill.fix { + transform:rotate(259.2deg) +} +.cui .gauge.gauge--large[data-percentage="73"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="73"] .gauge__circle .mask.full { + transform:rotate(131.4deg) +} +.cui .gauge.gauge--large[data-percentage="73"] .gauge__circle .fill.fix { + transform:rotate(262.8deg) +} +.cui .gauge.gauge--large[data-percentage="74"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="74"] .gauge__circle .mask.full { + transform:rotate(133.2deg) +} +.cui .gauge.gauge--large[data-percentage="74"] .gauge__circle .fill.fix { + transform:rotate(266.4deg) +} +.cui .gauge.gauge--large[data-percentage="75"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="75"] .gauge__circle .mask.full { + transform:rotate(135deg) +} +.cui .gauge.gauge--large[data-percentage="75"] .gauge__circle .fill.fix { + transform:rotate(270deg) +} +.cui .gauge.gauge--large[data-percentage="76"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="76"] .gauge__circle .mask.full { + transform:rotate(136.8deg) +} +.cui .gauge.gauge--large[data-percentage="76"] .gauge__circle .fill.fix { + transform:rotate(273.6deg) +} +.cui .gauge.gauge--large[data-percentage="77"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="77"] .gauge__circle .mask.full { + transform:rotate(138.6deg) +} +.cui .gauge.gauge--large[data-percentage="77"] .gauge__circle .fill.fix { + transform:rotate(277.2deg) +} +.cui .gauge.gauge--large[data-percentage="78"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="78"] .gauge__circle .mask.full { + transform:rotate(140.4deg) +} +.cui .gauge.gauge--large[data-percentage="78"] .gauge__circle .fill.fix { + transform:rotate(280.8deg) +} +.cui .gauge.gauge--large[data-percentage="79"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="79"] .gauge__circle .mask.full { + transform:rotate(142.2deg) +} +.cui .gauge.gauge--large[data-percentage="79"] .gauge__circle .fill.fix { + transform:rotate(284.4deg) +} +.cui .gauge.gauge--large[data-percentage="80"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="80"] .gauge__circle .mask.full { + transform:rotate(144deg) +} +.cui .gauge.gauge--large[data-percentage="80"] .gauge__circle .fill.fix { + transform:rotate(288deg) +} +.cui .gauge.gauge--large[data-percentage="81"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="81"] .gauge__circle .mask.full { + transform:rotate(145.8deg) +} +.cui .gauge.gauge--large[data-percentage="81"] .gauge__circle .fill.fix { + transform:rotate(291.6deg) +} +.cui .gauge.gauge--large[data-percentage="82"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="82"] .gauge__circle .mask.full { + transform:rotate(147.6deg) +} +.cui .gauge.gauge--large[data-percentage="82"] .gauge__circle .fill.fix { + transform:rotate(295.2deg) +} +.cui .gauge.gauge--large[data-percentage="83"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="83"] .gauge__circle .mask.full { + transform:rotate(149.4deg) +} +.cui .gauge.gauge--large[data-percentage="83"] .gauge__circle .fill.fix { + transform:rotate(298.8deg) +} +.cui .gauge.gauge--large[data-percentage="84"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="84"] .gauge__circle .mask.full { + transform:rotate(151.2deg) +} +.cui .gauge.gauge--large[data-percentage="84"] .gauge__circle .fill.fix { + transform:rotate(302.4deg) +} +.cui .gauge.gauge--large[data-percentage="85"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="85"] .gauge__circle .mask.full { + transform:rotate(153deg) +} +.cui .gauge.gauge--large[data-percentage="85"] .gauge__circle .fill.fix { + transform:rotate(306deg) +} +.cui .gauge.gauge--large[data-percentage="86"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="86"] .gauge__circle .mask.full { + transform:rotate(154.8deg) +} +.cui .gauge.gauge--large[data-percentage="86"] .gauge__circle .fill.fix { + transform:rotate(309.6deg) +} +.cui .gauge.gauge--large[data-percentage="87"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="87"] .gauge__circle .mask.full { + transform:rotate(156.6deg) +} +.cui .gauge.gauge--large[data-percentage="87"] .gauge__circle .fill.fix { + transform:rotate(313.2deg) +} +.cui .gauge.gauge--large[data-percentage="88"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="88"] .gauge__circle .mask.full { + transform:rotate(158.4deg) +} +.cui .gauge.gauge--large[data-percentage="88"] .gauge__circle .fill.fix { + transform:rotate(316.8deg) +} +.cui .gauge.gauge--large[data-percentage="89"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="89"] .gauge__circle .mask.full { + transform:rotate(160.2deg) +} +.cui .gauge.gauge--large[data-percentage="89"] .gauge__circle .fill.fix { + transform:rotate(320.4deg) +} +.cui .gauge.gauge--large[data-percentage="90"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="90"] .gauge__circle .mask.full { + transform:rotate(162deg) +} +.cui .gauge.gauge--large[data-percentage="90"] .gauge__circle .fill.fix { + transform:rotate(324deg) +} +.cui .gauge.gauge--large[data-percentage="91"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="91"] .gauge__circle .mask.full { + transform:rotate(163.8deg) +} +.cui .gauge.gauge--large[data-percentage="91"] .gauge__circle .fill.fix { + transform:rotate(327.6deg) +} +.cui .gauge.gauge--large[data-percentage="92"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="92"] .gauge__circle .mask.full { + transform:rotate(165.6deg) +} +.cui .gauge.gauge--large[data-percentage="92"] .gauge__circle .fill.fix { + transform:rotate(331.2deg) +} +.cui .gauge.gauge--large[data-percentage="93"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="93"] .gauge__circle .mask.full { + transform:rotate(167.4deg) +} +.cui .gauge.gauge--large[data-percentage="93"] .gauge__circle .fill.fix { + transform:rotate(334.8deg) +} +.cui .gauge.gauge--large[data-percentage="94"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="94"] .gauge__circle .mask.full { + transform:rotate(169.2deg) +} +.cui .gauge.gauge--large[data-percentage="94"] .gauge__circle .fill.fix { + transform:rotate(338.4deg) +} +.cui .gauge.gauge--large[data-percentage="95"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="95"] .gauge__circle .mask.full { + transform:rotate(171deg) +} +.cui .gauge.gauge--large[data-percentage="95"] .gauge__circle .fill.fix { + transform:rotate(342deg) +} +.cui .gauge.gauge--large[data-percentage="96"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="96"] .gauge__circle .mask.full { + transform:rotate(172.8deg) +} +.cui .gauge.gauge--large[data-percentage="96"] .gauge__circle .fill.fix { + transform:rotate(345.6deg) +} +.cui .gauge.gauge--large[data-percentage="97"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="97"] .gauge__circle .mask.full { + transform:rotate(174.6deg) +} +.cui .gauge.gauge--large[data-percentage="97"] .gauge__circle .fill.fix { + transform:rotate(349.2deg) +} +.cui .gauge.gauge--large[data-percentage="98"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="98"] .gauge__circle .mask.full { + transform:rotate(176.4deg) +} +.cui .gauge.gauge--large[data-percentage="98"] .gauge__circle .fill.fix { + transform:rotate(352.8deg) +} +.cui .gauge.gauge--large[data-percentage="99"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="99"] .gauge__circle .mask.full { + transform:rotate(178.2deg) +} +.cui .gauge.gauge--large[data-percentage="99"] .gauge__circle .fill.fix { + transform:rotate(356.4deg) +} +.cui .gauge.gauge--large[data-percentage="100"] .gauge__circle .fill, +.cui .gauge.gauge--large[data-percentage="100"] .gauge__circle .mask.full { + transform:rotate(180deg) +} +.cui .gauge.gauge--large[data-percentage="100"] .gauge__circle .fill.fix { + transform:rotate(360deg) +} +.cui .gauge .gauge__circle .mask .fill, +.cui .gauge.gauge--primary .gauge__circle .mask .fill { + background-color:var(--cui-theme-primary) +} +.cui .gauge.gauge--secondary .gauge__circle .mask .fill { + background-color:var(--cui-theme-secondary) +} +.cui .gauge.gauge--tertiary .gauge__circle .mask .fill { + background-color:var(--cui-theme-tertiary) +} +.cui .gauge.gauge--success .gauge__circle .mask .fill { + background-color:var(--cui-theme-success) +} +.cui .gauge.gauge--info .gauge__circle .mask .fill { + background-color:var(--cui-theme-info) +} +.cui .gauge.gauge--warning-alt .gauge__circle .mask .fill { + background-color:var(--cui-theme-warning-alt) +} +.cui .gauge.gauge--warning .gauge__circle .mask .fill { + background-color:var(--cui-theme-warning) +} +.cui .gauge.gauge--danger .gauge__circle .mask .fill { + background-color:var(--cui-theme-danger) +} +.cui .gauge.gauge--dark .gauge__circle .mask .fill { + background-color:var(--cui-theme-dark) +} +.cui .gauge.gauge--light .gauge__circle .mask .fill { + background-color:var(--cui-theme-light) +} +.cui .gauge-container { + display:inline-flex; + flex-direction:column; + align-items:center; + margin:unset +} +.cui .gauge-container.disabled { + opacity:.75 +} +.cui .loader:focus, +.cui .loading-dots:focus, +.cui .loading-spinner:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-focus-color),var(--cui-focus-opacity)); + opacity:1 +} +.cui .gauge-container .gauge__label { + margin-top:var(--cui-spacing-half) +} +.cui .loader:focus, +.cui .loading-spinner:focus { + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .loader.loader--small .wrapper .wheel, +.cui .loading-spinner.loader--small .wrapper .wheel { + position:relative; + visibility:visible; + width:32px; + height:32px; + border-radius:100%; + border:var(--cui-loader-border-thickness) solid var(--cui-loader-border-color); + border-left-color:var(--cui-loader-spinner-color); + -webkit-animation:load var(--cui-loader-animation-speed) infinite linear; + animation:load var(--cui-loader-animation-speed) infinite linear +} +.cui .loader .wrapper .wheel, +.cui .loading-spinner .wrapper .wheel { + position:relative; + visibility:visible; + width:64px; + height:64px; + border-radius:100%; + border:var(--cui-loader-border-thickness) solid var(--cui-loader-border-color); + border-left-color:var(--cui-loader-spinner-color); + -webkit-animation:load var(--cui-loader-animation-speed) infinite linear; + animation:load var(--cui-loader-animation-speed) infinite linear +} +.cui .loader.loader--large .wrapper .wheel, +.cui .loading-spinner.loader--large .wrapper .wheel { + position:relative; + visibility:visible; + width:128px; + height:128px; + border-radius:100%; + border:var(--cui-loader-border-thickness) solid var(--cui-loader-border-color); + border-left-color:var(--cui-loader-spinner-color); + -webkit-animation:load var(--cui-loader-animation-speed) infinite linear; + animation:load var(--cui-loader-animation-speed) infinite linear +} +.cui .loading-dots { + margin:0; + padding:0; + text-align:center +} +.cui .loading-dots:focus { + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .loading-dots>span { + display:inline-block; + width:12px; + height:12px; + margin:0 2px; + border-radius:50%; + -webkit-animation:pulse 1.4s infinite both ease-in-out; + animation:pulse 1.4s infinite both ease-in-out +} +.cui .loading-dots>span:nth-child(1) { + -webkit-animation-delay:-.32s; + animation-delay:-.32s +} +.cui .loading-dots>span:nth-child(2) { + -webkit-animation-delay:-.16s; + animation-delay:-.16s +} +.cui .loading-dots.loading-dots--primary>span, +.cui .loading-dots>span { + background:var(--cui-theme-primary) +} +.cui .loading-dots.loading-dots--secondary>span { + background:var(--cui-theme-secondary) +} +.cui .loading-dots.loading-dots--tertiary>span { + background:var(--cui-theme-tertiary) +} +.cui .loading-dots.loading-dots--success>span { + background:var(--cui-theme-success) +} +.cui .loading-dots.loading-dots--info>span { + background:var(--cui-theme-info) +} +.cui .loading-dots.loading-dots--warning-alt>span { + background:var(--cui-theme-warning-alt) +} +.cui .loading-dots.loading-dots--warning>span { + background:var(--cui-theme-warning) +} +.cui .loading-dots.loading-dots--danger>span { + background:var(--cui-theme-danger) +} +.cui .loading-dots.loading-dots--dark>span { + background:var(--cui-theme-dark) +} +.cui .loading-dots.loading-dots--light>span { + background:var(--cui-theme-light) +} +.cui .modal { + --cui-modal-alignment:left; + --cui-modal-alignment-footer:right; + --cui-modal-background:var(--cui-color-white); + --cui-modal-icon-size:calc(var(--cui-icon-size) * 1.5); + --cui-modal-padding:var(--cui-spacing); + --cui-modal-shadow:var(--cui-shadow-outset-lg); + --cui-modal-title-font-size:var(--cui-font-size-24); + --cui-modal-width:768px; + --cui-modal-width-small:576px; + --cui-modal-width-large:992px; + position:fixed; + top:0; + right:0; + bottom:0; + left:0; + overflow-y:auto; + -webkit-overflow-scrolling:touch; + z-index:1040; + transition:opacity var(--cui-animate-speed) var(--cui-animate-timing-function); + background-color:rgba(0,0,0,var(--cui-backdrop-opacity)) +} +.cui .pagination>li.active>a, +.cui .pagination>li>a { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function) +} +.cui .modal .modal__dialog { + position:relative; + width:var(--cui-modal-width); + max-width:calc(100% - .01px); + margin:0 auto; + padding:var(--cui-spacing); + -webkit-animation:blowup .3s cubic-bezier(.165,.84,.44,1) forwards,fade-in .25s 1 linear; + animation:blowup .3s cubic-bezier(.165,.84,.44,1) forwards,fade-in .25s 1 linear +} +@media (max-width:575.98px) { + .cui .modal .modal__dialog { + padding:var(--cui-spacing-qtr) + } +} +.cui .modal .modal__content { + position:relative; + display:block; + text-align:var(--cui-modal-alignment); + padding:var(--cui-modal-padding); + background-color:var(--cui-modal-background); + color:var(--cui-font-color); + border-radius:var(--cui-border-radius); + border:0; + box-shadow:var(--cui-modal-shadow) +} +.cui .pagination>li>a:focus, +.cui .rating__star:focus { + box-shadow:0 0 0 var(--cui-focus-thickness) rgba(var(--cui-focus-color),var(--cui-focus-opacity)); + opacity:1 +} +@media (max-width:767.98px) { + .cui .modal .modal__content { + padding:calc(var(--cui-spacing) * .5) + } +} +.cui .modal .modal__content .modal__close { + font-size:var(--cui-modal-icon-size); + position:absolute; + right:var(--cui-spacing); + top:var(--cui-spacing); + color:var(--cui-inactive-color) +} +.cui .modal .modal__content .modal__close:hover { + color:var(--cui-active-color); + text-decoration:none +} +.cui .modal .modal__content .modal__header { + margin-bottom:var(--cui-spacing) +} +.cui .modal .modal__content .modal__header .modal__title { + font-size:var(--cui-modal-title-font-size) +} +.cui .modal .modal__content .modal__footer { + margin-top:var(--cui-spacing); + text-align:var(--cui-modal-alignment-footer) +} +.cui .modal.modal--small .modal__dialog { + width:var(--cui-modal-width-small) +} +.cui .modal.modal--large .modal__dialog { + width:var(--cui-modal-width-large) +} +.cui .modal.modal--full .modal__dialog { + width:100%; + padding:0 +} +.cui .modal.modal--fluid .modal__dialog { + padding:0; + height:100%; + width:100% +} +.cui .modal.modal--fluid .modal__content { + height:100% +} +.cui .pagination { + --cui-pagination-background-active:var(--cui-accent-color); + --cui-pagination-background-inactive:var(--cui-background-alt); + --cui-pagination-border-hover:var(--cui-border-thickness) solid var(--cui-accent-color); + --cui-pagination-border-inactive:1px solid transparent; + --cui-pagination-color-active:var(--cui-color-dark); + --cui-pagination-margin:var(--cui-spacing-qtr); + --cui-pagination-default-font-size:var(--cui-font-size); + --cui-pagination-default-padding:0px var(--cui-spacing-half); + --cui-pagination-default-height:30px; + --cui-pagination-small-font-size:var(--cui-font-size-sm); + --cui-pagination-small-padding:0px 8px; + --cui-pagination-small-height:calc(var(--cui-icon-size) * 1.5); + --cui-pagination-medium-font-size:var(--cui-pagination-default-font-size); + --cui-pagination-medium-padding:var(--cui-pagination-default-padding); + --cui-pagination-large-font-size:var(--cui-font-size-lg); + --cui-pagination-large-padding:0px 12px; + --cui-pagination-large-height:40px; + display:inline-flex; + list-style:none; + margin:var(--cui-spacing) 0 0; + padding:0 +} +.cui .pagination>li>a { + font-size:var(--cui-pagination-default-font-size); + padding:var(--cui-pagination-default-padding); + height:var(--cui-pagination-default-height); + display:inline-flex; + align-items:center; + border:var(--cui-pagination-border-inactive); + background:var(--cui-pagination-background-inactive); + border-radius:var(--cui-border-radius); + color:var(--cui-inactive-color); + text-decoration:none +} +.cui .pagination.pagination--small>li>a { + font-size:var(--cui-pagination-small-font-size); + padding:var(--cui-pagination-small-padding); + height:var(--cui-pagination-small-height) +} +.cui .pagination.pagination--medium>li>a { + font-size:var(--cui-pagination-medium-font-size); + padding:var(--cui-pagination-medium-padding); + height:var(--cui-pagination-medium-height) +} +.cui .pagination.pagination--large>li>a { + font-size:var(--cui-pagination-large-font-size); + padding:var(--cui-pagination-large-padding); + height:var(--cui-pagination-large-height) +} +.cui .pagination>li>a:active, +.cui .pagination>li>a:focus, +.cui .pagination>li>a:hover, +.cui .pagination>li>a:visited { + color:var(--cui-active-color); + text-decoration:none +} +.cui .pagination>li>a:focus, +.cui .pagination>li>a:hover { + border:var(--cui-pagination-border-hover) +} +.cui .pagination>li>a:focus { + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .pagination>li+li { + margin-left:var(--cui-pagination-margin) +} +.cui .pagination>li .icon-more { + height:100%; + display:flex; + align-items:center; + padding:0 var(--cui-spacing-half) +} +.cui .pagination>li.active>a { + background-color:var(--cui-pagination-background-active); + color:var(--cui-pagination-color-active) +} +.cui .pagination.pagination--rounded>li>a { + border-radius:var(--cui-border-radius-round) +} +.cui .progressbar { + --cui-progressbar-background:var(--cui-background-active); + --cui-progressbar-border-radius:var(--cui-border-radius-round); + --cui-progressbar-default-size:var(--cui-spacing-qtr); + --cui-progressbar-small-size:2px; + --cui-progressbar-medum-size:var(--cui-progressbar-default-size); + --cui-progressbar-large-size:var(--cui-spacing-half); + display:block; + position:relative; + margin:0; + padding:0 +} +.cui .progressbar:before, +.cui .progressbar__fill { + position:absolute; + top:0; + left:0; + border-radius:var(--cui-progressbar-border-radius); + right:0; + bottom:0 +} +.cui .progressbar:before { + width:auto; + content:''; + background:var(--cui-progressbar-background) +} +.cui .progressbar__fill { + transition:width var(--cui-animate-speed) linear +} +.cui .progressbar .progressbar__fill, +.cui .progressbar:before { + height:var(--cui-progressbar-default-size) +} +.cui .progressbar .progressbar__label { + padding-top:var(--cui-progressbar-default-size) +} +.cui .progressbar.progressbar--small .progressbar__fill, +.cui .progressbar.progressbar--small:before { + height:var(--cui-progressbar-small-size) +} +.cui .progressbar.progressbar--small .progressbar__label { + padding-top:var(--cui-progressbar-small-size) +} +.cui .progressbar.progressbar--medium .progressbar__fill, +.cui .progressbar.progressbar--medium:before { + height:var(--cui-progressbar-medium-size) +} +.cui .progressbar.progressbar--medium .progressbar__label { + padding-top:var(--cui-progressbar-medium-size) +} +.cui .progressbar.progressbar--large .progressbar__fill, +.cui .progressbar.progressbar--large:before { + height:var(--cui-progressbar-large-size) +} +.cui .progressbar.progressbar--large .progressbar__label { + padding-top:var(--cui-progressbar-large-size) +} +.cui .progressbar .progressbar__fill, +.cui .progressbar.progressbar--primary .progressbar__fill { + background-color:var(--cui-theme-primary) +} +.cui .progressbar.progressbar--secondary .progressbar__fill { + background-color:var(--cui-theme-secondary) +} +.cui .progressbar.progressbar--tertiary .progressbar__fill { + background-color:var(--cui-theme-tertiary) +} +.cui .progressbar.progressbar--success .progressbar__fill { + background-color:var(--cui-theme-success) +} +.cui .progressbar.progressbar--info .progressbar__fill { + background-color:var(--cui-theme-info) +} +.cui .progressbar.progressbar--warning-alt .progressbar__fill { + background-color:var(--cui-theme-warning-alt) +} +.cui .progressbar.progressbar--warning .progressbar__fill { + background-color:var(--cui-theme-warning) +} +.cui .progressbar.progressbar--danger .progressbar__fill { + background-color:var(--cui-theme-danger) +} +.cui .progressbar.progressbar--dark .progressbar__fill { + background-color:var(--cui-theme-dark) +} +.cui .progressbar.progressbar--light .progressbar__fill { + background-color:var(--cui-theme-light) +} +.cui .progressbar[data-percentage="0"] .progressbar__fill { + width:0% +} +.cui .progressbar[data-percentage="1"] .progressbar__fill { + width:1% +} +.cui .progressbar[data-percentage="2"] .progressbar__fill { + width:2% +} +.cui .progressbar[data-percentage="3"] .progressbar__fill { + width:3% +} +.cui .progressbar[data-percentage="4"] .progressbar__fill { + width:4% +} +.cui .progressbar[data-percentage="5"] .progressbar__fill { + width:5% +} +.cui .progressbar[data-percentage="6"] .progressbar__fill { + width:6% +} +.cui .progressbar[data-percentage="7"] .progressbar__fill { + width:7% +} +.cui .progressbar[data-percentage="8"] .progressbar__fill { + width:8% +} +.cui .progressbar[data-percentage="9"] .progressbar__fill { + width:9% +} +.cui .progressbar[data-percentage="10"] .progressbar__fill { + width:10% +} +.cui .progressbar[data-percentage="11"] .progressbar__fill { + width:11% +} +.cui .progressbar[data-percentage="12"] .progressbar__fill { + width:12% +} +.cui .progressbar[data-percentage="13"] .progressbar__fill { + width:13% +} +.cui .progressbar[data-percentage="14"] .progressbar__fill { + width:14% +} +.cui .progressbar[data-percentage="15"] .progressbar__fill { + width:15% +} +.cui .progressbar[data-percentage="16"] .progressbar__fill { + width:16% +} +.cui .progressbar[data-percentage="17"] .progressbar__fill { + width:17% +} +.cui .progressbar[data-percentage="18"] .progressbar__fill { + width:18% +} +.cui .progressbar[data-percentage="19"] .progressbar__fill { + width:19% +} +.cui .progressbar[data-percentage="20"] .progressbar__fill { + width:20% +} +.cui .progressbar[data-percentage="21"] .progressbar__fill { + width:21% +} +.cui .progressbar[data-percentage="22"] .progressbar__fill { + width:22% +} +.cui .progressbar[data-percentage="23"] .progressbar__fill { + width:23% +} +.cui .progressbar[data-percentage="24"] .progressbar__fill { + width:24% +} +.cui .progressbar[data-percentage="25"] .progressbar__fill { + width:25% +} +.cui .progressbar[data-percentage="26"] .progressbar__fill { + width:26% +} +.cui .progressbar[data-percentage="27"] .progressbar__fill { + width:27% +} +.cui .progressbar[data-percentage="28"] .progressbar__fill { + width:28% +} +.cui .progressbar[data-percentage="29"] .progressbar__fill { + width:29% +} +.cui .progressbar[data-percentage="30"] .progressbar__fill { + width:30% +} +.cui .progressbar[data-percentage="31"] .progressbar__fill { + width:31% +} +.cui .progressbar[data-percentage="32"] .progressbar__fill { + width:32% +} +.cui .progressbar[data-percentage="33"] .progressbar__fill { + width:33% +} +.cui .progressbar[data-percentage="34"] .progressbar__fill { + width:34% +} +.cui .progressbar[data-percentage="35"] .progressbar__fill { + width:35% +} +.cui .progressbar[data-percentage="36"] .progressbar__fill { + width:36% +} +.cui .progressbar[data-percentage="37"] .progressbar__fill { + width:37% +} +.cui .progressbar[data-percentage="38"] .progressbar__fill { + width:38% +} +.cui .progressbar[data-percentage="39"] .progressbar__fill { + width:39% +} +.cui .progressbar[data-percentage="40"] .progressbar__fill { + width:40% +} +.cui .progressbar[data-percentage="41"] .progressbar__fill { + width:41% +} +.cui .progressbar[data-percentage="42"] .progressbar__fill { + width:42% +} +.cui .progressbar[data-percentage="43"] .progressbar__fill { + width:43% +} +.cui .progressbar[data-percentage="44"] .progressbar__fill { + width:44% +} +.cui .progressbar[data-percentage="45"] .progressbar__fill { + width:45% +} +.cui .progressbar[data-percentage="46"] .progressbar__fill { + width:46% +} +.cui .progressbar[data-percentage="47"] .progressbar__fill { + width:47% +} +.cui .progressbar[data-percentage="48"] .progressbar__fill { + width:48% +} +.cui .progressbar[data-percentage="49"] .progressbar__fill { + width:49% +} +.cui .progressbar[data-percentage="50"] .progressbar__fill { + width:50% +} +.cui .progressbar[data-percentage="51"] .progressbar__fill { + width:51% +} +.cui .progressbar[data-percentage="52"] .progressbar__fill { + width:52% +} +.cui .progressbar[data-percentage="53"] .progressbar__fill { + width:53% +} +.cui .progressbar[data-percentage="54"] .progressbar__fill { + width:54% +} +.cui .progressbar[data-percentage="55"] .progressbar__fill { + width:55% +} +.cui .progressbar[data-percentage="56"] .progressbar__fill { + width:56% +} +.cui .progressbar[data-percentage="57"] .progressbar__fill { + width:57% +} +.cui .progressbar[data-percentage="58"] .progressbar__fill { + width:58% +} +.cui .progressbar[data-percentage="59"] .progressbar__fill { + width:59% +} +.cui .progressbar[data-percentage="60"] .progressbar__fill { + width:60% +} +.cui .progressbar[data-percentage="61"] .progressbar__fill { + width:61% +} +.cui .progressbar[data-percentage="62"] .progressbar__fill { + width:62% +} +.cui .progressbar[data-percentage="63"] .progressbar__fill { + width:63% +} +.cui .progressbar[data-percentage="64"] .progressbar__fill { + width:64% +} +.cui .progressbar[data-percentage="65"] .progressbar__fill { + width:65% +} +.cui .progressbar[data-percentage="66"] .progressbar__fill { + width:66% +} +.cui .progressbar[data-percentage="67"] .progressbar__fill { + width:67% +} +.cui .progressbar[data-percentage="68"] .progressbar__fill { + width:68% +} +.cui .progressbar[data-percentage="69"] .progressbar__fill { + width:69% +} +.cui .progressbar[data-percentage="70"] .progressbar__fill { + width:70% +} +.cui .progressbar[data-percentage="71"] .progressbar__fill { + width:71% +} +.cui .progressbar[data-percentage="72"] .progressbar__fill { + width:72% +} +.cui .progressbar[data-percentage="73"] .progressbar__fill { + width:73% +} +.cui .progressbar[data-percentage="74"] .progressbar__fill { + width:74% +} +.cui .progressbar[data-percentage="75"] .progressbar__fill { + width:75% +} +.cui .progressbar[data-percentage="76"] .progressbar__fill { + width:76% +} +.cui .progressbar[data-percentage="77"] .progressbar__fill { + width:77% +} +.cui .progressbar[data-percentage="78"] .progressbar__fill { + width:78% +} +.cui .progressbar[data-percentage="79"] .progressbar__fill { + width:79% +} +.cui .progressbar[data-percentage="80"] .progressbar__fill { + width:80% +} +.cui .progressbar[data-percentage="81"] .progressbar__fill { + width:81% +} +.cui .progressbar[data-percentage="82"] .progressbar__fill { + width:82% +} +.cui .progressbar[data-percentage="83"] .progressbar__fill { + width:83% +} +.cui .progressbar[data-percentage="84"] .progressbar__fill { + width:84% +} +.cui .progressbar[data-percentage="85"] .progressbar__fill { + width:85% +} +.cui .progressbar[data-percentage="86"] .progressbar__fill { + width:86% +} +.cui .progressbar[data-percentage="87"] .progressbar__fill { + width:87% +} +.cui .progressbar[data-percentage="88"] .progressbar__fill { + width:88% +} +.cui .progressbar[data-percentage="89"] .progressbar__fill { + width:89% +} +.cui .progressbar[data-percentage="90"] .progressbar__fill { + width:90% +} +.cui .progressbar[data-percentage="91"] .progressbar__fill { + width:91% +} +.cui .progressbar[data-percentage="92"] .progressbar__fill { + width:92% +} +.cui .progressbar[data-percentage="93"] .progressbar__fill { + width:93% +} +.cui .progressbar[data-percentage="94"] .progressbar__fill { + width:94% +} +.cui .progressbar[data-percentage="95"] .progressbar__fill { + width:95% +} +.cui .progressbar[data-percentage="96"] .progressbar__fill { + width:96% +} +.cui .progressbar[data-percentage="97"] .progressbar__fill { + width:97% +} +.cui .progressbar[data-percentage="98"] .progressbar__fill { + width:98% +} +.cui .progressbar[data-percentage="99"] .progressbar__fill { + width:99% +} +.cui .progressbar[data-percentage="100"] .progressbar__fill { + width:100% +} +.cui .rating { + --cui-rating-color:var(--cui-accent-color); + --cui-rating-color-alt:var(--cui-theme-warning-alt); + --cui-rating-color-inactive:var(--cui-color-gray-300); + --cui-rating-icon-size:calc(var(--cui-icon-size) * 1.5); + --cui-rating-icon-size-small:var(--cui-font-size-20); + --cui-rating-icon-size-large:28px; + --cui-rating-margin:3px; + margin:0; + font-size:0 +} +.cui .rating:after { + clear:both!important; + content:""!important; + display:table!important +} +.cui .rating.rated { + pointer-events:none +} +.cui .rating.rating--alt .rating__star.active, +.cui .rating.rating--alt .rating__star:hover, +.cui .rating.rating--alt .rating__star:hover~.rating__star { + color:var(--cui-rating-color-alt) +} +.cui .rating.rating--small .rating__star { + font-size:var(--cui-rating-icon-size-small) +} +.cui .rating.rating--large .rating__star { + font-size:var(--cui-rating-icon-size-large) +} +.cui .rating__stars { + display:inline-block +} +.cui .rating__star { + float:right; + margin-right:var(--cui-rating-margin); + color:var(--cui-rating-color-inactive); + cursor:pointer; + font-size:var(--cui-rating-icon-size); + line-height:1; + transition:color var(--cui-animate-speed) var(--cui-animate-timing-function) +} +.cui .rating__star:first-child { + margin-right:0 +} +.cui .rating__star:focus { + outline:transparent var(--cui-focus-thickness); + outline-offset:1px; + outline-width:thin; + outline-style:none +} +.cui .rating__star.active, +.cui .rating__star:hover, +.cui .rating__star:hover~.rating__star { + color:var(--cui-rating-color); + text-decoration:none +} +.cui .rating__star.active { + -webkit-animation:bounce 1s linear; + animation:bounce 1s linear +} +.cui .steps, +.cui .ui-steps { + list-style:none; + display:flex; + align-items:top; + justify-content:space-around; + max-width:900px; + margin:0 auto var(--cui-spacing); + padding:var(--cui-spacing) 0; + text-align:center +} +.cui .steps .step .step__icon, +.cui .steps .ui-step .step__icon, +.cui .ui-steps .step .step__icon, +.cui .ui-steps .ui-step .step__icon { + background-color:var(--cui-background-active); + border:var(--cui-step-line-thickness-inactive) solid var(--cui-background-active); + color:var(--cui-font-color); + width:var(--cui-step-size); + min-width:var(--cui-step-size); + max-width:var(--cui-step-size); + height:var(--cui-step-size); + line-height:var(--cui-step-size); + font-size:var(--cui-step-font-size) +} +.cui .steps .step .step__label, +.cui .steps .ui-step .step__label, +.cui .ui-steps .step .step__label, +.cui .ui-steps .ui-step .step__label { + color:var(--cui-inactive-color) +} +.cui .steps .step.active, +.cui .steps .ui-step.active, +.cui .ui-steps .step.active, +.cui .ui-steps .ui-step.active { + color:var(--cui-theme-primary-color) +} +.cui .steps .step.active .step__icon, +.cui .steps .ui-step.active .step__icon, +.cui .ui-steps .step.active .step__icon, +.cui .ui-steps .ui-step.active .step__icon { + background-color:var(--cui-theme-primary); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-primary); + color:var(--cui-theme-primary-color); + font-weight:400 +} +.cui .steps .step.active .step__label, +.cui .steps .ui-step.active .step__label, +.cui .ui-steps .step.active .step__label, +.cui .ui-steps .ui-step.active .step__label { + color:var(--cui-font-color) +} +.cui .steps .step.active:before, +.cui .steps .ui-step.active:before, +.cui .ui-steps .step.active:before, +.cui .ui-steps .ui-step.active:before { + background:var(--cui-theme-primary) +} +.cui .steps .step.visited, +.cui .steps .ui-step.visited, +.cui .ui-steps .step.visited, +.cui .ui-steps .ui-step.visited { + color:var(--cui-theme-primary) +} +.cui .steps .step.visited .step__icon, +.cui .steps .ui-step.visited .step__icon, +.cui .ui-steps .step.visited .step__icon, +.cui .ui-steps .ui-step.visited .step__icon { + background-color:var(--cui-background-color); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-primary); + color:var(--cui-theme-primary) +} +.cui .steps .step.visited .step__label, +.cui .steps .ui-step.visited .step__label, +.cui .ui-steps .step.visited .step__label, +.cui .ui-steps .ui-step.visited .step__label { + color:var(--cui-font-color) +} +.cui .steps .step.visited.step--alt .step__icon, +.cui .steps .step.visited.ui-step--alt .step__icon, +.cui .steps .ui-step.visited.step--alt .step__icon, +.cui .steps .ui-step.visited.ui-step--alt .step__icon, +.cui .ui-steps .step.visited.step--alt .step__icon, +.cui .ui-steps .step.visited.ui-step--alt .step__icon, +.cui .ui-steps .ui-step.visited.step--alt .step__icon, +.cui .ui-steps .ui-step.visited.ui-step--alt .step__icon { + background:var(--cui-step-background-visited) +} +.cui .steps .step.visited:before, +.cui .steps .ui-step.visited:before, +.cui .ui-steps .step.visited:before, +.cui .ui-steps .ui-step.visited:before { + background:var(--cui-theme-primary) +} +.cui .steps.steps--primary .step .step__icon, +.cui .steps.steps--primary .ui-step .step__icon, +.cui .steps.ui-steps--primary .step .step__icon, +.cui .steps.ui-steps--primary .ui-step .step__icon, +.cui .ui-steps.steps--primary .step .step__icon, +.cui .ui-steps.steps--primary .ui-step .step__icon, +.cui .ui-steps.ui-steps--primary .step .step__icon, +.cui .ui-steps.ui-steps--primary .ui-step .step__icon { + background-color:var(--cui-background-active); + border:var(--cui-step-line-thickness-inactive) solid var(--cui-background-active); + color:var(--cui-font-color) +} +.cui .steps.steps--primary .step .step__label, +.cui .steps.steps--primary .ui-step .step__label, +.cui .steps.ui-steps--primary .step .step__label, +.cui .steps.ui-steps--primary .ui-step .step__label, +.cui .ui-steps.steps--primary .step .step__label, +.cui .ui-steps.steps--primary .ui-step .step__label, +.cui .ui-steps.ui-steps--primary .step .step__label, +.cui .ui-steps.ui-steps--primary .ui-step .step__label { + color:var(--cui-inactive-color) +} +.cui .steps.steps--primary .step.active, +.cui .steps.steps--primary .ui-step.active, +.cui .steps.ui-steps--primary .step.active, +.cui .steps.ui-steps--primary .ui-step.active, +.cui .ui-steps.steps--primary .step.active, +.cui .ui-steps.steps--primary .ui-step.active, +.cui .ui-steps.ui-steps--primary .step.active, +.cui .ui-steps.ui-steps--primary .ui-step.active { + color:var(--cui-theme-primary-color) +} +.cui .steps.steps--primary .step.active .step__icon, +.cui .steps.steps--primary .ui-step.active .step__icon, +.cui .steps.ui-steps--primary .step.active .step__icon, +.cui .steps.ui-steps--primary .ui-step.active .step__icon, +.cui .ui-steps.steps--primary .step.active .step__icon, +.cui .ui-steps.steps--primary .ui-step.active .step__icon, +.cui .ui-steps.ui-steps--primary .step.active .step__icon, +.cui .ui-steps.ui-steps--primary .ui-step.active .step__icon { + background-color:var(--cui-theme-primary); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-primary); + color:var(--cui-theme-primary-color); + font-weight:400 +} +.cui .steps.steps--primary .step.active .step__label, +.cui .steps.steps--primary .ui-step.active .step__label, +.cui .steps.ui-steps--primary .step.active .step__label, +.cui .steps.ui-steps--primary .ui-step.active .step__label, +.cui .ui-steps.steps--primary .step.active .step__label, +.cui .ui-steps.steps--primary .ui-step.active .step__label, +.cui .ui-steps.ui-steps--primary .step.active .step__label, +.cui .ui-steps.ui-steps--primary .ui-step.active .step__label { + color:var(--cui-font-color) +} +.cui .steps.steps--primary .step.active:before, +.cui .steps.steps--primary .ui-step.active:before, +.cui .steps.ui-steps--primary .step.active:before, +.cui .steps.ui-steps--primary .ui-step.active:before, +.cui .ui-steps.steps--primary .step.active:before, +.cui .ui-steps.steps--primary .ui-step.active:before, +.cui .ui-steps.ui-steps--primary .step.active:before, +.cui .ui-steps.ui-steps--primary .ui-step.active:before { + background:var(--cui-theme-primary) +} +.cui .steps.steps--primary .step.visited, +.cui .steps.steps--primary .ui-step.visited, +.cui .steps.ui-steps--primary .step.visited, +.cui .steps.ui-steps--primary .ui-step.visited, +.cui .ui-steps.steps--primary .step.visited, +.cui .ui-steps.steps--primary .ui-step.visited, +.cui .ui-steps.ui-steps--primary .step.visited, +.cui .ui-steps.ui-steps--primary .ui-step.visited { + color:var(--cui-theme-primary) +} +.cui .steps.steps--primary .step.visited .step__icon, +.cui .steps.steps--primary .ui-step.visited .step__icon, +.cui .steps.ui-steps--primary .step.visited .step__icon, +.cui .steps.ui-steps--primary .ui-step.visited .step__icon, +.cui .ui-steps.steps--primary .step.visited .step__icon, +.cui .ui-steps.steps--primary .ui-step.visited .step__icon, +.cui .ui-steps.ui-steps--primary .step.visited .step__icon, +.cui .ui-steps.ui-steps--primary .ui-step.visited .step__icon { + background-color:var(--cui-background-color); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-primary); + color:var(--cui-theme-primary) +} +.cui .steps.steps--primary .step.visited .step__label, +.cui .steps.steps--primary .ui-step.visited .step__label, +.cui .steps.ui-steps--primary .step.visited .step__label, +.cui .steps.ui-steps--primary .ui-step.visited .step__label, +.cui .ui-steps.steps--primary .step.visited .step__label, +.cui .ui-steps.steps--primary .ui-step.visited .step__label, +.cui .ui-steps.ui-steps--primary .step.visited .step__label, +.cui .ui-steps.ui-steps--primary .ui-step.visited .step__label { + color:var(--cui-font-color) +} +.cui .steps.steps--primary .step.visited.step--alt .step__icon, +.cui .steps.steps--primary .step.visited.ui-step--alt .step__icon, +.cui .steps.steps--primary .ui-step.visited.step--alt .step__icon, +.cui .steps.steps--primary .ui-step.visited.ui-step--alt .step__icon, +.cui .steps.ui-steps--primary .step.visited.step--alt .step__icon, +.cui .steps.ui-steps--primary .step.visited.ui-step--alt .step__icon, +.cui .steps.ui-steps--primary .ui-step.visited.step--alt .step__icon, +.cui .steps.ui-steps--primary .ui-step.visited.ui-step--alt .step__icon, +.cui .ui-steps.steps--primary .step.visited.step--alt .step__icon, +.cui .ui-steps.steps--primary .step.visited.ui-step--alt .step__icon, +.cui .ui-steps.steps--primary .ui-step.visited.step--alt .step__icon, +.cui .ui-steps.steps--primary .ui-step.visited.ui-step--alt .step__icon, +.cui .ui-steps.ui-steps--primary .step.visited.step--alt .step__icon, +.cui .ui-steps.ui-steps--primary .step.visited.ui-step--alt .step__icon, +.cui .ui-steps.ui-steps--primary .ui-step.visited.step--alt .step__icon, +.cui .ui-steps.ui-steps--primary .ui-step.visited.ui-step--alt .step__icon { + background:var(--cui-step-background-visited) +} +.cui .steps.steps--primary .step.visited:before, +.cui .steps.steps--primary .ui-step.visited:before, +.cui .steps.ui-steps--primary .step.visited:before, +.cui .steps.ui-steps--primary .ui-step.visited:before, +.cui .ui-steps.steps--primary .step.visited:before, +.cui .ui-steps.steps--primary .ui-step.visited:before, +.cui .ui-steps.ui-steps--primary .step.visited:before, +.cui .ui-steps.ui-steps--primary .ui-step.visited:before { + background:var(--cui-theme-primary) +} +.cui .steps.steps--secondary .step .step__icon, +.cui .steps.steps--secondary .ui-step .step__icon, +.cui .steps.ui-steps--secondary .step .step__icon, +.cui .steps.ui-steps--secondary .ui-step .step__icon, +.cui .ui-steps.steps--secondary .step .step__icon, +.cui .ui-steps.steps--secondary .ui-step .step__icon, +.cui .ui-steps.ui-steps--secondary .step .step__icon, +.cui .ui-steps.ui-steps--secondary .ui-step .step__icon { + background-color:var(--cui-background-active); + border:var(--cui-step-line-thickness-inactive) solid var(--cui-background-active); + color:var(--cui-font-color) +} +.cui .steps.steps--secondary .step .step__label, +.cui .steps.steps--secondary .ui-step .step__label, +.cui .steps.ui-steps--secondary .step .step__label, +.cui .steps.ui-steps--secondary .ui-step .step__label, +.cui .ui-steps.steps--secondary .step .step__label, +.cui .ui-steps.steps--secondary .ui-step .step__label, +.cui .ui-steps.ui-steps--secondary .step .step__label, +.cui .ui-steps.ui-steps--secondary .ui-step .step__label { + color:var(--cui-inactive-color) +} +.cui .steps.steps--secondary .step.active, +.cui .steps.steps--secondary .ui-step.active, +.cui .steps.ui-steps--secondary .step.active, +.cui .steps.ui-steps--secondary .ui-step.active, +.cui .ui-steps.steps--secondary .step.active, +.cui .ui-steps.steps--secondary .ui-step.active, +.cui .ui-steps.ui-steps--secondary .step.active, +.cui .ui-steps.ui-steps--secondary .ui-step.active { + color:var(--cui-theme-secondary-color) +} +.cui .steps.steps--secondary .step.active .step__icon, +.cui .steps.steps--secondary .ui-step.active .step__icon, +.cui .steps.ui-steps--secondary .step.active .step__icon, +.cui .steps.ui-steps--secondary .ui-step.active .step__icon, +.cui .ui-steps.steps--secondary .step.active .step__icon, +.cui .ui-steps.steps--secondary .ui-step.active .step__icon, +.cui .ui-steps.ui-steps--secondary .step.active .step__icon, +.cui .ui-steps.ui-steps--secondary .ui-step.active .step__icon { + background-color:var(--cui-theme-secondary); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-secondary); + color:var(--cui-theme-secondary-color); + font-weight:400 +} +.cui .steps.steps--secondary .step.active .step__label, +.cui .steps.steps--secondary .ui-step.active .step__label, +.cui .steps.ui-steps--secondary .step.active .step__label, +.cui .steps.ui-steps--secondary .ui-step.active .step__label, +.cui .ui-steps.steps--secondary .step.active .step__label, +.cui .ui-steps.steps--secondary .ui-step.active .step__label, +.cui .ui-steps.ui-steps--secondary .step.active .step__label, +.cui .ui-steps.ui-steps--secondary .ui-step.active .step__label { + color:var(--cui-font-color) +} +.cui .steps.steps--secondary .step.active:before, +.cui .steps.steps--secondary .ui-step.active:before, +.cui .steps.ui-steps--secondary .step.active:before, +.cui .steps.ui-steps--secondary .ui-step.active:before, +.cui .ui-steps.steps--secondary .step.active:before, +.cui .ui-steps.steps--secondary .ui-step.active:before, +.cui .ui-steps.ui-steps--secondary .step.active:before, +.cui .ui-steps.ui-steps--secondary .ui-step.active:before { + background:var(--cui-theme-secondary) +} +.cui .steps.steps--secondary .step.visited, +.cui .steps.steps--secondary .ui-step.visited, +.cui .steps.ui-steps--secondary .step.visited, +.cui .steps.ui-steps--secondary .ui-step.visited, +.cui .ui-steps.steps--secondary .step.visited, +.cui .ui-steps.steps--secondary .ui-step.visited, +.cui .ui-steps.ui-steps--secondary .step.visited, +.cui .ui-steps.ui-steps--secondary .ui-step.visited { + color:var(--cui-theme-secondary) +} +.cui .steps.steps--secondary .step.visited .step__icon, +.cui .steps.steps--secondary .ui-step.visited .step__icon, +.cui .steps.ui-steps--secondary .step.visited .step__icon, +.cui .steps.ui-steps--secondary .ui-step.visited .step__icon, +.cui .ui-steps.steps--secondary .step.visited .step__icon, +.cui .ui-steps.steps--secondary .ui-step.visited .step__icon, +.cui .ui-steps.ui-steps--secondary .step.visited .step__icon, +.cui .ui-steps.ui-steps--secondary .ui-step.visited .step__icon { + background-color:var(--cui-background-color); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-secondary); + color:var(--cui-theme-secondary) +} +.cui .steps.steps--secondary .step.visited .step__label, +.cui .steps.steps--secondary .ui-step.visited .step__label, +.cui .steps.ui-steps--secondary .step.visited .step__label, +.cui .steps.ui-steps--secondary .ui-step.visited .step__label, +.cui .ui-steps.steps--secondary .step.visited .step__label, +.cui .ui-steps.steps--secondary .ui-step.visited .step__label, +.cui .ui-steps.ui-steps--secondary .step.visited .step__label, +.cui .ui-steps.ui-steps--secondary .ui-step.visited .step__label { + color:var(--cui-font-color) +} +.cui .steps.steps--secondary .step.visited.step--alt .step__icon, +.cui .steps.steps--secondary .step.visited.ui-step--alt .step__icon, +.cui .steps.steps--secondary .ui-step.visited.step--alt .step__icon, +.cui .steps.steps--secondary .ui-step.visited.ui-step--alt .step__icon, +.cui .steps.ui-steps--secondary .step.visited.step--alt .step__icon, +.cui .steps.ui-steps--secondary .step.visited.ui-step--alt .step__icon, +.cui .steps.ui-steps--secondary .ui-step.visited.step--alt .step__icon, +.cui .steps.ui-steps--secondary .ui-step.visited.ui-step--alt .step__icon, +.cui .ui-steps.steps--secondary .step.visited.step--alt .step__icon, +.cui .ui-steps.steps--secondary .step.visited.ui-step--alt .step__icon, +.cui .ui-steps.steps--secondary .ui-step.visited.step--alt .step__icon, +.cui .ui-steps.steps--secondary .ui-step.visited.ui-step--alt .step__icon, +.cui .ui-steps.ui-steps--secondary .step.visited.step--alt .step__icon, +.cui .ui-steps.ui-steps--secondary .step.visited.ui-step--alt .step__icon, +.cui .ui-steps.ui-steps--secondary .ui-step.visited.step--alt .step__icon, +.cui .ui-steps.ui-steps--secondary .ui-step.visited.ui-step--alt .step__icon { + background:var(--cui-step-background-visited) +} +.cui .steps.steps--secondary .step.visited:before, +.cui .steps.steps--secondary .ui-step.visited:before, +.cui .steps.ui-steps--secondary .step.visited:before, +.cui .steps.ui-steps--secondary .ui-step.visited:before, +.cui .ui-steps.steps--secondary .step.visited:before, +.cui .ui-steps.steps--secondary .ui-step.visited:before, +.cui .ui-steps.ui-steps--secondary .step.visited:before, +.cui .ui-steps.ui-steps--secondary .ui-step.visited:before { + background:var(--cui-theme-secondary) +} +.cui .steps.steps--success .step .step__icon, +.cui .steps.steps--success .ui-step .step__icon, +.cui .steps.ui-steps--success .step .step__icon, +.cui .steps.ui-steps--success .ui-step .step__icon, +.cui .ui-steps.steps--success .step .step__icon, +.cui .ui-steps.steps--success .ui-step .step__icon, +.cui .ui-steps.ui-steps--success .step .step__icon, +.cui .ui-steps.ui-steps--success .ui-step .step__icon { + background-color:var(--cui-background-active); + border:var(--cui-step-line-thickness-inactive) solid var(--cui-background-active); + color:var(--cui-font-color) +} +.cui .steps.steps--success .step .step__label, +.cui .steps.steps--success .ui-step .step__label, +.cui .steps.ui-steps--success .step .step__label, +.cui .steps.ui-steps--success .ui-step .step__label, +.cui .ui-steps.steps--success .step .step__label, +.cui .ui-steps.steps--success .ui-step .step__label, +.cui .ui-steps.ui-steps--success .step .step__label, +.cui .ui-steps.ui-steps--success .ui-step .step__label { + color:var(--cui-inactive-color) +} +.cui .steps.steps--success .step.active, +.cui .steps.steps--success .ui-step.active, +.cui .steps.ui-steps--success .step.active, +.cui .steps.ui-steps--success .ui-step.active, +.cui .ui-steps.steps--success .step.active, +.cui .ui-steps.steps--success .ui-step.active, +.cui .ui-steps.ui-steps--success .step.active, +.cui .ui-steps.ui-steps--success .ui-step.active { + color:var(--cui-theme-success-color) +} +.cui .steps.steps--success .step.active .step__icon, +.cui .steps.steps--success .ui-step.active .step__icon, +.cui .steps.ui-steps--success .step.active .step__icon, +.cui .steps.ui-steps--success .ui-step.active .step__icon, +.cui .ui-steps.steps--success .step.active .step__icon, +.cui .ui-steps.steps--success .ui-step.active .step__icon, +.cui .ui-steps.ui-steps--success .step.active .step__icon, +.cui .ui-steps.ui-steps--success .ui-step.active .step__icon { + background-color:var(--cui-theme-success); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-success); + color:var(--cui-theme-success-color); + font-weight:400 +} +.cui .steps.steps--success .step.active .step__label, +.cui .steps.steps--success .ui-step.active .step__label, +.cui .steps.ui-steps--success .step.active .step__label, +.cui .steps.ui-steps--success .ui-step.active .step__label, +.cui .ui-steps.steps--success .step.active .step__label, +.cui .ui-steps.steps--success .ui-step.active .step__label, +.cui .ui-steps.ui-steps--success .step.active .step__label, +.cui .ui-steps.ui-steps--success .ui-step.active .step__label { + color:var(--cui-font-color) +} +.cui .steps.steps--success .step.active:before, +.cui .steps.steps--success .ui-step.active:before, +.cui .steps.ui-steps--success .step.active:before, +.cui .steps.ui-steps--success .ui-step.active:before, +.cui .ui-steps.steps--success .step.active:before, +.cui .ui-steps.steps--success .ui-step.active:before, +.cui .ui-steps.ui-steps--success .step.active:before, +.cui .ui-steps.ui-steps--success .ui-step.active:before { + background:var(--cui-theme-success) +} +.cui .steps.steps--success .step.visited, +.cui .steps.steps--success .ui-step.visited, +.cui .steps.ui-steps--success .step.visited, +.cui .steps.ui-steps--success .ui-step.visited, +.cui .ui-steps.steps--success .step.visited, +.cui .ui-steps.steps--success .ui-step.visited, +.cui .ui-steps.ui-steps--success .step.visited, +.cui .ui-steps.ui-steps--success .ui-step.visited { + color:var(--cui-theme-success) +} +.cui .steps.steps--success .step.visited .step__icon, +.cui .steps.steps--success .ui-step.visited .step__icon, +.cui .steps.ui-steps--success .step.visited .step__icon, +.cui .steps.ui-steps--success .ui-step.visited .step__icon, +.cui .ui-steps.steps--success .step.visited .step__icon, +.cui .ui-steps.steps--success .ui-step.visited .step__icon, +.cui .ui-steps.ui-steps--success .step.visited .step__icon, +.cui .ui-steps.ui-steps--success .ui-step.visited .step__icon { + background-color:var(--cui-background-color); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-success); + color:var(--cui-theme-success) +} +.cui .steps.steps--success .step.visited .step__label, +.cui .steps.steps--success .ui-step.visited .step__label, +.cui .steps.ui-steps--success .step.visited .step__label, +.cui .steps.ui-steps--success .ui-step.visited .step__label, +.cui .ui-steps.steps--success .step.visited .step__label, +.cui .ui-steps.steps--success .ui-step.visited .step__label, +.cui .ui-steps.ui-steps--success .step.visited .step__label, +.cui .ui-steps.ui-steps--success .ui-step.visited .step__label { + color:var(--cui-font-color) +} +.cui .steps.steps--success .step.visited.step--alt .step__icon, +.cui .steps.steps--success .step.visited.ui-step--alt .step__icon, +.cui .steps.steps--success .ui-step.visited.step--alt .step__icon, +.cui .steps.steps--success .ui-step.visited.ui-step--alt .step__icon, +.cui .steps.ui-steps--success .step.visited.step--alt .step__icon, +.cui .steps.ui-steps--success .step.visited.ui-step--alt .step__icon, +.cui .steps.ui-steps--success .ui-step.visited.step--alt .step__icon, +.cui .steps.ui-steps--success .ui-step.visited.ui-step--alt .step__icon, +.cui .ui-steps.steps--success .step.visited.step--alt .step__icon, +.cui .ui-steps.steps--success .step.visited.ui-step--alt .step__icon, +.cui .ui-steps.steps--success .ui-step.visited.step--alt .step__icon, +.cui .ui-steps.steps--success .ui-step.visited.ui-step--alt .step__icon, +.cui .ui-steps.ui-steps--success .step.visited.step--alt .step__icon, +.cui .ui-steps.ui-steps--success .step.visited.ui-step--alt .step__icon, +.cui .ui-steps.ui-steps--success .ui-step.visited.step--alt .step__icon, +.cui .ui-steps.ui-steps--success .ui-step.visited.ui-step--alt .step__icon { + background:var(--cui-step-background-visited) +} +.cui .steps.steps--success .step.visited:before, +.cui .steps.steps--success .ui-step.visited:before, +.cui .steps.ui-steps--success .step.visited:before, +.cui .steps.ui-steps--success .ui-step.visited:before, +.cui .ui-steps.steps--success .step.visited:before, +.cui .ui-steps.steps--success .ui-step.visited:before, +.cui .ui-steps.ui-steps--success .step.visited:before, +.cui .ui-steps.ui-steps--success .ui-step.visited:before { + background:var(--cui-theme-success) +} +.cui .steps.steps--dark .step .step__icon, +.cui .steps.steps--dark .ui-step .step__icon, +.cui .steps.ui-steps--dark .step .step__icon, +.cui .steps.ui-steps--dark .ui-step .step__icon, +.cui .ui-steps.steps--dark .step .step__icon, +.cui .ui-steps.steps--dark .ui-step .step__icon, +.cui .ui-steps.ui-steps--dark .step .step__icon, +.cui .ui-steps.ui-steps--dark .ui-step .step__icon { + background-color:var(--cui-background-active); + border:var(--cui-step-line-thickness-inactive) solid var(--cui-background-active); + color:var(--cui-font-color) +} +.cui .steps.steps--dark .step .step__label, +.cui .steps.steps--dark .ui-step .step__label, +.cui .steps.ui-steps--dark .step .step__label, +.cui .steps.ui-steps--dark .ui-step .step__label, +.cui .ui-steps.steps--dark .step .step__label, +.cui .ui-steps.steps--dark .ui-step .step__label, +.cui .ui-steps.ui-steps--dark .step .step__label, +.cui .ui-steps.ui-steps--dark .ui-step .step__label { + color:var(--cui-inactive-color) +} +.cui .steps.steps--dark .step.active, +.cui .steps.steps--dark .ui-step.active, +.cui .steps.ui-steps--dark .step.active, +.cui .steps.ui-steps--dark .ui-step.active, +.cui .ui-steps.steps--dark .step.active, +.cui .ui-steps.steps--dark .ui-step.active, +.cui .ui-steps.ui-steps--dark .step.active, +.cui .ui-steps.ui-steps--dark .ui-step.active { + color:var(--cui-theme-dark-color) +} +.cui .steps.steps--dark .step.active .step__icon, +.cui .steps.steps--dark .ui-step.active .step__icon, +.cui .steps.ui-steps--dark .step.active .step__icon, +.cui .steps.ui-steps--dark .ui-step.active .step__icon, +.cui .ui-steps.steps--dark .step.active .step__icon, +.cui .ui-steps.steps--dark .ui-step.active .step__icon, +.cui .ui-steps.ui-steps--dark .step.active .step__icon, +.cui .ui-steps.ui-steps--dark .ui-step.active .step__icon { + background-color:var(--cui-theme-dark); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-dark); + color:var(--cui-theme-dark-color); + font-weight:400 +} +.cui .steps.steps--dark .step.active .step__label, +.cui .steps.steps--dark .ui-step.active .step__label, +.cui .steps.ui-steps--dark .step.active .step__label, +.cui .steps.ui-steps--dark .ui-step.active .step__label, +.cui .ui-steps.steps--dark .step.active .step__label, +.cui .ui-steps.steps--dark .ui-step.active .step__label, +.cui .ui-steps.ui-steps--dark .step.active .step__label, +.cui .ui-steps.ui-steps--dark .ui-step.active .step__label { + color:var(--cui-font-color) +} +.cui .steps.steps--dark .step.active:before, +.cui .steps.steps--dark .ui-step.active:before, +.cui .steps.ui-steps--dark .step.active:before, +.cui .steps.ui-steps--dark .ui-step.active:before, +.cui .ui-steps.steps--dark .step.active:before, +.cui .ui-steps.steps--dark .ui-step.active:before, +.cui .ui-steps.ui-steps--dark .step.active:before, +.cui .ui-steps.ui-steps--dark .ui-step.active:before { + background:var(--cui-theme-dark) +} +.cui .steps.steps--dark .step.visited, +.cui .steps.steps--dark .ui-step.visited, +.cui .steps.ui-steps--dark .step.visited, +.cui .steps.ui-steps--dark .ui-step.visited, +.cui .ui-steps.steps--dark .step.visited, +.cui .ui-steps.steps--dark .ui-step.visited, +.cui .ui-steps.ui-steps--dark .step.visited, +.cui .ui-steps.ui-steps--dark .ui-step.visited { + color:var(--cui-theme-dark) +} +.cui .steps.steps--dark .step.visited .step__icon, +.cui .steps.steps--dark .ui-step.visited .step__icon, +.cui .steps.ui-steps--dark .step.visited .step__icon, +.cui .steps.ui-steps--dark .ui-step.visited .step__icon, +.cui .ui-steps.steps--dark .step.visited .step__icon, +.cui .ui-steps.steps--dark .ui-step.visited .step__icon, +.cui .ui-steps.ui-steps--dark .step.visited .step__icon, +.cui .ui-steps.ui-steps--dark .ui-step.visited .step__icon { + background-color:var(--cui-background-color); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-dark); + color:var(--cui-theme-dark) +} +.cui .steps.steps--dark .step.visited .step__label, +.cui .steps.steps--dark .ui-step.visited .step__label, +.cui .steps.ui-steps--dark .step.visited .step__label, +.cui .steps.ui-steps--dark .ui-step.visited .step__label, +.cui .ui-steps.steps--dark .step.visited .step__label, +.cui .ui-steps.steps--dark .ui-step.visited .step__label, +.cui .ui-steps.ui-steps--dark .step.visited .step__label, +.cui .ui-steps.ui-steps--dark .ui-step.visited .step__label { + color:var(--cui-font-color) +} +.cui .steps.steps--dark .step.visited.step--alt .step__icon, +.cui .steps.steps--dark .step.visited.ui-step--alt .step__icon, +.cui .steps.steps--dark .ui-step.visited.step--alt .step__icon, +.cui .steps.steps--dark .ui-step.visited.ui-step--alt .step__icon, +.cui .steps.ui-steps--dark .step.visited.step--alt .step__icon, +.cui .steps.ui-steps--dark .step.visited.ui-step--alt .step__icon, +.cui .steps.ui-steps--dark .ui-step.visited.step--alt .step__icon, +.cui .steps.ui-steps--dark .ui-step.visited.ui-step--alt .step__icon, +.cui .ui-steps.steps--dark .step.visited.step--alt .step__icon, +.cui .ui-steps.steps--dark .step.visited.ui-step--alt .step__icon, +.cui .ui-steps.steps--dark .ui-step.visited.step--alt .step__icon, +.cui .ui-steps.steps--dark .ui-step.visited.ui-step--alt .step__icon, +.cui .ui-steps.ui-steps--dark .step.visited.step--alt .step__icon, +.cui .ui-steps.ui-steps--dark .step.visited.ui-step--alt .step__icon, +.cui .ui-steps.ui-steps--dark .ui-step.visited.step--alt .step__icon, +.cui .ui-steps.ui-steps--dark .ui-step.visited.ui-step--alt .step__icon { + background:var(--cui-step-background-visited) +} +.cui .steps.steps--dark .step.visited:before, +.cui .steps.steps--dark .ui-step.visited:before, +.cui .steps.ui-steps--dark .step.visited:before, +.cui .steps.ui-steps--dark .ui-step.visited:before, +.cui .ui-steps.steps--dark .step.visited:before, +.cui .ui-steps.steps--dark .ui-step.visited:before, +.cui .ui-steps.ui-steps--dark .step.visited:before, +.cui .ui-steps.ui-steps--dark .ui-step.visited:before { + background:var(--cui-theme-dark) +} +.cui .steps.steps--light .step .step__icon, +.cui .steps.steps--light .ui-step .step__icon, +.cui .steps.ui-steps--light .step .step__icon, +.cui .steps.ui-steps--light .ui-step .step__icon, +.cui .ui-steps.steps--light .step .step__icon, +.cui .ui-steps.steps--light .ui-step .step__icon, +.cui .ui-steps.ui-steps--light .step .step__icon, +.cui .ui-steps.ui-steps--light .ui-step .step__icon { + background-color:var(--cui-background-active); + border:var(--cui-step-line-thickness-inactive) solid var(--cui-background-active); + color:var(--cui-font-color) +} +.cui .steps.steps--light .step .step__label, +.cui .steps.steps--light .ui-step .step__label, +.cui .steps.ui-steps--light .step .step__label, +.cui .steps.ui-steps--light .ui-step .step__label, +.cui .ui-steps.steps--light .step .step__label, +.cui .ui-steps.steps--light .ui-step .step__label, +.cui .ui-steps.ui-steps--light .step .step__label, +.cui .ui-steps.ui-steps--light .ui-step .step__label { + color:var(--cui-inactive-color) +} +.cui .steps.steps--light .step.active, +.cui .steps.steps--light .ui-step.active, +.cui .steps.ui-steps--light .step.active, +.cui .steps.ui-steps--light .ui-step.active, +.cui .ui-steps.steps--light .step.active, +.cui .ui-steps.steps--light .ui-step.active, +.cui .ui-steps.ui-steps--light .step.active, +.cui .ui-steps.ui-steps--light .ui-step.active { + color:var(--cui-theme-light-color) +} +.cui .steps.steps--light .step.active .step__icon, +.cui .steps.steps--light .ui-step.active .step__icon, +.cui .steps.ui-steps--light .step.active .step__icon, +.cui .steps.ui-steps--light .ui-step.active .step__icon, +.cui .ui-steps.steps--light .step.active .step__icon, +.cui .ui-steps.steps--light .ui-step.active .step__icon, +.cui .ui-steps.ui-steps--light .step.active .step__icon, +.cui .ui-steps.ui-steps--light .ui-step.active .step__icon { + background-color:var(--cui-theme-light); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-light); + color:var(--cui-theme-light-color); + font-weight:400 +} +.cui .steps.steps--light .step.active .step__label, +.cui .steps.steps--light .ui-step.active .step__label, +.cui .steps.ui-steps--light .step.active .step__label, +.cui .steps.ui-steps--light .ui-step.active .step__label, +.cui .ui-steps.steps--light .step.active .step__label, +.cui .ui-steps.steps--light .ui-step.active .step__label, +.cui .ui-steps.ui-steps--light .step.active .step__label, +.cui .ui-steps.ui-steps--light .ui-step.active .step__label { + color:var(--cui-font-color) +} +.cui .steps.steps--light .step.active:before, +.cui .steps.steps--light .ui-step.active:before, +.cui .steps.ui-steps--light .step.active:before, +.cui .steps.ui-steps--light .ui-step.active:before, +.cui .ui-steps.steps--light .step.active:before, +.cui .ui-steps.steps--light .ui-step.active:before, +.cui .ui-steps.ui-steps--light .step.active:before, +.cui .ui-steps.ui-steps--light .ui-step.active:before { + background:var(--cui-theme-light) +} +.cui .steps.steps--light .step.visited, +.cui .steps.steps--light .ui-step.visited, +.cui .steps.ui-steps--light .step.visited, +.cui .steps.ui-steps--light .ui-step.visited, +.cui .ui-steps.steps--light .step.visited, +.cui .ui-steps.steps--light .ui-step.visited, +.cui .ui-steps.ui-steps--light .step.visited, +.cui .ui-steps.ui-steps--light .ui-step.visited { + color:var(--cui-theme-light) +} +.cui .steps.steps--light .step.visited .step__icon, +.cui .steps.steps--light .ui-step.visited .step__icon, +.cui .steps.ui-steps--light .step.visited .step__icon, +.cui .steps.ui-steps--light .ui-step.visited .step__icon, +.cui .ui-steps.steps--light .step.visited .step__icon, +.cui .ui-steps.steps--light .ui-step.visited .step__icon, +.cui .ui-steps.ui-steps--light .step.visited .step__icon, +.cui .ui-steps.ui-steps--light .ui-step.visited .step__icon { + background-color:var(--cui-background-color); + border:var(--cui-step-line-thickness-visited) solid var(--cui-theme-light); + color:var(--cui-theme-light) +} +.cui .steps.steps--light .step.visited .step__label, +.cui .steps.steps--light .ui-step.visited .step__label, +.cui .steps.ui-steps--light .step.visited .step__label, +.cui .steps.ui-steps--light .ui-step.visited .step__label, +.cui .ui-steps.steps--light .step.visited .step__label, +.cui .ui-steps.steps--light .ui-step.visited .step__label, +.cui .ui-steps.ui-steps--light .step.visited .step__label, +.cui .ui-steps.ui-steps--light .ui-step.visited .step__label { + color:var(--cui-font-color) +} +.cui .steps.steps--light .step.visited.step--alt .step__icon, +.cui .steps.steps--light .step.visited.ui-step--alt .step__icon, +.cui .steps.steps--light .ui-step.visited.step--alt .step__icon, +.cui .steps.steps--light .ui-step.visited.ui-step--alt .step__icon, +.cui .steps.ui-steps--light .step.visited.step--alt .step__icon, +.cui .steps.ui-steps--light .step.visited.ui-step--alt .step__icon, +.cui .steps.ui-steps--light .ui-step.visited.step--alt .step__icon, +.cui .steps.ui-steps--light .ui-step.visited.ui-step--alt .step__icon, +.cui .ui-steps.steps--light .step.visited.step--alt .step__icon, +.cui .ui-steps.steps--light .step.visited.ui-step--alt .step__icon, +.cui .ui-steps.steps--light .ui-step.visited.step--alt .step__icon, +.cui .ui-steps.steps--light .ui-step.visited.ui-step--alt .step__icon, +.cui .ui-steps.ui-steps--light .step.visited.step--alt .step__icon, +.cui .ui-steps.ui-steps--light .step.visited.ui-step--alt .step__icon, +.cui .ui-steps.ui-steps--light .ui-step.visited.step--alt .step__icon, +.cui .ui-steps.ui-steps--light .ui-step.visited.ui-step--alt .step__icon { + background:var(--cui-step-background-visited) +} +.cui .steps.steps--light .step.visited:before, +.cui .steps.steps--light .ui-step.visited:before, +.cui .steps.ui-steps--light .step.visited:before, +.cui .steps.ui-steps--light .ui-step.visited:before, +.cui .ui-steps.steps--light .step.visited:before, +.cui .ui-steps.steps--light .ui-step.visited:before, +.cui .ui-steps.ui-steps--light .step.visited:before, +.cui .ui-steps.ui-steps--light .ui-step.visited:before { + background:var(--cui-theme-light) +} +.cui .steps .step:before, +.cui .steps .ui-step:before, +.cui .ui-steps .step:before, +.cui .ui-steps .ui-step:before { + top:calc(var(--cui-step-size) * .5) +} +.cui .steps.steps--dot .step:before, +.cui .steps.steps--dot .ui-step:before, +.cui .steps.ui-steps--dot .step:before, +.cui .steps.ui-steps--dot .ui-step:before, +.cui .ui-steps.steps--dot .step:before, +.cui .ui-steps.steps--dot .ui-step:before, +.cui .ui-steps.ui-steps--dot .step:before, +.cui .ui-steps.ui-steps--dot .ui-step:before { + top:calc(var(--cui-step-size-dot) * .5) +} +.cui .steps.steps--dot .step .step__icon, +.cui .steps.steps--dot .ui-step .step__icon, +.cui .steps.ui-steps--dot .step .step__icon, +.cui .steps.ui-steps--dot .ui-step .step__icon, +.cui .ui-steps.steps--dot .step .step__icon, +.cui .ui-steps.steps--dot .ui-step .step__icon, +.cui .ui-steps.ui-steps--dot .step .step__icon, +.cui .ui-steps.ui-steps--dot .ui-step .step__icon { + width:var(--cui-step-size-dot); + min-width:var(--cui-step-size-dot); + max-width:var(--cui-step-size-dot); + height:var(--cui-step-size-dot); + line-height:var(--cui-step-size-dot); + font-size:var(--cui-step-font-size-dot) +} +.cui .steps.steps--dot.steps--vertical .step:before, +.cui .steps.steps--dot.steps--vertical .ui-step:before, +.cui .steps.steps--dot.ui-steps--vertical .step:before, +.cui .steps.steps--dot.ui-steps--vertical .ui-step:before, +.cui .steps.ui-steps--dot.steps--vertical .step:before, +.cui .steps.ui-steps--dot.steps--vertical .ui-step:before, +.cui .steps.ui-steps--dot.ui-steps--vertical .step:before, +.cui .steps.ui-steps--dot.ui-steps--vertical .ui-step:before, +.cui .ui-steps.steps--dot.steps--vertical .step:before, +.cui .ui-steps.steps--dot.steps--vertical .ui-step:before, +.cui .ui-steps.steps--dot.ui-steps--vertical .step:before, +.cui .ui-steps.steps--dot.ui-steps--vertical .ui-step:before, +.cui .ui-steps.ui-steps--dot.steps--vertical .step:before, +.cui .ui-steps.ui-steps--dot.steps--vertical .ui-step:before, +.cui .ui-steps.ui-steps--dot.ui-steps--vertical .step:before, +.cui .ui-steps.ui-steps--dot.ui-steps--vertical .ui-step:before { + left:calc(var(--cui-step-size-dot) * .5) +} +.cui .steps.steps--small .step:before, +.cui .steps.steps--small .ui-step:before, +.cui .steps.ui-steps--small .step:before, +.cui .steps.ui-steps--small .ui-step:before, +.cui .ui-steps.steps--small .step:before, +.cui .ui-steps.steps--small .ui-step:before, +.cui .ui-steps.ui-steps--small .step:before, +.cui .ui-steps.ui-steps--small .ui-step:before { + top:calc(var(--cui-step-size-small) * .5) +} +.cui .steps.steps--small .step .step__icon, +.cui .steps.steps--small .ui-step .step__icon, +.cui .steps.ui-steps--small .step .step__icon, +.cui .steps.ui-steps--small .ui-step .step__icon, +.cui .ui-steps.steps--small .step .step__icon, +.cui .ui-steps.steps--small .ui-step .step__icon, +.cui .ui-steps.ui-steps--small .step .step__icon, +.cui .ui-steps.ui-steps--small .ui-step .step__icon { + width:var(--cui-step-size-small); + min-width:var(--cui-step-size-small); + max-width:var(--cui-step-size-small); + height:var(--cui-step-size-small); + line-height:var(--cui-step-size-small); + font-size:var(--cui-step-font-size-small) +} +.cui .steps.steps--small.steps--vertical .step:before, +.cui .steps.steps--small.steps--vertical .ui-step:before, +.cui .steps.steps--small.ui-steps--vertical .step:before, +.cui .steps.steps--small.ui-steps--vertical .ui-step:before, +.cui .steps.ui-steps--small.steps--vertical .step:before, +.cui .steps.ui-steps--small.steps--vertical .ui-step:before, +.cui .steps.ui-steps--small.ui-steps--vertical .step:before, +.cui .steps.ui-steps--small.ui-steps--vertical .ui-step:before, +.cui .ui-steps.steps--small.steps--vertical .step:before, +.cui .ui-steps.steps--small.steps--vertical .ui-step:before, +.cui .ui-steps.steps--small.ui-steps--vertical .step:before, +.cui .ui-steps.steps--small.ui-steps--vertical .ui-step:before, +.cui .ui-steps.ui-steps--small.steps--vertical .step:before, +.cui .ui-steps.ui-steps--small.steps--vertical .ui-step:before, +.cui .ui-steps.ui-steps--small.ui-steps--vertical .step:before, +.cui .ui-steps.ui-steps--small.ui-steps--vertical .ui-step:before { + left:calc(var(--cui-step-size-small) * .5) +} +.cui .steps.steps--medium .step:before, +.cui .steps.steps--medium .ui-step:before, +.cui .steps.ui-steps--medium .step:before, +.cui .steps.ui-steps--medium .ui-step:before, +.cui .ui-steps.steps--medium .step:before, +.cui .ui-steps.steps--medium .ui-step:before, +.cui .ui-steps.ui-steps--medium .step:before, +.cui .ui-steps.ui-steps--medium .ui-step:before { + top:calc(var(--cui-step-size-medium) * .5) +} +.cui .steps.steps--medium .step .step__icon, +.cui .steps.steps--medium .ui-step .step__icon, +.cui .steps.ui-steps--medium .step .step__icon, +.cui .steps.ui-steps--medium .ui-step .step__icon, +.cui .ui-steps.steps--medium .step .step__icon, +.cui .ui-steps.steps--medium .ui-step .step__icon, +.cui .ui-steps.ui-steps--medium .step .step__icon, +.cui .ui-steps.ui-steps--medium .ui-step .step__icon { + width:var(--cui-step-size-medium); + min-width:var(--cui-step-size-medium); + max-width:var(--cui-step-size-medium); + height:var(--cui-step-size-medium); + line-height:var(--cui-step-size-medium); + font-size:var(--cui-step-font-size-medium) +} +.cui .steps.steps--medium.steps--vertical .step:before, +.cui .steps.steps--medium.steps--vertical .ui-step:before, +.cui .steps.steps--medium.ui-steps--vertical .step:before, +.cui .steps.steps--medium.ui-steps--vertical .ui-step:before, +.cui .steps.ui-steps--medium.steps--vertical .step:before, +.cui .steps.ui-steps--medium.steps--vertical .ui-step:before, +.cui .steps.ui-steps--medium.ui-steps--vertical .step:before, +.cui .steps.ui-steps--medium.ui-steps--vertical .ui-step:before, +.cui .ui-steps.steps--medium.steps--vertical .step:before, +.cui .ui-steps.steps--medium.steps--vertical .ui-step:before, +.cui .ui-steps.steps--medium.ui-steps--vertical .step:before, +.cui .ui-steps.steps--medium.ui-steps--vertical .ui-step:before, +.cui .ui-steps.ui-steps--medium.steps--vertical .step:before, +.cui .ui-steps.ui-steps--medium.steps--vertical .ui-step:before, +.cui .ui-steps.ui-steps--medium.ui-steps--vertical .step:before, +.cui .ui-steps.ui-steps--medium.ui-steps--vertical .ui-step:before { + left:calc(var(--cui-step-size-medium) * .5) +} +.cui .steps.steps--large .step:before, +.cui .steps.steps--large .ui-step:before, +.cui .steps.ui-steps--large .step:before, +.cui .steps.ui-steps--large .ui-step:before, +.cui .ui-steps.steps--large .step:before, +.cui .ui-steps.steps--large .ui-step:before, +.cui .ui-steps.ui-steps--large .step:before, +.cui .ui-steps.ui-steps--large .ui-step:before { + top:calc(var(--cui-step-size-large) * .5) +} +.cui .steps.steps--large .step .step__icon, +.cui .steps.steps--large .ui-step .step__icon, +.cui .steps.ui-steps--large .step .step__icon, +.cui .steps.ui-steps--large .ui-step .step__icon, +.cui .ui-steps.steps--large .step .step__icon, +.cui .ui-steps.steps--large .ui-step .step__icon, +.cui .ui-steps.ui-steps--large .step .step__icon, +.cui .ui-steps.ui-steps--large .ui-step .step__icon { + width:var(--cui-step-size-large); + min-width:var(--cui-step-size-large); + max-width:var(--cui-step-size-large); + height:var(--cui-step-size-large); + line-height:var(--cui-step-size-large); + font-size:var(--cui-step-font-size-large) +} +.cui .steps.steps--large.steps--vertical .step:before, +.cui .steps.steps--large.steps--vertical .ui-step:before, +.cui .steps.steps--large.ui-steps--vertical .step:before, +.cui .steps.steps--large.ui-steps--vertical .ui-step:before, +.cui .steps.ui-steps--large.steps--vertical .step:before, +.cui .steps.ui-steps--large.steps--vertical .ui-step:before, +.cui .steps.ui-steps--large.ui-steps--vertical .step:before, +.cui .steps.ui-steps--large.ui-steps--vertical .ui-step:before, +.cui .ui-steps.steps--large.steps--vertical .step:before, +.cui .ui-steps.steps--large.steps--vertical .ui-step:before, +.cui .ui-steps.steps--large.ui-steps--vertical .step:before, +.cui .ui-steps.steps--large.ui-steps--vertical .ui-step:before, +.cui .ui-steps.ui-steps--large.steps--vertical .step:before, +.cui .ui-steps.ui-steps--large.steps--vertical .ui-step:before, +.cui .ui-steps.ui-steps--large.ui-steps--vertical .step:before, +.cui .ui-steps.ui-steps--large.ui-steps--vertical .ui-step:before { + left:calc(var(--cui-step-size-large) * .5) +} +.cui .steps .step, +.cui .steps .ui-step, +.cui .ui-steps .step, +.cui .ui-steps .ui-step { + position:relative; + flex:1 +} +.cui .steps .step .step__icon, +.cui .steps .ui-step .step__icon, +.cui .ui-steps .step .step__icon, +.cui .ui-steps .ui-step .step__icon { + margin:0 auto var(--cui-spacing-half); + position:relative; + display:inline-flex; + align-items:center; + justify-content:center; + border-radius:50%; + z-index:1 +} +.cui .steps .step:first-child:before, +.cui .steps .ui-step:first-child:before, +.cui .ui-steps .step:first-child:before, +.cui .ui-steps .ui-step:first-child:before { + display:none +} +.cui .steps .step:before, +.cui .steps .ui-step:before, +.cui .ui-steps .step:before, +.cui .ui-steps .ui-step:before { + display:block; + position:absolute; + content:''; + width:100%; + height:var(--cui-step-line-thickness-inactive); + left:-50%; + background:var(--cui-border-color) +} +.cui .steps .step--alt .step__icon, +.cui .steps .ui-step--alt .step__icon, +.cui .ui-steps .step--alt .step__icon, +.cui .ui-steps .ui-step--alt .step__icon { + background:var(--cui-step-background-visited) +} +.cui .steps.steps--vertical, +.cui .steps.ui-steps--vertical, +.cui .ui-steps.steps--vertical, +.cui .ui-steps.ui-steps--vertical { + display:inline; + text-align:left +} +.cui .steps.steps--vertical .step, +.cui .steps.steps--vertical .ui-step, +.cui .steps.ui-steps--vertical .step, +.cui .steps.ui-steps--vertical .ui-step, +.cui .ui-steps.steps--vertical .step, +.cui .ui-steps.steps--vertical .ui-step, +.cui .ui-steps.ui-steps--vertical .step, +.cui .ui-steps.ui-steps--vertical .ui-step { + display:flex; + padding-bottom:var(--cui-spacing) +} +.cui .steps.steps--vertical .step .step__icon, +.cui .steps.steps--vertical .ui-step .step__icon, +.cui .steps.ui-steps--vertical .step .step__icon, +.cui .steps.ui-steps--vertical .ui-step .step__icon, +.cui .ui-steps.steps--vertical .step .step__icon, +.cui .ui-steps.steps--vertical .ui-step .step__icon, +.cui .ui-steps.ui-steps--vertical .step .step__icon, +.cui .ui-steps.ui-steps--vertical .ui-step .step__icon { + flex:1; + margin:0 +} +.cui .steps.steps--vertical .step .step__label, +.cui .steps.steps--vertical .ui-step .step__label, +.cui .steps.ui-steps--vertical .step .step__label, +.cui .steps.ui-steps--vertical .ui-step .step__label, +.cui .ui-steps.steps--vertical .step .step__label, +.cui .ui-steps.steps--vertical .ui-step .step__label, +.cui .ui-steps.ui-steps--vertical .step .step__label, +.cui .ui-steps.ui-steps--vertical .ui-step .step__label { + flex:2; + align-self:center; + padding-left:var(--cui-spacing); + color:var(--cui-font-color) +} +.cui .steps.steps--vertical .step:first-child:before, +.cui .steps.steps--vertical .ui-step:first-child:before, +.cui .steps.ui-steps--vertical .step:first-child:before, +.cui .steps.ui-steps--vertical .ui-step:first-child:before, +.cui .ui-steps.steps--vertical .step:first-child:before, +.cui .ui-steps.steps--vertical .ui-step:first-child:before, +.cui .ui-steps.ui-steps--vertical .step:first-child:before, +.cui .ui-steps.ui-steps--vertical .ui-step:first-child:before { + display:block +} +.cui .steps.steps--vertical .step:last-child:before, +.cui .steps.steps--vertical .ui-step:last-child:before, +.cui .steps.ui-steps--vertical .step:last-child:before, +.cui .steps.ui-steps--vertical .ui-step:last-child:before, +.cui .ui-steps.steps--vertical .step:last-child:before, +.cui .ui-steps.steps--vertical .ui-step:last-child:before, +.cui .ui-steps.ui-steps--vertical .step:last-child:before, +.cui .ui-steps.ui-steps--vertical .ui-step:last-child:before { + display:none +} +.cui .steps.steps--vertical .step:before, +.cui .steps.steps--vertical .ui-step:before, +.cui .steps.ui-steps--vertical .step:before, +.cui .steps.ui-steps--vertical .ui-step:before, +.cui .ui-steps.steps--vertical .step:before, +.cui .ui-steps.steps--vertical .ui-step:before, +.cui .ui-steps.ui-steps--vertical .step:before, +.cui .ui-steps.ui-steps--vertical .ui-step:before { + height:100%; + width:var(--cui-step-line-thickness-inactive); + top:0; + left:calc(var(--cui-step-size) * .5) +} +.cui .tabs { + --cui-tab-background-active:var(--cui-background-color); + --cui-tab-border-active:var(--cui-accent-color); + --cui-tab-padding:var(--cui-spacing-half); + --cui-tab-spacing:var(--cui-spacing); + --cui-vertical-tab-padding:var(--cui-spacing-half) var(--cui-spacing); + box-shadow:0 -1px 0 var(--cui-border-color) inset +} +.cui .nav-tabs, +.cui .tabs { + list-style:none; + display:block; + position:relative; + overflow-x:auto; + overflow-y:hidden; + white-space:nowrap; + padding:0 +} +.cui .nav-tabs a:active, +.cui .nav-tabs a:focus, +.cui .tabs a:active, +.cui .tabs a:focus { + text-decoration:none +} +.cui .nav-tabs>li, +.cui .tabs>li { + display:inline-block +} +.cui .nav-tabs>li+li, +.cui .tabs>li+li { + margin-left:var(--cui-tab-spacing) +} +.cui .nav-tabs>li+li.divider, +.cui .tabs>li+li.divider { + border-top:var(--cui-border); + margin-top:var(--cui-spacing-half); + padding-top:var(--cui-spacing-half) +} +.cui .nav-tabs.tabs--bordered>li, +.cui .nav-tabs.tabs--justified>li+li, +.cui .tabs.tabs--bordered>li, +.cui .tabs.tabs--justified>li+li { + margin:0 +} +.cui .nav-tabs>li.active>a, +.cui .nav-tabs>li:hover>a, +.cui .tabs>li.active>a, +.cui .tabs>li:hover>a { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function); + box-shadow:0 calc(var(--cui-accent-thickness) * -1) 0 var(--cui-tab-border-active) inset; + color:var(--cui-active-color) +} +.cui .nav-tabs>li>a, +.cui .tabs>li>a { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function); + position:relative; + display:flex; + align-items:center; + padding:15px 0; + color:var(--cui-inactive-color); + text-align:center; + text-decoration:none; + user-select:none; + background-color:transparent; + box-shadow:0 none +} +.cui .nav-tabs>li>a:hover, +.cui .tabs>li>a:hover { + color:var(--cui-active-color); + text-decoration:none +} +.cui .nav-tabs>li>a:focus, +.cui .tabs>li>a:focus { + outline:0; + box-shadow:0 calc(var(--cui-accent-thickness) * -1) 0 var(--cui-tab-border-active) inset; + color:var(--cui-active-color) +} +.cui .nav-tabs.tabs--right, +.cui .tabs.tabs--right { + text-align:right +} +.cui .nav-tabs.tabs--centered, +.cui .tabs.tabs--centered { + text-align:center +} +.cui .nav-tabs.tabs--justified, +.cui .tabs.tabs--justified { + display:flex; + flex-wrap:wrap; + width:100% +} +.cui .nav-tabs.tabs--justified>li, +.cui .tabs.tabs--justified>li { + flex:1; + min-width:1px +} +.cui .nav-tabs.tabs--justified>li>a, +.cui .tabs.tabs--justified>li>a { + display:block; + text-align:center +} +.cui .nav-tabs.tabs--vertical, +.cui .tabs.tabs--vertical { + box-shadow:none; + border-right:var(--cui-border); + overflow-x:hidden; + overflow-y:auto +} +.cui .header, +.cui .nav-tabs.tabs--embossed, +.cui .tabs.tabs--embossed { + overflow:visible +} +.cui .nav-tabs.tabs--vertical>li, +.cui .tabs.tabs--vertical>li { + display:block; + vertical-align:unset +} +.cui .nav-tabs.tabs--vertical>li+li, +.cui .tabs.tabs--vertical>li+li { + margin-left:0; + margin-right:0 +} +.cui .nav-tabs.tabs--vertical>li>a, +.cui .tabs.tabs--vertical>li>a { + display:flex; + align-items:center; + padding:var(--cui-vertical-tab-padding); + transition:color .5s,background-color .25s,box-shadow .5s +} +.cui .nav-tabs.tabs--vertical>li>a:focus, +.cui .nav-tabs.tabs--vertical>li>a:hover, +.cui .tabs.tabs--vertical>li>a:focus, +.cui .tabs.tabs--vertical>li>a:hover { + background-color:var(--cui-background-hover); + box-shadow:inset calc(var(--cui-accent-thickness) * -1) 0 0 var(--cui-tab-border-active) +} +.cui .nav-tabs.tabs--vertical>li.active>a, +.cui .tabs.tabs--vertical>li.active>a { + background-color:var(--cui-background-active); + box-shadow:inset calc(var(--cui-accent-thickness) * -1) 0 0 var(--cui-tab-border-active) +} +.cui .nav-tabs.tabs--vertical>li.active:hover>a, +.cui .tabs.tabs--vertical>li.active:hover>a { + color:var(--cui-active-color) +} +.cui .nav-tabs.tabs--vertical.tabs--right, +.cui .tabs.tabs--vertical.tabs--right { + border-left:var(--cui-border); + border-right:none +} +.cui .nav-tabs.tabs--vertical.tabs--right>li.active>a, +.cui .nav-tabs.tabs--vertical.tabs--right>li>a:focus, +.cui .nav-tabs.tabs--vertical.tabs--right>li>a:hover, +.cui .tabs.tabs--vertical.tabs--right>li.active>a, +.cui .tabs.tabs--vertical.tabs--right>li>a:focus, +.cui .tabs.tabs--vertical.tabs--right>li>a:hover { + box-shadow:inset calc(var(--cui-accent-thickness) * 1) 0 0 var(--cui-tab-border-active) +} +.cui .nav-tabs.tabs--bordered>li+li, +.cui .tabs.tabs--bordered>li+li { + margin-left:-1px +} +.cui .nav-tabs.tabs--bordered>li:first-child a, +.cui .tabs.tabs--bordered>li:first-child a { + border-top-left-radius:var(--cui-border-radius) +} +.cui .nav-tabs.tabs--bordered>li:last-child a, +.cui .tabs.tabs--bordered>li:last-child a { + border-top-right-radius:var(--cui-border-radius) +} +.cui .nav-tabs.tabs--bordered>li>a, +.cui .tabs.tabs--bordered>li>a { + display:flex; + justify-content:center; + background-color:var(--cui-background-inactive); + border:var(--cui-border); + padding:var(--cui-spacing-half) var(--cui-spacing); + color:var(--cui-active-color) +} +.cui .nav-tabs.tabs--bordered>li>a:focus, +.cui .nav-tabs.tabs--bordered>li>a:hover, +.cui .tabs.tabs--bordered>li>a:focus, +.cui .tabs.tabs--bordered>li>a:hover { + color:var(--cui-active-color); + box-shadow:none +} +.cui .nav-tabs.tabs--bordered>li.active>a, +.cui .tabs.tabs--bordered>li.active>a { + color:var(--cui-active-color); + box-shadow:none; + background-color:var(--cui-tab-background-active); + border-bottom-color:var(--cui-tab-background-active) +} +.cui .nav-tabs.tabs--embossed>li, +.cui .tabs.tabs--embossed>li { + margin:0 +} +.cui .nav-tabs.tabs--embossed>li>a, +.cui .tabs.tabs--embossed>li>a { + flex-flow:column; + padding-left:var(--cui-spacing); + padding-right:var(--cui-spacing) +} +.cui .nav-tabs.tabs--embossed>li.active, +.cui .tabs.tabs--embossed>li.active { + box-shadow:0 10px 17px 0 var(--cui-shadow-outset-color); + -webkit-clip-path:polygon(-20% 0,120% 0,120% 100%,-20% 100%); + clip-path:polygon(-20% 0,120% 0,120% 100%,-20% 100%) +} +.cui .nav-tabs.tabs--inline, +.cui .tabs.tabs--inline { + display:inline-flex; + box-shadow:none +} +.cui .nav-tabs.tabs--scrollspy>li a:hover, +.cui .nav-tabs.tabs--scrollspy>li.active>a, +.cui .tabs.tabs--scrollspy>li a:hover, +.cui .tabs.tabs--scrollspy>li.active>a { + background-color:transparent +} +.cui .tab-pane { + margin-top:calc(var(--cui-spacing) * .5); + display:none +} +.cui .tab-pane:after { + clear:both!important; + content:""!important; + display:table!important +} +.cui .tab-pane.active { + display:block; + -webkit-animation:fade-in .5s; + animation:fade-in .5s +} +.cui ul.tabs.list li+li { + margin:0 +} +.cui .toast { + --cui-toast-background:var(--cui-background-color); + --cui-toast-icon-size:calc(var(--cui-icon-size) * 1.5); + --cui-toast-close-icon-size:var(--cui-icon-size); + --cui-toast-padding:var(--cui-spacing); + --cui-toast-max-width:320px; + --cui-toast-zindex:901; + display:flex; + position:relative; + max-width:var(--cui-toast-max-width); + background-color:var(--cui-toast-background); + border-radius:var(--cui-border-radius); + box-shadow:var(--cui-shadow-outset-lg); + padding:var(--cui-toast-padding); + z-index:var(--cui-toast-zindex) +} +.cui .toast .toast__close, +.cui .toast .toast__icon, +.cui .toast .toast__message { + align-self:flex-start +} +.cui .toast .toast__close { + color:var(--cui-inactive-color); + font-size:var(--cui-toast-close-icon-size); + line-height:1; + padding-left:var(--cui-toast-padding) +} +.cui .toast .toast__close:hover { + color:var(--cui-active-color); + text-decoration:none +} +.cui .toast .toast__icon { + font-size:var(--cui-toast-icon-size); + line-height:1; + padding-right:var(--cui-toast-padding) +} +.cui .toast .toast__title { + font-weight:700 +} +.cui .timeline { + --cui-timeline-icon-size:var(--cui-spacing-dbl); + --cui-timeline-line-color:var(--cui-border-color); + --cui-timeline-line-width:var(--cui-border-thickness); + --cui-timeline-padding:var(--cui-spacing); + position:relative +} +.cui .timeline:before { + position:absolute; + top:0; + right:0; + bottom:0; + height:auto; + content:''; + background:var(--cui-timeline-line-color); + left:calc(calc(var(--cui-timeline-icon-size) * .5) - calc(var(--cui-timeline-line-width) * .5)); + width:var(--cui-timeline-line-width); + z-index:-1 +} +.cui .timeline .timeline__item { + position:relative; + display:inline-flex; + width:100% +} +.cui .timeline .timeline__item+.timeline__item { + margin-top:var(--cui-spacing) +} +.cui .timeline .timeline__item .timeline__time { + display:none; + color:var(--cui-inactive-color) +} +.cui .timeline .timeline__item .timeline__icon { + display:flex; + flex-shrink:0; + justify-content:center; + width:var(--cui-timeline-icon-size); + height:var(--cui-timeline-icon-size); + margin-top:var(--cui-spacing) +} +.cui .timeline .timeline__item .timeline__content { + display:block; + position:relative; + background-color:var(--cui-background-inactive); + border-radius:var(--cui-border-radius); + padding:var(--cui-timeline-padding); + margin-left:var(--cui-spacing) +} +.cui .timeline .timeline__item .timeline__content:before { + position:absolute; + right:0; + bottom:0; + content:''; + pointer-events:none; + height:var(--cui-spacing); + width:var(--cui-spacing); + background-color:var(--cui-background-inactive); + transform:rotate(45deg); + top:var(--cui-spacing); + left:calc(var(--cui-spacing-half) * -1); + opacity:1 +} +.cui .timeline .timeline__item .timeline__icon.timeline--danger:before, +.cui .timeline .timeline__item .timeline__icon.timeline--info:before, +.cui .timeline .timeline__item .timeline__icon.timeline--success:before, +.cui .timeline .timeline__item .timeline__icon.timeline--warning:before { + position:absolute; + right:0; + bottom:0; + width:auto; + height:auto; + content:''; + content:""; + left:17px; + top:17px +} +.cui .timeline .timeline__item .timeline__icon.timeline--danger:before { + color:var(--cui-theme-danger) +} +.cui .timeline .timeline__item .timeline__icon.timeline--info:before { + color:var(--cui-theme-info) +} +.cui .timeline .timeline__item .timeline__icon.timeline--success:before { + color:var(--cui-theme-success) +} +.cui .timeline .timeline__item .timeline__icon.timeline--warning:before { + color:var(--cui-theme-warning) +} +@media (min-width:992px) { + .cui .timeline.timeline--centered:before { + left:calc(50% - calc(var(--cui-timeline-line-width) * .5)); + right:auto + } + .cui .timeline.timeline--centered .timeline__content { + width:45%; + margin:0 + } + .cui .timeline.timeline--centered .timeline__item .timeline__icon { + order:1; + margin-left:calc(5% - calc(var(--cui-timeline-icon-size) * .5)); + margin-right:calc(5% - calc(var(--cui-timeline-icon-size) * .5)) + } + .cui .timeline.timeline--centered .timeline__item:nth-child(even) { + flex-direction:row-reverse + } + .cui .timeline.timeline--centered .timeline__item:nth-child(odd) .timeline__content::before { + left:calc(100% - var(--cui-spacing-half)) + } + .cui .timeline.timeline--centered .timeline__time { + display:block; + position:relative; + left:0; + order:1; + margin-top:var(--cui-spacing) + } +} +.cui .timeline.timeline--right:before { + left:auto; + right:calc(calc(var(--cui-timeline-icon-size) * .5) - calc(var(--cui-timeline-line-width) * .5)) +} +.cui .timeline.timeline--right .timeline__content { + margin-right:var(--cui-spacing) +} +.cui .timeline.timeline--right .timeline__content:before { + left:calc(100% - 10px) +} +.cui [data-balloon]:after { + background-color:var(--cui-tooltip-background); + border-radius:var(--cui-tooltip-border-radius); + padding:var(--cui-tooltip-padding) +} +.cui .grid { + display:grid; + width:100%; + margin:0 auto; + grid-template-columns:repeat(auto-fill,minmax(275px,1fr)); + grid-template-rows:repeat(auto-fill,minmax(275px,1fr)); + grid-gap:var(var(--cui-spacing-qtr)) +} +.cui .grid.grid--row-1 { + grid-template-rows:repeat(1,minmax(275px,1fr)) +} +.cui .grid.grid--row-2 { + grid-template-rows:repeat(2,minmax(275px,1fr)) +} +.cui .grid.grid--row-3 { + grid-template-rows:repeat(3,minmax(275px,1fr)) +} +.cui .grid.grid--row-4 { + grid-template-rows:repeat(4,minmax(275px,1fr)) +} +.cui .grid.grid--row-5 { + grid-template-rows:repeat(5,minmax(275px,1fr)) +} +.cui .grid.grid--row-6 { + grid-template-rows:repeat(6,minmax(275px,1fr)) +} +.cui .grid.grid--row-7 { + grid-template-rows:repeat(7,minmax(275px,1fr)) +} +.cui .grid.grid--row-8 { + grid-template-rows:repeat(8,minmax(275px,1fr)) +} +.cui .grid.grid--row-9 { + grid-template-rows:repeat(9,minmax(275px,1fr)) +} +.cui .grid.grid--row-10 { + grid-template-rows:repeat(10,minmax(275px,1fr)) +} +.cui .grid.grid--row-11 { + grid-template-rows:repeat(11,minmax(275px,1fr)) +} +.cui .grid.grid--row-12 { + grid-template-rows:repeat(12,minmax(275px,1fr)) +} +.cui .grid.grid--1up, +.cui .grid.grid--col-1 { + grid-template-columns:repeat(1,1fr) +} +.cui .grid.grid--2up, +.cui .grid.grid--col-2 { + grid-template-columns:repeat(2,1fr) +} +.cui .grid.grid--3up, +.cui .grid.grid--col-3 { + grid-template-columns:repeat(3,1fr) +} +.cui .grid.grid--4up, +.cui .grid.grid--col-4 { + grid-template-columns:repeat(4,1fr) +} +.cui .grid.grid--5up, +.cui .grid.grid--col-5 { + grid-template-columns:repeat(5,1fr) +} +.cui .grid.grid--6up, +.cui .grid.grid--col-6 { + grid-template-columns:repeat(6,1fr) +} +.cui .grid.grid--7up, +.cui .grid.grid--col-7 { + grid-template-columns:repeat(7,1fr) +} +.cui .grid.grid--8up, +.cui .grid.grid--col-8 { + grid-template-columns:repeat(8,1fr) +} +.cui .grid.grid--9up, +.cui .grid.grid--col-9 { + grid-template-columns:repeat(9,1fr) +} +.cui .grid.grid--10up, +.cui .grid.grid--col-10 { + grid-template-columns:repeat(10,1fr) +} +.cui .grid.grid--11up, +.cui .grid.grid--col-11 { + grid-template-columns:repeat(11,1fr) +} +.cui .grid.grid--12up, +.cui .grid.grid--col-12 { + grid-template-columns:repeat(12,1fr) +} +.cui .grid.grid--col-1 { + grid-template-columns:100% +} +.cui .grid.grid--col-2 { + grid-template-columns:repeat(2,1fr) +} +.cui .grid .area-col-2 { + grid-column:span 2 +} +.cui .grid .area-row-2 { + grid-row:span 2 +} +.cui .grid.grid--col-3 { + grid-template-columns:repeat(3,1fr) +} +.cui .grid .area-col-3 { + grid-column:span 3 +} +.cui .grid .area-row-3 { + grid-row:span 3 +} +.cui .grid.grid--col-4 { + grid-template-columns:repeat(4,1fr) +} +.cui .grid .area-col-4 { + grid-column:span 4 +} +.cui .grid .area-row-4 { + grid-row:span 4 +} +.cui .grid.grid--col-5 { + grid-template-columns:repeat(5,1fr) +} +.cui .grid .area-col-5 { + grid-column:span 5 +} +.cui .grid .area-row-5 { + grid-row:span 5 +} +.cui .grid.grid--col-6 { + grid-template-columns:repeat(6,1fr) +} +.cui .grid .area-col-6 { + grid-column:span 6 +} +.cui .grid .area-row-6 { + grid-row:span 6 +} +.cui .grid.grid--col-7 { + grid-template-columns:repeat(7,1fr) +} +.cui .grid .area-col-7 { + grid-column:span 7 +} +.cui .grid .area-row-7 { + grid-row:span 7 +} +.cui .grid.grid--col-8 { + grid-template-columns:repeat(8,1fr) +} +.cui .grid .area-col-8 { + grid-column:span 8 +} +.cui .grid .area-row-8 { + grid-row:span 8 +} +.cui .grid.grid--col-9 { + grid-template-columns:repeat(9,1fr) +} +.cui .grid .area-col-9 { + grid-column:span 9 +} +.cui .grid .area-row-9 { + grid-row:span 9 +} +.cui .grid.grid--col-10 { + grid-template-columns:repeat(10,1fr) +} +.cui .grid .area-col-10 { + grid-column:span 10 +} +.cui .grid .area-row-10 { + grid-row:span 10 +} +.cui .grid.grid--col-11 { + grid-template-columns:repeat(11,1fr) +} +.cui .grid .area-col-11 { + grid-column:span 11 +} +.cui .grid .area-row-11 { + grid-row:span 11 +} +.cui .grid.grid--col-12 { + grid-template-columns:repeat(12,1fr) +} +.cui .grid .area-col-12 { + grid-column:span 12 +} +.cui .grid .area-row-12 { + grid-row:span 12 +} +@media (min-width:576px) { + .cui .grid.grid--col-sm-1 { + grid-template-columns:100% + } + .cui .grid.grid--col-sm-2 { + grid-template-columns:repeat(2,1fr) + } + .cui .grid .area-col-sm-2 { + grid-column:span 2 + } + .cui .grid .area-row-sm-2 { + grid-row:span 2 + } + .cui .grid.grid--col-sm-3 { + grid-template-columns:repeat(3,1fr) + } + .cui .grid .area-col-sm-3 { + grid-column:span 3 + } + .cui .grid .area-row-sm-3 { + grid-row:span 3 + } + .cui .grid.grid--col-sm-4 { + grid-template-columns:repeat(4,1fr) + } + .cui .grid .area-col-sm-4 { + grid-column:span 4 + } + .cui .grid .area-row-sm-4 { + grid-row:span 4 + } + .cui .grid.grid--col-sm-5 { + grid-template-columns:repeat(5,1fr) + } + .cui .grid .area-col-sm-5 { + grid-column:span 5 + } + .cui .grid .area-row-sm-5 { + grid-row:span 5 + } + .cui .grid.grid--col-sm-6 { + grid-template-columns:repeat(6,1fr) + } + .cui .grid .area-col-sm-6 { + grid-column:span 6 + } + .cui .grid .area-row-sm-6 { + grid-row:span 6 + } + .cui .grid.grid--col-sm-7 { + grid-template-columns:repeat(7,1fr) + } + .cui .grid .area-col-sm-7 { + grid-column:span 7 + } + .cui .grid .area-row-sm-7 { + grid-row:span 7 + } + .cui .grid.grid--col-sm-8 { + grid-template-columns:repeat(8,1fr) + } + .cui .grid .area-col-sm-8 { + grid-column:span 8 + } + .cui .grid .area-row-sm-8 { + grid-row:span 8 + } + .cui .grid.grid--col-sm-9 { + grid-template-columns:repeat(9,1fr) + } + .cui .grid .area-col-sm-9 { + grid-column:span 9 + } + .cui .grid .area-row-sm-9 { + grid-row:span 9 + } + .cui .grid.grid--col-sm-10 { + grid-template-columns:repeat(10,1fr) + } + .cui .grid .area-col-sm-10 { + grid-column:span 10 + } + .cui .grid .area-row-sm-10 { + grid-row:span 10 + } + .cui .grid.grid--col-sm-11 { + grid-template-columns:repeat(11,1fr) + } + .cui .grid .area-col-sm-11 { + grid-column:span 11 + } + .cui .grid .area-row-sm-11 { + grid-row:span 11 + } + .cui .grid.grid--col-sm-12 { + grid-template-columns:repeat(12,1fr) + } + .cui .grid .area-col-sm-12 { + grid-column:span 12 + } + .cui .grid .area-row-sm-12 { + grid-row:span 12 + } +} +@media (min-width:768px) { + .cui .grid.grid--col-md-1 { + grid-template-columns:100% + } + .cui .grid.grid--col-md-2 { + grid-template-columns:repeat(2,1fr) + } + .cui .grid .area-col-md-2 { + grid-column:span 2 + } + .cui .grid .area-row-md-2 { + grid-row:span 2 + } + .cui .grid.grid--col-md-3 { + grid-template-columns:repeat(3,1fr) + } + .cui .grid .area-col-md-3 { + grid-column:span 3 + } + .cui .grid .area-row-md-3 { + grid-row:span 3 + } + .cui .grid.grid--col-md-4 { + grid-template-columns:repeat(4,1fr) + } + .cui .grid .area-col-md-4 { + grid-column:span 4 + } + .cui .grid .area-row-md-4 { + grid-row:span 4 + } + .cui .grid.grid--col-md-5 { + grid-template-columns:repeat(5,1fr) + } + .cui .grid .area-col-md-5 { + grid-column:span 5 + } + .cui .grid .area-row-md-5 { + grid-row:span 5 + } + .cui .grid.grid--col-md-6 { + grid-template-columns:repeat(6,1fr) + } + .cui .grid .area-col-md-6 { + grid-column:span 6 + } + .cui .grid .area-row-md-6 { + grid-row:span 6 + } + .cui .grid.grid--col-md-7 { + grid-template-columns:repeat(7,1fr) + } + .cui .grid .area-col-md-7 { + grid-column:span 7 + } + .cui .grid .area-row-md-7 { + grid-row:span 7 + } + .cui .grid.grid--col-md-8 { + grid-template-columns:repeat(8,1fr) + } + .cui .grid .area-col-md-8 { + grid-column:span 8 + } + .cui .grid .area-row-md-8 { + grid-row:span 8 + } + .cui .grid.grid--col-md-9 { + grid-template-columns:repeat(9,1fr) + } + .cui .grid .area-col-md-9 { + grid-column:span 9 + } + .cui .grid .area-row-md-9 { + grid-row:span 9 + } + .cui .grid.grid--col-md-10 { + grid-template-columns:repeat(10,1fr) + } + .cui .grid .area-col-md-10 { + grid-column:span 10 + } + .cui .grid .area-row-md-10 { + grid-row:span 10 + } + .cui .grid.grid--col-md-11 { + grid-template-columns:repeat(11,1fr) + } + .cui .grid .area-col-md-11 { + grid-column:span 11 + } + .cui .grid .area-row-md-11 { + grid-row:span 11 + } + .cui .grid.grid--col-md-12 { + grid-template-columns:repeat(12,1fr) + } + .cui .grid .area-col-md-12 { + grid-column:span 12 + } + .cui .grid .area-row-md-12 { + grid-row:span 12 + } +} +@media (min-width:992px) { + .cui .grid.grid--col-lg-1 { + grid-template-columns:100% + } + .cui .grid.grid--col-lg-2 { + grid-template-columns:repeat(2,1fr) + } + .cui .grid .area-col-lg-2 { + grid-column:span 2 + } + .cui .grid .area-row-lg-2 { + grid-row:span 2 + } + .cui .grid.grid--col-lg-3 { + grid-template-columns:repeat(3,1fr) + } + .cui .grid .area-col-lg-3 { + grid-column:span 3 + } + .cui .grid .area-row-lg-3 { + grid-row:span 3 + } + .cui .grid.grid--col-lg-4 { + grid-template-columns:repeat(4,1fr) + } + .cui .grid .area-col-lg-4 { + grid-column:span 4 + } + .cui .grid .area-row-lg-4 { + grid-row:span 4 + } + .cui .grid.grid--col-lg-5 { + grid-template-columns:repeat(5,1fr) + } + .cui .grid .area-col-lg-5 { + grid-column:span 5 + } + .cui .grid .area-row-lg-5 { + grid-row:span 5 + } + .cui .grid.grid--col-lg-6 { + grid-template-columns:repeat(6,1fr) + } + .cui .grid .area-col-lg-6 { + grid-column:span 6 + } + .cui .grid .area-row-lg-6 { + grid-row:span 6 + } + .cui .grid.grid--col-lg-7 { + grid-template-columns:repeat(7,1fr) + } + .cui .grid .area-col-lg-7 { + grid-column:span 7 + } + .cui .grid .area-row-lg-7 { + grid-row:span 7 + } + .cui .grid.grid--col-lg-8 { + grid-template-columns:repeat(8,1fr) + } + .cui .grid .area-col-lg-8 { + grid-column:span 8 + } + .cui .grid .area-row-lg-8 { + grid-row:span 8 + } + .cui .grid.grid--col-lg-9 { + grid-template-columns:repeat(9,1fr) + } + .cui .grid .area-col-lg-9 { + grid-column:span 9 + } + .cui .grid .area-row-lg-9 { + grid-row:span 9 + } + .cui .grid.grid--col-lg-10 { + grid-template-columns:repeat(10,1fr) + } + .cui .grid .area-col-lg-10 { + grid-column:span 10 + } + .cui .grid .area-row-lg-10 { + grid-row:span 10 + } + .cui .grid.grid--col-lg-11 { + grid-template-columns:repeat(11,1fr) + } + .cui .grid .area-col-lg-11 { + grid-column:span 11 + } + .cui .grid .area-row-lg-11 { + grid-row:span 11 + } + .cui .grid.grid--col-lg-12 { + grid-template-columns:repeat(12,1fr) + } + .cui .grid .area-col-lg-12 { + grid-column:span 12 + } + .cui .grid .area-row-lg-12 { + grid-row:span 12 + } +} +@media (min-width:1200px) { + .cui .grid.grid--col-xl-1 { + grid-template-columns:100% + } + .cui .grid.grid--col-xl-2 { + grid-template-columns:repeat(2,1fr) + } + .cui .grid .area-col-xl-2 { + grid-column:span 2 + } + .cui .grid .area-row-xl-2 { + grid-row:span 2 + } + .cui .grid.grid--col-xl-3 { + grid-template-columns:repeat(3,1fr) + } + .cui .grid .area-col-xl-3 { + grid-column:span 3 + } + .cui .grid .area-row-xl-3 { + grid-row:span 3 + } + .cui .grid.grid--col-xl-4 { + grid-template-columns:repeat(4,1fr) + } + .cui .grid .area-col-xl-4 { + grid-column:span 4 + } + .cui .grid .area-row-xl-4 { + grid-row:span 4 + } + .cui .grid.grid--col-xl-5 { + grid-template-columns:repeat(5,1fr) + } + .cui .grid .area-col-xl-5 { + grid-column:span 5 + } + .cui .grid .area-row-xl-5 { + grid-row:span 5 + } + .cui .grid.grid--col-xl-6 { + grid-template-columns:repeat(6,1fr) + } + .cui .grid .area-col-xl-6 { + grid-column:span 6 + } + .cui .grid .area-row-xl-6 { + grid-row:span 6 + } + .cui .grid.grid--col-xl-7 { + grid-template-columns:repeat(7,1fr) + } + .cui .grid .area-col-xl-7 { + grid-column:span 7 + } + .cui .grid .area-row-xl-7 { + grid-row:span 7 + } + .cui .grid.grid--col-xl-8 { + grid-template-columns:repeat(8,1fr) + } + .cui .grid .area-col-xl-8 { + grid-column:span 8 + } + .cui .grid .area-row-xl-8 { + grid-row:span 8 + } + .cui .grid.grid--col-xl-9 { + grid-template-columns:repeat(9,1fr) + } + .cui .grid .area-col-xl-9 { + grid-column:span 9 + } + .cui .grid .area-row-xl-9 { + grid-row:span 9 + } + .cui .grid.grid--col-xl-10 { + grid-template-columns:repeat(10,1fr) + } + .cui .grid .area-col-xl-10 { + grid-column:span 10 + } + .cui .grid .area-row-xl-10 { + grid-row:span 10 + } + .cui .grid.grid--col-xl-11 { + grid-template-columns:repeat(11,1fr) + } + .cui .grid .area-col-xl-11 { + grid-column:span 11 + } + .cui .grid .area-row-xl-11 { + grid-row:span 11 + } + .cui .grid.grid--col-xl-12 { + grid-template-columns:repeat(12,1fr) + } + .cui .grid .area-col-xl-12 { + grid-column:span 12 + } + .cui .grid .area-row-xl-12 { + grid-row:span 12 + } +} +@media (min-width:1440px) { + .cui .grid.grid--col-2xl-1 { + grid-template-columns:100% + } + .cui .grid.grid--col-2xl-2 { + grid-template-columns:repeat(2,1fr) + } + .cui .grid .area-col-2xl-2 { + grid-column:span 2 + } + .cui .grid .area-row-2xl-2 { + grid-row:span 2 + } + .cui .grid.grid--col-2xl-3 { + grid-template-columns:repeat(3,1fr) + } + .cui .grid .area-col-2xl-3 { + grid-column:span 3 + } + .cui .grid .area-row-2xl-3 { + grid-row:span 3 + } + .cui .grid.grid--col-2xl-4 { + grid-template-columns:repeat(4,1fr) + } + .cui .grid .area-col-2xl-4 { + grid-column:span 4 + } + .cui .grid .area-row-2xl-4 { + grid-row:span 4 + } + .cui .grid.grid--col-2xl-5 { + grid-template-columns:repeat(5,1fr) + } + .cui .grid .area-col-2xl-5 { + grid-column:span 5 + } + .cui .grid .area-row-2xl-5 { + grid-row:span 5 + } + .cui .grid.grid--col-2xl-6 { + grid-template-columns:repeat(6,1fr) + } + .cui .grid .area-col-2xl-6 { + grid-column:span 6 + } + .cui .grid .area-row-2xl-6 { + grid-row:span 6 + } + .cui .grid.grid--col-2xl-7 { + grid-template-columns:repeat(7,1fr) + } + .cui .grid .area-col-2xl-7 { + grid-column:span 7 + } + .cui .grid .area-row-2xl-7 { + grid-row:span 7 + } + .cui .grid.grid--col-2xl-8 { + grid-template-columns:repeat(8,1fr) + } + .cui .grid .area-col-2xl-8 { + grid-column:span 8 + } + .cui .grid .area-row-2xl-8 { + grid-row:span 8 + } + .cui .grid.grid--col-2xl-9 { + grid-template-columns:repeat(9,1fr) + } + .cui .grid .area-col-2xl-9 { + grid-column:span 9 + } + .cui .grid .area-row-2xl-9 { + grid-row:span 9 + } + .cui .grid.grid--col-2xl-10 { + grid-template-columns:repeat(10,1fr) + } + .cui .grid .area-col-2xl-10 { + grid-column:span 10 + } + .cui .grid .area-row-2xl-10 { + grid-row:span 10 + } + .cui .grid.grid--col-2xl-11 { + grid-template-columns:repeat(11,1fr) + } + .cui .grid .area-col-2xl-11 { + grid-column:span 11 + } + .cui .grid .area-row-2xl-11 { + grid-row:span 11 + } + .cui .grid.grid--col-2xl-12 { + grid-template-columns:repeat(12,1fr) + } + .cui .grid .area-col-2xl-12 { + grid-column:span 12 + } + .cui .grid .area-row-2xl-12 { + grid-row:span 12 + } +} +@media (min-width:1600px) { + .cui .grid.grid--col-3xl-1 { + grid-template-columns:100% + } + .cui .grid.grid--col-3xl-2 { + grid-template-columns:repeat(2,1fr) + } + .cui .grid .area-col-3xl-2 { + grid-column:span 2 + } + .cui .grid .area-row-3xl-2 { + grid-row:span 2 + } + .cui .grid.grid--col-3xl-3 { + grid-template-columns:repeat(3,1fr) + } + .cui .grid .area-col-3xl-3 { + grid-column:span 3 + } + .cui .grid .area-row-3xl-3 { + grid-row:span 3 + } + .cui .grid.grid--col-3xl-4 { + grid-template-columns:repeat(4,1fr) + } + .cui .grid .area-col-3xl-4 { + grid-column:span 4 + } + .cui .grid .area-row-3xl-4 { + grid-row:span 4 + } + .cui .grid.grid--col-3xl-5 { + grid-template-columns:repeat(5,1fr) + } + .cui .grid .area-col-3xl-5 { + grid-column:span 5 + } + .cui .grid .area-row-3xl-5 { + grid-row:span 5 + } + .cui .grid.grid--col-3xl-6 { + grid-template-columns:repeat(6,1fr) + } + .cui .grid .area-col-3xl-6 { + grid-column:span 6 + } + .cui .grid .area-row-3xl-6 { + grid-row:span 6 + } + .cui .grid.grid--col-3xl-7 { + grid-template-columns:repeat(7,1fr) + } + .cui .grid .area-col-3xl-7 { + grid-column:span 7 + } + .cui .grid .area-row-3xl-7 { + grid-row:span 7 + } + .cui .grid.grid--col-3xl-8 { + grid-template-columns:repeat(8,1fr) + } + .cui .grid .area-col-3xl-8 { + grid-column:span 8 + } + .cui .grid .area-row-3xl-8 { + grid-row:span 8 + } + .cui .grid.grid--col-3xl-9 { + grid-template-columns:repeat(9,1fr) + } + .cui .grid .area-col-3xl-9 { + grid-column:span 9 + } + .cui .grid .area-row-3xl-9 { + grid-row:span 9 + } + .cui .grid.grid--col-3xl-10 { + grid-template-columns:repeat(10,1fr) + } + .cui .grid .area-col-3xl-10 { + grid-column:span 10 + } + .cui .grid .area-row-3xl-10 { + grid-row:span 10 + } + .cui .grid.grid--col-3xl-11 { + grid-template-columns:repeat(11,1fr) + } + .cui .grid .area-col-3xl-11 { + grid-column:span 11 + } + .cui .grid .area-row-3xl-11 { + grid-row:span 11 + } + .cui .grid.grid--col-3xl-12 { + grid-template-columns:repeat(12,1fr) + } + .cui .grid .area-col-3xl-12 { + grid-column:span 12 + } + .cui .grid .area-row-3xl-12 { + grid-row:span 12 + } +} +@media (min-width:1840px) { + .cui .grid.grid--col-4xl-1 { + grid-template-columns:100% + } + .cui .grid.grid--col-4xl-2 { + grid-template-columns:repeat(2,1fr) + } + .cui .grid .area-col-4xl-2 { + grid-column:span 2 + } + .cui .grid .area-row-4xl-2 { + grid-row:span 2 + } + .cui .grid.grid--col-4xl-3 { + grid-template-columns:repeat(3,1fr) + } + .cui .grid .area-col-4xl-3 { + grid-column:span 3 + } + .cui .grid .area-row-4xl-3 { + grid-row:span 3 + } + .cui .grid.grid--col-4xl-4 { + grid-template-columns:repeat(4,1fr) + } + .cui .grid .area-col-4xl-4 { + grid-column:span 4 + } + .cui .grid .area-row-4xl-4 { + grid-row:span 4 + } + .cui .grid.grid--col-4xl-5 { + grid-template-columns:repeat(5,1fr) + } + .cui .grid .area-col-4xl-5 { + grid-column:span 5 + } + .cui .grid .area-row-4xl-5 { + grid-row:span 5 + } + .cui .grid.grid--col-4xl-6 { + grid-template-columns:repeat(6,1fr) + } + .cui .grid .area-col-4xl-6 { + grid-column:span 6 + } + .cui .grid .area-row-4xl-6 { + grid-row:span 6 + } + .cui .grid.grid--col-4xl-7 { + grid-template-columns:repeat(7,1fr) + } + .cui .grid .area-col-4xl-7 { + grid-column:span 7 + } + .cui .grid .area-row-4xl-7 { + grid-row:span 7 + } + .cui .grid.grid--col-4xl-8 { + grid-template-columns:repeat(8,1fr) + } + .cui .grid .area-col-4xl-8 { + grid-column:span 8 + } + .cui .grid .area-row-4xl-8 { + grid-row:span 8 + } + .cui .grid.grid--col-4xl-9 { + grid-template-columns:repeat(9,1fr) + } + .cui .grid .area-col-4xl-9 { + grid-column:span 9 + } + .cui .grid .area-row-4xl-9 { + grid-row:span 9 + } + .cui .grid.grid--col-4xl-10 { + grid-template-columns:repeat(10,1fr) + } + .cui .grid .area-col-4xl-10 { + grid-column:span 10 + } + .cui .grid .area-row-4xl-10 { + grid-row:span 10 + } + .cui .grid.grid--col-4xl-11 { + grid-template-columns:repeat(11,1fr) + } + .cui .grid .area-col-4xl-11 { + grid-column:span 11 + } + .cui .grid .area-row-4xl-11 { + grid-row:span 11 + } + .cui .grid.grid--col-4xl-12 { + grid-template-columns:repeat(12,1fr) + } + .cui .grid .area-col-4xl-12 { + grid-column:span 12 + } + .cui .grid .area-row-4xl-12 { + grid-row:span 12 + } +} +@media (min-width:2100px) { + .cui .grid.grid--col-5xl-1 { + grid-template-columns:100% + } + .cui .grid.grid--col-5xl-2 { + grid-template-columns:repeat(2,1fr) + } + .cui .grid .area-col-5xl-2 { + grid-column:span 2 + } + .cui .grid .area-row-5xl-2 { + grid-row:span 2 + } + .cui .grid.grid--col-5xl-3 { + grid-template-columns:repeat(3,1fr) + } + .cui .grid .area-col-5xl-3 { + grid-column:span 3 + } + .cui .grid .area-row-5xl-3 { + grid-row:span 3 + } + .cui .grid.grid--col-5xl-4 { + grid-template-columns:repeat(4,1fr) + } + .cui .grid .area-col-5xl-4 { + grid-column:span 4 + } + .cui .grid .area-row-5xl-4 { + grid-row:span 4 + } + .cui .grid.grid--col-5xl-5 { + grid-template-columns:repeat(5,1fr) + } + .cui .grid .area-col-5xl-5 { + grid-column:span 5 + } + .cui .grid .area-row-5xl-5 { + grid-row:span 5 + } + .cui .grid.grid--col-5xl-6 { + grid-template-columns:repeat(6,1fr) + } + .cui .grid .area-col-5xl-6 { + grid-column:span 6 + } + .cui .grid .area-row-5xl-6 { + grid-row:span 6 + } + .cui .grid.grid--col-5xl-7 { + grid-template-columns:repeat(7,1fr) + } + .cui .grid .area-col-5xl-7 { + grid-column:span 7 + } + .cui .grid .area-row-5xl-7 { + grid-row:span 7 + } + .cui .grid.grid--col-5xl-8 { + grid-template-columns:repeat(8,1fr) + } + .cui .grid .area-col-5xl-8 { + grid-column:span 8 + } + .cui .grid .area-row-5xl-8 { + grid-row:span 8 + } + .cui .grid.grid--col-5xl-9 { + grid-template-columns:repeat(9,1fr) + } + .cui .grid .area-col-5xl-9 { + grid-column:span 9 + } + .cui .grid .area-row-5xl-9 { + grid-row:span 9 + } + .cui .grid.grid--col-5xl-10 { + grid-template-columns:repeat(10,1fr) + } + .cui .grid .area-col-5xl-10 { + grid-column:span 10 + } + .cui .grid .area-row-5xl-10 { + grid-row:span 10 + } + .cui .grid.grid--col-5xl-11 { + grid-template-columns:repeat(11,1fr) + } + .cui .grid .area-col-5xl-11 { + grid-column:span 11 + } + .cui .grid .area-row-5xl-11 { + grid-row:span 11 + } + .cui .grid.grid--col-5xl-12 { + grid-template-columns:repeat(12,1fr) + } + .cui .grid .area-col-5xl-12 { + grid-column:span 12 + } + .cui .grid .area-row-5xl-12 { + grid-row:span 12 + } +} +.cui .grid.grid--selectable>:hover { + border:1px solid var(--cui-accent-color); + cursor:pointer +} +.cui .grid.grid--spacing-qtr { + grid-gap:var(--cui-spacing-qtr) +} +.cui .grid.grid--spacing-half { + grid-gap:var(--cui-spacing-half) +} +.cui .grid.grid--spacing-base { + grid-gap:var(--cui-spacing) +} +.cui .grid.grid--spacing-dbl { + grid-gap:var(--cui-spacing-dbl) +} +.cui .header { + --cui-header-background:var(--cui-background-color); + --cui-header-border-bottom:var(--cui-border); + --cui-header-logo-font-size:var(--cui-font-size-24); + --cui-header-padding:0 var(--cui-spacing); + --cui-header-title-font-size:var(--cui-font-size-20); + --cui-header-title-font-weight:200; + --cui-header-toggle-font-size:var(--cui-font-size-20); + --cui-header-item-spacing:var(--cui-spacing); + --cui-header-zindex:calc(var(--cui-max-zindex) + 1); + display:flex; + position:fixed; + top:0; + left:0; + right:0; + align-items:center; + background:var(--cui-header-background); + border-bottom:var(--cui-header-border-bottom); + height:var(--cui-header-height); + z-index:var(--cui-header-zindex) +} +.cui .header~.content { + padding-top:var(--cui-header-height) +} +.cui .header input[type=search] { + border-radius:50px; + background-color:var(--cui-background-alt); + border:none +} +.cui .header .tabs { + box-shadow:none; + margin-top:-3px +} +.cui .header .tabs.tabs--bordered { + margin-top:7px +} +.cui .header .dropdown .dropdown__menu { + top:calc(100% + 13px) +} +.cui .header .header__toggle { + color:var(--cui-inactive-color); + font-size:var(--cui-header-toggle-font-size); + margin-right:var(--cui-header-item-spacing); + position:absolute; + left:var(--cui-header-item-spacing) +} +.cui .header .header__logo span.icon-cisco { + color:var(--cui-accent-color); + font-size:var(--cui-header-logo-font-size) +} +.cui .header .header__logo+.header__title { + margin-left:var(--cui-header-item-spacing) +} +.cui .header .header__title { + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; + margin:0 auto 0 0; + font-size:var(--cui-header-title-font-size); + font-weight:var(--cui-header-title-font-weight) +} +.cui .header .header__title:hover { + text-decoration:none +} +.cui .header .header-bar>* { + display:none +} +.cui .header .header-bar:before { + position:absolute; + top:0; + right:0; + bottom:0; + left:0; + width:auto; + height:auto; + content:''; + content:"Full Header pattern deprecated. Use the simple header instead"; + display:flex; + font-weight:700; + align-items:center; + justify-content:center; + text-transform:uppercase +} +.cui .header-panels { + display:inline-flex; + flex-shrink:0; + flex-wrap:wrap; + align-items:center; + width:100% +} +.cui .header-panels .header-panel { + display:inline-flex; + align-items:center; + flex:1 +} +.cui .header-panels .header-panel.header-panel--center, +.cui .sidebar.sidebar--mini .sidebar__header { + justify-content:center +} +.cui .header-panels .header-panel.header-panel--right { + justify-content:flex-end +} +.cui .header-panels .header-panel a.header-item, +.cui .header-panels .header-panel div.dropdown>a { + color:var(--cui-inactive-color) +} +.cui .header-panels .header-panel a.header-item:focus, +.cui .header-panels .header-panel a.header-item:hover, +.cui .header-panels .header-panel div.dropdown>a:focus, +.cui .header-panels .header-panel div.dropdown>a:hover { + color:var(--cui-active-color) +} +.cui .header-panels .header-panel .header-item, +.cui .header-panels .header-panel .header-item:hover { + text-decoration:none +} +.cui .header-panels .header-panel .header-item+.header-item { + margin-left:var(--cui-header-item-spacing) +} +.cui .header-panels .header-panel .separator { + color:var(--cui-border-color); + content:'|'; + margin:0 var(--cui-spacing-qtr); + padding:0 +} +.cui .footer, +.cui footer { + display:flex; + align-items:center; + justify-content:center; + padding:var(--cui-footer-padding); + margin-top:var(--cui-spacing); + border-top:var(--cui-border); + background-color:var(--cui-background-color); + color:var(--cui-font-color) +} +.cui .footer .footer__links ul.list, +.cui footer .footer__links ul.list { + display:inline-flex; + flex-wrap:wrap; + justify-content:space-evenly +} +.cui .footer .footer__links ul.list li+li, +.cui footer .footer__links ul.list li+li { + margin-left:var(--cui-spacing) +} +.cui .footer .footer__legal, +.cui footer .footer__legal { + display:inline-flex; + align-items:center; + font-weight:400; + margin-left:var(--cui-spacing-dbl) +} +.cui .footer .footer__legal .footer__logo, +.cui footer .footer__legal .footer__logo { + font-size:3.2rem; + margin-right:var(--cui-spacing) +} +.cui .footer a, +.cui footer a { + color:var(--cui-link-color); + text-decoration:none +} +.cui .footer a:hover, +.cui footer a:hover { + color:var(--cui-link-color-active) +} +.cui .footer a:active, +.cui .footer a:focus, +.cui .footer a:hover, +.cui footer a:active, +.cui footer a:focus, +.cui footer a:hover { + text-decoration:underline +} +.cui .footer.footer--primary, +.cui footer.footer--primary { + background-color:var(--cui-theme-primary); + color:var(--cui-theme-primary-color) +} +.cui .footer.footer--primary a, +.cui footer.footer--primary a { + color:var(--cui-theme-primary-color); + text-decoration:none +} +.cui .footer.footer--primary a:hover, +.cui footer.footer--primary a:hover { + color:var(--cui-theme-primary-color) +} +.cui .footer.footer--primary a:active, +.cui .footer.footer--primary a:focus, +.cui .footer.footer--primary a:hover, +.cui footer.footer--primary a:active, +.cui footer.footer--primary a:focus, +.cui footer.footer--primary a:hover { + text-decoration:underline +} +.cui .footer.footer--secondary, +.cui footer.footer--secondary { + background-color:var(--cui-theme-secondary); + color:var(--cui-theme-secondary-color) +} +.cui .footer.footer--secondary a, +.cui footer.footer--secondary a { + color:var(--cui-theme-secondary-color); + text-decoration:none +} +.cui .footer.footer--secondary a:hover, +.cui footer.footer--secondary a:hover { + color:var(--cui-theme-secondary-color) +} +.cui .footer.footer--secondary a:active, +.cui .footer.footer--secondary a:focus, +.cui .footer.footer--secondary a:hover, +.cui footer.footer--secondary a:active, +.cui footer.footer--secondary a:focus, +.cui footer.footer--secondary a:hover { + text-decoration:underline +} +.cui .footer.footer--tertiary, +.cui footer.footer--tertiary { + background-color:var(--cui-theme-tertiary); + color:var(--cui-theme-tertiary-color) +} +.cui .footer.footer--tertiary a, +.cui footer.footer--tertiary a { + color:var(--cui-theme-tertiary-color); + text-decoration:none +} +.cui .footer.footer--tertiary a:hover, +.cui footer.footer--tertiary a:hover { + color:var(--cui-theme-tertiary-color) +} +.cui .footer.footer--tertiary a:active, +.cui .footer.footer--tertiary a:focus, +.cui .footer.footer--tertiary a:hover, +.cui footer.footer--tertiary a:active, +.cui footer.footer--tertiary a:focus, +.cui footer.footer--tertiary a:hover { + text-decoration:underline +} +.cui .footer.footer--dark, +.cui footer.footer--dark { + background-color:var(--cui-theme-dark); + color:var(--cui-theme-dark-color) +} +.cui .footer.footer--dark a, +.cui footer.footer--dark a { + color:var(--cui-theme-dark-color); + text-decoration:none +} +.cui .footer.footer--dark a:hover, +.cui footer.footer--dark a:hover { + color:var(--cui-theme-dark-color) +} +.cui .footer.footer--dark a:active, +.cui .footer.footer--dark a:focus, +.cui .footer.footer--dark a:hover, +.cui footer.footer--dark a:active, +.cui footer.footer--dark a:focus, +.cui footer.footer--dark a:hover { + text-decoration:underline +} +.cui .footer.footer--light, +.cui footer.footer--light { + background-color:var(--cui-theme-light); + color:var(--cui-theme-light-color) +} +.cui .footer.footer--light a, +.cui footer.footer--light a { + color:var(--cui-theme-light-color); + text-decoration:none +} +.cui .footer.footer--light a:hover, +.cui footer.footer--light a:hover { + color:var(--cui-theme-light-color) +} +.cui .sidebar, +.cui .sidebar a, +.cui .sidebar a:hover, +.cui .sidebar ul li a { + color:var(--cui-theme-dark-color) +} +.cui .footer.footer--light a:active, +.cui .footer.footer--light a:focus, +.cui .footer.footer--light a:hover, +.cui footer.footer--light a:active, +.cui footer.footer--light a:focus, +.cui footer.footer--light a:hover { + text-decoration:underline +} +.cui .sidebar a, +.cui .sidebar a:active, +.cui .sidebar a:focus, +.cui .sidebar a:hover, +.cui .sidebar ul li a:active, +.cui .sidebar ul li a:focus, +.cui .sidebar ul li a:hover, +.cui .sidebar.sidebar--dark a, +.cui .sidebar.sidebar--dark a:active, +.cui .sidebar.sidebar--dark a:focus, +.cui .sidebar.sidebar--dark a:hover, +.cui .sidebar.sidebar--light a, +.cui .sidebar.sidebar--light a:active, +.cui .sidebar.sidebar--light a:focus, +.cui .sidebar.sidebar--light a:hover, +.cui .sidebar.sidebar--primary a, +.cui .sidebar.sidebar--primary a:active, +.cui .sidebar.sidebar--primary a:focus, +.cui .sidebar.sidebar--primary a:hover, +.cui .sidebar.sidebar--secondary a, +.cui .sidebar.sidebar--secondary a:active, +.cui .sidebar.sidebar--secondary a:focus, +.cui .sidebar.sidebar--secondary a:hover, +.cui .sidebar.sidebar--tertiary a:active, +.cui .sidebar.sidebar--tertiary a:focus, +.cui .sidebar.sidebar--tertiary a:hover, +.cui a.sidebar-toggle:hover { + text-decoration:none +} +.cui .sidebar { + --cui-sidebar-accent-thickness:var(--cui-accent-thickness); + --cui-sidebar-background-active:rgba(0,0,0,.2); + --cui-sidebar-background-hover:rgba(0,0,0,.1); + --cui-sidebar-colors:primary,secondary,tertiary,dark,light; + --cui-sidebar-divider-color:rgba(255,255,255,.2); + --cui-sidebar-menu-icon-size-mini:22px; + --cui-sidebar-inactive-opacity:.75; + --cui-sidebar-item-padding:7px var(--cui-spacing); + --cui-sidebar-title-font-size:var(--cui-font-size-20); + --cui-sidebar-title-font-weight:var(--cui-font-weight); + --cui-sidebar-chevron-font-size:var(--cui-font-size-xs); + --cui-sidebar-width-mini:80px; + --cui-sidebar-zindex:var(--cui-max-zindex); + display:block; + position:fixed; + top:0; + bottom:0; + left:0; + overflow-y:auto; + -webkit-overflow-scrolling:touch; + z-index:var(--cui-sidebar-zindex); + padding:0; + background-color:var(--cui-theme-dark) +} +.cui .sidebar+* { + margin-left:auto +} +.cui .sidebar .badge-wrapper .badge { + position:absolute; + right:50%; + box-shadow:0 0 0 var(--cui-badge-border-width) var(--cui-theme-dark) +} +.cui .sidebar li.sidebar__drawer>a:after, +.cui .sidebar.sidebar--dark li.sidebar__drawer>a:after, +.cui .sidebar.sidebar--light li.sidebar__drawer>a:after, +.cui .sidebar.sidebar--primary li.sidebar__drawer>a:after, +.cui .sidebar.sidebar--secondary li.sidebar__drawer>a:after, +.cui .sidebar.sidebar--tertiary li.sidebar__drawer>a:after { + content:''; + position:absolute; + right:undefined; + display:block; + height:7px; + top:undefined; + bottom:15px; + left:undefined; + width:7px; + transform:rotate(45deg) +} +.cui .sidebar ul ul { + background-color:var(--cui-theme-dark-darker) +} +.cui .sidebar li.sidebar__drawer>a:after { + color:transparent; + border:var(--cui-theme-dark-color) solid; + border-width:0 1px 1px 0 +} +.cui .sidebar.sidebar--primary, +.cui .sidebar.sidebar--primary a, +.cui .sidebar.sidebar--primary a:hover, +.cui .sidebar.sidebar--primary ul li a { + color:var(--cui-theme-primary-color) +} +.cui .sidebar.sidebar--primary { + background-color:var(--cui-theme-primary) +} +.cui .sidebar.sidebar--primary .badge-wrapper .badge { + box-shadow:0 0 0 var(--cui-badge-border-width) var(--cui-theme-primary) +} +.cui .sidebar.sidebar--primary ul ul { + background-color:var(--cui-theme-primary-darker) +} +.cui .sidebar.sidebar--primary li.sidebar__drawer>a:after { + color:transparent; + border:var(--cui-theme-primary-color) solid; + border-width:0 1px 1px 0 +} +.cui .sidebar.sidebar--secondary, +.cui .sidebar.sidebar--secondary a, +.cui .sidebar.sidebar--secondary a:hover, +.cui .sidebar.sidebar--secondary ul li a { + color:var(--cui-theme-secondary-color) +} +.cui .sidebar.sidebar--secondary { + background-color:var(--cui-theme-secondary) +} +.cui .sidebar.sidebar--secondary .badge-wrapper .badge { + box-shadow:0 0 0 var(--cui-badge-border-width) var(--cui-theme-secondary) +} +.cui .sidebar.sidebar--secondary ul ul { + background-color:var(--cui-theme-secondary-darker) +} +.cui .sidebar.sidebar--secondary li.sidebar__drawer>a:after { + color:transparent; + border:var(--cui-theme-secondary-color) solid; + border-width:0 1px 1px 0 +} +.cui .sidebar.sidebar--tertiary, +.cui .sidebar.sidebar--tertiary a, +.cui .sidebar.sidebar--tertiary a:hover, +.cui .sidebar.sidebar--tertiary ul li a { + color:var(--cui-theme-tertiary-color) +} +.cui .sidebar.sidebar--tertiary { + background-color:var(--cui-theme-tertiary) +} +.cui .sidebar.sidebar--tertiary a { + text-decoration:none +} +.cui .sidebar.sidebar--tertiary .badge-wrapper .badge { + box-shadow:0 0 0 var(--cui-badge-border-width) var(--cui-theme-tertiary) +} +.cui .sidebar.sidebar--tertiary ul ul { + background-color:var(--cui-theme-tertiary-darker) +} +.cui .sidebar.sidebar--tertiary li.sidebar__drawer>a:after { + color:transparent; + border:var(--cui-theme-tertiary-color) solid; + border-width:0 1px 1px 0 +} +.cui .sidebar.sidebar--dark, +.cui .sidebar.sidebar--dark a, +.cui .sidebar.sidebar--dark a:hover, +.cui .sidebar.sidebar--dark ul li a { + color:var(--cui-theme-dark-color) +} +.cui .sidebar.sidebar--dark { + background-color:var(--cui-theme-dark) +} +.cui .sidebar.sidebar--dark .badge-wrapper .badge { + box-shadow:0 0 0 var(--cui-badge-border-width) var(--cui-theme-dark) +} +.cui .sidebar.sidebar--dark ul ul { + background-color:var(--cui-theme-dark-darker) +} +.cui .sidebar.sidebar--dark li.sidebar__drawer>a:after { + color:transparent; + border:var(--cui-theme-dark-color) solid; + border-width:0 1px 1px 0 +} +.cui .sidebar.sidebar--light, +.cui .sidebar.sidebar--light a, +.cui .sidebar.sidebar--light a:hover, +.cui .sidebar.sidebar--light ul li a { + color:var(--cui-theme-light-color) +} +.cui .sidebar.sidebar--light { + background-color:var(--cui-theme-light) +} +.cui .sidebar.sidebar--light .badge-wrapper .badge { + box-shadow:0 0 0 var(--cui-badge-border-width) var(--cui-theme-light) +} +.cui .sidebar.sidebar--light ul ul { + background-color:var(--cui-theme-light-darker) +} +.cui .sidebar.sidebar--light li.sidebar__drawer>a:after { + color:transparent; + border:var(--cui-theme-light-color) solid; + border-width:0 1px 1px 0 +} +.cui .sidebar .sidebar__header { + display:flex; + align-items:center; + height:var(--cui-header-height); + padding:0 var(--cui-spacing); + border-bottom:var(--cui-border-thickness) solid var(--cui-sidebar-divider-color) +} +.cui .sidebar .sidebar__header+ul { + margin-top:var(--cui-spacing-half) +} +.cui .sidebar .sidebar__header-title { + font-size:var(--cui-sidebar-title-font-size); + font-weight:var(--cui-sidebar-title-font-weight) +} +.cui .sidebar ul { + list-style:none; + margin:0; + padding:0 +} +.cui .sidebar ul:after { + clear:both!important; + content:""!important; + display:table!important +} +.cui .sidebar ul li a { + display:flex; + align-items:center; + opacity:var(--cui-sidebar-inactive-opacity); + padding:var(--cui-sidebar-item-padding); + position:relative; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; + white-space:normal; + transition:color .5s var(--cui-animate-timing-function),opacity .5s var(--cui-animate-timing-function),background-color .25s var(--cui-animate-timing-function); + border-right-color:transparent; + border-right-style:solid; + border-right-width:var(--cui-sidebar-accent-thickness) +} +.cui .sidebar ul li a span[class^=icon-] { + margin-right:var(--cui-spacing-half) +} +.cui .sidebar ul li a:active, +.cui .sidebar ul li a:focus, +.cui .sidebar ul li a:hover { + border-right-color:var(--cui-accent-color); + background-color:var(--cui-sidebar-background-hover); + color:inherit; + opacity:1 +} +.cui .sidebar ul li.divider { + margin-top:var(--cui-border-thickness); + border-top:var(--cui-border-thickness) solid var(--cui-sidebar-divider-color) +} +.cui .sidebar ul li.sidebar__drawer>ul { + display:none +} +.cui .sidebar ul li.sidebar__drawer>a:after { + transition:transform var(--cui-animate-speed) var(--cui-animate-timing-function); + content:''; + top:undefined; + bottom:15px; + left:undefined; + display:block; + width:7px; + height:7px; + color:transparent; + border:var(--cui-color-white) solid; + border-width:0 1px 1px 0; + transform:rotate(45deg); + position:absolute; + right:var(--cui-spacing-half) +} +.cui .sidebar ul li.sidebar__drawer.sidebar__drawer--opened>ul { + display:block +} +.cui .sidebar ul li.sidebar__drawer.sidebar__drawer--opened>a:after { + transform:rotate(225deg); + transition:transform var(--cui-animate-speed) var(--cui-animate-timing-function) +} +.cui .sidebar ul li.sidebar__drawer.sidebar__drawer--selected>a, +.cui .sidebar ul li.sidebar__item.sidebar__item--selected>a { + opacity:1; + background-color:var(--cui-sidebar-background-active); + border-right-color:var(--cui-accent-color) +} +.cui .sidebar ul li>ul li a { + padding-left:calc(var(--cui-spacing) * 2) +} +.cui .sidebar ul li>ul li>ul li a { + padding-left:calc(var(--cui-spacing) * 3) +} +.cui .sidebar ul li>ul li>ul li>ul li a { + padding-left:calc(var(--cui-spacing) * 4) +} +.cui .sidebar.sidebar--hidden { + width:0 +} +.cui .sidebar.sidebar--mini.sidebar--hidden { + width:0; + overflow:hidden +} +.cui .sidebar.sidebar--mini { + width:var(--cui-sidebar-width-mini); + overflow:visible +} +.cui .sidebar.sidebar--mini li a { + height:auto; + padding:var(--cui-sidebar-item-padding); + flex-wrap:nowrap; + flex-direction:column; + position:relative +} +.cui .sidebar.sidebar--mini a, +.cui .sidebar.sidebar--mini>ul>li.sidebar__item--selected a span[class^=icon-], +.cui .sidebar.sidebar--mini>ul>li>a:active span[class^=icon-], +.cui .sidebar.sidebar--mini>ul>li>a:focus span[class^=icon-], +.cui .sidebar.sidebar--mini>ul>li>a:hover span[class^=icon-] { + opacity:1 +} +.cui .sidebar.sidebar--mini a span[class^=icon-] { + margin:0; + font-size:var(--cui-sidebar-menu-icon-size-mini) +} +.cui .sidebar.sidebar--mini a span[class^=icon-]+* { + text-align:center; + white-space:normal; + margin-top:var(--cui-spacing-qtr); + font-size:1.1rem; + font-weight:400 +} +.cui .sidebar.sidebar--mini .sidebar__header .sidebar__header-title { + font-size:0 +} +.cui .sidebar.sidebar--mini .sidebar__drawer a, +.cui .sidebar.sidebar--mini .sidebar__item a { + justify-content:center +} +.cui .sidebar.sidebar--mini .sidebar__drawer { + position:relative +} +.cui .sidebar.sidebar--mini .sidebar__drawer ul { + display:block; + opacity:0; + margin-left:-100%; + height:0; + width:0; + visibility:hidden; + border-left:1px solid var(--cui-sidebar-divider-color) +} +.cui .sidebar.sidebar--mini .sidebar__drawer>a:after { + transform:rotate(315deg); + right:var(--cui-spacing-qtr); + width:5px; + height:5px; + bottom:12px +} +.cui .sidebar.sidebar--mini .sidebar__drawer.sidebar__drawer--opened>a:after { + transform:rotate(135deg) +} +.cui .sidebar.sidebar--mini .sidebar__drawer.sidebar__drawer--opened>ul { + position:absolute; + margin-left:0; + padding:0; + width:auto; + min-width:250px; + height:auto; + opacity:1; + flex-wrap:wrap; + left:100%; + top:0; + visibility:visible; + transition:margin-left .2s var(--cui-animate-timing-function),opacity .5s var(--cui-animate-timing-function); + box-shadow:5px 5px 5px rgba(0,0,0,.25) +} +.cui .sidebar.sidebar--mini .sidebar__drawer.sidebar__drawer--opened>ul a { + padding-left:var(--cui-spacing); + align-items:flex-start +} +.cui .sidebar.sidebar--mini .sidebar__drawer.sidebar__drawer--opened>ul>ul { + overflow-y:auto; + height:auto; + max-height:250px +} +.cui .content-overlay { + position:fixed; + top:0; + right:0; + bottom:0; + left:0; + z-index:1029; + display:block; + margin:auto; + background:rgba(0,0,0,.2); + content:''; + opacity:0; + cursor:pointer; + pointer-events:none +} +.cui a.sidebar-toggle { + opacity:1; + position:absolute; + left:26.5px +} +.cui a.sidebar-toggle span[class^=icon-] { + font-weight:700; + font-size:var(--cui-sidebar-menu-icon-size-mini) +} +.cui a.sidebar-toggle:hover { + opacity:1; + color:inherit +} diff --git a/app/static/css/customStyles.css b/app/static/css/customStyles.css new file mode 100644 index 0000000..2d1eea7 --- /dev/null +++ b/app/static/css/customStyles.css @@ -0,0 +1,121 @@ + +/*Masterpage*/ +#footer-link-meraki{ + height: 15px; +} +#footer-link-gve-devnet{ + height: 30px; + bottom: 4px; + position: relative; +} +#time_location_note{ + color: var(--cui-color-gray-500); + padding-top: 5px; + text-align: center; + font-size: var(--cui-font-size-sm); +} +/*Position footer at bottom. Even with less content.*/ +.cui .content{ + min-height: 93vh; +} +body.cui footer, body.cui .footer{ + margin-top: 0; +} +/*Header*/ +#header-logo{ + font-size: 23px; +} + +/*Login*/ +.required-label{ + color: var(--cui-form-label-color); +} +#customer-logo{ + height:55px; + margin-bottom: 10px; +} + +/*Left Menu*/ +.cui .sidebar{ +padding-top: 30px; +} + +/*Charts from chart.js*/ +.chartjs-render-monitor{ +background-color: white; +padding: 10px; +} + +/*list groups*/ +.list-group{ +padding-left: 0 !important; +} + +.list-group-item{ +list-style-type: none; +} + +#meraki_api h3{ +margin-top: 20px; +} + +.list-group-item .btn--link{ +padding-left: 0; +padding-right: 0; +text-align: left; +} + + +/*table*/ +.cui .responsive-table{ +width: 100%; +} + +.launch-button { + display: inline-flex; /* Makes the button inline and allows flexbox properties */ + align-items: center; /* Aligns text and icon vertically */ + padding: 5px 10px; /* Reduces padding for a smaller button */ + font-size: 0.8rem; /* Adjusts font size for the text */ + margin: 0; /* Removes any default margin */ +} + +.launch-button__text { + margin-right: 5px; /* Adds space between text and icon */ +} + +.launch-button__icon img { + width: 20px; /* Adjusts the size of the icon */ + height: auto; /* Keeps the aspect ratio of the icon */ +} +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + cursor: pointer; +} diff --git a/app/static/css/mui-standard.css b/app/static/css/mui-standard.css new file mode 100644 index 0000000..7b29432 --- /dev/null +++ b/app/static/css/mui-standard.css @@ -0,0 +1,318 @@ +.cui { + color: var(--cui-font-color); + font-family: var(--cui-font-stack); + font-weight:var(--cui-font-weight); + font-size:var(--cui-font-size); + background-color:var(--cui-background-color); +} + +/*Button General*/ +.cui .btn { + cursor:pointer; + position:relative; + display:inline-block; + text-align:center; + text-decoration:none; + text-transform:var(--cui-button-text-transform); + border-width:var(--cui-button-border-thickness); + border-radius:var(--cui-button-border-radius); + border-style:solid; + line-height:2.8rem; + padding:0 15px; + font-size:var(--cui-font-size); + background-color:var(--cui-theme-primary); + border-color:var(--cui-theme-primary); + font-weight: var(--cui-button-font-weight); + } + .cui .btn.hover, + .cui .btn:hover { + background-color:var(--cui-theme-primary-darker); + } + .cui .btn, .cui .btn-group{ + --cui-button-text-transform: uppercase; + --cui-button-font-weight: 500; + text-transform:var(--cui-button-text-transform); + font-weight:var(--cui-button-font-weight); + } + +/*Primary Button*/ +.cui .btn.btn--primary { + background-color:var(--cui-theme-primary); + border-color:var(--cui-theme-primary); + color:var(--cui-theme-primary-color); + } + .cui .btn.btn--primary.hover, + .cui .btn.btn--primary:hover { + transition:all var(--cui-animate-speed) var(--cui-animate-timing-function); + background-color:var(--cui-theme-primary-darker); + color:var(--cui-theme-primary-color); + } + .cui .btn.btn--primary.focus, + .cui .btn.btn--primary:focus { + opacity:1; + outline-offset:1px; + outline-width:thin; + outline-style:none; + } + .cui .btn.btn--primary.disabled, + .cui .btn.btn--primary[disabled] { + background-color:transparent; + border:1px dotted var(--cui-inactive-color); + color:var(--cui-inactive-color); + opacity:1; + } + .cui .btn.btn--primary.active, + .cui .btn.btn--primary.selected, + .cui .btn.btn--primary:active { + background-color:var(--cui-theme-primary-darker); + color:var(--cui-theme-primary-color); + } + .cui .btn.btn--primary.active:after, + .cui .btn.btn--primary.selected:after, + .cui .btn.btn--primary:active:after { + border-top-color:var(--cui-theme-primary-color); + } + +/*Secondary Button*/ +.cui .btn.btn--secondary { + background-color: transparent; + border-color:var(--cui-theme-secondary); + color:var(--cui-theme-secondary); + } + .cui .btn.btn--secondary.hover, + .cui .btn.btn--secondary:hover { + border: 1px solid --cui-theme-secondary; + background-color:var(--cui-theme-secondary); + color:var(--cui-color-white); + } + .cui .btn.btn--secondary.focus, + .cui .btn.btn--secondary:focus { + box-shadow: none; + } + .cui .btn.btn--secondary.active, + .cui .btn.btn--secondary.selected, + .cui .btn.btn--secondary:active { + border: 1px solid --cui-theme-secondary; + background-color:var(--cui-color-white); + color:var(--cui-theme-secondary-color); + } + .cui .btn.btn--secondary.active:after, + .cui .btn.btn--secondary.selected:after, + .cui .btn.btn--secondary:active:after { + border-top-color: none; + } + + /*Button success*/ + .cui .btn.btn--success.hover, .cui .btn.btn--success:hover{ + background-color: var(--cui-theme-success-darker) !important; + } + + /*button danger*/ + .cui .btn.btn--danger.hover, .cui .btn.btn--danger:hover{ + background-color: var(--cui-theme-danger-darker) !important; + } + + .cui .btn.btn--dark.hover, .cui .btn.btn--dark:hover{ + background-color: #000 !important; + } + + .cui .btn.btn--ghost.hover, .cui .btn.btn--ghost:hover{ + background-color: var(--cui-theme-dark-darker) !important; + } + +/*Header*/ +.cui .header { + --cui-header-background: #fff; + background:var(--cui-header-background); + --cui-header-border-bottom:0; + border-bottom:0; + --cui-header-logo-font-size:var(--cui-font-size-lg); + --cui-header-padding:0 var(--cui-spacing); + /*--cui-header-title-font-size:var(--cui-font-size-20);*/ + /*--cui-header-toggle-font-size:var(--cui-font-size-20);*/ + --cui-header-title-font-weight:500; + --cui-header-item-spacing:var(--cui-spacing); + --cui-header-zindex:calc(var(--cui-max-zindex) + 1); + z-index:var(--cui-header-zindex); + display:flex; + position:fixed; + top:0; + left:0; + right:0; + align-items:center; + height:var(--cui-header-height); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12); +} + +/*Forms*/ +.cui .form-group .form-group__text label{ + color: var(--cui-form-label-color); +} + +.cui .form-group .form-group__text input, .cui .form-group .form-group__text select, .cui .form-group .form-group__text textarea{ + --cui-form-background: white; +} + +.cui .checkbox, .cui .radio input, .cui .select input{ + --cui-form-label-color: var(--cui-color-gray-400); + --cui-form-background: white; + background: var(--cui-form-background); +} + +.cui .form-group, .cui .switch, .cui label.checkbox{ + --cui-form-label-color: var(--cui-color-gray-400); + background: transparent; +} + +.cui .form-group .form-group__text.select input, .cui .form-group .form-group__text.select select, .cui .form-group .form-group__text.select textarea{ + background: var(--cui-form-background); +} + +input{ + border: var(--cui-border); +} +.cui .checkbox .checkbox__input, .cui .checkbox{ + --cui-checkbox-background: var(--cui-form-background); + --cui-checkbox-background-active: var(--cui-form-background); + background-color: var(--cui-form-background); +} + +/*Footer*/ +.cui .footer, +.cui footer { + display:flex; + align-items:center; + justify-content:center; + padding:var(--cui-footer-padding); + margin-top:var(--cui-spacing); + border-top:0; + background-color:var(--cui-footer-background); + color:var(--cui-font-color); +} + +.cui .footer a, .cui footer a{ + color: var(--cui-color-gray-500); +} + +.cui .footer a:active, .cui .footer a:focus, .cui .footer a:hover, .cui footer a:active, .cui footer a:focus, .cui footer a:hover{ + text-decoration: none; +} + +.cui .footer a:hover, .cui footer a:hover{ + color: var(--cui-color-gray-500); +} + + +/*Panel*/ +.cui .panel, .cui a.panel{ + --cui-panel-border-radius: 7px; + background-color: var(--cui-color-gray-100); + border: none; +} +.cui .label.label--raised, .cui .panel.panel--raised, .cui a.panel.panel--raised{ + box-shadow: none; +} + +.cui .panel.panel--secondary, .cui a.panel.panel--secondary { + background-color: var(--cui-theme-secondary); + color: var(--cui-color-white); +} + +/*Labels*/ +.cui .label.label--secondary { + background-color: var(--cui-theme-secondary); + border: var(--cui-label-border-thickness) solid var(--cui-theme-secondary); + color: var(--cui-theme-secondary-color); +} + +.cui .label.label--bordered, .cui .label.label--outlined{ + background: transparent; + color: var(--cui-font-color); +} + + +/*Steps*/ +.cui .steps.steps--secondary .step.active .step__icon, .cui .steps.steps--secondary .ui-step.active .step__icon, .cui .steps.ui-steps--secondary .step.active .step__icon, .cui .steps.ui-steps--secondary .ui-step.active .step__icon, .cui .ui-steps.steps--secondary .step.active .step__icon, .cui .ui-steps.steps--secondary .ui-step.active .step__icon, .cui .ui-steps.ui-steps--secondary .step.active .step__icon, .cui .ui-steps.ui-steps--secondary .ui-step.active .step__icon{ + color: var(--cui-color-white); +} + + +/*Pagination*/ +.cui .pagination{ + --cui-pagination-background-active: var(--cui-theme-primary); + --cui-pagination-color-active: var(--cui-color-white); +} + +.cui .pagination>li>a:focus, .cui .pagination>li>a:hover { + border: 1px solid (--cui-color-white); + background: var(--cui-theme-primary); + color: var(--cui-color-white); +} + + +/*table*/ + +.cui .table { + --cui-table-header-separator: 1px solid #ccc; + border: 1px solid #ddd !important; +} + +.cui .table.table--lined th{ + background: #eee; +} + +.cui .responsive-table{ + border-radius: 12px; +} + +.cui .table.table--selectable>tbody>tr:hover{ + background: #ffe8b4; +} + +.cui .table.table--selectable>tbody>tr.active:not(:hover){ + background: var(--cui-color-white); +} + +.cui .table.table--selectable>tbody>tr.active>td:first-child, .cui .table.table--selectable>tbody>tr:hover>td:first-child{ + border-left-color: transparent; +} + +.cui .table.table--lined > tbody > tr:nth-child(2n){ + background: #f8f8f8; +} + +.cui .table.table--lined > tbody > tr:nth-child(2n+1){ + background: #fff; +} + +/*Tabs*/ +.cui .nav-tabs.tabs--embossed>li.active, .cui .tabs.tabs--embossed>li.active{ + box-shadow: 0; +} + +/*Headline*/ +.cui .h1, +.cui .h2, +.cui .h3, +.cui .h4, +.cui .h5, +.cui .h6, +.cui h1, +.cui h2, +.cui h3, +.cui h4, +.cui h5, +.cui h6 { + font-weight: bold !important; +} + +.cui .subheader, .cui .subtitle{ + text-transform: none; +} + +/*Badge*/ +.cui .badge{ + border-color: transparent; +} + + diff --git a/app/static/css/mui-variables.css b/app/static/css/mui-variables.css new file mode 100644 index 0000000..b6d08f0 --- /dev/null +++ b/app/static/css/mui-variables.css @@ -0,0 +1,152 @@ +:root{ + --cui-font-size: 13px !important; + --cui-font-size-xs:10px !important; + --cui-font-size-sm:12px !important; + --cui-font-size-lg:16px !important; + --cui-font-stack: "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Helvetica, verdana, sans-serif !important; + + + --cui-font-color: #393939 !important; + --cui-color-white: #fff !important; + --cui-color-light: #fff !important; + --cui-header-background:#fff !important; + --cui-background-color:#fff !important; + --cui-background-alt:#fff !important; + --cui-footer-background: #F8F8F8; + + --cui-color-gray-100:#F2F2F2 !important; + --cui-color-gray-200:#C9C9C9 !important; + --cui-color-gray-300:#898B8E !important; + --cui-color-gray-400:#636363 !important; + --cui-color-gray-500:#393939 !important; + --cui-color-gray-600:#1A1A1A !important; + --cui-color-gray-700:#0A0A0A !important; + --cui-color-gray-800:#0A0A0A !important; + --cui-color-gray-900:#0A0A0A !important; + + --cui-color-link:#4d8433 !important; + --cui-link-color-active: #4d8433 !important; + --cui-theme-primary-link-decoration:underline; + --cui-link-font-weight:400 !important; + + --cui-theme-primary:#67B346 !important; + --cui-theme-primary-darker:#5B993D !important; + --cui-theme-primary-lighter:#71c44d !important; + --cui-theme-primary-color:var(--cui-color-white) !important; + --cui-theme-primary-rgb: 103, 179, 70 !important; + + --cui-color-info:#3E579D !important; + --cui-color-midnight:#1D2847 !important; + --cui-color-ocean:#3E579D !important; + --cui-color-sky:#5576D1 !important; + --cui-color-sky-rgb:85, 118, 209 !important; + + --cui-theme-secondary:var(--cui-color-ocean) !important; + --cui-theme-secondary-darker:#1D2847 !important; + --cui-theme-secondary-lighter:#5576D1 !important; + --cui-theme-secondary-color:var(--cui-color-white) !important; + --cui-theme-secondary-rgb: 62, 87, 157 !important; + --cui-theme-colors: --cui-theme-secondary !important; + + --cui-button-border-radius: 6px !important; + --cui-border-radius-round: 6px !important; + --cui-button-text-transform: uppercase !important; + --cui-font-weight: 400 !important; + --cui-button-font-weight: 500 !important; + + --cui-border:var(--cui-color-gray-200) !important; + --cui-border-form-color:var(--cui-color-gray-200) !important; + --cui-border-color: var(--cui-color-gray-200) !important; + --cui-border-thickness:1px !important; + --cui-border:var(--cui-border-thickness) solid var(--cui-border-color) !important; + --cui-border-radius: 3px !important; + --cui-form-background: var(--cui-color-white) !important; + --cui-focus-color: var(--cui-theme-primary-lighter) !important; + --cui-accent-color: var(--cui-theme-primary-darker) !important; + + --cui-form-label-color: var(--cui-color-gray-400) !important; + --cui-checkbox-background: var(--cui-form-background) !important; + + + --cui-color-success:#67B346 !important; + --cui-color-warning:#f2a200 !important; + --cui-color-warning-alt:#efe941 !important; + + + --cui-theme-tertiary:#4d8433 !important; + --cui-theme-tertiary-darker:#46792f !important; + --cui-theme-tertiary-lighter:#4D8433 !important; + --cui-theme-tertiary-color:var(--cui-color-white) !important; + --cui-theme-tertiary-link-decoration: none !important; + --cui-theme-tertiary-rgb:77, 132, 51 !important; + + --cui-panel-border-radius: 12px !important; + /*--cui-shadow-outset-color:none !important; + --cui-shadow-outset:0 !important; + --cui-shadow-outset-sm:0 !important; + --cui-shadow-outset-lg:0 !important;*/ + --cui-shadow-outset-color:var(--cui-color-black) !important; + --cui-shadow-outset:0 0 20px rgba(0, 0, 0, 0.35) !important; + --cui-shadow-outset-sm:0 0 20px rgba(0, 0, 0, 0.35) !important; + --cui-shadow-outset-lg:0 0 20px rgba(0, 0, 0, 0.35) !important; + + --cui-theme-success:var(--cui-color-success) !important; + --cui-theme-success-darker:#5B993D !important; + --cui-theme-success-lighter:#71c44d !important; + --cui-theme-success-color:var(--cui-color-white) !important; + --cui-theme-success-link-decoration:none !important; + --cui-theme-success-rgb: 103, 179, 70 !important; + + --cui-theme-info:var(--cui-color-info) !important; + --cui-theme-info-darker:#1362b1 !important; + --cui-theme-info-lighter:#1c87f1 !important; + --cui-theme-info-color:var(--cui-color-white) !important; + --cui-theme-info-link-decoration:none !important; + --cui-theme-info-rgb: 62, 87, 157 !important; + + --cui-theme-warning-alt:var(--cui-color-warning) !important; + --cui-theme-warning-alt-darker:#E29200 !important; + --cui-theme-warning-alt-lighter:#ffb115 !important; + --cui-theme-warning-alt-color:var(--cui-color-dark) !important; + --cui-theme-warning-link-decoration: none !important; + --cui-theme-warning-alt-rgb:242, 162, 0 !important; + --cui-theme-warning-alt-link-decoration:underline !important; + --cui-theme-warning:var(--cui-color-warning) !important; + --cui-theme-warning-darker:#E29200 !important; + --cui-theme-warning-lighter:#ffb115 !important; + --cui-theme-warning-color:var(--cui-color-dark) !important; + --cui-theme-warning-rgb:242, 162, 0 !important; + + --cui-color-danger:#e64d2e !important; + --cui-theme-danger:var(--cui-color-danger) !important; + --cui-theme-danger-darker:#a83b26 !important; + --cui-theme-danger-lighter:#fd5433 !important; + --cui-theme-danger-link-decoration:none !important; + --cui-theme-danger-rgb: 230, 77, 46 !important; + + + --cui-theme-danger-link-decoration:none !important; + --cui-theme-dark:var(--cui-color-gray-500) !important; + --cui-theme-dark-darker: #333 !important; + --cui-theme-dark-lighter:#666d74 !important; + --cui-theme-dark-color:var(--cui-color-light) !important; + --cui-theme-dark-rgb:57, 57, 57 !important; + + --cui-theme-light-link-decoration:none !important; + --cui-theme-light: var(--cui-color-gray-200) !important; + --cui-theme-light-darker:var(--cui-color-gray-300) !important; + --cui-theme-light-lighter:var(--cui-color-gray-100) !important; + --cui-theme-light-color:var(--cui-color-dark) !important; + --cui-theme-light-rgb:201, 201, 201 !important; + + --cui-color-dark:var(--cui-font-color); + --cui-color-light:var(--cui-color-white); + + --cui-inactive-color: var(--cui-color-link) !important; + --cui-background-active: var(--cui-color-gray-200) !important; + + --cui-pagination-background-active: var(--cui-theme-primary) !important; + --cui-pagination-color-active: var(--cui-color-white) !important; + + --cui-theme-colors:primary,secondary,tertiary,success,danger,warning-alt,warning,dark,light!important; + --cui-gray-colors:white,gray-100,gray-200,gray-300,gray-400,gray-500,gray-600,gray-700,gray-800,gray-900,black!important; } \ No newline at end of file diff --git a/app/static/fonts/CiscoSans/CiscoSansTTBold.woff b/app/static/fonts/CiscoSans/CiscoSansTTBold.woff new file mode 100644 index 0000000..92ba291 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTBold.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTBold.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTBold.woff2 new file mode 100644 index 0000000..bd20d0f Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTBold.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTBoldOblique.woff b/app/static/fonts/CiscoSans/CiscoSansTTBoldOblique.woff new file mode 100644 index 0000000..7d57941 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTBoldOblique.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTBoldOblique.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTBoldOblique.woff2 new file mode 100644 index 0000000..f0eb429 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTBoldOblique.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTCondBold.woff b/app/static/fonts/CiscoSans/CiscoSansTTCondBold.woff new file mode 100644 index 0000000..98f5039 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTCondBold.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTCondBold.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTCondBold.woff2 new file mode 100644 index 0000000..855a4db Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTCondBold.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTCondRegular.woff b/app/static/fonts/CiscoSans/CiscoSansTTCondRegular.woff new file mode 100644 index 0000000..c7fd5ae Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTCondRegular.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTCondRegular.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTCondRegular.woff2 new file mode 100644 index 0000000..54d9bcb Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTCondRegular.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTExtraLight.woff b/app/static/fonts/CiscoSans/CiscoSansTTExtraLight.woff new file mode 100644 index 0000000..a83daa4 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTExtraLight.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTExtraLight.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTExtraLight.woff2 new file mode 100644 index 0000000..9314783 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTExtraLight.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTExtraLightOblique.woff b/app/static/fonts/CiscoSans/CiscoSansTTExtraLightOblique.woff new file mode 100644 index 0000000..02fbef8 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTExtraLightOblique.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTExtraLightOblique.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTExtraLightOblique.woff2 new file mode 100644 index 0000000..c2d8bd3 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTExtraLightOblique.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTHeavy.woff b/app/static/fonts/CiscoSans/CiscoSansTTHeavy.woff new file mode 100644 index 0000000..9bf053c Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTHeavy.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTHeavy.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTHeavy.woff2 new file mode 100644 index 0000000..a11ac5c Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTHeavy.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTHeavyOblique.woff b/app/static/fonts/CiscoSans/CiscoSansTTHeavyOblique.woff new file mode 100644 index 0000000..f70c833 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTHeavyOblique.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTHeavyOblique.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTHeavyOblique.woff2 new file mode 100644 index 0000000..6b86c9d Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTHeavyOblique.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTLight.woff b/app/static/fonts/CiscoSans/CiscoSansTTLight.woff new file mode 100644 index 0000000..41f9546 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTLight.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTLight.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTLight.woff2 new file mode 100644 index 0000000..55f7bee Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTLight.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTLightOblique.woff b/app/static/fonts/CiscoSans/CiscoSansTTLightOblique.woff new file mode 100644 index 0000000..a35eb7f Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTLightOblique.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTLightOblique.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTLightOblique.woff2 new file mode 100644 index 0000000..32fc7ad Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTLightOblique.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTMedium.woff b/app/static/fonts/CiscoSans/CiscoSansTTMedium.woff new file mode 100644 index 0000000..c5a7cfd Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTMedium.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTMedium.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTMedium.woff2 new file mode 100644 index 0000000..56524d0 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTMedium.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTMediumOblique.woff b/app/static/fonts/CiscoSans/CiscoSansTTMediumOblique.woff new file mode 100644 index 0000000..8e43fb6 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTMediumOblique.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTMediumOblique.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTMediumOblique.woff2 new file mode 100644 index 0000000..80b1195 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTMediumOblique.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTRegular.woff b/app/static/fonts/CiscoSans/CiscoSansTTRegular.woff new file mode 100644 index 0000000..8df2853 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTRegular.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTRegular.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTRegular.woff2 new file mode 100644 index 0000000..35da168 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTRegular.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTRegularOblique.woff b/app/static/fonts/CiscoSans/CiscoSansTTRegularOblique.woff new file mode 100644 index 0000000..c9aa6c8 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTRegularOblique.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTRegularOblique.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTRegularOblique.woff2 new file mode 100644 index 0000000..13a8097 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTRegularOblique.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTThin.woff b/app/static/fonts/CiscoSans/CiscoSansTTThin.woff new file mode 100644 index 0000000..47ee002 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTThin.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTThin.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTThin.woff2 new file mode 100644 index 0000000..99b44b1 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTThin.woff2 differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTThinOblique.woff b/app/static/fonts/CiscoSans/CiscoSansTTThinOblique.woff new file mode 100644 index 0000000..1e4379d Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTThinOblique.woff differ diff --git a/app/static/fonts/CiscoSans/CiscoSansTTThinOblique.woff2 b/app/static/fonts/CiscoSans/CiscoSansTTThinOblique.woff2 new file mode 100644 index 0000000..24255f2 Binary files /dev/null and b/app/static/fonts/CiscoSans/CiscoSansTTThinOblique.woff2 differ diff --git a/app/static/fonts/cui-font.eot b/app/static/fonts/cui-font.eot new file mode 100644 index 0000000..20a94d4 Binary files /dev/null and b/app/static/fonts/cui-font.eot differ diff --git a/app/static/fonts/cui-font.svg b/app/static/fonts/cui-font.svg new file mode 100644 index 0000000..862bf5e --- /dev/null +++ b/app/static/fonts/cui-font.svg @@ -0,0 +1,1584 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/static/fonts/cui-font.ttf b/app/static/fonts/cui-font.ttf new file mode 100644 index 0000000..5934515 Binary files /dev/null and b/app/static/fonts/cui-font.ttf differ diff --git a/app/static/fonts/cui-font.woff b/app/static/fonts/cui-font.woff new file mode 100644 index 0000000..abbe81c Binary files /dev/null and b/app/static/fonts/cui-font.woff differ diff --git a/app/static/fonts/cui-font.woff2 b/app/static/fonts/cui-font.woff2 new file mode 100644 index 0000000..2dd329b Binary files /dev/null and b/app/static/fonts/cui-font.woff2 differ diff --git a/app/static/images/launch.png b/app/static/images/launch.png new file mode 100644 index 0000000..b3b9364 Binary files /dev/null and b/app/static/images/launch.png differ diff --git a/app/static/images/logo_long_blue.png b/app/static/images/logo_long_blue.png new file mode 100644 index 0000000..ecfee46 Binary files /dev/null and b/app/static/images/logo_long_blue.png differ diff --git a/app/static/js/index.js b/app/static/js/index.js new file mode 100644 index 0000000..e1d85f6 --- /dev/null +++ b/app/static/js/index.js @@ -0,0 +1,54 @@ +// Create a new Webex app instance +var app = new window.Webex.Application(); +var meetingID = null; + +// Utility function to display app messages +function log(type, data) { + var ul = document.getElementById("console"); + var li = document.createElement("li"); + var payload = document.createTextNode(`${type}: ${JSON.stringify(data)}`); + li.appendChild(payload); + ul.prepend(li); +} + +// Define a function to handle getting the meeting info +function getMeetingInfo() { + app.context.getMeeting().then((m) => { + log("getMeeting()", m); + meetingID = m.id; // Store the meeting identifier + }).catch((error) => { + if (error === 5) { // Checking for BAD_CONTEXT error code + log("Error", "This app can only be used within Webex Meetings"); + // Additional handling can go here (e.g., hide UI elements or show an error message) + } else { + log("getMeeting() promise failed with error", Webex.Application.ErrorCodes[error]); + } + }); +} + + +// Wait for onReady() promise to fulfill before using the framework +app.onReady().then(() => { + log("App ready. Instance", app); + getMeetingInfo(); +}).catch((errorcode) => { + log("Error with code: ", Webex.Application.ErrorCodes[errorcode]); +}); + +// Retrieving PUBLIC_URL +const urlToShareBase = document.getElementById('publicUrl').value; + +// Button click handler to set share URL +function handleSetShare() { + var urlToShare = `${urlToShareBase}/timer?meetingID=${encodeURIComponent(meetingID)}`; + var titleToShare = "Timer App" + + app.setShareUrl(urlToShare, "", titleToShare).then(() => { + log("Set share URL", urlToShare); + // Redirect to timer page & Append meetingID as a query parameter for time instance + window.location.href = "/timer?meetingID=" + encodeURIComponent(meetingID); + }).catch((errorcode) => { + log("Error: ", Webex.Application.ErrorCodes[errorcode]); + }); +} + diff --git a/app/static/js/loader.js b/app/static/js/loader.js new file mode 100644 index 0000000..3c6220b --- /dev/null +++ b/app/static/js/loader.js @@ -0,0 +1,12 @@ + +/*Loading indicator on button*/ +function showLoadingText() { + document.getElementById("login-submit").value = "Loading ..."; +} + +function showOriginalText(originalButtonText){ + document.getElementById("login-submit").value = originalButtonText; +} + + + \ No newline at end of file diff --git a/app/static/js/selects.js b/app/static/js/selects.js new file mode 100644 index 0000000..1c1a901 --- /dev/null +++ b/app/static/js/selects.js @@ -0,0 +1,11 @@ +$(function() { + /*Show corresponding network list as soon as organization is choosen in dropdown + reset child fields*/ + $('#organizations_select').bind('change', function() { + $('.network-select').attr("hidden", true); + $('.network-select .networks').val("0"); + $('.network-select .networks').attr("required", true); + $('.camera-checkboxes').attr("hidden", true); + var selectid = $( "#organizations_select option:selected" ).val(); + $('#' + selectid).attr("hidden",false); + }); + }); \ No newline at end of file diff --git a/app/static/js/styleguide.js b/app/static/js/styleguide.js new file mode 100644 index 0000000..e251c33 --- /dev/null +++ b/app/static/js/styleguide.js @@ -0,0 +1,752 @@ +var allIcons = []; +var allEntries = []; +var scrollSpy; + +var curProgress = 0; +var curProgressTimer; + +var curGaugeProgress = 0; +var curGaugeTimer; + +var toastTimer; + +function doTabChange(id) { + var el = $('#'+id); + el.siblings().removeClass('active'); + var tabsId = id.substring(0, id.indexOf('-')); + $('body #'+tabsId+'-content > .tab-pane').removeClass('active'); + el.addClass('active'); + $('body #'+id+'-content').addClass('active'); +} +function checkTheme() { + var theme = getStorageData('cui-theme'); + if (theme) { + $('#themeSwitcher .dropdown__menu a').removeClass('selected'); + if (theme === 'Dark') { + $('#theme-dark').addClass('selected'); + } else { + $('#theme-default').addClass('selected'); + } + switchTheme(theme); + } +} +function showToast(msg) { + if (toastTimer) { clearTimeout(toastTimer); } + + $('#styleguidestatus .toast__message').append(msg); + $('#styleguidestatus').addClass('show'); + + toastTimer = setTimeout(function () { + $('#styleguidestatus').removeClass('show'); + $('#styleguidestatus .toast__message').empty(); + toastTimer = null; + }, 3000); +} +function switchTheme(theme) { + if (theme === 'Dark') { + $('body').attr('data-theme', 'dark'); + $('#theme-code').attr('href', 'public/js/highlight/styles/atom-one-dark.css'); + } else { + $('body').attr('data-theme', 'default'); + $('#theme-code').attr('href', 'public/js/highlight/styles/atom-one-light.css'); + } + setStorageData('cui-theme', theme); +} +function copyHexToClipboard(title, hex) { + clipboard.copy(hex); + showToast('
Copied '+title+' '+hex+' to clipboard
'); +} +function copyIconToClipboard(id) { + $('#'+id+' a').click(function() { + clipboard.copy($(this).attr('data-icon')); + showToast('
Copied '+$(this).attr('data-icon')+' to clipboard'); + }); +} +function getCssVar(alias) { + return getComputedStyle(document.body).getPropertyValue(alias); +} +function buildSwatchGroup(id, alias, prefix) { + var el = $('body #'+id); + if (el) { + var colors = getCssVar(alias).split(','); + colors.forEach(function(color) { + var hex = getCssVar(prefix+color); + var html = [ + '
', + '
', + '
'+color+'
', + '
'+hex+'
', + '
' + ].join(''); + el.append(html); + }); + } +} +function populateSwatches() { + buildSwatchGroup('brand-colors', '--cui-brand-colors', '--cui-color-'); + buildSwatchGroup('theme-colors', '--cui-theme-colors', '--cui-theme-'); + buildSwatchGroup('gray-colors', '--cui-gray-colors', '--cui-color-'); + buildSwatchGroup('status-colors', '--cui-status-colors', '--cui-color-'); + buildSwatchGroup('misc-colors', '--cui-misc-colors', '--cui-color-'); +} +function highlightString(str, searchStr) { + return '' + searchStr + '' + str.substring(searchStr.length, str.length) + ''; +} +function getStorageData(key) { + return localStorage.getItem(key); +} +function setStorageData(key, value) { + localStorage.setItem(key, value); +} +function getQueryParam(key) { + var url = window.location.search.substring(1); + var urlVars = url.split('&'); + for (var ii = 0; ii < urlVars.length; ii++) { + var urlParam = urlVars[ii].split('='); + if (urlParam[0] === key) { + return urlParam[1]; + } + } +} +function setQueryParam(key, value) { + if (history.pushState) { + var params = new URLSearchParams(window.location.search); + params.set(key, value); + var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + params.toString(); + window.history.pushState({path:newUrl},'',newUrl); + } +} +function populateSearchEntries() { + allEntries = []; + var entries = $('#search-dictionary .searchable'); + for (var ii=0;ii

Panel '+ii+'

'); + } + wireCards(); +} +function wireAccordion() { + $('body .accordion > li > a').click(function() { + $(this).parent().toggleClass('active'); + }); +} +function wireScrollToTop() { + $(window).scroll(function () { + if ($(this).scrollTop() > 100) { + $('#scroll-to-top').fadeIn(500); + } else { + $('#scroll-to-top').fadeOut(500); + } + }); + $('#scroll-to-top').click(function () { + $("html, body").animate({ + scrollTop: 0 + }, 100); + return false; + }); +} +function wireCards() { + $('body #grid .panel').click(function() { + if ($(this).parent().hasClass('grid--selectable')) { + $(this).toggleClass('selected'); + } + }); + $('body #grid-cards').change(function() { + addCards($(this).val()); + }); + $('body #grid .panel #grid-card-cols').click(function(e) { + e.stopPropagation(); + }); + $('body #grid .panel #grid-card-cols').change(function() { + removeClassWildcard($(this).closest('.panel'), 'card--col-*'); + $(this).closest('.panel').addClass('card card--col-'+$(this).val()); + }); + $('body #grid .panel #grid-card-rows').click(function(e) { + e.stopPropagation(); + }); + $('body #grid .panel #grid-card-rows').change(function() { + removeClassWildcard($(this).closest('.panel'), 'card--row-*'); + $(this).closest('.panel').addClass('card card--row-'+$(this).val()); + }); +} +function calcSearchWindowHeight() { + var el = $('#search-results'); + var maxHeight = ($(window).height() - $('#search-kit').offset().top - $('#search-kit').height() - 40); + el.css('max-height', maxHeight + 'px'); +} +function shouldHideSidebar() { + if (window.innerWidth < 768) { + $('#styleguideSidebar').addClass('sidebar--hidden'); + } else { + $('#styleguideSidebar').addClass('sidebar--mini'); + $('#styleguideSidebar').removeClass('sidebar--hidden'); + } +} +function startGaugeAnimation() { + curGaugeTimer = setTimeout(function () { + curGaugeProgress += Math.floor(Math.random() * 10); + curGaugeProgress = (curGaugeProgress >= 100) ? 100 : curGaugeProgress; + $('body #gauge-example').attr('data-percentage', curGaugeProgress); + $('body #gauge-example #gauge-example-value').html(curGaugeProgress); + if (curGaugeProgress !== 100) { + startGaugeAnimation(); + } + }, 100); +} +function startProgressAnimation() { + curProgressTimer = setTimeout(function () { + curProgress += Math.floor(Math.random() * 10); + curProgress = (curProgress >= 100) ? 100 : curProgress; + $('body #progressbar-size .progressbar').attr('data-percentage', curProgress); + $('body #progressbar-size .progressbar .progressbar__label').html(curProgress + '%'); + if (curProgress !== 100) { + startProgressAnimation(); + } + }, 100); +} +function jumpTo(ref) { + document.location.href = "section-"+ref+".html#"+ref; +} +function doNav(url) { + shouldHideSidebar(); + document.location.href = url; +} +function updateUrl(ref, pattern) { + var path = window.location.pathname; + var url = path + '#' + ref; + history.pushState({ id: url }, 'Cisco UI Kit - ' + ref, url); + + startPageAnimation(pattern); +} +function updateScrollSpy(activeElem) { + + if (scrollSpy) { scrollSpy.destroy(); } + $('#subTabs').empty(); + + for (var ii=0;ii' + entry.name + ''); + } + if (entry.depth == '3' && entry.group.toLowerCase() == activeElem.toLowerCase()) { // The data + var anchor = entry.ref.substring(entry.ref.lastIndexOf('#')); + $('#subTabs').append('
  • ' + entry.name + ''); + } + } + setTimeout(function() { + scrollSpy = new Gumshoe('#subTabs a', { offset: 150 }); + }, 250); + + $('#subTabs a.scrollLink').click(function(e) { + var el = $($(this).attr('href')); + $('html,body').animate({ + scrollTop: el.offset().top - 120 + }, 250); + }); +} +function updateMainNav(selection) { + $('#styleguideTabs > li.tab').removeClass('active'); + $('#styleguideTabs-content > .tab-pane').removeClass('active'); + $('#styleguideTabs #styleguideTabs-'+selection).addClass('active'); + $('#styleguideTabs-content #styleguideTabs-'+selection+'-content').addClass('active'); +} +function updateMobileNav(selection) { + $('#styleguideDropdown > .dropdown__menu > a').removeClass('selected'); + $('#styleguideDropdown #styleguideDropdown-'+selection).addClass('selected'); + $('#styleguideDropdown input').val(selection); +} + +function wireHomeNav() { + $('#mobilehome').on('click', function(e) { + e.stopPropagation(); + var el = $(this).find('input'); + if (!el.hasClass('disabled') && !el.attr('disabled') && !el.hasClass('readonly') && !el.attr('readonly')) { + $(this).toggleClass('active'); + } + }); + $('#mobilehome > .dropdown__menu > a').on('click', function(e) { + var target = e.target.id; + var selection = target.substring(target.lastIndexOf('-')+1); + updateHomePageNav(selection); + updateHomePageNavMobile(selection); + }); +} +function updateHomePageNav(selection) { + $('#tabshome > li.tab').removeClass('active'); + $('#tabshome-content > .tab-pane').removeClass('active'); + $('#tabshome-'+selection).addClass('active'); + $('#tabshome-'+selection+'-content').addClass('active'); +} +function updateHomePageNavMobile(selection) { + $('#mobilehome > .dropdown__menu > a').removeClass('selected'); + $('#mobilehome #mobilehome-'+selection).addClass('selected'); + $('#mobilehome input').val($('#mobilehome #mobilehome-'+selection).text()); +} +function checkUrlAndSetupPage(url) { + if ((url.indexOf('index.html') !== -1) || (window.location.pathname === '\/')) { // Home page + if (url.lastIndexOf('#') != -1) { // Check for any home page anchors + var anchor = url.substring(url.lastIndexOf('#') + 1); + updateHomePageNav(anchor); + updateHomePageNavMobile(anchor); + } else { + updateHomePageNav('home'); + updateHomePageNavMobile('home'); + } + } + else if (url.lastIndexOf('#') != -1) { // Pattern page + var anchor = url.substring(url.lastIndexOf('#') + 1); + var str = _.split(anchor, '-')[1]; + var str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) { + return letter.toUpperCase(); + }); + + updateMainNav(str); + updateMobileNav(str); + + $('#styleguideDropdown > .dropdown__menu > a').on('click', function(e) { + updateMainNav(e.target.text); + updateScrollSpy(e.target.text); + $('html,body').animate({ + scrollTop: 0 + }, 250); + }); + + $('#styleguideTabs > li > a').on('click', function(e) { + updateMobileNav(e.target.innerText); + updateScrollSpy(e.target.innerText); + $('html,body').animate({ + scrollTop: 0 + }, 250); + }); + + setTimeout(function() { + // Now scroll to the appropriate anchor (if specified in the url) + var el = document.getElementById(anchor); + if (el !== null) { + el.scrollIntoView(); + window.scrollBy(0, -120); + updateScrollSpy(str); + } + }, 100); + } +} +function startPageAnimation(pattern) { + if (pattern === 'Gauge') { + curGaugeProgress = 0; + startGaugeAnimation(); + } else if (pattern === 'Progressbar') { + curProgress = 0; + startProgressAnimation(); + } +} +function doGlobalSearch(searchStr, forceFlag) { + var results = []; + searchStr = searchStr.toLowerCase(); + for (var ii=0;ii'; + } + _.forEach(_.groupBy(results, 'category'), function(value, key) { + str += '
    ' + key + '
    '; + _.each(value, function(result) { + if (result.group !== '') { + if (result.depth === "2") { + str +='' + highlightString(result.group, searchStr) + ''; + } else { + str += ''; + str += (_.startsWith(result.group.toLowerCase(), searchStr)) ? highlightString(result.group, searchStr) : result.group; + str += ' → '; + str += (_.startsWith(result.name.toLowerCase(), searchStr)) ? highlightString(result.name, searchStr) : result.name; + str += ''; + } + } + }); + str += '
    '; + }); + $('#searchKit').addClass('active'); + $('#search-results').append(str); +} +function searchIcons(icon) { + var ret = []; + for (var ii=0;ii').detach().appendTo('body').removeClass('hide'); +} +function closeModal (id) { + $('#'+id).detach().prependTo(('#'+id+'-placeholder')).addClass('hide'); +} + +$(document).ready(function() { + + // Wire the icon search + $('#icon-search-input').on('input', function() { + var searchStr = $('#icon-search-input').val(); + if (searchStr !== '') { + setIcons(searchIcons(searchStr)); + } + else { + clearSearch(); + } + }); + + // Wire the global search + $('#search-kit').on('click', function() { + if ($('#search-kit').val() === '') { + doGlobalSearch('', true); + } + }); + $('#search-kit').on('input', function() { + doGlobalSearch($('#search-kit').val(), false); + }); + + // Wire the gauge reset button + $('#gauge-start').click(function() { + if (curGaugeTimer) { clearTimeout(curGaugeTimer); } + curGaugeProgress = 0; + startGaugeAnimation(); + }); + + // Wire the progressbar reset button + $('#progressbar-start').click(function() { + if (curProgressTimer) { clearTimeout(curProgressTimer); } + curProgress = 0; + startProgressAnimation(); + }); + + // Wire the header sidebar toggle button + $('#sidebar-toggle').click(function() { + $('#styleguideSidebar').toggleClass('sidebar--mini'); + $('#sidebar-toggle span:first-child').removeClass(); + if ($('#styleguideSidebar').hasClass('sidebar--mini')) { + $('#sidebar-toggle span:first-child').addClass('icon-list-menu'); + } else { + $('#sidebar-toggle span:first-child').addClass('icon-toggle-menu'); + } + }); + + $('#mobile-sidebar-toggle').click(function() { + $('#styleguideSidebar').removeClass('sidebar--mini'); + $('#styleguideSidebar').toggleClass('sidebar--hidden'); + }); + + // Wire the sidebar drawer open/close toggles + $('#styleguideSidebar .sidebar__drawer > a').click(function(e) { + e.stopPropagation(); + $(this).parent().siblings().removeClass('sidebar__drawer--opened'); + $(this).parent().toggleClass('sidebar__drawer--opened'); + }); + + // Wire the sidebar selected item + $('#styleguideSidebar .sidebar__item > a').click(function() { + $('#styleguideSidebar .sidebar__item').removeClass('sidebar__item--selected'); + $(this).parent().addClass('sidebar__item--selected'); + }); + + // Wire the sidebar examples + $('body .sidebar__drawer > a').click(function() { + $(this).parent().toggleClass('sidebar__drawer--opened'); + }); + $('body .sidebar__item > a').click(function() { + $(this).parent().siblings().removeClass('sidebar__item--selected'); + $(this).parent().addClass('sidebar__item--selected'); + }); + + // Wire the button group examples + $('body .btn-group .btn').click(function() { + $(this).siblings().removeClass('selected'); + $(this).addClass('selected'); + }); + + // Wire the markup toggles + $('body .markup').removeClass('active'); + $('body .markup-toggle').click(function() { + $(this).parent().next().toggleClass('hide'); + $(this).parent().toggleClass('active'); + + if ($(this).hasClass('active')) { + $(this).find('.markup-label').text('Hide code'); + } + else if (!$(this).hasClass('active')) { + $(this).find('.markup-label').text('View code'); + } + }); + + // Wire the markup copy to clipboard events + $('body .clipboard-toggle').click(function() { + clipboard.copy($(this).parent().parent().find('code.code-raw').text()); + showToast('Copied code to clipboard'); + $(this).addClass('text-bold').text('copied!'); + }); + + copyIconToClipboard('icon-main-results'); + + // Wire the tabs + $('body li.tab').click(function() { + doTabChange(this.id); + //$(this).siblings().removeClass('active'); + //var tabsId = this.id.substring(0, this.id.indexOf('-')); + //$('body #'+tabsId+'-content > .tab-pane').removeClass('active'); + //$(this).addClass('active'); + //$('body #'+this.id+'-content').addClass('active'); + }); + + // Wire pagination + $('body ul.pagination > li > a').click(function() { + var el = $(this).parent().siblings().find('.active'); + $(this).parent().siblings().removeClass('active'); + $(this).parent().addClass('active'); + }); + + // Wire closeable alerts + $('body .alert .alert__close').click(function() { + $(this).parent().addClass('hide'); + }); + + // Wire the Card pattern examples + $('body a.panel').click(function() { + $(this).toggleClass('selected'); + }); + + // Wire the Advanced Grid example + $('body #grid-group').click(function() { + $(this).parent().find('#grid-group').removeClass('selected'); + var cls = 'grid--' + $(this).text(); + $('body .grid').removeClass('grid--3up'); + $('body .grid').removeClass('grid--4up'); + $('body .grid').removeClass('grid--5up'); + $('body .grid').addClass(cls); + $(this).addClass('selected'); + }); + + $('body #grid-cards').change(function() { + addCards($(this).val()); + }); + + $('body #grid-gutters').change(function() { + $('body #grid').css('gridGap', $(this).val()+'px'); + }); + + $('body #grid-selectable').change(function() { + $('body #grid').toggleClass('grid--selectable'); + $('body .grid .panel').removeClass('selected'); + }); + + addCards(15); + + // Wire the carousel examples + $('body .carousel__controls a.dot').click(function() { + setActiveSlide(this, 'fadeIn'); + }); + $('body .carousel__controls a.back').click(function() { + var last = $(this).parent().find('a.dot').last(); + var cur = $(this).parent().find('a.dot.active'); + var active = cur.prev(); + if (active[0].id === "") { + active = last; + } + setActiveSlide(active[0], 'slideInLeftSmall'); + }); + $('body .carousel__controls a.next').click(function() { + var first = $(this).parent().find('a.dot').first(); + var cur = $(this).parent().find('a.dot.active'); + var active = cur.next(); + if (active[0].id === "") { + active = first; + } + setActiveSlide(active[0], 'slideInRightSmall'); + }); + + wireHomeNav(); + + // Wire the accordion examples + wireAccordion(); + + // Wire scroll to top button + wireScrollToTop(); + + // Wire the dropdown examples + $('body .dropdown').not('.ignore').click(function(e) { + e.stopPropagation(); + var el = $(this).find('input'); + if (!el.hasClass('disabled') && !el.attr('disabled') && !el.hasClass('readonly') && !el.attr('readonly')) { + $(this).toggleClass('active'); + } + }); + $('body .dropdown:not(.ignore) .dropdown__menu a').click(function(e) { + e.stopPropagation(); + + var origVal = $(this).parent().parent().find('input').val(); + var newVal = $(this).text(); + + $(this).parent().find('a').removeClass('selected'); + $(this).addClass('selected'); + $(this).parent().parent().find('input').val($(this).text()); + $(this).parent().parent().removeClass('active'); + + var id = $(this).parent().parent()[0].id; + if (id === 'themeSwitcher') { + switchTheme($(this).text()); + } + }); + + // Close dropdowns and open sidebar drawers on clicks outside the dropdowns + $(document).click(function() { + $('body .dropdown').not('.ignore').removeClass('active'); + $('#styleguideSidebar .sidebar__drawer').removeClass('sidebar__drawer--opened'); + }); + + // Wire the selectable tables + $('body .table.table--selectable tbody > tr').click(function() { + $(this).toggleClass('active'); + var cb = $(this).find('td .checkbox input'); + if (cb) { + cb.prop('checked', !cb.prop('checked')); + } + }); + // Wire the table wells example + $('body #table-wells tbody > tr').click(function() { + $(this).find('td span.icon-chevron-up').removeClass('icon-chevron-up').addClass('icon-chevron-down'); + $(this).find('td span.icon-chevron-down').removeClass('icon-chevron-down').addClass('icon-chevron-up'); + $(this).next().toggleClass('hide'); + }); + + // Wire the global modifiers + $('body #global-animation').change(function() { + $('body').toggleClass('cui--animated'); + }); + $('body #global-headermargins').change(function() { + $('body').toggleClass('cui--headermargins'); + }); + $('body #global-spacing').change(function() { + $('body').toggleClass('cui--compressed'); + }); + $('body #global-wide').change(function() { + $('body').toggleClass('cui--wide'); + }); + $('body #global-sticky').change(function() { + $('body').toggleClass('cui--sticky'); + }); + + // Load the changelog + $.get('changelog.md', function(markdownContent) { + var converter = new Markdown.Converter(); + $("#changelog-content").html(converter.makeHtml(markdownContent)); + }); + + // Load the broadcast file (if it exists) + $.getJSON('broadcast.json', function(data) { + if (data && data.text && data.text.length) { + $("#broadcast-msg").html(data.text); + $("#broadcast").toggleClass('hide'); + } + }); + + window.addEventListener('hashchange', function (e) { + checkUrlAndSetupPage(e.newURL); + }, false); + + // Check for anchor link in the URL + checkUrlAndSetupPage(window.location.href); + + // Listen of window changes and close the sidebar if necessary + $(window).resize(function() { + shouldHideSidebar(); + }); + + shouldHideSidebar(); + populateSearchIcons(); + populateSearchEntries(); + populateSwatches(); + checkTheme(); +}); diff --git a/app/templates/admin_home.html b/app/templates/admin_home.html new file mode 100644 index 0000000..a9d9693 --- /dev/null +++ b/app/templates/admin_home.html @@ -0,0 +1,36 @@ +{% extends "/layouts/masterPage.html" %} +{% block content %} +
    +

    Webex Calling Detailed Report App

    +
    +

    Overview

    +

    + This application requires the user to login to Webex and share their location so allow Webex Calling. +

    +

    How it Works

    +

    + 1. Users authenticate with Webex Teams through a secure OAuth2 flow. +

    +

    + 2. Upon authentication, the application redirects to a page where the user is prompted to share location. +

    +

    + 3. The user info and location is passed to the backend for processing. +

    +

    + 4. If the user is within the required geolocation, they will be able to make Webex Calls, otherwise blocked. +

    +

    Admin - Getting Started

    +

    + 1. Click the button below to login with Webex. +

    +

    + 2. Once logged in, click the button to start call monitoring. +

    +
    + + + +
    + +{% endblock %} diff --git a/app/templates/admin_success.html b/app/templates/admin_success.html new file mode 100644 index 0000000..e12b7ea --- /dev/null +++ b/app/templates/admin_success.html @@ -0,0 +1,38 @@ +{% extends "layouts/masterPage.html" %} +{% block content %} + +
    +

    Admin Authentication Successful

    +

    Welcome, Admin. You are now authenticated and can start call monitoring.

    + +
    + + + + +{% endblock %} diff --git a/app/templates/error.html b/app/templates/error.html new file mode 100644 index 0000000..de171e4 --- /dev/null +++ b/app/templates/error.html @@ -0,0 +1,7 @@ +{% extends "layouts/masterPage.html" %} +{% block content %} + +
    +

    {{ error }}

    +
    +{% endblock %} diff --git a/app/templates/includes/footer.html b/app/templates/includes/footer.html new file mode 100644 index 0000000..3fe966c --- /dev/null +++ b/app/templates/includes/footer.html @@ -0,0 +1,27 @@ + + + diff --git a/app/templates/includes/nav.html b/app/templates/includes/nav.html new file mode 100644 index 0000000..c19057a --- /dev/null +++ b/app/templates/includes/nav.html @@ -0,0 +1,27 @@ + + diff --git a/app/templates/layouts/masterPage.html b/app/templates/layouts/masterPage.html new file mode 100644 index 0000000..e1f327d --- /dev/null +++ b/app/templates/layouts/masterPage.html @@ -0,0 +1,42 @@ + + + + + + + + + + + {{ appName }} + + + + + + + + + + + + + + + + + + + + {% include 'includes/nav.html' %} +
    +
    + {% block content %} + + {% endblock %} +
    +
    + {% include 'includes/footer.html' %} + + diff --git a/app/templates/user_oauth_success.html b/app/templates/user_oauth_success.html new file mode 100644 index 0000000..f323394 --- /dev/null +++ b/app/templates/user_oauth_success.html @@ -0,0 +1,48 @@ +{% extends "layouts/masterPage.html" %} +{% block content %} +
    +

    User login successful! Now sharing geolocation...

    + +
    + +{% endblock %} diff --git a/app/webex_api.py b/app/webex_api.py new file mode 100644 index 0000000..bb6730b --- /dev/null +++ b/app/webex_api.py @@ -0,0 +1,109 @@ +""" +Copyright (c) 2024 Cisco and/or its affiliates. +This software is licensed to you under the terms of the Cisco Sample +Code License, Version 1.1 (the "License"). You may obtain a copy of the +License at + https://developer.cisco.com/docs/licenses +All use of the material herein must be in accordance with the terms of +the License. All rights not expressly granted by the License are +reserved. Unless required by applicable law or agreed to separately in +writing, software distributed under the License is distributed on an "AS +IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express +or implied. +""" + +__author__ = "Mark Orszycki " +__copyright__ = "Copyright (c) 2024 Cisco and/or its affiliates." +__license__ = "Cisco Sample Code License, Version 1.1" + +import requests +import json +from logger.logrr import lm +from config.config import c + + +class MyWebex: + """ + MyWebex class to handle interactions with Webex APIs. + """ + + def __init__(self, access_token): + """ + Initialize MyWebex with the given access token. + Args: + access_token (str): Webex API access token. + webex_room_id (str, optional): ID of the Webex room to send messages to. + """ + self.base_url = c.WEBEX_BASE_URL + self.access_token = access_token + self.headers = {'Authorization': f'Bearer {self.access_token}', 'Content-Type': 'application/json'} + + def webex_api_call(self, method, endpoint, data=None): + """ + Generic function to make API calls to Webex. + Args: + method (str): HTTP method ('get', 'post', 'delete', etc.). + endpoint (str): API endpoint url. + data (dict, optional): Payload for POST requests. + Returns: + Response object: The response from the Webex API. + """ + url = f'{self.base_url}/{endpoint}' + # lm.p_panel(f"url: {url}, headers: {self.headers}, endpoint: {endpoint}") # debugging + response = requests.request(method, url, headers=self.headers, json=data) + self.handle_response(response) + return response + + def handle_response(self, response): + status_code_messages = { + 200: '[bright_green]200: Webex Call Successful - Data retrieved or successfully modified[/bright_green]', + 201: '[bright_green]201: Webex API Call Successful - Data retrieved or successfully modified[/bright_green]', + 202: '[bright_green]202: Webex API Call Successful - Request accepted and processing (asynchronous operation)[/bright_green]', + 203: '[bright_green]203: Webex API Call Successful - Request successful, no content to return[/bright_green]', + 204: '[bright_green]204: Webex API Call Successful - Request successful, no content to return[/bright_green]', + 400: '[red]400: Bad Request - The request was invalid or cannot be otherwise served[/red]', + 401: '[red]401: Unauthorized - Authentication credentials were missing or incorrect[/red]', + 403: '[red]403: Forbidden - The request is understood, but it has been refused or access is not allowed[/red]', + 404: '[red]404: Not Found - The URI requested is invalid or the resource requested does not exist[/red]', + 500: '[red]500: Internal Server Error - Something is broken on the server[/red]', + 503: '[red]503: Service Unavailable - The server is currently unable to handle the request due to a temporary overload or maintenance[/red]' + } + + # Print the corresponding message for the status code + lm.console.print( + status_code_messages.get(response.status_code, f'Error handling Webex API call. Status Code: {response.status_code}. Response: {response.text}')) + + # Handle JSON content if the response is successful + if response.status_code in [200, 201, 202, 203, 204]: + try: + return response.json() + except json.JSONDecodeError: + return response.text # For responses without JSON content + + def check_token_validity(self): + """ + Check if the provided Webex access token is valid. + Returns: + bool: True if the token is valid, False otherwise. + """ + response = self.webex_api_call('get', 'people/me') + if response.status_code == 200: + return True + else: + lm.logger.error(f'Invalid or expired token. Response: {response.text}') + return False + + def get_user_info(self): + """ + Fetches the user's information from the Webex API. + Returns: + dict: User information. + """ + endpoint = 'people/me' + response = self.webex_api_call('GET', endpoint) + return self.handle_response(response) + + def get_person_details(self, person_id): + endpoint = f'people/{person_id}' + response = self.webex_api_call('GET', endpoint) + return self.handle_response(response) diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..59434d8 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,10 @@ +services: + gve_devnet_webex_xsi_call_block: + image: ghcr.io/gve-sw/gve_devnet_webex_xsi_call_block:latest + build: . + container_name: gve_devnet_webex_xsi_call_block + env_file: + - ./app/config/.env + volumes: + - .:/app + restart: "always" diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..00c06e9 --- /dev/null +++ b/requirements.txt @@ -0,0 +1,57 @@ +databases==0.9.0 +pydantic==2.6.4 +pydantic_settings==2.2.1 +python-dotenv==1.0.1 +Requests==2.31.0 +requests_oauthlib==2.0.0 +rich==13.7.1 +SQLAlchemy==2.0.29 +uvicorn==0.29.0 +wxcadm==4.2.6 +aiohttp==3.9.3 +aiosignal==1.3.1 +annotated-types==0.6.0 +anyio==4.3.0 +asyncpg==0.29.0 +attrs==23.2.0 +certifi==2024.2.2 +charset-normalizer==3.3.2 +click==8.1.7 +dataclasses-json==0.6.4 +dnspython==2.6.1 +fastapi==0.110.0 +frozenlist==1.4.1 +h11==0.14.0 +idna==3.6 +itsdangerous==2.2.0 +Jinja2==3.1.3 +markdown-it-py==3.0.0 +MarkupSafe==2.1.5 +marshmallow==3.21.1 +mdurl==0.1.2 +meraki==1.27.0 +multidict==6.0.5 +mypy-extensions==1.0.0 +oauthlib==3.2.2 +packaging==24.0 +psycopg2==2.9.9 +pydantic_core==2.16.3 +Pygments==2.17.2 +pyhumps==3.8.0 +requests-toolbelt==1.0.0 +sniffio==1.3.1 +srvlookup==3.0.0 +starlette==0.36.3 +typing-inspect==0.9.0 +typing_extensions==4.10.0 +urllib3==2.2.1 +xmltodict==0.13.0 +yarl==1.9.4 +markdown-it-py==3.0.0 +mdurl==0.1.2 +Pygments==2.17.2 +python-dotenv==1.0.1 +rich==13.7.1 +shellingham==1.5.4 +typer==0.12.3 +typing_extensions==4.11.0