/* (Static Variables) */
/*
 * Animations/Transitions
 */
/*
 * Bootstrap Widths
 */
/*
 * Named Colours
 */
/*
 * UI Component Sizes
 */
/* (Non-Static Variables) */
/*
 * Backgrounds
 */
/*
 * Buttons
 */
/*
 * Fonts
 */
/*
 * Heights/Widths
 */
/*
 * Icons
 */
/*
 * User Presence
 */
/* (Static Variables) */
/*
 * Animations/Transitions
 */
/*
 * Bootstrap Widths
 */
/*
 * Named Colours
 */
/*
 * UI Component Sizes
 */
/* (Non-Static Variables) */
/*
 * Backgrounds
 */
/*
 * Buttons
 */
/*
 * Fonts
 */
/*
 * Heights/Widths
 */
/*
 * Icons
 */
/*
 * User Presence
 */
/**
 * Flexbox
 */
body#darkTheme:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages > li {
  color: #fff;
}
body#darkTheme:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages > li.selected {
  color: #fff;
  background: #353535;
}
body#darkTheme:not(.login-page) #view > .dialplan-builder > .dialplan-components {
  background-color: #070a15;
}
body#darkTheme:not(.login-page) #view > .dialplan-builder > .dialplan-components > li.component:not(.page-component) {
  background-color: #070a15;
}
body#darkTheme:not(.login-page) #view > .dialplan-builder > .dialplan-components > li > div {
  color: #fff;
  background: #bb86fc;
}
body#darkTheme:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li.component:not(.page-component) {
  background-color: #070a15;
}
body#darkTheme:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li > div {
  color: #fff;
  background: #070a15;
}
body#darkTheme:not(.login-page) #view > .dialplan-builder ul {
  background-color: #070a15;
}

body:not(.login-page) .dialplan-search-popover .popover-content {
  padding: 0.5em;
}
body:not(.login-page) .dialplan-search-popover .popover-content > input {
  border-width: 0 0 1px;
}
body:not(.login-page) .synq-dialplan-variable-modal .modal-body {
  padding: 0;
}
body:not(.login-page) .synq-dialplan-variable-modal .modal-header {
  justify-content: space-between;
}
body:not(.login-page) .synq-dialplan-variable-modal .modal-header span {
  margin-left: auto;
}
body:not(.login-page) .synq-dialplan-variable-modal .modal-header span .material-icons {
  color: inherit;
  font-size: 1.25em;
  margin: 0 5px;
}
body:not(.login-page) #view {
  display: flex;
  align-items: stretch;
  flex-direction: column;
}
body:not(.login-page) #view .component-select-header {
  max-width: 100%;
  background-color: #5cc3b2;
}
body:not(.login-page) #view .component-select-header > div > span {
  font-size: 1.1em;
  color: #ffffff;
}
body:not(.login-page) #view .component-select-header > div:last-child {
  text-align: right;
}
body:not(.login-page) #view > .dialplan-builder {
  display: flex;
  align-items: stretch;
  flex: 1;
  max-height: 100%;
  height: 100%;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-popover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: inline;
  z-index: 99999;
  width: 40%;
  background-color: #ffffff; /* Safari, Chrome and Opera > 12.1 */ /* Firefox < 16 */ /* Internet Explorer */ /* Opera < 12.1 */
  animation: fadein 2s;
}
body:not(.login-page) #view > .dialplan-builder.component-selection > .dialplan-components {
  opacity: 0.2;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan {
  display: flex;
  flex: 1;
  flex-direction: column;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-content {
  background: #ffffff;
  flex: 1;
  overflow: hidden;
  padding: 1em;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-content > div {
  height: calc(100vh - 219px) !important;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages {
  display: flex;
  background: rgba(230, 230, 230, 0.3);
  flex: 0 0 3.4em;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages::-webkit-scrollbar {
  width: 5px;
  height: 12px;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages::-webkit-scrollbar-track {
  background: #f5f8f9;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages::-webkit-scrollbar-thumb {
  background-color: #5951ff; /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 3px solid #f5f8f9; /* creates padding around scroll thumb */
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages.horizontal-scroll-visible::-webkit-scrollbar {
  width: 0.4em;
  height: 0.4em;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages.horizontal-scroll-visible > li {
  padding-bottom: 0;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages.horizontal-scroll-visible > li > .material-icons.delete-page {
  top: 50%;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages > li {
  display: flex;
  align-items: center;
  border-color: transparent;
  border-style: solid;
  border-width: 0 0 2px 0;
  color: #667d90;
  cursor: pointer;
  flex: 0 0 12em;
  justify-content: center;
  margin: 0;
  padding: calc(0.4em + 2px) 0.5em 0.4em;
  position: relative;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages > li > .material-icons {
  color: inherit;
  font-size: 1.1em;
  margin: 0 0.333em 0 0;
  transform: translateY(-1px);
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages > li > .material-icons.delete-page {
  display: none;
  font-size: 0.9em;
  font-weight: bold;
  position: absolute;
  right: 0.333em;
  top: calc(50% - 0.222em);
  transform: translateY(-50%);
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages > li:hover:not(.create-page):not(.selected) {
  background: rgba(230, 230, 230, 0.25);
  color: #556878;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages > li.selected {
  background: rgba(230, 230, 230, 0.5);
  border-color: #465663;
  color: #465663;
  cursor: default;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages > li:hover > .material-icons.delete-page, body:not(.login-page) #view > .dialplan-builder > .dialplan > .dialplan-pages > li.selected > .material-icons.delete-page {
  display: block;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components {
  display: flex;
  align-items: stretch;
  border-color: #e6e6e6;
  border-style: solid;
  border-width: 0 1px 0 0;
  flex: 0 0 20em !important;
  flex-direction: column;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul {
  list-style: none;
  margin: 0;
  padding: 0;
  cursor: -webkit-grab;
  background-color: #f5f8f9;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li {
  margin: 0;
  padding: 0;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li.active,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li.active {
  background-color: #bbe4fa;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li.component,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li > div,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li.component,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li > div {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  font-size: 0.9em;
  padding: 1em 0.4em 1em 1em;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li.component .material-icons,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li > div .material-icons,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li.component .material-icons,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li > div .material-icons {
  color: inherit;
  font-size: 1.3em;
  margin-right: 0.333em;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li.component,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li.component {
  z-index: 9999;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li.component:not(.page-component),
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li.component:not(.page-component) {
  justify-content: flex-start;
  border: 1px solid #e6e6e6;
  margin: 1px;
  background-color: #ffffff;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li.component.page-component > span:not(:first-child) .material-icons,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li.component.page-component > span:not(:first-child) .material-icons {
  visibility: hidden;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li.component.page-component:hover > span:not(:first-child) .material-icons,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li.component.page-component:hover > span:not(:first-child) .material-icons {
  visibility: visible;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li > div,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li > div {
  background: #286aff;
  cursor: pointer;
  font-weight: 500;
  color: #001c40;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li > div .material-icons,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li > div .material-icons {
  font-weight: 500;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components > li > div {
  border-color: #a6a6a6;
  border-style: solid;
  border-width: 0 0 1px 0;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components ul > li > div {
  background: transparent;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components.vertical-scroll-visible::-webkit-scrollbar {
  width: 0.4em;
  height: 0.4em;
}
body:not(.login-page) #view > .dialplan-builder > .dialplan-components.vertical-scroll-visible li.component,
body:not(.login-page) #view > .dialplan-builder > .dialplan-components.vertical-scroll-visible li > div {
  padding-right: 0;
}

.snq-settings {
  padding-left: 15px;
  padding-right: 15px;
  margin: 0;
  padding-bottom: 50px;
}
.snq-settings .save-btn {
  position: fixed;
  right: 80px;
}
.snq-settings .settings-group {
  margin-left: 0;
}
.snq-settings .settings-group .form-group,
.snq-settings .settings-group .container {
  max-width: 600px;
  margin: 0;
  padding: 0;
}
.snq-settings .settings-group .form-group > div,
.snq-settings .settings-group .container > div {
  padding-left: 0;
}
.snq-settings .settings-group > h3 {
  margin-top: 40px;
  font-size: 1.4em;
}
.snq-settings .settings-group label:not(.header) {
  font-weight: normal;
}

.div-draggable {
  cursor: -webkit-grab;
  border: 1px solid #efefef;
  background-color: #ffffff;
  padding: 3px;
  margin: 0;
  margin-bottom: 3px;
}

.div-draggable div {
  text-align: center;
}

.qtip-bootstrap td {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.8em;
}

.qtip {
  max-width: 500px;
}

.exit-list div {
  padding-left: 0;
}
.exit-list label {
  font-weight: normal;
  cursor: pointer;
}

.remove-row {
  font-size: 1em;
  position: relative;
  top: 14px;
}

.remove-row:hover {
  background-color: #efefef;
}

.add-row i {
  font-size: 1.4em;
  margin-right: 15px;
}

.add-row span {
  cursor: pointer;
}

.synq-dialplan-component-insert-modal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.synq-dialplan-component-insert-modal .dialplan-exits li {
  cursor: pointer;
  float: left;
  padding: 5px;
  margin: 5px;
  background-color: #307dfc;
  min-width: 50px;
  text-align: center;
  color: #ffffff;
}

.synq-dialplan-component-insert-modal audio {
  margin-left: -8px;
  width: 103%;
  opacity: 0.5;
}

.synq-dialplan-component-insert-modal audio:hover {
  opacity: 1;
}

#dialplan-zoom {
  position: absolute;
  right: 25px;
  top: 200px;
  z-index: 99;
}

#dialplan-zoom i {
  display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

#dialplan-zoom i:after {
  content: "\a";
  white-space: pre;
}

.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
  margin-left: 50px;
  margin-right: 50px;
}

.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;
  margin-left: -1.5px;
}

.timeline-heading .text-muted i {
  font-size: 12px;
}

.timeline > li {
  margin-bottom: 20px;
  position: relative;
}

.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}

.timeline > li:after {
  clear: both;
}

.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}

.timeline > li:after {
  clear: both;
}

.timeline > li > .timeline-panel {
  width: 50%;
  float: left;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline > li.timeline-inverted + li:not(.timeline-inverted),
.timeline > li:not(.timeline-inverted) + li.timeline-inverted {
  margin-top: -60px;
}

.timeline > li:not(.timeline-inverted) {
  padding-right: 90px;
  text-align: right;
}

.timeline > li.timeline-inverted {
  padding-left: 90px;
}

.timeline > li > .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}

.timeline > li > .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}

.timeline > li > .timeline-badge {
  color: #ffffff;
  width: 30px;
  height: 30px;
  line-height: 39px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 50.9%;
  margin-left: -25px;
  background-color: #5cc3b2;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

.timeline > li > .timeline-badge.red {
  background-color: #ee6e73;
}

.timeline > li > .timeline-badge i {
  color: #ffffff;
  font-size: 20px;
}

.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}

.timeline-badge.primary {
  background-color: #2e6da4 !important;
}

.timeline-badge.success {
  background-color: #3f903f !important;
}

.timeline-badge.warning {
  background-color: #f0ad4e !important;
}

.timeline-badge.danger {
  background-color: #d9534f !important;
}

.timeline-badge.info {
  background-color: #5bc0de !important;
}

.timeline-title {
  margin-top: 0;
  color: inherit;
  font-size: 1.2em;
}

.timeline-body > p,
.timeline-body > ul {
  margin-bottom: 0;
}

.timeline-body > p + p {
  margin-top: 5px;
}

#script-content .sv_body {
  border-top: 0;
}

#script-content .sv_row {
  margin-top: 15px;
}

#script-content.edit-mode .sv_q {
  cursor: move;
}

#script-content.edit-mode .sv_q:hover div:not(.actions) {
  opacity: 0.4;
}

#script-content .sv_q .actions {
  display: none;
}

#script-content.edit-mode .sv_q .actions {
  text-align: center;
  position: absolute;
  z-index: 999999;
}

#script-content.edit-mode .sv_q:hover .actions {
  display: block;
}

#script-content.edit-mode .sv_q .edit-button {
  background-color: #307dfc;
  border-color: #307dfc;
  cursor: pointer;
  margin-right: 5px;
  margin-left: 5px;
}

.modal .visible-if {
  margin-left: 0;
  margin-right: 0;
}

.script-modal .visibie-if {
  padding-left: 10px;
  padding-right: 10px;
}

.script-modal textarea {
  min-height: 100px;
}/*# sourceMappingURL=synq-route.css.map */