@charset "UTF-8";
/*
  The following was copy/pasted from: https://github.com/murtaugh/HTML5-Reset/blob/master/assets/css/reset.css
 */
/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  background: transparent;
  /* #000 */ }

main, article, aside, figure, footer, header, nav, section, details, summary {
  display: block; }

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
	In fact, it *will* cause problems with Google Maps' controls at small size.
	If this is the case for you, try uncommenting the following:
#map img {
		max-width: none;
}
*/
/* force a vertical scrollbar to prevent a jumpy page */
/* we use a lot of ULs that aren't bulleted.
	you'll have to restore the bullets within content,
	which is fine because they're probably customized anyway */
h2 {
  color: #c8c8c8; }

ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: var(--primary-button-text-color); }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

/* tables still need cellspacing="0" in the markup */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */ }

input[type="radio"] {
  vertical-align: text-bottom; }

input[type="checkbox"] {
  vertical-align: bottom; }

.ie7 input[type="checkbox"] {
  vertical-align: baseline; }

.ie6 input {
  vertical-align: text-bottom; }

select, input, textarea {
  font: 99% sans-serif; }

table {
  font-size: inherit;
  font: 100%; }

small {
  font-size: 85%; }

strong {
  font-weight: bold; }

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative; }

sup {
  top: -0.5em;
  font-size: 8px; }

sub {
  bottom: -0.25em; }

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif; }

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0; }

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible; }

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic; }

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:after {
  content: " ";
  display: block;
  clear: both; }

/**
 * selectize.css (v0.12.6)
 * Copyright (c) 2013–2015 Brian Reavis & contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to 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. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 * @author Brian Reavis <brian@thirdroute.com>
 */
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  -webkit-box-shadow: inset 0 0 12px 4px #fff;
  box-shadow: inset 0 0 12px 4px #fff; }

.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
  content: '!';
  visibility: hidden; }

.selectize-control.plugin-drag_drop .ui-sortable-helper {
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }

.selectize-dropdown-header {
  position: relative;
  padding: 5px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: #f8f8f8;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0; }

.selectize-dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important; }

.selectize-dropdown-header-close:hover {
  color: #000000; }

.selectize-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none; }

.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none; }

.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none; }

.selectize-control.plugin-remove_button [data-value] {
  position: relative;
  padding-right: 24px !important; }

.selectize-control.plugin-remove_button [data-value] .remove {
  z-index: 1;
  /* fixes ie bug (see #392) */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 17px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 2px 0 0 0;
  border-left: 1px solid #d0d0d0;
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.selectize-control.plugin-remove_button [data-value] .remove:hover {
  background: rgba(0, 0, 0, 0.05); }

.selectize-control.plugin-remove_button [data-value].active .remove {
  border-left-color: #cacaca; }

.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
  background: none; }

.selectize-control.plugin-remove_button .disabled [data-value] .remove {
  border-left-color: #ffffff; }

.selectize-control.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px; }

.selectize-control {
  position: relative; }

.selectize-dropdown,
.selectize-input,
.selectize-input input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  -webkit-font-smoothing: inherit; }

.selectize-input,
.selectize-control.single .selectize-input.input-active {
  background: #fff;
  cursor: text;
  display: inline-block; }

.selectize-input {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; }

.selectize-control.multi .selectize-input.has-items {
  padding: 6px 8px 3px; }

.selectize-input.full {
  background-color: #fff; }

.selectize-input.disabled,
.selectize-input.disabled * {
  cursor: default !important; }

.selectize-input.focus {
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }

.selectize-input.dropdown-active {
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0; }

.selectize-input > * {
  vertical-align: baseline;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline; }

.selectize-control.multi .selectize-input > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0 solid #d0d0d0; }

.selectize-control.multi .selectize-input > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0 solid #cacaca; }

.selectize-control.multi .selectize-input.disabled > div,
.selectize-control.multi .selectize-input.disabled > div.active {
  color: #7d7d7d;
  background: #ffffff;
  border: 0 solid #ffffff; }

.selectize-input > input {
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 2px 0 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important; }

.selectize-input > input::-ms-clear {
  display: none; }

.selectize-input > input:focus {
  outline: none !important; }

.selectize-input::after {
  content: ' ';
  display: block;
  clear: left; }

.selectize-input.dropdown-active::before {
  content: ' ';
  display: block;
  position: absolute;
  background: #f0f0f0;
  height: 1px;
  bottom: 0;
  left: 0;
  right: 0; }

.selectize-dropdown {
  position: absolute;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: -1px 0 0 0;
  border-top: 0 none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px; }

.selectize-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden; }

.selectize-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px; }

.selectize-dropdown .option,
.selectize-dropdown .optgroup-header {
  padding: 5px 8px; }

.selectize-dropdown .option,
.selectize-dropdown [data-disabled],
.selectize-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5; }

.selectize-dropdown [data-selectable].option {
  opacity: 1; }

.selectize-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none; }

.selectize-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default; }

.selectize-dropdown .active {
  background-color: #f5fafd;
  color: #495c68; }

.selectize-dropdown .active.create {
  color: #495c68; }

.selectize-dropdown .create {
  color: rgba(48, 48, 48, 0.5); }

.selectize-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  -webkit-overflow-scrolling: touch; }

.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
  cursor: pointer; }

.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
  cursor: text; }

.selectize-control.single .selectize-input:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #808080 transparent transparent transparent; }

.selectize-control.single .selectize-input.dropdown-active:after {
  margin-top: -4px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #808080 transparent; }

.selectize-control.rtl.single .selectize-input:after {
  left: 15px;
  right: auto; }

.selectize-control.rtl .selectize-input > input {
  margin: 0 4px 0 -2px !important; }

.selectize-control .selectize-input.disabled {
  opacity: 0.5;
  background-color: #fafafa; }

.selectize-control.multi .selectize-input.items .item {
  background-color: #393939;
  color: var(--primary-color);
  font-weight: bold;
  border-radius: 20px;
  font-size: 14px;
  padding: 3px 8px; }

@font-face {
  font-family: ClearSans;
  src: url("fonts/clear-sans/EOT/ClearSans-Regular.eot"), url("fonts/clear-sans/EOT/ClearSans-Regular.eot#iefix") format("embedded-opentype"), url("fonts/clear-sans/WOFF/ClearSans-Regular.woff") format("woff"), url("fonts/clear-sans/TTF/ClearSans-Regular.ttf") format("truetype"), url("fonts/clear-sans/SVG/ClearSans-Regular.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: ClearSans;
  src: url("fonts/clear-sans/EOT/ClearSans-Thin.eot"), url("fonts/clear-sans/EOT/ClearSans-Thin.eot#iefix") format("embedded-opentype"), url("fonts/clear-sans/WOFF/ClearSans-Thin.woff") format("woff"), url("fonts/clear-sans/TTF/ClearSans-Thin.ttf") format("truetype"), url("fonts/clear-sans/SVG/ClearSans-Thin.svg") format("svg");
  font-weight: 100;
  font-style: normal; }

@font-face {
  font-family: ClearSans;
  src: url("fonts/clear-sans/EOT/ClearSans-Medium.eot"), url("fonts/clear-sans/EOT/ClearSans-Medium.eot#iefix") format("embedded-opentype"), url("fonts/clear-sans/WOFF/ClearSans-Medium.woff") format("woff"), url("fonts/clear-sans/TTF/ClearSans-Medium.ttf") format("truetype"), url("fonts/clear-sans/SVG/ClearSans-Medium.svg") format("svg");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: ClearSans;
  src: url("fonts/clear-sans/EOT/ClearSans-MediumItalic.eot"), url("fonts/clear-sans/EOT/ClearSans-MediumItalic.eot#iefix") format("embedded-opentype"), url("fonts/clear-sans/WOFF/ClearSans-MediumItalic.woff") format("woff"), url("fonts/clear-sans/TTF/ClearSans-MediumItalic.ttf") format("truetype"), url("fonts/clear-sans/SVG/ClearSans-MediumItalic.svg") format("svg");
  font-weight: 500;
  font-style: italic; }

@font-face {
  font-family: ClearSans;
  src: url("fonts/clear-sans/EOT/ClearSans-Italic.eot"), url("fonts/clear-sans/EOT/ClearSans-Italic.eot#iefix") format("embedded-opentype"), url("fonts/clear-sans/WOFF/ClearSans-Italic.woff") format("woff"), url("fonts/clear-sans/TTF/ClearSans-Italic.ttf") format("truetype"), url("fonts/clear-sans/SVG/ClearSans-Italic.svg") format("svg");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: ClearSans;
  src: url("fonts/clear-sans/EOT/ClearSans-Light.eot"), url("fonts/clear-sans/EOT/ClearSans-Light.eot#iefix") format("embedded-opentype"), url("fonts/clear-sans/WOFF/ClearSans-Light.woff") format("woff"), url("fonts/clear-sans/TTF/ClearSans-Light.ttf") format("truetype"), url("fonts/clear-sans/SVG/ClearSans-Light.svg") format("svg");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: ClearSans;
  src: url("fonts/clear-sans/EOT/ClearSans-Bold.eot"), url("fonts/clear-sans/EOT/ClearSans-Bold.eot#iefix") format("embedded-opentype"), url("fonts/clear-sans/WOFF/ClearSans-Bold.woff") format("woff"), url("fonts/clear-sans/TTF/ClearSans-Bold.ttf") format("truetype"), url("fonts/clear-sans/SVG/ClearSans-Bold.svg") format("svg");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: ClearSans;
  src: url("fonts/clear-sans/EOT/ClearSans-BoldItalic.eot"), url("fonts/clear-sans/EOT/ClearSans-BoldItalic.eot#iefix") format("embedded-opentype"), url("fonts/clear-sans/WOFF/ClearSans-BoldItalic.woff") format("woff"), url("fonts/clear-sans/TTF/ClearSans-BoldItalic.ttf") format("truetype"), url("fonts/clear-sans/SVG/ClearSans-BoldItalic.svg") format("svg");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url(MaterialIcons-Regular.woff2) format("woff2"), url(MaterialIcons-Regular.woff) format("woff"), url(MaterialIcons-Regular.ttf) format("truetype"); }

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga'; }

:root {
  --primary-color: #1198d5;
  --primary-color-light: #1198d5;
  --primary-color-dark: #004884;
  --primary-button-background-color: var(--primary-color);
  --primary-button-shadow-color: #1198d533;
  --primary-button-text-color: #fff;
  --secondary-button-background-color: #232323;
  /* #FFFFFF */
  --secondary-button-border-color: #dce2e8;
  --secondary-button-text-color: #c8c8c8;
  --slider-selected-color: #1198d5;
  --media-package-task-text-color: #1198d5;
  --media-package-task-progress-color: #E9A4C64D;
  --media-package-task-border-color: #00488433;
  --tab-shadow-color: #1198d54f;
  --error-background-color: #F2DED8;
  --error-border-color: #1198d5;
  --error-text-color: #1198d5;
  --scheduled-event-done-text-color: #fff;
  --scheduled-event-future-background-color: #1198d5;
  --scheduled-event-future-border-color: #1198d5;
  --scheduled-event-done-text-color: #c8c8c8;
  --scheduled-event-done-background-color: #232323;
  --scheduled-event-done-border-color: #1198d5;
  --scheduled-event-current-text-color: #468847;
  --scheduled-event-current-background-color: #dff0d8;
  --scheduled-event-current-border-color: #d6e9c6;
  --scheduled-event-failed-text-color: var(--error-text-color);
  --scheduled-event-failed-background-color: var(--error-background-color);
  --scheduled-event-failed-border-color: var(--error-border-color); }

body::-webkit-scrollbar {
  width: 1em; }

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #191919; }

body::-webkit-scrollbar-thumb {
  background-color: #1e1e1e;
  outline: 1px solid slategrey; }

.wrapper::-webkit-scrollbar {
  width: 1em; }

.wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #191919; }

.wrapper::-webkit-scrollbar-thumb {
  background-color: #1e1e1e;
  outline: 1px solid slategrey; }

.icon-dialog-left-arrow, .icon-delete, .icon-settings, .icon-expand, .icon-collapse, .icon-edit, .icon-devices-20, .icon-info, .icon-close, .icon-close-white, .icon-close-popup, .icon-menu-help, .icon-user-avatar, .icon-cattura-logo, .icon-search, .icon-actions, .icon-actions-vertical, .icon-source, .icon-audio-record, .icon-action-edit, .icon-action-test, .icon-action-dup, .icon-action-delete, .icon-action-advanced, .icon-action-advanced-20, .icon-action-download, .icon-action-republish, .icon-action-analyze-media, .icon-action-download-logs, .icon-list, .icon-grid, .icon-filter, .icon-filter-sel, .icon-clear, .icon-info-blue, .icon-alert, .icon-no-videos, .icon-wand, .icon-clipboard, .icon-clipboard-grey, .icon-greater, .icon-warning, .icon-warning-inactive, .icon-error, .icon-error-inactive, .icon-camera, .icon-audio, .icon-hdd, .icon-network, .icon-devices, .icon-preview, .icon-ok, .icon-loopback, .icon-audio-preview {
  display: inline-block; }

.icon-dialog-left-arrow {
  background-image: url(img/dialog-left-arrow.png);
  width: 22px;
  height: 18px; }

.icon-delete {
  width: 14px;
  height: 18px;
  background-image: url(img/delete.png); }

.icon-settings {
  width: 20px;
  height: 20px;
  background-image: url(img/settings-gray.png); }

.icon-expand {
  width: 12px;
  height: 12px;
  background-image: url(img/expand.png); }

.icon-collapse {
  width: 12px;
  height: 2px;
  background-image: url(img/collapse.png); }

.icon-edit {
  width: 15px;
  height: 15px;
  background-image: url(img/edit.png); }

.icon-devices-20 {
  width: 20px;
  height: 20px;
  background-image: url(img/devices-20.png); }

.icon-info {
  width: 20px;
  height: 20px;
  background-image: url(img/info.png); }

.icon-close {
  width: 18px;
  height: 18px;
  background-image: url(img/close.png); }

.icon-close-white {
  width: 18px;
  height: 18px;
  background-image: url(img/close-white.png); }

.icon-close-popup {
  width: 10px;
  height: 10px;
  background-image: url(img/close-popup.png);
  filter: contrast(0); }

.icon-menu-help {
  width: 20px;
  height: 20px;
  background-image: url(img/menu-help.png); }

.icon-user-avatar {
  width: 31px;
  height: 44px;
  background-image: url(img/user-avatar.png); }

.icon-cattura-logo {
  width: 219px;
  height: 21px;
  background-image: url(img/cattura-logo.svg); }

.icon-search {
  width: 20px;
  height: 20px;
  background-image: url(img/search.png);
  filter: brightness(4); }

.icon-actions {
  width: 22px;
  height: 22px;
  background: url(img/actions.png) no-repeat center; }

.icon-actions-vertical {
  width: 22px;
  height: 22px;
  background: url(img/actions-vertical.png) no-repeat center; }

.icon-source {
  width: 16px;
  height: 16px;
  background-image: url(img/source.png); }

.icon-audio-record {
  width: 16px;
  height: 16px;
  background-image: url(img/audio-record.png); }

.icon-action-edit {
  width: 16px;
  height: 16px;
  background-image: url(img/action-edit.png); }

.icon-action-test {
  width: 16px;
  height: 16px;
  background-image: url(img/action-test.png); }

.icon-action-dup {
  width: 16px;
  height: 16px;
  background-image: url(img/action-dup.png); }

.icon-action-delete {
  width: 16px;
  height: 16px;
  background-image: url(img/action-delete.png); }

.icon-action-advanced {
  width: 16px;
  height: 16px;
  background-image: url(img/action-advanced.png); }

.icon-action-advanced-20 {
  width: 20px;
  height: 20px;
  background-image: url(img/action-advanced-20.png); }

.icon-action-download {
  width: 16px;
  height: 16px;
  background-image: url(img/action-download.png); }

.icon-action-republish {
  width: 16px;
  height: 16px;
  background-image: url(img/action-republish.png); }

.icon-action-analyze-media {
  width: 16px;
  height: 16px;
  background-image: url(img/action-analyze-media.png); }

.icon-action-download-logs {
  width: 16px;
  height: 16px;
  background-image: url(img/action-download-logs.png); }

.icon-list {
  width: 16px;
  height: 16px;
  background-image: url(img/list.png); }

.icon-grid {
  width: 16px;
  height: 16px;
  background-image: url(img/grid.png); }

.icon-filter {
  width: 24px;
  height: 17px;
  background-image: url(img/filter.png); }

.icon-filter-sel {
  width: 24px;
  height: 17px;
  background-image: url(img/filter-sel.png); }

.icon-clear {
  width: 17px;
  height: 17px;
  background-image: url(img/clear.png); }

.icon-info-blue {
  width: 20px;
  height: 20px;
  background-image: url(img/info-blue.png); }

.icon-alert {
  width: 20px;
  height: 20px;
  background-image: url(img/alert.png); }

.icon-no-videos {
  width: 198px;
  height: 138px;
  background-image: url(img/no-videos.png); }

.icon-wand {
  width: 23px;
  height: 23px;
  background-image: url(img/wand.png); }

.icon-clipboard {
  width: 16px;
  height: 16px;
  background-image: url(img/clipboard.png); }

.icon-clipboard-grey {
  width: 15px;
  height: 15px;
  background-image: url(img/clipboard-grey.png); }

.icon-greater {
  width: 7px;
  height: 12px;
  background-image: url(img/greater.png); }

.icon-warning {
  width: 18px;
  height: 17px;
  background-image: url(img/warning.png); }

.icon-warning-inactive {
  width: 18px;
  height: 17px;
  background-image: url(img/warning-inactive.png); }

.icon-error {
  width: 18px;
  height: 18px;
  background-image: url(img/error.png); }

.icon-error-inactive {
  width: 18px;
  height: 18px;
  background-image: url(img/error-inactive.png); }

.icon-camera {
  width: 41px;
  height: 41px;
  background-image: url(img/camera.png); }

.icon-audio {
  width: 45px;
  height: 45px;
  background-image: url(img/audio.png); }

.icon-hdd {
  width: 45px;
  height: 45px;
  background-image: url(img/hdd.png); }

.icon-network {
  width: 45px;
  height: 45px;
  background-image: url(img/network.png); }

.icon-devices {
  width: 45px;
  height: 45px;
  background-image: url(img/devices.png); }

.icon-preview {
  width: 12px;
  height: 16px;
  background-image: url(img/preview.png); }

.icon-ok {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-image: url(img/ok.png); }

.icon-loopback {
  width: 18px;
  height: 18px;
  background-image: url(img/loopback.png); }

.icon-audio-preview {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: var(--primary-color);
  background-image: url(img/audio-preview.png); }

.primary-button, .filter-bar .principal-button, .dialog-wrapper .dialog-buttons .forward-button, .side-panel .buttons .save-button, .settings-add-edit-notifier .test-notifier button, #settings-dialog .save-button, .modal-dialog.confirm .buttons .confirm, body header button.logout-button, .login-screen .login-form .controls button, .secondary-button, .dialog-wrapper .dialog-buttons .backward-button, .side-panel .left-arrow > button, .side-panel .buttons .cancel-button, .modal-dialog.confirm .buttons .cancel {
  font-family: inherit;
  position: relative;
  top: 0;
  padding: 0;
  border: none; }
  .primary-button:hover, .filter-bar .principal-button:hover, .dialog-wrapper .dialog-buttons .forward-button:hover, .side-panel .buttons .save-button:hover, .settings-add-edit-notifier .test-notifier button:hover, #settings-dialog .save-button:hover, .modal-dialog.confirm .buttons .confirm:hover, body header button.logout-button:hover, .login-screen .login-form .controls button:hover, .secondary-button:hover, .dialog-wrapper .dialog-buttons .backward-button:hover, .side-panel .left-arrow > button:hover, .side-panel .buttons .cancel-button:hover, .modal-dialog.confirm .buttons .cancel:hover {
    cursor: pointer; }
  .primary-button:focus, .filter-bar .principal-button:focus, .dialog-wrapper .dialog-buttons .forward-button:focus, .side-panel .buttons .save-button:focus, .settings-add-edit-notifier .test-notifier button:focus, #settings-dialog .save-button:focus, .modal-dialog.confirm .buttons .confirm:focus, body header button.logout-button:focus, .login-screen .login-form .controls button:focus, .secondary-button:focus, .dialog-wrapper .dialog-buttons .backward-button:focus, .side-panel .left-arrow > button:focus, .side-panel .buttons .cancel-button:focus, .modal-dialog.confirm .buttons .cancel:focus {
    outline: none; }
  .primary-button:active, .filter-bar .principal-button:active, .dialog-wrapper .dialog-buttons .forward-button:active, .side-panel .buttons .save-button:active, .settings-add-edit-notifier .test-notifier button:active, #settings-dialog .save-button:active, .modal-dialog.confirm .buttons .confirm:active, body header button.logout-button:active, .login-screen .login-form .controls button:active, .secondary-button:active, .dialog-wrapper .dialog-buttons .backward-button:active, .side-panel .left-arrow > button:active, .side-panel .buttons .cancel-button:active, .modal-dialog.confirm .buttons .cancel:active {
    top: 4px; }
  .primary-button:disabled, .filter-bar .principal-button:disabled, .dialog-wrapper .dialog-buttons .forward-button:disabled, .side-panel .buttons .save-button:disabled, .settings-add-edit-notifier .test-notifier button:disabled, #settings-dialog .save-button:disabled, .modal-dialog.confirm .buttons .confirm:disabled, body header button.logout-button:disabled, .login-screen .login-form .controls button:disabled, .secondary-button:disabled, .dialog-wrapper .dialog-buttons .backward-button:disabled, .side-panel .left-arrow > button:disabled, .side-panel .buttons .cancel-button:disabled, .modal-dialog.confirm .buttons .cancel:disabled {
    opacity: 0.6;
    cursor: default; }

.primary-button, .filter-bar .principal-button, .dialog-wrapper .dialog-buttons .forward-button, .side-panel .buttons .save-button, .settings-add-edit-notifier .test-notifier button, #settings-dialog .save-button, .modal-dialog.confirm .buttons .confirm, body header button.logout-button, .login-screen .login-form .controls button {
  box-shadow: 0 7px 10px 0 var(--primary-button-shadow-color);
  background-color: var(--primary-button-background-color);
  color: var(--primary-button-text-color);
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold; }
  .primary-button:active, .filter-bar .principal-button:active, .dialog-wrapper .dialog-buttons .forward-button:active, .side-panel .buttons .save-button:active, .settings-add-edit-notifier .test-notifier button:active, #settings-dialog .save-button:active, .modal-dialog.confirm .buttons .confirm:active, body header button.logout-button:active, .login-screen .login-form .controls button:active {
    box-shadow: none; }

.secondary-button, .dialog-wrapper .dialog-buttons .backward-button, .side-panel .left-arrow > button, .side-panel .buttons .cancel-button, .modal-dialog.confirm .buttons .cancel {
  background-color: transparent; }

.btn-right-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  right: 22px;
  width: 21px;
  height: 10px;
  background-image: url(/img/right-arrow.png); }

.btn-left-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  left: 10px;
  width: 21px;
  height: 10px;
  background-image: url(/img/left-arrow.png); }

.is-hidden {
  display: none !important; }

.flex-stretcher {
  flex-grow: 1; }

table.table .check {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  left: -44px; }

.loading-spinner {
  background-image: url("img/ajax-loader.gif");
  width: 48px;
  height: 48px; }

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg); }
  to {
    -ms-transform: rotate(360deg); } }

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg); }
  to {
    -moz-transform: rotate(360deg); } }

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg); } }

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

.context-menu {
  position: absolute;
  padding: 10px 23px;
  background-color: #232323;
  border-radius: 4px;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
  font-size: 15px;
  color: #c8c8c8;
  display: none; }
  .context-menu.active {
    display: inherit; }
  .context-menu .item {
    line-height: 40px;
    cursor: pointer; }
    .context-menu .item .icon {
      vertical-align: middle;
      margin-right: 15px; }
    .context-menu .item a {
      display: block;
      text-decoration: inherit;
      color: inherit; }
  .context-menu .separator {
    height: 2px;
    background-color: #dee1e2;
    margin-top: 8px;
    margin-bottom: 5px; }

.filter-bar {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin-top: 24px; }
  .filter-bar .label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: #a1a8ad; }
  .filter-bar .principal-button {
    height: 44px;
    width: 197px;
    line-height: 44px;
    border-radius: 4px;
    text-transform: capitalize; }

.search-bar {
  overflow: hidden;
  width: 20px;
  white-space: nowrap;
  transition: width 0.5s ease-in;
  display: inline-block;
  border-bottom: none;
  padding-bottom: 10px;
  padding-top: 10px; }
  .search-bar > input {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: none;
    color: #c8c8c8;
    font-size: 15px;
    font-weight: 500;
    padding-left: 13px;
    padding-right: 13px;
    width: calc(100% - 20px - 17px); }
    .search-bar > input:focus {
      outline: none; }
  .search-bar .icon-search, .search-bar .icon-clear {
    vertical-align: middle;
    cursor: pointer; }
  .is-shown.search-bar {
    border-bottom: solid 2px var(--primary-color);
    padding-bottom: 8px; }

.search-bar.is-shown {
  width: 208px; }

.ctrl {
  margin-top: 19px; }

.ctrl-lbl {
  font-size: 13px;
  color: #a1a8ad;
  margin-bottom: 6px; }

.ctrl-input, .ctrl-textarea, .control textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 4px;
  border: solid 1px #e9edf1;
  font-size: 16px;
  color: #555758;
  line-height: 1.5; }
  .ctrl-input::placeholder, .ctrl-textarea::placeholder, .control textarea::placeholder {
    color: #a1a8ad; }

.ctrl-textarea {
  resize: none; }

.ctrl-dropdown {
  position: relative; }
  .ctrl-dropdown > select {
    width: 100%;
    border-radius: 4px;
    background-color: #191919;
    border: 0;
    font-size: 16px;
    color: #c8c8c8;
    line-height: 1.5;
    padding: 13px 30px 11px 16px;
    -webkit-appearance: none;
    -moz-appearance: none; }
    .ctrl-dropdown > select:invalid {
      color: #a1a8ad; }
    .ctrl-dropdown > select > option {
      color: #c8c8c8; }
  .ctrl-dropdown::after {
    content: "";
    position: absolute;
    right: 20px;
    border: solid transparent;
    border-width: 7px 5px 0 5px;
    border-top-color: #a1a8ad;
    top: 50%;
    transform: translateY(-50%); }

.ctrl-textarea-charcounter {
  color: #a1a8ad;
  font-size: 12px;
  text-align: right; }

.control {
  margin-top: 19px; }
  .control > label:first-child {
    font-size: 13px;
    color: #c8c8c8;
    margin-bottom: 6px;
    display: block; }
  .control input:not([type="checkbox"]):not([type="radio"]), .control select, .control .selectize-control .selectize-input, .control .selectize-control.multi .selectize-input {
    width: 100%;
    padding: 13px 16px;
    margin-left: 1px;
    border-radius: 4px;
    background-color: #191919;
    border: solid 1px #c8c8c83b;
    font-size: 16px;
    color: #c8c8c8;
    line-height: 1.5;
    color-scheme: dark; }
    .control input:not([type="checkbox"]):not([type="radio"])::placeholder, .control select::placeholder, .control .selectize-control .selectize-input::placeholder, .control .selectize-control.multi .selectize-input::placeholder {
      color: #a1a8ad; }
    .control input:not([type="checkbox"]):not([type="radio"]).validationElement, .control select.validationElement, .control .selectize-control .selectize-input.validationElement, .control .selectize-control.multi .selectize-input.validationElement {
      background-color: #191919; }
  .control input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.8; }
  .control textarea {
    resize: none;
    background-color: #191919;
    color: #c8c8c8;
    border: 0; }
  .control .dropdown {
    position: relative; }
    .control .dropdown > select {
      width: 100%;
      border-radius: 4px;
      background-color: #191919;
      border: solid 1px #c8c8c83b;
      font-size: 16px;
      color: #c8c8c8;
      line-height: 1.5;
      padding: 13px 30px 11px 16px;
      -webkit-appearance: none;
      -moz-appearance: none; }
      .control .dropdown > select:invalid {
        color: #a1a8ad; }
      .control .dropdown > select > option {
        color: #c8c8c8; }
    .control .dropdown::after {
      content: "";
      position: absolute;
      right: 20px;
      border: solid transparent;
      border-width: 7px 5px 0 5px;
      border-top-color: #a1a8ad;
      top: 50%;
      transform: translateY(-50%); }
  .control .character-counter {
    color: #a1a8ad;
    font-size: 12px;
    text-align: right; }
  .control .validationMessage {
    display: none; }

.checkbox-wrapper input[type="checkbox"] {
  display: none; }
  .checkbox-wrapper input[type="checkbox"] ~ .check {
    display: inline-block;
    vertical-align: middle;
    background-color: rgba(234, 239, 242, 0.34);
    border: solid 1px #dce2e8;
    border-radius: 30px;
    width: 30px;
    height: 30px; }
  .checkbox-wrapper input[type="checkbox"]:checked ~ .check {
    background-image: url(img/check.png);
    background-color: var(--primary-color);
    background-size: 100% 100%;
    border-radius: 30px;
    width: 30px;
    height: 30px; }

.checkbox-wrapper span, .checkbox-wrapper .description {
  vertical-align: middle;
  margin-left: 15px; }

/*
   Checkable list item is a typical element of our UI that has check/uncheck mark on the left, some text in the middle,
   and some icons on the right.

   The structure is assumed to be like this:

   li.chk-li[.is-checked]
     .chk-li-check
     .chk-li-body
       .chk-li-name-line
         .chk-li-name
         .chk-li-lbl
         ...
       .chk-li-desc-line
     .chk-li-icons[-invisible]

 */
.checkable-item {
  min-height: 72px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center; }
  .checkable-item .check {
    flex: 0 0 auto; }
  .checkable-item .body {
    flex: 1 1 auto; }
  .checkable-item .name {
    color: #c8c8c8;
    font-size: 19px;
    font-weight: bold;
    display: inline-block; }
  .checkable-item .label {
    display: inline-block;
    color: #d55494;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    border: solid 1px rgba(213, 84, 148, 0.53);
    padding: 0 8px 0 7px;
    margin-left: 9px;
    vertical-align: text-top; }
  .checkable-item .description {
    margin-top: 3px;
    margin-right: 5px;
    font-size: 14px;
    color: #8d8d8d; }
  .checkable-item .icons, .checkable-item .icons-invisible {
    flex: 0 0 auto;
    padding-left: 20px;
    padding-right: 24px;
    display: flex;
    flex-flow: row nowrap; }
    .checkable-item .icons > *, .checkable-item .icons-invisible > * {
      flex: 1 0 auto; }
  .checkable-item .icons-invisible {
    visibility: hidden; }
  .checkable-item:hover {
    cursor: pointer;
    background-color: #191919; }
    .checkable-item:hover .invisible {
      visibility: visible; }
  .checkable-item:not(.is-checked) .check {
    background-color: rgba(234, 239, 242, 0.34);
    border: solid 1px #dce2e8;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    margin-right: 15px; }
  .checkable-item.is-checked .check {
    background-image: url(img/check.png);
    background-color: var(--primary-color);
    background-size: 100% 100%;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    margin-right: 15px; }

.selection {
  position: fixed;
  bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  height: 51px;
  width: 486px;
  padding-left: 32px;
  padding-right: 32px;
  border-radius: 100px;
  background-color: var(--primary-color);
  color: #fff;
  display: none; }
  .selection.active {
    display: block; }
  .selection .flex {
    display: flex;
    align-items: center;
    height: 100%; }
  .selection .number-of-items {
    font-size: 15px;
    font-weight: 500;
    margin-right: 20px; }
  .selection .select-all, .selection .deselect-all {
    cursor: pointer; }
  .selection .action {
    cursor: pointer;
    font-size: 15px; }
    .selection .action:not(:last-child) {
      margin-right: 32px; }
    .selection .action > * {
      vertical-align: middle; }
  .selection .icon {
    margin-right: 12px;
    vertical-align: middle;
    opacity: 0.57; }

.progress-bar {
  height: 4px;
  border-radius: 6px;
  background-color: #dfe4e8; }
  .progress-bar .value {
    height: 100%;
    background-color: var(--primary-color); }

.infobox-info, .infobox-error {
  margin-top: 26px;
  border-radius: 3px;
  line-height: 1.5;
  font-size: 16px;
  padding: 17px 17px;
  position: relative; }
  .infobox-info > span, .infobox-error > span {
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle; }

.infobox-info {
  border: solid 1px #666;
  color: #c8c8c8; }

.infobox-error {
  background-color: var(--error-background-color);
  border: solid 1px var(--error-border-color);
  color: var(--error-text-color); }

.tabs > nav ul li {
  display: inline-block;
  font-size: 16px;
  cursor: pointer; }
  .tabs > nav ul li:not(:last-child) {
    margin-right: 40px; }
  .tabs > nav ul li.is-current {
    color: #c8c8c8;
    font-weight: bold; }
    .tabs > nav ul li.is-current .tabheader-underline {
      visibility: visible; }
  .tabs > nav ul li:not(.is-current) {
    color: #555758;
    font-weight: 500; }
    .tabs > nav ul li:not(.is-current) .tabheader-underline {
      visibility: hidden; }
  .tabs > nav ul li .tabheader-underline {
    height: 3px;
    background-color: var(--primary-color);
    box-shadow: 0 2px 4px 0 var(--tab-shadow-color);
    margin-top: 10px; }
  .tabs > nav ul li:hover .tabheader-underline {
    visibility: visible; }

.tabs > section {
  display: none; }
  .tabs > section.is-current {
    display: block; }

.dialog-nav {
  width: 353px;
  background-color: #191919;
  background-origin: padding-box;
  background-size: cover;
  padding-top: 46px;
  flex-shrink: 0; }
  .dialog-nav-header {
    font-size: 28px;
    font-weight: bold;
    color: #c8c8c8;
    /* #fff; */
    margin-bottom: 7px;
    margin-left: 48px; }
  .dialog-nav-curstep {
    font-size: 16px;
    color: #fff;
    margin-bottom: 45px;
    margin-left: 48px; }
  .dialog-nav-step {
    color: #fff;
    opacity: 0.6;
    padding: 8px 20px 8px 48px; }
    .dialog-nav-step-number-circle {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      border: solid 1px #fff;
      width: 28px;
      height: 28px;
      border-radius: 14px; }
    .dialog-nav-step-name {
      display: inline-block;
      font-size: 17px;
      margin-left: 16px; }
    .dialog-nav-step.is-step-reached:not(.is-step-current):hover {
      cursor: pointer;
      opacity: 1;
      background-color: #fafbfd26;
      position: relative; }
      .dialog-nav-step.is-step-reached:not(.is-step-current):hover::after {
        content: "Edit";
        font-size: 13px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px; }
    .dialog-nav-step.is-step-reached, .dialog-nav-step.is-step-current {
      opacity: 1; }
      .dialog-nav-step.is-step-reached .dialog-nav-step-number-circle, .dialog-nav-step.is-step-current .dialog-nav-step-number-circle {
        font-weight: 500; }
  .dialog-nav-vertical-bar {
    width: 1px;
    height: 37px;
    margin-left: 61px;
    background-color: #fff;
    opacity: 0.3; }
    .dialog-nav-vertical-bar.is-step-reached {
      opacity: 1; }

.dialog-nav-step.is-step-reached {
  opacity: 1; }
  .dialog-nav-step.is-step-reached .dialog-nav-step-number-circle {
    font-weight: 500; }

.dialog-wrapper .dialog-buttons .forward-button {
  width: 156px; }

.dialog-wrapper .dialog-buttons .backward-button {
  width: 85px;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  color: #c8c8c8; }

.modal-dialog {
  top: 64px;
  position: fixed;
  border-radius: 2px;
  background-color: #232323;
  /* #FFFFFF */
  box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.15);
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  display: none;
  color: #c8c8c8; }
  .dlg--shown.modal-dialog {
    display: block; }
  .modal-dialog .close {
    right: 24px;
    top: 24px;
    position: absolute;
    cursor: pointer; }
  .modal-dialog .subheader {
    margin-top: 8px; }

.dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 1266px;
  padding-right: 96px;
  text-align: center;
  display: none; }
  .dialog-wrapper.dlg--shown {
    display: block; }
  .dialog-wrapper .dialog-with-x {
    display: inline-block;
    position: relative;
    left: 24px;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: initial; }
  .dialog-wrapper .dialog {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.07);
    min-height: 770px;
    max-width: 1170px;
    display: flex;
    flex-flow: row nowrap; }
  .dialog-wrapper .dialog-close-x {
    position: absolute;
    right: 24px;
    top: 19px;
    background-size: cover;
    cursor: pointer; }
  .dialog-wrapper .dialog-contents {
    color: #c8c8c8;
    background-color: #232323;
    /* #FFFFFF */
    flex-grow: 1;
    padding: 45px 75px 100px 106px;
    position: relative; }
  .dialog-wrapper .dialog-buttons {
    position: absolute;
    right: 32px;
    bottom: 32px;
    height: 44px;
    display: flex;
    flex-flow: row-reverse nowrap;
    align-items: stretch; }
    .dialog-wrapper .dialog-buttons > * {
      margin-left: 64px; }

.dim-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  opacity: 0.7; }

.modal-dialog .header, .modal-dialog h1, .side-panel h1 {
  font-size: 28px;
  font-weight: bold;
  font-color: #c8c8c8; }

.modal-dialog .subheader {
  color: #a1a8ad;
  font-size: 15px; }

.side-panel {
  position: fixed;
  width: 640px;
  max-width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  color: #c8c8c8;
  background-color: #232323;
  /* #FFFFFF */
  padding: 46px 71px 0 71px;
  transform: translateX(100%);
  transition: transform .4s ease-in-out;
  overflow-y: auto; }
  .side-panel h1 {
    color: #c8c8c8; }
  .side-panel.dlg--shown {
    transform: none; }
  .side-panel > .body {
    min-height: calc(100% - 108px); }
  .side-panel .left-arrow {
    position: absolute;
    left: 34px;
    top: 58px;
    cursor: pointer; }
  .side-panel .buttons {
    margin: 34px -71px;
    padding-left: 34px;
    padding-right: 31px;
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    justify-content: space-between;
    white-space: nowrap; }
    .side-panel .buttons .save-button {
      width: 106px;
      height: 40px;
      font-size: 15px;
      font-weight: 500; }
    .side-panel .buttons .cancel-button {
      margin-right: 48px;
      color: #555758;
      font-size: 15px;
      font-weight: 500; }

table.table {
  margin-top: 20px;
  border-top: 2px solid #c8c8c8;
  position: relative; }
  table.table > .cxt-menu {
    width: 182px; }
  table.table thead tr {
    display: flex;
    flex-flow: row nowrap;
    position: relative;
    min-height: 64px;
    padding-left: 28px;
    align-items: center;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.6px;
    color: #c8c8c8;
    text-align: left; }
    table.table thead tr > * {
      flex: 1 1 0; }
  table.table tbody tr {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: relative;
    padding: 20px 28px;
    background-color: #232323;
    border-radius: 4px;
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.52);
    font-size: 15px;
    color: #c8c8c8; }
    table.table tbody tr:not(:last-child) {
      margin-bottom: 12px; }
    table.table tbody tr > * {
      flex: 1 1 0; }
  table.table .checkable-row:not(.is-checked) > .check {
    background-color: rgba(234, 239, 242, 0.34);
    border: solid 1px #dce2e8;
    border-radius: 24px;
    width: 24px;
    height: 24px; }
  table.table .checkable-row.is-checked > .check {
    background-image: url(img/check.png);
    background-color: var(--primary-color);
    background-size: 100% 100%;
    border-radius: 24px;
    width: 24px;
    height: 24px; }
  table.table .checkable-row > .check {
    cursor: pointer; }
  table.table .actions {
    cursor: pointer; }

.category-tree {
  height: 200px;
  overflow-y: scroll;
  margin-left: 0px;
  background-color: #191919;
  color: #c8c8c8; }
  .category-tree ul {
    margin-left: 15px; }
  .category-tree label {
    display: inline; }
    .category-tree label span {
      margin-left: 5px; }
  .category-tree .no-children {
    margin-left: 12px; }
  .category-tree li {
    list-style-type: none; }
  .category-tree .closed {
    display: none; }
  .category-tree input[type="checkbox"],
  .category-tree input[type="radio"] {
    margin: 2px !important;
    padding: 0  !important; }
  .category-tree .icon-folder-close, .category-tree .icon-folder-open {
    top: 5px; }

.audio-level-meter {
  margin-top: 15px;
  overflow: hidden;
  display: block; }
  .audio-level-meter .left {
    float: left; }
  .audio-level-meter .right {
    float: right; }
  .audio-level-meter .left, .audio-level-meter .right {
    font-size: 13px;
    color: #a1a8ad; }
  .audio-level-meter .bars {
    clear: both;
    white-space: nowrap;
    width: auto; }
    .audio-level-meter .bars .bar {
      display: inline-block;
      width: 5.9%;
      height: 8px;
      border-radius: 4px;
      border: solid 1px #dce2e8;
      margin-right: 5px; }
    .audio-level-meter .bars .bar-03 {
      background: linear-gradient(to right, rgba(234, 239, 242, 0.34) 0%, rgba(234, 239, 242, 0.34) 100%); }
    .audio-level-meter .bars .bar-13 {
      background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 33%, rgba(234, 239, 242, 0.34) 33%, rgba(234, 239, 242, 0.34) 100%); }
    .audio-level-meter .bars .bar-23 {
      background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 66%, rgba(234, 239, 242, 0.34) 66%, rgba(234, 239, 242, 0.34) 100%); }
    .audio-level-meter .bars .bar-33 {
      background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 100%); }

.slider {
  width: 100%;
  height: 24px;
  position: relative;
  cursor: pointer; }
  .slider > .bars {
    position: relative;
    width: 100%;
    top: 8px;
    height: 8px;
    cursor: pointer; }
    .slider > .bars > .bar {
      position: absolute;
      height: 100%; }
    .slider > .bars > .bg-bar {
      width: 100%;
      background-color: gray; }
    .slider > .bars > .fg-bar {
      background-color: var(--slider-selected-color);
      width: 0%; }
  .slider > .ctrl {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 64px;
    height: 24px;
    background-color: #A9A9A9;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    text-align: center; }
    .slider > .ctrl > .txt {
      display: inline-block;
      width: 80%;
      height: 24px;
      color: #FFF;
      padding: 0 4px; }
    .slider > .ctrl > .slider-arrow {
      position: absolute;
      display: inline-block;
      top: 0;
      bottom: 0;
      color: gray;
      font-size: 12px;
      font-weight: 200;
      vertical-align: middle;
      line-height: 20px;
      transform: scale(1, 1.5); }
    .slider > .ctrl > .l-arrow {
      padding-left: 4px;
      left: 0; }
    .slider > .ctrl > .r-arrow {
      padding-right: 4px;
      right: 0; }

.time-input-picker {
  width: 100%;
  padding: 13px 16px;
  border-radius: 4px;
  background-color: #191919;
  font-size: 16px;
  color: #c8c8c8;
  line-height: 1.5;
  cursor: pointer;
  background-color: #191919;
  position: relative; }
  .time-input-picker > .text {
    display: inline-block; }
  .time-input-picker > .clear-icon, .time-input-picker .time-icon {
    float: right;
    margin: 0;
    padding: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }
  .time-input-picker > .time-input-picker-popup {
    z-index: 99999;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    border-radius: 4px;
    background-color: #191919;
    padding: 8px 16px;
    cursor: default; }
    .time-input-picker > .time-input-picker-popup > .caret {
      position: absolute;
      top: -8px;
      left: 4px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid #E9EDF1; }
      .time-input-picker > .time-input-picker-popup > .caret.caret-body {
        top: -7px;
        border-bottom-color: #191919; }
    .time-input-picker > .time-input-picker-popup > .time-input-picker-popup-body {
      position: relative;
      width: 100%;
      display: table; }
      .time-input-picker > .time-input-picker-popup > .time-input-picker-popup-body .col {
        position: relative;
        min-width: 18px;
        max-width: 60px;
        vertical-align: middle;
        text-align: center !important;
        display: table-cell !important; }
        .time-input-picker > .time-input-picker-popup > .time-input-picker-popup-body .col input, .time-input-picker > .time-input-picker-popup > .time-input-picker-popup-body .col p {
          width: 90% !important;
          height: 26px !important;
          text-align: center !important; }
        .time-input-picker > .time-input-picker-popup > .time-input-picker-popup-body .col * {
          position: relative;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          padding: 0;
          margin: 0; }
      .time-input-picker > .time-input-picker-popup > .time-input-picker-popup-body .arrow-ctrl, .time-input-picker > .time-input-picker-popup > .time-input-picker-popup-body .toggle {
        cursor: pointer; }
        .time-input-picker > .time-input-picker-popup > .time-input-picker-popup-body .arrow-ctrl:hover, .time-input-picker > .time-input-picker-popup > .time-input-picker-popup-body .toggle:hover {
          color: var(--primary-color); }
      .time-input-picker > .time-input-picker-popup > .time-input-picker-popup-body .arrow-ctrl i {
        margin: 0 auto; }
  .time-input-picker > .picker:hover .text.time-input-picker-preview {
    color: #c8c8c8; }
  .time-input-picker > .duration-picker .min-col {
    padding-left: 8px; }

.ppm > .bars {
  width: 100%;
  height: 8px;
  position: relative; }
  .ppm > .bars > .bar {
    position: absolute;
    width: 100%;
    height: 100%; }
  .ppm > .bars > .bg-bar {
    background: #191919; }

.ppm > .scale {
  background: repeating-linear-gradient(90deg, gray, gray 1px, #0000 1px, #0000 25%);
  border-right: 1px solid gray;
  height: 6px; }

html {
  font-family: ClearSans, serif;
  height: 100%; }

body {
  background-color: #191919;
  height: 100%;
  position: relative; }
  body > header {
    height: 72px;
    background-color: #191919;
    background-origin: padding-box;
    min-width: 1280px; }
    body > header > .container {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between; }
    body > header .menu {
      font-size: 14px;
      font-weight: 500;
      color: #c8c8c8;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      line-height: 69px; }
      body > header .menu > li {
        display: inline-block;
        cursor: pointer; }
        body > header .menu > li a {
          display: inline-block;
          color: var(--primary-button-text-color);
          text-decoration: none; }
        body > header .menu > li:not(:last-child) {
          margin-right: 48px; }
        body > header .menu > li .underline {
          height: 3px;
          background-color: var(--primary-color);
          visibility: hidden; }
        body > header .menu > li:hover .underline {
          visibility: visible; }
        body > header .menu > li.is-current {
          color: #c8c8c8;
          font-weight: bold; }
          body > header .menu > li.is-current .underline {
            visibility: visible; }
    body > header .icons, body > header .checkable-item .icons-invisible, .checkable-item body > header .icons-invisible {
      display: flex;
      flex-flow: row nowrap;
      align-items: center; }
      body > header .icons > *:not(:last-child), body > header .checkable-item .icons-invisible > *:not(:last-child), .checkable-item body > header .icons-invisible > *:not(:last-child) {
        margin-right: 32px; }
  body > .body {
    min-height: calc(100% - 72px - 98px);
    padding-bottom: 48px;
    padding-top: 36px; }
  body > footer {
    height: 98px;
    min-width: 1280px;
    background-origin: padding-box;
    color: #c8c8c8; }
    body > footer > .container {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
      height: 100%; }
    body > footer .prop:not(:last-child) {
      margin-right: 20px; }
    body > footer .prop .name {
      font-size: 12px;
      letter-spacing: 0.2px;
      color: rgba(255, 255, 255, 0.7);
      margin-right: 10px; }
    body > footer .prop .value {
      font-size: 15px;
      color: var(--primary-color); }
    body > footer .prop a.value {
      text-decoration: none; }
    body > footer .right .prop .value {
      color: #c8c8c8; }

.container {
  width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 55px;
  padding-right: 55px; }

h1 {
  font-size: 35px;
  font-weight: bold;
  color: #c8c8c8; }

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */ }

.snapshot {
  flex: 0 0 auto;
  position: relative;
  cursor: pointer;
  overflow: hidden; }
  .snapshot > img {
    width: 100%;
    height: auto;
    max-height: 100%; }
  .snapshot:hover img.hover {
    display: block; }
  .snapshot.disabled, .snapshot .disabled, .snapshot:disabled, .snapshot :disabled {
    cursor: not-allowed; }
  .snapshot > .meta {
    position: absolute;
    bottom: 0px;
    right: 0;
    max-width: 100%;
    background-color: #000;
    color: #FFF;
    font-size: 14px;
    text-align: right; }
    .snapshot > .meta > * {
      margin: 3px 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }

.toast-title {
  font-weight: 700; }

.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word; }

.toast-message a, .toast-message label {
  color: #FFF; }

.toast-message a:hover {
  color: #CCC;
  text-decoration: none; }

.toast-close-button {
  position: relative;
  right: -.3em;
  top: -.3em;
  float: right;
  font-size: 20px;
  font-weight: 700;
  color: #FFF;
  -webkit-text-shadow: 0 1px 0 #fff;
  text-shadow: 0 1px 0 #fff;
  opacity: .8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
  line-height: 1; }

.toast-close-button:focus, .toast-close-button:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: .4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40); }

.rtl .toast-close-button {
  left: -.3em;
  float: left;
  right: .3em; }

button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
  -webkit-appearance: none; }

.toast-top-center {
  top: 0;
  right: 0;
  width: 100%; }

.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%; }

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%; }

.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%; }

.toast-top-left {
  top: 12px;
  left: 12px; }

.toast-top-right {
  top: 12px;
  right: 12px; }

.toast-bottom-right {
  right: 12px;
  bottom: 12px; }

.toast-bottom-left {
  bottom: 12px;
  left: 12px; }

#toast-container {
  position: fixed;
  z-index: 999999;
  pointer-events: none; }

#toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

#toast-container > div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  -moz-box-shadow: 0 0 12px #999;
  -webkit-box-shadow: 0 0 12px #999;
  box-shadow: 0 0 12px #999;
  color: #FFF;
  opacity: .8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80); }

#toast-container > div.rtl {
  direction: rtl;
  padding: 15px 50px 15px 15px;
  background-position: right 15px center; }

#toast-container > div:hover {
  -moz-box-shadow: 0 0 12px #000;
  -webkit-box-shadow: 0 0 12px #000;
  box-shadow: 0 0 12px #000;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
  cursor: pointer; }

#toast-container > .toast-info {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=) !important; }

#toast-container > .toast-error {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=) !important; }

#toast-container > .toast-success {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==) !important; }

#toast-container > .toast-warning {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=) !important; }

#toast-container.toast-bottom-center > div, #toast-container.toast-top-center > div {
  width: 300px;
  margin-left: auto;
  margin-right: auto; }

#toast-container.toast-bottom-full-width > div, #toast-container.toast-top-full-width > div {
  width: 96%;
  margin-left: auto;
  margin-right: auto; }

.toast {
  background-color: #030303; }

.toast-success {
  background-color: #51A351; }

.toast-error {
  background-color: #BD362F; }

.toast-info {
  background-color: #2F96B4; }

.toast-warning {
  background-color: #F89406; }

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000;
  opacity: .4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40); }

@media all and (max-width: 240px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 11em; }
  #toast-container > div.rtl {
    padding: 8px 50px 8px 8px; }
  #toast-container .toast-close-button {
    right: -.2em;
    top: -.2em; }
  #toast-container .rtl .toast-close-button {
    left: -.2em;
    right: .2em; } }

@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 18em; }
  #toast-container > div.rtl {
    padding: 8px 50px 8px 8px; }
  #toast-container .toast-close-button {
    right: -.2em;
    top: -.2em; }
  #toast-container .rtl .toast-close-button {
    left: -.2em;
    right: .2em; } }

@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container > div {
    padding: 15px 15px 15px 50px;
    width: 25em; }
  #toast-container > div.rtl {
    padding: 15px 50px 15px 15px; } }

.settings-add-edit-user .roles {
  position: relative; }
  .settings-add-edit-user .roles .check {
    margin-right: 24px; }

.settings-add-edit-notifier h2 {
  margin-top: 15px;
  margin-bottom: 15px; }

.settings-add-edit-notifier .event-types-category {
  width: 33%;
  display: inline-block;
  vertical-align: top; }
  .settings-add-edit-notifier .event-types-category li {
    margin-bottom: 4px;
    margin-top: 15px; }
    .settings-add-edit-notifier .event-types-category li .checkbox-wrapper {
      display: inline-block;
      margin-right: 10px; }
      .settings-add-edit-notifier .event-types-category li .checkbox-wrapper > span {
        padding-left: 4px; }

.settings-add-edit-notifier .test-notifier select {
  width: 75%; }

.settings-add-edit-notifier .test-notifier button {
  height: 35px;
  width: 22%;
  margin-left: 10px; }

#settings-dialog {
  max-width: none;
  text-align: left;
  position: fixed;
  height: 100%; }
  #settings-dialog .settings-tab-notifications table thead tr th, #settings-dialog .settings-tab-notifications table thead tr td, #settings-dialog .settings-tab-notifications table tbody tr th, #settings-dialog .settings-tab-notifications table tbody tr td {
    flex: 0 0 auto; }
  #settings-dialog .settings-tab-notifications table thead tr th.target, #settings-dialog .settings-tab-notifications table thead tr td.target, #settings-dialog .settings-tab-notifications table tbody tr th.target, #settings-dialog .settings-tab-notifications table tbody tr td.target {
    width: 35%; }
  #settings-dialog .settings-tab-notifications table thead tr th.type, #settings-dialog .settings-tab-notifications table thead tr td.type, #settings-dialog .settings-tab-notifications table tbody tr th.type, #settings-dialog .settings-tab-notifications table tbody tr td.type {
    width: 25%; }
  #settings-dialog .settings-tab-notifications table thead tr th.events, #settings-dialog .settings-tab-notifications table thead tr td.events, #settings-dialog .settings-tab-notifications table tbody tr th.events, #settings-dialog .settings-tab-notifications table tbody tr td.events {
    width: 37%; }
  #settings-dialog .settings-tab-notifications table tbody .events ul {
    list-style-type: none;
    display: inline;
    margin: 0px; }
    #settings-dialog .settings-tab-notifications table tbody .events ul li {
      list-style-type: none;
      display: inline; }
      #settings-dialog .settings-tab-notifications table tbody .events ul li:after {
        content: ", "; }
      #settings-dialog .settings-tab-notifications table tbody .events ul li:last-child::after {
        content: ""; }
  #settings-dialog .settings-tab-users table thead tr th, #settings-dialog .settings-tab-users table thead tr td, #settings-dialog .settings-tab-users table tbody tr th, #settings-dialog .settings-tab-users table tbody tr td {
    flex: 0 0 auto; }
  #settings-dialog .settings-tab-users table thead tr th.username, #settings-dialog .settings-tab-users table thead tr td.username, #settings-dialog .settings-tab-users table tbody tr th.username, #settings-dialog .settings-tab-users table tbody tr td.username {
    width: 30%; }
  #settings-dialog .settings-tab-users table thead tr th.roles, #settings-dialog .settings-tab-users table thead tr td.roles, #settings-dialog .settings-tab-users table tbody tr th.roles, #settings-dialog .settings-tab-users table tbody tr td.roles {
    width: 37%; }
  #settings-dialog .settings-tab-users table thead tr th.email-address, #settings-dialog .settings-tab-users table thead tr td.email-address, #settings-dialog .settings-tab-users table tbody tr th.email-address, #settings-dialog .settings-tab-users table tbody tr td.email-address {
    width: 30%; }
  #settings-dialog .settings-tab-users table tbody .username {
    font-size: 19px;
    font-weight: bold; }
  #settings-dialog .settings-tab-users table tbody .roles ul {
    list-style-type: none;
    display: inline;
    margin: 0px; }
    #settings-dialog .settings-tab-users table tbody .roles ul li {
      list-style-type: none;
      display: inline; }
      #settings-dialog .settings-tab-users table tbody .roles ul li:after {
        content: ", "; }
      #settings-dialog .settings-tab-users table tbody .roles ul li:last-child::after {
        content: ""; }
  #settings-dialog h3 {
    margin-top: 15px; }
  #settings-dialog .timespan select {
    width: 20%;
    margin-right: 10px; }
    #settings-dialog .timespan select.week, #settings-dialog .timespan select.day {
      margin-left: 10px; }
  #settings-dialog .context-menu {
    position: fixed; }
  #settings-dialog .dialog-with-x {
    position: absolute;
    right: 65px;
    bottom: 0px;
    top: 0px; }
    #settings-dialog .dialog-with-x .dialog {
      max-width: none;
      width: 100%;
      height: 100%; }
  #settings-dialog .dialog-nav-step {
    cursor: pointer; }
    #settings-dialog .dialog-nav-step.is-current {
      opacity: 1; }
  #settings-dialog .dialog-contents {
    height: 100%; }
    #settings-dialog .dialog-contents table {
      width: 100%; }
    #settings-dialog .dialog-contents .tabs {
      margin-top: 27px; }
    #settings-dialog .dialog-contents > section {
      display: none; }
      #settings-dialog .dialog-contents > section .settings-form {
        overflow-y: auto;
        height: 90%;
        margin-right: -70px;
        margin-top: 10px;
        padding-right: 45px; }
      #settings-dialog .dialog-contents > section.is-current {
        display: block; }
  #settings-dialog .save-button {
    width: 130px;
    height: 40px;
    font-size: 15px;
    font-weight: 500; }
  #settings-dialog .filter-bar {
    margin-top: 0px; }
  #settings-dialog .settings-tab-notifications .save-button {
    display: none; }

.modal-dialog.confirm {
  width: 600px;
  padding: 23px 32px; }
  .modal-dialog.confirm .message {
    margin-top: 15px;
    margin-bottom: 15px;
    color: #c8c8c8; }
  .modal-dialog.confirm .buttons {
    float: right; }
    .modal-dialog.confirm .buttons .confirm {
      width: 106px;
      height: 40px;
      font-size: 15px;
      font-weight: 500; }
    .modal-dialog.confirm .buttons .cancel {
      margin-right: 48px;
      color: #555758;
      font-size: 15px;
      font-weight: 500; }

.fold-handle {
  cursor: pointer; }
  .fold-handle:after {
    font-family: "Material Icons";
    font-size: 30px;
    content: "keyboard_arrow_down";
    position: relative;
    top: 9px;
    left: 5px; }
  .fold-handle span.count {
    margin-left: 8px;
    color: #919191; }

.fold-handle-disabled {
  color: #555353;
  cursor: not-allowed; }

.folded .fold-handle:after {
  content: "keyboard_arrow_right"; }

.folded .fold-body {
  display: none; }

.fold-body {
  margin-top: 10px; }

.small-units .units .unit {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 40px;
  margin-right: 8px;
  margin-bottom: 8px;
  box-shadow: 2px 2px 2px #00000085;
  background-color: #232323;
  color: #c8c8c8; }
  .small-units .units .unit > * {
    display: inline-block; }
  .small-units .units .unit .close {
    display: none;
    position: absolute;
    font-size: 16px;
    top: 0;
    right: 0;
    z-index: 99;
    cursor: pointer; }
  .small-units .units .unit .txt-box {
    width: 76%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    font-size: 12px;
    padding: 4px; }
    .small-units .units .unit .txt-box p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
  .small-units .units .unit .icon-box {
    width: 24%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center; }
    .small-units .units .unit .icon-box > i {
      margin-top: 8px; }

.offline .units .unit, .unit.offline {
  background-color: #444444 !important; }
  .offline .units .unit .icon-box, .unit.offline .icon-box {
    background-color: #444444; }

.success .units .unit .icon-box, .unit.success .icon-box {
  background-color: #3E9F3E;
  color: #FFF; }

.error .units .unit .icon-box, .unit.error .icon-box {
  background-color: #FF5B5B;
  color: #FFF; }

.warning .units .unit .icon-box, .unit.warning .icon-box {
  background-color: #F2F25B !important;
  color: #000 !important; }

.unit.unauthorized .icon-box {
  cursor: pointer; }

.unit-actions .stop-capture {
  display: none; }

.unit-actions.capturing .stop-capture {
  display: list-item; }

.icon-cattura-logo {
  background-image: url(img/capturecast-logo.svg);
  background-size: cover;
  width: 219px; }

.container {
  width: auto; }

body header .container {
  justify-content: left; }

body header .menu {
  margin-left: 150px; }

body header .icons, body header .checkable-item .icons-invisible, .checkable-item body header .icons-invisible {
  margin-left: auto; }
  body header .icons .icon-settings, body header .checkable-item .icons-invisible .icon-settings, .checkable-item body header .icons-invisible .icon-settings {
    cursor: pointer;
    display: none; }

body header button.logout-button {
  height: 34px;
  width: 80px;
  font-size: 14px; }

body.can-admin header .icons .icon-settings, body.can-admin header .checkable-item .icons-invisible .icon-settings, .checkable-item body.can-admin header .icons-invisible .icon-settings {
  display: inline; }

.login-screen {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #232323;
  z-index: 2; }
  .login-screen .icon-cattura-logo {
    position: absolute;
    top: 20px;
    left: 24px; }
  .login-screen .login-form {
    width: 566px;
    height: 100%;
    background-color: #212121;
    position: relative;
    margin-left: auto;
    margin-right: auto; }
    .login-screen .login-form h1 {
      width: 260px;
      height: 48px;
      font-family: ClearSans;
      font-size: 35px;
      font-weight: bold;
      text-align: center;
      color: #c8c8c8;
      position: absolute;
      top: 183px;
      width: 100%; }
    .login-screen .login-form span {
      width: 350px;
      height: 42px;
      font-family: ClearSans;
      font-size: 16px;
      text-align: center;
      color: #c8c8c8;
      position: absolute;
      top: 245px;
      left: 101px; }
    .login-screen .login-form .controls {
      position: absolute;
      top: 350px;
      width: 350px;
      left: 110px; }
      .login-screen .login-form .controls .control {
        margin-top: 0px;
        margin-bottom: 16px; }
      .login-screen .login-form .controls button {
        width: 196px;
        height: 50px;
        margin-left: 75px;
        margin-top: 44px; }
  .login-screen .login-backdrop {
    position: absolute;
    left: 0px;
    top: 0;
    bottom: 0;
    right: 0;
    object-fit: contain;
    display: inline-block;
    background: linear-gradient(to bottom, #004884, #013b6c); }
    .login-screen .login-backdrop h2 {
      width: 511px;
      height: 38px;
      font-family: ClearSans;
      font-size: 28px;
      font-weight: bold;
      text-align: left;
      color: #c8c8c8;
      position: absolute;
      top: 658px;
      right: 141px; }