console/react/src/App.css

/*
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you 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.
*/

#root {
  height: 100vh;
}
.pf-c-check__input {
  --pf-c-check__input--MarginTop: 0.5em;
}

.App {
  text-align: center;
  height: 100%;
}

.pf-c-avatar {
  --pf-c-avatar--Width: initial !important;
}

.topo-middle {
  margin: auto;
}

.topo-name {
  padding-top: 30px;
  padding-bottom: 30px;
}

.force-graph {
  min-height: 480px;
  height: 800px;
}

.node.interior path {
  fill: green;
  stroke-width: 1;
  stroke: green;
}

.node circle {
  fill: #fff;
  stroke: #000;
  stroke-width: 2px;
}

.node.selected circle,
.node.edgeClass.selected circle {
  stroke-width: 4px;
  stroke: green;
  fill: #eaeaea;
}

.node text {
  fill: #000;
  stroke: none;
  font-size: 0.8em;
}

g.over line {
  stroke: #000;
  stroke-width: 4;
}

g.selected line {
  stroke: green;
  stroke-width: 4;
}

.link {
  stroke: #000;
}
.link.dropped {
  stroke: #888888;
  opacity: 0.25;
}
.topology-header path.link {
  stroke: #fff;
}
.topology-header ul.context-menu.layout-dropdown {
  right: 0;
}

#topologyPage,
#messageFlowPage {
  padding: 0;
}

#topologyPage .pf-l-stack__item,
#messageFlowPage .pf-l-stack__item {
  /* border-bottom: 1px solid #aaa; */
}

#pf-topology-view-2 {
  padding-bottom: 0;
}

.pf-topology-container__with-sidebar {
  overflow-y: hidden;
}

.node.client rect {
  stroke: black;
  fill: white;
}

.node.edgeClass circle {
  stroke: black;
  fill: white;
  stroke-width: 2;
  stroke-dasharray: 4;
}

.tag-line {
  font-size: 0.8em;
  color: #888888;
}

.deployment-donut.table-cell button {
  padding-top: 0;
  padding-bottom: 0;
}

.deployment-donut.table-cell .scaling-controls {
  font-size: 14px;
}

.address-table-container {
  width: 31em;
}

.no-addresses {
  margin-top: 1em;
}

.form-sub-group {
  margin-left: 3em;
}

.sm-input {
  width: 6em !important;
}

.incdec-label {
  padding-left: 1em;
}

.incdec-label.disabled {
  color: #555555;
}

.messages-receivers {
  display: none !important;
}

.topology-header line {
  stroke: white;
}

.network-name {
  width: 48em;
  margin: auto !important;
}

.not-editing-cancel {
  display: none !important;
}

.not-editing {
  border: 0 0 1px 0 !important;
}

path.cloud-outline {
  stroke-width: 3px;
  stroke: #ccc;
  fill: white;
}
.cluster.selected path.cloud-outline {
  stroke-width: 4px;
  stroke: #cfc;
  fill: #fcfcfc;
}

.network-toolbar {
  padding-bottom: 1em;
  border-bottom: 1px solid #cccccc;
}

.context-form {
  text-align: left;
  min-width: 34em;
  padding-left: 2em;
  margin-right: 0;
  border-left: 1px solid lightgray;
}

.context-form .pf-c-form__group.pf-m-action {
  margin-top: 0;
}

.enter-prompt {
  padding-top: 0.25em;
}

table.edge-table td[data-label="State"] svg {
  position: relative;
  top: 10px;
}

.edge-table-actions {
  position: absolute;
  right: 1em;
}

.empty-selection {
  max-width: 30em;
}

.link-label {
  margin-left: 1em;
  font-weight: bold;
}

.logo-text {
  text-decoration: none;
  color: white;
  font-weight: bold;
  letter-spacing: 0.2em;
  font-size: 18px;
}

.state-copy input {
  display: none;
}

.state-copy {
  display: inline-block;
}
.state-container svg {
  position: relative;
  top: 0.5em;
}

.state-placeholder {
  width: 16px;
  height: 24px;
  display: inline-block;
}

.state-text {
  display: inline-block;
}

div.state-container button.pf-c-clipboard-copy__group-copy {
  display: inline-block;
  padding: 0;
  margin: 0;
  position: relative;
  top: -0.5em;
}

.pf-c-clipboard-copy__group input {
  border: 0;
}

.pf-c-clipboard-copy {
  --pf-c-clipboard-copy__group-copy--PaddingRight: 0;
  --pf-c-clipboard-copy__group-copy--PaddingLeft: 0;
  --pf-c-clipboard-copy__group-copy--BorderWidth: 0;
}

.over-alert {
  position: absolute;
  width: 95%;
  z-index: 1;
}

.force-right {
  position: absolute;
  right: 1em;
}

.connect-modal {
  width: 40em !important;
  position: absolute !important;
  right: 0;
  top: 4.5em;
  padding: 2em;
  background-color: #fafafa;
  border: 1px solid #d1d1d1;
  box-shadow: 0 6px 12px rgba(3, 3, 3, 0.175);
  z-index: 2;
}

.connect-modal * {
  color: black !important;
}

.connect-modal .pf-m-primary {
  background-color: #06c !important;
  color: white !important;
}

.qdr-sidebar {
  text-align: left;
  height: 100vh;
}

.connect-page {
  background-image: url(assets/images/pfbg_1200.jpg);
  background-size: cover;
}

.connect-page * {
  color: white;
}

.connect-page p {
  margin-top: 4em;
}
.left-content {
  width: 60%;
  padding: 6em;
  text-align: left;
}

.console-banner {
  text-transform: uppercase;
  letter-spacing: 0.3em;
}

.pf-c-content h2.connect-description {
  font-size: 16px;
  margin-top: 2em;
  margin-bottom: 0;
  padding: 0;
}

.overview-title::first-letter {
  text-transform: uppercase;
}

.overview-charts-page {
  background-color: #eaeaea !important;
  padding: 1.5em;
}

.overview-table {
  height: 100%;
  background-color: #eaeaea;
}
.overview-table .pf-c-card__body {
  padding-left: 1em;
}
.overview-table-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.overview-header {
  padding: 2em;
  text-align: left;
  border-bottom: 1px solid #eaeaea;
}
.overview-header.details {
  padding: 1em 2em;
}
.overview-header.details .pf-c-breadcrumb__item {
  font-size: 1.125em;
  margin-bottom: 1em;
}

/*
#delayedDeliveries {
  width: 80%;
}
*/
#activeAddresses {
  min-width: 28%;
}

.qdrTopology,
.qdrChord {
  width: 100%;
  height: 100%;
  background-color: white;
}
.qdrTopology dl.pf-c-accordion,
.qdrChord dl.pf-c-accordion {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 1em;
}

.qdrTopology dl.pf-c-accordion *,
.qdrChord dl.pf-c-accordion * {
  border-left-color: transparent;
}

.qdrTopology dl.pf-c-accordion dt,
.qdrChord dl.pf-c-accordion dt {
  background-image: linear-gradient(to bottom, #fafafa 0, #ededed 100%);
  background-repeat: repeat-x;
}

.qdrTopology dl.pf-c-accordion h3,
.qdrChord dl.pf-c-accordion h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.pf-c-page {
  background-color: white !important;
}
.topology-header {
  background-color: #0e0e0e;
}

g text {
  pointer-events: none;
}

svg.address-svg g text {
  cursor: pointer;
  pointer-events: auto;
}

/*not all SVGs are charts*/
svg:not([role="img"]) {
  background-color: transparent;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
/*not all SVGs are charts*/
svg:not(.active):not(.ctrl):not([role="img"]) {
  cursor: crosshair;
}

svg.address-svg {
  cursor: pointer;
}
svg.address-svg {
  margin-left: 1.5em;
}
.qdrChord svg.address-svg {
  margin-left: 0;
}

path.link.selected:not(.traffic) {
  /* stroke-dasharray: 10,2; */
  stroke: #33f !important;
}

path.link {
  fill: #000;
  /* stroke: #000; */
  stroke-width: 2.5px;
  cursor: default;
}

path.link.unknown {
  stroke-dasharray: 4 3;
  stroke: #888888;
}
path:not(.traffic) {
  stroke: #000;
}
svg:not(.active):not(.ctrl) path.link {
  cursor: pointer;
}

path.hittarget {
  stroke-width: 15px;
  stroke: transparent;
}
path.hittarget.highlighted {
  stroke: #6f6;
  opacity: 0.5;
}

path.link.small {
  stroke-width: 2.5;
}
path.link.small:not(.traffic) {
  stroke: #000;
}
path.link.highlighted:not(.traffic) {
  stroke: #6f6 !important;
}
marker {
  fill: #000;
  stroke-width: 0;
}
path.link.dragline {
  pointer-events: none;
}

path.link.hidden {
  stroke-width: 0;
}

circle.node {
  stroke-width: 1.5px;
  cursor: pointer;
  stroke: darkgray;
}

circle.node.reflexive {
  stroke: #f00 !important;
  stroke-width: 2.5px;
}
circle.node.selected {
  stroke: #6f6 !important;
  stroke-width: 2px;
}
circle.node.highlighted {
  stroke: #6f6;
}
circle.node.inter-router {
  fill: #eaeaea;
}
circle.node.normal.in {
  fill: #f0f000;
}
circle.node.normal.out {
  fill: #c0f0c0;
}
circle.node.edge {
  fill: #efefff;
}
circle.node.on-demand {
  fill: #c0ffc0;
}
circle.node.on-demand.artemis {
  fill: #fcc;
  /*opacity: 0.2; */
}
circle.node.normal.console {
  fill: lightcyan;
}
circle.node.artemis {
  fill: lightgreen;
}
circle.node.route-container {
  fill: orange;
}
circle.node.edge.multiple {
  fill: #e0e0ff;
}
circle.node.dropped,
circle.node.normal.in.dropped,
circle.node.normal.out.dropped {
  fill: #f0f0f0;
  stroke: #dddddd;
  stroke-dasharray: 5 5;
}
circle.node.inter-router.dropped {
  fill: #f0f0f0;
}

circle.node.dropped + text {
  stroke: #dddddd;
}
text.console,
text.on-demand,
text.normal,
text.address-checkbox {
  font-family: FontAwesome !important;
  font-weight: normal;
  font-size: 16px;
}

text.address-checkbox {
  fill: white;
  cursor: pointer;
}
text.id {
  text-anchor: middle;
  font-weight: bold;
}

text.label {
  text-anchor: middle;
  font-weight: bold;
}

text.label.long {
  text-anchor: start;
}

@font-face {
  font-family: "Brokers";
  src: url("./assets/brokers.ttf"); /* TTF file for CSS3 browsers */
}

text.artemis {
  font-family: Brokers;
  font-size: 20px;
  font-weight: bold;
}

text.qpid-cpp {
  font-family: Brokers;
  font-size: 18px;
  font-weight: bold;
}

svg#svglegend {
  max-width: 280px;
}
#svglegend text.label {
  text-anchor: start;
  font-weight: normal;
}
#legend-expand,
#traffic-expand,
#map-expand,
#arrows-expand {
  max-height: 23em;
}

#arrows-expand {
  padding-bottom: 1em;
}
div.qdrTopology,
div.qdrChord {
  text-align: center;
}

#traffic-congestion-svg text {
  text-anchor: start;
}
#arrows-expand label,
#traffic-dots label,
#traffic-congestion label,
#options-expand label,
#map-expand label {
  position: relative;
  top: 4px;
  padding-left: 0.25em;
}

#map-expand .map-legend {
  margin-left: 1.5em;
  margin-top: 0.5em;
}
#arrows-expand .pf-c-check {
  padding-top: 0.5em;
}
.map-legend label {
  padding-left: 1em;
}

#traffic-address .pf-c-check {
  padding-bottom: 0.5em;
}

.popup-info table.popupTable td {
  font-size: 14px;
}

circle.flow {
  pointer-events: none;
}
/* for message flow chord diagram */
path.chord {
  fill-opacity: 0.67;
}
#circle circle {
  fill: none;
  pointer-events: all;
}
path.fade {
  opacity: 0.1;
}

.routers rect {
  fill: white;
}

g.arc text {
  fill: black;
  stroke-width: 0;
}

path.empty {
  fill: rgb(31, 119, 180);
  fill-opacity: 0.67;
}

.addresses .btn {
  padding: 0px 4px !important;
  background-image: none;
  box-shadow: 0 0 0;
  border-color: black;
}

.topology-toolbar-item .pf-c-popover__content > button,
.topology-toolbar-item .pf-c-popover__content .pf-c-title.pf-m-xl {
  display: none;
}

.topology-toolbar-item .pf-c-popover__content {
  padding: 2em 2em 0.5em;
}
.qdrPopup {
  position: absolute;
  z-index: 200;
  border-radius: 4px;
  border: 1px solid gray;
  background-color: white;
  color: black;
  opacity: 1;
  padding: 12px;
  font-size: 14px;
  display: none;
}

#popover-div {
  position: fixed;
  z-index: 200;
  border-radius: 4px;
  border: 1px solid gray;
  background-color: white;
  color: black;
  opacity: 1;
  padding: 12px;
  font-size: 16px;
  box-shadow: var(--pf-global--BoxShadow--md);
}

#popover-div h5 {
  background-color: #eaeaea;
  padding: 0.25em 0.125em;
}

table.popupTable td {
  padding-right: 5px;
  font-size: 10px;
}

table.popupTable tr.header {
  font-weight: bold;
}
#chord {
  height: 100%;
}

#chord text {
  pointer-events: all;
}

#noTraffic {
  position: relative;
  top: 3em;
}

.page-menu {
  position: absolute;
  right: 1em;
  top: 1em;
  left: auto;
  width: auto;
}

ul.pf-c-nav__list * {
  text-align: left;
}

@media (max-width: 768px) {
  .navbar-collapse.page-menu {
    left: 0;
    top: 0;
    right: auto;
  }
}

.navbar-collapse {
  padding-right: 0;
}

.panel-group {
  margin-bottom: 0;
}

span.legend-color {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 0.5em;
}

span.legend-router {
  white-space: nowrap;
  position: relative;
  top: -5px;
}

div.qdrChord .legend-text {
  color: black;
  font-size: 16px;
}

.qdrChord .legend {
  position: absolute;
  right: 1em;
}
.legend ul {
  margin-bottom: 0;
}

.colored-dot {
  display: inline-block;
  margin-bottom: 4px;
}

.colored-dot span.colored-dot-dot {
  width: 24px;
  height: 24px;
  border: 1px solid black;
  border-radius: 12px;
  display: inline-block;
  color: white;
  padding-left: 4px;
  font-weight: bold;
}

/*
.colored-dot span.colored-dot-dot > span {
  padding-top: 5px;
}
*/

.colored-dot span.colored-dot-text {
  margin-left: 0.5em;
  color: black;
  font-size: 16px;
}

.qdrTopology .addresses .legend-line,
#traffic-congestion-svg {
  margin-left: 1.5em;
}

@media (min-width: 768px) {
  div.qdrTopology .pf-topology-side-bar.shown {
    width: calc(100% - 330px);
    max-width: 330px;
  }
  div.qdrTopology .pf-topology-container__with-sidebar .pf-topology-content {
    width: 100%;
    height: 100%;
    background-color: white;
  }
}

.diagram {
  width: 100%;
  position: absolute;
  top: 0;
  height: 100%;
}

.context-menu {
  position: fixed;
  background-color: white;
  border-top: 1px solid #888;
  border-left: 1px solid #888;
  border-right: 1px solid #888;
  text-align: left;
  box-shadow: rgba(3, 3, 3, 0.05) 0px 1px 1px 0px, rgba(3, 3, 3, 0.06) 0px 4px 8px 4px;
}

.context-menu.layout-dropdown li {
  color: black;
}

.context-menu .menu-item {
  padding: 0.25em 1em;
}
.context-menu .menu-item.separator {
  border-bottom: 1px solid #888;
}

.context-menu .menu-item:hover {
  background-color: #eaeaea;
  cursor: default;
}

.context-menu .menu-item.disabled {
  color: #777;
}

.context-menu .menu-item.disabled:hover {
  background-color: white;
}

.overview-charts-page .pf-c-card__header.pf-c-title {
  font-size: 22px;
}

.dashboard-header {
  display: flex;
}
.overview-charts-page div.time-period {
  font-size: 18px;
  color: #888;
  text-align: left;
}

.chart-container {
  display: flex;
}

.dashboard-chart {
  flex-grow: 1;
  padding: 1em 2em 1em 0;
}

.dashboard-stat {
  width: 10em;
  margin-top: auto;
  text-align: left;
  margin-right: 2em;
  padding: 1em 1em 1em 0;
}

.deliveries-stat {
  font-size: 30px;
}

.deliveries-title {
  /* white-space: nowrap; */
  font-size: 20px;
  color: #888;
  min-width: 9em;
}

.duration-tabs {
  margin-left: auto;
}

.duration-tabs li {
  font-weight: bold;
  padding-bottom: 0.25em;
}

.duration-tabs li.selected {
  border-bottom: 4px solid #0066cc;
  color: #0066cc;
}

.overview-charts-page .pf-c-table caption {
  border-bottom: 1px solid #eaeaea;
}
.overview-charts-page .pf-c-table caption .caption {
  display: inline-block;
  font-size: 22px;
  color: black;
}

.overview-charts-page .pf-c-table caption .updated {
  font-size: 18px;
  color: #888;
  white-space: nowrap;
  padding-right: 2em;
  max-width: 12em;
  min-width: 12em;
}

.toolbar-pagination {
  margin-left: auto;
}

.overview-table .pf-m-footer {
  padding-right: 2em;
}

/*force Patternfly v3 style for table Toolbar (flex, not box)*/
.table-toolbar {
  display: flex !important;
}

.table-toolbar .pf-l-toolbar__item {
  margin-right: 0 !important;
}

.overview-header .pf-c-content {
  display: flex;
}

.overview-loading {
  margin-left: auto;
  color: #999;
  border: 0;
  font-size: 14px;
  padding: 0;
  background-color: white;
  overflow: hidden;
}

.pf-c-button.pf-m-primary.link-button,
.overview-header.details .pf-c-breadcrumb__item.link-button {
  border: 0;
  background-color: transparent;
  color: #0066cc;
  font-weight: bold;
  white-space: nowrap;
  padding-left: 0;
}

.pf-c-button.pf-m-primary.link-button:hover,
.overview-header.details .pf-c-breadcrumb__item.link-button:hover {
  text-decoration: underline;
}
.pf-c-button.pf-m-link.link-button:hover {
  text-decoration: underline;
}
.noWrap {
  white-space: nowrap;
}

.link-dir-in,
.link-dir-out {
  padding-right: 0.5em;
  font-size: 16px;
}
.link-dir-in {
  color: red;
}

.link-dir-out {
  color: #0066cc;
}

.overview-table tr {
  border-bottom-color: #eaeaea !important;
}

.log-record {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
}

.log-message {
  background-color: #eaeaea;
  width: 100%;
}

div#topologyLegend {
  position: absolute;
  bottom: 2em;
  right: 1em;
  padding: 0;
  width: 14em;
}

div#topologyLegend header {
  padding: 0.5em 1em;
  background-color: #efefef;
  display: flex;
  justify-content: space-between;
}

div#topologyLegend .pf-c-modal-box__body {
  padding: 1em;
}

div#topologyLegend .pf-c-title {
  font-size: unset;
  padding-top: 0.25em;
}

div.qdrTopology .topology-toolbar-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: black;

  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #eaeaea;
  border-bottom: 1px solid #212121;
}

div.qdrTopology .topology-toolbar-button i {
  margin-left: 16px;
  margin-right: 8px;
}

.topology-toolbar-item .pf-c-popover__content {
  padding-bottom: 1em;
}

/* entities/details pages */
.details-table-page {
  padding-left: 0 !important;
}

div.details-table ul.entities-list {
  list-style: none;
  text-align: left;
  padding-left: 0;
  border-right: 1px solid #eaeaea;
  overflow-y: auto;
  max-height: 100%;
}

.entities-list li {
  padding: 0.25em 2em;
  border-left: 2px solid white;
  margin-top: 8px;
}
.entities-list li:hover {
  background-color: #eaeaea;
}

.entities-list li.selected {
  border-left: 2px solid #0066cc;
  background-color: #eaeaea;
}

/*
#entityList {
  max-height: calc(100vh - 140px);
  padding-top: 0.5em;
}
  */

.split-left {
  text-align: left;
  padding-left: 2em;
  padding-bottom: 0.5em;
}

.prompt {
  font-weight: bold;
}
span.entity-type i {
  padding-right: 1em;
  font-style: normal;
  font-family: FontAwesome;
}
span.entity-type i.address-local:before {
  content: "\f0ac";
}
span.entity-type i.address-mobile:before {
  content: "\f109";
}
span.entity-type i.address-router:before {
  content: "\f047";
}
span.entity-type i.address-topo:before {
  content: "\f126";
}

span.entity-type i.link-type-endpoint:before {
  content: "\f109";
}
span.entity-type i.link-type-inter-router:before {
  content: "\f07e";
}
span.entity-type i.link-type-router-control:before {
  content: "\f013";
}

.details-table .pf-l-toolbar {
  margin: 0 !important;
  padding: 1em 1em;
  border-bottom: 1px solid #eaeaea;
}

.details-table table {
  margin-left: 0.25em;
}
.details-header {
  border-bottom: 1px solid #eaeaea;
}

#NotificationDrawer {
  position: absolute;
  top: 4.8em;
  color: black;
  right: 0em;
  max-height: calc(100vh - 80px);
}

.drawer-pf-title {
  display: flex;
  border: 1px solid lightgray;
  background-color: #f3f3f3;
  height: 2em;
  justify-content: space-between;
  position: unset;
}

#NotificationDrawer.compact {
  transition: width 0.25s ease;
  width: 20em;
}

#NotificationDrawer.expanded {
  transition: width 0.25s ease;
  width: 50em;
}

.drawer-pf-title h3 {
  margin: 0.5em 0;
}

.drawer-pf-title svg {
  fill: #333333;
}

.notification-button dl.pf-c-accordion {
  padding-top: 0;
  padding-bottom: 0;
}

.notification-button dl.pf-c-accordion * {
  border-left-color: transparent;
}

.notification-button dl.pf-c-accordion dt {
  background-image: linear-gradient(to bottom, #fafafa 0, #ededed 100%);
  background-repeat: repeat-x;
}

.notification-button dl.pf-c-accordion h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.notification-button button.pf-c-accordion__toggle span {
  font-weight: normal;
  display: block;
  font-size: 14px;
  line-height: normal;
}

.notification-button button.pf-c-accordion__toggle {
  display: flex;
}

.notification-button .pf-c-accordion__toggle svg {
  position: absolute;
  left: 0.5em;
}

.notification-button button.pf-c-accordion__toggle {
  text-align: center;
}

.notification-button .pf-c-accordion__toggle-text {
  margin: auto;
}

.drawer-pf-notification {
  display: flex;
  justify-content: space-between;
}

.drawer-pf-notification-info,
.drawer-pf-notification-message {
  padding-left: 0;
  padding-right: 0;
}

.drawer-pf-notification-content {
  display: flex;
  flex-direction: column;
  margin: auto;
}

#NotificationDrawer .pf-c-accordion__expanded-content-body {
  padding: 0;
}

#NotificationDrawer .drawer-pf-action-link {
  border-left: 1px solid #d1d1d1;
}

#NotificationDrawer button.pf-m-expanded,
#NotificationDrawer dd.pf-m-expanded {
  border-left-color: #0066cc;
}

#NotificationDrawer .panel-body {
  padding-left: 0;
}

#NotificationDrawer .drawer-pf-notification {
  padding-left: 15px;
  font-size: 16px;
}

#NotificationDrawer .drawer-pf-notification.unread {
  font-weight: bold;
  color: black;
}

.details-table-header {
  display: flex;
  justify-content: space-between;
}

.detail-action-button {
  margin-right: 1em;
}

#update-form .pf-c-form__helper-text {
  text-align: left;
}

#alert-list-container {
  position: absolute;
  right: 6em;
  top: 3em;
}

/* login form */
.spinning-clockwise {
  -webkit-animation: spinc 4s linear infinite;
  -moz-animation: spinc 4s linear infinite;
  animation: spinc 4s linear infinite;
}
@-moz-keyframes spinc {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spinc {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spinc {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.spinning-cclockwise {
  -webkit-animation: spincc 4s linear infinite;
  -moz-animation: spincc 4s linear infinite;
  animation: spincc 4s linear infinite;
}
@-moz-keyframes spincc {
  100% {
    -moz-transform: rotate(-360deg);
  }
}
@-webkit-keyframes spincc {
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes spincc {
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

.alert-in {
  animation: fadeIn 0.25s linear;
}
.alert-out {
  animation: fadeOut 1s linear;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

#topicCogWrapper {
  position: relative;
  margin: auto;
  width: 5.5em;
  height: 5em;
}
#topicCogMain {
  width: 4em;
  height: 4em;
  position: absolute;
  top: 0.5em;
  left: 0;
}

#topicCogUpper {
  position: absolute;
  top: 0;
  right: 0;
  width: 2em;
  height: 2em;
}
#topicCogLower {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2em;
  height: 2em;
}

.topic-creating-wrapper {
  text-align: center;
  position: absolute;
  top: 10em;
  right: 10em;
}

.topic-creating-message {
  margin-top: 2em;
}

div.connecting {
  opacity: 0;
}

.connect-error p {
  color: red !important;
}

/* schema page */

.list-group-item-heading {
  text-align: left;
}

.list-group-item-text {
  text-align: left;
}

.list-view-pf-description {
  display: block;
}

.list-group-item-fqt {
  font-weight: bold;
  font-size: 14px;
}

#schema-page .pficon.list-view-pf-icon-sm {
  border: 0;
}

/* other */
.options-panel {
  min-width: 8.7em;
  max-width: 25em;
  padding: 0.5em 1em 0.25em;
  text-align: left;
  margin-top: 0.5em;
}

.chord-addresses {
  text-align: left;
}

.chord-addresses ul {
  margin-top: 0.5em;
}

.qdrTopology .pf-c-accordion__expanded-content-body {
  position: absolute;
  z-index: 100;
  background: white;
  padding: 0;
}

.pf-c-accordion__expanded-content.pf-m-expanded {
  --pf-c-accordion__expanded-content--BorderLeftColor: white !important;
}

button.dropdown-panel-toggle.pf-c-accordion__toggle {
  padding: 0.5em 1em;
}

button.dropdown-panel-toggle.pf-c-accordion__toggle span.pf-c-accordion__toggle-text {
  max-width: 10em;
  padding-right: 1em;
}

.qdrTopology dl.pf-c-accordion dt {
  background-image: none;
}

#NotificationDrawer .pf-c-accordion__expanded-content.pf-m-fixed {
  max-height: none;
}

.dropdown-panel-accordion.pf-c-accordion {
  box-shadow: none;
  border: 1px solid #eaeaea;
  border-bottom: 1px solid black;
}

.pf-c-modal-box.pf-m-sm *:not(.fas) {
  font-family: RedHatDisplay;
}

.form-error {
  color: red;
}

#emptyResults {
  height: auto;
}

.node-name-underline {
  stroke: black;
  stroke-width: 0.8px;
}

.node-name {
  text-decoration: underline;
}

.menu-item-icon {
  padding-right: 0.5em;
}