html {
  font-family: "Roboto", sans-serif !important;
}

body{
  overscroll-behavior: none;
}

.lightPlaceholder::-webkit-input-placeholder { /* WebKit browsers */
    color: #fff;
}
.lightPlaceholder:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff;
}
.lightPlaceholder::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fff;
}
.lightPlaceholder:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #fff;
}


.altPlaceholder::-webkit-input-placeholder { /* WebKit browsers */
    color: #9b9ead;
}
.altPlaceholder:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #9b9ead;
}
.altPlaceholder::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #9b9ead;
}
.altPlaceholder:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #9b9ead;
}

/* source: https://css-tricks.com/snippets/css/clear-fix/ */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* adapted from https://stackoverflow.com/a/44968075 */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a:link,
a:visited,
a:hover,
a:active,
.hyperlink {
    color: rgb(0, 0, 238);
    cursor: pointer;
    text-decoration: underline;
}

.hyperlink--disabled {
    color: #aaa;
    opacity: 0.5;
    cursor: not-allowed;
}

.link-primary,
.link-secondary {
  cursor: pointer;
  display: inline-block;
  opacity: .75;
  transition: .2s;
  margin-left: 20px;
  height: 26px;
  line-height: 26px;
}

.delete-link {
  color: #EF9A9A;
  cursor: pointer;
  display: inline-block;
  transition: .2s;
}

.delete-link:hover {
  color: #E53935;
}

.link-primary:hover,
.link-secondary:hover {
  opacity: 1;
}

.link-secondary {
    color: #999;
    opacity: 0.3;
}

.link-primary {
  color: rgb(33, 150, 243);
}

a:hover,
a:active {
    color: rgb(85, 26, 139);
}

.help-link {
    opacity: 0.5;
}

.help-link:hover,
.help-link:focus {
    opacity: 1;
}

.help-link span:not(.material-icons) {
    transition: all 450ms;
    opacity: 0;
}

.help-link:hover span:not(.material-icons),
.help-link:focus span:not(.material-icons) {
    opacity: 1;
}

.circular-progress svg {
    display: block;
}

.blueprint-component > h2 {
    font-size: 18px;
}

.blueprint-count-can-vary-row {
    position: relative;
    display: flex;
}

.blueprint-count-can-vary-wrapper .drag-handle,
.blueprint-count-can-vary-wrapper .delete-icon,
.blueprint-count-can-vary-wrapper .add-blueprint-default-link {
    opacity: 0;
}

.edit-blueprint-link,
.blueprint-count-can-vary-wrapper .add-blueprint-default-link {
    margin-left: 0;
    height: auto;
    line-height: inherit;
    font-size: 12px;
}

.blueprint-count-can-vary-row .drag-handle {
    position: absolute;
    left: -48px;
}

.blueprint-count-can-vary-row .delete-icon {
    position: absolute;
    right: -48px;
}

.blueprint-count-can-vary-row:hover .drag-handle,
.blueprint-count-can-vary-row:hover .delete-icon {
    opacity: 1;
}

.blueprint-count-can-vary-wrapper:hover  .add-blueprint-default-link,
.blueprint-count-can-vary-wrapper        .add-blueprint-default-link--empty {
    opacity: 1;
}

.blueprint-count-can-vary-wrapper .table div {
    flex: 1;
    margin-right: 10px;
}

.json-sample,
.xml-sample {
    font-family: Roboto Mono;
    word-break: break-all;
    overflow-wrap: break-word;
    font-size: 10px;
}

.json-sample .collapsed-item-count[data-num-items]::after,
.xml-sample .collapsed-item-count[data-num-items]::after {
    content: "(" attr(data-num-items) " items)";
    opacity: 0.5;
}

/* UTILS */
.margin-left-2 {
  margin-left: 2px;
}

.margin-left-5 {
  margin-left: 5px;
}

.margin-left-10 {
  margin-left: 10px;
}

.margin-left-15 {
  margin-left: 15px;
}

.margin-left-20 {
  margin-left: 20px;
}

.margin-right-5 {
  margin-right: 5px;
}

.margin-right-10 {
  margin-right: 10px;
}

.margin-right-15 {
  margin-right: 15px;
}

.margin-right-20 {
  margin-right: 20px;
}

.margin-top-5 {
  margin-top: 5px;
}

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

.margin-top-15 {
  margin-top: 15px;
}

.margin-top-20 {
  margin-top: 20px;
}

.margin-bottom-5 {
  margin-bottom: 5px;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}

.margin-bottom-15 {
  margin-bottom: 15px;
}

.margin-bottom-20 {
  margin-bottom: 20px;
}

.font-size-13 {
  font-size: 13px;
}

.width-200 {
  width: 200px;
}

.error-message {
  color: rgb(239, 83, 80);
}

/* NAV */
.nav-sub-items {
  padding-bottom: 15px;
}

.nav-sub-items a,
.customize-fields {
  display: block;
  padding: 3px 0 3px 52px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: .2s;
  opacity: .75;
}

.customize-fields {
    color: rgb(0, 0, 238);
}

.nav-sub-items a:hover {
  opacity: 1;
}

.nav-sub-items a span {
  display: inline-block;
  transition: .2s;
  text-transform: none;
  padding: 3px 5px;
}

.nav-sub-items a.active {
  color: #60A5EB;
  font-weight: 700;
  opacity: 1;
}

.nav-sub-items a:hover {
  opacity: 1;
}

/* PAGE TODO: refactor this stuff.*/
.page-fields,
.page-reporting,
.page-rules,
.page-mappings,
.page-data-rec {
  background: #f6f6f6;
  min-height: calc(100vh - 64px); /* Eww. */
}

.rules-container.list {
    padding: 2rem 2rem 6rem;
}

.mappings-container.list {
    padding: 2rem 2rem 6rem;
}

.k3-toolbar .route-search,
.k3-toolbar .rule-search,
.k3-toolbar .mapping-search {
    margin-left: 60px;
}

.k3-toolbar .field-search {
    margin-left: 20px;
}

.page-fields table .expanded-row-cell {
    padding: 0 24px 0 24px;
    box-sizing: border-box;
}

.page-fields table .expanded-row .expanded-row-cell:first-child,
.page-audit table .audit-row td:first-child {
    padding-left: 40px;
}

.page-fields table .expanded-row .edit-icon-wrapper {
    display: flex;
    align-items: center;
}

.page-fields table .expanded-row .edit-icon,
.page-fields table .expanded-row .delete-icon {
    opacity: 0;
    margin-left: 15px;
}

.page-fields table .expanded-row:hover .edit-icon,
.page-fields table .expanded-row:hover .delete-icon {
    opacity: 0.3;
}

.page-fields table .expanded-row .edit-icon:hover,
.page-fields table .expanded-row .delete-icon:hover{
    opacity: 1;
}

.field-edit-form {
    display: flex;
    align-items: center;
}

.field-edit-error {
    margin-right: auto;
    font-size: 13px;
    color: rgb(239, 83, 80);
}

.page-fields table .expanded-row {
    display: flex;
    height: 48px;
    align-items: center;
}

.page-fields table .expanded-row-cell--source {
    width: 25%;
}

.page-fields table .expanded-row-cell--target {
    width: 20%;
}

.page-fields table .expanded-row-cell--75 {
    width: 75%;
}

.page-fields table th:first-child,
.page-fields table td:first-child,
.page-audit  table th:first-child,
.page-audit  table td:first-child {
   padding-left: 40px !important; /* Needs !important because m/TableRowColum inlines padding on td */
}

.page-audit table.unindented-table th:first-child,
.page-audit table.unindented-table td:first-child {
    padding-left: 0 !important;
}

.page-fields table .expanded-row-wrapper td {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.page-fields .field-action-add {
  opacity: 0.3;
}

.page-fields .field-action-add:hover {
  opacity: 1;
 }

/* TOOLBAR STUFF */
.k3-toolbar {
  background: #fff;
  position: sticky;
  will-change: transform; /* TODO: Do not remove! Influences performance of react-virtualized in modal */
  top: 64px;
  z-index: 100;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.toolbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.toolbar-actions > * {
    margin: 0 10px;
}

.field-tab > div div {
  flex-direction: row !important;
  align-items: center;
}

.adaptor__title {
    padding: 10px 36px;
}

.adaptor__description {
    padding-left: 21px;
}

.adaptor__name {
    display: flex;
}

.field-tab > div div:before,
.adaptor--source .adaptor__name:before,
.adaptor--target .adaptor__name:before,
.jump-tab span:last-child:before,
.route__component__name:before {
  content: '';
  display: inline-block;
  margin-right: 5px;
  height: 15px;
  width: 15px;
}

.jump-tab span:last-child:before {
    vertical-align: middle;
}

.route__component__name:before {
    height: 16px;
    width: 16px;
}

.field-tab-source > div div:before,
.adaptor--source .adaptor__name:before,
.jump-tab--raw span:last-child:before,
.route__component--source .route__component__name:before {
  background: #EDE7F6;
}

.field-tab-target > div div:before,
.adaptor--target .adaptor__name:before,
.jump-tab--rules-applied span:last-child:before,
.route__component--target .route__component__name:before {
  background: #E1F5FE;
}

.adaptor--general .adaptor__description {
    padding-left: 0;
}

/* TABLE STUFF */
.table-row,
.audit-row {
  cursor: pointer;
  transition: .2s;
}

.audit-row {
    padding-bottom: 50px;
}

.table-row:hover {
  background: rgba(255,255,255,0.5);
}

.table-row:hover .accordion-toggle-icon,
.audit-row:hover .accordion-toggle-icon {
  opacity: .75;
}

.table-row.field-unused:hover td:first-child:before {
  opacity: 0;
}

.table-row td:first-child,
.audit-row td:first-child {
  position: relative;
}

.table-row .accordion-toggle-icon,
.audit-row .accordion-toggle-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  opacity: 0;
}

.expanded-row-wrapper .accordion-toggle-icon,
.audit-row--expanded  .accordion-toggle-icon {
  top: 13px;
  left: 10px;
  transform: rotate(90deg);
}

.field-section {
  border-top: 1px solid #dadada;
  margin: 0 40px;
  padding: 20px 0;
}

.field-section-header {
  align-items: center;
  display: flex;
  margin: 0px;
  margin-left: 20px;
  width: 100%;
}

.field-section-header + .field-section-table {
  margin-top: 5px;
}

.field-section-table {
    width: 100%;
    margin-left: 20px;
}

.field-section-table tr td:first-child {
  width: 150px;
}

.column-selection-dialog .feed-column {
    opacity: 0.6;
    cursor: pointer;
}

.mapping__fields .k3-field--source,
.mapping__fields .k3-field--target,
.rule__fields    .k3-field--target,
.rule-details   .k3-field--target,
.table-row .k3-field--source,
.table-row .k3-field--target,
.expanded-row-cell .k3-field--source,
.expanded-row-cell .k3-field--target,
.column-selection-dialog .feed-column--source,
.column-selection-dialog .feed-column--target,
.page-audit .field__name.k3-field--source,
.page-audit .field__name.k3-field--target {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 3px;
}

.rule-details .k3-field--target {
    padding: 1px 7px;
    border-radius: 3px;
    opacity: 0.6;
}

.mapping__fields .k3-field--source,
.value-mapping__header .k3-field--source,
.table-row .k3-field--source,
.expanded-row-cell .k3-field--source,
.column-selection-dialog .feed-column--user.feed-column--source,
.page-audit .k3-field--source {
    background-color: #EDE7F6;
    color: #311B92;
}

.value-mapping__header .k3-field--source {
    background-color: rgb(244, 240, 250);
    color: rgb(131, 118, 189);
}

.mapping__fields .k3-field--target,
.rule__fields    .k3-field--target,
.rule-details   .k3-field--target,
.value-mapping__header .k3-field--target,
.table-row .k3-field--target,
.expanded-row-cell .k3-field--target,
.column-selection-dialog .feed-column--user.feed-column--target,
.page-audit .k3-field--target {
    background-color: #E1F5FE;
    color: #01579B;
}

.value-mapping__header .k3-field--target {
    background-color: rgb(237, 249, 254);
    color: rgb(103, 154, 195);
}

.table-row .k3-field--source,
.table-row .k3-field--target,
.expanded-row-cell .k3-field--source,
.expanded-row-cell .k3-field--target,
.page-audit .field__name.k3-field--source,
.page-audit .field__name.k3-field--target {
    opacity: 0.6;
}

/* FIELDS */
.field-cell {
  display: flex;
  align-items: center;
}

.page-fields .table-row td,
.expanded-row-cell {
    font-size: 12px !important;
}

.field-unused td:first-child {
    position: relative;
}

.field-used {
    cursor: pointer;
}

.field-unused td:first-child:before {
  background: rgb(33, 150, 243);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.75);
  content: '';
  display: inline-block;
  height: 12px;
  left: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: .2s;
  width: 12px;
}

.field--focused {
    height: 200px;
    border-bottom: 1px solid rgb(224, 224, 224);
}


.list {
    padding: 0; /* MUST be zero for proper `on-click-outside` behavior */
}

.list-item {
    margin: 0; /* MUST be zero for proper `on-click-outside` behavior */
    transition: all 0.3s;
}


.list--index .list-item:hover,
.list        .list-item--selected {
    padding: 10px 0;
}


.rules-container.list .list-item--selected {
    padding: 5px 0;
}

.list--index .mapping.list-item:hover,
.list        .mapping.list-item--selected {
    padding: 4px 0;
}

.mapping--value.list-item {
    cursor: pointer;
}

.list--index .list-item:hover:first-child,
.list        .list-item--selected:first-child {
    padding-top: 0;
}

.list--index .list-item:hover:last-child,
.list        .list-item--selected:last-child {
    padding-bottom: 0;
}

.list-item__inner {
    background-color: #f8f8f8;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    transition: all 0.3s;
}

.list--index .list-item:hover     .list-item__inner,
.list        .list-item--selected .list-item__inner {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 30px, rgba(0, 0, 0, 0.23) 0px 6px 10px;
}

.rules-container.list .list-item--selected .list-item__inner,
.mappings-container.list .list-item--selected .list-item__inner {
    background-color: #f6f6f6;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
}

.rules-container.list .list-item:hover .list-item__inner,
.mappings-container.list .list-item:hover .list-item__inner {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
}

.rules-container .list-item__inner {
    padding-bottom: 5px;
}

.mappings-container .list-item__header {
    padding: 5px 20px;
}

.rules-container    .list-item__header {
    padding: 5px 15px 5px 45px;
}

.list-item__header {
    padding: 20px;
}

.list-item__reveal--opacity-0-100 {
    transition: opacity 0.3s;
    opacity: 0;
    pointer-events: none;
}

.list-item__reveal--opacity-50-100 {
    transition: opacity 0.3s;
    opacity: 0.5;
}

.list--index .list-item:hover     .list-item__reveal--opacity-0-100,
.list        .list-item--selected .list-item__reveal--opacity-0-100 {
    opacity: 1;
    pointer-events: auto;
}

.list--index .list-item:hover     .list-item__reveal--opacity-50-100,
.list        .list-item--selected .list-item__reveal--opacity-50-100 {
    opacity: 1;
}

.routes-container .list-item__header {
    display: flex;
    flex-wrap: wrap;
    min-height: 70px;
}

.route__data {
    margin-top: 0;
    margin-left: 250px;
    width: 220px;
    height: 75px;
}

.route__chart {
    transition: background-color 0.5s ease;
}

.route__chart:empty,
.route__data--loading .route__chart,
.route__chart--text {
    height: 100%;
    display: flex;
    align-items: center;
    background-color: rgba(0,0,0, 0.05);
}

.route__data--loading .route__chart > * {
    margin: auto;
}

.route__chart:empty:after,
.route__chart--text > div {
    color: #bbb;
    margin: auto;
}

.route__chart:empty:after {
    content: 'No Data';
}

.route__links {
  background: #f7f7f7;
  border-top: 1px solid #dadada;
  display: flex;
  height: 0px;
  overflow: hidden;
}

.routes-container .list-item:hover .route__links,
.routes-container .list-item--selected .route__links {
  height: auto;
}

.route__links > a {
  align-items: center;
  border-right: 1px solid #dadada;
  color: rgb(11, 182, 171);
  display: flex;
  flex-grow: 1;
  justify-content: center;
  padding: 10px 20px;
  text-decoration: none;
  transition: .3s;
}

.route__links > a:last-child {
  border-right: none;
}

.route__links > a:hover {
  background: #fff;
  color: #45818e;
}

.route__control {
    margin-right: 5px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.route .axis line,
.route .axis path {
    stroke: #bbb;
}

.route .axis text {
    fill: #bbb;
}

.route rect.total {
    fill: rgb(129, 199, 132);
}

.route rect.attention {
    fill: rgb(229, 115, 115);
}

.page_title {
    font-weight: 400;
    font-size: 30px;
    color: rgba(66, 66, 66, 0.87);
}

.spacer {
    width: 20px;
    height: 10px;
}

.route__title .route__name {
    position: absolute;
    max-width: 350px;
    margin: 0;
    font-weight: 400;
    font-size: 30px;
    color: rgba(66, 66, 66, 0.87);
}

.route__components {
    margin-top: 50px;
}

.route__component {
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    border-left: 1px solid #bbb;
    width: 60px;
}

.route__component:first-child {
    padding-left: 0;
    border-left: none;
}

.route__component--unknown {
    color: rgba(0,0,0, 0.3);
}

.route__component--unknown .route__component__name:after {
    content: 'UNK';
}

.route__component--unknown .route__component__description:after {
    content: 'Unknown';
}

.route__component__description {
    font-size: initial;
    display: none;
}

.route__component__name {
    display: flex;
    align-items: center;
}

/* Adapted from: https://stackoverflow.com/questions/190396/adding-html-entities-using-css-content */
.route__component__description:after,
.route__component__name:after {
    content: '\0000a0';
}

.list-item__body {
    transition: all 0.5s;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.list-item--selected .list-item__body {
    opacity: 1;
}

.mapping--selected .list-item__body {
    height: 300px;
}

.rule--selected.rule--fetching .list-item__body {
    height: auto;
}

.rule--selected.rule--when-then .list-item__body {
    height: auto;
}

.rule--selected.rule--when-then-else .list-item__body {
    height: auto;
}

.rule-reorder-item {
    display: flex;
    align-items: center;
}

.rule-reorder-item .rule__name {
    margin-right: 10px;
    width: 150px;
}

.rule-reorder-item .rule__field-list {
    max-width: 200px;
}

.mapping .list-item__body__inner {
    padding: 0 20px;
}

.rule .list-item__body__inner {
    padding: 0 40px;
}

.list-item .mapping-rows-table {
    height: 225px;
    overflow: auto;
}

.mapping .list-item__header,
.rule    .list-item__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.mapping__body__footer {
    padding: 11px;
    font-size: 12px;
    margin-top: 10px;
}

.mapping__name,
.rule__name {
    font-size: 14px;
    color: rgba(66, 66, 66, 0.87);
    width: 200px;
    min-width: 100px;
    flex: 1;
}

.rule__name {
    width: 170px;
}

.rules-container.list .rule__name {
    position: relative;
}

.rules-container .rule__number {
    position: absolute;
    top: -2px;
    left: -30px;
}

.mapping__actions,
.rule__actions {
    opacity: 0;
    pointer-events: none;
}

.mapping.list-item:hover .mapping__actions,
.rule.list-item:hover    .rule__actions {
    opacity: 0.5;
    pointer-events: auto;
}

/*
.mapping--selected.mapping--value .mapping__fields {
    opacity: 0;
}
*/

.mapping__fields,
.rule__fields {
    display: flex;
    align-items: center;
}

.list .new-passthrough .mapping__field {
    margin: 12px;
}

.list .new-passthrough .mapping__field--output {
    margin-right: 8px;
}

.mapping__type-icon,
.rule__arrow-icon {
    margin: 0 10px;
    opacity: 0.7;
    height: 24px;
}

.page-fields .mapping__type-icon,
.page-fields .rule__arrow-icon {
    margin: 0 15px;
}

.mapping__field-list,
.rule__field-list {
    width: 256px;
    opacity: 0.6;
    margin: 12px;
    font-size: 12px;
}

.mapping__field-list:empty::before,
.rule__field-list:empty::before {
    content: "(none)";
    color: #ccc;
}

.mapping__field-list--input,
.rule__field-list--input {
    display: inline-block;
    text-align: left;
    overflow: hidden;
}

.mapping__field-list--input::after,
.rule__field-list--input::after {
    width: 256px;
    height: 0.35em;
    content: "";
    margin: 0 15px;
    display: inline-block;
    border-top: 1px solid #ccc;
}

.page-fields .mapping__field-list--input::after,
.page-fields .rule__field-list--input::after {
    width: 256px;
}

.field-usage-table .mapping__field-list,
.field-usage-table .rule__field-list {
  margin: 0px;
  width: 256px;
}

.mapping-rows-table__header {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* value mapping */

.value-mapping-container {
    min-height: 400px;
    display: inline-block; /* needed for sticky */
}

.value-mapping-container .ReactVirtualized__Grid__innerScrollContainer {
    padding-bottom: 10px;
}

.value-mapping-container--loading {
    display: block;
}

.value-mapping__row {
    display: flex;
    align-items: center;
    height: 48px;
}

.value-mapping__row--overflow {
    padding: 0 12px;
    font-size: 12px;
    opacity: 0.6;
}

.value-mapping-gutter {
    width: 48px;
    height: 48px;
    background-color: rgb(250, 250, 250);
    z-index: 1;
}

.value-mapping-gutter--left {
    /*position: sticky;*/
    left: 0;
    display: table;
}

.value-mapping-gutter--dirty {
    background-color: rgb(238, 238, 238);
}

.value-mapping-gutter--error {
    background-color: rgb(239, 154, 154);
}

.row-number {
    font-size: 10px;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    padding-right: 10px;
}

.value-mapping__row__icon,
.fields__icon {
    opacity: 0.3;
    transition: all 0.5s;
}

.value-mapping__row__icon:hover,
.fields__icon:hover {
    opacity: 1;
}

.value-mapping__row__icon--created {
    opacity: 1;
}

.value-mapping-container        .value-mapping__header,
.value-mapping-fields-container .value-mapping__header,
.page-audit                     .value-mapping__header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    z-index: 3;
    height: 48px;
    line-height: 48px;
}

.value-mapping__row__cell,
.page-audit .value-mapping__row__cell {
    min-width: 200px;
    width: 200px;
    padding: 0 12px;
    font-size: 12px;
    height: 48px;
}

.page-audit .value-mapping__row__cell {
    min-width: 100px;
    width: 100px;
    line-height: 48px;
}

.value-mapping-fields-container .value-mapping__row__cell {
    width: 300px;
    padding: 0 18px;
    box-sizing: border-box;
}

.value-mapping-summary,
.fields-summary,
.rule-summary,
.upload-summary,
.confirmation-dialog-summary,
.database-query-summary,
.database-statement-summary,
.sample-data-summary,
.repush-jobs-summary,
.dialog-summary,
.file-url-summary {
    margin-right: auto;
    margin-left: 8px;
    padding: 8px;
    font-size: 13px;
    font-weight: bold;
}

.file-url-summary {
    margin-left: 0;
    padding-left: 48px;
}

.ftp-params,
.ftp-test-results {
    position: relative;
    padding: 0 16px 16px;
}

.ftp-params--bad-protocol:before,
.ftp-params--malformed:before,
.ftp-params--not-normalized:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(204,204,204);
}

.ftp-params__sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgb(204,204,204) 80%, rgba(204,204,204,0));
    padding: 16px 0;
    text-align: center;
    line-height: 1.6;
}

.sample-data-summary {
    margin-right: 0;
    text-align: left;
}

.sample-data-footer {
    display: flex;
    align-items: center;
}

.sample-data-footer__right .sample-data-summary {
    margin-left: 0;
    margin-right: auto;
}

.sample-data-footer__left {
    flex: 1;
}

.sample-data-footer__right {
    display: flex;
    flex-basis: 700px;
    flex-direction: row-reverse;
}

/* https://css-tricks.com/flexbox-truncated-text/ */
.confirmation-dialog-summary {
    flex: 1;
    min-width: 0;
}

.value-mapping-summary .hyperlink {
    display: inline-block;
    margin-left: 10px;
}

.row-delete-checkbox {
    margin: 12px 0 12px auto;
    width: 24px;
    height: 24px;
}

/***************/

.mapping-rows-table .mapping-fields {
    display: flex;
    height: 48px;
    line-height: 48px;
}

.mapping-rows-table .mapping-field {
    width: 100px;
    min-width: 100px;
    flex: 1;
    margin: 12px;
    font-size: 12px;
}

.value-mapping-title {
    display: flex;
    height: 48px;
    align-items: center;
    margin-bottom: 20px;
}

.value-mapping-fields-container .value-mapping-fields {
    display: flex;
}

.value-mapping-fields__side {
    width: 300px;
    padding-left: 12px;
    box-sizing: border-box;
}

.value-mapping-fields__side > div {
    margin: 10px 0;
}

.value-mapping-fields__side > div:first-child {
    margin-top: 20px;
}

.close-button {
    margin-left: auto;
    padding-right: 10px;
    opacity: 0.5;
}

.save-cancel-actions {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.field-form-remove {
    opacity: 0.3;
}


.field-form-row {
    transition: opacity 0.5s, height 1s;
    height: 48px;
    display: flex;
    align-items: center;
}

.field-form-row--hide {
    opacity: 0;
    height: 0;
}

.field-form-remove:hover {
    opacity: 1;
}

.mapping-rows-table__body .mapping-field {
    color: #aaa;
}

.mapping-rows-table .mapping-fields .k3-field-type--string,
.mapping-rows-table .mapping-fields .k3-field-type--longtext {
    width: 200px;
    min-width: 200px;
}

.field-usage-mapping-rows .mapping-fields .k3-field-type--string,
.field-usage-mapping-rows .mapping-fields .k3-field-type--longtext {
    max-width: 300px;
}

.field-usage-mapping-rows .mapping-field {
    max-width: 200px;
}

.mapping-rows-table__body .mapping-row--editing .mapping-field {
    padding: 0;
    margin: 0 12px;
}

/*
.mapping-rows-table__body .mapping-row--editing .mapping-field {
    opacity: 0.6;
}
*/

.mapping-rows-table__body .mapping-row--editing .mapping-field--dirty {
    opacity: 1;
}

.mapping-rows-table__body .mapping-row--read-only .mapping-field {
    padding: 5px 0;
}

.mapping-rows-table__header  .mapping-field {
    margin: 0;
}

.new-value-mapping-container .mapping-rows-table__header {
    width: 600px;
}

.new-value-mapping-container .mapping-rows-table__header .mapping-field {
    padding-left: 14px;
}

.new-value-mapping__name {
    margin-bottom: 15px;
}

.new-value-mapping-container .value-mapping-fields__side {
    flex: 1;
    margin-left: 14px;
}

.value-mapping__fields {
    display: flex;
}

.value-mapping__fields--output .value-mapping__field:first-child {
    border-left: 1px solid #bbb;
    padding-left: 11px;
}

.mapping-rows-table__body .mapping-row--read-only .mapping-fields:hover {
    background-color: rgb(0,0,0,0.1);
}

.mapping-drilldown {
    padding: 2rem;
}

.mapping-drilldown .mapping-rows-table .mapping-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.mapping-drilldown .mapping-rows-table .mapping-fields {
    flex: 1;
}

.column-selection-dialog .feed-columns {
    padding: 0 24px 24px 12px;
}

.page-data-rec .k3-toolbar {
  height: 48px;
}

.feed-table,
.data-rec-results-table {
    font-size: 13px;
}

.feed-table .public_fixedDataTable_header,
.data-rec-results-table .public_fixedDataTable_header {
    line-height: 20px;
    background-image: none;
    background-color: #fff;
}

.feed-table .feed-actions {
    margin-left: auto;
}

.feed-table .public_fixedDataTable_header .public_fixedDataTableCell_main,
.data-rec-results-table .public_fixedDataTable_header .public_fixedDataTableCell_main {
    font-weight: 400;
    font-size: 12px;
}

.feed-table .public_fixedDataTable_header .public_fixedDataTableCell_main.feed-column--raw {
    background-image: linear-gradient(#EDE7F6, #EDE7F6);
    color: #311B92;
}

.feed-table .public_fixedDataTable_header .public_fixedDataTableCell_main.feed-column--super-header,
.feed-table .public_fixedDataTable_header .public_fixedDataTableCell_main.feed-column--select-checkbox,
.feed-table .public_fixedDataTable_header .public_fixedDataTableCell_main.feed-column--trade-status {
    background-image: none;
    background-color: #fff;
    border: none;
}

.feed-table .public_fixedDataTable_header .public_fixedDataTableCell_main.feed-column--rules-applied,
.data-rec-results-table .public_fixedDataTable_header .public_fixedDataTableCell_main.feed-column--rules-applied {
    background-image: linear-gradient(#E1F5FE, #E1F5FE);
    color: #01579B;
}

.public_fixedDataTable_header {
    background-image: linear-gradient(#E1F5FE, #E1F5FE);
    color: #01579B;
}

.feed-table .public_fixedDataTableCell_cellContent,
.data-rec-results-table .public_fixedDataTableCell_cellContent {
    padding: 4px 6px;
}

.data-rec-results-table .public_fixedDataTableRow_highlighted,
.data-rec-results-table .public_fixedDataTableRow_highlighted .public_fixedDataTableCell_main {
    background-color: #fff;
}

.feed-value--null,
.feed-value--empty-string,
.mapping-value--null,
.mapping-value--empty-string,
.data-rec-value--null,
.data-rec-value--missing {
    opacity: 0.3;
}

.feed-value--null:after,
.mapping-value--null:after,
.data-rec-value--null:after {
    content: '(null)';
}

.feed-value--empty-string:after,
.mapping-value--empty-string:after {
    content: '(empty)';
}

.data-rec-value--missing:after {
  content: '(missing)'
}

.feed-summary {
    font-size: 13px;
}

.feed-summary--live,
.feed-summary--paused {
    min-width: 90px;
}

.customize-fields.hyperlink {
    padding: 0;
    font-size: 12px;
    opacity: 0.6;
    transition: all 0.3s;
}

.customize-fields.hyperlink:hover {
    opacity: 1;
}

.feed-footer {
    height: 48px;
    display: flex;
    align-items: center;
}

.rule-details {
    color: #666;
}

.rule-details .rule-details__clause {
    display: flex;
    margin-bottom: 10px;
}

.rule-details__clause__title {
    width: 40px;
    font-size: 12px;
    opacity: 0.5;
    text-align: right;
    padding-right: 20px;
}

.rule-details__clause__value {
    width: auto;
    font-size: 11px;
    position: relative;
}

.rule-details__clause__value::before {
    content: "";
    position: absolute;
    top: -4px;
    bottom: 4px;
    left: -8px;
    border-left: 1px solid #ddd;
}

.rule-details__clause__value > div {
    margin-bottom: 5px;
}

.rule-details__clause__value code {
    font-size: 12px;
    position: relative;
    top: -1px;
}

.rule-details__condition {
    position: relative;
}

.rule-details__condition__op {
    position: absolute;
    top: 1px;
    font-size: 10px;
    left: -50px;
    width: 30px;
    text-align: right;
    opacity: 0.5;
}

.rule-details__action .op {
    margin: 0 5px;
    line-height: 1;
}

.rule-details__action--drop {
    margin-left: 7px;
}

.rule-details__clause--then .rule-details__clause__value .delimiter,
.rule-details__clause--else .rule-details__clause__value .delimiter {
    margin: 0 5px 0 0;
}

.rule-details__clause--when .rule-details__clause__value:empty:after {
    content: "(always)";
    color: #ccc;
    display: block;
    line-height: 15px;
    margin-left: 7px;
    margin-bottom: 5px;
}

.rule-details__clause--then .rule-details__clause__value:empty:after,
.rule-details__clause--else .rule-details__clause__value:empty:after {
    content: "(do nothing)";
    color: #ccc;
    display: block;
    line-height: 15px;
    margin-left: 7px;
    margin-bottom: 5px;
}

.rule-form .rule-form__clause {
    position: relative;
    margin-top: 20px;
    margin-left: 24px;
    /*margin: 20px;*/
}

.rule-form:hover {
    /*background-color: #ddd;*/
}

.rule-form .rule__row {
    height: 48px;
    margin-left: 60px;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.rule-form .rule__row--empty-condition {
    margin-left: 80px;
}

.rule-form .rule__action {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.rule-form__clause__title {
    position: absolute;
    color: #666;
    font-size: 12px;
    top: 0;
    left: 0;
    line-height: 48px;
    opacity: 0.4;
    transition: 0.4s opacity;
}

.rule-form__clause--focused .rule-form__clause__title {
    opacity: 0.7;
}

.rule-form__clause__value {
    width: auto;
}

.rule-form .drag-handle {
    position: absolute;
    width: 20px;
    height: 48px;
    left: -30px;
    cursor: pointer;
}

.rule-form .drag-handle::after {
    position: absolute;
    width: 2px;
    top: 0;
    left: 50%;
    height: 100%;
    background-color: #ddd;
    content: "";
    transition: 0.4s background;
}

.rule-form .drag-handle:hover::after {
    width: 4px;
}

.rule-form .rule__row + .rule__row--new {
    opacity: 0;
    transition: 0.1s;
}

.rule-form .rule-form__clause--focused .rule__row--new,
.rule-form .rule-form__clause:hover .rule__row--new {
    opacity: 1;
}

.rule-form .rule__row--new .drag-handle::after  {
    background-color: transparent;
}

.rule-form .rule-form__clause--focused .drag-handle::after  {
    background-color: #bbb;
}

.rule-form .rule__row--new .drag-handle {
    cursor: default;
}

.rule-form .rule__row--new .drag-handle::after {
    width: 2px;
}

.rule-form .rule-icon,
.db-column__default-row .blueprint-icon {
    opacity: 0;
    transition: all 0.3s;
}

.rule-form .rule__row:hover .rule-icon,
.db-column__default-row:hover .blueprint-icon {
    opacity: 0.15;
}

.rule-form .rule__row:hover .rule-icon:hover,
.db-column__default-row .blueprint-icon:hover {
    opacity: 1;
}

.users-table .user__actions > *,
.groups-table .group__actions > * {
    margin-right: 10px;
}

.group-role--dirty,
.group-link-system--dirty,
.user-group--dirty {
    background-color: rgb(245, 245, 245);
}

.group-role--error,
.group-link-system--error,
.user-group--error {
    background-color: rgb(255, 205, 210);
}

.user__password {
    font-family: Roboto Mono;
    font-size: 13px;
    color: black;
}

.feed-filter-forms {
    display: flex;
    padding: 0 10px;
}

.feed-filter-form {
    margin-left: 20px;
}

.feed-filter-form--search-text {
    margin-left: 0;
}

.feed-filter-chips {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30px;
}

.feed-filter-chip {
    margin-left: 5px;
    margin-bottom: 5px;
}

.feed-filter-chip:first-child {
    margin-left: 0;
}

.streaming {
    display: inline-block;
    width: 0.7em;
    border-radius: 100%;
    margin: 0 3px;
    background-color: darkred;
}

.feed-trade-status {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  display: inline-block;
  margin: 2px;
}

.feed-trade-status--success {
}

.feed-trade-status--in-progress {
    background-color: #FFF9C4;
}

.feed-trade-status--failed {
    background-color: #FFCDD2;
    cursor: pointer;
}

.feed-trade-status--dropped {
    background-color: #BDBDBD;
    cursor: pointer;
}

.feed-trade-status--pending {
    background-color: #FFE0B2;
}

.streaming:after {
    display: block;
    content: "";
    padding-top: 100%;
}

@keyframes pulse{
    0%{
        box-shadow: 0px 0px 5px 0px rgba(173,0,0,.3);
    }
    65%{
        box-shadow: 0px 0px 5px 5px rgba(173,0,0,.3);
    }
    90%{
        box-shadow: 0px 0px 5px 5px rgba(173,0,0,0);
    }
}

.streaming--active {
    background-color: #d00;
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* loading screen */
.centered-spinner {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 64px);
}

.feed-table .centered-spinner {
    min-height: calc(100vh - 300px);
}

/* route builder */

.route-builder-title {
    display: inline-block;
}

.legacy-config-text {
    display: flex;
    margin-left: auto;
    font-size: 13px;
}

.hyperlink.config-link {
    margin-left: 5px;
    text-decoration: none;
    margin-right: 8px;
}

.arrow-back {
    display: inline-block;
    height: 48px;
    margin-bottom: 10px;
}

.adaptors-container {
    display: flex;
    overflow: hidden;
    height: calc(100vh - 64px);
}

.adaptors {
    flex: 1;
    transition: flex-basis 1s;
    overflow-y: scroll;
}

.adaptor {
    border: 1px solid transparent;
    transition: all 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.adaptors__title {
    padding: 10px 56px;
    font-size: 20px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.adaptors-dialog .adaptors__title {
    padding: 10px 56px;
}

.adaptors--source .adaptors__title {
    background-color: #EDE7F6;
}

.adaptors--target .adaptors__title {
    background-color: #E1F5FE;
}

.adaptor-pair-container {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 30px, rgba(0, 0, 0, 0.23) 0px 6px 10px;
    position: sticky;
    top: 64px;
    z-index: 2;
}

.adaptor-pair {
    display: flex;
    align-items: center;
}

.adaptor-pair .adaptor {
    margin: 0;
    box-sizing: border-box;
    border-bottom: 2px solid transparent;
}

.adaptor-pair .adaptor__name,
.adaptor-pair .adaptor__description {
    color: rgb(158, 158, 158);
    transition: all 0.3s;
}

.adaptor-pair .adaptor--focused .adaptor__name,
.adaptor-pair .adaptor:hover .adaptor__name {
    color: black;
}

.adaptor-pair .adaptor--focused {
    border-bottom: 2px solid rgb(33, 150, 243);
}

.adaptor-pair .adaptor {
    margin: 0;
}

.adaptor--unknown .adaptor__name:after {
    content: 'Unknown';
}

.adaptor--unknown .adaptor__description:after {
    content: 'Adaptor not recognized';
}

.adaptor--unselected {
    opacity: 0.3;
}

.adaptor--enabled:hover,
.adaptor--selected {
    border: 1px solid #dadada;
}

.adaptor--enabled.adaptor--source:hover,
.adaptor--selected.adaptor--source {
    background-color: rgba(237, 231, 246, 0.3);
}

.adaptor--enabled.adaptor--target:hover,
.adaptor--selected.adaptor--target {
    background-color: rgba(225, 245, 254, 0.3);
}

.adaptor--disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.adaptor__name {
    color: rgb(66, 66, 66);
    font-weight: 500;
    font-size: 15px;
    font-family: Roboto, sans-serif;
}

.blueprint-component .adaptor__name {
    padding: 10px 24px;
    position: sticky;
    top: 0px;
    z-index: 1;
    background-color: rgb(225, 225, 225);
}

.blueprint-component__body {
    padding: 0 56px 20px 56px;
}

.blueprint-component .adaptor__name {
    margin-bottom: 10px;
}

.adaptor__description {
    font-size: 12px;
    color: rgb(66, 66, 66, 0.6);
}

.new-route-stepper {
    margin-right: auto;
    margin-left: 10px;
    padding: 0;
    font-size: 15px;
}

.new-route-stepper a {
    display: inline-block;
    padding: 0;
    font-size: 13px;
}

/* field chip */

.field-chip-wrapper > svg {
    width: 16px !important;
    height: 16px !important;
    margin-top: 2px !important;
    margin-left: auto !important;
}

.field-chip-wrapper > span {
    padding-left: 0 !important;
}

.field-chip-field-type {
    padding: 3px 0;
    position: absolute;
    left: 190px;
    top: -4px;
}

.field-chip-with-type-choice {
    top: 2px;
    left: 190px;
}


.field-chip-with-type-choice button {
    top: 0 !important;
    left: 25px !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
}

.field-chip-with-type-choice svg {
    width: 20px !important;
    height: 20px !important;
}

.page-reporting .routes-selector {
    padding-top: 20px;
}

.page-reporting .routes-selector .route-choice {
    border-bottom: 1px solid rgb(224, 224, 224);
    padding: 10px 20px;
}

.page-reporting .routes-selector .routes-selector__title {
    padding-left: 60px;
}

.page-reporting .routes-selector .download-sql,
.page-reporting .routes-selector .download-tds {
    padding: 10px 0 0 8px;
}

.page-audit table.unindented-table {
    border-collapse: separate;
    margin-bottom: 20px;
}

.page-audit table.field-set-mapping tr td.mapping__name {
    font-weight: bold;
}

.page-audit .rule-details__name,
.page-audit .value-mapping__name,
.page-audit .group-members__group-name {
    margin-bottom: 10px;
}

.page-audit .mapping__name,
.page-audit .rule__name {
    font-weight: bold;
}

.page-audit table.group {
    margin-bottom: 30px;
}

.page-audit .audit-old {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(224, 224, 224);
}

.page-audit .rule--moved,
.page-audit .group__name,
.page-audit .group__link-system,
.page-audit .group__role,
.page-audit .user__login {
    font-weight: bold;
}

.page-audit .group__name {
    margin-bottom: 20px;
}

.page-audit .group-members:empty:after {
    content: 'No Users';
    color: #bbb;
}

.page-audit .group-link-systems:empty:after {
    content: 'No Routes';
    color: #bbb;
}

.page-audit .group-roles:empty:after {
    content: 'No Group Roles';
    color: #bbb;
}

.page-audit .audit-row__body {
    padding-bottom: 20px;
}

.page-audit .k3-toolbar {
    align-items: flex-start;
}

.page-audit .k3-toolbar .actions-container {
    display: flex;
    margin-left: 30px;
}

.page-audit .k3-toolbar .actions-container > div {
    margin-left: 10px;
}

.page-audit .k3-toolbar .date-range,
.page-audit .k3-toolbar .page-links {
    margin-left: 10px;
    margin-top: 16px;
    font-size: 13px;
}

.page-audit .k3-toolbar .page-links {
    display: flex;
}

.page-audit .k3-toolbar .page-links .hyperlink {
    border-left: 1px solid black;
    padding-left: 5px;
    padding-right: 5px;
}

.page-audit .k3-toolbar .page-links .hyperlink:first-child {
    border-left: none;
}

.page-audit .k3-toolbar .page-links .hyperlink--selected {
    pointer-events: none;
    text-decoration: none;
    color: black;
}

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #666;
}

.empty-state--fields {
    padding: 50px;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-center {
    display: flex;
    align-items: center;
}

.flex-end {
  display: flex;
  align-items: flex-end;
}

.flex-column {
    flex-direction: column;
}

.db-column {
    font-size: 12px;
}

.db-column > div {
    margin-right: 10px;
}

.db-column__name {
    width: 100px;
}

.db-column__name--index {
    font-weight: 1000;
}

.db-column__k3-type {
    min-width: 60px;
}

.db-column__default-value input {
    font-size: 12px !important;
}

.db-spec-container,
.db-query-container,
.csv-container,
.input-url-container,
.json-container,
.xml-container,
.snowflake-table-container,
.http-container {
    font-size: 12px;
    line-height: 1.5;
}

.db-primary-button,
.file-url-primary-button {
    padding-top: 20px;
}

.db-primary-button--statement {
    padding: 10px 0;
}

.db-column-defaults-container {
    font-size: 12px;
}

.db-spec__input {
    padding-bottom: 10px;
}

.db-query-container pre.sql-query--read-only {
    margin: 0;
    font-family: Roboto Mono;
    border-bottom: 1px solid #dadada;
    white-space: no-wrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
}

.sql-query__start-values table {
    border-spacing: 0;
}

.statement-builder__title,
.snowflake-table-autocomplete {
  padding: 10px 24px;
}

.statement-builder__help-text,
.db-query-test-results__title {
    font-size: 14px;
}

.test-credentials-button .test-credentials-message {
    margin-top: 10px;
}

.db-column__value {
    width: 100px;
}

td.db-column__value {
    width: auto;
    padding-left: 10px;
}

.db-column__values .db-column_value {
    margin-right: 10px;
}

.db-column__values-row {
    line-height: 1.5;
}

.database-query-summary {
    display: flex;
    align-items: center;
}

.database-query-summary div {
    margin-right: 10px;
}

.custom-sql-test-results {
    padding-top: 20px;
}

.blueprint-read-only-wrapper {
    margin-top: 10px;
    border-top: 1px solid black;
}

.blueprint-count-can-vary-row__content {
    flex: 1;
    margin-left: -48px;
    margin-right: -48px;
}

.blueprint-count-can-vary-row__content.fixed {
    margin-left: 0;
}

.db-statements .blueprint-count-can-vary-row__content {
    flex: 1;
    min-width: 0;
}

.jsonpath-panels,
.xpath-panels,
.sample-data-panels {
    display: flex;
}

.jsonpath-panel,
.xpath-panel,
.sample-data-panel {
    flex: 1;
}

.sample-data-panel #drop-area,
.xpath-panel.xpath-fields,
.jsonpath-panel.jsonpath-fields {
    margin: 0 20px;
}

.jsonpath-panel .json-sample,
.xpath-panel .xml-sample {
    margin: 0 20px;
}

.xpath-panel .xml-sample {
    margin-top: 1px;
}

.expandable,
.collapsible {
    color: rgb(0, 0, 238);
    cursor: pointer;
    position: absolute;
    left: -18px;
    z-index: 1;
    opacity: 0.5;
    transition: 0.3s;
}

.expandable:hover,
.collapsible:hover {
    opacity: 1;
}

.expandable:after {
    content: '[+]'
}

.collapsible:after {
    content: '[-]'
}

.detail-option-container,
.csv-separator-option-container {
    padding-bottom: 15px;
}

.detail-option,
.csv-separator-option {
    font-size: 12px;
    width: 256px;
}

.query-from {
    font-size: 13px;
    padding: 0 0 10px 30px;
    color: black;
}

.width-fit-content {
    width: fit-content;
    width: -moz-fit-content;
}

.stepper > div > div:nth-child(even) {
    width: 50px;
}

.jsonpath-candidate,
.xpath-candidate {
    cursor: pointer;
    margin-bottom: 1px;
    outline: 1px solid #ccc;
}

.xpath-candidate {
    display: inline-block;
}

.xpath-attr {
    margin-right: 5px;
}

.xpath-attr:last-child {
    margin-right: 0;
}

.jsonpath-candidate:hover,
.xpath-candidate:hover {
    background-color: #eee;
}

.jsonpath-fields .blueprint-count-can-vary-row__content,
.xpath-fields .blueprint-count-can-vary-row__content {
    margin-left: 0;
}

.jsonpath-fields .blueprint-count-can-vary-row .delete-icon,
.xpath-fields .blueprint-count-can-vary-row .delete-icon {
    right: 0;
}

.jsonpath-fields .blueprint-count-can-vary-row div,
.xpath-fields .blueprint-count-can-vary-row div {
    display: flex;
    margin-right: 5px;
}

.jsonpath-fields .blueprint-count-can-vary-row__content,
.xpath-fields .blueprint-count-can-vary-row__content {
    flex: none;
}

.jsonpath-fields .blueprint-count-can-vary-row .blueprint-instance input,
.xpath-fields .blueprint-count-can-vary-row .blueprint-instance input {
    width: 200px !important;
}

.csv-fields {
    margin: 0 20px;
}

.csv-field__name input {
    width: 180px !important;
}

.csv-field__type {
    margin-left: 20px;
}

.csv-field__value {
    margin-right: 5px;
    font-size: 10px;
    width: 100px;
}

.db-columns {
    margin: 0 30px;
}

#drop-area {
    border: 2px dashed #ccc;
    border-radius: 10px;
    font-family: sans-serif;
    padding: 10px 20px 0 10px;
}

#drop-area.highlight {
    border-color: purple;
}

.repush-job-row tr:first-child > td {
  border-top: 5px solid transparent;
}

.route-merge-stepper div {
  overflow: visible !important;
}

.route-merge-stepper .test-query .ellipsis {
  overflow: hidden !important;
}

.route-merge-stepper .test-query {
  height: 400px;
  overflow-y: scroll !important;
}

.route-merge__field .route-merge__field-emit {
  opacity: 0.2;
  transition: 0.3s;
}

.route-merge__field .route-merge__field-emit:hover {
  opacity: 1;
}

.ellipsis.route-merge__join-field-header {
  padding: 0 !important;
  width: 150px !important;
  overflow: hidden !important;
  line-height: 24px !important;
  margin-bottom: -5px;
  margin-right: 15px;
}

.form-row .hoverable-action {
  opacity: 0;
  transition: all .3s;
}

.user__actions .hoverable-action {
  opacity: 0.4;
  transition: all .3s;
}

.user__actions .hoverable-action--secondary {
  opacity: 0;
}

.user__actions:hover .hoverable-action {
  opacity: 0.4;
}

.user__actions .hoverable-action:hover {
  opacity: 1;
}

.sso-identities .form-row .hoverable-action {
  opacity: 0.3;
}

.template-builder .form-row .hoverable-action {
  opacity: 0.2;
  transition: all .3s;
}

.form-row:hover .hoverable-action {
  opacity: 1;
}

.card-radio-buttons {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.card-radio-button {
  width: 400px;
  margin: 10px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}

.card-radio-button--selected {
  box-shadow: 0 0 2px 2px rgb(67, 189, 169);
}

.card-radio-button__title {
  font-size: 14px;
  font-weight: 500;
}

.card-radio-button--selected .card-radio-button__title {
  font-weight: 600;
}

.card-radio-button:hover {
  cursor: pointer;
}

.background-white {
  background-color: #fff;
}

.background-soft-white {
  background-color: #f8f8f8
}

.http-dialog > div {
  background-color: #f8f8f8 !important;
}

.cm-curl-warning,
.cm-curl-warning > * {
  color: orange;
}

.cm-curl-error,
.cm-curl-error > * {
  font-weight: 700;
  color: red;
}

.cm-curl-ignored,
.cm-curl-ignored > * {
  color: purple;
}

.cm-http-template,
.cm-http-template > * {
  font-weight: 700;
  color: teal;
}

.curl-editor .cm-editor {
  height: 346px;
}

.cm-scroller {
  overflow: auto;
}

.template-inline .cm-editor  {
  width: 625px;
}

.http-template .cm-editor {
  height: 302px;
  border-right: 1px solid #ccc;
}

.http-body .cm-editor {
  height: 300px;
}

.sql-query-editor .cm-editor {
  height: 500px;
  width: 500px;
  border-right: 1px solid #ccc;
}

.sql-rs-column--templateable {
  outline: 1px solid #ccc;
  cursor: pointer;
}

.sql-rs-column--templateable:hover {
  background-color: #eee !important;
}

.sql-rs-column--disabled {
  opacity: 0.7;
}

.edit-sql-template-link {
  opacity: 0.5;
  transition: .2s;
}

.edit-sql-template-link:hover {
  opacity: 1;
}

.hover-30 {
  opacity: 0.3;
  transition: .2s;
}

.hover-50 {
  opacity: 0.5;
  transition: .2s;
}

.hover-50:hover,
.hover-30:hover {
  opacity: 1;
  cursor: pointer;
}

.selected-template .cm-editor,
.template-context {
  height: 450px;
}

.cm-templatable {
  margin-left: 5px;
  cursor: pointer;
  color: blue;
}

.template-context__header > div,
.template-context__row > div,
.spaced-row > div {
  margin-right: 10px;
}

.template-context__header > div:last-child,
.template-context__row > div:last-child,
.template-context__header > div:first-child,
.template-context__row > div:first-child,
.spaced-row > div:last-child {
  margin-right: 0;
}